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

package/lib/dist/js/dialtone_migrate_flex_to_stack/examples-edge-cases.vue

@@ -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/dist/js/dialtone_migrate_flex_to_stack/index.mjs

@@ -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/dist/js/dialtone_migration_helper/configs/size-to-layout.mjs

@@ -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/dist/js/dialtone_migration_helper/configs/space-to-spacing.mjs

@@ -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/dist/js/dialtone_migration_helper/configs/stack-gap-to-spacing.mjs

@@ -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/dist/js/dialtone_migration_helper/configs/utility-class-to-token-stops.mjs

@@ -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}`,
+    })),
+  ],
+};