Значения

Значение — последняя часть имени утилиты. Эта глава описывает семейства значений; разные свойства принимают разные семейства, поэтому не каждое значение подходит каждой утилите.

Шкала интерфейса: 0, 1/4, 1/3, 1/2, 1…8

Отступы и промежутки (p-, m-, gap-, space-x-) принимают ступени семантической шкалы. Каждая ступень — ссылка на токен --sf-space-*:

.p-2 { padding: var(--sf-space-2); }

Это соразмерные значения: важен не точный размер, а место на лестнице — 2 больше 1, 1/2 меньше 1. Это та же лестница, что у размеров компонентов (см. Соразмерные ступени и Шкала интервалов): дробные ступени для мелких промежутков, целые — для крупных.

Значение токена зависит от устройства. На узком экране --sf-space-1 равен --sf-b2, а начиная с lg — --sf-b6. Класс p-1 при этом не меняется: отступ подрастает сам. Поэтому для обычного ритма интерфейса условие ширины часто не нужно (см. Мобильный и десктопный режим). Значение каждой ступени на телефоне и на десктопе — в таблице Значения интервалов.

Размер текста устроен так же: text-1…text-12 и дробные text-1/4…text-1/2 берут размер и высоту строки из текстовых токенов (см. Типографика).

Абсолютные значения: a0…i9

Когда нужен точный размер, используется базовая шкала размеров: буква диапазона и цифра, от a0 до i9. Значение — ссылка на примитив --sf-a0 … --sf-i9, в rem.

<div class="w-c4 h-b8">…</div>
<p class="text-c2">…</p>

Абсолютные значения есть у размеров, отступов, позиции и смещения (p-a4, m-top-b2, top-c0, translate-x-a8). Пользуйтесь ими, когда размер действительно фиксирован (иконка, аватар, колонка заданной ширины). Для ритма интерфейса предпочтительна шкала из Шкала интерфейса: 0, 1/4, 1/3, 1/2, 1…8: она подстраивается под устройство.

Отдельное значение px — один CSS-пиксель для тончайшей линии (h-px). Никаких других значений в пикселях утилиты не принимают. Пиксели в справочных таблицах — только пересчёт при 1rem = 16px, а не повод писать пиксели в коде проекта.

Доли, проценты и экран

Размер относительно родителя задаётся дробью: w-1/2, w-2/3, w-3/4, w-5/12. Знаменатели — 2, 3, 4, 5, 6 и 12; двенадцатые доли соответствуют двенадцатиколоночной сетке. full — 100% (w-full, h-full).

Ширина принимает и проценты — целым числом от 1 до 99: w-23 — это width: 23%.

Размер относительно окна обозначается словом screen: w-screen, h-screen, h-screen-1/2, min-h-screen. Для мобильных браузеров, у которых панель адреса меняет высоту окна, есть h-screen-small, h-screen-large и h-screen-dynamic — они опираются на соответствующие единицы окна через токены.

Размер по содержимому — min, max, fit: w-min, w-fit, min-w-fit. Для дорожек сетки — fr: auto-cols-fr, auto-rows-fr.

Именованные и двоичные значения

Многие свойства принимают слова: auto, none, hidden, scroll, cover, contain, subgrid. Свойства с двумя состояниями записываются парой «включено/выключено»: italic и italic-none, visible и invisible, grow и grow-none, shrink и shrink-none.

Числовые значения со смыслом

Для некоторых свойств число означает не ступень шкалы, а единицы самого свойства. Тогда ряд значений короткий и фиксированный:

• поворот и наклон — градусы: rotate-45 (45°), rotate-90, skew-x-3; доступны 0, 1, 2, 3, 5, 15, 45, 90, 180 (у наклона — до 15);
• прозрачность — десятые доли: opacity-5 — 0.5, opacity-full — 1;
• порядок — номер: order-1…order-12, плюс order-first, order-last;
• слой — ступень: z-0…z-9, z--1, z-auto;
• пропорции — отношение сторон: aspect-16x9, aspect-1x1.

Цвета

Цвет в утилите — это цветовая роль, а не конкретный оттенок (см. Цветовые роли). Роль сама знает свой цвет в светлой и тёмной теме.

<div class="bg-primary color-on-primary">…</div>
<div class="bg-surface-container border-1 border-outline-variant">…</div>

Принцип пары: фон берётся из роли (bg-primary, bg-surface-container), текст поверх него — из парной роли on- (color-on-primary, color-on-surface). Для границ контролов — border-outline, для границ областей — border-outline-variant.

Особые значения: inherit — унаследовать цвет родителя, current — взять текущий цвет текста (удобно для рамок и иконок), transparent.

В таблицах стилей есть и классы палитры (color-blue-5, bg-gray-2). Они не переключаются вместе с темой и не несут смысла. Для интерфейса выбирайте роли; палитра нужна для иллюстраций и редких декоративных случаев.

Направления и выравнивание

Направление и выравнивание бывают значением, а не параметром:

start и end логические: в RTL-документе text-start прижимает текст вправо.

Смотрите также: Цветовые роли — цветовые роли; Соразмерные ступени и Шкала интервалов — лестница размеров; Типографика — текстовые токены.