@cloudscape-design/components-themeable 3.0.1181 → 3.0.1183

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "aae4707d8daf9cf83f697e41e3b4578c62a30e9d"
+  "commit": "15e15bbcd56ea57ec78430a3713b125deeeaf63a"
 }

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

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

package/lib/internal/scss/slider/mixins.scss

@@ -4,6 +4,7 @@
 */
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
+@use '../internal/generated/custom-css-properties/index.scss' as custom-props;
 
 $thumb-size: awsui.$space-m;
 $thumb-readonly-size: awsui.$space-s;
@@ -11,14 +12,14 @@ $border-radius-slider-thumb: 50%;
 
 @mixin base-thumb-styles {
   appearance: none;
-  background: awsui.$color-background-slider-handle-default;
-  border-color: awsui.$color-background-slider-handle-default;
+  background: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-slider-handle-default);
+  border-color: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-slider-handle-default);
   border-block-width: 2px;
   border-inline-width: 2px;
-  border-start-start-radius: $border-radius-slider-thumb;
-  border-start-end-radius: $border-radius-slider-thumb;
-  border-end-start-radius: $border-radius-slider-thumb;
-  border-end-end-radius: $border-radius-slider-thumb;
+  border-start-start-radius: var(#{custom-props.$styleSliderHandleBorderRadius}, $border-radius-slider-thumb);
+  border-start-end-radius: var(#{custom-props.$styleSliderHandleBorderRadius}, $border-radius-slider-thumb);
+  border-end-start-radius: var(#{custom-props.$styleSliderHandleBorderRadius}, $border-radius-slider-thumb);
+  border-end-end-radius: var(#{custom-props.$styleSliderHandleBorderRadius}, $border-radius-slider-thumb);
   box-shadow: none;
 
   cursor: pointer;
@@ -29,9 +30,10 @@ $border-radius-slider-thumb: 50%;
 }
 
 @mixin base-thumb-hover-styles {
+  background: var(#{custom-props.$styleSliderHandleBackgroundHover}, awsui.$color-background-slider-handle-default);
   box-shadow:
     0px 0 0 2px awsui.$color-background-slider-handle-ring,
-    0 0 0 4px awsui.$color-background-slider-handle-default;
+    0 0 0 4px var(#{custom-props.$styleSliderHandleBackgroundHover}, awsui.$color-background-slider-handle-default);
 }
 
 @mixin base-thumb-focus-styles {
@@ -39,10 +41,10 @@ $border-radius-slider-thumb: 50%;
   inline-size: 20px;
   box-shadow:
     0px 0 0 2px awsui.$color-background-slider-handle-ring,
-    0 0 0 4px awsui.$color-background-slider-handle-active;
-  background: awsui.$color-background-slider-handle-active;
+    0 0 0 4px var(#{custom-props.$styleSliderHandleBackgroundActive}, awsui.$color-background-slider-handle-active);
+  background: var(#{custom-props.$styleSliderHandleBackgroundActive}, awsui.$color-background-slider-handle-active);
 
-  border-color: awsui.$color-background-slider-handle-active;
+  border-color: var(#{custom-props.$styleSliderHandleBackgroundActive}, awsui.$color-background-slider-handle-active);
   border-block-width: 2px;
   border-inline-width: 2px;
 }
@@ -63,8 +65,8 @@ $border-radius-slider-thumb: 50%;
 @mixin base-thumb-disabled-styles {
   block-size: $thumb-size;
   inline-size: $thumb-size;
-  background-color: awsui.$color-background-control-disabled;
-  border-color: awsui.$color-background-control-disabled;
+  background-color: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-control-disabled);
+  border-color: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-control-disabled);
   box-shadow: none;
   pointer-events: none;
 }
@@ -72,44 +74,50 @@ $border-radius-slider-thumb: 50%;
 @mixin base-thumb-readonly-styles {
   block-size: $thumb-readonly-size;
   inline-size: $thumb-readonly-size;
-  background-color: awsui.$color-foreground-control-read-only;
-  border-color: awsui.$color-foreground-control-read-only;
+  background-color: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-foreground-control-read-only);
+  border-color: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-foreground-control-read-only);
   box-shadow: none;
   pointer-events: none;
 }
 
 @mixin error-thumb-focus-styles {
-  background-color: awsui.$color-background-slider-error-pressed;
+  background-color: var(
+    #{custom-props.$styleSliderHandleBackgroundActive},
+    awsui.$color-background-slider-error-pressed
+  );
   border-block-width: 2px;
   border-inline-width: 2px;
-  border-color: awsui.$color-background-slider-error-pressed;
+  border-color: var(#{custom-props.$styleSliderHandleBackgroundActive}, awsui.$color-background-slider-error-pressed);
 
   box-shadow:
     0px 0 0 2px awsui.$color-background-slider-handle-ring,
-    0 0 0 4px awsui.$color-background-slider-error-pressed;
+    0 0 0 4px var(#{custom-props.$styleSliderHandleBackgroundActive}, awsui.$color-background-slider-error-pressed);
 }
 
 @mixin warning-thumb-focus-styles {
-  background-color: awsui.$color-background-slider-warning-pressed;
+  background-color: var(
+    #{custom-props.$styleSliderHandleBackgroundActive},
+    awsui.$color-background-slider-warning-pressed
+  );
   border-block-width: 2px;
   border-inline-width: 2px;
-  border-color: awsui.$color-background-slider-warning-pressed;
+  border-color: var(#{custom-props.$styleSliderHandleBackgroundActive}, awsui.$color-background-slider-warning-pressed);
 
   box-shadow:
     0px 0 0 2px awsui.$color-background-slider-handle-ring,
-    0 0 0 4px awsui.$color-background-slider-warning-pressed;
+    0 0 0 4px var(#{custom-props.$styleSliderHandleBackgroundActive}, awsui.$color-background-slider-warning-pressed);
 }
 
 @mixin error-thumb-hover-styles {
-  background-color: awsui.$color-text-status-error;
+  background-color: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-text-status-error);
   box-shadow:
     0px 0 0 2px awsui.$color-background-slider-handle-ring,
-    0 0 0 4px awsui.$color-text-status-error;
+    0 0 0 4px var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-text-status-error);
 }
 
 @mixin warning-thumb-hover-styles {
-  background-color: awsui.$color-text-status-warning;
+  background-color: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-text-status-warning);
   box-shadow:
     0px 0 0 2px awsui.$color-background-slider-handle-ring,
-    0 0 0 4px awsui.$color-text-status-warning;
+    0 0 0 4px var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-text-status-warning);
 }

package/lib/internal/scss/slider/styles.scss

@@ -34,54 +34,75 @@
   }
 
   &-track {
-    background-color: awsui.$color-background-slider-track;
+    background-color: var(
+      #{custom-props.$styleSliderTrackBackgroundColor},
+      awsui.$color-background-slider-track-default
+    );
     inline-size: calc(100% + mixins.$thumb-size);
     block-size: 2px;
     cursor: pointer;
 
     &.disabled {
       cursor: default;
-      background-color: awsui.$color-background-control-disabled;
+      background-color: var(#{custom-props.$styleSliderTrackBackgroundColor}, awsui.$color-background-control-disabled);
     }
 
     &.readonly:not(&.disabled) {
       cursor: default;
-      background-color: awsui.$color-background-control-disabled;
+      background-color: var(#{custom-props.$styleSliderTrackBackgroundColor}, awsui.$color-background-control-disabled);
     }
   }
 
   &-range {
-    background-color: awsui.$color-background-slider-handle-default;
+    background-color: var(
+      #{custom-props.$styleSliderRangeBackgroundDefault},
+      awsui.$color-background-slider-range-default
+    );
     block-size: 4px;
     inline-size: calc(var(#{custom-props.$sliderRangeInlineSize}) + mixins.$thumb-size);
 
     &.error {
-      background-color: awsui.$color-text-status-error;
+      background-color: var(#{custom-props.$styleSliderRangeBackgroundDefault}, awsui.$color-text-status-error);
     }
 
     &.warning {
-      background-color: awsui.$color-text-status-warning;
+      background-color: var(#{custom-props.$styleSliderRangeBackgroundDefault}, awsui.$color-text-status-warning);
     }
 
     &.active {
-      background-color: awsui.$color-background-slider-handle-active;
+      background-color: var(
+        #{custom-props.$styleSliderRangeBackgroundActive},
+        awsui.$color-background-slider-range-active
+      );
     }
 
     &.error-active {
-      background-color: awsui.$color-background-slider-error-pressed;
+      background-color: var(
+        #{custom-props.$styleSliderRangeBackgroundActive},
+        awsui.$color-background-slider-error-pressed
+      );
     }
 
     &.warning-active {
-      background-color: awsui.$color-background-slider-warning-pressed;
+      background-color: var(
+        #{custom-props.$styleSliderRangeBackgroundActive},
+        awsui.$color-background-slider-warning-pressed
+      );
     }
 
     &.disabled {
-      background-color: awsui.$color-background-control-disabled;
+      background-color: var(
+        #{custom-props.$styleSliderRangeBackgroundDefault},
+        awsui.$color-background-control-disabled
+      );
     }
 
     &.readonly:not(&.disabled) {
       inline-size: calc(var(#{custom-props.$sliderRangeInlineSize}) + mixins.$thumb-readonly-size);
-      background-color: awsui.$color-foreground-control-read-only;
+      background-color: var(
+        #{custom-props.$styleSliderRangeBackgroundDefault},
+        awsui.$color-foreground-control-read-only
+      );
     }
   }
 }
@@ -169,7 +190,7 @@
   inline-size: awsui.$space-xxxs;
   padding-inline: 0;
   padding-block: 0;
-  background: awsui.$color-background-slider-track;
+  background: var(#{custom-props.$styleSliderTrackBackgroundColor}, awsui.$color-background-slider-track-default);
   inset-block-start: -4px;
 
   &.middle {
@@ -180,39 +201,45 @@
   }
 
   &.filled {
-    background: awsui.$color-background-slider-handle-default;
+    background: var(#{custom-props.$styleSliderRangeBackgroundDefault}, awsui.$color-background-slider-range-default);
 
     &.readonly:not(.disabled) {
-      background: awsui.$color-foreground-control-read-only;
+      background: var(#{custom-props.$styleSliderTrackBackgroundColor}, awsui.$color-foreground-control-read-only);
     }
   }
 
   &.active {
-    background: awsui.$color-background-slider-handle-active;
+    background: var(#{custom-props.$styleSliderRangeBackgroundActive}, awsui.$color-background-slider-range-active);
   }
 
   &.error {
-    background: awsui.$color-text-status-error;
+    background: var(#{custom-props.$styleSliderTrackBackgroundColor}, awsui.$color-text-status-error);
   }
 
   &.warning {
-    background: awsui.$color-text-status-warning;
+    background: var(#{custom-props.$styleSliderTrackBackgroundColor}, awsui.$color-text-status-warning);
   }
 
   &.error-active {
-    background-color: awsui.$color-background-slider-error-pressed;
+    background-color: var(
+      #{custom-props.$styleSliderRangeBackgroundActive},
+      awsui.$color-background-slider-error-pressed
+    );
   }
 
   &.warning-active {
-    background-color: awsui.$color-background-slider-warning-pressed;
+    background-color: var(
+      #{custom-props.$styleSliderRangeBackgroundActive},
+      awsui.$color-background-slider-warning-pressed
+    );
   }
 
   &.disabled {
-    background: awsui.$color-background-control-disabled;
+    background: var(#{custom-props.$styleSliderTrackBackgroundColor}, awsui.$color-background-control-disabled);
   }
 
   &.readonly {
-    background: awsui.$color-background-control-disabled;
+    background: var(#{custom-props.$styleSliderTrackBackgroundColor}, awsui.$color-background-control-disabled);
   }
 }
 
@@ -303,13 +330,13 @@
 
 .error {
   &::-webkit-slider-thumb {
-    background-color: awsui.$color-text-status-error;
-    border-color: awsui.$color-text-status-error;
+    background-color: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-text-status-error);
+    border-color: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-text-status-error);
   }
 
   &::-moz-range-thumb {
-    background-color: awsui.$color-text-status-error;
-    border-color: awsui.$color-text-status-error;
+    background-color: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-text-status-error);
+    border-color: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-text-status-error);
   }
   &:hover::-webkit-slider-thumb {
     @include mixins.error-thumb-hover-styles;
@@ -332,13 +359,13 @@
 
 .warning {
   &::-webkit-slider-thumb {
-    background-color: awsui.$color-text-status-warning;
-    border-color: awsui.$color-text-status-warning;
+    background-color: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-text-status-warning);
+    border-color: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-text-status-warning);
   }
 
   &::-moz-range-thumb {
-    background-color: awsui.$color-text-status-warning;
-    border-color: awsui.$color-text-status-warning;
+    background-color: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-text-status-warning);
+    border-color: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-text-status-warning);
   }
   &:hover::-webkit-slider-thumb {
     @include mixins.warning-thumb-hover-styles;

package/lib/internal/scss/tiles/analytics-metadata/styles.scss

@@ -6,3 +6,7 @@
 .radio-button {
   /* used in analytics metadata */
 }
+
+.selected {
+  /* used in analytics metadata */
+}