스킨

스킨

색상과 밀도가 결정된 후 그려지는 방식: 모서리, 깊이, 선. 이 토큰들은 테마의 `피부` 축입니다 — 기본 피부가 이 페이지에 표시되며, 다른 피부는 같은 이름을 설정하는 다른 파일로, 아래에서 변경할 것이 없습니다.

모서리 둥글기

없음, 그 다음 두 번씩 네 단계, 그리고 알약. 두 단계 간격은 스케일 어디에 서 있든 같은 거리로, 이것이 읽기 쉽게 만듭니다. 첫 번째 단계는 일부러 거의 보이지 않게 설정됩니다: 이는 평면 피부가 원각이 미완성으로 읽힐 때 원하는 것입니다. 마지막 단계보다 더 둥근 것은 스스로 원형이 되고 싶어 하는 형태입니다 — 원형은 피부 결정이 아닙니다.
--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 — 그렇게 경계가 설정된 페이지의 영역