Anatomy on Design tools

Guides

• use opacity instead of colors with hue
• use color tokens instead of variant types
  • e.g. use button-color/danger instead of variants/danger

States

• hover - when the button is hovered
• disabled - when the button is disabled, disabled=true
• focus - when the button is focused, e.g. when button is selected by tab
• active (pressed) - when the button is pressed

Tokens