@fastwork/xosmoz-theme 0.63.0 → 0.65.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 +28 -70
  3. package/dist/figma-plugin.zip +0 -0
  4. package/dist/figma-tokens/Dark.json +117 -163
  5. package/dist/figma-tokens/Light.json +177 -223
  6. package/dist/index.d.mts +2 -10
  7. package/dist/index.d.ts +2 -10
  8. package/dist/index.js +34 -78
  9. package/dist/index.js.map +1 -1
  10. package/dist/index.mjs +34 -78
  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 +25 -27
  15. package/dist/themes.css +34 -38
  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
@@ -18,112 +18,110 @@
18
18
  --xz-color-surface-200: oklch(0.96 0.00 260);
19
19
  --xz-color-surface-300: oklch(0.95 0.00 260);
20
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);
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);
30
28
  --xz-color-line-300: oklch(0.80 0.01 260 / 0.97);
31
- --xz-color-primary-soft-100: oklch(from var(--xz-color-fastwork) 0.9 c h / 0.15);
29
+ --xz-color-primary-soft-100: oklch(from var(--xz-color-fastwork) 0.8 c h / 0.15);
32
30
  --xz-color-primary-soft-200: oklch(from var(--xz-color-fastwork) 0.8 c h / 0.25);
33
- --xz-color-primary-soft-solid-100: color-mix(in oklab, oklch(from var(--xz-color-fastwork) 0.9 c h / 1) 15%, var(--xz-color-surface-100));
31
+ --xz-color-primary-soft-solid-100: color-mix(in oklab, oklch(from var(--xz-color-fastwork) 0.8 c h / 1) 15%, var(--xz-color-surface-100));
34
32
  --xz-color-primary-soft-solid-200: color-mix(in oklab, oklch(from var(--xz-color-fastwork) 0.8 c h / 1) 25%, var(--xz-color-surface-100));
35
33
  --xz-color-primary-line-100: color-mix(oklch(from var(--xz-color-fastwork) 0.5 0.23 h / 1) 25%, var(--xz-color-surface-100));
36
34
  --xz-color-primary-line-200: color-mix(oklch(from var(--xz-color-fastwork) 0.5 0.23 h / 1) 50%, var(--xz-color-surface-100));
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);
43
- --xz-color-danger-soft-100: oklch(from var(--xz-color-red) 0.9 c h / 0.15);
40
+ --xz-color-primary-text-fg: oklch(1 0 0 / 1);
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
- --xz-color-danger-soft-solid-100: color-mix(in oklab, oklch(from var(--xz-color-red) 0.9 c h / 1) 15%, var(--xz-color-surface-100));
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));
46
44
  --xz-color-danger-soft-solid-200: color-mix(in oklab, oklch(from var(--xz-color-red) 0.8 c h / 1) 25%, var(--xz-color-surface-100));
47
45
  --xz-color-danger-line-100: color-mix(oklch(from var(--xz-color-red) 0.5 0.23 h / 1) 25%, var(--xz-color-surface-100));
48
46
  --xz-color-danger-line-200: color-mix(oklch(from var(--xz-color-red) 0.5 0.23 h / 1) 50%, var(--xz-color-surface-100));
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);
55
- --xz-color-success-soft-100: oklch(from var(--xz-color-green) 0.9 c h / 0.15);
52
+ --xz-color-danger-text-fg: oklch(1 0 0 / 1);
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
- --xz-color-success-soft-solid-100: color-mix(in oklab, oklch(from var(--xz-color-green) 0.9 c h / 1) 15%, var(--xz-color-surface-100));
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));
58
56
  --xz-color-success-soft-solid-200: color-mix(in oklab, oklch(from var(--xz-color-green) 0.8 c h / 1) 25%, var(--xz-color-surface-100));
59
57
  --xz-color-success-line-100: color-mix(oklch(from var(--xz-color-green) 0.5 0.23 h / 1) 25%, var(--xz-color-surface-100));
60
58
  --xz-color-success-line-200: color-mix(oklch(from var(--xz-color-green) 0.5 0.23 h / 1) 50%, var(--xz-color-surface-100));
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);
67
- --xz-color-warning-soft-100: oklch(from var(--xz-color-yellow) 0.9 c h / 0.15);
64
+ --xz-color-success-text-fg: oklch(0 0 0 / 0.95);
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
- --xz-color-warning-soft-solid-100: color-mix(in oklab, oklch(from var(--xz-color-yellow) 0.9 c h / 1) 15%, var(--xz-color-surface-100));
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));
70
68
  --xz-color-warning-soft-solid-200: color-mix(in oklab, oklch(from var(--xz-color-yellow) 0.8 c h / 1) 25%, var(--xz-color-surface-100));
71
69
  --xz-color-warning-line-100: color-mix(oklch(from var(--xz-color-yellow) 0.5 0.23 h / 1) 25%, var(--xz-color-surface-100));
72
70
  --xz-color-warning-line-200: color-mix(oklch(from var(--xz-color-yellow) 0.5 0.23 h / 1) 50%, var(--xz-color-surface-100));
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);
79
- --xz-color-info-soft-100: oklch(from var(--xz-color-cyan) 0.9 c h / 0.15);
76
+ --xz-color-warning-text-fg: oklch(0 0 0 / 0.95);
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
- --xz-color-info-soft-solid-100: color-mix(in oklab, oklch(from var(--xz-color-cyan) 0.9 c h / 1) 15%, var(--xz-color-surface-100));
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));
82
80
  --xz-color-info-soft-solid-200: color-mix(in oklab, oklch(from var(--xz-color-cyan) 0.8 c h / 1) 25%, var(--xz-color-surface-100));
83
81
  --xz-color-info-line-100: color-mix(oklch(from var(--xz-color-cyan) 0.5 0.23 h / 1) 25%, var(--xz-color-surface-100));
84
82
  --xz-color-info-line-200: color-mix(oklch(from var(--xz-color-cyan) 0.5 0.23 h / 1) 50%, var(--xz-color-surface-100));
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);
91
- --xz-color-orange-soft-100: oklch(from var(--xz-color-orange) 0.9 c h / 0.15);
88
+ --xz-color-info-text-fg: oklch(0 0 0 / 0.95);
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
- --xz-color-orange-soft-solid-100: color-mix(in oklab, oklch(from var(--xz-color-orange) 0.9 c h / 1) 15%, var(--xz-color-surface-100));
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));
94
92
  --xz-color-orange-soft-solid-200: color-mix(in oklab, oklch(from var(--xz-color-orange) 0.8 c h / 1) 25%, var(--xz-color-surface-100));
95
93
  --xz-color-orange-line-100: color-mix(oklch(from var(--xz-color-orange) 0.5 0.23 h / 1) 25%, var(--xz-color-surface-100));
96
94
  --xz-color-orange-line-200: color-mix(oklch(from var(--xz-color-orange) 0.5 0.23 h / 1) 50%, var(--xz-color-surface-100));
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);
103
- --xz-color-purple-soft-100: oklch(from var(--xz-color-purple) 0.9 c h / 0.15);
100
+ --xz-color-orange-text-fg: oklch(0 0 0 / 0.95);
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
- --xz-color-purple-soft-solid-100: color-mix(in oklab, oklch(from var(--xz-color-purple) 0.9 c h / 1) 15%, var(--xz-color-surface-100));
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));
106
104
  --xz-color-purple-soft-solid-200: color-mix(in oklab, oklch(from var(--xz-color-purple) 0.8 c h / 1) 25%, var(--xz-color-surface-100));
107
105
  --xz-color-purple-line-100: color-mix(oklch(from var(--xz-color-purple) 0.5 0.23 h / 1) 25%, var(--xz-color-surface-100));
108
106
  --xz-color-purple-line-200: color-mix(oklch(from var(--xz-color-purple) 0.5 0.23 h / 1) 50%, var(--xz-color-surface-100));
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);
115
- --xz-color-neutral-soft-100: oklch(from var(--xz-color-gray) 0.9 c h / 0.15);
112
+ --xz-color-purple-text-fg: oklch(0 0 0 / 0.95);
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
- --xz-color-neutral-soft-solid-100: color-mix(in oklab, oklch(from var(--xz-color-gray) 0.9 c h / 1) 15%, var(--xz-color-surface-100));
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));
118
116
  --xz-color-neutral-soft-solid-200: color-mix(in oklab, oklch(from var(--xz-color-gray) 0.8 c h / 1) 25%, var(--xz-color-surface-100));
119
117
  --xz-color-neutral-line-100: color-mix(oklch(from var(--xz-color-gray) 0.5 c h / 1) 25%, var(--xz-color-surface-100));
120
118
  --xz-color-neutral-line-200: color-mix(oklch(from var(--xz-color-gray) 0.5 c h / 1) 50%, var(--xz-color-surface-100));
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);