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

package/lib/build/js/dialtone_migrate_tshirt_to_numeric/test.mjs

@@ -0,0 +1,336 @@
+#!/usr/bin/env node
+
+/**
+ * @fileoverview Tests for dialtone-migrate-tshirt-to-numeric codemod.
+ * Run: node packages/dialtone-css/lib/build/js/dialtone_migrate_tshirt_to_numeric/test.mjs
+ */
+
+import assert from 'node:assert/strict';
+import { describe, it } from 'node:test';
+import { transformContent } from './index.mjs';
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('Basic size prop transforms', () => {
+  it('transforms size="xs" to :size="100"', () => {
+    const input = '<dt-button size="xs">Click</dt-button>';
+    const expected = '<dt-button :size="100">Click</dt-button>';
+    const { transformed, count } = transformContent(input);
+    assert.equal(transformed, expected);
+    assert.equal(count, 1);
+  });
+
+  it('transforms size="sm" to :size="200"', () => {
+    const input = '<dt-text size="sm">Hello</dt-text>';
+    const expected = '<dt-text :size="200">Hello</dt-text>';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+
+  it('transforms size="md" to :size="300"', () => {
+    const input = '<dt-input size="md" label="Name" />';
+    const expected = '<dt-input :size="300" label="Name" />';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+
+  it('transforms size="lg" to :size="400"', () => {
+    const input = '<dt-toggle size="lg" />';
+    const expected = '<dt-toggle :size="400" />';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+
+  it('transforms size="xl" to :size="500"', () => {
+    const input = '<dt-segmented-control size="xl" />';
+    const expected = '<dt-segmented-control :size="500" />';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+
+  it('transforms size="2xl" to :size="600"', () => {
+    const input = '<dt-text kind="headline" size="2xl">Title</dt-text>';
+    const expected = '<dt-text kind="headline" :size="600">Title</dt-text>';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+
+  it('transforms size="3xl" to :size="700"', () => {
+    const input = '<dt-text kind="headline" size="3xl">Title</dt-text>';
+    const expected = '<dt-text kind="headline" :size="700">Title</dt-text>';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+});
+
+describe('label-size prop transforms', () => {
+  it('transforms label-size="xs" to :label-size="100"', () => {
+    const input = '<dt-input label-size="xs" label="Name" />';
+    const expected = '<dt-input :label-size="100" label="Name" />';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+
+  it('transforms label-size="lg" to :label-size="400"', () => {
+    const input = '<dt-select-menu label-size="lg" />';
+    const expected = '<dt-select-menu :label-size="400" />';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+});
+
+describe('speed prop transforms', () => {
+  it('transforms speed="sm" to :speed="200"', () => {
+    const input = '<dt-motion-text speed="sm" text="Hello" />';
+    const expected = '<dt-motion-text :speed="200" text="Hello" />';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+
+  it('transforms speed="lg" to :speed="400"', () => {
+    const input = '<dt-motion-text speed="lg" text="Hello" />';
+    const expected = '<dt-motion-text :speed="400" text="Hello" />';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+});
+
+describe('Does NOT transform non-Dialtone components', () => {
+  it('ignores size on native elements', () => {
+    const input = '<div size="sm">Not a component</div>';
+    const { transformed, count } = transformContent(input);
+    assert.equal(transformed, input);
+    assert.equal(count, 0);
+  });
+
+  it('ignores size on non-dt components', () => {
+    const input = '<my-button size="sm">Click</my-button>';
+    const { transformed, count } = transformContent(input);
+    assert.equal(transformed, input);
+    assert.equal(count, 0);
+  });
+
+  it('ignores size on custom elements without dt- prefix', () => {
+    const input = '<app-select size="md" />';
+    const { transformed, count } = transformContent(input);
+    assert.equal(transformed, input);
+    assert.equal(count, 0);
+  });
+});
+
+describe('Does NOT transform already-numeric or dynamic values', () => {
+  it('ignores :size="200" (already numeric binding)', () => {
+    const input = '<dt-button :size="200">Click</dt-button>';
+    const { transformed, count } = transformContent(input);
+    assert.equal(transformed, input);
+    assert.equal(count, 0);
+  });
+
+  it('ignores :size="sm" (already a v-bind, consumer chose string)', () => {
+    const input = '<dt-button :size="sm">Click</dt-button>';
+    const { transformed, count } = transformContent(input);
+    assert.equal(transformed, input);
+    assert.equal(count, 0);
+  });
+
+  it('ignores :label-size="xs" (already a v-bind)', () => {
+    const input = '<dt-input :label-size="xs" />';
+    const { transformed, count } = transformContent(input);
+    assert.equal(transformed, input);
+    assert.equal(count, 0);
+  });
+
+  it('ignores :size="computedSize" (dynamic binding)', () => {
+    const input = '<dt-button :size="computedSize">Click</dt-button>';
+    const { transformed, count } = transformContent(input);
+    assert.equal(transformed, input);
+    assert.equal(count, 0);
+  });
+
+  it('ignores :size="iconSize" (icon size binding)', () => {
+    const input = '<dt-icon :size="iconSize" />';
+    const { transformed, count } = transformContent(input);
+    assert.equal(transformed, input);
+    assert.equal(count, 0);
+  });
+
+  it('ignores numeric string size="200" on dt-icon (icon scale)', () => {
+    const input = '<dt-icon size="200" name="phone" />';
+    const { transformed, count } = transformContent(input);
+    assert.equal(transformed, input);
+    assert.equal(count, 0);
+  });
+});
+
+describe('PascalCase component names', () => {
+  it('transforms DtButton size', () => {
+    const input = '<DtButton size="sm">Click</DtButton>';
+    const expected = '<DtButton :size="200">Click</DtButton>';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+
+  it('transforms DtText size', () => {
+    const input = '<DtText size="xl">Title</DtText>';
+    const expected = '<DtText :size="500">Title</DtText>';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+});
+
+describe('Multiple transforms in one tag', () => {
+  it('transforms size and label-size on same component', () => {
+    const input = '<dt-input size="lg" label-size="sm" label="Name" />';
+    const expected = '<dt-input :size="400" :label-size="200" label="Name" />';
+    const { transformed, count } = transformContent(input);
+    assert.equal(transformed, expected);
+    assert.equal(count, 2);
+  });
+});
+
+describe('Multiple components in one template', () => {
+  it('transforms all Dialtone components, ignores others', () => {
+    const input = `<template>
+  <div>
+    <dt-button size="sm">Small</dt-button>
+    <my-button size="sm">Not Dialtone</my-button>
+    <dt-text size="xl">Title</dt-text>
+    <dt-icon size="200" name="phone" />
+  </div>
+</template>`;
+    const expected = `<template>
+  <div>
+    <dt-button :size="200">Small</dt-button>
+    <my-button size="sm">Not Dialtone</my-button>
+    <dt-text :size="500">Title</dt-text>
+    <dt-icon size="200" name="phone" />
+  </div>
+</template>`;
+    const { transformed, count } = transformContent(input);
+    assert.equal(transformed, expected);
+    assert.equal(count, 2);
+  });
+});
+
+describe('Real-world patterns from the monorepo', () => {
+  it('transforms button in notice action slot', () => {
+    const input = '<dt-button size="sm" importance="outlined" kind="muted">Action</dt-button>';
+    const expected = '<dt-button :size="200" importance="outlined" kind="muted">Action</dt-button>';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+
+  it('transforms text inside card variant template', () => {
+    const input = '<dt-text as="p" kind="headline" size="md">Lorem ipsum</dt-text>';
+    const expected = '<dt-text as="p" kind="headline" :size="300">Lorem ipsum</dt-text>';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+
+  it('transforms avatar size', () => {
+    const input = '<dt-avatar size="md" :full-name="item.id" />';
+    const expected = '<dt-avatar :size="300" :full-name="item.id" />';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+
+  it('transforms motion-text speed in story', () => {
+    const input = '<dt-motion-text speed="md" text="Animated" :auto-start="false" />';
+    const expected = '<dt-motion-text :speed="300" text="Animated" :auto-start="false" />';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+
+  it('handles multiline component tags', () => {
+    const input = `<dt-button
+      size="xs"
+      kind="muted"
+      importance="clear"
+    >`;
+    const expected = `<dt-button
+      :size="100"
+      kind="muted"
+      importance="clear"
+    >`;
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+});
+
+describe('Future-proof: any compound *-size prop', () => {
+  it('transforms description-size="sm" to :description-size="200"', () => {
+    const input = '<dt-input description-size="sm" />';
+    const expected = '<dt-input :description-size="200" />';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+
+  it('transforms icon-size="lg" to :icon-size="400"', () => {
+    const input = '<dt-badge icon-size="lg" />';
+    const expected = '<dt-badge :icon-size="400" />';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+
+  it('transforms header-size="xl" to :header-size="500"', () => {
+    const input = '<dt-card header-size="xl" />';
+    const expected = '<dt-card :header-size="500" />';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+});
+
+describe('camelCase prop names', () => {
+  it('transforms labelSize="xs" to :labelSize="100"', () => {
+    const input = '<dt-input labelSize="xs" />';
+    const expected = '<dt-input :labelSize="100" />';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+
+  it('transforms descriptionSize="md" to :descriptionSize="300"', () => {
+    const input = '<dt-input descriptionSize="md" />';
+    const expected = '<dt-input :descriptionSize="300" />';
+    const { transformed } = transformContent(input);
+    assert.equal(transformed, expected);
+  });
+});
+
+describe('Excluded props (not component scale sizes)', () => {
+  it('ignores button-width-size="md"', () => {
+    const input = '<dt-recipe-callbar-button button-width-size="md" />';
+    const { transformed, count } = transformContent(input);
+    assert.equal(transformed, input);
+    assert.equal(count, 0);
+  });
+
+  it('ignores buttonWidthSize="lg"', () => {
+    const input = '<DtCallbarButton buttonWidthSize="lg" />';
+    const { transformed, count } = transformContent(input);
+    assert.equal(transformed, input);
+    assert.equal(count, 0);
+  });
+});
+
+describe('Edge cases', () => {
+  it('does not transform size inside text content', () => {
+    const input = '<dt-text>The size="sm" option is deprecated</dt-text>';
+    const { transformed, count } = transformContent(input);
+    assert.equal(transformed, input);
+    assert.equal(count, 0);
+  });
+
+  it('returns count of 0 for content with no matches', () => {
+    const input = '<div><span>No Dialtone here</span></div>';
+    const { count } = transformContent(input);
+    assert.equal(count, 0);
+  });
+
+  it('handles empty string', () => {
+    const { transformed, count } = transformContent('');
+    assert.equal(transformed, '');
+    assert.equal(count, 0);
+  });
+});

package/lib/build/js/dialtone_migration_helper/configs/physical-to-logical.mjs

@@ -0,0 +1,86 @@
+// Migration: deprecated physical direction slot/prop/event names → logical equivalents.
+// Covers Vue template directives only. Does NOT cover:
+// - #icon on dt-button (ambiguous — requires manual migration)
+// - Dynamic bindings or script-section references
+
+export default {
+  description:
+    'Renames deprecated physical direction names (left/right/top/bottom/alpha/omega) to\n' +
+    'logical equivalents (start/end/blockStart/blockEnd) in Vue template slots, props,\n' +
+    'prop values, and events. Does NOT rename #icon on dt-button (ambiguous).',
+  patterns: ['**/*.{vue,html,md,js,ts,jsx,tsx}'],
+  expressions: [
+    // ── Slot renames ──────────────────────────────────────────────────────
+    // Longer patterns first to prevent partial matches.
+    // e.g. #leftIcon before #left, #rightIcon before #right
+
+    // #leftIcon → #startIcon
+    { from: /#leftIcon/g, to: '#startIcon' },
+    // #rightIcon → #endIcon
+    { from: /#rightIcon/g, to: '#endIcon' },
+    // #alphaIcon → #startIcon
+    { from: /#alphaIcon/g, to: '#startIcon' },
+    // #omegaIcon → #endIcon
+    { from: /#omegaIcon/g, to: '#endIcon' },
+    // #leftContent → #startContent
+    { from: /#leftContent/g, to: '#startContent' },
+    // #rightContent → #endContent
+    { from: /#rightContent/g, to: '#endContent' },
+    // #omega → #end (word boundary to avoid matching #omegaIcon)
+    // Scoped: only dt-split-button uses #omega
+    { from: /#omega(?=[\s"'>])/g, to: '#end' },
+
+    // Generic short slot names (#left, #right, #bottom) are scoped to known
+    // Dialtone components to avoid renaming slots on non-Dialtone components.
+    // Uses multiline matching to find the slot within a dt-* or dt-recipe-* tag.
+    // Components: dt-item-layout, dt-recipe-callbox, dt-recipe-contact-centers-row,
+    //             dt-recipe-general-row, dt-recipe-top-banner-info
+
+    // #left → #start (only on dt-item-layout, dt-recipe-general-row, dt-recipe-top-banner-info)
+    { from: /(<dt-(?:item-layout|recipe-general-row|recipe-top-banner-info)[\s\S]*?)#left(?=[\s"'>])/gm, to: '$1#start' },
+    // #right → #end (only on dt-item-layout, dt-recipe-callbox, dt-recipe-contact-centers-row, dt-recipe-top-banner-info)
+    { from: /(<dt-(?:item-layout|recipe-callbox|recipe-contact-centers-row|recipe-top-banner-info)[\s\S]*?)#right(?=[\s"'>])/gm, to: '$1#end' },
+    // #bottom → #blockEnd (only on dt-item-layout, dt-recipe-callbox)
+    { from: /(<dt-(?:item-layout|recipe-callbox)[\s\S]*?)#bottom(?=[\s"'>])/gm, to: '$1#blockEnd' },
+
+    // ── Prop renames ──────────────────────────────────────────────────────
+    // Longer patterns first within each prefix group.
+
+    // alpha-* → start-* (longest first)
+    { from: /alpha-trailing-class/g, to: 'start-trailing-class' },
+    { from: /alpha-tooltip-text/g, to: 'start-tooltip-text' },
+    { from: /alpha-leading-class/g, to: 'start-leading-class' },
+    { from: /alpha-icon-position/g, to: 'start-icon-position' },
+    { from: /alpha-aria-label/g, to: 'start-aria-label' },
+    { from: /alpha-label-class/g, to: 'start-label-class' },
+    { from: /alpha-disabled/g, to: 'start-disabled' },
+    { from: /alpha-loading/g, to: 'start-loading' },
+    { from: /alpha-active/g, to: 'start-active' },
+
+    // omega-* → end-* (longest first)
+    { from: /omega-tooltip-text/g, to: 'end-tooltip-text' },
+    { from: /omega-aria-label/g, to: 'end-aria-label' },
+    { from: /omega-disabled/g, to: 'end-disabled' },
+    { from: /omega-active/g, to: 'end-active' },
+    { from: /omega-id/g, to: 'end-id' },
+
+    // layout class props
+    { from: /bottom-class=/g, to: 'block-end-class=' },
+    { from: /left-class=/g, to: 'start-class=' },
+    { from: /right-class=/g, to: 'end-class=' },
+
+    // ── Prop value renames ────────────────────────────────────────────────
+    // icon-position values
+    { from: /icon-position="left"/g, to: 'icon-position="start"' },
+    { from: /icon-position="right"/g, to: 'icon-position="end"' },
+    { from: /icon-position="top"/g, to: 'icon-position="blockStart"' },
+    { from: /icon-position="bottom"/g, to: 'icon-position="blockEnd"' },
+    // sidebar-position values
+    { from: /sidebar-position="left"/g, to: 'sidebar-position="start"' },
+    { from: /sidebar-position="right"/g, to: 'sidebar-position="end"' },
+
+    // ── Event renames ─────────────────────────────────────────────────────
+    { from: /@alpha-clicked/g, to: '@start-clicked' },
+    { from: /@omega-clicked/g, to: '@end-clicked' },
+  ],
+};

package/lib/build/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)`,
+    },
+  ],
+};