Themes
Advanced
Utils
Theme

간격

간격 스케일 및 스케일링 옵션을 탐색합니다.

간격 값은 9단계 스케일에서 파생되며, 이는 여백 및 Padding과 같은 props에 사용됩니다. 이러한 props는 "1"에서 "9"까지의 숫자 문자열을 허용하며, 이는 아래의 스케일 단계에 해당합니다.

1
2
3
4
5
6
7
8
9
StepBase value
14px
28px
312px
416px
524px
632px
740px
848px
964px

Space scale tokens

간격 스케일 토큰은 CSS 변수를 사용하여 접근할 수 있습니다. 이러한 토큰을 사용하여 사용자 정의 구성 요소를 스타일링하여 나머지 테마와 일관되게 유지할 수 있습니다.

/* 간격 스케일 */

var(--space-1);

var(--space-2);

var(--space-3);

var(--space-4);

var(--space-5);

var(--space-6);

var(--space-7);

var(--space-8);

var(--space-9);

Scaling

레이아웃에 영향을 미치는 값(간격, 글꼴 크기, 줄 높이)은 테마에서 정의된 scaling 값을 기준으로 서로 상대적으로 스케일됩니다. 이 설정을 통해 전체 애플리케이션에서 UI 밀도를 균일하게 조정할 수 있습니다.

<Theme scaling="100%">

	<Card variant="surface">

		<Flex gap="3" align="center">

			<Avatar size="3" src={person.image} fallback={person.name} />

			<Box>

				<Text as="div" size="2" weight="bold">

					{person.name}

				</Text>

				<Text as="div" size="2" color="gray">

					Approved invoice <Link>#3461</Link>

				</Text>

			</Box>

		</Flex>

	</Card>

</Theme>
90%
95%
100%
105%
110%

Scaling factor

스케일링 팩터 토큰은 --scaling CSS 변수를 사용하여 접근할 수 있습니다. 앱에서 다른 스케일링 팩터를 사용해야 하는 경우, 이 토큰을 사용자 정의 스타일에 사용하여 나머지 테마와 일관되게 유지할 수 있습니다.

.MyCustomComponent {

	width: calc(200px * var(--scaling));

}
PreviousTypography
NextBreakpoints
Edit this page on GitHub.