update physical shorthands to logical equivalents (#1489)

.changeset/funny-horses-wash.md

@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-css': major
+---
+
+`--iui-color-dot-inset` has been split into `--iui-color-dot-inset-block` and `--iui-color-dot-inset-inline`.

packages/itwinui-css/backstop/tests/color-picker.html

@@ -213,7 +213,7 @@ <h2>Advanced</h2>
           >
             <div
               class="iui-color-dot"
-              style="--iui-color-dot-inset: 2% auto auto 79.2157%;"
+              style="--iui-color-dot-inset-block: 2% auto; --iui-color-dot-inset-inline: 79.2157% auto;"
               tabindex="0"
               id="test-color-dot"
             ></div>
@@ -367,7 +367,7 @@ <h2>Advanced</h2>
           >
             <div
               class="iui-color-dot"
-              style="--iui-color-dot-inset: 2% auto auto 79.2157%;"
+              style="--iui-color-dot-inset-block: 2% auto; --iui-color-dot-inset-inline: 79.2157% auto;"
               tabindex="0"
             ></div>
           </div>
@@ -520,7 +520,7 @@ <h2>Advanced</h2>
           >
             <div
               class="iui-color-dot"
-              style="--iui-color-dot-inset: 2% auto auto 79.2157%;"
+              style="--iui-color-dot-inset-block: 2% auto; --iui-color-dot-inset-inline: 79.2157% auto;"
               tabindex="0"
             ></div>
           </div>

packages/itwinui-css/src/alert/alert.scss

@@ -46,7 +46,8 @@
 }
 
 .iui-alert-message {
-  margin: var(--iui-size-s) var(--iui-size-m);
+  margin-block: var(--iui-size-s);
+  margin-inline: var(--iui-size-m);
   word-break: normal;
   overflow-wrap: anywhere;
   flex: 999;

packages/itwinui-css/src/badge/badge.scss

@@ -16,8 +16,8 @@ $iui-badge-horizontal-padding: calc(var(--iui-size-2xs) * 1.5);
   @include mixins.iui-reset;
   display: inline-block;
   font-size: var(--iui-font-size-0);
-  padding: 0 $iui-badge-horizontal-padding;
-  margin: calc(var(--iui-size-s) * 0.5) 0;
+  padding-inline: $iui-badge-horizontal-padding;
+  margin-block: calc(var(--iui-size-s) * 0.5);
   border: 1px solid var(--_iui-badge-border-color);
   border-radius: var(--iui-border-radius-1);
   background-color: var(--iui-badge-background-color);

packages/itwinui-css/src/blockquote/blockquote.scss

@@ -8,8 +8,9 @@
   @include surface.iui-surface;
   display: block;
   position: relative;
-  padding: var(--iui-size-s) var(--iui-size-m);
-  margin: var(--iui-size-s) 0;
+  padding-block: var(--iui-size-s);
+  padding-inline: var(--iui-size-m);
+  margin-block: var(--iui-size-s);
   text-align: justify;
   border-inline-start: var(--iui-size-xs) solid var(--iui-color-border);
 

packages/itwinui-css/src/breadcrumbs/mixins.scss

@@ -34,7 +34,7 @@
 }
 
 @mixin iui-breadcrumbs-content {
-  padding: 0 var(--iui-size-xs);
+  padding-inline: var(--iui-size-xs);
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -68,7 +68,7 @@
 
 @mixin iui-breadcrumbs-separator {
   display: flex;
-  margin: 0 var(--iui-size-3xs);
+  margin-inline: var(--iui-size-3xs);
 
   svg {
     @include mixins.iui-icon-style('s');

packages/itwinui-css/src/button/base.scss

@@ -44,16 +44,18 @@
 }
 
 @mixin iui-button-active {
-  --_iui-button-active-stripe-inset: initial;
+  --_iui-button-active-stripe-inset-block: initial;
+  --_iui-button-active-stripe-inset-inline: initial;
   --_iui-button-active-stripe-background: var(--iui-color-border-accent);
   --_iui-button-text-color: var(--iui-color-text-accent);
   --_iui-button-icon-fill: var(--iui-color-text-accent);
 
-  // Shows active stripe only if --_iui-button-active-stripe-inset is set (from outside)
+  // Shows active stripe only if --_iui-button-active-stripe-inset- properties are set (from outside)
   &::after {
     content: '';
     position: absolute;
-    inset: var(--_iui-button-active-stripe-inset);
+    inset-block: var(--_iui-button-active-stripe-inset-block);
+    inset-inline: var(--_iui-button-active-stripe-inset-inline);
     background: var(--_iui-button-active-stripe-background);
   }
 

packages/itwinui-css/src/button/button-group.scss

@@ -31,14 +31,11 @@
 
       // Adds stripe to active button
       @if $orientation == 'horizontal' {
-        --_iui-button-active-stripe-inset: #{var(--iui-size-3xs)}
-          #{var(--iui-size-3xs)}
-          calc(100% - #{var(--iui-size-2xs)});
+        --_iui-button-active-stripe-inset-block: #{var(--iui-size-3xs)} calc(100% - #{var(--iui-size-2xs)});
+        --_iui-button-active-stripe-inset-inline: #{var(--iui-size-3xs)};
       } @else {
-        --_iui-button-active-stripe-inset: #{var(--iui-size-3xs)}
-          calc(100% - #{var(--iui-size-2xs)})
-          #{var(--iui-size-3xs)}
-          #{var(--iui-size-3xs)};
+        --_iui-button-active-stripe-inset-block: #{var(--iui-size-3xs)};
+        --_iui-button-active-stripe-inset-inline: #{var(--iui-size-3xs)} calc(100% - #{var(--iui-size-2xs)});
       }
 
       &:hover {

packages/itwinui-css/src/code/code.scss

@@ -14,7 +14,7 @@
 
 .iui-codeblock {
   @include mixins.iui-reset;
-  margin: calc(var(--iui-size-s) * 0.5) 0;
+  margin-block: calc(var(--iui-size-s) * 0.5);
 
   > .iui-title-bar {
     display: flex;
@@ -62,7 +62,7 @@
         content: counter(section);
         text-align: end;
         display: inline-block;
-        padding: 0 var(--iui-size-xs);
+        padding-inline: var(--iui-size-xs);
         inline-size: calc(var(--iui-size-l) + 2 * var(--iui-size-xs)); // 2 * iui-size-xs for the padding
         background-color: var(--iui-color-background-backdrop);
         color: var(--iui-color-text-muted);

packages/itwinui-css/src/color-picker/color-picker.scss

@@ -33,7 +33,7 @@ $iui-hover-box-shadow: 0 0 0 var(--iui-size-3xs) var(--iui-color-border);
   @include surface.iui-surface;
   border-radius: var(--iui-border-radius-1);
   display: inline-flex;
-  padding: var(--iui-size-s) var(--iui-size-s);
+  padding: var(--iui-size-s);
   user-select: none;
   overflow-y: auto;
   flex-direction: column;
@@ -219,10 +219,12 @@ $iui-hover-box-shadow: 0 0 0 var(--iui-size-3xs) var(--iui-color-border);
 }
 
 .iui-color-dot {
-  --iui-color-dot-inset: initial;
+  --iui-color-dot-inset-block: initial;
+  --iui-color-dot-inset-inline: initial;
 
   position: absolute;
-  inset: var(--iui-color-dot-inset);
+  inset-block: var(--iui-color-dot-inset-block);
+  inset-inline: var(--iui-color-dot-inset-inline);
   inline-size: var(--iui-size-m);
   block-size: var(--iui-size-m);
   border-radius: 50%;

packages/itwinui-css/src/date-picker/date-picker.scss

@@ -100,7 +100,7 @@ $iui-date-picker-today-circle-size: 32px;
   inline-size: 100%;
   align-items: center;
   justify-content: space-between;
-  padding: 0 var(--iui-size-2xs);
+  padding-inline: var(--iui-size-2xs);
   font-weight: var(--iui-font-weight-bold);
   gap: var(--iui-size-2xs);
 
@@ -126,7 +126,7 @@ $iui-date-picker-today-circle-size: 32px;
 .iui-calendar-weekdays {
   line-height: $iui-date-picker-cell-height;
   display: flex;
-  padding: 0 var(--iui-size-xs);
+  padding-inline: var(--iui-size-xs);
   font-weight: var(--iui-font-weight-bold);
   background-color: var(--iui-color-background-backdrop);
 
@@ -142,7 +142,7 @@ $iui-date-picker-today-circle-size: 32px;
   white-space: nowrap;
   line-height: $iui-date-picker-cell-height;
   display: flex;
-  padding: 0 var(--iui-size-xs);
+  padding-inline: var(--iui-size-xs);
   margin-block-end: var(--iui-size-3xs);
 }
 

packages/itwinui-css/src/dialog/dialog.scss

@@ -28,7 +28,8 @@ $iui-dialog-min-height: 7.75rem; // 7.75rem = 124px = title bar height + margins
   border-radius: var(--iui-border-radius-1);
   box-shadow: var(--iui-shadow-5);
   position: fixed;
-  padding: var(--iui-size-s) var(--iui-size-m);
+  padding-block: var(--iui-size-s);
+  padding-inline: var(--iui-size-m);
   pointer-events: auto;
   background-color: var(--iui-color-background);
   display: flex;
@@ -160,8 +161,10 @@ $iui-dialog-min-height: 7.75rem; // 7.75rem = 124px = title bar height + margins
 
 .iui-dialog-title-bar-filled {
   font-size: var(--iui-font-size-2);
-  padding: calc(var(--iui-size-s) * 0.5) var(--iui-size-m);
-  margin: calc(0px - var(--iui-size-s)) calc(0px - var(--iui-size-m)) var(--iui-size-s) calc(0px - var(--iui-size-m)); // negative margin to counteract dialog padding
+  padding-block: calc(var(--iui-size-s) * 0.5);
+  padding-inline: var(--iui-size-m);
+  margin-inline: calc(0px - var(--iui-size-m)); // negative margin to counteract dialog padding
+  margin-block: calc(0px - var(--iui-size-s)) var(--iui-size-s);
   cursor: grab;
   background-color: var(--iui-color-background-backdrop);
   border-block-end: 1px solid var(--iui-color-border);
@@ -173,8 +176,8 @@ $iui-dialog-min-height: 7.75rem; // 7.75rem = 124px = title bar height + margins
 
 .iui-dialog-content {
   flex-grow: 2;
-  margin: 0 calc(0px - var(--iui-size-m));
-  padding: 0 var(--iui-size-m);
+  margin-inline: calc(0px - var(--iui-size-m));
+  padding-inline: var(--iui-size-m);
   overflow-y: auto;
   overflow-y: overlay;
 }

packages/itwinui-css/src/fieldset/fieldset.scss

@@ -4,7 +4,7 @@
 
 .iui-fieldset {
   @include mixins.iui-reset;
-  padding: var(--iui-size-s) var(--iui-size-s);
+  padding: var(--iui-size-s);
   border-radius: var(--iui-border-radius-1);
   border: 1px solid var(--iui-color-border);
   background-color: var(--iui-color-background);

packages/itwinui-css/src/footer/footer.scss

@@ -8,13 +8,14 @@
 
   text-align: center;
   inline-size: 100%;
-  padding: var(--iui-size-s) 0;
+  padding-block: var(--iui-size-s);
   font-size: var(--iui-font-size-0);
 }
 
 .iui-legal-footer-list {
   list-style-type: none;
-  margin: 0 auto;
+  margin-block: 0;
+  margin-inline: auto;
   padding: 0;
   display: flex;
   justify-content: center;
@@ -41,7 +42,7 @@
 }
 
 .iui-legal-footer-separator {
-  margin: 0 var(--iui-size-xs);
+  margin-inline: var(--iui-size-xs);
   inline-size: 1px;
   block-size: var(--iui-size-s);
   background-color: var(--iui-color-border);

packages/itwinui-css/src/header/header-buttons.scss

@@ -47,7 +47,7 @@ $iui-side-navigation-icon-margins: calc(1.5 * var(--iui-size-m));
     @include mixins.iui-icon-style('l');
     fill: var(--iui-color-icon);
   }
-  margin: 0 $iui-side-navigation-icon-margins;
+  margin-inline: $iui-side-navigation-icon-margins;
   will-change: transform;
   transform: var(--_iui-header-icon-scale);
   @media (prefers-reduced-motion: no-preference) {
@@ -163,7 +163,7 @@ $iui-side-navigation-icon-margins: calc(1.5 * var(--iui-size-m));
 }
 
 @mixin iui-header-breadcrumb-button-split {
-  padding: 0 var(--iui-size-xs);
+  padding-inline: var(--iui-size-xs);
   margin-inline-start: calc(0px - var(--iui-size-xs));
   flex-shrink: 0;
 

packages/itwinui-css/src/input-container/mixins.scss

@@ -40,7 +40,7 @@
   }
 
   .iui-input-group .iui-toggle-switch-wrapper {
-    padding: calc(var(--iui-size-s) * 0.5) 0;
+    padding-block: calc(var(--iui-size-s) * 0.5);
   }
 
   // #region Cursors
@@ -116,7 +116,8 @@
 
 /// Modifier on iui-input-label-styling to place it inline.
 @mixin iui-input-label-inline {
-  margin: 0 var(--iui-size-m) 0 0;
+  margin: 0;
+  margin-inline-end: var(--iui-size-m);
 
   &.iui-required {
     margin-inline-end: calc(var(--iui-size-2xs) * 1.5 - 1px);
@@ -178,7 +179,8 @@
 
   grid-area: inputs;
   justify-self: end;
-  margin: 0 #{$margin-end} 0 0;
+  margin: 0;
+  margin-inline-end: $margin-end;
   position: relative;
   block-size: 100%;
   inline-size: fit-content;

packages/itwinui-css/src/keyboard/keyboard.scss

@@ -10,7 +10,8 @@
   font-weight: var(--iui-font-weight-semibold);
   font-family: var(--iui-font-mono);
   line-height: 1;
-  padding: calc(var(--iui-size-s) * 0.33) var(--iui-size-xs);
+  padding-block: calc(var(--iui-size-s) * 0.33);
+  padding-inline: var(--iui-size-xs);
   white-space: nowrap;
   text-transform: uppercase;
   user-select: none;

packages/itwinui-css/src/location-marker/data-rich.scss

@@ -12,7 +12,8 @@
     border-radius: var(--iui-border-radius-1);
     text-align: center;
     font-size: var(--iui-font-size-2);
-    padding: calc(var(--iui-size-s) * 0.25) var(--iui-size-xs);
+    padding-block: calc(var(--iui-size-s) * 0.25);
+    padding-inline: var(--iui-size-xs);
     filter: drop-shadow(var(--iui-shadow-1));
     position: relative;
     border: solid 1px var(--iui-color-white);

packages/itwinui-css/src/menu/mixins.scss

@@ -24,7 +24,7 @@ $iui-active-outline: 1px solid var(--iui-color-border-accent);
 }
 
 @mixin iui-header-menu-icon {
-  margin: 0 var(--iui-size-2xs);
+  margin-inline: var(--iui-size-2xs);
 
   &:is(div) {
     @include mixins.iui-icon-style('l');
@@ -173,7 +173,8 @@ $iui-active-outline: 1px solid var(--iui-color-border-accent);
 @mixin iui-menu-divider {
   block-size: 1px;
   inline-size: calc(100% - #{var(--iui-size-l)});
-  margin: 1px auto;
+  margin-block: 1px;
+  margin-inline: auto;
   background-color: var(--iui-color-border);
 }
 

packages/itwinui-css/src/non-ideal-state/non-ideal-state.scss

@@ -43,10 +43,10 @@
     display: inline-block;
     inline-size: 200px;
     text-align: start;
-    margin: 0 var(--iui-size-2xs) 0 0;
+    margin-inline-end: var(--iui-size-2xs);
   }
 
   > .iui-button {
-    margin: 0 var(--iui-size-2xs);
+    margin-inline: var(--iui-size-2xs);
   }
 }

packages/itwinui-css/src/searchbox/searchbox.scss

@@ -37,9 +37,9 @@
 }
 
 .iui-search-icon {
-  margin: 0 var(--iui-size-s);
+  margin-inline: var(--iui-size-s);
 
   &:is(:first-child) {
-    margin: 0 var(--_iui-flex-input-icon-margin, 10px); // To match borderless button left padding + border
+    margin-inline: var(--_iui-flex-input-icon-margin, 10px); // To match borderless button left padding + border
   }
 }

packages/itwinui-css/src/select/select.scss

@@ -73,8 +73,9 @@
 
 @mixin iui-select-tag-container {
   position: absolute;
+  inset-block: 0;
   // align wth Select's padding
-  inset: 0 calc(var(--iui-size-m) + var(--iui-size-l)) 0 var(--iui-size-s);
+  inset-inline: var(--iui-size-s) calc(var(--iui-size-m) + var(--iui-size-l));
   block-size: 100%;
   display: flex;
   align-items: center;
@@ -113,7 +114,7 @@
   @include base.iui-button;
   @include borderless.iui-button-borderless;
   @include tag.iui-tag-button;
-  padding: 0 var(--iui-size-2xs);
+  padding-inline: var(--iui-size-2xs);
   min-block-size: unset;
   min-inline-size: unset;
   block-size: 100%;