diff --git a/.gitignore b/.gitignore index 8a3b9af..ac96e00 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,9 @@ # Design assets (excluded from version control) -Design/ +# Anchored to the repo root so it only matches the top-level Design/ folder. +# Unanchored `Design/` also matched nested source dirs like +# Web App/web/src/design/ (Git is case-insensitive on Windows/macOS), +# silently un-tracking real source files such as tokens.css. +/Design/ # Build artifacts *.exe diff --git a/Web App/web/src/design/tokens.css b/Web App/web/src/design/tokens.css new file mode 100644 index 0000000..950f8c5 --- /dev/null +++ b/Web App/web/src/design/tokens.css @@ -0,0 +1,133 @@ +/* --------------------------------------------------------------- + PilotVault design tokens (vendored from Design/PilotVault Project logo/tokens). + Colors + typography + spacing + radius + elevation + motion. + Light is default; add data-theme="dark" on to flip. + Fonts (Space Grotesk + Space Mono) are loaded via in index.html. +--------------------------------------------------------------- */ + +:root, [data-theme="light"] { + /* --- Brand ramps (do not theme-flip) --- */ + --navy-950: #0B1730; + --navy-900: #0F1E3D; /* Vault Navy — core brand */ + --navy-800: #1B2E52; + --navy-700: #26406E; + + --blue-50: #EAF1FE; + --blue-100: #D6E3FD; + --blue-200: #B4CDFA; + --blue-300: #8FB4F6; + --blue-400: #5B93F5; + --blue-500: #3D7BF0; /* Signal Blue — accent */ + --blue-600: #2B62CC; + --blue-700: #1F4CA0; + + --slate-0: #FFFFFF; + --slate-50: #F6F7F9; + --slate-100: #EEF0F3; /* Cloud */ + --slate-150: #E6E9EE; + --slate-200: #DCE0E7; + --slate-300: #C5CCD7; + --slate-400: #97A1B0; + --slate-500: #6B7688; + --slate-600: #4C5566; + --slate-700: #333B4A; + --slate-800: #1E2635; + --slate-900: #131A28; + --slate-950: #0B111C; + + --steel: #5A6B85; + + --green-500: #1F8A5B; --green-100: #DCF1E7; --green-600:#177049; + --amber-500: #D9852B; --amber-100: #FBEBD5; --amber-600:#B86C1B; + --red-500: #D64545; --red-100: #FBE0E0; --red-600: #B83232; + + /* --- Semantic aliases — LIGHT --- */ + --bg-app: var(--slate-100); + --bg-subtle: var(--slate-50); + --surface: var(--slate-0); + --surface-2: var(--slate-50); + --surface-inset: var(--slate-100); + + --border: var(--slate-200); + --border-strong: var(--slate-300); + --border-subtle: var(--slate-150); + + --text-primary: var(--navy-900); + --text-secondary:var(--steel); + --text-tertiary: var(--slate-400); + --text-inverse: var(--slate-0); + --text-on-accent:#FFFFFF; + + --accent: var(--blue-500); + --accent-hover: var(--blue-600); + --accent-active: var(--blue-700); + --accent-soft: var(--blue-50); + --accent-soft-fg:var(--blue-700); + --focus-ring: color-mix(in srgb, var(--blue-500) 45%, transparent); + + --success: var(--green-500); --success-soft: var(--green-100); --success-fg: var(--green-600); + --warning: var(--amber-500); --warning-soft: var(--amber-100); --warning-fg: var(--amber-600); + --danger: var(--red-500); --danger-soft: var(--red-100); --danger-fg: var(--red-600); + + --overlay: color-mix(in srgb, var(--navy-950) 55%, transparent); + + /* Typography */ + --font-sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; + --font-mono: "Space Mono", ui-monospace, "SF Mono", "JetBrains Mono", monospace; + + /* Radius */ + --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; + --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px; + + /* Elevation — cool navy-tinted */ + --shadow-xs: 0 1px 2px rgba(15,30,61,0.06); + --shadow-sm: 0 1px 2px rgba(15,30,61,0.06), 0 1px 3px rgba(15,30,61,0.04); + --shadow-md: 0 2px 4px rgba(15,30,61,0.06), 0 6px 16px rgba(15,30,61,0.08); + --shadow-lg: 0 8px 24px rgba(15,30,61,0.10), 0 2px 6px rgba(15,30,61,0.06); + + /* Motion */ + --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); + --ease-out: cubic-bezier(0.16, 1, 0.3, 1); + --dur-fast: 120ms; + --dur-base: 200ms; + + color-scheme: light; +} + +[data-theme="dark"] { + --bg-app: var(--navy-950); + --bg-subtle: var(--slate-950); + --surface: #10203F; + --surface-2: #142748; + --surface-inset: var(--navy-950); + + --border: color-mix(in srgb, #FFFFFF 10%, transparent); + --border-strong: color-mix(in srgb, #FFFFFF 18%, transparent); + --border-subtle: color-mix(in srgb, #FFFFFF 6%, transparent); + + --text-primary: #F4F7FC; + --text-secondary:#8FA0BE; + --text-tertiary: #5E6E8C; + --text-inverse: var(--navy-900); + --text-on-accent:#FFFFFF; + + --accent: var(--blue-400); + --accent-hover: var(--blue-300); + --accent-active: var(--blue-200); + --accent-soft: color-mix(in srgb, var(--blue-500) 18%, transparent); + --accent-soft-fg:var(--blue-300); + --focus-ring: color-mix(in srgb, var(--blue-400) 55%, transparent); + + --success:var(--green-500); --success-soft: color-mix(in srgb, var(--green-500) 22%, transparent); --success-fg:#5FD3A0; + --warning:var(--amber-500); --warning-soft: color-mix(in srgb, var(--amber-500) 22%, transparent); --warning-fg:#F0B26A; + --danger: var(--red-500); --danger-soft: color-mix(in srgb, var(--red-500) 22%, transparent); --danger-fg: #F08A8A; + + --overlay: color-mix(in srgb, #000000 62%, transparent); + + --shadow-xs: 0 1px 2px rgba(0,0,0,0.35); + --shadow-sm: 0 1px 3px rgba(0,0,0,0.4); + --shadow-md: 0 4px 12px rgba(0,0,0,0.45); + --shadow-lg: 0 12px 32px rgba(0,0,0,0.5); + + color-scheme: dark; +}