@dialpad/dialtone-css 8.80.0-next.2 → 8.80.0-next.4

package/lib/build/js/dialtone_migration_helper/tests/utility-class-to-token-stops.test.mjs

@@ -0,0 +1,170 @@
+import { describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+import config from '../configs/utility-class-to-token-stops.mjs';
+import { applyConfig } from './helpers.mjs';
+
+const apply = (input) => applyConfig(config, input);
+
+describe('utility-class-to-token-stops config', () => {
+  // ─── Off-scale pixel-indexed sizing classes (DLT-3330) ────────────────
+  //
+  // Old legacy Tier 1 calc-based selectors → new hyphenated px-suffixed selectors.
+  // d-w1 → d-w-1px, d-h2 → d-h-2px, d-hmn8 → d-hmn-8px, etc.
+
+  describe('off-scale sizing — legacy small-value selectors migrate to Npx', () => {
+    const prefixes = ['h', 'w', 'hmn', 'hmx', 'wmn', 'wmx'];
+    const pxValues = [1, 2, 8, 20, 24];
+
+    for (const prefix of prefixes) {
+      for (const px of pxValues) {
+        const from = `d-${prefix}${px}`;
+        const to = `d-${prefix}-${px}px`;
+        it(`${from} → ${to}`, () => {
+          assert.equal(apply(`<div class="${from}" />`), `<div class="${to}" />`);
+        });
+      }
+    }
+  });
+
+  // ─── Existing scale-indexed rewrites unchanged (smoke tests) ──────────
+
+  describe('scale-indexed sizing — unchanged', () => {
+    const cases = [
+      ['d-h16', 'd-h-25'],
+      ['d-w32', 'd-w-50'],
+      ['d-w64', 'd-w-100'],
+      ['d-hmn96', 'd-hmn-150'],
+      ['d-hmx128', 'd-hmx-200'],
+      ['d-w1024', 'd-w-1600'],
+      ['d-wmn16', 'd-wmn-25'],
+    ];
+    for (const [from, to] of cases) {
+      it(`${from} → ${to}`, () => {
+        assert.equal(apply(`<div class="${from}" />`), `<div class="${to}" />`);
+      });
+    }
+  });
+
+  // ─── Regex disambiguation: longer alternatives must win over shorter ones ─
+
+  describe('regex alternation — longest match wins', () => {
+    it('d-w1024 matches 1024, not 1', () => {
+      assert.equal(apply(`<div class="d-w1024" />`), `<div class="d-w-1600" />`);
+    });
+    it('d-w128 matches 128, not 1 or 2', () => {
+      assert.equal(apply(`<div class="d-w128" />`), `<div class="d-w-200" />`);
+    });
+    it('d-w24 matches 24 (off-scale), not 2', () => {
+      assert.equal(apply(`<div class="d-w24" />`), `<div class="d-w-24px" />`);
+    });
+    it('d-h20 matches 20 (off-scale), not 2', () => {
+      assert.equal(apply(`<div class="d-h20" />`), `<div class="d-h-20px" />`);
+    });
+  });
+
+  // ─── Spacing/margin/padding classes still map to spacing stops ────────
+
+  describe('margin / padding / gap — unchanged behavior', () => {
+    const cases = [
+      ['d-m8', 'd-m-100'],     // margin 8px → spacing-100
+      ['d-p8', 'd-p-100'],     // padding 8px → spacing-100
+      ['d-g8', 'd-g-100'],     // gap 8px → spacing-100
+      ['d-mt16', 'd-mt-200'],  // margin-top 16px → spacing-200
+      ['d-pb24', 'd-pb-300'],  // padding-bottom 24px → spacing-300
+    ];
+    for (const [from, to] of cases) {
+      it(`${from} → ${to}`, () => {
+        assert.equal(apply(`<div class="${from}" />`), `<div class="${to}" />`);
+      });
+    }
+  });
+
+  // ─── Multi-class strings ──────────────────────────────────────────────
+
+  describe('multi-class migration', () => {
+    it('migrates each off-scale sizing class in a space-separated list', () => {
+      const input = `<div class="d-w1 d-h2 d-size-25 d-hmn8 d-wmx24" />`;
+      const expected = `<div class="d-w-1px d-h-2px d-size-25 d-hmn-8px d-wmx-24px" />`;
+      assert.equal(apply(input), expected);
+    });
+  });
+
+  // ─── Border-radius migration (DLT-3329) ───────────────────────────────
+
+  describe('border-radius all-corners — legacy pixel-suffix to token stop', () => {
+    const cases = [
+      ['d-bar0', 'd-bar-0'],
+      ['d-bar1', 'd-bar-100'],
+      ['d-bar2', 'd-bar-200'],
+      ['d-bar4', 'd-bar-300'],
+      ['d-bar6', 'd-bar-350'],
+      ['d-bar8', 'd-bar-400'],
+      ['d-bar12', 'd-bar-450'],
+      ['d-bar16', 'd-bar-500'],
+      ['d-bar24', 'd-bar-550'],
+      ['d-bar32', 'd-bar-600'],
+    ];
+    for (const [from, to] of cases) {
+      it(`${from} → ${to}`, () => {
+        assert.equal(apply(`<div class="${from}" />`), `<div class="${to}" />`);
+      });
+    }
+  });
+
+  describe('border-radius side-pair numeric — physical prefix to logical prefix', () => {
+    const cases = [
+      ['d-btr6', 'd-bbsr-350'],     // top    → block-start pair
+      ['d-bbr8', 'd-bber-400'],     // bottom → block-end pair
+      ['d-blr12', 'd-bisr-450'],    // left   → inline-start pair
+      ['d-brr16', 'd-bier-500'],    // right  → inline-end pair
+      ['d-btr24', 'd-bbsr-550'],    // new 550 stop
+      ['d-bbr32', 'd-bber-600'],
+      ['d-blr0', 'd-bisr-0'],
+      ['d-brr1', 'd-bier-100'],
+    ];
+    for (const [from, to] of cases) {
+      it(`${from} → ${to}`, () => {
+        assert.equal(apply(`<div class="${from}" />`), `<div class="${to}" />`);
+      });
+    }
+  });
+
+  describe('border-radius side-pair keyword — pill/circle', () => {
+    const cases = [
+      ['d-btr-pill', 'd-bbsr-pill'],
+      ['d-btr-circle', 'd-bbsr-circle'],
+      ['d-bbr-pill', 'd-bber-pill'],
+      ['d-bbr-circle', 'd-bber-circle'],
+      ['d-blr-pill', 'd-bisr-pill'],
+      ['d-blr-circle', 'd-bisr-circle'],
+      ['d-brr-pill', 'd-bier-pill'],
+      ['d-brr-circle', 'd-bier-circle'],
+    ];
+    for (const [from, to] of cases) {
+      it(`${from} → ${to}`, () => {
+        assert.equal(apply(`<div class="${from}" />`), `<div class="${to}" />`);
+      });
+    }
+  });
+
+  describe('border-radius canonical keyword names — unchanged', () => {
+    const cases = [
+      'd-bar-pill',
+      'd-bar-circle',
+      'd-bar-unset',
+    ];
+    for (const unchanged of cases) {
+      it(`${unchanged} stays as ${unchanged}`, () => {
+        assert.equal(apply(`<div class="${unchanged}" />`), `<div class="${unchanged}" />`);
+      });
+    }
+  });
+
+  describe('border-radius multi-class migration', () => {
+    it('rewrites mixed legacy classes in one string', () => {
+      const input = `<div class="d-bar6 d-btr8 d-blr-pill d-p-200" />`;
+      const expected = `<div class="d-bar-350 d-bbsr-400 d-bisr-pill d-p-200" />`;
+      assert.equal(apply(input), expected);
+    });
+  });
+});

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

@@ -74,7 +74,7 @@
 
   &--positive,
   &--success {
-    --badge-color-background: var(--dt-badge-color-background-success);
+    --badge-color-background: var(--dt-badge-color-background-positive);
   }
 
   &--warning {

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

@@ -19,7 +19,7 @@
     --banner-dialog-padding-y: var(--dt-spacing-100);
     --banner-dialog-padding-x: var(--dt-spacing-200);
     --notice-icon-gap: var(--dt-spacing-100);
-    --notice-actions-align: inherit;
+    --notice-actions-align: center;
 
     position: fixed;
     inset-block-start: 0;

package/lib/build/less/components/box.less

@@ -62,7 +62,12 @@
 }
 
 ._box-layout(@prop) {
+  &-1px { @{prop}: var(--dt-layout-1px); }
+  &-2px { @{prop}: var(--dt-layout-2px); }
+  &-8px { @{prop}: var(--dt-layout-8px); }
   &-25 { @{prop}: var(--dt-layout-25); }
+  &-20px { @{prop}: var(--dt-layout-20px); }
+  &-24px { @{prop}: var(--dt-layout-24px); }
   &-50 { @{prop}: var(--dt-layout-50); }
   &-75 { @{prop}: var(--dt-layout-75); }
   each(range(0, 1600, 100), {
@@ -70,7 +75,7 @@
   });
   // Percentage tokens
   each(@box-layout-percent-values, {
-    &-@{value}-percent { @{prop}: ~"var(--dt-layout-@{value}-percent)"; }
+    &-@{value}p { @{prop}: ~"var(--dt-layout-@{value}-percent)"; }
   });
 }
 
@@ -97,15 +102,9 @@
 //  ============================================================================
 //  $   VALUE LISTS
 //  ----------------------------------------------------------------------------
-//  `positive*` is intentionally absent from these lists. Surface and border
-//  tokens still use legacy `success*` naming (no `--dt-color-surface-positive-*`
-//  exists yet), so `positive*` modifier classes are generated from explicit
-//  alias blocks below that map to `--dt-color-surface-success-*` /
-//  `--dt-color-border-success-*`. Once DLT-3331 lands the token rename,
-//  `positive*` moves into these lists and the alias blocks can be dropped.
-@box-surface-values: primary, secondary, moderate, bold, strong, contrast, backdrop, brand, info, warning, critical, brand-subtle, brand-strong, info-subtle, info-strong, warning-subtle, warning-strong, critical-subtle, critical-strong, primary-opaque, secondary-opaque, moderate-opaque, bold-opaque, strong-opaque, contrast-opaque, brand-opaque, brand-subtle-opaque, info-opaque, info-subtle-opaque, warning-opaque, warning-subtle-opaque, critical-opaque, critical-subtle-opaque;
+@box-surface-values: primary, secondary, moderate, bold, strong, contrast, backdrop, brand, info, warning, critical, positive, success, brand-subtle, brand-strong, info-subtle, info-strong, warning-subtle, warning-strong, critical-subtle, critical-strong, positive-subtle, positive-strong, success-subtle, success-strong, primary-opaque, secondary-opaque, moderate-opaque, bold-opaque, strong-opaque, contrast-opaque, brand-opaque, brand-subtle-opaque, info-opaque, info-subtle-opaque, warning-opaque, warning-subtle-opaque, critical-opaque, critical-subtle-opaque, positive-opaque, positive-subtle-opaque, success-opaque, success-subtle-opaque;
 
-@box-border-color-values: subtle, default, moderate, bold, accent, focus, brand, warning, critical, brand-subtle, brand-strong, warning-subtle, warning-strong, critical-subtle, critical-strong;
+@box-border-color-values: subtle, default, moderate, bold, accent, focus, brand, warning, critical, info, positive, success, brand-subtle, brand-strong, warning-subtle, warning-strong, critical-subtle, critical-strong, info-subtle, info-strong, positive-subtle, positive-strong, success-subtle, success-strong;
 
 @box-border-width-values: 0, 50, 100, 150, 200, 300, 400;
 @box-layout-percent-values: 10, 20, 25, 30, 33, 40, 50, 60, 66, 70, 75, 80, 90, 95, 100;
@@ -161,13 +160,6 @@
 //  ----------------------------------------------------------------------------
 ._box-token(surface; --box-surface; dt-color-surface; @box-surface-values);
 
-//  `positive` prop → maps to `--dt-color-surface-success-*` tokens (surface tokens use legacy `success` naming; see DLT-3331)
-.d-box--surface-positive               { --box-surface: var(--dt-color-surface-success); }
-.d-box--surface-positive-subtle        { --box-surface: var(--dt-color-surface-success-subtle); }
-.d-box--surface-positive-strong        { --box-surface: var(--dt-color-surface-success-strong); }
-.d-box--surface-positive-opaque        { --box-surface: var(--dt-color-surface-success-opaque); }
-.d-box--surface-positive-subtle-opaque { --box-surface: var(--dt-color-surface-success-subtle-opaque); }
-
 //  ----------------------------------------------------------------------------
 //  $$  BORDER
 //  ----------------------------------------------------------------------------
@@ -175,12 +167,7 @@
 .d-box--bc-transparent { --box-bc: transparent; }
 ._box-token(bc; --box-bc; dt-color-border; @box-border-color-values);
 
-//  `positive` prop → maps to `--dt-color-border-success-*` tokens (border tokens use legacy `success` naming; see DLT-3331)
-.d-box--bc-positive        { --box-bc: var(--dt-color-border-success); }
-.d-box--bc-positive-subtle { --box-bc: var(--dt-color-border-success-subtle); }
-.d-box--bc-positive-strong { --box-bc: var(--dt-color-border-success-strong); }
-
-@box-border-radius-values: 0, 100, 200, 300, 350, 400, 450, 500, 600;
+@box-border-radius-values: 0, 100, 200, 300, 350, 400, 450, 500, 550, 600;
 
 //  Border width — 7 axes × border-width scale
 .d-box--bw    { ._box-border-width(--box-bw); }

package/lib/build/less/components/description-list.less

@@ -1,3 +1,7 @@
+//  Register gap modifier var as non-inheriting so nested description lists
+//  don't pick up an ancestor's gap override.
+@property --description-list-gap { syntax: "*"; inherits: false; }
+
 @layer dialtone.components {
 .d-description-list {
   display: flex;

package/lib/build/less/components/forms.less

@@ -157,7 +157,8 @@ fieldset {
   }
 }
 
-.d-validation-message--critical {
+.d-validation-message--critical,
+.d-validation-message--error {
   --validation-color-text: var(--dt-color-foreground-critical);
 
   &::before {
@@ -165,7 +166,8 @@ fieldset {
   }
 }
 
-.d-validation-message--positive {
+.d-validation-message--positive,
+.d-validation-message--success {
   --validation-color-text: var(--dt-color-foreground-positive);
 
   &::before {

package/lib/build/less/components/input.less

@@ -300,12 +300,12 @@
 }
 
 .d-input--positive {
-    --input-color-border: var(--dt-inputs-color-border-success) !important;
+    --input-color-border: var(--dt-inputs-color-border-positive) !important;
 }
 
 // @deprecated Use .d-input--positive
 .d-input--success {
-    --input-color-border: var(--dt-inputs-color-border-success) !important;
+    --input-color-border: var(--dt-inputs-color-border-positive) !important;
 }
 
 //  ============================================================================

package/lib/build/less/components/link.less

@@ -95,8 +95,15 @@
     //  ----------------------------------------------------------------------------
     &--positive,
     &--success {
-        --link-color-default: var(--dt-color-link-success);
-        --link-color-default-hover: var(--dt-color-link-success-hover);
+        --link-color-default: var(--dt-color-link-positive);
+        --link-color-default-hover: var(--dt-color-link-positive-hover);
+    }
+
+    //  $$  INFO
+    //  ----------------------------------------------------------------------------
+    &--info {
+        --link-color-default: var(--dt-color-link-info);
+        --link-color-default-hover: var(--dt-color-link-info-hover);
     }
 
     //  $$  MUTED
@@ -154,8 +161,8 @@
     //  ----------------------------------------------------------------------------
     &--inverted-positive,
     &--inverted-success {
-        --link-color-default: var(--dt-color-link-success-inverted);
-        --link-color-default-hover: var(--dt-color-link-success-inverted-hover);
+        --link-color-default: var(--dt-color-link-positive-inverted);
+        --link-color-default-hover: var(--dt-color-link-positive-inverted-hover);
     }
 
     //  $$  INVERTED WARNING
@@ -165,6 +172,13 @@
         --link-color-default-hover: var(--dt-color-link-warning-inverted-hover);
     }
 
+    //  $$  INVERTED INFO
+    //  ----------------------------------------------------------------------------
+    &--inverted-info {
+        --link-color-default: var(--dt-color-link-info-inverted);
+        --link-color-default-hover: var(--dt-color-link-info-inverted-hover);
+    }
+
     //  $$  INVERTED MUTED
     //  ----------------------------------------------------------------------------
     &--inverted-muted {

package/lib/build/less/components/modal.less

@@ -287,7 +287,7 @@
 
   &--positive,
   &--success {
-    --modal-banner-color-background: var(--dt-color-surface-success);
+    --modal-banner-color-background: var(--dt-color-surface-positive);
   }
 
   &--general {

package/lib/build/less/components/notice.less

@@ -144,7 +144,7 @@
 .d-banner--info,
 .d-toast--info {
     --notice-color-background: var(--dt-color-surface-info);
-    --notice-color-icon: var(--dt-color-blue-800);
+    --notice-color-icon: var(--dt-color-foreground-info);
 
     &.d-notice--important,
     &.d-banner--important,
@@ -162,13 +162,13 @@
 .d-notice--success,
 .d-banner--success,
 .d-toast--success {
-    --notice-color-background: var(--dt-color-surface-success);
+    --notice-color-background: var(--dt-color-surface-positive);
     --notice-color-icon: var(--dt-color-foreground-positive);
 
     &.d-notice--important,
     &.d-banner--important,
     &.d-toast--important {
-        --notice-color-background: var(--dt-color-surface-success-strong);
+        --notice-color-background: var(--dt-color-surface-positive-strong);
         --notice-color-text: var(--dt-color-foreground-primary-inverted);
     }
 }

package/lib/build/less/components/progress_circle.less

@@ -4,6 +4,14 @@
 //
 //  https://dialtone.dialpad.com/components/progress-circle
 
+//  @@  @PROPERTY REGISTRATIONS
+//  ----------------------------------------------------------------------------
+//  `--progress-size` is only read on `.d-progress-circle` itself, so registering
+//  as non-inheriting is safe. `--progress-color` is NOT registered — it is set
+//  on `.d-progress-circle` and consumed by descendant `.d-progress-circle__shape`
+//  elements via inheritance.
+@property --progress-size { syntax: "*"; inherits: false; }
+
 @layer dialtone.components {
 .d-progress-circle {
   --progress-size: var(--dt-icon-size-500);
@@ -24,12 +32,12 @@
 
   &--brand { --progress-color: var(--dt-color-border-brand); }
   &--critical { --progress-color: var(--dt-color-border-critical); }
-  &--positive { --progress-color: var(--dt-color-border-success); }
+  &--positive { --progress-color: var(--dt-color-border-positive); }
   &--warning { --progress-color: var(--dt-color-border-warning); }
   // AI fill gradient is an SVG <linearGradient> applied in the Vue component;
   // the track intentionally keeps the default border color.
   &--ai { --progress-color: var(--dt-color-border-bold); }
-  &--info { --progress-color: var(--dt-color-blue-600); } // TODO: I still have to create "info" design tokens
+  &--info { --progress-color: var(--dt-color-border-info); }
 }
 
 .d-progress-circle__bar {