Proposal: refine action design tokens

Action design tokens:

See all of them

color.neutral.0	asdasd	action.neutral.background.color.default
color.neutral.50		action.neutral.background.color.hover
color.neutral.50		action.neutral.background.color.focus
color.neutral.100		action.neutral.background.color.active
color.alpha.0		action.neutral.background.color.subtle.default
color.neutral.50		action.neutral.background.color.subtle.hover
color.neutral.50		action.neutral.background.color.subtle.focus
color.neutral.100		action.neutral.background.color.subtle.active
color.neutral.500		action.neutral.background.color.strong.default
color.neutral.600		action.neutral.background.color.strong.hover
color.neutral.600		action.neutral.background.color.strong.focus
color.neutral.700		action.neutral.background.color.strong.active
color.neutral.200		action.neutral.border.color.default
color.neutral.400		action.neutral.border.color.hover
color.neutral.400		action.neutral.border.color.focus
color.neutral.600		action.neutral.border.color.active
color.neutral.600		action.neutral.border.color.strong.default
color.neutral.800		action.neutral.border.color.strong.hover
color.neutral.800		action.neutral.border.color.strong.focus
color.neutral.900		action.neutral.border.color.strong.active
color.neutral.900		action.neutral.text.color.default
color.neutral.0		action.neutral.text.color.strong
color.neutral.500		action.neutral.icon.color.default
color.neutral.700		action.neutral.icon.color.hover
color.neutral.700		action.neutral.icon.color.focus
color.neutral.900		action.neutral.icon.color.active
color.neutral.0		action.neutral.icon.color.strong
color.neutral.0		action.confirm.background.color.default
color.blue.50		action.confirm.background.color.hover
color.blue.50		action.confirm.background.color.focus
color.blue.100		action.confirm.background.color.active
color.alpha.0		action.confirm.background.color.subtle.default
color.blue.50		action.confirm.background.color.subtle.hover
color.blue.50		action.confirm.background.color.subtle.focus
color.blue.100		action.confirm.background.color.subtle.active
color.blue.500		action.confirm.background.color.strong.default
color.blue.600		action.confirm.background.color.strong.hover
color.blue.600		action.confirm.background.color.strong.focus
color.blue.700		action.confirm.background.color.strong.active
color.blue.500		action.confirm.background.color.strong.selected
color.blue.500		action.confirm.border.color.default
color.blue.700		action.confirm.border.color.hover
color.blue.700		action.confirm.border.color.focus
color.blue.900		action.confirm.border.color.active
color.blue.600		action.confirm.border.color.strong.default
color.blue.800		action.confirm.border.color.strong.hover
color.blue.800		action.confirm.border.color.strong.focus
color.blue.900		action.confirm.border.color.strong.active
color.blue.600		action.confirm.border.color.strong.selected
color.blue.500		action.confirm.text.color.default
color.blue.700		action.confirm.text.color.hover
color.blue.700		action.confirm.text.color.focus
color.blue.900		action.confirm.text.color.active
color.neutral.0		action.confirm.text.color.strong
color.blue.500		action.confirm.icon.color.default
color.blue.700		action.confirm.icon.color.hover
color.blue.700		action.confirm.icon.color.focus
color.blue.900		action.confirm.icon.color.active
color.neutral.0		action.confirm.icon.color.strong
color.neutral.0		action.danger.background.color.default
color.red.50		action.danger.background.color.hover
color.red.50		action.danger.background.color.focus
color.red.100		action.danger.background.color.active
color.alpha.0		action.danger.background.color.subtle.default
color.red.50		action.danger.background.color.subtle.hover
color.red.50		action.danger.background.color.subtle.focus
color.red.100		action.danger.background.color.subtle.active
color.red.500		action.danger.background.color.strong.default
color.red.600		action.danger.background.color.strong.hover
color.red.600		action.danger.background.color.strong.focus
color.red.800		action.danger.background.color.strong.active
color.red.500		action.danger.border.color.default
color.red.700		action.danger.border.color.hover
color.red.700		action.danger.border.color.focus
color.red.900		action.danger.border.color.active
color.red.600		action.danger.border.color.strong.default
color.red.800		action.danger.border.color.strong.hover
color.red.800		action.danger.border.color.strong.focus
color.red.900		action.danger.border.color.strong.active
color.red.500		action.danger.text.color.default
color.red.700		action.danger.text.color.hover
color.red.700		action.danger.text.color.focus
color.red.900		action.danger.text.color.active
color.neutral.0		action.danger.text.color.strong
color.red.500		action.danger.icon.color.default
color.red.700		action.danger.icon.color.hover
color.red.700		action.danger.icon.color.focus
color.red.900		action.danger.icon.color.active
color.neutral.0		action.danger.icon.color.strong
color.neutral.50		action.background.color.disabled
color.neutral.100		action.border.color.disabled
color.neutral.500		action.text.color.disabled
color.neutral.400		action.icon.color.disabled

Problems

• There are a lot (94)*
• Many of these only exist to build buttons
• When to use one over the other isn’t clear

* some of this is unavoidable, as actions are interactive by nature and will need to support different appearance based on state

Proposal

See original proposal

* Reduce to a smaller set of design tokens (54) * Focus on generic meaning, rather than to create buttons * Create rules for how to use together * Use contextual design tokens to build the special parts of buttons

🎨 Figjam →

📽️ Video walk through →

Smaller set

Application examples

Work complete

👉👉👉 #1867 (comment 2010057159) 👀