HIsheR
186 lines
4.6 KiB
JSON
186 lines
4.6 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",
|
|
"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
|
|
},
|
|
"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)"
|
|
},
|
|
"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"
|
|
},
|
|
"ease": "cubic-bezier(0.2, 0.8, 0.2, 1)",
|
|
"easeOut": "cubic-bezier(0.16, 1, 0.3, 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
|
|
}
|
|
}
|