@cascivo/themes 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +19 -0
  3. package/package.json +58 -0
  4. package/readme.body.md +1 -0
  5. package/src/brutalist.css +118 -0
  6. package/src/corporate.css +118 -0
  7. package/src/dark.css +119 -0
  8. package/src/flat.css +126 -0
  9. package/src/light.css +122 -0
  10. package/src/midnight.css +120 -0
  11. package/src/minimal.css +126 -0
  12. package/src/pastel.css +121 -0
  13. package/src/terminal.css +118 -0
  14. package/src/warm.css +119 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2024 urbanisierung
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in
13
+ all copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,19 @@
1
+ <!-- generated by scripts/readme/generate.ts — edit readme.body.md, not this file -->
2
+
3
+ # @cascivo/themes
4
+
5
+ > First-party cascade themes: light, dark, warm, flat, minimal, midnight, pastel, brutalist, corporate, terminal
6
+
7
+ [cascivo.com](https://cascivo.com) · [Docs](https://docs.cascivo.com) · [Storybook](https://storybook.cascivo.com) · [GitHub](https://github.com/urbanisierung/cascivo)
8
+
9
+ 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.
10
+
11
+ ## Install
12
+
13
+ ```sh
14
+ pnpm add @cascivo/themes
15
+ ```
16
+
17
+ ---
18
+
19
+ [cascivo.com](https://cascivo.com) · [Docs](https://docs.cascivo.com) · [Storybook](https://storybook.cascivo.com) · [GitHub](https://github.com/urbanisierung/cascivo) · AI agents: use [`@cascivo/mcp`](https://github.com/urbanisierung/cascivo/tree/main/packages/mcp) and [`registry.json`](https://github.com/urbanisierung/cascivo/blob/main/registry.json) · MIT
package/package.json ADDED
@@ -0,0 +1,58 @@
1
+ {
2
+ "name": "@cascivo/themes",
3
+ "version": "0.1.0",
4
+ "private": false,
5
+ "description": "First-party cascade themes: light, dark, warm, flat, minimal, midnight, pastel, brutalist, corporate, terminal",
6
+ "keywords": [
7
+ "cascivo",
8
+ "css",
9
+ "css-theme",
10
+ "dark-mode",
11
+ "design-system",
12
+ "react",
13
+ "signals",
14
+ "theme"
15
+ ],
16
+ "homepage": "https://github.com/urbanisierung/cascivo/tree/main/packages/themes#readme",
17
+ "bugs": "https://github.com/urbanisierung/cascivo/issues",
18
+ "license": "MIT",
19
+ "author": "urbanisierung",
20
+ "repository": {
21
+ "type": "git",
22
+ "url": "git+https://github.com/urbanisierung/cascivo.git",
23
+ "directory": "packages/themes"
24
+ },
25
+ "files": [
26
+ "src/**/*.css",
27
+ "!src/**/*.test.ts"
28
+ ],
29
+ "exports": {
30
+ "./light": "./src/light.css",
31
+ "./dark": "./src/dark.css",
32
+ "./warm": "./src/warm.css",
33
+ "./flat": "./src/flat.css",
34
+ "./minimal": "./src/minimal.css",
35
+ "./midnight": "./src/midnight.css",
36
+ "./pastel": "./src/pastel.css",
37
+ "./brutalist": "./src/brutalist.css",
38
+ "./corporate": "./src/corporate.css",
39
+ "./terminal": "./src/terminal.css"
40
+ },
41
+ "publishConfig": {
42
+ "access": "public",
43
+ "provenance": true
44
+ },
45
+ "devDependencies": {
46
+ "@types/node": "^25",
47
+ "typescript": "^5",
48
+ "vite-plus": "^0.1.24",
49
+ "@cascivo/tokens": "0.1.0"
50
+ },
51
+ "peerDependencies": {
52
+ "@cascivo/tokens": ">=0.0.0"
53
+ },
54
+ "scripts": {
55
+ "build": "echo 'themes: CSS-only, no build'",
56
+ "test": "vp test"
57
+ }
58
+ }
package/readme.body.md ADDED
@@ -0,0 +1 @@
1
+ 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.
package/src/brutalist.css ADDED
@@ -0,0 +1,118 @@
1
+ /* Cascade — Brutalist Theme */
2
+ /* Neo-brutalism: cream background, zero radius, thick borders, hard offset shadows */
3
+
4
+ @import '@cascivo/tokens';
5
+
6
+ @layer cascade.theme {
7
+ [data-theme='brutalist'] {
8
+ color-scheme: light;
9
+
10
+ /* ── Surface ──────────────────────────────────────── */
11
+ --cascivo-color-background: oklch(0.97 0.02 95);
12
+ --cascivo-color-surface: oklch(1 0 0);
13
+ --cascivo-color-surface-2: oklch(0.96 0.015 95);
14
+ --cascivo-color-bg: var(--cascivo-color-background);
15
+ --cascivo-color-bg-subtle: var(--cascivo-color-surface);
16
+ --cascivo-color-surface-raised: var(--cascivo-color-surface);
17
+ --cascivo-color-surface-overlay: oklch(1 0 0);
18
+ --cascivo-color-border: oklch(0.1 0 0);
19
+ --cascivo-color-border-strong: oklch(0.05 0 0);
20
+ --cascivo-border-subtle: oklch(0.3 0 0);
21
+ --cascivo-border-default: oklch(0.1 0 0);
22
+ --cascivo-border-strong: oklch(0.05 0 0);
23
+
24
+ /* ── Text ─────────────────────────────────────────── */
25
+ --cascivo-color-foreground: oklch(0.1 0 0);
26
+ --cascivo-color-foreground-muted: oklch(0.35 0 0);
27
+ --cascivo-color-text: var(--cascivo-color-foreground);
28
+ --cascivo-color-text-subtle: var(--cascivo-color-foreground-muted);
29
+ --cascivo-color-text-muted: oklch(0.5 0 0);
30
+ --cascivo-color-text-on-accent: oklch(0.1 0 0);
31
+ --cascivo-color-text-on-destructive: oklch(1 0 0);
32
+
33
+ /* ── Accent — acid yellow ─────────────────────────── */
34
+ --cascivo-color-accent: oklch(0.88 0.19 105);
35
+ --cascivo-color-accent-foreground: oklch(0.1 0 0);
36
+ --cascivo-color-accent-hover: oklch(0.82 0.2 100);
37
+ --cascivo-color-accent-active: oklch(0.76 0.2 98);
38
+ --cascivo-color-accent-subtle: oklch(0.96 0.07 105);
39
+ --cascivo-color-accent-muted: oklch(0.93 0.12 105);
40
+
41
+ /* ── Primary — accent-mapped ─────────────────────── */
42
+ --cascivo-color-primary: var(--cascivo-color-accent);
43
+ --cascivo-color-primary-fg: oklch(0.1 0 0);
44
+ --cascivo-color-primary-hover: var(--cascivo-color-accent-hover);
45
+ --cascivo-color-primary-active: var(--cascivo-color-accent-active);
46
+ --cascivo-color-active-bg: oklch(0.1 0 0 / 8%);
47
+
48
+ /* ── Destructive ──────────────────────────────────── */
49
+ --cascivo-color-destructive: oklch(0.52 0.22 22);
50
+ --cascivo-color-destructive-hover: oklch(0.46 0.23 22);
51
+ --cascivo-color-destructive-subtle: oklch(0.95 0.05 22);
52
+
53
+ /* ── Semantic status colors ───────────────────────── */
54
+ --cascivo-color-error: oklch(0.52 0.22 22);
55
+ --cascivo-color-warning: oklch(0.65 0.17 75);
56
+ --cascivo-color-success: oklch(0.52 0.18 145);
57
+ --cascivo-color-success-subtle: oklch(0.95 0.05 145);
58
+ --cascivo-color-warning-subtle: oklch(0.96 0.06 75);
59
+ --cascivo-color-info: oklch(0.48 0.2 250);
60
+ --cascivo-color-info-subtle: oklch(0.95 0.05 250);
61
+ --cascivo-color-success-foreground: oklch(0.52 0.18 145);
62
+ --cascivo-color-warning-foreground: oklch(0.5 0.15 75);
63
+
64
+ /* ── Radius — zero ───────────────────────────────── */
65
+ --cascivo-radius-base: 0;
66
+ --cascivo-radius-control: 0;
67
+ --cascivo-radius-surface: 0;
68
+ --cascivo-radius-indicator: 0;
69
+ --cascivo-radius-full: 0;
70
+ --cascivo-radius-component: 0;
71
+ --cascivo-radius-button: 0;
72
+ --cascivo-radius-input: 0;
73
+ --cascivo-radius-card: 0;
74
+ --cascivo-radius-badge: 0;
75
+ --cascivo-radius-modal: 0;
76
+
77
+ /* ── Shadows — hard offset, no blur ─────────────── */
78
+ --cascivo-shadow-xs: 1px 1px 0 oklch(0.1 0 0);
79
+ --cascivo-shadow-sm: 2px 2px 0 oklch(0.1 0 0);
80
+ --cascivo-shadow-md: 4px 4px 0 oklch(0.1 0 0);
81
+ --cascivo-shadow-overlay: 6px 6px 0 oklch(0.1 0 0);
82
+ --cascivo-shadow-lg: var(--cascivo-shadow-overlay);
83
+
84
+ /* ── Focus ring — solid black ────────────────────── */
85
+ --cascivo-ring-width: 3px;
86
+ --cascivo-ring-offset: 2px;
87
+ --cascivo-ring-color: oklch(0.1 0 0);
88
+ --cascivo-color-focus-ring: oklch(0.1 0 0);
89
+ --cascivo-focus-ring: 0 0 0 var(--cascivo-ring-width) var(--cascivo-ring-color);
90
+
91
+ /* ── Chart overrides ─────────────────────────────── */
92
+ --cascivo-chart-1: oklch(0.64 0.18 70);
93
+ --cascivo-chart-2: oklch(0.62 0.16 240);
94
+ --cascivo-chart-3: oklch(0.6 0.18 135);
95
+ --cascivo-chart-4: oklch(0.6 0.2 55);
96
+ --cascivo-chart-5: oklch(0.45 0.18 250);
97
+ --cascivo-chart-6: oklch(0.55 0.22 40);
98
+ --cascivo-chart-7: oklch(0.6 0.17 350);
99
+ --cascivo-chart-8: oklch(0.48 0.1 200);
100
+ --cascivo-chart-grid: oklch(0.7 0 0);
101
+ --cascivo-chart-axis: oklch(0.3 0 0);
102
+
103
+ /* ── -content tokens (foreground ≥4.5:1 on paired background) ── */
104
+ --cascivo-color-primary-content: var(--cascivo-color-primary-fg);
105
+ --cascivo-color-accent-content: var(--cascivo-color-text-on-accent);
106
+ --cascivo-color-destructive-content: var(--cascivo-color-text-on-destructive);
107
+ --cascivo-color-info-content: oklch(1 0 0);
108
+ --cascivo-color-success-content: oklch(1 0 0);
109
+ --cascivo-color-warning-content: oklch(0.145 0 0);
110
+ --cascivo-color-error-content: oklch(1 0 0);
111
+
112
+ /* ── Secondary color role ────────────────────────── */
113
+ --cascivo-color-secondary: oklch(0.88 0.19 105);
114
+ --cascivo-color-secondary-content: oklch(0.1 0 0);
115
+ --cascivo-color-secondary-hover: oklch(0.82 0.2 100);
116
+ --cascivo-color-secondary-subtle: oklch(0.96 0.07 105);
117
+ }
118
+ }
package/src/corporate.css ADDED
@@ -0,0 +1,118 @@
1
+ /* Cascade — Corporate Theme */
2
+ /* Enterprise/data-dense, crisp 2px radius, conservative blue, tight hairlines */
3
+
4
+ @import '@cascivo/tokens';
5
+
6
+ @layer cascade.theme {
7
+ [data-theme='corporate'] {
8
+ color-scheme: light;
9
+
10
+ /* ── Surface ──────────────────────────────────────── */
11
+ --cascivo-color-background: oklch(0.99 0.003 250);
12
+ --cascivo-color-surface: oklch(0.97 0.004 250);
13
+ --cascivo-color-surface-2: oklch(0.95 0.005 250);
14
+ --cascivo-color-bg: var(--cascivo-color-background);
15
+ --cascivo-color-bg-subtle: var(--cascivo-color-surface);
16
+ --cascivo-color-surface-raised: var(--cascivo-color-surface);
17
+ --cascivo-color-surface-overlay: var(--cascivo-color-background);
18
+ --cascivo-color-border: oklch(0.88 0.006 250);
19
+ --cascivo-color-border-strong: oklch(0.78 0.01 250);
20
+ --cascivo-border-subtle: oklch(0.91 0.005 250);
21
+ --cascivo-border-default: oklch(0.86 0.007 250);
22
+ --cascivo-border-strong: oklch(0.74 0.012 250);
23
+
24
+ /* ── Text ─────────────────────────────────────────── */
25
+ --cascivo-color-foreground: oklch(0.2 0.01 250);
26
+ --cascivo-color-foreground-muted: oklch(0.5 0.015 255);
27
+ --cascivo-color-text: var(--cascivo-color-foreground);
28
+ --cascivo-color-text-subtle: var(--cascivo-color-foreground-muted);
29
+ --cascivo-color-text-muted: oklch(0.65 0.012 255);
30
+ --cascivo-color-text-on-accent: oklch(1 0 0);
31
+ --cascivo-color-text-on-destructive: oklch(1 0 0);
32
+
33
+ /* ── Accent — conservative blue ──────────────────── */
34
+ --cascivo-color-accent: oklch(0.5 0.16 255);
35
+ --cascivo-color-accent-foreground: oklch(1 0 0);
36
+ --cascivo-color-accent-hover: oklch(0.44 0.17 255);
37
+ --cascivo-color-accent-active: oklch(0.38 0.16 255);
38
+ --cascivo-color-accent-subtle: oklch(0.95 0.03 255);
39
+ --cascivo-color-accent-muted: oklch(0.9 0.05 255);
40
+
41
+ /* ── Primary — monochrome, Carbon-style ──────────── */
42
+ --cascivo-color-primary: oklch(0.2 0.01 250);
43
+ --cascivo-color-primary-fg: oklch(0.99 0.003 250);
44
+ --cascivo-color-primary-hover: oklch(0.28 0.01 250);
45
+ --cascivo-color-primary-active: oklch(0.35 0.012 250);
46
+ --cascivo-color-active-bg: oklch(0.2 0.01 250 / 6%);
47
+
48
+ /* ── Destructive ──────────────────────────────────── */
49
+ --cascivo-color-destructive: oklch(0.54 0.19 22);
50
+ --cascivo-color-destructive-hover: oklch(0.48 0.2 22);
51
+ --cascivo-color-destructive-subtle: oklch(0.97 0.02 22);
52
+
53
+ /* ── Semantic status colors ───────────────────────── */
54
+ --cascivo-color-error: oklch(0.54 0.19 22);
55
+ --cascivo-color-warning: oklch(0.65 0.14 75);
56
+ --cascivo-color-success: oklch(0.52 0.15 145);
57
+ --cascivo-color-success-subtle: oklch(0.96 0.02 145);
58
+ --cascivo-color-warning-subtle: oklch(0.97 0.03 75);
59
+ --cascivo-color-info: oklch(0.5 0.16 255);
60
+ --cascivo-color-info-subtle: oklch(0.95 0.03 255);
61
+ --cascivo-color-success-foreground: oklch(0.45 0.14 145);
62
+ --cascivo-color-warning-foreground: oklch(0.5 0.13 75);
63
+
64
+ /* ── Radius — 2px ────────────────────────────────── */
65
+ --cascivo-radius-base: 0.125rem;
66
+ --cascivo-radius-control: var(--cascivo-radius-base);
67
+ --cascivo-radius-surface: calc(var(--cascivo-radius-base) * 2);
68
+ --cascivo-radius-indicator: var(--cascivo-radius-base);
69
+ --cascivo-radius-full: 9999px;
70
+ --cascivo-radius-component: var(--cascivo-radius-base);
71
+ --cascivo-radius-button: var(--cascivo-radius-base);
72
+ --cascivo-radius-input: var(--cascivo-radius-base);
73
+ --cascivo-radius-card: calc(var(--cascivo-radius-base) * 2);
74
+ --cascivo-radius-badge: calc(var(--cascivo-radius-base) * 2);
75
+ --cascivo-radius-modal: calc(var(--cascivo-radius-base) * 2);
76
+
77
+ /* ── Shadows — tight and minimal ────────────────── */
78
+ --cascivo-shadow-xs: 0 1px 1px oklch(0 0 0 / 0.04);
79
+ --cascivo-shadow-sm: 0 1px 2px oklch(0 0 0 / 0.06), 0 1px 1px oklch(0 0 0 / 0.03);
80
+ --cascivo-shadow-md: 0 1px 4px oklch(0 0 0 / 0.08), 0 1px 2px oklch(0 0 0 / 0.04);
81
+ --cascivo-shadow-overlay: 0 2px 12px oklch(0 0 0 / 0.12), 0 0 0 1px oklch(0 0 0 / 0.04);
82
+ --cascivo-shadow-lg: var(--cascivo-shadow-overlay);
83
+
84
+ /* ── Focus ring — 2px blue, no offset (inset-style) ── */
85
+ --cascivo-ring-width: 2px;
86
+ --cascivo-ring-offset: 0px;
87
+ --cascivo-ring-color: color-mix(in oklch, var(--cascivo-color-accent) 70%, transparent);
88
+ --cascivo-color-focus-ring: oklch(0.5 0.16 255);
89
+ --cascivo-focus-ring: 0 0 0 var(--cascivo-ring-width) var(--cascivo-ring-color);
90
+
91
+ /* ── Chart overrides ─────────────────────────────── */
92
+ --cascivo-chart-1: oklch(0.62 0.12 70);
93
+ --cascivo-chart-2: oklch(0.62 0.1 240);
94
+ --cascivo-chart-3: oklch(0.6 0.12 135);
95
+ --cascivo-chart-4: oklch(0.6 0.16 55);
96
+ --cascivo-chart-5: oklch(0.5 0.12 270);
97
+ --cascivo-chart-6: oklch(0.58 0.14 30);
98
+ --cascivo-chart-7: oklch(0.62 0.11 350);
99
+ --cascivo-chart-8: oklch(0.5 0.1 200);
100
+ --cascivo-chart-grid: oklch(0.91 0.005 250);
101
+ --cascivo-chart-axis: oklch(0.65 0.012 255);
102
+
103
+ /* ── -content tokens (foreground ≥4.5:1 on paired background) ── */
104
+ --cascivo-color-primary-content: var(--cascivo-color-primary-fg);
105
+ --cascivo-color-accent-content: var(--cascivo-color-text-on-accent);
106
+ --cascivo-color-destructive-content: var(--cascivo-color-text-on-destructive);
107
+ --cascivo-color-info-content: oklch(1 0 0);
108
+ --cascivo-color-success-content: oklch(1 0 0);
109
+ --cascivo-color-warning-content: oklch(0.145 0 0);
110
+ --cascivo-color-error-content: oklch(1 0 0);
111
+
112
+ /* ── Secondary color role ────────────────────────── */
113
+ --cascivo-color-secondary: oklch(0.92 0.004 250);
114
+ --cascivo-color-secondary-content: oklch(0.27 0.008 250);
115
+ --cascivo-color-secondary-hover: oklch(0.86 0.006 250);
116
+ --cascivo-color-secondary-subtle: oklch(0.965 0.003 250);
117
+ }
118
+ }
package/src/dark.css ADDED
@@ -0,0 +1,119 @@
1
+ /* Cascade — Dark Theme */
2
+ /* Bold/editorial, high contrast, developer-cool */
3
+
4
+ @import '@cascivo/tokens';
5
+
6
+ @layer cascade.theme {
7
+ [data-theme='dark'] {
8
+ color-scheme: dark;
9
+
10
+ /* ── Surface ──────────────────────────────────────── */
11
+ --cascivo-color-background: oklch(0.145 0.005 250);
12
+ --cascivo-color-surface: oklch(0.185 0.007 250);
13
+ --cascivo-color-surface-2: oklch(0.22 0.008 250);
14
+ --cascivo-color-bg: var(--cascivo-color-background);
15
+ --cascivo-color-bg-subtle: var(--cascivo-color-surface);
16
+ --cascivo-color-surface-raised: var(--cascivo-color-surface-2);
17
+ --cascivo-color-surface-overlay: var(--cascivo-color-surface);
18
+ --cascivo-color-border: oklch(1 0 0 / 10%);
19
+ --cascivo-color-border-strong: oklch(1 0 0 / 16%);
20
+ --cascivo-border-subtle: oklch(1 0 0 / 0.06);
21
+ --cascivo-border-default: oklch(1 0 0 / 0.1);
22
+ --cascivo-border-strong: oklch(1 0 0 / 0.2);
23
+
24
+ /* ── Text ─────────────────────────────────────────── */
25
+ --cascivo-color-foreground: oklch(0.985 0.002 264);
26
+ --cascivo-color-foreground-muted: oklch(0.707 0.015 264);
27
+ --cascivo-color-text: var(--cascivo-color-foreground);
28
+ --cascivo-color-text-subtle: var(--cascivo-color-foreground-muted);
29
+ --cascivo-color-text-muted: oklch(0.554 0.018 264);
30
+ --cascivo-color-text-on-accent: oklch(0.145 0.005 250);
31
+ --cascivo-color-text-on-destructive: oklch(1 0 0);
32
+
33
+ /* ── Accent ───────────────────────────────────────── */
34
+ --cascivo-color-accent: oklch(0.65 0.2 250);
35
+ --cascivo-color-accent-foreground: oklch(0.145 0.005 250);
36
+ --cascivo-color-accent-hover: oklch(0.707 0.18 250);
37
+ --cascivo-color-accent-active: oklch(0.808 0.14 250);
38
+ --cascivo-color-accent-subtle: oklch(0.623 0.214 250 / 0.1);
39
+ --cascivo-color-accent-muted: oklch(0.623 0.214 250 / 0.2);
40
+
41
+ /* ── Destructive ──────────────────────────────────── */
42
+ --cascivo-color-destructive: oklch(0.72 0.16 22);
43
+ --cascivo-color-destructive-hover: oklch(0.628 0.188 22);
44
+ --cascivo-color-destructive-subtle: oklch(0.628 0.188 22 / 0.1);
45
+
46
+ /* ── Semantic status colors ───────────────────────── */
47
+ --cascivo-color-error: oklch(0.72 0.16 22);
48
+ --cascivo-color-warning: oklch(0.82 0.13 75);
49
+ --cascivo-color-success: oklch(0.72 0.13 145);
50
+ --cascivo-color-success-subtle: oklch(0.72 0.13 145 / 0.1);
51
+ --cascivo-color-warning-subtle: oklch(0.82 0.13 75 / 0.1);
52
+ --cascivo-color-info: oklch(0.65 0.2 250);
53
+ --cascivo-color-info-subtle: oklch(0.65 0.2 250 / 0.1);
54
+ /* Foreground-safe variants: bright for text on dark backgrounds (WCAG AA ≥4.5:1) */
55
+ --cascivo-color-success-foreground: oklch(0.72 0.13 145);
56
+ --cascivo-color-warning-foreground: oklch(0.82 0.13 75);
57
+
58
+ /* ── Primary — inverted monochrome ── */
59
+ --cascivo-color-primary: oklch(0.922 0 0);
60
+ --cascivo-color-primary-fg: oklch(0.205 0 0);
61
+ --cascivo-color-primary-hover: oklch(0.86 0 0);
62
+ --cascivo-color-primary-active: oklch(0.8 0 0);
63
+ --cascivo-color-active-bg: oklch(1 0 0 / 8%);
64
+
65
+ /* ── Radius — one knob; semantic scale derives in tokens ── */
66
+ --cascivo-radius-base: 0.375rem;
67
+ --cascivo-radius-control: var(--cascivo-radius-base);
68
+ --cascivo-radius-surface: calc(var(--cascivo-radius-base) * 1.66);
69
+ --cascivo-radius-indicator: calc(var(--cascivo-radius-base) / 2);
70
+ --cascivo-radius-full: 9999px;
71
+ --cascivo-radius-component: var(--cascivo-radius-base);
72
+ --cascivo-radius-button: var(--cascivo-radius-base);
73
+ --cascivo-radius-input: var(--cascivo-radius-base);
74
+ --cascivo-radius-card: calc(var(--cascivo-radius-base) * 1.66);
75
+ --cascivo-radius-badge: var(--cascivo-radius-full);
76
+ --cascivo-radius-modal: calc(var(--cascivo-radius-base) * 2);
77
+
78
+ /* ── Shadows — dark mode needs more opacity ────────── */
79
+ --cascivo-shadow-xs: none;
80
+ --cascivo-shadow-sm: 0 1px 3px oklch(0 0 0 / 0.4);
81
+ --cascivo-shadow-md: 0 2px 8px oklch(0 0 0 / 0.45);
82
+ --cascivo-shadow-overlay: 0 4px 32px oklch(0 0 0 / 0.6), 0 0 0 1px oklch(1 0 0 / 0.06);
83
+ --cascivo-shadow-lg: var(--cascivo-shadow-overlay);
84
+
85
+ /* ── Focus ring ───────────────────────────────────── */
86
+ --cascivo-ring-width: 2px;
87
+ --cascivo-ring-offset: 0px;
88
+ --cascivo-ring-color: color-mix(in oklch, var(--cascivo-color-accent) 65%, transparent);
89
+ --cascivo-color-focus-ring: oklch(0.65 0.2 250);
90
+ --cascivo-focus-ring: 0 0 0 var(--cascivo-ring-width) var(--cascivo-ring-color);
91
+
92
+ /* ── Chart overrides ─────────────────────────────── */
93
+ --cascivo-chart-1: oklch(0.8 0.13 70);
94
+ --cascivo-chart-2: oklch(0.8 0.11 240);
95
+ --cascivo-chart-3: oklch(0.73 0.13 165);
96
+ --cascivo-chart-4: oklch(0.95 0.15 100);
97
+ --cascivo-chart-5: oklch(0.63 0.12 250);
98
+ --cascivo-chart-6: oklch(0.68 0.15 40);
99
+ --cascivo-chart-7: oklch(0.73 0.11 350);
100
+ --cascivo-chart-8: oklch(0.72 0.08 200);
101
+ --cascivo-chart-grid: oklch(1 0 0 / 0.06);
102
+ --cascivo-chart-axis: oklch(0.707 0.015 264);
103
+
104
+ /* ── -content tokens (foreground ≥4.5:1 on paired background) ── */
105
+ --cascivo-color-primary-content: var(--cascivo-color-primary-fg);
106
+ --cascivo-color-accent-content: var(--cascivo-color-text-on-accent);
107
+ --cascivo-color-destructive-content: var(--cascivo-color-text-on-destructive);
108
+ --cascivo-color-info-content: oklch(0.145 0.005 250);
109
+ --cascivo-color-success-content: oklch(0.145 0 0);
110
+ --cascivo-color-warning-content: oklch(0.145 0 0);
111
+ --cascivo-color-error-content: oklch(0.145 0 0);
112
+
113
+ /* ── Secondary color role ────────────────────────── */
114
+ --cascivo-color-secondary: oklch(0.27 0.008 264);
115
+ --cascivo-color-secondary-content: oklch(0.9 0.004 264);
116
+ --cascivo-color-secondary-hover: oklch(0.32 0.01 264);
117
+ --cascivo-color-secondary-subtle: oklch(0.22 0.005 264);
118
+ }
119
+ }
package/src/flat.css ADDED
@@ -0,0 +1,126 @@
1
+ /* Cascade — Flat Theme */
2
+ /* Zero shadows, zero radius, high-contrast borders, vivid green accent */
3
+
4
+ @import '@cascivo/tokens';
5
+
6
+ @layer cascade.theme {
7
+ [data-theme='flat'] {
8
+ color-scheme: light;
9
+
10
+ /* ── Surface ──────────────────────────────────────── */
11
+ --cascivo-color-background: oklch(1 0 0);
12
+ --cascivo-color-surface: oklch(0.97 0 0);
13
+ --cascivo-color-surface-2: oklch(0.94 0 0);
14
+
15
+ /* ── Foreground ───────────────────────────────────── */
16
+ --cascivo-color-foreground: oklch(0.1 0 0);
17
+ --cascivo-color-foreground-muted: oklch(0.4 0 0);
18
+
19
+ /* ── Accent — vivid green ────────────────────────── */
20
+ --cascivo-color-accent: oklch(0.5 0.2 145);
21
+ --cascivo-color-accent-foreground: oklch(1 0 0);
22
+ --cascivo-color-accent-hover: oklch(0.45 0.21 145);
23
+
24
+ /* ── Primary — accent-mapped ─────────────────────── */
25
+ --cascivo-color-primary: var(--cascivo-color-accent);
26
+ --cascivo-color-primary-fg: var(--cascivo-color-accent-foreground);
27
+ --cascivo-color-primary-hover: var(--cascivo-color-accent-hover);
28
+ --cascivo-color-primary-active: oklch(0.4 0.21 145);
29
+ --cascivo-color-active-bg: oklch(0.1 0 0 / 8%);
30
+
31
+ /* ── Borders — high contrast ─────────────────────── */
32
+ --cascivo-border-subtle: oklch(0.7 0 0);
33
+ --cascivo-border-default: oklch(0.4 0 0);
34
+ --cascivo-border-strong: oklch(0.1 0 0);
35
+
36
+ /* ── Radius — zero ───────────────────────────────── */
37
+ --cascivo-radius-base: 0;
38
+ --cascivo-radius-control: 0;
39
+ --cascivo-radius-surface: 0;
40
+ --cascivo-radius-indicator: 0;
41
+ --cascivo-radius-full: 0;
42
+
43
+ /* ── Shadows — none ──────────────────────────────── */
44
+ --cascivo-shadow-xs: none;
45
+ --cascivo-shadow-sm: none;
46
+ --cascivo-shadow-md: none;
47
+ --cascivo-shadow-lg: none;
48
+
49
+ /* ── Focus ring ───────────────────────────────────── */
50
+ --cascivo-ring-width: 2px;
51
+ --cascivo-ring-offset: 0px;
52
+ --cascivo-ring-color: oklch(0.5 0.2 145);
53
+
54
+ /* ── Status colors ───────────────────────────────── */
55
+ --cascivo-color-error: oklch(0.52 0.2 22);
56
+ --cascivo-color-warning: oklch(0.6 0.16 75);
57
+ --cascivo-color-success: oklch(0.52 0.18 145);
58
+
59
+ /* ── Semantic aliases (parity with light/dark/warm) ── */
60
+ --cascivo-color-bg: var(--cascivo-color-background);
61
+ --cascivo-color-bg-subtle: var(--cascivo-color-surface);
62
+ --cascivo-color-surface-raised: var(--cascivo-color-surface);
63
+ --cascivo-color-surface-overlay: var(--cascivo-color-background);
64
+ --cascivo-color-border: oklch(0.7 0 0);
65
+ --cascivo-color-border-strong: oklch(0.4 0 0);
66
+
67
+ --cascivo-color-text: var(--cascivo-color-foreground);
68
+ --cascivo-color-text-subtle: var(--cascivo-color-foreground-muted);
69
+ --cascivo-color-text-muted: oklch(0.55 0 0);
70
+ --cascivo-color-text-on-accent: oklch(1 0 0);
71
+ --cascivo-color-text-on-destructive: oklch(1 0 0);
72
+
73
+ --cascivo-color-accent-active: oklch(0.4 0.21 145);
74
+ --cascivo-color-accent-subtle: oklch(0.95 0.04 145);
75
+ --cascivo-color-accent-muted: oklch(0.9 0.07 145);
76
+
77
+ --cascivo-color-destructive: oklch(0.52 0.2 22);
78
+ --cascivo-color-destructive-hover: oklch(0.46 0.21 22);
79
+ --cascivo-color-destructive-subtle: oklch(0.95 0.04 22);
80
+
81
+ --cascivo-color-success-subtle: oklch(0.95 0.04 145);
82
+ --cascivo-color-warning-subtle: oklch(0.96 0.04 75);
83
+ --cascivo-color-info: oklch(0.5 0.18 250);
84
+ --cascivo-color-info-subtle: oklch(0.95 0.04 250);
85
+ --cascivo-color-success-foreground: oklch(0.52 0.18 145);
86
+ --cascivo-color-warning-foreground: oklch(0.5 0.14 75);
87
+
88
+ --cascivo-radius-component: 0;
89
+ --cascivo-radius-button: 0;
90
+ --cascivo-radius-input: 0;
91
+ --cascivo-radius-card: 0;
92
+ --cascivo-radius-badge: 0;
93
+ --cascivo-radius-modal: 0;
94
+
95
+ --cascivo-shadow-overlay: none;
96
+
97
+ --cascivo-color-focus-ring: oklch(0.5 0.2 145);
98
+ --cascivo-focus-ring: 0 0 0 var(--cascivo-ring-width) var(--cascivo-ring-color);
99
+
100
+ --cascivo-chart-1: oklch(0.62 0.13 70);
101
+ --cascivo-chart-2: oklch(0.62 0.11 240);
102
+ --cascivo-chart-3: oklch(0.6 0.13 135);
103
+ --cascivo-chart-4: oklch(0.6 0.18 55);
104
+ --cascivo-chart-5: oklch(0.5 0.13 270);
105
+ --cascivo-chart-6: oklch(0.58 0.16 30);
106
+ --cascivo-chart-7: oklch(0.62 0.12 350);
107
+ --cascivo-chart-8: oklch(0.5 0.12 200);
108
+ --cascivo-chart-grid: oklch(0.85 0 0);
109
+ --cascivo-chart-axis: oklch(0.55 0 0);
110
+
111
+ /* ── -content tokens (foreground ≥4.5:1 on paired background) ── */
112
+ --cascivo-color-primary-content: var(--cascivo-color-primary-fg);
113
+ --cascivo-color-accent-content: var(--cascivo-color-text-on-accent);
114
+ --cascivo-color-destructive-content: var(--cascivo-color-text-on-destructive);
115
+ --cascivo-color-info-content: oklch(1 0 0);
116
+ --cascivo-color-success-content: oklch(1 0 0);
117
+ --cascivo-color-warning-content: oklch(0.145 0 0);
118
+ --cascivo-color-error-content: oklch(1 0 0);
119
+
120
+ /* ── Secondary color role ────────────────────────── */
121
+ --cascivo-color-secondary: oklch(0.92 0 0);
122
+ --cascivo-color-secondary-content: oklch(0.25 0 0);
123
+ --cascivo-color-secondary-hover: oklch(0.86 0 0);
124
+ --cascivo-color-secondary-subtle: oklch(0.96 0 0);
125
+ }
126
+ }
package/src/light.css ADDED
@@ -0,0 +1,122 @@
1
+ /* Cascade — Light Theme */
2
+ /* Minimal/sharp, neutral grays, clean lines */
3
+
4
+ @import '@cascivo/tokens';
5
+
6
+ @layer cascade.theme {
7
+ [data-theme='light'],
8
+ :root:not([data-theme]) {
9
+ color-scheme: light;
10
+
11
+ /* ── Surface ──────────────────────────────────────── */
12
+ --cascivo-color-background: oklch(1 0 0);
13
+ --cascivo-color-surface: oklch(0.985 0.002 264);
14
+ --cascivo-color-surface-2: oklch(0.967 0.003 264);
15
+ --cascivo-color-bg: var(--cascivo-color-background);
16
+ --cascivo-color-bg-subtle: var(--cascivo-color-surface);
17
+ --cascivo-color-surface-raised: var(--cascivo-color-surface);
18
+ --cascivo-color-surface-overlay: var(--cascivo-color-background);
19
+ --cascivo-color-border: var(--cascivo-gray-200);
20
+ --cascivo-color-border-strong: var(--cascivo-gray-300);
21
+ --cascivo-border-subtle: oklch(0.928 0.006 264);
22
+ --cascivo-border-default: oklch(0.872 0.008 264);
23
+ --cascivo-border-strong: oklch(0.707 0.015 264);
24
+
25
+ /* ── Text ─────────────────────────────────────────── */
26
+ --cascivo-color-foreground: oklch(0.145 0.005 264);
27
+ --cascivo-color-foreground-muted: oklch(0.554 0.018 264);
28
+ --cascivo-color-text: var(--cascivo-color-foreground);
29
+ --cascivo-color-text-subtle: var(--cascivo-gray-600);
30
+ --cascivo-color-text-muted: var(--cascivo-gray-400);
31
+ --cascivo-color-text-on-accent: oklch(1 0 0);
32
+ --cascivo-color-text-on-destructive: oklch(1 0 0);
33
+
34
+ /* ── Accent (links, focus, info, active tint) ───────── */
35
+ /* L lowered 0.623→0.52 so accent-as-link-text clears WCAG 2.2 AA 4.5:1 on
36
+ white (was 3.55:1). Hover darkened to stay below the new base. */
37
+ --cascivo-color-accent: oklch(0.52 0.2 250);
38
+ --cascivo-color-accent-foreground: oklch(1 0 0);
39
+ --cascivo-color-accent-hover: oklch(0.45 0.2 250);
40
+ --cascivo-color-accent-active: var(--cascivo-blue-800);
41
+ --cascivo-color-accent-subtle: var(--cascivo-blue-50);
42
+ --cascivo-color-accent-muted: var(--cascivo-blue-100);
43
+
44
+ /* ── Primary (filled actions — monochrome, shadcn/Linear style) ── */
45
+ --cascivo-color-primary: oklch(0.205 0 0);
46
+ --cascivo-color-primary-fg: oklch(0.985 0 0);
47
+ --cascivo-color-primary-hover: oklch(0.27 0 0);
48
+ --cascivo-color-primary-active: oklch(0.32 0 0);
49
+ --cascivo-color-active-bg: oklch(0.145 0.005 264 / 6%);
50
+
51
+ /* ── Destructive ──────────────────────────────────── */
52
+ --cascivo-color-destructive: var(--cascivo-red-600);
53
+ --cascivo-color-destructive-hover: var(--cascivo-red-700);
54
+ --cascivo-color-destructive-subtle: var(--cascivo-red-50);
55
+
56
+ /* ── Semantic status colors ───────────────────────── */
57
+ --cascivo-color-error: oklch(0.628 0.188 22);
58
+ --cascivo-color-warning: oklch(0.768 0.145 75);
59
+ --cascivo-color-success: oklch(0.648 0.15 145);
60
+ --cascivo-color-success-subtle: var(--cascivo-green-50);
61
+ --cascivo-color-warning-subtle: var(--cascivo-orange-50);
62
+ --cascivo-color-info: var(--cascivo-blue-600);
63
+ --cascivo-color-info-subtle: var(--cascivo-blue-50);
64
+ /* Foreground-safe variants: darker for text on light backgrounds (WCAG AA ≥4.5:1) */
65
+ --cascivo-color-success-foreground: oklch(0.45 0.14 145);
66
+ --cascivo-color-warning-foreground: oklch(0.5 0.14 75);
67
+
68
+ /* ── Radius — one knob; semantic scale derives in tokens ── */
69
+ --cascivo-radius-base: 0.375rem; /* 6px */
70
+ --cascivo-radius-control: var(--cascivo-radius-base);
71
+ --cascivo-radius-surface: calc(var(--cascivo-radius-base) * 1.66);
72
+ --cascivo-radius-indicator: calc(var(--cascivo-radius-base) / 2);
73
+ --cascivo-radius-full: 9999px;
74
+ --cascivo-radius-component: var(--cascivo-radius-base);
75
+ --cascivo-radius-button: var(--cascivo-radius-base);
76
+ --cascivo-radius-input: var(--cascivo-radius-base);
77
+ --cascivo-radius-card: calc(var(--cascivo-radius-base) * 1.66); /* ~10px */
78
+ --cascivo-radius-badge: var(--cascivo-radius-full);
79
+ --cascivo-radius-modal: calc(var(--cascivo-radius-base) * 2); /* ~12px */
80
+
81
+ /* ── Shadows ─────────────────────────────────────── */
82
+ --cascivo-shadow-xs: 0 1px 2px oklch(0 0 0 / 0.05);
83
+ --cascivo-shadow-sm: 0 1px 3px oklch(0 0 0 / 0.07), 0 1px 2px oklch(0 0 0 / 0.04);
84
+ --cascivo-shadow-md: 0 2px 8px oklch(0 0 0 / 0.07), 0 1px 2px oklch(0 0 0 / 0.04);
85
+ --cascivo-shadow-overlay: 0 4px 32px oklch(0 0 0 / 0.16), 0 0 0 1px oklch(0 0 0 / 0.04);
86
+ --cascivo-shadow-lg: var(--cascivo-shadow-overlay);
87
+
88
+ /* ── Focus ring ───────────────────────────────────── */
89
+ --cascivo-ring-width: 2px;
90
+ --cascivo-ring-offset: 0px;
91
+ --cascivo-ring-color: color-mix(in oklch, var(--cascivo-color-accent) 55%, transparent);
92
+ --cascivo-color-focus-ring: var(--cascivo-blue-500);
93
+ --cascivo-focus-ring: 0 0 0 var(--cascivo-ring-width) var(--cascivo-ring-color);
94
+
95
+ /* ── Chart overrides ─────────────────────────────── */
96
+ --cascivo-chart-1: oklch(0.62 0.13 70);
97
+ --cascivo-chart-2: oklch(0.62 0.11 240);
98
+ --cascivo-chart-3: oklch(0.6 0.13 135);
99
+ --cascivo-chart-4: oklch(0.6 0.18 55);
100
+ --cascivo-chart-5: oklch(0.5 0.13 270);
101
+ --cascivo-chart-6: oklch(0.58 0.16 30);
102
+ --cascivo-chart-7: oklch(0.62 0.12 350);
103
+ --cascivo-chart-8: oklch(0.5 0.12 200);
104
+ --cascivo-chart-grid: var(--cascivo-gray-200);
105
+ --cascivo-chart-axis: var(--cascivo-gray-400);
106
+
107
+ /* ── -content tokens (foreground ≥4.5:1 on paired background) ── */
108
+ --cascivo-color-primary-content: var(--cascivo-color-primary-fg);
109
+ --cascivo-color-accent-content: var(--cascivo-color-text-on-accent);
110
+ --cascivo-color-destructive-content: var(--cascivo-color-text-on-destructive);
111
+ --cascivo-color-info-content: oklch(1 0 0);
112
+ --cascivo-color-success-content: oklch(1 0 0);
113
+ --cascivo-color-warning-content: oklch(0.145 0 0);
114
+ --cascivo-color-error-content: oklch(1 0 0);
115
+
116
+ /* ── Secondary color role ────────────────────────── */
117
+ --cascivo-color-secondary: oklch(0.92 0.004 264);
118
+ --cascivo-color-secondary-content: oklch(0.27 0.01 264);
119
+ --cascivo-color-secondary-hover: oklch(0.86 0.006 264);
120
+ --cascivo-color-secondary-subtle: oklch(0.967 0.002 264);
121
+ }
122
+ }
package/src/midnight.css ADDED
@@ -0,0 +1,120 @@
1
+ /* Cascade — Midnight Theme */
2
+ /* Premium dark, deep indigo-black, violet accent, soft colored glow */
3
+
4
+ @import '@cascivo/tokens';
5
+
6
+ @layer cascade.theme {
7
+ [data-theme='midnight'] {
8
+ color-scheme: dark;
9
+
10
+ /* ── Surface ──────────────────────────────────────── */
11
+ --cascivo-color-background: oklch(0.16 0.02 280);
12
+ --cascivo-color-surface: oklch(0.2 0.025 280);
13
+ --cascivo-color-surface-2: oklch(0.24 0.028 280);
14
+ --cascivo-color-bg: var(--cascivo-color-background);
15
+ --cascivo-color-bg-subtle: var(--cascivo-color-surface);
16
+ --cascivo-color-surface-raised: var(--cascivo-color-surface-2);
17
+ --cascivo-color-surface-overlay: var(--cascivo-color-surface);
18
+ --cascivo-color-border: oklch(1 0 0 / 8%);
19
+ --cascivo-color-border-strong: oklch(1 0 0 / 14%);
20
+ --cascivo-border-subtle: oklch(1 0 0 / 0.06);
21
+ --cascivo-border-default: oklch(1 0 0 / 0.1);
22
+ --cascivo-border-strong: oklch(1 0 0 / 0.18);
23
+
24
+ /* ── Text ─────────────────────────────────────────── */
25
+ --cascivo-color-foreground: oklch(0.96 0.01 280);
26
+ --cascivo-color-foreground-muted: oklch(0.68 0.02 285);
27
+ --cascivo-color-text: var(--cascivo-color-foreground);
28
+ --cascivo-color-text-subtle: var(--cascivo-color-foreground-muted);
29
+ --cascivo-color-text-muted: oklch(0.52 0.02 280);
30
+ --cascivo-color-text-on-accent: oklch(1 0 0);
31
+ --cascivo-color-text-on-destructive: oklch(1 0 0);
32
+
33
+ /* ── Accent — violet ──────────────────────────────── */
34
+ --cascivo-color-accent: oklch(0.7 0.22 290);
35
+ --cascivo-color-accent-foreground: oklch(1 0 0);
36
+ --cascivo-color-accent-hover: oklch(0.76 0.2 290);
37
+ --cascivo-color-accent-active: oklch(0.82 0.17 290);
38
+ --cascivo-color-accent-subtle: oklch(0.7 0.22 290 / 0.12);
39
+ --cascivo-color-accent-muted: oklch(0.7 0.22 290 / 0.22);
40
+
41
+ /* ── Primary — light fill for dark bg ─────────────── */
42
+ --cascivo-color-primary: oklch(0.88 0 0);
43
+ --cascivo-color-primary-fg: oklch(0.16 0.02 280);
44
+ --cascivo-color-primary-hover: oklch(0.96 0 0);
45
+ --cascivo-color-primary-active: oklch(1 0 0);
46
+ --cascivo-color-active-bg: oklch(1 0 0 / 8%);
47
+
48
+ /* ── Destructive ──────────────────────────────────── */
49
+ --cascivo-color-destructive: oklch(0.72 0.16 22);
50
+ --cascivo-color-destructive-hover: oklch(0.628 0.188 22);
51
+ --cascivo-color-destructive-subtle: oklch(0.628 0.188 22 / 0.1);
52
+
53
+ /* ── Semantic status colors ───────────────────────── */
54
+ --cascivo-color-error: oklch(0.72 0.16 22);
55
+ --cascivo-color-warning: oklch(0.82 0.13 75);
56
+ --cascivo-color-success: oklch(0.72 0.13 145);
57
+ --cascivo-color-success-subtle: oklch(0.72 0.13 145 / 0.1);
58
+ --cascivo-color-warning-subtle: oklch(0.82 0.13 75 / 0.1);
59
+ --cascivo-color-info: oklch(0.7 0.22 290);
60
+ --cascivo-color-info-subtle: oklch(0.7 0.22 290 / 0.1);
61
+ --cascivo-color-success-foreground: oklch(0.72 0.13 145);
62
+ --cascivo-color-warning-foreground: oklch(0.82 0.13 75);
63
+
64
+ /* ── Radius — 10px ───────────────────────────────── */
65
+ --cascivo-radius-base: 0.625rem;
66
+ --cascivo-radius-control: var(--cascivo-radius-base);
67
+ --cascivo-radius-surface: calc(var(--cascivo-radius-base) * 1.66);
68
+ --cascivo-radius-indicator: calc(var(--cascivo-radius-base) / 2);
69
+ --cascivo-radius-full: 9999px;
70
+ --cascivo-radius-component: var(--cascivo-radius-base);
71
+ --cascivo-radius-button: var(--cascivo-radius-base);
72
+ --cascivo-radius-input: var(--cascivo-radius-base);
73
+ --cascivo-radius-card: calc(var(--cascivo-radius-base) * 1.66);
74
+ --cascivo-radius-badge: var(--cascivo-radius-full);
75
+ --cascivo-radius-modal: calc(var(--cascivo-radius-base) * 2);
76
+
77
+ /* ── Shadows — violet-tinted soft glow ───────────── */
78
+ --cascivo-shadow-xs: none;
79
+ --cascivo-shadow-sm: 0 1px 4px oklch(0.16 0.02 280 / 0.5);
80
+ --cascivo-shadow-md:
81
+ 0 4px 16px oklch(0.16 0.02 280 / 0.5), 0 0 0 1px oklch(0.7 0.22 290 / 0.08);
82
+ --cascivo-shadow-overlay:
83
+ 0 8px 40px oklch(0.16 0.02 280 / 0.7), 0 0 0 1px oklch(0.7 0.22 290 / 0.12);
84
+ --cascivo-shadow-lg: var(--cascivo-shadow-overlay);
85
+
86
+ /* ── Focus ring — wider violet halo ──────────────── */
87
+ --cascivo-ring-width: 3px;
88
+ --cascivo-ring-offset: 0px;
89
+ --cascivo-ring-color: color-mix(in oklch, var(--cascivo-color-accent) 55%, transparent);
90
+ --cascivo-color-focus-ring: oklch(0.7 0.22 290);
91
+ --cascivo-focus-ring: 0 0 0 var(--cascivo-ring-width) var(--cascivo-ring-color);
92
+
93
+ /* ── Chart overrides ─────────────────────────────── */
94
+ --cascivo-chart-1: oklch(0.82 0.13 75);
95
+ --cascivo-chart-2: oklch(0.82 0.12 240);
96
+ --cascivo-chart-3: oklch(0.75 0.12 165);
97
+ --cascivo-chart-4: oklch(0.96 0.14 100);
98
+ --cascivo-chart-5: oklch(0.68 0.13 255);
99
+ --cascivo-chart-6: oklch(0.7 0.14 40);
100
+ --cascivo-chart-7: oklch(0.74 0.11 355);
101
+ --cascivo-chart-8: oklch(0.75 0.03 265);
102
+ --cascivo-chart-grid: oklch(1 0 0 / 0.06);
103
+ --cascivo-chart-axis: oklch(0.68 0.02 285);
104
+
105
+ /* ── -content tokens (foreground ≥4.5:1 on paired background) ── */
106
+ --cascivo-color-primary-content: var(--cascivo-color-primary-fg);
107
+ --cascivo-color-accent-content: var(--cascivo-color-text-on-accent);
108
+ --cascivo-color-destructive-content: var(--cascivo-color-text-on-destructive);
109
+ --cascivo-color-info-content: oklch(0.16 0.02 280);
110
+ --cascivo-color-success-content: oklch(0.145 0 0);
111
+ --cascivo-color-warning-content: oklch(0.145 0 0);
112
+ --cascivo-color-error-content: oklch(0.145 0 0);
113
+
114
+ /* ── Secondary color role ────────────────────────── */
115
+ --cascivo-color-secondary: oklch(0.28 0.025 280);
116
+ --cascivo-color-secondary-content: oklch(0.9 0.008 280);
117
+ --cascivo-color-secondary-hover: oklch(0.34 0.03 280);
118
+ --cascivo-color-secondary-subtle: oklch(0.22 0.018 280);
119
+ }
120
+ }
package/src/minimal.css ADDED
@@ -0,0 +1,126 @@
1
+ /* Cascade — Minimal Theme */
2
+ /* Very subtle shadows, rounder radius, near-invisible borders, monochrome accent */
3
+
4
+ @import '@cascivo/tokens';
5
+
6
+ @layer cascade.theme {
7
+ [data-theme='minimal'] {
8
+ color-scheme: light;
9
+
10
+ /* ── Surface — warm off-white ─────────────────────── */
11
+ --cascivo-color-background: oklch(0.98 0.005 80);
12
+ --cascivo-color-surface: oklch(0.965 0.006 80);
13
+ --cascivo-color-surface-2: oklch(0.95 0.007 80);
14
+
15
+ /* ── Foreground ───────────────────────────────────── */
16
+ --cascivo-color-foreground: oklch(0.2 0.01 80);
17
+ --cascivo-color-foreground-muted: oklch(0.55 0.015 80);
18
+
19
+ /* ── Accent — monochrome ─────────────────────────── */
20
+ --cascivo-color-accent: oklch(0.25 0.01 80);
21
+ --cascivo-color-accent-foreground: oklch(0.98 0.005 80);
22
+ --cascivo-color-accent-hover: oklch(0.2 0.01 80);
23
+
24
+ /* ── Primary — accent-mapped ─────────────────────── */
25
+ --cascivo-color-primary: var(--cascivo-color-accent);
26
+ --cascivo-color-primary-fg: oklch(0.985 0 0);
27
+ --cascivo-color-primary-hover: oklch(0.32 0.01 80);
28
+ --cascivo-color-primary-active: oklch(0.38 0.01 80);
29
+ --cascivo-color-active-bg: oklch(0.25 0.01 80 / 7%);
30
+
31
+ /* ── Borders — near invisible ────────────────────── */
32
+ --cascivo-border-subtle: oklch(0.92 0.005 80);
33
+ --cascivo-border-default: oklch(0.88 0.008 80);
34
+ --cascivo-border-strong: oklch(0.8 0.012 80);
35
+
36
+ /* ── Radius — rounder ────────────────────────────── */
37
+ --cascivo-radius-base: 0.75rem;
38
+ --cascivo-radius-control: 0.75rem;
39
+ --cascivo-radius-surface: 1.25rem;
40
+ --cascivo-radius-indicator: 0.375rem;
41
+ --cascivo-radius-full: 9999px;
42
+
43
+ /* ── Shadows — very subtle ───────────────────────── */
44
+ --cascivo-shadow-xs: 0 1px 2px oklch(0 0 0 / 0.03);
45
+ --cascivo-shadow-sm: 0 1px 3px oklch(0 0 0 / 0.05), 0 1px 2px oklch(0 0 0 / 0.03);
46
+ --cascivo-shadow-md: 0 4px 6px oklch(0 0 0 / 0.04), 0 2px 4px oklch(0 0 0 / 0.03);
47
+ --cascivo-shadow-lg: 0 10px 15px oklch(0 0 0 / 0.05), 0 4px 6px oklch(0 0 0 / 0.03);
48
+
49
+ /* ── Focus ring ───────────────────────────────────── */
50
+ --cascivo-ring-width: 2px;
51
+ --cascivo-ring-offset: 3px;
52
+ --cascivo-ring-color: oklch(0.25 0.01 80 / 0.4);
53
+
54
+ /* ── Status colors — muted ───────────────────────── */
55
+ --cascivo-color-error: oklch(0.55 0.14 22);
56
+ --cascivo-color-warning: oklch(0.65 0.12 75);
57
+ --cascivo-color-success: oklch(0.55 0.13 145);
58
+
59
+ /* ── Semantic aliases (parity with light/dark/warm) ── */
60
+ --cascivo-color-bg: var(--cascivo-color-background);
61
+ --cascivo-color-bg-subtle: var(--cascivo-color-surface);
62
+ --cascivo-color-surface-raised: var(--cascivo-color-surface);
63
+ --cascivo-color-surface-overlay: var(--cascivo-color-background);
64
+ --cascivo-color-border: oklch(0.92 0.005 80);
65
+ --cascivo-color-border-strong: oklch(0.8 0.012 80);
66
+
67
+ --cascivo-color-text: var(--cascivo-color-foreground);
68
+ --cascivo-color-text-subtle: var(--cascivo-color-foreground-muted);
69
+ --cascivo-color-text-muted: oklch(0.65 0.012 80);
70
+ --cascivo-color-text-on-accent: oklch(0.98 0.005 80);
71
+ --cascivo-color-text-on-destructive: oklch(0.98 0.005 80);
72
+
73
+ --cascivo-color-accent-active: oklch(0.32 0.01 80);
74
+ --cascivo-color-accent-subtle: oklch(0.94 0.008 80);
75
+ --cascivo-color-accent-muted: oklch(0.9 0.01 80);
76
+
77
+ --cascivo-color-destructive: oklch(0.55 0.14 22);
78
+ --cascivo-color-destructive-hover: oklch(0.49 0.15 22);
79
+ --cascivo-color-destructive-subtle: oklch(0.96 0.025 22);
80
+
81
+ --cascivo-color-success-subtle: oklch(0.96 0.03 145);
82
+ --cascivo-color-warning-subtle: oklch(0.97 0.03 75);
83
+ --cascivo-color-info: oklch(0.55 0.1 250);
84
+ --cascivo-color-info-subtle: oklch(0.96 0.025 250);
85
+ --cascivo-color-success-foreground: oklch(0.45 0.13 145);
86
+ --cascivo-color-warning-foreground: oklch(0.5 0.12 75);
87
+
88
+ --cascivo-radius-component: var(--cascivo-radius-base);
89
+ --cascivo-radius-button: var(--cascivo-radius-base);
90
+ --cascivo-radius-input: var(--cascivo-radius-base);
91
+ --cascivo-radius-card: var(--cascivo-radius-surface);
92
+ --cascivo-radius-badge: var(--cascivo-radius-full);
93
+ --cascivo-radius-modal: var(--cascivo-radius-surface);
94
+
95
+ --cascivo-shadow-overlay: 0 10px 30px oklch(0 0 0 / 0.07), 0 0 0 1px oklch(0 0 0 / 0.02);
96
+
97
+ --cascivo-color-focus-ring: oklch(0.25 0.01 80);
98
+ --cascivo-focus-ring: 0 0 0 var(--cascivo-ring-width) var(--cascivo-ring-color);
99
+
100
+ --cascivo-chart-1: oklch(0.6 0.13 70);
101
+ --cascivo-chart-2: oklch(0.6 0.11 240);
102
+ --cascivo-chart-3: oklch(0.58 0.13 135);
103
+ --cascivo-chart-4: oklch(0.58 0.18 55);
104
+ --cascivo-chart-5: oklch(0.48 0.13 270);
105
+ --cascivo-chart-6: oklch(0.56 0.16 30);
106
+ --cascivo-chart-7: oklch(0.6 0.12 350);
107
+ --cascivo-chart-8: oklch(0.46 0.12 200);
108
+ --cascivo-chart-grid: oklch(0.92 0.005 80);
109
+ --cascivo-chart-axis: oklch(0.65 0.012 80);
110
+
111
+ /* ── -content tokens (foreground ≥4.5:1 on paired background) ── */
112
+ --cascivo-color-primary-content: var(--cascivo-color-primary-fg);
113
+ --cascivo-color-accent-content: var(--cascivo-color-text-on-accent);
114
+ --cascivo-color-destructive-content: var(--cascivo-color-text-on-destructive);
115
+ --cascivo-color-info-content: oklch(1 0 0);
116
+ --cascivo-color-success-content: oklch(1 0 0);
117
+ --cascivo-color-warning-content: oklch(0.145 0 0);
118
+ --cascivo-color-error-content: oklch(1 0 0);
119
+
120
+ /* ── Secondary color role ────────────────────────── */
121
+ --cascivo-color-secondary: oklch(0.92 0.004 80);
122
+ --cascivo-color-secondary-content: oklch(0.28 0.008 80);
123
+ --cascivo-color-secondary-hover: oklch(0.86 0.006 80);
124
+ --cascivo-color-secondary-subtle: oklch(0.962 0.003 80);
125
+ }
126
+ }
package/src/pastel.css ADDED
@@ -0,0 +1,121 @@
1
+ /* Cascade — Pastel Theme */
2
+ /* Playful/consumer, soft candy palette, pill controls, diffuse shadows */
3
+
4
+ @import '@cascivo/tokens';
5
+
6
+ @layer cascade.theme {
7
+ [data-theme='pastel'] {
8
+ color-scheme: light;
9
+
10
+ /* ── Surface ──────────────────────────────────────── */
11
+ --cascivo-color-background: oklch(0.99 0.01 330);
12
+ --cascivo-color-surface: oklch(0.975 0.013 330);
13
+ --cascivo-color-surface-2: oklch(0.958 0.016 330);
14
+ --cascivo-color-bg: var(--cascivo-color-background);
15
+ --cascivo-color-bg-subtle: var(--cascivo-color-surface);
16
+ --cascivo-color-surface-raised: var(--cascivo-color-surface);
17
+ --cascivo-color-surface-overlay: var(--cascivo-color-background);
18
+ --cascivo-color-border: oklch(0.92 0.02 330);
19
+ --cascivo-color-border-strong: oklch(0.86 0.028 325);
20
+ --cascivo-border-subtle: oklch(0.93 0.018 330);
21
+ --cascivo-border-default: oklch(0.88 0.024 328);
22
+ --cascivo-border-strong: oklch(0.8 0.03 325);
23
+
24
+ /* ── Text ─────────────────────────────────────────── */
25
+ --cascivo-color-foreground: oklch(0.32 0.03 320);
26
+ --cascivo-color-foreground-muted: oklch(0.58 0.025 325);
27
+ --cascivo-color-text: var(--cascivo-color-foreground);
28
+ --cascivo-color-text-subtle: var(--cascivo-color-foreground-muted);
29
+ --cascivo-color-text-muted: oklch(0.7 0.02 325);
30
+ --cascivo-color-text-on-accent: oklch(1 0 0);
31
+ --cascivo-color-text-on-destructive: oklch(1 0 0);
32
+
33
+ /* ── Accent — candy pink ──────────────────────────── */
34
+ --cascivo-color-accent: oklch(0.68 0.18 350);
35
+ --cascivo-color-accent-foreground: oklch(1 0 0);
36
+ --cascivo-color-accent-hover: oklch(0.62 0.19 350);
37
+ --cascivo-color-accent-active: oklch(0.56 0.2 350);
38
+ --cascivo-color-accent-subtle: oklch(0.96 0.04 350);
39
+ --cascivo-color-accent-muted: oklch(0.93 0.07 350);
40
+
41
+ /* ── Primary — accent-mapped ─────────────────────── */
42
+ --cascivo-color-primary: var(--cascivo-color-accent);
43
+ --cascivo-color-primary-fg: oklch(1 0 0);
44
+ --cascivo-color-primary-hover: var(--cascivo-color-accent-hover);
45
+ --cascivo-color-primary-active: var(--cascivo-color-accent-active);
46
+ --cascivo-color-active-bg: oklch(0.68 0.18 350 / 8%);
47
+
48
+ /* ── Destructive ──────────────────────────────────── */
49
+ --cascivo-color-destructive: oklch(0.58 0.18 22);
50
+ --cascivo-color-destructive-hover: oklch(0.52 0.19 22);
51
+ --cascivo-color-destructive-subtle: oklch(0.96 0.04 22);
52
+
53
+ /* ── Semantic status colors ───────────────────────── */
54
+ --cascivo-color-error: oklch(0.58 0.18 22);
55
+ --cascivo-color-warning: oklch(0.72 0.14 75);
56
+ --cascivo-color-success: oklch(0.62 0.14 165);
57
+ --cascivo-color-success-subtle: oklch(0.95 0.04 165);
58
+ --cascivo-color-warning-subtle: oklch(0.96 0.04 75);
59
+ --cascivo-color-info: oklch(0.68 0.18 350);
60
+ --cascivo-color-info-subtle: oklch(0.96 0.04 350);
61
+ --cascivo-color-success-foreground: oklch(0.46 0.13 165);
62
+ --cascivo-color-warning-foreground: oklch(0.5 0.13 75);
63
+
64
+ /* ── Radius — 16px pill ──────────────────────────── */
65
+ --cascivo-radius-base: 1rem;
66
+ --cascivo-radius-control: var(--cascivo-radius-base);
67
+ --cascivo-radius-surface: calc(var(--cascivo-radius-base) * 1.25);
68
+ --cascivo-radius-indicator: calc(var(--cascivo-radius-base) / 2);
69
+ --cascivo-radius-full: 9999px;
70
+ --cascivo-radius-component: var(--cascivo-radius-base);
71
+ --cascivo-radius-button: var(--cascivo-radius-base);
72
+ --cascivo-radius-input: var(--cascivo-radius-base);
73
+ --cascivo-radius-card: calc(var(--cascivo-radius-base) * 1.25);
74
+ --cascivo-radius-badge: var(--cascivo-radius-full);
75
+ --cascivo-radius-modal: calc(var(--cascivo-radius-base) * 1.5);
76
+
77
+ /* ── Shadows — diffuse soft, pink-tinted ─────────── */
78
+ --cascivo-shadow-xs: 0 1px 3px oklch(0.68 0.18 350 / 0.08);
79
+ --cascivo-shadow-sm:
80
+ 0 2px 6px oklch(0.68 0.18 350 / 0.1), 0 1px 2px oklch(0.68 0.18 350 / 0.06);
81
+ --cascivo-shadow-md:
82
+ 0 4px 12px oklch(0.68 0.18 350 / 0.1), 0 2px 4px oklch(0.68 0.18 350 / 0.06);
83
+ --cascivo-shadow-overlay:
84
+ 0 8px 32px oklch(0.68 0.18 350 / 0.14), 0 0 0 1px oklch(0.68 0.18 350 / 0.06);
85
+ --cascivo-shadow-lg: var(--cascivo-shadow-overlay);
86
+
87
+ /* ── Focus ring — thick soft with offset ─────────── */
88
+ --cascivo-ring-width: 3px;
89
+ --cascivo-ring-offset: 2px;
90
+ --cascivo-ring-color: color-mix(in oklch, var(--cascivo-color-accent) 45%, transparent);
91
+ --cascivo-color-focus-ring: oklch(0.68 0.18 350);
92
+ --cascivo-focus-ring: 0 0 0 var(--cascivo-ring-width) var(--cascivo-ring-color);
93
+
94
+ /* ── Chart overrides ─────────────────────────────── */
95
+ --cascivo-chart-1: oklch(0.64 0.09 55);
96
+ --cascivo-chart-2: oklch(0.46 0.09 200);
97
+ --cascivo-chart-3: oklch(0.64 0.1 27);
98
+ --cascivo-chart-4: oklch(0.46 0.09 280);
99
+ --cascivo-chart-5: oklch(0.64 0.08 123);
100
+ --cascivo-chart-6: oklch(0.46 0.09 338);
101
+ --cascivo-chart-7: oklch(0.64 0.07 60);
102
+ --cascivo-chart-8: oklch(0.46 0.09 240);
103
+ --cascivo-chart-grid: oklch(0.92 0.02 330);
104
+ --cascivo-chart-axis: oklch(0.7 0.02 325);
105
+
106
+ /* ── -content tokens (foreground ≥4.5:1 on paired background) ── */
107
+ --cascivo-color-primary-content: var(--cascivo-color-primary-fg);
108
+ --cascivo-color-accent-content: var(--cascivo-color-text-on-accent);
109
+ --cascivo-color-destructive-content: var(--cascivo-color-text-on-destructive);
110
+ --cascivo-color-info-content: oklch(1 0 0);
111
+ --cascivo-color-success-content: oklch(1 0 0);
112
+ --cascivo-color-warning-content: oklch(0.145 0 0);
113
+ --cascivo-color-error-content: oklch(1 0 0);
114
+
115
+ /* ── Secondary color role ────────────────────────── */
116
+ --cascivo-color-secondary: oklch(0.92 0.018 330);
117
+ --cascivo-color-secondary-content: oklch(0.32 0.03 320);
118
+ --cascivo-color-secondary-hover: oklch(0.86 0.024 328);
119
+ --cascivo-color-secondary-subtle: oklch(0.965 0.01 330);
120
+ }
121
+ }
package/src/terminal.css ADDED
@@ -0,0 +1,118 @@
1
+ /* Cascade — Terminal Theme */
2
+ /* Developer/CLI, phosphor green on near-black, zero radius, green glow */
3
+
4
+ @import '@cascivo/tokens';
5
+
6
+ @layer cascade.theme {
7
+ [data-theme='terminal'] {
8
+ color-scheme: dark;
9
+
10
+ /* ── Surface ──────────────────────────────────────── */
11
+ --cascivo-color-background: oklch(0.17 0.01 150);
12
+ --cascivo-color-surface: oklch(0.21 0.012 150);
13
+ --cascivo-color-surface-2: oklch(0.26 0.014 150);
14
+ --cascivo-color-bg: var(--cascivo-color-background);
15
+ --cascivo-color-bg-subtle: var(--cascivo-color-surface);
16
+ --cascivo-color-surface-raised: var(--cascivo-color-surface-2);
17
+ --cascivo-color-surface-overlay: var(--cascivo-color-surface);
18
+ --cascivo-color-border: oklch(0.4 0.08 150 / 60%);
19
+ --cascivo-color-border-strong: oklch(0.55 0.1 150 / 80%);
20
+ --cascivo-border-subtle: oklch(0.35 0.06 150 / 50%);
21
+ --cascivo-border-default: oklch(0.4 0.08 150 / 60%);
22
+ --cascivo-border-strong: oklch(0.55 0.1 150 / 80%);
23
+
24
+ /* ── Text ─────────────────────────────────────────── */
25
+ --cascivo-color-foreground: oklch(0.9 0.06 150);
26
+ --cascivo-color-foreground-muted: oklch(0.65 0.05 148);
27
+ --cascivo-color-text: var(--cascivo-color-foreground);
28
+ --cascivo-color-text-subtle: var(--cascivo-color-foreground-muted);
29
+ --cascivo-color-text-muted: oklch(0.48 0.04 148);
30
+ --cascivo-color-text-on-accent: oklch(0.17 0.01 150);
31
+ --cascivo-color-text-on-destructive: oklch(0.17 0.01 150);
32
+
33
+ /* ── Accent — bright phosphor green ──────────────── */
34
+ --cascivo-color-accent: oklch(0.82 0.2 145);
35
+ --cascivo-color-accent-foreground: oklch(0.17 0.01 150);
36
+ --cascivo-color-accent-hover: oklch(0.88 0.18 145);
37
+ --cascivo-color-accent-active: oklch(0.92 0.15 145);
38
+ --cascivo-color-accent-subtle: oklch(0.82 0.2 145 / 0.1);
39
+ --cascivo-color-accent-muted: oklch(0.82 0.2 145 / 0.2);
40
+
41
+ /* ── Primary — accent-mapped ─────────────────────── */
42
+ --cascivo-color-primary: var(--cascivo-color-accent);
43
+ --cascivo-color-primary-fg: oklch(0.17 0.01 150);
44
+ --cascivo-color-primary-hover: var(--cascivo-color-accent-hover);
45
+ --cascivo-color-primary-active: var(--cascivo-color-accent-active);
46
+ --cascivo-color-active-bg: oklch(0.82 0.2 145 / 0.1);
47
+
48
+ /* ── Destructive — red on dark green bg ───────────── */
49
+ --cascivo-color-destructive: oklch(0.72 0.16 22);
50
+ --cascivo-color-destructive-hover: oklch(0.78 0.14 22);
51
+ --cascivo-color-destructive-subtle: oklch(0.72 0.16 22 / 0.1);
52
+
53
+ /* ── Semantic status colors ───────────────────────── */
54
+ --cascivo-color-error: oklch(0.72 0.16 22);
55
+ --cascivo-color-warning: oklch(0.82 0.16 75);
56
+ --cascivo-color-success: oklch(0.82 0.2 145);
57
+ --cascivo-color-success-subtle: oklch(0.82 0.2 145 / 0.1);
58
+ --cascivo-color-warning-subtle: oklch(0.82 0.16 75 / 0.1);
59
+ --cascivo-color-info: oklch(0.82 0.2 145);
60
+ --cascivo-color-info-subtle: oklch(0.82 0.2 145 / 0.1);
61
+ --cascivo-color-success-foreground: oklch(0.82 0.2 145);
62
+ --cascivo-color-warning-foreground: oklch(0.82 0.16 75);
63
+
64
+ /* ── Radius — zero ───────────────────────────────── */
65
+ --cascivo-radius-base: 0;
66
+ --cascivo-radius-control: 0;
67
+ --cascivo-radius-surface: 0;
68
+ --cascivo-radius-indicator: 0;
69
+ --cascivo-radius-full: 0;
70
+ --cascivo-radius-component: 0;
71
+ --cascivo-radius-button: 0;
72
+ --cascivo-radius-input: 0;
73
+ --cascivo-radius-card: 0;
74
+ --cascivo-radius-badge: 0;
75
+ --cascivo-radius-modal: 0;
76
+
77
+ /* ── Shadows — none on surfaces, green glow on overlays ── */
78
+ --cascivo-shadow-xs: none;
79
+ --cascivo-shadow-sm: none;
80
+ --cascivo-shadow-md: none;
81
+ --cascivo-shadow-overlay: 0 0 0 1px oklch(0.82 0.2 145 / 0.3), 0 4px 24px oklch(0 0 0 / 0.5);
82
+ --cascivo-shadow-lg: var(--cascivo-shadow-overlay);
83
+
84
+ /* ── Focus ring — green glow ─────────────────────── */
85
+ --cascivo-ring-width: 2px;
86
+ --cascivo-ring-offset: 0px;
87
+ --cascivo-ring-color: color-mix(in oklch, var(--cascivo-color-accent) 60%, transparent);
88
+ --cascivo-color-focus-ring: oklch(0.82 0.2 145);
89
+ --cascivo-focus-ring: 0 0 0 var(--cascivo-ring-width) var(--cascivo-ring-color);
90
+
91
+ /* ── Chart overrides ─────────────────────────────── */
92
+ --cascivo-chart-1: oklch(0.82 0.14 75);
93
+ --cascivo-chart-2: oklch(0.82 0.11 180);
94
+ --cascivo-chart-3: oklch(0.78 0.15 150);
95
+ --cascivo-chart-4: oklch(0.96 0.14 110);
96
+ --cascivo-chart-5: oklch(0.72 0.12 200);
97
+ --cascivo-chart-6: oklch(0.72 0.15 50);
98
+ --cascivo-chart-7: oklch(0.75 0.1 340);
99
+ --cascivo-chart-8: oklch(0.78 0.03 160);
100
+ --cascivo-chart-grid: oklch(0.4 0.08 150 / 40%);
101
+ --cascivo-chart-axis: oklch(0.65 0.05 148);
102
+
103
+ /* ── -content tokens (foreground ≥4.5:1 on paired background) ── */
104
+ --cascivo-color-primary-content: var(--cascivo-color-primary-fg);
105
+ --cascivo-color-accent-content: var(--cascivo-color-text-on-accent);
106
+ --cascivo-color-destructive-content: var(--cascivo-color-text-on-destructive);
107
+ --cascivo-color-info-content: oklch(0.17 0.01 150);
108
+ --cascivo-color-success-content: oklch(0.17 0.01 150);
109
+ --cascivo-color-warning-content: oklch(0.145 0 0);
110
+ --cascivo-color-error-content: oklch(0.17 0.01 150);
111
+
112
+ /* ── Secondary color role ────────────────────────── */
113
+ --cascivo-color-secondary: oklch(0.28 0.05 148);
114
+ --cascivo-color-secondary-content: oklch(0.82 0.1 145);
115
+ --cascivo-color-secondary-hover: oklch(0.34 0.06 148);
116
+ --cascivo-color-secondary-subtle: oklch(0.22 0.03 148);
117
+ }
118
+ }
package/src/warm.css ADDED
@@ -0,0 +1,119 @@
1
+ /* Cascade — Warm Theme */
2
+ /* Organic/approachable, warm neutrals, rounded */
3
+
4
+ @import '@cascivo/tokens';
5
+
6
+ @layer cascade.theme {
7
+ [data-theme='warm'] {
8
+ color-scheme: light;
9
+
10
+ /* ── Surface ──────────────────────────────────────── */
11
+ --cascivo-color-background: oklch(0.995 0.006 80);
12
+ --cascivo-color-surface: oklch(0.975 0.01 80);
13
+ --cascivo-color-surface-2: oklch(0.95 0.014 80);
14
+ --cascivo-color-bg: var(--cascivo-color-background);
15
+ --cascivo-color-bg-subtle: var(--cascivo-color-surface);
16
+ --cascivo-color-surface-raised: var(--cascivo-color-surface);
17
+ --cascivo-color-surface-overlay: var(--cascivo-color-background);
18
+ --cascivo-color-border: oklch(0.92 0.018 80);
19
+ --cascivo-color-border-strong: oklch(0.86 0.025 75);
20
+ --cascivo-border-subtle: oklch(0.92 0.018 80);
21
+ --cascivo-border-default: oklch(0.86 0.025 75);
22
+ --cascivo-border-strong: oklch(0.72 0.04 70);
23
+
24
+ /* ── Text ─────────────────────────────────────────── */
25
+ --cascivo-color-foreground: oklch(0.18 0.015 50);
26
+ --cascivo-color-foreground-muted: oklch(0.52 0.03 60);
27
+ --cascivo-color-text: var(--cascivo-color-foreground);
28
+ --cascivo-color-text-subtle: var(--cascivo-color-foreground-muted);
29
+ --cascivo-color-text-muted: oklch(0.64 0.025 65);
30
+ --cascivo-color-text-on-accent: oklch(0.18 0.015 50);
31
+ --cascivo-color-text-on-destructive: oklch(1 0 0);
32
+
33
+ /* ── Accent ───────────────────────────────────────── */
34
+ --cascivo-color-accent: oklch(0.768 0.145 75);
35
+ --cascivo-color-accent-foreground: oklch(0.18 0.015 50);
36
+ --cascivo-color-accent-hover: oklch(0.7 0.155 70);
37
+ --cascivo-color-accent-active: oklch(0.64 0.155 65);
38
+ --cascivo-color-accent-subtle: oklch(0.768 0.145 75 / 0.1);
39
+ --cascivo-color-accent-muted: oklch(0.768 0.145 75 / 0.2);
40
+
41
+ /* ── Primary — warm keeps its warm fill ── */
42
+ --cascivo-color-primary: var(--cascivo-color-accent);
43
+ --cascivo-color-primary-fg: var(--cascivo-color-accent-foreground);
44
+ --cascivo-color-primary-hover: var(--cascivo-color-accent-hover);
45
+ --cascivo-color-primary-active: var(--cascivo-color-accent-active);
46
+ --cascivo-color-active-bg: oklch(0.18 0.015 50 / 7%);
47
+
48
+ /* ── Destructive ──────────────────────────────────── */
49
+ --cascivo-color-destructive: var(--cascivo-red-600);
50
+ --cascivo-color-destructive-hover: var(--cascivo-red-700);
51
+ --cascivo-color-destructive-subtle: var(--cascivo-red-50);
52
+
53
+ /* ── Semantic status colors ───────────────────────── */
54
+ --cascivo-color-error: oklch(0.628 0.188 22);
55
+ --cascivo-color-warning: oklch(0.768 0.145 75);
56
+ --cascivo-color-success: oklch(0.648 0.15 145);
57
+ --cascivo-color-success-subtle: var(--cascivo-green-50);
58
+ --cascivo-color-warning-subtle: oklch(0.768 0.145 75 / 0.1);
59
+ --cascivo-color-info: var(--cascivo-blue-600);
60
+ --cascivo-color-info-subtle: var(--cascivo-blue-50);
61
+ --cascivo-color-success-foreground: oklch(0.45 0.14 145);
62
+ --cascivo-color-warning-foreground: oklch(0.5 0.14 75);
63
+
64
+ /* ── Radius — one knob, warmer = rounder (8px) ────── */
65
+ --cascivo-radius-base: 0.5rem;
66
+ --cascivo-radius-control: var(--cascivo-radius-base);
67
+ --cascivo-radius-surface: calc(var(--cascivo-radius-base) * 1.66);
68
+ --cascivo-radius-indicator: calc(var(--cascivo-radius-base) / 2);
69
+ --cascivo-radius-full: 9999px;
70
+ --cascivo-radius-component: var(--cascivo-radius-base);
71
+ --cascivo-radius-button: var(--cascivo-radius-base);
72
+ --cascivo-radius-input: var(--cascivo-radius-base);
73
+ --cascivo-radius-card: calc(var(--cascivo-radius-base) * 1.66);
74
+ --cascivo-radius-badge: var(--cascivo-radius-full);
75
+ --cascivo-radius-modal: calc(var(--cascivo-radius-base) * 2);
76
+
77
+ /* ── Shadows ─────────────────────────────────────── */
78
+ --cascivo-shadow-xs: 0 1px 2px oklch(0.2 0.04 60 / 0.06);
79
+ --cascivo-shadow-sm: 0 1px 3px oklch(0.2 0.04 60 / 0.12);
80
+ --cascivo-shadow-md: 0 4px 6px oklch(0.2 0.04 60 / 0.1), 0 2px 4px oklch(0.2 0.04 60 / 0.06);
81
+ --cascivo-shadow-overlay:
82
+ 0 4px 32px oklch(0.2 0.04 60 / 0.18), 0 0 0 1px oklch(0.2 0.04 60 / 0.06);
83
+ --cascivo-shadow-lg: var(--cascivo-shadow-overlay);
84
+
85
+ /* ── Focus ring ───────────────────────────────────── */
86
+ --cascivo-ring-width: 2px;
87
+ --cascivo-ring-offset: 0px;
88
+ --cascivo-ring-color: color-mix(in oklch, var(--cascivo-color-accent) 55%, transparent);
89
+ --cascivo-color-focus-ring: oklch(0.768 0.145 75);
90
+ --cascivo-focus-ring: 0 0 0 var(--cascivo-ring-width) var(--cascivo-ring-color);
91
+
92
+ /* ── Chart overrides ─────────────────────────────── */
93
+ --cascivo-chart-1: oklch(0.62 0.15 65);
94
+ --cascivo-chart-2: oklch(0.6 0.09 235);
95
+ --cascivo-chart-3: oklch(0.6 0.13 135);
96
+ --cascivo-chart-4: oklch(0.6 0.18 55);
97
+ --cascivo-chart-5: oklch(0.5 0.11 270);
98
+ --cascivo-chart-6: oklch(0.6 0.18 30);
99
+ --cascivo-chart-7: oklch(0.62 0.12 345);
100
+ --cascivo-chart-8: oklch(0.5 0.12 200);
101
+ --cascivo-chart-grid: oklch(0.92 0.018 80);
102
+ --cascivo-chart-axis: oklch(0.64 0.025 65);
103
+
104
+ /* ── -content tokens (foreground ≥4.5:1 on paired background) ── */
105
+ --cascivo-color-primary-content: var(--cascivo-color-primary-fg);
106
+ --cascivo-color-accent-content: var(--cascivo-color-text-on-accent);
107
+ --cascivo-color-destructive-content: var(--cascivo-color-text-on-destructive);
108
+ --cascivo-color-info-content: oklch(1 0 0);
109
+ --cascivo-color-success-content: oklch(1 0 0);
110
+ --cascivo-color-warning-content: oklch(0.145 0 0);
111
+ --cascivo-color-error-content: oklch(1 0 0);
112
+
113
+ /* ── Secondary color role ────────────────────────── */
114
+ --cascivo-color-secondary: oklch(0.91 0.012 80);
115
+ --cascivo-color-secondary-content: oklch(0.28 0.015 70);
116
+ --cascivo-color-secondary-hover: oklch(0.85 0.018 75);
117
+ --cascivo-color-secondary-subtle: oklch(0.965 0.007 80);
118
+ }
119
+ }