Template
non ai theme
This commit is contained in:
mats committed
1 parent
9d444cc0ec
commit
61df5e3dcc
28 files changed
+3347
-448
No files matched your search
+170
-100
@@ -1,22 +1,20 @@
|
||||
/* ─────────────────────────────────────────────────────────────
|
||||
Northstar design tokens — single source of truth.
|
||||
Northstar Design System — Single Source of Truth Tokens.
|
||||
|
||||
App.css (and every future stylesheet) consumes ONLY these
|
||||
variables. Change a token here and the whole UI follows.
|
||||
Modern, high-velocity design system configured for AI-assisted
|
||||
workflows and rapid iteration with strict uniformity.
|
||||
|
||||
Key one-liners:
|
||||
• global text density ......... --root-font-size (e.g. 112%)
|
||||
• "small text a bit larger" ... bump --text-xs / --text-2xs
|
||||
• new color ................... add a token, never a hex
|
||||
• accent washes ............... color-mix(in srgb, var(--accent) N%, transparent)
|
||||
Tokens utilize CSS Color 4 lab(...) space:
|
||||
• Dark: Pitch black, deep cards, radiant electric mint primary
|
||||
• Light: Pure white daylight, crisp charcoal primary, high contrast
|
||||
───────────────────────────────────────────────────────────── */
|
||||
|
||||
/* ── Global scale, typography & spacing ───────────────────────── */
|
||||
:root {
|
||||
/* Global amplifier: every token-driven font size scales from
|
||||
the root size. 100% = 16px. Readability preset: 112%. */
|
||||
/* Global amplifier: scales every rem-based font size & spacing */
|
||||
--root-font-size: 112%;
|
||||
|
||||
/* ── Type scale (rem-based, snaps to the 9→28px grid) ───── */
|
||||
/* ── Type scale (rem-based, 9→28px grid) ── */
|
||||
--text-3xs: 0.5625rem; /* 9px micro labels */
|
||||
--text-2xs: 0.625rem; /* 10px eyebrows, meta */
|
||||
--text-xs: 0.6875rem; /* 11px buttons, nav */
|
||||
@@ -28,102 +26,174 @@
|
||||
--text-2xl: 1.75rem; /* 28px section titles */
|
||||
--text-hero: clamp(2.625rem, 5vw, 4.375rem); /* 42→70px display */
|
||||
|
||||
/* ── Type families ──────────────────────────────────────── */
|
||||
--font-sans: 'Manrope', sans-serif;
|
||||
--font-mono: 'DM Mono', monospace;
|
||||
/* ── Type families ────────────────────────── */
|
||||
--font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
--font-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
|
||||
/* ── Surfaces ───────────────────────────────────────────── */
|
||||
--bg: #0b0b10; /* page base */
|
||||
--bg-deep: #0d0d13; /* code blocks, editor, sidebar wash */
|
||||
--panel: #111118; /* cards */
|
||||
--panel-2: #16161f; /* inputs, tabs */
|
||||
--panel-3: #1b1b25; /* raised panels, hovers */
|
||||
--panel-hover: #191923; /* interactive surfaces on hover */
|
||||
--panel-active: #252535;/* pressed / selected surfaces */
|
||||
/* ── Spacing (4px rhythm) ─────────────────── */
|
||||
--space-1: 0.25rem; /* 4px */
|
||||
--space-2: 0.5rem; /* 8px */
|
||||
--space-3: 0.75rem; /* 12px */
|
||||
--space-4: 1rem; /* 16px */
|
||||
--space-5: 1.25rem; /* 20px */
|
||||
--space-6: 1.5rem; /* 24px */
|
||||
--space-7: 2rem; /* 32px */
|
||||
--space-8: 2.5rem; /* 40px */
|
||||
--space-9: 3rem; /* 48px */
|
||||
--space-10: 4rem; /* 64px */
|
||||
--space-11: 5rem; /* 80px */
|
||||
|
||||
/* ── Lines ──────────────────────────────────────────────── */
|
||||
--line: #292933; /* default border */
|
||||
--line-soft: #202029; /* hairlines inside dense grids */
|
||||
--line-hover: #4a4760; /* border on hover / accent-tinted */
|
||||
--line-focus: #5b5486; /* focused inputs, search */
|
||||
/* ── Radii ────────────────────────────────── */
|
||||
--radius-sm: 5px;
|
||||
--radius-md: 6px;
|
||||
--radius-lg: 9px;
|
||||
--radius-xl: 12px;
|
||||
--radius-2xl: 14px;
|
||||
--radius-pill: 9999px;
|
||||
|
||||
/* ── Text ───────────────────────────────────────────────── */
|
||||
--text: #f1f0f7; /* primary */
|
||||
--text-bright: #f5f3ff; /* active nav, tab-selected */
|
||||
--text-soft: #b8b6c4; /* longform body */
|
||||
--text-code: #c8c5d2; /* code blocks */
|
||||
--muted: #92919e; /* secondary */
|
||||
--subtle: #666572; /* tertiary, disabled */
|
||||
|
||||
/* ── Accents & status ───────────────────────────────────── */
|
||||
--accent: #a69bff;
|
||||
--accent-contrast: #171526; /* text/icons placed on accent */
|
||||
--positive: #73dfae;
|
||||
--warning: #ffc777;
|
||||
--critical: #ff8585;
|
||||
--pink: #e58bff;
|
||||
--blue: #9bcbff;
|
||||
|
||||
/* ── Spacing (4px rhythm; 1 = 4px … 11 = 80px) ──────────── */
|
||||
--space-1: 0.25rem;
|
||||
--space-2: 0.5rem;
|
||||
--space-3: 0.75rem;
|
||||
--space-4: 1rem;
|
||||
--space-5: 1.25rem;
|
||||
--space-6: 1.5rem;
|
||||
--space-7: 2rem;
|
||||
--space-8: 2.5rem;
|
||||
--space-9: 3rem;
|
||||
--space-10: 4rem;
|
||||
--space-11: 5rem;
|
||||
|
||||
/* ── Radii ──────────────────────────────────────────────── */
|
||||
--radius-sm: 5px; /* kbd, inputs */
|
||||
--radius-md: 6px; /* buttons, nav items */
|
||||
--radius-lg: 9px; /* cards, showcases */
|
||||
--radius-xl: 12px; /* brand mark, orbit core */
|
||||
--radius-2xl: 14px; /* callouts */
|
||||
--radius-pill: 20px; /* toggles */
|
||||
|
||||
/* ── Focus ──────────────────────────────────────────────── */
|
||||
--focus-ring: 2px solid var(--accent);
|
||||
--focus-offset: 3px;
|
||||
/* ── Focus ────────────────────────────────── */
|
||||
--focus-ring: 2px solid var(--ring);
|
||||
--focus-offset: 2px;
|
||||
}
|
||||
|
||||
/* ── Light theme ──────────────────────────────────────────────
|
||||
Same token names, daylight values. Components never know the
|
||||
difference — they only ever read var(--*). Toggle via
|
||||
document.documentElement.dataset.theme = 'light' (Topbar does
|
||||
this and persists to localStorage under 'ns-theme'). */
|
||||
:root[data-theme='light'] {
|
||||
--bg: #f6f5fb;
|
||||
--bg-deep: #efedf6;
|
||||
--panel: #ffffff;
|
||||
--panel-2: #f3f1f9;
|
||||
--panel-3: #eae7f4;
|
||||
--panel-hover: #e7e4f1;
|
||||
--panel-active: #dedbf0;
|
||||
/* ── Light Palette (Exact lab() Specification) ───────────────── */
|
||||
:root,
|
||||
:root[data-theme='light'],
|
||||
.light {
|
||||
color-scheme: light;
|
||||
|
||||
--line: #d8d5e7;
|
||||
--line-soft: #e4e2ee;
|
||||
--line-hover: #b3abda;
|
||||
--line-focus: #8d82cf;
|
||||
--background: lab(100% 0 0);
|
||||
--foreground: lab(2.75381% 0 0);
|
||||
--card: lab(97.68% -.0000298023 .0000119209);
|
||||
--card-foreground: lab(2.75381% 0 0);
|
||||
--popover: lab(100% 0 0);
|
||||
--popover-foreground: lab(2.75381% 0 0);
|
||||
--primary: lab(7.78201% -.0000149012 0);
|
||||
--primary-foreground: lab(98.26% 0 0);
|
||||
--secondary: lab(94.2% 0 0);
|
||||
--secondary-foreground: lab(7.78201% -.0000149012 0);
|
||||
--muted: lab(94.2% 0 0);
|
||||
--muted-foreground: lab(39.68% 0 0);
|
||||
--accent: lab(94.2% 0 0);
|
||||
--accent-foreground: lab(7.78201% -.0000149012 0);
|
||||
--destructive: lab(48.4493% 77.4328 61.5452);
|
||||
--destructive-foreground: lab(48.4493% 77.4328 61.5452);
|
||||
--border: lab(86.08% -.0000298023 0);
|
||||
--input: lab(86.08% -.0000298023 0);
|
||||
--ring: lab(42% 0 0);
|
||||
--chart-1: lab(57.1026% 64.2584 89.8886);
|
||||
--chart-2: lab(55.0223% -41.0774 -3.90277);
|
||||
--chart-3: lab(30.372% -13.1853 -18.7887);
|
||||
--chart-4: lab(80.1641% 16.6016 99.2089);
|
||||
--chart-5: lab(72.7183% 31.8672 97.9407);
|
||||
--sidebar: lab(96.52% -.0000298023 .0000119209);
|
||||
--sidebar-foreground: lab(2.75381% 0 0);
|
||||
--sidebar-primary: lab(7.78201% -.0000149012 0);
|
||||
--sidebar-primary-foreground: lab(98.26% 0 0);
|
||||
--sidebar-accent: lab(94.2% 0 0);
|
||||
--sidebar-accent-foreground: lab(7.78201% -.0000149012 0);
|
||||
--sidebar-border: lab(86.08% -.0000298023 0);
|
||||
--sidebar-ring: lab(42% 0 0);
|
||||
--dot-color: lab(7.78201% -.0000149012 0 / .05);
|
||||
|
||||
--text: #1e1a30;
|
||||
--text-bright: #141126;
|
||||
--text-soft: #4b4665;
|
||||
--text-code: #383354;
|
||||
--muted: #625d7d;
|
||||
--subtle: #8d89a3;
|
||||
/* ── Legacy Northstar mappings for light theme ── */
|
||||
--bg: var(--background);
|
||||
--bg-deep: var(--sidebar);
|
||||
--panel: var(--card);
|
||||
--panel-2: var(--secondary);
|
||||
--panel-3: color-mix(in srgb, var(--card) 85%, var(--border));
|
||||
--panel-hover: color-mix(in srgb, var(--card) 70%, var(--border));
|
||||
--panel-active: color-mix(in srgb, var(--secondary) 85%, var(--border));
|
||||
|
||||
/* Deeper accent + saturated status colors for light-surface contrast */
|
||||
--accent: #6b46e5;
|
||||
--accent-contrast: #ffffff;
|
||||
--positive: #178a5c;
|
||||
--warning: #a05f00;
|
||||
--critical: #d14141;
|
||||
--pink: #bb2fc0;
|
||||
--blue: #2f66c9;
|
||||
--line: var(--border);
|
||||
--line-soft: var(--sidebar-border);
|
||||
--line-hover: var(--ring);
|
||||
--line-focus: var(--ring);
|
||||
|
||||
--text: var(--foreground);
|
||||
--text-bright: var(--foreground);
|
||||
--text-soft: var(--muted-foreground);
|
||||
--text-code: var(--foreground);
|
||||
--subtle: color-mix(in srgb, var(--muted-foreground) 75%, transparent);
|
||||
|
||||
--accent-brand: var(--primary);
|
||||
--accent-contrast: var(--primary-foreground);
|
||||
--positive: var(--chart-2);
|
||||
--warning: var(--chart-3);
|
||||
--critical: var(--destructive);
|
||||
--pink: var(--chart-5);
|
||||
--blue: var(--chart-4);
|
||||
}
|
||||
|
||||
html { font-size: var(--root-font-size); }
|
||||
/* ── Dark Palette (Exact lab() Specification) ────────────────── */
|
||||
:root:not([data-theme='light']),
|
||||
:root[data-theme='dark'],
|
||||
.dark {
|
||||
color-scheme: dark;
|
||||
|
||||
--background: lab(0% 0 0);
|
||||
--foreground: lab(94.78% 0 0);
|
||||
--card: lab(.903296% 0 0);
|
||||
--card-foreground: lab(94.78% 0 0);
|
||||
--popover: lab(.903296% 0 0);
|
||||
--popover-foreground: lab(94.78% 0 0);
|
||||
--primary: lab(89.9321% -47.9163 -15.7303);
|
||||
--primary-foreground: lab(0% 0 0);
|
||||
--secondary: lab(2.47865% 0 0);
|
||||
--secondary-foreground: lab(94.78% 0 0);
|
||||
--muted: lab(2.47865% 0 0);
|
||||
--muted-foreground: lab(60.56% 0 0);
|
||||
--accent: lab(1.98454% 0 0);
|
||||
--accent-foreground: lab(89.9321% -47.9163 -15.7303);
|
||||
--destructive: lab(54.5811% 71.684 50.9279);
|
||||
--destructive-foreground: lab(54.5811% 71.684 50.9279);
|
||||
--border: lab(4.8411% 0 0);
|
||||
--input: lab(1.98454% 0 0);
|
||||
--ring: lab(89.9321% -47.9163 -15.7303);
|
||||
--chart-1: lab(89.9321% -47.9163 -15.7303);
|
||||
--chart-2: lab(66.9756% -58.27 19.5419);
|
||||
--chart-3: lab(72.7183% 31.8672 97.9407);
|
||||
--chart-4: lab(52.0183% 66.11 -78.2316);
|
||||
--chart-5: lab(56.101% 79.4328 31.4532);
|
||||
--sidebar: lab(.498049% 0 0);
|
||||
--sidebar-foreground: lab(94.78% 0 0);
|
||||
--sidebar-primary: lab(89.9321% -47.9163 -15.7303);
|
||||
--sidebar-primary-foreground: lab(0% 0 0);
|
||||
--sidebar-accent: lab(1.98454% 0 0);
|
||||
--sidebar-accent-foreground: lab(89.9321% -47.9163 -15.7303);
|
||||
--sidebar-border: lab(4.8411% 0 0);
|
||||
--sidebar-ring: lab(89.9321% -47.9163 -15.7303);
|
||||
--dot-color: lab(89.9321% -47.9163 -15.7303 / .045);
|
||||
|
||||
/* ── Legacy Northstar mappings for dark theme ── */
|
||||
--bg: var(--background);
|
||||
--bg-deep: var(--sidebar);
|
||||
--panel: var(--card);
|
||||
--panel-2: var(--secondary);
|
||||
--panel-3: color-mix(in srgb, var(--card) 85%, var(--border));
|
||||
--panel-hover: color-mix(in srgb, var(--card) 60%, var(--border));
|
||||
--panel-active: color-mix(in srgb, var(--secondary) 75%, var(--border));
|
||||
|
||||
--line: var(--border);
|
||||
--line-soft: var(--sidebar-border);
|
||||
--line-hover: color-mix(in srgb, var(--ring) 50%, var(--border));
|
||||
--line-focus: var(--ring);
|
||||
|
||||
--text: var(--foreground);
|
||||
--text-bright: var(--foreground);
|
||||
--text-soft: var(--muted-foreground);
|
||||
--text-code: var(--foreground);
|
||||
--subtle: color-mix(in srgb, var(--muted-foreground) 65%, transparent);
|
||||
|
||||
--accent-brand: var(--primary);
|
||||
--accent-contrast: var(--primary-foreground);
|
||||
--positive: var(--chart-2);
|
||||
--warning: var(--chart-3);
|
||||
--critical: var(--destructive);
|
||||
--pink: var(--chart-5);
|
||||
--blue: var(--chart-4);
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: var(--root-font-size);
|
||||
}
|
||||
Reference in new issue
Block a user