@wtasnorg/candi 0.0.22 → 0.0.31

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 (11) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +83 -85
  3. package/dist/base.css +217 -73
  4. package/dist/colors.js +1759 -447
  5. package/dist/colors.json +1759 -447
  6. package/dist/colors.mjs +1759 -447
  7. package/dist/plugin.js +16 -0
  8. package/dist/plugin.mjs +16 -0
  9. package/dist/scandinavian.css +217 -73
  10. package/dist/v4/theme.css +513 -149
  11. package/package.json +16 -9
package/LICENSE CHANGED
@@ -1,4 +1,4 @@
1
- Copyright © 2025 wtasg
1
+ Copyright © 2026 wtasg
2
2
 
3
3
  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4
4
 
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,13 +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 |
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 |
22
23
 
23
24
  ---
24
25
 
@@ -26,37 +27,41 @@ Candi provides a single source of truth for colors using the OKLCH color space,
26
27
 
27
28
  ### Single Source of Truth
28
29
 
29
- 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.
30
31
 
31
32
  ```text
32
- src/data/colors.js (Source of Truth)
33
- │
34
- ▼
35
- scripts/sync-colors.js (Generator)
36
- │
37
- ├── src/css/base.css (CSS Variables)
38
- ├── src/v4/theme.css (Tailwind v4 @theme)
39
- └── dist/colors.json (Data export)
40
-
41
- Platform Builds (all consume colors.js directly):
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):
42
46
  ├── build-flutter.js → flutter/lib/candi_colors.dart
43
47
  ├── build-vscode.js → vscode/themes/*.json
44
48
  ├── build-vim.js → vim/colors/*.vim
45
49
  ├── build-kde.js → kde/v4,v5/*.colors
46
50
  ├── build-gnome.js → gnome/gtk-*/*.css
47
- └── build-obsidian.js → obsidian/theme.css
51
+ ├── build-obsidian.js → obsidian/theme.css
52
+ └── build-showcase.js → showcase_flutter/
48
53
  ```
49
54
 
50
55
  ### OKLCH Color Space
51
56
 
52
57
  Candi uses OKLCH as its primary color space instead of Hex codes:
53
58
 
54
- - **Perceptual Uniformity**: Consistent contrast and brightness across the palette
55
- - **Synchronized Themes**: Updates to `src/data/colors.js` propagate to all platforms via `npm run build:all`
56
- - **Shared Logic**: Centralized conversion in `scripts/color-conv.js` ensures color accuracy
57
- - **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
58
63
 
59
- **[Learn more about OKLCH color conversion](docs/color-conversion.md)**
64
+ [Learn more about OKLCH color conversion](docs/color-conversion.md)
60
65
 
61
66
  ---
62
67
 
@@ -64,19 +69,25 @@ Candi uses OKLCH as its primary color space instead of Hex codes:
64
69
 
65
70
  ```text
66
71
  candi/
72
+ ├── ARCHITECTURE.md # System architecture and SSOT design
73
+ ├── Knowledge.md # Lessons learned and development notes
67
74
  ├── src/ # Source files for npm package
68
75
  │ ├── css/ # CSS files (base, components, utilities)
69
76
  │ ├── data/ # Source of truth (colors.js)
70
- │ ├── v4/ # Tailwind v4 theme
77
+ │ ├── v4/ # Tailwind v4 @theme
71
78
  │ ├── index.js # Main entry point
72
79
  │ ├── plugin.js # Tailwind v3 plugin
73
- │ └── theme.js # Tailwind v3 theme extension
74
- ├── 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
75
83
  │ ├── build.js # Main npm package build
76
84
  │ ├── build-*.js # Platform-specific builds
77
85
  │ ├── test-*.js # Platform-specific tests
78
86
  │ ├── sync-colors.js # Color synchronization
79
- │ └── 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
80
91
  ├── dist/ # Built output (git-ignored)
81
92
  ├── docs/ # Documentation guides
82
93
  ├── website/ # Documentation site (Vite + React)
@@ -85,7 +96,8 @@ candi/
85
96
  ├── vim/ # Vim colorschemes
86
97
  ├── kde/ # KDE Plasma color schemes
87
98
  ├── gnome/ # GTK3/GTK4 themes
88
- └── obsidian/ # Obsidian theme
99
+ ├── obsidian/ # Obsidian theme
100
+ └── showcase_flutter/ # Flutter showcase application
89
101
  ```
90
102
 
91
103
  ---
@@ -104,6 +116,7 @@ candi/
104
116
  | `npm run build:kde` | Build KDE color schemes only |
105
117
  | `npm run build:gnome` | Build GNOME/GTK themes only |
106
118
  | `npm run build:obsidian` | Build Obsidian theme only |
119
+ | `npm run build:showcase` | Build Flutter showcase app only |
107
120
 
108
121
  ### Test
109
122
 
@@ -118,6 +131,7 @@ candi/
118
131
  | `npm run test:kde` | Test KDE color schemes |
119
132
  | `npm run test:gnome` | Test GNOME themes |
120
133
  | `npm run test:obsidian` | Test Obsidian theme |
134
+ | `npm run test:showcase` | Test Flutter showcase app |
121
135
 
122
136
  ### Package & Publish
123
137
 
@@ -135,46 +149,15 @@ candi/
135
149
 
136
150
  Download ready-to-use artifacts from GitHub releases (recommended for most users).
137
151
 
138
- **[Using Prebuilt Releases Guide](docs/using-release-artifacts.md)**
152
+ [Using Prebuilt Releases Guide](docs/using-release-artifacts.md)
139
153
 
140
- ### GitHub Packages Authentication (Required)
141
-
142
- > [!IMPORTANT]
143
- > This package is published to **GitHub Packages**, not npmjs.com. You must authenticate with GitHub before installing.
144
-
145
- To install the package, you need to authenticate with GitHub:
146
-
147
- 1. **Create a Personal Access Token (PAT)**:
148
- - Go to GitHub Settings → [Developer settings → Personal access tokens → Tokens (classic)](https://github.com/settings/tokens)
149
- - Click "Generate new token (classic)"
150
- - Give it a descriptive name (e.g., "npm packages")
151
- - Select the `read:packages` scope
152
- - Click "Generate token" and copy the token
153
-
154
- 2. **Configure npm authentication**:
155
-
156
- ```bash
157
- npm login --scope=@wtasg --auth-type=legacy --registry=https://npm.pkg.github.com
158
- ```
159
-
160
- - Username: Your GitHub username
161
- - Password: The PAT you just created
162
- - Email: Your GitHub email
163
-
164
- Or create/update your `~/.npmrc` file:
165
-
166
- ```text
167
- //npm.pkg.github.com/:_authToken=YOUR_GITHUB_PAT
168
- @wtasg:registry=https://npm.pkg.github.com
169
- ```
170
-
171
- ### Web (Tailwind CSS)
154
+ ### Web (npm Package)
172
155
 
173
156
  ```bash
174
157
  npm install @wtasnorg/candi
175
158
  ```
176
159
 
177
- **Tailwind v4** (Recommended):
160
+ Tailwind v4 (Recommended):
178
161
 
179
162
  ```css
180
163
  /* In your CSS */
@@ -182,7 +165,7 @@ npm install @wtasnorg/candi
182
165
  @import "@wtasnorg/candi/v4";
183
166
  ```
184
167
 
185
- **Tailwind v3**:
168
+ Tailwind v3:
186
169
 
187
170
  ```js
188
171
  // tailwind.config.js
@@ -193,7 +176,7 @@ module.exports = {
193
176
  };
194
177
  ```
195
178
 
196
- **[Full Web Setup Guide](docs/use-with-tailwindcss.md)** | **[Use Without Tailwind](docs/use-without-tailwindcss.md)**
179
+ [Full Web Setup Guide](docs/use-with-tailwindcss.md) | [Use Without Tailwind](docs/use-without-tailwindcss.md)
197
180
 
198
181
  ### Platform Guides
199
182
 
@@ -212,9 +195,9 @@ module.exports = {
212
195
 
213
196
  | Token | Light | Dark | Usage |
214
197
  | :--- | :--- | :--- | :--- |
215
- | `bg` | Warm white | Warm dark | Page background |
216
- | `surface` | Soft cream | Card surface | Cards, sections |
217
- | `elevated` | Pure white | Elevated dark | Modals, popups |
198
+ | `bg` | Warm white | Warm dark (Hygge) | Page background |
199
+ | `surface` | Soft cream | Warm dark surface | Cards, sections |
200
+ | `elevated` | Pure white | Warm elevated dark | Modals, popups |
218
201
  | `text` | Warm charcoal | Off-white | Primary text |
219
202
  | `text-subtle` | Medium gray | Light gray | Secondary text |
220
203
  | `text-muted` | Light gray | Muted gray | Tertiary text |
@@ -224,17 +207,34 @@ module.exports = {
224
207
  | `warning` | Amber | Lighter amber | Warning states |
225
208
  | `error` | Coral red | Lighter coral | Error states |
226
209
 
227
- **[Customize Colors](docs/customizing-colors.md)**
210
+ ### Primitive Colors
211
+
212
+ Each primitive color includes 6 variants for flexible usage:
213
+
214
+ | Base | Subtle | Soft | Strong | Outline | On |
215
+ | :--- | :--- | :--- | :--- | :--- | :--- |
216
+ | `red` | `red-subtle` | `red-soft` | `red-strong` | `red-outline` | `on-red` |
217
+ | `blue` | `blue-subtle` | `blue-soft` | `blue-strong` | `blue-outline` | `on-blue` |
218
+ | `green` | `green-subtle` | `green-soft` | `green-strong` | `green-outline` | `on-green` |
219
+ | `yellow` | `yellow-subtle` | `yellow-soft` | `yellow-strong` | `yellow-outline` | `on-yellow` |
220
+ | `magenta` | `magenta-subtle` | `magenta-soft` | `magenta-strong` | `magenta-outline` | `on-magenta` |
221
+ | `cyan` | `cyan-subtle` | `cyan-soft` | `cyan-strong` | `cyan-outline` | `on-cyan` |
222
+ | `teal` | `teal-subtle` | `teal-soft` | `teal-strong` | `teal-outline` | `on-teal` |
223
+ | `pink` | `pink-subtle` | `pink-soft` | `pink-strong` | `pink-outline` | `on-pink` |
224
+ | `gold` | `gold-subtle` | `gold-soft` | `gold-strong` | `gold-outline` | `on-gold` |
225
+ | `silver` | `silver-subtle` | `silver-soft` | `silver-strong` | `silver-outline` | `on-silver` |
226
+
227
+ [Customize Colors](docs/customizing-colors.md)
228
228
 
229
229
  ---
230
230
 
231
231
  ## Design & Accessibility
232
232
 
233
- Candi is built with accessibility as a core requirement:
233
+ Candi prioritizes accessibility through automated validation:
234
234
 
235
- - **WCAG Standards**: Color extraction pipeline automatically validates contrast ratios
236
- - **Primary Text**: Aimed at **4.5:1** contrast (WCAG AA) for standard text
237
- - **UI Elements**: Accents and status indicators tuned for **3.0:1** contrast (WCAG Graphical Objects)
235
+ - WCAG Compliance: Contrast ratios are validated programmatically during the color extraction pipeline.
236
+ - Primary Text: Targets 4.5:1 (WCAG AA) for standard text.
237
+ - UI Elements: Accents and state indicators target 3.0:1 (WCAG Graphical Objects).
238
238
 
239
239
  ---
240
240
 
@@ -260,23 +260,21 @@ npm install
260
260
  npm run build:all
261
261
  ```
262
262
 
263
- ### Working on the Documentation Website
263
+ ### Documentation Website
264
264
 
265
- The docs website lives in `website/` and uses the built theme from `dist/`:
265
+ The documentation site in `website/` consumes the built theme from `dist/`:
266
266
 
267
267
  ```bash
268
268
  cd website
269
269
  npm install
270
- npm run dev # Starts dev server at http://localhost:3000
270
+ npm run dev
271
271
  ```
272
272
 
273
- The `predev` and `prebuild` scripts automatically rebuild the parent package, so changes to `src/data/colors.js` are reflected immediately.
274
-
275
- ### Making Color Changes
273
+ ### Color Modifications
276
274
 
277
- 1. Edit `src/data/colors.js` (the single source of truth)
278
- 2. Run `npm run build:all` to regenerate all platform themes
279
- 3. Run `npm test` to validate color accuracy and contrast ratios
275
+ 1. Edit authoritative anchors in `src/data/colors.js`.
276
+ 2. Run `npm run build:all` to regenerate platform themes via the derivation engine.
277
+ 3. Run `npm test` to validate system-wide harmony and contrast.
280
278
 
281
279
  ---
282
280
 
package/dist/base.css CHANGED
@@ -12,29 +12,15 @@
12
12
 
13
13
  :root {
14
14
  /* @tokens-start-light */
15
- --candi-bg: oklch(98% 0.008 85);
16
- --candi-surface: oklch(95.5% 0.012 85);
15
+ --candi-bg: oklch(96% 0.012 85);
16
+ --candi-surface: oklch(93% 0.015 85);
17
17
  --candi-elevated: oklch(100% 0 0);
18
- --candi-text: oklch(28% 0.015 250);
19
- --candi-text-subtle: oklch(50% 0.01 250);
20
- --candi-text-muted: oklch(62% 0.008 250);
21
- --candi-border: oklch(90% 0.008 85);
22
- --candi-border-strong: oklch(82% 0.01 85);
23
- --candi-divider: oklch(88% 0.006 85);
24
- --candi-accent: oklch(52% 0.06 230);
25
- --candi-accent-subtle: oklch(85% 0.03 230);
26
- --candi-on-accent: oklch(100% 0 0);
27
- --candi-secondary: oklch(58% 0.12 55);
28
- --candi-secondary-subtle: oklch(88% 0.04 55);
29
- --candi-on-secondary: oklch(100% 0 0);
30
- --candi-success: oklch(52% 0.08 145);
31
- --candi-on-success: oklch(100% 0 0);
32
- --candi-warning: oklch(68% 0.13 70);
33
- --candi-on-warning: oklch(20% 0.02 70);
34
- --candi-error: oklch(58% 0.12 25);
35
- --candi-on-error: oklch(100% 0 0);
36
- --candi-info: oklch(55% 0.1 240);
37
- --candi-on-info: 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);
38
24
  --candi-link: oklch(50% 0.08 230);
39
25
  --candi-disabled: oklch(75% 0.005 250);
40
26
  --candi-overlay: oklch(0% 0 0 / 0.5);
@@ -62,55 +48,127 @@
62
48
  --candi-terminal-magenta: oklch(60% 0.15 0);
63
49
  --candi-terminal-cyan: oklch(65% 0.1 200);
64
50
  --candi-terminal-white: oklch(92% 0.01 85);
65
-
66
- /* Terminal Palette */
67
- --candi-terminal-black: oklch(25% 0.01 250);
68
- --candi-terminal-red: var(--candi-error);
69
- --candi-terminal-green: var(--candi-success);
70
- --candi-terminal-yellow: var(--candi-warning);
71
- --candi-terminal-blue: var(--candi-accent);
72
- --candi-terminal-magenta: var(--candi-syntax-keyword);
73
- --candi-terminal-cyan: var(--candi-syntax-var);
74
- --candi-terminal-white: var(--candi-text);
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.14 275);
112
+ --candi-accent-subtle: oklch(85% 0.112 275);
113
+ --candi-accent-soft: oklch(62% 0.126 275);
114
+ --candi-accent-strong: oklch(42% 0.154 275);
115
+ --candi-accent-outline: oklch(37% 0.126 275);
116
+ --candi-on-accent: oklch(100% 0 0);
117
+ --candi-secondary: oklch(60% 0.10 15);
118
+ --candi-secondary-subtle: oklch(93% 0.08 15);
119
+ --candi-secondary-soft: oklch(70% 0.09 15);
120
+ --candi-secondary-strong: oklch(50% 0.11 15);
121
+ --candi-secondary-outline: oklch(45% 0.09 15);
122
+ --candi-on-secondary: oklch(0% 0 0);
123
+ --candi-success: oklch(50% 0.08 145);
124
+ --candi-success-subtle: oklch(83% 0.064 145);
125
+ --candi-success-soft: oklch(60% 0.072 145);
126
+ --candi-success-strong: oklch(40% 0.088 145);
127
+ --candi-success-outline: oklch(35% 0.072 145);
128
+ --candi-on-success: oklch(100% 0 0);
129
+ --candi-warning: oklch(60% 0.10 75);
130
+ --candi-warning-subtle: oklch(93% 0.08 75);
131
+ --candi-warning-soft: oklch(70% 0.09 75);
132
+ --candi-warning-strong: oklch(50% 0.11 75);
133
+ --candi-warning-outline: oklch(45% 0.09 75);
134
+ --candi-on-warning: oklch(0% 0 0);
135
+ --candi-error: oklch(50% 0.10 25);
136
+ --candi-error-subtle: oklch(83% 0.08 25);
137
+ --candi-error-soft: oklch(60% 0.09 25);
138
+ --candi-error-strong: oklch(40% 0.11 25);
139
+ --candi-error-outline: oklch(35% 0.09 25);
140
+ --candi-on-error: oklch(100% 0 0);
141
+ --candi-info: oklch(50% 0.08 225);
142
+ --candi-info-subtle: oklch(83% 0.064 225);
143
+ --candi-info-soft: oklch(60% 0.072 225);
144
+ --candi-info-strong: oklch(40% 0.088 225);
145
+ --candi-info-outline: oklch(35% 0.072 225);
146
+ --candi-on-info: oklch(100% 0 0);
75
147
  /* @tokens-end-light */
76
148
  }
77
149
 
78
150
  .dark {
79
151
  /* @tokens-start-dark */
80
- --candi-bg: oklch(18% 0.015 250);
81
- --candi-surface: oklch(22% 0.012 250);
82
- --candi-elevated: oklch(25% 0.015 250);
152
+ --candi-bg: oklch(18% 0.015 85);
153
+ --candi-surface: oklch(22% 0.012 85);
154
+ --candi-elevated: oklch(25% 0.015 85);
83
155
  --candi-text: oklch(92% 0.01 85);
84
156
  --candi-text-subtle: oklch(72% 0.008 85);
85
157
  --candi-text-muted: oklch(58% 0.006 85);
86
- --candi-border: oklch(30% 0.01 250);
87
- --candi-border-strong: oklch(40% 0.012 250);
88
- --candi-divider: oklch(28% 0.008 250);
89
- --candi-accent: oklch(62% 0.08 230);
90
- --candi-accent-subtle: oklch(35% 0.04 230);
91
- --candi-on-accent: oklch(15% 0.01 230);
92
- --candi-secondary: oklch(65% 0.12 55);
93
- --candi-secondary-subtle: oklch(30% 0.05 55);
94
- --candi-on-secondary: oklch(15% 0.02 55);
95
- --candi-success: oklch(60% 0.1 145);
96
- --candi-on-success: oklch(15% 0.02 145);
97
- --candi-warning: oklch(72% 0.13 70);
98
- --candi-on-warning: oklch(15% 0.02 70);
99
- --candi-error: oklch(65% 0.12 25);
100
- --candi-on-error: oklch(15% 0.02 25);
101
- --candi-info: oklch(65% 0.1 240);
102
- --candi-on-info: oklch(15% 0.02 240);
103
- --candi-link: oklch(60% 0.08 230);
104
- --candi-disabled: oklch(45% 0.005 250);
158
+ --candi-border: oklch(30% 0.01 85);
159
+ --candi-border-strong: oklch(40% 0.012 85);
160
+ --candi-divider: oklch(28% 0.008 85);
161
+ --candi-link: oklch(65% 0.08 85);
162
+ --candi-disabled: oklch(45% 0.005 85);
105
163
  --candi-overlay: oklch(0% 0 0 / 0.7);
106
164
  --candi-scrim: oklch(0% 0 0 / 0.6);
107
165
  --candi-inverse-surface: oklch(92% 0.008 85);
108
- --candi-inverse-text: oklch(25% 0.015 250);
166
+ --candi-inverse-text: oklch(25% 0.015 275);
109
167
  --candi-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
110
168
  --candi-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.35);
111
169
  --candi-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.45);
112
170
  --candi-shadow-color: oklch(0% 0 0 / 0.4);
113
- --candi-focus-ring: oklch(62% 0.08 230 / 0.5);
171
+ --candi-focus-ring: oklch(62% 0.08 275 / 0.5);
114
172
  --candi-syntax-keyword: oklch(70% 0.15 0);
115
173
  --candi-syntax-type: oklch(75% 0.12 280);
116
174
  --candi-syntax-var: oklch(75% 0.1 200);
@@ -119,24 +177,110 @@
119
177
  --candi-syntax-string: oklch(70% 0.12 140);
120
178
  --candi-hover: oklch(100% 0 0 / 0.1);
121
179
  --candi-active: oklch(100% 0 0 / 0.2);
122
- --candi-terminal-black: oklch(15% 0.01 250);
123
- --candi-terminal-red: oklch(65% 0.12 25);
124
- --candi-terminal-green: oklch(60% 0.1 145);
125
- --candi-terminal-yellow: oklch(72% 0.13 70);
126
- --candi-terminal-blue: oklch(62% 0.08 230);
127
- --candi-terminal-magenta: oklch(70% 0.15 0);
128
- --candi-terminal-cyan: oklch(75% 0.1 200);
180
+ --candi-terminal-black: oklch(15% 0.01 275);
181
+ --candi-terminal-red: oklch(65% 0.05 25);
182
+ --candi-terminal-green: oklch(65% 0.04 145);
183
+ --candi-terminal-yellow: oklch(75% 0.06 75);
184
+ --candi-terminal-blue: oklch(65% 0.13 275);
185
+ --candi-terminal-magenta: oklch(70% 0.10 15);
186
+ --candi-terminal-cyan: oklch(70% 0.04 225);
129
187
  --candi-terminal-white: oklch(92% 0.01 85);
130
-
131
- /* Terminal Palette */
132
- --candi-terminal-black: oklch(15% 0.01 250);
133
- --candi-terminal-red: var(--candi-error);
134
- --candi-terminal-green: var(--candi-success);
135
- --candi-terminal-yellow: var(--candi-warning);
136
- --candi-terminal-blue: var(--candi-accent);
137
- --candi-terminal-magenta: var(--candi-syntax-keyword);
138
- --candi-terminal-cyan: var(--candi-syntax-var);
139
- --candi-terminal-white: var(--candi-text);
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.13 275);
249
+ --candi-accent-subtle: oklch(38% 0.104 275);
250
+ --candi-accent-soft: oklch(75% 0.117 275);
251
+ --candi-accent-strong: oklch(55% 0.143 275);
252
+ --candi-accent-outline: oklch(50% 0.117 275);
253
+ --candi-on-accent: oklch(0% 0 0);
254
+ --candi-secondary: oklch(70% 0.10 15);
255
+ --candi-secondary-subtle: oklch(43% 0.08 15);
256
+ --candi-secondary-soft: oklch(80% 0.09 15);
257
+ --candi-secondary-strong: oklch(60% 0.11 15);
258
+ --candi-secondary-outline: oklch(55% 0.09 15);
259
+ --candi-on-secondary: oklch(0% 0 0);
260
+ --candi-success: oklch(75% 0.08 145);
261
+ --candi-success-subtle: oklch(48% 0.064 145);
262
+ --candi-success-soft: oklch(85% 0.072 145);
263
+ --candi-success-strong: oklch(65% 0.088 145);
264
+ --candi-success-outline: oklch(60% 0.072 145);
265
+ --candi-on-success: oklch(0% 0 0);
266
+ --candi-warning: oklch(80% 0.10 75);
267
+ --candi-warning-subtle: oklch(53% 0.08 75);
268
+ --candi-warning-soft: oklch(90% 0.09 75);
269
+ --candi-warning-strong: oklch(70% 0.11 75);
270
+ --candi-warning-outline: oklch(65% 0.09 75);
271
+ --candi-on-warning: oklch(0% 0 0);
272
+ --candi-error: oklch(75% 0.10 25);
273
+ --candi-error-subtle: oklch(48% 0.08 25);
274
+ --candi-error-soft: oklch(85% 0.09 25);
275
+ --candi-error-strong: oklch(65% 0.11 25);
276
+ --candi-error-outline: oklch(60% 0.09 25);
277
+ --candi-on-error: oklch(0% 0 0);
278
+ --candi-info: oklch(75% 0.08 225);
279
+ --candi-info-subtle: oklch(48% 0.064 225);
280
+ --candi-info-soft: oklch(85% 0.072 225);
281
+ --candi-info-strong: oklch(65% 0.088 225);
282
+ --candi-info-outline: oklch(60% 0.072 225);
283
+ --candi-on-info: oklch(0% 0 0);
140
284
  /* @tokens-end-dark */
141
285
  }
142
286