Тактильная
Кнопка как предмет: свет сверху, тень цвета тона снизу, подъём под указателем и пружина в отклике.
На этой странице
Образец
| Роль | Светлый | Тёмный |
|---|---|---|
--gr-bg | #f8fafc | #0f172a |
--gr-card | #ffffff | #1e293b |
--gr-fg | #0f172a | #f8fafc |
--gr-muted-fg | #556275 | #aab6c7 |
--gr-primary | #4f46e5 | #9d8bfa |
--gr-accent | #eef2ff | #1e1b4b |
Для чего
Продукт и лендинги — экраны, где главное действие должно хотеться нажать. Объём, подъём под
указателем и пружина в отклике делают кнопку предметом, а не надписью в рамке. Тема — наследник
slate (extends): палитра, роли и все компоненты, кроме кнопки, — «Сланца», и его правки
приходят в «Тактильную» на следующей сборке. Своё у темы — только язык кнопки.
Правила использования
- Solid — главное действие экрана. Тень цвета тона тянет взгляд; две solid-кнопки рядом
светятся друг на друга. Второе действие —
secondaryилиoutline. - Главная кнопка тона
neutral— чернильная: цвет текста страницы, в тёмном режиме инвертируется. - Прозрачные веса откликаются подложкой, растущей из центра под указателем, а не сменой
заливки: строка
ghost-кнопок читается рядом предметов, а не ссылок. - Скругление растёт со ступенью — 8 / 8 / 10 / 12px. Капсула — ручка приложения
--gr-button-radius: 999px, не тема. - Недоступная кнопка — штриховка и пунктирная рамка: состояние читается и без цвета.
- С
prefers-reduced-motionподъёма, масштаба и пружины нет — остаётся смена цвета.
Режимы
| Режим | Назначение |
|---|---|
light | режим по умолчанию: тень тона на 42 %, линия света по верхней кромке |
dark | тень тона плотнее — 62 %, свет тише, нижняя кромка темнее |
Пары на корне
Имя режима хранится в выборе пользователя, а на корень ставится пара темы и режима. Пару не пишут руками: её отдаёт манифест сборки.
- Идентификатор
tactile- Наследует
slate
| Режим | Схема | Пара на корне |
|---|---|---|
light · по умолчанию | light | data-theme="tactile-light" |
dark | dark | data-theme="tactile-dark" |
Роли
Значения ролей в каждом режиме и контраст там, где он осмыслен.
Роли поверхностей
| Токен | Светлая | Тёмная | Контраст | Роль |
|---|---|---|---|---|
--gr-bg--gr-bg | #f8fafc | #0f172a | Базовый фон приложения и крупных layout-поверхностей текущей темы. | |
--gr-fg--gr-fg | #0f172a | #f8fafc | 17.06 / 17.06против --gr-bg | Основной цвет текста и иконок поверх базового фона текущей темы. |
--gr-card--gr-card | #ffffff | #1e293b | Фон карточек, панелей и других поднятых поверхностей. | |
--gr-card-fg--gr-card-fg | #0f172a | #f8fafc | 17.85 / 13.98против --gr-card | Цвет контента внутри карточек и raised surface-блоков. |
--gr-popover--gr-popover | #ffffff | #1e293b | Фон popover-, dropdown- и overlay-поверхностей. | |
--gr-popover-fg--gr-popover-fg | #0f172a | #f8fafc | 17.85 / 13.98против --gr-popover | Цвет текста и иконок внутри popover-слоёв. |
--gr-muted--gr-muted | #f1f5f9 | #334155 | Приглушённая поверхность для вторичных блоков, плашек и заполнений. | |
--gr-muted-fg--gr-muted-fg | #556275 | #aab6c7 | 5.65 / 5.04против --gr-muted | Вторичный текстовый цвет для helper-копии и менее важных подписей. |
--gr-secondary--gr-secondary | #e2e8f0 | #334155 | Нейтральная secondary action/surface-подложка без сильного бренд-акцента. | |
--gr-secondary-fg--gr-secondary-fg | #1e293b | #f1f5f9 | 11.87 / 9.45против --gr-secondary | Контрастный текст для secondary-кнопок и поверхностей. |
--gr-overlay-bg--gr-overlay-bg | rgb(15 23 42 / 0.45) | rgb(2 6 23 / 0.65) | Подложка модальных слоёв (модалка, drawer): затемняет страницу, оставляя её узнаваемой. | |
--gr-brd--gr-brd | #e2e8f0 | #334155 | Базовый цвет бордеров и разделителей текущей темы. | |
--gr-brd-strong--gr-brd-strong | var(--gr-brd) | var(--gr-brd) | Граница плотнее разделителя: пунктир и точки GrDivider, черта невыбранной вкладки под указателем. Тема ставит её и в токены компонентов — рамку outline-сообщения, разделитель пути. Тема без второй ступени границы ставит сюда --gr-brd. | |
--gr-input--gr-input | #e2e8f0 | #334155 | Рамка поля ввода в покое — у GrInput, GrTextarea, GrNumberInput, GrInputTag, GrAutocomplete, GrOtpInput и триггеров GrSelect, GrTreeSelect, GrColorPicker. Тема, у которой рамка поля темнее разделителя, разводит её с --gr-brd. | |
--gr-input-hover--gr-input-hover | var(--gr-input) | var(--gr-input) | Рамка поля ввода под указателем. Тема без отклика рамки ставит сюда --gr-input. | |
--gr-input-focus-brd--gr-input-focus-brd | var(--gr-input) | var(--gr-input) | Рамка поля в фокусе, вместе с кольцом --gr-ring. Тема без своего решения ставит --gr-input: рамка в фокусе не меняется. | |
--gr-input-readonly-bg--gr-input-readonly-bg | var(--gr-bg) | var(--gr-bg) | Подложка поля только для чтения. Тема, у которой такое поле читается текстом на поверхности, ставит transparent; без своего решения — --gr-bg, как у рабочего поля. | |
--gr-input-readonly-brd--gr-input-readonly-brd | var(--gr-input) | var(--gr-input) | Рамка поля только для чтения. Без своего решения — --gr-input, как у рабочего поля. | |
--gr-control-brd--gr-control-brd | #64748b | #94a3b8 | Граница переключаемого контрола в покое — коробки чекбокса, кружка радио, дорожки выключенного переключателя. Держит 3:1 к странице, карточке и --gr-muted (WCAG 1.4.11): у такого контрола граница — единственное, по чему его видно. | |
--gr-control-brd-hover--gr-control-brd-hover | var(--gr-control-brd) | var(--gr-control-brd) | Граница переключаемого контрола под указателем: коробка отметки, кружок радио. Тема без отклика ставит сюда --gr-control-brd. | |
--gr-ring--gr-ring | #6366f1 | #818cf8 | Цвет focus-ring и акцентного outline для интерактивных компонентов. |
Роли состояний
| Токен | Светлая | Тёмная | Контраст | Роль |
|---|---|---|---|---|
--gr-disabled-bg--gr-disabled-bg | #f1f5f9 | #273548 | Фон недоступного контрола: гасит его поверхностью, а не прозрачностью — opacity разбавляет выверенные на AA токены текста. | |
--gr-disabled-fg--gr-disabled-fg | #94a3b8 | #64748b | Цвет текста и иконок недоступного контрола. | |
--gr-disabled-brd--gr-disabled-brd | #e2e8f0 | #334155 | Цвет рамки недоступного контрола. | |
--gr-invalid-brd--gr-invalid-brd | var(--gr-danger) | var(--gr-danger) | Цвет рамки контрола, не прошедшего валидацию. | |
--gr-invalid-ring--gr-invalid-ring | var(--gr-danger) | var(--gr-danger) | Цвет focus-ring контрола, не прошедшего валидацию. | |
--gr-invalid-text--gr-invalid-text | var(--gr-danger-text) | var(--gr-danger-text) | 7.94 / 9.41против --gr-bg | Цвет текста ошибки и метки обязательного поля. |
Роли действий
| Токен | Светлая | Тёмная | Контраст | Роль |
|---|---|---|---|---|
--gr-primary--gr-primary | #4f46e5 | #9d8bfa | Главный brand/action цвет темы для primary CTA и ключевых акцентов. | |
--gr-primary-fg--gr-primary-fg | #ffffff | #0f172a | 6.29 / 6.38против --gr-primary | Контрастный текст и иконки поверх primary-заливки. |
--gr-accent--gr-accent | #eef2ff | #1e1b4b | Мягкая акцентная поверхность для selected/hovered областей и подсветок. | |
--gr-accent-fg--gr-accent-fg | #3730a3 | #c7d2fe | 8.88 / 10.72против --gr-accent | Цвет текста поверх accent-подложек. |
--gr-selected--gr-selected | var(--gr-primary) | var(--gr-primary) | Цвет выбранного: заливка и рамка отметки и радио, дорожка включённого переключателя, черта вкладки, заливка слайдера, текущая страница пагинации, кольцо выбранного цвета; подмесом — подсветка выбранной строки и узла дерева. Тема, где выбор — бренд, ставит сюда --gr-primary. | |
--gr-selected-fg--gr-selected-fg | var(--gr-primary-fg) | var(--gr-primary-fg) | 6.29 / 6.38против --gr-selected | Знак на заливке --gr-selected: галочка отметки, точка радио, номер текущей страницы. |
--gr-selected-hover--gr-selected-hover | var(--gr-selected) | var(--gr-selected) | Выбранное под указателем: заливка отмеченной коробки и выбранного радио. Тема без отклика ставит сюда --gr-selected. |
Роли статусов
| Токен | Светлая | Тёмная | Контраст | Роль |
|---|---|---|---|---|
--gr-success--gr-success | #10b981 | #34d399 | Основной semantic success-цвет для статусов, бейджей и уведомлений. | |
--gr-success-light--gr-success-light | #d1fae5 | #194536 | Облегчённая success-подложка для мягких статусов и подсветок. | |
--gr-success-fg--gr-success-fg | #0f172a | #0f172a | 7.04 / 9.29против --gr-success | Контрастный текст и иконки поверх success-заливки. |
--gr-primary-text--gr-primary-text | #3730a3 | #c7d2fe | 9.49 / 11.97против --gr-bg | Основной тон как ЦВЕТ ТЕКСТА на фоне страницы: насыщенный --gr-primary под текст не рассчитан и не проходит по контрасту. |
--gr-success-text--gr-success-text | #065f46 | #6ee7b7 | 7.34 / 11.71против --gr-bg | Текстовый оттенок для success-сообщений на светлой подложке. |
--gr-warning--gr-warning | #f97316 | #fb923c | Основной semantic warning-цвет для предупреждений и промежуточных статусов. | |
--gr-warning-light--gr-warning-light | #ffedd5 | #672e1c | Облегчённая warning-подложка для мягких warning-состояний. | |
--gr-warning-fg--gr-warning-fg | #0f172a | #0f172a | 6.37 / 7.89против --gr-warning | Контрастный текст и иконки поверх warning-заливки. |
--gr-warning-text--gr-warning-text | #7c2d12 | #fdba74 | 8.96 / 10.59против --gr-bg | Текстовый оттенок для warning-сообщений на мягкой warning-подложке. |
--gr-danger--gr-danger | #dc2626 | #f87171 | Semantic danger-цвет для ошибок, рисков и критических сообщений. | |
--gr-danger-light--gr-danger-light | #fee2e2 | #6a2522 | Облегчённая danger-подложка для мягких error-состояний. | |
--gr-danger-fg--gr-danger-fg | #ffffff | #0f172a | 4.83 / 6.45против --gr-danger | Контрастный текст и иконки поверх danger-заливки. |
--gr-danger-text--gr-danger-text | #991b1b | #fca5a5 | 7.94 / 9.41против --gr-bg | Текстовый оттенок для error-сообщений на мягкой danger-подложке. |
--gr-info--gr-info | #2563eb | #60a5fa | Semantic info-цвет для нейтральных уведомлений и информационных акцентов. | |
--gr-info-light--gr-info-light | #dbeafe | #213771 | Облегчённая info-подложка для спокойных информационных блоков. | |
--gr-info-fg--gr-info-fg | #ffffff | #0f172a | 5.17 / 7.02против --gr-info | Контрастный текст и иконки поверх info-заливки. |
--gr-info-text--gr-info-text | #1e40af | #bfdbfe | 8.34 / 12.56против --gr-bg | Текстовый оттенок для спокойных info-сообщений и подсказок. |
--gr-slate--gr-slate | #475569 | #94a3b8 | Нейтральный semantic slate-цвет для subdued индикаторов и secondary статусов. | |
--gr-slate-light--gr-slate-light | #e2e8f0 | #313b4a | Облегчённая slate-подложка для мягких нейтральных состояний. | |
--gr-slate-fg--gr-slate-fg | #ffffff | #0f172a | 7.58 / 6.96против --gr-slate | Контрастный текст и иконки поверх slate-заливки. |
--gr-slate-text--gr-slate-text | #334155 | #cbd5e1 | 9.90 / 12.02против --gr-bg | Текстовый оттенок для нейтральных slate-сообщений и плашек. |
--gr-azure--gr-azure | #0077b6 | #38bdf8 | Semantic azure-цвет для информационных акцентов и вспомогательных статусов. | |
--gr-azure-light--gr-azure-light | #e0f2fe | #1b425c | Облегчённая azure-подложка для мягких informational поверхностей. | |
--gr-azure-fg--gr-azure-fg | #ffffff | #0f172a | 4.87 / 8.33против --gr-azure | Контрастный текст и иконки поверх azure-заливки. |
--gr-azure-text--gr-azure-text | #075985 | #bae6fd | 7.23 / 13.45против --gr-bg | Текстовый оттенок для azure-плашек и спокойных informational блоков. |
Роли плотных заливок
| Токен | Светлая | Тёмная | Контраст | Роль |
|---|---|---|---|---|
--gr-primary-solid--gr-primary-solid | var(--gr-primary) | #595ce6 | Сплошная заливка кнопочного веса тона primary. | |
--gr-primary-solid-hover--gr-primary-solid-hover | var(--gr-primary-hover) | #5053dd | Заливка --gr-primary-solid под курсором. | |
--gr-primary-solid-active--gr-primary-solid-active | var(--gr-primary-active) | #474acf | Заливка --gr-primary-solid в момент нажатия. | |
--gr-primary-solid-fg--gr-primary-solid-fg | var(--gr-primary-fg) | var(--gr-slate-0) | 6.29 / 5.12против --gr-primary-solid | Текст и иконки на заливке --gr-primary-solid. |
--gr-success-solid--gr-success-solid | #047857 | #047857 | Сплошная заливка кнопочного веса тона success. | |
--gr-success-solid-hover--gr-success-solid-hover | #036c4d | #036c4d | Заливка --gr-success-solid под курсором. | |
--gr-success-solid-active--gr-success-solid-active | #025f44 | #025f44 | Заливка --gr-success-solid в момент нажатия. | |
--gr-success-solid-fg--gr-success-solid-fg | var(--gr-slate-0) | var(--gr-slate-50) | 5.48 / 5.24против --gr-success-solid | Текст и иконки на заливке --gr-success-solid. |
--gr-warning-solid--gr-warning-solid | #c2410c | #c2410c | Сплошная заливка кнопочного веса тона warning. | |
--gr-warning-solid-hover--gr-warning-solid-hover | #b53b0a | #b53b0a | Заливка --gr-warning-solid под курсором. | |
--gr-warning-solid-active--gr-warning-solid-active | #9f3307 | #9f3307 | Заливка --gr-warning-solid в момент нажатия. | |
--gr-warning-solid-fg--gr-warning-solid-fg | var(--gr-slate-0) | var(--gr-slate-50) | 5.18 / 4.95против --gr-warning-solid | Текст и иконки на заливке --gr-warning-solid. |
--gr-danger-solid--gr-danger-solid | var(--gr-danger) | #b91c1c | Сплошная заливка кнопочного веса тона danger. | |
--gr-danger-solid-hover--gr-danger-solid-hover | var(--gr-danger-hover) | #a91919 | Заливка --gr-danger-solid под курсором. | |
--gr-danger-solid-active--gr-danger-solid-active | var(--gr-danger-active) | #931515 | Заливка --gr-danger-solid в момент нажатия. | |
--gr-danger-solid-fg--gr-danger-solid-fg | var(--gr-danger-fg) | var(--gr-slate-50) | 4.83 / 6.18против --gr-danger-solid | Текст и иконки на заливке --gr-danger-solid. |
--gr-info-solid--gr-info-solid | var(--gr-info) | #1d4ed8 | Сплошная заливка кнопочного веса тона info. | |
--gr-info-solid-hover--gr-info-solid-hover | var(--gr-info-hover) | #1e40af | Заливка --gr-info-solid под курсором. | |
--gr-info-solid-active--gr-info-solid-active | var(--gr-info-active) | #1e3a8a | Заливка --gr-info-solid в момент нажатия. | |
--gr-info-solid-fg--gr-info-solid-fg | var(--gr-info-fg) | var(--gr-slate-50) | 5.17 / 6.41против --gr-info-solid | Текст и иконки на заливке --gr-info-solid. |
--gr-slate-solid--gr-slate-solid | var(--gr-slate) | var(--gr-slate-600) | Сплошная заливка кнопочного веса тона slate. | |
--gr-slate-solid-hover--gr-slate-solid-hover | var(--gr-slate-hover) | var(--gr-slate-700) | Заливка --gr-slate-solid под курсором. | |
--gr-slate-solid-active--gr-slate-solid-active | var(--gr-slate-active) | var(--gr-slate-800) | Заливка --gr-slate-solid в момент нажатия. | |
--gr-slate-solid-fg--gr-slate-solid-fg | var(--gr-slate-fg) | var(--gr-slate-50) | 7.58 / 7.24против --gr-slate-solid | Текст и иконки на заливке --gr-slate-solid. |
--gr-azure-solid--gr-azure-solid | #0369a1 | #0369a1 | Сплошная заливка кнопочного веса тона azure. | |
--gr-azure-solid-hover--gr-azure-solid-hover | #075985 | #075985 | Заливка --gr-azure-solid под курсором. | |
--gr-azure-solid-active--gr-azure-solid-active | #0c4a6e | #0c4a6e | Заливка --gr-azure-solid в момент нажатия. | |
--gr-azure-solid-fg--gr-azure-solid-fg | var(--gr-slate-0) | var(--gr-slate-50) | 5.93 / 5.67против --gr-azure-solid | Текст и иконки на заливке --gr-azure-solid. |
Роли визуализации данных
| Токен | Светлая | Тёмная | Роль |
|---|---|---|---|
--gr-chart-1--gr-chart-1 | #4f46e5 | #6366f1 | Первый цвет серии для графиков и data-visualization элементов. |
--gr-chart-2--gr-chart-2 | #059669 | #34d399 | Второй цвет серии для графиков и data-visualization элементов. |
--gr-chart-3--gr-chart-3 | #ea580c | #fb923c | Третий цвет серии для графиков и data-visualization элементов. |
--gr-chart-4--gr-chart-4 | #0284c7 | #38bdf8 | Четвёртый цвет серии для графиков и data-visualization элементов. |
--gr-chart-5--gr-chart-5 | #db2777 | #f472b6 | Пятый цвет серии для графиков и data-visualization элементов. |
Тени
| Токен | Светлая | Тёмная | Роль |
|---|---|---|---|
--gr-shadow-1--gr-shadow-1 | 0 1px 2px rgba(15, 23, 42, 0.08) | 0 1px 2px rgba(0, 0, 0, 0.45) | Уровень elevation 1. Синеватая полупрозрачная тень читается на светлом фоне мягче чёрной. |
--gr-shadow-2--gr-shadow-2 | 0 8px 24px rgba(15, 23, 42, 0.14) | 0 8px 24px rgba(0, 0, 0, 0.55) | Уровень elevation 2 для всплывающих слоёв. |
--gr-shadow-3--gr-shadow-3 | 0 16px 48px rgba(15, 23, 42, 0.20) | 0 16px 48px rgba(0, 0, 0, 0.65) | Уровень elevation 3 для модальных слоёв. |