Template
200 lines
7.9 KiB
CSS
200 lines
7.9 KiB
CSS
/* ─────────────────────────────────────────────────────────────
|
|
Northstar Design System — Single Source of Truth Tokens.
|
|
|
|
Modern, high-velocity design system configured for AI-assisted
|
|
workflows and rapid iteration with strict uniformity.
|
|
|
|
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: scales every rem-based font size & spacing */
|
|
--root-font-size: 112%;
|
|
|
|
/* ── 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 */
|
|
--text-sm: 0.75rem; /* 12px inputs, copy */
|
|
--text-md: 0.875rem; /* 14px longform body */
|
|
--text-base: 1rem; /* 16px ledes, brand */
|
|
--text-lg: 1.3125rem; /* 21px card headings */
|
|
--text-xl: 1.5625rem; /* 25px sub-headlines */
|
|
--text-2xl: 1.75rem; /* 28px section titles */
|
|
--text-hero: clamp(2.625rem, 5vw, 4.375rem); /* 42→70px display */
|
|
|
|
/* ── 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;
|
|
|
|
/* ── 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 */
|
|
|
|
/* ── Radii ────────────────────────────────── */
|
|
--radius-sm: 5px;
|
|
--radius-md: 6px;
|
|
--radius-lg: 9px;
|
|
--radius-xl: 12px;
|
|
--radius-2xl: 14px;
|
|
--radius-pill: 9999px;
|
|
|
|
/* ── Focus ────────────────────────────────── */
|
|
--focus-ring: 2px solid var(--ring);
|
|
--focus-offset: 2px;
|
|
}
|
|
|
|
/* ── Light Palette (Exact lab() Specification) ───────────────── */
|
|
:root,
|
|
:root[data-theme='light'],
|
|
.light {
|
|
color-scheme: light;
|
|
|
|
--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);
|
|
|
|
/* ── 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));
|
|
|
|
--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);
|
|
}
|
|
|
|
/* ── 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);
|
|
}
|