Restyle dark theme with blue-tinted palette, card glow, and rounded surfaces

Shift the dark theme from neutral gray to a richer blue-tinted palette
inspired by CharBuilder-style TTRPG apps. Deeper navy background, steel-blue
card surfaces, and visible blue borders create more depth and visual layering.

- Update design tokens: background, card, border, input, muted colors
- Add card-glow utility (radial gradient + blue box-shadow) for card surfaces
- Add panel-glow utility (top-down gradient) for tall panels like stat blocks
- Apply glow and rounded-lg to all card surfaces, dropdowns, dialogs, toasts
- Give outline buttons a subtle fill instead of transparent background
- Active combatant row now uses full border with glow instead of left accent

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Lukas
2026-03-16 13:39:44 +01:00
parent 8aec460ee4
commit f4a7b53393
13 changed files with 43 additions and 21 deletions

View File

@@ -1,14 +1,14 @@
@import "tailwindcss";
@theme {
--color-background: #0f172a;
--color-background: #0e1a2e;
--color-foreground: #e2e8f0;
--color-muted: #64748b;
--color-muted: #7a8ba4;
--color-muted-foreground: #94a3b8;
--color-card: #1e293b;
--color-card: #1a2e4a;
--color-card-foreground: #e2e8f0;
--color-border: #334155;
--color-input: #334155;
--color-border: #2a5088;
--color-input: #2a5088;
--color-primary: #3b82f6;
--color-primary-foreground: #ffffff;
--color-accent: #3b82f6;
@@ -169,6 +169,28 @@
concentration-glow 1200ms ease-out;
}
@utility card-glow {
background-image: radial-gradient(
ellipse at 50% 50%,
oklch(0.35 0.05 250 / 0.5) 0%,
transparent 70%
);
box-shadow:
0 0 15px -2px oklch(0.623 0.214 259 / 0.2),
inset 0 1px 0 0 oklch(0.7 0.15 259 / 0.1);
}
@utility panel-glow {
background-image: linear-gradient(
to bottom,
oklch(0.35 0.05 250 / 0.4) 0%,
transparent 40%
);
box-shadow:
0 0 20px -2px oklch(0.623 0.214 259 / 0.15),
inset 0 1px 0 0 oklch(0.7 0.15 259 / 0.1);
}
* {
scrollbar-color: var(--color-border) transparent;
scrollbar-width: thin;