@cloudscape-design/components-themeable 3.0.1256 → 3.0.1258

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "00b00b517ff58f0dd56cd8a565dac35b9306e04c"
+  "commit": "cf7862b5ecbf778ce72b5cfb5ae000f186d517fb"
 }

package/lib/internal/scss/internal/generated/custom-css-properties/index.scss

@@ -1,146 +1,156 @@
 
     // Build environment
-    $awsui-commit-hash: "00b00b51";
+    $awsui-commit-hash: "cf7862b5";
     // Manually managed CSS-variables
-    $maxContentWidth: --awsui-max-content-width-n6lfw8;
-$minContentWidth: --awsui-min-content-width-n6lfw8;
-$breadcrumbsGap: --awsui-breadcrumbs-gap-n6lfw8;
-$contentGapLeft: --awsui-content-gap-left-n6lfw8;
-$contentGapRight: --awsui-content-gap-right-n6lfw8;
-$contentHeight: --awsui-content-height-n6lfw8;
-$contentLayoutDefaultHorizontalPadding: --awsui-content-layout-default-horizontal-padding-n6lfw8;
-$contentLayoutMaxContentWidth: --awsui-content-layout-max-content-width-n6lfw8;
-$contentLayoutMainGap: --awsui-content-layout-main-gap-n6lfw8;
-$defaultMaxContentWidth: --awsui-default-max-content-width-n6lfw8;
-$defaultMinContentWidth: --awsui-default-min-content-width-n6lfw8;
-$drawerSize: --awsui-drawer-size-n6lfw8;
-$drawerMinSize: --awsui-drawer-min-size-n6lfw8;
-$bottomDrawerSize: --awsui-bottom-drawer-size-n6lfw8;
-$footerHeight: --awsui-footer-height-n6lfw8;
-$headerGap: --awsui-header-gap-n6lfw8;
-$headerHeight: --awsui-header-height-n6lfw8;
-$layoutWidth: --awsui-layout-width-n6lfw8;
-$mainGap: --awsui-main-gap-n6lfw8;
-$mainOffsetLeft: --awsui-main-offset-left-n6lfw8;
-$mainTemplateRows: --awsui-main-template-rows-n6lfw8;
-$mobileBarHeight: --awsui-mobile-bar-height-n6lfw8;
-$notificationsHeight: --awsui-notifications-height-n6lfw8;
-$offsetTop: --awsui-offset-top-n6lfw8;
-$overlapHeight: --awsui-overlap-height-n6lfw8;
-$navigationWidth: --awsui-navigation-width-n6lfw8;
-$splitPanelReportedHeaderSize: --awsui-split-panel-reported-header-size-n6lfw8;
-$splitPanelReportedSize: --awsui-split-panel-reported-size-n6lfw8;
-$splitPanelHeight: --awsui-split-panel-height-n6lfw8;
-$splitPanelMinWidth: --awsui-split-panel-min-width-n6lfw8;
-$splitPanelMaxWidth: --awsui-split-panel-max-width-n6lfw8;
-$toolsMaxWidth: --awsui-tools-max-width-n6lfw8;
-$toolsWidth: --awsui-tools-width-n6lfw8;
-$toolsAnimationStartingOpacity: --awsui-tools-animation-starting-opacity-n6lfw8;
-$contentScrollMargin: --awsui-content-scroll-margin-n6lfw8;
-$flashbarStackDepth: --awsui-flashbar-stack-depth-n6lfw8;
-$flashbarStackIndex: --awsui-flashbar-stack-index-n6lfw8;
-$flashbarStickyBottomMargin: --awsui-flashbar-sticky-bottom-margin-n6lfw8;
-$stackedNotificationsBottomMargin: --awsui-stacked-notifications-bottom-margin-n6lfw8;
-$stackedNotificationsDefaultBottomMargin: --awsui-stacked-notifications-default-bottom-margin-n6lfw8;
-$dropdownDefaultMaxWidth: --awsui-dropdown-default-max-width-n6lfw8;
-$dropdownDefaultMinWidth: --awsui-dropdown-default-min-width-n6lfw8;
-$modalCustomWidth: --awsui-modal-custom-width-n6lfw8;
-$modalCustomHeight: --awsui-modal-custom-height-n6lfw8;
-$spinnerRotatorFrom: --awsui-spinner-rotator-from-n6lfw8;
-$spinnerRotatorTo: --awsui-spinner-rotator-to-n6lfw8;
-$spinnerLineLeftFrom: --awsui-spinner-line-left-from-n6lfw8;
-$spinnerLineLeftTo: --awsui-spinner-line-left-to-n6lfw8;
-$spinnerLineRightFrom: --awsui-spinner-line-right-from-n6lfw8;
-$spinnerLineRightTo: --awsui-spinner-line-right-to-n6lfw8;
-$sliderLabelCount: --awsui-slider-label-count-n6lfw8;
-$sliderTickCount: --awsui-slider-tick-count-n6lfw8;
-$sliderReferenceColumn: --awsui-slider-reference-column-n6lfw8;
-$sliderNextReferenceColumn: --awsui-slider-next-reference-column-n6lfw8;
-$sliderMaxStart: --awsui-slider-max-start-n6lfw8;
-$sliderMinEnd: --awsui-slider-min-end-n6lfw8;
-$sliderRangeInlineSize: --awsui-slider-range-inline-size-n6lfw8;
-$sliderTooltipPosition: --awsui-slider-tooltip-position-n6lfw8;
-$togglesLeftWidth: --awsui-toggles-left-width-n6lfw8;
-$togglesRightWidth: --awsui-toggles-right-width-n6lfw8;
-$promptInputMaxRows: --awsui-prompt-input-max-rows-n6lfw8;
-$promptInputScrollHeight: --awsui-prompt-input-scroll-height-n6lfw8;
-$dragHandleAnimationInlineOffset: --awsui-drag-handle-animation-inline-offset-n6lfw8;
-$dragHandleAnimationBlockOffset: --awsui-drag-handle-animation-block-offset-n6lfw8;
-$styleBackgroundActive: --awsui-style-background-active-n6lfw8;
-$styleBackgroundDefault: --awsui-style-background-default-n6lfw8;
-$styleBackgroundDisabled: --awsui-style-background-disabled-n6lfw8;
-$styleBackgroundHover: --awsui-style-background-hover-n6lfw8;
-$styleBorderColorActive: --awsui-style-border-color-active-n6lfw8;
-$styleBorderColorDefault: --awsui-style-border-color-default-n6lfw8;
-$styleBorderColorDisabled: --awsui-style-border-color-disabled-n6lfw8;
-$styleBorderColorHover: --awsui-style-border-color-hover-n6lfw8;
-$styleColorActive: --awsui-style-color-active-n6lfw8;
-$styleColorDefault: --awsui-style-color-default-n6lfw8;
-$styleColorDisabled: --awsui-style-color-disabled-n6lfw8;
-$styleColorHover: --awsui-style-color-hover-n6lfw8;
-$styleFocusRingBorderColor: --awsui-style-focus-ring-border-color-n6lfw8;
-$styleFocusRingBorderRadius: --awsui-style-focus-ring-border-radius-n6lfw8;
-$styleFocusRingBorderWidth: --awsui-style-focus-ring-border-width-n6lfw8;
-$styleFocusRingBoxShadow: --awsui-style-focus-ring-box-shadow-n6lfw8;
-$styleBoxShadowActive: --awsui-style-box-shadow-active-n6lfw8;
-$styleBoxShadowDefault: --awsui-style-box-shadow-default-n6lfw8;
-$styleBoxShadowDisabled: --awsui-style-box-shadow-disabled-n6lfw8;
-$styleBoxShadowHover: --awsui-style-box-shadow-hover-n6lfw8;
-$styleBackgroundReadonly: --awsui-style-background-readonly-n6lfw8;
-$styleBorderColorReadonly: --awsui-style-border-color-readonly-n6lfw8;
-$styleBoxShadowReadonly: --awsui-style-box-shadow-readonly-n6lfw8;
-$styleColorReadonly: --awsui-style-color-readonly-n6lfw8;
-$styleBackgroundFocus: --awsui-style-background-focus-n6lfw8;
-$styleBorderColorFocus: --awsui-style-border-color-focus-n6lfw8;
-$styleBoxShadowFocus: --awsui-style-box-shadow-focus-n6lfw8;
-$styleColorFocus: --awsui-style-color-focus-n6lfw8;
-$stylePlaceholderColor: --awsui-style-placeholder-color-n6lfw8;
-$stylePlaceholderFontSize: --awsui-style-placeholder-font-size-n6lfw8;
-$stylePlaceholderFontStyle: --awsui-style-placeholder-font-style-n6lfw8;
-$stylePlaceholderFontWeight: --awsui-style-placeholder-font-weight-n6lfw8;
-$styleTabsActiveIndicatorColor: --awsui-style-tabs-active-indicator-color-n6lfw8;
-$styleTabsActiveIndicatorWidth: --awsui-style-tabs-active-indicator-width-n6lfw8;
-$styleTabsActiveIndicatorBorderRadius: --awsui-style-tabs-active-indicator-border-radius-n6lfw8;
-$styleTabsSeparatorColor: --awsui-style-tabs-separator-color-n6lfw8;
-$styleTabsSeparatorWidth: --awsui-style-tabs-separator-width-n6lfw8;
-$alertFocusRingBorderColor: --awsui-alert-focus-ring-border-color-n6lfw8;
-$alertFocusRingBorderRadius: --awsui-alert-focus-ring-border-radius-n6lfw8;
-$alertFocusRingBorderWidth: --awsui-alert-focus-ring-border-width-n6lfw8;
-$alertFocusRingBoxShadow: --awsui-alert-focus-ring-box-shadow-n6lfw8;
-$alertIconColor: --awsui-alert-icon-color-n6lfw8;
-$promptInputStyleBackgroundDefault: --awsui-prompt-input-style-background-default-n6lfw8;
-$promptInputStyleBackgroundDisabled: --awsui-prompt-input-style-background-disabled-n6lfw8;
-$promptInputStyleBackgroundFocus: --awsui-prompt-input-style-background-focus-n6lfw8;
-$promptInputStyleBackgroundHover: --awsui-prompt-input-style-background-hover-n6lfw8;
-$promptInputStyleBackgroundReadonly: --awsui-prompt-input-style-background-readonly-n6lfw8;
-$promptInputStyleBorderColorDefault: --awsui-prompt-input-style-border-color-default-n6lfw8;
-$promptInputStyleBorderColorDisabled: --awsui-prompt-input-style-border-color-disabled-n6lfw8;
-$promptInputStyleBorderColorFocus: --awsui-prompt-input-style-border-color-focus-n6lfw8;
-$promptInputStyleBorderColorHover: --awsui-prompt-input-style-border-color-hover-n6lfw8;
-$promptInputStyleBorderColorReadonly: --awsui-prompt-input-style-border-color-readonly-n6lfw8;
-$promptInputStyleBoxShadowDefault: --awsui-prompt-input-style-box-shadow-default-n6lfw8;
-$promptInputStyleBoxShadowDisabled: --awsui-prompt-input-style-box-shadow-disabled-n6lfw8;
-$promptInputStyleBoxShadowFocus: --awsui-prompt-input-style-box-shadow-focus-n6lfw8;
-$promptInputStyleBoxShadowHover: --awsui-prompt-input-style-box-shadow-hover-n6lfw8;
-$promptInputStyleBoxShadowReadonly: --awsui-prompt-input-style-box-shadow-readonly-n6lfw8;
-$promptInputStyleColorDefault: --awsui-prompt-input-style-color-default-n6lfw8;
-$promptInputStyleColorDisabled: --awsui-prompt-input-style-color-disabled-n6lfw8;
-$promptInputStyleColorFocus: --awsui-prompt-input-style-color-focus-n6lfw8;
-$promptInputStyleColorHover: --awsui-prompt-input-style-color-hover-n6lfw8;
-$promptInputStyleColorReadonly: --awsui-prompt-input-style-color-readonly-n6lfw8;
-$promptInputStylePlaceholderColor: --awsui-prompt-input-style-placeholder-color-n6lfw8;
-$promptInputStylePlaceholderFontSize: --awsui-prompt-input-style-placeholder-font-size-n6lfw8;
-$promptInputStylePlaceholderFontStyle: --awsui-prompt-input-style-placeholder-font-style-n6lfw8;
-$promptInputStylePlaceholderFontWeight: --awsui-prompt-input-style-placeholder-font-weight-n6lfw8;
-$progressBarBackgroundColor: --awsui-progress-bar-background-color-n6lfw8;
-$progressBarBorderRadius: --awsui-progress-bar-border-radius-n6lfw8;
-$progressBarHeight: --awsui-progress-bar-height-n6lfw8;
-$progressValueBackgroundColor: --awsui-progress-value-background-color-n6lfw8;
-$styleSliderTrackBackgroundColor: --awsui-style-slider-track-background-color-n6lfw8;
-$styleSliderRangeBackgroundDefault: --awsui-style-slider-range-background-default-n6lfw8;
-$styleSliderRangeBackgroundActive: --awsui-style-slider-range-background-active-n6lfw8;
-$styleSliderHandleBackgroundDefault: --awsui-style-slider-handle-background-default-n6lfw8;
-$styleSliderHandleBackgroundHover: --awsui-style-slider-handle-background-hover-n6lfw8;
-$styleSliderHandleBackgroundActive: --awsui-style-slider-handle-background-active-n6lfw8;
-$styleSliderHandleBorderRadius: --awsui-style-slider-handle-border-radius-n6lfw8;
+    $maxContentWidth: --awsui-max-content-width-hzjhvz;
+$minContentWidth: --awsui-min-content-width-hzjhvz;
+$breadcrumbsGap: --awsui-breadcrumbs-gap-hzjhvz;
+$contentGapLeft: --awsui-content-gap-left-hzjhvz;
+$contentGapRight: --awsui-content-gap-right-hzjhvz;
+$contentHeight: --awsui-content-height-hzjhvz;
+$contentLayoutDefaultHorizontalPadding: --awsui-content-layout-default-horizontal-padding-hzjhvz;
+$contentLayoutMaxContentWidth: --awsui-content-layout-max-content-width-hzjhvz;
+$contentLayoutMainGap: --awsui-content-layout-main-gap-hzjhvz;
+$defaultMaxContentWidth: --awsui-default-max-content-width-hzjhvz;
+$defaultMinContentWidth: --awsui-default-min-content-width-hzjhvz;
+$drawerSize: --awsui-drawer-size-hzjhvz;
+$drawerMinSize: --awsui-drawer-min-size-hzjhvz;
+$bottomDrawerSize: --awsui-bottom-drawer-size-hzjhvz;
+$footerHeight: --awsui-footer-height-hzjhvz;
+$headerGap: --awsui-header-gap-hzjhvz;
+$headerHeight: --awsui-header-height-hzjhvz;
+$layoutWidth: --awsui-layout-width-hzjhvz;
+$mainGap: --awsui-main-gap-hzjhvz;
+$mainOffsetLeft: --awsui-main-offset-left-hzjhvz;
+$mainTemplateRows: --awsui-main-template-rows-hzjhvz;
+$mobileBarHeight: --awsui-mobile-bar-height-hzjhvz;
+$notificationsHeight: --awsui-notifications-height-hzjhvz;
+$offsetTop: --awsui-offset-top-hzjhvz;
+$overlapHeight: --awsui-overlap-height-hzjhvz;
+$navigationWidth: --awsui-navigation-width-hzjhvz;
+$splitPanelReportedHeaderSize: --awsui-split-panel-reported-header-size-hzjhvz;
+$splitPanelReportedSize: --awsui-split-panel-reported-size-hzjhvz;
+$splitPanelHeight: --awsui-split-panel-height-hzjhvz;
+$splitPanelMinWidth: --awsui-split-panel-min-width-hzjhvz;
+$splitPanelMaxWidth: --awsui-split-panel-max-width-hzjhvz;
+$toolsMaxWidth: --awsui-tools-max-width-hzjhvz;
+$toolsWidth: --awsui-tools-width-hzjhvz;
+$toolsAnimationStartingOpacity: --awsui-tools-animation-starting-opacity-hzjhvz;
+$contentScrollMargin: --awsui-content-scroll-margin-hzjhvz;
+$flashbarStackDepth: --awsui-flashbar-stack-depth-hzjhvz;
+$flashbarStackIndex: --awsui-flashbar-stack-index-hzjhvz;
+$flashbarStickyBottomMargin: --awsui-flashbar-sticky-bottom-margin-hzjhvz;
+$stackedNotificationsBottomMargin: --awsui-stacked-notifications-bottom-margin-hzjhvz;
+$stackedNotificationsDefaultBottomMargin: --awsui-stacked-notifications-default-bottom-margin-hzjhvz;
+$dropdownDefaultMaxWidth: --awsui-dropdown-default-max-width-hzjhvz;
+$dropdownDefaultMinWidth: --awsui-dropdown-default-min-width-hzjhvz;
+$modalCustomWidth: --awsui-modal-custom-width-hzjhvz;
+$modalCustomHeight: --awsui-modal-custom-height-hzjhvz;
+$spinnerRotatorFrom: --awsui-spinner-rotator-from-hzjhvz;
+$spinnerRotatorTo: --awsui-spinner-rotator-to-hzjhvz;
+$spinnerLineLeftFrom: --awsui-spinner-line-left-from-hzjhvz;
+$spinnerLineLeftTo: --awsui-spinner-line-left-to-hzjhvz;
+$spinnerLineRightFrom: --awsui-spinner-line-right-from-hzjhvz;
+$spinnerLineRightTo: --awsui-spinner-line-right-to-hzjhvz;
+$sliderLabelCount: --awsui-slider-label-count-hzjhvz;
+$sliderTickCount: --awsui-slider-tick-count-hzjhvz;
+$sliderReferenceColumn: --awsui-slider-reference-column-hzjhvz;
+$sliderNextReferenceColumn: --awsui-slider-next-reference-column-hzjhvz;
+$sliderMaxStart: --awsui-slider-max-start-hzjhvz;
+$sliderMinEnd: --awsui-slider-min-end-hzjhvz;
+$sliderRangeInlineSize: --awsui-slider-range-inline-size-hzjhvz;
+$sliderTooltipPosition: --awsui-slider-tooltip-position-hzjhvz;
+$togglesLeftWidth: --awsui-toggles-left-width-hzjhvz;
+$togglesRightWidth: --awsui-toggles-right-width-hzjhvz;
+$promptInputMaxRows: --awsui-prompt-input-max-rows-hzjhvz;
+$promptInputScrollHeight: --awsui-prompt-input-scroll-height-hzjhvz;
+$dragHandleAnimationInlineOffset: --awsui-drag-handle-animation-inline-offset-hzjhvz;
+$dragHandleAnimationBlockOffset: --awsui-drag-handle-animation-block-offset-hzjhvz;
+$styleBackgroundActive: --awsui-style-background-active-hzjhvz;
+$styleBackgroundDefault: --awsui-style-background-default-hzjhvz;
+$styleBackgroundDisabled: --awsui-style-background-disabled-hzjhvz;
+$styleBackgroundHover: --awsui-style-background-hover-hzjhvz;
+$styleBorderColorActive: --awsui-style-border-color-active-hzjhvz;
+$styleBorderColorDefault: --awsui-style-border-color-default-hzjhvz;
+$styleBorderColorDisabled: --awsui-style-border-color-disabled-hzjhvz;
+$styleBorderColorHover: --awsui-style-border-color-hover-hzjhvz;
+$styleColorActive: --awsui-style-color-active-hzjhvz;
+$styleColorDefault: --awsui-style-color-default-hzjhvz;
+$styleColorDisabled: --awsui-style-color-disabled-hzjhvz;
+$styleColorHover: --awsui-style-color-hover-hzjhvz;
+$styleFocusRingBorderColor: --awsui-style-focus-ring-border-color-hzjhvz;
+$styleFocusRingBorderRadius: --awsui-style-focus-ring-border-radius-hzjhvz;
+$styleFocusRingBorderWidth: --awsui-style-focus-ring-border-width-hzjhvz;
+$styleFocusRingBoxShadow: --awsui-style-focus-ring-box-shadow-hzjhvz;
+$styleBoxShadowActive: --awsui-style-box-shadow-active-hzjhvz;
+$styleBoxShadowDefault: --awsui-style-box-shadow-default-hzjhvz;
+$styleBoxShadowDisabled: --awsui-style-box-shadow-disabled-hzjhvz;
+$styleBoxShadowHover: --awsui-style-box-shadow-hover-hzjhvz;
+$styleBackgroundReadonly: --awsui-style-background-readonly-hzjhvz;
+$styleBorderColorReadonly: --awsui-style-border-color-readonly-hzjhvz;
+$styleBoxShadowReadonly: --awsui-style-box-shadow-readonly-hzjhvz;
+$styleColorReadonly: --awsui-style-color-readonly-hzjhvz;
+$styleBackgroundFocus: --awsui-style-background-focus-hzjhvz;
+$styleBorderColorFocus: --awsui-style-border-color-focus-hzjhvz;
+$styleBoxShadowFocus: --awsui-style-box-shadow-focus-hzjhvz;
+$styleColorFocus: --awsui-style-color-focus-hzjhvz;
+$stylePlaceholderColor: --awsui-style-placeholder-color-hzjhvz;
+$stylePlaceholderFontSize: --awsui-style-placeholder-font-size-hzjhvz;
+$stylePlaceholderFontStyle: --awsui-style-placeholder-font-style-hzjhvz;
+$stylePlaceholderFontWeight: --awsui-style-placeholder-font-weight-hzjhvz;
+$styleTabsActiveIndicatorColor: --awsui-style-tabs-active-indicator-color-hzjhvz;
+$styleTabsActiveIndicatorWidth: --awsui-style-tabs-active-indicator-width-hzjhvz;
+$styleTabsActiveIndicatorBorderRadius: --awsui-style-tabs-active-indicator-border-radius-hzjhvz;
+$styleTabsSeparatorColor: --awsui-style-tabs-separator-color-hzjhvz;
+$styleTabsSeparatorWidth: --awsui-style-tabs-separator-width-hzjhvz;
+$alertFocusRingBorderColor: --awsui-alert-focus-ring-border-color-hzjhvz;
+$alertFocusRingBorderRadius: --awsui-alert-focus-ring-border-radius-hzjhvz;
+$alertFocusRingBorderWidth: --awsui-alert-focus-ring-border-width-hzjhvz;
+$alertFocusRingBoxShadow: --awsui-alert-focus-ring-box-shadow-hzjhvz;
+$alertIconColor: --awsui-alert-icon-color-hzjhvz;
+$promptInputStyleBackgroundDefault: --awsui-prompt-input-style-background-default-hzjhvz;
+$promptInputStyleBackgroundDisabled: --awsui-prompt-input-style-background-disabled-hzjhvz;
+$promptInputStyleBackgroundFocus: --awsui-prompt-input-style-background-focus-hzjhvz;
+$promptInputStyleBackgroundHover: --awsui-prompt-input-style-background-hover-hzjhvz;
+$promptInputStyleBackgroundReadonly: --awsui-prompt-input-style-background-readonly-hzjhvz;
+$promptInputStyleBorderColorDefault: --awsui-prompt-input-style-border-color-default-hzjhvz;
+$promptInputStyleBorderColorDisabled: --awsui-prompt-input-style-border-color-disabled-hzjhvz;
+$promptInputStyleBorderColorFocus: --awsui-prompt-input-style-border-color-focus-hzjhvz;
+$promptInputStyleBorderColorHover: --awsui-prompt-input-style-border-color-hover-hzjhvz;
+$promptInputStyleBorderColorReadonly: --awsui-prompt-input-style-border-color-readonly-hzjhvz;
+$promptInputStyleBoxShadowDefault: --awsui-prompt-input-style-box-shadow-default-hzjhvz;
+$promptInputStyleBoxShadowDisabled: --awsui-prompt-input-style-box-shadow-disabled-hzjhvz;
+$promptInputStyleBoxShadowFocus: --awsui-prompt-input-style-box-shadow-focus-hzjhvz;
+$promptInputStyleBoxShadowHover: --awsui-prompt-input-style-box-shadow-hover-hzjhvz;
+$promptInputStyleBoxShadowReadonly: --awsui-prompt-input-style-box-shadow-readonly-hzjhvz;
+$promptInputStyleColorDefault: --awsui-prompt-input-style-color-default-hzjhvz;
+$promptInputStyleColorDisabled: --awsui-prompt-input-style-color-disabled-hzjhvz;
+$promptInputStyleColorFocus: --awsui-prompt-input-style-color-focus-hzjhvz;
+$promptInputStyleColorHover: --awsui-prompt-input-style-color-hover-hzjhvz;
+$promptInputStyleColorReadonly: --awsui-prompt-input-style-color-readonly-hzjhvz;
+$promptInputStylePlaceholderColor: --awsui-prompt-input-style-placeholder-color-hzjhvz;
+$promptInputStylePlaceholderFontSize: --awsui-prompt-input-style-placeholder-font-size-hzjhvz;
+$promptInputStylePlaceholderFontStyle: --awsui-prompt-input-style-placeholder-font-style-hzjhvz;
+$promptInputStylePlaceholderFontWeight: --awsui-prompt-input-style-placeholder-font-weight-hzjhvz;
+$progressBarBackgroundColor: --awsui-progress-bar-background-color-hzjhvz;
+$progressBarBorderRadius: --awsui-progress-bar-border-radius-hzjhvz;
+$progressBarHeight: --awsui-progress-bar-height-hzjhvz;
+$progressValueBackgroundColor: --awsui-progress-value-background-color-hzjhvz;
+$styleSliderTrackBackgroundColor: --awsui-style-slider-track-background-color-hzjhvz;
+$styleSliderRangeBackgroundDefault: --awsui-style-slider-range-background-default-hzjhvz;
+$styleSliderRangeBackgroundActive: --awsui-style-slider-range-background-active-hzjhvz;
+$styleSliderHandleBackgroundDefault: --awsui-style-slider-handle-background-default-hzjhvz;
+$styleSliderHandleBackgroundHover: --awsui-style-slider-handle-background-hover-hzjhvz;
+$styleSliderHandleBackgroundActive: --awsui-style-slider-handle-background-active-hzjhvz;
+$styleSliderHandleBorderRadius: --awsui-style-slider-handle-border-radius-hzjhvz;
+$tokenStyleBackgroundDefault: --awsui-token-style-background-default-hzjhvz;
+$tokenStyleBackgroundDisabled: --awsui-token-style-background-disabled-hzjhvz;
+$tokenStyleBackgroundReadOnly: --awsui-token-style-background-read-only-hzjhvz;
+$tokenStyleBorderColorDefault: --awsui-token-style-border-color-default-hzjhvz;
+$tokenStyleBorderColorDisabled: --awsui-token-style-border-color-disabled-hzjhvz;
+$tokenStyleBorderColorReadOnly: --awsui-token-style-border-color-read-only-hzjhvz;
+$tokenStyleDismissColorDefault: --awsui-token-style-dismiss-color-default-hzjhvz;
+$tokenStyleDismissColorDisabled: --awsui-token-style-dismiss-color-disabled-hzjhvz;
+$tokenStyleDismissColorHover: --awsui-token-style-dismiss-color-hover-hzjhvz;
+$tokenStyleDismissColorReadOnly: --awsui-token-style-dismiss-color-read-only-hzjhvz;
     

package/lib/internal/scss/token/mixins.scss

@@ -4,20 +4,23 @@
 */
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
+@use '../internal/generated/custom-css-properties/index.scss' as custom-props;
 @use './constants' as constants;
 
 @mixin token-box-styles {
   position: relative;
   block-size: 100%;
-  border-block: awsui.$border-width-token solid constants.$token-border-color;
-  border-inline: awsui.$border-width-token solid constants.$token-border-color;
+  border-block: awsui.$border-width-token solid
+    var(#{custom-props.$tokenStyleBorderColorDefault}, constants.$token-border-color);
+  border-inline: awsui.$border-width-token solid
+    var(#{custom-props.$tokenStyleBorderColorDefault}, constants.$token-border-color);
   padding-block-start: styles.$control-padding-vertical;
   padding-block-end: styles.$control-padding-vertical;
   padding-inline-start: styles.$control-padding-horizontal;
   padding-inline-end: awsui.$space-xxs;
   display: flex;
   align-items: flex-start;
-  background: constants.$token-background;
+  background: var(#{custom-props.$tokenStyleBackgroundDefault}, constants.$token-background);
   border-start-start-radius: awsui.$border-radius-token;
   border-start-end-radius: awsui.$border-radius-token;
   border-end-start-radius: awsui.$border-radius-token;
@@ -30,13 +33,15 @@
   position: relative;
   block-size: constants.$token-max-height-inline;
   max-block-size: constants.$token-max-height-inline;
-  border-block: awsui.$border-width-field solid constants.$token-border-color;
-  border-inline: awsui.$border-width-field solid constants.$token-border-color;
+  border-block: awsui.$border-width-field solid
+    var(#{custom-props.$tokenStyleBorderColorDefault}, constants.$token-border-color);
+  border-inline: awsui.$border-width-field solid
+    var(#{custom-props.$tokenStyleBorderColorDefault}, constants.$token-border-color);
   padding-inline-start: awsui.$space-scaled-xxs;
   padding-inline-end: awsui.$space-scaled-xxs;
   display: flex;
   align-items: center;
-  background: constants.$token-background;
+  background: var(#{custom-props.$tokenStyleBackgroundDefault}, constants.$token-background);
   border-start-start-radius: awsui.$space-scaled-xxs;
   border-start-end-radius: awsui.$space-scaled-xxs;
   border-end-start-radius: awsui.$space-scaled-xxs;

package/lib/internal/scss/token/styles.scss

@@ -5,7 +5,9 @@
 
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
+@use '../internal/styles/foundation' as foundation;
 @use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
+@use '../internal/generated/custom-css-properties/index.scss' as custom-props;
 @use './constants' as constants;
 @use './mixins.scss' as mixins;
 
@@ -21,12 +23,20 @@
   border-inline: awsui.$border-width-field solid transparent;
   padding-block: 0;
   padding-inline: awsui.$space-xxs;
-  color: awsui.$color-text-button-inline-icon-default;
+  color: var(#{custom-props.$tokenStyleDismissColorDefault}, awsui.$color-text-button-inline-icon-default);
   background-color: transparent;
   cursor: pointer;
 
+  #{custom-props.$styleFocusRingBoxShadow}: 0 0 0
+    var(#{custom-props.$styleFocusRingBorderWidth}, foundation.$box-shadow-focused-width)
+    var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused);
+
   @include focus-visible.when-visible {
-    @include styles.focus-highlight(0px);
+    @include styles.focus-highlight(
+      $gutter: 0px,
+      $border-radius: var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring),
+      $box-shadow: var(#{custom-props.$styleFocusRingBoxShadow})
+    );
   }
 
   &:focus {
@@ -35,7 +45,7 @@
   }
 
   &:hover {
-    color: awsui.$color-text-button-inline-icon-hover;
+    color: var(#{custom-props.$tokenStyleDismissColorHover}, awsui.$color-text-button-inline-icon-hover);
   }
 
   &-inline {
@@ -99,21 +109,29 @@
 
 .token-box-readonly,
 .token-box-disabled {
-  border-color: awsui.$color-border-input-disabled;
-  background-color: awsui.$color-background-container-content;
   pointer-events: none;
 
   > .dismiss-button {
-    color: awsui.$color-text-button-inline-icon-disabled;
     cursor: initial;
+  }
+}
+
+.token-box-readonly {
+  border-color: var(#{custom-props.$tokenStyleBorderColorReadOnly}, awsui.$color-border-input-disabled);
+  background: var(#{custom-props.$tokenStyleBackgroundReadOnly}, awsui.$color-background-container-content);
 
-    &:hover {
-      color: awsui.$color-text-button-inline-icon-disabled;
-    }
+  > .dismiss-button {
+    color: var(#{custom-props.$tokenStyleDismissColorReadOnly}, awsui.$color-text-button-inline-icon-disabled);
   }
 }
 
 .token-box-disabled {
-  border-color: awsui.$color-border-control-disabled;
+  border-color: var(#{custom-props.$tokenStyleBorderColorDisabled}, awsui.$color-border-control-disabled);
+  background: var(#{custom-props.$tokenStyleBackgroundDisabled}, awsui.$color-background-container-content);
   color: awsui.$color-text-disabled;
+
+  // stylelint-disable-next-line no-descending-specificity
+  > .dismiss-button {
+    color: var(#{custom-props.$tokenStyleDismissColorDisabled}, awsui.$color-text-button-inline-icon-disabled);
+  }
 }

package/lib/internal/template/alert/styles.css.js

@@ -1,32 +1,32 @@
 
     import './styles.scoped.css';
     export default {
-  "alert": "awsui_alert_mx3cw_1uiie_193",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_mx3cw_1uiie_1",
-  "root": "awsui_root_mx3cw_1uiie_215",
-  "hidden": "awsui_hidden_mx3cw_1uiie_250",
-  "alert-wrapper": "awsui_alert-wrapper_mx3cw_1uiie_299",
-  "initial-hidden": "awsui_initial-hidden_mx3cw_1uiie_311",
-  "header": "awsui_header_mx3cw_1uiie_316",
-  "header-replacement": "awsui_header-replacement_mx3cw_1uiie_317",
-  "action": "awsui_action_mx3cw_1uiie_321",
-  "action-slot": "awsui_action-slot_mx3cw_1uiie_325",
-  "action-button": "awsui_action-button_mx3cw_1uiie_326",
-  "alert-focus-wrapper": "awsui_alert-focus-wrapper_mx3cw_1uiie_330",
-  "text": "awsui_text_mx3cw_1uiie_361",
-  "icon": "awsui_icon_mx3cw_1uiie_368",
-  "message": "awsui_message_mx3cw_1uiie_371",
-  "action-wrapped": "awsui_action-wrapped_mx3cw_1uiie_375",
-  "icon-size-medium": "awsui_icon-size-medium_mx3cw_1uiie_379",
-  "icon-size-big": "awsui_icon-size-big_mx3cw_1uiie_383",
-  "icon-size-normal": "awsui_icon-size-normal_mx3cw_1uiie_387",
-  "content": "awsui_content_mx3cw_1uiie_391",
-  "content-replacement": "awsui_content-replacement_mx3cw_1uiie_392",
-  "dismiss": "awsui_dismiss_mx3cw_1uiie_396",
-  "dismiss-button": "awsui_dismiss-button_mx3cw_1uiie_401",
-  "type-error": "awsui_type-error_mx3cw_1uiie_405",
-  "type-warning": "awsui_type-warning_mx3cw_1uiie_413",
-  "type-success": "awsui_type-success_mx3cw_1uiie_421",
-  "type-info": "awsui_type-info_mx3cw_1uiie_429"
+  "alert": "awsui_alert_mx3cw_1737l_193",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_mx3cw_1737l_1",
+  "root": "awsui_root_mx3cw_1737l_215",
+  "hidden": "awsui_hidden_mx3cw_1737l_250",
+  "alert-wrapper": "awsui_alert-wrapper_mx3cw_1737l_299",
+  "initial-hidden": "awsui_initial-hidden_mx3cw_1737l_311",
+  "header": "awsui_header_mx3cw_1737l_316",
+  "header-replacement": "awsui_header-replacement_mx3cw_1737l_317",
+  "action": "awsui_action_mx3cw_1737l_321",
+  "action-slot": "awsui_action-slot_mx3cw_1737l_325",
+  "action-button": "awsui_action-button_mx3cw_1737l_326",
+  "alert-focus-wrapper": "awsui_alert-focus-wrapper_mx3cw_1737l_330",
+  "text": "awsui_text_mx3cw_1737l_361",
+  "icon": "awsui_icon_mx3cw_1737l_368",
+  "message": "awsui_message_mx3cw_1737l_371",
+  "action-wrapped": "awsui_action-wrapped_mx3cw_1737l_375",
+  "icon-size-medium": "awsui_icon-size-medium_mx3cw_1737l_379",
+  "icon-size-big": "awsui_icon-size-big_mx3cw_1737l_383",
+  "icon-size-normal": "awsui_icon-size-normal_mx3cw_1737l_387",
+  "content": "awsui_content_mx3cw_1737l_391",
+  "content-replacement": "awsui_content-replacement_mx3cw_1737l_392",
+  "dismiss": "awsui_dismiss_mx3cw_1737l_396",
+  "dismiss-button": "awsui_dismiss-button_mx3cw_1737l_401",
+  "type-error": "awsui_type-error_mx3cw_1737l_405",
+  "type-warning": "awsui_type-warning_mx3cw_1737l_413",
+  "type-success": "awsui_type-success_mx3cw_1737l_421",
+  "type-info": "awsui_type-info_mx3cw_1737l_429"
 };