@cascivo/themes 0.2.7 → 0.3.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 (17) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +43 -1
  3. package/package.json +2 -2
  4. package/readme.body.md +43 -1
  5. package/src/all.css +5 -3
  6. package/src/arcade.css +11 -6
  7. package/src/brutalist.css +11 -6
  8. package/src/corporate.css +11 -6
  9. package/src/cyberpunk.css +11 -6
  10. package/src/dark.css +11 -6
  11. package/src/flat.css +11 -6
  12. package/src/light.css +19 -9
  13. package/src/midnight.css +11 -6
  14. package/src/minimal.css +11 -6
  15. package/src/pastel.css +11 -6
  16. package/src/terminal.css +11 -6
  17. package/src/warm.css +11 -6
package/LICENSE CHANGED
@@ -1,6 +1,6 @@
1
1
  MIT License
2
2
 
3
- Copyright (c) 2024 urbanisierung
3
+ Copyright (c) cascivo contributors
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy
6
6
  of this software and associated documentation files (the "Software"), to deal
package/README.md CHANGED
@@ -16,12 +16,54 @@
16
16
 
17
17
  ---
18
18
 
19
- First-party themes for cascivo — 14 of them: `light`, `dark`, `warm`, `midnight`, `pastel`, `brutalist`, `corporate`, `terminal`, `cyberpunk`, and more. Apply via `data-theme` on any container; themes override the semantic token layer only, leaving component and primitive tokens unchanged.
19
+ First-party themes for cascivo — 12 of them, applied with a single `data-theme` attribute. Themes override the **semantic token layer only**, leaving primitive and component tokens unchanged, so every component (and your own token-consuming CSS) restyles for free.
20
+
21
+ ## The themes
22
+
23
+ `light` · `dark` · `warm` · `flat` · `minimal` · `midnight` · `pastel` · `brutalist` · `corporate` · `terminal` · `cyberpunk` · `arcade`
24
+
25
+ ## Import options
26
+
27
+ **Everything (recommended starting point):**
28
+
29
+ ```ts
30
+ import '@cascivo/themes/all' // tokens (once) + base typography + light & dark
31
+ ```
32
+
33
+ **À la carte** — each theme sheet self-imports `@cascivo/tokens` (deduped by URL, so multiple themes load tokens once). Import only what you ship:
34
+
35
+ ```ts
36
+ import '@cascivo/themes/base' // base typography layer (font, line-height, color)
37
+ import '@cascivo/themes/light'
38
+ import '@cascivo/themes/dark'
39
+ import '@cascivo/themes/midnight' // …any of the 12 themes by name
40
+ ```
41
+
42
+ Every export also works with an explicit `.css` suffix (`@cascivo/themes/light.css`) for tooling that requires it.
43
+
44
+ **Tailwind interop:** `@cascivo/themes/tailwind` is a bridging sheet (not a theme) that maps cascivo tokens onto Tailwind theme variables — see [docs/USING-WITH-TAILWIND.md](https://github.com/cascivo/cascivo/blob/main/docs/USING-WITH-TAILWIND.md).
45
+
46
+ ## Scoping with `data-theme`
47
+
48
+ Apply a theme to the whole app or to any container — themes nest, so a dashboard can be `dark` while a preview pane inside it is `light`:
49
+
50
+ ```html
51
+ <body data-theme="dark">
52
+ ...
53
+ <section data-theme="light"><!-- locally light --></section>
54
+ </body>
55
+ ```
56
+
57
+ Only themes whose CSS you imported are available; the attribute value must match the theme name.
20
58
 
21
59
  ## Per-theme fonts
22
60
 
23
61
  A theme can carry its own **display** (headline/brand) face via `--cascivo-font-display`. The token defaults to `var(--cascivo-font-sans)` (so themes that don't override it look unchanged) and is declared in every theme to keep token parity. The `Heading` component renders in the display face, so an override is visible wherever headings appear — e.g. `terminal` maps it to the mono stack and `brutalist` to a heavy grotesk. `--cascivo-font-sans`/`-mono` remain the global body/code defaults.
24
62
 
63
+ ## Custom themes & branding
64
+
65
+ To match a brand, override semantic `--cascivo-*` custom properties in your own CSS (or generate a full theme with the `create_theme` MCP tool / `cascivo` CLI). The layer cascade, the `data-theme` specificity footgun, per-role radius/control-height tokens, and a starter theme are covered in [docs/THEMING.md](https://github.com/cascivo/cascivo/blob/main/docs/THEMING.md).
66
+
25
67
  ## Install
26
68
 
27
69
  ```sh
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cascivo/themes",
3
- "version": "0.2.7",
3
+ "version": "0.3.0",
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": [
@@ -66,7 +66,7 @@
66
66
  "@types/node": "^25",
67
67
  "typescript": "^5",
68
68
  "vite-plus": "^0.2.1",
69
- "@cascivo/tokens": "0.3.5"
69
+ "@cascivo/tokens": "0.4.0"
70
70
  },
71
71
  "peerDependencies": {
72
72
  "@cascivo/tokens": ">=0.2.0"
package/readme.body.md CHANGED
@@ -1,5 +1,47 @@
1
- First-party themes for cascivo — 14 of them: `light`, `dark`, `warm`, `midnight`, `pastel`, `brutalist`, `corporate`, `terminal`, `cyberpunk`, and more. Apply via `data-theme` on any container; themes override the semantic token layer only, leaving component and primitive tokens unchanged.
1
+ First-party themes for cascivo — {{count.themes}} of them, applied with a single `data-theme` attribute. Themes override the **semantic token layer only**, leaving primitive and component tokens unchanged, so every component (and your own token-consuming CSS) restyles for free.
2
+
3
+ ## The themes
4
+
5
+ `light` · `dark` · `warm` · `flat` · `minimal` · `midnight` · `pastel` · `brutalist` · `corporate` · `terminal` · `cyberpunk` · `arcade`
6
+
7
+ ## Import options
8
+
9
+ **Everything (recommended starting point):**
10
+
11
+ ```ts
12
+ import '@cascivo/themes/all' // tokens (once) + base typography + light & dark
13
+ ```
14
+
15
+ **À la carte** — each theme sheet self-imports `@cascivo/tokens` (deduped by URL, so multiple themes load tokens once). Import only what you ship:
16
+
17
+ ```ts
18
+ import '@cascivo/themes/base' // base typography layer (font, line-height, color)
19
+ import '@cascivo/themes/light'
20
+ import '@cascivo/themes/dark'
21
+ import '@cascivo/themes/midnight' // …any of the {{count.themes}} themes by name
22
+ ```
23
+
24
+ Every export also works with an explicit `.css` suffix (`@cascivo/themes/light.css`) for tooling that requires it.
25
+
26
+ **Tailwind interop:** `@cascivo/themes/tailwind` is a bridging sheet (not a theme) that maps cascivo tokens onto Tailwind theme variables — see [docs/USING-WITH-TAILWIND.md](https://github.com/cascivo/cascivo/blob/main/docs/USING-WITH-TAILWIND.md).
27
+
28
+ ## Scoping with `data-theme`
29
+
30
+ Apply a theme to the whole app or to any container — themes nest, so a dashboard can be `dark` while a preview pane inside it is `light`:
31
+
32
+ ```html
33
+ <body data-theme="dark">
34
+ ...
35
+ <section data-theme="light"><!-- locally light --></section>
36
+ </body>
37
+ ```
38
+
39
+ Only themes whose CSS you imported are available; the attribute value must match the theme name.
2
40
 
3
41
  ## Per-theme fonts
4
42
 
5
43
  A theme can carry its own **display** (headline/brand) face via `--cascivo-font-display`. The token defaults to `var(--cascivo-font-sans)` (so themes that don't override it look unchanged) and is declared in every theme to keep token parity. The `Heading` component renders in the display face, so an override is visible wherever headings appear — e.g. `terminal` maps it to the mono stack and `brutalist` to a heavy grotesk. `--cascivo-font-sans`/`-mono` remain the global body/code defaults.
44
+
45
+ ## Custom themes & branding
46
+
47
+ To match a brand, override semantic `--cascivo-*` custom properties in your own CSS (or generate a full theme with the `create_theme` MCP tool / `cascivo` CLI). The layer cascade, the `data-theme` specificity footgun, per-role radius/control-height tokens, and a starter theme are covered in [docs/THEMING.md](https://github.com/cascivo/cascivo/blob/main/docs/THEMING.md).
package/src/all.css CHANGED
@@ -8,10 +8,12 @@
8
8
  below also self-import @cascivo/tokens for standalone use; bundlers and
9
9
  browsers dedupe the identical @import URL, so tokens are still emitted once.
10
10
 
11
- Layer order (first appearance, lowest → highest priority):
12
- cascivo.tokens < cascivo.base < cascivo.theme ( < cascivo.component )
13
- Component CSS (@cascivo/react/styles.css) adds cascivo.component on top. */
11
+ Canonical layer order (lowest → highest priority) — see @cascivo/tokens/layers.css:
12
+ cascivo.reset < cascivo.base < cascivo.tokens < cascivo.component < cascivo.theme < cascivo.override
13
+ The order statement is emitted first (below, and again transitively via
14
+ @cascivo/tokens); identical @layer statements are idempotent. */
14
15
 
16
+ @import '@cascivo/tokens/layers.css';
15
17
  @import '@cascivo/tokens';
16
18
  @import '@cascivo/tokens/properties.css';
17
19
  @import './base.css';
package/src/arcade.css CHANGED
@@ -35,13 +35,17 @@
35
35
  --cascivo-color-text-subtle: var(--cascivo-color-foreground-muted);
36
36
  --cascivo-color-text-muted: oklch(0.52 0.02 265);
37
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
38
  --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) */
39
+ /* Progressive auto-contrast: contrast-color() stored in a custom property
40
+ does not honor the static fallback on unsupported browsers — the var()
41
+ substitution keeps the invalid token and the color inherits foreground.
42
+ Guard the upgrade so only supporting browsers apply it. */
43
+ @supports (color: contrast-color(red)) {
44
+ & {
45
+ --cascivo-color-text-on-accent: contrast-color(var(--cascivo-color-accent));
46
+ --cascivo-color-text-on-destructive: contrast-color(var(--cascivo-color-destructive));
47
+ }
48
+ }
45
49
  /* ── Accent — coin-op red ─────────────────────────── */
46
50
  --cascivo-color-accent: oklch(0.55 0.22 27);
47
51
  --cascivo-color-accent-foreground: oklch(0.98 0 0);
@@ -80,6 +84,7 @@
80
84
  --cascivo-color-success-foreground: oklch(0.54 0.18 145);
81
85
  --cascivo-color-warning-foreground: oklch(0.5 0.15 75);
82
86
  --cascivo-color-destructive-foreground: oklch(0.42 0.22 25);
87
+ --cascivo-color-info-foreground: oklch(0.5 0.2 250);
83
88
 
84
89
  /* ── Radius — zero (pixel-blocky) ─────────────────── */
85
90
  --cascivo-radius-base: 0;
package/src/brutalist.css CHANGED
@@ -35,13 +35,17 @@
35
35
  --cascivo-color-text-subtle: var(--cascivo-color-foreground-muted);
36
36
  --cascivo-color-text-muted: oklch(0.5 0 0);
37
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
38
  --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) */
39
+ /* Progressive auto-contrast: contrast-color() stored in a custom property
40
+ does not honor the static fallback on unsupported browsers — the var()
41
+ substitution keeps the invalid token and the color inherits foreground.
42
+ Guard the upgrade so only supporting browsers apply it. */
43
+ @supports (color: contrast-color(red)) {
44
+ & {
45
+ --cascivo-color-text-on-accent: contrast-color(var(--cascivo-color-accent));
46
+ --cascivo-color-text-on-destructive: contrast-color(var(--cascivo-color-destructive));
47
+ }
48
+ }
45
49
  /* ── Accent — acid yellow ─────────────────────────── */
46
50
  --cascivo-color-accent: oklch(0.88 0.19 105);
47
51
  --cascivo-color-accent-foreground: oklch(0.1 0 0);
@@ -76,6 +80,7 @@
76
80
  --cascivo-color-success-foreground: oklch(0.52 0.18 145);
77
81
  --cascivo-color-warning-foreground: oklch(0.5 0.15 75);
78
82
  --cascivo-color-destructive-foreground: oklch(0.4 0.2 22);
83
+ --cascivo-color-info-foreground: oklch(0.45 0.2 250);
79
84
 
80
85
  /* ── Radius — zero ───────────────────────────────── */
81
86
  --cascivo-radius-base: 0;
package/src/corporate.css CHANGED
@@ -35,13 +35,17 @@
35
35
  --cascivo-color-text-subtle: var(--cascivo-color-foreground-muted);
36
36
  --cascivo-color-text-muted: oklch(0.65 0.012 255);
37
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
38
  --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) */
39
+ /* Progressive auto-contrast: contrast-color() stored in a custom property
40
+ does not honor the static fallback on unsupported browsers — the var()
41
+ substitution keeps the invalid token and the color inherits foreground.
42
+ Guard the upgrade so only supporting browsers apply it. */
43
+ @supports (color: contrast-color(red)) {
44
+ & {
45
+ --cascivo-color-text-on-accent: contrast-color(var(--cascivo-color-accent));
46
+ --cascivo-color-text-on-destructive: contrast-color(var(--cascivo-color-destructive));
47
+ }
48
+ }
45
49
  /* ── Accent — conservative blue ──────────────────── */
46
50
  --cascivo-color-accent: oklch(0.5 0.16 255);
47
51
  --cascivo-color-accent-foreground: oklch(1 0 0);
@@ -80,6 +84,7 @@
80
84
  --cascivo-color-success-foreground: oklch(0.45 0.14 145);
81
85
  --cascivo-color-warning-foreground: oklch(0.5 0.13 75);
82
86
  --cascivo-color-destructive-foreground: oklch(0.448 0.17 22);
87
+ --cascivo-color-info-foreground: oklch(0.45 0.17 255);
83
88
 
84
89
  /* ── Radius — 2px ────────────────────────────────── */
85
90
  --cascivo-radius-base: 0.125rem;
package/src/cyberpunk.css CHANGED
@@ -35,13 +35,17 @@
35
35
  --cascivo-color-text-subtle: var(--cascivo-color-foreground-muted);
36
36
  --cascivo-color-text-muted: oklch(0.55 0.05 300);
37
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
38
  --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) */
39
+ /* Progressive auto-contrast: contrast-color() stored in a custom property
40
+ does not honor the static fallback on unsupported browsers — the var()
41
+ substitution keeps the invalid token and the color inherits foreground.
42
+ Guard the upgrade so only supporting browsers apply it. */
43
+ @supports (color: contrast-color(red)) {
44
+ & {
45
+ --cascivo-color-text-on-accent: contrast-color(var(--cascivo-color-accent));
46
+ --cascivo-color-text-on-destructive: contrast-color(var(--cascivo-color-destructive));
47
+ }
48
+ }
45
49
  /* ── Accent — neon magenta ───────────────────────── */
46
50
  --cascivo-color-accent: oklch(0.7 0.25 330);
47
51
  --cascivo-color-accent-foreground: oklch(0.16 0.03 285);
@@ -78,6 +82,7 @@
78
82
  --cascivo-color-success-foreground: oklch(0.82 0.2 150);
79
83
  --cascivo-color-warning-foreground: oklch(0.82 0.17 75);
80
84
  --cascivo-color-destructive-foreground: oklch(0.78 0.18 18);
85
+ --cascivo-color-info-foreground: oklch(0.82 0.16 200);
81
86
 
82
87
  /* ── Radius — zero ───────────────────────────────── */
83
88
  --cascivo-radius-base: 0;
package/src/dark.css CHANGED
@@ -36,13 +36,17 @@
36
36
  --cascivo-color-text-subtle: var(--cascivo-color-foreground-muted);
37
37
  --cascivo-color-text-muted: oklch(0.554 0.018 264);
38
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
39
  --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) */
40
+ /* Progressive auto-contrast: contrast-color() stored in a custom property
41
+ does not honor the static fallback on unsupported browsers — the var()
42
+ substitution keeps the invalid token and the color inherits foreground.
43
+ Guard the upgrade so only supporting browsers apply it. */
44
+ @supports (color: contrast-color(red)) {
45
+ & {
46
+ --cascivo-color-text-on-accent: contrast-color(var(--cascivo-color-accent));
47
+ --cascivo-color-text-on-destructive: contrast-color(var(--cascivo-color-destructive));
48
+ }
49
+ }
46
50
  /* ── Accent ───────────────────────────────────────── */
47
51
  --cascivo-color-accent: oklch(0.65 0.2 250);
48
52
  --cascivo-color-accent-foreground: oklch(0.145 0.005 250);
@@ -77,6 +81,7 @@
77
81
  --cascivo-color-success-foreground: oklch(0.72 0.13 145);
78
82
  --cascivo-color-warning-foreground: oklch(0.82 0.13 75);
79
83
  --cascivo-color-destructive-foreground: oklch(0.85 0.12 22);
84
+ --cascivo-color-info-foreground: oklch(0.75 0.16 250);
80
85
 
81
86
  /* ── Primary — inverted monochrome ── */
82
87
  --cascivo-color-primary: oklch(0.922 0 0);
package/src/flat.css CHANGED
@@ -75,13 +75,17 @@
75
75
  --cascivo-color-text-subtle: var(--cascivo-color-foreground-muted);
76
76
  --cascivo-color-text-muted: oklch(0.55 0 0);
77
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
78
  --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) */
79
+ /* Progressive auto-contrast: contrast-color() stored in a custom property
80
+ does not honor the static fallback on unsupported browsers — the var()
81
+ substitution keeps the invalid token and the color inherits foreground.
82
+ Guard the upgrade so only supporting browsers apply it. */
83
+ @supports (color: contrast-color(red)) {
84
+ & {
85
+ --cascivo-color-text-on-accent: contrast-color(var(--cascivo-color-accent));
86
+ --cascivo-color-text-on-destructive: contrast-color(var(--cascivo-color-destructive));
87
+ }
88
+ }
85
89
  --cascivo-color-accent-active: oklch(0.4 0.21 145); /* static fallback */
86
90
 
87
91
  --cascivo-color-accent-active: oklch(from var(--cascivo-color-accent) 0.4 0.21 h); /* derived */
@@ -102,6 +106,7 @@
102
106
  --cascivo-color-success-foreground: oklch(0.52 0.18 145);
103
107
  --cascivo-color-warning-foreground: oklch(0.5 0.14 75);
104
108
  --cascivo-color-destructive-foreground: oklch(0.42 0.19 22);
109
+ --cascivo-color-info-foreground: oklch(0.45 0.19 250);
105
110
 
106
111
  --cascivo-radius-component: 0;
107
112
  --cascivo-radius-button: 0;
package/src/light.css CHANGED
@@ -32,18 +32,26 @@
32
32
 
33
33
  /* ── Text ─────────────────────────────────────────── */
34
34
  --cascivo-color-foreground: oklch(0.145 0.005 264);
35
- --cascivo-color-foreground-muted: oklch(0.554 0.018 264);
35
+ /* Darkened 0.554→0.5 so muted text clears WCAG AA 4.5:1 on tinted surfaces
36
+ (surface-2, secondary), not just white. */
37
+ --cascivo-color-foreground-muted: oklch(0.5 0.018 264);
36
38
  --cascivo-color-text: var(--cascivo-color-foreground);
37
39
  --cascivo-color-text-subtle: var(--cascivo-gray-600);
38
- --cascivo-color-text-muted: var(--cascivo-gray-400);
40
+ /* Was gray-400 (2.6:1 on white — fails). Darkened to clear 4.5:1 on every
41
+ light surface; drives hint/caption text across ~18 components. */
42
+ --cascivo-color-text-muted: oklch(0.5 0.016 264);
39
43
  --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
44
  --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) */
45
+ /* Progressive auto-contrast: contrast-color() stored in a custom property
46
+ does not honor the static fallback on unsupported browsers — the var()
47
+ substitution keeps the invalid token and the color inherits foreground.
48
+ Guard the upgrade so only supporting browsers apply it. */
49
+ @supports (color: contrast-color(red)) {
50
+ & {
51
+ --cascivo-color-text-on-accent: contrast-color(var(--cascivo-color-accent));
52
+ --cascivo-color-text-on-destructive: contrast-color(var(--cascivo-color-destructive));
53
+ }
54
+ }
47
55
  /* ── Accent (links, focus, info, active tint) ───────── */
48
56
  /* L lowered 0.623→0.52 so accent-as-link-text clears WCAG 2.2 AA 4.5:1 on
49
57
  white (was 3.55:1). Hover darkened to stay below the new base. */
@@ -79,6 +87,7 @@
79
87
  --cascivo-color-success-foreground: oklch(0.45 0.14 145);
80
88
  --cascivo-color-warning-foreground: oklch(0.5 0.14 75);
81
89
  --cascivo-color-destructive-foreground: oklch(0.448 0.17 22);
90
+ --cascivo-color-info-foreground: oklch(0.45 0.19 250); /* ≈6.5:1 on blue-50 */
82
91
 
83
92
  /* ── Radius — one knob; semantic scale derives in tokens ── */
84
93
  --cascivo-radius-base: 0.375rem; /* 6px */
@@ -117,7 +126,8 @@
117
126
  --cascivo-chart-7: oklch(0.62 0.12 350);
118
127
  --cascivo-chart-8: oklch(0.5 0.12 200);
119
128
  --cascivo-chart-grid: var(--cascivo-gray-200);
120
- --cascivo-chart-axis: var(--cascivo-gray-400);
129
+ /* Axis labels are text — gray-400 (2.6:1) fails; match text-muted. */
130
+ --cascivo-chart-axis: oklch(0.5 0.016 264);
121
131
 
122
132
  /* ── -content tokens (foreground ≥4.5:1 on paired background) ── */
123
133
  --cascivo-color-primary-content: var(--cascivo-color-primary-fg);
package/src/midnight.css CHANGED
@@ -35,13 +35,17 @@
35
35
  --cascivo-color-text-subtle: var(--cascivo-color-foreground-muted);
36
36
  --cascivo-color-text-muted: oklch(0.52 0.02 280);
37
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
38
  --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) */
39
+ /* Progressive auto-contrast: contrast-color() stored in a custom property
40
+ does not honor the static fallback on unsupported browsers — the var()
41
+ substitution keeps the invalid token and the color inherits foreground.
42
+ Guard the upgrade so only supporting browsers apply it. */
43
+ @supports (color: contrast-color(red)) {
44
+ & {
45
+ --cascivo-color-text-on-accent: contrast-color(var(--cascivo-color-accent));
46
+ --cascivo-color-text-on-destructive: contrast-color(var(--cascivo-color-destructive));
47
+ }
48
+ }
45
49
  /* ── Accent — violet ──────────────────────────────── */
46
50
  --cascivo-color-accent: oklch(0.7 0.22 290);
47
51
  --cascivo-color-accent-foreground: oklch(1 0 0);
@@ -80,6 +84,7 @@
80
84
  --cascivo-color-success-foreground: oklch(0.72 0.13 145);
81
85
  --cascivo-color-warning-foreground: oklch(0.82 0.13 75);
82
86
  --cascivo-color-destructive-foreground: oklch(0.85 0.12 22);
87
+ --cascivo-color-info-foreground: oklch(0.78 0.16 290);
83
88
 
84
89
  /* ── Radius — 10px ───────────────────────────────── */
85
90
  --cascivo-radius-base: 0.625rem;
package/src/minimal.css CHANGED
@@ -75,13 +75,17 @@
75
75
  --cascivo-color-text-subtle: var(--cascivo-color-foreground-muted);
76
76
  --cascivo-color-text-muted: oklch(0.65 0.012 80);
77
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
78
  --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) */
79
+ /* Progressive auto-contrast: contrast-color() stored in a custom property
80
+ does not honor the static fallback on unsupported browsers — the var()
81
+ substitution keeps the invalid token and the color inherits foreground.
82
+ Guard the upgrade so only supporting browsers apply it. */
83
+ @supports (color: contrast-color(red)) {
84
+ & {
85
+ --cascivo-color-text-on-accent: contrast-color(var(--cascivo-color-accent));
86
+ --cascivo-color-text-on-destructive: contrast-color(var(--cascivo-color-destructive));
87
+ }
88
+ }
85
89
  --cascivo-color-accent-active: oklch(0.32 0.01 80); /* static fallback */
86
90
 
87
91
  --cascivo-color-accent-active: oklch(
@@ -104,6 +108,7 @@
104
108
  --cascivo-color-success-foreground: oklch(0.45 0.13 145);
105
109
  --cascivo-color-warning-foreground: oklch(0.5 0.12 75);
106
110
  --cascivo-color-destructive-foreground: oklch(0.448 0.17 22);
111
+ --cascivo-color-info-foreground: oklch(0.45 0.16 250);
107
112
 
108
113
  --cascivo-radius-component: var(--cascivo-radius-base);
109
114
  --cascivo-radius-button: var(--cascivo-radius-base);
package/src/pastel.css CHANGED
@@ -35,13 +35,17 @@
35
35
  --cascivo-color-text-subtle: var(--cascivo-color-foreground-muted);
36
36
  --cascivo-color-text-muted: oklch(0.7 0.02 325);
37
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
38
  --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) */
39
+ /* Progressive auto-contrast: contrast-color() stored in a custom property
40
+ does not honor the static fallback on unsupported browsers — the var()
41
+ substitution keeps the invalid token and the color inherits foreground.
42
+ Guard the upgrade so only supporting browsers apply it. */
43
+ @supports (color: contrast-color(red)) {
44
+ & {
45
+ --cascivo-color-text-on-accent: contrast-color(var(--cascivo-color-accent));
46
+ --cascivo-color-text-on-destructive: contrast-color(var(--cascivo-color-destructive));
47
+ }
48
+ }
45
49
  /* ── Accent — candy pink ──────────────────────────── */
46
50
  --cascivo-color-accent: oklch(0.68 0.18 350);
47
51
  --cascivo-color-accent-foreground: oklch(1 0 0);
@@ -78,6 +82,7 @@
78
82
  --cascivo-color-success-foreground: oklch(0.46 0.13 165);
79
83
  --cascivo-color-warning-foreground: oklch(0.5 0.13 75);
80
84
  --cascivo-color-destructive-foreground: oklch(0.448 0.17 22);
85
+ --cascivo-color-info-foreground: oklch(0.5 0.16 350);
81
86
 
82
87
  /* ── Radius — 16px pill ──────────────────────────── */
83
88
  --cascivo-radius-base: 1rem;
package/src/terminal.css CHANGED
@@ -35,13 +35,17 @@
35
35
  --cascivo-color-text-subtle: var(--cascivo-color-foreground-muted);
36
36
  --cascivo-color-text-muted: oklch(0.48 0.04 148);
37
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
38
  --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) */
39
+ /* Progressive auto-contrast: contrast-color() stored in a custom property
40
+ does not honor the static fallback on unsupported browsers — the var()
41
+ substitution keeps the invalid token and the color inherits foreground.
42
+ Guard the upgrade so only supporting browsers apply it. */
43
+ @supports (color: contrast-color(red)) {
44
+ & {
45
+ --cascivo-color-text-on-accent: contrast-color(var(--cascivo-color-accent));
46
+ --cascivo-color-text-on-destructive: contrast-color(var(--cascivo-color-destructive));
47
+ }
48
+ }
45
49
  /* ── Accent — bright phosphor green ──────────────── */
46
50
  --cascivo-color-accent: oklch(0.82 0.2 145);
47
51
  --cascivo-color-accent-foreground: oklch(0.17 0.01 150);
@@ -80,6 +84,7 @@
80
84
  --cascivo-color-success-foreground: oklch(0.82 0.2 145);
81
85
  --cascivo-color-warning-foreground: oklch(0.82 0.16 75);
82
86
  --cascivo-color-destructive-foreground: oklch(0.82 0.15 22);
87
+ --cascivo-color-info-foreground: oklch(0.82 0.2 145);
83
88
 
84
89
  /* ── Radius — zero ───────────────────────────────── */
85
90
  --cascivo-radius-base: 0;
package/src/warm.css CHANGED
@@ -35,13 +35,17 @@
35
35
  --cascivo-color-text-subtle: var(--cascivo-color-foreground-muted);
36
36
  --cascivo-color-text-muted: oklch(0.64 0.025 65);
37
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
38
  --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) */
39
+ /* Progressive auto-contrast: contrast-color() stored in a custom property
40
+ does not honor the static fallback on unsupported browsers — the var()
41
+ substitution keeps the invalid token and the color inherits foreground.
42
+ Guard the upgrade so only supporting browsers apply it. */
43
+ @supports (color: contrast-color(red)) {
44
+ & {
45
+ --cascivo-color-text-on-accent: contrast-color(var(--cascivo-color-accent));
46
+ --cascivo-color-text-on-destructive: contrast-color(var(--cascivo-color-destructive));
47
+ }
48
+ }
45
49
  /* ── Accent ───────────────────────────────────────── */
46
50
  --cascivo-color-accent: oklch(0.768 0.145 75);
47
51
  --cascivo-color-accent-foreground: oklch(0.18 0.015 50);
@@ -73,6 +77,7 @@
73
77
  --cascivo-color-success-foreground: oklch(0.45 0.14 145);
74
78
  --cascivo-color-warning-foreground: oklch(0.5 0.14 75);
75
79
  --cascivo-color-destructive-foreground: oklch(0.448 0.17 22);
80
+ --cascivo-color-info-foreground: oklch(0.45 0.19 250);
76
81
 
77
82
  /* ── Radius — one knob, warmer = rounder (8px) ────── */
78
83
  --cascivo-radius-base: 0.5rem;