chore: enforce to use logical css (#101)

Author: amanabiy

.stylelintrc

@@ -16,5 +16,14 @@
       }
     ]
   },
-  "plugins": ["@cloudscape-design/build-tools/stylelint"]
+  "plugins": ["stylelint-use-logical", "@cloudscape-design/build-tools/stylelint"],
+  "overrides": [
+    {
+      "files": ["./src/**/*.scss"],
+      "rules": {
+        "property-disallowed-list": ["border", "border-radius", "border-style", "margin", "padding"],
+        "csstools/use-logical": "always"
+      }
+    }
+  ]
 }

package.json

@@ -110,6 +110,7 @@
     "stylelint": "^16.9.0",
     "stylelint-config-recommended-scss": "^14.1.0",
     "stylelint-prettier": "^5.0.2",
+    "stylelint-use-logical": "^2.1.2",
     "typescript": "^4.9.4",
     "vite": "^6.4.1",
     "vitest": "^3.2.4"

src/chat-bubble/styles.scss

@@ -22,8 +22,9 @@
   display: flex;
   flex-direction: column;
   gap: cs.$space-scaled-s;
-  padding: cs.$space-scaled-s;
-  min-width: 0;
+  padding-block: cs.$space-scaled-s;
+  padding-inline: cs.$space-scaled-s;
+  min-inline-size: 0;
   overflow-x: auto;
 
   border-start-start-radius: cs.$border-radius-chat-bubble;

src/internal/shared.scss

@@ -24,8 +24,12 @@
     inset-block-start: calc(-1 * #{$gutter});
     inline-size: calc(100% + 2 * #{$gutter});
     block-size: calc(100% + 2 * #{$gutter});
-    border-radius: $border-radius;
-    border: $border-width solid $border-color;
+    border-start-start-radius: $border-radius;
+    border-start-end-radius: $border-radius;
+    border-end-start-radius: $border-radius;
+    border-end-end-radius: $border-radius;
+    border-block: $border-width solid $border-color;
+    border-inline: $border-width solid $border-color;
   }
 }
 

src/loading-bar/styles.scss

@@ -28,7 +28,7 @@
 
 .variant-gen-ai,
 .variant-gen-ai-masked {
-  height: 2px;
+  block-size: 2px;
   background: awsui.$color-background-loading-bar-gen-ai;
   background-size: 200% 100%;
   background-position: 0 100%;

src/support-prompt-group/styles.scss

@@ -31,7 +31,8 @@
   color: awsui.$color-text-button-normal-default;
   background: awsui.$color-background-button-normal-default;
 
-  border: 1px solid awsui.$color-border-button-normal-default;
+  border-block: 1px solid awsui.$color-border-button-normal-default;
+  border-inline: 1px solid awsui.$color-border-button-normal-default;
   border-start-start-radius: awsui.$space-static-xs;
   border-start-end-radius: awsui.$space-static-xs;
   border-end-start-radius: awsui.$space-static-xs;