@cloudscape-design/components-themeable 3.0.1008 → 3.0.1010

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "1ac1315697c756b3213a2cf80e40a403fe37a0e9"
+  "commit": "69c8d30dc3fe54ba489aa9602cc456528ab16cfa"
 }

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

@@ -94,7 +94,10 @@
         (
           '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})
       );
     }
 

package/lib/internal/scss/flashbar/collapsible.scss

@@ -197,8 +197,8 @@ the grid layout will be:
 
 .stack > .notification-bar {
   @include styles.text-wrapping;
-  background: awsui.$color-background-notification-stack-bar;
-  border-color: awsui.$color-border-notification-stack-bar;
+  background: var(#{custom-props.$styleBackgroundDefault}, awsui.$color-background-notification-stack-bar);
+  border-color: var(#{custom-props.$styleBorderColorDefault}, awsui.$color-border-notification-stack-bar);
   border-start-start-radius: awsui.$border-radius-button;
   border-start-end-radius: awsui.$border-radius-button;
   border-end-start-radius: awsui.$border-radius-button;
@@ -206,7 +206,7 @@ the grid layout will be:
   border-block-style: solid;
   border-inline-style: solid;
   box-shadow: awsui.$shadow-panel-toggle;
-  color: awsui.$color-text-notification-stack-bar;
+  color: var(#{custom-props.$styleColorDefault}, awsui.$color-text-notification-stack-bar);
   cursor: pointer;
   display: flex;
   flex-direction: row;
@@ -260,12 +260,15 @@ the grid layout will be:
   }
 
   &:hover {
-    background: awsui.$color-background-notification-stack-bar-hover;
-    border-color: awsui.$color-background-notification-stack-bar-hover;
+    background: var(#{custom-props.$styleBackgroundHover}, awsui.$color-background-notification-stack-bar-hover);
+    border-color: var(#{custom-props.$styleBorderColorHover}, awsui.$color-background-notification-stack-bar-hover);
+    color: var(#{custom-props.$styleColorHover}, awsui.$color-text-notification-stack-bar);
   }
 
   &:active {
-    background: awsui.$color-background-notification-stack-bar-active;
+    background: var(#{custom-props.$styleBackgroundActive}, awsui.$color-background-notification-stack-bar-active);
+    border-color: var(#{custom-props.$styleBorderColorActive}, awsui.$color-background-notification-stack-bar);
+    color: var(#{custom-props.$styleColorActive}, awsui.$color-text-notification-stack-bar);
   }
 
   &.visual-refresh {

package/lib/internal/scss/flashbar/styles.scss

@@ -7,6 +7,7 @@
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/styles' as styles;
 @use '../internal/styles/typography' as typography;
+@use '../internal/styles/foundation' as foundation;
 @use './motion';
 @use './collapsible';
 
@@ -39,6 +40,10 @@
   overflow-wrap: break-word;
   word-wrap: break-word;
   box-shadow: awsui.$shadow-flash-sticky;
+
+  #{custom-props.$styleFocusRingBoxShadow}: 0 0 0
+    var(#{custom-props.$styleFocusRingBorderWidth}, foundation.$box-shadow-focused-width)
+    var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused);
 }
 
 .initial-hidden {
@@ -77,7 +82,11 @@
     outline: none;
   }
   @include focus-visible.when-visible {
-    @include styles.focus-highlight(awsui.$space-button-focus-outline-gutter);
+    @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})
+    );
   }
 }
 

package/lib/internal/scss/internal/components/chart-series-details/styles.scss

@@ -36,6 +36,7 @@ $font-weight-bold: awsui.$font-weight-heading-s;
   justify-content: space-between;
   inline-size: 100%;
   > .key {
+    @include styles.text-wrapping;
     display: inline-flex;
     color: awsui.$color-text-group-label;
   }

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

@@ -1,27 +1,27 @@
 
     import './styles.scoped.css';
     export default {
-  "content": "awsui_content_vjswe_1ift2_153",
-  "button": "awsui_button_vjswe_1ift2_157",
-  "variant-normal": "awsui_variant-normal_vjswe_1ift2_206",
-  "disabled": "awsui_disabled_vjswe_1ift2_224",
-  "variant-primary": "awsui_variant-primary_vjswe_1ift2_231",
-  "variant-link": "awsui_variant-link_vjswe_1ift2_256",
-  "variant-icon": "awsui_variant-icon_vjswe_1ift2_281",
-  "variant-inline-icon": "awsui_variant-inline-icon_vjswe_1ift2_306",
-  "variant-inline-icon-pointer-target": "awsui_variant-inline-icon-pointer-target_vjswe_1ift2_331",
-  "variant-inline-link": "awsui_variant-inline-link_vjswe_1ift2_356",
-  "variant-modal-dismiss": "awsui_variant-modal-dismiss_vjswe_1ift2_385",
-  "variant-flashbar-icon": "awsui_variant-flashbar-icon_vjswe_1ift2_410",
-  "variant-breadcrumb-group": "awsui_variant-breadcrumb-group_vjswe_1ift2_435",
-  "variant-menu-trigger": "awsui_variant-menu-trigger_vjswe_1ift2_465",
-  "button-no-text": "awsui_button-no-text_vjswe_1ift2_557",
-  "button-no-wrap": "awsui_button-no-wrap_vjswe_1ift2_561",
-  "full-width": "awsui_full-width_vjswe_1ift2_564",
-  "icon-left": "awsui_icon-left_vjswe_1ift2_586",
-  "icon-right": "awsui_icon-right_vjswe_1ift2_591",
-  "icon": "awsui_icon_vjswe_1ift2_586",
-  "link": "awsui_link_vjswe_1ift2_610",
-  "disabled-with-reason": "awsui_disabled-with-reason_vjswe_1ift2_610"
+  "content": "awsui_content_vjswe_1394f_153",
+  "button": "awsui_button_vjswe_1394f_157",
+  "variant-normal": "awsui_variant-normal_vjswe_1394f_206",
+  "disabled": "awsui_disabled_vjswe_1394f_224",
+  "variant-primary": "awsui_variant-primary_vjswe_1394f_231",
+  "variant-link": "awsui_variant-link_vjswe_1394f_256",
+  "variant-icon": "awsui_variant-icon_vjswe_1394f_281",
+  "variant-inline-icon": "awsui_variant-inline-icon_vjswe_1394f_306",
+  "variant-inline-icon-pointer-target": "awsui_variant-inline-icon-pointer-target_vjswe_1394f_331",
+  "variant-inline-link": "awsui_variant-inline-link_vjswe_1394f_356",
+  "variant-modal-dismiss": "awsui_variant-modal-dismiss_vjswe_1394f_385",
+  "variant-flashbar-icon": "awsui_variant-flashbar-icon_vjswe_1394f_410",
+  "variant-breadcrumb-group": "awsui_variant-breadcrumb-group_vjswe_1394f_435",
+  "variant-menu-trigger": "awsui_variant-menu-trigger_vjswe_1394f_465",
+  "button-no-text": "awsui_button-no-text_vjswe_1394f_557",
+  "button-no-wrap": "awsui_button-no-wrap_vjswe_1394f_561",
+  "full-width": "awsui_full-width_vjswe_1394f_564",
+  "icon-left": "awsui_icon-left_vjswe_1394f_586",
+  "icon-right": "awsui_icon-right_vjswe_1394f_591",
+  "icon": "awsui_icon_vjswe_1394f_586",
+  "link": "awsui_link_vjswe_1394f_610",
+  "disabled-with-reason": "awsui_disabled-with-reason_vjswe_1394f_610"
 };