States
Hover, active, disabled, invalid. None of these values is written down: each is a formula over a role, so repainting the role moves its states with it. The table below shows the formula and what it computes to in both themes.
- Disabled is muted with a background, never with opacity: transparency dilutes carefully checked text tokens and drops the contrast below the threshold they were chosen for.
- A browser without
color-mixgets a pre-computed fallback. It is generated from your values, so a custom theme does not silently fall back to the light one.
Derived interaction formulas: action roles
| Token | Light | Dark | Formula |
|---|---|---|---|
--gr-primary-hover--gr-primary-hover | #4a42d6 | #a494fa | color-mix(in srgb, var(--gr-primary) 92%, var(--gr-fg)) |
--gr-primary-active--gr-primary-active | #453ec7 | #ac9dfa | color-mix(in srgb, var(--gr-primary) 84%, var(--gr-fg)) |
--gr-secondary-hover--gr-secondary-hover | #d1d7e0 | #435062 | color-mix(in srgb, var(--gr-secondary) 92%, var(--gr-fg)) |
--gr-secondary-active--gr-secondary-active | #c0c7d0 | #535f70 | color-mix(in srgb, var(--gr-secondary) 84%, var(--gr-fg)) |
--gr-brd-hover--gr-brd-hover | #a3a9b5 | #6e7987 | color-mix(in srgb, var(--gr-brd) 70%, var(--gr-fg)) |
--gr-brd-active--gr-brd-active | #838a97 | #8c94a0 | color-mix(in srgb, var(--gr-brd) 55%, var(--gr-fg)) |
Derived interaction formulas: status roles
| Token | Light | Dark | Formula |
|---|---|---|---|
--gr-success-hover--gr-success-hover | #10ac7a | #44d6a1 | color-mix(in srgb, var(--gr-success) 92%, var(--gr-fg)) |
--gr-success-active--gr-success-active | #109f73 | #53d9a9 | color-mix(in srgb, var(--gr-success) 84%, var(--gr-fg)) |
--gr-warning-hover--gr-warning-hover | #e66c18 | #fb9a4b | color-mix(in srgb, var(--gr-warning) 92%, var(--gr-fg)) |
--gr-warning-active--gr-warning-active | #d46419 | #fba35b | color-mix(in srgb, var(--gr-warning) 84%, var(--gr-fg)) |
--gr-danger-hover--gr-danger-hover | #cc2526 | #f87c7c | color-mix(in srgb, var(--gr-danger) 92%, var(--gr-fg)) |
--gr-danger-active--gr-danger-active | #bb2427 | #f88787 | color-mix(in srgb, var(--gr-danger) 84%, var(--gr-fg)) |
--gr-info-hover--gr-info-hover | #235ddc | #6cacfa | color-mix(in srgb, var(--gr-info) 92%, var(--gr-fg)) |
--gr-info-active--gr-info-active | #2157cc | #78b3fa | color-mix(in srgb, var(--gr-info) 84%, var(--gr-fg)) |
--gr-slate-hover--gr-slate-hover | #435064 | #9caabd | color-mix(in srgb, var(--gr-slate) 92%, var(--gr-fg)) |
--gr-slate-active--gr-slate-active | #3e4b5f | #a4b1c3 | color-mix(in srgb, var(--gr-slate) 84%, var(--gr-fg)) |
--gr-azure-hover--gr-azure-hover | #016fab | #47c2f8 | color-mix(in srgb, var(--gr-azure) 92%, var(--gr-fg)) |
--gr-azure-active--gr-azure-active | #0268a0 | #57c7f9 | color-mix(in srgb, var(--gr-azure) 84%, var(--gr-fg)) |
Role descriptions ship with the package in Russian and are not shown here yet. Translating them is a decision of its own — see ADR-0003.
Source: @feugene/granularity 0.41.0, tokens/*.json