@wtasnorg/candi 0.0.27 → 0.0.32

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 (8) hide show
  1. package/README.md +75 -43
  2. package/dist/base.css +202 -82
  3. package/dist/colors.js +1377 -417
  4. package/dist/colors.json +1377 -417
  5. package/dist/colors.mjs +1377 -417
  6. package/dist/scandinavian.css +202 -82
  7. package/dist/v4/theme.css +421 -121
  8. package/package.json +18 -8
package/README.md CHANGED
@@ -1,10 +1,10 @@
1
1
  # Candi Design System
2
2
 
3
- A multi-platform design system based on Nordic/Scandinavian design principles: Hygge (warmth) and Lagom (balance).
3
+ A multi-platform design system based on the Nordic design principles of Hygge (warmth) and Lagom (balance).
4
4
 
5
- Candi provides a single source of truth for colors using the OKLCH color space, synchronized across Web, Flutter, VS Code, Vim, KDE, GNOME, and Obsidian.
5
+ Candi provides a unified system for colors using the OKLCH color space, synchronized across Web, Flutter, VS Code, Vim, KDE, GNOME, and Obsidian.
6
6
 
7
- **[View Documentation Website](https://wtasg.github.io/candi/)** - Interactive color explorer, component playground, and comprehensive guides.
7
+ [View Documentation Website](https://wtasg.github.io/candi/) - Interactive color explorer, component playground, and comprehensive guides.
8
8
 
9
9
  ---
10
10
 
@@ -12,14 +12,14 @@ Candi provides a single source of truth for colors using the OKLCH color space,
12
12
 
13
13
  | Platform | Support | Integration |
14
14
  | :--- | :--- | :--- |
15
- | **Web** | Full | Tailwind CSS Plugin & CSS Variables |
16
- | **Flutter** | Full | Type-safe `CandiColors` with OKLCH metadata |
17
- | **VS Code** | Full | Light & Dark themes with unified syntax highlighting |
18
- | **Vim** | Full | Standalone `.vim` colorschemes (GUI & Terminal) |
19
- | **KDE Plasma** | Full | Color schemes for KDE 4, 5 & 6 |
20
- | **GNOME** | Full | GTK3 & GTK4 themes for X11 and Wayland |
21
- | **Obsidian** | Full | Light & Dark themes with 60+ CSS variables |
22
- | **Showcase App** | Full | Interactive Flutter gallery & playground |
15
+ | Web | Full | Tailwind CSS Plugin & CSS Variables |
16
+ | Flutter | Full | Type-safe `CandiColors` with OKLCH metadata |
17
+ | VS Code | Full | Light & Dark themes with unified syntax highlighting |
18
+ | Vim | Full | Standalone `.vim` colorschemes (GUI & Terminal) |
19
+ | KDE Plasma | Full | Color schemes for KDE 4, 5 & 6 |
20
+ | GNOME | Full | GTK3 & GTK4 themes for X11 and Wayland |
21
+ | Obsidian | Full | Light & Dark themes with 60+ CSS variables |
22
+ | Showcase App | Full | Interactive Flutter gallery & playground |
23
23
 
24
24
  ---
25
25
 
@@ -27,41 +27,41 @@ Candi provides a single source of truth for colors using the OKLCH color space,
27
27
 
28
28
  ### Single Source of Truth
29
29
 
30
- All colors are defined in `src/data/colors.js`. This file is the canonical source for the entire design system.
30
+ The Single Source of Truth (SSOT) in Candi is a unified structure composed of two parts with disparate responsibilities: the Derivation Engine (rules and anchors) and the Palette Assembly (neutrals and composition). This model ensures that the SSOT remains robust while following the Single Responsibility Principle (SRP) for both automated generation and manual tuning.
31
31
 
32
32
  ```text
33
- src/data/colors.js (Source of Truth)
34
- │
35
- ▼
36
- scripts/gen-oklch-primitives.js (Derivation Engine)
37
- │
38
- ▼
39
- scripts/sync-colors.js (Generator)
40
- │
41
- ├── src/css/base.css (CSS Variables)
42
- ├── src/v4/theme.css (Tailwind v4 @theme)
43
- └── dist/colors.json (Data export)
44
-
45
- Platform Builds (all consume colors.js & derivation engine):
33
+ Derivation Engine (scripts/gen-oklch-primitives.js)
34
+ │ (Rules & Anchors)
35
+ ▼
36
+ Palette Assembly (src/data/colors.js)
37
+ │ (Neutrals & Composition)
38
+ ▼
39
+ Synchronization (scripts/sync-colors.js)
40
+ │
41
+ ├── src/css/base.css (CSS Variables)
42
+ ├── src/v4/theme.css (Tailwind v4 @theme)
43
+ └── dist/colors.json (Data export)
44
+
45
+ Platform Builds (Consuming Assembly & Engine):
46
46
  ├── build-flutter.js → flutter/lib/candi_colors.dart
47
47
  ├── build-vscode.js → vscode/themes/*.json
48
48
  ├── build-vim.js → vim/colors/*.vim
49
49
  ├── build-kde.js → kde/v4,v5/*.colors
50
50
  ├── build-gnome.js → gnome/gtk-*/*.css
51
51
  ├── build-obsidian.js → obsidian/theme.css
52
- └── build-showcase.js → showcase_flutter/ (Vite/Web build)
52
+ └── build-showcase.js → showcase_flutter/
53
53
  ```
54
54
 
55
55
  ### OKLCH Color Space
56
56
 
57
57
  Candi uses OKLCH as its primary color space instead of Hex codes:
58
58
 
59
- - **Perceptual Uniformity**: Consistent contrast and brightness across the palette
60
- - **Synchronized Themes**: Updates to `src/data/colors.js` propagate to all platforms via `npm run build:all`
61
- - **Shared Logic**: Centralized conversion in `scripts/color-conv.js` ensures color accuracy
62
- - **Automated Accessibility**: Integrated WCAG 2.1 contrast ratio validation
59
+ - Perceptual Uniformity: Consistent contrast and brightness across the palette
60
+ - Synchronized Themes: Updates to `src/data/colors.js` propagate to all platforms via `npm run build:all`
61
+ - Shared Logic: Centralized conversion in `scripts/color-conv.js` ensures color accuracy
62
+ - Automated Accessibility: Integrated WCAG 2.1 contrast ratio validation
63
63
 
64
- **[Learn more about OKLCH color conversion](docs/color-conversion.md)**
64
+ [Learn more about OKLCH color conversion](docs/color-conversion.md)
65
65
 
66
66
  ---
67
67
 
@@ -69,19 +69,25 @@ Candi uses OKLCH as its primary color space instead of Hex codes:
69
69
 
70
70
  ```text
71
71
  candi/
72
+ ├── ARCHITECTURE.md # System architecture and SSOT design
73
+ ├── Knowledge.md # Lessons learned and development notes
72
74
  ├── src/ # Source files for npm package
73
75
  │ ├── css/ # CSS files (base, components, utilities)
74
76
  │ ├── data/ # Source of truth (colors.js)
75
- │ ├── v4/ # Tailwind v4 theme
77
+ │ ├── v4/ # Tailwind v4 @theme
76
78
  │ ├── index.js # Main entry point
77
79
  │ ├── plugin.js # Tailwind v3 plugin
78
- │ └── theme.js # Tailwind v3 theme extension
79
- ├── scripts/ # Build and test scripts
80
+ │ ├── theme.js # Tailwind v3 theme extension
81
+ │ └── types.d.ts # TypeScript type definitions
82
+ ├── scripts/ # Build, test, and utility scripts
80
83
  │ ├── build.js # Main npm package build
81
84
  │ ├── build-*.js # Platform-specific builds
82
85
  │ ├── test-*.js # Platform-specific tests
83
86
  │ ├── sync-colors.js # Color synchronization
84
- │ └── color-conv.js # OKLCH/RGB conversion utilities
87
+ │ ├── color-conv.js # Color conversion utilities
88
+ │ ├── gen-oklch-primitives.js # Derivation engine
89
+ │ └── package-artifacts.js # Release packaging script
90
+ ├── schemas/ # JSON Schemas for token validation
85
91
  ├── dist/ # Built output (git-ignored)
86
92
  ├── docs/ # Documentation guides
87
93
  ├── website/ # Documentation site (Vite + React)
@@ -119,6 +125,14 @@ candi/
119
125
  | `npm test` | Run all tests |
120
126
  | `npm run test:color` | Test color definitions |
121
127
  | `npm run test:colors` | Test color conversions |
128
+ | `npm run test:conv` | Unit test color-conv.js functions |
129
+ | `npm run test:sync` | Test sync-colors.js output |
130
+ | `npm run test:lint-tokens` | Validate token schema |
131
+ | `npm run test:gen-primitives` | Test semantic color generation |
132
+ | `npm run test:build-docs` | Test version injection |
133
+ | `npm run test:guard-semantics` | Validate palette integrity |
134
+ | `npm run test:scripts` | Regression test all build outputs |
135
+ | `npm run test:package-artifacts` | Test artifact generation |
122
136
  | `npm run test:flutter` | Test Flutter package |
123
137
  | `npm run test:vscode` | Test VS Code extension |
124
138
  | `npm run test:vim` | Test Vim colorschemes |
@@ -133,6 +147,7 @@ candi/
133
147
  | :--- | :--- |
134
148
  | `npm run artifact` | Package all platforms into zip archives |
135
149
  | `npm run vscode:package` | Generate `.vsix` VS Code extension |
150
+ | `npm run install:local` | Install themes to local system (Dry-run by default, uses artifacts) |
136
151
  | `./scripts/package-bump.sh <version>` | Bump version across all packages |
137
152
 
138
153
  ---
@@ -143,7 +158,7 @@ candi/
143
158
 
144
159
  Download ready-to-use artifacts from GitHub releases (recommended for most users).
145
160
 
146
- **[Using Prebuilt Releases Guide](docs/using-release-artifacts.md)**
161
+ [Using Prebuilt Releases Guide](docs/using-release-artifacts.md)
147
162
 
148
163
  ### Web (npm Package)
149
164
 
@@ -151,7 +166,7 @@ Download ready-to-use artifacts from GitHub releases (recommended for most users
151
166
  npm install @wtasnorg/candi
152
167
  ```
153
168
 
154
- **Tailwind v4** (Recommended):
169
+ Tailwind v4 (Recommended):
155
170
 
156
171
  ```css
157
172
  /* In your CSS */
@@ -159,7 +174,7 @@ npm install @wtasnorg/candi
159
174
  @import "@wtasnorg/candi/v4";
160
175
  ```
161
176
 
162
- **Tailwind v3**:
177
+ Tailwind v3:
163
178
 
164
179
  ```js
165
180
  // tailwind.config.js
@@ -170,7 +185,7 @@ module.exports = {
170
185
  };
171
186
  ```
172
187
 
173
- **[Full Web Setup Guide](docs/use-with-tailwindcss.md)** | **[Use Without Tailwind](docs/use-without-tailwindcss.md)**
188
+ [Full Web Setup Guide](docs/use-with-tailwindcss.md) | [Use Without Tailwind](docs/use-without-tailwindcss.md)
174
189
 
175
190
  ### Platform Guides
176
191
 
@@ -201,7 +216,24 @@ module.exports = {
201
216
  | `warning` | Amber | Lighter amber | Warning states |
202
217
  | `error` | Coral red | Lighter coral | Error states |
203
218
 
204
- **[Customize Colors](docs/customizing-colors.md)**
219
+ ### Primitive Colors
220
+
221
+ Each primitive color includes 6 variants for flexible usage:
222
+
223
+ | Base | Subtle | Soft | Strong | Outline | On |
224
+ | :--- | :--- | :--- | :--- | :--- | :--- |
225
+ | `red` | `red-subtle` | `red-soft` | `red-strong` | `red-outline` | `on-red` |
226
+ | `blue` | `blue-subtle` | `blue-soft` | `blue-strong` | `blue-outline` | `on-blue` |
227
+ | `green` | `green-subtle` | `green-soft` | `green-strong` | `green-outline` | `on-green` |
228
+ | `yellow` | `yellow-subtle` | `yellow-soft` | `yellow-strong` | `yellow-outline` | `on-yellow` |
229
+ | `magenta` | `magenta-subtle` | `magenta-soft` | `magenta-strong` | `magenta-outline` | `on-magenta` |
230
+ | `cyan` | `cyan-subtle` | `cyan-soft` | `cyan-strong` | `cyan-outline` | `on-cyan` |
231
+ | `teal` | `teal-subtle` | `teal-soft` | `teal-strong` | `teal-outline` | `on-teal` |
232
+ | `pink` | `pink-subtle` | `pink-soft` | `pink-strong` | `pink-outline` | `on-pink` |
233
+ | `gold` | `gold-subtle` | `gold-soft` | `gold-strong` | `gold-outline` | `on-gold` |
234
+ | `silver` | `silver-subtle` | `silver-soft` | `silver-strong` | `silver-outline` | `on-silver` |
235
+
236
+ [Customize Colors](docs/customizing-colors.md)
205
237
 
206
238
  ---
207
239
 
@@ -209,9 +241,9 @@ module.exports = {
209
241
 
210
242
  Candi prioritizes accessibility through automated validation:
211
243
 
212
- - **WCAG Compliance**: Contrast ratios are validated programmatically during the color extraction pipeline.
213
- - **Primary Text**: Targets **4.5:1** (WCAG AA) for standard text.
214
- - **UI Elements**: Accents and state indicators target **3.0:1** (WCAG Graphical Objects).
244
+ - WCAG Compliance: Contrast ratios are validated programmatically during the color extraction pipeline.
245
+ - Primary Text: Targets 4.5:1 (WCAG AA) for standard text.
246
+ - UI Elements: Accents and state indicators target 3.0:1 (WCAG Graphical Objects).
215
247
 
216
248
  ---
217
249
 
package/dist/base.css CHANGED
@@ -12,21 +12,21 @@
12
12
 
13
13
  :root {
14
14
  /* @tokens-start-light */
15
- --candi-bg: oklch(96% 0.012 85);
16
- --candi-surface: oklch(93% 0.015 85);
15
+ --candi-bg: oklch(97.8% 0.005 80);
16
+ --candi-surface: oklch(95.5% 0.01 80);
17
17
  --candi-elevated: oklch(100% 0 0);
18
- --candi-text: oklch(25% 0.02 250);
19
- --candi-text-subtle: oklch(45% 0.015 250);
20
- --candi-text-muted: oklch(60% 0.01 250);
21
- --candi-border: oklch(88% 0.012 85);
22
- --candi-border-strong: oklch(80% 0.015 85);
23
- --candi-divider: oklch(85% 0.01 85);
18
+ --candi-text: oklch(28% 0.015 80);
19
+ --candi-text-subtle: oklch(50% 0.01 80);
20
+ --candi-text-muted: oklch(55% 0.01 80);
21
+ --candi-border: oklch(84% 0.01 80);
22
+ --candi-border-strong: oklch(75% 0.01 80);
23
+ --candi-divider: oklch(88% 0.01 80);
24
24
  --candi-link: oklch(50% 0.08 230);
25
25
  --candi-disabled: oklch(75% 0.005 250);
26
26
  --candi-overlay: oklch(0% 0 0 / 0.5);
27
27
  --candi-scrim: oklch(0% 0 0 / 0.32);
28
28
  --candi-inverse-surface: oklch(25% 0.015 250);
29
- --candi-inverse-text: oklch(92% 0.01 85);
29
+ --candi-inverse-text: oklch(92% 0.01 250);
30
30
  --candi-shadow: 0 2px 8px rgba(45, 50, 57, 0.06);
31
31
  --candi-shadow-md: 0 4px 20px rgba(45, 50, 57, 0.1);
32
32
  --candi-shadow-lg: 0 8px 40px rgba(45, 50, 57, 0.15);
@@ -48,62 +48,122 @@
48
48
  --candi-terminal-magenta: oklch(60% 0.15 0);
49
49
  --candi-terminal-cyan: oklch(65% 0.1 200);
50
50
  --candi-terminal-white: oklch(92% 0.01 85);
51
- --candi-accent: oklch(52% 0.14 275);
52
- --candi-accent-subtle: oklch(85% 0.112 275);
53
- --candi-accent-soft: oklch(62% 0.126 275);
54
- --candi-accent-strong: oklch(42% 0.154 275);
55
- --candi-accent-outline: oklch(37% 0.126 275);
51
+ --candi-red: oklch(55% 0.14 25);
52
+ --candi-red-subtle: oklch(88% 0.11 25);
53
+ --candi-red-soft: oklch(65% 0.13 25);
54
+ --candi-red-strong: oklch(45% 0.15 25);
55
+ --candi-red-outline: oklch(40% 0.13 25);
56
+ --candi-on-red: oklch(100% 0 0);
57
+ --candi-blue: oklch(50% 0.12 250);
58
+ --candi-blue-subtle: oklch(83% 0.10 250);
59
+ --candi-blue-soft: oklch(60% 0.11 250);
60
+ --candi-blue-strong: oklch(40% 0.13 250);
61
+ --candi-blue-outline: oklch(35% 0.11 250);
62
+ --candi-on-blue: oklch(100% 0 0);
63
+ --candi-green: oklch(55% 0.12 145);
64
+ --candi-green-subtle: oklch(88% 0.10 145);
65
+ --candi-green-soft: oklch(65% 0.11 145);
66
+ --candi-green-strong: oklch(45% 0.13 145);
67
+ --candi-green-outline: oklch(40% 0.11 145);
68
+ --candi-on-green: oklch(100% 0 0);
69
+ --candi-yellow: oklch(75% 0.14 90);
70
+ --candi-yellow-subtle: oklch(95% 0.11 90);
71
+ --candi-yellow-soft: oklch(82% 0.13 90);
72
+ --candi-yellow-strong: oklch(65% 0.15 90);
73
+ --candi-yellow-outline: oklch(60% 0.13 90);
74
+ --candi-on-yellow: oklch(0% 0 0);
75
+ --candi-magenta: oklch(55% 0.18 330);
76
+ --candi-magenta-subtle: oklch(88% 0.14 330);
77
+ --candi-magenta-soft: oklch(65% 0.16 330);
78
+ --candi-magenta-strong: oklch(45% 0.20 330);
79
+ --candi-magenta-outline: oklch(40% 0.16 330);
80
+ --candi-on-magenta: oklch(100% 0 0);
81
+ --candi-cyan: oklch(65% 0.10 200);
82
+ --candi-cyan-subtle: oklch(90% 0.08 200);
83
+ --candi-cyan-soft: oklch(72% 0.09 200);
84
+ --candi-cyan-strong: oklch(55% 0.11 200);
85
+ --candi-cyan-outline: oklch(50% 0.09 200);
86
+ --candi-on-cyan: oklch(0% 0 0);
87
+ --candi-teal: oklch(55% 0.10 175);
88
+ --candi-teal-subtle: oklch(88% 0.08 175);
89
+ --candi-teal-soft: oklch(65% 0.09 175);
90
+ --candi-teal-strong: oklch(45% 0.11 175);
91
+ --candi-teal-outline: oklch(40% 0.09 175);
92
+ --candi-on-teal: oklch(100% 0 0);
93
+ --candi-pink: oklch(70% 0.12 0);
94
+ --candi-pink-subtle: oklch(92% 0.10 0);
95
+ --candi-pink-soft: oklch(78% 0.11 0);
96
+ --candi-pink-strong: oklch(60% 0.13 0);
97
+ --candi-pink-outline: oklch(55% 0.11 0);
98
+ --candi-on-pink: oklch(0% 0 0);
99
+ --candi-gold: oklch(70% 0.12 70);
100
+ --candi-gold-subtle: oklch(92% 0.10 70);
101
+ --candi-gold-soft: oklch(78% 0.11 70);
102
+ --candi-gold-strong: oklch(60% 0.13 70);
103
+ --candi-gold-outline: oklch(55% 0.11 70);
104
+ --candi-on-gold: oklch(0% 0 0);
105
+ --candi-silver: oklch(75% 0.01 250);
106
+ --candi-silver-subtle: oklch(92% 0.008 250);
107
+ --candi-silver-soft: oklch(82% 0.009 250);
108
+ --candi-silver-strong: oklch(65% 0.012 250);
109
+ --candi-silver-outline: oklch(60% 0.009 250);
110
+ --candi-on-silver: oklch(0% 0 0);
111
+ --candi-accent: oklch(52% 0.08 250);
112
+ --candi-accent-subtle: oklch(85% 0.048 250);
113
+ --candi-accent-soft: oklch(62% 0.064 250);
114
+ --candi-accent-strong: oklch(42% 0.088 250);
115
+ --candi-accent-outline: oklch(37% 0.056 250);
56
116
  --candi-on-accent: oklch(100% 0 0);
57
- --candi-secondary: oklch(60% 0.10 15);
58
- --candi-secondary-subtle: oklch(93% 0.08 15);
59
- --candi-secondary-soft: oklch(70% 0.09 15);
60
- --candi-secondary-strong: oklch(50% 0.11 15);
61
- --candi-secondary-outline: oklch(45% 0.09 15);
117
+ --candi-secondary: oklch(60% 0.07 15);
118
+ --candi-secondary-subtle: oklch(93% 0.042 15);
119
+ --candi-secondary-soft: oklch(70% 0.056 15);
120
+ --candi-secondary-strong: oklch(50% 0.077 15);
121
+ --candi-secondary-outline: oklch(45% 0.049 15);
62
122
  --candi-on-secondary: oklch(0% 0 0);
63
- --candi-success: oklch(50% 0.08 145);
64
- --candi-success-subtle: oklch(83% 0.064 145);
65
- --candi-success-soft: oklch(60% 0.072 145);
66
- --candi-success-strong: oklch(40% 0.088 145);
67
- --candi-success-outline: oklch(35% 0.072 145);
123
+ --candi-success: oklch(50% 0.06 145);
124
+ --candi-success-subtle: oklch(83% 0.036 145);
125
+ --candi-success-soft: oklch(60% 0.048 145);
126
+ --candi-success-strong: oklch(40% 0.066 145);
127
+ --candi-success-outline: oklch(35% 0.042 145);
68
128
  --candi-on-success: oklch(100% 0 0);
69
- --candi-warning: oklch(60% 0.10 75);
70
- --candi-warning-subtle: oklch(93% 0.08 75);
71
- --candi-warning-soft: oklch(70% 0.09 75);
72
- --candi-warning-strong: oklch(50% 0.11 75);
73
- --candi-warning-outline: oklch(45% 0.09 75);
129
+ --candi-warning: oklch(60% 0.07 75);
130
+ --candi-warning-subtle: oklch(93% 0.042 75);
131
+ --candi-warning-soft: oklch(70% 0.056 75);
132
+ --candi-warning-strong: oklch(50% 0.077 75);
133
+ --candi-warning-outline: oklch(45% 0.049 75);
74
134
  --candi-on-warning: oklch(0% 0 0);
75
- --candi-error: oklch(50% 0.10 25);
76
- --candi-error-subtle: oklch(83% 0.08 25);
77
- --candi-error-soft: oklch(60% 0.09 25);
78
- --candi-error-strong: oklch(40% 0.11 25);
79
- --candi-error-outline: oklch(35% 0.09 25);
135
+ --candi-error: oklch(50% 0.08 25);
136
+ --candi-error-subtle: oklch(83% 0.048 25);
137
+ --candi-error-soft: oklch(60% 0.064 25);
138
+ --candi-error-strong: oklch(40% 0.088 25);
139
+ --candi-error-outline: oklch(35% 0.056 25);
80
140
  --candi-on-error: oklch(100% 0 0);
81
- --candi-info: oklch(50% 0.08 225);
82
- --candi-info-subtle: oklch(83% 0.064 225);
83
- --candi-info-soft: oklch(60% 0.072 225);
84
- --candi-info-strong: oklch(40% 0.088 225);
85
- --candi-info-outline: oklch(35% 0.072 225);
141
+ --candi-info: oklch(50% 0.06 225);
142
+ --candi-info-subtle: oklch(83% 0.036 225);
143
+ --candi-info-soft: oklch(60% 0.048 225);
144
+ --candi-info-strong: oklch(40% 0.066 225);
145
+ --candi-info-outline: oklch(35% 0.042 225);
86
146
  --candi-on-info: oklch(100% 0 0);
87
147
  /* @tokens-end-light */
88
148
  }
89
149
 
90
150
  .dark {
91
151
  /* @tokens-start-dark */
92
- --candi-bg: oklch(18% 0.015 85);
93
- --candi-surface: oklch(22% 0.012 85);
94
- --candi-elevated: oklch(25% 0.015 85);
95
- --candi-text: oklch(92% 0.01 85);
96
- --candi-text-subtle: oklch(72% 0.008 85);
97
- --candi-text-muted: oklch(58% 0.006 85);
98
- --candi-border: oklch(30% 0.01 85);
99
- --candi-border-strong: oklch(40% 0.012 85);
100
- --candi-divider: oklch(28% 0.008 85);
101
- --candi-link: oklch(65% 0.08 85);
102
- --candi-disabled: oklch(45% 0.005 85);
152
+ --candi-bg: oklch(18% 0.015 250);
153
+ --candi-surface: oklch(22% 0.012 250);
154
+ --candi-elevated: oklch(25% 0.015 250);
155
+ --candi-text: oklch(92% 0.01 250);
156
+ --candi-text-subtle: oklch(75% 0.01 250);
157
+ --candi-text-muted: oklch(62% 0.008 250);
158
+ --candi-border: oklch(35% 0.01 250);
159
+ --candi-border-strong: oklch(45% 0.012 250);
160
+ --candi-divider: oklch(32% 0.008 250);
161
+ --candi-link: oklch(65% 0.08 250);
162
+ --candi-disabled: oklch(45% 0.005 250);
103
163
  --candi-overlay: oklch(0% 0 0 / 0.7);
104
164
  --candi-scrim: oklch(0% 0 0 / 0.6);
105
- --candi-inverse-surface: oklch(92% 0.008 85);
106
- --candi-inverse-text: oklch(25% 0.015 275);
165
+ --candi-inverse-surface: oklch(92% 0.01 250);
166
+ --candi-inverse-text: oklch(25% 0.015 250);
107
167
  --candi-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
108
168
  --candi-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.35);
109
169
  --candi-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.45);
@@ -125,41 +185,101 @@
125
185
  --candi-terminal-magenta: oklch(70% 0.10 15);
126
186
  --candi-terminal-cyan: oklch(70% 0.04 225);
127
187
  --candi-terminal-white: oklch(92% 0.01 85);
128
- --candi-accent: oklch(65% 0.13 275);
129
- --candi-accent-subtle: oklch(38% 0.104 275);
130
- --candi-accent-soft: oklch(75% 0.117 275);
131
- --candi-accent-strong: oklch(55% 0.143 275);
132
- --candi-accent-outline: oklch(50% 0.117 275);
188
+ --candi-red: oklch(70% 0.12 25);
189
+ --candi-red-subtle: oklch(40% 0.10 25);
190
+ --candi-red-soft: oklch(78% 0.11 25);
191
+ --candi-red-strong: oklch(60% 0.13 25);
192
+ --candi-red-outline: oklch(55% 0.11 25);
193
+ --candi-on-red: oklch(0% 0 0);
194
+ --candi-blue: oklch(70% 0.10 250);
195
+ --candi-blue-subtle: oklch(38% 0.08 250);
196
+ --candi-blue-soft: oklch(78% 0.09 250);
197
+ --candi-blue-strong: oklch(60% 0.11 250);
198
+ --candi-blue-outline: oklch(55% 0.09 250);
199
+ --candi-on-blue: oklch(0% 0 0);
200
+ --candi-green: oklch(70% 0.10 145);
201
+ --candi-green-subtle: oklch(40% 0.08 145);
202
+ --candi-green-soft: oklch(78% 0.09 145);
203
+ --candi-green-strong: oklch(60% 0.11 145);
204
+ --candi-green-outline: oklch(55% 0.09 145);
205
+ --candi-on-green: oklch(0% 0 0);
206
+ --candi-yellow: oklch(85% 0.12 90);
207
+ --candi-yellow-subtle: oklch(50% 0.10 90);
208
+ --candi-yellow-soft: oklch(90% 0.11 90);
209
+ --candi-yellow-strong: oklch(75% 0.13 90);
210
+ --candi-yellow-outline: oklch(70% 0.11 90);
211
+ --candi-on-yellow: oklch(0% 0 0);
212
+ --candi-magenta: oklch(70% 0.15 330);
213
+ --candi-magenta-subtle: oklch(40% 0.12 330);
214
+ --candi-magenta-soft: oklch(78% 0.14 330);
215
+ --candi-magenta-strong: oklch(60% 0.17 330);
216
+ --candi-magenta-outline: oklch(55% 0.14 330);
217
+ --candi-on-magenta: oklch(0% 0 0);
218
+ --candi-cyan: oklch(75% 0.08 200);
219
+ --candi-cyan-subtle: oklch(45% 0.06 200);
220
+ --candi-cyan-soft: oklch(82% 0.07 200);
221
+ --candi-cyan-strong: oklch(65% 0.09 200);
222
+ --candi-cyan-outline: oklch(60% 0.07 200);
223
+ --candi-on-cyan: oklch(0% 0 0);
224
+ --candi-teal: oklch(70% 0.08 175);
225
+ --candi-teal-subtle: oklch(40% 0.06 175);
226
+ --candi-teal-soft: oklch(78% 0.07 175);
227
+ --candi-teal-strong: oklch(60% 0.09 175);
228
+ --candi-teal-outline: oklch(55% 0.07 175);
229
+ --candi-on-teal: oklch(0% 0 0);
230
+ --candi-pink: oklch(80% 0.10 0);
231
+ --candi-pink-subtle: oklch(48% 0.08 0);
232
+ --candi-pink-soft: oklch(85% 0.09 0);
233
+ --candi-pink-strong: oklch(70% 0.11 0);
234
+ --candi-pink-outline: oklch(65% 0.09 0);
235
+ --candi-on-pink: oklch(0% 0 0);
236
+ --candi-gold: oklch(80% 0.10 70);
237
+ --candi-gold-subtle: oklch(48% 0.08 70);
238
+ --candi-gold-soft: oklch(85% 0.09 70);
239
+ --candi-gold-strong: oklch(70% 0.11 70);
240
+ --candi-gold-outline: oklch(65% 0.09 70);
241
+ --candi-on-gold: oklch(0% 0 0);
242
+ --candi-silver: oklch(60% 0.01 250);
243
+ --candi-silver-subtle: oklch(35% 0.008 250);
244
+ --candi-silver-soft: oklch(68% 0.009 250);
245
+ --candi-silver-strong: oklch(50% 0.012 250);
246
+ --candi-silver-outline: oklch(45% 0.009 250);
247
+ --candi-on-silver: oklch(100% 0 0);
248
+ --candi-accent: oklch(65% 0.08 250);
249
+ --candi-accent-subtle: oklch(38% 0.048 250);
250
+ --candi-accent-soft: oklch(75% 0.064 250);
251
+ --candi-accent-strong: oklch(55% 0.088 250);
252
+ --candi-accent-outline: oklch(50% 0.056 250);
133
253
  --candi-on-accent: oklch(0% 0 0);
134
- --candi-secondary: oklch(70% 0.10 15);
135
- --candi-secondary-subtle: oklch(43% 0.08 15);
136
- --candi-secondary-soft: oklch(80% 0.09 15);
137
- --candi-secondary-strong: oklch(60% 0.11 15);
138
- --candi-secondary-outline: oklch(55% 0.09 15);
254
+ --candi-secondary: oklch(70% 0.07 15);
255
+ --candi-secondary-subtle: oklch(43% 0.042 15);
256
+ --candi-secondary-soft: oklch(80% 0.056 15);
257
+ --candi-secondary-strong: oklch(60% 0.077 15);
258
+ --candi-secondary-outline: oklch(55% 0.049 15);
139
259
  --candi-on-secondary: oklch(0% 0 0);
140
- --candi-success: oklch(75% 0.08 145);
141
- --candi-success-subtle: oklch(48% 0.064 145);
142
- --candi-success-soft: oklch(85% 0.072 145);
143
- --candi-success-strong: oklch(65% 0.088 145);
144
- --candi-success-outline: oklch(60% 0.072 145);
260
+ --candi-success: oklch(75% 0.06 145);
261
+ --candi-success-subtle: oklch(48% 0.036 145);
262
+ --candi-success-soft: oklch(85% 0.048 145);
263
+ --candi-success-strong: oklch(65% 0.066 145);
264
+ --candi-success-outline: oklch(60% 0.042 145);
145
265
  --candi-on-success: oklch(0% 0 0);
146
- --candi-warning: oklch(80% 0.10 75);
147
- --candi-warning-subtle: oklch(53% 0.08 75);
148
- --candi-warning-soft: oklch(90% 0.09 75);
149
- --candi-warning-strong: oklch(70% 0.11 75);
150
- --candi-warning-outline: oklch(65% 0.09 75);
266
+ --candi-warning: oklch(80% 0.07 75);
267
+ --candi-warning-subtle: oklch(53% 0.042 75);
268
+ --candi-warning-soft: oklch(90% 0.056 75);
269
+ --candi-warning-strong: oklch(70% 0.077 75);
270
+ --candi-warning-outline: oklch(65% 0.049 75);
151
271
  --candi-on-warning: oklch(0% 0 0);
152
- --candi-error: oklch(75% 0.10 25);
153
- --candi-error-subtle: oklch(48% 0.08 25);
154
- --candi-error-soft: oklch(85% 0.09 25);
155
- --candi-error-strong: oklch(65% 0.11 25);
156
- --candi-error-outline: oklch(60% 0.09 25);
272
+ --candi-error: oklch(75% 0.08 25);
273
+ --candi-error-subtle: oklch(48% 0.048 25);
274
+ --candi-error-soft: oklch(85% 0.064 25);
275
+ --candi-error-strong: oklch(65% 0.088 25);
276
+ --candi-error-outline: oklch(60% 0.056 25);
157
277
  --candi-on-error: oklch(0% 0 0);
158
- --candi-info: oklch(75% 0.08 225);
159
- --candi-info-subtle: oklch(48% 0.064 225);
160
- --candi-info-soft: oklch(85% 0.072 225);
161
- --candi-info-strong: oklch(65% 0.088 225);
162
- --candi-info-outline: oklch(60% 0.072 225);
278
+ --candi-info: oklch(75% 0.06 225);
279
+ --candi-info-subtle: oklch(48% 0.036 225);
280
+ --candi-info-soft: oklch(85% 0.048 225);
281
+ --candi-info-strong: oklch(65% 0.066 225);
282
+ --candi-info-outline: oklch(60% 0.042 225);
163
283
  --candi-on-info: oklch(0% 0 0);
164
284
  /* @tokens-end-dark */
165
285
  }