@fastwork/xosmoz-theme 0.0.40 → 0.1.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 (11) hide show
  1. package/README.md +15 -13
  2. package/dist/base.css +2 -2
  3. package/dist/index.js +63 -27
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +63 -27
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/themes/dark.css +30 -28
  8. package/dist/themes/light.css +30 -28
  9. package/dist/themes.css +60 -56
  10. package/llms.txt +271 -0
  11. package/package.json +5 -3
package/dist/themes.css CHANGED
@@ -10,16 +10,18 @@
10
10
  */
11
11
 
12
12
  [data-theme="light"] {
13
- --xz-color-bg-100: oklch(1.00 0.00 260);
14
- --xz-color-bg-200: oklch(0.98 0.005 260);
15
- --xz-color-bg-300: oklch(0.95 0.01 260);
16
- --xz-color-bg-400: oklch(0.92 0.01 260);
17
- --xz-color-fg-100: oklch(21% 0.006 285.885);
18
- --xz-color-fg-200: color-mix(in oklab, var(--xz-color-fg-100) 80%, transparent);
19
- --xz-color-fg-300: color-mix(in oklab, var(--xz-color-fg-100) 60%, transparent);
20
- --xz-color-line-100: oklch(0.95 0 1 / 1);
21
- --xz-color-line-200: oklch(0.92 0 1 / 1);
22
- --xz-color-line-300: oklch(0.89 0 1 / 1);
13
+ --xz-color-bg-100: oklch(0.17 0 0);
14
+ --xz-color-surface-100: oklch(1.00 0.00 260);
15
+ --xz-color-surface-200: oklch(0.98 0.005 260);
16
+ --xz-color-surface-300: oklch(0.95 0.01 260);
17
+ --xz-color-surface-400: oklch(0.92 0.01 260);
18
+ --xz-color-fg-100: oklch(1 0 0);
19
+ --xz-color-text-100: oklch(21% 0.006 285.885);
20
+ --xz-color-text-200: color-mix(in oklab, var(--xz-color-text-100) 80%, transparent);
21
+ --xz-color-text-300: color-mix(in oklab, var(--xz-color-text-100) 60%, transparent);
22
+ --xz-color-line-100: oklch(0.95 0 1 / 0.95);
23
+ --xz-color-line-200: oklch(0.92 0 1 / 0.95);
24
+ --xz-color-line-300: oklch(0.89 0 1 / 0.95);
23
25
  --xz-color-primary-soft-100: oklch(0.96 .0223 260);
24
26
  --xz-color-primary-soft-200: oklch(0.94 .0299 260);
25
27
  --xz-color-primary-soft-300: oklch(0.92 .0369 260);
@@ -28,9 +30,9 @@
28
30
  --xz-color-primary-line-300: oklch(0.72 .1881 260);
29
31
  --xz-color-primary-bg-100: oklch(0.58 .2524 260);
30
32
  --xz-color-primary-bg-200: oklch(0.54 .2482 260);
31
- --xz-color-primary-fg-50: oklch(1 0 0);
32
- --xz-color-primary-fg-100: oklch(0.54 .2320 260);
33
- --xz-color-primary-fg-200: oklch(0.28 .1041 260);
33
+ --xz-color-primary-fg-100: oklch(1 0 0 / 0.95);
34
+ --xz-color-primary-text-100: oklch(0.54 .2320 260);
35
+ --xz-color-primary-text-200: oklch(0.28 .1041 260);
34
36
  --xz-color-danger-soft-100: oklch(0.96 .0223 30);
35
37
  --xz-color-danger-soft-200: oklch(0.94 .0299 30);
36
38
  --xz-color-danger-soft-300: oklch(0.92 .0369 30);
@@ -39,9 +41,9 @@
39
41
  --xz-color-danger-line-300: oklch(0.72 .1881 30);
40
42
  --xz-color-danger-bg-100: oklch(0.62 .2524 30);
41
43
  --xz-color-danger-bg-200: oklch(0.58 .2482 30);
42
- --xz-color-danger-fg-50: oklch(1 0 0);
43
- --xz-color-danger-fg-100: oklch(0.54 .2320 30);
44
- --xz-color-danger-fg-200: oklch(0.28 .1041 30);
44
+ --xz-color-danger-fg-100: oklch(1 0 0 / 0.95);
45
+ --xz-color-danger-text-100: oklch(0.54 .2320 30);
46
+ --xz-color-danger-text-200: oklch(0.28 .1041 30);
45
47
  --xz-color-success-soft-100: oklch(0.96 .0223 143);
46
48
  --xz-color-success-soft-200: oklch(0.94 .0299 143);
47
49
  --xz-color-success-soft-300: oklch(0.92 .0369 143);
@@ -50,9 +52,9 @@
50
52
  --xz-color-success-line-300: oklch(0.72 .1881 143);
51
53
  --xz-color-success-bg-100: oklch(0.62 .2524 143);
52
54
  --xz-color-success-bg-200: oklch(0.58 .2482 143);
53
- --xz-color-success-fg-50: oklch(1 0 0);
54
- --xz-color-success-fg-100: oklch(0.54 .2320 143);
55
- --xz-color-success-fg-200: oklch(0.28 .1041 143);
55
+ --xz-color-success-fg-100: oklch(1 0 0 / 0.95);
56
+ --xz-color-success-text-100: oklch(0.54 .2320 143);
57
+ --xz-color-success-text-200: oklch(0.28 .1041 143);
56
58
  --xz-color-warning-soft-100: oklch(0.96 .0223 79);
57
59
  --xz-color-warning-soft-200: oklch(0.94 .0299 79);
58
60
  --xz-color-warning-soft-300: oklch(0.92 .0369 79);
@@ -61,9 +63,9 @@
61
63
  --xz-color-warning-line-300: oklch(0.72 .1881 79);
62
64
  --xz-color-warning-bg-100: oklch(0.62 .2524 79);
63
65
  --xz-color-warning-bg-200: oklch(0.58 .2482 79);
64
- --xz-color-warning-fg-50: oklch(1 0 0);
65
- --xz-color-warning-fg-100: oklch(0.54 .2320 79);
66
- --xz-color-warning-fg-200: oklch(0.28 .1041 79);
66
+ --xz-color-warning-fg-100: oklch(1 0 0 / 0.95);
67
+ --xz-color-warning-text-100: oklch(0.54 .2320 79);
68
+ --xz-color-warning-text-200: oklch(0.28 .1041 79);
67
69
  --xz-color-info-soft-100: oklch(0.96 .0223 213);
68
70
  --xz-color-info-soft-200: oklch(0.94 .0299 213);
69
71
  --xz-color-info-soft-300: oklch(0.92 .0369 213);
@@ -72,9 +74,9 @@
72
74
  --xz-color-info-line-300: oklch(0.72 .1881 213);
73
75
  --xz-color-info-bg-100: oklch(0.62 .2524 213);
74
76
  --xz-color-info-bg-200: oklch(0.58 .2482 213);
75
- --xz-color-info-fg-50: oklch(1 0 0);
76
- --xz-color-info-fg-100: oklch(0.54 .2320 213);
77
- --xz-color-info-fg-200: oklch(0.28 .1041 213);
77
+ --xz-color-info-fg-100: oklch(1 0 0 / 0.95);
78
+ --xz-color-info-text-100: oklch(0.54 .2320 213);
79
+ --xz-color-info-text-200: oklch(0.28 .1041 213);
78
80
  --xz-color-neutral-soft-100: oklch(0.96 0.005 260);
79
81
  --xz-color-neutral-soft-200: oklch(0.94 0.005 260);
80
82
  --xz-color-neutral-soft-300: oklch(0.92 0.005 260);
@@ -83,9 +85,9 @@
83
85
  --xz-color-neutral-line-300: oklch(0.72 0.005 260);
84
86
  --xz-color-neutral-bg-100: oklch(0.62 0.005 260);
85
87
  --xz-color-neutral-bg-200: oklch(0.58 0.005 260);
86
- --xz-color-neutral-fg-50: oklch(1 0 0);
87
- --xz-color-neutral-fg-100: oklch(0.54 0.005 260);
88
- --xz-color-neutral-fg-200: oklch(0.28 0.005 260);
88
+ --xz-color-neutral-fg-100: oklch(1 0 0);
89
+ --xz-color-neutral-text-100: oklch(0.54 0.005 260);
90
+ --xz-color-neutral-text-200: oklch(0.28 0.005 260);
89
91
  --xz-color-fastwork-100: oklch(0.96 .0223 260);
90
92
  --xz-color-fastwork-200: oklch(0.94 .0299 260);
91
93
  --xz-color-fastwork-300: oklch(0.92 .0369 260);
@@ -199,16 +201,18 @@
199
201
  }
200
202
 
201
203
  [data-theme="dark"] {
202
- --xz-color-bg-100: oklch(0.2526 0.0077 274.64);
203
- --xz-color-bg-200: oklch(0.2733 0.0075 274.68);
204
- --xz-color-bg-300: oklch(0.2933 0.0075 274.68);
205
- --xz-color-bg-400: oklch(0.3133 0.0075 274.68);
206
- --xz-color-fg-100: oklch(96% 0.01 260);
207
- --xz-color-fg-200: color-mix(in oklab, var(--xz-color-fg-100) 80%, transparent);
208
- --xz-color-fg-300: color-mix(in oklab, var(--xz-color-fg-100) 60%, transparent);
209
- --xz-color-line-100: oklch(0.32 0 0 / 1);
210
- --xz-color-line-200: oklch(0.34 0 0 / 1);
211
- --xz-color-line-300: oklch(0.36 0 0 / 1);
204
+ --xz-color-bg-100: oklch(0.96 0 0);
205
+ --xz-color-surface-100: oklch(0.3 0.02 269 / 1);
206
+ --xz-color-surface-200: oklch(0.33 0.02 269 / 1);
207
+ --xz-color-surface-300: oklch(0.355 0.02 269 / 1);
208
+ --xz-color-surface-400: oklch(0.37 0.02 269 / 1);
209
+ --xz-color-fg-100: oklch(0 0 0);
210
+ --xz-color-text-100: oklch(0.96 0.01 260 / 1);
211
+ --xz-color-text-200: color-mix(in oklab, var(--xz-color-text-100) 80%, transparent);
212
+ --xz-color-text-300: color-mix(in oklab, var(--xz-color-text-100) 60%, transparent);
213
+ --xz-color-line-100: oklch(0.38 0.02 269 / 0.95);
214
+ --xz-color-line-200: oklch(0.40 0.02 269 / 0.95);
215
+ --xz-color-line-300: oklch(0.42 0.02 269 / 0.95);
212
216
  --xz-color-primary-soft-100: oklch(0.22 .069 260);
213
217
  --xz-color-primary-soft-200: oklch(0.25 .081 260);
214
218
  --xz-color-primary-soft-300: oklch(0.30 .102 260);
@@ -217,9 +221,9 @@
217
221
  --xz-color-primary-line-300: oklch(0.64 .198 260);
218
222
  --xz-color-primary-bg-100: oklch(0.57 .232 260);
219
223
  --xz-color-primary-bg-200: oklch(0.51 .230 260);
220
- --xz-color-primary-fg-50: oklch(1 0 0);
221
- --xz-color-primary-fg-100: oklch(0.77 .164 260);
222
- --xz-color-primary-fg-200: oklch(0.96 .017 260);
224
+ --xz-color-primary-fg-100: oklch(1 0 0 / 0.95);
225
+ --xz-color-primary-text-100: oklch(0.77 .164 260);
226
+ --xz-color-primary-text-200: oklch(0.96 .017 260);
223
227
  --xz-color-danger-soft-100: oklch(0.22 .069 30);
224
228
  --xz-color-danger-soft-200: oklch(0.25 .081 30);
225
229
  --xz-color-danger-soft-300: oklch(0.30 .102 30);
@@ -228,9 +232,9 @@
228
232
  --xz-color-danger-line-300: oklch(0.64 .198 30);
229
233
  --xz-color-danger-bg-100: oklch(0.57 .232 30);
230
234
  --xz-color-danger-bg-200: oklch(0.51 .230 30);
231
- --xz-color-danger-fg-50: oklch(1 0 0);
232
- --xz-color-danger-fg-100: oklch(0.77 .164 30);
233
- --xz-color-danger-fg-200: oklch(0.96 .017 30);
235
+ --xz-color-danger-fg-100: oklch(1 0 0 / 0.95);
236
+ --xz-color-danger-text-100: oklch(0.77 .164 30);
237
+ --xz-color-danger-text-200: oklch(0.96 .017 30);
234
238
  --xz-color-success-soft-100: oklch(0.22 .069 143);
235
239
  --xz-color-success-soft-200: oklch(0.25 .081 143);
236
240
  --xz-color-success-soft-300: oklch(0.30 .102 143);
@@ -239,9 +243,9 @@
239
243
  --xz-color-success-line-300: oklch(0.64 .198 143);
240
244
  --xz-color-success-bg-100: oklch(0.57 .232 143);
241
245
  --xz-color-success-bg-200: oklch(0.51 .230 143);
242
- --xz-color-success-fg-50: oklch(1 0 0);
243
- --xz-color-success-fg-100: oklch(0.77 .164 143);
244
- --xz-color-success-fg-200: oklch(0.96 .017 143);
246
+ --xz-color-success-fg-100: oklch(1 0 0 / 0.95);
247
+ --xz-color-success-text-100: oklch(0.77 .164 143);
248
+ --xz-color-success-text-200: oklch(0.96 .017 143);
245
249
  --xz-color-warning-soft-100: oklch(0.22 .069 79);
246
250
  --xz-color-warning-soft-200: oklch(0.25 .081 79);
247
251
  --xz-color-warning-soft-300: oklch(0.30 .102 79);
@@ -250,9 +254,9 @@
250
254
  --xz-color-warning-line-300: oklch(0.64 .198 79);
251
255
  --xz-color-warning-bg-100: oklch(0.57 .232 79);
252
256
  --xz-color-warning-bg-200: oklch(0.51 .230 79);
253
- --xz-color-warning-fg-50: oklch(1 0 0);
254
- --xz-color-warning-fg-100: oklch(0.77 .164 79);
255
- --xz-color-warning-fg-200: oklch(0.96 .017 79);
257
+ --xz-color-warning-fg-100: oklch(1 0 0 / 0.95);
258
+ --xz-color-warning-text-100: oklch(0.77 .164 79);
259
+ --xz-color-warning-text-200: oklch(0.96 .017 79);
256
260
  --xz-color-info-soft-100: oklch(0.22 .069 213);
257
261
  --xz-color-info-soft-200: oklch(0.25 .081 213);
258
262
  --xz-color-info-soft-300: oklch(0.30 .102 213);
@@ -261,9 +265,9 @@
261
265
  --xz-color-info-line-300: oklch(0.64 .198 213);
262
266
  --xz-color-info-bg-100: oklch(0.57 .232 213);
263
267
  --xz-color-info-bg-200: oklch(0.51 .230 213);
264
- --xz-color-info-fg-50: oklch(1 0 0);
265
- --xz-color-info-fg-100: oklch(0.77 .164 213);
266
- --xz-color-info-fg-200: oklch(0.96 .017 213);
268
+ --xz-color-info-fg-100: oklch(1 0 0 / 0.95);
269
+ --xz-color-info-text-100: oklch(0.77 .164 213);
270
+ --xz-color-info-text-200: oklch(0.96 .017 213);
267
271
  --xz-color-neutral-soft-100: oklch(0.28 0.005 260);
268
272
  --xz-color-neutral-soft-200: oklch(0.30 0.005 260);
269
273
  --xz-color-neutral-soft-300: oklch(0.33 0.005 260);
@@ -272,9 +276,9 @@
272
276
  --xz-color-neutral-line-300: oklch(0.64 0.005 260);
273
277
  --xz-color-neutral-bg-100: oklch(0.57 0.005 260);
274
278
  --xz-color-neutral-bg-200: oklch(0.51 0.005 260);
275
- --xz-color-neutral-fg-50: oklch(1 0 0);
276
- --xz-color-neutral-fg-100: oklch(0.77 0.005 260);
277
- --xz-color-neutral-fg-200: oklch(0.96 0.005 260);
279
+ --xz-color-neutral-fg-100: oklch(1 0 0);
280
+ --xz-color-neutral-text-100: oklch(0.77 0.005 260);
281
+ --xz-color-neutral-text-200: oklch(0.96 0.005 260);
278
282
  --xz-color-fastwork-100: oklch(0.22 .069 260);
279
283
  --xz-color-fastwork-200: oklch(0.25 .081 260);
280
284
  --xz-color-fastwork-300: oklch(0.30 .102 260);
package/llms.txt ADDED
@@ -0,0 +1,271 @@
1
+ # @fastwork/xosmoz-theme
2
+
3
+ > Design tokens and theming system for the Xosmoz design system. Uses OKLCH color space for perceptually uniform colors. Supports light and dark themes via CSS variables with `data-theme` attribute switching.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ npm install @fastwork/xosmoz-theme
9
+ ```
10
+
11
+ ## CSS Imports
12
+
13
+ ```css
14
+ /* Base styles: CSS reset, font imports, typography/spacing/shadow tokens */
15
+ @import '@fastwork/xosmoz-theme/base.css';
16
+
17
+ /* All themes (light + dark) */
18
+ @import '@fastwork/xosmoz-theme/themes.css';
19
+
20
+ /* OR import a specific theme only */
21
+ @import '@fastwork/xosmoz-theme/themes/light.css';
22
+ @import '@fastwork/xosmoz-theme/themes/dark.css';
23
+ ```
24
+
25
+ ## Theme Switching
26
+
27
+ Set the theme via the `data-theme` attribute on the `<html>` element. Light theme is the default (no attribute needed).
28
+
29
+ ```html
30
+ <html>...</html> <!-- Light theme (default) -->
31
+ <html data-theme="dark">...</html> <!-- Dark theme -->
32
+ ```
33
+
34
+ ```javascript
35
+ // Switch theme at runtime
36
+ document.documentElement.setAttribute('data-theme', 'dark');
37
+
38
+ // Remove attribute to return to light
39
+ document.documentElement.removeAttribute('data-theme');
40
+ ```
41
+
42
+ ## CSS Variables Reference
43
+
44
+ All variables use the `--xz-` prefix.
45
+
46
+ ### Base Colors
47
+
48
+ Surface colors that adapt between light and dark themes.
49
+
50
+ | Variable | Purpose |
51
+ |----------|---------|
52
+ | `--xz-color-surface-100` | Page background |
53
+ | `--xz-color-surface-200` | Elevated surface (cards, modals) |
54
+ | `--xz-color-surface-300` | Secondary surface |
55
+ | `--xz-color-surface-400` | Tertiary surface / hover states |
56
+ | `--xz-color-text-100` | Primary text color |
57
+ | `--xz-color-text-200` | Secondary/muted text (80% opacity of text-100) |
58
+ | `--xz-color-text-300` | Tertiary/disabled text (60% opacity of text-100) |
59
+ | `--xz-color-bg-100` | Extreme base background (near-black in light, near-white in dark) |
60
+ | `--xz-color-fg-100` | Text on bg-100 (white in light, black in dark) |
61
+ | `--xz-color-line-100` | Subtle borders |
62
+ | `--xz-color-line-200` | Default borders |
63
+ | `--xz-color-line-300` | Strong/emphasized borders |
64
+
65
+ ### Semantic Colors
66
+
67
+ Six semantic categories: `primary`, `danger`, `success`, `warning`, `info`, `neutral`.
68
+
69
+ Each category follows the same token structure. Replace `{name}` with the category name:
70
+
71
+ | Variable | Purpose |
72
+ |----------|---------|
73
+ | `--xz-color-{name}-soft-100` | Lightest soft background |
74
+ | `--xz-color-{name}-soft-200` | Medium soft background |
75
+ | `--xz-color-{name}-soft-300` | Darkest soft background |
76
+ | `--xz-color-{name}-line-100` | Subtle border |
77
+ | `--xz-color-{name}-line-200` | Default border |
78
+ | `--xz-color-{name}-line-300` | Strong border |
79
+ | `--xz-color-{name}-bg-100` | Solid fill background (e.g. button bg) |
80
+ | `--xz-color-{name}-bg-200` | Darker solid fill (e.g. hover state) |
81
+ | `--xz-color-{name}-fg-100` | Text on solid bg — use for text over `{name}-bg-100`/`bg-200` (typically white) |
82
+ | `--xz-color-{name}-text-100` | Main text color for that semantic meaning |
83
+ | `--xz-color-{name}-text-200` | Darkest/emphasized text |
84
+
85
+ **Important: `fg-100` is the foreground color for text on solid backgrounds (`bg-100`/`bg-200`) of the same palette.** For example, use `--xz-color-primary-fg-100` as the text color on a `--xz-color-primary-bg-100` button. This is typically white.
86
+
87
+ ### Raw Color Palettes
88
+
89
+ 10-step scales (100–1000) for each palette. Available palettes: `fastwork`, `gray`, `green`, `mint`, `amber`, `red`, `orange`, `purple`, `cyan`, `black-alpha`, `white-alpha`.
90
+
91
+ ```
92
+ --xz-color-{palette}-100 (lightest)
93
+ --xz-color-{palette}-200
94
+ ...
95
+ --xz-color-{palette}-1000 (darkest)
96
+ ```
97
+
98
+ Alpha palettes (`black-alpha`, `white-alpha`) use opacity steps from 0.1 to 1.0.
99
+
100
+ ### Typography
101
+
102
+ ```
103
+ --xz-font-size-50 (0.5rem / 8px)
104
+ --xz-font-size-100 (0.625rem / 10px)
105
+ --xz-font-size-200 (0.75rem / 12px)
106
+ --xz-font-size-300 (0.875rem / 14px)
107
+ --xz-font-size-400 (1rem / 16px)
108
+ --xz-font-size-500 (1.125rem / 18px)
109
+ --xz-font-size-600 (1.25rem / 20px)
110
+ --xz-font-size-700 (1.5rem / 24px)
111
+ --xz-font-size-800 (1.625rem / 26px)
112
+ --xz-font-size-900 (2rem / 32px)
113
+ --xz-font-size-1000 (2.375rem / 38px)
114
+ --xz-font-size-1100 (2.5rem / 40px)
115
+ --xz-font-size-1200 (2.6875rem / 43px)
116
+ --xz-font-size-1300 (3rem / 48px)
117
+ --xz-font-size-1400 (3.5rem / 56px)
118
+ --xz-font-size-1500 (4rem / 64px)
119
+ --xz-font-size-1600 (4.5rem / 72px)
120
+
121
+ --xz-font-family-primary (system-ui sans-serif stack)
122
+ --xz-font-family-secondary ("Fastwork" + "Noto Sans Thai" + system fallbacks)
123
+
124
+ --xz-line-height-100pct (1)
125
+ --xz-line-height-125pct (1.25)
126
+ --xz-line-height-135pct (1.35)
127
+ --xz-line-height-150pct (1.5)
128
+ --xz-line-height-165pct (1.65)
129
+ --xz-line-height-200pct (2)
130
+ ```
131
+
132
+ **Font shorthand tokens** (responsive — desktop sizes, scales down on mobile <=768px):
133
+
134
+ ```
135
+ --xz-font-heading1 through --xz-font-heading6 (secondary font, bold)
136
+ --xz-font-title1 through --xz-font-title4 (primary font, bold)
137
+ --xz-font-subtitle1-bold, --xz-font-subtitle1-regular
138
+ --xz-font-subtitle2-bold, --xz-font-subtitle2-regular
139
+ --xz-font-subtitle3-bold, --xz-font-subtitle3-regular
140
+ --xz-font-body1 through --xz-font-body4 (primary font, regular)
141
+ ```
142
+
143
+ Usage: `font: var(--xz-font-heading1);`
144
+
145
+ ### Box Shadows
146
+
147
+ ```
148
+ --xz-box-shadow-100 (subtle: 0 1px 2px)
149
+ --xz-box-shadow-200 (small: 0 2px 6px)
150
+ --xz-box-shadow-300 (medium: 0 4px 16px)
151
+ --xz-box-shadow-400 (large: 0 8px 20px)
152
+ ```
153
+
154
+ ## JavaScript/TypeScript API
155
+
156
+ ### Theme objects
157
+
158
+ ```typescript
159
+ import { lightTheme, darkTheme, themes, getTheme, getThemeNames } from '@fastwork/xosmoz-theme';
160
+
161
+ // Access theme colors
162
+ lightTheme.colors.primary.bg[100] // 'oklch(0.58 .2524 260)'
163
+ lightTheme.colors.primary.fg[100] // 'oklch(1 0 0)' — white text for solid bg
164
+ lightTheme.colors.text[100] // primary text color
165
+ lightTheme.colors.fastwork[700] // raw palette value
166
+
167
+ // Get theme by name
168
+ const theme = getTheme('dark');
169
+
170
+ // List available themes
171
+ const names = getThemeNames(); // ['light', 'dark']
172
+ ```
173
+
174
+ ### Design tokens
175
+
176
+ ```typescript
177
+ import { fontSize, fontWeight, fontFamily, lineHeight, font, boxShadows } from '@fastwork/xosmoz-theme/tokens';
178
+
179
+ fontSize[400] // '1rem'
180
+ fontWeight[700] // 700
181
+ fontFamily.primary // system sans-serif stack
182
+ fontFamily.secondary // "Fastwork" + fallbacks
183
+ font.heading1 // { fontFamily, fontSize: { desktop, mobile }, fontWeight, lineHeight }
184
+ boxShadows[300] // '0 4px 16px 0 rgba(0, 0, 0, 0.12)'
185
+ ```
186
+
187
+ ### Types
188
+
189
+ ```typescript
190
+ import type { ThemeConfig, ThemeName, ColorToken, TypographyToken } from '@fastwork/xosmoz-theme';
191
+ ```
192
+
193
+ ## Common Patterns
194
+
195
+ ### Primary button
196
+
197
+ ```css
198
+ .button-primary {
199
+ background: var(--xz-color-primary-bg-100);
200
+ color: var(--xz-color-primary-fg-100); /* white text on solid bg */
201
+ font: var(--xz-font-subtitle1-bold);
202
+ border: none;
203
+ border-radius: 0.5rem;
204
+ }
205
+ .button-primary:hover {
206
+ background: var(--xz-color-primary-bg-200);
207
+ }
208
+ ```
209
+
210
+ ### Secondary/outline button
211
+
212
+ ```css
213
+ .button-secondary {
214
+ background: transparent;
215
+ color: var(--xz-color-primary-text-100);
216
+ border: 1px solid var(--xz-color-line-100);
217
+ }
218
+ ```
219
+
220
+ ### Card
221
+
222
+ ```css
223
+ .card {
224
+ background: var(--xz-color-surface-200);
225
+ color: var(--xz-color-text-100);
226
+ border: 1px solid var(--xz-color-line-100);
227
+ border-radius: 0.75rem;
228
+ box-shadow: var(--xz-box-shadow-200);
229
+ }
230
+ ```
231
+
232
+ ### Alert / status badge
233
+
234
+ ```css
235
+ .alert-success {
236
+ background: var(--xz-color-success-soft-100);
237
+ color: var(--xz-color-success-text-100);
238
+ border: 1px solid var(--xz-color-success-line-100);
239
+ }
240
+
241
+ .badge-danger {
242
+ background: var(--xz-color-danger-bg-100);
243
+ color: var(--xz-color-danger-fg-100); /* white text on solid bg */
244
+ }
245
+ ```
246
+
247
+ ### Form input
248
+
249
+ ```css
250
+ .input {
251
+ background: var(--xz-color-surface-100);
252
+ color: var(--xz-color-text-100);
253
+ border: 1px solid var(--xz-color-line-200);
254
+ font: var(--xz-font-body1);
255
+ }
256
+ .input:focus {
257
+ border-color: var(--xz-color-primary-line-200);
258
+ box-shadow: 0 0 0 3px var(--xz-color-primary-soft-100);
259
+ }
260
+ ```
261
+
262
+ ### Muted/secondary text
263
+
264
+ ```css
265
+ .text-muted {
266
+ color: var(--xz-color-text-200);
267
+ }
268
+ .text-disabled {
269
+ color: var(--xz-color-text-300);
270
+ }
271
+ ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fastwork/xosmoz-theme",
3
- "version": "0.0.40",
3
+ "version": "0.1.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",
@@ -20,10 +20,12 @@
20
20
  "./base.css": "./dist/base.css",
21
21
  "./themes.css": "./dist/themes.css",
22
22
  "./themes/light.css": "./dist/themes/light.css",
23
- "./themes/dark.css": "./dist/themes/dark.css"
23
+ "./themes/dark.css": "./dist/themes/dark.css",
24
+ "./llms.txt": "./llms.txt"
24
25
  },
25
26
  "files": [
26
- "dist"
27
+ "dist",
28
+ "llms.txt"
27
29
  ],
28
30
  "scripts": {
29
31
  "build": "yarn build:ts && yarn build:fonts && yarn build:css && yarn build:themes",