HIsheR
248 lines
6.7 KiB
JSON
248 lines
6.7 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)"
|
|
},
|
|
"scrollbar": {
|
|
"light": "rgba(0, 0, 0, 0.22)",
|
|
"dark": "rgba(255, 255, 255, 0.24)"
|
|
},
|
|
"scrollbarHover": {
|
|
"light": "rgba(0, 0, 0, 0.38)",
|
|
"dark": "rgba(255, 255, 255, 0.42)"
|
|
},
|
|
"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"
|
|
},
|
|
"surface2": {
|
|
"light": "color-mix(in srgb, var(--ua-color-text) 4%, var(--ua-color-bg))",
|
|
"dark": "color-mix(in srgb, var(--ua-color-text) 5%, var(--ua-color-bg))"
|
|
},
|
|
"surface3": {
|
|
"light": "color-mix(in srgb, var(--ua-color-text) 8%, var(--ua-color-bg))",
|
|
"dark": "color-mix(in srgb, var(--ua-color-text) 10%, var(--ua-color-bg))"
|
|
},
|
|
"surfaceInset": {
|
|
"light": "color-mix(in srgb, var(--ua-color-text) 5%, var(--ua-color-bg))",
|
|
"dark": "color-mix(in srgb, var(--ua-color-text) 6%, var(--ua-color-bg))"
|
|
},
|
|
"textSecondary": {
|
|
"light": "#4b5158",
|
|
"dark": "#b4bac2"
|
|
},
|
|
"textFaint": {
|
|
"light": "#9aa0a8",
|
|
"dark": "#62676f"
|
|
},
|
|
"overlay": {
|
|
"light": "rgba(0, 0, 0, 0.45)",
|
|
"dark": "rgba(0, 0, 0, 0.6)"
|
|
},
|
|
"overlayStrong": {
|
|
"light": "rgba(0, 0, 0, 0.6)",
|
|
"dark": "rgba(0, 0, 0, 0.7)"
|
|
},
|
|
"tintAccent": {
|
|
"light": "color-mix(in srgb, var(--ua-color-accent) 10%, transparent)",
|
|
"dark": "color-mix(in srgb, var(--ua-color-accent) 14%, transparent)"
|
|
},
|
|
"tintAccentWeak": {
|
|
"light": "color-mix(in srgb, var(--ua-color-accent) 5%, transparent)",
|
|
"dark": "color-mix(in srgb, var(--ua-color-accent) 8%, transparent)"
|
|
},
|
|
"accentSoft": {
|
|
"light": "color-mix(in srgb, var(--ua-color-accent) 72%, var(--ua-color-bg))",
|
|
"dark": "color-mix(in srgb, var(--ua-color-accent) 82%, var(--ua-color-bg))"
|
|
}
|
|
},
|
|
"radius": {
|
|
"sm": "4px",
|
|
"md": "8px",
|
|
"lg": "12px",
|
|
"mdInset": "calc(var(--ua-radius-md) - 1px)"
|
|
},
|
|
"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
|
|
}
|
|
} |