@fastwork/xosmoz-theme 0.45.0 → 0.47.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 (14) hide show
  1. package/README.md +2 -0
  2. package/dist/dart/xz_colors.generated.dart +13 -13
  3. package/dist/figma-plugin.zip +0 -0
  4. package/dist/figma-tokens/Dark.json +12 -12
  5. package/dist/figma-tokens/Light.json +44 -44
  6. package/dist/index.js +11 -11
  7. package/dist/index.js.map +1 -1
  8. package/dist/index.mjs +11 -11
  9. package/dist/index.mjs.map +1 -1
  10. package/dist/themes/dark.css +1 -1
  11. package/dist/themes/light.css +10 -10
  12. package/dist/themes.css +11 -11
  13. package/llms.txt +6 -2
  14. package/package.json +1 -1
package/dist/themes/dark.css CHANGED
@@ -11,7 +11,7 @@
11
11
  --xz-color-orange: oklch(0.735 0.175 53.769);
12
12
  --xz-color-purple: oklch(0.661 0.2 293.348);
13
13
  --xz-color-cyan: oklch(0.771 0.135 212.784);
14
- --xz-color-bg-100: oklch(0.96 0.01 260);
14
+ --xz-color-bg-100: oklch(0.97 0.01 260);
15
15
  --xz-color-bg-200: oklch(0.92 0.01 260);
16
16
  --xz-color-surface-50: oklch(0.26 0.02 269 / 1);
17
17
  --xz-color-surface-100: oklch(0.3 0.02 269 / 1);
package/dist/themes/light.css CHANGED
@@ -11,8 +11,8 @@
11
11
  --xz-color-orange: oklch(0.735 0.175 53.769);
12
12
  --xz-color-purple: oklch(0.661 0.2 293.348);
13
13
  --xz-color-cyan: oklch(0.771 0.135 212.784);
14
- --xz-color-bg-100: oklch(0.17 0.01 260);
15
- --xz-color-bg-200: oklch(0.35 0.01 260);
14
+ --xz-color-bg-100: oklch(0.312 0.02 260.638);
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
17
  --xz-color-surface-100: oklch(0.98 0.005 260);
18
18
  --xz-color-surface-200: oklch(0.96 0.01 260);
@@ -35,7 +35,7 @@
35
35
  --xz-color-primary-line-200: color-mix(oklch(from var(--xz-color-fastwork) 0.5 c h / 1) 50%, var(--xz-color-surface-100));
36
36
  --xz-color-primary-line-300: color-mix(oklch(from var(--xz-color-fastwork) 0.5 c h / 1) 65%, var(--xz-color-surface-100));
37
37
  --xz-color-primary-bg-100: var(--xz-color-fastwork);
38
- --xz-color-primary-bg-200: oklch(from var(--xz-color-fastwork) calc(l - 0.03) c h / 1);
38
+ --xz-color-primary-bg-200: oklch(from var(--xz-color-fastwork) calc(l - 0.05) c h / 1);
39
39
  --xz-color-primary-fg-100: oklch(1 0 0 / 1);
40
40
  --xz-color-primary-text-100: oklch(from var(--xz-color-fastwork) 0.5 c h / 1);
41
41
  --xz-color-primary-text-200: oklch(from var(--xz-color-fastwork) 0.3 c h / 1);
@@ -47,7 +47,7 @@
47
47
  --xz-color-danger-line-200: color-mix(oklch(from var(--xz-color-red) 0.5 c h / 1) 50%, var(--xz-color-surface-100));
48
48
  --xz-color-danger-line-300: color-mix(oklch(from var(--xz-color-red) 0.5 c h / 1) 65%, var(--xz-color-surface-100));
49
49
  --xz-color-danger-bg-100: var(--xz-color-red);
50
- --xz-color-danger-bg-200: oklch(from var(--xz-color-red) calc(l - 0.03) c h / 1);
50
+ --xz-color-danger-bg-200: oklch(from var(--xz-color-red) calc(l - 0.05) c h / 1);
51
51
  --xz-color-danger-fg-100: oklch(1 0 0 / 1);
52
52
  --xz-color-danger-text-100: oklch(from var(--xz-color-red) 0.5 c h / 1);
53
53
  --xz-color-danger-text-200: oklch(from var(--xz-color-red) 0.3 c h / 1);
@@ -59,7 +59,7 @@
59
59
  --xz-color-success-line-200: color-mix(oklch(from var(--xz-color-green) 0.5 c h / 1) 50%, var(--xz-color-surface-100));
60
60
  --xz-color-success-line-300: color-mix(oklch(from var(--xz-color-green) 0.5 c h / 1) 65%, var(--xz-color-surface-100));
61
61
  --xz-color-success-bg-100: var(--xz-color-green);
62
- --xz-color-success-bg-200: oklch(from var(--xz-color-green) calc(l - 0.03) c h / 1);
62
+ --xz-color-success-bg-200: oklch(from var(--xz-color-green) calc(l - 0.05) c h / 1);
63
63
  --xz-color-success-fg-100: oklch(0 0 0 / 0.95);
64
64
  --xz-color-success-text-100: oklch(from var(--xz-color-green) 0.5 c h / 1);
65
65
  --xz-color-success-text-200: oklch(from var(--xz-color-green) 0.3 c h / 1);
@@ -71,7 +71,7 @@
71
71
  --xz-color-warning-line-200: color-mix(oklch(from var(--xz-color-yellow) 0.5 c h / 1) 50%, var(--xz-color-surface-100));
72
72
  --xz-color-warning-line-300: color-mix(oklch(from var(--xz-color-yellow) 0.5 c h / 1) 65%, var(--xz-color-surface-100));
73
73
  --xz-color-warning-bg-100: var(--xz-color-yellow);
74
- --xz-color-warning-bg-200: oklch(from var(--xz-color-yellow) calc(l - 0.03) c h / 1);
74
+ --xz-color-warning-bg-200: oklch(from var(--xz-color-yellow) calc(l - 0.05) c h / 1);
75
75
  --xz-color-warning-fg-100: oklch(0 0 0 / 0.95);
76
76
  --xz-color-warning-text-100: oklch(from var(--xz-color-yellow) 0.5 c h / 1);
77
77
  --xz-color-warning-text-200: oklch(from var(--xz-color-yellow) 0.3 c h / 1);
@@ -83,7 +83,7 @@
83
83
  --xz-color-info-line-200: color-mix(oklch(from var(--xz-color-cyan) 0.5 c h / 1) 50%, var(--xz-color-surface-100));
84
84
  --xz-color-info-line-300: color-mix(oklch(from var(--xz-color-cyan) 0.5 c h / 1) 65%, var(--xz-color-surface-100));
85
85
  --xz-color-info-bg-100: var(--xz-color-cyan);
86
- --xz-color-info-bg-200: oklch(from var(--xz-color-cyan) calc(l - 0.03) c h / 1);
86
+ --xz-color-info-bg-200: oklch(from var(--xz-color-cyan) calc(l - 0.05) c h / 1);
87
87
  --xz-color-info-fg-100: oklch(0 0 0 / 0.95);
88
88
  --xz-color-info-text-100: oklch(from var(--xz-color-cyan) 0.5 c h / 1);
89
89
  --xz-color-info-text-200: oklch(from var(--xz-color-cyan) 0.3 c h / 1);
@@ -95,7 +95,7 @@
95
95
  --xz-color-orange-line-200: color-mix(oklch(from var(--xz-color-orange) 0.5 c h / 1) 50%, var(--xz-color-surface-100));
96
96
  --xz-color-orange-line-300: color-mix(oklch(from var(--xz-color-orange) 0.5 c h / 1) 65%, var(--xz-color-surface-100));
97
97
  --xz-color-orange-bg-100: var(--xz-color-orange);
98
- --xz-color-orange-bg-200: oklch(from var(--xz-color-orange) calc(l - 0.03) c h / 1);
98
+ --xz-color-orange-bg-200: oklch(from var(--xz-color-orange) calc(l - 0.05) c h / 1);
99
99
  --xz-color-orange-fg-100: oklch(0 0 0 / 0.95);
100
100
  --xz-color-orange-text-100: oklch(from var(--xz-color-orange) 0.5 c h / 1);
101
101
  --xz-color-orange-text-200: oklch(from var(--xz-color-orange) 0.3 c h / 1);
@@ -107,7 +107,7 @@
107
107
  --xz-color-purple-line-200: color-mix(oklch(from var(--xz-color-purple) 0.5 c h / 1) 50%, var(--xz-color-surface-100));
108
108
  --xz-color-purple-line-300: color-mix(oklch(from var(--xz-color-purple) 0.5 c h / 1) 65%, var(--xz-color-surface-100));
109
109
  --xz-color-purple-bg-100: var(--xz-color-purple);
110
- --xz-color-purple-bg-200: oklch(from var(--xz-color-purple) calc(l - 0.03) c h / 1);
110
+ --xz-color-purple-bg-200: oklch(from var(--xz-color-purple) calc(l - 0.05) c h / 1);
111
111
  --xz-color-purple-fg-100: oklch(0 0 0 / 0.95);
112
112
  --xz-color-purple-text-100: oklch(from var(--xz-color-purple) 0.5 c h / 1);
113
113
  --xz-color-purple-text-200: oklch(from var(--xz-color-purple) 0.3 c h / 1);
@@ -149,7 +149,7 @@
149
149
  --xz-color-neutral-line-200: color-mix(oklch(from var(--xz-color-gray) 0.5 c h / 1) 50%, var(--xz-color-surface-100));
150
150
  --xz-color-neutral-line-300: color-mix(oklch(from var(--xz-color-gray) 0.5 c h / 1) 65%, var(--xz-color-surface-100));
151
151
  --xz-color-neutral-bg-100: var(--xz-color-gray);
152
- --xz-color-neutral-bg-200: oklch(from var(--xz-color-gray) calc(l - 0.03) c h / 1);
152
+ --xz-color-neutral-bg-200: oklch(from var(--xz-color-gray) calc(l - 0.05) c h / 1);
153
153
  --xz-color-neutral-fg-100: oklch(1 0 0);
154
154
  --xz-color-neutral-text-100: oklch(from var(--xz-color-gray) 0.5 c h / 1);
155
155
  --xz-color-neutral-text-200: oklch(from var(--xz-color-gray) 0.85 c h / 1);
package/dist/themes.css CHANGED
@@ -22,8 +22,8 @@
22
22
  --xz-color-orange: oklch(0.735 0.175 53.769);
23
23
  --xz-color-purple: oklch(0.661 0.2 293.348);
24
24
  --xz-color-cyan: oklch(0.771 0.135 212.784);
25
- --xz-color-bg-100: oklch(0.17 0.01 260);
26
- --xz-color-bg-200: oklch(0.35 0.01 260);
25
+ --xz-color-bg-100: oklch(0.312 0.02 260.638);
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
28
  --xz-color-surface-100: oklch(0.98 0.005 260);
29
29
  --xz-color-surface-200: oklch(0.96 0.01 260);
@@ -46,7 +46,7 @@
46
46
  --xz-color-primary-line-200: color-mix(oklch(from var(--xz-color-fastwork) 0.5 c h / 1) 50%, var(--xz-color-surface-100));
47
47
  --xz-color-primary-line-300: color-mix(oklch(from var(--xz-color-fastwork) 0.5 c h / 1) 65%, var(--xz-color-surface-100));
48
48
  --xz-color-primary-bg-100: var(--xz-color-fastwork);
49
- --xz-color-primary-bg-200: oklch(from var(--xz-color-fastwork) calc(l - 0.03) c h / 1);
49
+ --xz-color-primary-bg-200: oklch(from var(--xz-color-fastwork) calc(l - 0.05) c h / 1);
50
50
  --xz-color-primary-fg-100: oklch(1 0 0 / 1);
51
51
  --xz-color-primary-text-100: oklch(from var(--xz-color-fastwork) 0.5 c h / 1);
52
52
  --xz-color-primary-text-200: oklch(from var(--xz-color-fastwork) 0.3 c h / 1);
@@ -58,7 +58,7 @@
58
58
  --xz-color-danger-line-200: color-mix(oklch(from var(--xz-color-red) 0.5 c h / 1) 50%, var(--xz-color-surface-100));
59
59
  --xz-color-danger-line-300: color-mix(oklch(from var(--xz-color-red) 0.5 c h / 1) 65%, var(--xz-color-surface-100));
60
60
  --xz-color-danger-bg-100: var(--xz-color-red);
61
- --xz-color-danger-bg-200: oklch(from var(--xz-color-red) calc(l - 0.03) c h / 1);
61
+ --xz-color-danger-bg-200: oklch(from var(--xz-color-red) calc(l - 0.05) c h / 1);
62
62
  --xz-color-danger-fg-100: oklch(1 0 0 / 1);
63
63
  --xz-color-danger-text-100: oklch(from var(--xz-color-red) 0.5 c h / 1);
64
64
  --xz-color-danger-text-200: oklch(from var(--xz-color-red) 0.3 c h / 1);
@@ -70,7 +70,7 @@
70
70
  --xz-color-success-line-200: color-mix(oklch(from var(--xz-color-green) 0.5 c h / 1) 50%, var(--xz-color-surface-100));
71
71
  --xz-color-success-line-300: color-mix(oklch(from var(--xz-color-green) 0.5 c h / 1) 65%, var(--xz-color-surface-100));
72
72
  --xz-color-success-bg-100: var(--xz-color-green);
73
- --xz-color-success-bg-200: oklch(from var(--xz-color-green) calc(l - 0.03) c h / 1);
73
+ --xz-color-success-bg-200: oklch(from var(--xz-color-green) calc(l - 0.05) c h / 1);
74
74
  --xz-color-success-fg-100: oklch(0 0 0 / 0.95);
75
75
  --xz-color-success-text-100: oklch(from var(--xz-color-green) 0.5 c h / 1);
76
76
  --xz-color-success-text-200: oklch(from var(--xz-color-green) 0.3 c h / 1);
@@ -82,7 +82,7 @@
82
82
  --xz-color-warning-line-200: color-mix(oklch(from var(--xz-color-yellow) 0.5 c h / 1) 50%, var(--xz-color-surface-100));
83
83
  --xz-color-warning-line-300: color-mix(oklch(from var(--xz-color-yellow) 0.5 c h / 1) 65%, var(--xz-color-surface-100));
84
84
  --xz-color-warning-bg-100: var(--xz-color-yellow);
85
- --xz-color-warning-bg-200: oklch(from var(--xz-color-yellow) calc(l - 0.03) c h / 1);
85
+ --xz-color-warning-bg-200: oklch(from var(--xz-color-yellow) calc(l - 0.05) c h / 1);
86
86
  --xz-color-warning-fg-100: oklch(0 0 0 / 0.95);
87
87
  --xz-color-warning-text-100: oklch(from var(--xz-color-yellow) 0.5 c h / 1);
88
88
  --xz-color-warning-text-200: oklch(from var(--xz-color-yellow) 0.3 c h / 1);
@@ -94,7 +94,7 @@
94
94
  --xz-color-info-line-200: color-mix(oklch(from var(--xz-color-cyan) 0.5 c h / 1) 50%, var(--xz-color-surface-100));
95
95
  --xz-color-info-line-300: color-mix(oklch(from var(--xz-color-cyan) 0.5 c h / 1) 65%, var(--xz-color-surface-100));
96
96
  --xz-color-info-bg-100: var(--xz-color-cyan);
97
- --xz-color-info-bg-200: oklch(from var(--xz-color-cyan) calc(l - 0.03) c h / 1);
97
+ --xz-color-info-bg-200: oklch(from var(--xz-color-cyan) calc(l - 0.05) c h / 1);
98
98
  --xz-color-info-fg-100: oklch(0 0 0 / 0.95);
99
99
  --xz-color-info-text-100: oklch(from var(--xz-color-cyan) 0.5 c h / 1);
100
100
  --xz-color-info-text-200: oklch(from var(--xz-color-cyan) 0.3 c h / 1);
@@ -106,7 +106,7 @@
106
106
  --xz-color-orange-line-200: color-mix(oklch(from var(--xz-color-orange) 0.5 c h / 1) 50%, var(--xz-color-surface-100));
107
107
  --xz-color-orange-line-300: color-mix(oklch(from var(--xz-color-orange) 0.5 c h / 1) 65%, var(--xz-color-surface-100));
108
108
  --xz-color-orange-bg-100: var(--xz-color-orange);
109
- --xz-color-orange-bg-200: oklch(from var(--xz-color-orange) calc(l - 0.03) c h / 1);
109
+ --xz-color-orange-bg-200: oklch(from var(--xz-color-orange) calc(l - 0.05) c h / 1);
110
110
  --xz-color-orange-fg-100: oklch(0 0 0 / 0.95);
111
111
  --xz-color-orange-text-100: oklch(from var(--xz-color-orange) 0.5 c h / 1);
112
112
  --xz-color-orange-text-200: oklch(from var(--xz-color-orange) 0.3 c h / 1);
@@ -118,7 +118,7 @@
118
118
  --xz-color-purple-line-200: color-mix(oklch(from var(--xz-color-purple) 0.5 c h / 1) 50%, var(--xz-color-surface-100));
119
119
  --xz-color-purple-line-300: color-mix(oklch(from var(--xz-color-purple) 0.5 c h / 1) 65%, var(--xz-color-surface-100));
120
120
  --xz-color-purple-bg-100: var(--xz-color-purple);
121
- --xz-color-purple-bg-200: oklch(from var(--xz-color-purple) calc(l - 0.03) c h / 1);
121
+ --xz-color-purple-bg-200: oklch(from var(--xz-color-purple) calc(l - 0.05) c h / 1);
122
122
  --xz-color-purple-fg-100: oklch(0 0 0 / 0.95);
123
123
  --xz-color-purple-text-100: oklch(from var(--xz-color-purple) 0.5 c h / 1);
124
124
  --xz-color-purple-text-200: oklch(from var(--xz-color-purple) 0.3 c h / 1);
@@ -160,7 +160,7 @@
160
160
  --xz-color-neutral-line-200: color-mix(oklch(from var(--xz-color-gray) 0.5 c h / 1) 50%, var(--xz-color-surface-100));
161
161
  --xz-color-neutral-line-300: color-mix(oklch(from var(--xz-color-gray) 0.5 c h / 1) 65%, var(--xz-color-surface-100));
162
162
  --xz-color-neutral-bg-100: var(--xz-color-gray);
163
- --xz-color-neutral-bg-200: oklch(from var(--xz-color-gray) calc(l - 0.03) c h / 1);
163
+ --xz-color-neutral-bg-200: oklch(from var(--xz-color-gray) calc(l - 0.05) c h / 1);
164
164
  --xz-color-neutral-fg-100: oklch(1 0 0);
165
165
  --xz-color-neutral-text-100: oklch(from var(--xz-color-gray) 0.5 c h / 1);
166
166
  --xz-color-neutral-text-200: oklch(from var(--xz-color-gray) 0.85 c h / 1);
@@ -184,7 +184,7 @@
184
184
  --xz-color-orange: oklch(0.735 0.175 53.769);
185
185
  --xz-color-purple: oklch(0.661 0.2 293.348);
186
186
  --xz-color-cyan: oklch(0.771 0.135 212.784);
187
- --xz-color-bg-100: oklch(0.96 0.01 260);
187
+ --xz-color-bg-100: oklch(0.97 0.01 260);
188
188
  --xz-color-bg-200: oklch(0.92 0.01 260);
189
189
  --xz-color-surface-50: oklch(0.26 0.02 269 / 1);
190
190
  --xz-color-surface-100: oklch(0.3 0.02 269 / 1);
package/llms.txt CHANGED
@@ -97,7 +97,7 @@ Base tokens cover surfaces, text, borders, and neutral overlays. They are theme-
97
97
 
98
98
  ## Semantic Tokens
99
99
 
100
- Eight categories, each with 11 tokens. Categories: `primary`, `danger`, `success`, `warning`, `info`, `neutral`, `orange`, `purple`.
100
+ Eight categories. Categories: `primary`, `danger`, `success`, `warning`, `info`, `neutral`, `orange`, `purple`. Most categories have 11 tokens; `neutral` has 12 (includes an extra `text-200`).
101
101
 
102
102
  ### Token Pattern per Category
103
103
 
@@ -117,6 +117,8 @@ Replace `{name}` with the category:
117
117
  | `--xz-color-{name}-fg-100` | Text/icon on solid bg — **always pair with bg-100 / bg-200** |
118
118
  | `--xz-color-{name}-text-100` | Colored text on light surfaces — links, status labels |
119
119
 
120
+ > **`neutral` exception:** also includes `--xz-color-neutral-text-200` — Muted neutral text, lighter than `text-100`. Use for supporting content, secondary labels.
121
+
120
122
  ### Key Rules for Semantic Tokens
121
123
 
122
124
  - **`bg-100` + `fg-100`**: Solid fill components (buttons, solid badges). `fg-100` provides correct contrast (white or dark depending on the category color).
@@ -396,7 +398,7 @@ Figma uses slash-separated paths. The mapping to CSS is direct:
396
398
  | `theme/base/line/200` | `--xz-color-line-200` |
397
399
  | `theme/base/line/300` | `--xz-color-line-300` |
398
400
 
399
- #### Semantic Categories (11 variables each)
401
+ #### Semantic Categories (11 variables each; neutral has 12)
400
402
 
401
403
  Same pattern for all 8 categories: `primary`, `danger`, `success`, `warning`, `info`, `neutral`, `orange`, `purple`.
402
404
 
@@ -414,6 +416,8 @@ Same pattern for all 8 categories: `primary`, `danger`, `success`, `warning`, `i
414
416
  | `theme/{name}/fg/100` | `--xz-color-{name}-fg-100` |
415
417
  | `theme/{name}/text/100` | `--xz-color-{name}-text-100` |
416
418
 
419
+ > **`neutral` exception:** also includes `theme/neutral/text/200` → `--xz-color-neutral-text-200`.
420
+
417
421
  #### Black Alpha (10 variables)
418
422
 
419
423
  | Figma Variable | CSS Variable |
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fastwork/xosmoz-theme",
3
- "version": "0.45.0",
3
+ "version": "0.47.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",