e2667f8e12
Forked from hermes-frontend, stripped openclaw/bun specifics: - Auth tokens: openclaw_session -> nyx_session - Vite proxy: localhost:3003 -> localhost:8000 (assay) - Prod WS: wss://assay.loop42.de/ws - Workspace paths: removed openclaw-specific paths - Added missing deps: @heroicons/vue, overlayscrollbars-vue - Branding: title -> nyx Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
93 lines
2.4 KiB
CSS
93 lines
2.4 KiB
CSS
@import "tailwindcss";
|
|
|
|
/* ── Map existing CSS vars into Tailwind theme ──
|
|
This lets you write bg-surface, text-accent, border-border etc.
|
|
Values reference your :root vars, so theme switching (Titan/ERAS) works automatically. */
|
|
|
|
@theme {
|
|
/* Colors — mapped from :root CSS vars */
|
|
--color-bg: var(--bg);
|
|
--color-bg-dim: var(--bg-dim);
|
|
--color-surface: var(--surface);
|
|
--color-border: var(--border);
|
|
--color-chat-bg: var(--chat-bg);
|
|
--color-agent: var(--agent);
|
|
--color-agent-border:var(--agent-border);
|
|
--color-muted: var(--muted);
|
|
--color-muted-text: var(--muted-text);
|
|
|
|
--color-text: var(--text);
|
|
--color-text-dim: var(--text-dim);
|
|
|
|
--color-accent: var(--accent);
|
|
--color-user-bubble: var(--user-bubble);
|
|
--color-primary: var(--primary);
|
|
--color-secondary: var(--secondary);
|
|
--color-success: var(--success);
|
|
--color-success-dim: var(--success-dim);
|
|
--color-warn: var(--warn);
|
|
--color-error: var(--error);
|
|
--color-focus: var(--focus);
|
|
|
|
/* Typography */
|
|
--font-sans: var(--font-sans);
|
|
--font-mono: var(--font-mono);
|
|
|
|
/* Spacing tokens */
|
|
--spacing-page: var(--space-page);
|
|
--spacing-gap: var(--space-gap);
|
|
--spacing-inset: var(--space-inset);
|
|
|
|
/* Border radius */
|
|
--radius-lg: var(--radius);
|
|
--radius-sm: var(--radius-sm);
|
|
}
|
|
|
|
/* ── Component classes ──
|
|
Reusable semantic classes built from Tailwind utilities.
|
|
Use these in templates for common patterns. */
|
|
|
|
@utility card {
|
|
background-color: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
padding: var(--space-inset);
|
|
}
|
|
|
|
@utility badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.125rem 0.5rem;
|
|
border-radius: var(--radius-sm);
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@utility btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.375rem 1rem;
|
|
border-radius: var(--radius-sm);
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: opacity 0.15s, background-color 0.15s, color 0.15s;
|
|
}
|
|
|
|
@utility btn-primary {
|
|
background-color: var(--accent);
|
|
color: white;
|
|
border: none;
|
|
}
|
|
|
|
@utility btn-outline {
|
|
background: none;
|
|
border: 1px solid var(--border);
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
@utility btn-danger {
|
|
background: none;
|
|
border: 1px solid var(--error);
|
|
color: var(--error);
|
|
}
|