@cloudscape-design/components-themeable 3.0.16 → 3.0.17

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

@@ -25,7 +25,7 @@
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
-  border-radius: awsui.$border-alert-radius;
+  border-radius: awsui.$border-radius-alert;
   border: awsui.$border-field-width solid;
   padding: awsui.$space-alert-vertical awsui.$space-alert-horizontal;
   background-color: awsui.$color-background-container-content;

package/lib/internal/scss/annotation-context/annotation/styles.scss

@@ -57,7 +57,7 @@
   }
 
   @include focus-visible.when-visible {
-    @include styles.focus-highlight(2px, awsui.$border-control-focus-ring-radius-circle);
+    @include styles.focus-highlight(2px, awsui.$border-radius-control-focus-ring-circle);
   }
 
   > .icon {

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

@@ -12,7 +12,7 @@
   @include styles.font-body-s;
   line-height: awsui.$font-body-m-line-height;
   display: inline-block;
-  border-radius: awsui.$border-badge-radius;
+  border-radius: awsui.$border-radius-badge;
   padding: 0 awsui.$space-xs;
   color: awsui.$color-text-notification-default;
 

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

@@ -76,7 +76,7 @@
 .button {
   @include styles.styles-reset;
   @include styles.text-wrapping;
-  border-radius: awsui.$border-button-radius;
+  border-radius: awsui.$border-radius-button;
   border: styles.$control-border-width solid;
   padding: styles.$control-padding-vertical awsui.$space-l;
   font-weight: awsui.$font-button-weight;

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

@@ -48,7 +48,7 @@ $option-padding-horizontal: awsui.$space-l;
       // reset padding when adding border back in
       padding: styles.$option-padding-vertical $option-padding-horizontal;
       border: awsui.$border-item-width solid awsui.$color-border-dropdown-item-hover;
-      border-radius: awsui.$border-item-radius;
+      border-radius: awsui.$border-radius-item;
       z-index: 2;
       &.disabled {
         background-color: awsui.$color-background-dropdown-item-dimmed;

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

@@ -35,7 +35,7 @@
     &.variant-primary {
       background-color: awsui.$color-background-dropdown-item-hover;
       border-color: awsui.$color-border-dropdown-item-hover;
-      border-radius: awsui.$border-item-radius;
+      border-radius: awsui.$border-radius-item;
 
       &.disabled {
         color: awsui.$color-text-dropdown-item-dimmed;

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

@@ -198,10 +198,10 @@
 
 .code-editor-refresh :global .ace_editor {
   .ace_gutter {
-    border-top-left-radius: calc(awsui.$border-item-radius - awsui.$border-item-width);
+    border-top-left-radius: calc(awsui.$border-radius-item - awsui.$border-item-width);
   }
   .ace_scroller {
-    border-top-right-radius: calc(awsui.$border-item-radius - awsui.$border-item-width);
+    border-top-right-radius: calc(awsui.$border-radius-item - awsui.$border-item-width);
   }
 }
 

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

@@ -9,7 +9,7 @@
 
 @mixin pane-row-border($border-color) {
   $border: awsui.$border-item-width solid $border-color;
-  $radius: awsui.$border-item-radius;
+  $radius: awsui.$border-radius-item;
   > .pane__cell {
     border-top: $border;
     border-bottom: $border;
@@ -33,8 +33,8 @@
   flex: 1;
 
   border-top: awsui.$border-item-width solid awsui.$color-border-code-editor-default;
-  border-bottom-left-radius: awsui.$border-item-radius;
-  border-bottom-right-radius: awsui.$border-item-radius;
+  border-bottom-left-radius: awsui.$border-radius-item;
+  border-bottom-right-radius: awsui.$border-radius-item;
   background: awsui.$color-background-code-editor-status-bar;
   color: awsui.$color-text-body-default;
 

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

@@ -15,7 +15,7 @@
   @include styles.styles-reset;
   display: inline-block;
   border: awsui.$border-item-width solid awsui.$color-border-code-editor-default;
-  border-radius: awsui.$border-item-radius;
+  border-radius: awsui.$border-radius-item;
   width: 100%;
 }
 
@@ -61,8 +61,8 @@
 }
 
 .code-editor-refresh > .resizable-box > .editor {
-  border-top-left-radius: calc(awsui.$border-item-radius - awsui.$border-item-width);
-  border-top-right-radius: calc(awsui.$border-item-radius - awsui.$border-item-width);
+  border-top-left-radius: calc(awsui.$border-radius-item - awsui.$border-item-width);
+  border-top-right-radius: calc(awsui.$border-radius-item - awsui.$border-item-width);
 }
 
 .status-bar {
@@ -72,8 +72,8 @@
   border-top: awsui.$border-item-width solid awsui.$color-border-code-editor-default;
   background-color: awsui.$color-background-code-editor-status-bar;
   &-with-hidden-pane {
-    border-bottom-left-radius: awsui.$border-item-radius;
-    border-bottom-right-radius: awsui.$border-item-radius;
+    border-bottom-left-radius: awsui.$border-radius-item;
+    border-bottom-right-radius: awsui.$border-radius-item;
   }
 
   @include styles.text-wrapping;
@@ -136,7 +136,7 @@
     right: 0;
     bottom: 0;
     height: awsui.$border-active-width;
-    border-radius: awsui.$border-active-radius;
+    border-radius: awsui.$border-radius-tabs-focus-ring;
     background: awsui.$color-text-status-error;
     opacity: 0;
   }
@@ -200,7 +200,7 @@ $default-height: 480px;
 
   color: awsui.$color-text-body-secondary;
   background: awsui.$color-background-code-editor-loading;
-  border-radius: awsui.$border-item-radius;
+  border-radius: awsui.$border-radius-item;
 }
 
 .error-screen {

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

@@ -32,7 +32,7 @@
 
 .header {
   background-color: awsui.$color-background-container-header;
-  border-radius: awsui.$border-container-radius;
+  border-radius: awsui.$border-radius-container;
   // sticky positioning may be disabled (on mobile or if browser does not support it),
   // but some markup still requires a new stacking context
   &-sticky-disabled {

package/lib/internal/scss/date-picker/styles.scss

@@ -107,7 +107,7 @@ $calendar-grid-border: 1px solid $calendar-grid-border-color;
     text-align: center;
     border-bottom: $calendar-grid-border;
     border-right: $calendar-grid-border;
-    border-radius: awsui.$border-calendar-grid-radius;
+    border-radius: awsui.$border-radius-item;
     padding: awsui.$space-xxs 0;
     color: $calendar-grid-disabled-day-color;
     position: relative;
@@ -136,7 +136,7 @@ $calendar-grid-border: 1px solid $calendar-grid-border-color;
           &:not(.calendar-day-selected) {
             &::after {
               border: awsui.$border-item-width solid $calendar-grid-hover-border-color;
-              border-radius: awsui.$border-calendar-grid-radius;
+              border-radius: awsui.$border-radius-item;
             }
           }
         }
@@ -165,7 +165,7 @@ $calendar-grid-border: 1px solid $calendar-grid-border-color;
       outline: none;
       @include styles.focus-highlight(
         awsui.$space-calendar-grid-focus-outline-gutter,
-        awsui.$border-calendar-grid-focus-ring-radius
+        awsui.$border-radius-calendar-day-focused
       );
       &::before {
         z-index: 2;
@@ -178,7 +178,7 @@ $calendar-grid-border: 1px solid $calendar-grid-border-color;
       &::after {
         background-color: $calendar-grid-selected-background-color;
         border: awsui.$border-item-width solid $calendar-grid-selected-border-color;
-        border-radius: awsui.$border-calendar-grid-radius;
+        border-radius: awsui.$border-radius-item;
       }
       > .day-inner {
         color: awsui.$color-text-calendar-day-selected;

package/lib/internal/scss/date-range-picker/calendar/grids/day/styles.scss

@@ -31,7 +31,7 @@ $calendar-grid-width: 234px;
 @mixin border-radius($horizontal, $vertical) {
   &,
   &::after {
-    border-#{$horizontal}-#{$vertical}-radius: awsui.$border-item-radius;
+    border-#{$horizontal}-#{$vertical}-radius: awsui.$border-radius-item;
   }
 }
 
@@ -85,7 +85,7 @@ $calendar-grid-width: 234px;
     z-index: 2;
     @include styles.focus-highlight(
       awsui.$space-calendar-grid-focus-outline-gutter,
-      awsui.$border-calendar-grid-focus-ring-radius
+      awsui.$border-radius-calendar-day-focused
     );
   }
 }
@@ -120,7 +120,7 @@ $calendar-grid-width: 234px;
     &.no-range {
       &,
       &::after {
-        border-radius: awsui.$border-calendar-grid-radius;
+        border-radius: awsui.$border-radius-item;
       }
     }
     &:hover {
@@ -137,7 +137,7 @@ $calendar-grid-width: 234px;
 
 .today:not(.in-range) {
   background-color: $calendar-grid-today-background-color;
-  border-radius: awsui.$border-calendar-grid-radius;
+  border-radius: awsui.$border-radius-item;
 }
 
 .selected {
@@ -148,7 +148,7 @@ $calendar-grid-width: 234px;
   @include focus-visible.when-visible {
     @include styles.focus-highlight(
       awsui.$space-calendar-grid-selected-focus-outline-gutter,
-      awsui.$border-calendar-grid-focus-ring-radius,
+      awsui.$border-radius-calendar-day-focused,
       $calendar-grid-selected-focused-box-shadow
     );
     &::before {

package/lib/internal/scss/date-range-picker/styles.scss

@@ -177,7 +177,7 @@ $calendar-grid-width: awsui.$size-calendar-grid-width;
 
   border-top: 1px solid #{awsui.$color-border-container-top};
   border-bottom: 1px solid #{awsui.$color-border-container-top};
-  border-radius: awsui.$border-dropdown-radius;
+  border-radius: awsui.$border-radius-dropdown;
 
   &:focus {
     outline: none;

package/lib/internal/scss/expandable-section/styles.scss

@@ -142,6 +142,6 @@
   }
 
   @include focus-visible.when-visible {
-    @include styles.form-focus-element(awsui.$border-control-focus-ring-radius-default);
+    @include styles.form-focus-element(awsui.$border-radius-control-focus-ring-default);
   }
 }

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

@@ -22,7 +22,7 @@
   padding: awsui.$space-scaled-xs awsui.$space-flashbar-horizontal;
   @include styles.container-shadow;
   border-top: none;
-  border-radius: awsui.$border-flashbar-radius;
+  border-radius: awsui.$border-radius-flashbar;
   color: awsui.$color-text-notification-default;
   overflow-wrap: break-word;
   word-wrap: break-word;
@@ -43,7 +43,7 @@
     bottom: 0px;
     right: 0px;
     background-color: transparent;
-    border-radius: awsui.$border-flashbar-radius;
+    border-radius: awsui.$border-radius-flashbar;
     pointer-events: none;
     box-shadow: awsui.$shadow-flash-sticky;
   }

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

@@ -110,7 +110,7 @@
     padding-right: styles.$control-icon-horizontal-padding;
   }
   &.input-has-no-border-radius {
-    border-radius: awsui.$border-dropdown-radius;
+    border-radius: awsui.$border-radius-dropdown;
   }
 }
 

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

@@ -18,7 +18,7 @@
   display: flex;
   align-items: stretch;
   background: constants.$token-background;
-  border-radius: awsui.$border-field-radius;
+  border-radius: awsui.$border-radius-control;
   color: awsui.$color-text-body-default;
   height: 100%;
   box-sizing: border-box;

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

@@ -16,7 +16,7 @@
   overflow-y: auto;
   flex: 1 1 auto;
   min-height: 0;
-  border-radius: awsui.$border-dropdown-radius;
+  border-radius: awsui.$border-radius-dropdown;
 }
 
 .decrease-top-margin {

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

@@ -45,7 +45,7 @@
   &.selected {
     color: awsui.$color-text-dropdown-item-highlighted;
     border-width: awsui.$border-item-width;
-    border-radius: awsui.$border-item-radius;
+    border-radius: awsui.$border-radius-item;
     padding: styles.$option-padding-vertical styles.$control-padding-horizontal;
     &.pad-bottom {
       padding-bottom: (calc(#{styles.$option-padding-vertical} + #{awsui.$space-xxxs}));

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

@@ -7,7 +7,7 @@
 @use '../tokens' as awsui;
 
 $control-border-width: awsui.$border-field-width;
-$control-border-radius: awsui.$border-field-radius;
+$control-border-radius: awsui.$border-radius-control;
 
 // Use for options in dropdowns
 $option-padding-vertical: awsui.$space-xxs;

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

@@ -17,7 +17,7 @@
   outline-offset: 2px;
   outline-color: awsui.$color-border-item-focused;
   // For visual refresh
-  border-radius: awsui.$border-control-focus-ring-radius-default;
+  border-radius: awsui.$border-radius-control-focus-ring-default;
   box-shadow: 0 0 0 awsui.$border-link-focus-ring-shadow-spread awsui.$color-border-item-focused;
 }
 
@@ -30,13 +30,13 @@
   outline: 2px dotted transparent;
   outline-offset: 2px;
 
-  border-radius: awsui.$border-container-radius;
+  border-radius: awsui.$border-radius-container;
   box-shadow: foundation.$box-shadow-focused;
 }
 
 @mixin focus-highlight(
   $gutter,
-  $border-radius: awsui.$border-control-focus-ring-radius-default,
+  $border-radius: awsui.$border-radius-control-focus-ring-default,
   $box-shadow: foundation.$box-shadow-focused
 ) {
   $gutter-vertical: $gutter;
@@ -133,7 +133,7 @@
 @mixin container-shadow {
   box-shadow: awsui.$shadow-container;
   border-top: awsui.$border-container-top-width solid awsui.$color-border-container-top;
-  border-radius: awsui.$border-container-radius;
+  border-radius: awsui.$border-radius-container;
   box-sizing: border-box;
 
   // HACK: because of the issues with IE's box shadow rendering we draw
@@ -145,7 +145,7 @@
 
 @mixin dropdown-shadow {
   box-shadow: awsui.$shadow-dropdown;
-  border-radius: awsui.$border-dropdown-radius;
+  border-radius: awsui.$border-radius-dropdown;
   border-top: awsui.$border-divider-list-width solid awsui.$color-border-container-top;
   box-sizing: border-box;
 
@@ -159,7 +159,7 @@
     right: 0px;
     background-color: transparent;
     border: awsui.$border-field-width solid awsui.$color-border-dropdown-container;
-    border-radius: awsui.$border-dropdown-radius;
+    border-radius: awsui.$border-radius-dropdown;
     pointer-events: none;
   }
 }

package/lib/internal/scss/modal/styles.scss

@@ -95,7 +95,7 @@ $modal-z-index: 5000;
   padding: awsui.$space-s awsui.$space-modal-horizontal;
   background-color: awsui.$color-background-container-header;
   border-bottom: 1px solid awsui.$color-border-container-divider;
-  border-radius: awsui.$border-container-radius awsui.$border-container-radius 0 0;
+  border-radius: awsui.$border-radius-container awsui.$border-radius-container 0 0;
 }
 
 .header--text {

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

@@ -38,7 +38,7 @@
   }
 
   @include focus-visible.when-visible {
-    @include styles.form-focus-element(awsui.$border-control-focus-ring-radius-default);
+    @include styles.form-focus-element(awsui.$border-radius-control-focus-ring-default);
   }
 
   &-disabled {

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

@@ -12,7 +12,7 @@
   @include styles.text-flex-wrapping;
 
   box-sizing: border-box;
-  border-radius: awsui.$border-field-radius;
+  border-radius: awsui.$border-radius-control;
   padding: awsui.$space-s awsui.$space-m;
 
   background-color: awsui.$color-background-popover;

package/lib/internal/scss/radio-group/styles.scss

@@ -34,7 +34,7 @@ $radio-size: awsui.$size-control;
   @include focus-visible.when-visible {
     /* stylelint-disable-next-line selector-max-type, @cloudscape-design/no-implicit-descendant */
     & + div {
-      @include styles.focus-highlight(2px, awsui.$border-control-focus-ring-radius-circle);
+      @include styles.focus-highlight(2px, awsui.$border-radius-control-focus-ring-circle);
     }
   }
 }

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

@@ -58,10 +58,10 @@ $selected-color: awsui.$color-text-segment-active;
   }
   &:last-child {
     border-right-width: styles.$control-border-width;
-    border-radius: 0 awsui.$border-button-radius awsui.$border-button-radius 0;
+    border-radius: 0 awsui.$border-radius-button awsui.$border-radius-button 0;
   }
   &:first-child {
-    border-radius: awsui.$border-button-radius 0 0 awsui.$border-button-radius;
+    border-radius: awsui.$border-radius-button 0 0 awsui.$border-radius-button;
   }
 
   &.disabled {

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

@@ -51,11 +51,11 @@ $border-placeholder: awsui.$border-item-width solid transparent;
     padding-bottom: $cell-vertical-padding;
     &:first-child {
       border-left: $selected-border;
-      border-radius: awsui.$border-item-radius 0 0 awsui.$border-item-radius;
+      border-radius: awsui.$border-radius-item 0 0 awsui.$border-radius-item;
     }
     &:last-child {
       border-right: $selected-border;
-      border-radius: 0 awsui.$border-item-radius awsui.$border-item-radius 0;
+      border-radius: 0 awsui.$border-radius-item awsui.$border-radius-item 0;
     }
   }
   // Use padding as a selected border placeholder to make sure rows don't change height on selection (visual refresh)

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

@@ -61,8 +61,8 @@
   padding-top: awsui.$space-table-content-top;
   padding-bottom: awsui.$space-table-content-bottom;
   overflow-x: auto;
-  border-top-right-radius: awsui.$border-container-radius;
-  border-top-left-radius: awsui.$border-container-radius;
+  border-top-right-radius: awsui.$border-radius-container;
+  border-top-left-radius: awsui.$border-radius-container;
   &.variant-stacked,
   &.variant-container {
     & > .table {

package/lib/internal/scss/tabs/tab-header-bar.scss

@@ -155,7 +155,7 @@ $label-horizontal-spacing: awsui.$space-l;
     width: 100%;
     bottom: calc(-1 * #{awsui.$border-divider-section-width});
     height: awsui.$border-active-width;
-    border-radius: awsui.$border-active-radius;
+    border-radius: awsui.$border-radius-tabs-focus-ring;
     background: awsui.$color-border-tabs-underline;
 
     opacity: 0;

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

@@ -23,7 +23,7 @@
   display: flex;
   align-items: flex-start;
   background: constants.$token-background;
-  border-radius: awsui.$border-field-radius;
+  border-radius: awsui.$border-radius-control;
   color: awsui.$color-text-body-default;
   height: 100%;
   box-sizing: border-box;
@@ -93,7 +93,7 @@
   }
 
   @include focus-visible.when-visible {
-    @include styles.form-focus-element(awsui.$border-control-focus-ring-radius-default);
+    @include styles.form-focus-element(awsui.$border-radius-control-focus-ring-default);
   }
 
   > .description {

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

@@ -19,7 +19,7 @@
   @include styles.styles-reset;
   list-style: none;
   border: awsui.$border-divider-section-width solid awsui.$color-border-tutorial;
-  border-radius: awsui.$border-field-radius;
+  border-radius: awsui.$border-radius-control;
   padding: awsui.$space-m;
 
   &:not(:first-child) {

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

@@ -36,7 +36,7 @@
 
   > ul {
     background: awsui.$color-background-container-content;
-    border-radius: awsui.$border-container-radius;
+    border-radius: awsui.$border-radius-container;
     box-shadow: awsui.$shadow-container;
     margin: 0;
     padding: awsui.$space-scaled-l awsui.$space-l;

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

@@ -1,24 +1,24 @@
 
     import './styles.scoped.css';
     export default {
-  "alert": "awsui_alert_mx3cw_bvg01_93",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_mx3cw_bvg01_1",
-  "root": "awsui_root_mx3cw_bvg01_119",
-  "hidden": "awsui_hidden_mx3cw_bvg01_133",
-  "body": "awsui_body_mx3cw_bvg01_156",
-  "header": "awsui_header_mx3cw_bvg01_162",
-  "action": "awsui_action_mx3cw_bvg01_166",
-  "action-button": "awsui_action-button_mx3cw_bvg01_171",
-  "text": "awsui_text_mx3cw_bvg01_175",
-  "icon": "awsui_icon_mx3cw_bvg01_179",
-  "message": "awsui_message_mx3cw_bvg01_182",
-  "breakpoint-default": "awsui_breakpoint-default_mx3cw_bvg01_190",
-  "content": "awsui_content_mx3cw_bvg01_204",
-  "dismiss": "awsui_dismiss_mx3cw_bvg01_208",
-  "dismiss-button": "awsui_dismiss-button_mx3cw_bvg01_214",
-  "type-error": "awsui_type-error_mx3cw_bvg01_222",
-  "type-warning": "awsui_type-warning_mx3cw_bvg01_230",
-  "type-success": "awsui_type-success_mx3cw_bvg01_238",
-  "type-info": "awsui_type-info_mx3cw_bvg01_246"
+  "alert": "awsui_alert_mx3cw_yyus1_93",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_mx3cw_yyus1_1",
+  "root": "awsui_root_mx3cw_yyus1_119",
+  "hidden": "awsui_hidden_mx3cw_yyus1_133",
+  "body": "awsui_body_mx3cw_yyus1_156",
+  "header": "awsui_header_mx3cw_yyus1_162",
+  "action": "awsui_action_mx3cw_yyus1_166",
+  "action-button": "awsui_action-button_mx3cw_yyus1_171",
+  "text": "awsui_text_mx3cw_yyus1_175",
+  "icon": "awsui_icon_mx3cw_yyus1_179",
+  "message": "awsui_message_mx3cw_yyus1_182",
+  "breakpoint-default": "awsui_breakpoint-default_mx3cw_yyus1_190",
+  "content": "awsui_content_mx3cw_yyus1_204",
+  "dismiss": "awsui_dismiss_mx3cw_yyus1_208",
+  "dismiss-button": "awsui_dismiss-button_mx3cw_yyus1_214",
+  "type-error": "awsui_type-error_mx3cw_yyus1_222",
+  "type-warning": "awsui_type-warning_mx3cw_yyus1_230",
+  "type-success": "awsui_type-success_mx3cw_yyus1_238",
+  "type-info": "awsui_type-info_mx3cw_yyus1_246"
 };