@cloudscape-design/components-themeable 3.0.961 → 3.0.963

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "ab0738d120457d00382e238f26a8c22750e6d3ad"
+  "commit": "47fefdb6cfa6d6792b1bf24019ef1d1449670c7b"
 }

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

@@ -56,8 +56,8 @@
   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: styles.$control-border-width solid;
-  border-inline: styles.$control-border-width solid;
+  border-block: awsui.$border-width-button solid;
+  border-inline: awsui.$border-width-button solid;
   padding-block: styles.$control-padding-vertical;
   padding-inline: awsui.$space-button-horizontal;
   display: inline-block; // for <a> as a button

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

@@ -63,7 +63,9 @@
       }
       &.is-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;
+        &:not(.visual-refresh) {
+          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

@@ -15,7 +15,7 @@
   padding-block: 0;
   padding-inline: 0;
   color: awsui.$color-text-dropdown-item-default;
-  margin-block-start: calc(-1 * #{styles.$control-border-width});
+  margin-block-start: calc(-1 * #{awsui.$border-width-dropdown});
   cursor: pointer;
 
   &.disabled {
@@ -47,7 +47,9 @@
 
     &.is-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;
+      &:not(.visual-refresh) {
+        box-shadow: inset 0 0 0 awsui.$border-control-focus-ring-shadow-spread awsui.$color-border-item-focused;
+      }
     }
   }
 }

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

@@ -39,9 +39,9 @@ $dropdown-trigger-icon-offset: 2px;
   list-style: none;
   padding-block: awsui.$space-s;
   padding-inline: awsui.$space-l;
-  border-block-start: styles.$control-border-width solid transparent;
-  border-block-end: styles.$control-border-width solid awsui.$color-border-dropdown-group;
-  border-inline: styles.$control-border-width solid transparent;
+  border-block-start: awsui.$border-width-dropdown solid transparent;
+  border-block-end: awsui.$border-width-dropdown solid awsui.$color-border-dropdown-group;
+  border-inline: awsui.$border-width-dropdown solid transparent;
 }
 
 .title,
@@ -107,7 +107,7 @@ $dropdown-trigger-icon-offset: 2px;
     }
 
     &:not(:first-child) > .trigger-button {
-      margin-inline-start: calc(#{styles.$control-border-width} * -1);
+      margin-inline-start: calc(#{awsui.$border-width-button} * -1);
     }
   }
 }

package/lib/internal/scss/code-editor/styles.scss

@@ -13,8 +13,8 @@
 .code-editor {
   @include styles.styles-reset;
   display: block;
-  border-block: awsui.$border-item-width solid awsui.$color-border-code-editor-default;
-  border-inline: awsui.$border-item-width solid awsui.$color-border-code-editor-default;
+  border-block: awsui.$border-width-field solid awsui.$color-border-code-editor-default;
+  border-inline: awsui.$border-width-field solid awsui.$color-border-code-editor-default;
   border-start-start-radius: awsui.$border-radius-code-editor;
   border-start-end-radius: awsui.$border-radius-code-editor;
   border-end-start-radius: awsui.$border-radius-code-editor;
@@ -46,7 +46,7 @@
   container-type: inline-size;
   display: flex;
   vertical-align: middle;
-  border-block-start: awsui.$border-item-width solid awsui.$color-border-code-editor-default;
+  border-block-start: awsui.$border-width-field solid awsui.$color-border-code-editor-default;
   background-color: awsui.$color-background-code-editor-status-bar;
   @include styles.text-wrapping;
 
@@ -60,7 +60,7 @@
     display: flex;
     flex-wrap: wrap;
     padding-inline-start: awsui.$space-l;
-    border-inline-end: awsui.$border-item-width solid awsui.$color-border-code-editor-default;
+    border-inline-end: awsui.$border-width-field solid awsui.$color-border-code-editor-default;
   }
 
   &__right {

package/lib/internal/scss/drawer/styles.scss

@@ -18,8 +18,6 @@
   padding-inline: awsui.$space-panel-side-left calc(#{awsui.$space-xl} + #{awsui.$space-scaled-xxl});
   // padding to make sure the header doesn't overlap with the close icon
   border-block-end: awsui.$border-divider-section-width solid awsui.$color-border-panel-header;
-  margin-block-start: 0;
-  margin-block-end: awsui.$space-panel-content-top;
   .with-toolbar > & {
     border-color: transparent;
     margin-block-end: 0px;
@@ -38,7 +36,8 @@
   /* stylelint-enable @cloudscape-design/no-implicit-descendant, selector-max-type */
 }
 
-.content:not(:empty) {
+.content-with-paddings:not(:empty) {
+  padding-block-start: awsui.$space-panel-content-top;
   padding-inline-start: awsui.$space-panel-side-left;
   padding-inline-end: awsui.$space-panel-side-right;
   padding-block-end: awsui.$space-panel-content-bottom;

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

@@ -82,7 +82,7 @@
 }
 
 .flash-text {
-  margin-block: awsui.$border-width-field;
+  margin-block: awsui.$border-item-width;
   margin-inline: 0;
   padding-block: awsui.$space-scaled-xxs;
   padding-inline: awsui.$space-xxs;

package/lib/internal/scss/input/styles.scss

@@ -50,8 +50,8 @@
   border-start-end-radius: styles.$control-border-radius;
   border-end-start-radius: styles.$control-border-radius;
   border-end-end-radius: styles.$control-border-radius;
-  border-block: styles.$control-border-width solid awsui.$color-border-input-default;
-  border-inline: styles.$control-border-width solid awsui.$color-border-input-default;
+  border-block: awsui.$border-width-field solid awsui.$color-border-input-default;
+  border-inline: awsui.$border-width-field solid awsui.$color-border-input-default;
   @include styles.font-body-m;
   block-size: awsui.$size-vertical-input;
 
@@ -84,7 +84,7 @@
     @include styles.form-invalid-control();
     &.input-has-icon-left {
       padding-inline-start: calc(
-        #{styles.$control-icon-horizontal-padding} - (#{styles.$invalid-control-left-border} - #{styles.$control-border-width})
+        #{styles.$control-icon-horizontal-padding} - (#{styles.$invalid-control-left-border} - #{awsui.$border-width-field})
       );
     }
   }
@@ -93,7 +93,7 @@
     @include styles.form-warning-control();
     &.input-has-icon-left {
       padding-inline-start: calc(
-        #{styles.$control-icon-horizontal-padding} - (#{styles.$invalid-control-left-border} - #{styles.$control-border-width})
+        #{styles.$control-icon-horizontal-padding} - (#{styles.$invalid-control-left-border} - #{awsui.$border-width-field})
       );
     }
   }

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

@@ -29,14 +29,16 @@ $padding-block-inner-filtering-token: 0px;
   border-start-end-radius: styles.$control-border-radius;
   border-end-start-radius: styles.$control-border-radius;
   border-end-end-radius: styles.$control-border-radius;
-  border-block: styles.$control-border-width solid awsui.$color-border-input-default;
-  border-inline: styles.$control-border-width solid awsui.$color-border-input-default;
+  border-block: awsui.$border-width-field solid awsui.$color-border-input-default;
+  border-inline: awsui.$border-width-field solid awsui.$color-border-input-default;
   min-block-size: awsui.$size-vertical-input;
 
   &.in-filtering-token-root,
   &.in-filtering-token-nested {
     padding-block: $padding-block-inner-filtering-token;
     padding-inline: $padding-inline-inner-filtering-token;
+    border-block-width: awsui.$border-width-token;
+    border-inline-width: awsui.$border-width-token;
 
     border-color: tokenGroup.$token-border-color;
     border-start-end-radius: 0;
@@ -82,7 +84,7 @@ $padding-block-inner-filtering-token: 0px;
   }
 
   &.disabled {
-    @include styles.form-disabled-element;
+    @include styles.button-trigger-disabled-element;
 
     > .arrow {
       color: awsui.$color-text-button-inline-icon-disabled;
@@ -100,7 +102,7 @@ $padding-block-inner-filtering-token: 0px;
   // read-only in-filtering-token (i.e. for property filter readOnlyOperations)
   // should retain standard borders, only the icon changes
   &.readonly:not(&.disabled):not(&.in-filtering-token) {
-    @include styles.form-readonly-element;
+    @include styles.button-trigger-readonly-element;
   }
 
   &:focus {

package/lib/internal/scss/internal/components/chart-popover/styles.scss

@@ -10,14 +10,20 @@
   @include styles.styles-reset;
   position: absolute;
 }
-.hover-area {
-  pointer-events: none;
-  padding-block: awsui.$space-static-s;
-  padding-inline: awsui.$space-static-s;
-  margin-block: calc(-1 * #{awsui.$space-static-s});
-  margin-inline: calc(-1 * #{awsui.$space-static-s});
-}
 
 .popover-body {
   pointer-events: auto;
 }
+
+.footer {
+  margin-block-start: awsui.$space-static-xs;
+
+  /* stylelint-disable-next-line selector-max-type */
+  > hr {
+    border-block: none;
+    border-inline: none;
+    border-block-start: 1px solid awsui.$color-border-divider-default;
+    margin-block: awsui.$space-static-xs;
+    margin-inline: 0;
+  }
+}

package/lib/internal/scss/internal/components/chart-popover/test-classes/styles.scss

@@ -0,0 +1,10 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+.header,
+.body,
+.footer {
+  /* used in test-utils */
+}

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

@@ -88,7 +88,3 @@ $font-weight-bold: awsui.$font-weight-heading-s;
 .full-width {
   inline-size: 100%;
 }
-
-.announced {
-  /* Used by getSeriesDetailText to select text to be announced by screen readers */
-}

package/lib/internal/scss/internal/components/checkbox-icon/styles.scss

@@ -16,7 +16,7 @@
   > .styled-box {
     fill: awsui.$color-background-control-default;
     stroke: awsui.$color-border-control-default;
-    stroke-width: styles.$control-border-width;
+    stroke-width: awsui.$border-width-field;
     @include styles.with-motion {
       transition:
         fill awsui.$motion-duration-transition-quick awsui.$motion-easing-transition-quick,

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

@@ -92,7 +92,9 @@
 
   &.highlighted.is-keyboard {
     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;
+    &:not(.visual-refresh) {
+      box-shadow: inset 0 0 0 awsui.$border-control-focus-ring-shadow-spread awsui.$color-border-item-focused;
+    }
   }
 
   &.parent {

package/lib/internal/scss/internal/components/token-list/styles.scss

@@ -75,8 +75,8 @@
   display: flex;
   align-items: center;
   background-color: transparent;
-  border-block: styles.$control-border-width solid transparent;
-  border-inline: styles.$control-border-width solid transparent;
+  border-block: awsui.$border-width-button solid transparent;
+  border-inline: awsui.$border-width-button solid transparent;
 
   padding-block: 0;
   padding-inline: 0;

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

@@ -6,7 +6,6 @@
 @use '../utils/theming' as theming;
 @use '../tokens' as awsui;
 
-$control-border-width: awsui.$border-width-field;
 $control-border-radius: awsui.$border-radius-input;
 
 // Use for options in dropdowns
@@ -26,7 +25,7 @@ $control-padding: $control-padding-vertical $control-padding-horizontal;
 
 $invalid-control-left-border: awsui.$border-invalid-width;
 $invalid-control-left-padding: calc(
-  #{$control-padding-horizontal} - (#{$invalid-control-left-border} - #{$control-border-width})
+  #{$control-padding-horizontal} - (#{$invalid-control-left-border} - #{awsui.$border-width-field})
 );
 
 $control-icon-vertical-offset: calc(50% - #{awsui.$line-height-body-m} / 2);

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

@@ -98,8 +98,8 @@
   // Using a special transparent outline only visible in Windows High Contrast Mode.
   // See focus-highlight above.
   outline: 2px dotted transparent;
-  border-block: constants.$control-border-width solid awsui.$color-border-item-focused;
-  border-inline: constants.$control-border-width solid awsui.$color-border-item-focused;
+  border-block: awsui.$border-width-button solid awsui.$color-border-item-focused;
+  border-inline: awsui.$border-width-button solid awsui.$color-border-item-focused;
   border-start-start-radius: $border-radius;
   border-start-end-radius: $border-radius;
   border-end-start-radius: $border-radius;
@@ -114,8 +114,8 @@
   // See focus-highlight above.
   outline: 2px dotted transparent;
 
-  border-block: constants.$control-border-width solid awsui.$color-border-input-focused;
-  border-inline: constants.$control-border-width solid awsui.$color-border-input-focused;
+  border-block: awsui.$border-width-field solid awsui.$color-border-input-focused;
+  border-inline: awsui.$border-width-field solid awsui.$color-border-input-focused;
   border-start-start-radius: $border-radius;
   border-start-end-radius: $border-radius;
   border-end-start-radius: $border-radius;
@@ -126,16 +126,30 @@
 
 @mixin form-disabled-element {
   background-color: awsui.$color-background-input-disabled;
-  border-block: constants.$control-border-width solid awsui.$color-border-input-disabled;
-  border-inline: constants.$control-border-width solid awsui.$color-border-input-disabled;
+  border-block: awsui.$border-width-field solid awsui.$color-border-input-disabled;
+  border-inline: awsui.$border-width-field solid awsui.$color-border-input-disabled;
+  color: awsui.$color-text-input-disabled;
+  cursor: auto;
+}
+
+@mixin button-trigger-disabled-element {
+  background-color: awsui.$color-background-input-disabled;
+  border-block: awsui.$border-width-token solid awsui.$color-border-input-disabled;
+  border-inline: awsui.$border-width-token solid awsui.$color-border-input-disabled;
   color: awsui.$color-text-input-disabled;
   cursor: auto;
 }
 
 @mixin form-readonly-element {
   background-color: awsui.$color-background-input-default;
-  border-block: constants.$control-border-width solid awsui.$color-border-input-disabled;
-  border-inline: constants.$control-border-width solid awsui.$color-border-input-disabled;
+  border-block: awsui.$border-width-field solid awsui.$color-border-input-disabled;
+  border-inline: awsui.$border-width-field solid awsui.$color-border-input-disabled;
+}
+
+@mixin button-trigger-readonly-element {
+  background-color: awsui.$color-background-input-default;
+  border-block: awsui.$border-width-token solid awsui.$color-border-input-disabled;
+  border-inline: awsui.$border-width-token solid awsui.$color-border-input-disabled;
 }
 
 @mixin form-placeholder {
@@ -238,8 +252,8 @@
     inset-inline-start: 0px;
     inset-inline-end: 0px;
     background-color: transparent;
-    border-block: awsui.$border-width-field solid awsui.$color-border-dropdown-container;
-    border-inline: awsui.$border-width-field solid awsui.$color-border-dropdown-container;
+    border-block: awsui.$border-width-popover solid awsui.$color-border-dropdown-container;
+    border-inline: awsui.$border-width-popover solid awsui.$color-border-dropdown-container;
     border-start-start-radius: awsui.$border-radius-dropdown;
     border-start-end-radius: awsui.$border-radius-dropdown;
     border-end-start-radius: awsui.$border-radius-dropdown;

package/lib/internal/scss/pagination/styles.scss

@@ -23,8 +23,8 @@
 .button,
 .dots {
   min-inline-size: awsui.$space-l;
-  border-block: styles.$control-border-width solid transparent;
-  border-inline: styles.$control-border-width solid transparent;
+  border-block: awsui.$border-width-button solid transparent;
+  border-inline: awsui.$border-width-button solid transparent;
 }
 
 .button {

package/lib/internal/scss/popover/body.scss

@@ -18,6 +18,11 @@ $header-row-margin-block-end: awsui.$space-xs;
   &-overflow-visible {
     overflow: visible;
   }
+
+  &-variant-chart {
+    padding-block: awsui.$space-static-s;
+    padding-inline: awsui.$space-static-s;
+  }
 }
 
 .has-dismiss {

package/lib/internal/scss/popover/styles.scss

@@ -89,3 +89,11 @@ $trigger-underline-offset: 0.25em;
 .popover-inline-content {
   display: inline;
 }
+
+.hover-area {
+  pointer-events: none;
+  padding-block: awsui.$space-static-s;
+  padding-inline: awsui.$space-static-s;
+  margin-block: calc(-1 * #{awsui.$space-static-s});
+  margin-inline: calc(-1 * #{awsui.$space-static-s});
+}

package/lib/internal/scss/prompt-input/styles.scss

@@ -20,8 +20,8 @@ $invalid-border-offset: constants.$invalid-control-left-padding;
 
   background-color: awsui.$color-background-input-default;
 
-  border-block: styles.$control-border-width solid awsui.$color-border-input-default;
-  border-inline: styles.$control-border-width solid awsui.$color-border-input-default;
+  border-block: awsui.$border-width-field solid awsui.$color-border-input-default;
+  border-inline: awsui.$border-width-field solid awsui.$color-border-input-default;
 
   &.textarea-readonly {
     @include styles.form-readonly-element;

package/lib/internal/scss/property-filter/filtering-token/styles.scss

@@ -29,7 +29,7 @@ $border-radius-inner-token: calc(#{awsui.$border-radius-token} / 2);
     min-block-size: calc(2px + #{awsui.$size-vertical-input});
 
     &.compact-mode {
-      min-block-size: calc(2px + 2 * #{styles.$control-border-width} + #{awsui.$size-vertical-input});
+      min-block-size: calc(2px + 2 * #{awsui.$border-width-token} + #{awsui.$size-vertical-input});
     }
   }
 }
@@ -40,8 +40,8 @@ $border-radius-inner-token: calc(#{awsui.$border-radius-token} / 2);
 
 .token,
 .inner-token {
-  border-block: awsui.$border-width-field solid constants.$token-border-color;
-  border-inline: awsui.$border-width-field solid constants.$token-border-color;
+  border-block: awsui.$border-width-token solid constants.$token-border-color;
+  border-inline: awsui.$border-width-token solid constants.$token-border-color;
   display: flex;
   align-items: stretch;
   background: constants.$token-background;
@@ -116,7 +116,7 @@ $border-radius-inner-token: calc(#{awsui.$border-radius-token} / 2);
   padding-inline: awsui.$space-xxs;
   color: awsui.$color-text-interactive-default;
   background-color: transparent;
-  border-inline-start: styles.$control-border-width solid constants.$token-border-color;
+  border-inline-start: awsui.$border-width-button solid constants.$token-border-color;
 
   @include focus-visible.when-visible {
     @include styles.focus-highlight(awsui.$space-filtering-token-dismiss-button-focus-outline-gutter);

package/lib/internal/scss/property-filter/styles.scss

@@ -213,7 +213,7 @@ $operator-field-width: 120px;
 
 .results {
   // Align with the filter input's vertical padding and border sizes.
-  padding-block: calc(#{styles.$control-padding-vertical} + #{styles.$control-border-width});
+  padding-block: calc(#{styles.$control-padding-vertical} + #{awsui.$border-width-field});
   padding-inline: 0;
 }
 

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

@@ -33,11 +33,13 @@
   border-end-end-radius: awsui.$border-radius-button;
   align-items: center;
   min-block-size: calc(awsui.$line-height-body-m + awsui.$space-static-xxs);
-  padding-inline: awsui.$space-static-xxxs;
+  padding-block: calc(seg.$segment-gap / 2 - awsui.$border-width-field);
+  padding-inline: calc(seg.$segment-gap - awsui.$border-width-field);
   gap: calc(#{seg.$segment-gap} * 2 + #{seg.$segment-divider-width});
 
   &:not(.refresh) {
-    padding-inline: calc(awsui.$space-static-xxxs + 1px);
+    padding-inline: calc(awsui.$space-static-xxxs + awsui.$border-width-field);
+    padding-block: 0;
     gap: calc(#{seg.$segment-gap} * 2 - #{seg.$segment-divider-width});
   }
 

package/lib/internal/scss/select/parts/styles.scss

@@ -88,8 +88,8 @@ $inlineLabel-border-radius: 2px;
     min-inline-size: max-content;
     block-size: 18px;
 
-    border-block: awsui.$border-width-field solid awsui.$color-border-item-selected;
-    border-inline: awsui.$border-width-field solid awsui.$color-border-item-selected;
+    border-block: awsui.$border-width-token solid awsui.$color-border-item-selected;
+    border-inline: awsui.$border-width-token solid awsui.$color-border-item-selected;
     padding-block: 0;
     padding-inline: awsui.$space-xxs;
     background: awsui.$color-background-item-selected;
@@ -132,7 +132,7 @@ $inlineLabel-border-radius: 2px;
 }
 
 .inline-label {
-  background: awsui.$color-background-container-header;
+  background: linear-gradient(to bottom, awsui.$color-background-layout-main, awsui.$color-background-input-default);
   border-start-start-radius: $inlineLabel-border-radius;
   border-start-end-radius: $inlineLabel-border-radius;
   border-end-start-radius: $inlineLabel-border-radius;
@@ -145,7 +145,7 @@ $inlineLabel-border-radius: 2px;
   line-height: 14px;
   letter-spacing: awsui.$letter-spacing-body-s;
   position: relative;
-  inset-inline-start: calc(styles.$control-border-width + awsui.$space-field-horizontal - awsui.$space-scaled-xxs);
+  inset-inline-start: calc(awsui.$border-width-field + awsui.$space-field-horizontal - awsui.$space-scaled-xxs);
   margin-block-start: awsui.$space-scaled-xs;
   padding-block-end: 2px;
   padding-inline: awsui.$space-scaled-xxs;

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

@@ -213,6 +213,9 @@ $cell-negative-space-vertical: 2px;
   &-shaded {
     background: awsui.$color-background-cell-shaded;
   }
+  &.has-striped-rows:not(.body-cell-selected):not(.body-cell-last-row) {
+    border-block-end-color: awsui.$color-border-cell-shaded;
+  }
   &-selected {
     background-color: awsui.$color-background-item-selected;
     border-block-start: $selected-border;

package/lib/internal/scss/textarea/styles.scss

@@ -32,8 +32,8 @@
   border-start-end-radius: styles.$control-border-radius;
   border-end-start-radius: styles.$control-border-radius;
   border-end-end-radius: styles.$control-border-radius;
-  border-block: styles.$control-border-width solid awsui.$color-border-input-default;
-  border-inline: styles.$control-border-width solid awsui.$color-border-input-default;
+  border-block: awsui.$border-width-field solid awsui.$color-border-input-default;
+  border-inline: awsui.$border-width-field solid awsui.$color-border-input-default;
   @include styles.font-body-m;
 
   &.textarea-readonly {

package/lib/internal/scss/tiles/styles.scss

@@ -29,8 +29,8 @@ $gutter: awsui.$space-tile-gutter;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  border-block: styles.$control-border-width solid awsui.$color-border-input-default;
-  border-inline: styles.$control-border-width solid awsui.$color-border-input-default;
+  border-block: awsui.$border-width-field solid awsui.$color-border-input-default;
+  border-inline: awsui.$border-width-field solid awsui.$color-border-input-default;
   border-start-start-radius: awsui.$border-radius-tiles;
   border-start-end-radius: awsui.$border-radius-tiles;
   border-end-start-radius: awsui.$border-radius-tiles;
@@ -48,6 +48,9 @@ $gutter: awsui.$space-tile-gutter;
   &.refresh {
     padding-block: awsui.$space-xs;
     padding-inline: awsui.$space-s;
+    &.selected:not(.disabled):not(.readonly) {
+      box-shadow: inset 0 0 0 awsui.$border-width-field awsui.$color-border-item-focused;
+    }
   }
 
   &.has-metadata {
@@ -58,14 +61,14 @@ $gutter: awsui.$space-tile-gutter;
   }
 
   &.selected {
-    border-block: styles.$control-border-width solid awsui.$color-border-item-selected;
-    border-inline: styles.$control-border-width solid awsui.$color-border-item-selected;
+    border-block: awsui.$border-width-field solid awsui.$color-border-item-selected;
+    border-inline: awsui.$border-width-field solid awsui.$color-border-item-selected;
     background: awsui.$color-background-item-selected;
   }
 
   &.disabled {
-    border-block: styles.$control-border-width solid awsui.$color-border-tiles-disabled;
-    border-inline: styles.$control-border-width solid awsui.$color-border-tiles-disabled;
+    border-block: awsui.$border-width-field solid awsui.$color-border-tiles-disabled;
+    border-inline: awsui.$border-width-field solid awsui.$color-border-tiles-disabled;
     background: awsui.$color-background-tiles-disabled;
   }
 

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

@@ -9,8 +9,8 @@
 @mixin token-box-styles {
   position: relative;
   block-size: 100%;
-  border-block: awsui.$border-width-field solid constants.$token-border-color;
-  border-inline: awsui.$border-width-field solid constants.$token-border-color;
+  border-block: awsui.$border-width-token solid constants.$token-border-color;
+  border-inline: awsui.$border-width-token solid constants.$token-border-color;
   padding-block-start: styles.$control-padding-vertical;
   padding-block-end: styles.$control-padding-vertical;
   padding-inline-start: styles.$control-padding-horizontal;

package/lib/internal/scss/tutorial-panel/components/tutorial-list/styles.scss

@@ -61,8 +61,8 @@
 }
 
 .button-wrapper {
-  margin-block: calc(-1 * #{awsui.$space-xxs} - #{styles.$control-border-width});
-  margin-inline: calc(-1 * #{awsui.$space-xxs} - #{styles.$control-border-width});
+  margin-block: calc(-1 * #{awsui.$space-xxs} - #{awsui.$border-width-button});
+  margin-inline: calc(-1 * #{awsui.$space-xxs} - #{awsui.$border-width-button});
 }
 
 .start {

package/lib/internal/template/alert/actions-wrapper/styles.css.js

@@ -1,6 +1,6 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_37gf8_14dd3_9"
+  "root": "awsui_root_37gf8_4bk07_9"
 };
   

package/lib/internal/template/alert/actions-wrapper/styles.scoped.css

@@ -6,12 +6,12 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_37gf8_14dd3_9:not(#\9) {
+.awsui_root_37gf8_4bk07_9:not(#\9) {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  gap: var(--space-xs-6dgkww, 8px);
+  gap: var(--space-xs-kw7k3v, 8px);
 }
-.awsui_root_37gf8_14dd3_9 > :not(#\9):empty {
+.awsui_root_37gf8_4bk07_9 > :not(#\9):empty {
   display: none;
 }

package/lib/internal/template/alert/actions-wrapper/styles.selectors.js

@@ -2,6 +2,6 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_37gf8_14dd3_9"
+  "root": "awsui_root_37gf8_4bk07_9"
 };