@cascivo/themes 0.2.1 → 0.2.2

package/README.md

@@ -2,12 +2,16 @@
 
 # @cascivo/themes
 
-> First-party cascivo themes: light, dark, warm, flat, minimal, midnight, pastel, brutalist, corporate, terminal, cyberpunk
+> First-party cascivo themes: light, dark, warm, flat, minimal, midnight, pastel, brutalist, corporate, terminal, cyberpunk, arcade
 
 [cascivo.com](https://cascivo.com) · [Docs](https://docs.cascivo.com) · [Storybook](https://storybook.cascivo.com) · [GitHub](https://github.com/urbanisierung/cascivo)
 
 First-party themes for cascade — `light.css`, `dark.css`, `warm.css`, and more. Apply via `data-theme` on any container; themes override the semantic token layer only, leaving component and primitive tokens unchanged.
 
+## Per-theme fonts
+
+A theme can carry its own **display** (headline/brand) face via `--cascivo-font-display`. The token defaults to `var(--cascivo-font-sans)` (so themes that don't override it look unchanged) and is declared in every theme to keep token parity. The `Heading` component renders in the display face, so an override is visible wherever headings appear — e.g. `terminal` maps it to the mono stack and `brutalist` to a heavy grotesk. `--cascivo-font-sans`/`-mono` remain the global body/code defaults.
+
 ## Install
 
 ```sh

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@cascivo/themes",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "private": false,
-  "description": "First-party cascivo themes: light, dark, warm, flat, minimal, midnight, pastel, brutalist, corporate, terminal, cyberpunk",
+  "description": "First-party cascivo themes: light, dark, warm, flat, minimal, midnight, pastel, brutalist, corporate, terminal, cyberpunk, arcade",
   "keywords": [
     "cascivo",
     "css",
@@ -52,7 +52,9 @@
     "./terminal": "./src/terminal.css",
     "./terminal.css": "./src/terminal.css",
     "./cyberpunk": "./src/cyberpunk.css",
-    "./cyberpunk.css": "./src/cyberpunk.css"
+    "./cyberpunk.css": "./src/cyberpunk.css",
+    "./arcade": "./src/arcade.css",
+    "./arcade.css": "./src/arcade.css"
   },
   "publishConfig": {
     "access": "public",

package/readme.body.md

@@ -1 +1,5 @@
 First-party themes for cascade — `light.css`, `dark.css`, `warm.css`, and more. Apply via `data-theme` on any container; themes override the semantic token layer only, leaving component and primitive tokens unchanged.
+
+## Per-theme fonts
+
+A theme can carry its own **display** (headline/brand) face via `--cascivo-font-display`. The token defaults to `var(--cascivo-font-sans)` (so themes that don't override it look unchanged) and is declared in every theme to keep token parity. The `Heading` component renders in the display face, so an override is visible wherever headings appear — e.g. `terminal` maps it to the mono stack and `brutalist` to a heavy grotesk. `--cascivo-font-sans`/`-mono` remain the global body/code defaults.

package/src/arcade.css

@@ -0,0 +1,186 @@
+/* cascivo — Arcade Theme */
+/* 8-bit / pixel-arcade: bright cool paper, coin-op red, electric blue, zero radius, hard shadows, pixel display font */
+
+@import '@cascivo/tokens';
+
+@layer cascivo.theme {
+  [data-theme='arcade'] {
+    color-scheme: light;
+
+    /* ── Interaction state (HeroUI parity) ── */
+    --cascivo-disabled-opacity: 0.5;
+    --cascivo-hover-opacity: 0.8;
+
+    /* ── Typography — pixel display face ──────────── */
+    --cascivo-font-display: 'Press Start 2P', 'Courier New', ui-monospace, monospace;
+
+    /* ── Surface ──────────────────────────────────────── */
+    --cascivo-color-background: oklch(0.96 0.008 250);
+    --cascivo-color-surface: oklch(1 0 0);
+    --cascivo-color-surface-2: oklch(0.93 0.012 250);
+    --cascivo-color-bg: var(--cascivo-color-background);
+    --cascivo-color-bg-subtle: var(--cascivo-color-surface);
+    --cascivo-color-surface-raised: var(--cascivo-color-surface);
+    --cascivo-color-surface-overlay: oklch(1 0 0);
+    --cascivo-color-border: oklch(0.15 0.02 265);
+    --cascivo-color-border-strong: oklch(0.08 0.02 265);
+    --cascivo-border-subtle: oklch(0.32 0.02 265);
+    --cascivo-border-default: oklch(0.15 0.02 265);
+    --cascivo-border-strong: oklch(0.08 0.02 265);
+
+    /* ── Text ─────────────────────────────────────────── */
+    --cascivo-color-foreground: oklch(0.16 0.02 265);
+    --cascivo-color-foreground-muted: oklch(0.4 0.02 265);
+    --cascivo-color-text: var(--cascivo-color-foreground);
+    --cascivo-color-text-subtle: var(--cascivo-color-foreground-muted);
+    --cascivo-color-text-muted: oklch(0.52 0.02 265);
+    --cascivo-color-text-on-accent: oklch(0.98 0 0);
+    --cascivo-color-text-on-destructive: oklch(0.98 0 0);
+
+    /* ── Accent — coin-op red ─────────────────────────── */
+    --cascivo-color-accent: oklch(0.55 0.22 27);
+    --cascivo-color-accent-foreground: oklch(0.98 0 0);
+    --cascivo-color-accent-hover: oklch(0.49 0.23 27);
+    --cascivo-color-accent-active: oklch(0.44 0.23 27);
+    --cascivo-color-accent-subtle: oklch(0.55 0.22 27 / 0.12);
+    --cascivo-color-accent-muted: oklch(0.55 0.22 27 / 0.2);
+
+    /* ── Primary — accent-mapped ─────────────────────── */
+    --cascivo-color-primary: var(--cascivo-color-accent);
+    --cascivo-color-primary-fg: oklch(0.98 0 0);
+    --cascivo-color-primary-hover: var(--cascivo-color-accent-hover);
+    --cascivo-color-primary-active: var(--cascivo-color-accent-active);
+    --cascivo-color-active-bg: oklch(0.55 0.22 27 / 0.12);
+
+    /* ── Destructive ──────────────────────────────────── */
+    --cascivo-color-destructive: oklch(0.52 0.24 25);
+    --cascivo-color-destructive-hover: oklch(0.46 0.24 25);
+    --cascivo-color-destructive-subtle: oklch(0.95 0.05 25);
+
+    /* ── Semantic status colors ───────────────────────── */
+    --cascivo-color-error: oklch(0.52 0.24 25);
+    --cascivo-color-warning: oklch(0.68 0.17 75);
+    --cascivo-color-success: oklch(0.54 0.18 145);
+    --cascivo-color-success-subtle: oklch(0.95 0.05 145);
+    --cascivo-color-warning-subtle: oklch(0.96 0.06 75);
+    --cascivo-color-info: oklch(0.5 0.2 250);
+    --cascivo-color-info-subtle: oklch(0.95 0.05 250);
+    --cascivo-color-success-foreground: oklch(0.54 0.18 145);
+    --cascivo-color-warning-foreground: oklch(0.5 0.15 75);
+    --cascivo-color-destructive-foreground: oklch(0.42 0.22 25);
+
+    /* ── Radius — zero (pixel-blocky) ─────────────────── */
+    --cascivo-radius-base: 0;
+    --cascivo-radius-control: 0;
+    --cascivo-radius-surface: 0;
+    --cascivo-radius-indicator: 0;
+    --cascivo-radius-full: 0;
+    --cascivo-radius-component: 0;
+    --cascivo-radius-button: 0;
+    --cascivo-radius-input: 0;
+    --cascivo-radius-card: 0;
+    --cascivo-radius-badge: 0;
+    --cascivo-radius-modal: 0;
+
+    /* ── Shadows — hard offset, no blur ─────────────── */
+    --cascivo-shadow-xs: 1px 1px 0 oklch(0.15 0.02 265);
+    --cascivo-shadow-sm: 2px 2px 0 oklch(0.15 0.02 265);
+    --cascivo-shadow-md: 4px 4px 0 oklch(0.15 0.02 265);
+    --cascivo-shadow-overlay: 6px 6px 0 oklch(0.15 0.02 265);
+    --cascivo-shadow-lg: var(--cascivo-shadow-overlay);
+
+    /* ── Focus ring — electric blue ──────────────────── */
+    --cascivo-ring-width: 3px;
+    --cascivo-ring-offset: 2px;
+    --cascivo-ring-color: oklch(0.5 0.2 250);
+    --cascivo-color-focus-ring: oklch(0.5 0.2 250);
+    --cascivo-focus-ring: 0 0 0 var(--cascivo-ring-width) var(--cascivo-ring-color);
+
+    /* ── Chart overrides (CVD-safe ramp, reused from brutalist) ── */
+    --cascivo-chart-1: oklch(0.64 0.18 70);
+    --cascivo-chart-2: oklch(0.62 0.16 240);
+    --cascivo-chart-3: oklch(0.6 0.18 135);
+    --cascivo-chart-4: oklch(0.6 0.2 55);
+    --cascivo-chart-5: oklch(0.45 0.18 250);
+    --cascivo-chart-6: oklch(0.55 0.22 40);
+    --cascivo-chart-7: oklch(0.6 0.17 350);
+    --cascivo-chart-8: oklch(0.48 0.1 200);
+    --cascivo-chart-grid: oklch(0.72 0.005 250);
+    --cascivo-chart-axis: oklch(0.3 0.01 265);
+
+    /* ── -content tokens (foreground ≥4.5:1 on paired background) ── */
+    --cascivo-color-primary-content: var(--cascivo-color-primary-fg);
+    --cascivo-color-accent-content: var(--cascivo-color-text-on-accent);
+    --cascivo-color-destructive-content: var(--cascivo-color-text-on-destructive);
+    --cascivo-color-info-content: oklch(0.98 0 0);
+    --cascivo-color-success-content: oklch(0.98 0 0);
+    --cascivo-color-warning-content: oklch(0.145 0 0);
+    --cascivo-color-error-content: oklch(0.98 0 0);
+
+    /* ── Secondary color role — electric blue ────────── */
+    --cascivo-color-secondary: oklch(0.5 0.2 250);
+    --cascivo-color-secondary-content: oklch(0.98 0 0);
+    --cascivo-color-secondary-hover: oklch(0.44 0.21 250);
+    --cascivo-color-secondary-subtle: oklch(0.5 0.2 250 / 0.12);
+  }
+
+  /* ── Opt-in signature effects ───────────────────────── */
+  /* These never fire unless a consumer opts in via a marker class, so arbitrary */
+  /* components stay calm. Each declares its static look first, then layers the   */
+  /* animation as enhancement; all are disabled under prefers-reduced-motion.     */
+
+  /* Scanline / CRT overlay — dark lines for the light arcade base */
+  [data-theme='arcade'] .cascivo-arcade-scanline {
+    position: relative;
+  }
+  [data-theme='arcade'] .cascivo-arcade-scanline::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    pointer-events: none;
+    background: repeating-linear-gradient(
+      to bottom,
+      oklch(0.15 0.02 265 / 0.07) 0,
+      oklch(0.15 0.02 265 / 0.07) 1px,
+      transparent 1px,
+      transparent 3px
+    );
+    mix-blend-mode: multiply;
+    animation: cascivo-arcade-scanline 8s linear infinite;
+  }
+
+  /* Insert-coin blink — hard 8-bit on/off blink. Static look is fully lit
+     (the value used when the animation is unsupported or reduced-motion). */
+  [data-theme='arcade'] .cascivo-arcade-blink {
+    opacity: 1;
+    animation: cascivo-arcade-blink 1.06s steps(1, jump-end) infinite;
+  }
+
+  @keyframes cascivo-arcade-scanline {
+    from {
+      background-position-y: 0;
+    }
+    to {
+      background-position-y: 3px;
+    }
+  }
+
+  @keyframes cascivo-arcade-blink {
+    0%,
+    50% {
+      opacity: 1;
+    }
+    50.01%,
+    100% {
+      opacity: 0.15;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [data-theme='arcade'] .cascivo-arcade-scanline::after,
+    [data-theme='arcade'] .cascivo-arcade-blink {
+      animation: none;
+    }
+  }
+}

package/src/brutalist.css

@@ -7,6 +7,13 @@
   [data-theme='brutalist'] {
     color-scheme: light;
 
+    /* ── Interaction state (HeroUI parity) ── */
+    --cascivo-disabled-opacity: 0.6;
+    --cascivo-hover-opacity: 0.85;
+
+    /* ── Typography ───────────── */
+    --cascivo-font-display: 'Arial Black', 'Helvetica Neue', ui-sans-serif, sans-serif;
+
     /* ── Surface ──────────────────────────────────────── */
     --cascivo-color-background: oklch(0.97 0.02 95);
     --cascivo-color-surface: oklch(1 0 0);

package/src/corporate.css

@@ -7,6 +7,13 @@
   [data-theme='corporate'] {
     color-scheme: light;
 
+    /* ── Interaction state (HeroUI parity) ── */
+    --cascivo-disabled-opacity: 0.5;
+    --cascivo-hover-opacity: 0.8;
+
+    /* ── Typography ───────────── */
+    --cascivo-font-display: var(--cascivo-font-sans);
+
     /* ── Surface ──────────────────────────────────────── */
     --cascivo-color-background: oklch(0.99 0.003 250);
     --cascivo-color-surface: oklch(0.97 0.004 250);

package/src/cyberpunk.css

@@ -7,6 +7,13 @@
   [data-theme='cyberpunk'] {
     color-scheme: dark;
 
+    /* ── Interaction state (HeroUI parity) ── */
+    --cascivo-disabled-opacity: 0.55;
+    --cascivo-hover-opacity: 0.75;
+
+    /* ── Typography ───────────── */
+    --cascivo-font-display: var(--cascivo-font-sans);
+
     /* ── Surface ──────────────────────────────────────── */
     --cascivo-color-background: oklch(0.16 0.03 285);
     --cascivo-color-surface: oklch(0.2 0.035 285);

package/src/dark.css

@@ -8,6 +8,13 @@
   [data-theme='dark'] {
     color-scheme: dark;
 
+    /* ── Interaction state (HeroUI parity) ── */
+    --cascivo-disabled-opacity: 0.5;
+    --cascivo-hover-opacity: 0.8;
+
+    /* ── Typography ───────────── */
+    --cascivo-font-display: var(--cascivo-font-sans);
+
     /* ── Surface ──────────────────────────────────────── */
     --cascivo-color-background: oklch(0.145 0.005 250);
     --cascivo-color-surface: oklch(0.185 0.007 250);

package/src/flat.css

@@ -7,6 +7,13 @@
   [data-theme='flat'] {
     color-scheme: light;
 
+    /* ── Interaction state (HeroUI parity) ── */
+    --cascivo-disabled-opacity: 0.5;
+    --cascivo-hover-opacity: 0.8;
+
+    /* ── Typography ───────────── */
+    --cascivo-font-display: var(--cascivo-font-sans);
+
     /* ── Surface ──────────────────────────────────────── */
     --cascivo-color-background: oklch(1 0 0);
     --cascivo-color-surface: oklch(0.97 0 0);

package/src/light.css

@@ -9,6 +9,13 @@
   :root:not([data-theme]) {
     color-scheme: light;
 
+    /* ── Interaction state (HeroUI parity) ── */
+    --cascivo-disabled-opacity: 0.5;
+    --cascivo-hover-opacity: 0.8;
+
+    /* ── Typography ───────────── */
+    --cascivo-font-display: var(--cascivo-font-sans);
+
     /* ── Surface ──────────────────────────────────────── */
     --cascivo-color-background: oklch(1 0 0);
     --cascivo-color-surface: oklch(0.985 0.002 264);

package/src/midnight.css

@@ -7,6 +7,13 @@
   [data-theme='midnight'] {
     color-scheme: dark;
 
+    /* ── Interaction state (HeroUI parity) ── */
+    --cascivo-disabled-opacity: 0.5;
+    --cascivo-hover-opacity: 0.8;
+
+    /* ── Typography ───────────── */
+    --cascivo-font-display: var(--cascivo-font-sans);
+
     /* ── Surface ──────────────────────────────────────── */
     --cascivo-color-background: oklch(0.16 0.02 280);
     --cascivo-color-surface: oklch(0.2 0.025 280);

package/src/minimal.css

@@ -7,6 +7,13 @@
   [data-theme='minimal'] {
     color-scheme: light;
 
+    /* ── Interaction state (HeroUI parity) ── */
+    --cascivo-disabled-opacity: 0.5;
+    --cascivo-hover-opacity: 0.8;
+
+    /* ── Typography ───────────── */
+    --cascivo-font-display: var(--cascivo-font-sans);
+
     /* ── Surface — warm off-white ─────────────────────── */
     --cascivo-color-background: oklch(0.98 0.005 80);
     --cascivo-color-surface: oklch(0.965 0.006 80);

package/src/pastel.css

@@ -7,6 +7,13 @@
   [data-theme='pastel'] {
     color-scheme: light;
 
+    /* ── Interaction state (HeroUI parity) ── */
+    --cascivo-disabled-opacity: 0.5;
+    --cascivo-hover-opacity: 0.8;
+
+    /* ── Typography ───────────── */
+    --cascivo-font-display: var(--cascivo-font-sans);
+
     /* ── Surface ──────────────────────────────────────── */
     --cascivo-color-background: oklch(0.99 0.01 330);
     --cascivo-color-surface: oklch(0.975 0.013 330);

package/src/terminal.css

@@ -7,6 +7,13 @@
   [data-theme='terminal'] {
     color-scheme: dark;
 
+    /* ── Interaction state (HeroUI parity) ── */
+    --cascivo-disabled-opacity: 0.5;
+    --cascivo-hover-opacity: 0.75;
+
+    /* ── Typography ───────────── */
+    --cascivo-font-display: var(--cascivo-font-mono);
+
     /* ── Surface ──────────────────────────────────────── */
     --cascivo-color-background: oklch(0.17 0.01 150);
     --cascivo-color-surface: oklch(0.21 0.012 150);

package/src/warm.css

@@ -7,6 +7,13 @@
   [data-theme='warm'] {
     color-scheme: light;
 
+    /* ── Interaction state (HeroUI parity) ── */
+    --cascivo-disabled-opacity: 0.5;
+    --cascivo-hover-opacity: 0.8;
+
+    /* ── Typography ───────────── */
+    --cascivo-font-display: var(--cascivo-font-sans);
+
     /* ── Surface ──────────────────────────────────────── */
     --cascivo-color-background: oklch(0.995 0.006 80);
     --cascivo-color-surface: oklch(0.975 0.01 80);