@cloudscape-design/components-themeable 3.0.1165 → 3.0.1167

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "1bfc081cf3a606d870361eaabd7f385af0fd3d98"
+  "commit": "6b10cd42e678ad5ea0f8aee688a0755d986242cf"
 }

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

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

package/lib/internal/scss/popover/styles.scss

@@ -20,6 +20,15 @@ $trigger-underline-offset: 0.25em;
   &.no-wrap {
     white-space: nowrap;
   }
+
+  // When the trigger text is set to be ellipsized, render the focus ring on the root element instead of the trigger,
+  // to prevent it from being cropped by its `overflow: hidden` rule.
+  // We do this in only this case because when the trigger has multiple lines of texts its height can differ from the root element.
+  &:has(.trigger-type-text-inline.overflow-ellipsis:focus, .trigger-type-text.overflow-ellipsis:focus) {
+    @include focus-visible.when-visible-unfocused {
+      @include styles.focus-highlight(1px);
+    }
+  }
 }
 
 .root-filtering-token {
@@ -77,8 +86,10 @@ $trigger-underline-offset: 0.25em;
     outline: none;
   }
 
-  @include focus-visible.when-visible {
-    @include styles.focus-highlight(1px);
+  &:not(.overflow-ellipsis) {
+    @include focus-visible.when-visible {
+      @include styles.focus-highlight(1px);
+    }
   }
 }
 

package/lib/internal/scss/tabs/tab-header-bar.scss

@@ -6,7 +6,9 @@
 /* stylelint-disable selector-max-type */
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
+@use '../internal/styles//foundation' as foundation;
 @use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
+@use '../internal/generated/custom-css-properties/index.scss' as custom-props;
 
 $separator-color: awsui.$color-border-tabs-divider;
 $label-horizontal-spacing: awsui.$space-xs;
@@ -113,11 +115,6 @@ $label-horizontal-spacing: awsui.$space-xs;
   display: flex;
   align-items: stretch;
 
-  &,
-  & > button {
-    background-color: transparent;
-  }
-
   & > .tabs-tab-dismiss,
   & > .tabs-tab-action {
     position: relative;
@@ -138,12 +135,24 @@ $label-horizontal-spacing: awsui.$space-xs;
     inset-inline-start: 0;
     inline-size: calc(100% - 1px);
     inset-block-end: calc(-1 * #{awsui.$border-divider-section-width});
-    block-size: awsui.$border-active-width;
-    border-start-start-radius: awsui.$border-radius-tabs-focus-ring;
-    border-start-end-radius: awsui.$border-radius-tabs-focus-ring;
-    border-end-start-radius: awsui.$border-radius-tabs-focus-ring;
-    border-end-end-radius: awsui.$border-radius-tabs-focus-ring;
-    background: awsui.$color-border-tabs-underline;
+    block-size: var(#{custom-props.$styleTabsActiveIndicatorWidth}, awsui.$border-active-width);
+    border-start-start-radius: var(
+      #{custom-props.$styleTabsActiveIndicatorBorderRadius},
+      awsui.$border-radius-tabs-focus-ring
+    );
+    border-start-end-radius: var(
+      #{custom-props.$styleTabsActiveIndicatorBorderRadius},
+      awsui.$border-radius-tabs-focus-ring
+    );
+    border-end-start-radius: var(
+      #{custom-props.$styleTabsActiveIndicatorBorderRadius},
+      awsui.$border-radius-tabs-focus-ring
+    );
+    border-end-end-radius: var(
+      #{custom-props.$styleTabsActiveIndicatorBorderRadius},
+      awsui.$border-radius-tabs-focus-ring
+    );
+    background: var(#{custom-props.$styleTabsActiveIndicatorColor}, awsui.$color-border-tabs-underline);
     opacity: 0;
   }
 
@@ -163,7 +172,8 @@ $label-horizontal-spacing: awsui.$space-xs;
     &:before {
       content: '';
       position: absolute;
-      border-inline-end: awsui.$border-divider-section-width solid $separator-color;
+      border-inline-end: var(#{custom-props.$styleTabsSeparatorWidth}, awsui.$border-divider-section-width) solid
+        var(#{custom-props.$styleTabsSeparatorColor}, $separator-color);
       inset: awsui.$space-scaled-s 0;
       opacity: 1;
     }
@@ -185,13 +195,14 @@ $label-horizontal-spacing: awsui.$space-xs;
 
   padding-inline: 0;
   margin-block-start: 1px;
-  border-block: awsui.$border-divider-section-width solid transparent;
-  border-inline: awsui.$border-divider-section-width solid transparent;
+  border-block: awsui.$border-divider-section-width solid var(#{custom-props.$styleBorderColorDefault}, transparent);
+  border-inline: awsui.$border-divider-section-width solid var(#{custom-props.$styleBorderColorDefault}, transparent);
 
   font-size: awsui.$font-tabs-size;
   line-height: awsui.$font-tabs-line-height;
   font-weight: awsui.$font-wayfinding-link-active-weight;
-  color: awsui.$color-text-interactive-default;
+  color: var(#{custom-props.$styleColorDefault}, awsui.$color-text-interactive-default);
+  background-color: var(#{custom-props.$styleBackgroundDefault}, transparent);
 
   padding-inline-start: calc(#{awsui.$space-xxs} - 1px);
   padding-inline-end: awsui.$space-xxs;
@@ -205,7 +216,15 @@ $label-horizontal-spacing: awsui.$space-xs;
   }
 
   &:hover {
-    color: awsui.$color-text-accent;
+    color: var(#{custom-props.$styleColorHover}, awsui.$color-text-accent);
+    border-color: var(
+      #{custom-props.$styleBorderColorHover},
+      var(#{custom-props.$styleBorderColorDefault}, transparent)
+    );
+    background-color: var(
+      #{custom-props.$styleBackgroundHover},
+      var(#{custom-props.$styleBackgroundDefault}, transparent)
+    );
   }
 
   &:focus {
@@ -213,9 +232,18 @@ $label-horizontal-spacing: awsui.$space-xs;
   }
 
   @include focus-visible.when-visible {
-    z-index: 1;
-    border-inline-end-color: transparent;
-    @include styles.focus-highlight(awsui.$space-tabs-focus-outline-gutter);
+    #{custom-props.$styleFocusRingBoxShadow}: 0 0 0
+      var(#{custom-props.$styleFocusRingBorderWidth}, foundation.$box-shadow-focused-width)
+      var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused);
+
+    @include styles.focus-highlight(
+      $gutter: awsui.$space-tabs-focus-outline-gutter,
+      $border-radius: var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring),
+      $box-shadow: var(#{custom-props.$styleFocusRingBoxShadow}),
+      // Positions focus ring above the underline to prevent the bottom edge from being obscured.
+      // Previously used z-index on the button, but that hides the underline when the button has a background color.
+      $z-index: 1
+    );
   }
 }
 
@@ -241,13 +269,17 @@ $label-horizontal-spacing: awsui.$space-xs;
   &,
   &:hover {
     cursor: default;
-    color: awsui.$color-text-interactive-disabled;
+    color: var(#{custom-props.$styleColorDisabled}, awsui.$color-text-interactive-disabled);
+    border-color: var(#{custom-props.$styleBorderColorDisabled}, transparent);
+    background-color: var(#{custom-props.$styleBackgroundDisabled}, transparent);
     font-weight: awsui.$font-tabs-disabled-weight;
   }
 }
 
 .tabs-tab-active:not(.tabs-tab-disabled) {
-  color: awsui.$color-text-accent;
+  color: var(#{custom-props.$styleColorActive}, awsui.$color-text-accent);
+  border-color: var(#{custom-props.$styleBorderColorActive}, transparent);
+  background-color: var(#{custom-props.$styleBackgroundActive}, transparent);
   &:after {
     opacity: 1;
   }

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

@@ -1,32 +1,32 @@
 
     import './styles.scoped.css';
     export default {
-  "alert": "awsui_alert_mx3cw_p74j8_193",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_mx3cw_p74j8_1",
-  "root": "awsui_root_mx3cw_p74j8_215",
-  "hidden": "awsui_hidden_mx3cw_p74j8_250",
-  "alert-wrapper": "awsui_alert-wrapper_mx3cw_p74j8_299",
-  "initial-hidden": "awsui_initial-hidden_mx3cw_p74j8_311",
-  "header": "awsui_header_mx3cw_p74j8_316",
-  "header-replacement": "awsui_header-replacement_mx3cw_p74j8_317",
-  "action": "awsui_action_mx3cw_p74j8_321",
-  "action-slot": "awsui_action-slot_mx3cw_p74j8_325",
-  "action-button": "awsui_action-button_mx3cw_p74j8_326",
-  "alert-focus-wrapper": "awsui_alert-focus-wrapper_mx3cw_p74j8_330",
-  "text": "awsui_text_mx3cw_p74j8_361",
-  "icon": "awsui_icon_mx3cw_p74j8_368",
-  "message": "awsui_message_mx3cw_p74j8_371",
-  "action-wrapped": "awsui_action-wrapped_mx3cw_p74j8_375",
-  "icon-size-medium": "awsui_icon-size-medium_mx3cw_p74j8_379",
-  "icon-size-big": "awsui_icon-size-big_mx3cw_p74j8_383",
-  "icon-size-normal": "awsui_icon-size-normal_mx3cw_p74j8_387",
-  "content": "awsui_content_mx3cw_p74j8_391",
-  "content-replacement": "awsui_content-replacement_mx3cw_p74j8_392",
-  "dismiss": "awsui_dismiss_mx3cw_p74j8_396",
-  "dismiss-button": "awsui_dismiss-button_mx3cw_p74j8_401",
-  "type-error": "awsui_type-error_mx3cw_p74j8_405",
-  "type-warning": "awsui_type-warning_mx3cw_p74j8_413",
-  "type-success": "awsui_type-success_mx3cw_p74j8_421",
-  "type-info": "awsui_type-info_mx3cw_p74j8_429"
+  "alert": "awsui_alert_mx3cw_16doo_193",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_mx3cw_16doo_1",
+  "root": "awsui_root_mx3cw_16doo_215",
+  "hidden": "awsui_hidden_mx3cw_16doo_250",
+  "alert-wrapper": "awsui_alert-wrapper_mx3cw_16doo_299",
+  "initial-hidden": "awsui_initial-hidden_mx3cw_16doo_311",
+  "header": "awsui_header_mx3cw_16doo_316",
+  "header-replacement": "awsui_header-replacement_mx3cw_16doo_317",
+  "action": "awsui_action_mx3cw_16doo_321",
+  "action-slot": "awsui_action-slot_mx3cw_16doo_325",
+  "action-button": "awsui_action-button_mx3cw_16doo_326",
+  "alert-focus-wrapper": "awsui_alert-focus-wrapper_mx3cw_16doo_330",
+  "text": "awsui_text_mx3cw_16doo_361",
+  "icon": "awsui_icon_mx3cw_16doo_368",
+  "message": "awsui_message_mx3cw_16doo_371",
+  "action-wrapped": "awsui_action-wrapped_mx3cw_16doo_375",
+  "icon-size-medium": "awsui_icon-size-medium_mx3cw_16doo_379",
+  "icon-size-big": "awsui_icon-size-big_mx3cw_16doo_383",
+  "icon-size-normal": "awsui_icon-size-normal_mx3cw_16doo_387",
+  "content": "awsui_content_mx3cw_16doo_391",
+  "content-replacement": "awsui_content-replacement_mx3cw_16doo_392",
+  "dismiss": "awsui_dismiss_mx3cw_16doo_396",
+  "dismiss-button": "awsui_dismiss-button_mx3cw_16doo_401",
+  "type-error": "awsui_type-error_mx3cw_16doo_405",
+  "type-warning": "awsui_type-warning_mx3cw_16doo_413",
+  "type-success": "awsui_type-success_mx3cw_16doo_421",
+  "type-info": "awsui_type-info_mx3cw_16doo_429"
 };