Remove all border-radius and border-style shorthands.

cloudscape-design · Dec 7, 2023 · d02fa16 · d02fa16
1 parent 11fe9a5
commit d02fa16
Show file tree

Hide file tree

Showing 37 changed files with 268 additions and 77 deletions.
diff --git a/.stylelintrc b/.stylelintrc
@@ -4,7 +4,7 @@
     "stylelint-prettier/recommended"
   ],
   "rules": {
-    "property-disallowed-list": ["margin", "border", "padding"],
+    "property-disallowed-list": ["border", "border-radius", "border-style", "margin", "padding"],
     "csstools/use-logical": "always",
     "custom-property-pattern": "^(?!.+)",
     "scss/comment-no-empty": null,

diff --git a/src/badge/styles.scss b/src/badge/styles.scss
@@ -12,7 +12,10 @@
   @include styles.font-body-s;
   line-height: awsui.$line-height-body-m;
   display: inline-block;
-  border-radius: awsui.$border-radius-badge;
+  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;
   padding-block: 0;
   padding-inline: awsui.$space-xs;
   color: awsui.$color-text-notification-default;

diff --git a/src/button-dropdown/category-elements/styles.scss b/src/button-dropdown/category-elements/styles.scss
@@ -50,7 +50,10 @@
       padding-inline: awsui.$space-button-horizontal;
       border-block: awsui.$border-item-width solid awsui.$color-border-dropdown-item-hover;
       border-inline: awsui.$border-item-width solid awsui.$color-border-dropdown-item-hover;
-      border-radius: awsui.$border-radius-item;
+      border-start-start-radius: awsui.$border-radius-item;
+      border-start-end-radius: awsui.$border-radius-item;
+      border-end-start-radius: awsui.$border-radius-item;
+      border-end-end-radius: awsui.$border-radius-item;
       z-index: 2;
 
       &.disabled {

diff --git a/src/button-dropdown/item-element/styles.scss b/src/button-dropdown/item-element/styles.scss
@@ -38,7 +38,10 @@
     &.variant-primary {
       background-color: awsui.$color-background-dropdown-item-hover;
       border-color: awsui.$color-border-dropdown-item-hover;
-      border-radius: awsui.$border-radius-item;
+      border-start-start-radius: awsui.$border-radius-item;
+      border-start-end-radius: awsui.$border-radius-item;
+      border-end-start-radius: awsui.$border-radius-item;
+      border-end-end-radius: awsui.$border-radius-item;
 
       &.disabled {
         color: awsui.$color-text-dropdown-item-dimmed;

diff --git a/src/calendar/styles.scss b/src/calendar/styles.scss
@@ -84,7 +84,10 @@
       cursor: pointer;
       color: calendar.$grid-nonmonth-day-color;
       &::after {
-        border-radius: awsui.$border-radius-item;
+        border-start-start-radius: awsui.$border-radius-item;
+        border-start-end-radius: awsui.$border-radius-item;
+        border-end-start-radius: awsui.$border-radius-item;
+        border-end-end-radius: awsui.$border-radius-item;
       }
       &.calendar-day-current-month {
         color: calendar.$grid-day-color;
@@ -103,7 +106,10 @@
 
     &-today {
       background-color: calendar.$grid-today-background-color;
-      border-radius: awsui.$border-radius-item;
+      border-start-start-radius: awsui.$border-radius-item;
+      border-start-end-radius: awsui.$border-radius-item;
+      border-end-start-radius: awsui.$border-radius-item;
+      border-end-end-radius: awsui.$border-radius-item;
       font-weight: styles.$font-weight-bold;
     }
 
@@ -156,7 +162,10 @@
         background-color: calendar.$grid-selected-background-color;
         border-block: awsui.$border-item-width solid calendar.$grid-selected-border-color;
         border-inline: awsui.$border-item-width solid calendar.$grid-selected-border-color;
-        border-radius: awsui.$border-radius-item;
+        border-start-start-radius: awsui.$border-radius-item;
+        border-start-end-radius: awsui.$border-radius-item;
+        border-end-start-radius: awsui.$border-radius-item;
+        border-end-end-radius: awsui.$border-radius-item;
       }
       > .day-inner {
         z-index: 2;

diff --git a/src/code-editor/styles.scss b/src/code-editor/styles.scss
@@ -15,7 +15,10 @@
   display: inline-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-radius: awsui.$border-radius-code-editor;
+  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;
+  border-end-end-radius: awsui.$border-radius-code-editor;
   inline-size: 100%;
 }
 
@@ -110,7 +113,10 @@
     inset-inline: 0;
     inset-block-end: 0;
     block-size: awsui.$border-active-width;
-    border-radius: awsui.$border-radius-tabs-focus-ring;
+    border-start-start-radius: awsui.$border-radius-tabs-focus-ring;
+    border-start-end-radius: awsui.$border-radius-tabs-focus-ring;
+    border-end-start-radius: awsui.$border-radius-tabs-focus-ring;
+    border-end-end-radius: awsui.$border-radius-tabs-focus-ring;
     background: awsui.$color-text-status-error;
     opacity: 0;
   }
@@ -179,12 +185,13 @@ $default-height: 480px;
   display: flex;
   align-items: center;
   justify-content: center;
-
   block-size: $default-height;
-
   color: awsui.$color-text-body-secondary;
   background: awsui.$color-background-code-editor-loading;
-  border-radius: awsui.$border-radius-code-editor;
+  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;
+  border-end-end-radius: awsui.$border-radius-code-editor;
 }
 
 .error-screen {

diff --git a/src/collection-preferences/content-display/content-display-option.scss b/src/collection-preferences/content-display/content-display-option.scss
@@ -33,7 +33,10 @@ $border-radius: awsui.$border-radius-item;
   padding-inline-start: 0;
   padding-inline-end: awsui.$space-scaled-xs;
   background-color: awsui.$color-background-container-content;
-  border-radius: $border-radius;
+  border-start-start-radius: $border-radius;
+  border-start-end-radius: $border-radius;
+  border-end-start-radius: $border-radius;
+  border-end-end-radius: $border-radius;
 }
 
 .content-display-option {
@@ -51,7 +54,10 @@ $border-radius: awsui.$border-radius-item;
         position: absolute;
         inset: 0;
         background: awsui.$color-drag-placeholder-hover;
-        border-radius: $border-radius;
+        border-start-start-radius: $border-radius;
+        border-start-end-radius: $border-radius;
+        border-end-start-radius: $border-radius;
+        border-end-end-radius: $border-radius;
       }
     }
   }
@@ -65,7 +71,10 @@ $border-radius: awsui.$border-radius-item;
 
 .drag-overlay {
   box-shadow: awsui.$shadow-container-active;
-  border-radius: $border-radius;
+  border-start-start-radius: $border-radius;
+  border-start-end-radius: $border-radius;
+  border-end-start-radius: $border-radius;
+  border-end-end-radius: $border-radius;
   @include focus-visible {
     @include styles.focus-highlight(0px, $border-radius);
   }

diff --git a/src/container/styles.scss b/src/container/styles.scss
@@ -146,7 +146,11 @@
   }
 
   &-stuck {
-    border-radius: 0;
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+
     &::before {
       border-block: 0;
       border-inline: 0;

diff --git a/src/date-range-picker/calendar/grids/styles.scss b/src/date-range-picker/calendar/grids/styles.scss
@@ -119,7 +119,10 @@
     &.no-range {
       &,
       &::after {
-        border-radius: awsui.$border-radius-item;
+        border-start-start-radius: awsui.$border-radius-item;
+        border-start-end-radius: awsui.$border-radius-item;
+        border-end-start-radius: awsui.$border-radius-item;
+        border-end-end-radius: awsui.$border-radius-item;
       }
     }
     &:hover {
@@ -137,7 +140,10 @@
 
 .today:not(.in-range) {
   background-color: calendar.$grid-today-background-color;
-  border-radius: awsui.$border-radius-item;
+  border-start-start-radius: awsui.$border-radius-item;
+  border-start-end-radius: awsui.$border-radius-item;
+  border-end-start-radius: awsui.$border-radius-item;
+  border-end-end-radius: awsui.$border-radius-item;
   font-weight: styles.$font-weight-bold;
 }
 

diff --git a/src/date-range-picker/styles.scss b/src/date-range-picker/styles.scss
@@ -158,7 +158,10 @@ $calendar-header-color: awsui.$color-text-body-default;
 
   border-block-start: 1px solid #{awsui.$color-border-container-top};
   border-block-end: 1px solid #{awsui.$color-border-container-top};
-  border-radius: awsui.$border-radius-dropdown;
+  border-start-start-radius: awsui.$border-radius-dropdown;
+  border-start-end-radius: awsui.$border-radius-dropdown;
+  border-end-start-radius: awsui.$border-radius-dropdown;
+  border-end-end-radius: awsui.$border-radius-dropdown;
 
   &:focus {
     outline: none;

diff --git a/src/file-upload/dropzone/styles.scss b/src/file-upload/dropzone/styles.scss
@@ -14,7 +14,10 @@
   gap: awsui.$space-static-xxs;
   padding-block: awsui.$space-static-l;
   padding-inline: awsui.$space-static-l;
-  border-radius: awsui.$border-radius-dropzone;
+  border-start-start-radius: awsui.$border-radius-dropzone;
+  border-start-end-radius: awsui.$border-radius-dropzone;
+  border-end-start-radius: awsui.$border-radius-dropzone;
+  border-end-end-radius: awsui.$border-radius-dropzone;
   color: awsui.$color-dropzone-text-active;
   background-color: awsui.$color-dropzone-background-active;
   font-weight: styles.$font-weight-bold;

diff --git a/src/flashbar/collapsible.scss b/src/flashbar/collapsible.scss
@@ -202,8 +202,12 @@ the grid layout will be:
   @include styles.text-wrapping;
   background: awsui.$color-background-notification-stack-bar;
   border-color: awsui.$color-border-notification-stack-bar;
-  border-radius: awsui.$border-radius-button;
-  border-style: solid;
+  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-style: solid;
+  border-inline-style: solid;
   box-shadow: awsui.$shadow-panel-toggle;
   color: awsui.$color-text-notification-stack-bar;
   cursor: pointer;

diff --git a/src/flashbar/styles.scss b/src/flashbar/styles.scss
@@ -31,14 +31,20 @@
   align-items: flex-start;
   padding-block: awsui.$space-scaled-xs;
   padding-inline: awsui.$space-flashbar-horizontal;
-  border-radius: awsui.$border-radius-flashbar;
+  border-start-start-radius: awsui.$border-radius-flashbar;
+  border-start-end-radius: awsui.$border-radius-flashbar;
+  border-end-start-radius: awsui.$border-radius-flashbar;
+  border-end-end-radius: awsui.$border-radius-flashbar;
   color: awsui.$color-text-notification-default;
   overflow-wrap: break-word;
   word-wrap: break-word;
 
   &::before {
     @include styles.base-pseudo-element;
-    border-radius: awsui.$border-radius-flashbar;
+    border-start-start-radius: awsui.$border-radius-flashbar;
+    border-start-end-radius: awsui.$border-radius-flashbar;
+    border-end-start-radius: awsui.$border-radius-flashbar;
+    border-end-end-radius: awsui.$border-radius-flashbar;
     box-shadow: awsui.$shadow-flash-sticky;
   }
   &-refresh::before {

diff --git a/src/icon/styles.scss b/src/icon/styles.scss
@@ -34,7 +34,10 @@
   position: absolute;
   inline-size: 6px;
   block-size: 6px;
-  border-radius: 4px;
+  border-start-start-radius: 4px;
+  border-start-end-radius: 4px;
+  border-end-start-radius: 4px;
+  border-end-end-radius: 4px;
   background-color: awsui.$color-background-badge-icon;
   inset-block-start: 0px;
   inset-inline-end: -3px;

diff --git a/src/input/styles.scss b/src/input/styles.scss
@@ -46,7 +46,10 @@
   cursor: text;
   box-sizing: border-box;
   background-color: awsui.$color-background-input-default;
-  border-radius: styles.$control-border-radius;
+  border-start-start-radius: styles.$control-border-radius;
+  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;
   @include styles.font-body-m;
@@ -112,7 +115,10 @@
     padding-inline-end: styles.$control-icon-horizontal-padding;
   }
   &.input-has-no-border-radius {
-    border-radius: awsui.$border-radius-dropdown;
+    border-start-start-radius: awsui.$border-radius-dropdown;
+    border-start-end-radius: awsui.$border-radius-dropdown;
+    border-end-start-radius: awsui.$border-radius-dropdown;
+    border-end-end-radius: awsui.$border-radius-dropdown;
   }
 }
 

diff --git a/src/internal/components/button-trigger/styles.scss b/src/internal/components/button-trigger/styles.scss
@@ -22,7 +22,10 @@
   padding-inline: styles.$control-padding-horizontal;
 
   background-color: awsui.$color-background-input-default;
-  border-radius: styles.$control-border-radius;
+  border-start-start-radius: styles.$control-border-radius;
+  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;
   min-block-size: awsui.$size-vertical-input;

diff --git a/src/internal/components/chart-series-marker/styles.scss b/src/internal/components/chart-series-marker/styles.scss
@@ -10,7 +10,10 @@
   @include styles.styles-reset;
   margin-inline-end: awsui.$space-xxs;
   margin-block-start: awsui.$space-xxs;
-  border-radius: 2px;
+  border-start-start-radius: 2px;
+  border-start-end-radius: 2px;
+  border-end-start-radius: 2px;
+  border-end-end-radius: 2px;
   inline-size: 1.4 * styles.$base-size;
   flex-shrink: 0;
   cursor: inherit;
@@ -23,12 +26,18 @@
 
   &--rectangle {
     block-size: 1.4 * styles.$base-size;
-    border-radius: 2px;
+    border-start-start-radius: 2px;
+    border-start-end-radius: 2px;
+    border-end-start-radius: 2px;
+    border-end-end-radius: 2px;
   }
 
   &--hollow-rectangle {
     block-size: 1.4 * styles.$base-size;
-    border-radius: 2px;
+    border-start-start-radius: 2px;
+    border-start-end-radius: 2px;
+    border-end-start-radius: 2px;
+    border-end-end-radius: 2px;
 
     // inner rectangle
     &::after {
@@ -55,7 +64,10 @@
       inline-size: 0.6 * styles.$base-size;
       block-size: 0.4 * styles.$base-size;
       margin-inline-start: 0.8 * styles.$base-size;
-      border-radius: 2px;
+      border-start-start-radius: 2px;
+      border-start-end-radius: 2px;
+      border-end-start-radius: 2px;
+      border-end-end-radius: 2px;
       background-color: inherit;
     }
   }

diff --git a/src/internal/components/filtering-token/styles.scss b/src/internal/components/filtering-token/styles.scss
@@ -19,7 +19,10 @@
   display: flex;
   align-items: stretch;
   background: constants.$token-background;
-  border-radius: awsui.$border-radius-token;
+  border-start-start-radius: awsui.$border-radius-token;
+  border-start-end-radius: awsui.$border-radius-token;
+  border-end-start-radius: awsui.$border-radius-token;
+  border-end-end-radius: awsui.$border-radius-token;
   color: awsui.$color-text-body-default;
   block-size: 100%;
   box-sizing: border-box;

diff --git a/src/internal/components/options-list/styles.scss b/src/internal/components/options-list/styles.scss
@@ -19,7 +19,10 @@
   overflow-y: auto;
   flex: 1 1 auto;
   min-block-size: 0;
-  border-radius: awsui.$border-radius-dropdown;
+  border-start-start-radius: awsui.$border-radius-dropdown;
+  border-start-end-radius: awsui.$border-radius-dropdown;
+  border-end-start-radius: awsui.$border-radius-dropdown;
+  border-end-end-radius: awsui.$border-radius-dropdown;
 }
 
 .decrease-top-margin {

diff --git a/src/internal/components/selectable-item/styles.scss b/src/internal/components/selectable-item/styles.scss
@@ -46,7 +46,10 @@
   &.selected {
     color: awsui.$color-text-dropdown-item-highlighted;
     border-width: awsui.$border-item-width;
-    border-radius: awsui.$border-radius-item;
+    border-start-start-radius: awsui.$border-radius-item;
+    border-start-end-radius: awsui.$border-radius-item;
+    border-end-start-radius: awsui.$border-radius-item;
+    border-end-end-radius: awsui.$border-radius-item;
     padding-block: styles.$option-padding-vertical;
     padding-inline: styles.$control-padding-horizontal;