cesnimda/Inboxintel
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat(ui): design-system v2 tokens (#9)
CI / backend (push) Successful in 53s
Details
CI / frontend (push) Successful in 15s
Details
Deploy Staging / deploy (push) Successful in 24s
Details
Security / secrets (push) Successful in 4s
Details
Security / dependencies (push) Successful in 1m22s
Details
CI / backend (pull_request) Successful in 1m1s
Details
CI / frontend (pull_request) Successful in 18s
Details
Security / secrets (pull_request) Successful in 4s
Details
Security / dependencies (pull_request) Successful in 1m6s
Details

Browse Source
This commit was merged in pull request #9.
This commit is contained in:
cesnimda
2026-07-01 20:01:43 +02:00
parent 4ce2df0a2b
commit e482d60b69
4 changed files with 108 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/index.css
+38 -28
View File
@@ -8,46 +8,55 @@
two variables at runtime. See docs/specs/ui-overhaul.md.
*/
@layer base {
/*
Design tokens — v2 (per docs/discovery/04). Dark-first, warm-leaning neutrals,
green brand accent derived from #3ba31f. Light is a genuine white (not grey).
Green is never the SOLE state signal (pair with icon/shape) — colour-blind-safe
by construction. Values are HSL triples (space-separated) for Tailwind's
`hsl(var(--x) / <alpha-value>)` mapping.
*/
:root {
/* Neutrals — warm-tinted slate (Notion-ish paper) */
/* Light — genuine white, warm off-white surfaces */
--background: 0 0% 100%;
--foreground: 222 22% 12%;
--card: 0 0% 100%;
--muted: 220 16% 96%;
--muted-foreground: 220 9% 46%;
--border: 220 16% 90%;
--input: 220 16% 90%;
--ring: 245 75% 60%;
--foreground: 30 10% 12%;
--card: 40 33% 99%;
--muted: 40 24% 96%;
--muted-foreground: 35 8% 42%;
--border: 38 18% 89%;
--input: 38 18% 89%;
--ring: 110 62% 38%;
/* Brand accent — Indigo #5b5bf0 */
--primary: 245 75% 59%;
/* Brand accent — green (from #3ba31f), darkened for AA white-on-green */
--primary: 110 62% 33%;
--primary-foreground: 0 0% 100%;
/* Semantic */
--success: 152 56% 40%;
--warning: 38 92% 50%;
--danger: 0 72% 51%;
--success: 145 55% 38%;
--warning: 38 92% 45%;
--danger: 4 74% 50%;
--danger-foreground: 0 0% 100%;
--radius: 0.625rem;
--radius: 0.5rem; /* lg 8px · md 6px · sm 4px */
}
.dark {
--background: 224 32% 9%;
--foreground: 220 18% 92%;
--card: 224 28% 12%;
--muted: 223 22% 17%;
--muted-foreground: 220 12% 64%;
--border: 223 20% 20%;
--input: 223 20% 22%;
--ring: 245 80% 66%;
/* Dark (default) — warm charcoal layers, NOT pure black */
--background: 30 7% 10%;
--foreground: 40 22% 93%;
--card: 30 7% 13%;
--muted: 30 6% 17%;
--muted-foreground: 35 9% 64%;
--border: 30 7% 22%;
--input: 30 7% 24%;
--ring: 110 50% 46%;
--primary: 245 80% 67%;
--primary-foreground: 224 32% 9%;
/* Brand accent — luminous green for dark surfaces */
--primary: 110 52% 42%;
--primary-foreground: 0 0% 100%;
--success: 152 50% 50%;
--warning: 38 92% 58%;
--danger: 0 70% 60%;
--success: 145 50% 48%;
--warning: 38 90% 56%;
--danger: 4 72% 58%;
--danger-foreground: 0 0% 100%;
}
@@ -57,7 +66,8 @@
body {
@apply bg-background text-foreground antialiased;
font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
/* Prefer Inter when available (bundled in a later slice); graceful system fallback. */
font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
Helvetica, Arial, sans-serif;
}