From 8665e903bd2eee7604df169e6bc00f6381f8f1cc Mon Sep 17 00:00:00 2001 From: n8n-gitea Date: Mon, 11 May 2026 13:55:01 +0200 Subject: [PATCH] feat: TASK-005 - globals.css design tokens - Added Source Serif 4 font import - Added new design tokens per strategy spec: --bg-void, --bg-panel, --bg-raised (background depth levels) --mana-raw, --mana-transference (new mana element colors) --border-accent (border highlight) --font-display, --font-ui (new font custom properties) - Replaced hardcoded font-family refs with CSS variables - Removed redundant .dark block (identical to :root, always dark mode) - Consolidated @theme inline section to essential mappings --- docs/project-structure.txt | 7 +- src/app/globals.css | 177 ++++++------------------------------- 2 files changed, 32 insertions(+), 152 deletions(-) diff --git a/docs/project-structure.txt b/docs/project-structure.txt index 613a364..73af7d9 100644 --- a/docs/project-structure.txt +++ b/docs/project-structure.txt @@ -12,11 +12,16 @@ Mana-Loop/ ├── db/ │ └── custom.db ├── docs/ +│ ├── .workflow/ +│ │ └── TASK-001-playwright-setup.json │ ├── strategy/ │ │ └── overall-remediation-plan.md │ ├── tasks/ -│ │ └── TASK-001-playwright-setup.md +│ │ ├── TASK-001-playwright-setup.md +│ │ ├── TASK-005-globals-css-tokens.md +│ │ └── TASK-006-left-panel-redesign.md │ ├── GAME_BRIEFING.md +│ ├── active-task-log.md │ ├── circular-deps.txt │ ├── dependency-graph.json │ ├── project-structure.txt diff --git a/src/app/globals.css b/src/app/globals.css index 7e98b28..5a849ee 100755 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,48 +1,24 @@ -@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Crimson+Text:ital,wght@0,400;0,600;1,400&family=JetBrains+Mono:wght@400;500&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Crimson+Text:ital,wght@0,400;0,600;1,400&family=JetBrains+Mono:wght@400;500&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&display=swap'); @import "tailwindcss"; @import "tw-animate-css"; -@custom-variant dark (&:is(.dark *)); - @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); - --font-sans: var(--font-geist-sans); - --font-mono: var(--font-geist-mono); - --color-sidebar-ring: var(--sidebar-ring); - --color-sidebar-border: var(--sidebar-border); - --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); - --color-sidebar-accent: var(--sidebar-accent); - --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); - --color-sidebar-primary: var(--sidebar-primary); - --color-sidebar-foreground: var(--sidebar-foreground); - --color-sidebar: var(--sidebar); - --color-chart-5: var(--chart-5); - --color-chart-4: var(--chart-4); - --color-chart-3: var(--chart-3); - --color-chart-2: var(--chart-2); - --color-chart-1: var(--chart-1); - --color-ring: var(--ring); - --color-input: var(--input); - --color-border: var(--border); - --color-destructive: var(--destructive); - --color-accent-foreground: var(--accent-foreground); - --color-accent: var(--accent); - --color-muted-foreground: var(--muted-foreground); - --color-muted: var(--muted); - --color-secondary-foreground: var(--secondary-foreground); - --color-secondary: var(--secondary); - --color-primary-foreground: var(--primary-foreground); - --color-primary: var(--primary); - --color-popover-foreground: var(--popover-foreground); - --color-popover: var(--popover); - --color-card-foreground: var(--card-foreground); --color-card: var(--card); + --color-card-foreground: var(--card-foreground); + --color-primary: var(--primary); + --color-primary-foreground: var(--primary-foreground); + --color-muted: var(--muted); + --color-muted-foreground: var(--muted-foreground); + --color-border: var(--border); + --color-input: var(--input); + --color-ring: var(--ring); + --color-destructive: var(--destructive); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); - --radius-xl: calc(var(--radius) + 4px); } :root { @@ -111,9 +87,9 @@ --interactive-disabled: #1e2a45; /* === Typography === */ - --font-heading: 'Cinzel', serif; - --font-body: 'Crimson Text', Georgia, serif; - --font-mono: 'JetBrains Mono', monospace; + --font-display: 'Cinzel', serif; + --font-body: 'Source Serif 4', 'Crimson Text', Georgia, serif; + --font-ui: 'JetBrains Mono', monospace; /* === Shadow System === */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); @@ -123,6 +99,14 @@ --shadow-glow-purple: 0 0 15px rgba(124, 92, 191, 0.4); --shadow-glow-accent: 0 0 15px rgba(60, 111, 232, 0.4); + /* === Mana Loop Design Tokens (Strategy Spec) === */ + --bg-void: #0d0d0f; + --bg-panel: #141418; + --bg-raised: #242430; + --mana-raw: #8b7fd4; + --mana-transference: #1abc9c; + --border-accent: rgba(255, 255, 255, 0.22); + /* === Legacy Shadcn Variables (mapped to new system) === */ --background: var(--bg-base); --foreground: var(--text-primary); @@ -176,128 +160,19 @@ --game-success: var(--color-success); } -.dark { - /* Same as :root - we're always in dark mode for this game */ - --bg-base: #060811; - --bg-surface: #0C1020; - --bg-elevated: #111628; - --bg-sunken: #181f35; - --border-subtle: #1e2a45; - --border-default: #2a3a60; - --border-focus: #5B8FFF; - --text-primary: #c8d8f8; - --text-secondary: #7a92c0; - --text-muted: #4a5f8a; - --text-disabled: #2a3a60; - --mana-fire: #E8734A; - --mana-water: #3BAFDA; - --mana-air: #C8D8F8; - --mana-earth: #B8860B; - --mana-light: #D4A843; - --mana-dark: #4B0082; - --mana-death: #8B7D8B; - --mana-transfer: #00CED1; - --mana-metal: #708090; - --mana-sand: #C2B280; - --mana-lightning: #FFD700; - --mana-crystal: #B0E0E6; - --mana-stellar: #FF8C00; - --mana-void: #1A0A2E; - --color-success: #27AE60; - --color-warning: #F39C12; - --color-danger: #C0392B; - --color-info: #3B6FE8; - --rarity-common: #9CA3AF; - --rarity-common-glow: rgba(156, 163, 175, 0.25); - --rarity-uncommon: #22C55E; - --rarity-uncommon-glow: rgba(34, 197, 94, 0.25); - --rarity-rare: #3B82F6; - --rarity-rare-glow: rgba(59, 130, 246, 0.25); - --rarity-epic: #A855F7; - --rarity-epic-glow: rgba(168, 85, 247, 0.25); - --rarity-legendary: #F59E0B; - --rarity-legendary-glow: rgba(245, 158, 11, 0.375); - --rarity-mythic: #E8734A; - --rarity-mythic-glow: rgba(232, 115, 74, 0.25); - --interactive-primary: #5B8FFF; - --interactive-primary-hover: #7BAFFF; - --interactive-secondary: #2a3a60; - --interactive-secondary-hover: #3a4a70; - --interactive-danger: #C0392B; - --interactive-danger-hover: #E74C3C; - --interactive-disabled: #1e2a45; - --font-heading: 'Cinzel', serif; - --font-body: 'Crimson Text', Georgia, serif; - --font-mono: 'JetBrains Mono', monospace; - --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); - --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4); - --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5); - --shadow-glow-gold: 0 0 15px rgba(212, 168, 67, 0.4); - --shadow-glow-purple: 0 0 15px rgba(124, 92, 191, 0.4); - --shadow-glow-accent: 0 0 15px rgba(60, 111, 232, 0.4); - --background: var(--bg-base); - --foreground: var(--text-primary); - --card: var(--bg-surface); - --card-foreground: var(--text-primary); - --popover: var(--bg-elevated); - --popover-foreground: var(--text-primary); - --primary: var(--interactive-primary); - --primary-foreground: #ffffff; - --secondary: var(--bg-sunken); - --secondary-foreground: var(--text-primary); - --muted: var(--bg-sunken); - --muted-foreground: var(--text-secondary); - --accent: var(--interactive-secondary); - --accent-foreground: var(--text-primary); - --destructive: var(--color-danger); - --border: var(--border-subtle); - --input: var(--border-subtle); - --ring: var(--border-focus); - --chart-1: var(--mana-fire); - --chart-2: var(--mana-water); - --chart-3: var(--mana-light); - --chart-4: var(--color-success); - --chart-5: var(--mana-lightning); - --sidebar: var(--bg-surface); - --sidebar-foreground: var(--text-primary); - --sidebar-primary: var(--mana-light); - --sidebar-primary-foreground: #0C1020; - --sidebar-accent: var(--interactive-secondary); - --sidebar-accent-foreground: var(--text-primary); - --sidebar-border: var(--border-subtle); - --sidebar-ring: var(--mana-light); - --game-bg: var(--bg-base); - --game-bg1: var(--bg-surface); - --game-bg2: var(--bg-elevated); - --game-bg3: var(--bg-sunken); - --game-border: var(--border-subtle); - --game-border2: var(--border-default); - --game-text: var(--text-primary); - --game-text2: var(--text-secondary); - --game-text3: var(--text-muted); - --game-gold: var(--mana-light); - --game-gold2: #A87830; - --game-purple: #7C5CBF; - --game-purpleL: #A07EE0; - --game-accent: var(--interactive-primary); - --game-accentL: var(--interactive-primary-hover); - --game-danger: var(--color-danger); - --game-success: var(--color-success); -} - @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; - font-family: 'Crimson Text', Georgia, serif; + font-family: var(--font-body); } } /* Game-specific styles */ .game-root { - font-family: 'Crimson Text', Georgia, serif; + font-family: var(--font-body); background: var(--game-bg); color: var(--game-text); min-height: 100vh; @@ -311,7 +186,7 @@ } .game-title { - font-family: 'Cinzel', serif; + font-family: var(--font-display); background: linear-gradient(135deg, var(--game-gold) 0%, var(--game-purpleL) 50%, var(--game-accentL) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; @@ -319,13 +194,13 @@ } .game-panel-title { - font-family: 'Cinzel', serif; + font-family: var(--font-display); letter-spacing: 2px; text-transform: uppercase; } .game-mono { - font-family: 'JetBrains Mono', monospace; + font-family: var(--font-ui); } /* Scrollbar */