@cloudscape-design/components-themeable 3.0.1332 → 3.0.1334

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "1834b88ba2f931cd464f73584e916938740e2b12"
+  "commit": "bc0a6c94cacf6028d2505ddf05f0f4cadafa7061"
 }

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

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

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

@@ -8,6 +8,14 @@
 @use '../../../internal/generated/custom-css-properties/index.scss' as custom-props;
 @use '../../constants.scss' as constants;
 
+$collapsed-width: var(#{custom-props.$navigationCollapsedWidth}, constants.$navigation-collapsed-width-default);
+
+.hide-navigation {
+  position: absolute;
+  inset-inline-end: awsui.$space-m;
+  inset-block-start: constants.$toolbar-vertical-panel-icon-offset;
+}
+
 // This wrapper clips the actual navigation content during the enter animation.
 .navigation-container {
   position: sticky;
@@ -20,13 +28,6 @@
   display: flex;
   flex-direction: column;
 
-  // All content is hidden by the overflow-x property
-  &:not(.is-navigation-open) {
-    inline-size: 0px;
-    // We need to hide the closed panel to make containing focusable elements not focusable anymore.
-    display: none;
-  }
-
   & > .navigation {
     flex-grow: 1;
     block-size: 100%;
@@ -39,15 +40,44 @@
     position: relative;
   }
 
+  // Closed panel: collapsed to zero width and removed from the layout so its
+  // focusable children are no longer reachable. The .is-navigation-collapsed
+  // rule below overrides this to render the icon rail instead.
+  &:not(.is-navigation-open) {
+    inline-size: 0px;
+    display: none;
+  }
+
+  // Closed but showing the collapsed icon rail. This class is only ever set while
+  // the panel is closed, so it always overrides the rule above (equal specificity,
+  // later in source order).
+  &.is-navigation-collapsed {
+    display: flex;
+    align-items: center;
+    inline-size: $collapsed-width;
+
+    & > .navigation {
+      inline-size: $collapsed-width;
+      overflow-x: hidden;
+    }
+
+    // In the rail, replace the top-right close button with a centered expand toggle.
+    & > .navigation > .hide-navigation {
+      display: none;
+
+      &.expand-navigation-toggle {
+        display: flex;
+        position: static;
+        align-items: center;
+        justify-content: center;
+        padding-block: awsui.$space-s;
+      }
+    }
+  }
+
   // The Navigation drawer will take up the entire viewport on mobile
   @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
     #{custom-props.$navigationWidth}: 100vw;
     z-index: constants.$drawer-z-index-mobile;
   }
 }
-
-.hide-navigation {
-  position: absolute;
-  inset-inline-end: awsui.$space-m;
-  inset-block-start: constants.$toolbar-vertical-panel-icon-offset;
-}

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

@@ -146,12 +146,18 @@
   @include desktop-only {
     grid-area: navigation;
     inline-size: var(#{custom-props.$navigationWidth});
-    border-inline-end: awsui.$border-divider-section-width solid awsui.$color-border-layout;
+    border-inline-end: awsui.$border-width-layout-side-navigation solid awsui.$color-border-layout-side-navigation;
   }
 
   @include mobile-only {
     z-index: constants.$drawer-z-index-mobile;
   }
+
+  &.navigation-collapsed {
+    @include desktop-only {
+      inline-size: var(#{custom-props.$navigationCollapsedWidth}, constants.$navigation-collapsed-width-default);
+    }
+  }
 }
 
 .tools {

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

@@ -143,7 +143,7 @@ $toolbar-height: 42px;
 
     > .universal-toolbar-nav {
       grid-column: 2;
-      padding-inline-start: awsui.$space-m;
+      padding-inline-start: awsui.$space-s;
       padding-inline-end: awsui.$space-static-xxs;
     }
 
@@ -171,7 +171,7 @@ $toolbar-height: 42px;
 .drawers-mobile-triggers-container {
   @include styles.styles-reset;
   background-color: transparent;
-  padding-inline: awsui.$space-m;
+  padding-inline: awsui.$space-s;
   box-sizing: border-box;
   overflow-y: hidden;
   overflow-x: hidden;

package/lib/internal/scss/box/visual-accent.scss

@@ -4,7 +4,6 @@
 */
 
 @use 'sass:map';
-@use 'sass:meta';
 @use '../internal/styles/tokens' as awsui;
 
 // T-shirt size keywords mirror the Box spacing scale (see spacing.scss).
@@ -85,33 +84,70 @@ $accent-radii: (
 // stylesheet source order. Winning here preserves the guaranteed background/foreground color
 // contrast of the accent pair. Descendants (nested Box, Icon) inherit this color.
 //
-// Token variables are looked up dynamically from the tokens module, so adding a color only
-// requires extending `$accent-colors`.
+// Keep literal token references in this map so the style build can discover every token and emit
+// its mode-specific custom property declarations.
 $accent-colors: (
-  'red',
-  'yellow',
-  'indigo',
-  'green',
-  'orange',
-  'purple',
-  'mint',
-  'lime',
-  'grey',
-  'teal',
-  'cyan',
-  'blue',
-  'violet',
-  'fuchsia',
-  'magenta',
-  'pink',
-  'rose',
-  'amber'
+  'red': (
+    background: awsui.$color-background-visual-accent-red,
+    foreground: awsui.$color-text-visual-accent-red,
+  ),
+  'yellow': (
+    background: awsui.$color-background-visual-accent-yellow,
+    foreground: awsui.$color-text-visual-accent-yellow,
+  ),
+  'indigo': (
+    background: awsui.$color-background-visual-accent-indigo,
+    foreground: awsui.$color-text-visual-accent-indigo,
+  ),
+  'green': (
+    background: awsui.$color-background-visual-accent-green,
+    foreground: awsui.$color-text-visual-accent-green,
+  ),
+  'orange': (
+    background: awsui.$color-background-visual-accent-orange,
+    foreground: awsui.$color-text-visual-accent-orange,
+  ),
+  'purple': (
+    background: awsui.$color-background-visual-accent-purple,
+    foreground: awsui.$color-text-visual-accent-purple,
+  ),
+  'lime': (
+    background: awsui.$color-background-visual-accent-lime,
+    foreground: awsui.$color-text-visual-accent-lime,
+  ),
+  'grey': (
+    background: awsui.$color-background-visual-accent-grey,
+    foreground: awsui.$color-text-visual-accent-grey,
+  ),
+  'teal': (
+    background: awsui.$color-background-visual-accent-teal,
+    foreground: awsui.$color-text-visual-accent-teal,
+  ),
+  'blue': (
+    background: awsui.$color-background-visual-accent-blue,
+    foreground: awsui.$color-text-visual-accent-blue,
+  ),
+  'violet': (
+    background: awsui.$color-background-visual-accent-violet,
+    foreground: awsui.$color-text-visual-accent-violet,
+  ),
+  'magenta': (
+    background: awsui.$color-background-visual-accent-magenta,
+    foreground: awsui.$color-text-visual-accent-magenta,
+  ),
+  'pink': (
+    background: awsui.$color-background-visual-accent-pink,
+    foreground: awsui.$color-text-visual-accent-pink,
+  ),
+  'amber': (
+    background: awsui.$color-background-visual-accent-amber,
+    foreground: awsui.$color-text-visual-accent-amber,
+  ),
 );
-$tokens: meta.module-variables('awsui');
 
-@each $accent in $accent-colors {
+@each $accent, $colors in $accent-colors {
   .box.visual-accent.visual-accent-#{$accent} {
-    background-color: map.get($tokens, 'color-background-accent-#{$accent}');
-    color: map.get($tokens, 'color-text-accent-#{$accent}');
+    background-color: map.get($colors, 'background');
+    color: map.get($colors, 'foreground');
   }
 }

package/lib/internal/scss/button/styles.scss

@@ -148,6 +148,12 @@
     border-inline-width: 0;
   }
 
+  &.button-compact {
+    padding-block: 0;
+    border-block-width: 0;
+    border-inline-width: 0;
+  }
+
   &.variant-inline-icon-pointer-target {
     padding-block: awsui.$space-xxxs;
     border-block-width: 0;

package/lib/internal/scss/code-editor/ace-editor.scss

@@ -20,7 +20,7 @@
 }
 
 .code-editor :global .ace_editor {
-  font-family: Monaco, Menlo, Consolas, 'Courier Prime', Courier, 'Courier New', monospace;
+  font-family: awsui.$font-family-monospace;
   font-size: 14px;
   line-height: 20px;
 

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

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