HIsheR
bfb9178733
tokens 增补：--ua-color-highlight（暗色降到 8%，暗底白高光刺眼）、 --ua-shadow-highlight（1px 内高光走令牌，皮肤不出现阴影字面值）、 --ua-tracking-wide / --ua-tracking-tight 两档字距。 主按钮叠内高光 + 悬停主题色投影，press 保留内高光； 卡片补贴地 1 档阴影，hoverable 悬停升到 2 档并同步减淡边框； 表头、选项分组标题、命令面板大写小标题统一 0.04em， ui.css 三处字距字面值全部归零。 幽灵按钮无实色底，显式退出质感层避免透明底露白线。 Refs: g199
200 lines
5.0 KiB
JSON
200 lines
5.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)"
|
|
},
|
|
"highlight": {
|
|
"light": "rgba(255, 255, 255, 0.5)",
|
|
"dark": "rgba(255, 255, 255, 0.08)"
|
|
},
|
|
"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",
|
|
"15": "6px",
|
|
"25": "10px",
|
|
"35": "14px",
|
|
"05": "2px",
|
|
"6": "24px",
|
|
"indent": "22px"
|
|
},
|
|
"fontSize": {
|
|
"xs": "11px",
|
|
"sm": "12px",
|
|
"md": "13px",
|
|
"lg": "14px",
|
|
"xl": "16px",
|
|
"2xl": "18px",
|
|
"3xl": "22px",
|
|
"4xl": "26px",
|
|
"5xl": "34px",
|
|
"scale-md": "0.92em",
|
|
"scale-sm": "0.85em"
|
|
},
|
|
"weight": {
|
|
"normal": 400,
|
|
"medium": 500,
|
|
"semibold": 600,
|
|
"bold": 700
|
|
},
|
|
"tracking": {
|
|
"wide": "0.04em",
|
|
"tight": "-0.01em"
|
|
},
|
|
"leading": {
|
|
"tight": 1.35,
|
|
"normal": 1.55,
|
|
"none": 1
|
|
},
|
|
"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)"
|
|
},
|
|
"accent": {
|
|
"light": "0 3px 10px color-mix(in srgb, var(--ua-color-accent) 25%, transparent)",
|
|
"dark": "0 3px 10px color-mix(in srgb, var(--ua-color-accent) 30%, transparent)"
|
|
},
|
|
"accentStrong": {
|
|
"light": "0 8px 20px color-mix(in srgb, var(--ua-color-accent) 35%, transparent)",
|
|
"dark": "0 8px 20px color-mix(in srgb, var(--ua-color-accent) 40%, transparent)"
|
|
},
|
|
"highlight": {
|
|
"light": "inset 0 1px 0 var(--ua-color-highlight)",
|
|
"dark": "inset 0 1px 0 var(--ua-color-highlight)"
|
|
},
|
|
"hairline": {
|
|
"light": "inset 0 -1px 0 var(--ua-border-subtle)",
|
|
"dark": "inset 0 -1px 0 var(--ua-border-subtle)"
|
|
},
|
|
"insetBorder": {
|
|
"light": "inset 0 0 0 1px var(--ua-color-border)",
|
|
"dark": "inset 0 0 0 1px var(--ua-color-border)"
|
|
},
|
|
"insetAccent": {
|
|
"light": "inset 0 0 0 1px var(--ua-color-accent)",
|
|
"dark": "inset 0 0 0 1px var(--ua-color-accent)"
|
|
},
|
|
"gap": {
|
|
"light": "0 0 0 2px var(--ua-color-bg)",
|
|
"dark": "0 0 0 2px var(--ua-color-bg)"
|
|
}
|
|
},
|
|
"motion": {
|
|
"duration": {
|
|
"fast": "0.15s",
|
|
"base": "0.2s",
|
|
"slow": "0.25s",
|
|
"slower": "0.35s",
|
|
"loopFast": "0.6s",
|
|
"loopMid": "0.8s",
|
|
"loopSlow": "1.2s",
|
|
"loopLong": "1.6s",
|
|
"step": "0.02s"
|
|
},
|
|
"ease": "cubic-bezier(0.2, 0.8, 0.2, 1)",
|
|
"easeOut": "cubic-bezier(0.16, 1, 0.3, 1)",
|
|
"easeSpring": "cubic-bezier(0.34, 1.3, 0.5, 1)"
|
|
},
|
|
"focus": {
|
|
"ring": {
|
|
"light": "0 0 0 3px color-mix(in srgb, var(--ua-color-accent) 22%, transparent)",
|
|
"dark": "0 0 0 3px color-mix(in srgb, var(--ua-color-accent) 34%, transparent)"
|
|
},
|
|
"ringInset": {
|
|
"light": "inset 0 0 0 2px color-mix(in srgb, var(--ua-color-accent) 40%, transparent)",
|
|
"dark": "inset 0 0 0 2px color-mix(in srgb, var(--ua-color-accent) 52%, transparent)"
|
|
},
|
|
"ringWarning": {
|
|
"light": "0 0 0 3px color-mix(in srgb, var(--ua-color-warning) 25%, transparent)",
|
|
"dark": "0 0 0 3px color-mix(in srgb, var(--ua-color-warning) 34%, transparent)"
|
|
},
|
|
"ringDanger": {
|
|
"light": "0 0 0 3px color-mix(in srgb, var(--ua-color-danger) 18%, transparent)",
|
|
"dark": "0 0 0 3px color-mix(in srgb, var(--ua-color-danger) 30%, transparent)"
|
|
},
|
|
"ringPulse": {
|
|
"light": "0 0 0 5px color-mix(in srgb, var(--ua-color-accent) 4%, transparent)",
|
|
"dark": "0 0 0 5px color-mix(in srgb, var(--ua-color-accent) 8%, transparent)"
|
|
},
|
|
"ringSelected": {
|
|
"light": "0 0 0 2px var(--ua-color-accent)",
|
|
"dark": "0 0 0 2px var(--ua-color-accent)"
|
|
}
|
|
},
|
|
"control": {
|
|
"height": {
|
|
"sm": "28px",
|
|
"md": "34px",
|
|
"lg": "40px"
|
|
}
|
|
},
|
|
"layer": {
|
|
"dropdown": 100,
|
|
"sticky": 200,
|
|
"overlay": 300,
|
|
"modal": 400,
|
|
"toast": 500
|
|
}
|
|
}
|