feat: token name builder prototype and component-anatomy registry#813
Open
GarthDB wants to merge 5 commits into
Open
feat: token name builder prototype and component-anatomy registry#813GarthDB wants to merge 5 commits into
GarthDB wants to merge 5 commits into
Conversation
Interactive web tool for building Spectrum design token names. Includes: - Core logic: name-object types, serializer (kebab/camel/CSS var/CONST), and validator (advisory semantic + strict dimension validation) - Registry-driven form UI with Lit web components - Live preview, platform format comparison, JSON output, copy buttons - 25 passing tests for serializer and validator Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…en-name-builder - Add component-awareness.ts: dynamically loads component schemas via import.meta.glob and extracts valid anatomy/variant/state/size options - Update token-name-builder: component-aware optgroups on select fields show component-specific values first when a component is selected - Add URL hash persistence: field state encoded as URLSearchParams in hash for shareable links; restored on page load - Improve accessibility: fieldset/legend for sections, aria-live on preview and validation, aria-labelledby on all form inputs - Add Share button to copy the current URL - Fix tsconfig: add vite/client types for import.meta.glob and path mappings for @registry/* and @component-schemas/* aliases - Add token-name-builder to site web tools config and regenerate tools.md Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Add extraction script that parses anatomy sections from all 67 S2 doc
markdown files and generates a structured component-anatomy.json
mapping 65 components to their 288 anatomy parts.
- Parse fenced code blocks under ## Anatomy headings
- Handle compound lines (", " / " or " / " and " / " / " separators)
- Handle optional annotations, camelCase→kebab conversion, dedup
- Wire into token-name-builder: anatomy dropdown now shows real S2 docs
anatomy parts per component (was ~4 matches, now 65 components)
- 24 new tests for extraction logic + generated output validation
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Add component-anatomy-curation.json that documents and applies rules for divergences between raw S2 docs extraction and the curated registry: - Removals: action-button-1/2 (numbering artifacts), background (token object, not anatomy) - Renames: body-area→body, header-area→header, footer-area→footer, small-divider→divider (align with existing anatomy-terms registry) - Tags: 17 composite anatomy parts (components used as named parts) tagged with tier: "composite" per spec anatomy tier 2 The curation config is the single source of truth for why the registry diverges from the S2 docs. Re-running the extraction script applies all rules automatically. Result: 65 components, 282 parts (was 288 before curation) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
Member
Author
Run report for 05772f51Total time: 1m 35s | Comparison time: 4m 5s | Estimated savings: 2m 30s (61.2% faster)
Expanded report
Touched files |
…on-group numbering [P1] Anatomy validation now checks both anatomy-terms.json and the component-anatomy registry. Values like "fill", "title", "value" that come from S2 docs no longer trigger false "not in registry" warnings. [P2] Curation config changed action-button-1/2 from removals to renames (→ action-button), so action-group retains its anatomy data instead of being left with only action-menu. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Adds a Token Name Builder — an interactive web tool for constructing valid Spectrum design token names using the design data spec taxonomy. Also introduces a component-anatomy registry extracted from S2 documentation, which powers the tool's component-aware anatomy filtering.
Token Name Builder (
tools/token-name-builder/)A Lit + Vite web app that guides users through building a structured token name object:
Component-Anatomy Registry (
packages/design-system-registry/)## Anatomysections from all 67 S2 doc markdown filescomponent-anatomy.json) maps 65 components to 282 anatomy partscomponent-anatomy-curation.json) documents all divergences between raw S2 docs and the curated registry with human-readable reasons:-areasuffix alignment, size qualifier normalizationRelated Issue
Relates to the taxonomy/glossary backbone initiative and Nate Baldwin's Foundry prototype for design data authoring.
Motivation and Context
Naming tokens correctly requires knowing which fields to use, what values are valid, and how names serialize per platform. This tool makes that process interactive and guided. The component-anatomy registry fills a critical data gap — the existing
anatomy-terms.jsonhad only 15 terms with no component mapping, while S2 docs have rich per-component anatomy data for 65+ components.How Has This Been Tested?
pnpm --filter @adobe/token-name-builder devTypes of changes
Checklist: