use css logical properties

.stylelintrc.json

@@ -4,6 +4,7 @@
     "stylelint-config-property-sort-order-smacss",
     "stylelint-prettier/recommended"
   ],
+  "plugins": ["stylelint-use-logical"],
   "ignoreFiles": ["dist/**/*", "node_modules/**/*"],
   "rules": {
     "at-rule-no-unknown": null,
@@ -15,6 +16,7 @@
       }
     ],
     "selector-class-pattern": "^[a-z]-[a-z0-9_-]+$",
-    "declaration-block-no-redundant-longhand-properties": null
+    "declaration-block-no-redundant-longhand-properties": null,
+    "csstools/use-logical": true
   }
 }

package.json

@@ -36,6 +36,7 @@
     "stylelint-config-property-sort-order-smacss": "9.1.0",
     "stylelint-config-standard": "33.0.0",
     "stylelint-prettier": "3.0.0",
+    "stylelint-use-logical": "^2.1.0",
     "vite": "4.2.1",
     "vite-plugin-pwa": "0.14.7"
   }

src/css/components/field.css

@@ -41,7 +41,7 @@
 .c-field__input {
   grid-area: input;
   order: 1;
-  min-width: 0;
+  min-inline-size: 0;
   padding: var(--s-1) var(--s-2);
   border: 0;
   outline: 0;
@@ -53,7 +53,7 @@
 }
 
 .c-field__input:is([type='date'], [type='time']) {
-  width: auto;
+  inline-size: auto;
   font-family: var(--font-family-mono);
   font-weight: var(--font-weight-light);
 }
@@ -78,7 +78,7 @@
 .c-field__action {
   z-index: 1;
   grid-area: action;
-  margin-left: calc(var(--size-border-radius-s) * -1);
+  margin-inline-start: calc(var(--size-border-radius-s) * -1);
 }
 
 .c-field__label {
@@ -91,8 +91,8 @@
 
 .c-field--compact .c-field__label {
   position: absolute !important;
-  width: 1px !important;
-  height: 1px !important;
+  block-size: 1px !important;
+  inline-size: 1px !important;
   margin: -1px !important;
   padding: 0 !important;
   overflow: hidden !important;

src/css/components/icon.css

@@ -1,8 +1,8 @@
 .c-icon {
   --icon-size-ratio: 1;
   display: inline-block;
-  width: calc(var(--icon-size-ratio) * 1em);
-  height: calc(var(--icon-size-ratio) * 1em);
+  block-size: calc(var(--icon-size-ratio) * 1em);
+  inline-size: calc(var(--icon-size-ratio) * 1em);
   line-height: inherit;
 }
 

src/css/components/loader.css

@@ -1,10 +1,10 @@
 .c-loader {
   position: fixed;
   z-index: 10;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+  block-size: 100%;
+  inline-size: 100%;
+  inset-block-start: 0;
+  inset-inline-start: 0;
 }
 
 @keyframes pulse {
@@ -25,9 +25,9 @@
   display: block;
   position: fixed;
   z-index: 1;
-  top: 50%;
-  left: 50%;
-  width: min(128px, 80vw);
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+  inline-size: min(128px, 80vw);
   transform: translate(-50%, -50%);
   animation: pulse infinite 700ms alternate ease-in-out;
   background: url('../../assets/logo.svg') no-repeat center;
@@ -38,10 +38,7 @@
 .c-loader::after {
   content: '';
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   opacity: 0.5;
   background-color: var(--color-background-canvas);
 }

src/css/components/timecard.css

@@ -10,8 +10,7 @@
 
 .c-timecard__title {
   grid-area: title;
-  margin-top: var(--s-0);
-  margin-bottom: var(--s-0);
+  margin-block: var(--s-0);
   overflow: hidden;
   font-size: var(--font-size-l);
   font-weight: var(--font-weight-semibold);
@@ -30,8 +29,7 @@
 
 .c-timecard__zone {
   grid-area: zone;
-  margin-top: calc(var(--s-3) * -1);
-  margin-bottom: var(--s-0);
+  margin-block: calc(var(--s-3) * -1) var(--s-0);
   font-size: var(--font-size-s);
 }
 
@@ -52,8 +50,8 @@
 
 .c-timecard__close::after {
   content: '';
-  width: 100%;
-  margin-left: -100%;
+  inline-size: 100%;
+  margin-inline-start: -100%;
   aspect-ratio: 1;
   transition: opacity 100ms ease-out;
   opacity: 0;
@@ -70,8 +68,7 @@
   display: flex;
   grid-area: fields;
   align-items: flex-end;
-  margin-right: 0;
-  margin-left: 0;
+  margin-inline: 0;
   padding: 0;
   border: 0;
   font-size: var(--font-size-m);

src/css/components/toast.css

@@ -2,12 +2,12 @@
   --toast-breakpoint: calc(36rem - 100%);
   display: flex;
   position: fixed;
-  bottom: 0;
-  left: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
   flex-wrap: wrap;
   align-items: center;
-  width: 100%;
-  min-width: 0;
+  inline-size: 100%;
+  min-inline-size: 0;
   margin: 0;
   padding: var(--s-2);
   background-color: var(--color-background-primary);

src/css/main.css

@@ -13,13 +13,13 @@
 @import url('./utilities.css');
 
 html {
-  height: 100%;
+  block-size: 100%;
   font-family: var(--font-family-sans);
   font-size: 100%;
   line-height: 1.5;
 }
 
 body {
-  min-height: 100%;
+  min-block-size: 100%;
   background-color: var(--color-background-canvas);
 }

src/css/utilities.css

@@ -1,7 +1,7 @@
 .u-visually-hidden {
   position: absolute !important;
-  width: 1px !important;
-  height: 1px !important;
+  block-size: 1px !important;
+  inline-size: 1px !important;
   margin: -1px !important;
   padding: 0 !important;
   overflow: hidden !important;