Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor button styling to contextual tokens #1675

Draft
wants to merge 124 commits into
base: main
Choose a base branch
from

Conversation

jpzwarte
Copy link
Member

No description provided.

@jpzwarte jpzwarte marked this pull request as draft December 16, 2024 13:51
DanielleRameau and others added 18 commits December 16, 2024 14:54
Background and Opacity Tokens
Muted Background:
Uses opacity tokens.
Applied as hover colors for components with a transparent background in the idle state.
Subtlest, Subtle, and Bold Backgrounds:
Each has one default background color.
Interactive states (idle, hover, active) are managed using:
opacity.interactive.idle/hover/active
background.interactive
Default Background Colors:
Defined in accent colors.
New naming format avoids specifying state, e.g., color.background.accent.blue.subtlest.

Token Definitions:
Opacity Tokens:
opacity.interactive.idle/hover/active tokens are defined in system.json.
Color Tokens:
color.opacity tokens are in light.json and dark.json.
color.background.interactive tokens are also in light.json and dark.json.
Mode-Specific Behavior:
In dark mode, interactive tokens use white.
In light mode, interactive tokens use black.
….background.accent.grey.subtlest.idle, which is not defined.
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.

5 participants