@dialpad/dialtone-css 8.78.0-next.1 → 8.78.0-next.3

package/lib/build/less/components/toast.less

@@ -12,12 +12,12 @@
 @layer dialtone.components {
 .d-toast-wrapper {
   position: absolute;
-  inset-block-start: var(--dt-size-600); // 32
+  inset-block-start: var(--dt-spacing-400); // 32
   inset-inline-start: 50%;
   z-index: var(--zi-notification);
   display: flex;
   flex-direction: column;
-  gap: var(--dt-size-500);
+  gap: var(--dt-spacing-200);
   transform: translateX(-50%);
 }
 
@@ -28,11 +28,11 @@
     //  Component CSS Vars
     //  ------------------------------------------------------------------------
     --toast-color-shadow: var(--dt-color-border-subtle);
-    --toast-box-shadow: 0 0 0 var(--dt-size-100) var(--toast-color-shadow) inset, var(--dt-shadow-medium);
+    --toast-box-shadow: 0 0 0 var(--dt-size-border-100) var(--toast-color-shadow) inset, var(--dt-shadow-medium);
 
     z-index: var(--zi-notification);
     display: block;
-    max-inline-size: var(--dt-size-975);
+    max-inline-size: var(--dt-layout-700);
     word-break: normal;
     box-shadow: var(--toast-box-shadow);
     pointer-events: all;
@@ -63,7 +63,7 @@
     align-items: start;
 
     .d-notice__actions :where(button:first-child) {
-        margin-inline-start: var(--dt-size-600); // 32
+        margin-inline-start: var(--dt-spacing-400); // 32
     }
 }
 
@@ -107,7 +107,7 @@
 .d-toast--viewing {
   --toast-border-radius: var(--dt-size-radius-200);
 
-  border-block-start: var(--dt-size-300) solid var(--dt-color-magenta-400);
+  border-block-start: var(--dt-size-border-300) solid var(--dt-color-magenta-400);
 
   .d-notice__icon {
     color: var(--dt-color-magenta-400);
@@ -127,17 +127,17 @@
   //  Component CSS Vars
   //  ------------------------------------------------------------------------
   --toast-alternate-color-shadow: oklch(from var(--dt-color-black-900) l c h / 0.15);
-  --toast-alternate-box-shadow: 0 0 0 var(--dt-size-0) var(--toast-alternate-color-shadow) inset, var(--dt-shadow-medium);
+  --toast-alternate-box-shadow: 0 0 0 var(--dt-spacing-0) var(--toast-alternate-color-shadow) inset, var(--dt-shadow-medium);
   --toast-alternate-color-background: var(--dt-color-surface-primary);
   --toast-alternate-color-text: var(--dt-color-foreground-primary);
   --toast-alternate-color-icon: var(--dt-color-foreground-muted);
   --toast-alternate-font-color: var(--dt-color-foreground-tertiary);
   --toast-alternate-font-size: var(--dt-font-size-200);
   --toast-alternate-line-height: var(--dt-font-line-height-300);
-  --toast-alternate-border-radius: var(--dt-size-500);
+  --toast-alternate-border-radius: var(--dt-size-radius-500);
   --toast-alternate-border-color: var(--dt-color-border-subtle);
   --toast-alternate-border-style: solid;
-  --toast-alternate-border-width: var(--dt-size-100);
+  --toast-alternate-border-width: var(--dt-size-border-100);
 
   z-index: var(--zi-notification);
 
@@ -146,8 +146,8 @@
   display: flex;
   align-items: center;
   box-sizing: border-box;
-  inline-size: var(--dt-size-925);
-  padding: var(--dt-size-350) var(--dt-size-350) var(--dt-size-450) var(--dt-size-450);
+  inline-size: var(--dt-layout-500);
+  padding: var(--dt-spacing-75) var(--dt-spacing-75) var(--dt-spacing-150) var(--dt-spacing-150);
   color: var(--toast-alternate-color-text);
   font-size: var(--toast-alternate-font-size);
   line-height: var(--toast-alternate-line-height);
@@ -177,7 +177,7 @@
   .d-toast-layout-alternate__icon {
     display: flex;
     flex: 0 auto;
-    margin-inline-end: var(--dt-size-300);
+    margin-inline-end: var(--dt-spacing-50);
     color: var(--toast-alternate-color-icon);
   }
 
@@ -199,7 +199,7 @@
   display: flex;
   flex: 1 auto;
   flex-direction: column;
-  margin-inline-end: var(--dt-size-500);
+  margin-inline-end: var(--dt-spacing-200);
   color: var(--dt-color-foreground-primary);
   font-weight: var(--dt-font-weight-normal);
   font-size: var(--dt-font-size-200);
@@ -208,17 +208,17 @@
 .d-toast-alternate__dialog {
   position: relative;
   align-items: center;
-  inline-size: var(--dt-size-100-percent);
+  inline-size: var(--dt-layout-100-percent);
 
 
   .d-notice__actions :where(button:first-child) {
-    margin-inline-start: var(--dt-size-600); // 32
+    margin-inline-start: var(--dt-spacing-400); // 32
   }
 }
 
 .d-toast-alternate__header {
   display: flex;
-  gap: var(--dt-size-200);
+  gap: var(--dt-spacing-25);
   align-items: center;
   color: var(--toast-alternate-font-color);
 }

package/lib/build/less/components/toggle.less

@@ -26,9 +26,9 @@
   --toggle-transition-timing-function: var(--ttf-out-quint);
   --toggle-transition-speed: var(--td300);
   --toggle-color-background: oklch(from var(--dt-color-surface-bold) 0.738 c h);
-  --toggle-size-height: var(--dt-size-550); // 24
-  --toggle-size-width: var(--dt-size-650); // 48
-  --toggle-size-icon: var(--dt-size-500); // 16
+  --toggle-size-height: calc(var(--dt-layout-25) * 1.5); // 24
+  --toggle-size-width: var(--dt-layout-75); // 48
+  --toggle-size-icon: var(--dt-layout-25); // 16
 
   //  $$  BASE STYLE
   //  ----------------------------------------------------------------------------
@@ -42,7 +42,7 @@
   line-height: var(--lh4);
   vertical-align: middle;
   background-color: var(--toggle-color-background);
-  border: var(--dt-size-100) solid var(--toggle-color-background);
+  border: var(--dt-size-border-100) solid var(--toggle-color-background);
   border-radius: var(--toggle-size-width);
   cursor: pointer;
   transition-timing-function: var(--ttf-out-quint);
@@ -51,14 +51,14 @@
 
   &__inner {
     position: absolute;
-    inset-block-start: calc(var(--dt-size-300) - var(--dt-size-100)); // 3
-    inset-inline-start: var(--dt-size-550); // 24
+    inset-block-start: calc(var(--dt-spacing-50) - var(--dt-spacing-1)); // 3
+    inset-inline-start: var(--dt-spacing-300); // 24
     inline-size: var(--toggle-size-icon);
     block-size: var(--toggle-size-icon);
 
     .d-toggle--small & {
-      inset-block-start: var(--dt-size-100); // 1
-      inset-inline-start: calc(var(--dt-size-500) + var(--dt-size-100)); // 17
+      inset-block-start: var(--dt-spacing-1); // 1
+      inset-inline-start: calc(var(--dt-spacing-200) + var(--dt-spacing-1)); // 17
     }
 
     .d-toggle--indeterminate & {
@@ -77,10 +77,10 @@
 
   &::after {
     position: absolute;
-    inset-block-start: var(--dt-size-100); // 1
-    inset-inline-start: var(--dt-size-100); // 1
-    inline-size: calc(var(--toggle-size-icon) + var(--dt-size-300));
-    block-size: calc(var(--toggle-size-icon) + var(--dt-size-300));
+    inset-block-start: var(--dt-spacing-1); // 1
+    inset-inline-start: var(--dt-spacing-1); // 1
+    inline-size: var(--dt-icon-size-400);
+    block-size: var(--dt-icon-size-400);
     background-color: var(--dt-color-surface-primary);
     border-radius: var(--dt-size-radius-circle);
     cursor: pointer;
@@ -91,20 +91,20 @@
   //  $$  TOGGLE VARIANTS
   //  ----------------------------------------------------------------------------
   &--small {
-    --toggle-size-height: calc(var(--dt-size-500) + var(--dt-size-200)); // 18
-    --toggle-size-width: calc(var(--dt-size-600) + var(--dt-size-300)); // 36
-    --toggle-size-icon: calc(var(--dt-size-500) - var(--dt-size-200)); // 14
+    --toggle-size-height: calc(var(--dt-layout-25) + var(--dt-spacing-25)); // 18
+    --toggle-size-width: calc(var(--dt-layout-50) + var(--dt-spacing-50)); // 36
+    --toggle-size-icon: var(--dt-icon-size-200); // 14
 
     &::before {
       position: absolute;
-      inset: var(--dt-size-300-negative) 0 var(--dt-size-300-negative) 0; // -4 // -4
+      inset: var(--dt-spacing-50-negative) 0 var(--dt-spacing-50-negative) 0; // -4 // -4
       content: '';
     }
   }
 
   &--small::after {
-    inline-size: var(--toggle-size-icon);
-    block-size: var(--toggle-size-icon);
+    inline-size: var(--dt-icon-size-200);
+    block-size: var(--dt-icon-size-200);
   }
 
   //  $$  CHECKED TOGGLE
@@ -113,7 +113,7 @@
     --toggle-color-background: var(--dt-checkbox-color-background-checked);
 
     .d-toggle__inner {
-      inset-inline-start: var(--dt-size-350); // 6
+      inset-inline-start: var(--dt-spacing-75); // 6
       background-image: url("data:image/svg+xml,<svg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'> <path fill-rule='evenodd' clip-rule='evenodd' d='M12.1083 3.05806C12.3524 3.30214 12.3524 3.69786 12.1083 3.94194L5.69162 10.3586C5.44754 10.6027 5.05181 10.6027 4.80773 10.3586L1.89107 7.44194C1.64699 7.19786 1.64699 6.80214 1.89107 6.55806C2.13514 6.31398 2.53087 6.31398 2.77495 6.55806L5.24967 9.03278L11.2244 3.05806C11.4685 2.81398 11.8642 2.81398 12.1083 3.05806Z' fill='white'/> </svg>");
 
       [data-dt-mode="dark"] &,
@@ -123,15 +123,15 @@
     }
 
     &.d-toggle--small .d-toggle__inner {
-      inset-inline-start: calc(var(--dt-size-100) + var(--dt-size-200)); // 3
+      inset-inline-start: calc(var(--dt-spacing-1) + var(--dt-spacing-25)); // 3
     }
 
     &::after {
-      inset-inline-start: calc(var(--dt-size-550) + var(--dt-size-100)); // 25
+      inset-inline-start: calc(var(--dt-spacing-300) + var(--dt-spacing-1)); // 25
     }
 
     &.d-toggle--small::after {
-      inset-inline: calc(calc(var(--dt-size-300) * 5) - var(--dt-size-100)) var(--dt-size-100); // 1 // 19
+      inset-inline: calc(calc(var(--dt-spacing-50) * 5) - var(--dt-spacing-1)) var(--dt-spacing-1); // 1 // 19
     }
   }
 
@@ -170,7 +170,7 @@
 }
 
 .d-toggle-group {
-  gap: var(--dt-size-400); // 8
+  gap: var(--dt-spacing-100); // 8
 }
 
 //  ============================================================================

package/lib/build/less/components/tooltip.less

@@ -45,18 +45,18 @@
   --tooltip-color-text: var(--dt-color-foreground-primary-inverted);
   --tooltip-font-weight: var(--dt-font-weight-medium);
   --tooltip-line-height: var(--dt-font-line-height-300);
-  --tooltip-padding-y: var(--dt-size-400); // 8
-  --tooltip-padding-x: var(--dt-size-450); // 12
+  --tooltip-padding-y: var(--dt-spacing-100); // 8
+  --tooltip-padding-x: var(--dt-spacing-150); // 12
   --tooltip-border-radius: var(--dt-size-radius-300); // 4
 
   z-index: var(--zi-tooltip);
-  max-inline-size: var(--dt-size-875);
+  max-inline-size: var(--dt-layout-350);
   padding: var(--tooltip-padding-y) var(--tooltip-padding-x);
   color: var(--tooltip-color-text);
   font-weight: var(--tooltip-font-weight);
   font-size: var(--dt-font-size-100);
   line-height: var(--tooltip-line-height);
-  letter-spacing: calc(var(--dt-size-100) * 0.25);
+  letter-spacing: calc(var(--dt-spacing-1) * 0.25);
   text-align: center;
   overflow-wrap: break-word;
   background-color: var(--tooltip-color-background);
@@ -64,7 +64,7 @@
 
   &::after {
     position: absolute;
-    border: var(--dt-size-350) solid transparent;
+    border: var(--dt-spacing-75) solid transparent;
     content: '';
   }
 }
@@ -131,11 +131,11 @@
 .d-tooltip__arrow--top-left,
 .d-tooltip__arrow--top-center,
 .d-tooltip__arrow--top-right {
-inset-block-start: calc(100% + var(--dt-size-450)); // 100% + 12
-transform: translateY(var(--dt-size-500)); // 16
+inset-block-start: calc(100% + var(--dt-spacing-150)); // 100% + 12
+transform: translateY(var(--dt-layout-25)); // 16
 
 &::after {
-  inset-block-start: calc(var(--dt-size-350-negative) - var(--dt-size-50-negative)); // -5.5
+  inset-block-start: calc(var(--dt-spacing-75-negative) - calc(var(--dt-spacing-1) / 2)); // -5.5
   border-block-start-width: 0;
   border-block-end-color: var(--tooltip-color-background);
 }
@@ -149,11 +149,11 @@ transform: translateY(var(--dt-size-500)); // 16
 .d-tooltip__arrow--bottom-left,
 .d-tooltip__arrow--bottom-center,
 .d-tooltip__arrow--bottom-right {
-inset-block-end: calc(100% + var(--dt-size-450)); // 100% + 12
-transform: translateY(var(--dt-size-500-negative)); // -16
+inset-block-end: calc(100% + var(--dt-spacing-150)); // 100% + 12
+transform: translateY(var(--dt-layout-25-negative)); // -16
 
 &::after {
-  inset-block-end: calc(var(--dt-size-350-negative) - var(--dt-size-50-negative)); // -5.5
+  inset-block-end: calc(var(--dt-spacing-75-negative) - calc(var(--dt-spacing-1) / 2)); // -5.5
   border-block-start-color: var(--tooltip-color-background);
   border-block-end-width: 0;
 }
@@ -165,10 +165,10 @@ transform: translateY(var(--dt-size-500-negative)); // -16
 .d-tooltip__arrow-tippy--top-start,
 .d-tooltip__arrow--top-left,
 .d-tooltip__arrow--bottom-left {
-inset-inline-start: var(--dt-size-200-negative); // -2
+inset-inline-start: var(--dt-spacing-25-negative); // -2
 
 &::after {
-  inset-inline-start: var(--dt-size-500); // 16
+  inset-inline-start: var(--dt-spacing-200); // 16
 }
 }
 
@@ -180,7 +180,7 @@ inset-inline-start: var(--dt-size-200-negative); // -2
 .d-tooltip__arrow--bottom-center {
 &::after {
   inset-inline-start: 50%;
-  margin-inline-start: var(--dt-size-350-negative); // -6
+  margin-inline-start: var(--dt-spacing-75-negative); // -6
 }
 }
 
@@ -190,10 +190,10 @@ inset-inline-start: var(--dt-size-200-negative); // -2
 .d-tooltip__arrow-tippy--top-end,
 .d-tooltip__arrow--top-right,
 .d-tooltip__arrow--bottom-right {
-inset-inline-end: var(--dt-size-200-negative); // -2
+inset-inline-end: var(--dt-spacing-25-negative); // -2
 
 &::after {
-  inset-inline-end: var(--dt-size-500); // 16
+  inset-inline-end: var(--dt-spacing-200); // 16
 }
 }
 
@@ -205,11 +205,11 @@ inset-inline-end: var(--dt-size-200-negative); // -2
 .d-tooltip__arrow--right-top,
 .d-tooltip__arrow--right-center,
 .d-tooltip__arrow--right-bottom {
-inset-inline-end: calc(100% + var(--dt-size-450)); // 100% + 12
-transform: translateX(var(--dt-size-500-negative)); // -16
+inset-inline-end: calc(100% + var(--dt-spacing-150)); // 100% + 12
+transform: translateX(var(--dt-layout-25-negative)); // -16
 
 &::after {
-  inset-inline-end: calc(var(--dt-size-350-negative) - var(--dt-size-50-negative)); // -5.5
+  inset-inline-end: calc(var(--dt-spacing-75-negative) - calc(var(--dt-spacing-1) / 2)); // -5.5
   border-inline-end-width: 0;
   border-inline-start-color: var(--tooltip-color-background);
 }
@@ -223,11 +223,11 @@ transform: translateX(var(--dt-size-500-negative)); // -16
 .d-tooltip__arrow--left-top,
 .d-tooltip__arrow--left-center,
 .d-tooltip__arrow--left-bottom {
-inset-inline-start: calc(100% + var(--dt-size-450)); // 100% + 12
-transform: translateX(var(--dt-size-500)); // 16
+inset-inline-start: calc(100% + var(--dt-spacing-150)); // 100% + 12
+transform: translateX(var(--dt-layout-25)); // 16
 
 &::after {
-  inset-inline-start: calc(var(--dt-size-350-negative) - var(--dt-size-50-negative)); // -5.5
+  inset-inline-start: calc(var(--dt-spacing-75-negative) - calc(var(--dt-spacing-1) / 2)); // -5.5
   border-inline-end-color: var(--tooltip-color-background);
   border-inline-start-width: 0;
 }
@@ -239,10 +239,10 @@ transform: translateX(var(--dt-size-500)); // 16
 .d-tooltip__arrow-tippy--left-start,
 .d-tooltip__arrow--right-top,
 .d-tooltip__arrow--left-top {
-inset-block-start: var(--dt-size-100-negative); // -1
+inset-block-start: var(--dt-spacing-1-negative); // -1
 
 &::after {
-  inset-block-start: var(--dt-size-400); // 8
+  inset-block-start: var(--dt-spacing-100); // 8
 }
 }
 
@@ -254,7 +254,7 @@ inset-block-start: var(--dt-size-100-negative); // -1
 .d-tooltip__arrow--left-center {
 &::after {
   inset-block-start: 50%;
-  margin-block-start: var(--dt-size-350-negative); // -6
+  margin-block-start: var(--dt-spacing-75-negative); // -6
 }
 }
 
@@ -264,10 +264,10 @@ inset-block-start: var(--dt-size-100-negative); // -1
 .d-tooltip__arrow-tippy--left-end,
 .d-tooltip__arrow--right-bottom,
 .d-tooltip__arrow--left-bottom {
-inset-block-end: var(--dt-size-100-negative); // -1
+inset-block-end: var(--dt-spacing-1-negative); // -1
 
 &::after {
-  inset-block-end: var(--dt-size-400); // 8
+  inset-block-end: var(--dt-spacing-100); // 8
 }
 }
 }

package/lib/build/less/dialtone-reset.less

@@ -81,13 +81,13 @@ pre {
 
 a {
   background-color: transparent;
-  text-underline-offset: var(--dt-size-200);
+  text-underline-offset: var(--dt-spacing-25);
   text-decoration-thickness: var(--dt-size-border-100);
 }
 
 ins,
 u {
-  text-underline-offset: var(--dt-size-200);
+  text-underline-offset: var(--dt-spacing-25);
   text-decoration-thickness: var(--dt-size-border-100);
 }
 
@@ -100,7 +100,7 @@ abbr[title] {
   text-decoration: underline; /* 2 */
   text-decoration: underline dotted; /* 2 */
   border-block-end: none; /* 1 */
-  text-underline-offset: var(--dt-size-200);
+  text-underline-offset: var(--dt-spacing-25);
   text-decoration-thickness: var(--dt-size-border-100);
 }
 

package/lib/build/less/dialtone-transitions.less

@@ -49,19 +49,19 @@
 
 @keyframes shake {
   10%, 90% {
-    transform: translate3d(var(--dt-size-300-negative), 0, 0);
+    transform: translate3d(var(--dt-spacing-50-negative), 0, 0);
   }
 
   20%, 80% {
-    transform: translate3d(var(--dt-size-400), 0, 0);
+    transform: translate3d(var(--dt-spacing-100), 0, 0);
   }
 
   30%, 50%, 70% {
-    transform: translate3d(var(--dt-size-500-negative), 0, 0);
+    transform: translate3d(var(--dt-spacing-200-negative), 0, 0);
   }
 
   40%, 60% {
-    transform: translate3d(var(--dt-size-500), 0, 0);
+    transform: translate3d(var(--dt-spacing-200), 0, 0);
   }
 }
 

package/lib/build/less/dialtone.less

@@ -110,8 +110,8 @@
 @layer dialtone.utilities {
   [data-migrate-outline] {
     --outline-color: orangered;
-    --outline-size: var(--dt-size-200);
-    --outline-offset: calc(var(--outline-size) * -1);
+    --outline-size: var(--dt-spacing-25);
+    --outline-offset: var(--dt-spacing-25-negative);
 
     /* stylelint-disable-next-line meowtec/no-px */
     outline: var(--outline-size) solid var(--outline-color) !important;

package/lib/build/less/recipes/attachment_carousel.less

@@ -1,7 +1,7 @@
 @layer dialtone.components {
 .d-recipe-attachment-carousel {
   position: relative;
-  inline-size: var(--dt-size-1000);
+  inline-size: var(--dt-layout-800);
   max-block-size: 100px; /* stylelint-disable-line meowtec/no-px */
 }
 
@@ -18,12 +18,12 @@
 
 .d-recipe-attachment-carousel__arrow {
   position: absolute;
-  inset-block-start: var(--dt-size-30-percent);
+  inset-block-start: var(--dt-layout-30-percent);
   color: var(--dt-color-foreground-tertiary-inverted);
   background-color: var(--dt-color-surface-strong);
-  border: var(--dt-size-100) solid;
+  border: var(--dt-size-border-100) solid;
   border-color: var(--dt-color-border-moderate-inverted);
-  border-width: var(--dt-size-100);
+  border-width: var(--dt-size-border-100);
   opacity: 0;
 
   &:hover {
@@ -36,11 +36,11 @@
 }
 
 .d-recipe-attachment-carousel__arrow--left {
-  inset-inline-start: var(--dt-size-300);
+  inset-inline-start: var(--dt-spacing-50);
 }
 
 .d-recipe-attachment-carousel__arrow--right {
-  inset-inline-end: var(--dt-size-300);
+  inset-inline-end: var(--dt-spacing-50);
 }
 
 .d-recipe-attachment-carousel__image {
@@ -65,19 +65,19 @@
 }
 
 .d-recipe-attachment-carousel__image-viewer {
-  inline-size: var(--dt-size-700);
-  block-size: var(--dt-size-700);
+  inline-size: var(--dt-layout-100);
+  block-size: var(--dt-layout-100);
   object-fit: cover;
-  border: var(--dt-size-100) solid;
+  border: var(--dt-size-border-100) solid;
   border-color: var(--dt-color-border-subtle);
-  border-width: var(--dt-size-350);
+  border-width: var(--dt-spacing-75);
   border-radius: var(--br4);
 }
 
 .d-recipe-attachment-carousel__image-top-right {
   position: absolute;
-  inset-block-start: var(--dt-size-100);
-  inset-inline-end: var(--dt-size-100);
+  inset-block-start: var(--dt-spacing-1);
+  inset-inline-end: var(--dt-spacing-1);
 }
 
 .d-recipe-attachment-carousel__image-progress-bar {
@@ -85,7 +85,7 @@
   inset-block-start: inherit;
   inset-inline-end: inherit;
   display: flex;
-  padding: var(--dt-size-300);
+  padding: var(--dt-spacing-50);
   background-color: var(--dt-color-surface-moderate);
   border-radius: var(--dt-size-radius-circle);
 }

package/lib/build/less/recipes/callbar_button.less

@@ -12,7 +12,7 @@
 //  ----------------------------------------------------------------------------
 @layer dialtone.components {
 .d-recipe-callbar-button {
-  padding-inline: var(--dt-size-0);
+  padding-inline: var(--dt-spacing-0);
   color: var(--dt-color-foreground-primary);
 
   &:not(.d-recipe-callbar-button--circle) {

package/lib/build/less/recipes/callbar_button_with_dropdown.less

@@ -1,18 +1,18 @@
 @layer dialtone.components {
 .dt-recipe--callbar-button-with-dropdown--arrow {
-  inline-size: var(--dt-size-500);
-  block-size: var(--dt-size-500);
-  margin-block-start: var(--dt-size-450);
-  margin-inline-start: calc(var(--dt-size-300-negative) * 5);
-  padding: var(--dt-size-400);
-  border-radius: var(--dt-size-300);
+  inline-size: var(--dt-layout-25);
+  block-size: var(--dt-layout-25);
+  margin-block-start: var(--dt-spacing-150);
+  margin-inline-start: calc(var(--dt-spacing-50-negative) * 5);
+  padding: var(--dt-spacing-100);
+  border-radius: var(--dt-size-radius-300);
 
   &.d-btn--active {
     background: var(--dt-color-surface-moderate-opaque);
   }
 
   &--large {
-    margin-inline-start: var(--dt-size-550-negative);
+    margin-inline-start: var(--dt-spacing-300-negative);
   }
 
   &__icon {

package/lib/build/less/recipes/callbar_button_with_popover.less

@@ -5,12 +5,12 @@
 }
 
 .d-recipe-callbar-button-with-popover__arrow {
-  inline-size: var(--dt-size-500);
-  block-size: var(--dt-size-500);
-  margin-block-start: var(--dt-size-450);
-  margin-inline-start: calc(var(--dt-size-300-negative) * 5);
-  padding: var(--dt-size-400);
-  border-radius: var(--dt-size-300);
+  inline-size: var(--dt-layout-25);
+  block-size: var(--dt-layout-25);
+  margin-block-start: var(--dt-spacing-150);
+  margin-inline-start: calc(var(--dt-spacing-50-negative) * 5);
+  padding: var(--dt-spacing-100);
+  border-radius: var(--dt-size-radius-300);
 
   .d-btn--active {
     background: var(--dt-color-surface-moderate-opaque);
@@ -18,7 +18,7 @@
 }
 
 .d-recipe-callbar-button-with-popover__arrow--large {
-  margin-inline-start: var(--dt-size-550-negative);
+  margin-inline-start: var(--dt-spacing-300-negative);
 }
 
 .d-recipe-callbar-button-with-popover__arrow-icon {
@@ -38,7 +38,7 @@
   .d-popover__header__content {
     display: flex;
     align-items: center;
-    padding-inline: var(--dt-size-450) var(--dt-size-450);
+    padding-inline: var(--dt-spacing-150) var(--dt-spacing-150);
     font-weight: normal;
   }
 }

package/lib/build/less/recipes/callbox.less

@@ -40,14 +40,14 @@
 }
 
 .d-recipe-callbox__avatar {
-  margin-inline-start: var(--dt-size-200);
+  margin-inline-start: var(--dt-spacing-25);
 }
 
 .d-recipe-callbox__main-content-top {
   display: flex;
-  gap: var(--dt-size-350);
+  gap: var(--dt-spacing-75);
   align-items: center;
-  padding: var(--dt-size-400) var(--dt-size-350) var(--dt-size-350) var(--dt-size-400);
+  padding: var(--dt-spacing-100) var(--dt-spacing-75) var(--dt-spacing-75) var(--dt-spacing-100);
 }
 
 .d-recipe-callbox__main-content-bottom {
@@ -58,9 +58,9 @@
   display: flex;
   flex: 1 0 auto;
   flex-direction: column;
-  gap: var(--dt-size-300);
+  gap: var(--dt-spacing-50);
   min-inline-size: 0;
-  padding-inline-start: var(--dt-size-200);
+  padding-inline-start: var(--dt-spacing-25);
 }
 
 .d-recipe-callbox__content-title {
@@ -99,7 +99,7 @@
 
 .d-recipe-callbox--clickable {
   .d-recipe-callbox__content-title {
-    border-radius: var(--dt-size-100);
+    border-radius: var(--dt-size-radius-100);
     cursor: pointer;
     user-select: none;