@cascivo/themes 0.2.4 → 0.2.7

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 (15) hide show
  1. package/package.json +5 -3
  2. package/src/all.css +1 -0
  3. package/src/arcade.css +18 -6
  4. package/src/brutalist.css +12 -4
  5. package/src/corporate.css +18 -6
  6. package/src/cyberpunk.css +16 -6
  7. package/src/dark.css +20 -6
  8. package/src/flat.css +17 -7
  9. package/src/light.css +10 -4
  10. package/src/midnight.css +18 -6
  11. package/src/minimal.css +19 -7
  12. package/src/pastel.css +16 -6
  13. package/src/tailwind.css +50 -0
  14. package/src/terminal.css +18 -6
  15. package/src/warm.css +8 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cascivo/themes",
3
- "version": "0.2.4",
3
+ "version": "0.2.7",
4
4
  "private": false,
5
5
  "description": "First-party cascivo themes: light, dark, warm, flat, minimal, midnight, pastel, brutalist, corporate, terminal, cyberpunk, arcade",
6
6
  "keywords": [
@@ -54,7 +54,9 @@
54
54
  "./cyberpunk": "./src/cyberpunk.css",
55
55
  "./cyberpunk.css": "./src/cyberpunk.css",
56
56
  "./arcade": "./src/arcade.css",
57
- "./arcade.css": "./src/arcade.css"
57
+ "./arcade.css": "./src/arcade.css",
58
+ "./tailwind": "./src/tailwind.css",
59
+ "./tailwind.css": "./src/tailwind.css"
58
60
  },
59
61
  "publishConfig": {
60
62
  "access": "public",
@@ -64,7 +66,7 @@
64
66
  "@types/node": "^25",
65
67
  "typescript": "^5",
66
68
  "vite-plus": "^0.2.1",
67
- "@cascivo/tokens": "0.3.1"
69
+ "@cascivo/tokens": "0.3.5"
68
70
  },
69
71
  "peerDependencies": {
70
72
  "@cascivo/tokens": ">=0.2.0"
package/src/all.css CHANGED
@@ -13,6 +13,7 @@
13
13
  Component CSS (@cascivo/react/styles.css) adds cascivo.component on top. */
14
14
 
15
15
  @import '@cascivo/tokens';
16
+ @import '@cascivo/tokens/properties.css';
16
17
  @import './base.css';
17
18
  @import './light.css';
18
19
  @import './dark.css';
package/src/arcade.css CHANGED
@@ -34,14 +34,23 @@
34
34
  --cascivo-color-text: var(--cascivo-color-foreground);
35
35
  --cascivo-color-text-subtle: var(--cascivo-color-foreground-muted);
36
36
  --cascivo-color-text-muted: oklch(0.52 0.02 265);
37
- --cascivo-color-text-on-accent: oklch(0.98 0 0);
38
- --cascivo-color-text-on-destructive: oklch(0.98 0 0);
39
-
37
+ --cascivo-color-text-on-accent: oklch(0.98 0 0); /* static fallback */
38
+ --cascivo-color-text-on-accent: contrast-color(
39
+ var(--cascivo-color-accent)
40
+ ); /* auto-contrast (WCAG) */
41
+ --cascivo-color-text-on-destructive: oklch(0.98 0 0); /* static fallback */
42
+ --cascivo-color-text-on-destructive: contrast-color(
43
+ var(--cascivo-color-destructive)
44
+ ); /* auto-contrast (WCAG) */
40
45
  /* ── Accent — coin-op red ─────────────────────────── */
41
46
  --cascivo-color-accent: oklch(0.55 0.22 27);
42
47
  --cascivo-color-accent-foreground: oklch(0.98 0 0);
43
- --cascivo-color-accent-hover: oklch(0.49 0.23 27);
44
- --cascivo-color-accent-active: oklch(0.44 0.23 27);
48
+ --cascivo-color-accent-hover: oklch(0.49 0.23 27); /* static fallback */
49
+ --cascivo-color-accent-hover: oklch(from var(--cascivo-color-accent) 0.49 0.23 h); /* derived */
50
+ --cascivo-color-accent-active: oklch(0.44 0.23 27); /* static fallback */
51
+ --cascivo-color-accent-active: oklch(
52
+ from var(--cascivo-color-accent) 0.44 0.23 h
53
+ ); /* derived */
45
54
  --cascivo-color-accent-subtle: oklch(0.55 0.22 27 / 0.12);
46
55
  --cascivo-color-accent-muted: oklch(0.55 0.22 27 / 0.2);
47
56
 
@@ -54,7 +63,10 @@
54
63
 
55
64
  /* ── Destructive ──────────────────────────────────── */
56
65
  --cascivo-color-destructive: oklch(0.52 0.24 25);
57
- --cascivo-color-destructive-hover: oklch(0.46 0.24 25);
66
+ --cascivo-color-destructive-hover: oklch(0.46 0.24 25); /* static fallback */
67
+ --cascivo-color-destructive-hover: oklch(
68
+ from var(--cascivo-color-destructive) 0.46 0.24 h
69
+ ); /* derived */
58
70
  --cascivo-color-destructive-subtle: oklch(0.95 0.05 25);
59
71
 
60
72
  /* ── Semantic status colors ───────────────────────── */
package/src/brutalist.css CHANGED
@@ -34,9 +34,14 @@
34
34
  --cascivo-color-text: var(--cascivo-color-foreground);
35
35
  --cascivo-color-text-subtle: var(--cascivo-color-foreground-muted);
36
36
  --cascivo-color-text-muted: oklch(0.5 0 0);
37
- --cascivo-color-text-on-accent: oklch(0.1 0 0);
38
- --cascivo-color-text-on-destructive: oklch(1 0 0);
39
-
37
+ --cascivo-color-text-on-accent: oklch(0.1 0 0); /* static fallback */
38
+ --cascivo-color-text-on-accent: contrast-color(
39
+ var(--cascivo-color-accent)
40
+ ); /* auto-contrast (WCAG) */
41
+ --cascivo-color-text-on-destructive: oklch(1 0 0); /* static fallback */
42
+ --cascivo-color-text-on-destructive: contrast-color(
43
+ var(--cascivo-color-destructive)
44
+ ); /* auto-contrast (WCAG) */
40
45
  /* ── Accent — acid yellow ─────────────────────────── */
41
46
  --cascivo-color-accent: oklch(0.88 0.19 105);
42
47
  --cascivo-color-accent-foreground: oklch(0.1 0 0);
@@ -54,7 +59,10 @@
54
59
 
55
60
  /* ── Destructive ──────────────────────────────────── */
56
61
  --cascivo-color-destructive: oklch(0.52 0.22 22);
57
- --cascivo-color-destructive-hover: oklch(0.46 0.23 22);
62
+ --cascivo-color-destructive-hover: oklch(0.46 0.23 22); /* static fallback */
63
+ --cascivo-color-destructive-hover: oklch(
64
+ from var(--cascivo-color-destructive) 0.46 0.23 h
65
+ ); /* derived */
58
66
  --cascivo-color-destructive-subtle: oklch(0.95 0.05 22);
59
67
 
60
68
  /* ── Semantic status colors ───────────────────────── */
package/src/corporate.css CHANGED
@@ -34,14 +34,23 @@
34
34
  --cascivo-color-text: var(--cascivo-color-foreground);
35
35
  --cascivo-color-text-subtle: var(--cascivo-color-foreground-muted);
36
36
  --cascivo-color-text-muted: oklch(0.65 0.012 255);
37
- --cascivo-color-text-on-accent: oklch(1 0 0);
38
- --cascivo-color-text-on-destructive: oklch(1 0 0);
39
-
37
+ --cascivo-color-text-on-accent: oklch(1 0 0); /* static fallback */
38
+ --cascivo-color-text-on-accent: contrast-color(
39
+ var(--cascivo-color-accent)
40
+ ); /* auto-contrast (WCAG) */
41
+ --cascivo-color-text-on-destructive: oklch(1 0 0); /* static fallback */
42
+ --cascivo-color-text-on-destructive: contrast-color(
43
+ var(--cascivo-color-destructive)
44
+ ); /* auto-contrast (WCAG) */
40
45
  /* ── Accent — conservative blue ──────────────────── */
41
46
  --cascivo-color-accent: oklch(0.5 0.16 255);
42
47
  --cascivo-color-accent-foreground: oklch(1 0 0);
43
- --cascivo-color-accent-hover: oklch(0.44 0.17 255);
44
- --cascivo-color-accent-active: oklch(0.38 0.16 255);
48
+ --cascivo-color-accent-hover: oklch(0.44 0.17 255); /* static fallback */
49
+ --cascivo-color-accent-hover: oklch(from var(--cascivo-color-accent) 0.44 0.17 h); /* derived */
50
+ --cascivo-color-accent-active: oklch(0.38 0.16 255); /* static fallback */
51
+ --cascivo-color-accent-active: oklch(
52
+ from var(--cascivo-color-accent) 0.38 0.16 h
53
+ ); /* derived */
45
54
  --cascivo-color-accent-subtle: oklch(0.95 0.03 255);
46
55
  --cascivo-color-accent-muted: oklch(0.9 0.05 255);
47
56
 
@@ -54,7 +63,10 @@
54
63
 
55
64
  /* ── Destructive ──────────────────────────────────── */
56
65
  --cascivo-color-destructive: oklch(0.54 0.19 22);
57
- --cascivo-color-destructive-hover: oklch(0.48 0.2 22);
66
+ --cascivo-color-destructive-hover: oklch(0.48 0.2 22); /* static fallback */
67
+ --cascivo-color-destructive-hover: oklch(
68
+ from var(--cascivo-color-destructive) 0.48 0.2 h
69
+ ); /* derived */
58
70
  --cascivo-color-destructive-subtle: oklch(0.97 0.02 22);
59
71
 
60
72
  /* ── Semantic status colors ───────────────────────── */
package/src/cyberpunk.css CHANGED
@@ -34,14 +34,21 @@
34
34
  --cascivo-color-text: var(--cascivo-color-foreground);
35
35
  --cascivo-color-text-subtle: var(--cascivo-color-foreground-muted);
36
36
  --cascivo-color-text-muted: oklch(0.55 0.05 300);
37
- --cascivo-color-text-on-accent: oklch(0.16 0.03 285);
38
- --cascivo-color-text-on-destructive: oklch(0.16 0.03 285);
39
-
37
+ --cascivo-color-text-on-accent: oklch(0.16 0.03 285); /* static fallback */
38
+ --cascivo-color-text-on-accent: contrast-color(
39
+ var(--cascivo-color-accent)
40
+ ); /* auto-contrast (WCAG) */
41
+ --cascivo-color-text-on-destructive: oklch(0.16 0.03 285); /* static fallback */
42
+ --cascivo-color-text-on-destructive: contrast-color(
43
+ var(--cascivo-color-destructive)
44
+ ); /* auto-contrast (WCAG) */
40
45
  /* ── Accent — neon magenta ───────────────────────── */
41
46
  --cascivo-color-accent: oklch(0.7 0.25 330);
42
47
  --cascivo-color-accent-foreground: oklch(0.16 0.03 285);
43
- --cascivo-color-accent-hover: oklch(0.76 0.23 330);
44
- --cascivo-color-accent-active: oklch(0.82 0.2 330);
48
+ --cascivo-color-accent-hover: oklch(0.76 0.23 330); /* static fallback */
49
+ --cascivo-color-accent-hover: oklch(from var(--cascivo-color-accent) 0.76 0.23 h); /* derived */
50
+ --cascivo-color-accent-active: oklch(0.82 0.2 330); /* static fallback */
51
+ --cascivo-color-accent-active: oklch(from var(--cascivo-color-accent) 0.82 0.2 h); /* derived */
45
52
  --cascivo-color-accent-subtle: oklch(0.7 0.25 330 / 0.12);
46
53
  --cascivo-color-accent-muted: oklch(0.7 0.25 330 / 0.22);
47
54
 
@@ -54,7 +61,10 @@
54
61
 
55
62
  /* ── Destructive — neon red ───────────────────────── */
56
63
  --cascivo-color-destructive: oklch(0.65 0.25 18);
57
- --cascivo-color-destructive-hover: oklch(0.72 0.22 18);
64
+ --cascivo-color-destructive-hover: oklch(0.72 0.22 18); /* static fallback */
65
+ --cascivo-color-destructive-hover: oklch(
66
+ from var(--cascivo-color-destructive) 0.72 0.22 h
67
+ ); /* derived */
58
68
  --cascivo-color-destructive-subtle: oklch(0.65 0.25 18 / 0.12);
59
69
 
60
70
  /* ── Semantic status colors ───────────────────────── */
package/src/dark.css CHANGED
@@ -35,20 +35,34 @@
35
35
  --cascivo-color-text: var(--cascivo-color-foreground);
36
36
  --cascivo-color-text-subtle: var(--cascivo-color-foreground-muted);
37
37
  --cascivo-color-text-muted: oklch(0.554 0.018 264);
38
- --cascivo-color-text-on-accent: oklch(0.145 0.005 250);
39
- --cascivo-color-text-on-destructive: oklch(1 0 0);
40
-
38
+ --cascivo-color-text-on-accent: oklch(0.145 0.005 250); /* static fallback */
39
+ --cascivo-color-text-on-accent: contrast-color(
40
+ var(--cascivo-color-accent)
41
+ ); /* auto-contrast (WCAG) */
42
+ --cascivo-color-text-on-destructive: oklch(1 0 0); /* static fallback */
43
+ --cascivo-color-text-on-destructive: contrast-color(
44
+ var(--cascivo-color-destructive)
45
+ ); /* auto-contrast (WCAG) */
41
46
  /* ── Accent ───────────────────────────────────────── */
42
47
  --cascivo-color-accent: oklch(0.65 0.2 250);
43
48
  --cascivo-color-accent-foreground: oklch(0.145 0.005 250);
44
- --cascivo-color-accent-hover: oklch(0.707 0.18 250);
45
- --cascivo-color-accent-active: oklch(0.808 0.14 250);
49
+ --cascivo-color-accent-hover: oklch(0.707 0.18 250); /* static fallback */
50
+ --cascivo-color-accent-hover: oklch(
51
+ from var(--cascivo-color-accent) 0.707 0.18 h
52
+ ); /* derived */
53
+ --cascivo-color-accent-active: oklch(0.808 0.14 250); /* static fallback */
54
+ --cascivo-color-accent-active: oklch(
55
+ from var(--cascivo-color-accent) 0.808 0.14 h
56
+ ); /* derived */
46
57
  --cascivo-color-accent-subtle: oklch(0.623 0.214 250 / 0.1);
47
58
  --cascivo-color-accent-muted: oklch(0.623 0.214 250 / 0.2);
48
59
 
49
60
  /* ── Destructive ──────────────────────────────────── */
50
61
  --cascivo-color-destructive: oklch(0.72 0.16 22);
51
- --cascivo-color-destructive-hover: oklch(0.628 0.188 22);
62
+ --cascivo-color-destructive-hover: oklch(0.628 0.188 22); /* static fallback */
63
+ --cascivo-color-destructive-hover: oklch(
64
+ from var(--cascivo-color-destructive) 0.628 0.188 h
65
+ ); /* derived */
52
66
  --cascivo-color-destructive-subtle: oklch(0.628 0.188 22 / 0.1);
53
67
 
54
68
  /* ── Semantic status colors ───────────────────────── */
package/src/flat.css CHANGED
@@ -26,8 +26,8 @@
26
26
  /* ── Accent — vivid green ────────────────────────── */
27
27
  --cascivo-color-accent: oklch(0.5 0.2 145);
28
28
  --cascivo-color-accent-foreground: oklch(1 0 0);
29
- --cascivo-color-accent-hover: oklch(0.45 0.21 145);
30
-
29
+ --cascivo-color-accent-hover: oklch(0.45 0.21 145); /* static fallback */
30
+ --cascivo-color-accent-hover: oklch(from var(--cascivo-color-accent) 0.45 0.21 h); /* derived */
31
31
  /* ── Primary — accent-mapped ─────────────────────── */
32
32
  --cascivo-color-primary: var(--cascivo-color-accent);
33
33
  --cascivo-color-primary-fg: var(--cascivo-color-accent-foreground);
@@ -74,15 +74,25 @@
74
74
  --cascivo-color-text: var(--cascivo-color-foreground);
75
75
  --cascivo-color-text-subtle: var(--cascivo-color-foreground-muted);
76
76
  --cascivo-color-text-muted: oklch(0.55 0 0);
77
- --cascivo-color-text-on-accent: oklch(1 0 0);
78
- --cascivo-color-text-on-destructive: oklch(1 0 0);
79
-
80
- --cascivo-color-accent-active: oklch(0.4 0.21 145);
77
+ --cascivo-color-text-on-accent: oklch(1 0 0); /* static fallback */
78
+ --cascivo-color-text-on-accent: contrast-color(
79
+ var(--cascivo-color-accent)
80
+ ); /* auto-contrast (WCAG) */
81
+ --cascivo-color-text-on-destructive: oklch(1 0 0); /* static fallback */
82
+ --cascivo-color-text-on-destructive: contrast-color(
83
+ var(--cascivo-color-destructive)
84
+ ); /* auto-contrast (WCAG) */
85
+ --cascivo-color-accent-active: oklch(0.4 0.21 145); /* static fallback */
86
+
87
+ --cascivo-color-accent-active: oklch(from var(--cascivo-color-accent) 0.4 0.21 h); /* derived */
81
88
  --cascivo-color-accent-subtle: oklch(0.95 0.04 145);
82
89
  --cascivo-color-accent-muted: oklch(0.9 0.07 145);
83
90
 
84
91
  --cascivo-color-destructive: oklch(0.52 0.2 22);
85
- --cascivo-color-destructive-hover: oklch(0.46 0.21 22);
92
+ --cascivo-color-destructive-hover: oklch(0.46 0.21 22); /* static fallback */
93
+ --cascivo-color-destructive-hover: oklch(
94
+ from var(--cascivo-color-destructive) 0.46 0.21 h
95
+ ); /* derived */
86
96
  --cascivo-color-destructive-subtle: oklch(0.95 0.04 22);
87
97
 
88
98
  --cascivo-color-success-subtle: oklch(0.95 0.04 145);
package/src/light.css CHANGED
@@ -36,15 +36,21 @@
36
36
  --cascivo-color-text: var(--cascivo-color-foreground);
37
37
  --cascivo-color-text-subtle: var(--cascivo-gray-600);
38
38
  --cascivo-color-text-muted: var(--cascivo-gray-400);
39
- --cascivo-color-text-on-accent: oklch(1 0 0);
40
- --cascivo-color-text-on-destructive: oklch(1 0 0);
41
-
39
+ --cascivo-color-text-on-accent: oklch(1 0 0); /* static fallback */
40
+ --cascivo-color-text-on-accent: contrast-color(
41
+ var(--cascivo-color-accent)
42
+ ); /* auto-contrast (WCAG) */
43
+ --cascivo-color-text-on-destructive: oklch(1 0 0); /* static fallback */
44
+ --cascivo-color-text-on-destructive: contrast-color(
45
+ var(--cascivo-color-destructive)
46
+ ); /* auto-contrast (WCAG) */
42
47
  /* ── Accent (links, focus, info, active tint) ───────── */
43
48
  /* L lowered 0.623→0.52 so accent-as-link-text clears WCAG 2.2 AA 4.5:1 on
44
49
  white (was 3.55:1). Hover darkened to stay below the new base. */
45
50
  --cascivo-color-accent: oklch(0.52 0.2 250);
46
51
  --cascivo-color-accent-foreground: oklch(1 0 0);
47
- --cascivo-color-accent-hover: oklch(0.45 0.2 250);
52
+ --cascivo-color-accent-hover: oklch(0.45 0.2 250); /* static fallback */
53
+ --cascivo-color-accent-hover: oklch(from var(--cascivo-color-accent) 0.45 0.2 h); /* derived */
48
54
  --cascivo-color-accent-active: var(--cascivo-blue-800);
49
55
  --cascivo-color-accent-subtle: var(--cascivo-blue-50);
50
56
  --cascivo-color-accent-muted: var(--cascivo-blue-100);
package/src/midnight.css CHANGED
@@ -34,14 +34,23 @@
34
34
  --cascivo-color-text: var(--cascivo-color-foreground);
35
35
  --cascivo-color-text-subtle: var(--cascivo-color-foreground-muted);
36
36
  --cascivo-color-text-muted: oklch(0.52 0.02 280);
37
- --cascivo-color-text-on-accent: oklch(1 0 0);
38
- --cascivo-color-text-on-destructive: oklch(1 0 0);
39
-
37
+ --cascivo-color-text-on-accent: oklch(1 0 0); /* static fallback */
38
+ --cascivo-color-text-on-accent: contrast-color(
39
+ var(--cascivo-color-accent)
40
+ ); /* auto-contrast (WCAG) */
41
+ --cascivo-color-text-on-destructive: oklch(1 0 0); /* static fallback */
42
+ --cascivo-color-text-on-destructive: contrast-color(
43
+ var(--cascivo-color-destructive)
44
+ ); /* auto-contrast (WCAG) */
40
45
  /* ── Accent — violet ──────────────────────────────── */
41
46
  --cascivo-color-accent: oklch(0.7 0.22 290);
42
47
  --cascivo-color-accent-foreground: oklch(1 0 0);
43
- --cascivo-color-accent-hover: oklch(0.76 0.2 290);
44
- --cascivo-color-accent-active: oklch(0.82 0.17 290);
48
+ --cascivo-color-accent-hover: oklch(0.76 0.2 290); /* static fallback */
49
+ --cascivo-color-accent-hover: oklch(from var(--cascivo-color-accent) 0.76 0.2 h); /* derived */
50
+ --cascivo-color-accent-active: oklch(0.82 0.17 290); /* static fallback */
51
+ --cascivo-color-accent-active: oklch(
52
+ from var(--cascivo-color-accent) 0.82 0.17 h
53
+ ); /* derived */
45
54
  --cascivo-color-accent-subtle: oklch(0.7 0.22 290 / 0.12);
46
55
  --cascivo-color-accent-muted: oklch(0.7 0.22 290 / 0.22);
47
56
 
@@ -54,7 +63,10 @@
54
63
 
55
64
  /* ── Destructive ──────────────────────────────────── */
56
65
  --cascivo-color-destructive: oklch(0.72 0.16 22);
57
- --cascivo-color-destructive-hover: oklch(0.628 0.188 22);
66
+ --cascivo-color-destructive-hover: oklch(0.628 0.188 22); /* static fallback */
67
+ --cascivo-color-destructive-hover: oklch(
68
+ from var(--cascivo-color-destructive) 0.628 0.188 h
69
+ ); /* derived */
58
70
  --cascivo-color-destructive-subtle: oklch(0.628 0.188 22 / 0.1);
59
71
 
60
72
  /* ── Semantic status colors ───────────────────────── */
package/src/minimal.css CHANGED
@@ -26,8 +26,8 @@
26
26
  /* ── Accent — monochrome ─────────────────────────── */
27
27
  --cascivo-color-accent: oklch(0.25 0.01 80);
28
28
  --cascivo-color-accent-foreground: oklch(0.98 0.005 80);
29
- --cascivo-color-accent-hover: oklch(0.2 0.01 80);
30
-
29
+ --cascivo-color-accent-hover: oklch(0.2 0.01 80); /* static fallback */
30
+ --cascivo-color-accent-hover: oklch(from var(--cascivo-color-accent) 0.2 0.01 h); /* derived */
31
31
  /* ── Primary — accent-mapped ─────────────────────── */
32
32
  --cascivo-color-primary: var(--cascivo-color-accent);
33
33
  --cascivo-color-primary-fg: oklch(0.985 0 0);
@@ -74,15 +74,27 @@
74
74
  --cascivo-color-text: var(--cascivo-color-foreground);
75
75
  --cascivo-color-text-subtle: var(--cascivo-color-foreground-muted);
76
76
  --cascivo-color-text-muted: oklch(0.65 0.012 80);
77
- --cascivo-color-text-on-accent: oklch(0.98 0.005 80);
78
- --cascivo-color-text-on-destructive: oklch(0.98 0.005 80);
79
-
80
- --cascivo-color-accent-active: oklch(0.32 0.01 80);
77
+ --cascivo-color-text-on-accent: oklch(0.98 0.005 80); /* static fallback */
78
+ --cascivo-color-text-on-accent: contrast-color(
79
+ var(--cascivo-color-accent)
80
+ ); /* auto-contrast (WCAG) */
81
+ --cascivo-color-text-on-destructive: oklch(0.98 0.005 80); /* static fallback */
82
+ --cascivo-color-text-on-destructive: contrast-color(
83
+ var(--cascivo-color-destructive)
84
+ ); /* auto-contrast (WCAG) */
85
+ --cascivo-color-accent-active: oklch(0.32 0.01 80); /* static fallback */
86
+
87
+ --cascivo-color-accent-active: oklch(
88
+ from var(--cascivo-color-accent) 0.32 0.01 h
89
+ ); /* derived */
81
90
  --cascivo-color-accent-subtle: oklch(0.94 0.008 80);
82
91
  --cascivo-color-accent-muted: oklch(0.9 0.01 80);
83
92
 
84
93
  --cascivo-color-destructive: oklch(0.55 0.14 22);
85
- --cascivo-color-destructive-hover: oklch(0.49 0.15 22);
94
+ --cascivo-color-destructive-hover: oklch(0.49 0.15 22); /* static fallback */
95
+ --cascivo-color-destructive-hover: oklch(
96
+ from var(--cascivo-color-destructive) 0.49 0.15 h
97
+ ); /* derived */
86
98
  --cascivo-color-destructive-subtle: oklch(0.96 0.025 22);
87
99
 
88
100
  --cascivo-color-success-subtle: oklch(0.96 0.03 145);
package/src/pastel.css CHANGED
@@ -34,14 +34,21 @@
34
34
  --cascivo-color-text: var(--cascivo-color-foreground);
35
35
  --cascivo-color-text-subtle: var(--cascivo-color-foreground-muted);
36
36
  --cascivo-color-text-muted: oklch(0.7 0.02 325);
37
- --cascivo-color-text-on-accent: oklch(1 0 0);
38
- --cascivo-color-text-on-destructive: oklch(1 0 0);
39
-
37
+ --cascivo-color-text-on-accent: oklch(1 0 0); /* static fallback */
38
+ --cascivo-color-text-on-accent: contrast-color(
39
+ var(--cascivo-color-accent)
40
+ ); /* auto-contrast (WCAG) */
41
+ --cascivo-color-text-on-destructive: oklch(1 0 0); /* static fallback */
42
+ --cascivo-color-text-on-destructive: contrast-color(
43
+ var(--cascivo-color-destructive)
44
+ ); /* auto-contrast (WCAG) */
40
45
  /* ── Accent — candy pink ──────────────────────────── */
41
46
  --cascivo-color-accent: oklch(0.68 0.18 350);
42
47
  --cascivo-color-accent-foreground: oklch(1 0 0);
43
- --cascivo-color-accent-hover: oklch(0.62 0.19 350);
44
- --cascivo-color-accent-active: oklch(0.56 0.2 350);
48
+ --cascivo-color-accent-hover: oklch(0.62 0.19 350); /* static fallback */
49
+ --cascivo-color-accent-hover: oklch(from var(--cascivo-color-accent) 0.62 0.19 h); /* derived */
50
+ --cascivo-color-accent-active: oklch(0.56 0.2 350); /* static fallback */
51
+ --cascivo-color-accent-active: oklch(from var(--cascivo-color-accent) 0.56 0.2 h); /* derived */
45
52
  --cascivo-color-accent-subtle: oklch(0.96 0.04 350);
46
53
  --cascivo-color-accent-muted: oklch(0.93 0.07 350);
47
54
 
@@ -54,7 +61,10 @@
54
61
 
55
62
  /* ── Destructive ──────────────────────────────────── */
56
63
  --cascivo-color-destructive: oklch(0.58 0.18 22);
57
- --cascivo-color-destructive-hover: oklch(0.52 0.19 22);
64
+ --cascivo-color-destructive-hover: oklch(0.52 0.19 22); /* static fallback */
65
+ --cascivo-color-destructive-hover: oklch(
66
+ from var(--cascivo-color-destructive) 0.52 0.19 h
67
+ ); /* derived */
58
68
  --cascivo-color-destructive-subtle: oklch(0.96 0.04 22);
59
69
 
60
70
  /* ── Semantic status colors ───────────────────────── */
package/src/tailwind.css ADDED
@@ -0,0 +1,50 @@
1
+ /**
2
+ * Opt-in Tailwind v4 interop bridge for cascivo.
3
+ *
4
+ * Import this LAST, after your Tailwind entry and your cascivo theme imports,
5
+ * from a stylesheet processed by Tailwind v4:
6
+ *
7
+ * @import 'tailwindcss';
8
+ * @import '@cascivo/tokens';
9
+ * @import '@cascivo/themes/light.css';
10
+ * @import '@cascivo/themes/dark.css';
11
+ * @import '@cascivo/themes/tailwind.css'; // this file — last
12
+ *
13
+ * It does two things and changes neither token system:
14
+ * 1. Re-points Tailwind's `dark:` variant at cascivo's `[data-theme="dark"]`
15
+ * mechanism, so a single attribute drives BOTH systems (no `.dark` class
16
+ * needed, no attribute-setting from CSS, no duplicated token values).
17
+ * 2. Bridges cascivo semantic color tokens into Tailwind's `--color-*`
18
+ * namespace, so utilities like `bg-accent`, `text-foreground`, and
19
+ * `border-border` resolve to cascivo values.
20
+ *
21
+ * Outside a Tailwind v4 build these are unknown at-rules and are simply ignored,
22
+ * so importing this file in a non-Tailwind project is harmless.
23
+ *
24
+ * See docs/USING-WITH-TAILWIND.md for the full setup and dark-mode guidance.
25
+ */
26
+
27
+ /* 1 — Tailwind's dark: variant follows cascivo's [data-theme] attribute. */
28
+ @custom-variant dark (&:where([data-theme='dark'], [data-theme='dark'] *));
29
+
30
+ /* 2 — cascivo semantic tokens → Tailwind --color-* utilities. `inline` so the
31
+ values are read at use-site, keeping them reactive to the active theme. */
32
+ @theme inline {
33
+ --color-background: var(--cascivo-color-background);
34
+ --color-foreground: var(--cascivo-color-foreground);
35
+ --color-surface: var(--cascivo-color-surface);
36
+ --color-surface-raised: var(--cascivo-color-surface-raised);
37
+ --color-border: var(--cascivo-color-border);
38
+ --color-muted: var(--cascivo-color-text-muted);
39
+ --color-subtle: var(--cascivo-color-text-subtle);
40
+
41
+ --color-accent: var(--cascivo-color-accent);
42
+ --color-accent-foreground: var(--cascivo-color-accent-foreground);
43
+ --color-primary: var(--cascivo-color-primary);
44
+ --color-secondary: var(--cascivo-color-secondary);
45
+
46
+ --color-destructive: var(--cascivo-color-destructive);
47
+ --color-success: var(--cascivo-color-success);
48
+ --color-warning: var(--cascivo-color-warning);
49
+ --color-info: var(--cascivo-color-info);
50
+ }
package/src/terminal.css CHANGED
@@ -34,14 +34,23 @@
34
34
  --cascivo-color-text: var(--cascivo-color-foreground);
35
35
  --cascivo-color-text-subtle: var(--cascivo-color-foreground-muted);
36
36
  --cascivo-color-text-muted: oklch(0.48 0.04 148);
37
- --cascivo-color-text-on-accent: oklch(0.17 0.01 150);
38
- --cascivo-color-text-on-destructive: oklch(0.17 0.01 150);
39
-
37
+ --cascivo-color-text-on-accent: oklch(0.17 0.01 150); /* static fallback */
38
+ --cascivo-color-text-on-accent: contrast-color(
39
+ var(--cascivo-color-accent)
40
+ ); /* auto-contrast (WCAG) */
41
+ --cascivo-color-text-on-destructive: oklch(0.17 0.01 150); /* static fallback */
42
+ --cascivo-color-text-on-destructive: contrast-color(
43
+ var(--cascivo-color-destructive)
44
+ ); /* auto-contrast (WCAG) */
40
45
  /* ── Accent — bright phosphor green ──────────────── */
41
46
  --cascivo-color-accent: oklch(0.82 0.2 145);
42
47
  --cascivo-color-accent-foreground: oklch(0.17 0.01 150);
43
- --cascivo-color-accent-hover: oklch(0.88 0.18 145);
44
- --cascivo-color-accent-active: oklch(0.92 0.15 145);
48
+ --cascivo-color-accent-hover: oklch(0.88 0.18 145); /* static fallback */
49
+ --cascivo-color-accent-hover: oklch(from var(--cascivo-color-accent) 0.88 0.18 h); /* derived */
50
+ --cascivo-color-accent-active: oklch(0.92 0.15 145); /* static fallback */
51
+ --cascivo-color-accent-active: oklch(
52
+ from var(--cascivo-color-accent) 0.92 0.15 h
53
+ ); /* derived */
45
54
  --cascivo-color-accent-subtle: oklch(0.82 0.2 145 / 0.1);
46
55
  --cascivo-color-accent-muted: oklch(0.82 0.2 145 / 0.2);
47
56
 
@@ -54,7 +63,10 @@
54
63
 
55
64
  /* ── Destructive — red on dark green bg ───────────── */
56
65
  --cascivo-color-destructive: oklch(0.72 0.16 22);
57
- --cascivo-color-destructive-hover: oklch(0.78 0.14 22);
66
+ --cascivo-color-destructive-hover: oklch(0.78 0.14 22); /* static fallback */
67
+ --cascivo-color-destructive-hover: oklch(
68
+ from var(--cascivo-color-destructive) 0.78 0.14 h
69
+ ); /* derived */
58
70
  --cascivo-color-destructive-subtle: oklch(0.72 0.16 22 / 0.1);
59
71
 
60
72
  /* ── Semantic status colors ───────────────────────── */
package/src/warm.css CHANGED
@@ -34,9 +34,14 @@
34
34
  --cascivo-color-text: var(--cascivo-color-foreground);
35
35
  --cascivo-color-text-subtle: var(--cascivo-color-foreground-muted);
36
36
  --cascivo-color-text-muted: oklch(0.64 0.025 65);
37
- --cascivo-color-text-on-accent: oklch(0.18 0.015 50);
38
- --cascivo-color-text-on-destructive: oklch(1 0 0);
39
-
37
+ --cascivo-color-text-on-accent: oklch(0.18 0.015 50); /* static fallback */
38
+ --cascivo-color-text-on-accent: contrast-color(
39
+ var(--cascivo-color-accent)
40
+ ); /* auto-contrast (WCAG) */
41
+ --cascivo-color-text-on-destructive: oklch(1 0 0); /* static fallback */
42
+ --cascivo-color-text-on-destructive: contrast-color(
43
+ var(--cascivo-color-destructive)
44
+ ); /* auto-contrast (WCAG) */
40
45
  /* ── Accent ───────────────────────────────────────── */
41
46
  --cascivo-color-accent: oklch(0.768 0.145 75);
42
47
  --cascivo-color-accent-foreground: oklch(0.18 0.015 50);