токены
Токены и темы
Почти каждая Sass-переменная пятой версии стала CSS-переменной в карте токенов. Это значит, что оформление меняется в браузере, без пересборки: на этой странице всё, что справа, перестраивается от ползунков слева.
Живая настройка
Радиусы и отступы в ядре — шкалы от одного базового числа; оттенок primary собирается из ступеней любого цвета палитры; схема переключается атрибутом data-bs-theme на одном элементе.
Карточка слушает четыре токена
Скругление — --bs-radius-5, отступы тела — --bs-spacer-*, цвет значков и кнопок — --bs-primary-*, фон и текст — light-dark().
Оповещение той же темы.
- Шаг
- Шаг
- Шаг
Аккордеон
Второй пункт
Палитра: 16 оттенков × 13 ступеней
Базовая ступень 500 записана в oklch, остальные двенадцать браузер смешивает с белым и чёрным в том же пространстве функцией color-mix(). Все 208 цветов ниже прочитаны из токенов :root скриптом страницы.
Семантические темы
У каждой темы девять ролей: base, fg, fg-emphasis, bg, bg-subtle, bg-muted, border, focus-ring, contrast. Компоненты читают роли через --bs-theme-*, поэтому новая тема — это одна запись в карте, а не новый набор классов.
нейтральные поверхности
ступени текста
Одиннадцать слоёв каскада
Весь фреймворк разложен по @layer: правило из позднего слоя побеждает правило из раннего независимо от специфичности селектора. Слой custom оставлен пустым для ваших стилей — он выше компонентов, но ниже утилит, поэтому утилита всегда перекроет и компонент, и вашу надстройку.
- 01colors 208 цветовых токенов
- 02config
- 03root глобальные токены, color-scheme
- 04reboot
- 05layout контейнеры, сетка
- 06content типографика, таблицы, prose
- 07forms
- 08components
- 09custom ваши стили — этот сайт кладёт сюда site.css
- 10helpers
- 11utilities верхний слой, всегда побеждает
Тени и радиусы
Тень — несколько слоёв с альфой из oklch(from …); в тёмной схеме токен --bs-shadow-strength сам усиливает её в 2,4 раза. Радиусы — десять ступеней от нуля до двойного базового.
Шкала шрифтов
Десять ступеней от xs до 6xl. С ступени lg размер — функция clamp(): он растёт вместе с окном в заданных пределах, поэтому библиотека RFS больше не нужна. Справа — вычисленное значение в текущем окне.