102 lines
2.3 KiB
JavaScript
102 lines
2.3 KiB
JavaScript
/**
|
|
* SINGLE SOURCE OF TRUTH for all design colors
|
|
* Used by:
|
|
* - tailwind.config.ts (Tailwind utility classes)
|
|
* - scripts/generate-css-vars.mjs (CSS variables in globals.css)
|
|
*
|
|
* Changes here automatically propagate to both files via build step.
|
|
*
|
|
* PALETTE: Electric Blue (2026-04-26)
|
|
* Direction: Dark industrial base + electric blue accents
|
|
*/
|
|
|
|
export const colors = {
|
|
// Base colors
|
|
background: "#131313",
|
|
"on-background": "#dde4f0",
|
|
foreground: "#dde4f0",
|
|
|
|
// Surface tones — cool blue-tinted darks
|
|
surface: {
|
|
DEFAULT: "#131313",
|
|
dim: "#131313",
|
|
bright: "#1e2535",
|
|
"container-lowest": "#0a0c14",
|
|
"container-low": "#131824",
|
|
container: "#181e2e",
|
|
"container-high": "#1e2538",
|
|
"container-highest": "#252d42",
|
|
variant: "#252d42",
|
|
},
|
|
|
|
// Primary — Electric Blue
|
|
primary: {
|
|
DEFAULT: "#58a6ff",
|
|
foreground: "#001a4d",
|
|
container: "#1d6fd4",
|
|
"on-container": "#cce0ff",
|
|
fixed: "#cce0ff",
|
|
"fixed-dim": "#58a6ff",
|
|
"on-fixed": "#001533",
|
|
"on-fixed-variant": "#003380",
|
|
inverse: "#1d5fa8",
|
|
},
|
|
|
|
// Secondary — Cool blue-grey (replaces warm grey)
|
|
secondary: {
|
|
DEFAULT: "#9aa5be",
|
|
foreground: "#1a2030",
|
|
container: "#3d4d6b",
|
|
"on-container": "#bdc8e0",
|
|
fixed: "#dde4f0",
|
|
"fixed-dim": "#9aa5be",
|
|
"on-fixed": "#0d1220",
|
|
"on-fixed-variant": "#3d4d6b",
|
|
},
|
|
|
|
// Tertiary — Cyan-teal (replaces neon green — complements blue)
|
|
tertiary: {
|
|
DEFAULT: "#00d4aa",
|
|
foreground: "#003328",
|
|
container: "#00a882",
|
|
"on-container": "#b3fff0",
|
|
fixed: "#b3fff0",
|
|
"fixed-dim": "#00d4aa",
|
|
"on-fixed": "#002820",
|
|
"on-fixed-variant": "#005544",
|
|
},
|
|
|
|
// Error — pure red (no rose/pink cast)
|
|
error: {
|
|
DEFAULT: "#ff5f52",
|
|
foreground: "#1a0000",
|
|
container: "#7a0000",
|
|
"on-container": "#ffdad6",
|
|
},
|
|
|
|
// Outline — blue-tinted borders (replaces warm brown)
|
|
outline: "#3d5a8a",
|
|
"outline-variant": "#1e3055",
|
|
|
|
// Inverse
|
|
"inverse-surface": "#dde4f0",
|
|
"inverse-on-surface": "#1a2030",
|
|
|
|
// Semantic
|
|
border: "#252d42",
|
|
muted: "#5a6a8a",
|
|
info: "#58a6ff",
|
|
success: "#00d4aa",
|
|
warning: "#f0a040",
|
|
alert: "#ff5f52",
|
|
};
|
|
|
|
export const spacing = {
|
|
unit: "4px",
|
|
"stack-sm": "8px",
|
|
"stack-md": "16px",
|
|
gutter: "16px",
|
|
margin: "32px",
|
|
"container-gap": "24px",
|
|
};
|