@cloudscape-design/components-themeable 3.0.1312 → 3.0.1314

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "1b4a11ae0c55fb658d7282fa58dccfb21521d1fa"
+  "commit": "2f2e31910a4929a517635f51286b40f489d8a43f"
 }

package/lib/internal/scss/action-card/styles.scss

@@ -7,6 +7,7 @@
 
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
+@use '../internal/styles/utils/theming' as theming;
 @use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use './constants' as constants;
 @use './mixins' as mixins;
@@ -18,6 +19,9 @@
     &.disabled {
       color: map.get(constants.$states, 'disabled', 'text-color');
     }
+    @include theming.one-theme-only {
+      color: awsui.$color-text-heading-default;
+    }
   }
   &:not(:has(+ .body)) {
     flex: 1;

package/lib/internal/scss/app-layout/visual-refresh/drawers.scss

@@ -5,6 +5,7 @@
 @use '../../internal/styles/tokens' as awsui;
 @use '../../internal/generated/custom-css-properties/index.scss' as custom-props;
 @use '../../internal/styles' as styles;
+@use '../../internal/styles/utils/theming';
 @use '../constants.scss' as constants;
 
 .drawers-container {
@@ -22,7 +23,7 @@
     background-color: awsui.$color-background-container-content;
   }
 
-  &.one-theme {
+  @include theming.one-theme-only {
     &.has-open-drawer {
       background-color: awsui.$color-background-layout-panel-content;
     }
@@ -72,7 +73,7 @@
     background-color: awsui.$color-background-container-content;
   }
 
-  &.one-theme {
+  @include theming.one-theme-only {
     &.has-multiple-triggers.has-open-drawer {
       background-color: awsui.$color-background-layout-panel-content;
     }
@@ -137,7 +138,7 @@
   pointer-events: auto;
   word-wrap: break-word;
 
-  &.one-theme {
+  @include theming.one-theme-only {
     background-color: awsui.$color-background-layout-panel-content;
   }
 

package/lib/internal/scss/app-layout/visual-refresh/tools.scss

@@ -6,6 +6,7 @@
 @use '../../internal/styles' as styles;
 @use '../../internal/styles/tokens' as awsui;
 @use '../../internal/generated/custom-css-properties/index.scss' as custom-props;
+@use '../../internal/styles/utils/theming';
 
 /*
 The Tools component container has a max width calculation that depends on the
@@ -95,7 +96,7 @@ viewport size and state of the Tools drawer.
     }
   }
 
-  &.one-theme {
+  @include theming.one-theme-only {
     background-color: awsui.$color-background-layout-panel-content;
   }
 

package/lib/internal/scss/breadcrumb-group/item/styles.scss

@@ -6,6 +6,7 @@
 @use '../../internal/styles' as styles;
 @use '../../internal/styles/tokens' as awsui;
 @use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
+@use '../../internal/styles/utils/theming' as theming;
 
 .link:after {
   display: none;
@@ -21,6 +22,12 @@
     color: awsui.$color-text-breadcrumb-icon;
   }
 
+  @include theming.one-theme-only {
+    > .icon {
+      margin-inline: awsui.$space-xxs;
+    }
+  }
+
   > .anchor {
     min-inline-size: 0;
     overflow: hidden;

package/lib/internal/scss/breadcrumb-group/styles.scss

@@ -6,6 +6,7 @@
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
 @use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
+@use '../internal/styles/utils/theming' as theming;
 
 .breadcrumb-group {
   @include styles.styles-reset;
@@ -63,6 +64,12 @@
         margin-inline: styles.$base-size;
         color: awsui.$color-text-breadcrumb-icon;
       }
+
+      @include theming.one-theme-only {
+        > .icon {
+          margin-inline: awsui.$space-xxs;
+        }
+      }
     }
   }
 }

package/lib/internal/scss/button-dropdown/category-elements/styles.scss

@@ -5,6 +5,7 @@
 
 @use '../../internal/styles' as styles;
 @use '../../internal/styles/tokens' as awsui;
+@use '../../internal/styles/utils/theming';
 
 .header {
   position: relative;
@@ -120,6 +121,11 @@
   display: inline-block;
   margin-inline-start: auto;
 
+  @include theming.one-theme-only {
+    inset-inline-end: calc(-1 * #{awsui.$space-xs});
+    inline-size: awsui.$space-s;
+  }
+
   @include styles.with-motion {
     transition: transform awsui.$motion-duration-rotate-180 awsui.$motion-easing-rotate-180;
   }

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

@@ -5,6 +5,7 @@
 
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
+@use '../internal/styles/utils/theming';
 
 $dropdown-trigger-icon-offset: 2px;
 
@@ -50,7 +51,7 @@ $dropdown-trigger-icon-offset: 2px;
 }
 
 .trigger-button {
-  &.one-theme {
+  @include theming.one-theme-only {
     display: flex;
     align-items: center;
   }
@@ -103,6 +104,20 @@ $dropdown-trigger-icon-offset: 2px;
         padding-inline-end: calc(#{awsui.$space-s} - #{$dropdown-trigger-icon-offset});
       }
     }
+
+    @include theming.one-theme-only {
+      & > .trigger-button {
+        // Resets the padding-inline-end override applied by .visual-refresh above,
+        // so both sides stay at $space-xs - $dropdown-trigger-icon-offset.
+        padding-inline: calc(#{awsui.$space-xs} - #{$dropdown-trigger-icon-offset});
+      }
+
+      &.has-trigger-text {
+        & > .trigger-button {
+          padding-inline: calc(#{awsui.$space-xs} + #{$dropdown-trigger-icon-offset});
+        }
+      }
+    }
   }
 
   & > .trigger-item.variant-normal {

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

@@ -6,6 +6,7 @@
 @use '../internal/styles/tokens' as awsui;
 @use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../container/shared' as container;
+@use '../internal/styles/utils/theming';
 
 @use './motion';
 
@@ -54,7 +55,7 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
   // For vertical alignment of text in side navigation items
   &-container {
     margin-inline-end: $icon-margin-right-medium;
-    &.one-theme {
+    @include theming.one-theme-only {
       margin-inline-end: calc(#{$icon-margin-right-medium} + $icon-offset-inline);
       inset-block-start: $icon-offset-block;
       > .icon {
@@ -62,7 +63,7 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
       }
     }
   }
-  &.one-theme {
+  @include theming.one-theme-only {
     display: inline-flex;
     align-items: flex-start;
     margin-inline-end: calc(#{$icon-margin-right-normal} + #{$icon-offset-inline});

package/lib/internal/scss/internal/components/button-trigger/styles.scss

@@ -7,6 +7,7 @@
 @use '../../styles/tokens' as awsui;
 @use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../../../token/constants' as token;
+@use '../../styles/utils/theming';
 
 @use './motion';
 
@@ -70,7 +71,7 @@ $icon-offset: awsui.$space-xxxs;
     inset-inline-end: styles.$control-icon-horizontal-offset;
     inset-block-start: styles.$control-icon-vertical-offset;
     color: awsui.$color-text-button-inline-icon-default;
-    &.one-theme {
+    @include theming.one-theme-only {
       inset-block-start: calc(styles.$control-icon-vertical-offset + $icon-offset);
     }
   }
@@ -84,7 +85,7 @@ $icon-offset: awsui.$space-xxxs;
   &.pressed {
     > .arrow {
       transform: rotate(-180deg);
-      &.one-theme {
+      @include theming.one-theme-only {
         inset-block-start: calc(styles.$control-icon-vertical-offset - $icon-offset);
       }
     }

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

@@ -1,6 +1,6 @@
 
     // Build environment
-    $awsui-commit-hash: "1b4a11ae";
+    $awsui-commit-hash: "2f2e3191";
     // Manually managed CSS-variables
     $maxContentWidth: --awsui-max-content-width-6b9ypa;
 $minContentWidth: --awsui-min-content-width-6b9ypa;

package/lib/internal/scss/internal/styles/utils/theming.scss

@@ -11,3 +11,9 @@
     }
   }
 }
+
+@mixin one-theme-only($selector: '') {
+  :global(#{$selector}.awsui-one-theme) & {
+    @content;
+  }
+}

package/lib/internal/scss/segmented-control/styles.scss

@@ -24,8 +24,8 @@
 
 .segment-part {
   display: inline-grid;
-  border-inline: solid awsui.$border-width-field awsui.$color-border-input-default;
-  border-block: solid awsui.$border-width-field awsui.$color-border-input-default;
+  border-inline: solid awsui.$border-width-field awsui.$color-border-segment-wrapper;
+  border-block: solid awsui.$border-width-field awsui.$color-border-segment-wrapper;
   border-start-start-radius: awsui.$border-radius-button;
   border-start-end-radius: awsui.$border-radius-button;
   border-end-start-radius: awsui.$border-radius-button;

package/lib/internal/scss/status-indicator/styles.scss

@@ -6,6 +6,7 @@
 @use 'sass:map';
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
+@use '../internal/styles/utils/theming';
 
 @use './motion';
 
@@ -79,13 +80,21 @@ $_background-overrides: (
   border-start-end-radius: awsui.$border-radius-status-indicator;
   border-end-start-radius: awsui.$border-radius-status-indicator;
   border-end-end-radius: awsui.$border-radius-status-indicator;
+
+  .root.status-loading > & {
+    @include theming.one-theme-only {
+      background: transparent;
+      align-items: center;
+      color: awsui.$color-text-body-secondary;
+    }
+  }
   &.display-inline {
     @include styles.text-wrapping;
     display: inline;
 
     > .icon {
       white-space: nowrap;
-      &.one-theme {
+      @include theming.one-theme-only {
         vertical-align: middle;
       }
     }
@@ -95,7 +104,7 @@ $_background-overrides: (
     display: inline-block;
     word-wrap: break-word;
     word-break: break-all;
-    &.one-theme {
+    @include theming.one-theme-only {
       display: inline-flex;
       align-items: flex-start;
     }
@@ -103,7 +112,7 @@ $_background-overrides: (
     > .icon {
       padding-inline-end: awsui.$space-xxs;
 
-      &.one-theme {
+      @include theming.one-theme-only {
         display: inline-flex;
         align-items: center;
         margin-block-start: awsui.$space-xxxs;
@@ -119,7 +128,7 @@ $_background-overrides: (
   white-space: nowrap;
   vertical-align: text-bottom;
 
-  &.one-theme {
+  @include theming.one-theme-only {
     text-overflow: unset;
 
     > span:last-child {

package/lib/internal/scss/steps/styles.scss

@@ -116,3 +116,42 @@
     }
   }
 }
+
+// Vertical custom steps: a column-1 "rail" stacks the icon above a connector that grows to fill
+// the full height of the step (header + details), keeping the vertical line continuous and
+// connecting consecutive steps regardless of header height. Placed after `.horizontal` so
+// selectors stay in ascending specificity order.
+.root > .list > .container.custom-vertical {
+  // The rail stretches to the row height (default `align-items: stretch`), which is driven by the
+  // content column, so the connector always spans the full step.
+  > .rail {
+    grid-column: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    > .connector {
+      grid-row: auto;
+      grid-column: auto;
+      flex: 1 1 auto;
+      background-color: awsui.$color-border-divider-default;
+      border-block: 0;
+      border-inline: 0;
+      inline-size: awsui.$border-divider-list-width;
+      block-size: auto;
+      min-block-size: awsui.$space-static-xs;
+      inset-inline-end: 0;
+      margin-block: awsui.$space-static-xxs 0;
+    }
+  }
+
+  > .content {
+    grid-column: 2;
+    // Allow long header/details text to wrap instead of stretching the grid column.
+    min-inline-size: 0;
+  }
+}
+
+.root > .list > .container.custom-vertical:last-of-type > .rail > .connector {
+  display: none;
+}

package/lib/internal/scss/table/header-cell/styles.scss

@@ -53,7 +53,7 @@ $cell-horizontal-padding: awsui.$space-scaled-l;
   position: relative;
   text-align: start;
   box-sizing: border-box;
-  border-block-end: awsui.$border-divider-list-width solid awsui.$color-border-divider-interactive-default;
+  border-block-end: awsui.$border-divider-list-width solid awsui.$color-border-divider-default;
   background: awsui.$color-background-table-header;
   color: awsui.$color-text-column-header;
   font-weight: awsui.$font-weight-heading-s;
@@ -68,10 +68,21 @@ $cell-horizontal-padding: awsui.$space-scaled-l;
   &.header-cell-spans-rows {
     padding-block: awsui.$space-xxxs;
     padding-inline: awsui.$space-scaled-xs;
+    border-block-end-color: awsui.$color-border-divider-table-group;
+
+    > .resize-divider.resize-divider {
+      border-inline-start-color: awsui.$color-border-divider-table-group;
+    }
   }
 
   &-sticky {
-    border-block-end: awsui.$border-table-sticky-width solid awsui.$color-border-divider-interactive-default;
+    border-block-end: awsui.$border-table-sticky-width solid awsui.$color-border-divider-default;
+
+    &.header-cell-group,
+    &.header-cell-grouped,
+    &.header-cell-spans-rows {
+      border-block-end-color: awsui.$color-border-divider-table-group;
+    }
   }
   &-stuck:not(.header-cell-variant-full-page) {
     border-block-end-color: transparent;

package/lib/internal/scss/table/resizer/styles.scss

@@ -46,9 +46,17 @@ th:not([data-rightmost]) > .divider,
   max-block-size: calc(100% - #{$block-gap});
   margin-block: auto;
   margin-inline: auto;
-  border-inline-start: awsui.$border-divider-list-width solid awsui.$color-border-divider-interactive-default;
+  border-inline-start: awsui.$border-divider-list-width solid awsui.$color-border-divider-default;
   box-sizing: border-box;
 
+  &.divider-interactive {
+    border-inline-start: awsui.$border-divider-list-width solid awsui.$color-border-divider-interactive-default;
+  }
+
+  &.divider-grouped {
+    border-inline-start-color: awsui.$color-border-divider-table-group;
+  }
+
   // Position variants for grouped column headers.
   // All Column dividers maintain the same bottom gap ($block-gap / 2) as the default.
   &.divider-position-top {

package/lib/internal/scss/toggle/styles.scss

@@ -13,7 +13,7 @@ $toggle-width: 2.4 * styles.$base-size;
 $toggle-height: 1.6 * styles.$base-size;
 $handle-size: 1.2 * styles.$base-size;
 $handle-offset: 0.2 * styles.$base-size;
-$shadow-color: rgba(0, 0, 0, 0.25);
+$shadow-color: awsui.$color-shadow-toggle-handle;
 
 .root {
   @include styles.styles-reset;

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

@@ -5,8 +5,14 @@
 
 @use '../internal/styles/tokens' as awsui;
 
-.variant-normal {
+.toggle-button.variant-normal {
   background: awsui.$color-background-toggle-button-normal-default;
+  border-color: awsui.$color-border-toggle-button-normal-default;
+
+  &:hover {
+    background: awsui.$color-background-toggle-button-normal-hover;
+    border-color: awsui.$color-border-toggle-button-normal-hover;
+  }
 }
 
 .variant-normal.pressed {

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

@@ -42,10 +42,10 @@
   display: flex;
   align-items: center;
   background: var(#{custom-props.$tokenStyleBackgroundDefault}, constants.$token-background);
-  border-start-start-radius: awsui.$space-scaled-xxs;
-  border-start-end-radius: awsui.$space-scaled-xxs;
-  border-end-start-radius: awsui.$space-scaled-xxs;
-  border-end-end-radius: awsui.$space-scaled-xxs;
+  border-start-start-radius: awsui.$border-radius-token-inline;
+  border-start-end-radius: awsui.$border-radius-token-inline;
+  border-end-start-radius: awsui.$border-radius-token-inline;
+  border-end-end-radius: awsui.$border-radius-token-inline;
   color: awsui.$color-text-body-default;
   box-sizing: border-box;
   max-inline-size: 100%;

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

@@ -10,6 +10,7 @@
 @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
 @use './constants' as constants;
 @use './mixins.scss' as mixins;
+@use '../internal/styles/utils/theming' as theming;
 
 .root {
   @include styles.styles-reset;
@@ -54,6 +55,12 @@
     align-items: center;
     align-self: center;
   }
+
+  &:not(&-inline) {
+    @include theming.one-theme-only {
+      padding-block-start: 1px;
+    }
+  }
 }
 
 .icon {

package/lib/internal/scss/tree-view/tree-item/styles.scss

@@ -5,6 +5,7 @@
 @use '../../internal/styles/tokens' as awsui;
 @use '../../internal/styles' as styles;
 @use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
+@use '../../internal/styles/utils/theming';
 
 $item-toggle-column-width: 28px;
 
@@ -49,7 +50,7 @@ $item-toggle-column-width: 28px;
       }
     }
 
-    &.one-theme {
+    @include theming.one-theme-only {
       align-items: center;
       > .expand-toggle-wrapper {
         > .toggle {

package/lib/internal/template/action-card/styles.css.js

@@ -1,22 +1,22 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_16248_1ce33_161",
-  "icon": "awsui_icon_16248_1ce33_193",
-  "header-inner": "awsui_header-inner_16248_1ce33_209",
-  "disabled": "awsui_disabled_16248_1ce33_218",
-  "header": "awsui_header_16248_1ce33_209",
-  "body": "awsui_body_16248_1ce33_221",
-  "header-row": "awsui_header-row_16248_1ce33_225",
-  "description": "awsui_description_16248_1ce33_238",
-  "has-header": "awsui_has-header_16248_1ce33_244",
-  "header-button": "awsui_header-button_16248_1ce33_258",
-  "overlay-button": "awsui_overlay-button_16248_1ce33_259",
-  "variant-embedded": "awsui_variant-embedded_16248_1ce33_278",
-  "variant-default": "awsui_variant-default_16248_1ce33_290",
-  "inner-card": "awsui_inner-card_16248_1ce33_391",
-  "no-padding": "awsui_no-padding_16248_1ce33_398",
-  "icon-vertical-align-center": "awsui_icon-vertical-align-center_16248_1ce33_409",
-  "icon-align-end": "awsui_icon-align-end_16248_1ce33_543"
+  "root": "awsui_root_16248_1xlcm_161",
+  "icon": "awsui_icon_16248_1xlcm_193",
+  "header-inner": "awsui_header-inner_16248_1xlcm_209",
+  "disabled": "awsui_disabled_16248_1xlcm_218",
+  "header": "awsui_header_16248_1xlcm_209",
+  "body": "awsui_body_16248_1xlcm_224",
+  "header-row": "awsui_header-row_16248_1xlcm_228",
+  "description": "awsui_description_16248_1xlcm_241",
+  "has-header": "awsui_has-header_16248_1xlcm_247",
+  "header-button": "awsui_header-button_16248_1xlcm_261",
+  "overlay-button": "awsui_overlay-button_16248_1xlcm_262",
+  "variant-embedded": "awsui_variant-embedded_16248_1xlcm_281",
+  "variant-default": "awsui_variant-default_16248_1xlcm_293",
+  "inner-card": "awsui_inner-card_16248_1xlcm_394",
+  "no-padding": "awsui_no-padding_16248_1xlcm_401",
+  "icon-vertical-align-center": "awsui_icon-vertical-align-center_16248_1xlcm_412",
+  "icon-align-end": "awsui_icon-align-end_16248_1xlcm_546"
 };