You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
227 lines
5.9 KiB
227 lines
5.9 KiB
/* =========================================================
|
|
Nexo design tokens — sober neutrals + single brand accent.
|
|
Light: pure white / slate. Dark: charcoal. Accent: violet.
|
|
Single source of truth.
|
|
========================================================= */
|
|
|
|
:root,
|
|
:root[data-theme='light'] {
|
|
/* Surfaces */
|
|
--nx-bg: #ffffff;
|
|
--nx-bg-elevated: #ffffff;
|
|
--nx-bg-sunken: #fafafa;
|
|
--nx-bg-inset: #f4f4f5;
|
|
--nx-bg-overlay: rgba(9, 9, 11, 0.5);
|
|
|
|
/* Foreground */
|
|
--nx-fg: #0a0a0a;
|
|
--nx-fg-muted: #525252;
|
|
--nx-fg-subtle: #a1a1aa;
|
|
--nx-fg-on-accent: #ffffff;
|
|
|
|
/* Brand */
|
|
--nx-accent: #7c3aed;
|
|
--nx-accent-strong: #6d28d9;
|
|
--nx-accent-soft: #f3eefe;
|
|
--nx-accent-border: #ddd6fe;
|
|
--nx-accent-fg: #ffffff;
|
|
|
|
/* State */
|
|
--nx-success: #16a34a;
|
|
--nx-success-soft: #f0fdf4;
|
|
--nx-success-border: #bbf7d0;
|
|
|
|
--nx-warning: #d97706;
|
|
--nx-warning-soft: #fffbeb;
|
|
--nx-warning-border: #fde68a;
|
|
|
|
--nx-danger: #dc2626;
|
|
--nx-danger-soft: #fef2f2;
|
|
--nx-danger-border: #fecaca;
|
|
|
|
--nx-info: #0284c7;
|
|
--nx-info-soft: #f0f9ff;
|
|
--nx-info-border: #bae6fd;
|
|
|
|
/* Borders */
|
|
--nx-border: #e4e4e7;
|
|
--nx-border-strong: #d4d4d8;
|
|
--nx-border-accent: #c4b5fd;
|
|
|
|
/* Shadows — flat, layered, no warm tint */
|
|
--nx-shadow-xs: 0 1px 2px rgba(9, 9, 11, 0.04);
|
|
--nx-shadow-sm: 0 1px 2px rgba(9, 9, 11, 0.05), 0 1px 3px rgba(9, 9, 11, 0.04);
|
|
--nx-shadow-md: 0 4px 8px -2px rgba(9, 9, 11, 0.06), 0 2px 4px -2px rgba(9, 9, 11, 0.04);
|
|
--nx-shadow-lg: 0 10px 24px -4px rgba(9, 9, 11, 0.08), 0 4px 8px -4px rgba(9, 9, 11, 0.04);
|
|
--nx-shadow-xl: 0 24px 48px -12px rgba(9, 9, 11, 0.18);
|
|
|
|
--nx-ring-accent: 0 0 0 3px rgba(124, 58, 237, 0.2);
|
|
--nx-ring-danger: 0 0 0 3px rgba(220, 38, 38, 0.2);
|
|
|
|
/* Radii */
|
|
--nx-radius-xs: 4px;
|
|
--nx-radius-sm: 6px;
|
|
--nx-radius-md: 8px;
|
|
--nx-radius-lg: 12px;
|
|
--nx-radius-xl: 16px;
|
|
--nx-radius-2xl: 24px;
|
|
--nx-radius-pill: 999px;
|
|
|
|
/* Spacing — 4pt rhythm */
|
|
--nx-space-1: 0.25rem;
|
|
--nx-space-2: 0.5rem;
|
|
--nx-space-3: 0.75rem;
|
|
--nx-space-4: 1rem;
|
|
--nx-space-5: 1.25rem;
|
|
--nx-space-6: 1.5rem;
|
|
--nx-space-8: 2rem;
|
|
--nx-space-10: 2.5rem;
|
|
--nx-space-12: 3rem;
|
|
--nx-space-16: 4rem;
|
|
|
|
/* Type — system stack first, no Newsreader dependency. The headlines
|
|
look right with a tight tracking and proper weight rather than a
|
|
web-font that may not load on first paint. */
|
|
--nx-font-display: 'Inter Display', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto,
|
|
'Helvetica Neue', Arial, sans-serif;
|
|
--nx-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
|
|
sans-serif;
|
|
--nx-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
|
|
|
|
--nx-text-xs: 0.75rem;
|
|
--nx-text-sm: 0.8125rem;
|
|
--nx-text-base: 0.875rem;
|
|
--nx-text-md: 0.9375rem;
|
|
--nx-text-lg: 1.0625rem;
|
|
--nx-text-xl: 1.25rem;
|
|
--nx-text-2xl: 1.625rem;
|
|
--nx-text-3xl: 2rem;
|
|
--nx-text-display: 2.75rem;
|
|
|
|
/* Motion */
|
|
--nx-step-curve: cubic-bezier(0.16, 1, 0.3, 1);
|
|
--nx-soft-curve: cubic-bezier(0.4, 0, 0.2, 1);
|
|
--nx-dur-fast: 100ms;
|
|
--nx-dur-base: 160ms;
|
|
--nx-dur-slow: 240ms;
|
|
|
|
/* Z */
|
|
--nx-z-nav: 50;
|
|
--nx-z-dropdown: 60;
|
|
--nx-z-toast: 70;
|
|
--nx-z-modal: 80;
|
|
|
|
color-scheme: light;
|
|
}
|
|
|
|
:root[data-theme='dark'] {
|
|
--nx-bg: #09090b;
|
|
--nx-bg-elevated: #18181b;
|
|
--nx-bg-sunken: #050507;
|
|
--nx-bg-inset: #27272a;
|
|
--nx-bg-overlay: rgba(0, 0, 0, 0.7);
|
|
|
|
--nx-fg: #fafafa;
|
|
--nx-fg-muted: #a1a1aa;
|
|
--nx-fg-subtle: #71717a;
|
|
--nx-fg-on-accent: #ffffff;
|
|
|
|
--nx-accent: #a78bfa;
|
|
--nx-accent-strong: #c4b5fd;
|
|
--nx-accent-soft: #2e1065;
|
|
--nx-accent-border: #4c1d95;
|
|
--nx-accent-fg: #0a0a0a;
|
|
|
|
--nx-success: #4ade80;
|
|
--nx-success-soft: #052e16;
|
|
--nx-success-border: #14532d;
|
|
|
|
--nx-warning: #fbbf24;
|
|
--nx-warning-soft: #422006;
|
|
--nx-warning-border: #78350f;
|
|
|
|
--nx-danger: #f87171;
|
|
--nx-danger-soft: #450a0a;
|
|
--nx-danger-border: #7f1d1d;
|
|
|
|
--nx-info: #38bdf8;
|
|
--nx-info-soft: #082f49;
|
|
--nx-info-border: #0c4a6e;
|
|
|
|
--nx-border: #27272a;
|
|
--nx-border-strong: #3f3f46;
|
|
--nx-border-accent: #6d28d9;
|
|
|
|
--nx-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
|
|
--nx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
|
|
--nx-shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.6), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
|
|
--nx-shadow-lg: 0 10px 24px -4px rgba(0, 0, 0, 0.6), 0 4px 8px -4px rgba(0, 0, 0, 0.4);
|
|
--nx-shadow-xl: 0 24px 48px -12px rgba(0, 0, 0, 0.8);
|
|
|
|
--nx-ring-accent: 0 0 0 3px rgba(167, 139, 250, 0.3);
|
|
--nx-ring-danger: 0 0 0 3px rgba(248, 113, 113, 0.3);
|
|
|
|
color-scheme: dark;
|
|
}
|
|
|
|
/* Honor system theme when no explicit override is set. */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root:not([data-theme]) {
|
|
--nx-bg: #09090b;
|
|
--nx-bg-elevated: #18181b;
|
|
--nx-bg-sunken: #050507;
|
|
--nx-bg-inset: #27272a;
|
|
--nx-bg-overlay: rgba(0, 0, 0, 0.7);
|
|
|
|
--nx-fg: #fafafa;
|
|
--nx-fg-muted: #a1a1aa;
|
|
--nx-fg-subtle: #71717a;
|
|
--nx-fg-on-accent: #ffffff;
|
|
|
|
--nx-accent: #a78bfa;
|
|
--nx-accent-strong: #c4b5fd;
|
|
--nx-accent-soft: #2e1065;
|
|
--nx-accent-border: #4c1d95;
|
|
--nx-accent-fg: #0a0a0a;
|
|
|
|
--nx-success: #4ade80;
|
|
--nx-success-soft: #052e16;
|
|
--nx-success-border: #14532d;
|
|
|
|
--nx-warning: #fbbf24;
|
|
--nx-warning-soft: #422006;
|
|
--nx-warning-border: #78350f;
|
|
|
|
--nx-danger: #f87171;
|
|
--nx-danger-soft: #450a0a;
|
|
--nx-danger-border: #7f1d1d;
|
|
|
|
--nx-info: #38bdf8;
|
|
--nx-info-soft: #082f49;
|
|
--nx-info-border: #0c4a6e;
|
|
|
|
--nx-border: #27272a;
|
|
--nx-border-strong: #3f3f46;
|
|
--nx-border-accent: #6d28d9;
|
|
|
|
--nx-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
|
|
--nx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
|
|
--nx-shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.6), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
|
|
--nx-shadow-lg: 0 10px 24px -4px rgba(0, 0, 0, 0.6), 0 4px 8px -4px rgba(0, 0, 0, 0.4);
|
|
--nx-shadow-xl: 0 24px 48px -12px rgba(0, 0, 0, 0.8);
|
|
|
|
--nx-ring-accent: 0 0 0 3px rgba(167, 139, 250, 0.3);
|
|
--nx-ring-danger: 0 0 0 3px rgba(248, 113, 113, 0.3);
|
|
|
|
color-scheme: dark;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
:root {
|
|
--nx-dur-fast: 0ms;
|
|
--nx-dur-base: 0ms;
|
|
--nx-dur-slow: 0ms;
|
|
}
|
|
}
|