HIsheR
5a1d5ba6d7
- 保留原有颜色/圆角/间距/字号四组，新增字重行高、边框、阴影、动效、 焦点环、控件高度、层级七组，共十一组；每个变量补中文用途注释 - 阴影收敛为四档 elevation（柔和优先：扩散更大、透明度更低），并在 [data-theme=dark] 覆盖为更高黑度，解决暗色下阴影沿用亮色投影的问题 - 动效时长收为 fast/base/slow 三档（fast 取 0.15s，贴合现有主流时长）， 补 --ua-ease / --ua-ease-out 两条主缓动 - 焦点环统一为 --ua-focus-ring / --ua-focus-ring-inset 两个槽位 - 字号补 xs/xl/2xl，控件高度三档，层级五档 - tokens.json 资产清单按新分组同步
43 lines
2.0 KiB
JSON
43 lines
2.0 KiB
JSON
{
|
|
"$schema": "https://design-tokens.github.io/community-group/format/",
|
|
"color": {
|
|
"bg": { "light": "#ffffff", "dark": "#101216" },
|
|
"surface": { "light": "#f6f7f9", "dark": "#1a1c22" },
|
|
"text": { "light": "#1c1e21", "dark": "#e7e9ec" },
|
|
"textMuted": { "light": "#6b7280", "dark": "#888780" },
|
|
"border": { "light": "rgba(0, 0, 0, 0.15)", "dark": "rgba(255, 255, 255, 0.15)" },
|
|
"accent": { "light": "#185fa5", "dark": "#378add" },
|
|
"accentContrast": { "light": "#ffffff", "dark": "#042c53" },
|
|
"danger": { "light": "#a32d2d", "dark": "#d96a6a" },
|
|
"success": { "light": "#0f6e56", "dark": "#4fc39e" },
|
|
"warning": { "light": "#9a6b1f", "dark": "#d9a94f" }
|
|
},
|
|
"radius": { "sm": "4px", "md": "8px", "lg": "12px" },
|
|
"space": { "1": "4px", "2": "8px", "3": "12px", "4": "16px" },
|
|
"fontSize": { "xs": "11px", "sm": "12px", "md": "13px", "lg": "14px", "xl": "16px", "2xl": "18px" },
|
|
"weight": { "normal": 400, "medium": 500, "semibold": 600 },
|
|
"leading": { "tight": 1.35, "normal": 1.55 },
|
|
"border": {
|
|
"subtle": "color-mix(in srgb, var(--ua-color-border) 60%, transparent)"
|
|
},
|
|
"shadow": {
|
|
"1": { "light": "0 1px 2px rgba(0, 0, 0, 0.06)", "dark": "0 1px 2px rgba(0, 0, 0, 0.3)" },
|
|
"2": { "light": "0 4px 12px rgba(0, 0, 0, 0.1)", "dark": "0 4px 12px rgba(0, 0, 0, 0.4)" },
|
|
"3": { "light": "0 10px 28px rgba(0, 0, 0, 0.12)", "dark": "0 10px 28px rgba(0, 0, 0, 0.45)" },
|
|
"4": { "light": "0 18px 44px rgba(0, 0, 0, 0.14)", "dark": "0 18px 44px rgba(0, 0, 0, 0.5)" }
|
|
},
|
|
"motion": {
|
|
"duration": { "fast": "0.15s", "base": "0.2s", "slow": "0.25s" },
|
|
"ease": "cubic-bezier(0.2, 0.8, 0.2, 1)",
|
|
"easeOut": "cubic-bezier(0.16, 1, 0.3, 1)"
|
|
},
|
|
"focus": {
|
|
"ring": "0 0 0 3px color-mix(in srgb, var(--ua-color-accent) 22%, transparent)",
|
|
"ringInset": "inset 0 0 0 2px color-mix(in srgb, var(--ua-color-accent) 40%, transparent)"
|
|
},
|
|
"control": {
|
|
"height": { "sm": "28px", "md": "34px", "lg": "40px" }
|
|
},
|
|
"layer": { "dropdown": 100, "sticky": 200, "overlay": 300, "modal": 400, "toast": 500 }
|
|
}
|