@cloudscape-design/components-themeable 3.0.1351 → 3.0.1353

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "0ebe4971c559023ff5f9147242478d94083058c7"
+  "commit": "4194984bedd0518b6a2b33f8e30f4f4c0112017a"
 }

package/lib/internal/scss/alert/styles.scss

@@ -9,9 +9,15 @@
 @use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
 @use '../internal/styles/foundation' as foundation;
+@use '../internal/styles/style-api' as style-api;
 
 @use './motion';
 
+$props: style-api.combine(style-api.$surface, (padding-block, padding-inline), style-api.$focus-ring);
+$tokens: style-api.resolve($props, carrier);
+@include style-api.register($tokens);
+@include style-api.docs('root', $tokens);
+
 .root {
   @include styles.styles-reset;
   @include styles.text-flex-wrapping;
@@ -23,8 +29,9 @@
 }
 
 .alert {
+  @include style-api.carriers($tokens);
   @include styles.styles-reset;
-  color: awsui.$color-text-alert-default;
+  color: var(#{style-api.read($tokens, color)}, #{awsui.$color-text-alert-default});
   position: relative;
   display: flex;
   flex-direction: row;
@@ -32,17 +39,13 @@
   border-block-end: awsui.$border-width-alert-block-end solid;
   border-inline-start: awsui.$border-width-alert-inline-start solid;
   border-inline-end: awsui.$border-width-alert-inline-end solid;
-  border-start-start-radius: awsui.$border-radius-alert;
-  border-start-end-radius: awsui.$border-radius-alert;
-  border-end-start-radius: awsui.$border-radius-alert;
-  border-end-end-radius: awsui.$border-radius-alert;
-  padding-block: awsui.$space-alert-vertical;
-  padding-inline: awsui.$space-alert-horizontal;
-  background-color: awsui.$color-background-container-content;
-
-  #{custom-props.$alertFocusRingBoxShadow}: 0 0 0
-    var(#{custom-props.$alertFocusRingBorderWidth}, foundation.$box-shadow-focused-width)
-    var(#{custom-props.$alertFocusRingBorderColor}, awsui.$color-border-item-focused);
+  border-start-start-radius: var(#{style-api.read($tokens, border-radius)}, #{awsui.$border-radius-alert});
+  border-start-end-radius: var(#{style-api.read($tokens, border-radius)}, #{awsui.$border-radius-alert});
+  border-end-start-radius: var(#{style-api.read($tokens, border-radius)}, #{awsui.$border-radius-alert});
+  border-end-end-radius: var(#{style-api.read($tokens, border-radius)}, #{awsui.$border-radius-alert});
+  padding-block: var(#{style-api.read($tokens, padding-block)}, #{awsui.$space-alert-vertical});
+  padding-inline: var(#{style-api.read($tokens, padding-inline)}, #{awsui.$space-alert-horizontal});
+  background-color: var(#{style-api.read($tokens, background-color)}, #{awsui.$color-background-container-content});
 }
 
 .alert-wrapper {
@@ -86,14 +89,22 @@
     outline: none;
   }
   @include focus-visible.when-visible {
-    @include styles.focus-highlight(
-      $gutter: awsui.$space-button-focus-outline-gutter,
-      $border-radius: var(#{custom-props.$alertFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring),
-      $box-shadow: var(#{custom-props.$alertFocusRingBoxShadow})
+    @include style-api.focus-highlight(
+      $radius: var(#{custom-props.$alertFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring),
+      $width: var(#{custom-props.$alertFocusRingBorderWidth}, foundation.$box-shadow-focused-width),
+      $color: var(#{custom-props.$alertFocusRingBorderColor}, awsui.$color-border-item-focused)
     );
   }
 }
 
+$icon-props: (color);
+$icon-tokens: style-api.resolve($icon-props, carrier);
+@include style-api.docs('icon', $icon-tokens);
+
+.icon {
+  @include style-api.carriers($icon-tokens);
+}
+
 .text {
   min-inline-size: 0;
   // To account for vertical misalignment due to button borders
@@ -133,6 +144,8 @@
   margin-inline-start: awsui.$space-s;
 }
 
+@include style-api.docs-forward('dismissButton', 'button', 'root');
+
 .dismiss-button {
   /* used in test-utils */
 }
@@ -160,10 +173,13 @@ $_text-colors: (
 
 @each $type in map.keys($_text-colors) {
   .type-#{$type} {
-    border-color: #{map.get($_border-colors, $type)};
-    background-color: #{map.get($_background-colors, $type)};
+    border-color: var(#{style-api.read($tokens, border-color)}, #{map.get($_border-colors, $type)});
+    background-color: var(#{style-api.read($tokens, background-color)}, #{map.get($_background-colors, $type)});
     > .alert-wrapper > .alert-focus-wrapper > .icon {
-      color: var(#{custom-props.$alertIconColor}, #{map.get($_text-colors, $type)});
+      color: var(
+        #{style-api.read($icon-tokens, color)},
+        var(#{custom-props.$alertIconColor}, #{map.get($_text-colors, $type)})
+      );
     }
   }
 }

package/lib/internal/scss/badge/styles.scss

@@ -5,6 +5,11 @@
 
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
+@use '../internal/styles/style-api' as style-api;
+
+$tokens: style-api.resolve(style-api.combine(style-api.$surface, (padding-block, padding-inline)), public);
+@include style-api.register($tokens);
+@include style-api.docs('root', $tokens);
 
 .badge {
   @include styles.styles-reset;
@@ -12,68 +17,83 @@
   @include styles.font-body-s;
   line-height: awsui.$line-height-body-m;
   display: inline-block;
-  border-start-start-radius: awsui.$border-radius-badge;
-  border-start-end-radius: awsui.$border-radius-badge;
-  border-end-start-radius: awsui.$border-radius-badge;
-  border-end-end-radius: awsui.$border-radius-badge;
+  border-start-start-radius: var(#{style-api.read($tokens, border-radius)}, #{awsui.$border-radius-badge});
+  border-start-end-radius: var(#{style-api.read($tokens, border-radius)}, #{awsui.$border-radius-badge});
+  border-end-start-radius: var(#{style-api.read($tokens, border-radius)}, #{awsui.$border-radius-badge});
+  border-end-end-radius: var(#{style-api.read($tokens, border-radius)}, #{awsui.$border-radius-badge});
   border-block-style: solid;
   border-inline-style: solid;
-  border-width: awsui.$border-width-badge;
-  padding-block: 0;
-  padding-inline: awsui.$space-xs;
-  color: awsui.$color-text-notification-default;
+  border-width: var(#{style-api.read($tokens, border-width)}, #{awsui.$border-width-badge});
+  padding-block: var(#{style-api.read($tokens, padding-block)}, 0);
+  padding-inline: var(#{style-api.read($tokens, padding-inline)}, #{awsui.$space-xs});
+  color: var(#{style-api.read($tokens, color)}, #{awsui.$color-text-notification-default});
 
   &.badge-color-grey {
-    background-color: awsui.$color-background-badge-grey;
-    border-color: awsui.$color-border-badge-grey;
-    color: awsui.$color-text-badge-grey;
+    background-color: var(#{style-api.read($tokens, background-color)}, #{awsui.$color-background-badge-grey});
+    border-color: var(#{style-api.read($tokens, border-color)}, #{awsui.$color-border-badge-grey});
+    color: var(#{style-api.read($tokens, color)}, #{awsui.$color-text-badge-grey});
   }
 
   &.badge-color-green {
-    background-color: awsui.$color-background-badge-green;
-    border-color: awsui.$color-border-badge-green;
-    color: awsui.$color-text-badge-green;
+    background-color: var(#{style-api.read($tokens, background-color)}, #{awsui.$color-background-badge-green});
+    border-color: var(#{style-api.read($tokens, border-color)}, #{awsui.$color-border-badge-green});
+    color: var(#{style-api.read($tokens, color)}, #{awsui.$color-text-badge-green});
   }
 
   &.badge-color-blue {
-    background-color: awsui.$color-background-badge-blue;
-    border-color: awsui.$color-border-badge-blue;
-    color: awsui.$color-text-badge-blue;
+    background-color: var(#{style-api.read($tokens, background-color)}, #{awsui.$color-background-badge-blue});
+    border-color: var(#{style-api.read($tokens, border-color)}, #{awsui.$color-border-badge-blue});
+    color: var(#{style-api.read($tokens, color)}, #{awsui.$color-text-badge-blue});
   }
 
   &.badge-color-red {
-    background-color: awsui.$color-background-badge-red;
-    border-color: awsui.$color-border-badge-red;
-    color: awsui.$color-text-badge-red;
+    background-color: var(#{style-api.read($tokens, background-color)}, #{awsui.$color-background-badge-red});
+    border-color: var(#{style-api.read($tokens, border-color)}, #{awsui.$color-border-badge-red});
+    color: var(#{style-api.read($tokens, color)}, #{awsui.$color-text-badge-red});
   }
 
   &.badge-color-severity-critical {
-    background-color: awsui.$color-background-notification-severity-critical;
-    color: awsui.$color-text-badge-severity-critical;
-    border-color: awsui.$color-border-badge-severity-critical;
+    background-color: var(
+      #{style-api.read($tokens, background-color)},
+      #{awsui.$color-background-notification-severity-critical}
+    );
+    border-color: var(#{style-api.read($tokens, border-color)}, #{awsui.$color-border-badge-severity-critical});
+    color: var(#{style-api.read($tokens, color)}, #{awsui.$color-text-badge-severity-critical});
   }
 
   &.badge-color-severity-high {
-    background-color: awsui.$color-background-notification-severity-high;
-    color: awsui.$color-text-badge-severity-high;
-    border-color: awsui.$color-border-badge-severity-high;
+    background-color: var(
+      #{style-api.read($tokens, background-color)},
+      #{awsui.$color-background-notification-severity-high}
+    );
+    border-color: var(#{style-api.read($tokens, border-color)}, #{awsui.$color-border-badge-severity-high});
+    color: var(#{style-api.read($tokens, color)}, #{awsui.$color-text-badge-severity-high});
   }
 
   &.badge-color-severity-medium {
-    background-color: awsui.$color-background-notification-severity-medium;
-    color: awsui.$color-text-badge-severity-medium;
-    border-color: awsui.$color-border-badge-severity-medium;
+    background-color: var(
+      #{style-api.read($tokens, background-color)},
+      #{awsui.$color-background-notification-severity-medium}
+    );
+    border-color: var(#{style-api.read($tokens, border-color)}, #{awsui.$color-border-badge-severity-medium});
+    color: var(#{style-api.read($tokens, color)}, #{awsui.$color-text-badge-severity-medium});
   }
 
   &.badge-color-severity-low {
-    background-color: awsui.$color-background-notification-severity-low;
-    color: awsui.$color-text-badge-severity-low;
-    border-color: awsui.$color-border-badge-severity-low;
+    background-color: var(
+      #{style-api.read($tokens, background-color)},
+      #{awsui.$color-background-notification-severity-low}
+    );
+    border-color: var(#{style-api.read($tokens, border-color)}, #{awsui.$color-border-badge-severity-low});
+    color: var(#{style-api.read($tokens, color)}, #{awsui.$color-text-badge-severity-low});
   }
 
   &.badge-color-severity-neutral {
-    background-color: awsui.$color-background-notification-severity-neutral;
-    color: awsui.$color-text-badge-severity-neutral;
-    border-color: awsui.$color-border-badge-severity-neutral;
+    background-color: var(
+      #{style-api.read($tokens, background-color)},
+      #{awsui.$color-background-notification-severity-neutral}
+    );
+    border-color: var(#{style-api.read($tokens, border-color)}, #{awsui.$color-border-badge-severity-neutral});
+    color: var(#{style-api.read($tokens, color)}, #{awsui.$color-text-badge-severity-neutral});
   }
 }

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

@@ -10,40 +10,86 @@
 @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
 @use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use './constants' as constants;
+@use '../internal/styles/style-api' as style-api;
+
+$props: style-api.combine(style-api.$surface, (box-shadow, padding-block, padding-inline), style-api.$focus-ring);
+$tokens: style-api.resolve($props, carrier);
+@include style-api.register($tokens);
+@include style-api.docs('root', $tokens);
 
 @mixin adjust-for-variant($variant) {
-  background: var(#{custom-props.$styleBackgroundDefault}, map.get($variant, 'default-background'));
-  color: var(#{custom-props.$styleColorDefault}, map.get($variant, 'default-color'));
-  border-color: var(#{custom-props.$styleBorderColorDefault}, #{map.get($variant, 'default-border-color')});
-  box-shadow: var(#{custom-props.$styleBoxShadowDefault});
-  border-block-width: map.get($variant, 'border-width');
-  border-inline-width: map.get($variant, 'border-width');
+  background: var(
+    #{style-api.read($tokens, background-color)},
+    var(#{custom-props.$styleBackgroundDefault}, map.get($variant, 'default-background'))
+  );
+  color: var(
+    #{style-api.read($tokens, color)},
+    var(#{custom-props.$styleColorDefault}, map.get($variant, 'default-color'))
+  );
+  border-color: var(
+    #{style-api.read($tokens, border-color)},
+    var(#{custom-props.$styleBorderColorDefault}, #{map.get($variant, 'default-border-color')})
+  );
+  box-shadow: var(#{style-api.read($tokens, box-shadow)}, var(#{custom-props.$styleBoxShadowDefault}));
+  @if map.get($variant, 'border-width') {
+    border-block-width: var(#{style-api.read($tokens, border-width)}, #{map.get($variant, 'border-width')});
+    border-inline-width: var(#{style-api.read($tokens, border-width)}, #{map.get($variant, 'border-width')});
+  }
   position: relative;
   text-decoration: none;
-  padding-block: map.get($variant, 'padding');
-  padding-inline: map.get($variant, 'padding');
+  @if map.get($variant, 'padding') {
+    padding-block: var(#{style-api.read($tokens, padding-block)}, #{map.get($variant, 'padding')});
+    padding-inline: var(#{style-api.read($tokens, padding-inline)}, #{map.get($variant, 'padding')});
+  }
   font-weight: map.get($variant, 'font-weight');
 
   &:hover {
-    background: var(#{custom-props.$styleBackgroundHover}, map.get($variant, 'hover-background'));
-    border-color: var(#{custom-props.$styleBorderColorHover}, map.get($variant, 'hover-border-color'));
-    color: var(#{custom-props.$styleColorHover}, map.get($variant, 'hover-color'));
-    box-shadow: var(#{custom-props.$styleBoxShadowHover});
+    background: var(
+      #{style-api.read($tokens, background-color)},
+      var(#{custom-props.$styleBackgroundHover}, map.get($variant, 'hover-background'))
+    );
+    border-color: var(
+      #{style-api.read($tokens, border-color)},
+      var(#{custom-props.$styleBorderColorHover}, map.get($variant, 'hover-border-color'))
+    );
+    color: var(
+      #{style-api.read($tokens, color)},
+      var(#{custom-props.$styleColorHover}, map.get($variant, 'hover-color'))
+    );
+    box-shadow: var(#{style-api.read($tokens, box-shadow)}, var(#{custom-props.$styleBoxShadowHover}));
     text-decoration: none;
   }
 
   &:active {
-    background: var(#{custom-props.$styleBackgroundActive}, map.get($variant, 'active-background'));
-    border-color: var(#{custom-props.$styleBorderColorActive}, map.get($variant, 'active-border-color'));
-    color: var(#{custom-props.$styleColorActive}, map.get($variant, 'active-color'));
-    box-shadow: var(#{custom-props.$styleBoxShadowActive});
+    background: var(
+      #{style-api.read($tokens, background-color)},
+      var(#{custom-props.$styleBackgroundActive}, map.get($variant, 'active-background'))
+    );
+    border-color: var(
+      #{style-api.read($tokens, border-color)},
+      var(#{custom-props.$styleBorderColorActive}, map.get($variant, 'active-border-color'))
+    );
+    color: var(
+      #{style-api.read($tokens, color)},
+      var(#{custom-props.$styleColorActive}, map.get($variant, 'active-color'))
+    );
+    box-shadow: var(#{style-api.read($tokens, box-shadow)}, var(#{custom-props.$styleBoxShadowActive}));
   }
 
   &.disabled {
-    background: var(#{custom-props.$styleBackgroundDisabled}, map.get($variant, 'disabled-background'));
-    border-color: var(#{custom-props.$styleBorderColorDisabled}, map.get($variant, 'disabled-border-color'));
-    color: var(#{custom-props.$styleColorDisabled}, map.get($variant, 'disabled-color'));
-    box-shadow: var(#{custom-props.$styleBoxShadowDisabled});
+    background: var(
+      #{style-api.read($tokens, background-color)},
+      var(#{custom-props.$styleBackgroundDisabled}, map.get($variant, 'disabled-background'))
+    );
+    border-color: var(
+      #{style-api.read($tokens, border-color)},
+      var(#{custom-props.$styleBorderColorDisabled}, map.get($variant, 'disabled-border-color'))
+    );
+    color: var(
+      #{style-api.read($tokens, color)},
+      var(#{custom-props.$styleColorDisabled}, map.get($variant, 'disabled-color'))
+    );
+    box-shadow: var(#{style-api.read($tokens, box-shadow)}, var(#{custom-props.$styleBoxShadowDisabled}));
     text-decoration: none;
     cursor: auto;
   }
@@ -54,24 +100,22 @@
 }
 
 .button {
+  @include style-api.carriers($tokens);
   @include styles.styles-reset;
   @include styles.text-wrapping;
   @include styles.font-button;
   letter-spacing: awsui.$font-button-letter-spacing;
-  border-start-start-radius: awsui.$border-radius-button;
-  border-start-end-radius: awsui.$border-radius-button;
-  border-end-start-radius: awsui.$border-radius-button;
-  border-end-end-radius: awsui.$border-radius-button;
-  border-block: awsui.$border-width-button solid;
-  border-inline: awsui.$border-width-button solid;
-  padding-block: awsui.$space-button-vertical;
-  padding-inline: awsui.$space-button-horizontal;
+  border-start-start-radius: var(#{style-api.read($tokens, border-radius)}, #{awsui.$border-radius-button});
+  border-start-end-radius: var(#{style-api.read($tokens, border-radius)}, #{awsui.$border-radius-button});
+  border-end-start-radius: var(#{style-api.read($tokens, border-radius)}, #{awsui.$border-radius-button});
+  border-end-end-radius: var(#{style-api.read($tokens, border-radius)}, #{awsui.$border-radius-button});
+  border-block: var(#{style-api.read($tokens, border-width)}, #{awsui.$border-width-button}) solid;
+  border-inline: var(#{style-api.read($tokens, border-width)}, #{awsui.$border-width-button}) solid;
+  padding-block: var(#{style-api.read($tokens, padding-block)}, #{awsui.$space-button-vertical});
+  padding-inline: var(#{style-api.read($tokens, padding-inline)}, #{awsui.$space-button-horizontal});
   display: inline-block; // for <a> as a button
   text-decoration: none;
   cursor: pointer;
-  #{custom-props.$styleFocusRingBoxShadow}: 0 0 0
-    var(#{custom-props.$styleFocusRingBorderWidth}, foundation.$box-shadow-focused-width)
-    var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused);
 
   @each $variant in map.keys(constants.$variants) {
     &.variant-#{$variant} {
@@ -85,37 +129,37 @@
   }
 
   @include focus-visible.when-visible {
-    @include styles.focus-highlight(
-      $gutter: awsui.$space-button-focus-outline-gutter,
-      $border-radius: var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring),
-      $box-shadow: var(#{custom-props.$styleFocusRingBoxShadow})
-    );
+    $radius: var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring);
+    $width: var(#{custom-props.$styleFocusRingBorderWidth}, foundation.$box-shadow-focused-width);
+    $color: var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused);
+    @include style-api.focus-highlight($radius: $radius, $width: $width, $color: $color);
 
     &.variant-icon,
     &.variant-modal-dismiss,
     &.variant-flashbar-icon {
-      @include styles.focus-highlight(
-        (
-          'vertical': awsui.$space-button-icon-focus-outline-gutter-vertical,
-          'horizontal': awsui.$space-button-focus-outline-gutter,
-        ),
-        $border-radius: var(
-            #{custom-props.$styleFocusRingBorderRadius},
-            awsui.$border-radius-control-default-focus-ring
-          ),
-        $box-shadow: var(#{custom-props.$styleFocusRingBoxShadow})
+      @include style-api.focus-highlight(
+        $gutter-block: awsui.$space-button-icon-focus-outline-gutter-vertical,
+        $radius: $radius,
+        $width: $width,
+        $color: $color
       );
     }
 
     &.variant-inline-icon,
     &.variant-inline-icon-pointer-target {
-      @include styles.focus-highlight(awsui.$space-button-inline-icon-focus-outline-gutter);
+      @include style-api.focus-highlight(
+        $gutter-block: awsui.$space-button-inline-icon-focus-outline-gutter,
+        $gutter-inline: awsui.$space-button-inline-icon-focus-outline-gutter,
+        $radius: $radius,
+        $width: $width,
+        $color: $color
+      );
     }
   }
 
   &.button-no-text {
-    padding-inline-start: awsui.$space-button-icon-only-horizontal;
-    padding-inline-end: awsui.$space-button-icon-only-horizontal;
+    padding-inline-start: var(#{style-api.read($tokens, padding-inline)}, #{awsui.$space-button-icon-only-horizontal});
+    padding-inline-end: var(#{style-api.read($tokens, padding-inline)}, #{awsui.$space-button-icon-only-horizontal});
   }
 
   &.button-no-wrap {
@@ -133,12 +177,12 @@
   &.variant-flashbar-icon {
     // Icon has vertical padding, but no horizontal, we need to conpensate this
     // in order to have equal height and width
-    padding-inline: awsui.$space-xxs;
+    padding-inline: var(#{style-api.read($tokens, padding-inline)}, #{awsui.$space-xxs});
   }
 
   &.variant-modal-dismiss {
-    padding-block: awsui.$space-button-modal-dismiss-vertical;
-    padding-inline: awsui.$space-xxs;
+    padding-block: var(#{style-api.read($tokens, padding-block)}, #{awsui.$space-button-modal-dismiss-vertical});
+    padding-inline: var(#{style-api.read($tokens, padding-inline)}, #{awsui.$space-xxs});
     margin-inline-end: calc(-1 * #{awsui.$space-xxs});
   }