refactor(frontend): expose semantic Tailwind theme tokens
This commit is contained in:
@@ -1,73 +1,3 @@
|
||||
:root {
|
||||
--bg: #07080d;
|
||||
--bg-elev: rgba(22, 25, 37, 0.55);
|
||||
--bg-elev-2: rgba(31, 35, 52, 0.55);
|
||||
--border: rgba(255, 255, 255, 0.08);
|
||||
--border-strong: rgba(255, 255, 255, 0.16);
|
||||
--glass: rgba(18, 20, 30, 0.45);
|
||||
--glass-strong: rgba(18, 20, 30, 0.62);
|
||||
--text: #f5f6fa;
|
||||
--text-dim: rgba(245, 246, 250, 0.7);
|
||||
--text-faint: rgba(245, 246, 250, 0.48);
|
||||
|
||||
--brand: #8b5cf6;
|
||||
--brand-2: #ec4899;
|
||||
--brand-3: #22d3ee;
|
||||
--accent: #a78bfa;
|
||||
--accent-2: #22d3ee;
|
||||
--listening: #22d3ee;
|
||||
--speaking: #a78bfa;
|
||||
--processing: #fbbf24;
|
||||
--error: #ff6a75;
|
||||
--success: #34d399;
|
||||
|
||||
--brand-gradient: linear-gradient(135deg, #8b5cf6 0%, #ec4899 50%, #22d3ee 100%);
|
||||
--brand-soft-gradient: linear-gradient(
|
||||
135deg,
|
||||
color-mix(in srgb, #8b5cf6 55%, transparent),
|
||||
color-mix(in srgb, #ec4899 48%, transparent) 55%,
|
||||
color-mix(in srgb, #22d3ee 55%, transparent)
|
||||
);
|
||||
|
||||
/* Mono is the "machine voice": reserved for system text the app emits —
|
||||
* the orb's status caption, tool calls, the transport tag. Body/UI stays
|
||||
* Inter. */
|
||||
--font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
|
||||
--font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
|
||||
/* Thesis: color belongs to the voice. The chrome is monochrome; saturated
|
||||
* hue appears only on the orb and on these tiny role echoes, which mirror
|
||||
* the orb's own state colors (you listening = cyan, assistant = violet,
|
||||
* tool = amber) so the transcript reads in the same color language. */
|
||||
--voice-user: var(--accent-2);
|
||||
--voice-assistant: var(--accent);
|
||||
--voice-tool: var(--processing);
|
||||
|
||||
/* Smoothed mic RMS in [0..1], updated every frame from JS while a session
|
||||
* is active. Used by audio-reactive circle states. */
|
||||
--audio-level: 0;
|
||||
/* Five log-spaced frequency bands extracted from the mic analyser;
|
||||
* drive each bar's height independently for a real "spectrum" feel. */
|
||||
--bar0: 0;
|
||||
--bar1: 0;
|
||||
--bar2: 0;
|
||||
--bar3: 0;
|
||||
--bar4: 0;
|
||||
|
||||
--radius-sm: 10px;
|
||||
--radius-md: 16px;
|
||||
--radius-lg: 26px;
|
||||
--radius-xl: 34px;
|
||||
|
||||
--shadow-soft: 0 10px 40px rgba(0, 0, 0, 0.35);
|
||||
--shadow-glow-brand:
|
||||
0 0 40px -10px color-mix(in srgb, var(--brand) 60%, transparent),
|
||||
0 0 80px -30px color-mix(in srgb, var(--brand-2) 55%, transparent);
|
||||
--shadow-glass: 0 8px 40px rgba(0, 0, 0, 0.32), 0 2px 8px rgba(0, 0, 0, 0.18);
|
||||
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -3985,53 +3915,6 @@ html[data-theme="white"] .bubble-stack {
|
||||
so the native dark theme is 100% preserved when the flag is off.
|
||||
═══════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
html[data-theme="white"] {
|
||||
color-scheme: light;
|
||||
/* ── Token overrides ─────────────────────────────────────────────── */
|
||||
--bg: #ffffff;
|
||||
--bg-elev: #f8fafc;
|
||||
--bg-elev-2: #f1f5f9;
|
||||
--border: rgba(15, 23, 42, 0.08);
|
||||
--border-strong: rgba(15, 23, 42, 0.16);
|
||||
--glass: rgba(255, 255, 255, 0.85);
|
||||
--glass-strong: rgba(248, 250, 252, 0.92);
|
||||
--text: #0f172a; /* slate-900 */
|
||||
--text-dim: rgba(15, 23, 42, 0.72);
|
||||
--text-faint: rgba(15, 23, 42, 0.55);
|
||||
|
||||
--brand: #1f6feb; /* deep corporate blue */
|
||||
--brand-2: #3b82f6; /* medium blue */
|
||||
--brand-3: #60a5fa; /* light blue */
|
||||
--accent: #2563eb; /* primary blue */
|
||||
--accent-2: #3b82f6; /* call-to-action blue */
|
||||
--listening: #2563eb;
|
||||
--speaking: #1d4ed8;
|
||||
--processing: #d97706;
|
||||
--error: #dc2626;
|
||||
--success: #16a34a;
|
||||
|
||||
--brand-gradient: linear-gradient(135deg, #2563eb 0%, #3b82f6 55%, #60a5fa 100%);
|
||||
--brand-soft-gradient: linear-gradient(
|
||||
135deg,
|
||||
rgba(37, 99, 235, 0.18),
|
||||
rgba(59, 130, 246, 0.14) 55%,
|
||||
rgba(96, 165, 250, 0.18)
|
||||
);
|
||||
|
||||
--voice-user: #2563eb;
|
||||
--voice-assistant: #64748b;
|
||||
--voice-tool: #d97706;
|
||||
|
||||
--shadow-soft: 0 6px 20px rgba(15, 23, 42, 0.06);
|
||||
--shadow-glow-brand: 0 0 28px -6px rgba(37, 99, 235, 0.45), 0 0 60px -18px rgba(59, 130, 246, 0.4);
|
||||
--shadow-glass: 0 2px 12px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
|
||||
|
||||
--radius-sm: 10px;
|
||||
--radius-md: 16px;
|
||||
--radius-lg: 22px;
|
||||
--radius-xl: 28px;
|
||||
}
|
||||
|
||||
/* ── Page chrome (strip aurora gradients / dot patterns) ────────────── */
|
||||
html[data-theme="white"] body {
|
||||
background: #ffffff !important;
|
||||
|
||||
@@ -0,0 +1,142 @@
|
||||
/* Palette values switch with server configuration; utilities resolve them at use time. */
|
||||
@custom-variant white (&:where([data-theme="white"], [data-theme="white"] *));
|
||||
@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
|
||||
@custom-variant compact (@media (max-width: 600px));
|
||||
@custom-variant short (@media (max-height: 640px));
|
||||
|
||||
@theme inline {
|
||||
--color-surface: var(--bg);
|
||||
--color-surface-raised: var(--bg-elev);
|
||||
--color-surface-overlay: var(--bg-elev-2);
|
||||
--color-foreground: var(--text);
|
||||
--color-muted: var(--text-dim);
|
||||
--color-faint: var(--text-faint);
|
||||
--color-line: var(--border);
|
||||
--color-line-strong: var(--border-strong);
|
||||
--color-brand: var(--brand);
|
||||
--color-brand-secondary: var(--brand-2);
|
||||
--color-brand-tertiary: var(--brand-3);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-secondary: var(--accent-2);
|
||||
--color-listening: var(--listening);
|
||||
--color-speaking: var(--speaking);
|
||||
--color-processing: var(--processing);
|
||||
--color-error: var(--error);
|
||||
--color-success: var(--success);
|
||||
--color-voice-user: var(--voice-user);
|
||||
--color-voice-assistant: var(--voice-assistant);
|
||||
--color-voice-tool: var(--voice-tool);
|
||||
--radius-control: var(--radius-sm);
|
||||
--radius-panel: var(--radius-md);
|
||||
--radius-card: var(--radius-lg);
|
||||
--shadow-panel: var(--shadow-soft);
|
||||
--shadow-brand: var(--shadow-glow-brand);
|
||||
--shadow-card-glass: var(--shadow-glass);
|
||||
}
|
||||
|
||||
@theme {
|
||||
--font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
--font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--bg: #07080d;
|
||||
--bg-elev: rgba(22, 25, 37, 0.55);
|
||||
--bg-elev-2: rgba(31, 35, 52, 0.55);
|
||||
--border: rgba(255, 255, 255, 0.08);
|
||||
--border-strong: rgba(255, 255, 255, 0.16);
|
||||
--glass: rgba(18, 20, 30, 0.45);
|
||||
--glass-strong: rgba(18, 20, 30, 0.62);
|
||||
--text: #f5f6fa;
|
||||
--text-dim: rgba(245, 246, 250, 0.7);
|
||||
--text-faint: rgba(245, 246, 250, 0.48);
|
||||
|
||||
--brand: #8b5cf6;
|
||||
--brand-2: #ec4899;
|
||||
--brand-3: #22d3ee;
|
||||
--accent: #a78bfa;
|
||||
--accent-2: #22d3ee;
|
||||
--listening: #22d3ee;
|
||||
--speaking: #a78bfa;
|
||||
--processing: #fbbf24;
|
||||
--error: #ff6a75;
|
||||
--success: #34d399;
|
||||
|
||||
--brand-gradient: linear-gradient(135deg, #8b5cf6 0%, #ec4899 50%, #22d3ee 100%);
|
||||
--brand-soft-gradient: linear-gradient(
|
||||
135deg,
|
||||
color-mix(in srgb, #8b5cf6 55%, transparent),
|
||||
color-mix(in srgb, #ec4899 48%, transparent) 55%,
|
||||
color-mix(in srgb, #22d3ee 55%, transparent)
|
||||
);
|
||||
--voice-user: var(--accent-2);
|
||||
--voice-assistant: var(--accent);
|
||||
--voice-tool: var(--processing);
|
||||
--audio-level: 0;
|
||||
--bar0: 0;
|
||||
--bar1: 0;
|
||||
--bar2: 0;
|
||||
--bar3: 0;
|
||||
--bar4: 0;
|
||||
|
||||
--radius-sm: 10px;
|
||||
--radius-md: 16px;
|
||||
--radius-lg: 26px;
|
||||
--radius-xl: 34px;
|
||||
|
||||
--shadow-soft: 0 10px 40px rgba(0, 0, 0, 0.35);
|
||||
--shadow-glow-brand:
|
||||
0 0 40px -10px color-mix(in srgb, var(--brand) 60%, transparent),
|
||||
0 0 80px -30px color-mix(in srgb, var(--brand-2) 55%, transparent);
|
||||
--shadow-glass: 0 8px 40px rgba(0, 0, 0, 0.32), 0 2px 8px rgba(0, 0, 0, 0.18);
|
||||
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
html[data-theme="white"] {
|
||||
color-scheme: light;
|
||||
--bg: #ffffff;
|
||||
--bg-elev: #f8fafc;
|
||||
--bg-elev-2: #f1f5f9;
|
||||
--border: rgba(15, 23, 42, 0.08);
|
||||
--border-strong: rgba(15, 23, 42, 0.16);
|
||||
--glass: rgba(255, 255, 255, 0.85);
|
||||
--glass-strong: rgba(248, 250, 252, 0.92);
|
||||
--text: #0f172a;
|
||||
--text-dim: rgba(15, 23, 42, 0.72);
|
||||
--text-faint: rgba(15, 23, 42, 0.55);
|
||||
|
||||
--brand: #1f6feb;
|
||||
--brand-2: #3b82f6;
|
||||
--brand-3: #60a5fa;
|
||||
--accent: #2563eb;
|
||||
--accent-2: #3b82f6;
|
||||
--listening: #2563eb;
|
||||
--speaking: #1d4ed8;
|
||||
--processing: #d97706;
|
||||
--error: #dc2626;
|
||||
--success: #16a34a;
|
||||
|
||||
--brand-gradient: linear-gradient(135deg, #2563eb 0%, #3b82f6 55%, #60a5fa 100%);
|
||||
--brand-soft-gradient: linear-gradient(
|
||||
135deg,
|
||||
rgba(37, 99, 235, 0.18),
|
||||
rgba(59, 130, 246, 0.14) 55%,
|
||||
rgba(96, 165, 250, 0.18)
|
||||
);
|
||||
|
||||
--voice-user: #2563eb;
|
||||
--voice-assistant: #64748b;
|
||||
--voice-tool: #d97706;
|
||||
|
||||
--shadow-soft: 0 6px 20px rgba(15, 23, 42, 0.06);
|
||||
--shadow-glow-brand: 0 0 28px -6px rgba(37, 99, 235, 0.45), 0 0 60px -18px rgba(59, 130, 246, 0.4);
|
||||
--shadow-glass: 0 2px 12px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
|
||||
|
||||
--radius-sm: 10px;
|
||||
--radius-md: 16px;
|
||||
--radius-lg: 22px;
|
||||
--radius-xl: 28px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user