feat(v2): design tokens, fonts (Manrope/Space Grotesk/JetBrains Mono), galaxy background
This commit is contained in:
@@ -4,6 +4,52 @@
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
/* ── Nexus V2 Theme (Tailwind v4 @theme directive) ── */
|
||||
@theme {
|
||||
/* Font families */
|
||||
--font-sans: 'Manrope', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
--font-display: 'Space Grotesk', sans-serif;
|
||||
--font-mono: 'JetBrains Mono', monospace;
|
||||
|
||||
/* Space surfaces */
|
||||
--color-space-0: #050410;
|
||||
--color-space-1: #0a0818;
|
||||
--color-space-2: #0e0c20;
|
||||
--color-space-3: #141130;
|
||||
--color-space-4: #1b1742;
|
||||
|
||||
/* Glass */
|
||||
--color-glass: rgba(20, 17, 48, 0.55);
|
||||
--color-glass-2: rgba(28, 24, 64, 0.55);
|
||||
|
||||
/* Lines */
|
||||
--color-line: rgba(150, 140, 255, 0.10);
|
||||
--color-line-2: rgba(150, 140, 255, 0.18);
|
||||
--color-line-3: rgba(150, 140, 255, 0.30);
|
||||
|
||||
/* Text */
|
||||
--color-tx: #ece9ff;
|
||||
--color-tx-2: #a8a3d6;
|
||||
--color-tx-3: #6f6aa0;
|
||||
|
||||
/* Accent */
|
||||
--color-a-blue: #4f7cff;
|
||||
--color-a-purple: #b557f6;
|
||||
--color-a-mid: #7c6cff;
|
||||
|
||||
/* Status */
|
||||
--color-st-work: #3ddc97;
|
||||
--color-st-think: #34d6f5;
|
||||
--color-st-queue: #fbbf24;
|
||||
--color-st-block: #fb7185;
|
||||
--color-st-idle: #6b6796;
|
||||
|
||||
/* Border radius */
|
||||
--radius-r: 14px;
|
||||
--radius-r-sm: 10px;
|
||||
--radius-r-lg: 20px;
|
||||
}
|
||||
|
||||
:root {
|
||||
--background: 222.2 84% 4.9%;
|
||||
--foreground: 210 40% 98%;
|
||||
@@ -39,7 +85,7 @@
|
||||
body {
|
||||
background: hsl(var(--background));
|
||||
color: hsl(var(--foreground));
|
||||
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
|
||||
font-family: 'Manrope', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
|
||||
'Segoe UI', sans-serif;
|
||||
margin: 0;
|
||||
min-width: 320px;
|
||||
|
||||
@@ -0,0 +1,110 @@
|
||||
/* ================================================================
|
||||
nexus-tokens.css — Nexus Mission Control V2 Design Tokens
|
||||
Geladen NACH main.css, überschreibt shadcn/v1-Standards.
|
||||
================================================================ */
|
||||
|
||||
:root {
|
||||
/* ── Surfaces ─────────────────────────────────────── */
|
||||
--space-0: #050410;
|
||||
--space-1: #0a0818;
|
||||
--space-2: #0e0c20;
|
||||
--space-3: #141130;
|
||||
--space-4: #1b1742;
|
||||
--glass: rgba(20, 17, 48, 0.55);
|
||||
--glass-2: rgba(28, 24, 64, 0.55);
|
||||
|
||||
/* ── Lines ────────────────────────────────────────── */
|
||||
--line: rgba(150, 140, 255, 0.10);
|
||||
--line-2: rgba(150, 140, 255, 0.18);
|
||||
--line-3: rgba(150, 140, 255, 0.30);
|
||||
|
||||
/* ── Text ─────────────────────────────────────────── */
|
||||
--tx: #ece9ff;
|
||||
--tx-2: #a8a3d6;
|
||||
--tx-3: #6f6aa0;
|
||||
|
||||
/* ── Accent Gradient ──────────────────────────────── */
|
||||
--a-blue: #4f7cff;
|
||||
--a-purple: #b557f6;
|
||||
--a-mid: #7c6cff;
|
||||
--grad: linear-gradient(120deg, var(--a-blue), var(--a-purple));
|
||||
--grad-soft: linear-gradient(120deg, rgba(79,124,255,.18), rgba(181,87,246,.18));
|
||||
|
||||
/* ── Status ───────────────────────────────────────── */
|
||||
--st-work: #3ddc97;
|
||||
--st-think: #34d6f5;
|
||||
--st-queue: #fbbf24;
|
||||
--st-block: #fb7185;
|
||||
--st-idle: #6b6796;
|
||||
|
||||
/* ── Glows ────────────────────────────────────────── */
|
||||
--glow: 0 0 0 1px rgba(124,108,255,.20), 0 0 28px -4px rgba(124,108,255,.55);
|
||||
--glow-blue: 0 0 24px -2px rgba(79,124,255,.65);
|
||||
--glow-purple: 0 0 24px -2px rgba(181,87,246,.60);
|
||||
--glow-work: 0 0 16px -1px rgba(61,220,151,.70);
|
||||
--glow-think: 0 0 16px -1px rgba(52,214,245,.65);
|
||||
|
||||
/* ── Radius ───────────────────────────────────────── */
|
||||
--r: 14px;
|
||||
--r-sm: 10px;
|
||||
--r-lg: 20px;
|
||||
|
||||
/* ── Layout ───────────────────────────────────────── */
|
||||
--sidebar-w: 248px;
|
||||
--topbar-h: 62px;
|
||||
--rail-w: 360px;
|
||||
}
|
||||
|
||||
/* ── Glass card utility ────────────────────────────── */
|
||||
.glass-panel {
|
||||
background: var(--glass);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--r);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
/* ── Gradient text ─────────────────────────────────── */
|
||||
.grad-text {
|
||||
background: var(--grad);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
/* ── Status dot keyframes ──────────────────────────── */
|
||||
@keyframes pulse-work {
|
||||
0% { box-shadow: 0 0 0 0 rgba(61,220,151,.55); }
|
||||
70% { box-shadow: 0 0 0 7px rgba(61,220,151,0); }
|
||||
100% { box-shadow: 0 0 0 0 rgba(61,220,151,0); }
|
||||
}
|
||||
@keyframes pulse-think {
|
||||
0% { box-shadow: 0 0 0 0 rgba(52,214,245,.55); }
|
||||
70% { box-shadow: 0 0 0 7px rgba(52,214,245,0); }
|
||||
100% { box-shadow: 0 0 0 0 rgba(52,214,245,0); }
|
||||
}
|
||||
@keyframes pulse-block {
|
||||
0% { box-shadow: 0 0 0 0 rgba(251,113,133,.55); }
|
||||
70% { box-shadow: 0 0 0 7px rgba(251,113,133,0); }
|
||||
100% { box-shadow: 0 0 0 0 rgba(251,113,133,0); }
|
||||
}
|
||||
@keyframes shimmer {
|
||||
0% { transform: translateX(-100%); }
|
||||
100% { transform: translateX(180%); }
|
||||
}
|
||||
/* ── V2 Scrollbars ─────────────────────────────────── */
|
||||
.v2-scroll::-webkit-scrollbar { width: 9px; height: 9px; }
|
||||
.v2-scroll::-webkit-scrollbar-thumb {
|
||||
background: rgba(124,108,255,.22);
|
||||
border-radius: 9px;
|
||||
border: 2px solid transparent;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
.v2-scroll::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(124,108,255,.4);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
.v2-scroll::-webkit-scrollbar-track { background: transparent; }
|
||||
|
||||
/* ── Typography helpers ────────────────────────────── */
|
||||
.font-display { font-family: 'Space Grotesk', sans-serif; }
|
||||
.font-mono-v2 { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
|
||||
Reference in New Issue
Block a user