токены

Токены и темы

Почти каждая Sass-переменная пятой версии стала CSS-переменной в карте токенов. Это значит, что оформление меняется в браузере, без пересборки: на этой странице всё, что справа, перестраивается от ползунков слева.

Живая настройка

Радиусы и отступы в ядре — шкалы от одного базового числа; оттенок primary собирается из ступеней любого цвета палитры; схема переключается атрибутом data-bs-theme на одном элементе.


      

      

        

          
          

            

              

                
                

                  
новоемягкийконтур

                  
Карточка слушает четыре токена

                  
Скругление — --bs-radius-5, отступы тела — --bs-spacer-*, цвет значков и кнопок — --bs-primary-*, фон и текст — light-dark().

                  

                

              

            

            

              
              

              

              

              
  1. Шаг
  2. Шаг
  3. Шаг

              

                
Аккордеон
Радиус рамки берёт из шкалы.

                
Второй пункт
Открывается без JavaScript.

              

            

          

        

      

    

  


  

    
Палитра: 16 оттенков × 13 ступеней

    
Базовая ступень 500 записана в oklch, остальные двенадцать браузер смешивает с белым и чёрным в том же пространстве функцией color-mix(). Все 208 цветов ниже прочитаны из токенов :root скриптом страницы.

    

  


  

    
Семантические темы

    
У каждой темы девять ролей: base, fg, fg-emphasis, bg, bg-subtle, bg-muted, border, focus-ring, contrast. Компоненты читают роли через --bs-theme-*, поэтому новая тема — это одна запись в карте, а не новый набор классов.

    

      
primary · contrast
bg-subtle + fg-emphasis
bg-muted
fg · fg-emphasis

      
accent · contrast
bg-subtle + fg-emphasis
bg-muted
fg · fg-emphasis

      
success · contrast
bg-subtle + fg-emphasis
bg-muted
fg · fg-emphasis

      
danger · contrast
bg-subtle + fg-emphasis
bg-muted
fg · fg-emphasis

      
warning · contrast
bg-subtle + fg-emphasis
bg-muted
fg · fg-emphasis

      
info · contrast
bg-subtle + fg-emphasis
bg-muted
fg · fg-emphasis

      
inverse · contrast
bg-subtle + fg-emphasis
bg-muted
fg · fg-emphasis

      
secondary · contrast
bg-subtle + fg-emphasis
bg-muted
fg · fg-emphasis

    

    

      
нейтральные поверхности
bg-body
bg-1
bg-2
bg-3
bg-4

      
ступени текста
fg-bodyfg-1fg-2fg-3fg-4

    

  


  

    
Одиннадцать слоёв каскада

    
Весь фреймворк разложен по @layer: правило из позднего слоя побеждает правило из раннего независимо от специфичности селектора. Слой custom оставлен пустым для ваших стилей — он выше компонентов, но ниже утилит, поэтому утилита всегда перекроет и компонент, и вашу надстройку.

    
    
      
  1. 01colors 208 цветовых токенов
    2. 
      
  2. 02config
    3. 
      
  3. 03root глобальные токены, color-scheme
    4. 
      
  4. 04reboot
    5. 
      
  5. 05layout контейнеры, сетка
    6. 
      
  6. 06content типографика, таблицы, prose
    7. 
      
  7. 07forms
    8. 
      
  8. 08components
    9. 
      
  9. 09custom ваши стили — этот сайт кладёт сюда site.css
    10. 
      
  10. 10helpers
    11. 
      
  11. 11utilities верхний слой, всегда побеждает
    12. 
    

  


  

    
Тени и радиусы

    
Тень — несколько слоёв с альфой из oklch(from …); в тёмной схеме токен --bs-shadow-strength сам усиливает её в 2,4 раза. Радиусы — десять ступеней от нуля до двойного базового.

    

      
shadow-xs

      
shadow-sm

      
shadow

      
shadow-lg

      
shadow-xl

      
shadow-primary

    

    

      
0

      
1

      
2

      
3

      
4

      
5

      
6

      
7

      
8

      
9

      
pill

    

  


  

    
Шкала шрифтов

    
Десять ступеней от xs до 6xl. С ступени lg размер — функция clamp(): он растёт вместе с окном в заданных пределах, поэтому библиотека RFS больше не нужна. Справа — вычисленное значение в текущем окне.

    

      
Шрифт xs.fs-xs

      
Шрифт sm.fs-sm

      
Шрифт md.fs-md

      
Шрифт lg.fs-lg · clamp

      
Шрифт xl.fs-xl · clamp

      
Шрифт 2xl.fs-2xl · clamp

      
Шрифт 3xl.fs-3xl · clamp

      
Шрифт 4xl.fs-4xl · clamp

      
5xl.fs-5xl · clamp

      
6xl.fs-6xl · clamp