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

package/lib/build/js/dialtone_migration_helper/tests/space-to-spacing-test-examples.vue

@@ -0,0 +1,193 @@
+<template>
+  <!--
+    TEST FILE FOR SPACE-TO-SPACING MIGRATION
+    Tests migration of --dt-space-* tokens to --dt-spacing-* (8px base unit scale).
+    Run: npx dialtone-migration-helper --cwd . and select "space-to-spacing"
+  -->
+
+  <!-- ============================================ -->
+  <!-- VUE :style BINDINGS — SPACING CONTEXT        -->
+  <!-- ============================================ -->
+
+  <!-- Mapped: small stops -->
+  <p :style="{ padding: 'var(--dt-space-0)' }">space-0 → spacing-0</p>
+  <p :style="{ margin: 'var(--dt-space-100)' }">space-100 → spacing-1</p>
+  <p :style="{ padding: 'var(--dt-space-200)' }">space-200 → spacing-25</p>
+  <p :style="{ gap: 'var(--dt-space-300)' }">space-300 → spacing-50</p>
+  <p :style="{ padding: 'var(--dt-space-350)' }">space-350 → spacing-75</p>
+  <p :style="{ margin: 'var(--dt-space-400)' }">space-400 → spacing-100</p>
+
+  <!-- Mapped: mid stops -->
+  <p :style="{ padding: 'var(--dt-space-450)' }">space-450 → spacing-150</p>
+  <p :style="{ gap: 'var(--dt-space-500)' }">space-500 → spacing-200</p>
+  <p :style="{ padding: 'var(--dt-space-525)' }">space-525 → spacing-250</p>
+  <p :style="{ margin: 'var(--dt-space-550)' }">space-550 → spacing-300</p>
+  <p :style="{ padding: 'var(--dt-space-600)' }">space-600 → spacing-400</p>
+  <p :style="{ gap: 'var(--dt-space-625)' }">space-625 → spacing-525</p>
+  <p :style="{ padding: 'var(--dt-space-650)' }">space-650 → spacing-600</p>
+  <p :style="{ margin: 'var(--dt-space-700)' }">space-700 → spacing-800</p>
+
+  <!-- Skip: stops with no --dt-spacing-* equivalent (should NOT be modified) -->
+  <p :style="{ padding: 'var(--dt-space-720)' }">space-720 (72px) — no equivalent, left unchanged</p>
+  <p :style="{ gap: 'var(--dt-space-730)' }">space-730 (84px) — no equivalent, left unchanged</p>
+  <p :style="{ margin: 'var(--dt-space-750)' }">space-750 (96px) — use --dt-layout-150 instead</p>
+
+  <!-- Skip: already-migrated tokens (should NOT be modified) -->
+  <p :style="{ padding: 'var(--dt-spacing-100)' }">already spacing-100</p>
+  <p :style="{ margin: 'var(--dt-spacing-300)' }">already spacing-300</p>
+</template>
+
+<style lang="less">
+/* ============================================ */
+/* SMALL STOPS (0–350)                          */
+/* ============================================ */
+
+/* space-0 → spacing-0 */
+.test-space-0 {
+  padding: var(--dt-space-0);
+}
+
+/* space-100 → spacing-1 */
+.test-space-100 {
+  margin-block-start: var(--dt-space-100);
+}
+
+/* space-200 → spacing-25 */
+.test-space-200 {
+  gap: var(--dt-space-200);
+}
+
+/* space-300 → spacing-50 */
+.test-space-300 {
+  padding-inline: var(--dt-space-300);
+}
+
+/* space-350 → spacing-75 */
+.test-space-350 {
+  column-gap: var(--dt-space-350);
+}
+
+/* ============================================ */
+/* BASE AND MID STOPS (400–700)                 */
+/* ============================================ */
+
+/* space-400 → spacing-100 (base unit) */
+.test-space-400 {
+  padding: var(--dt-space-400);
+  margin: var(--dt-space-400);
+  gap: var(--dt-space-400);
+}
+
+/* space-450 → spacing-150 */
+.test-space-450 {
+  padding-block: var(--dt-space-450);
+}
+
+/* space-500 → spacing-200 */
+.test-space-500 {
+  inset: var(--dt-space-500);
+}
+
+/* space-525 → spacing-250 */
+.test-space-525 {
+  row-gap: var(--dt-space-525);
+}
+
+/* space-550 → spacing-300 */
+.test-space-550 {
+  padding-inline-start: var(--dt-space-550);
+}
+
+/* space-600 → spacing-400 */
+.test-space-600 {
+  margin-inline: var(--dt-space-600);
+}
+
+/* space-625 → spacing-525 */
+.test-space-625 {
+  padding: var(--dt-space-625);
+}
+
+/* space-650 → spacing-600 */
+.test-space-650 {
+  inset-block: var(--dt-space-650);
+}
+
+/* space-700 → spacing-800 */
+.test-space-700 {
+  padding: var(--dt-space-700);
+  gap: var(--dt-space-700);
+}
+
+/* ============================================ */
+/* SHORTHAND WITH MULTIPLE TOKENS               */
+/* ============================================ */
+
+/* Multiple space tokens in one declaration */
+.test-shorthand-multi {
+  padding: var(--dt-space-400) var(--dt-space-550);
+  margin: var(--dt-space-300) var(--dt-space-400) var(--dt-space-550) var(--dt-space-600);
+}
+
+/* ============================================ */
+/* NEGATIVE VARIANTS                            */
+/* ============================================ */
+
+/* space-400-negative → spacing-100-negative */
+.test-negative-400 {
+  margin-block-start: var(--dt-space-400-negative);
+}
+
+/* space-550-negative → spacing-300-negative */
+.test-negative-550 {
+  margin-inline-start: var(--dt-space-550-negative);
+}
+
+/* space-700-negative → spacing-800-negative */
+.test-negative-700 {
+  margin: var(--dt-space-700-negative);
+}
+
+/* ============================================ */
+/* PERCENT VARIANTS                             */
+/* ============================================ */
+
+/* space-400-percent → spacing-100-percent */
+.test-percent-400 {
+  padding: var(--dt-space-400-percent);
+}
+
+/* space-600-percent → spacing-400-percent */
+.test-percent-600 {
+  gap: var(--dt-space-600-percent);
+}
+
+/* ============================================ */
+/* SKIP CASES (should NOT be modified)          */
+/* ============================================ */
+
+/* Stops with no --dt-spacing-* equivalent — leave unchanged */
+.test-skip-720 {
+  padding: var(--dt-space-720); /* 72px — no spacing equivalent */
+}
+
+.test-skip-730 {
+  gap: var(--dt-space-730); /* 84px — no spacing equivalent */
+}
+
+.test-skip-750 {
+  padding: var(--dt-space-750); /* 96px+ — use --dt-layout-150 instead */
+}
+
+/* Already-migrated spacing tokens (should NOT be touched) */
+.test-skip-already-spacing {
+  padding: var(--dt-spacing-100);
+  margin: var(--dt-spacing-300);
+  gap: var(--dt-spacing-400);
+}
+
+/* Custom property definition — WILL be replaced (regex is context-free) */
+.test-skip-custom-prop {
+  --my-spacing: var(--dt-space-400); /* → var(--dt-spacing-100) */
+}
+</style>

package/lib/build/less/components/avatar.less

@@ -23,8 +23,8 @@
   --avatar-color-background: var(--dt-avatar-color-background-000);
   --avatar-color-text: var(--dt-color-neutral-black);
   --avatar-size-shape: var(--dt-spacing-400);
-  --avatar-size-image: var(--dt-size-100-percent);
-  --avatar-canvas-size: var(--dt-size-100-percent);
+  --avatar-size-image: var(--dt-layout-100-percent);
+  --avatar-canvas-size: var(--dt-layout-100-percent);
   --avatar-size-text: var(--dt-font-size-200);
   --avatar-border-radius: calc(var(--avatar-size-shape) * 0.125);
   --avatar-presence-shape: calc(var(--avatar-size-shape) * 0.375);
@@ -322,19 +322,19 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    inline-size: var(--dt-size-100-percent);
-    block-size: var(--dt-size-100-percent);
+    inline-size: var(--dt-layout-100-percent);
+    block-size: var(--dt-layout-100-percent);
     background-color: var(--dt-color-surface-contrast-opaque);
     border-radius: var(--avatar-border-radius);
     opacity: var(--dt-opacity-900);
 
     &-icon {
-      inline-size: var(--dt-size-100-percent);
+      inline-size: var(--dt-layout-100-percent);
       color: var(--dt-color-foreground-primary-inverted);
     }
 
     &-text {
-      inline-size: var(--dt-size-100-percent);
+      inline-size: var(--dt-layout-100-percent);
       color: var(--dt-color-foreground-primary-inverted);
       font-weight: var(--dt-font-weight-bold);
       font-size: var(--dt-font-size-200);
@@ -430,20 +430,9 @@
         position: absolute;
         background-color: var(--dt-color-neutral-transparent);
         border: var(--dt-size-border-100) solid var(--avatar-color-border);
-        border-radius: var(--dt-size-radius-circle);
+        border-radius: var(--avatar-border-radius);
         content: "";
-        inset: calc(var(--dt-size-100) * -1);
-        mask: radial-gradient(
-          circle calc(var(--avatar-presence-mask-size) / 2) at
-            calc(
-              var(--dt-size-100-percent) - var(--avatar-presence-mask-offset-x) - var(--dt-size-100)
-            )
-            calc(
-              var(--dt-size-100-percent) - var(--avatar-presence-mask-offset-y) - var(--dt-size-100)
-            ),
-          var(--dt-color-neutral-transparent) 92%, // less than 99% to smooth the edges
-          var(--dt-color-neutral-white) var(--dt-size-100-percent)
-        );
+        inset: var(--dt-spacing-1-negative);
       }
     }
 

package/lib/build/less/components/badge.less

@@ -24,15 +24,15 @@
   --badge-color-text: var(--dt-badge-color-foreground-default);
   --badge-color-background: var(--dt-badge-color-background-default);
   --badge-color-outline: var(--dt-badge-color-border-default);
-  --badge-radius: var(--dt-size-300);
-  --badge-line-height: calc(var(--dt-size-500) + var(--dt-size-200));
+  --badge-radius: var(--dt-size-radius-300);
+  --badge-line-height: calc(var(--dt-spacing-200) + var(--dt-spacing-25));
   --badge-font-size: var(--dt-font-size-100);
   --badge-font-weight: var(--dt-font-weight-semi-bold);
-  --badge-gap: var(--dt-size-200);
-  --badge-letter-spacing: var(--dt-size-50);
-  --badge-padding-y: var(--dt-size-100);
-  --badge-padding-x: var(--dt-size-300);
-  --badge-label-padding-x: var(--dt-size-200);
+  --badge-gap: var(--dt-spacing-25);
+  --badge-letter-spacing: calc(var(--dt-spacing-1) / 2);
+  --badge-padding-y: var(--dt-spacing-1);
+  --badge-padding-x: var(--dt-spacing-50);
+  --badge-label-padding-x: var(--dt-spacing-25);
   --badge-text-case: none;
   --badge-decorative-color: var(--dt-color-black-900);
 
@@ -43,7 +43,7 @@
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  min-inline-size: var(--dt-size-550);
+  min-inline-size: calc(var(--dt-layout-25) * 1.5);
   padding: var(--badge-padding-y) var(--badge-padding-x);
   color: var(--badge-color-text);
   font-weight: var(--badge-font-weight);
@@ -59,11 +59,11 @@
   //  --------------------------------------------------------------------------
   &--count {
     --badge-radius: var(--dt-size-radius-pill);
-    --badge-padding-x: calc(var(--dt-size-400) - var(--dt-size-100));
-    --badge-padding-y: var(--dt-size-300);
-    --badge-line-height: var(--dt-size-500);
-    --badge-label-padding-x: var(--dt-size-0);
-    --badge-gap: var(--dt-size-300);
+    --badge-padding-x: calc(var(--dt-spacing-100) - var(--dt-spacing-1));
+    --badge-padding-y: var(--dt-spacing-50);
+    --badge-line-height: var(--dt-layout-25);
+    --badge-label-padding-x: var(--dt-spacing-0);
+    --badge-gap: var(--dt-spacing-50);
   }
 
   //  TYPE
@@ -99,7 +99,7 @@
     --badge-color-text: var(--dt-badge-color-foreground-ai);
     --badge-color-background: var(--dt-color-brand-magenta); // fallback to gradient
 
-    text-shadow: var(--dt-size-50) var(--dt-size-50) 0 oklch(from var(--dt-color-neutral-black) l c h / 0.6);
+    text-shadow: calc(var(--dt-spacing-1) / 2) calc(var(--dt-spacing-1) / 2) 0 oklch(from var(--dt-color-neutral-black) l c h / 0.6);
     background-image: var(--dt-badge-color-background-ai);
   }
 
@@ -135,12 +135,14 @@
   //  SLOTS
   //  --------------------------------------------------------------------------
   &__decorative {
+    --badge-size: calc(var(--dt-layout-25) / 2);
+
     display: inline-flex;
-    inline-size: var(--dt-size-400);
-    block-size: var(--dt-size-400);
+    inline-size: var(--badge-size);
+    block-size: var(--badge-size);
     background-color: var(--badge-decorative-color);
-    border-radius: var(--dt-size-200);
-    margin-inline-start: var(--dt-size-200);
+    border-radius: var(--dt-size-radius-200);
+    margin-inline-start: var(--dt-spacing-25);
   }
 
   &__label {
@@ -155,11 +157,11 @@
   }
 
   &__icon-left {
-    padding-inline-start: var(--dt-size-100);
+    padding-inline-start: var(--dt-spacing-1);
   }
 
   &__icon-right {
-    padding-inline-end: var(--dt-size-100);
+    padding-inline-end: var(--dt-spacing-1);
   }
 }
 }

package/lib/build/less/components/banner.less

@@ -16,8 +16,8 @@
     //  ------------------------------------------------------------------------
     --banner-color-border: var(--dt-color-border-default);
     --banner-line-height: var(--dt-font-line-height-200);
-    --banner-dialog-padding-y: var(--dt-size-400);
-    --banner-dialog-padding-x: var(--dt-size-500);
+    --banner-dialog-padding-y: var(--dt-spacing-100);
+    --banner-dialog-padding-x: var(--dt-spacing-200);
 
     position: fixed;
     inset-block-start: 0;
@@ -54,17 +54,17 @@
     display: flex;
     align-items: center;
     inline-size: 100%;
-    min-block-size: calc(var(--dt-size-650) + var(--dt-size-200));
+    min-block-size: calc(var(--dt-layout-75) + var(--dt-spacing-25));
     margin: 0 auto;
     padding: var(--banner-dialog-padding-y) var(--banner-dialog-padding-x);
 
     .d-notice__icon {
-        margin-block-start: var(--dt-size-0);
+        margin-block-start: var(--dt-spacing-0);
     }
 
     .d-notice__content {
         flex-direction: row;
-        gap: var(--dt-size-350);
+        gap: var(--dt-spacing-75);
         align-items: baseline;
     }
 

package/lib/build/less/components/breadcrumbs.less

@@ -49,19 +49,19 @@
         font-size: var(--breadcrumbs-font-size);
         line-height: var(--breadcrumbs-line-height);
         list-style: none;
-        margin-inline: var(--dt-size-400) 0;
+        margin-inline: var(--dt-spacing-100) 0;
         margin-block: 0;
 
         //  Provide a forward slash with each element except when it's the last one.
         &:not(:last-of-type) {
-            margin-inline-end: var(--dt-size-450);
+            margin-inline-end: var(--dt-spacing-150);
 
             &::before {
                 position: absolute;
                 color: var(--breadcrumbs-color-separator);
                 content: '/';
-                inset-inline-end: var(--dt-size-450-negative);
-                margin-block-start: var(--dt-size-100-negative);
+                inset-inline-end: var(--dt-spacing-150-negative);
+                margin-block-start: var(--dt-spacing-1-negative);
             }
         }
 

package/lib/build/less/components/button.less

@@ -27,43 +27,43 @@
   --button-border-width: var(--dt-size-border-100);
   --button-typography: var(--dt-typography-button-md);
   --button-padding-y-xs: calc(
-    calc(var(--dt-size-350) - var(--dt-size-100)) - var(--button-border-width)
+    calc(var(--dt-spacing-75) - var(--dt-spacing-1)) - var(--button-border-width)
   ); // ((8 - 1) - border-width)
 
   --button-padding-x-xs: calc(
-    var(--dt-size-400) - var(--button-border-width)
+    var(--dt-spacing-100) - var(--button-border-width)
   ); // 8 minus border-width
 
   --button-padding-y-sm: calc(
-    var(--dt-size-350) - var(--button-border-width)
+    var(--dt-spacing-75) - var(--button-border-width)
   ); // 8 minus border-width
 
   --button-padding-x-sm: calc(
-    var(--dt-size-450) - var(--button-border-width)
+    var(--dt-spacing-150) - var(--button-border-width)
   ); // 12 minus border-width
 
   --button-padding-y-md: calc(
-    var(--dt-size-400) - var(--button-border-width)
+    var(--dt-spacing-100) - var(--button-border-width)
   ); // 8 minus border-width
 
   --button-padding-x-md: calc(
-    var(--dt-size-450) - var(--button-border-width)
+    var(--dt-spacing-150) - var(--button-border-width)
   ); // 12 minus border-width
 
   --button-padding-y-lg: calc(
-    (var(--dt-size-400) + var(--dt-size-200)) - var(--button-border-width)
+    (var(--dt-spacing-100) + var(--dt-spacing-25)) - var(--button-border-width)
   ); // 10 minus border-width
 
   --button-padding-x-lg: calc(
-    var(--dt-size-500) - var(--button-border-width)
+    var(--dt-spacing-200) - var(--button-border-width)
   ); // 16 minus border-width
 
   --button-padding-y-xl: calc(
-    var(--dt-size-450) - var(--button-border-width)
+    var(--dt-spacing-150) - var(--button-border-width)
   ); // 12 minus border-width
 
   --button-padding-x-xl: calc(
-    var(--dt-size-500) - var(--button-border-width)
+    var(--dt-spacing-200) - var(--button-border-width)
   ); // 16 minus border-width
 
   --button-padding-y: var(--button-padding-y-md);
@@ -187,13 +187,13 @@
   }
 
   &.d-btn--lg {
-    --button-padding-x: calc(var(--button-padding-y-lg) + var(--dt-size-100));
-    --button-padding-y: calc(var(--button-padding-y-lg) + var(--dt-size-100));
+    --button-padding-x: calc(var(--button-padding-y-lg) + var(--dt-spacing-1));
+    --button-padding-y: calc(var(--button-padding-y-lg) + var(--dt-spacing-1));
   }
 
   &.d-btn--xl {
-    --button-padding-x: calc(var(--button-padding-y-xl) + var(--dt-size-300));
-    --button-padding-y: calc(var(--button-padding-y-xl) + var(--dt-size-300));
+    --button-padding-x: calc(var(--button-padding-y-xl) + var(--dt-spacing-50));
+    --button-padding-y: calc(var(--button-padding-y-xl) + var(--dt-spacing-50));
   }
 }
 
@@ -287,13 +287,13 @@
 
 .d-btn__leading {
   order: -1;
-  margin-inline: calc(-1 * var(--button-padding-x)) var(--dt-size-200);
+  margin-inline: calc(-1 * var(--button-padding-x)) var(--dt-spacing-25);
   border-start-start-radius: calc(var(--button-border-radius) - 1px);
   border-end-start-radius: calc(var(--button-border-radius) - 1px);
 }
 
 .d-btn__trailing {
-  margin-inline: var(--dt-size-200) calc(-1 * var(--button-padding-x));
+  margin-inline: var(--dt-spacing-25) calc(-1 * var(--button-padding-x));
   border-start-end-radius: calc(var(--button-border-radius) - 1px);
   border-end-end-radius: calc(var(--button-border-radius) - 1px);
   order: 2;
@@ -337,11 +337,11 @@
 }
 
 .d-btn__icon--left:not(:only-child) {
-  margin-inline-start: var(--dt-size-200-negative);
+  margin-inline-start: var(--dt-spacing-25-negative);
 }
 
 .d-btn__icon--right:not(:only-child) {
-  margin-inline-end: var(--dt-size-200-negative);
+  margin-inline-end: var(--dt-spacing-25-negative);
 }
 
 //  ============================================================================
@@ -609,13 +609,13 @@
   }
 
   &.d-btn--lg {
-    --button-padding-x: calc(var(--button-padding-y-lg) + var(--dt-size-100));
-    --button-padding-y: calc(var(--button-padding-y-lg) + var(--dt-size-100));
+    --button-padding-x: calc(var(--button-padding-y-lg) + var(--dt-spacing-1));
+    --button-padding-y: calc(var(--button-padding-y-lg) + var(--dt-spacing-1));
   }
 
   &.d-btn--xl {
-    --button-padding-x: calc(var(--button-padding-y-xl) + var(--dt-size-300));
-    --button-padding-y: calc(var(--button-padding-y-xl) + var(--dt-size-300));
+    --button-padding-x: calc(var(--button-padding-y-xl) + var(--dt-spacing-50));
+    --button-padding-y: calc(var(--button-padding-y-xl) + var(--dt-spacing-50));
   }
 }
 
@@ -635,9 +635,9 @@
   //  Pseudo-element spinner (fallback for raw HTML consumers)
   &::before {
     position: absolute;
-    inline-size: var(--dt-size-500);
-    block-size: var(--dt-size-500);
-    border: var(--dt-size-200) solid currentColor;
+    inline-size: var(--dt-layout-25);
+    block-size: var(--dt-layout-25);
+    border: var(--dt-size-border-200) solid currentColor;
     border-inline-start-color: transparent !important;
     border-radius: var(--dt-size-radius-circle);
     animation: d-loading-circle 900ms infinite linear;
@@ -671,7 +671,7 @@
 
   &:focus-visible {
     box-shadow:
-      0 0 0 var(--dt-size-100) var(--dt-color-neutral-white),
+      0 0 0 var(--dt-spacing-1) var(--dt-color-neutral-white),
       0 0 0 0.25em oklch(from var(--brand-color) l c h / 0.9);
   }
 
@@ -684,7 +684,7 @@
     justify-content: center;
     inline-size: 2em;
     block-size: 2em;
-    margin-inline: var(--dt-size-300-negative) var(--dt-size-400);
+    margin-inline: var(--dt-spacing-50-negative) var(--dt-spacing-100);
     background-color: var(--dt-color-neutral-white);
     border-radius: var(--dt-size-radius-200);
   }
@@ -714,7 +714,7 @@
 
 .d-split-btn {
   display: inline-flex;
-  gap: var(--dt-size-0);
+  gap: var(--dt-spacing-0);
   align-items: stretch;
   justify-content: center;
 
@@ -739,7 +739,7 @@
   &__alpha,
   &__start {
     flex-grow: 1;
-    padding-inline-end: calc(var(--button-padding-x) + var(--dt-size-200));
+    padding-inline-end: calc(var(--button-padding-x) + var(--dt-spacing-25));
 
     &:not(.d-btn--outlined) {
       border-inline-end: 0;
@@ -761,8 +761,8 @@
     &::before {
       position: absolute;
       inset-block: var(--button-border-radius);
-      inset-inline-start: var(--dt-size-100-negative);
-      inline-size: var(--dt-size-100);
+      inset-inline-start: var(--dt-spacing-1-negative);
+      inline-size: var(--dt-spacing-1);
       background-color: var(
         --button-color-text
       ); // use text color for divider line
@@ -799,11 +799,11 @@
     &.d-btn:disabled::before,
     &.d-btn--outlined::before,
     &.d-btn--primary::before {
-      inset-block: var(--dt-size-100-negative);
+      inset-block: var(--dt-spacing-1-negative);
     }
 
     &.d-btn--outlined::before {
-      inset-block: var(--dt-size-50-negative);
+      inset-block: calc(var(--dt-spacing-1-negative) / 2);
     }
 
     &:not(.d-btn--outlined) {
@@ -813,7 +813,7 @@
     &:not(.d-btn--outlined, .d-btn--primary) > * {
       // yes, I'm pushing a half-pixel over just for this variant
       // to ensure icon is centered
-      transform: translateX(var(--dt-size-50));
+      transform: translateX(var(--dt-spacing-1));
     }
 
     &:disabled:not(.d-btn--outlined),
@@ -829,27 +829,27 @@
   // adjust x-padding for icon-only button at each size
   &__omega--xs,
   &__end--xs {
-    &.d-btn--icon-only { --button-padding-x: var(--dt-size-300); }
+    &.d-btn--icon-only { --button-padding-x: var(--dt-spacing-50); }
   }
 
   &__omega--sm,
   &__end--sm {
-    &.d-btn--icon-only { --button-padding-x: var(--dt-size-300); }
+    &.d-btn--icon-only { --button-padding-x: var(--dt-spacing-50); }
   }
 
   &__omega--md,
   &__end--md {
-    &.d-btn--icon-only { --button-padding-x: var(--dt-size-350); }
+    &.d-btn--icon-only { --button-padding-x: var(--dt-spacing-75); }
   }
 
   &__omega--lg,
   &__end--lg {
-    &.d-btn--icon-only { --button-padding-x: var(--dt-size-400); }
+    &.d-btn--icon-only { --button-padding-x: var(--dt-spacing-100); }
   }
 
   &__omega--xl,
   &__end--xl {
-    &.d-btn--icon-only { --button-padding-x: var(--dt-size-450); }
+    &.d-btn--icon-only { --button-padding-x: var(--dt-spacing-150); }
   }
 }
 

package/lib/build/less/components/card.less

@@ -39,13 +39,13 @@
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  padding: var(--dt-size-500) var(--dt-size-500) 0;
+  padding: var(--dt-spacing-200) var(--dt-spacing-200) 0;
 }
 
 //  $$  CONTENT
 //  ----------------------------------------------------------------------------
 .d-card__content {
-  padding: var(--dt-size-500);
+  padding: var(--dt-spacing-200);
   overflow-block: auto;
 }
 
@@ -53,8 +53,8 @@
 //  ----------------------------------------------------------------------------
 .d-card__footer {
   display: flex;
-  gap: var(--dt-size-400);
+  gap: var(--dt-spacing-100);
   align-items: center;
-  padding: 0 var(--dt-size-500) var(--dt-size-500);
+  padding: 0 var(--dt-spacing-200) var(--dt-spacing-200);
 }
 }