[Widgets] Support Cloudscape theming options

[tracy-french]

This issue is dependent on https://github.com/awslabs/iot-app-kit/issues/2667.

Note: This issue will be updated with additional theming options as we understand which we need.

Extend useTheme to support additional Cloudscape theming options. Please update the type SupportedCloudscapeDesignTokens to the following:

type SupportedCloudscapeDesignTokens = Pick<
  Theme['tokens'],
  | 'borderRadiusButton'
  | 'borderRadiusContainer'
  | 'borderRadiusControlCircularFocusRing'
  | 'borderRadiusControlDefaultFocusRing'
  | 'borderRadiusDropdown'
  | 'borderRadiusInput'
  | 'borderRadiusItem'
  | 'borderRadiusToken'
  | 'colorBackgroundButtonNormalActive'
  | 'colorBackgroundButtonNormalDefault'
  | 'colorBackgroundButtonNormalDisabled'
  | 'colorBackgroundButtonNormalHover'
  | 'colorBackgroundButtonPrimaryActive'
  | 'colorBackgroundButtonPrimaryDefault'
  | 'colorBackgroundButtonPrimaryDisabled'
  | 'colorBackgroundButtonPrimaryHover'
  | 'colorBackgroundControlChecked'
  | 'colorBackgroundControlDefault'
  | 'colorBackgroundControlDisabled'
  | 'colorBackgroundDropdownItemDefault'
  | 'colorBackgroundDropdownItemFilterMatch'
  | 'colorBackgroundDropdownItemHover'
  | 'colorBackgroundInputDefault'
  | 'colorBackgroundInputDisabled'
  | 'colorBackgroundItemSelected'
  | 'colorBorderButtonNormalActive'
  | 'colorBorderButtonNormalDefault'
  | 'colorBorderButtonNormalDisabled'
  | 'colorBorderButtonNormalHover'
  | 'colorBorderButtonPrimaryDisabled'
  | 'colorBorderDropdownItemFocused'
  | 'colorBorderDropdownItemHover'
  | 'colorBorderInputDefault'
  | 'colorBorderInputFocused'
  | 'colorBorderItemFocused'
  | 'colorBorderItemSelected'
  | 'colorForegroundControlDefault'
  | 'colorForegroundControlDisabled'
  | 'colorTextAccent'
  | 'colorTextBodyDefault'
  | 'colorTextBodySecondary'
  | 'colorTextBreadcrumbCurrent'
  | 'colorTextBreadcrumbIcon'
  | 'colorTextButtonNormalActive'
  | 'colorTextButtonNormalDefault'
  | 'colorTextButtonNormalHover'
  | 'colorTextButtonPrimaryActive'
  | 'colorTextButtonPrimaryDefault'
  | 'colorTextButtonPrimaryHover'
  | 'colorTextCounter'
  | 'colorTextDropdownItemFilterMatch'
  | 'colorTextDropdownItemHighlighted'
  | 'colorTextEmpty'
  | 'colorTextFormDefault'
  | 'colorTextFormSecondary'
  | 'colorTextHeadingDefault'
  | 'colorTextHeadingSecondary'
  | 'colorTextInputDisabled'
  | 'colorTextInputPlaceholder'
  | 'colorTextLinkDefault'
  | 'colorTextLinkHover'
  | 'fontFamilyBase'

As part of this work, ensure setting the theming option with useTheme updates the styles to all appropriate elements for all react-components and the dashboard resource explorer. If there are custom components and it makes sense for them to be changed with the theming option, please either replace the component elements with a Cloudscape component or use the Cloudscape design tokens to ensure the styles update correctly.

Use https://cloudscape.design/foundation/visual-foundation/design-tokens/ to understand the tokens and what they correspond to.

Please complete the work in increments, instead of doing all of the changes over time. For example, the button items, or even just the button color items, could be grouped together in a single change. This list will continue to grow until we have all of the necessary theming options.