@cascivo/themes 0.1.0 → 0.2.0

package/README.md

@@ -2,7 +2,7 @@
 
 # @cascivo/themes
 
-> First-party cascade themes: light, dark, warm, flat, minimal, midnight, pastel, brutalist, corporate, terminal
+> First-party cascivo themes: light, dark, warm, flat, minimal, midnight, pastel, brutalist, corporate, terminal
 
 [cascivo.com](https://cascivo.com) · [Docs](https://docs.cascivo.com) · [Storybook](https://storybook.cascivo.com) · [GitHub](https://github.com/urbanisierung/cascivo)
 

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@cascivo/themes",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": false,
-  "description": "First-party cascade themes: light, dark, warm, flat, minimal, midnight, pastel, brutalist, corporate, terminal",
+  "description": "First-party cascivo themes: light, dark, warm, flat, minimal, midnight, pastel, brutalist, corporate, terminal",
   "keywords": [
     "cascivo",
     "css",
@@ -27,16 +27,30 @@
     "!src/**/*.test.ts"
   ],
   "exports": {
+    "./all": "./src/all.css",
+    "./all.css": "./src/all.css",
+    "./base": "./src/base.css",
+    "./base.css": "./src/base.css",
     "./light": "./src/light.css",
+    "./light.css": "./src/light.css",
     "./dark": "./src/dark.css",
+    "./dark.css": "./src/dark.css",
     "./warm": "./src/warm.css",
+    "./warm.css": "./src/warm.css",
     "./flat": "./src/flat.css",
+    "./flat.css": "./src/flat.css",
     "./minimal": "./src/minimal.css",
+    "./minimal.css": "./src/minimal.css",
     "./midnight": "./src/midnight.css",
+    "./midnight.css": "./src/midnight.css",
     "./pastel": "./src/pastel.css",
+    "./pastel.css": "./src/pastel.css",
     "./brutalist": "./src/brutalist.css",
+    "./brutalist.css": "./src/brutalist.css",
     "./corporate": "./src/corporate.css",
-    "./terminal": "./src/terminal.css"
+    "./corporate.css": "./src/corporate.css",
+    "./terminal": "./src/terminal.css",
+    "./terminal.css": "./src/terminal.css"
   },
   "publishConfig": {
     "access": "public",
@@ -45,8 +59,8 @@
   "devDependencies": {
     "@types/node": "^25",
     "typescript": "^5",
-    "vite-plus": "^0.1.24",
-    "@cascivo/tokens": "0.1.0"
+    "vite-plus": "^0.2.1",
+    "@cascivo/tokens": "0.2.0"
   },
   "peerDependencies": {
     "@cascivo/tokens": ">=0.0.0"

package/src/all.css

@@ -0,0 +1,18 @@
+/* cascivo — All-in-one theming bundle */
+/* The single-import path for the common light + dark setup (#3):
+
+     @import '@cascivo/themes/all';
+
+   It loads @cascivo/tokens exactly ONCE (here), then the base layer, then the
+   light and dark themes (each scoped by [data-theme]). The per-theme files
+   below also self-import @cascivo/tokens for standalone use; bundlers and
+   browsers dedupe the identical @import URL, so tokens are still emitted once.
+
+   Layer order (first appearance, lowest → highest priority):
+     cascivo.tokens  <  cascivo.base  <  cascivo.theme  ( <  cascivo.component )
+   Component CSS (@cascivo/react/styles.css) adds cascivo.component on top. */
+
+@import '@cascivo/tokens';
+@import './base.css';
+@import './light.css';
+@import './dark.css';

package/src/base.css

@@ -0,0 +1,23 @@
+/* cascivo — Base Layer */
+/* The one rule that activates the shipped font token (#6): applies
+   --cascivo-font-sans + a sane line-height/color/background to the document
+   root so plain consumer markup (headings, raw text, prose pages) renders in
+   the sans stack instead of falling back to the browser serif default.
+
+   This is NOT a full reset — it is the minimal base every consumer who imports
+   a theme should get for free. It lives in @layer cascivo.base, which sits
+   BELOW cascivo.theme and cascivo.component, so themes and components (and any
+   unlayered consumer CSS) always win.
+
+   Uses the canonical color tokens (foreground/background). Those are defined by
+   the themes, and --cascivo-font-sans by @cascivo/tokens; pair this with a theme
+   (or import @cascivo/themes/all). */
+
+@layer cascivo.base {
+  html {
+    font-family: var(--cascivo-font-sans);
+    line-height: var(--cascivo-leading-normal, 1.5);
+    color: var(--cascivo-color-foreground);
+    background-color: var(--cascivo-color-background);
+  }
+}

package/src/brutalist.css

@@ -1,9 +1,9 @@
-/* Cascade — Brutalist Theme */
+/* cascivo — Brutalist Theme */
 /* Neo-brutalism: cream background, zero radius, thick borders, hard offset shadows */
 
 @import '@cascivo/tokens';
 
-@layer cascade.theme {
+@layer cascivo.theme {
   [data-theme='brutalist'] {
     color-scheme: light;
 
@@ -60,6 +60,7 @@
     --cascivo-color-info-subtle: oklch(0.95 0.05 250);
     --cascivo-color-success-foreground: oklch(0.52 0.18 145);
     --cascivo-color-warning-foreground: oklch(0.5 0.15 75);
+    --cascivo-color-destructive-foreground: oklch(0.4 0.2 22);
 
     /* ── Radius — zero ───────────────────────────────── */
     --cascivo-radius-base: 0;

package/src/corporate.css

@@ -1,9 +1,9 @@
-/* Cascade — Corporate Theme */
+/* cascivo — Corporate Theme */
 /* Enterprise/data-dense, crisp 2px radius, conservative blue, tight hairlines */
 
 @import '@cascivo/tokens';
 
-@layer cascade.theme {
+@layer cascivo.theme {
   [data-theme='corporate'] {
     color-scheme: light;
 
@@ -60,6 +60,7 @@
     --cascivo-color-info-subtle: oklch(0.95 0.03 255);
     --cascivo-color-success-foreground: oklch(0.45 0.14 145);
     --cascivo-color-warning-foreground: oklch(0.5 0.13 75);
+    --cascivo-color-destructive-foreground: oklch(0.448 0.17 22);
 
     /* ── Radius — 2px ────────────────────────────────── */
     --cascivo-radius-base: 0.125rem;

package/src/dark.css

@@ -1,9 +1,10 @@
-/* Cascade — Dark Theme */
+/* cascivo — Dark Theme */
 /* Bold/editorial, high contrast, developer-cool */
 
+/* Self-imports tokens for standalone use; deduped by URL when combined (see ./all.css). */
 @import '@cascivo/tokens';
 
-@layer cascade.theme {
+@layer cascivo.theme {
   [data-theme='dark'] {
     color-scheme: dark;
 
@@ -54,6 +55,7 @@
     /* Foreground-safe variants: bright for text on dark backgrounds (WCAG AA ≥4.5:1) */
     --cascivo-color-success-foreground: oklch(0.72 0.13 145);
     --cascivo-color-warning-foreground: oklch(0.82 0.13 75);
+    --cascivo-color-destructive-foreground: oklch(0.85 0.12 22);
 
     /* ── Primary — inverted monochrome ── */
     --cascivo-color-primary: oklch(0.922 0 0);

package/src/flat.css

@@ -1,9 +1,9 @@
-/* Cascade — Flat Theme */
+/* cascivo — Flat Theme */
 /* Zero shadows, zero radius, high-contrast borders, vivid green accent */
 
 @import '@cascivo/tokens';
 
-@layer cascade.theme {
+@layer cascivo.theme {
   [data-theme='flat'] {
     color-scheme: light;
 
@@ -84,6 +84,7 @@
     --cascivo-color-info-subtle: oklch(0.95 0.04 250);
     --cascivo-color-success-foreground: oklch(0.52 0.18 145);
     --cascivo-color-warning-foreground: oklch(0.5 0.14 75);
+    --cascivo-color-destructive-foreground: oklch(0.42 0.19 22);
 
     --cascivo-radius-component: 0;
     --cascivo-radius-button: 0;

package/src/light.css

@@ -1,9 +1,10 @@
-/* Cascade — Light Theme */
+/* cascivo — Light Theme */
 /* Minimal/sharp, neutral grays, clean lines */
 
+/* Self-imports tokens for standalone use; deduped by URL when combined (see ./all.css). */
 @import '@cascivo/tokens';
 
-@layer cascade.theme {
+@layer cascivo.theme {
   [data-theme='light'],
   :root:not([data-theme]) {
     color-scheme: light;
@@ -64,6 +65,7 @@
     /* Foreground-safe variants: darker for text on light backgrounds (WCAG AA ≥4.5:1) */
     --cascivo-color-success-foreground: oklch(0.45 0.14 145);
     --cascivo-color-warning-foreground: oklch(0.5 0.14 75);
+    --cascivo-color-destructive-foreground: oklch(0.448 0.17 22);
 
     /* ── Radius — one knob; semantic scale derives in tokens ── */
     --cascivo-radius-base: 0.375rem; /* 6px */

package/src/midnight.css

@@ -1,9 +1,9 @@
-/* Cascade — Midnight Theme */
+/* cascivo — Midnight Theme */
 /* Premium dark, deep indigo-black, violet accent, soft colored glow */
 
 @import '@cascivo/tokens';
 
-@layer cascade.theme {
+@layer cascivo.theme {
   [data-theme='midnight'] {
     color-scheme: dark;
 
@@ -60,6 +60,7 @@
     --cascivo-color-info-subtle: oklch(0.7 0.22 290 / 0.1);
     --cascivo-color-success-foreground: oklch(0.72 0.13 145);
     --cascivo-color-warning-foreground: oklch(0.82 0.13 75);
+    --cascivo-color-destructive-foreground: oklch(0.85 0.12 22);
 
     /* ── Radius — 10px ───────────────────────────────── */
     --cascivo-radius-base: 0.625rem;

package/src/minimal.css

@@ -1,9 +1,9 @@
-/* Cascade — Minimal Theme */
+/* cascivo — Minimal Theme */
 /* Very subtle shadows, rounder radius, near-invisible borders, monochrome accent */
 
 @import '@cascivo/tokens';
 
-@layer cascade.theme {
+@layer cascivo.theme {
   [data-theme='minimal'] {
     color-scheme: light;
 
@@ -84,6 +84,7 @@
     --cascivo-color-info-subtle: oklch(0.96 0.025 250);
     --cascivo-color-success-foreground: oklch(0.45 0.13 145);
     --cascivo-color-warning-foreground: oklch(0.5 0.12 75);
+    --cascivo-color-destructive-foreground: oklch(0.448 0.17 22);
 
     --cascivo-radius-component: var(--cascivo-radius-base);
     --cascivo-radius-button: var(--cascivo-radius-base);

package/src/pastel.css

@@ -1,9 +1,9 @@
-/* Cascade — Pastel Theme */
+/* cascivo — Pastel Theme */
 /* Playful/consumer, soft candy palette, pill controls, diffuse shadows */
 
 @import '@cascivo/tokens';
 
-@layer cascade.theme {
+@layer cascivo.theme {
   [data-theme='pastel'] {
     color-scheme: light;
 
@@ -60,6 +60,7 @@
     --cascivo-color-info-subtle: oklch(0.96 0.04 350);
     --cascivo-color-success-foreground: oklch(0.46 0.13 165);
     --cascivo-color-warning-foreground: oklch(0.5 0.13 75);
+    --cascivo-color-destructive-foreground: oklch(0.448 0.17 22);
 
     /* ── Radius — 16px pill ──────────────────────────── */
     --cascivo-radius-base: 1rem;

package/src/terminal.css

@@ -1,9 +1,9 @@
-/* Cascade — Terminal Theme */
+/* cascivo — Terminal Theme */
 /* Developer/CLI, phosphor green on near-black, zero radius, green glow */
 
 @import '@cascivo/tokens';
 
-@layer cascade.theme {
+@layer cascivo.theme {
   [data-theme='terminal'] {
     color-scheme: dark;
 
@@ -60,6 +60,7 @@
     --cascivo-color-info-subtle: oklch(0.82 0.2 145 / 0.1);
     --cascivo-color-success-foreground: oklch(0.82 0.2 145);
     --cascivo-color-warning-foreground: oklch(0.82 0.16 75);
+    --cascivo-color-destructive-foreground: oklch(0.82 0.15 22);
 
     /* ── Radius — zero ───────────────────────────────── */
     --cascivo-radius-base: 0;

package/src/warm.css

@@ -1,9 +1,9 @@
-/* Cascade — Warm Theme */
+/* cascivo — Warm Theme */
 /* Organic/approachable, warm neutrals, rounded */
 
 @import '@cascivo/tokens';
 
-@layer cascade.theme {
+@layer cascivo.theme {
   [data-theme='warm'] {
     color-scheme: light;
 
@@ -60,6 +60,7 @@
     --cascivo-color-info-subtle: var(--cascivo-blue-50);
     --cascivo-color-success-foreground: oklch(0.45 0.14 145);
     --cascivo-color-warning-foreground: oklch(0.5 0.14 75);
+    --cascivo-color-destructive-foreground: oklch(0.448 0.17 22);
 
     /* ── Radius — one knob, warmer = rounder (8px) ────── */
     --cascivo-radius-base: 0.5rem;