间距与度量令牌

tanrei.sys 下的尺寸令牌。使用指引请阅读布局和无障碍。

间距

link

令牌	值	预览
--tanrei-sys-space-space0	0px
--tanrei-sys-space-space25	2px
--tanrei-sys-space-space50	4px
--tanrei-sys-space-space75	6px
--tanrei-sys-space-space100	8px
--tanrei-sys-space-space125	10px
--tanrei-sys-space-space150	12px
--tanrei-sys-space-space175	14px
--tanrei-sys-space-space200	16px
--tanrei-sys-space-space250	20px
--tanrei-sys-space-space300	24px
--tanrei-sys-space-space400	32px
--tanrei-sys-space-space450	36px
--tanrei-sys-space-space500	40px
--tanrei-sys-space-space600	48px
--tanrei-sys-space-space700	56px
--tanrei-sys-space-space800	64px
--tanrei-sys-space-space900	72px

生成自 design/tokens/tanrei.light.tokens.json, tokens/sys/space.tokens.json

最小目标

link

The least sizes of what a person presses. minimum is the least height (and, for an icon-only control, width) anything pressable is drawn at; touch and pointer are the least hit areas, which a control reaches past what it draws where it stands alone.

令牌	值	预览
--tanrei-sys-target-minimum	32px
--tanrei-sys-target-pointer	44px
--tanrei-sys-target-spacing	8px
--tanrei-sys-target-touch	48px

生成自 design/tokens/tanrei.light.tokens.json, tokens/sys/measure.tokens.json

图标

link

令牌	值	预览
--tanrei-sys-icon-extra-small	16px
--tanrei-sys-icon-large	32px
--tanrei-sys-icon-medium	24px
--tanrei-sys-icon-small	20px

生成自 design/tokens/tanrei.light.tokens.json, tokens/sys/measure.tokens.json

边框

link

令牌	值	预览
--tanrei-sys-border-hairline	1px
--tanrei-sys-border-thick	2px

生成自 design/tokens/tanrei.light.tokens.json, tokens/sys/measure.tokens.json

焦点环

link

The focus indicator, from the control outwards: `offset` (negative = drawn inside the control), then an optional inner stroke in sys.color.focus-ring-inner, then the outer stroke in sys.color.focus-ring. Never animated.

令牌	值	预览
--tanrei-sys-focus-inner-width	0px
--tanrei-sys-focus-offset	2px
--tanrei-sys-focus-outer-width	2px

生成自 design/tokens/tanrei.light.tokens.json, tokens/sys/measure.tokens.json