Состояния
Hover, active, disabled, invalid. Ни одно из этих значений не записано: каждое — формула от роли, поэтому перекрашенная роль тянет свои состояния за собой. Таблица ниже показывает формулу и то, во что она превращается в обеих темах.
- 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. |
Источник: @feugene/granularity 0.41.0, tokens/*.json