@dialpad/dialtone-css 8.63.0-next.1 → 8.64.0

package/lib/build/less/recipes/settings_menu_button.less

@@ -1,30 +1,30 @@
 .d-recipe-settings-menu-button {
-  inline-size: var(--dt-size-550);
-  block-size: var(--dt-size-600);
+  width: var(--dt-size-550);
+  height: var(--dt-size-600);
   padding: var(--dt-space-0);
-  color: var(--dt-theme-topbar-button-color-foreground);
-  background-color: var(--dt-theme-topbar-button-color-background);
+  color: var(--dt-shell-action-color-foreground-primary-default);
+  background-color: var(--dt-shell-action-color-background-primary-default);
   border-radius: var(--dt-size-550);
 
   &:hover {
-    color: var(--dt-theme-topbar-button-color-foreground-hover);
-    background-color: var(--dt-theme-topbar-button-color-background-hover);
+    color: var(--dt-shell-action-color-foreground-primary-hover);
+    background-color: var(--dt-shell-action-color-background-primary-hover);
   }
 
   &:active {
-    background-color: var(--dt-theme-topbar-button-color-background-active);
+    background-color: var(--dt-shell-action-color-background-primary-active);
   }
 }
 
 .d-recipe-settings-menu-button-update {
-  block-size: var(--dt-size-600);
+  height: var(--dt-size-600);
   color: var(--dt-color-blue-500);
   background-color: hsla(var(--dt-color-blue-200-hsl) / 0.25);
   border-color: hsla(var(--dt-color-blue-200-hsl) / 0.25);
   border-radius: var(--dt-size-radius-pill);
 
   &:hover {
-    color: var(--dt-theme-topbar-button-color-foreground-hover);
+    color: var(--dt-shell-action-color-foreground-primary-hover);
     background-color: hsla(var(--dt-color-blue-200-hsl) / 0.5);
   }
 }

package/lib/build/less/recipes/top_banner_info.less

@@ -7,7 +7,7 @@
 }
 
 .d-recipe-top-banner-info__left {
-  min-inline-size: var(--dt-size-20-percent);
+  min-width: var(--dt-size-20-percent);
   margin: var(--dt-space-300) 0 var(--dt-space-300) var(--dt-space-400);
 }
 
@@ -15,7 +15,8 @@
   display: flex;
   gap: var(--dt-size-300);
   align-items: center;
-  margin-block: var(--dt-space-300) var(--dt-space-300);
+  margin-top: var(--dt-space-300);
+  margin-bottom: var(--dt-space-300);
 }
 
 .d-recipe-top-banner-info__right {
@@ -23,9 +24,9 @@
   gap: var(--dt-size-300);
   align-items: baseline;
   justify-content: flex-end;
-  min-inline-size: var(--dt-size-20-percent);
+  min-width: var(--dt-size-20-percent);
   margin: var(--dt-space-300) var(--dt-space-500) var(--dt-space-300) 0;
-  text-align: end;
+  text-align: right;
 }
 
 .d-recipe-top-banner-info--success {

package/lib/build/less/recipes/unread_pill.less

@@ -13,9 +13,9 @@
 }
 
 .d-recipe-leftbar-unread-pill-mentions {
-  color: var(--dt-theme-mention-color-foreground);
+  color: var(--dt-shell-mention-color-foreground-primary);
   font-weight: var(--dt-font-weight-bold);
-  background-color: var(--dt-theme-mention-color-background);
+  background-color: var(--dt-shell-mention-color-surface-primary);
 }
 
 .d-recipe-leftbar-unread-pill-messages {

package/lib/build/less/utilities/backgrounds.less

@@ -41,15 +41,14 @@
 //  ============================================================================
 //  $  BACKGROUND POSITION
 //  ----------------------------------------------------------------------------
-// Note logical properties for background-position continue to use some measure of physical space, e.g. "top"
 .d-bgp-t { background-position: top !important; }
-.d-bgp-tr { background-position: top end !important; }
-.d-bgp-r { background-position: end !important; }
-.d-bgp-br { background-position: bottom end !important; }
+.d-bgp-tr { background-position: top right !important; }
+.d-bgp-r { background-position: right !important; }
+.d-bgp-br { background-position: bottom right !important; }
 .d-bgp-b { background-position: bottom !important; }
-.d-bgp-bl { background-position: bottom start !important; }
-.d-bgp-l { background-position: start !important; }
-.d-bgp-tl { background-position: top start !important; }
+.d-bgp-bl { background-position: bottom left !important; }
+.d-bgp-l { background-position: left !important; }
+.d-bgp-tl { background-position: top left !important; }
 .d-bgp-center { background-position: center !important; }
 .d-bgp-unset { background-position: unset !important; }
 
@@ -98,14 +97,15 @@
 //  --  BASE CLASS
 .d-bgg-pattern {
     position: relative;
-    padding-inline-start: var(--dt-space-550) !important;
+    padding-left: var(--dt-space-550) !important;
 
     &::after {
         position: absolute;
-        inset-block: var(--dt-space-100) var(--dt-space-100);
-        inset-inline-start: var(--dt-space-100);
-        min-inline-size: 2rem;
-        min-block-size: 2rem;
+        top: var(--dt-space-100);
+        bottom: var(--dt-space-100);
+        left: var(--dt-space-100);
+        min-width: 2rem;
+        min-height: 2rem;
         background-image: var(--bgg-pattern);
         background-repeat: repeat-y;
         background-position: top left;

package/lib/build/less/utilities/borders.less

@@ -22,27 +22,11 @@
 //  ============================================================================
 //  $$ DIRECTION
 //  ----------------------------------------------------------------------------
-.d-ba {
-  border-color: var(--dt-color-border-default) !important;
-  border-style: solid !important;
-  border-width: var(--dt-size-border-100) !important;
-}
-
-.d-bt {
-  border-block-start: var(--dt-size-border-100) solid var(--dt-color-border-default) !important;
-}
-
-.d-br {
-  border-inline-end: var(--dt-size-border-100) solid var(--dt-color-border-default) !important;
-}
-
-.d-bb {
-  border-block-end: var(--dt-size-border-100) solid var(--dt-color-border-default) !important;
-}
-
-.d-bl {
-  border-inline-start: var(--dt-size-border-100) solid var(--dt-color-border-default) !important;
-}
+.d-ba { border: var(--dt-size-100) solid !important; }
+.d-bt { border-top: var(--dt-size-100) solid !important; }
+.d-br { border-right: var(--dt-size-100) solid !important; }
+.d-bb { border-bottom: var(--dt-size-100) solid !important; }
+.d-bl { border-left: var(--dt-size-100) solid !important; }
 
 .d-bx { .d-br(); .d-bl(); }
 
@@ -62,65 +46,65 @@
 //  $$ TOP
 //  ----------------------------------------------------------------------------
 .d-btr-circle {
-    border-start-start-radius: var(--dt-size-radius-circle) !important;
-    border-start-end-radius: var(--dt-size-radius-circle) !important;
+    border-top-left-radius: var(--dt-size-radius-circle) !important;
+    border-top-right-radius: var(--dt-size-radius-circle) !important;
 }
 
 .d-btr-pill {
-    border-start-start-radius: var(--dt-size-radius-pill) !important;
-    border-start-end-radius: var(--dt-size-radius-pill) !important;
+    border-top-left-radius: var(--dt-size-radius-pill) !important;
+    border-top-right-radius: var(--dt-size-radius-pill) !important;
 }
 
 //  $$ RIGHT
 //  ----------------------------------------------------------------------------
 .d-brr-circle {
-    border-start-end-radius: var(--dt-size-radius-circle) !important;
-    border-end-end-radius: var(--dt-size-radius-circle) !important;
+    border-top-right-radius: var(--dt-size-radius-circle) !important;
+    border-bottom-right-radius: var(--dt-size-radius-circle) !important;
 }
 
 .d-brr-pill {
-    border-start-end-radius: var(--dt-size-radius-pill) !important;
-    border-end-end-radius: var(--dt-size-radius-pill) !important;
+    border-top-right-radius: var(--dt-size-radius-pill) !important;
+    border-bottom-right-radius: var(--dt-size-radius-pill) !important;
 }
 
 //  $$ BOTTOM
 //  ----------------------------------------------------------------------------
 .d-bbr-circle {
-    border-end-end-radius: var(--dt-size-radius-circle) !important;
-     border-end-start-radius: var(--dt-size-radius-circle) !important;
+    border-bottom-right-radius: var(--dt-size-radius-circle) !important;
+     border-bottom-left-radius: var(--dt-size-radius-circle) !important;
     }
 
 .d-bbr-pill {
-    border-end-end-radius: var(--dt-size-radius-pill) !important;
-    border-end-start-radius: var(--dt-size-radius-pill) !important;
+    border-bottom-right-radius: var(--dt-size-radius-pill) !important;
+    border-bottom-left-radius: var(--dt-size-radius-pill) !important;
  }
 
 //  $$ RIGHT
 //  ----------------------------------------------------------------------------
 .d-blr-circle {
-    border-start-start-radius: var(--dt-size-radius-circle) !important;
-    border-end-start-radius: var(--dt-size-radius-circle) !important;
+    border-top-left-radius: var(--dt-size-radius-circle) !important;
+    border-bottom-left-radius: var(--dt-size-radius-circle) !important;
 }
 
 .d-blr-pill {
-    border-start-start-radius: var(--dt-size-radius-pill) !important;
-    border-end-start-radius: var(--dt-size-radius-pill) !important;
+    border-top-left-radius: var(--dt-size-radius-pill) !important;
+    border-bottom-left-radius: var(--dt-size-radius-pill) !important;
 }
 
 
 //  $$ STYLE
 //  ----------------------------------------------------------------------------
 .d-bas-dashed { border-style: dashed !important; }
-.d-bts-dashed { border-block-start-style: dashed !important; }
-.d-brs-dashed { border-inline-end-style: dashed !important; }
-.d-bbs-dashed { border-block-end-style: dashed !important; }
-.d-bls-dashed { border-inline-start-style: dashed !important; }
+.d-bts-dashed { border-top-style: dashed !important; }
+.d-brs-dashed { border-right-style: dashed !important; }
+.d-bbs-dashed { border-bottom-style: dashed !important; }
+.d-bls-dashed { border-left-style: dashed !important; }
 
 .d-bas-dotted { border-style: dotted !important; }
-.d-bts-dotted { border-block-start-style: dotted !important; }
-.d-brs-dotted { border-inline-end-style: dotted !important; }
-.d-bbs-dotted { border-block-end-style: dotted !important; }
-.d-bls-dotted { border-inline-start-style: dotted !important; }
+.d-bts-dotted { border-top-style: dotted !important; }
+.d-brs-dotted { border-right-style: dotted !important; }
+.d-bbs-dotted { border-bottom-style: dotted !important; }
+.d-bls-dotted { border-left-style: dotted !important; }
 
 .d-bas-unset { border-style: unset !important; }
 
@@ -133,28 +117,28 @@
 .d-baw4 { border-width: var(--dt-size-border-300) !important; }
 
 //  --  Top Border width
-.d-btw0 { border-block-start-width: var(--dt-size-border-0) !important; }
-.d-btw1 { border-block-start-width: var(--dt-size-border-100) !important; }
-.d-btw2 { border-block-start-width: var(--dt-size-border-200) !important; }
-.d-btw4 { border-block-start-width: var(--dt-size-border-300) !important; }
+.d-btw0 { border-top-width: var(--dt-size-border-0) !important; }
+.d-btw1 { border-top-width: var(--dt-size-border-100) !important; }
+.d-btw2 { border-top-width: var(--dt-size-border-200) !important; }
+.d-btw4 { border-top-width: var(--dt-size-border-300) !important; }
 
 //  --  Right Border width
-.d-brw0 { border-inline-end-width: var(--dt-size-border-0) !important; }
-.d-brw1 { border-inline-end-width: var(--dt-size-border-100) !important; }
-.d-brw2 { border-inline-end-width: var(--dt-size-border-200) !important; }
-.d-brw4 { border-inline-end-width: var(--dt-size-border-300) !important; }
+.d-brw0 { border-right-width: var(--dt-size-border-0) !important; }
+.d-brw1 { border-right-width: var(--dt-size-border-100) !important; }
+.d-brw2 { border-right-width: var(--dt-size-border-200) !important; }
+.d-brw4 { border-right-width: var(--dt-size-border-300) !important; }
 
 //  --  Bottom Border width
-.d-bbw0 { border-block-end-width: var(--dt-size-border-0) !important; }
-.d-bbw1 { border-block-end-width: var(--dt-size-border-100) !important; }
-.d-bbw2 { border-block-end-width: var(--dt-size-border-200) !important; }
-.d-bbw4 { border-block-end-width: var(--dt-size-border-300) !important; }
+.d-bbw0 { border-bottom-width: var(--dt-size-border-0) !important; }
+.d-bbw1 { border-bottom-width: var(--dt-size-border-100) !important; }
+.d-bbw2 { border-bottom-width: var(--dt-size-border-200) !important; }
+.d-bbw4 { border-bottom-width: var(--dt-size-border-300) !important; }
 
 //  --  Left Border width
-.d-blw0 { border-inline-start-width: var(--dt-size-border-0) !important; }
-.d-blw1 { border-inline-start-width: var(--dt-size-border-100) !important; }
-.d-blw2 { border-inline-start-width: var(--dt-size-border-200) !important; }
-.d-blw4 { border-inline-start-width: var(--dt-size-border-300) !important; }
+.d-blw0 { border-left-width: var(--dt-size-border-0) !important; }
+.d-blw1 { border-left-width: var(--dt-size-border-100) !important; }
+.d-blw2 { border-left-width: var(--dt-size-border-200) !important; }
+.d-blw4 { border-left-width: var(--dt-size-border-300) !important; }
 
 //  --  X Border width
 .d-bxw0 { .d-brw0(); .d-blw0(); }
@@ -177,29 +161,29 @@
 .d-divide-y > * + * {
     --divide-y-reverse: 0;
 
-    border-block-start: calc(~'1px * (1 - var(--divide-y-reverse))') solid var(--dt-color-border-default) !important;
-    border-block-end: calc(~'1px * var(--divide-y-reverse)') solid var(--dt-color-border-default) !important;
+    border-top: calc(~'1px * (1 - var(--divide-y-reverse))') solid !important;
+    border-bottom: calc(~'1px * var(--divide-y-reverse)') solid !important;
 }
 
 .d-divide-y0 > * + * {
     --divide-y-reverse: 0;
 
-    border-block-start: calc(~'0 * (1 - var(--divide-y-reverse))') solid var(--dt-color-border-default) !important;
-    border-block-end: calc(~'0 * var(--divide-y-reverse)') solid var(--dt-color-border-default) !important;
+    border-top: calc(~'0 * (1 - var(--divide-y-reverse))') solid !important;
+    border-bottom: calc(~'0 * var(--divide-y-reverse)') solid !important;
 }
 
 .d-divide-y2 > * + * {
     --divide-y-reverse: 0;
 
-    border-block-start: calc(~'2px * (1 - var(--divide-y-reverse))') solid var(--dt-color-border-default) !important;
-    border-block-end: calc(~'2px * var(--divide-y-reverse)') solid var(--dt-color-border-default) !important;
+    border-top: calc(~'2px * (1 - var(--divide-y-reverse))') solid !important;
+    border-bottom: calc(~'2px * var(--divide-y-reverse)') solid !important;
 }
 
 .d-divide-y4 > * + * {
     --divide-y-reverse: 0;
 
-    border-block-start: calc(~'4px * (1 - var(--divide-y-reverse))') solid var(--dt-color-border-default) !important;
-    border-block-end: calc(~'4px * var(--divide-y-reverse)') solid var(--dt-color-border-default) !important;
+    border-top: calc(~'4px * (1 - var(--divide-y-reverse))') solid !important;
+    border-bottom: calc(~'4px * var(--divide-y-reverse)') solid !important;
 }
 .d-divide-y-reverse > * + * { --divide-y-reverse: 1; }
 
@@ -208,29 +192,29 @@
 .d-divide-x > * + * {
     --divide-x-reverse: 0;
 
-    border-inline-end: calc(~'1px * var(--divide-x-reverse)') solid var(--dt-color-border-default) !important;
-    border-inline-start: calc(~'1px * (1 - var(--divide-x-reverse))') solid var(--dt-color-border-default) !important;
+    border-right: calc(~'1px * var(--divide-x-reverse)') solid !important;
+    border-left: calc(~'1px * (1 - var(--divide-x-reverse))') solid !important;
 }
 
 .d-divide-x0 > * + * {
     --divide-x-reverse: 0;
 
-    border-inline-end: calc(~'0 * var(--divide-x-reverse)') solid var(--dt-color-border-default) !important;
-    border-inline-start: calc(~'0 * (1 - var(--divide-x-reverse))') solid var(--dt-color-border-default) !important;
+    border-right: calc(~'0 * var(--divide-x-reverse)') solid !important;
+    border-left: calc(~'0 * (1 - var(--divide-x-reverse))') solid !important;
 }
 
 .d-divide-x2 > * + * {
     --divide-x-reverse: 0;
 
-    border-inline-end: calc(~'2px * var(--divide-x-reverse)') solid var(--dt-color-border-default) !important;
-    border-inline-start: calc(~'2px * (1 - var(--divide-x-reverse))') solid var(--dt-color-border-default) !important;
+    border-right: calc(~'2px * var(--divide-x-reverse)') solid !important;
+    border-left: calc(~'2px * (1 - var(--divide-x-reverse))') solid !important;
 }
 
 .d-divide-x4 > * + * {
     --divide-x-reverse: 0;
 
-    border-inline-end: calc(~'4px * var(--divide-x-reverse)') solid var(--dt-color-border-default) !important;
-    border-inline-start: calc(~'4px * (1 - var(--divide-x-reverse))') solid var(--dt-color-border-default) !important;
+    border-right: calc(~'4px * var(--divide-x-reverse)') solid !important;
+    border-left: calc(~'4px * (1 - var(--divide-x-reverse))') solid !important;
 }
 .d-divide-x-reverse > * + * { --divide-x-reverse: 1; }
 
@@ -243,11 +227,9 @@
  * https://dev.to/afif/border-with-gradient-and-radius-387f
  */
 .d-bc-ai {
-  border-image-source: var(--dt-color-border-ai) !important;
-  border-image-slice: 1 !important;
+  border-image: var(--dt-color-border-ai) 1 !important;
 }
 
 .d-divide-ai > * + * {
-  border-image-source: var(--dt-color-border-ai) !important;
-  border-image-slice: 1 !important;
+  border-image: var(--dt-color-border-ai) 1 !important;
 }

package/lib/build/less/utilities/interactivity.less

@@ -75,10 +75,6 @@
 //      and if so, in which directions.
 //  ----------------------------------------------------------------------------
 .d-r-both { resize: both !important; }
-
-.d-r-inline,
-.d-r-horizontal { resize: inline !important; }
-
-.d-r-block,
-.d-r-vertical { resize: block !important; }
+.d-r-horizontal { resize: horizontal !important; }
+.d-r-vertical { resize: vertical !important; }
 .d-r-none { resize: none !important; }

package/lib/build/less/utilities/layout.less

@@ -27,39 +27,39 @@
 //  ============================================================================
 //  $$  TOP
 //  ----------------------------------------------------------------------------
-.d-t50p { inset-block-start: 50% !important; }
-.d-t100p { inset-block-start: 100% !important; }
-.d-t100p-calc { inset-block-start: calc(~'100% + var(--fixed-value, 8px)') !important; }
-.d-tn50p { inset-block-start: -50% !important; }
-.d-tn100p { inset-block-start: -100% !important; }
-.d-tn100p-calc { inset-block-start: calc(~'-100% + var(--fixed-value, 8px)') !important; }
+.d-t50p { top: 50% !important; }
+.d-t100p { top: 100% !important; }
+.d-t100p-calc { top: calc(~'100% + var(--fixed-value, 8px)') !important; }
+.d-tn50p { top: -50% !important; }
+.d-tn100p { top: -100% !important; }
+.d-tn100p-calc { top: calc(~'-100% + var(--fixed-value, 8px)') !important; }
 
 //  $$  RIGHT
 //  ----------------------------------------------------------------------------
-.d-r50p { inset-inline-end: 50% !important; }
-.d-r100p { inset-inline-end: 100% !important; }
-.d-r100p-calc { inset-inline-end: calc(~'100% + var(--fixed-value, 8px)') !important; }
-.d-rn50p { inset-inline-end: -50% !important; }
-.d-rn100p { inset-inline-end: -100% !important; }
-.d-rn100p-calc { inset-inline-end: calc(~'-100% + var(--fixed-value, 8px)') !important; }
+.d-r50p { right: 50% !important; }
+.d-r100p { right: 100% !important; }
+.d-r100p-calc { right: calc(~'100% + var(--fixed-value, 8px)') !important; }
+.d-rn50p { right: -50% !important; }
+.d-rn100p { right: -100% !important; }
+.d-rn100p-calc { right: calc(~'-100% + var(--fixed-value, 8px)') !important; }
 
 //  $$  BOTTOM
 //  ----------------------------------------------------------------------------
-.d-b50p { inset-block-end: 50% !important; }
-.d-b100p { inset-block-end: 100% !important; }
-.d-b100p-calc { inset-block-end: calc(~'100% + var(--fixed-value, 8px)') !important; }
-.d-bn50p { inset-block-end: -50% !important; }
-.d-bn100p { inset-block-end: -100% !important; }
-.d-bn100p-calc { inset-block-end: calc(~'-100% + var(--fixed-value, 8px)') !important; }
+.d-b50p { bottom: 50% !important; }
+.d-b100p { bottom: 100% !important; }
+.d-b100p-calc { bottom: calc(~'100% + var(--fixed-value, 8px)') !important; }
+.d-bn50p { bottom: -50% !important; }
+.d-bn100p { bottom: -100% !important; }
+.d-bn100p-calc { bottom: calc(~'-100% + var(--fixed-value, 8px)') !important; }
 
 //  $$  LEFT
 //  ----------------------------------------------------------------------------
-.d-l50p { inset-inline-start: 50% !important; }
-.d-l100p { inset-inline-start: 100% !important; }
-.d-l100p-calc { inset-inline-start: calc(~'100% + var(--fixed-value, 8px)') !important; }
-.d-ln50p { inset-inline-start: -50% !important; }
-.d-ln100p { inset-inline-start: -100% !important; }
-.d-ln100p-calc { inset-inline-start: calc(~'-100% + var(--fixed-value, 8px)') !important; }
+.d-l50p { left: 50% !important; }
+.d-l100p { left: 100% !important; }
+.d-l100p-calc { left: calc(~'100% + var(--fixed-value, 8px)') !important; }
+.d-ln50p { left: -50% !important; }
+.d-ln100p { left: -100% !important; }
+.d-ln100p-calc { left: calc(~'-100% + var(--fixed-value, 8px)') !important; }
 
 
 //  ============================================================================
@@ -81,17 +81,17 @@
 //  $   OVERFLOW
 //  ============================================================================
 .d-of-auto { overflow: auto !important; }
-.d-of-x-auto { overflow-inline: auto !important; }
-.d-of-y-auto { overflow-block: auto !important; }
+.d-of-x-auto { overflow-x: auto !important; }
+.d-of-y-auto { overflow-y: auto !important; }
 .d-of-hidden { overflow: hidden !important; }
-.d-of-x-hidden { overflow-inline: hidden !important; }
-.d-of-y-hidden { overflow-block: hidden !important; }
+.d-of-x-hidden { overflow-x: hidden !important; }
+.d-of-y-hidden { overflow-y: hidden !important; }
 .d-of-scroll { overflow: scroll !important; }
-.d-of-x-scroll { overflow-inline: scroll !important; }
-.d-of-y-scroll { overflow-block: scroll !important; }
+.d-of-x-scroll { overflow-x: scroll !important; }
+.d-of-y-scroll { overflow-y: scroll !important; }
 .d-of-visible { overflow: visible !important; }
-.d-of-x-visible { overflow-inline: visible !important; }
-.d-of-y-visible { overflow-block: visible !important; }
+.d-of-x-visible { overflow-x: visible !important; }
+.d-of-y-visible { overflow-y: visible !important; }
 .d-of-unset { overflow: unset !important; }
 
 
@@ -115,8 +115,8 @@
 
 .d-vi-visible-sr {
   position: absolute;
-  inline-size: var(--dt-size-100);
-  block-size: var(--dt-size-100);
+  width: var(--dt-size-100);
+  height: var(--dt-size-100);
   margin: var(--dt-space-100-negative);
   padding: var(--dt-space-0);
   overflow: hidden;