Shape scale & Token

Shape scale

Scale은 cut 또는 roundedness "정도" 정의하는 7가지 모서리 모양 스타일 범위입니다.

Scale의 각 역할은 다음 두 가지를 정의합니다.

- shaple famliy(rounded 또는 cut)
- value

기본적으로 모든 Roles은 rounded shaple famliy를 사용합니다.

 백분율로 표시되는 전체 스타일을 제외하고, 대부분의 값은 절대 dp 측정값으로 표시됩니다.

Baseline shapes

기본적으로,  모든 구성 요소는 7가지 모양 스타일 중 하나에 매핑됩니다.

Shape style	Component
None	Banners Bottom app bars Full-screen dialogs Lists Navigation bars Navigation rails Progress indicators Search view (full-screen) Side sheets (docked) Tabs Top app bars
Extra small	Autocomplete menu Select menu Snackbars Standard menu Text fields
Small	Chips Rich tooltip
Medium	Cards Small FABs
Large	Extended FABs FABs Navigation drawers
Extra large	Bottom sheets (docked) Dialogs Floating sheets Large FABs Search view (docked) Time picker Time input
Full	Badge Buttons Icon buttons Sliders Switches Search bar

Symmetry

구성 요소는 대칭 또는 비대칭 모서리 모양을 가질 수 있습니다.

대칭 모양은 모든 모서리에 대해 동일한 값을 갖는다.

비대칭 모양은 다른 값을 가진 모서리를 가진다.

 

위쪽, 아래쪽, 시작 또는 끝과 같은 "directional modifier"로 끝나는 Shape token은 항상 비대칭입니다.

비대칭 모양의 토큰에는 위쪽, 아래쪽, 시작 또는 끝과 같은 "directional modifier"가 포함됩니다.

Shape Famliy

구성 요소는 다음 두 가지 모양 패밀리 중 하나를 가질 수 있습니다.

- Rounded corners

- Cut corners

Customizing shapes

for a style

shape scale에서 모든 스타일 수준의 모양 계열 및 크기를 사용자화할 수 있습니다.

이러한 변경 사항은 재정의가 있는 구성 요소를 제외하고, 해당 모양 스타일에 매핑된 모든 구성 요소에 영향을 줍니다.

 

중간 스타일의 모서리 크기를 사용자 지정하면 카드 및 작은 FAB와 같이 이 스타일을 사용하는 모든 구성 요소에 변경 사항이 적용됩니다.

For a specific component

구성 요소가 매핑되는 스타일 수준(None, Extra small, Small, Medium,,Large, Extra large,  Full)을 변경할 수 있습니다.

예를 들어, 기본적으로 버튼은 모양 스타일 "full"에 매핑됩니다.

제품에 더 적은 양의 원형이 필요한 경우 shape scale에서 작거나 중간 스타일로 다시 매핑할 수 있습니다.

 

shape family를 변경하면 구성 요소 내의 콘텐츠에 영향을 미칠 수 있습니다.

예를 들어, 카드의 a large cut corner는 같은 크기의 rounded corner보다 콘텐츠 영역을 더 많이 침범하여 잠재적으로 콘텐츠 레이아웃이나 이미지 클리핑에 영향을 미칩니다.

의도하지 않은 결과를 피하려면 구성 요소의 레이아웃 및 콘텐츠와 함께 모양 계열 및 크기를 선택하는 것을 고려하십시오.

Shape tokens

Role	System token	Value
No rounding	md.sys.shape.corner.none	0dp SHAPE_FAMILY_ROUNDED_CORNERS
Extra small	md.sys.shape.corner.extra-small	4dp SHAPE_FAMILY_ROUNDED_CORNERS
Extra small top	md.sys.shape.corner.extra-small.top	4dp,4dp,0dp,0dp, SHAPE_FAMILY_ROUNDED_CORNERS
Small	md.sys.shape.corner.small	8dp SHAPE_FAMILY_ROUNDED_CORNERS
Medium	md.sys.shape.corner.medium	12dp, SHAPE_FAMILY_ROUNDED_CORNERS
Large	md.sys.shape.corner.large	16dp SHAPE_FAMILY_ROUNDED_CORNERS
Large end	md.sys.shape.corner.large.end	0dp,16dp,16dp,0dp SHAPE_FAMILY_ROUNDED_CORNERS
Large top	md.sys.shape.corner.large.top	16dp,16dp,0dp, 0dp SHAPE_FAMILY_ROUNDED_CORNERS
Extra large	md.sys.shape.corner.extra-large	28dp SHAPE_FAMILY_ROUNDED_CORNERS
Extra large top	md.sys.shape.corner.extra-large.top	28dp,28dp,0dp,0dp SHAPE_FAMILY_ROUNDED_CORNERS
Full	md.sys.shape.corner.full	- SHAPE_FAMILY_CIRCULAR