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

package/lib/dist/js/dialtone_migration_helper/configs/base-to-semantic.mjs

@@ -8,8 +8,8 @@ const FOREGROUND_MAP = {
   'black-900': 'primary',
   'red-600': 'critical',
   'red-700': 'critical-strong',
-  'green-800': 'success',
-  'green-900': 'success-strong',
+  'green-800': 'positive',
+  'green-900': 'positive-strong',
   'gold-800': 'warning',
 };
 
@@ -26,9 +26,9 @@ const SURFACE_MAP = {
   'gold-50': 'warning-subtle',
   'gold-100': 'warning',
   'gold-400': 'warning-strong',
-  'green-50': 'success-subtle',
-  'green-100': 'success',
-  'green-800': 'success-strong',
+  'green-50': 'positive-subtle',
+  'green-100': 'positive',
+  'green-800': 'positive-strong',
   'blue-50': 'info-subtle',
   'blue-100': 'info',
   'blue-800': 'info-strong',
@@ -41,9 +41,9 @@ const BORDER_MAP = {
   'red-300': 'critical-subtle',
   'red-600': 'critical',
   'red-800': 'critical-strong',
-  'green-300': 'success-subtle',
-  'green-700': 'success',
-  'green-900': 'success-strong',
+  'green-300': 'positive-subtle',
+  'green-700': 'positive',
+  'green-900': 'positive-strong',
   'gold-300': 'warning-subtle',
   'gold-500': 'warning',
   'gold-700': 'warning-strong',

package/lib/dist/js/dialtone_migration_helper/configs/size-to-layout.mjs

@@ -22,6 +22,14 @@ const SPACING_MAP = {
 // For tokens used in layout context (width, height, etc.)
 // Exact matches are labeled; nearest-neighbor approximations note the delta.
 const LAYOUT_MAP = {
+  // Off-scale pixel-indexed exceptions (DLT-3330) — exact matches via Npx stops.
+  // Old --dt-size-N stop at these pixel values has no scale-indexed layout equivalent;
+  // route to the off-scale Npx token in layout-property context.
+  100: '1px',   // 1px
+  200: '2px',   // 2px
+  400: '8px',   // 8px
+  525: '20px',  // 20px
+  550: '24px',  // 24px
   // Exact scale matches
   500: '25',    // 16px
   600: '50',    // 32px
@@ -144,6 +152,8 @@ export default {
       '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' +
+    '- Off-scale layout exceptions: width: var(--dt-size-400) → width: var(--dt-layout-8px)\n\t' +
+      '(covers 100/200/400/525/550 stops → 1px/2px/8px/20px/24px in layout context only)\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' +

package/lib/dist/js/dialtone_migration_helper/configs/success-to-positive.mjs

@@ -0,0 +1,73 @@
+// Migration: deprecated `success` color tokens and utility classes → `positive`.
+//
+// Suffixes are enumerated and anchored so words like "successful" /
+// "successfully" (which start with "success") are NOT matched — matches must
+// be followed by `)`, end-of-class boundary, or one of the known suffix tails.
+
+const SUFFIX_ALTERNATION =
+  '-subtle-opaque-inverted|' +
+  '-subtle-opaque|' +
+  '-subtle-inverted|' +
+  '-strong-inverted|' +
+  '-opaque-inverted|' +
+  '-inverted-hover|' +
+  '-subtle|' +
+  '-strong|' +
+  '-opaque|' +
+  '-inverted|' +
+  '-hover';
+
+const SUCCESS_WITH_SUFFIX = `success((?:${SUFFIX_ALTERNATION})?)`;
+
+// Left-edge boundary: previous character must not be a class-name character.
+// Prevents `my-d-fc-success` from being rewritten to `my-d-fc-positive`.
+const CLASS_BOUNDARY_START = `(?<![A-Za-z0-9_-])`;
+
+// Right-edge boundary for utility-class matches: end-of-string, whitespace,
+// quote, `>`, `<`, `:`, `=`, `,`, `;`, `}`, `)`, `]`, `(`, `[`, `!`, `\``,
+// `.`, `/`. Prevents `d-fc-successfoo` and partial extensions.
+const CLASS_BOUNDARY_END = `(?=$|[\\s"'><:=,;{}()\\[\\]!\`./])`;
+
+export default {
+  description:
+    'Renames deprecated `success` color references to `positive`.\n' +
+    '- CSS variables: var(--dt-color-{foreground|surface|border|link}-success*) →\n\t' +
+      'var(--dt-color-{foreground|surface|border|link}-positive*)\n\t' +
+      'eg. var(--dt-color-foreground-success-strong) → var(--dt-color-foreground-positive-strong)\n' +
+    '- Component-specific tokens: var(--dt-badge-color-background-success) →\n\t' +
+      'var(--dt-badge-color-background-positive); var(--dt-inputs-color-border-success) →\n\t' +
+      'var(--dt-inputs-color-border-positive).\n' +
+    '- Utility classes: d-{fc|bgc|bc}-success* → d-{fc|bgc|bc}-positive*\n\t' +
+      'eg. d-bgc-success-subtle-opaque → d-bgc-positive-subtle-opaque\n' +
+    '- Suffix variants covered: -subtle, -strong, -opaque, -subtle-opaque,\n\t' +
+      '-inverted, -subtle-inverted, -strong-inverted, -opaque-inverted,\n\t' +
+      '-subtle-opaque-inverted, -hover, -inverted-hover.\n' +
+    '- The match is anchored so unrelated identifiers like "successful" or\n\t' +
+      '"successfully" are NOT touched.\n',
+  patterns: ['**/*.{css,less,scss,sass,styl,html,vue,md,js,ts,jsx,tsx}'],
+  globbyConfig: {
+    ignore: ['**/dialtone_migration_helper/tests/**'],
+  },
+  expressions: [
+    // CSS variable: var(--dt-color-{role}-success{suffix?})
+    {
+      from: new RegExp(`var\\(--dt-color-(foreground|surface|border|link)-${SUCCESS_WITH_SUFFIX}\\)`, 'g'),
+      to: (_match, role, suffix) => `var(--dt-color-${role}-positive${suffix})`,
+    },
+    // Component-specific tokens that DLT-3331's initial sweep missed (no suffix variants).
+    {
+      from: /var\(--dt-badge-color-background-success\)/g,
+      to: () => 'var(--dt-badge-color-background-positive)',
+    },
+    {
+      from: /var\(--dt-inputs-color-border-success\)/g,
+      to: () => 'var(--dt-inputs-color-border-positive)',
+    },
+    // Utility class: d-{fc|bgc|bc}-success{suffix?}. d-fc-* covers stragglers
+    // from the base-to-semantic foreground rename.
+    {
+      from: new RegExp(`${CLASS_BOUNDARY_START}d-(fc|bgc|bc)-${SUCCESS_WITH_SUFFIX}${CLASS_BOUNDARY_END}`, 'g'),
+      to: (_match, prefix, suffix) => `d-${prefix}-positive${suffix}`,
+    },
+  ],
+};

package/lib/dist/js/dialtone_migration_helper/configs/utility-class-to-token-stops.mjs

@@ -2,8 +2,13 @@
 // 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
+// MUST STAY IN SYNC with LAYOUT_STOPS in dialtone-css/postcss/constants.cjs
+// Off-scale pixel-indexed exceptions (1, 2, 8, 20, 24) map to the Npx stops
+// introduced in DLT-3330; scale-indexed values (16+) map to the 64px-base stops.
 const SIZING_MAP = {
+  // Off-scale pixel-indexed exceptions
+  1: '1px', 2: '2px', 8: '8px', 20: '20px', 24: '24px',
+  // Scale-indexed stops (64px base)
   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',
@@ -13,10 +18,8 @@ const SIZING_MAP = {
   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.
+// Remaining off-scale sizing values without a layout-token equivalent (4, 6, 10, 12, 14)
+// are left on the Tier 1 calc-based legacy path and pass through unchanged.
 
 // 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
@@ -38,27 +41,82 @@ 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)
+// Border-radius: legacy pixel value → new radius token stop
+// MUST STAY IN SYNC with RADIUS_STOPS in dialtone-css/postcss/constants.cjs.
+const RADIUS_MAP = {
+  0: '0', 1: '100', 2: '200', 4: '300', 6: '350',
+  8: '400', 12: '450', 16: '500', 24: '550', 32: '600',
+};
+
+// Border-radius: legacy physical-side prefix → new logical prefix.
+const RADIUS_PAIR_PREFIX_MAP = {
+  btr: 'bbsr', // top    → block-start pair
+  bbr: 'bber', // bottom → block-end pair
+  blr: 'bisr', // left   → inline-start pair
+  brr: 'bier', // right  → inline-end pair
+};
+
+// Class-name boundary: preceded by space, quote, or start; followed by space, quote, or end.
+const CLASS_BOUNDARY_LEFT = `((?:^|["'\\s]))`;
+const CLASS_BOUNDARY_RIGHT = `((?:["'\\s]|$))`;
+
+// Build regex that matches class names ending in any key from `map`, with boundaries.
+// Keys sorted by descending 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');
+  return new RegExp(`${CLASS_BOUNDARY_LEFT}${prefix}(${keys.join('|')})${CLASS_BOUNDARY_RIGHT}`, 'gm');
+}
+
+// Variant for fixed-keyword suffixes (e.g. `-pill`, `-circle`).
+function buildKeywordClassRegex (prefix, keyword) {
+  return new RegExp(`${CLASS_BOUNDARY_LEFT}${prefix}-${keyword}${CLASS_BOUNDARY_RIGHT}`, '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' +
+    '- Off-scale sizing: d-w1 → d-w-1px, d-h24 → d-h-24px (pixel-indexed exceptions)\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' +
+    '- Border-radius all: d-bar6 → d-bar-350, d-bar24 → d-bar-550\n' +
+    '- Border-radius pair (physical → logical): d-btr6 → d-bbsr-350, d-bbr8 → d-bber-400, d-blr12 → d-bisr-450, d-brr16 → d-bier-500\n' +
+    '- Border-radius pair keyword: d-btr-pill → d-bbsr-pill, d-brr-circle → d-bier-circle\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}'],
+  patterns: ['**/*.{vue,html,js,ts,jsx,tsx,md,mdx,less,css}'],
   globbyConfig: {
-    ignore: ['**/dialtone_migration_helper/tests/**', '**/node_modules/**'],
+    // Include dotfiles/dotdirs so tooling directories like `.vuepress/baseComponents/`,
+    // `.storybook/`, and per-repo docs folders are scanned. Dotted build-output caches are
+    // explicitly excluded below.
+    dot: true,
+    ignore: [
+      '**/node_modules/**',
+      // `dot: true` makes dot-dirs globbable; explicitly exclude the git directory.
+      '**/.git/**',
+      // Built outputs: regenerated on next build; rewriting selectors in co-selected rules
+      // (`.d-bar-350, .d-bar6 { ... }`) would corrupt them since the leading whitespace
+      // before the legacy selector looks like a class boundary to the regex.
+      '**/dist/**',
+      '**/build/**',
+      '**/lib/dist/**',
+      // Framework caches
+      '**/.cache/**',
+      '**/.vite/**',
+      '**/.vuepress/.cache/**',
+      '**/.vuepress/.temp/**',
+      '**/.vuepress/dist/**',
+      '**/.next/**',
+      '**/.nuxt/**',
+      '**/.turbo/**',
+      '**/.nx/**',
+      // Migration-helper test fixtures intentionally contain legacy class names.
+      '**/dialtone_migration_helper/tests/**',
+      // ESLint-plugin rules and tests inherently contain legacy class names as regex patterns
+      // and test inputs — they're the tool that detects the legacy classes, don't rewrite them.
+      '**/eslint-plugin-dialtone/**',
+    ],
   },
   expressions: [
     // ── Sizing: d-h{px} → d-h-{layout-stop} ──────────────────────────────
@@ -131,5 +189,27 @@ export default {
       from: buildClassRegex(`d-${prefix}n`, NEGATIVE_SPACING_MAP),
       to: (match, pre, px, post) => `${pre}d-${prefix}-n${NEGATIVE_SPACING_MAP[px]}${post}`,
     })),
+
+    // ── Border-radius all-corners numeric: d-bar{px} → d-bar-{stop} ──────
+    {
+      from: buildClassRegex('d-bar', RADIUS_MAP),
+      to: (match, pre, px, post) => `${pre}d-bar-${RADIUS_MAP[px]}${post}`,
+    },
+
+    // ── Border-radius side-pair numeric: d-{legacy}{px} → d-{logical}-{stop}
+    // Physical pair prefixes (btr/bbr/blr/brr) rewrite to their logical siblings (bbsr/bber/bisr/bier).
+    ...Object.entries(RADIUS_PAIR_PREFIX_MAP).map(([legacy, logical]) => ({
+      from: buildClassRegex(`d-${legacy}`, RADIUS_MAP),
+      to: (match, pre, px, post) => `${pre}d-${logical}-${RADIUS_MAP[px]}${post}`,
+    })),
+
+    // ── Border-radius side-pair keyword: d-{legacy}-{pill|circle} → d-{logical}-{pill|circle}
+    // Legacy `.d-bar-pill` / `.d-bar-circle` stay as-is (same name in the new scheme).
+    ...Object.entries(RADIUS_PAIR_PREFIX_MAP).flatMap(([legacy, logical]) =>
+      ['pill', 'circle'].map(keyword => ({
+        from: buildKeywordClassRegex(`d-${legacy}`, keyword),
+        to: (match, pre, post) => `${pre}d-${logical}-${keyword}${post}`,
+      })),
+    ),
   ],
 };

package/lib/dist/js/dialtone_migration_helper/tests/base-to-semantic-test-examples.vue

@@ -14,8 +14,8 @@
   <p class="d-fc-black-900">primary text</p>
   <p class="d-fc-red-600">critical text</p>
   <p class="d-fc-red-700">critical-strong text</p>
-  <p class="d-fc-green-800">success text</p>
-  <p class="d-fc-green-900">success-strong text</p>
+  <p class="d-fc-green-800">positive text</p>
+  <p class="d-fc-green-900">positive-strong text</p>
   <p class="d-fc-gold-800">warning text</p>
 
   <!-- Unmapped foreground classes (should NOT be replaced) -->
@@ -41,9 +41,9 @@
   <div class="d-bgc-gold-50">warning-subtle</div>
   <div class="d-bgc-gold-100">warning</div>
   <div class="d-bgc-gold-400">warning-strong</div>
-  <div class="d-bgc-green-50">success-subtle</div>
-  <div class="d-bgc-green-100">success</div>
-  <div class="d-bgc-green-800">success-strong</div>
+  <div class="d-bgc-green-50">positive-subtle</div>
+  <div class="d-bgc-green-100">positive</div>
+  <div class="d-bgc-green-800">positive-strong</div>
   <div class="d-bgc-blue-50">info-subtle</div>
   <div class="d-bgc-blue-100">info</div>
   <div class="d-bgc-blue-800">info-strong</div>
@@ -62,9 +62,9 @@
   <div class="d-bc-red-300">critical-subtle</div>
   <div class="d-bc-red-600">critical</div>
   <div class="d-bc-red-800">critical-strong</div>
-  <div class="d-bc-green-300">success-subtle</div>
-  <div class="d-bc-green-700">success</div>
-  <div class="d-bc-green-900">success-strong</div>
+  <div class="d-bc-green-300">positive-subtle</div>
+  <div class="d-bc-green-700">positive</div>
+  <div class="d-bc-green-900">positive-strong</div>
   <div class="d-bc-gold-300">warning-subtle</div>
   <div class="d-bc-gold-500">warning</div>
   <div class="d-bc-gold-700">warning-strong</div>
@@ -78,14 +78,14 @@
   <!-- ============================================ -->
 
   <div class="d-divide-red-600">critical divide</div>
-  <div class="d-divide-green-700">success divide</div>
+  <div class="d-divide-green-700">positive divide</div>
 
   <!-- ============================================ -->
   <!-- PSEUDO & RESPONSIVE PREFIXED -->
   <!-- ============================================ -->
 
   <p class="h:d-fc-red-600">hover critical text</p>
-  <p class="f:d-fc-green-800">focus success text</p>
+  <p class="f:d-fc-green-800">focus positive text</p>
   <div class="sm:d-bgc-black-100">responsive secondary surface</div>
   <div class="md:d-bc-red-600">responsive critical border</div>
 

package/lib/dist/js/dialtone_migration_helper/tests/base-to-semantic.test.mjs

@@ -16,20 +16,20 @@ describe('base-to-semantic config', () => {
     ['FOREGROUND_MAP', 'fc', [
       ['black-600', 'tertiary'], ['black-700', 'secondary'], ['black-900', 'primary'],
       ['red-600', 'critical'], ['red-700', 'critical-strong'],
-      ['green-800', 'success'], ['green-900', 'success-strong'], ['gold-800', 'warning'],
+      ['green-800', 'positive'], ['green-900', 'positive-strong'], ['gold-800', 'warning'],
     ]],
     ['SURFACE_MAP', 'bgc', [
       ['black-50', 'primary'], ['black-100', 'secondary'], ['black-200', 'moderate'],
       ['black-300', 'bold'], ['black-600', 'strong'], ['black-800', 'contrast'],
       ['red-50', 'critical-subtle'], ['red-100', 'critical'], ['red-600', 'critical-strong'],
       ['gold-50', 'warning-subtle'], ['gold-100', 'warning'], ['gold-400', 'warning-strong'],
-      ['green-50', 'success-subtle'], ['green-100', 'success'], ['green-800', 'success-strong'],
+      ['green-50', 'positive-subtle'], ['green-100', 'positive'], ['green-800', 'positive-strong'],
       ['blue-50', 'info-subtle'], ['blue-100', 'info'], ['blue-800', 'info-strong'],
       ['purple-50', 'brand-subtle'], ['purple-100', 'brand'], ['purple-600', 'brand-strong'],
     ]],
     ['BORDER_MAP', 'bc', [
       ['red-300', 'critical-subtle'], ['red-600', 'critical'], ['red-800', 'critical-strong'],
-      ['green-300', 'success-subtle'], ['green-700', 'success'], ['green-900', 'success-strong'],
+      ['green-300', 'positive-subtle'], ['green-700', 'positive'], ['green-900', 'positive-strong'],
       ['gold-300', 'warning-subtle'], ['gold-500', 'warning'], ['gold-700', 'warning-strong'],
       ['purple-300', 'brand-subtle'], ['purple-600', 'brand'], ['purple-800', 'brand-strong'],
       ['blue-500', 'focus'],
@@ -50,8 +50,8 @@ describe('base-to-semantic config', () => {
     it('d-divide-red-600 → d-divide-critical', () => {
       assert.equal(apply('d-divide-red-600'), 'd-divide-critical');
     });
-    it('d-divide-green-700 → d-divide-success', () => {
-      assert.equal(apply('d-divide-green-700'), 'd-divide-success');
+    it('d-divide-green-700 → d-divide-positive', () => {
+      assert.equal(apply('d-divide-green-700'), 'd-divide-positive');
     });
   });
 
@@ -99,14 +99,14 @@ describe('base-to-semantic config', () => {
       ['.a { background: var(--dt-color-black-100) url(\'b.png\') no-repeat center; }',
         'surface-secondary', 'bg: color before image'],
       ['.a { background: url(\'i.svg\') no-repeat var(--dt-color-green-100); }',
-        'surface-success', 'bg: color after image'],
+        'surface-positive', 'bg: color after image'],
       ['.a { background: var(--dt-color-blue-100) no-repeat center / cover; }',
         'surface-info', 'bg: color + size shorthand'],
       ['.a { background: var(--dt-color-red-50) url(\'t.png\') repeat-x top left; }',
         'surface-critical-subtle', 'bg: color + image + repeat + position'],
       // border-color → border
       ['.a { border-color: var(--dt-color-red-600); }', 'border-critical', 'border-color:'],
-      ['.a { border-top-color: var(--dt-color-green-700); }', 'border-success', 'border-top-color:'],
+      ['.a { border-top-color: var(--dt-color-green-700); }', 'border-positive', 'border-top-color:'],
       // border shorthand
       ['.a { border: var(--dt-size-border-300) solid var(--dt-color-red-600); }',
         'border-critical', 'border shorthand'],
@@ -114,7 +114,7 @@ describe('base-to-semantic config', () => {
       ['.a { border-block-start: var(--dt-size-border-100) solid var(--dt-color-red-600); }',
         'border-critical', 'border-block-start'],
       ['.a { border-inline-end-color: var(--dt-color-green-700); }',
-        'border-success', 'border-inline-end-color'],
+        'border-positive', 'border-inline-end-color'],
       ['.a { border-block-end-color: var(--dt-color-gold-500); }',
         'border-warning', 'border-block-end-color'],
     ];

package/lib/dist/js/dialtone_migration_helper/tests/size-to-layout-test-examples.vue

@@ -27,6 +27,13 @@
   <div :style="{ height: 'var(--dt-size-800)' }">size-800 on height → layout-200</div>
   <div :style="{ maxWidth: 'var(--dt-size-1000)' }">size-1000 on max-width → layout-800</div>
 
+  <!-- Off-scale pixel-indexed exceptions (DLT-3330) — layout context only -->
+  <div :style="{ width: 'var(--dt-size-100)' }">size-100 on width → layout-1px</div>
+  <div :style="{ height: 'var(--dt-size-200)' }">size-200 on height → layout-2px</div>
+  <div :style="{ minInlineSize: 'var(--dt-size-400)' }">size-400 on min-inline-size → layout-8px</div>
+  <div :style="{ maxWidth: 'var(--dt-size-525)' }">size-525 on max-width → layout-20px</div>
+  <div :style="{ blockSize: 'var(--dt-size-550)' }">size-550 on block-size → layout-24px</div>
+
   <!-- Skip: already-migrated tokens -->
   <div :style="{ width: 'var(--dt-layout-100)' }">already layout-100</div>
   <p :style="{ padding: 'var(--dt-spacing-100)' }">already spacing-100</p>
@@ -113,6 +120,15 @@
   inline-size: var(--dt-size-1100);   /* → layout-1600 (1024px) */
 }
 
+/* off-scale pixel-indexed exceptions (DLT-3330) — only route in layout context */
+.test-width-off-scale {
+  inline-size: var(--dt-size-100);     /* → layout-1px  (1px)  */
+  block-size: var(--dt-size-200);      /* → layout-2px  (2px)  */
+  min-inline-size: var(--dt-size-400); /* → layout-8px  (8px)  */
+  max-inline-size: var(--dt-size-525); /* → layout-20px (20px) */
+  max-block-size: var(--dt-size-550);  /* → layout-24px (24px) */
+}
+
 /* height */
 .test-height {
   block-size: var(--dt-size-700);

package/lib/dist/js/dialtone_migration_helper/tests/size-to-layout.test.mjs

@@ -0,0 +1,87 @@
+import { describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+import config from '../configs/size-to-layout.mjs';
+import { applyConfig } from './helpers.mjs';
+
+const apply = (input) => applyConfig(config, input);
+
+describe('size-to-layout config', () => {
+  // ─── Off-scale pixel-indexed exceptions (DLT-3330) ────────────────────
+  //
+  // Layout-property context only: old --dt-size-N stop at these pixel values
+  // maps to the off-scale --dt-layout-Npx token.
+  // 100 → 1px, 200 → 2px, 400 → 8px, 525 → 20px, 550 → 24px
+
+  describe('off-scale exceptions — layout context routes to --dt-layout-Npx', () => {
+    const offScaleCases = [
+      ['width',           '--dt-size-100', '--dt-layout-1px'],
+      ['height',          '--dt-size-200', '--dt-layout-2px'],
+      ['min-inline-size', '--dt-size-400', '--dt-layout-8px'],
+      ['max-width',       '--dt-size-525', '--dt-layout-20px'],
+      ['block-size',      '--dt-size-550', '--dt-layout-24px'],
+      ['inline-size',     '--dt-size-100', '--dt-layout-1px'],
+      ['min-height',      '--dt-size-400', '--dt-layout-8px'],
+      ['flex-basis',      '--dt-size-400', '--dt-layout-8px'],
+    ];
+
+    for (const [prop, from, to] of offScaleCases) {
+      it(`${prop}: var(${from}) → var(${to})`, () => {
+        const result = apply(`.x { ${prop}: var(${from}); }`);
+        assert.equal(result, `.x { ${prop}: var(${to}); }`);
+      });
+    }
+  });
+
+  describe('off-scale exceptions — spacing context STILL routes to --dt-spacing-* (regression guard)', () => {
+    // These are the same stops, but used in spacing-property context.
+    // The LAYOUT_MAP additions must NOT leak into spacing routing.
+    const spacingRegressionCases = [
+      ['padding',        '--dt-size-100', '--dt-spacing-1'],
+      ['margin',         '--dt-size-200', '--dt-spacing-25'],
+      ['gap',            '--dt-size-400', '--dt-spacing-100'],
+      ['padding-block',  '--dt-size-525', '--dt-spacing-250'],
+      ['margin-inline',  '--dt-size-550', '--dt-spacing-300'],
+      ['inset',          '--dt-size-400', '--dt-spacing-100'],
+    ];
+
+    for (const [prop, from, to] of spacingRegressionCases) {
+      it(`${prop}: var(${from}) → var(${to})`, () => {
+        const result = apply(`.x { ${prop}: var(${from}); }`);
+        assert.equal(result, `.x { ${prop}: var(${to}); }`);
+      });
+    }
+  });
+
+  // ─── Existing scale-indexed behavior unchanged (smoke tests) ──────────
+
+  describe('scale-indexed stops — unchanged', () => {
+    const scaleCases = [
+      ['width',   '--dt-size-500',  '--dt-layout-25'],  // 16px
+      ['width',   '--dt-size-700',  '--dt-layout-100'], // 64px
+      ['width',   '--dt-size-1100', '--dt-layout-1600'], // 1024px
+      ['padding', '--dt-size-700',  '--dt-spacing-800'], // 64px
+      ['margin',  '--dt-size-500',  '--dt-spacing-200'], // 16px
+    ];
+
+    for (const [prop, from, to] of scaleCases) {
+      it(`${prop}: var(${from}) → var(${to})`, () => {
+        const result = apply(`.x { ${prop}: var(${from}); }`);
+        assert.equal(result, `.x { ${prop}: var(${to}); }`);
+      });
+    }
+  });
+
+  // ─── Logical properties and custom property name heuristics ───────────
+
+  describe('off-scale — custom property name heuristics', () => {
+    it('--panel-width: var(--dt-size-400) → --dt-layout-8px', () => {
+      const result = apply(`.x { --panel-width: var(--dt-size-400); }`);
+      assert.equal(result, `.x { --panel-width: var(--dt-layout-8px); }`);
+    });
+
+    it('--badge-padding-x: var(--dt-size-400) → --dt-spacing-100 (stays spacing)', () => {
+      const result = apply(`.x { --badge-padding-x: var(--dt-size-400); }`);
+      assert.equal(result, `.x { --badge-padding-x: var(--dt-spacing-100); }`);
+    });
+  });
+});