docs(css-utilities): DLT-3337 migrate internal utility-class consumers to token-indexed names and rewrite radius docs

[Francis Rupert (francisrupert)]

🛠️ Type Of Change

• Documentation

📖 Jira Ticket

DLT-3337

⚠️ Stacked PR

Important

Stacked on top of #1211 (DLT-3329).
Do not merge this PR until #1211 has merged. Once #1211 lands, GitHub will auto-retarget this PR from new-and-improve-radius to next and the diff will shrink to only the 6 commits unique to this branch.

📖 Description

Consumer migration + docs rewrite. Broader than the initial radius-only scope: running dt-migrate utility-class-to-token-stops across the monorepo rewrites every legacy utility class, not just radius — the sizing/spacing/position families from PR #1150 were never swept across internal consumers. This PR does that cleanup at the same time.

What this PR does:

• Runs dt-migrate utility-class-to-token-stops across the monorepo. 1,273 class-attribute rewrites across 164 source files spanning 6 property families:

Family	Example rewrite
Sizing	d-h16 → d-h-25, d-w1 → d-w-1px
Margin	d-m8 → d-m-100, d-mtn8 → d-mt-n100
Padding	d-p8 → d-p-100
Gap	d-g8 → d-g-100
Position	d-t0 → d-t-0, d-tn8 → d-t-n100
Border-radius	d-bar6 → d-bar-350, d-btr-pill → d-bbsr-pill

• By package:
  • apps/dialtone-documentation/ — 121 files (docs .md, .vuepress/baseComponents/, theme, example components)
  • packages/dialtone-vue/ — 31 files (stories, recipes, prototypes, skeleton_constants.js, one test)
  • packages/combinator/ — 8 files (variants + components)
  • packages/dialtone-mcp-server/ — 2 files (README, test-search fixtures)
  • packages/dialtone-docs/ — 1 file (dev docs content)
  • .claude/rules/ — 1 file (example code in docs-writing rule)
• Rewrites apps/dialtone-documentation/docs/utilities/borders/radius.md:
  • All demo code switches to logical names. Zero legacy references in demo blocks.
  • New ## Individual Corners section for the net-new single-corner utilities from feat(css-utilities, eslint-plugin-dialtone): DLT-3329 update border-radius css utilities and associated tooling #1211.
  • Classes table becomes data-driven (reads _data/borders.json). Renders via <utility-class-table show-rendered> + ClampedTableWrapper, gaining the standard search input and "Hide deprecated" toggle.
• Adds radius.scopes (9) and radius.values (12 stops) to _data/borders.json.
• Adds /* eslint-disable max-len */ header to 58 packages/combinator/src/variants/variants_*.js files. Combinator variant definitions are inherently long (large prop-combination arrays, long HTML template strings); enforcing 120-char was impractical and blocked the migration commit.
• Fixes one pre-existing 121-char line in ThemeColorTable.vue that max-len was silently tolerating.

What this PR does NOT do:

• Does not add or change any utility class definitions, tokens, generators, or ESLint rules. All of that is in the stacked PR #1211.
• Does not migrate external consumer repos (firespotter, web-clients). They run pnpm dt-migrate utility-class-to-token-stops themselves after Dialtone package bump.
• Does not touch packages/eslint-plugin-dialtone/ — those rule files intentionally contain legacy class names as regex patterns and test inputs.
• Does not trigger a version bump (docs-type change).

💡 Context

PR #1211 adds the primitives (new tokens, new classes, deprecation metadata, ESLint rule, migration helper config). This PR consumes them — wiping legacy class names from every internal source file and rebuilding the radius docs page around the new primitives.

The broader-than-radius scope emerged during the migration run: running the full utility-class-to-token-stops config rewrites everything, not just radius. Filtering to radius-only would have left ~47 files with legacy spacing/sizing/position class names that PR #1150 should have cleaned up but didn't. Bundling the catch-up here avoids a future "why are there still d-p8 classes in our own stories" ticket.

🔍 For Reviewers

Before reviewing, make sure #1211 is in your local checkout (it's the base branch). If you just pull this branch, it'll include #1211's commits too.

Build + tests:

pnpm nx run-many --target=build --projects=dialtone-tokens,dialtone-css,dialtone-vue,dialtone-documentation
pnpm nx run dialtone-vue:test

Expected: 113/113 test files, 2918 tests passing. No regressions.

Radius docs page (http://localhost:4000/utilities/borders/radius.html after pnpm nx run dialtone-documentation:start):

• ## All Corners demos — 10 boxes, visibly increasing radius, d-bar-0 through d-bar-600. d-bar-550 sits between 500 and 600 as 24px.
• ## Rounded Sides — 4 boxes, top / right / bottom / left rounding at 12px.
• ## Individual Corners (new) — 4 boxes, single-corner rounding at 16px.
• ## Pills, ## Circles — render correctly.
• ## Classes table — scrollable, search input, "Hide deprecated" toggle present. ~169 rows with toggle off, ~109 with toggle on. Legacy rows carry a red "Deprecated" badge.

Migration spot-checks — these pages had the highest rewrite counts and should look identical to pre-migration (git diff next...feat/DLT-3337-utility-class-consumer-migration -- <file>):

• docs/utilities/flex/columns-layouts.md (~141 rewrites)
• packages/dialtone-vue/components/stack/stack_variants.story.vue (~100)
• docs/dialtone/whats-new/posts/2025-12-2.md (~28)
• docs/components/stack.md (~26)
• docs/foundations/colors/usage/index.md (~23)

Confirm no legacy class-attribute usages remain in tracked source:

grep -rE 'class[=:]["\x27][^"\x27]*\bd-(bar|btr|bbr|blr|brr)[0-9]' apps/ packages/ \
  --include="*.vue" --include="*.md" --include="*.mdx" --include="*.js" --include="*.ts" \
  | grep -v "\.vuepress/dist" | grep -v "node_modules"
# Expected: empty (matches in .vuepress/public/md/ are gitignored build outputs)

📦 Cross-Package Impact

Package	Changes	Downstream Impact
dialtone-documentation	121 files migrated + radius.md rewritten + borders.json radius data added	Docs site renders the new logical utilities; users learn the new naming
dialtone-vue	31 files (stories/recipes/prototypes/MDX) migrated	Storybook stories now showcase the logical utilities
combinator	8 files migrated + eslint-disable on variants_*.js	Combinator renders with the new class names
dialtone-mcp-server	2 files migrated (README, test-search)	MCP search queries return the new canonical class names
dialtone-docs	1 file migrated	Dev docs reference the new naming

Dependency flow: tokens / CSS / Vue → docs/MCP/combinator (this PR).

📝 Checklist

• No private Dialpad links or info in code or PR description.
• Reviewed my changes.
• Added all relevant documentation (new ## Individual Corners section + data-driven classes table).
• Considered performance impact (pure text rewrite, no runtime diff).

For all Vue changes:

• Updated unit tests (migration touched one .test.js with class-name assertions — tests still pass).
• Validated with screen reader (N/A — no interactive behavior change).
• Validated keyboard navigation (N/A — same).

For all CSS changes:

• Used design tokens wherever possible.
• Considered behavior on different screen sizes (class names rename only, responsive variants unaffected).
• Visually validated in light mode.
• Used gap / flexbox over margin where possible (N/A — no new layout).

🔮 Next Steps

• External consumer repos (firespotter, web-clients) should run pnpm dt-migrate utility-class-to-token-stops after Dialtone's next next-channel release to pick up the full migration across their own source code.
• The improved migration-helper ignore list (in feat(css-utilities, eslint-plugin-dialtone): DLT-3329 update border-radius css utilities and associated tooling #1211) applies to all PR feat(dialtone-css, dialtone-tokens, dialtone-vue): DLT-3197 DLT-3198 DLT-3199 DLT-3200 DLT-3201 DLT-3202 DLT-3203 DLT-3204 DLT-3205 DLT-3206 DLT-3207 DLT-3208 DLT-3209 DLT-3210 DLT-3211 token-stop utility classes, migration tooling, and documentation #1150 migrations too — consumers running those migrations also benefit from the dist//.cache//etc. exclusions.