Enforce logical properties (#296)

This PR updates all places to use logical properties. It also adds a stylelint plugin to help enforce it

Author: Jeremy-Walton

.stylelintrc.json

@@ -1,6 +1,6 @@
 {
   "extends": ["stylelint-config-idiomatic-order"],
-  "plugins": ["stylelint-prettier"],
+  "plugins": ["stylelint-prettier", "stylelint-use-logical"],
   "overrides": [],
   "rules": {
     "prettier/prettier": true,
@@ -10,6 +10,7 @@
         "message": "CSS variables should be prefixed with op-"
       }
     ],
-    "selector-class-pattern": null
+    "selector-class-pattern": null,
+    "csstools/use-logical": "always"
   }
 }

package.json

@@ -66,6 +66,7 @@
     "stylelint": "^16.23.1",
     "stylelint-config-idiomatic-order": "^10.0.0",
     "stylelint-prettier": "^5.0.3",
+    "stylelint-use-logical": "^2.1.2",
     "vite": "^7.1.4"
   },
   "peerDependencies": {

src/addons/panel.css

@@ -3,10 +3,10 @@
 
   position: absolute;
   z-index: var(--op-z-index-sidebar);
-  width: var(--op-panel-width);
-  height: 100vh;
   background-color: var(--op-color-background);
+  block-size: 100vh;
   color: var(--op-color-on-background);
+  inline-size: var(--op-panel-width);
   inset-inline-end: calc(-1 * var(--op-panel-width)); /* this pushes the panel off the screen to the right */
   overflow-y: scroll;
   padding-block-end: var(--op-space-large);
@@ -23,7 +23,7 @@
   padding: var(--op-space-medium);
   border-radius: 100%;
   cursor: pointer;
-  float: right;
+  float: inline-end;
 
   &:hover {
     background-color: var(--op-color-neutral-plus-seven);

src/addons/tom-select.css

@@ -2,7 +2,6 @@
 .ts-wrapper {
   /* Control */
   .ts-control {
-    min-height: var(--op-input-height-large);
     align-items: center;
     border: none;
     border-radius: var(--op-radius-large);
@@ -12,22 +11,23 @@
     font-size: var(--op-font-x-small);
     font-weight: var(--op-font-weight-light);
     line-height: var(--op-line-height-base);
+    min-block-size: var(--op-input-height-large);
   }
 
   /* Active control */
   &.dropdown-active {
     .ts-control {
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
+      border-end-end-radius: 0;
+      border-end-start-radius: 0;
     }
   }
 
   /* Dropdown */
   .ts-dropdown {
     border: none;
     margin: 0;
-    border-bottom-left-radius: var(--op-radius-large);
-    border-bottom-right-radius: var(--op-radius-large);
+    border-end-end-radius: var(--op-radius-large);
+    border-end-start-radius: var(--op-radius-large);
     box-shadow: var(--op-border-all) var(--op-color-border);
     contain: paint;
 

src/components/accordion.css

@@ -9,11 +9,11 @@
 
   summary {
     display: grid;
-    min-height: var(--_op-accordion-summary-min-height);
     align-items: center;
     cursor: pointer;
     gap: var(--op-space-2x-small);
     grid-template-columns: auto 1fr auto;
+    min-block-size: var(--_op-accordion-summary-min-height);
 
     &::marker,
     &::-webkit-details-marker {
@@ -38,7 +38,7 @@
   }
 
   &::details-content {
-    height: 0;
+    block-size: 0;
     transition: var(--op-transition-accordion-content);
   }
 
@@ -48,7 +48,7 @@
     }
 
     &::details-content {
-      height: auto;
+      block-size: auto;
     }
   }
 

src/components/alert.css

@@ -36,9 +36,9 @@
   &.alert--flash {
     position: fixed;
     z-index: var(--op-z-index-alert-group);
-    top: var(--op-space-large);
-    right: var(--op-space-large);
     animation: var(--op-animation-flash);
+    inset-block-start: var(--op-space-large);
+    inset-inline-end: var(--op-space-large);
   }
 
   &.alert--warning {

src/components/avatar.css

@@ -18,11 +18,11 @@
   z-index: 1;
   display: block;
   overflow: hidden;
-  width: var(--__op-avatar-size);
-  min-width: var(--__op-avatar-size);
-  height: var(--__op-avatar-size);
-  min-height: var(--__op-avatar-size);
   border-radius: var(--_op-avatar-border-radius);
+  block-size: var(--__op-avatar-size);
+  inline-size: var(--__op-avatar-size);
+  min-block-size: var(--__op-avatar-size);
+  min-inline-size: var(--__op-avatar-size);
 
   &::before {
     position: absolute;
@@ -43,8 +43,8 @@
   }
 
   img {
-    width: 100%;
-    height: 100%;
+    block-size: 100%;
+    inline-size: 100%;
     object-fit: cover;
   }
 

src/components/button.css

@@ -16,7 +16,6 @@
   --__op-btn-padding: var(--_op-btn-padding-large);
 
   display: inline-flex;
-  min-height: var(--__op-btn-height);
   align-items: center;
   justify-content: center;
   padding: var(--__op-btn-padding);
@@ -29,6 +28,7 @@
   font-size: var(--__op-btn-font-size);
   font-weight: var(--op-font-weight-normal);
   gap: var(--op-space-x-small);
+  min-block-size: var(--__op-btn-height);
   text-align: center;
   text-decoration: none;
   transition: var(--op-transition-input);
@@ -92,9 +92,9 @@
 
   /* Icon Modifier */
   &.btn--icon {
-    width: var(--__op-btn-height);
-    min-width: var(--__op-btn-height);
     padding: 0;
+    inline-size: var(--__op-btn-height);
+    min-inline-size: var(--__op-btn-height);
   }
 
   /* Icon With Label Modifier */

src/components/button_group.css

@@ -30,13 +30,13 @@
     }
 
     &:first-child:not(:last-child) {
-      border-bottom-right-radius: 0;
-      border-top-right-radius: 0;
+      border-end-end-radius: 0;
+      border-start-end-radius: 0;
     }
 
     &:last-child:not(:first-child) {
-      border-bottom-left-radius: 0;
-      border-top-left-radius: 0;
+      border-end-start-radius: 0;
+      border-start-start-radius: 0;
     }
   }
 }

src/components/card.css

@@ -50,8 +50,8 @@
   }
 
   .card__header {
-    border-top-left-radius: var(--_op-card-radius);
-    border-top-right-radius: var(--_op-card-radius);
+    border-start-end-radius: var(--_op-card-radius);
+    border-start-start-radius: var(--_op-card-radius);
 
     h1,
     h2,
@@ -64,7 +64,7 @@
   }
 
   .card__footer {
-    border-bottom-left-radius: var(--_op-card-radius);
-    border-bottom-right-radius: var(--_op-card-radius);
+    border-end-end-radius: var(--_op-card-radius);
+    border-end-start-radius: var(--_op-card-radius);
   }
 }