间距

¥Spacing

空间比例和缩放选项概览。

空间比例

¥Space scale

间距值源自 9 步比例，用于诸如边距和填充之类的属性。这些属性接受从 "1" 到 "9" 的数字字符串，分别对应于下方比例尺中的步骤。

¥Spacing values are derived from a 9-step scale, which is used for props such as margin and padding. These props accept numeric strings from "1" to "9", which correspond to the steps in the scale below.

空间比例标记

¥Space scale tokens

空间比例标记也可以使用 CSS 变量访问。你可以使用这些令牌来设置自定义组件的样式，确保它们与主题的其余部分保持一致。

¥Space scale tokens can be also accessed using CSS variables. You can use these tokens to style your custom components, ensuring they are consistent with the rest of your theme.

/* Space scale */
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 密度。

¥Values which affect layout (spacing, font size, line height) scale relatively to each other based on the scaling value defined in your Theme. This setting allows you to scale the UI density uniformly across your entire application.

<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>

缩放因子

¥Scaling factor

可以使用 --scaling CSS 变量访问缩放因子令牌。如果你需要在应用中使用不同的缩放比例，你可以在自定义样式中使用此令牌，并确保它们与主题的其余部分保持一致。

¥The scaling factor token can be accessed using the --scaling CSS variable. If you need to use different scaling factors in your app, you can use this token in your custom styles, ensuring they are consistent with the rest of your theme.

.MyCustomComponent {
	width: calc(200px * var(--scaling));
}