Состояния

Поведение
токенов: 18

Hover, active, disabled, invalid. Ни одно из этих значений не записано: каждое — формула от роли, поэтому перекрашенная роль тянет свои состояния за собой. Таблица ниже показывает формулу и то, во что она превращается в обеих темах.

Источник: @feugene/granularity 1.1.1, tokens/*.json

На этой странице

Производные формулы взаимодействия: роли действий
Производные формулы взаимодействия: роли статусов

Disabled гасится фоном, а не прозрачностью: она разбавляет выверенные текстовые токены и роняет контраст ниже порога, ради которого их и подбирали.
Браузеру без color-mix достаётся посчитанный запасной вариант. Он порождается от ваших значений, поэтому своя тема не откатывается молча к светлой.

Производные формулы взаимодействия: роли действий

Токен	Светлая	Тёмная	Формула	Роль
`--gr-primary-hover`--gr-primary-hover	`#4a42d6`	`#a494fa`	`color-mix(in srgb, var(--gr-primary) 92%, var(--gr-fg))`	Hover-состояние primary action: подмес `--gr-fg` 8% в `--gr-primary`.
`--gr-primary-active`--gr-primary-active	`#453ec7`	`#ac9dfa`	`color-mix(in srgb, var(--gr-primary) 84%, var(--gr-fg))`	Active-состояние primary action: подмес `--gr-fg` 16% в `--gr-primary`.
`--gr-secondary-hover`--gr-secondary-hover	`#d1d7e0`	`#435062`	`color-mix(in srgb, var(--gr-secondary) 92%, var(--gr-fg))`	Hover-состояние secondary action: подмес `--gr-fg` 8% в `--gr-secondary`.
`--gr-secondary-active`--gr-secondary-active	`#c0c7d0`	`#535f70`	`color-mix(in srgb, var(--gr-secondary) 84%, var(--gr-fg))`	Active-состояние secondary action: подмес `--gr-fg` 16% в `--gr-secondary`.
`--gr-brd-hover`--gr-brd-hover	`#a3a9b5`	`#6e7987`	`color-mix(in srgb, var(--gr-brd) 70%, var(--gr-fg))`	Hover-состояние бордеров и outline-элементов: подмес `--gr-fg` 30% в `--gr-brd`.
`--gr-brd-active`--gr-brd-active	`#838a97`	`#8c94a0`	`color-mix(in srgb, var(--gr-brd) 55%, var(--gr-fg))`	Active-состояние бордеров и outline-элементов: подмес `--gr-fg` 45% в `--gr-brd`.

Производные формулы взаимодействия: роли статусов

Токен	Светлая	Тёмная	Формула	Роль
`--gr-success-hover`--gr-success-hover	`#10ac7a`	`#44d6a1`	`color-mix(in srgb, var(--gr-success) 92%, var(--gr-fg))`	Hover-состояние success-ролей: подмес `--gr-fg` 8% в `--gr-success`.
`--gr-success-active`--gr-success-active	`#109f73`	`#53d9a9`	`color-mix(in srgb, var(--gr-success) 84%, var(--gr-fg))`	Active-состояние success-ролей: подмес `--gr-fg` 16% в `--gr-success`.
`--gr-warning-hover`--gr-warning-hover	`#e66c18`	`#fb9a4b`	`color-mix(in srgb, var(--gr-warning) 92%, var(--gr-fg))`	Hover-состояние warning-ролей: подмес `--gr-fg` 8% в `--gr-warning`.
`--gr-warning-active`--gr-warning-active	`#d46419`	`#fba35b`	`color-mix(in srgb, var(--gr-warning) 84%, var(--gr-fg))`	Active-состояние warning-ролей: подмес `--gr-fg` 16% в `--gr-warning`.
`--gr-danger-hover`--gr-danger-hover	`#cc2526`	`#f87c7c`	`color-mix(in srgb, var(--gr-danger) 92%, var(--gr-fg))`	Hover-состояние danger-ролей: подмес `--gr-fg` 8% в `--gr-danger`.
`--gr-danger-active`--gr-danger-active	`#bb2427`	`#f88787`	`color-mix(in srgb, var(--gr-danger) 84%, var(--gr-fg))`	Active-состояние danger-ролей: подмес `--gr-fg` 16% в `--gr-danger`.
`--gr-info-hover`--gr-info-hover	`#235ddc`	`#6cacfa`	`color-mix(in srgb, var(--gr-info) 92%, var(--gr-fg))`	Hover-состояние info-ролей: подмес `--gr-fg` 8% в `--gr-info`.
`--gr-info-active`--gr-info-active	`#2157cc`	`#78b3fa`	`color-mix(in srgb, var(--gr-info) 84%, var(--gr-fg))`	Active-состояние info-ролей: подмес `--gr-fg` 16% в `--gr-info`.
`--gr-slate-hover`--gr-slate-hover	`#435064`	`#9caabd`	`color-mix(in srgb, var(--gr-slate) 92%, var(--gr-fg))`	Hover-состояние slate-ролей: подмес `--gr-fg` 8% в `--gr-slate`.
`--gr-slate-active`--gr-slate-active	`#3e4b5f`	`#a4b1c3`	`color-mix(in srgb, var(--gr-slate) 84%, var(--gr-fg))`	Active-состояние slate-ролей: подмес `--gr-fg` 16% в `--gr-slate`.
`--gr-azure-hover`--gr-azure-hover	`#016fab`	`#47c2f8`	`color-mix(in srgb, var(--gr-azure) 92%, var(--gr-fg))`	Hover-состояние azure-ролей: подмес `--gr-fg` 8% в `--gr-azure`.
`--gr-azure-active`--gr-azure-active	`#0268a0`	`#57c7f9`	`color-mix(in srgb, var(--gr-azure) 84%, var(--gr-fg))`	Active-состояние azure-ролей: подмес `--gr-fg` 16% в `--gr-azure`.