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

package/lib/build/js/dialtone_migration_helper/tests/size-to-layout-test-examples.vue

@@ -0,0 +1,275 @@
+<template>
+  <!--
+    TEST FILE FOR SIZE-TO-LAYOUT MIGRATION
+    Tests context-aware migration of --dt-size-* tokens to either:
+      --dt-spacing-* (spacing properties: padding, margin, gap, inset)
+      --dt-layout-*  (layout properties: width, height, min/max, flex-basis)
+    Tokens exceeding the layout scale (>1024px) become raw rem + TODO comment.
+    Run: node packages/dialtone-css/lib/dist/js/dialtone_migration_helper/index.mjs --cwd .
+    then select "size-to-layout"
+  -->
+
+  <!-- ============================================ -->
+  <!-- VUE :style — SPACING CONTEXT                 -->
+  <!-- (should route to --dt-spacing-*)             -->
+  <!-- ============================================ -->
+
+  <p :style="{ padding: 'var(--dt-size-400)' }">size-400 on padding → spacing-100</p>
+  <p :style="{ margin: 'var(--dt-size-500)' }">size-500 on margin → spacing-200</p>
+  <p :style="{ gap: 'var(--dt-size-550)' }">size-550 on gap → spacing-300</p>
+
+  <!-- ============================================ -->
+  <!-- VUE :style — LAYOUT CONTEXT                  -->
+  <!-- (should route to --dt-layout-*)              -->
+  <!-- ============================================ -->
+
+  <div :style="{ width: 'var(--dt-size-700)' }">size-700 on width → layout-100</div>
+  <div :style="{ height: 'var(--dt-size-800)' }">size-800 on height → layout-200</div>
+  <div :style="{ maxWidth: 'var(--dt-size-1000)' }">size-1000 on max-width → layout-800</div>
+
+  <!-- Skip: already-migrated tokens -->
+  <div :style="{ width: 'var(--dt-layout-100)' }">already layout-100</div>
+  <p :style="{ padding: 'var(--dt-spacing-100)' }">already spacing-100</p>
+</template>
+
+<style lang="less">
+/* ============================================ */
+/* SPACING CONTEXT → --dt-spacing-*             */
+/* padding, margin, gap, inset and variants     */
+/* ============================================ */
+
+/* padding: all mapped stops */
+.test-padding-exact {
+  padding: var(--dt-size-0);          /* → spacing-0   (0px) */
+  padding: var(--dt-size-100);        /* → spacing-1   (1px) */
+  padding: var(--dt-size-200);        /* → spacing-25  (2px) */
+  padding: var(--dt-size-300);        /* → spacing-50  (4px) */
+  padding: var(--dt-size-350);        /* → spacing-75  (6px) */
+  padding: var(--dt-size-400);        /* → spacing-100 (8px) */
+  padding: var(--dt-size-450);        /* → spacing-150 (12px) */
+  padding: var(--dt-size-500);        /* → spacing-200 (16px) */
+  padding: var(--dt-size-525);        /* → spacing-250 (20px) */
+  padding: var(--dt-size-550);        /* → spacing-300 (24px) */
+  padding: var(--dt-size-600);        /* → spacing-400 (32px) */
+  padding: var(--dt-size-625);        /* → spacing-525 (42px) */
+  padding: var(--dt-size-650);        /* → spacing-600 (48px) */
+  padding: var(--dt-size-700);        /* → spacing-800 (64px) */
+}
+
+/* padding directional */
+.test-padding-directional {
+  padding-block-start: var(--dt-size-400);
+  padding-inline: var(--dt-size-550);
+  padding-block-start: var(--dt-size-300);
+  padding-inline-end: var(--dt-size-400);
+}
+
+/* margin */
+.test-margin {
+  margin: var(--dt-size-400);
+  margin-block-start: var(--dt-size-550);
+  margin-inline: var(--dt-size-600);
+  margin-block-end: var(--dt-size-300);
+}
+
+/* gap, row-gap, column-gap */
+.test-gap {
+  gap: var(--dt-size-400);
+  row-gap: var(--dt-size-550);
+  column-gap: var(--dt-size-300);
+}
+
+/* inset */
+.test-inset {
+  inset: var(--dt-size-400);
+  inset-block: var(--dt-size-300);
+  inset-inline-start: var(--dt-size-550);
+}
+
+/* shorthand with multiple size tokens */
+.test-padding-multi {
+  padding: var(--dt-size-400) var(--dt-size-550);
+  margin: var(--dt-size-300) var(--dt-size-400) var(--dt-size-550) var(--dt-size-600);
+}
+
+/* ============================================ */
+/* LAYOUT CONTEXT → --dt-layout-*               */
+/* width, height, min/max, flex-basis, logical  */
+/* ============================================ */
+
+/* width: exact matches */
+.test-width-exact {
+  inline-size: var(--dt-size-500);    /* → layout-25   (16px) */
+  inline-size: var(--dt-size-600);    /* → layout-50   (32px) */
+  inline-size: var(--dt-size-650);    /* → layout-75   (48px) */
+  inline-size: var(--dt-size-700);    /* → layout-100  (64px) */
+  inline-size: var(--dt-size-750);    /* → layout-150  (96px) */
+  inline-size: var(--dt-size-800);    /* → layout-200  (128px) */
+  inline-size: var(--dt-size-850);    /* → layout-300  (192px) */
+  inline-size: var(--dt-size-900);    /* → layout-400  (256px) */
+  inline-size: var(--dt-size-950);    /* → layout-600  (384px) */
+  inline-size: var(--dt-size-1000);   /* → layout-800  (512px) */
+  inline-size: var(--dt-size-1050);   /* → layout-1200 (768px) */
+  inline-size: var(--dt-size-1100);   /* → layout-1600 (1024px) */
+}
+
+/* height */
+.test-height {
+  block-size: var(--dt-size-700);
+  min-block-size: var(--dt-size-800);
+  max-block-size: var(--dt-size-1000);
+}
+
+/* min/max width */
+.test-minmax {
+  min-inline-size: var(--dt-size-650);
+  max-inline-size: var(--dt-size-900);
+  min-inline-size: var(--dt-size-1000);
+}
+
+/* flex-basis */
+.test-flex-basis {
+  flex-basis: var(--dt-size-700);
+  flex-basis: var(--dt-size-800);
+}
+
+/* logical layout properties */
+.test-logical-layout {
+  inline-size: var(--dt-size-700);
+  block-size: var(--dt-size-800);
+  min-inline-size: var(--dt-size-650);
+  max-inline-size: var(--dt-size-1000);
+  max-block-size: var(--dt-size-950);
+}
+
+/* ============================================ */
+/* NEAREST-NEIGHBOR MAPPINGS                    */
+/* No exact match — mapped to closest stop      */
+/* ============================================ */
+
+.test-nearest-neighbor {
+  inline-size: var(--dt-size-825);      /* 164px → layout-250  (160px, Δ4px) */
+  inline-size: var(--dt-size-875);      /* 216px → layout-350  (224px, Δ8px) */
+  inline-size: var(--dt-size-905);      /* 264px → layout-400  (256px, Δ8px) */
+  inline-size: var(--dt-size-925);      /* 332px → layout-500  (320px, Δ12px) */
+  block-size: var(--dt-size-975);     /* 464px → layout-700  (448px, Δ16px) */
+  inline-size: var(--dt-size-1020);     /* 628px → layout-1000 (640px, Δ12px) */
+  max-inline-size: var(--dt-size-1040); /* 764px → layout-1200 (768px, Δ4px) */
+  max-inline-size: var(--dt-size-1060); /* 828px → layout-1300 (832px, Δ4px) */
+  max-block-size: var(--dt-size-1080); /* 912px → layout-1400 (896px, Δ16px) */
+}
+
+/* ============================================ */
+/* RAW FALLBACK (exceeds layout scale >1024px)  */
+/* Converted to rem + TODO comment              */
+/* ============================================ */
+
+.test-raw-fallback {
+  max-inline-size: var(--dt-size-1115); /* 1140px → 71.25rem + TODO comment */
+  max-inline-size: var(--dt-size-1120); /* 1268px → 79.25rem + TODO comment */
+  max-inline-size: var(--dt-size-1125); /* 1280px → 80rem + TODO comment */
+  max-inline-size: var(--dt-size-1130); /* 1340px → 83.75rem + TODO comment */
+  inline-size: var(--dt-size-1150);     /* 1536px → 96rem + TODO comment */
+  inline-size: var(--dt-size-1200);     /* 2048px → 128rem + TODO comment */
+}
+
+/* ============================================ */
+/* CUSTOM PROPERTY DEFINITIONS                  */
+/* Script routes by keyword in property name    */
+/* ============================================ */
+
+/* Spacing keywords in custom property name → --dt-spacing-* */
+.test-custom-spacing {
+  --badge-padding-y: var(--dt-size-400);        /* "padding" → spacing-100 (8px) */
+  --badge-padding-x: var(--dt-size-550);        /* "padding" → spacing-300 (24px) */
+  --badge-label-padding-x: var(--dt-size-500);  /* "padding" → spacing-200 (16px) */
+  --badge-letter-spacing: var(--dt-size-100);   /* "spacing" → spacing-1   (1px) */
+  --badge-gap: var(--dt-size-300);              /* "gap"     → spacing-50  (4px) */
+  --item-margin-start: var(--dt-size-400);      /* "margin"  → spacing-100 (8px) */
+  --item-inset-y: var(--dt-size-300);           /* "inset"   → spacing-50  (4px) */
+}
+
+/* Layout keywords in custom property name → --dt-layout-* */
+.test-custom-layout {
+  --badge-radius: var(--dt-size-700);           /* "radius" → layout-100  (64px) */
+  --panel-width: var(--dt-size-1050);           /* "width"  → layout-1200 (768px) */
+  --sidebar-min-width: var(--dt-size-900);      /* "width"  → layout-400  (256px) */
+  --avatar-basis: var(--dt-size-700);           /* "basis"  → layout-100  (64px) */
+}
+
+/* Ambiguous custom property — no keyword match → default fallback (layout map) */
+/* NOTE: "line-height" intentionally excluded from height keyword matching */
+/* These require manual review after migration */
+.test-custom-ambiguous {
+  --badge-line-height: var(--dt-size-500);   /* no keyword match → layout-25 (default) */
+  --overlay-depth: var(--dt-size-700);       /* no keyword match → layout-100 (default) */
+}
+
+/* ============================================ */
+/* SKIP CASES (should NOT be modified)          */
+/* ============================================ */
+
+/* Already using --dt-layout-* */
+.test-skip-already-layout {
+  inline-size: var(--dt-layout-100);
+  block-size: var(--dt-layout-200);
+  max-inline-size: var(--dt-layout-800);
+}
+
+/* Already using --dt-spacing-* */
+.test-skip-already-spacing {
+  padding: var(--dt-spacing-100);
+  margin: var(--dt-spacing-300);
+  gap: var(--dt-spacing-400);
+}
+
+/* Unknown stop number (not in any map — passed through, lint will flag) */
+.test-skip-unknown {
+  inline-size: var(--dt-size-999);
+  padding: var(--dt-size-123);
+}
+
+/* ============================================ */
+/* ADDITIONAL COVERAGE (from review feedback)   */
+/* ============================================ */
+
+/* --dt-size-50 in spacing context → spacing-1 (0.5px → 1px nearest) */
+.test-size-50-spacing {
+  padding: var(--dt-size-50);           /* → spacing-1 */
+  letter-spacing: var(--dt-size-50);    /* → spacing-1 (via default) */
+}
+
+/* Unmapped layout stops that should now have nearest-neighbor entries */
+.test-newly-mapped-stops {
+  inline-size: var(--dt-size-720);      /* 72px → layout-100 (64px) */
+  inline-size: var(--dt-size-730);      /* 84px → layout-125 (80px) */
+  inline-size: var(--dt-size-760);      /* 102px → layout-150 (96px) */
+  inline-size: var(--dt-size-775);      /* 114px → layout-175 (112px) */
+}
+
+/* Negative and percent suffixes */
+.test-suffixes {
+  margin: var(--dt-size-400-negative);  /* → spacing-100-negative */
+  inline-size: var(--dt-size-100-percent); /* → layout-100-percent */
+}
+
+/* calc(var(--dt-spacing-*) * -1) → negative token cleanup */
+.test-calc-negation {
+  inset: calc(var(--dt-spacing-100) * -1);  /* → var(--dt-spacing-100-negative) */
+  margin: calc(var(--dt-spacing-300) * -1); /* → var(--dt-spacing-300-negative) */
+}
+
+/* Border-width context → --dt-size-border-* */
+.test-border-width {
+  border: var(--dt-size-100) solid red;         /* → dt-size-border-100 */
+  border-width: var(--dt-size-200);             /* → dt-size-border-200 */
+  outline: var(--dt-size-100) solid;            /* → dt-size-border-100 */
+}
+
+/* Border-radius context → --dt-size-radius-* */
+.test-border-radius {
+  border-radius: var(--dt-size-300);            /* → dt-size-radius-300 */
+  border-radius: var(--dt-size-400);            /* → dt-size-radius-400 */
+  --badge-radius: var(--dt-size-300);           /* "radius" keyword → dt-size-radius-300 */
+}
+</style>

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);
             }
         }