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

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

@@ -0,0 +1,228 @@
+//
+//  DIALTONE
+//  COMPONENTS: BOX
+//
+//  These are the styles for box component.
+//
+//
+//  TABLE OF CONTENTS
+//  • @PROPERTY REGISTRATIONS
+//  • PARAMETRIC MIXINS
+//  • VALUE LISTS
+//  • BASE STYLE
+//  • MODIFIERS
+
+//  @@  @PROPERTY REGISTRATIONS
+//  ----------------------------------------------------------------------------
+@property --box-p { syntax: "*"; inherits: false; }
+
+@property --box-pi { syntax: "*"; inherits: false; }
+
+@property --box-pis { syntax: "*"; inherits: false; }
+
+@property --box-pie { syntax: "*"; inherits: false; }
+
+@property --box-pbl { syntax: "*"; inherits: false; }
+
+@property --box-pbs { syntax: "*"; inherits: false; }
+
+@property --box-pbe { syntax: "*"; inherits: false; }
+
+@property --box-surface { syntax: "<color>"; inherits: false; initial-value: transparent; }
+
+@property --box-bc { syntax: "<color>"; inherits: false; initial-value: transparent; }
+
+@property --box-bw { syntax: "*"; inherits: false; }
+
+@property --box-bwi { syntax: "*"; inherits: false; }
+
+@property --box-bwis { syntax: "*"; inherits: false; }
+
+@property --box-bwie { syntax: "*"; inherits: false; }
+
+@property --box-bwbl { syntax: "*"; inherits: false; }
+
+@property --box-bwbs { syntax: "*"; inherits: false; }
+
+@property --box-bwbe { syntax: "*"; inherits: false; }
+
+@property --box-br { syntax: "<length-percentage>"; inherits: false; initial-value: 0; }
+
+@property --box-shadow { syntax: "*"; inherits: false; }
+
+@property --box-of { syntax: "*"; inherits: false; }
+
+//  ============================================================================
+//  $   PARAMETRIC MIXINS
+//  ----------------------------------------------------------------------------
+._box-token(@prefix; @prop; @token; @names) {
+  each(@names, {
+    .d-box--@{prefix}-@{value} { @{prop}: ~"var(--@{token}-@{value})"; }
+  });
+}
+
+._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), {
+    &-@{value} { @{prop}: ~"var(--dt-layout-@{value})"; }
+  });
+  // Percentage tokens
+  each(@box-layout-percent-values, {
+    &-@{value}p { @{prop}: ~"var(--dt-layout-@{value}-percent)"; }
+  });
+}
+
+._box-border-width(@prop) {
+  each(@box-border-width-values, {
+    &-@{value} { @{prop}: ~"var(--dt-size-border-@{value})"; }
+  });
+}
+
+._box-spacing(@prop) {
+  // Stops outside both range() sequences: 1 (not a multiple of 25), 525 (not a multiple of 50)
+  &-1 { @{prop}: var(--dt-spacing-1); }
+  &-525 { @{prop}: var(--dt-spacing-525); }
+
+  each(range(0, 200, 25), {
+    &-@{value} { @{prop}: ~"var(--dt-spacing-@{value})"; }
+  });
+
+  each(range(250, 800, 50), {
+    &-@{value} { @{prop}: ~"var(--dt-spacing-@{value})"; }
+  });
+}
+
+//  ============================================================================
+//  $   VALUE LISTS
+//  ----------------------------------------------------------------------------
+@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, 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;
+@box-shadow-values: small, medium, large, extra-large, card;
+@box-overflow-values: hidden, scroll, auto, clip, visible;
+
+@layer dialtone.components {
+
+//  @@  BASE STYLE
+//  ----------------------------------------------------------------------------
+.d-box {
+  box-sizing: border-box;
+
+  // Overflow
+  overflow: var(--box-of, visible);
+
+  // Surface — OKLCH relative syntax supports d-bgo* opacity utilities
+  background-color: oklch(from var(--box-surface) l c h / var(--bgo, alpha));
+  border-color: oklch(from var(--box-bc) l c h / var(--bco, alpha));
+
+  // Border — always solid, no visible border until borderWidth prop is set.
+  // Width cascade: specific → axis → shorthand → 0
+  border-style: solid;
+  border-block-start-width:  var(--box-bwbs, var(--box-bwbl, var(--box-bw, 0)));
+  border-block-end-width:    var(--box-bwbe, var(--box-bwbl, var(--box-bw, 0)));
+  border-inline-start-width: var(--box-bwis, var(--box-bwi,  var(--box-bw, 0)));
+  border-inline-end-width:   var(--box-bwie, var(--box-bwi,  var(--box-bw, 0)));
+  border-radius: var(--box-br);
+
+  // Shadow
+  box-shadow: var(--box-shadow, none);
+
+  // Padding cascade: specific → axis → shorthand → 0
+  padding-block:  var(--box-pbs, var(--box-pbl, var(--box-p, 0))) var(--box-pbe, var(--box-pbl, var(--box-p, 0)));
+  padding-inline: var(--box-pis, var(--box-pi,  var(--box-p, 0))) var(--box-pie, var(--box-pi,  var(--box-p, 0)));
+}
+
+//  ============================================================================
+//  $   MODIFIERS
+//  ----------------------------------------------------------------------------
+//  $$  PADDING
+//  ----------------------------------------------------------------------------
+.d-box--p   { ._box-spacing(--box-p); }
+.d-box--pi  { ._box-spacing(--box-pi); }
+.d-box--pis { ._box-spacing(--box-pis); }
+.d-box--pie { ._box-spacing(--box-pie); }
+.d-box--pbl { ._box-spacing(--box-pbl); }
+.d-box--pbs { ._box-spacing(--box-pbs); }
+.d-box--pbe { ._box-spacing(--box-pbe); }
+
+//  ----------------------------------------------------------------------------
+//  $$  SURFACE
+//  ----------------------------------------------------------------------------
+._box-token(surface; --box-surface; dt-color-surface; @box-surface-values);
+
+//  ----------------------------------------------------------------------------
+//  $$  BORDER
+//  ----------------------------------------------------------------------------
+//  ── Border ──────────────────────────────────────────────────────────────────
+.d-box--bc-transparent { --box-bc: transparent; }
+._box-token(bc; --box-bc; dt-color-border; @box-border-color-values);
+
+@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); }
+.d-box--bwi   { ._box-border-width(--box-bwi); }
+.d-box--bwis  { ._box-border-width(--box-bwis); }
+.d-box--bwie  { ._box-border-width(--box-bwie); }
+.d-box--bwbl  { ._box-border-width(--box-bwbl); }
+.d-box--bwbs  { ._box-border-width(--box-bwbs); }
+.d-box--bwbe  { ._box-border-width(--box-bwbe); }
+
+//  Border radius
+each(@box-border-radius-values, {
+  .d-box--br-@{value} { --box-br: ~"var(--dt-size-radius-@{value})"; }
+});
+.d-box--br-pill   { --box-br: var(--dt-size-radius-pill); }
+.d-box--br-circle { --box-br: var(--dt-size-radius-circle); }
+
+//  ----------------------------------------------------------------------------
+//  $$  SHADOW
+//  ----------------------------------------------------------------------------
+//  ── Shadow ──────────────────────────────────────────────────────────────────
+._box-token(shadow; --box-shadow; dt-shadow; @box-shadow-values);
+
+//  ----------------------------------------------------------------------------
+//  $$  SIZING
+//  ----------------------------------------------------------------------------
+//  Layout token values → modifier classes. Raw CSS fallback → inline :style.
+.d-box--is      { ._box-layout(inline-size); }
+.d-box--bls     { ._box-layout(block-size); }
+.d-box--min-is  { ._box-layout(min-inline-size); }
+.d-box--max-is  { ._box-layout(max-inline-size); }
+.d-box--min-bls { ._box-layout(min-block-size); }
+.d-box--max-bls { ._box-layout(max-block-size); }
+
+//  ----------------------------------------------------------------------------
+//  $$  OVERFLOW
+//  ----------------------------------------------------------------------------
+each(@box-overflow-values, {
+  .d-box--of-@{value} { --box-of: @value; }
+});
+
+//  ----------------------------------------------------------------------------
+//  $$  SCROLLBAR
+//  ----------------------------------------------------------------------------
+//  Inner viewport wrapper — only rendered when scrollbar prop is active.
+//  OverlayScrollbars uses this as the viewport element (el.children[0]).
+//  :has() detects the wrapper — CSS reacts to its presence without JS class toggling.
+.d-box__scrollbar-content {
+  inline-size: 100%;
+  block-size: 100%;
+  overflow: auto; // Native scroll fallback when OverlayScrollbars is unavailable
+}
+
+.d-box:has(> .d-box__scrollbar-content) {
+  overflow: hidden;
+}
+
+}

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 {