@wtasnorg/candi 0.0.27 → 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 (8) hide show
  1. package/README.md +66 -43
  2. package/dist/base.css +120 -0
  3. package/dist/colors.js +960 -0
  4. package/dist/colors.json +960 -0
  5. package/dist/colors.mjs +960 -0
  6. package/dist/scandinavian.css +120 -0
  7. package/dist/v4/theme.css +300 -0
  8. package/package.json +4 -3
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)
@@ -143,7 +149,7 @@ candi/
143
149
 
144
150
  Download ready-to-use artifacts from GitHub releases (recommended for most users).
145
151
 
146
- **[Using Prebuilt Releases Guide](docs/using-release-artifacts.md)**
152
+ [Using Prebuilt Releases Guide](docs/using-release-artifacts.md)
147
153
 
148
154
  ### Web (npm Package)
149
155
 
@@ -151,7 +157,7 @@ Download ready-to-use artifacts from GitHub releases (recommended for most users
151
157
  npm install @wtasnorg/candi
152
158
  ```
153
159
 
154
- **Tailwind v4** (Recommended):
160
+ Tailwind v4 (Recommended):
155
161
 
156
162
  ```css
157
163
  /* In your CSS */
@@ -159,7 +165,7 @@ npm install @wtasnorg/candi
159
165
  @import "@wtasnorg/candi/v4";
160
166
  ```
161
167
 
162
- **Tailwind v3**:
168
+ Tailwind v3:
163
169
 
164
170
  ```js
165
171
  // tailwind.config.js
@@ -170,7 +176,7 @@ module.exports = {
170
176
  };
171
177
  ```
172
178
 
173
- **[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)
174
180
 
175
181
  ### Platform Guides
176
182
 
@@ -201,7 +207,24 @@ module.exports = {
201
207
  | `warning` | Amber | Lighter amber | Warning states |
202
208
  | `error` | Coral red | Lighter coral | Error states |
203
209
 
204
- **[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)
205
228
 
206
229
  ---
207
230
 
@@ -209,9 +232,9 @@ module.exports = {
209
232
 
210
233
  Candi prioritizes accessibility through automated validation:
211
234
 
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).
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).
215
238
 
216
239
  ---
217
240
 
package/dist/base.css CHANGED
@@ -48,6 +48,66 @@
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-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);
51
111
  --candi-accent: oklch(52% 0.14 275);
52
112
  --candi-accent-subtle: oklch(85% 0.112 275);
53
113
  --candi-accent-soft: oklch(62% 0.126 275);
@@ -125,6 +185,66 @@
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);
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);
128
248
  --candi-accent: oklch(65% 0.13 275);
129
249
  --candi-accent-subtle: oklch(38% 0.104 275);
130
250
  --candi-accent-soft: oklch(75% 0.117 275);