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

package/lib/build/js/dialtone_migration_helper/tests/success-to-positive-test-examples.vue

@@ -0,0 +1,166 @@
+<template>
+  <!--
+    TEST FILE FOR SUCCESS-TO-POSITIVE MIGRATION
+    Tests replacement of `success` color references with `positive`.
+  -->
+
+  <!-- ============================================ -->
+  <!-- FOREGROUND UTILITIES (d-fc-success*) -->
+  <!-- ============================================ -->
+
+  <p class="d-fc-success">success foreground</p>
+  <p class="d-fc-success-strong">success-strong foreground</p>
+  <p class="d-fc-success-inverted">success inverted foreground</p>
+  <p class="d-fc-success-strong-inverted">success-strong inverted foreground</p>
+
+  <!-- ============================================ -->
+  <!-- SURFACE UTILITIES (d-bgc-success*) -->
+  <!-- ============================================ -->
+
+  <div class="d-bgc-success">success surface</div>
+  <div class="d-bgc-success-subtle">success-subtle surface</div>
+  <div class="d-bgc-success-strong">success-strong surface</div>
+  <div class="d-bgc-success-opaque">success-opaque surface</div>
+  <div class="d-bgc-success-subtle-opaque">success-subtle-opaque surface</div>
+  <div class="d-bgc-success-inverted">success inverted</div>
+  <div class="d-bgc-success-subtle-inverted">success-subtle inverted</div>
+  <div class="d-bgc-success-strong-inverted">success-strong inverted</div>
+  <div class="d-bgc-success-opaque-inverted">success-opaque inverted</div>
+  <div class="d-bgc-success-subtle-opaque-inverted">success-subtle-opaque inverted</div>
+
+  <!-- ============================================ -->
+  <!-- BORDER UTILITIES (d-bc-success*) -->
+  <!-- ============================================ -->
+
+  <div class="d-bc-success">success border</div>
+  <div class="d-bc-success-subtle">success-subtle border</div>
+  <div class="d-bc-success-strong">success-strong border</div>
+  <div class="d-bc-success-inverted">success inverted border</div>
+  <div class="d-bc-success-subtle-inverted">success-subtle inverted border</div>
+  <div class="d-bc-success-strong-inverted">success-strong inverted border</div>
+
+  <!-- ============================================ -->
+  <!-- PSEUDO & RESPONSIVE PREFIXED -->
+  <!-- ============================================ -->
+
+  <p class="h:d-fc-success">hover success text</p>
+  <p class="f:d-fc-success-strong">focus success-strong text</p>
+  <div class="sm:d-bgc-success">responsive success surface</div>
+  <div class="md:d-bc-success-subtle">responsive success-subtle border</div>
+
+  <!-- ============================================ -->
+  <!-- ALREADY-POSITIVE CLASSES (should NOT be touched) -->
+  <!-- ============================================ -->
+
+  <p class="d-fc-positive">already positive</p>
+  <div class="d-bgc-positive-subtle">already positive</div>
+  <div class="d-bc-positive-strong">already positive</div>
+
+  <!-- ============================================ -->
+  <!-- UNRELATED SEMANTIC FAMILIES (preserve) -->
+  <!-- ============================================ -->
+
+  <p class="d-fc-critical">critical text — preserve</p>
+  <div class="d-bgc-warning-subtle">warning surface — preserve</div>
+
+  <!-- ============================================ -->
+  <!-- ENGLISH WORDS WITH "success" PREFIX (preserve) -->
+  <!-- ============================================ -->
+
+  <p>The migration ran successfully.</p>
+  <p>This is a successful operation.</p>
+</template>
+
+<style>
+/* ============================================ */
+/* CSS VARIABLE: FOREGROUND                     */
+/* ============================================ */
+
+.test-fg-success {
+  color: var(--dt-color-foreground-success);
+}
+
+.test-fg-success-strong {
+  color: var(--dt-color-foreground-success-strong);
+}
+
+.test-fg-success-inverted {
+  color: var(--dt-color-foreground-success-inverted);
+}
+
+.test-fg-success-strong-inverted {
+  color: var(--dt-color-foreground-success-strong-inverted);
+}
+
+/* ============================================ */
+/* CSS VARIABLE: SURFACE                        */
+/* ============================================ */
+
+.test-surface-success {
+  background-color: var(--dt-color-surface-success);
+}
+
+.test-surface-success-opaque {
+  background-color: var(--dt-color-surface-success-opaque);
+}
+
+.test-surface-success-subtle-opaque {
+  background-color: var(--dt-color-surface-success-subtle-opaque);
+}
+
+.test-surface-success-subtle-opaque-inverted {
+  background-color: var(--dt-color-surface-success-subtle-opaque-inverted);
+}
+
+/* ============================================ */
+/* CSS VARIABLE: BORDER                         */
+/* ============================================ */
+
+.test-border-success {
+  border-color: var(--dt-color-border-success);
+}
+
+.test-border-success-subtle-inverted {
+  border-color: var(--dt-color-border-success-subtle-inverted);
+}
+
+/* ============================================ */
+/* CSS VARIABLE: LINK                           */
+/* ============================================ */
+
+.test-link-success {
+  color: var(--dt-color-link-success);
+}
+
+.test-link-success-hover {
+  color: var(--dt-color-link-success-hover);
+}
+
+.test-link-success-inverted {
+  color: var(--dt-color-link-success-inverted);
+}
+
+.test-link-success-inverted-hover {
+  color: var(--dt-color-link-success-inverted-hover);
+}
+
+/* ============================================ */
+/* SKIP CASES (should NOT be replaced)          */
+/* ============================================ */
+
+/* Unrelated tokens with "success" elsewhere */
+.test-skip-unrelated-token {
+  --my-success-color: red;
+}
+
+/* Already migrated */
+.test-already-positive {
+  color: var(--dt-color-foreground-positive);
+}
+
+/* Comments with English usage of "success" — preserve */
+.test-comment {
+  /* Operation succeeded successfully — keep this comment text */
+  color: red;
+}
+</style>

package/lib/build/js/dialtone_migration_helper/tests/success-to-positive.test.mjs

@@ -0,0 +1,287 @@
+import { describe, it, before } from 'node:test';
+import assert from 'node:assert/strict';
+import { readFile } from 'node:fs/promises';
+import { fileURLToPath } from 'node:url';
+import { dirname, join } from 'node:path';
+import config from '../configs/success-to-positive.mjs';
+import { applyConfig } from './helpers.mjs';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const apply = (input) => applyConfig(config, input);
+
+describe('success-to-positive config', () => {
+  // ─── CSS variable references (data-driven per family) ──────────────────────
+
+  // Suffix variants per family. The four families (foreground, surface, border,
+  // link) emit different subsets, so each family lists exactly the suffixes
+  // it ships with.
+  const variableTests = [
+    ['foreground', [
+      '', '-strong', '-inverted', '-strong-inverted',
+    ]],
+    ['surface', [
+      '', '-subtle', '-strong',
+      '-opaque', '-subtle-opaque',
+      '-inverted', '-subtle-inverted', '-strong-inverted',
+      '-opaque-inverted', '-subtle-opaque-inverted',
+    ]],
+    ['border', [
+      '', '-subtle', '-strong',
+      '-inverted', '-subtle-inverted', '-strong-inverted',
+    ]],
+    ['link', [
+      '', '-hover', '-inverted', '-inverted-hover',
+    ]],
+  ];
+
+  for (const [category, suffixes] of variableTests) {
+    describe(`var(--dt-color-${category}-success*) → var(--dt-color-${category}-positive*)`, () => {
+      for (const suffix of suffixes) {
+        const input = `var(--dt-color-${category}-success${suffix})`;
+        const expected = `var(--dt-color-${category}-positive${suffix})`;
+        it(`${input} → ${expected}`, () => {
+          assert.equal(apply(input), expected);
+        });
+      }
+    });
+  }
+
+  // ─── Utility class renames (data-driven per prefix) ────────────────────────
+
+  const utilityTests = [
+    ['fc', [
+      '', '-strong', '-inverted', '-strong-inverted',
+    ]],
+    ['bgc', [
+      '', '-subtle', '-strong',
+      '-opaque', '-subtle-opaque',
+      '-inverted', '-subtle-inverted', '-strong-inverted',
+      '-opaque-inverted', '-subtle-opaque-inverted',
+    ]],
+    ['bc', [
+      '', '-subtle', '-strong',
+      '-inverted', '-subtle-inverted', '-strong-inverted',
+    ]],
+  ];
+
+  for (const [prefix, suffixes] of utilityTests) {
+    describe(`d-${prefix}-success* → d-${prefix}-positive*`, () => {
+      for (const suffix of suffixes) {
+        const input = `d-${prefix}-success${suffix}`;
+        const expected = `d-${prefix}-positive${suffix}`;
+        it(`${input} → ${expected}`, () => {
+          assert.equal(apply(input), expected);
+        });
+      }
+    });
+  }
+
+  // ─── Utility class context: pseudo / responsive / inside attributes ────────
+
+  describe('utility class context cases', () => {
+    const cases = [
+      ['h:d-fc-success', 'h:d-fc-positive', 'hover pseudo prefix'],
+      ['f:d-bgc-success-subtle', 'f:d-bgc-positive-subtle', 'focus pseudo + subtle'],
+      ['sm:d-bgc-success', 'sm:d-bgc-positive', 'sm responsive'],
+      ['md:d-bc-success-strong', 'md:d-bc-positive-strong', 'md responsive + strong'],
+      [
+        '<div class="d-bgc-success d-fc-success-strong">',
+        '<div class="d-bgc-positive d-fc-positive-strong">',
+        'multiple classes in class attribute',
+      ],
+      [
+        ':class="\'d-bc-success-subtle\'"',
+        ':class="\'d-bc-positive-subtle\'"',
+        'dynamic :class binding',
+      ],
+      [
+        '`d-bgc-success`',
+        '`d-bgc-positive`',
+        'template literal containing only d-bgc-success',
+      ],
+    ];
+
+    for (const [input, expected, label] of cases) {
+      it(label, () => {
+        assert.equal(apply(input), expected);
+      });
+    }
+  });
+
+  // ─── CSS property context: full declarations are rewritten correctly ───────
+
+  describe('CSS property context', () => {
+    const cssCases = [
+      [
+        '.a { color: var(--dt-color-foreground-success); }',
+        '.a { color: var(--dt-color-foreground-positive); }',
+        'color: foreground',
+      ],
+      [
+        '.a { background-color: var(--dt-color-surface-success-subtle); }',
+        '.a { background-color: var(--dt-color-surface-positive-subtle); }',
+        'background-color: surface-subtle',
+      ],
+      [
+        '.a { border-color: var(--dt-color-border-success); }',
+        '.a { border-color: var(--dt-color-border-positive); }',
+        'border-color: border',
+      ],
+      [
+        '.a { color: var(--dt-color-link-success-hover); }',
+        '.a { color: var(--dt-color-link-positive-hover); }',
+        'color: link-hover',
+      ],
+      [
+        '--my-token: var(--dt-color-surface-success-opaque-inverted);',
+        '--my-token: var(--dt-color-surface-positive-opaque-inverted);',
+        'custom property assignment with deepest variant',
+      ],
+    ];
+
+    for (const [input, expected, label] of cssCases) {
+      it(label, () => {
+        assert.equal(apply(input), expected);
+      });
+    }
+  });
+
+  // ─── Skip cases (must NOT be modified) ─────────────────────────────────────
+
+  describe('skip cases', () => {
+    const skipCases = [
+      // English words that contain "success" as a prefix
+      ['Operation completed successfully.', 'English word "successfully"'],
+      ['The successful run reported nothing.', 'English word "successful"'],
+      ['// Skip on success: avoid retrying.', 'comment containing the word success'],
+      // Custom-named tokens / classes that are not part of the rename family
+      ['var(--dt-color-success-something)', 'unknown CSS variable shape'],
+      ['var(--my-success-color)', 'unrelated custom property name'],
+      ['.d-fc-success-foo', 'utility-like class with non-allowed suffix'],
+      ['d-status-success', 'class with success in middle, not d-fc/bgc/bc'],
+      ['my-d-bgc-success', 'class-name suffix that contains a utility token'],
+      ['custom-d-fc-success-strong', 'longer custom class containing utility token'],
+      // Already migrated
+      ['var(--dt-color-foreground-positive)', 'already migrated foreground'],
+      ['d-bgc-positive-subtle', 'already migrated utility'],
+      // Other base / semantic family names should be untouched
+      ['d-fc-critical', 'unrelated semantic'],
+      ['d-bgc-warning-subtle', 'unrelated semantic family'],
+    ];
+
+    for (const [input, label] of skipCases) {
+      it(`unchanged: ${label}`, () => {
+        assert.equal(apply(input), input);
+      });
+    }
+  });
+
+  // ─── Boundary: success-foo should NOT match because -foo isn't a suffix ────
+
+  describe('suffix boundary protection', () => {
+    it('does not consume "-foo" suffix when matching success', () => {
+      assert.equal(apply('d-bgc-success-foo'), 'd-bgc-success-foo');
+    });
+
+    it('does not partial-match before "fully"', () => {
+      assert.equal(
+        apply('Test ran successfully across all envs.'),
+        'Test ran successfully across all envs.',
+      );
+    });
+
+    it('does not rewrite d-bgc-success when followed by an unknown hyphen-letter suffix', () => {
+      // d-bgc-success-x is invalid; the regex should bail out and leave it alone
+      assert.equal(apply('d-bgc-success-x'), 'd-bgc-success-x');
+    });
+
+    it('skips template-literal interpolation patterns (manual migration required)', () => {
+      // ` ${...} ` interpolation after `success-` is not a known suffix; flag for
+      // manual migration instead of guessing the runtime value.
+      const input = '`d-bgc-success-${state}`';
+      assert.equal(apply(input), input);
+    });
+  });
+
+  // ─── Component-specific tokens ─────────────────────────────────────────────
+
+  describe('component-specific tokens (badge / inputs)', () => {
+    const cases = [
+      ['var(--dt-badge-color-background-success)', 'var(--dt-badge-color-background-positive)'],
+      ['var(--dt-inputs-color-border-success)', 'var(--dt-inputs-color-border-positive)'],
+    ];
+    for (const [input, expected] of cases) {
+      it(`${input} → ${expected}`, () => {
+        assert.equal(apply(input), expected);
+      });
+    }
+  });
+
+  // ─── Cross-family in one pass ──────────────────────────────────────────────
+
+  describe('cross-family migration in a single pass', () => {
+    it('rewrites foreground, surface, border, link, and utility classes together', () => {
+      const input = [
+        '<div class="d-fc-success d-bgc-success-subtle d-bc-success-strong">',
+        '  styled',
+        '</div>',
+        '<style>',
+        '.x {',
+        '  color: var(--dt-color-foreground-success);',
+        '  background: var(--dt-color-surface-success);',
+        '  border: 1px solid var(--dt-color-border-success-subtle);',
+        '  --link: var(--dt-color-link-success-inverted-hover);',
+        '}',
+        '</style>',
+      ].join('\n');
+
+      const output = apply(input);
+      assert.ok(output.includes('d-fc-positive'));
+      assert.ok(output.includes('d-bgc-positive-subtle'));
+      assert.ok(output.includes('d-bc-positive-strong'));
+      assert.ok(output.includes('var(--dt-color-foreground-positive)'));
+      assert.ok(output.includes('var(--dt-color-surface-positive)'));
+      assert.ok(output.includes('var(--dt-color-border-positive-subtle)'));
+      assert.ok(output.includes('var(--dt-color-link-positive-inverted-hover)'));
+      // No stray "success" references should remain.
+      assert.ok(!output.includes('success'));
+    });
+  });
+
+  // ─── Integration: example .vue file ────────────────────────────────────────
+
+  describe('example .vue file integration', () => {
+    let output;
+
+    before(async () => {
+      const input = await readFile(
+        join(__dirname, 'success-to-positive-test-examples.vue'), 'utf8',
+      );
+      output = apply(input);
+    });
+
+    it('replaces every success utility class', () => {
+      assert.ok(output.includes('d-fc-positive'));
+      assert.ok(output.includes('d-bgc-positive-subtle'));
+      assert.ok(output.includes('d-bc-positive-strong'));
+      assert.ok(output.includes('d-bgc-positive-subtle-opaque-inverted'));
+    });
+
+    it('replaces every CSS variable family', () => {
+      assert.ok(output.includes('var(--dt-color-foreground-positive)'));
+      assert.ok(output.includes('var(--dt-color-foreground-positive-strong-inverted)'));
+      assert.ok(output.includes('var(--dt-color-surface-positive-opaque)'));
+      assert.ok(output.includes('var(--dt-color-border-positive-subtle-inverted)'));
+      assert.ok(output.includes('var(--dt-color-link-positive-hover)'));
+    });
+
+    it('preserves English words and unrelated classes', () => {
+      // English usage of "successfully" / "successful" left intact
+      assert.ok(output.includes('successfully'));
+      assert.ok(output.includes('successful operation'));
+      // unrelated semantic families pass through
+      assert.ok(output.includes('d-fc-critical'));
+      assert.ok(output.includes('d-bgc-warning-subtle'));
+    });
+  });
+});

package/lib/build/js/dialtone_migration_helper/tests/utility-class-to-token-stops-radius-examples.vue

@@ -0,0 +1,66 @@
+<!--
+  Manual-test fixture for the radius portion of the `utility-class-to-token-stops` migration.
+  Point `pnpm dialtone-migration-helper` at this file to exercise every rewrite in one pass.
+
+  Expected transformations:
+    - d-bar{N}          → d-bar-{stop}
+    - d-btr{N}          → d-bbsr-{stop}
+    - d-bbr{N}          → d-bber-{stop}
+    - d-blr{N}          → d-bisr-{stop}
+    - d-brr{N}          → d-bier-{stop}
+    - d-{btr|bbr|blr|brr}-{pill|circle} → d-{bbsr|bber|bisr|bier}-{pill|circle}
+    - d-bar-pill, d-bar-circle, d-bar-unset: unchanged (canonical)
+-->
+<template>
+  <!-- All-corners: every legacy numeric stop -->
+  <div class="d-bar0">bar0 → bar-0</div>
+  <div class="d-bar1">bar1 → bar-100</div>
+  <div class="d-bar2">bar2 → bar-200</div>
+  <div class="d-bar4">bar4 → bar-300</div>
+  <div class="d-bar6">bar6 → bar-350</div>
+  <div class="d-bar8">bar8 → bar-400</div>
+  <div class="d-bar12">bar12 → bar-450</div>
+  <div class="d-bar16">bar16 → bar-500</div>
+  <div class="d-bar24">bar24 → bar-550 (new token)</div>
+  <div class="d-bar32">bar32 → bar-600</div>
+
+  <!-- Side-pair numeric: physical → logical -->
+  <div class="d-btr6">btr6 → bbsr-350 (top pair)</div>
+  <div class="d-bbr8">bbr8 → bber-400 (bottom pair)</div>
+  <div class="d-blr12">blr12 → bisr-450 (left pair)</div>
+  <div class="d-brr16">brr16 → bier-500 (right pair)</div>
+  <div class="d-btr24">btr24 → bbsr-550</div>
+  <div class="d-bbr32">bbr32 → bber-600</div>
+
+  <!-- Side-pair keyword: physical → logical -->
+  <div class="d-btr-pill">btr-pill → bbsr-pill</div>
+  <div class="d-btr-circle">btr-circle → bbsr-circle</div>
+  <div class="d-bbr-pill">bbr-pill → bber-pill</div>
+  <div class="d-blr-pill">blr-pill → bisr-pill</div>
+  <div class="d-brr-circle">brr-circle → bier-circle</div>
+
+  <!-- Canonical names: unchanged -->
+  <div class="d-bar-pill">bar-pill (unchanged)</div>
+  <div class="d-bar-circle">bar-circle (unchanged)</div>
+  <div class="d-bar-unset">bar-unset (unchanged)</div>
+
+  <!-- Mixed in one class attribute (multi-class rewrite) -->
+  <div class="d-p-200 d-bar6 d-btr8 d-blr-pill d-fc-primary">
+    mixed: bar6+btr8+blr-pill get rewritten; d-p-200 and d-fc-primary untouched
+  </div>
+
+  <!-- Class binding via object syntax (plain strings inside) -->
+  <div :class="{ 'd-bar6': rounded, 'd-btr-pill': pillTop }">
+    object-syntax binding
+  </div>
+
+  <!-- Class binding via template literal -->
+  <div :class="`d-bar${size} d-btr${size}`">
+    template-literal (only matches literal suffixes; dynamic interpolation stays as-is)
+  </div>
+
+  <!-- New logical names (already correct): not touched -->
+  <div class="d-bar-350 d-bbsr-400 d-bier-pill d-bssr-500 d-beer-circle">
+    new logical names stay as-is
+  </div>
+</template>