dostulata/initiative
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/web/src/components/action-bar.tsx
View File

@@ -77,7 +77,7 @@ function AddModeSuggestions({
onAddFromPlayerCharacter?: (pc: PlayerCharacter) => void;
}>) {
return (
<div className="absolute bottom-full z-50 mb-1 w-full max-w-xs rounded-md border border-border bg-card shadow-lg">
<div className="card-glow absolute bottom-full z-50 mb-1 w-full max-w-xs rounded-lg border border-border bg-card">
<button
type="button"
className="flex w-full items-center gap-1.5 border-border border-b px-3 py-2 text-left text-accent text-sm hover:bg-accent/20"
@@ -457,7 +457,7 @@ export function ActionBar({
});
return (
<div className="flex items-center gap-3 rounded-md border border-border bg-card px-4 py-3">
<div className="card-glow flex items-center gap-3 rounded-lg border border-border bg-card px-4 py-3">
<form
onSubmit={handleAdd}
className="relative flex flex-1 items-center gap-2"
@@ -498,7 +498,7 @@ export function ActionBar({
</button>
)}
{browseMode && deferredSuggestions.length > 0 && (
<div className="absolute bottom-full z-50 mb-1 w-full rounded-md border border-border bg-card shadow-lg">
<div className="card-glow absolute bottom-full z-50 mb-1 w-full rounded-lg border border-border bg-card">
<ul className="max-h-48 overflow-y-auto py-1">
{deferredSuggestions.map((result, i) => (
<li key={creatureKey(result)}>