Skip to content

feat: improve structure of ref and sys tokens; add useFocusVisible hook#4952

Open
adrcotfas wants to merge 4 commits into
mainfrom
@adrcotfas/tokens_structure
Open

feat: improve structure of ref and sys tokens; add useFocusVisible hook#4952
adrcotfas wants to merge 4 commits into
mainfrom
@adrcotfas/tokens_structure

Conversation

@adrcotfas
Copy link
Copy Markdown
Collaborator

@adrcotfas adrcotfas commented May 18, 2026

Motivation

Foundation prep for the Switch component modernization.

  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).
  4. add useFocusVisible hook: required to detect when to show a focus ring

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.

@callstack-bot
Copy link
Copy Markdown

callstack-bot commented May 19, 2026

Hey @adrcotfas, thank you for your pull request 🤗. The documentation from this branch can be viewed here.

@adrcotfas adrcotfas changed the title refactor: improve structure of reference and system tokens feat: improve structure of ref and sys tokens; add useFocusVisible hook May 19, 2026
Comment thread src/utils/useFocusVisible.ts
@adrcotfas adrcotfas force-pushed the @adrcotfas/tokens_structure branch from 55c8655 to 346fa5a Compare May 20, 2026 14:29
@adrcotfas adrcotfas requested a review from satya164 May 20, 2026 14:38
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.

3 participants