Шкалы
Радиусы и отступы кита, наши тени и длительности — единой лестницей.
Варианты и состояния
Радиусы
Лестница кита индексирована размером контрола, а не видом поверхности: кнопка размера m берёт ступень m, размера l — ступень l. Роли поэтому названы размерами: назвать их «кнопка» и «карточка» значило бы приписать киту систему, которой у него нет.
--g-border-radius-xs3pxконтрол размера xs--g-border-radius-s5pxконтрол размера s--g-border-radius-m6pxконтрол размера m--g-border-radius-l8pxконтрол размера l--g-border-radius-xl10pxконтрол размера xl
Отступы
Ступени считаются от одного шага в четыре пикселя, который кит умножает сам. Ролей у них нет намеренно — это кратные, а не назначения. Rem-база Tailwind живёт своей лестницей и этой правкой не тронута: числа совпадают, но системы разные.
--g-spacing-half2px--g-spacing-14px--g-spacing-28px--g-spacing-312px--g-spacing-416px--g-spacing-520px--g-spacing-624px--g-spacing-728px--g-spacing-832px--g-spacing-936px--g-spacing-1040px
Тени
Шкалы теней у Gravity нет вовсе, поэтому она остаётся нашей и набирается утилитой. Ступень — это высота над поверхностью, а не сила размытия. Оттенок задан токеном темы, а не зашит числом: у светлой и тёмной тем плотность тени разная — в тёмной высоту несёт светлота самой поверхности, и тень только подпирает её.
shadow-xs--shadow-xs · 0 1px 2px -1px var(--g-color-sfx-shadow-light)контрол в покоеshadow-sm--shadow-sm · 0 2px 4px -2px var(--g-color-sfx-shadow-light), 0 1px 2px -1px var(--g-color-sfx-shadow-light)карточка, панельshadow-md--shadow-md · 0 6px 12px -4px var(--g-color-sfx-shadow), 0 2px 4px -3px var(--g-color-sfx-shadow-heavy)выпадающее, поповерshadow-lg--shadow-lg · 0 16px 28px -8px var(--g-color-sfx-shadow), 0 4px 8px -6px var(--g-color-sfx-shadow-heavy)диалог поверх страницы
Длительности
Шкалы длительностей у Gravity тоже нет — три класса движения наши. Первая ступень стоит умолчанием переходов, поэтому transition-colors без явного класса тоже оказывается на шкале. При системной настройке «меньше движения» вся шкала схлопывается разом. Бесконечные анимации живут не шкалой и гасятся отдельно: вращение индикатора кит останавливает сам, пульсацию заготовки — уже мы, потому что кит снимает по этой настройке только свою умолчательную анимацию.
duration-fast--transition-duration-fast · 120msцвет под курсором, фокус, нажатиеduration-base--transition-duration-base · 200msраскрытие, переключение состоянияduration-slow--transition-duration-slow · 320msвъезд панели или диалога
Токены
--g-border-radius-*--g-spacing-*--shadow-*--transition-duration-fast--transition-duration-base--transition-duration-slow
первые две лестницы приходят из кита и берутся переменной, две вторые остаются нашими и набираются утилитой: у Gravity их нет вовсе
Пример
<div className="shadow-sm duration-fast" />