npm - @dialpad/dialtone-css - Versions diffs - 8.78.0-next.1 → 8.78.0-next.2 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (102) hide show

package/README.md CHANGED Viewed

@@ -30,14 +30,12 @@ import '@dialpad/dialtone-css';
 - Light mode
 ```html
 <body class="dialtone-theme-light">...</body>
 ```
 - Dark mode
 ```html
 <body class="dialtone-theme-dark">...</body>
 ```

package/lib/build/js/dialtone_migrate_flex_to_stack/examples-edge-cases.vue CHANGED Viewed

@@ -292,6 +292,32 @@
   <!-- TEST 47: Empty element with flex - Should convert -->
   <div class="d-d-flex d-fd-column"></div>
+  <!-- ============================================ -->
+  <!-- NEW TESTS: NEW-FORMAT GAP UTILITIES (d-g-*) -->
+  <!-- ============================================ -->
+  <!-- TEST 48: New-format gap d-g-100 (8px) - Should convert to gap="100" -->
+  <div class="d-d-flex d-ai-center d-g-100">
+    <span>New gap format 8px</span>
+  </div>
+  <!-- TEST 49: New-format gap d-g-200 (16px) - Should convert to gap="200" -->
+  <div class="d-d-flex d-fd-row d-g-200">
+    <span>Item 1</span>
+    <span>Item 2</span>
+  </div>
+  <!-- TEST 50: New-format gap d-g-400 (32px) with other props - Should convert -->
+  <div class="d-d-flex d-fd-column d-ai-center d-jc-between d-g-400">
+    <span>Full props with new gap</span>
+    <span>Example</span>
+  </div>
+  <!-- TEST 51: New-format gap d-g-50 (4px) - Should convert to gap="50" -->
+  <div class="d-d-flex d-ai-center d-g-50">
+    <span>Small gap 4px</span>
+  </div>
 </template>
 <script setup>

package/lib/build/js/dialtone_migrate_flex_to_stack/index.mjs CHANGED Viewed

@@ -142,23 +142,64 @@ const FLEX_TO_PROP = {
   'd-fd-row-reverse': { prop: 'direction', value: 'row-reverse' },
   'd-fd-column-reverse': { prop: 'direction', value: 'column-reverse' },
-  // Gap mappings (d-g* → gap prop)
+  // Gap mappings (d-g* → gap prop) — old pixel-based utilities
   'd-g0': { prop: 'gap', value: '0' },
-  'd-g8': { prop: 'gap', value: '400' },
-  'd-g16': { prop: 'gap', value: '500' },
-  'd-g24': { prop: 'gap', value: '550' },
-  'd-g32': { prop: 'gap', value: '600' },
-  'd-g48': { prop: 'gap', value: '650' },
-  'd-g64': { prop: 'gap', value: '700' },
-  // Grid-gap mappings (d-gg* → gap prop) - deprecated utilities, same as d-g*
+  'd-g1': { prop: 'gap', value: '1' },
+  'd-g2': { prop: 'gap', value: '25' },
+  'd-g4': { prop: 'gap', value: '50' },
+  'd-g6': { prop: 'gap', value: '75' },
+  'd-g8': { prop: 'gap', value: '100' },
+  'd-g10': { prop: 'gap', value: '125' },
+  'd-g12': { prop: 'gap', value: '150' },
+  'd-g14': { prop: 'gap', value: '175' },
+  'd-g16': { prop: 'gap', value: '200' },
+  'd-g20': { prop: 'gap', value: '250' },
+  'd-g24': { prop: 'gap', value: '300' },
+  'd-g32': { prop: 'gap', value: '400' },
+  'd-g48': { prop: 'gap', value: '600' },
+  'd-g64': { prop: 'gap', value: '800' },
+  // Gap mappings (d-g-* → gap prop) — new token-stop-based utilities
+  'd-g-0': { prop: 'gap', value: '0' },
+  'd-g-1': { prop: 'gap', value: '1' },
+  'd-g-25': { prop: 'gap', value: '25' },
+  'd-g-50': { prop: 'gap', value: '50' },
+  'd-g-75': { prop: 'gap', value: '75' },
+  'd-g-100': { prop: 'gap', value: '100' },
+  'd-g-125': { prop: 'gap', value: '125' },
+  'd-g-150': { prop: 'gap', value: '150' },
+  'd-g-175': { prop: 'gap', value: '175' },
+  'd-g-200': { prop: 'gap', value: '200' },
+  'd-g-250': { prop: 'gap', value: '250' },
+  'd-g-300': { prop: 'gap', value: '300' },
+  'd-g-350': { prop: 'gap', value: '350' },
+  'd-g-400': { prop: 'gap', value: '400' },
+  'd-g-450': { prop: 'gap', value: '450' },
+  'd-g-500': { prop: 'gap', value: '500' },
+  'd-g-525': { prop: 'gap', value: '525' },
+  'd-g-550': { prop: 'gap', value: '550' },
+  'd-g-600': { prop: 'gap', value: '600' },
+  'd-g-650': { prop: 'gap', value: '650' },
+  'd-g-700': { prop: 'gap', value: '700' },
+  'd-g-750': { prop: 'gap', value: '750' },
+  'd-g-800': { prop: 'gap', value: '800' },
+  // Grid-gap mappings (d-gg* → gap prop) — deprecated utilities
   'd-gg0': { prop: 'gap', value: '0' },
-  'd-gg8': { prop: 'gap', value: '400' },
-  'd-gg16': { prop: 'gap', value: '500' },
-  'd-gg24': { prop: 'gap', value: '550' },
-  'd-gg32': { prop: 'gap', value: '600' },
-  'd-gg48': { prop: 'gap', value: '650' },
-  'd-gg64': { prop: 'gap', value: '700' },
+  'd-gg1': { prop: 'gap', value: '1' },
+  'd-gg2': { prop: 'gap', value: '25' },
+  'd-gg4': { prop: 'gap', value: '50' },
+  'd-gg6': { prop: 'gap', value: '75' },
+  'd-gg8': { prop: 'gap', value: '100' },
+  'd-gg10': { prop: 'gap', value: '125' },
+  'd-gg12': { prop: 'gap', value: '150' },
+  'd-gg14': { prop: 'gap', value: '175' },
+  'd-gg16': { prop: 'gap', value: '200' },
+  'd-gg20': { prop: 'gap', value: '250' },
+  'd-gg24': { prop: 'gap', value: '300' },
+  'd-gg32': { prop: 'gap', value: '400' },
+  'd-gg48': { prop: 'gap', value: '600' },
+  'd-gg64': { prop: 'gap', value: '800' },
 };
 // Classes to remove (redundant on dt-stack)

package/lib/build/js/dialtone_migration_helper/configs/size-to-layout.mjs ADDED Viewed

@@ -0,0 +1,212 @@
+// Mapping: --dt-size-{stop} → --dt-spacing-{suffix}
+// For tokens used in spacing context (padding, margin, gap, inset, etc.)
+const SPACING_MAP = {
+  0: 'spacing-0',     // 0px
+  50: 'spacing-1',    // 0.5px → 1px (nearest non-subpixel)
+  100: 'spacing-1',   // 1px
+  200: 'spacing-25',  // 2px
+  300: 'spacing-50',  // 4px
+  350: 'spacing-75',  // 6px
+  400: 'spacing-100', // 8px
+  450: 'spacing-150', // 12px
+  500: 'spacing-200', // 16px
+  525: 'spacing-250', // 20px
+  550: 'spacing-300', // 24px
+  600: 'spacing-400', // 32px
+  625: 'spacing-525', // 42px
+  650: 'spacing-600', // 48px
+  700: 'spacing-800', // 64px
+};
+// Mapping: --dt-size-{stop} → --dt-layout-{suffix}
+// For tokens used in layout context (width, height, etc.)
+// Exact matches are labeled; nearest-neighbor approximations note the delta.
+const LAYOUT_MAP = {
+  // Exact scale matches
+  500: '25',    // 16px
+  600: '50',    // 32px
+  650: '75',    // 48px
+  700: '100',   // 64px
+  750: '150',   // 96px
+  800: '200',   // 128px
+  850: '300',   // 192px
+  900: '400',   // 256px
+  950: '600',   // 384px
+  1000: '800',  // 512px
+  1050: '1200', // 768px
+  1100: '1600', // 1024px
+  // Nearest-neighbor (no exact match in --dt-layout-* scale)
+  825: '250',   // 164px → 160px (Δ4px)
+  875: '350',   // 216px → 224px (Δ8px)
+  905: '400',   // 264px → 256px (Δ8px)
+  925: '500',   // 332px → 320px (Δ12px)
+  975: '700',   // 464px → 448px (Δ16px)
+  1020: '1000', // 628px → 640px (Δ12px)
+  1040: '1200', // 764px → 768px (Δ4px)
+  1060: '1300', // 828px → 832px (Δ4px)
+  1080: '1400', // 912px → 896px (Δ16px)
+  // Previously missing — these old stops silently passed through
+  720: '100',   // 72px → 64px (Δ8px)
+  730: '125',   // 84px → 80px (Δ4px)
+  760: '150',   // 102px → 96px (Δ6px)
+  775: '175',   // 114px → 112px (Δ2px)
+};
+// Tokens that exceed the --dt-layout-* scale (max 1024px at layout-1600).
+// Converted to raw rem values with a TODO comment for future token replacement.
+const RAW_FALLBACK = {
+  1115: '71.25rem', // 1140px
+  1120: '79.25rem', // 1268px
+  1125: '80rem',    // 1280px
+  1130: '83.75rem', // 1340px
+  1150: '96rem',    // 1536px
+  1200: '128rem',   // 2048px
+};
+// Valid stops for semantic border and radius tokens
+const BORDER_STOPS = new Set([0, 50, 100, 150, 200, 300, 400]);
+const RADIUS_STOPS = new Set([0, 100, 200, 300, 350, 400, 450, 500, 600]);
+// ── Replacer factories ─────────────────────────────────────────────────────
+function spacingReplacer (match, pre, stop, suffix) {
+  const token = SPACING_MAP[Number(stop)];
+  return token ? `${pre}var(--dt-${token}${suffix || ''})` : match;
+}
+function layoutReplacer (match, pre, stop, suffix) {
+  const s = Number(stop);
+  if (LAYOUT_MAP[s]) return `${pre}var(--dt-layout-${LAYOUT_MAP[s]}${suffix || ''})`;
+  if (RAW_FALLBACK[s]) {
+    return `${pre}${RAW_FALLBACK[s]} /* TODO: no --dt-layout-* equivalent for --dt-size-${s} — replace with a layout token when one is added */`;
+  }
+  return match;
+}
+function borderReplacer (match, pre, stop) {
+  const s = Number(stop);
+  return BORDER_STOPS.has(s) ? `${pre}var(--dt-size-border-${s})` : match;
+}
+function radiusReplacer (match, pre, stop) {
+  const s = Number(stop);
+  return RADIUS_STOPS.has(s) ? `${pre}var(--dt-size-radius-${s})` : match;
+}
+// Spacing property names (physical + logical)
+const SPACING_PROPS =
+  'padding(?:-(?:top|right|bottom|left|block(?:-(?:start|end))?|inline(?:-(?:start|end))?))?|' +
+  'margin(?:-(?:top|right|bottom|left|block(?:-(?:start|end))?|inline(?:-(?:start|end))?))?|' +
+  'gap|row-gap|column-gap|' +
+  'inset(?:-(?:block(?:-(?:start|end))?|inline(?:-(?:start|end))?))?|' +
+  // Custom properties whose name contains spacing-related keywords
+  // e.g. --badge-padding-x, --badge-gap, --badge-letter-spacing
+  '--[a-z0-9-]*(?:padding|margin|gap|spacing|inset|offset)[a-z0-9-]*';
+// Layout property names (physical + logical)
+const LAYOUT_PROPS =
+  '(?:min-|max-)?width|' +
+  '(?:min-|max-)?height|' +
+  'flex-basis|' +
+  '(?:min-|max-)?inline-size|' +
+  '(?:min-|max-)?block-size|' +
+  // Custom properties whose name contains layout-related keywords
+  // e.g. --badge-min-width
+  // Note: "height" is intentionally excluded — "line-height" custom props would misroute.
+  // Note: "radius" is handled by RADIUS_PROPS, not here.
+  '--[a-z0-9-]*(?:width|basis)[a-z0-9-]*';
+// Border-width property names → --dt-size-border-*
+// Matches border shorthand, border-width, directional border-*, outline, outline-width.
+// Does NOT match border-color, border-style, border-image, or border-radius.
+const BORDER_PROPS =
+  'border(?:-(?:top|right|bottom|left|block(?:-(?:start|end))?|inline(?:-(?:start|end))?))?(?:-width)?|' +
+  'outline(?:-width)?|' +
+  // Custom properties with "border-width" in name (e.g. --popover-border-width)
+  '--[a-z0-9-]*border-width[a-z0-9-]*';
+// Border-radius property names → --dt-size-radius-*
+const RADIUS_PROPS =
+  'border-radius|' +
+  'border-(?:top|bottom)-(?:left|right)-radius|' +
+  'border-(?:start|end)-(?:start|end)-radius|' +
+  // Custom properties with "radius" in name (e.g. --badge-radius, --notice-border-radius)
+  '--[a-z0-9-]*radius[a-z0-9-]*';
+export default {
+  description:
+    'Migrates --dt-size-* tokens based on CSS property context.\n' +
+    '- Border properties (border, border-width, outline) → var(--dt-size-border-*)\n\t' +
+      'eg. border: var(--dt-size-100) solid → border: var(--dt-size-border-100) solid\n' +
+    '- Border-radius properties → var(--dt-size-radius-*)\n\t' +
+      'eg. border-radius: var(--dt-size-300) → border-radius: var(--dt-size-radius-300)\n' +
+    '- Spacing properties (padding, margin, gap, inset) → var(--dt-spacing-*)\n\t' +
+      'eg. padding: var(--dt-size-400) → padding: var(--dt-spacing-100)\n' +
+    '- Layout properties (width, height, min/max, flex-basis) → var(--dt-layout-*)\n\t' +
+      'eg. width: var(--dt-size-700) → width: var(--dt-layout-100)\n' +
+    '- Percentage tokens → var(--dt-layout-*-percent)\n\t' +
+      'eg. var(--dt-size-100-percent) → var(--dt-layout-100-percent)\n' +
+    '- Tokens exceeding the layout scale (>1024px) are converted to raw rem with a TODO comment.\n' +
+    '- Also converts calc(var(--dt-spacing-*) * -1) → var(--dt-spacing-*-negative).\n' +
+    '- Unmapped tokens pass through unchanged — the lint rule will flag them.\n',
+  patterns: ['**/*.{css,less,scss,sass,styl,html,vue,md,js,ts,jsx,tsx}'],
+  globbyConfig: {
+    ignore: ['**/dialtone_migration_helper/tests/**'],
+  },
+  expressions: [
+    // Border-width context → --dt-size-border-* (must run before layout to win --*-border-width* conflicts)
+    {
+      from: new RegExp(
+        `((?:${BORDER_PROPS})\\s*:[^;]*?)var\\(--dt-size-([0-9]+)\\)`,
+        'gm',
+      ),
+      to: borderReplacer,
+    },
+    // Border-radius context → --dt-size-radius-* (must run before layout to win --*-radius* conflicts)
+    {
+      from: new RegExp(
+        `((?:${RADIUS_PROPS})\\s*:[^;]*?)var\\(--dt-size-([0-9]+)\\)`,
+        'gm',
+      ),
+      to: radiusReplacer,
+    },
+    // Percentage tokens → --dt-layout-*-percent (context-independent, straight prefix swap)
+    {
+      from: /var\(--dt-size-([0-9]+)-percent\)/g,
+      to: (match, stop) => `var(--dt-layout-${stop}-percent)`,
+    },
+    // Spacing-context properties → --dt-spacing-*
+    {
+      from: new RegExp(
+        `((?:${SPACING_PROPS})\\s*:[^;]*?)var\\(--dt-size-([0-9]+)(-negative|-percent)?\\)`,
+        'gm',
+      ),
+      to: spacingReplacer,
+    },
+    // Layout-context properties → --dt-layout-* (or raw rem for out-of-scale values)
+    {
+      from: new RegExp(
+        `((?:${LAYOUT_PROPS})\\s*:[^;]*?)var\\(--dt-size-([0-9]+)(-negative)?\\)`,
+        'gm',
+      ),
+      to: layoutReplacer,
+    },
+    // Default: remaining --dt-size-* not matched by a known property context → layout map
+    {
+      from: /var\(--dt-size-([0-9]+)(-negative|-percent)?\)/g,
+      to: (match, stop, suffix) => {
+        const s = Number(stop);
+        if (LAYOUT_MAP[s]) return `var(--dt-layout-${LAYOUT_MAP[s]}${suffix || ''})`;
+        if (RAW_FALLBACK[s]) {
+          return `${RAW_FALLBACK[s]} /* TODO: no --dt-layout-* equivalent for --dt-size-${s} — replace with a layout token when one is added */`;
+        }
+        return match;
+      },
+    },
+    // Cleanup: calc(var(--dt-spacing-*) * -1) → var(--dt-spacing-*-negative)
+    {
+      from: /calc\(var\(--dt-spacing-([a-z0-9]+)\)\s*\*\s*-1\)/g,
+      to: (match, stop) => `var(--dt-spacing-${stop}-negative)`,
+    },
+  ],
+};

package/lib/build/js/dialtone_migration_helper/configs/space-to-spacing.mjs ADDED Viewed

@@ -0,0 +1,48 @@
+// Lookup table: old --dt-space-{stop} → new --dt-spacing-{suffix}
+// Based on px value equivalence (8px base unit). Stops with no equivalent are left unchanged.
+const MAP = {
+  0: 'spacing-0',     // 0px
+  100: 'spacing-1',   // 1px
+  200: 'spacing-25',  // 2px
+  300: 'spacing-50',  // 4px
+  350: 'spacing-75',  // 6px
+  400: 'spacing-100', // 8px
+  450: 'spacing-150', // 12px
+  500: 'spacing-200', // 16px
+  525: 'spacing-250', // 20px
+  550: 'spacing-300', // 24px
+  600: 'spacing-400', // 32px
+  625: 'spacing-525', // 42px
+  650: 'spacing-600', // 48px
+  700: 'spacing-800', // 64px
+  // 720 (72px), 730 (84px), 750+ (96px+) have no --dt-spacing-* equivalent.
+  // Tokens at these sizes are better expressed as --dt-layout-* tokens.
+  // These are left unchanged for manual review — the lint rule will flag them.
+};
+export default {
+  description:
+    'Migrates --dt-space-* tokens to --dt-spacing-* tokens (8px base unit scale).\n' +
+    'This supersedes the space-to-size migration — run this instead of space-to-size.\n' +
+    '- Replaces var(--dt-space-{stop}) with var(--dt-spacing-{newSuffix})\n\t' +
+      'eg. var(--dt-space-400) → var(--dt-spacing-100)\n' +
+    '- Replaces var(--dt-space-{stop}-negative) with var(--dt-spacing-{newSuffix}-negative)\n\t' +
+      'eg. var(--dt-space-400-negative) → var(--dt-spacing-100-negative)\n' +
+    '- Replaces var(--dt-space-{stop}-percent) with var(--dt-spacing-{newSuffix}-percent)\n\t' +
+      'eg. var(--dt-space-400-percent) → var(--dt-spacing-100-percent)\n' +
+    '- Tokens with no equivalent (720, 730, 750+) are left unchanged for manual review.\n',
+  patterns: ['**/*.{css,less,scss,sass,styl,html,vue,md,js,ts,jsx,tsx}'],
+  globbyConfig: {
+    ignore: ['**/dialtone_migration_helper/tests/**'],
+  },
+  expressions: [
+    {
+      from: /var\(--dt-space-([0-9]+)(-negative|-percent)?\)/g,
+      to: (match, stop, suffix) => {
+        const newSuffix = MAP[Number(stop)];
+        if (newSuffix == null) return match;
+        return `var(--dt-${newSuffix}${suffix || ''})`;
+      },
+    },
+  ],
+};

package/lib/build/js/dialtone_migration_helper/configs/stack-gap-to-spacing.mjs ADDED Viewed

@@ -0,0 +1,88 @@
+// Mapping: old DtStack/DtDescriptionList gap prop values → new spacing stop numbers
+// The old gap values used --dt-size-* stop numbers; the new values use --dt-spacing-* stop numbers.
+const GAP_MAP = {
+  0: '0',       // 0px
+  50: '1',      // 0.5px → 1px
+  100: '1',     // 1px
+  200: '25',    // 2px
+  300: '50',    // 4px
+  350: '75',    // 6px
+  400: '100',   // 8px
+  450: '150',   // 12px
+  500: '200',   // 16px
+  525: '250',   // 20px
+  550: '300',   // 24px
+  600: '400',   // 32px
+  625: '525',   // 42px
+  650: '600',   // 48px
+  700: '800',   // 64px
+  // 50 (0.5px) maps to 1 (1px) — closest non-subpixel stop
+};
+// Values that only exist in the NEW system — if a file contains these,
+// it has already been migrated. Used to detect and skip double-migration.
+const NEW_ONLY_VALUES = new Set(['25', '75', '150', '250', '525']);
+function isAlreadyMigrated (content) {
+  // Check for gap values that only exist in the new system
+  // If any are found, this file was already migrated
+  return [...NEW_ONLY_VALUES].some(v =>
+    content.includes(`gap="${v}"`) ||
+    content.includes(`gap="'${v}'"`) ||
+    content.includes(`d-stack--gap-${v}`) ||
+    content.includes(`d-description-list--gap-${v}`),
+  );
+}
+export default {
+  description:
+    'Migrates DtStack and DtDescriptionList gap prop values from old size stops to new spacing stops.\n' +
+    '- Replaces gap="400" with gap="100" (8px)\n' +
+    '- Replaces :gap="\'400\'" with :gap="\'100\'" (8px)\n' +
+    '- Also handles d-stack--gap-* and d-description-list--gap-* CSS class references.\n' +
+    '- gap="50" (0.5px) maps to gap="1" (1px) — closest non-subpixel stop.\n' +
+    '- SAFE TO RE-RUN: detects already-migrated files by checking for new-only values (25, 75, 150, 250, 525).\n',
+  patterns: ['**/*.{vue,html,js,ts,jsx,tsx,md}'],
+  globbyConfig: {
+    ignore: ['**/dialtone_migration_helper/tests/**'],
+  },
+  expressions: [
+    // gap="400" → gap="100" (static prop)
+    {
+      from: /gap="([0-9]+)"/g,
+      to: (match, value) => {
+        const mapped = GAP_MAP[Number(value)];
+        return mapped != null ? `gap="${mapped}"` : match;
+      },
+    },
+    // :gap="'400'" → :gap="'100'" (dynamic prop with string literal)
+    {
+      from: /:gap="'([0-9]+)'"/g,
+      to: (match, value) => {
+        const mapped = GAP_MAP[Number(value)];
+        return mapped != null ? `:gap="'${mapped}'"` : match;
+      },
+    },
+    // d-stack--gap-400 → d-stack--gap-100 (CSS class references in templates/JS)
+    {
+      from: /d-stack--gap-([0-9]+)/g,
+      to: (match, value) => {
+        const mapped = GAP_MAP[Number(value)];
+        return mapped != null ? `d-stack--gap-${mapped}` : match;
+      },
+    },
+    // d-description-list--gap-400 → d-description-list--gap-100 (CSS class references)
+    {
+      from: /d-description-list--gap-([0-9]+)/g,
+      to: (match, value) => {
+        const mapped = GAP_MAP[Number(value)];
+        return mapped != null ? `d-description-list--gap-${mapped}` : match;
+      },
+    },
+  ],
+  // Called by the migration helper before processing each file.
+  // Return false to skip the file (already migrated).
+  shouldProcessFile (content) {
+    return !isAlreadyMigrated(content);
+  },
+};

package/lib/build/js/dialtone_migration_helper/configs/utility-class-to-token-stops.mjs ADDED Viewed

@@ -0,0 +1,135 @@
+// Migration: old pixel-based utility class names → new token-stop-based class names
+// e.g. d-h16 → d-h-25, d-p8 → d-p-100, d-m8 → d-m-100
+// Sizing: pixel value → layout token stop
+// MUST STAY IN SYNC with WIDTH_HEIGHTS_LAYOUT in dialtone-css/postcss/constants.cjs
+const SIZING_MAP = {
+  16: '25', 32: '50', 48: '75', 64: '100', 80: '125', 96: '150',
+  112: '175', 128: '200', 160: '250', 192: '300', 224: '350', 256: '400',
+  288: '450', 320: '500', 352: '550', 384: '600', 416: '650', 448: '700',
+  480: '750', 512: '800', 544: '850', 576: '900', 608: '950', 640: '1000',
+  672: '1050', 704: '1100', 736: '1150', 768: '1200', 800: '1250',
+  832: '1300', 864: '1350', 896: '1400', 928: '1450', 960: '1500',
+  992: '1550', 1024: '1600',
+};
+// Small sizing values (0-12px) that map to spacing tokens, not layout tokens.
+// These old classes (d-h0, d-h1, d-h2, etc.) don't have a layout-stop equivalent.
+// They should be migrated to use the spacing token directly in CSS rather than a utility class,
+// or left as-is since the old classes still work.
+// Spacing: pixel value → spacing token stop
+// MUST STAY IN SYNC with GAP_SPACES_SPACING / MARGIN_SIZES_SPACING / PADDING_SIZES_SPACING in dialtone-css/postcss/constants.cjs
+const SPACING_MAP = {
+  0: '0', 1: '1', 2: '25', 4: '50', 6: '75', 8: '100',
+  10: '125', 12: '150', 14: '175', 16: '200', 20: '250', 24: '300',
+  32: '400', 48: '600', 64: '800',
+};
+// Negative spacing: old notation (n8) → new notation (n100)
+const NEGATIVE_SPACING_MAP = {
+  1: '1', 2: '25', 4: '50', 6: '75', 8: '100',
+  10: '125', 12: '150', 14: '175', 16: '200', 20: '250', 24: '300',
+  32: '400', 48: '600', 64: '800',
+};
+// Layout sizes for margin/padding (96px, 128px use layout tokens)
+const SPACING_LAYOUT_MAP = {
+  96: '150', 128: '200',
+};
+// Helper: build regex that matches class names with word boundaries
+// Sorted by descending key length to avoid partial matches (d-h1024 before d-h102)
+function buildClassRegex (prefix, map) {
+  const keys = Object.keys(map).sort((a, b) => b.length - a.length || Number(b) - Number(a));
+  const pattern = keys.join('|');
+  // Match class name boundary: preceded by space, quote, or start; followed by space, quote, or end
+  return new RegExp(`((?:^|["'\\s]))${prefix}(${pattern})((?:["'\\s]|$))`, 'gm');
+}
+export default {
+  description:
+    'Migrates pixel-based utility class names to token-stop-based names.\n' +
+    '- Sizing: d-h16 → d-h-25, d-w64 → d-w-100, d-hmn96 → d-hmn-150\n' +
+    '- Margin: d-m8 → d-m-100, d-mt16 → d-mt-200, d-mtn8 → d-mt-n100\n' +
+    '- Padding: d-p8 → d-p-100, d-pt16 → d-pt-200\n' +
+    '- Gap: d-g8 → d-g-100, d-rg16 → d-rg-200\n' +
+    '- Position: d-t8 → d-t-100, d-tn8 → d-t-n100\n' +
+    '- Old deprecated sizes (d-h72, d-w332, etc.) are left unchanged for manual review.\n',
+  patterns: ['**/*.{vue,html,js,ts,jsx,tsx,md,less,css}'],
+  globbyConfig: {
+    ignore: ['**/dialtone_migration_helper/tests/**', '**/node_modules/**'],
+  },
+  expressions: [
+    // ── Sizing: d-h{px} → d-h-{layout-stop} ──────────────────────────────
+    ...['h', 'w', 'hmn', 'hmx', 'wmn', 'wmx'].flatMap(prefix => [
+      // Layout sizes (16px+)
+      {
+        from: buildClassRegex(`d-${prefix}`, SIZING_MAP),
+        to: (match, pre, px, post) => `${pre}d-${prefix}-${SIZING_MAP[px]}${post}`,
+      },
+      // Layout sizes for 96/128 (margin/padding also uses these for sizing)
+      {
+        from: buildClassRegex(`d-${prefix}`, SPACING_LAYOUT_MAP),
+        to: (match, pre, px, post) => `${pre}d-${prefix}-${SPACING_LAYOUT_MAP[px]}${post}`,
+      },
+    ]),
+    // ── Margin: d-m{px} → d-m-{spacing-stop} ─────────────────────────────
+    ...['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my'].flatMap(prefix => [
+      // Spacing sizes (0-64px)
+      {
+        from: buildClassRegex(`d-${prefix}`, SPACING_MAP),
+        to: (match, pre, px, post) => `${pre}d-${prefix}-${SPACING_MAP[px]}${post}`,
+      },
+      // Layout sizes (96, 128px)
+      {
+        from: buildClassRegex(`d-${prefix}`, SPACING_LAYOUT_MAP),
+        to: (match, pre, px, post) => `${pre}d-${prefix}-${SPACING_LAYOUT_MAP[px]}${post}`,
+      },
+    ]),
+    // ── Negative margin: d-m{dir}n{px} → d-m{dir}-n{spacing-stop} ────────
+    ...['mt', 'mr', 'mb', 'ml', 'mx', 'my', 'm'].map(prefix => ({
+      from: buildClassRegex(`d-${prefix}n`, NEGATIVE_SPACING_MAP),
+      to: (match, pre, px, post) => `${pre}d-${prefix}-n${NEGATIVE_SPACING_MAP[px]}${post}`,
+    })),
+    // ── Padding: d-p{px} → d-p-{spacing-stop} ────────────────────────────
+    ...['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py'].flatMap(prefix => [
+      {
+        from: buildClassRegex(`d-${prefix}`, SPACING_MAP),
+        to: (match, pre, px, post) => `${pre}d-${prefix}-${SPACING_MAP[px]}${post}`,
+      },
+      {
+        from: buildClassRegex(`d-${prefix}`, SPACING_LAYOUT_MAP),
+        to: (match, pre, px, post) => `${pre}d-${prefix}-${SPACING_LAYOUT_MAP[px]}${post}`,
+      },
+    ]),
+    // ── Gap: d-g{px} → d-g-{spacing-stop} ────────────────────────────────
+    ...['g', 'rg', 'cg'].map(prefix => ({
+      from: buildClassRegex(`d-${prefix}`, SPACING_MAP),
+      to: (match, pre, px, post) => `${pre}d-${prefix}-${SPACING_MAP[px]}${post}`,
+    })),
+    // ── Position: d-t{px} → d-t-{spacing-stop} ───────────────────────────
+    ...['t', 'r', 'b', 'l', 'x', 'y', 'all'].flatMap(prefix => [
+      {
+        from: buildClassRegex(`d-${prefix}`, SPACING_MAP),
+        to: (match, pre, px, post) => `${pre}d-${prefix}-${SPACING_MAP[px]}${post}`,
+      },
+      // Layout position sizes (96px)
+      {
+        from: buildClassRegex(`d-${prefix}`, SPACING_LAYOUT_MAP),
+        to: (match, pre, px, post) => `${pre}d-${prefix}-${SPACING_LAYOUT_MAP[px]}${post}`,
+      },
+    ]),
+    // ── Negative position: d-{dir}n{px} → d-{dir}-n{spacing-stop} ────────
+    ...['t', 'r', 'b', 'l', 'x', 'y', 'all'].map(prefix => ({
+      from: buildClassRegex(`d-${prefix}n`, NEGATIVE_SPACING_MAP),
+      to: (match, pre, px, post) => `${pre}d-${prefix}-n${NEGATIVE_SPACING_MAP[px]}${post}`,
+    })),
+  ],
+};