207 lines
5.3 KiB
CSS
207 lines
5.3 KiB
CSS
|
|
/* ============================================================
|
|
tailwind.css
|
|
Toggle themes by setting data-theme on <html>:
|
|
<html data-theme="hades">
|
|
<html data-theme="apollo">
|
|
============================================================ */
|
|
|
|
/* Self-hosted fonts (not a Google Fonts CDN @import) so the library never
|
|
depends on outbound network access to render its own type. */
|
|
@import "@fontsource/cinzel/400.css";
|
|
@import "@fontsource/cinzel/600.css";
|
|
@import "@fontsource/ibm-plex-sans/400.css";
|
|
@import "@fontsource/ibm-plex-sans/500.css";
|
|
@import "@fontsource/ibm-plex-mono/400.css";
|
|
@import "@fontsource/ibm-plex-mono/500.css";
|
|
|
|
@import "tailwindcss";
|
|
@import "tw-animate-css";
|
|
@import "shadcn-vue/tailwind.css";
|
|
|
|
/* Explicit source: this file is consumed by sibling workspace packages (e.g.
|
|
packages/playground) whose own Vite root Tailwind's automatic content
|
|
detection never walks into, so class usage in src/components/** would
|
|
otherwise be invisible to the scanner. */
|
|
@source "../../";
|
|
|
|
@theme inline {
|
|
--font-sans: var(--font-sans);
|
|
--font-serif: var(--font-serif);
|
|
--font-mono: var(--font-mono);
|
|
--color-background: var(--surface-0);
|
|
--color-foreground: var(--text-body);
|
|
--color-card: var(--surface-1);
|
|
--color-card-foreground: var(--text-body);
|
|
--color-popover: var(--surface-2);
|
|
--color-popover-foreground: var(--text-body);
|
|
--color-primary: var(--primary);
|
|
--color-primary-foreground: var(--primary-fg);
|
|
--color-secondary: var(--neutral);
|
|
--color-secondary-foreground: var(--neutral-fg);
|
|
--color-muted: var(--surface-2);
|
|
--color-muted-foreground: var(--text-muted);
|
|
--color-accent: var(--surface-3);
|
|
--color-accent-foreground: var(--text-high);
|
|
--color-destructive: var(--danger);
|
|
--color-destructive-foreground: var(--danger-fg);
|
|
--color-info: var(--info);
|
|
--color-info-foreground: var(--info-fg);
|
|
--color-success: var(--success);
|
|
--color-success-foreground: var(--success-fg);
|
|
--color-warning: var(--warn);
|
|
--color-warning-foreground: var(--warn-fg);
|
|
--color-border: var(--border);
|
|
--color-input: var(--border);
|
|
--color-ring: var(--primary);
|
|
--radius-sm: calc(var(--radius) - 4px);
|
|
--radius-md: calc(var(--radius) - 2px);
|
|
--radius-lg: var(--radius);
|
|
--radius-xl: calc(var(--radius) + 4px);
|
|
}
|
|
|
|
:root {
|
|
--radius: 0.3125rem;
|
|
}
|
|
|
|
/* ── HADES ───────────────────────────────────────────────── */
|
|
[data-theme='hades'] {
|
|
--surface-0: #18160f;
|
|
--surface-1: #28241a;
|
|
--surface-2: #2e2a1e;
|
|
--surface-3: #322e22;
|
|
--track: #32302a;
|
|
|
|
--border: #4a4538;
|
|
--border-hi: #5a5040;
|
|
--border-lo: #38342a;
|
|
|
|
--primary: #d4b278;
|
|
--primary-fg: #0e0c08;
|
|
|
|
--warn: #e08840;
|
|
--warn-subtle: #281808;
|
|
--warn-border: #4a2c10;
|
|
--warn-fg: #fff8e8;
|
|
|
|
--danger: #7a1a1a;
|
|
--danger-subtle: #200808;
|
|
--danger-border: #3a1010;
|
|
--danger-fg: #fff8e8;
|
|
|
|
--info: #88aec8;
|
|
--info-subtle: #101e2c;
|
|
--info-border: #1e3850;
|
|
--info-fg: #0a1828;
|
|
|
|
--neutral: #7a6e60;
|
|
--neutral-fg: #fff8e8;
|
|
|
|
--success: #6aaa7a;
|
|
--success-subtle: #0e2214;
|
|
--success-border: #1e4228;
|
|
--success-fg: #fff8e8;
|
|
|
|
--text-high: #f4f0e8;
|
|
--text-body: #d0c8b8;
|
|
--text-muted: #908878;
|
|
--text-dim: #807868;
|
|
--text-label: #c0b8a8;
|
|
|
|
--focus-ring: 0 0 0 3px rgba(212, 178, 120, 0.65);
|
|
|
|
--font-serif: 'Cinzel', Georgia, serif;
|
|
--font-sans: 'IBM Plex Sans', system-ui, sans-serif;
|
|
--font-mono: 'IBM Plex Mono', monospace;
|
|
}
|
|
|
|
/* ── APOLLO ──────────────────────────────────────────────── */
|
|
[data-theme='apollo'] {
|
|
--surface-0: #faf7f2;
|
|
--surface-1: #f4f0e8;
|
|
--surface-2: #eee9df;
|
|
--surface-3: #e4ddd0;
|
|
--track: #e4ddd0;
|
|
|
|
--border: #bab2a0;
|
|
--border-hi: #c0b8a8;
|
|
--border-lo: #ccc4b4;
|
|
|
|
--primary: #b8860b;
|
|
--primary-fg: #fff8e8;
|
|
|
|
--warn: #9a6020;
|
|
--warn-subtle: #fdf3e0;
|
|
--warn-border: #e8d0a0;
|
|
--warn-fg: #fff8e8;
|
|
|
|
--danger: #7a1a1a;
|
|
--danger-subtle: #faeaea;
|
|
--danger-border: #c8a0a0;
|
|
--danger-fg: #fff8e8;
|
|
|
|
--info: #3a5a8a;
|
|
--info-subtle: #e8eef8;
|
|
--info-border: #b0c4e0;
|
|
--info-fg: #fff8e8;
|
|
|
|
--neutral: #8a8070;
|
|
--neutral-fg: #fff8e8;
|
|
|
|
--success: #5a7a40;
|
|
--success-subtle: #eef4e8;
|
|
--success-border: #c0d4a8;
|
|
--success-fg: #fff8e8;
|
|
|
|
--text-high: #1a1610;
|
|
--text-body: #3a3020;
|
|
--text-muted: #5a5040;
|
|
--text-dim: #8a8070;
|
|
--text-label: #5a5040;
|
|
|
|
--focus-ring: 0 0 0 3px rgba(184, 134, 11, 0.65);
|
|
|
|
--font-serif: 'Cinzel', Georgia, serif;
|
|
--font-sans: 'IBM Plex Sans', system-ui, sans-serif;
|
|
--font-mono: 'IBM Plex Mono', monospace;
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
box-sizing: border-box;
|
|
}
|
|
html {
|
|
font-family: var(--font-sans);
|
|
font-size: 14px;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
min-height: 100vh;
|
|
}
|
|
:focus-visible {
|
|
outline: 2px solid transparent;
|
|
box-shadow: var(--focus-ring);
|
|
}
|
|
}
|
|
|
|
@keyframes nych-spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
.nych-loading-icon .wreath {
|
|
transform-origin: 340px 180px;
|
|
animation: nych-spin 2s linear infinite;
|
|
}
|
|
.nych-loading-icon .wreath path {
|
|
fill: var(--primary-fg);
|
|
}
|
|
.nych-loading-icon .wreath line {
|
|
stroke: var(--text-high);
|
|
}
|