@cloudscape-design/components-themeable 3.0.1313 → 3.0.1314

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "82d11d6689b17a690065d458b0e747753087e3e6"
+  "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,7 +121,7 @@
   display: inline-block;
   margin-inline-start: auto;
 
-  &.one-theme {
+  @include theming.one-theme-only {
     inset-inline-end: calc(-1 * #{awsui.$space-xs});
     inline-size: awsui.$space-s;
   }

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 {
@@ -114,20 +129,6 @@ $dropdown-trigger-icon-offset: 2px;
       margin-inline-start: calc(#{awsui.$border-width-button} * -1);
     }
   }
-
-  & > .trigger-item:not(:first-child).one-theme {
-    & > .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});
-      }
-    }
-  }
 }
 .split-trigger {
   display: contents;

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: "82d11d66";
+    $awsui-commit-hash: "2f2e3191";
     // Manually managed CSS-variables
     $maxContentWidth: --awsui-max-content-width-6b9ypa;
 $minContentWidth: --awsui-min-content-width-6b9ypa;

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/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"
 };