Токены
Всё на этой странице читается прямо из токен-файлов @ilomee/aura-core — здесь нет ни одной копии значений. Поменяйте тему или акцент в шапке, и значения ниже пересчитаются: это те же CSS-переменные, что использовало бы ваше приложение.
Акценты
5 акцентов. Каждый — пара для градиента плюс сплошной --accent, свой на каждую тему. Выберите любой в шапке, и сайт перекрасится.
Свой цвет
Пять акцентов выше — пресеты, а не предел. Каждое производное от акцента значение в таблице стилей — градиент, все двенадцать ступеней шкалы, кольца фокуса, все ролевые алиасы — это <code>color-mix()</code> поверх трёх кастомных свойств, который считает сам браузер. Переопределите их — и палитра поедет следом: без пересборки, без нового селектора, без форка.
import { accentVars } from '@ilomee/aura-core';
import { AuraProvider } from '@ilomee/aura-react';
// Свой градиент.
<AuraProvider vars={accentVars({ from: '#FF6B00', to: '#FFC300' })}>…</AuraProvider>
// Один цвет вместо градиента: обе точки несут его, поэтому --gradient отрисуется плоским.
<AuraProvider vars={accentVars('#E11D48')}>…</AuraProvider>
// Сплошной цвет может отличаться от градиента — им красятся рамки, кольца фокуса и текст.
<AuraProvider vars={accentVars({ from: '#FF6B00', to: '#FFC300', accent: '#F05A38' })}>…</AuraProvider>Без библиотеки компонентов это три объявления — те самые, что за вас пишет хелпер.
:root {
--grad-a: #ff6b00;
--grad-b: #ffc300;
--accent: #ff6b00;
}Поверхности и текст
Обе шкалы рядом. Переключатель темы решает, какая из них сейчас работает.
Цвет наведения
Наведение рисуют шесть правил — вторичная и призрачная кнопки, иконочная кнопка, крестик чипа, заголовок аккордеона и опция под курсором в списке. Все шесть читают --aura-hover-bg с откатом на --surface-2, поэтому смена цвета — одно объявление, а не шесть переопределений. Насколько далеко оно достанет, решает то, где вы его поставите. Намеренно узко: дорожка сегментированного контрола и выключенное поле — тоже --surface-2, и ни то, ни другое не наведение.
:root { --aura-hover-bg: color-mix(in srgb, var(--accent) 10%, transparent); }
.sidebar { --aura-hover-bg: #1b1f2a; }Семантика
Форма и тени
Отступы
gap со значением 4 на любом лэйаут-компоненте означает var(--space-4).
Два семейства
Каждый размер из шкалы выше — это одно из двух семейств. Ни одно не поставляется вместе с библиотекой: --font и --mono называют семейство и откатываются на системное, поэтому проект, не загрузивший ни одного, всё равно получает всю шкалу — системным шрифтом, в правильных размерах и начертаниях.
Два объявления, там же, где переопределяется акцент. Загрузите шрифт так, как проект уже загружает шрифты — через @font-face, тег link или импорт сборщика, — и направьте токен на него: все компоненты читают токен, поэтому больше менять нечего.
@font-face {
font-family: 'Your Sans';
src: url('/fonts/your-sans.woff2') format('woff2');
font-display: swap;
}
:root {
--font: 'Your Sans', system-ui, sans-serif;
--mono: 'Your Mono', ui-monospace, monospace;
}Типографика
Как переключается всё сразу
Четыре атрибута на любом предке — обычно на <html> — пересчитывают все переменные под ним. Это и есть весь API темизации; JavaScript в нём не участвует.
| Атрибут | Значения | По умолчанию |
|---|---|---|
| data-theme | light · dark | light |
| data-accent | aqua · sunset · iris · lime · rose | aqua |
| data-corner | rounded · sharp · pill | rounded |
| data-density | comfortable · compact | comfortable |