feat(css): migrate to logical properties for better internationalization (#19)

Vikram-Hegde · web-flow · commit e1e27c52efb0 · 2026-02-13T00:57:33.000+05:30
Replace physical directional properties (margin-top, padding-left, etc.)
with logical properties (margin-block-start, padding-inline-start, etc.)
throughout the CSS codebase.
diff --git a/src/css/00-base.css b/src/css/00-base.css
@@ -40,7 +40,7 @@
     line-height: 1.25;
 
     &:first-child {
-      margin-top: 0;
+      margin-block-start: 0;
     }
   }
 
@@ -75,10 +75,10 @@
   }
 
   p {
-    margin-bottom: var(--space-4);
+    margin-block-end: var(--space-4);
 
     &:last-child {
-      margin-bottom: 0;
+      margin-block-end: 0;
     }
   }
 
@@ -119,7 +119,7 @@
     background-color: var(--faint);
     border-radius: var(--radius-medium);
     overflow-x: auto;
-    margin-bottom: var(--space-4);
+    margin-block-end: var(--space-4);
 
     code {
       padding: 0;
@@ -129,8 +129,8 @@
   }
 
   blockquote {
-    border-left: 4px solid var(--border);
-    padding-left: var(--space-4);
+    border-inline-start: 4px solid var(--border);
+    padding-inline-start: var(--space-4);
     margin: var(--space-4) 0;
     color: var(--muted-foreground);
     font-style: italic;
@@ -143,8 +143,8 @@
   }
 
   ul, ol {
-    padding-left: var(--space-6);
-    margin-bottom: var(--space-4);
+    padding-inline-start: var(--space-6);
+    margin-block-end: var(--space-4);
   }
 
   ul {
@@ -156,7 +156,7 @@
   }
 
   li {
-    margin-bottom: var(--space-1);
+    margin-block-end: var(--space-1);
   }
 
   mark {
diff --git a/src/css/button.css b/src/css/button.css
@@ -124,7 +124,7 @@
 
 @layer components {
   menu.buttons {
-    padding-left: 0;
+    padding-inline-start: 0;
     display: inline-flex;
 
     & > :is(button, [type=button], [type=submit], [type=reset], a.button) {
diff --git a/src/css/dialog.css b/src/css/dialog.css
@@ -58,16 +58,16 @@
       flex-direction: column;
       gap: var(--space-1);
       padding: var(--space-6);
-      padding-bottom: 0;
+      padding-block-end: 0;
 
       & > h1, & > h2, & > h3, & > h4, & > h5, & > h6 {
-        margin-bottom: 0;
+        margin-block-end: 0;
       }
 
       & > p {
         font-size: var(--text-7);
         color: var(--muted-foreground);
-        margin-bottom: 0;
+        margin-block-end: 0;
       }
     }
 
@@ -83,7 +83,7 @@
       justify-content: flex-end;
       gap: var(--space-2);
       padding: var(--space-6);
-      padding-top: 0;
+      padding-block-start: 0;
     }
   }
 }
diff --git a/src/css/dropdown.css b/src/css/dropdown.css
@@ -37,12 +37,12 @@
     [role="menuitem"] {
       display: flex;
       align-items: center;
-      justify-content: left;
+      justify-content: start;
       gap: var(--space-2);
       width: 100%;
       padding: var(--space-2) var(--space-3);
       font-size: var(--text-7);
-      text-align: left;
+      text-align: start;
       color: var(--foreground);
       background: none;
       border: none;
diff --git a/src/css/form.css b/src/css/form.css
@@ -14,7 +14,7 @@
 
   :where(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color]), textarea, select) {
     width: 100%;
-    margin-top: var(--space-1);
+    margin-block-start: var(--space-1);
     padding: var(--space-2) var(--space-3);
     font-size: var(--text-7);
     line-height: var(--leading-normal);
@@ -59,7 +59,7 @@
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: right var(--space-2) center;
-    padding-right: var(--space-6);
+    padding-inline-end: var(--space-6);
   }
 
   input:where([type=checkbox], [type=radio]) {
@@ -185,7 +185,7 @@
     border: 1px solid var(--border);
     border-radius: var(--radius-medium);
     padding: var(--space-4);
-    margin-bottom: var(--space-4);
+    margin-block-end: var(--space-4);
   }
 
   legend {
@@ -205,8 +205,8 @@
 
     & > :is(input, textarea, select) {
       flex: 1;
-      margin-top: 0;
-      border-right: 0;
+      margin-block-start: 0;
+      border-inline-end: 0;
     }
 
     & > :is(input, textarea, select, button) {
@@ -236,14 +236,14 @@
   }
 
   [data-field] {
-    margin-bottom: var(--space-4);
+    margin-block-end: var(--space-4);
 
     /* Hint text that succeeds an input with aria-describedby */
     [data-hint], .error {
       font-size: var(--text-8);
       font-weight: var(--font-normal);
       color: var(--muted-foreground);
-      margin-top: var(--space-1);
+      margin-block-start: var(--space-1);
     }
 
     .error {
diff --git a/src/css/sidebar.css b/src/css/sidebar.css
@@ -19,11 +19,11 @@
       /* <main> immediately after top-nav, adjust for topnav height */
       > main {
         min-width: 0;
-        margin-top: calc(var(--topnav-height));
+        margin-block-start: calc(var(--topnav-height));
 
         /* Offset #anchor scrolling to not go behind the topnav. */
         [id] {
-          scroll-margin-top: calc(var(--topnav-height) + var(--space-6));
+          scroll-margin-block-start: calc(var(--topnav-height) + var(--space-6));
         }
       }
     }
@@ -35,7 +35,7 @@
       height: 100dvh;
       align-self: start;
       background-color: var(--background);
-      border-right: 1px solid var(--border);
+      border-inline-end: 1px solid var(--border);
       display: flex;
       flex-direction: column;
       width: var(--sidebar-width);
@@ -47,7 +47,7 @@
 
       > footer {
         flex-shrink: 0;
-        margin-top: auto;
+        margin-block-start: auto;
         padding: var(--space-3);
       }
 
@@ -94,7 +94,7 @@
 
         & + details { margin-top: 0; }
         &[open] summary { border-bottom: none; }
-        > ul { margin-left: var(--space-4); padding: var(--space-1) 0; }
+        > ul { margin-inline-start: var(--space-4); padding: var(--space-1) 0; }
       }
 
       summary {
@@ -117,9 +117,8 @@
 
   nav[data-topnav] {
     position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
+    inset-block-start: 0;
+    inset-inline: 0;
     z-index: 5;
     min-height: var(--topnav-height);
     display: flex;
diff --git a/src/css/skeleton.css b/src/css/skeleton.css
@@ -1,6 +1,6 @@
 @layer components {
   [role="status"].skeleton {
-    margin-bottom: var(--space-3);
+    margin-block-end: var(--space-3);
     background: var(--muted);
     border-radius: var(--radius-medium);
     animation: shimmer 2s infinite;
@@ -33,7 +33,7 @@
   }
 
   [role="status"].skeleton:last-child {
-    margin-bottom: 0;
+    margin-block-end: 0;
   }
 
   @keyframes shimmer {
diff --git a/src/css/table.css b/src/css/table.css
@@ -16,7 +16,7 @@
 
   th {
     padding: var(--space-3) var(--space-2);
-    text-align: left;
+    text-align: start;
     font-weight: var(--font-medium);
     color: var(--muted-foreground);
   }
diff --git a/src/css/toast.css b/src/css/toast.css
@@ -52,8 +52,8 @@
     pointer-events: auto;
     background-color: var(--card);
     border: 1px solid var(--border);
-    border-left-width: var(--space-1);
-    border-left-style: solid;
+    border-inline-start-width: var(--space-1);
+    border-inline-start-style: solid;
     border-radius: var(--radius-medium);
     box-shadow: var(--shadow-small);
     transition: opacity 150ms, transform 150ms, margin 150ms;
@@ -68,19 +68,19 @@
     }
 
     &[data-variant="success"] {
-      border-left-color: var(--success);
+      border-inline-start-color: var(--success);
     }
 
     &[data-variant="danger"] {
-      border-left-color: var(--danger);
+      border-inline-start-color: var(--danger);
     }
 
     &[data-variant="warning"] {
-      border-left-color: var(--warning);
+      border-inline-start-color: var(--warning);
     }
 
     &[data-variant="info"] {
-      border-left-color: var(--secondary);
+      border-inline-start-color: var(--secondary);
     }
 
     & > [data-close] {
diff --git a/src/css/tooltip.css b/src/css/tooltip.css
@@ -6,7 +6,7 @@
   [data-tooltip]::before,
   [data-tooltip]::after {
     position: absolute;
-    left: 50%;
+    inset-inline-start: 50%;
     opacity: 0;
     visibility: hidden;
     transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
@@ -17,7 +17,7 @@
   /* Text */
   [data-tooltip]::after {
     content: attr(data-tooltip);
-    bottom: calc(100% + 10px);
+    inset-block-end: calc(100% + 10px);
     transform: translateX(-50%) translateY(4px);
     padding: var(--space-2) var(--space-3);
     font-size: var(--text-7);
@@ -31,7 +31,7 @@
   /* Arrow */
   [data-tooltip]::before {
     content: '';
-    bottom: calc(100% - 5px);
+    inset-block-end: calc(100% - 5px);
     transform: translateX(-50%) translateY(4px);
     border: 8px solid transparent;
     border-top-color: var(--foreground);
diff --git a/src/css/utilities.css b/src/css/utilities.css
@@ -15,9 +15,9 @@
     border-width: 0;
   }
 
-  .text-left { text-align: left; }
+  .text-left { text-align: start; }
   .text-center { text-align: center; }
-  .text-right { text-align: right; }
+  .text-right { text-align: end; }
   .text-light { color: var(--muted-foreground); }
   .text-lighter { color: var(--muted-foreground); }
 
@@ -43,13 +43,13 @@
   .gap-2 { gap: var(--space-2); }
   .gap-4 { gap: var(--space-4); }
 
-  .mt-2 { margin-top: var(--space-2); }
-  .mt-4 { margin-top: var(--space-4); }
-  .mt-6 { margin-top: var(--space-6); }
+  .mt-2 { margin-block-start: var(--space-2); }
+  .mt-4 { margin-block-start: var(--space-4); }
+  .mt-6 { margin-block-start: var(--space-6); }
 
-  .mb-2 { margin-bottom: var(--space-2); }
-  .mb-4 { margin-bottom: var(--space-4); }
-  .mb-6 { margin-bottom: var(--space-6); }
+  .mb-2 { margin-block-end: var(--space-2); }
+  .mb-4 { margin-block-end: var(--space-4); }
+  .mb-6 { margin-block-end: var(--space-6); }
   .p-4 { padding: var(--space-4); }
 
   .w-100 { width: 100%; }
@@ -58,7 +58,7 @@
 ul, ol {
   &.unstyled {
     list-style: none;
-    padding-left: 0;
-    margin-left: 0;
+    padding-inline-start: 0;
+    margin-inline-start: 0;
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -40,7 +40,7 @@`
`40`	`40`	`line-height: 1.25;`
`41`	`41`
`42`	`42`	`&:first-child {`
`43`		`- margin-top: 0;`
	`43`	`+ margin-block-start: 0;`
`44`	`44`	`}`
`45`	`45`	`}`
`46`	`46`
`@@ -75,10 +75,10 @@`
`75`	`75`	`}`
`76`	`76`
`77`	`77`	`p {`
`78`		`- margin-bottom: var(--space-4);`
	`78`	`+ margin-block-end: var(--space-4);`
`79`	`79`
`80`	`80`	`&:last-child {`
`81`		`- margin-bottom: 0;`
	`81`	`+ margin-block-end: 0;`
`82`	`82`	`}`
`83`	`83`	`}`
`84`	`84`
`@@ -119,7 +119,7 @@`
`119`	`119`	`background-color: var(--faint);`
`120`	`120`	`border-radius: var(--radius-medium);`
`121`	`121`	`overflow-x: auto;`
`122`		`- margin-bottom: var(--space-4);`
	`122`	`+ margin-block-end: var(--space-4);`
`123`	`123`
`124`	`124`	`code {`
`125`	`125`	`padding: 0;`
`@@ -129,8 +129,8 @@`
`129`	`129`	`}`
`130`	`130`
`131`	`131`	`blockquote {`
`132`		`- border-left: 4px solid var(--border);`
`133`		`- padding-left: var(--space-4);`
	`132`	`+ border-inline-start: 4px solid var(--border);`
	`133`	`+ padding-inline-start: var(--space-4);`
`134`	`134`	`margin: var(--space-4) 0;`
`135`	`135`	`color: var(--muted-foreground);`
`136`	`136`	`font-style: italic;`
`@@ -143,8 +143,8 @@`
`143`	`143`	`}`
`144`	`144`
`145`	`145`	`ul, ol {`
`146`		`- padding-left: var(--space-6);`
`147`		`- margin-bottom: var(--space-4);`
	`146`	`+ padding-inline-start: var(--space-6);`
	`147`	`+ margin-block-end: var(--space-4);`
`148`	`148`	`}`
`149`	`149`
`150`	`150`	`ul {`
`@@ -156,7 +156,7 @@`
`156`	`156`	`}`
`157`	`157`
`158`	`158`	`li {`
`159`		`- margin-bottom: var(--space-1);`
	`159`	`+ margin-block-end: var(--space-1);`
`160`	`160`	`}`
`161`	`161`
`162`	`162`	`mark {`
Original file line number	Diff line number	Diff line change
`@@ -58,16 +58,16 @@`
`58`	`58`	`flex-direction: column;`
`59`	`59`	`gap: var(--space-1);`
`60`	`60`	`padding: var(--space-6);`
`61`		`- padding-bottom: 0;`
	`61`	`+ padding-block-end: 0;`
`62`	`62`
`63`	`63`	`& > h1, & > h2, & > h3, & > h4, & > h5, & > h6 {`
`64`		`- margin-bottom: 0;`
	`64`	`+ margin-block-end: 0;`
`65`	`65`	`}`
`66`	`66`
`67`	`67`	`& > p {`
`68`	`68`	`font-size: var(--text-7);`
`69`	`69`	`color: var(--muted-foreground);`
`70`		`- margin-bottom: 0;`
	`70`	`+ margin-block-end: 0;`
`71`	`71`	`}`
`72`	`72`	`}`
`73`	`73`
`@@ -83,7 +83,7 @@`
`83`	`83`	`justify-content: flex-end;`
`84`	`84`	`gap: var(--space-2);`
`85`	`85`	`padding: var(--space-6);`
`86`		`- padding-top: 0;`
	`86`	`+ padding-block-start: 0;`
`87`	`87`	`}`
`88`	`88`	`}`
`89`	`89`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`@layer components {`
`2`	`2`	`[role="status"].skeleton {`
`3`		`- margin-bottom: var(--space-3);`
	`3`	`+ margin-block-end: var(--space-3);`
`4`	`4`	`background: var(--muted);`
`5`	`5`	`border-radius: var(--radius-medium);`
`6`	`6`	`animation: shimmer 2s infinite;`
`@@ -33,7 +33,7 @@`
`33`	`33`	`}`
`34`	`34`
`35`	`35`	`[role="status"].skeleton:last-child {`
`36`		`- margin-bottom: 0;`
	`36`	`+ margin-block-end: 0;`
`37`	`37`	`}`
`38`	`38`
`39`	`39`	`@keyframes shimmer {`
Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,7 @@`
`16`	`16`
`17`	`17`	`th {`
`18`	`18`	`padding: var(--space-3) var(--space-2);`
`19`		`- text-align: left;`
	`19`	`+ text-align: start;`
`20`	`20`	`font-weight: var(--font-medium);`
`21`	`21`	`color: var(--muted-foreground);`
`22`	`22`	`}`
Original file line number	Diff line number	Diff line change
`@@ -52,8 +52,8 @@`
`52`	`52`	`pointer-events: auto;`
`53`	`53`	`background-color: var(--card);`
`54`	`54`	`border: 1px solid var(--border);`
`55`		`- border-left-width: var(--space-1);`
`56`		`- border-left-style: solid;`
	`55`	`+ border-inline-start-width: var(--space-1);`
	`56`	`+ border-inline-start-style: solid;`
`57`	`57`	`border-radius: var(--radius-medium);`
`58`	`58`	`box-shadow: var(--shadow-small);`
`59`	`59`	`transition: opacity 150ms, transform 150ms, margin 150ms;`
`@@ -68,19 +68,19 @@`
`68`	`68`	`}`
`69`	`69`
`70`	`70`	`&[data-variant="success"] {`
`71`		`- border-left-color: var(--success);`
	`71`	`+ border-inline-start-color: var(--success);`
`72`	`72`	`}`
`73`	`73`
`74`	`74`	`&[data-variant="danger"] {`
`75`		`- border-left-color: var(--danger);`
	`75`	`+ border-inline-start-color: var(--danger);`
`76`	`76`	`}`
`77`	`77`
`78`	`78`	`&[data-variant="warning"] {`
`79`		`- border-left-color: var(--warning);`
	`79`	`+ border-inline-start-color: var(--warning);`
`80`	`80`	`}`
`81`	`81`
`82`	`82`	`&[data-variant="info"] {`
`83`		`- border-left-color: var(--secondary);`
	`83`	`+ border-inline-start-color: var(--secondary);`
`84`	`84`	`}`
`85`	`85`
`86`	`86`	`& > [data-close] {`