A proposal for contextual surface tokens, token renames, and removing the on-color token.
Current tokens use flat names that don't adapt to nesting depth. The proposed system resolves tokens contextually.
Primary text on card
No visual distinction from parent
Toggle between context levels to see how the full palette resolves. Then see levels compose in the nesting demo.
Proposed renames and removals. Names use DTCG dot notation.
| Current | Proposed | Note |
|---|---|---|
| app.color.foreground.primary | app.color.text.primary | Clarifies usage for text only |
| app.color.foreground.secondary | app.color.text.secondary | — |
| app.color.foreground.inverse | app.color.text.inverse | — |
| app.color.foreground.on-color | removed | Replaced by surface context — primary button establishes context where text.primary resolves to correct contrast value |
| app.color.interactive.primary | app.color.surface.interactive.primary | Makes it clear this is a surface color, responds to context |
| app.color.interactive.primary-hover | app.color.surface.interactive.primary-hover | — |
| app.color.interactive.secondary | app.color.surface.interactive.secondary | Secondary interactive surface adapts per context level |
| app.color.interactive.secondary-hover | app.color.surface.interactive.secondary-hover | — |
| app.color.surface.default | app.color.surface.default | Name unchanged but value is now context-dependent |
| app.color.surface.inset | app.color.surface.inset | Name unchanged but value is now context-dependent |
| (new) | app.color.surface.hover | Explicit hover surface — no more guessing offset tokens |
| (new) | app.color.surface.emphasized | Replaces elevated/offset tokens with a single emphasized stop |