@almadar/ui 6.28.0 → 6.30.0

package/themes/trait-wars.css

@@ -1,169 +1,95 @@
 /**
- * Trait Wars Theme — "Illuminated Manuscript Futurism"
- *
- * Dune meets Book of Kells: aged parchment surfaces, gold celtic filigree
- * borders, warm ivory text, faction-coded accents. Dark mode only — this
- * is a game UI, not a productivity app.
- *
- * Surface hierarchy (darkest → lightest):
- *   background → card/surface → elevated (hover) → muted
+ * GENERATED — do not edit by hand.
+ * Source: packages/almadar-core/themes/trait-wars.json
+ * Regenerate: node tools/almadar-pattern-sync/dist/index.js themes (or `almadar-sync themes`)
  */
 
-/* Google Fonts — Cinzel (400, 500, 700) */
-@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;700&display=swap');
-
-/* ==========================================================================
- * DARK MODE (primary — game is always dark)
- * ========================================================================== */
-[data-theme="trait-wars-dark"] {
-    /* Shadows — warm gold glow instead of cool blue */
-    --shadow-main:
-        0 4px 14px rgba(201, 168, 76, 0.10), 0 1px 3px rgba(0, 0, 0, 0.20);
-    --shadow-sm: 0 2px 4px rgba(201, 168, 76, 0.06);
-    --shadow-lg:
-        0 8px 30px rgba(201, 168, 76, 0.15), 0 4px 10px rgba(0, 0, 0, 0.15);
-    --shadow-inner: inset 0 1px 3px rgba(0, 0, 0, 0.25);
-    --shadow-none: none;
-    --shadow-hover:
-        0 12px 40px rgba(201, 168, 76, 0.20), 0 4px 12px rgba(234, 179, 8, 0.10);
-    --shadow-active: 0 2px 8px rgba(201, 168, 76, 0.15);
-
-    /* Border radius — slightly rounded, not too modern */
+[data-theme="trait-wars-light"] {
+    --color-primary: #785c12;
+    --color-primary-hover: #5c4a0d;
+    --color-primary-foreground: #faf6ee;
+    --color-secondary: #f0e8d8;
+    --color-secondary-hover: #e6dbc4;
+    --color-secondary-foreground: #3a2f22;
+    --color-accent: #0f766e;
+    --color-accent-foreground: #faf6ee;
+    --color-muted: #ede4d0;
+    --color-muted-foreground: #6e5f46;
+    --color-background: #faf6ee;
+    --color-foreground: #2a1f14;
+    --color-card: #ffffff;
+    --color-card-foreground: #2a1f14;
+    --color-surface: #f5efe3;
+    --color-border: #d4c4a8;
+    --color-input: #e6dbc4;
+    --color-ring: #9e7e1e;
+    --color-error: #b91c1c;
+    --color-error-foreground: #faf6ee;
+    --color-success: #15803d;
+    --color-success-foreground: #faf6ee;
+    --color-warning: #d97706;
+    --color-warning-foreground: #2a1f14;
+    --color-info: #0f766e;
+    --color-info-foreground: #faf6ee;
     --radius-none: 0px;
     --radius-sm: 4px;
     --radius-md: 6px;
     --radius-lg: 8px;
     --radius-xl: 12px;
     --radius-full: 9999px;
-
-    /* Border width — thin default, thick for emphasis */
     --border-width: 1px;
     --border-width-thin: 1px;
     --border-width-thick: 2px;
-
-    /* ======================================================================
-     * CORE COLORS
-     * ====================================================================== */
-
-    /* Primary — Gold (actions, interactive elements) */
-    --color-primary: #c9a84c;
-    --color-primary-hover: #eab308;
-    --color-primary-foreground: #1a1410;
-
-    /* Secondary — Dark parchment (neutral backgrounds) */
-    --color-secondary: #2a2118;
-    --color-secondary-hover: #3a2f22;
-    --color-secondary-foreground: #e8dcc8;
-
-    /* Accent — Teal resonance (faction, energy, selected) */
-    --color-accent: #14b8a6;
-    --color-accent-foreground: #042f2e;
-
-    /* Muted — Dim parchment (disabled, tertiary) */
-    --color-muted: #3a2f22;
-    --color-muted-foreground: #a89878;
-
-    /* Surfaces */
-    --color-background: #1a1410;
-    --color-foreground: #e8dcc8;
-    --color-card: #2a2118;
-    --color-card-foreground: #e8dcc8;
-    --color-surface: #2a2118;
-
-    /* Borders & Inputs */
-    --color-border: #5a4a36;
-    --color-input: #3a2f22;
-    --color-ring: #c9a84c;
-
-    /* Semantic colors — warmed to match parchment palette */
-    --color-error: #a03030;
-    --color-error-foreground: #e8dcc8;
-    --color-success: #2a6a2a;
-    --color-success-foreground: #e8dcc8;
-    --color-warning: #d97706;
-    --color-warning-foreground: #1a1410;
-    --color-info: #0d6a63;
-    --color-info-foreground: #e8dcc8;
-
-    /* ======================================================================
-     * GAME-SPECIFIC TOKENS (extend the base theme system)
-     * ====================================================================== */
-
-    /* Gold hierarchy (bright → dim) */
-    --tw-gold: #eab308;
-    --tw-gold-mid: #c9a84c;
-    --tw-gold-dim: #8a7340;
-    --tw-gold-dark: #5a4a36;
-
-    /* Parchment text hierarchy (bright → dim) */
-    --tw-text-primary: #e8dcc8;
-    --tw-text-secondary: #b8a88c;
-    --tw-text-dim: #7a6a50;
-
-    /* Surface hierarchy (light → dark) */
-    --tw-surface-elevated: #3a2f22;
-    --tw-surface-hover: #4a3d2e;
-
-    /* Faction: Resonator (player) */
+    --tw-gold: #9e7e1e;
+    --tw-gold-mid: #b8940f;
+    --tw-gold-dim: #d4c4a8;
+    --tw-gold-dark: #e6dbc4;
+    --tw-text-primary: #2a1f14;
+    --tw-text-secondary: #5a4a36;
+    --tw-text-dim: #8a7a60;
+    --tw-surface-elevated: #f0e8d8;
+    --tw-surface-hover: #e6dbc4;
     --tw-faction-resonator: #7c3aed;
-    --tw-faction-resonator-glow: rgba(124, 58, 237, 0.3);
-
-    /* Faction: Dominion (enemy) */
+    --tw-faction-resonator-glow: rgba(124, 58, 237, 0.15);
     --tw-faction-dominion: #b91c1c;
-    --tw-faction-dominion-glow: rgba(185, 28, 28, 0.3);
-
-    /* Faction: Neutral */
+    --tw-faction-dominion-glow: rgba(185, 28, 28, 0.15);
     --tw-faction-neutral: #78716c;
-
-    /* Tier colors (bronze → illuminated) */
-    --tw-tier-1: #8B7355;
-    --tw-tier-2: #A8A8A8;
-    --tw-tier-3: #c9a84c;
-    --tw-tier-4: #eab308;
-
-    /* Combat */
-    --tw-health: #c04040;
-    --tw-health-bg: rgba(192, 64, 64, 0.2);
-    --tw-heal: #4a9e4a;
-    --tw-heal-bg: rgba(74, 158, 74, 0.2);
-    --tw-mana: #7c5cbf;
-    --tw-mana-bg: rgba(124, 92, 191, 0.2);
-
-    /* ======================================================================
-     * TYPOGRAPHY
-     * ====================================================================== */
-    --font-family:
-        "Cinzel", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
+    --tw-tier-1: #7a6340;
+    --tw-tier-2: #808080;
+    --tw-tier-3: #9e7e1e;
+    --tw-tier-4: #b8940f;
+    --tw-health: #b91c1c;
+    --tw-health-bg: rgba(185, 28, 28, 0.1);
+    --tw-heal: #15803d;
+    --tw-heal-bg: rgba(21, 128, 61, 0.1);
+    --tw-mana: #6d28d9;
+    --tw-mana-bg: rgba(109, 40, 217, 0.1);
+    --font-family: "Cinzel", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
     --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-bold: 700;
     --letter-spacing: 0.01em;
     --line-height: 1.5;
-
-    /* Icon styling — gold tint */
-    --icon-stroke-width: 1.75;
-    --icon-color: #c9a84c;
-
-    /* Transitions — slightly slower for gravitas */
+    --icon-color: #9e7e1e;
     --transition-fast: 150ms;
     --transition-normal: 300ms;
     --transition-slow: 500ms;
     --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
-
-    /* Hover/Active transforms — subtle, dignified */
     --hover-scale: 1.01;
     --hover-translate-y: -1px;
     --hover-translate-x: 0;
     --active-scale: 0.99;
     --active-translate-y: 0;
-
-    /* Focus ring — gold */
     --focus-ring-width: 2px;
     --focus-ring-offset: 2px;
-    --focus-ring-color: #c9a84c;
-
-    /* Layer 1 — backfill (preserves current visual output, see themes/_contract.md) */
-    /* Density axis — spacing scale */
+    --focus-ring-color: #9e7e1e;
+    --shadow-main: 0 4px 14px rgba(139, 115, 85, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06);
+    --shadow-sm: 0 2px 4px rgba(139, 115, 85, 0.08);
+    --shadow-lg: 0 8px 30px rgba(139, 115, 85, 0.16), 0 4px 10px rgba(0, 0, 0, 0.06);
+    --shadow-inner: inset 0 1px 3px rgba(0, 0, 0, 0.08);
+    --shadow-none: none;
+    --shadow-hover: 0 12px 40px rgba(139, 115, 85, 0.20), 0 4px 12px rgba(201, 168, 76, 0.10);
+    --shadow-active: 0 2px 8px rgba(139, 115, 85, 0.12);
     --space-0: 0px;
     --space-1: 4px;
     --space-2: 8px;
@@ -177,7 +103,6 @@
     --space-10: 40px;
     --space-11: 44px;
     --space-12: 48px;
-    /* Density axis — per-element heights */
     --button-height-sm: 28px;
     --button-height-md: 36px;
     --button-height-lg: 44px;
@@ -187,17 +112,14 @@
     --row-height-compact: 32px;
     --row-height-normal: 40px;
     --row-height-spacious: 48px;
-    /* Density axis — per-element padding */
     --card-padding-sm: 12px;
     --card-padding-md: 16px;
     --card-padding-lg: 24px;
     --dialog-padding: 24px;
     --section-gap: 32px;
-    /* Type axis — family triplet */
     --font-family-display: var(--font-family);
     --font-family-body: var(--font-family);
     --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-    /* Type axis — size scale */
     --text-xs: 12px;
     --leading-xs: 16px;
     --text-sm: 14px;
@@ -218,7 +140,6 @@
     --leading-display-1: 52px;
     --text-display-2: 60px;
     --leading-display-2: 64px;
-    /* Type axis — intent mapping */
     --intent-heading-major-size: var(--text-2xl);
     --intent-heading-major-weight: var(--font-weight-bold);
     --intent-heading-major-leading: var(--leading-2xl);
@@ -240,191 +161,116 @@
     --intent-numeric-size: var(--text-sm);
     --intent-numeric-weight: var(--font-weight-medium);
     --intent-numeric-leading: var(--leading-sm);
-    /* Motion axis — duration palette */
     --duration-instant: 0ms;
     --duration-fast: var(--transition-fast);
     --duration-normal: var(--transition-normal);
     --duration-slow: var(--transition-slow);
     --duration-dramatic: 600ms;
-    /* Motion axis — easing palette */
     --easing-linear: linear;
     --easing-standard: var(--transition-timing);
     --easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
     --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
-    /* Iconography axis */
     --icon-family: lucide;
+    --icon-stroke-width: 1.75;
     --icon-default-size: 16px;
-    /* Elevation axis — per-layer mapping */
     --elevation-card: var(--shadow-sm);
     --elevation-popover: var(--shadow-main);
     --elevation-dialog: var(--shadow-lg);
     --elevation-toast: var(--shadow-main);
-    /* Geometry axis — radius rhythm with intent */
     --radius-container: var(--radius-md);
     --radius-interactive: var(--radius-md);
     --radius-pill: var(--radius-full);
-    /* Geometry axis — border-width rhythm */
     --border-hairline: 1px;
     --border-standard: var(--border-width);
     --border-heavy: var(--border-width-thick);
 }
 
-/* ==========================================================================
- * LIGHT MODE — "Sunlit Manuscript"
- *
- * Warm parchment surfaces, dark-ink text, gold accents retained.
- * Surface hierarchy (lightest → darkest):
- *   background → card/surface → elevated (hover) → muted
- * ========================================================================== */
-[data-theme="trait-wars-light"] {
-    /* Shadows — warm sepia */
-    --shadow-main:
-        0 4px 14px rgba(139, 115, 85, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06);
-    --shadow-sm: 0 2px 4px rgba(139, 115, 85, 0.08);
-    --shadow-lg:
-        0 8px 30px rgba(139, 115, 85, 0.16), 0 4px 10px rgba(0, 0, 0, 0.06);
-    --shadow-inner: inset 0 1px 3px rgba(0, 0, 0, 0.08);
-    --shadow-none: none;
-    --shadow-hover:
-        0 12px 40px rgba(139, 115, 85, 0.20), 0 4px 12px rgba(201, 168, 76, 0.10);
-    --shadow-active: 0 2px 8px rgba(139, 115, 85, 0.12);
-
-    /* Border radius — same as dark */
+[data-theme="trait-wars-dark"] {
+    --color-primary: #c9a84c;
+    --color-primary-hover: #eab308;
+    --color-primary-foreground: #1a1410;
+    --color-secondary: #2a2118;
+    --color-secondary-hover: #3a2f22;
+    --color-secondary-foreground: #e8dcc8;
+    --color-accent: #14b8a6;
+    --color-accent-foreground: #042f2e;
+    --color-muted: #3a2f22;
+    --color-muted-foreground: #a89878;
+    --color-background: #1a1410;
+    --color-foreground: #e8dcc8;
+    --color-card: #2a2118;
+    --color-card-foreground: #e8dcc8;
+    --color-surface: #2a2118;
+    --color-border: #5a4a36;
+    --color-input: #3a2f22;
+    --color-ring: #c9a84c;
+    --color-error: #a03030;
+    --color-error-foreground: #e8dcc8;
+    --color-success: #2a6a2a;
+    --color-success-foreground: #e8dcc8;
+    --color-warning: #d97706;
+    --color-warning-foreground: #1a1410;
+    --color-info: #0d6a63;
+    --color-info-foreground: #e8dcc8;
     --radius-none: 0px;
     --radius-sm: 4px;
     --radius-md: 6px;
     --radius-lg: 8px;
     --radius-xl: 12px;
     --radius-full: 9999px;
-
-    /* Border width */
     --border-width: 1px;
     --border-width-thin: 1px;
     --border-width-thick: 2px;
-
-    /* ======================================================================
-     * CORE COLORS
-     * ====================================================================== */
-
-    /* Primary — Deep gold (darker for contrast on light surfaces) */
-    --color-primary: #785c12;
-    --color-primary-hover: #5c4a0d;
-    --color-primary-foreground: #faf6ee;
-
-    /* Secondary — Light parchment */
-    --color-secondary: #f0e8d8;
-    --color-secondary-hover: #e6dbc4;
-    --color-secondary-foreground: #3a2f22;
-
-    /* Accent — Teal resonance (same hue, darker for contrast) */
-    --color-accent: #0f766e;
-    --color-accent-foreground: #faf6ee;
-
-    /* Muted — Faded parchment */
-    --color-muted: #ede4d0;
-    --color-muted-foreground: #6e5f46;
-
-    /* Surfaces — warm parchment hierarchy */
-    --color-background: #faf6ee;
-    --color-foreground: #2a1f14;
-    --color-card: #ffffff;
-    --color-card-foreground: #2a1f14;
-    --color-surface: #f5efe3;
-
-    /* Borders & Inputs */
-    --color-border: #d4c4a8;
-    --color-input: #e6dbc4;
-    --color-ring: #9e7e1e;
-
-    /* Semantic colors — warm-shifted for parchment */
-    --color-error: #b91c1c;
-    --color-error-foreground: #faf6ee;
-    --color-success: #15803d;
-    --color-success-foreground: #faf6ee;
-    --color-warning: #d97706;
-    --color-warning-foreground: #2a1f14;
-    --color-info: #0f766e;
-    --color-info-foreground: #faf6ee;
-
-    /* ======================================================================
-     * GAME-SPECIFIC TOKENS
-     * ====================================================================== */
-
-    /* Gold hierarchy (dark → light for light mode) */
-    --tw-gold: #9e7e1e;
-    --tw-gold-mid: #b8940f;
-    --tw-gold-dim: #d4c4a8;
-    --tw-gold-dark: #e6dbc4;
-
-    /* Text hierarchy (dark → light) */
-    --tw-text-primary: #2a1f14;
-    --tw-text-secondary: #5a4a36;
-    --tw-text-dim: #8a7a60;
-
-    /* Surface hierarchy (dark → light) */
-    --tw-surface-elevated: #f0e8d8;
-    --tw-surface-hover: #e6dbc4;
-
-    /* Faction: Resonator (player) */
+    --tw-gold: #eab308;
+    --tw-gold-mid: #c9a84c;
+    --tw-gold-dim: #8a7340;
+    --tw-gold-dark: #5a4a36;
+    --tw-text-primary: #e8dcc8;
+    --tw-text-secondary: #b8a88c;
+    --tw-text-dim: #7a6a50;
+    --tw-surface-elevated: #3a2f22;
+    --tw-surface-hover: #4a3d2e;
     --tw-faction-resonator: #7c3aed;
-    --tw-faction-resonator-glow: rgba(124, 58, 237, 0.15);
-
-    /* Faction: Dominion (enemy) */
+    --tw-faction-resonator-glow: rgba(124, 58, 237, 0.3);
     --tw-faction-dominion: #b91c1c;
-    --tw-faction-dominion-glow: rgba(185, 28, 28, 0.15);
-
-    /* Faction: Neutral */
+    --tw-faction-dominion-glow: rgba(185, 28, 28, 0.3);
     --tw-faction-neutral: #78716c;
-
-    /* Tier colors — slightly darker for light bg contrast */
-    --tw-tier-1: #7a6340;
-    --tw-tier-2: #808080;
-    --tw-tier-3: #9e7e1e;
-    --tw-tier-4: #b8940f;
-
-    /* Combat */
-    --tw-health: #b91c1c;
-    --tw-health-bg: rgba(185, 28, 28, 0.1);
-    --tw-heal: #15803d;
-    --tw-heal-bg: rgba(21, 128, 61, 0.1);
-    --tw-mana: #6d28d9;
-    --tw-mana-bg: rgba(109, 40, 217, 0.1);
-
-    /* ======================================================================
-     * TYPOGRAPHY
-     * ====================================================================== */
-    --font-family:
-        "Cinzel", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
+    --tw-tier-1: #8B7355;
+    --tw-tier-2: #A8A8A8;
+    --tw-tier-3: #c9a84c;
+    --tw-tier-4: #eab308;
+    --tw-health: #c04040;
+    --tw-health-bg: rgba(192, 64, 64, 0.2);
+    --tw-heal: #4a9e4a;
+    --tw-heal-bg: rgba(74, 158, 74, 0.2);
+    --tw-mana: #7c5cbf;
+    --tw-mana-bg: rgba(124, 92, 191, 0.2);
+    --font-family: "Cinzel", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
     --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-bold: 700;
     --letter-spacing: 0.01em;
     --line-height: 1.5;
-
-    /* Icon styling — dark gold */
-    --icon-stroke-width: 1.75;
-    --icon-color: #9e7e1e;
-
-    /* Transitions */
+    --icon-color: #c9a84c;
     --transition-fast: 150ms;
     --transition-normal: 300ms;
     --transition-slow: 500ms;
     --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
-
-    /* Hover/Active transforms */
     --hover-scale: 1.01;
     --hover-translate-y: -1px;
     --hover-translate-x: 0;
     --active-scale: 0.99;
     --active-translate-y: 0;
-
-    /* Focus ring — gold */
     --focus-ring-width: 2px;
     --focus-ring-offset: 2px;
-    --focus-ring-color: #9e7e1e;
-
-    /* Layer 1 — backfill (preserves current visual output, see themes/_contract.md) */
-    /* Density axis — spacing scale */
+    --focus-ring-color: #c9a84c;
+    --shadow-main: 0 4px 14px rgba(201, 168, 76, 0.10), 0 1px 3px rgba(0, 0, 0, 0.20);
+    --shadow-sm: 0 2px 4px rgba(201, 168, 76, 0.06);
+    --shadow-lg: 0 8px 30px rgba(201, 168, 76, 0.15), 0 4px 10px rgba(0, 0, 0, 0.15);
+    --shadow-inner: inset 0 1px 3px rgba(0, 0, 0, 0.25);
+    --shadow-none: none;
+    --shadow-hover: 0 12px 40px rgba(201, 168, 76, 0.20), 0 4px 12px rgba(234, 179, 8, 0.10);
+    --shadow-active: 0 2px 8px rgba(201, 168, 76, 0.15);
     --space-0: 0px;
     --space-1: 4px;
     --space-2: 8px;
@@ -438,7 +284,6 @@
     --space-10: 40px;
     --space-11: 44px;
     --space-12: 48px;
-    /* Density axis — per-element heights */
     --button-height-sm: 28px;
     --button-height-md: 36px;
     --button-height-lg: 44px;
@@ -448,17 +293,14 @@
     --row-height-compact: 32px;
     --row-height-normal: 40px;
     --row-height-spacious: 48px;
-    /* Density axis — per-element padding */
     --card-padding-sm: 12px;
     --card-padding-md: 16px;
     --card-padding-lg: 24px;
     --dialog-padding: 24px;
     --section-gap: 32px;
-    /* Type axis — family triplet */
     --font-family-display: var(--font-family);
     --font-family-body: var(--font-family);
     --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-    /* Type axis — size scale */
     --text-xs: 12px;
     --leading-xs: 16px;
     --text-sm: 14px;
@@ -479,7 +321,6 @@
     --leading-display-1: 52px;
     --text-display-2: 60px;
     --leading-display-2: 64px;
-    /* Type axis — intent mapping */
     --intent-heading-major-size: var(--text-2xl);
     --intent-heading-major-weight: var(--font-weight-bold);
     --intent-heading-major-leading: var(--leading-2xl);
@@ -501,30 +342,25 @@
     --intent-numeric-size: var(--text-sm);
     --intent-numeric-weight: var(--font-weight-medium);
     --intent-numeric-leading: var(--leading-sm);
-    /* Motion axis — duration palette */
     --duration-instant: 0ms;
     --duration-fast: var(--transition-fast);
     --duration-normal: var(--transition-normal);
     --duration-slow: var(--transition-slow);
     --duration-dramatic: 600ms;
-    /* Motion axis — easing palette */
     --easing-linear: linear;
     --easing-standard: var(--transition-timing);
     --easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
     --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
-    /* Iconography axis */
     --icon-family: lucide;
+    --icon-stroke-width: 1.75;
     --icon-default-size: 16px;
-    /* Elevation axis — per-layer mapping */
     --elevation-card: var(--shadow-sm);
     --elevation-popover: var(--shadow-main);
     --elevation-dialog: var(--shadow-lg);
     --elevation-toast: var(--shadow-main);
-    /* Geometry axis — radius rhythm with intent */
     --radius-container: var(--radius-md);
     --radius-interactive: var(--radius-md);
     --radius-pill: var(--radius-full);
-    /* Geometry axis — border-width rhythm */
     --border-hairline: 1px;
     --border-standard: var(--border-width);
     --border-heavy: var(--border-width-thick);