@cloudscape-design/components-themeable 3.0.481 → 3.0.482

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "61deb3a64d902efa1e65308d6a9a8b2ae1f67120"
+  "commit": "851dc8571cf17209afcf00fe8dc86f839aabcbda"
 }

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

@@ -20,7 +20,6 @@
 
   &.has-open-drawer {
     background-color: awsui.$color-background-container-content;
-    box-shadow: awsui.$shadow-panel;
   }
 
   @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
@@ -163,6 +162,7 @@
 
   &.is-drawer-open {
     border-right: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+    border-left: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
     opacity: 1;
     width: var(#{custom-props.$drawerSize});
   }

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

@@ -87,7 +87,6 @@ nav.show-navigation {
 
 nav.navigation {
   background-color: awsui.$color-background-container-content;
-  box-shadow: awsui.$shadow-panel;
   bottom: 0;
   height: 100%;
   overflow-x: hidden;
@@ -97,6 +96,7 @@ nav.navigation {
   position: relative;
   word-wrap: break-word;
   pointer-events: auto;
+  border-right: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
 
   // Animation for the Navigation opacity and width when it is added to the DOM
   @keyframes openNavigation {

package/lib/internal/scss/app-layout/visual-refresh/split-panel.scss

@@ -84,6 +84,7 @@ section.split-panel-bottom {
   */
   &.is-split-panel-open.position-bottom {
     box-shadow: awsui.$shadow-split-bottom;
+
     &.animating {
       @include styles.with-motion {
         animation: openSplitPanelBottom awsui.$motion-duration-refresh-only-fast;
@@ -108,8 +109,12 @@ section.split-panel-side {
   be persistent in the DOM when closed.
   */
   &.is-split-panel-open.position-side {
-    box-shadow: awsui.$shadow-panel;
     max-width: var(#{custom-props.$splitPanelMaxWidth}, 280px);
     min-width: var(#{custom-props.$splitPanelMinWidth}, 280px);
+    border-left: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
+
+    &:not(.has-open-drawer) {
+      border-right: awsui.$border-divider-section-width solid awsui.$color-border-divider-panel-side;
+    }
   }
 }

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

@@ -61,7 +61,6 @@ viewport size and state of the Tools drawer.
 
 .tools {
   background-color: awsui.$color-background-container-content;
-  box-shadow: awsui.$shadow-panel;
   flex-shrink: 0;
   height: 100%;
   overflow-y: auto;
@@ -93,6 +92,8 @@ viewport size and state of the Tools drawer.
 
   // Apply the animation when the Tools is opened
   &.is-tools-open {
+    border-left: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
+
     &.animating {
       @include styles.with-motion {
         animation: openTools awsui.$motion-duration-refresh-only-fast;
@@ -168,6 +169,7 @@ handleSplitPanelMaxWidth function in the context.
       display: flex;
       flex-direction: column;
       gap: awsui.$space-xs;
+
       &.animating {
         @include styles.with-motion {
           animation: showButtons awsui.$motion-duration-refresh-only-fast;

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

@@ -55,7 +55,7 @@
         color: awsui.$color-text-dropdown-item-dimmed;
       }
       &.is-focused {
-        border-color: awsui.$color-border-item-focused;
+        border-color: awsui.$color-border-dropdown-item-focused;
         box-shadow: inset 0 0 0 awsui.$border-control-focus-ring-shadow-spread awsui.$color-border-item-focused;
       }
     }

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

@@ -45,7 +45,7 @@
       }
 
       &.is-focused {
-        border-color: awsui.$color-border-item-focused;
+        border-color: awsui.$color-border-dropdown-item-focused;
         box-shadow: inset 0 0 0 awsui.$border-control-focus-ring-shadow-spread awsui.$color-border-item-focused;
       }
     }

package/lib/internal/scss/cards/styles.scss

@@ -10,6 +10,31 @@
 @use '../container/shared' as container;
 @use './motion';
 
+@mixin card-style {
+  border-radius: awsui.$border-radius-container;
+  box-sizing: border-box;
+
+  &::before {
+    @include styles.base-pseudo-element;
+    // Reset border color to prevent it from flashing black during card selection animation
+    border-color: transparent;
+    border-top: awsui.$border-container-top-width solid awsui.$color-border-container-top;
+    border-radius: awsui.$border-radius-container;
+    z-index: 1;
+  }
+
+  &::after {
+    @include styles.base-pseudo-element;
+    border-radius: awsui.$border-radius-container;
+  }
+  &:not(.refresh)::after {
+    box-shadow: awsui.$shadow-container;
+  }
+  &.refresh::after {
+    border: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
+  }
+}
+
 .root {
   @include styles.styles-reset();
   @include styles.default-text-style;
@@ -17,7 +42,6 @@
 
 .header {
   &-variant-full-page.header-refresh {
-    @include container.borders-and-shadows;
     padding-top: 0;
     padding-left: 0;
     padding-right: 0;
@@ -78,9 +102,9 @@
     background-color: awsui.$color-background-container-content;
     margin: 0 0 awsui.$space-grid-gutter awsui.$space-grid-gutter;
     padding: awsui.$space-card-vertical awsui.$space-card-horizontal;
-    @include styles.container-shadow;
     width: 100%;
     min-width: 0;
+    @include card-style;
   }
   &-header {
     @include styles.font-heading-m;

package/lib/internal/scss/collection-preferences/content-display/content-display-option.scss

@@ -37,7 +37,7 @@ $border-radius: awsui.$border-radius-item;
 .content-display-option {
   list-style: none;
   position: relative;
-  border-top: awsui.$border-divider-list-width solid awsui.$color-border-divider-default;
+  border-top: awsui.$border-divider-list-width solid awsui.$color-border-divider-secondary;
   &:not(.placeholder).sorting {
     @include animated;
   }

package/lib/internal/scss/collection-preferences/visible-content.scss

@@ -6,7 +6,7 @@
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
 
-$border: awsui.$border-divider-list-width solid awsui.$color-border-divider-default;
+$border: awsui.$border-divider-list-width solid awsui.$color-border-divider-secondary;
 
 .visible-content,
 .visible-content-toggle,

package/lib/internal/scss/container/shared.scss

@@ -15,10 +15,6 @@ $footer-padding: awsui.$space-scaled-s awsui.$space-container-horizontal;
 $header-focus-visible-padding: calc(#{awsui.$space-scaled-s} - #{awsui.$border-divider-section-width})
   calc(#{awsui.$space-l} - #{awsui.$border-divider-section-width});
 
-@mixin borders-and-shadows {
-  @include styles.container-shadow;
-}
-
 @mixin divider {
   border-top: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
 }

package/lib/internal/scss/container/styles.scss

@@ -24,17 +24,17 @@
   &.variant {
     &-default,
     &-stacked {
-      // Border and shadows are applied with ::before and ::after elements (respectively)
-      @include shared.borders-and-shadows;
       background-color: awsui.$color-background-container-content;
+      // Border and shadows are applied with ::before and ::after elements (respectively)
+      @include styles.container-style;
     }
-
     // Meld container bottom corners into next adjoining container
     &-stacked:not(:last-child),
     &-stacked:not(:last-child)::before,
     &-stacked:not(:last-child)::after {
       border-bottom-right-radius: 0;
       border-bottom-left-radius: 0;
+      border-bottom-width: 0;
     }
     // Meld container top corners into preceding container
     &-stacked + &-stacked,
@@ -44,17 +44,13 @@
       border-top-right-radius: 0;
     }
     // Replace container border with a divider
-    &-stacked + &-stacked::before {
+    &-stacked + &-stacked:not(.refresh)::before {
       @include shared.divider;
     }
-    // Reset container shadow to prevent unwanted overflow
-    &-stacked + &-stacked::after {
-      box-shadow: awsui.$shadow-container-stacked;
-    }
   }
 
   // To ensure the top border/divider is visible on sticky elements which have a higher z-index
-  &.sticky-enabled {
+  &.sticky-enabled:not(.refresh) {
     &::before {
       top: calc(-1 * #{awsui.$border-container-top-width});
     }
@@ -176,11 +172,11 @@
   }
 
   &-variant-cards {
+    // Border and shadows are applied with ::before and ::after elements (respectively)
+    @include styles.container-style;
     &:not(.header-sticky-enabled) {
       position: relative;
     }
-    @include shared.borders-and-shadows;
-
     &.header-stuck::after,
     &.header-stuck::before {
       border: 0;

package/lib/internal/scss/header/styles.scss

@@ -128,7 +128,6 @@
 .title {
   @include styles.text-wrapping;
   color: awsui.$color-text-heading-default;
-
   &-variant-h1 {
     font-size: awsui.$font-size-heading-xl;
     padding-top: awsui.$space-scaled-2x-xxs;

package/lib/internal/scss/internal/components/abstract-switch/styles.scss

@@ -13,6 +13,10 @@
   display: block;
 }
 
+.label {
+  color: awsui.$color-text-form-default;
+}
+
 .outline {
   display: none;
   &.show-outline {

package/lib/internal/scss/internal/components/selectable-item/styles.scss

@@ -53,7 +53,7 @@
   }
 
   &.highlighted {
-    z-index: 2;
+    z-index: 3;
     background-color: awsui.$color-background-dropdown-item-hover;
     border-color: awsui.$color-border-dropdown-item-hover;
     &.disabled {
@@ -64,12 +64,18 @@
   }
 
   &.selected {
+    z-index: 2;
     background-color: awsui.$color-background-dropdown-item-selected;
+    border-color: awsui.$color-border-dropdown-item-selected;
     // smooth adjacent selected borders to avoid bubble effect (visual refresh)
     &.next-item-selected {
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
     }
+    &.highlighted {
+      border-color: awsui.$color-border-dropdown-item-hover;
+      z-index: 3;
+    }
   }
 
   &.selected + &.selected {
@@ -78,7 +84,7 @@
   }
 
   &.highlighted.is-keyboard {
-    border-color: awsui.$color-border-item-focused;
+    border-color: awsui.$color-border-dropdown-item-focused;
     box-shadow: inset 0 0 0 awsui.$border-control-focus-ring-shadow-spread awsui.$color-border-item-focused;
   }
 

package/lib/internal/scss/internal/styles/forms/mixins.scss

@@ -130,11 +130,15 @@
   }
 }
 
-@mixin container-shadow {
+@mixin container-style {
   border-radius: awsui.$border-radius-container;
   box-sizing: border-box;
 
-  &::before {
+  &.refresh {
+    border: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
+  }
+
+  &:not(.refresh)::before {
     @include utils.base-pseudo-element;
     // Reset border color to prevent it from flashing black during card selection animation
     border-color: transparent;
@@ -143,17 +147,10 @@
     z-index: 1;
   }
 
-  &::after {
+  &:not(.refresh)::after {
     @include utils.base-pseudo-element;
-    box-shadow: awsui.$shadow-container;
     border-radius: awsui.$border-radius-container;
-    mix-blend-mode: multiply;
-  }
-
-  // HACK: because of the issues with IE's box shadow rendering we draw
-  // a border and don't mind the pixel fitting
-  @media screen and (-ms-high-contrast: active) {
-    border: constants.$control-border-width solid awsui.$color-border-container-top;
+    box-shadow: awsui.$shadow-container;
   }
 }
 

package/lib/internal/scss/split-panel/styles.scss

@@ -53,11 +53,6 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
     }
   }
 
-  &.refresh {
-    border-right: awsui.$border-divider-section-width solid awsui.$color-border-divider-panel-side;
-    box-sizing: border-box;
-  }
-
   & > [aria-hidden='true'] {
     display: none;
   }
@@ -77,13 +72,13 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
 .position-bottom {
   position: fixed;
   overflow-y: auto;
-  border-left: awsui.$border-divider-section-width solid awsui.$color-border-divider-panel-bottom;
-  border-right: awsui.$border-divider-section-width solid awsui.$color-border-divider-panel-bottom;
   border-top: awsui.$border-panel-top-width solid awsui.$color-border-divider-panel-bottom;
 
   &:not(.refresh) {
     // custom shadow because the existing one does not have shadow on top
     box-shadow: awsui.$shadow-split-bottom;
+    border-left: awsui.$border-divider-section-width solid awsui.$color-border-divider-panel-bottom;
+    border-right: awsui.$border-divider-section-width solid awsui.$color-border-divider-panel-bottom;
   }
   &.drawer-closed {
     overflow: hidden;

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

@@ -30,7 +30,7 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
   padding: $cell-vertical-padding $cell-horizontal-padding $cell-vertical-padding-w-border;
   border-top: awsui.$border-divider-list-width solid transparent;
   word-wrap: break-word;
-  border-bottom: awsui.$border-divider-list-width solid awsui.$color-border-divider-default;
+  border-bottom: awsui.$border-divider-list-width solid awsui.$color-border-divider-secondary;
   font-weight: inherit;
   &:not(.body-cell-wrap) {
     white-space: nowrap;

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

@@ -27,7 +27,7 @@ th:not(:last-child) > .divider {
   min-height: awsui.$line-height-heading-xs;
   max-height: calc(100% - #{$gap});
   margin: auto;
-  border-left: awsui.$border-divider-section-width solid awsui.$color-border-divider-interactive-default;
+  border-left: awsui.$border-item-width solid awsui.$color-border-divider-interactive-default;
   box-sizing: border-box;
 
   &-disabled {

package/lib/internal/scss/wizard/styles.scss

@@ -38,7 +38,7 @@
   > ul {
     background: awsui.$color-background-container-content;
     position: relative;
-    @include styles.container-shadow;
+    @include styles.container-style;
     margin: 0;
     padding: awsui.$space-scaled-m awsui.$space-l awsui.$space-scaled-l awsui.$space-m;
     width: 280px;

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

@@ -1,30 +1,30 @@
 
     import './styles.scoped.css';
     export default {
-  "alert": "awsui_alert_mx3cw_s7vra_93",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_mx3cw_s7vra_1",
-  "root": "awsui_root_mx3cw_s7vra_119",
-  "hidden": "awsui_hidden_mx3cw_s7vra_135",
-  "with-dismiss": "awsui_with-dismiss_mx3cw_s7vra_158",
-  "with-action": "awsui_with-action_mx3cw_s7vra_158",
-  "breakpoint-default": "awsui_breakpoint-default_mx3cw_s7vra_164",
-  "header": "awsui_header_mx3cw_s7vra_171",
-  "action": "awsui_action_mx3cw_s7vra_175",
-  "action-slot": "awsui_action-slot_mx3cw_s7vra_180",
-  "action-button": "awsui_action-button_mx3cw_s7vra_181",
-  "alert-focus-wrapper": "awsui_alert-focus-wrapper_mx3cw_s7vra_185",
-  "text": "awsui_text_mx3cw_s7vra_211",
-  "icon": "awsui_icon_mx3cw_s7vra_216",
-  "message": "awsui_message_mx3cw_s7vra_219",
-  "icon-size-medium": "awsui_icon-size-medium_mx3cw_s7vra_227",
-  "icon-size-big": "awsui_icon-size-big_mx3cw_s7vra_230",
-  "icon-size-normal": "awsui_icon-size-normal_mx3cw_s7vra_233",
-  "content": "awsui_content_mx3cw_s7vra_237",
-  "dismiss": "awsui_dismiss_mx3cw_s7vra_241",
-  "dismiss-button": "awsui_dismiss-button_mx3cw_s7vra_246",
-  "type-error": "awsui_type-error_mx3cw_s7vra_250",
-  "type-warning": "awsui_type-warning_mx3cw_s7vra_258",
-  "type-success": "awsui_type-success_mx3cw_s7vra_266",
-  "type-info": "awsui_type-info_mx3cw_s7vra_274"
+  "alert": "awsui_alert_mx3cw_tr160_93",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_mx3cw_tr160_1",
+  "root": "awsui_root_mx3cw_tr160_119",
+  "hidden": "awsui_hidden_mx3cw_tr160_135",
+  "with-dismiss": "awsui_with-dismiss_mx3cw_tr160_158",
+  "with-action": "awsui_with-action_mx3cw_tr160_158",
+  "breakpoint-default": "awsui_breakpoint-default_mx3cw_tr160_164",
+  "header": "awsui_header_mx3cw_tr160_171",
+  "action": "awsui_action_mx3cw_tr160_175",
+  "action-slot": "awsui_action-slot_mx3cw_tr160_180",
+  "action-button": "awsui_action-button_mx3cw_tr160_181",
+  "alert-focus-wrapper": "awsui_alert-focus-wrapper_mx3cw_tr160_185",
+  "text": "awsui_text_mx3cw_tr160_211",
+  "icon": "awsui_icon_mx3cw_tr160_216",
+  "message": "awsui_message_mx3cw_tr160_219",
+  "icon-size-medium": "awsui_icon-size-medium_mx3cw_tr160_227",
+  "icon-size-big": "awsui_icon-size-big_mx3cw_tr160_230",
+  "icon-size-normal": "awsui_icon-size-normal_mx3cw_tr160_233",
+  "content": "awsui_content_mx3cw_tr160_237",
+  "dismiss": "awsui_dismiss_mx3cw_tr160_241",
+  "dismiss-button": "awsui_dismiss-button_mx3cw_tr160_246",
+  "type-error": "awsui_type-error_mx3cw_tr160_250",
+  "type-warning": "awsui_type-warning_mx3cw_tr160_258",
+  "type-success": "awsui_type-success_mx3cw_tr160_266",
+  "type-info": "awsui_type-info_mx3cw_tr160_274"
 };