@fastwork/xosmoz-theme 0.64.0 → 0.66.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 (16) hide show
  1. package/README.md +6 -8
  2. package/dist/dart/xz_colors.generated.dart +50 -92
  3. package/dist/figma-plugin.zip +0 -0
  4. package/dist/figma-tokens/Dark.json +117 -163
  5. package/dist/figma-tokens/Light.json +247 -293
  6. package/dist/index.d.mts +2 -10
  7. package/dist/index.d.ts +2 -10
  8. package/dist/index.js +22 -66
  9. package/dist/index.js.map +1 -1
  10. package/dist/index.mjs +22 -66
  11. package/dist/index.mjs.map +1 -1
  12. package/dist/llms.txt +19 -23
  13. package/dist/themes/dark.css +9 -11
  14. package/dist/themes/light.css +13 -15
  15. package/dist/themes.css +22 -26
  16. package/package.json +1 -1
package/dist/llms.txt CHANGED
@@ -83,12 +83,10 @@ Base tokens cover surfaces, text, borders, and neutral overlays. They are theme-
83
83
  | `--xz-color-surface-400` | Tertiary elevated surface | Popover, dropdown menu, tooltip, context menu, autocomplete suggestion list, command palette |
84
84
  | `--xz-color-bg-100` | Extreme base (near-black in light) | Footer dark band, inverted hero section, dark navbar, cookie banner |
85
85
  | `--xz-color-bg-200` | Secondary extreme base | Dark sidebar variant, secondary inverted section, code block background |
86
- | `--xz-color-fg-100` | Text/icon on bg-100 / bg-200 | White text on dark footer, icon on inverted navbar, button text on dark hero CTA |
86
+ | `--xz-color-text-fg` | Text/icon on bg-100 / bg-200 | White text on dark footer, icon on inverted navbar, button text on dark hero CTA |
87
87
  | `--xz-color-text-100` | Primary text | Body text, headings, button labels, nav links, input values, table cell text |
88
88
  | `--xz-color-text-200` | Secondary / muted text (70%) | Timestamps, helper text below inputs, subtitle under heading, metadata, breadcrumb inactive items |
89
89
  | `--xz-color-text-300` | Disabled / placeholder text (60%) | Input placeholder, disabled button text, watermark text, empty state hint |
90
- | `--xz-color-soft-100` | Very subtle neutral overlay (5%) | Hover highlight on table rows, subtle active state on sidebar items, zebra stripe alternate row |
91
- | `--xz-color-soft-200` | Subtle neutral overlay (10%) | Selected/active row in list, pressed state on neutral elements, drag-over drop zone highlight |
92
90
  | `--xz-color-line-50` | Subtle border | Horizontal divider between list items, subtle card border, separator between nav sections |
93
91
  | `--xz-color-line-100` | Default border | Input border, card border, table cell border, tab bar bottom border |
94
92
  | `--xz-color-line-200` | Emphasized border | Active/focus input border, emphasized separator, selected tab underline, strong divider |
@@ -115,7 +113,7 @@ Replace `{name}` with the category:
115
113
  | `--xz-color-{name}-line-300` | Strong colored border |
116
114
  | `--xz-color-{name}-bg-100` | Solid fill background — buttons, chips, badges |
117
115
  | `--xz-color-{name}-bg-200` | Solid fill hover/pressed state |
118
- | `--xz-color-{name}-fg-100` | Text/icon on solid bg — **always pair with bg-100 / bg-200** |
116
+ | `--xz-color-{name}-text-fg` | Text/icon on solid bg — **always pair with bg-100 / bg-200** |
119
117
  | `--xz-color-{name}-text-100` | Colored text on light surfaces — links, status labels |
120
118
 
121
119
  > **`neutral` exception:** also includes `--xz-color-neutral-text-200` — Muted neutral text, lighter than `text-100`. Use for supporting content, secondary labels.
@@ -137,7 +135,7 @@ When choosing a category, match the **intent** of the UI element:
137
135
 
138
136
  ### Key Rules for Semantic Tokens
139
137
 
140
- - **`bg-100` + `fg-100`**: Solid fill components (buttons, solid badges). `fg-100` provides correct contrast (white or dark depending on the category color).
138
+ - **`bg-100` + `text-fg`**: Solid fill components (buttons, solid badges). `text-fg` provides correct contrast (white or dark depending on the category color).
141
139
  - **`soft-100` + `text-100` + `line-100`**: Soft/tinted style (alerts, soft badges, highlighted rows).
142
140
  - **`soft-solid-*`**: Use instead of `soft-*` when the component sits on a non-transparent surface. Example: a success badge inside a card (`surface-200`) — use `soft-solid-100` so the tint mixes with the surface color and doesn't show the card color bleeding through. If the badge were on the page background directly, `soft-100` (transparent) is fine.
143
141
  - **`text-100`**: Use for colored text that sits on surface backgrounds (not on solid fills). Examples: link text, status label text, tag text.
@@ -188,7 +186,7 @@ These use a 100–1000 scale representing opacity from 0.1 to 1.0.
188
186
  | Nested card or secondary panel | `--xz-color-surface-300` |
189
187
  | Popover, dropdown, tooltip | `--xz-color-surface-400` |
190
188
  | Inverted/dark block on page | `--xz-color-bg-100` |
191
- | Text on inverted block | `--xz-color-fg-100` |
189
+ | Text on inverted block | `--xz-color-text-fg` |
192
190
 
193
191
  ### Text
194
192
 
@@ -213,7 +211,7 @@ These use a 100–1000 scale representing opacity from 0.1 to 1.0.
213
211
 
214
212
  ```
215
213
  background: --xz-color-{name}-bg-100
216
- color: --xz-color-{name}-fg-100 ← always use fg-100 on bg-100
214
+ color: --xz-color-{name}-text-fg ← always use text-fg on bg-100
217
215
  hover bg: --xz-color-{name}-bg-200
218
216
  ```
219
217
 
@@ -255,7 +253,7 @@ background: --xz-color-overlay-600
255
253
  ```css
256
254
  .btn-primary {
257
255
  background: var(--xz-color-primary-bg-100);
258
- color: var(--xz-color-primary-fg-100);
256
+ color: var(--xz-color-primary-text-fg);
259
257
  border: none;
260
258
  }
261
259
  .btn-primary:hover {
@@ -281,7 +279,7 @@ background: --xz-color-overlay-600
281
279
  ```css
282
280
  .btn-danger {
283
281
  background: var(--xz-color-danger-bg-100);
284
- color: var(--xz-color-danger-fg-100);
282
+ color: var(--xz-color-danger-text-fg);
285
283
  border: none;
286
284
  }
287
285
  .btn-danger:hover {
@@ -339,7 +337,7 @@ background: --xz-color-overlay-600
339
337
  ```css
340
338
  .badge-danger-solid {
341
339
  background: var(--xz-color-danger-bg-100);
342
- color: var(--xz-color-danger-fg-100);
340
+ color: var(--xz-color-danger-text-fg);
343
341
  }
344
342
  ```
345
343
 
@@ -395,7 +393,7 @@ background: --xz-color-overlay-600
395
393
  .sidebar { background: var(--xz-color-surface-200); }
396
394
  .sidebar-item { color: var(--xz-color-text-200); }
397
395
  .sidebar-item:hover {
398
- background: var(--xz-color-soft-100);
396
+ background: var(--xz-color-neutral-soft-100);
399
397
  color: var(--xz-color-text-100);
400
398
  }
401
399
  .sidebar-item.active {
@@ -414,7 +412,7 @@ background: --xz-color-overlay-600
414
412
  .table { border: 1px solid var(--xz-color-line-100); }
415
413
  .table th { background: var(--xz-color-surface-300); font: var(--xz-font-subtitle2-bold); color: var(--xz-color-text-100); }
416
414
  .table td { border-top: 1px solid var(--xz-color-line-50); font: var(--xz-font-body2); color: var(--xz-color-text-100); }
417
- .table tr:hover { background: var(--xz-color-soft-100); }
415
+ .table tr:hover { background: var(--xz-color-neutral-soft-100); }
418
416
  .table tr.selected { background: var(--xz-color-primary-soft-100); }
419
417
  ```
420
418
 
@@ -422,7 +420,7 @@ background: --xz-color-overlay-600
422
420
 
423
421
  ```css
424
422
  .tab { color: var(--xz-color-neutral-text-100); border-bottom: 2px solid transparent; }
425
- .tab:hover { color: var(--xz-color-text-100); background: var(--xz-color-soft-100); }
423
+ .tab:hover { color: var(--xz-color-text-100); background: var(--xz-color-neutral-soft-100); }
426
424
  .tab.active { color: var(--xz-color-primary-text-100); border-bottom-color: var(--xz-color-primary-bg-100); }
427
425
  ```
428
426
 
@@ -465,7 +463,7 @@ background: --xz-color-overlay-600
465
463
 
466
464
  ```css
467
465
  .skeleton {
468
- background: var(--xz-color-soft-200);
466
+ background: var(--xz-color-neutral-soft-200);
469
467
  border-radius: 4px;
470
468
  animation: skeleton-pulse 1.5s ease-in-out infinite;
471
469
  }
@@ -481,15 +479,15 @@ background: --xz-color-overlay-600
481
479
  .pricing-card.featured { border-color: var(--xz-color-primary-line-200); }
482
480
  .pricing-price { font: var(--xz-font-heading5); color: var(--xz-color-text-100); }
483
481
  .pricing-period { font: var(--xz-font-body3); color: var(--xz-color-text-200); }
484
- .pricing-cta-primary { background: var(--xz-color-primary-bg-100); color: var(--xz-color-primary-fg-100); }
482
+ .pricing-cta-primary { background: var(--xz-color-primary-bg-100); color: var(--xz-color-primary-text-fg); }
485
483
  .pricing-cta-secondary { background: transparent; color: var(--xz-color-neutral-text-100); border: 1px solid var(--xz-color-neutral-line-200); }
486
484
  ```
487
485
 
488
486
  ### Stepper / Progress
489
487
 
490
488
  ```css
491
- .step.completed .step-circle { background: var(--xz-color-success-bg-100); color: var(--xz-color-success-fg-100); }
492
- .step.current .step-circle { background: var(--xz-color-primary-bg-100); color: var(--xz-color-primary-fg-100); }
489
+ .step.completed .step-circle { background: var(--xz-color-success-bg-100); color: var(--xz-color-success-text-fg); }
490
+ .step.current .step-circle { background: var(--xz-color-primary-bg-100); color: var(--xz-color-primary-text-fg); }
493
491
  .step.pending .step-circle { background: var(--xz-color-neutral-soft-100); color: var(--xz-color-neutral-text-200); }
494
492
  .step-connector.completed { background: var(--xz-color-success-bg-100); }
495
493
  .step-connector.pending { background: var(--xz-color-line-100); }
@@ -522,7 +520,7 @@ Figma uses slash-separated paths. The mapping to CSS is direct:
522
520
 
523
521
  ### Complete Figma → CSS Mapping
524
522
 
525
- #### Base (17 variables)
523
+ #### Base (15 variables)
526
524
 
527
525
  | Figma Variable | CSS Variable |
528
526
  |---|---|
@@ -533,9 +531,7 @@ Figma uses slash-separated paths. The mapping to CSS is direct:
533
531
  | `theme/base/surface/200` | `--xz-color-surface-200` |
534
532
  | `theme/base/surface/300` | `--xz-color-surface-300` |
535
533
  | `theme/base/surface/400` | `--xz-color-surface-400` |
536
- | `theme/base/fg/100` | `--xz-color-fg-100` |
537
- | `theme/base/soft/100` | `--xz-color-soft-100` |
538
- | `theme/base/soft/200` | `--xz-color-soft-200` |
534
+ | `theme/base/text/fg` | `--xz-color-text-fg` |
539
535
  | `theme/base/text/100` | `--xz-color-text-100` |
540
536
  | `theme/base/text/200` | `--xz-color-text-200` |
541
537
  | `theme/base/text/300` | `--xz-color-text-300` |
@@ -559,7 +555,7 @@ Same pattern for all 8 categories: `primary`, `danger`, `success`, `warning`, `i
559
555
  | `theme/{name}/line/300` | `--xz-color-{name}-line-300` |
560
556
  | `theme/{name}/bg/100` | `--xz-color-{name}-bg-100` |
561
557
  | `theme/{name}/bg/200` | `--xz-color-{name}-bg-200` |
562
- | `theme/{name}/fg/100` | `--xz-color-{name}-fg-100` |
558
+ | `theme/{name}/text/fg` | `--xz-color-{name}-text-fg` |
563
559
  | `theme/{name}/text/100` | `--xz-color-{name}-text-100` |
564
560
 
565
561
  > **`neutral` exception:** also includes `theme/neutral/text/200` → `--xz-color-neutral-text-200`.
@@ -633,7 +629,7 @@ Same pattern for all 8 categories: `primary`, `danger`, `success`, `warning`, `i
633
629
  - Always use `theme/*` variables for component fills, text colors, and stroke colors
634
630
  - Use `palette/*` variables only as references — not directly on components
635
631
  - Use `theme/base/surface/100` for page backgrounds, `theme/base/surface/200` for cards
636
- - Use `theme/{name}/bg/100` for solid-filled elements and `theme/{name}/fg/100` for text on top of them
632
+ - Use `theme/{name}/bg/100` for solid-filled elements and `theme/{name}/text/fg` for text on top of them
637
633
  - Switch between Light/Dark previews using the **Mode** toggle on the variable collection
638
634
 
639
635
  ### Keeping Figma in Sync with Code
package/dist/themes/dark.css CHANGED
@@ -18,12 +18,10 @@
18
18
  --xz-color-surface-200: oklch(0.33 0.02 269 / 1);
19
19
  --xz-color-surface-300: oklch(0.355 0.02 269 / 1);
20
20
  --xz-color-surface-400: oklch(0.37 0.02 269 / 1);
21
- --xz-color-soft-100: color-mix(in oklab, var(--xz-color-bg-100) 4%, transparent);
22
- --xz-color-soft-200: color-mix(in oklab, var(--xz-color-bg-100) 7%, transparent);
23
- --xz-color-fg-100: oklch(0 0 0);
24
21
  --xz-color-text-100: oklch(0.96 0 0);
25
22
  --xz-color-text-200: color-mix(in oklab, var(--xz-color-text-100) 65%, transparent);
26
23
  --xz-color-text-300: color-mix(in oklab, var(--xz-color-text-100) 55%, transparent);
24
+ --xz-color-text-fg: oklch(0 0 0);
27
25
  --xz-color-line-50: oklch(0.38 0.02 269 / 0.95);
28
26
  --xz-color-line-100: oklch(0.42 0.02 269 / 0.95);
29
27
  --xz-color-line-200: oklch(0.50 0.02 269 / 0.95);
@@ -37,9 +35,9 @@
37
35
  --xz-color-primary-line-300: color-mix(oklch(from var(--xz-color-fastwork) 0.75 0.2 h / 1) 65%, var(--xz-color-surface-100));
38
36
  --xz-color-primary-bg-100: var(--xz-color-fastwork);
39
37
  --xz-color-primary-bg-200: oklch(from var(--xz-color-fastwork) calc(l + 0.05) c h / 1);
40
- --xz-color-primary-fg-100: oklch(1 0 0 / 1);
41
38
  --xz-color-primary-text-100: oklch(from var(--xz-color-fastwork) 0.75 0.2 h / 1);
42
39
  --xz-color-primary-text-200: oklch(from var(--xz-color-fastwork) 0.85 0.2 h / 1);
40
+ --xz-color-primary-text-fg: oklch(1 0 0 / 1);
43
41
  --xz-color-danger-soft-100: oklch(from var(--xz-color-red) l c h / 0.10);
44
42
  --xz-color-danger-soft-200: oklch(from var(--xz-color-red) l c h / 0.16);
45
43
  --xz-color-danger-soft-solid-100: color-mix(in oklab, oklch(from var(--xz-color-red) l c h / 1) 10%, var(--xz-color-surface-100));
@@ -49,9 +47,9 @@
49
47
  --xz-color-danger-line-300: color-mix(oklch(from var(--xz-color-red) 0.75 0.2 h / 1) 65%, var(--xz-color-surface-100));
50
48
  --xz-color-danger-bg-100: var(--xz-color-red);
51
49
  --xz-color-danger-bg-200: oklch(from var(--xz-color-red) calc(l + 0.05) c h / 1);
52
- --xz-color-danger-fg-100: oklch(1 0 0 / 1);
53
50
  --xz-color-danger-text-100: oklch(from var(--xz-color-red) 0.75 0.2 h / 1);
54
51
  --xz-color-danger-text-200: oklch(from var(--xz-color-red) 0.85 0.2 h / 1);
52
+ --xz-color-danger-text-fg: oklch(1 0 0 / 1);
55
53
  --xz-color-success-soft-100: oklch(from var(--xz-color-green) l c h / 0.10);
56
54
  --xz-color-success-soft-200: oklch(from var(--xz-color-green) l c h / 0.16);
57
55
  --xz-color-success-soft-solid-100: color-mix(in oklab, oklch(from var(--xz-color-green) l c h / 1) 10%, var(--xz-color-surface-100));
@@ -61,9 +59,9 @@
61
59
  --xz-color-success-line-300: color-mix(oklch(from var(--xz-color-green) 0.75 0.2 h / 1) 65%, var(--xz-color-surface-100));
62
60
  --xz-color-success-bg-100: var(--xz-color-green);
63
61
  --xz-color-success-bg-200: oklch(from var(--xz-color-green) calc(l + 0.05) c h / 1);
64
- --xz-color-success-fg-100: oklch(0 0 0 / 0.95);
65
62
  --xz-color-success-text-100: oklch(from var(--xz-color-green) 0.75 0.2 h / 1);
66
63
  --xz-color-success-text-200: oklch(from var(--xz-color-green) 0.85 0.2 h / 1);
64
+ --xz-color-success-text-fg: oklch(0 0 0 / 0.95);
67
65
  --xz-color-warning-soft-100: oklch(from var(--xz-color-yellow) l c h / 0.10);
68
66
  --xz-color-warning-soft-200: oklch(from var(--xz-color-yellow) l c h / 0.16);
69
67
  --xz-color-warning-soft-solid-100: color-mix(in oklab, oklch(from var(--xz-color-yellow) l c h / 1) 10%, var(--xz-color-surface-100));
@@ -73,9 +71,9 @@
73
71
  --xz-color-warning-line-300: color-mix(oklch(from var(--xz-color-yellow) 0.75 0.2 h / 1) 65%, var(--xz-color-surface-100));
74
72
  --xz-color-warning-bg-100: var(--xz-color-yellow);
75
73
  --xz-color-warning-bg-200: oklch(from var(--xz-color-yellow) calc(l + 0.05) c h / 1);
76
- --xz-color-warning-fg-100: oklch(0 0 0 / 0.95);
77
74
  --xz-color-warning-text-100: oklch(from var(--xz-color-yellow) 0.75 0.2 h / 1);
78
75
  --xz-color-warning-text-200: oklch(from var(--xz-color-yellow) 0.85 0.2 h / 1);
76
+ --xz-color-warning-text-fg: oklch(0 0 0 / 0.95);
79
77
  --xz-color-info-soft-100: oklch(from var(--xz-color-cyan) l c h / 0.10);
80
78
  --xz-color-info-soft-200: oklch(from var(--xz-color-cyan) l c h / 0.16);
81
79
  --xz-color-info-soft-solid-100: color-mix(in oklab, oklch(from var(--xz-color-cyan) l c h / 1) 10%, var(--xz-color-surface-100));
@@ -85,9 +83,9 @@
85
83
  --xz-color-info-line-300: color-mix(oklch(from var(--xz-color-cyan) 0.75 0.2 h / 1) 65%, var(--xz-color-surface-100));
86
84
  --xz-color-info-bg-100: var(--xz-color-cyan);
87
85
  --xz-color-info-bg-200: oklch(from var(--xz-color-cyan) calc(l + 0.05) c h / 1);
88
- --xz-color-info-fg-100: oklch(0 0 0 / 0.95);
89
86
  --xz-color-info-text-100: oklch(from var(--xz-color-cyan) 0.75 0.2 h / 1);
90
87
  --xz-color-info-text-200: oklch(from var(--xz-color-cyan) 0.85 0.2 h / 1);
88
+ --xz-color-info-text-fg: oklch(0 0 0 / 0.95);
91
89
  --xz-color-orange-soft-100: oklch(from var(--xz-color-orange) l c h / 0.10);
92
90
  --xz-color-orange-soft-200: oklch(from var(--xz-color-orange) l c h / 0.16);
93
91
  --xz-color-orange-soft-solid-100: color-mix(in oklab, oklch(from var(--xz-color-orange) l c h / 1) 10%, var(--xz-color-surface-100));
@@ -97,9 +95,9 @@
97
95
  --xz-color-orange-line-300: color-mix(oklch(from var(--xz-color-orange) 0.75 0.2 h / 1) 65%, var(--xz-color-surface-100));
98
96
  --xz-color-orange-bg-100: var(--xz-color-orange);
99
97
  --xz-color-orange-bg-200: oklch(from var(--xz-color-orange) calc(l + 0.05) c h / 1);
100
- --xz-color-orange-fg-100: oklch(0 0 0);
101
98
  --xz-color-orange-text-100: oklch(from var(--xz-color-orange) 0.75 0.2 h / 1);
102
99
  --xz-color-orange-text-200: oklch(from var(--xz-color-orange) 0.85 0.2 h / 1);
100
+ --xz-color-orange-text-fg: oklch(0 0 0);
103
101
  --xz-color-purple-soft-100: oklch(from var(--xz-color-purple) l c h / 0.10);
104
102
  --xz-color-purple-soft-200: oklch(from var(--xz-color-purple) l c h / 0.16);
105
103
  --xz-color-purple-soft-solid-100: color-mix(in oklab, oklch(from var(--xz-color-purple) l c h / 1) 10%, var(--xz-color-surface-100));
@@ -109,9 +107,9 @@
109
107
  --xz-color-purple-line-300: color-mix(oklch(from var(--xz-color-purple) 0.75 0.2 h / 1) 65%, var(--xz-color-surface-100));
110
108
  --xz-color-purple-bg-100: var(--xz-color-purple);
111
109
  --xz-color-purple-bg-200: oklch(from var(--xz-color-purple) calc(l + 0.05) c h / 1);
112
- --xz-color-purple-fg-100: oklch(0 0 0);
113
110
  --xz-color-purple-text-100: oklch(from var(--xz-color-purple) 0.75 0.2 h / 1);
114
111
  --xz-color-purple-text-200: oklch(from var(--xz-color-purple) 0.85 0.2 h / 1);
112
+ --xz-color-purple-text-fg: oklch(0 0 0);
115
113
  --xz-color-neutral-soft-100: oklch(from var(--xz-color-gray) l c h / 0.10);
116
114
  --xz-color-neutral-soft-200: oklch(from var(--xz-color-gray) l c h / 0.16);
117
115
  --xz-color-neutral-soft-solid-100: color-mix(in oklab, oklch(from var(--xz-color-gray) l c h / 1) 10%, var(--xz-color-surface-100));
@@ -121,9 +119,9 @@
121
119
  --xz-color-neutral-line-300: color-mix(oklch(from var(--xz-color-gray) 0.75 c h / 1) 65%, var(--xz-color-surface-100));
122
120
  --xz-color-neutral-bg-100: var(--xz-color-gray);
123
121
  --xz-color-neutral-bg-200: oklch(from var(--xz-color-gray) calc(l + 0.05) c h / 1);
124
- --xz-color-neutral-fg-100: oklch(1 0 0);
125
122
  --xz-color-neutral-text-100: oklch(from var(--xz-color-gray) 0.75 c h / 1);
126
123
  --xz-color-neutral-text-200: oklch(from var(--xz-color-gray) 0.85 c h / 1);
124
+ --xz-color-neutral-text-fg: oklch(1 0 0);
127
125
  --xz-color-black-alpha-100: oklch(0 0 0 / 0.1);
128
126
  --xz-color-black-alpha-200: oklch(0 0 0 / 0.2);
129
127
  --xz-color-black-alpha-300: oklch(0 0 0 / 0.3);
package/dist/themes/light.css CHANGED
@@ -14,16 +14,14 @@
14
14
  --xz-color-bg-100: oklch(0.312 0.02 260.638);
15
15
  --xz-color-bg-200: oklch(0.212 0.02 260.638);
16
16
  --xz-color-surface-50: oklch(1.00 0.00 260);
17
- --xz-color-surface-100: oklch(0.98 0.00 260);
18
- --xz-color-surface-200: oklch(0.96 0.00 260);
19
- --xz-color-surface-300: oklch(0.95 0.00 260);
20
- --xz-color-surface-400: oklch(0.92 0.00 260);
21
- --xz-color-fg-100: oklch(1 0 0);
22
- --xz-color-soft-100: color-mix(in oklab, var(--xz-color-bg-100) 4%, transparent);
23
- --xz-color-soft-200: color-mix(in oklab, var(--xz-color-bg-100) 7%, transparent);
17
+ --xz-color-surface-100: oklch(0.98 0.004 260);
18
+ --xz-color-surface-200: oklch(0.96 0.004 260);
19
+ --xz-color-surface-300: oklch(0.95 0.004 260);
20
+ --xz-color-surface-400: oklch(0.92 0.004 260);
24
21
  --xz-color-text-100: oklch(0.2 0 0);
25
22
  --xz-color-text-200: color-mix(in oklab, var(--xz-color-text-100) 70%, transparent);
26
23
  --xz-color-text-300: color-mix(in oklab, var(--xz-color-text-100) 60%, transparent);
24
+ --xz-color-text-fg: oklch(1 0 0);
27
25
  --xz-color-line-50: oklch(0.95 0.01 260 / 0.97);
28
26
  --xz-color-line-100: oklch(0.90 0.01 260 / 0.97);
29
27
  --xz-color-line-200: oklch(0.85 0.01 260 / 0.97);
@@ -37,9 +35,9 @@
37
35
  --xz-color-primary-line-300: color-mix(oklch(from var(--xz-color-fastwork) 0.5 0.23 h / 1) 65%, var(--xz-color-surface-100));
38
36
  --xz-color-primary-bg-100: var(--xz-color-fastwork);
39
37
  --xz-color-primary-bg-200: oklch(from var(--xz-color-fastwork) calc(l - 0.05) c h / 1);
40
- --xz-color-primary-fg-100: oklch(1 0 0 / 1);
41
38
  --xz-color-primary-text-100: oklch(from var(--xz-color-fastwork) 0.55 c h / 1);
42
39
  --xz-color-primary-text-200: oklch(from var(--xz-color-fastwork) 0.4 c h / 1);
40
+ --xz-color-primary-text-fg: oklch(1 0 0 / 1);
43
41
  --xz-color-danger-soft-100: oklch(from var(--xz-color-red) 0.8 c h / 0.15);
44
42
  --xz-color-danger-soft-200: oklch(from var(--xz-color-red) 0.8 c h / 0.25);
45
43
  --xz-color-danger-soft-solid-100: color-mix(in oklab, oklch(from var(--xz-color-red) 0.8 c h / 1) 15%, var(--xz-color-surface-100));
@@ -49,9 +47,9 @@
49
47
  --xz-color-danger-line-300: color-mix(oklch(from var(--xz-color-red) 0.5 0.23 h / 1) 65%, var(--xz-color-surface-100));
50
48
  --xz-color-danger-bg-100: var(--xz-color-red);
51
49
  --xz-color-danger-bg-200: oklch(from var(--xz-color-red) calc(l - 0.05) c h / 1);
52
- --xz-color-danger-fg-100: oklch(1 0 0 / 1);
53
50
  --xz-color-danger-text-100: oklch(from var(--xz-color-red) 0.55 c h / 1);
54
51
  --xz-color-danger-text-200: oklch(from var(--xz-color-red) 0.4 c h / 1);
52
+ --xz-color-danger-text-fg: oklch(1 0 0 / 1);
55
53
  --xz-color-success-soft-100: oklch(from var(--xz-color-green) 0.8 c h / 0.15);
56
54
  --xz-color-success-soft-200: oklch(from var(--xz-color-green) 0.8 c h / 0.25);
57
55
  --xz-color-success-soft-solid-100: color-mix(in oklab, oklch(from var(--xz-color-green) 0.8 c h / 1) 15%, var(--xz-color-surface-100));
@@ -61,9 +59,9 @@
61
59
  --xz-color-success-line-300: color-mix(oklch(from var(--xz-color-green) 0.5 0.23 h / 1) 65%, var(--xz-color-surface-100));
62
60
  --xz-color-success-bg-100: var(--xz-color-green);
63
61
  --xz-color-success-bg-200: oklch(from var(--xz-color-green) calc(l - 0.05) c h / 1);
64
- --xz-color-success-fg-100: oklch(0 0 0 / 0.95);
65
62
  --xz-color-success-text-100: oklch(from var(--xz-color-green) 0.55 c h / 1);
66
63
  --xz-color-success-text-200: oklch(from var(--xz-color-green) 0.4 c h / 1);
64
+ --xz-color-success-text-fg: oklch(0 0 0 / 0.95);
67
65
  --xz-color-warning-soft-100: oklch(from var(--xz-color-yellow) 0.8 c h / 0.15);
68
66
  --xz-color-warning-soft-200: oklch(from var(--xz-color-yellow) 0.8 c h / 0.25);
69
67
  --xz-color-warning-soft-solid-100: color-mix(in oklab, oklch(from var(--xz-color-yellow) 0.8 c h / 1) 15%, var(--xz-color-surface-100));
@@ -73,9 +71,9 @@
73
71
  --xz-color-warning-line-300: color-mix(oklch(from var(--xz-color-yellow) 0.5 0.23 h / 1) 65%, var(--xz-color-surface-100));
74
72
  --xz-color-warning-bg-100: var(--xz-color-yellow);
75
73
  --xz-color-warning-bg-200: oklch(from var(--xz-color-yellow) calc(l - 0.05) c h / 1);
76
- --xz-color-warning-fg-100: oklch(0 0 0 / 0.95);
77
74
  --xz-color-warning-text-100: oklch(from var(--xz-color-yellow) 0.55 c h / 1);
78
75
  --xz-color-warning-text-200: oklch(from var(--xz-color-yellow) 0.4 c h / 1);
76
+ --xz-color-warning-text-fg: oklch(0 0 0 / 0.95);
79
77
  --xz-color-info-soft-100: oklch(from var(--xz-color-cyan) 0.8 c h / 0.15);
80
78
  --xz-color-info-soft-200: oklch(from var(--xz-color-cyan) 0.8 c h / 0.25);
81
79
  --xz-color-info-soft-solid-100: color-mix(in oklab, oklch(from var(--xz-color-cyan) 0.8 c h / 1) 15%, var(--xz-color-surface-100));
@@ -85,9 +83,9 @@
85
83
  --xz-color-info-line-300: color-mix(oklch(from var(--xz-color-cyan) 0.5 0.23 h / 1) 65%, var(--xz-color-surface-100));
86
84
  --xz-color-info-bg-100: var(--xz-color-cyan);
87
85
  --xz-color-info-bg-200: oklch(from var(--xz-color-cyan) calc(l - 0.05) c h / 1);
88
- --xz-color-info-fg-100: oklch(0 0 0 / 0.95);
89
86
  --xz-color-info-text-100: oklch(from var(--xz-color-cyan) 0.55 c h / 1);
90
87
  --xz-color-info-text-200: oklch(from var(--xz-color-cyan) 0.4 c h / 1);
88
+ --xz-color-info-text-fg: oklch(0 0 0 / 0.95);
91
89
  --xz-color-orange-soft-100: oklch(from var(--xz-color-orange) 0.8 c h / 0.15);
92
90
  --xz-color-orange-soft-200: oklch(from var(--xz-color-orange) 0.8 c h / 0.25);
93
91
  --xz-color-orange-soft-solid-100: color-mix(in oklab, oklch(from var(--xz-color-orange) 0.8 c h / 1) 15%, var(--xz-color-surface-100));
@@ -97,9 +95,9 @@
97
95
  --xz-color-orange-line-300: color-mix(oklch(from var(--xz-color-orange) 0.5 0.23 h / 1) 65%, var(--xz-color-surface-100));
98
96
  --xz-color-orange-bg-100: var(--xz-color-orange);
99
97
  --xz-color-orange-bg-200: oklch(from var(--xz-color-orange) calc(l - 0.05) c h / 1);
100
- --xz-color-orange-fg-100: oklch(0 0 0 / 0.95);
101
98
  --xz-color-orange-text-100: oklch(from var(--xz-color-orange) 0.55 c h / 1);
102
99
  --xz-color-orange-text-200: oklch(from var(--xz-color-orange) 0.4 c h / 1);
100
+ --xz-color-orange-text-fg: oklch(0 0 0 / 0.95);
103
101
  --xz-color-purple-soft-100: oklch(from var(--xz-color-purple) 0.8 c h / 0.15);
104
102
  --xz-color-purple-soft-200: oklch(from var(--xz-color-purple) 0.8 c h / 0.25);
105
103
  --xz-color-purple-soft-solid-100: color-mix(in oklab, oklch(from var(--xz-color-purple) 0.8 c h / 1) 15%, var(--xz-color-surface-100));
@@ -109,9 +107,9 @@
109
107
  --xz-color-purple-line-300: color-mix(oklch(from var(--xz-color-purple) 0.5 0.23 h / 1) 65%, var(--xz-color-surface-100));
110
108
  --xz-color-purple-bg-100: var(--xz-color-purple);
111
109
  --xz-color-purple-bg-200: oklch(from var(--xz-color-purple) calc(l - 0.05) c h / 1);
112
- --xz-color-purple-fg-100: oklch(0 0 0 / 0.95);
113
110
  --xz-color-purple-text-100: oklch(from var(--xz-color-purple) 0.55 c h / 1);
114
111
  --xz-color-purple-text-200: oklch(from var(--xz-color-purple) 0.4 c h / 1);
112
+ --xz-color-purple-text-fg: oklch(0 0 0 / 0.95);
115
113
  --xz-color-neutral-soft-100: oklch(from var(--xz-color-gray) 0.8 c h / 0.15);
116
114
  --xz-color-neutral-soft-200: oklch(from var(--xz-color-gray) 0.8 c h / 0.25);
117
115
  --xz-color-neutral-soft-solid-100: color-mix(in oklab, oklch(from var(--xz-color-gray) 0.8 c h / 1) 15%, var(--xz-color-surface-100));
@@ -121,9 +119,9 @@
121
119
  --xz-color-neutral-line-300: color-mix(oklch(from var(--xz-color-gray) 0.5 c h / 1) 65%, var(--xz-color-surface-100));
122
120
  --xz-color-neutral-bg-100: var(--xz-color-gray);
123
121
  --xz-color-neutral-bg-200: oklch(from var(--xz-color-gray) calc(l - 0.05) c h / 1);
124
- --xz-color-neutral-fg-100: oklch(1 0 0);
125
122
  --xz-color-neutral-text-100: oklch(from var(--xz-color-gray) 0.55 c h / 1);
126
123
  --xz-color-neutral-text-200: oklch(from var(--xz-color-gray) 0.4 c h / 1);
124
+ --xz-color-neutral-text-fg: oklch(1 0 0);
127
125
  --xz-color-black-alpha-100: oklch(0 0 0 / 0.1);
128
126
  --xz-color-black-alpha-200: oklch(0 0 0 / 0.2);
129
127
  --xz-color-black-alpha-300: oklch(0 0 0 / 0.3);
package/dist/themes.css CHANGED
@@ -25,16 +25,14 @@
25
25
  --xz-color-bg-100: oklch(0.312 0.02 260.638);
26
26
  --xz-color-bg-200: oklch(0.212 0.02 260.638);
27
27
  --xz-color-surface-50: oklch(1.00 0.00 260);
28
- --xz-color-surface-100: oklch(0.98 0.00 260);
29
- --xz-color-surface-200: oklch(0.96 0.00 260);
30
- --xz-color-surface-300: oklch(0.95 0.00 260);
31
- --xz-color-surface-400: oklch(0.92 0.00 260);
32
- --xz-color-fg-100: oklch(1 0 0);
33
- --xz-color-soft-100: color-mix(in oklab, var(--xz-color-bg-100) 4%, transparent);
34
- --xz-color-soft-200: color-mix(in oklab, var(--xz-color-bg-100) 7%, transparent);
28
+ --xz-color-surface-100: oklch(0.98 0.004 260);
29
+ --xz-color-surface-200: oklch(0.96 0.004 260);
30
+ --xz-color-surface-300: oklch(0.95 0.004 260);
31
+ --xz-color-surface-400: oklch(0.92 0.004 260);
35
32
  --xz-color-text-100: oklch(0.2 0 0);
36
33
  --xz-color-text-200: color-mix(in oklab, var(--xz-color-text-100) 70%, transparent);
37
34
  --xz-color-text-300: color-mix(in oklab, var(--xz-color-text-100) 60%, transparent);
35
+ --xz-color-text-fg: oklch(1 0 0);
38
36
  --xz-color-line-50: oklch(0.95 0.01 260 / 0.97);
39
37
  --xz-color-line-100: oklch(0.90 0.01 260 / 0.97);
40
38
  --xz-color-line-200: oklch(0.85 0.01 260 / 0.97);
@@ -48,9 +46,9 @@
48
46
  --xz-color-primary-line-300: color-mix(oklch(from var(--xz-color-fastwork) 0.5 0.23 h / 1) 65%, var(--xz-color-surface-100));
49
47
  --xz-color-primary-bg-100: var(--xz-color-fastwork);
50
48
  --xz-color-primary-bg-200: oklch(from var(--xz-color-fastwork) calc(l - 0.05) c h / 1);
51
- --xz-color-primary-fg-100: oklch(1 0 0 / 1);
52
49
  --xz-color-primary-text-100: oklch(from var(--xz-color-fastwork) 0.55 c h / 1);
53
50
  --xz-color-primary-text-200: oklch(from var(--xz-color-fastwork) 0.4 c h / 1);
51
+ --xz-color-primary-text-fg: oklch(1 0 0 / 1);
54
52
  --xz-color-danger-soft-100: oklch(from var(--xz-color-red) 0.8 c h / 0.15);
55
53
  --xz-color-danger-soft-200: oklch(from var(--xz-color-red) 0.8 c h / 0.25);
56
54
  --xz-color-danger-soft-solid-100: color-mix(in oklab, oklch(from var(--xz-color-red) 0.8 c h / 1) 15%, var(--xz-color-surface-100));
@@ -60,9 +58,9 @@
60
58
  --xz-color-danger-line-300: color-mix(oklch(from var(--xz-color-red) 0.5 0.23 h / 1) 65%, var(--xz-color-surface-100));
61
59
  --xz-color-danger-bg-100: var(--xz-color-red);
62
60
  --xz-color-danger-bg-200: oklch(from var(--xz-color-red) calc(l - 0.05) c h / 1);
63
- --xz-color-danger-fg-100: oklch(1 0 0 / 1);
64
61
  --xz-color-danger-text-100: oklch(from var(--xz-color-red) 0.55 c h / 1);
65
62
  --xz-color-danger-text-200: oklch(from var(--xz-color-red) 0.4 c h / 1);
63
+ --xz-color-danger-text-fg: oklch(1 0 0 / 1);
66
64
  --xz-color-success-soft-100: oklch(from var(--xz-color-green) 0.8 c h / 0.15);
67
65
  --xz-color-success-soft-200: oklch(from var(--xz-color-green) 0.8 c h / 0.25);
68
66
  --xz-color-success-soft-solid-100: color-mix(in oklab, oklch(from var(--xz-color-green) 0.8 c h / 1) 15%, var(--xz-color-surface-100));
@@ -72,9 +70,9 @@
72
70
  --xz-color-success-line-300: color-mix(oklch(from var(--xz-color-green) 0.5 0.23 h / 1) 65%, var(--xz-color-surface-100));
73
71
  --xz-color-success-bg-100: var(--xz-color-green);
74
72
  --xz-color-success-bg-200: oklch(from var(--xz-color-green) calc(l - 0.05) c h / 1);
75
- --xz-color-success-fg-100: oklch(0 0 0 / 0.95);
76
73
  --xz-color-success-text-100: oklch(from var(--xz-color-green) 0.55 c h / 1);
77
74
  --xz-color-success-text-200: oklch(from var(--xz-color-green) 0.4 c h / 1);
75
+ --xz-color-success-text-fg: oklch(0 0 0 / 0.95);
78
76
  --xz-color-warning-soft-100: oklch(from var(--xz-color-yellow) 0.8 c h / 0.15);
79
77
  --xz-color-warning-soft-200: oklch(from var(--xz-color-yellow) 0.8 c h / 0.25);
80
78
  --xz-color-warning-soft-solid-100: color-mix(in oklab, oklch(from var(--xz-color-yellow) 0.8 c h / 1) 15%, var(--xz-color-surface-100));
@@ -84,9 +82,9 @@
84
82
  --xz-color-warning-line-300: color-mix(oklch(from var(--xz-color-yellow) 0.5 0.23 h / 1) 65%, var(--xz-color-surface-100));
85
83
  --xz-color-warning-bg-100: var(--xz-color-yellow);
86
84
  --xz-color-warning-bg-200: oklch(from var(--xz-color-yellow) calc(l - 0.05) c h / 1);
87
- --xz-color-warning-fg-100: oklch(0 0 0 / 0.95);
88
85
  --xz-color-warning-text-100: oklch(from var(--xz-color-yellow) 0.55 c h / 1);
89
86
  --xz-color-warning-text-200: oklch(from var(--xz-color-yellow) 0.4 c h / 1);
87
+ --xz-color-warning-text-fg: oklch(0 0 0 / 0.95);
90
88
  --xz-color-info-soft-100: oklch(from var(--xz-color-cyan) 0.8 c h / 0.15);
91
89
  --xz-color-info-soft-200: oklch(from var(--xz-color-cyan) 0.8 c h / 0.25);
92
90
  --xz-color-info-soft-solid-100: color-mix(in oklab, oklch(from var(--xz-color-cyan) 0.8 c h / 1) 15%, var(--xz-color-surface-100));
@@ -96,9 +94,9 @@
96
94
  --xz-color-info-line-300: color-mix(oklch(from var(--xz-color-cyan) 0.5 0.23 h / 1) 65%, var(--xz-color-surface-100));
97
95
  --xz-color-info-bg-100: var(--xz-color-cyan);
98
96
  --xz-color-info-bg-200: oklch(from var(--xz-color-cyan) calc(l - 0.05) c h / 1);
99
- --xz-color-info-fg-100: oklch(0 0 0 / 0.95);
100
97
  --xz-color-info-text-100: oklch(from var(--xz-color-cyan) 0.55 c h / 1);
101
98
  --xz-color-info-text-200: oklch(from var(--xz-color-cyan) 0.4 c h / 1);
99
+ --xz-color-info-text-fg: oklch(0 0 0 / 0.95);
102
100
  --xz-color-orange-soft-100: oklch(from var(--xz-color-orange) 0.8 c h / 0.15);
103
101
  --xz-color-orange-soft-200: oklch(from var(--xz-color-orange) 0.8 c h / 0.25);
104
102
  --xz-color-orange-soft-solid-100: color-mix(in oklab, oklch(from var(--xz-color-orange) 0.8 c h / 1) 15%, var(--xz-color-surface-100));
@@ -108,9 +106,9 @@
108
106
  --xz-color-orange-line-300: color-mix(oklch(from var(--xz-color-orange) 0.5 0.23 h / 1) 65%, var(--xz-color-surface-100));
109
107
  --xz-color-orange-bg-100: var(--xz-color-orange);
110
108
  --xz-color-orange-bg-200: oklch(from var(--xz-color-orange) calc(l - 0.05) c h / 1);
111
- --xz-color-orange-fg-100: oklch(0 0 0 / 0.95);
112
109
  --xz-color-orange-text-100: oklch(from var(--xz-color-orange) 0.55 c h / 1);
113
110
  --xz-color-orange-text-200: oklch(from var(--xz-color-orange) 0.4 c h / 1);
111
+ --xz-color-orange-text-fg: oklch(0 0 0 / 0.95);
114
112
  --xz-color-purple-soft-100: oklch(from var(--xz-color-purple) 0.8 c h / 0.15);
115
113
  --xz-color-purple-soft-200: oklch(from var(--xz-color-purple) 0.8 c h / 0.25);
116
114
  --xz-color-purple-soft-solid-100: color-mix(in oklab, oklch(from var(--xz-color-purple) 0.8 c h / 1) 15%, var(--xz-color-surface-100));
@@ -120,9 +118,9 @@
120
118
  --xz-color-purple-line-300: color-mix(oklch(from var(--xz-color-purple) 0.5 0.23 h / 1) 65%, var(--xz-color-surface-100));
121
119
  --xz-color-purple-bg-100: var(--xz-color-purple);
122
120
  --xz-color-purple-bg-200: oklch(from var(--xz-color-purple) calc(l - 0.05) c h / 1);
123
- --xz-color-purple-fg-100: oklch(0 0 0 / 0.95);
124
121
  --xz-color-purple-text-100: oklch(from var(--xz-color-purple) 0.55 c h / 1);
125
122
  --xz-color-purple-text-200: oklch(from var(--xz-color-purple) 0.4 c h / 1);
123
+ --xz-color-purple-text-fg: oklch(0 0 0 / 0.95);
126
124
  --xz-color-neutral-soft-100: oklch(from var(--xz-color-gray) 0.8 c h / 0.15);
127
125
  --xz-color-neutral-soft-200: oklch(from var(--xz-color-gray) 0.8 c h / 0.25);
128
126
  --xz-color-neutral-soft-solid-100: color-mix(in oklab, oklch(from var(--xz-color-gray) 0.8 c h / 1) 15%, var(--xz-color-surface-100));
@@ -132,9 +130,9 @@
132
130
  --xz-color-neutral-line-300: color-mix(oklch(from var(--xz-color-gray) 0.5 c h / 1) 65%, var(--xz-color-surface-100));
133
131
  --xz-color-neutral-bg-100: var(--xz-color-gray);
134
132
  --xz-color-neutral-bg-200: oklch(from var(--xz-color-gray) calc(l - 0.05) c h / 1);
135
- --xz-color-neutral-fg-100: oklch(1 0 0);
136
133
  --xz-color-neutral-text-100: oklch(from var(--xz-color-gray) 0.55 c h / 1);
137
134
  --xz-color-neutral-text-200: oklch(from var(--xz-color-gray) 0.4 c h / 1);
135
+ --xz-color-neutral-text-fg: oklch(1 0 0);
138
136
  --xz-color-black-alpha-100: oklch(0 0 0 / 0.1);
139
137
  --xz-color-black-alpha-200: oklch(0 0 0 / 0.2);
140
138
  --xz-color-black-alpha-300: oklch(0 0 0 / 0.3);
@@ -192,12 +190,10 @@
192
190
  --xz-color-surface-200: oklch(0.33 0.02 269 / 1);
193
191
  --xz-color-surface-300: oklch(0.355 0.02 269 / 1);
194
192
  --xz-color-surface-400: oklch(0.37 0.02 269 / 1);
195
- --xz-color-soft-100: color-mix(in oklab, var(--xz-color-bg-100) 4%, transparent);
196
- --xz-color-soft-200: color-mix(in oklab, var(--xz-color-bg-100) 7%, transparent);
197
- --xz-color-fg-100: oklch(0 0 0);
198
193
  --xz-color-text-100: oklch(0.96 0 0);
199
194
  --xz-color-text-200: color-mix(in oklab, var(--xz-color-text-100) 65%, transparent);
200
195
  --xz-color-text-300: color-mix(in oklab, var(--xz-color-text-100) 55%, transparent);
196
+ --xz-color-text-fg: oklch(0 0 0);
201
197
  --xz-color-line-50: oklch(0.38 0.02 269 / 0.95);
202
198
  --xz-color-line-100: oklch(0.42 0.02 269 / 0.95);
203
199
  --xz-color-line-200: oklch(0.50 0.02 269 / 0.95);
@@ -211,9 +207,9 @@
211
207
  --xz-color-primary-line-300: color-mix(oklch(from var(--xz-color-fastwork) 0.75 0.2 h / 1) 65%, var(--xz-color-surface-100));
212
208
  --xz-color-primary-bg-100: var(--xz-color-fastwork);
213
209
  --xz-color-primary-bg-200: oklch(from var(--xz-color-fastwork) calc(l + 0.05) c h / 1);
214
- --xz-color-primary-fg-100: oklch(1 0 0 / 1);
215
210
  --xz-color-primary-text-100: oklch(from var(--xz-color-fastwork) 0.75 0.2 h / 1);
216
211
  --xz-color-primary-text-200: oklch(from var(--xz-color-fastwork) 0.85 0.2 h / 1);
212
+ --xz-color-primary-text-fg: oklch(1 0 0 / 1);
217
213
  --xz-color-danger-soft-100: oklch(from var(--xz-color-red) l c h / 0.10);
218
214
  --xz-color-danger-soft-200: oklch(from var(--xz-color-red) l c h / 0.16);
219
215
  --xz-color-danger-soft-solid-100: color-mix(in oklab, oklch(from var(--xz-color-red) l c h / 1) 10%, var(--xz-color-surface-100));
@@ -223,9 +219,9 @@
223
219
  --xz-color-danger-line-300: color-mix(oklch(from var(--xz-color-red) 0.75 0.2 h / 1) 65%, var(--xz-color-surface-100));
224
220
  --xz-color-danger-bg-100: var(--xz-color-red);
225
221
  --xz-color-danger-bg-200: oklch(from var(--xz-color-red) calc(l + 0.05) c h / 1);
226
- --xz-color-danger-fg-100: oklch(1 0 0 / 1);
227
222
  --xz-color-danger-text-100: oklch(from var(--xz-color-red) 0.75 0.2 h / 1);
228
223
  --xz-color-danger-text-200: oklch(from var(--xz-color-red) 0.85 0.2 h / 1);
224
+ --xz-color-danger-text-fg: oklch(1 0 0 / 1);
229
225
  --xz-color-success-soft-100: oklch(from var(--xz-color-green) l c h / 0.10);
230
226
  --xz-color-success-soft-200: oklch(from var(--xz-color-green) l c h / 0.16);
231
227
  --xz-color-success-soft-solid-100: color-mix(in oklab, oklch(from var(--xz-color-green) l c h / 1) 10%, var(--xz-color-surface-100));
@@ -235,9 +231,9 @@
235
231
  --xz-color-success-line-300: color-mix(oklch(from var(--xz-color-green) 0.75 0.2 h / 1) 65%, var(--xz-color-surface-100));
236
232
  --xz-color-success-bg-100: var(--xz-color-green);
237
233
  --xz-color-success-bg-200: oklch(from var(--xz-color-green) calc(l + 0.05) c h / 1);
238
- --xz-color-success-fg-100: oklch(0 0 0 / 0.95);
239
234
  --xz-color-success-text-100: oklch(from var(--xz-color-green) 0.75 0.2 h / 1);
240
235
  --xz-color-success-text-200: oklch(from var(--xz-color-green) 0.85 0.2 h / 1);
236
+ --xz-color-success-text-fg: oklch(0 0 0 / 0.95);
241
237
  --xz-color-warning-soft-100: oklch(from var(--xz-color-yellow) l c h / 0.10);
242
238
  --xz-color-warning-soft-200: oklch(from var(--xz-color-yellow) l c h / 0.16);
243
239
  --xz-color-warning-soft-solid-100: color-mix(in oklab, oklch(from var(--xz-color-yellow) l c h / 1) 10%, var(--xz-color-surface-100));
@@ -247,9 +243,9 @@
247
243
  --xz-color-warning-line-300: color-mix(oklch(from var(--xz-color-yellow) 0.75 0.2 h / 1) 65%, var(--xz-color-surface-100));
248
244
  --xz-color-warning-bg-100: var(--xz-color-yellow);
249
245
  --xz-color-warning-bg-200: oklch(from var(--xz-color-yellow) calc(l + 0.05) c h / 1);
250
- --xz-color-warning-fg-100: oklch(0 0 0 / 0.95);
251
246
  --xz-color-warning-text-100: oklch(from var(--xz-color-yellow) 0.75 0.2 h / 1);
252
247
  --xz-color-warning-text-200: oklch(from var(--xz-color-yellow) 0.85 0.2 h / 1);
248
+ --xz-color-warning-text-fg: oklch(0 0 0 / 0.95);
253
249
  --xz-color-info-soft-100: oklch(from var(--xz-color-cyan) l c h / 0.10);
254
250
  --xz-color-info-soft-200: oklch(from var(--xz-color-cyan) l c h / 0.16);
255
251
  --xz-color-info-soft-solid-100: color-mix(in oklab, oklch(from var(--xz-color-cyan) l c h / 1) 10%, var(--xz-color-surface-100));
@@ -259,9 +255,9 @@
259
255
  --xz-color-info-line-300: color-mix(oklch(from var(--xz-color-cyan) 0.75 0.2 h / 1) 65%, var(--xz-color-surface-100));
260
256
  --xz-color-info-bg-100: var(--xz-color-cyan);
261
257
  --xz-color-info-bg-200: oklch(from var(--xz-color-cyan) calc(l + 0.05) c h / 1);
262
- --xz-color-info-fg-100: oklch(0 0 0 / 0.95);
263
258
  --xz-color-info-text-100: oklch(from var(--xz-color-cyan) 0.75 0.2 h / 1);
264
259
  --xz-color-info-text-200: oklch(from var(--xz-color-cyan) 0.85 0.2 h / 1);
260
+ --xz-color-info-text-fg: oklch(0 0 0 / 0.95);
265
261
  --xz-color-orange-soft-100: oklch(from var(--xz-color-orange) l c h / 0.10);
266
262
  --xz-color-orange-soft-200: oklch(from var(--xz-color-orange) l c h / 0.16);
267
263
  --xz-color-orange-soft-solid-100: color-mix(in oklab, oklch(from var(--xz-color-orange) l c h / 1) 10%, var(--xz-color-surface-100));
@@ -271,9 +267,9 @@
271
267
  --xz-color-orange-line-300: color-mix(oklch(from var(--xz-color-orange) 0.75 0.2 h / 1) 65%, var(--xz-color-surface-100));
272
268
  --xz-color-orange-bg-100: var(--xz-color-orange);
273
269
  --xz-color-orange-bg-200: oklch(from var(--xz-color-orange) calc(l + 0.05) c h / 1);
274
- --xz-color-orange-fg-100: oklch(0 0 0);
275
270
  --xz-color-orange-text-100: oklch(from var(--xz-color-orange) 0.75 0.2 h / 1);
276
271
  --xz-color-orange-text-200: oklch(from var(--xz-color-orange) 0.85 0.2 h / 1);
272
+ --xz-color-orange-text-fg: oklch(0 0 0);
277
273
  --xz-color-purple-soft-100: oklch(from var(--xz-color-purple) l c h / 0.10);
278
274
  --xz-color-purple-soft-200: oklch(from var(--xz-color-purple) l c h / 0.16);
279
275
  --xz-color-purple-soft-solid-100: color-mix(in oklab, oklch(from var(--xz-color-purple) l c h / 1) 10%, var(--xz-color-surface-100));
@@ -283,9 +279,9 @@
283
279
  --xz-color-purple-line-300: color-mix(oklch(from var(--xz-color-purple) 0.75 0.2 h / 1) 65%, var(--xz-color-surface-100));
284
280
  --xz-color-purple-bg-100: var(--xz-color-purple);
285
281
  --xz-color-purple-bg-200: oklch(from var(--xz-color-purple) calc(l + 0.05) c h / 1);
286
- --xz-color-purple-fg-100: oklch(0 0 0);
287
282
  --xz-color-purple-text-100: oklch(from var(--xz-color-purple) 0.75 0.2 h / 1);
288
283
  --xz-color-purple-text-200: oklch(from var(--xz-color-purple) 0.85 0.2 h / 1);
284
+ --xz-color-purple-text-fg: oklch(0 0 0);
289
285
  --xz-color-neutral-soft-100: oklch(from var(--xz-color-gray) l c h / 0.10);
290
286
  --xz-color-neutral-soft-200: oklch(from var(--xz-color-gray) l c h / 0.16);
291
287
  --xz-color-neutral-soft-solid-100: color-mix(in oklab, oklch(from var(--xz-color-gray) l c h / 1) 10%, var(--xz-color-surface-100));
@@ -295,9 +291,9 @@
295
291
  --xz-color-neutral-line-300: color-mix(oklch(from var(--xz-color-gray) 0.75 c h / 1) 65%, var(--xz-color-surface-100));
296
292
  --xz-color-neutral-bg-100: var(--xz-color-gray);
297
293
  --xz-color-neutral-bg-200: oklch(from var(--xz-color-gray) calc(l + 0.05) c h / 1);
298
- --xz-color-neutral-fg-100: oklch(1 0 0);
299
294
  --xz-color-neutral-text-100: oklch(from var(--xz-color-gray) 0.75 c h / 1);
300
295
  --xz-color-neutral-text-200: oklch(from var(--xz-color-gray) 0.85 c h / 1);
296
+ --xz-color-neutral-text-fg: oklch(1 0 0);
301
297
  --xz-color-black-alpha-100: oklch(0 0 0 / 0.1);
302
298
  --xz-color-black-alpha-200: oklch(0 0 0 / 0.2);
303
299
  --xz-color-black-alpha-300: oklch(0 0 0 / 0.3);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fastwork/xosmoz-theme",
3
- "version": "0.64.0",
3
+ "version": "0.66.0",
4
4
  "description": "Xosmoz Theme - Design tokens and theming system for Xosmoz",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",