Skip to content

refactor: improve structure of reference and system tokens#4952

Open
adrcotfas wants to merge 1 commit into
v6from
@adrcotfas/tokens_structure
Open

refactor: improve structure of reference and system tokens#4952
adrcotfas wants to merge 1 commit into
v6from
@adrcotfas/tokens_structure

Conversation

@adrcotfas
Copy link
Copy Markdown
Collaborator

@adrcotfas adrcotfas commented May 18, 2026

Motivation

Foundation prep for the Switch component modernization.

Three things:

  1. Add focus-indicator tokens at md.sys.state.focusIndicator (thickness: 3, outerOffset: 2). Matches MD3 spec. Switch will be the first consumer.
  2. Move misplaced tokens from ref to sys per the MD3 spec:
    - ref.stateOpacity -> sys.state.opacity
    - ref.scrimAlpha -> sys.scrim.alpha
  3. Split tokens/index.ts (was 364 LOC, mixed ref values + sys decisions + barrel).

Also in this PR:

  • New helper getStateLayer(theme, role, state) in theme/utils/state.ts. Returns { color, opacity }. Four components migrated: HelperText, TextInput/Adornment, CheckboxItem, RadioButtonItem.
  • New types ColorRole = keyof ThemeColors and StateOpacityKey = keyof typeof tokens.md.sys.state.opacity. Component token files can use them to validate string keys.
  • theme/types/utils.ts moved to src/types.tsx. The helpers there ($Omit, $RemoveChildren, EllipsizeProp) are not theme-specific.

No change to Theme. Renames are internal only.

Related issue

N/A. Prep for Switch modernization.

Test plan

  • yarn typescript clean
  • yarn lint clean
  • yarn test green, snapshots stable

@github-actions
Copy link
Copy Markdown

The mobile version of example app from this branch is ready! You can see it here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant