Скин

Скин

Как рисуются вещи, когда определены цвет и плотность: углы, глубина, линии. Эти токены являются осью `скина` темы — стандартный скин это то, что показано на этой странице, а другой скин — это другой файл с теми же именами, с которым ничего не нужно менять ниже.

Скругления

Никаких, затем четыре шага, каждый в два раза больше предыдущего, затем капсула. Два шага разницы — это одно и то же расстояние, независимо от того, где вы на шкале, что делает ее читаемой. Первый шаг почти незаметен специально: он нужен плоскому скину, когда настоящий прямой угол выглядит незавершенным. Всё, что более круглое, чем последний шаг, — это форма, которая хочет быть кругом и сама это говорит — круг не является решением по скину.
--radius-0
--radius-1
--radius-2
--radius-3
--radius-4
--radius-pill

Роли скруглений

Форма никогда не считывает шкалу выше: она считывает роль, которую играет, и скин говорит, какой шаг получает эта роль — никогда не то, сколько стоит шаг, что сделало бы шкалу значимой сразу для двух вещей. То, что удерживает что-то, — это коробка, независимо от того, удерживает ли она текст, контент или сообщение; то, что разделяет две области страницы, не является ни тем, ни другим, и ничего не округляет. Переключите скин на `мягкий` и посмотрите, как элемент управления отделяется от остального: капсула подходит для чего-то высотой в одну линию и абсурдна для текстового поля.
--radius-control
высотой в одну линию, и нажатый
--radius-box
удерживает что-то
--radius-media
изображения и фигуры
--radius-pill
то, что читается как капсула

Тени

Четыре глубины, от тончайшего подъема до плавающей панели. Скин, который хочет плоский мир, устанавливает все четыре на ноль, и каждая приподнятая поверхность следует этому.
--shadow-1
--shadow-2
--shadow-3
--shadow-4

Границы

Линия сама по себе — ее ширина и стиль. Ее цвет здесь не указан: он принадлежит цветовой схеме, что позволяет скину убрать линию, не зная, какого цвета она была бы.
--border-discreet
--border-default
--border-focus
--border-placeholder

Разделители и регионы

Две линии, которые отделяют вещи друг от друга: между двумя рядами одной вещи и между двумя регионами страницы. Двадцать с лишним форм считывают первую, и именно поэтому это токен, а не правило.
--border-separator — ряд среди других
ряд среди других
ряд среди других
--border-region — регион страницы, ограниченный как таковой