@cloudscape-design/components-themeable 3.0.1328 → 3.0.1330

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "726348bdaf8f9b4887987c410c61b3c8efe1a8d7"
+  "commit": "9ef475158bf1a6dcf2f1e318d73c5cecd52610ee"
 }

package/lib/internal/scss/anchor-navigation/styles.scss

@@ -9,6 +9,7 @@
 
 $guide-line-width: 2px;
 $guide-line-offset: -2px; // Negative to expand 2px beyond the element
+$anchor-nav-inset-inline: 6px;
 
 .root {
   @include styles.styles-reset;
@@ -35,6 +36,7 @@ $guide-line-offset: -2px; // Negative to expand 2px beyond the element
     position: absolute;
     inset-block-start: $guide-line-offset;
     inline-size: $guide-line-width;
+    inset-inline-start: $anchor-nav-inset-inline;
   }
 }
 
@@ -66,6 +68,7 @@ $guide-line-offset: -2px; // Negative to expand 2px beyond the element
       position: absolute;
       inset-block-start: $guide-line-offset;
       inline-size: $guide-line-width;
+      inset-inline-start: $anchor-nav-inset-inline;
     }
   }
 }

package/lib/internal/scss/app-layout/constants.scss

@@ -35,4 +35,4 @@ $toolbar-z-index: 1000;
 // Shared toolbar drawer component values
 $toolbar-vertical-panel-icon-offset: 14px;
 
-$ai-drawer-background: #161d26;
+$ai-drawer-background: awsui.$color-background-layout-ai-drawer;

package/lib/internal/scss/app-layout/visual-refresh-toolbar/drawer/styles.scss

@@ -278,6 +278,13 @@ $ai-drawer-heider-height: 42px;
       &:hover {
         stroke: awsui.$color-text-interactive-inverted-hover;
       }
+      @include theming.one-theme-only {
+        color: awsui.$color-text-interactive-default;
+
+        &:hover {
+          stroke: awsui.$color-text-interactive-hover;
+        }
+      }
     }
 
     > .drawer-content-container {
@@ -304,6 +311,9 @@ $ai-drawer-heider-height: 42px;
           border-block-end: 2px solid;
           border-image: linear-gradient(90deg, #962eff 0%, #5c7fff 30%, #09f 50%, #b8e7ff 70%, #8575ff 100%) 1;
           box-sizing: border-box;
+          @include theming.one-theme-only {
+            align-items: flex-start;
+          }
 
           > .drawer-content-header-content {
             display: flex;
@@ -314,9 +324,11 @@ $ai-drawer-heider-height: 42px;
             padding-inline-start: awsui.$space-l;
             padding-inline-end: awsui.$space-m;
 
-            @include theming.dark-mode-only {
+            @include theming.one-theme-only {
               border-block-start: awsui.$border-divider-section-width solid awsui.$color-border-layout;
+            }
 
+            @include theming.dark-mode-only {
               @include desktop-only {
                 &:has(+ .drawer-back-to-console-slot) {
                   border-inline-end: awsui.$border-divider-section-width solid awsui.$color-border-layout;
@@ -415,6 +427,9 @@ $ai-drawer-heider-height: 42px;
           @include theming.dark-mode-only {
             border-inline-end: awsui.$border-divider-section-width solid awsui.$color-border-layout;
           }
+          @include theming.one-theme-only {
+            border-inline-end: awsui.$border-divider-section-width solid awsui.$color-border-layout;
+          }
         }
       }
     }

package/lib/internal/scss/app-layout/visual-refresh-toolbar/toolbar/styles.scss

@@ -11,6 +11,13 @@
 
 $toolbar-height: 42px;
 
+@mixin drawer-separator-border {
+  inset-block-start: $toolbar-height;
+  inline-size: awsui.$border-divider-section-width;
+  block-size: calc(100vh - #{$toolbar-height});
+  background: awsui.$color-border-layout;
+}
+
 .universal-toolbar {
   background-color: awsui.$color-background-layout-toolbar;
   box-sizing: border-box;
@@ -40,14 +47,13 @@ $toolbar-height: 42px;
        * - Main content area: Uses `display: contents`, preventing border application
        * - Nav panel: May be hidden, causing the border to disappear when separation is still needed
       */
+      // Visual refresh: separator only in dark mode
       @include theming.dark-mode-only {
-        content: '';
-        position: absolute;
-        inset-block-start: $toolbar-height;
-        inset-inline-start: 0;
-        inline-size: awsui.$border-divider-section-width;
-        block-size: calc(100vh - #{$toolbar-height});
-        background: awsui.$color-border-layout;
+        @include drawer-separator-border;
+      }
+      // One-theme: separator in both light and dark modes
+      @include theming.one-theme-only {
+        @include drawer-separator-border;
       }
     }
 
@@ -127,6 +133,13 @@ $toolbar-height: 42px;
         border-inline-start: awsui.$border-divider-section-width solid awsui.$color-border-layout;
       }
     }
+    @include theming.one-theme-only {
+      border-block-start: awsui.$border-divider-section-width solid awsui.$color-border-layout;
+      &.with-ai-drawer {
+        border-start-start-radius: awsui.$space-xxs;
+        border-inline-start: awsui.$border-divider-section-width solid awsui.$color-border-layout;
+      }
+    }
 
     > .universal-toolbar-nav {
       grid-column: 2;

package/lib/internal/scss/button/constants.scss

@@ -56,7 +56,7 @@ $variants: (
     'default-color': awsui.$color-text-interactive-default,
     'hover-background': transparent,
     'hover-border-color': transparent,
-    'hover-color': awsui.$color-text-interactive-hover,
+    'hover-color': awsui.$color-text-button-icon-hover,
     'active-background': transparent,
     'active-border-color': transparent,
     'active-color': awsui.$color-text-interactive-default,
@@ -98,7 +98,7 @@ $variants: (
     'default-color': awsui.$color-text-button-normal-default,
     'hover-background': transparent,
     'hover-border-color': transparent,
-    'hover-color': awsui.$color-text-button-normal-hover,
+    'hover-color': awsui.$color-text-button-inline-link-hover,
     'active-background': transparent,
     'active-border-color': transparent,
     'active-color': awsui.$color-text-button-normal-active,

package/lib/internal/scss/expandable-section/styles.scss

@@ -18,7 +18,7 @@ $icon-margin-right-small: calc(awsui.$space-xs - awsui.$space-xxxs);
 $icon-margin-right-medium: awsui.$space-xs;
 $icon-offset-inline: awsui.$space-xxs;
 $icon-offset-block: awsui.$space-xxxs;
-$icon-offset-container: 3px;
+$icon-offset-container: awsui.$space-xxs;
 
 // Total space occupied by the expand icon on the left and its margins.
 // Useful to keep elements correctly aligned.

package/lib/internal/scss/header/styles.scss

@@ -5,6 +5,7 @@
 
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/styles' as styles;
+@use '../internal/styles/utils/theming';
 @use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 @function space-heading-button-diff($heading-height) {
@@ -166,6 +167,16 @@
   }
 }
 
+// Inside an expandable section (one-theme), tighten the heading's top padding by the button's
+// top and bottom border widths so it aligns with the button content box.
+.title-variant-h2.title-in-expandable-section {
+  @include theming.one-theme-only {
+    padding-block-start: calc(
+      #{space-heading-button-diff(awsui.$line-height-heading-l)} - 2 * #{awsui.$border-width-button}
+    );
+  }
+}
+
 .root-no-actions.root-has-description > .main > :not(.refresh) {
   &.title-variant-h2,
   &.title-variant-h3 {

package/lib/internal/scss/internal/components/option/styles.scss

@@ -6,6 +6,7 @@
 @use '../../styles' as styles;
 @use '../../styles/tokens' as awsui;
 @use './constants' as constants;
+@use '../../generated/custom-css-properties/index' as custom-props;
 
 .option {
   @include styles.styles-reset;
@@ -100,8 +101,11 @@
 }
 
 .filtering-match-highlight {
-  background-color: awsui.$color-background-dropdown-item-filter-match;
-  color: awsui.$color-text-dropdown-item-filter-match;
+  background-color: var(
+    #{custom-props.$optionFilterMatchBackground},
+    #{awsui.$color-background-dropdown-item-filter-match}
+  );
+  color: var(#{custom-props.$optionFilterMatchColor}, #{awsui.$color-text-dropdown-item-filter-match});
   font-weight: styles.$font-weight-bold;
 }
 

package/lib/internal/scss/internal/components/selectable-item/styles.scss

@@ -5,6 +5,7 @@
 
 @use '../../styles' as styles;
 @use '../../styles/tokens' as awsui;
+@use '../../generated/custom-css-properties/index' as custom-props;
 
 // Box-shadow spread values for simulating borders without layout shifts
 $border-offset: awsui.$border-width-item-selected;
@@ -85,8 +86,8 @@ $neg-divider-w: calc(-1 * #{$divider-w});
   z-index: 1;
 
   border-width: 0;
-  background-color: awsui.$color-background-dropdown-item-default;
-  color: awsui.$color-text-dropdown-item-default;
+  background-color: var(#{custom-props.$optionBackgroundDefault}, #{awsui.$color-background-dropdown-item-default});
+  color: var(#{custom-props.$optionColorDefault}, #{awsui.$color-text-dropdown-item-default});
 
   @include content-pad(awsui.$border-item-width, awsui.$border-item-width);
 
@@ -116,7 +117,7 @@ $neg-divider-w: calc(-1 * #{$divider-w});
   }
 
   &.has-background {
-    background-color: awsui.$color-background-dropdown-item-hover;
+    background-color: var(#{custom-props.$optionBackgroundHighlighted}, #{awsui.$color-background-dropdown-item-hover});
   }
   &.child {
     padding-inline-start: awsui.$border-item-width;
@@ -126,18 +127,18 @@ $neg-divider-w: calc(-1 * #{$divider-w});
   }
 
   &.disabled > .selectable-item-content {
-    color: awsui.$color-text-dropdown-item-disabled;
+    color: var(#{custom-props.$optionColorDisabled}, #{awsui.$color-text-dropdown-item-disabled});
   }
 
   &.highlighted,
   &.selected {
-    color: awsui.$color-text-dropdown-item-highlighted;
+    color: var(#{custom-props.$optionColorHighlighted}, #{awsui.$color-text-dropdown-item-highlighted});
     @include logical-radius(awsui.$border-radius-item);
   }
 
   &.highlighted {
     z-index: 3;
-    background-color: awsui.$color-background-dropdown-item-hover;
+    background-color: var(#{custom-props.$optionBackgroundHighlighted}, #{awsui.$color-background-dropdown-item-hover});
     @include highlighted-shadow;
     &.disabled {
       box-shadow: inset 0 0 0 $border-offset awsui.$color-border-dropdown-item-dimmed-hover;
@@ -153,7 +154,7 @@ $neg-divider-w: calc(-1 * #{$divider-w});
 
   &.selected {
     z-index: 2;
-    background-color: awsui.$color-background-dropdown-item-selected;
+    background-color: var(#{custom-props.$optionBackgroundSelected}, #{awsui.$color-background-dropdown-item-selected});
     @include selected-shadow;
     &.next-item-selected {
       border-end-start-radius: 0;
@@ -176,7 +177,7 @@ $neg-divider-w: calc(-1 * #{$divider-w});
   &.parent {
     &:not(.disabled) {
       > .selectable-item-content {
-        color: awsui.$color-text-dropdown-group-label;
+        color: var(#{custom-props.$optionGroupLabelColor}, #{awsui.$color-text-dropdown-group-label});
       }
     }
     &:not(.interactiveGroups) {

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

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