@fastwork/xosmoz-theme 0.47.0 → 0.49.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.
- package/README.md +7 -6
- package/dist/base.css +14 -14
- package/dist/dart/xz_colors.generated.dart +52 -50
- package/dist/figma-plugin.zip +0 -0
- package/dist/figma-tokens/Dark.json +29 -16
- package/dist/figma-tokens/Light.json +188 -175
- package/dist/index.js +32 -30
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +32 -30
- package/dist/index.mjs.map +1 -1
- package/dist/llms.txt +822 -0
- package/dist/themes/dark.css +7 -6
- package/dist/themes/light.css +11 -10
- package/dist/themes.css +18 -16
- package/dist/tokens.js +14 -14
- package/dist/tokens.js.map +1 -1
- package/dist/tokens.mjs +14 -14
- package/dist/tokens.mjs.map +1 -1
- package/package.json +4 -5
- package/llms.txt +0 -502
package/llms.txt
DELETED
|
@@ -1,502 +0,0 @@
|
|
|
1
|
-
# @fastwork/xosmoz-theme — Color Tokens & Usage Guide
|
|
2
|
-
|
|
3
|
-
> Design token system for Xosmoz. Uses OKLCH color space. Supports light and dark themes via CSS variables and `data-theme` attribute. This guide covers color tokens only (CSS variables).
|
|
4
|
-
|
|
5
|
-
---
|
|
6
|
-
|
|
7
|
-
## Setup
|
|
8
|
-
|
|
9
|
-
### Install
|
|
10
|
-
|
|
11
|
-
```bash
|
|
12
|
-
npm install @fastwork/xosmoz-theme
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
### CSS Imports
|
|
16
|
-
|
|
17
|
-
```css
|
|
18
|
-
/* Base styles: CSS reset, font imports, typography/spacing tokens */
|
|
19
|
-
@import '@fastwork/xosmoz-theme/base.css';
|
|
20
|
-
|
|
21
|
-
/* All themes (light + dark) */
|
|
22
|
-
@import '@fastwork/xosmoz-theme/themes.css';
|
|
23
|
-
|
|
24
|
-
/* OR import a specific theme only */
|
|
25
|
-
@import '@fastwork/xosmoz-theme/themes/light.css';
|
|
26
|
-
@import '@fastwork/xosmoz-theme/themes/dark.css';
|
|
27
|
-
```
|
|
28
|
-
|
|
29
|
-
### Theme Switching
|
|
30
|
-
|
|
31
|
-
Light theme is the default. Set `data-theme="dark"` on `<html>` for dark mode.
|
|
32
|
-
|
|
33
|
-
```html
|
|
34
|
-
<html>...</html> <!-- Light theme (default) -->
|
|
35
|
-
<html data-theme="dark">...</html> <!-- Dark theme -->
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
```javascript
|
|
39
|
-
// Switch at runtime
|
|
40
|
-
document.documentElement.setAttribute('data-theme', 'dark');
|
|
41
|
-
document.documentElement.removeAttribute('data-theme'); // back to light
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
---
|
|
45
|
-
|
|
46
|
-
## Color Token Architecture
|
|
47
|
-
|
|
48
|
-
The system has two layers:
|
|
49
|
-
|
|
50
|
-
### Layer 1 — Palette Tokens (primitives)
|
|
51
|
-
Eight raw color values. These are single CSS variables (no numbered scales). They are the same in both light and dark themes.
|
|
52
|
-
|
|
53
|
-
```
|
|
54
|
-
--xz-color-fastwork (brand blue-purple)
|
|
55
|
-
--xz-color-gray
|
|
56
|
-
--xz-color-green
|
|
57
|
-
--xz-color-yellow
|
|
58
|
-
--xz-color-red
|
|
59
|
-
--xz-color-orange
|
|
60
|
-
--xz-color-purple
|
|
61
|
-
--xz-color-cyan
|
|
62
|
-
```
|
|
63
|
-
|
|
64
|
-
**Rule: Do not use palette tokens directly in UI.** They exist as internal primitives. Always use semantic tokens instead.
|
|
65
|
-
|
|
66
|
-
### Layer 2 — Semantic Tokens (theme-aware)
|
|
67
|
-
These tokens change values between light and dark themes. Always use these for UI components, text, borders, and backgrounds.
|
|
68
|
-
|
|
69
|
-
Pattern: `--xz-color-{category}-{property}-{scale}`
|
|
70
|
-
|
|
71
|
-
---
|
|
72
|
-
|
|
73
|
-
## Base Tokens
|
|
74
|
-
|
|
75
|
-
Base tokens cover surfaces, text, borders, and neutral overlays. They are theme-aware (change in dark mode).
|
|
76
|
-
|
|
77
|
-
| CSS Variable | Purpose |
|
|
78
|
-
|---|---|
|
|
79
|
-
| `--xz-color-surface-50` | Absolute white/darkest background (page canvas extreme) |
|
|
80
|
-
| `--xz-color-surface-100` | Default page background |
|
|
81
|
-
| `--xz-color-surface-200` | Elevated surface — cards, modals |
|
|
82
|
-
| `--xz-color-surface-300` | Secondary elevated surface |
|
|
83
|
-
| `--xz-color-surface-400` | Tertiary elevated surface — popovers, dropdowns |
|
|
84
|
-
| `--xz-color-bg-100` | Extreme base (near-black in light / near-white in dark) |
|
|
85
|
-
| `--xz-color-bg-200` | Secondary extreme base |
|
|
86
|
-
| `--xz-color-fg-100` | Text/icon on bg-100 and bg-200 |
|
|
87
|
-
| `--xz-color-text-100` | Primary text |
|
|
88
|
-
| `--xz-color-text-200` | Secondary / muted text (70% opacity) |
|
|
89
|
-
| `--xz-color-text-300` | Disabled / placeholder text (60% opacity) |
|
|
90
|
-
| `--xz-color-soft-100` | Very subtle neutral overlay (5% opacity) |
|
|
91
|
-
| `--xz-color-soft-200` | Subtle neutral overlay (10% opacity) |
|
|
92
|
-
| `--xz-color-line-100` | Subtle border |
|
|
93
|
-
| `--xz-color-line-200` | Default border |
|
|
94
|
-
| `--xz-color-line-300` | Emphasized border |
|
|
95
|
-
|
|
96
|
-
---
|
|
97
|
-
|
|
98
|
-
## Semantic Tokens
|
|
99
|
-
|
|
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
|
-
|
|
102
|
-
### Token Pattern per Category
|
|
103
|
-
|
|
104
|
-
Replace `{name}` with the category:
|
|
105
|
-
|
|
106
|
-
| CSS Variable | Purpose |
|
|
107
|
-
|---|---|
|
|
108
|
-
| `--xz-color-{name}-soft-100` | Tinted transparent background — lightest (10% opacity of base color) |
|
|
109
|
-
| `--xz-color-{name}-soft-200` | Tinted transparent background — stronger (16% opacity), use for hover |
|
|
110
|
-
| `--xz-color-{name}-soft-solid-100` | Opaque version of soft-100 (mixed into surface-100) — use on overlapping surfaces |
|
|
111
|
-
| `--xz-color-{name}-soft-solid-200` | Opaque version of soft-200 |
|
|
112
|
-
| `--xz-color-{name}-line-100` | Subtle colored border |
|
|
113
|
-
| `--xz-color-{name}-line-200` | Default colored border |
|
|
114
|
-
| `--xz-color-{name}-line-300` | Strong colored border |
|
|
115
|
-
| `--xz-color-{name}-bg-100` | Solid fill background — buttons, chips, badges |
|
|
116
|
-
| `--xz-color-{name}-bg-200` | Solid fill hover/pressed state |
|
|
117
|
-
| `--xz-color-{name}-fg-100` | Text/icon on solid bg — **always pair with bg-100 / bg-200** |
|
|
118
|
-
| `--xz-color-{name}-text-100` | Colored text on light surfaces — links, status labels |
|
|
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
|
-
|
|
122
|
-
### Key Rules for Semantic Tokens
|
|
123
|
-
|
|
124
|
-
- **`bg-100` + `fg-100`**: Solid fill components (buttons, solid badges). `fg-100` provides correct contrast (white or dark depending on the category color).
|
|
125
|
-
- **`soft-100` + `text-100` + `line-100`**: Soft/tinted style (alerts, soft badges, highlighted rows).
|
|
126
|
-
- **`soft-solid-*`**: Use instead of `soft-*` when the component sits on a non-transparent surface (e.g., inside a card that has its own background).
|
|
127
|
-
- **`text-100`**: Use for colored text that sits on surface backgrounds (not on solid fills). Examples: link text, status label text, tag text.
|
|
128
|
-
- **`line-*`**: Colored borders. Use `line-200` as the default, `line-100` for subtle, `line-300` for strong/emphasized.
|
|
129
|
-
|
|
130
|
-
---
|
|
131
|
-
|
|
132
|
-
## Alpha & Overlay Tokens
|
|
133
|
-
|
|
134
|
-
These use a 100–1000 scale representing opacity from 0.1 to 1.0.
|
|
135
|
-
|
|
136
|
-
```
|
|
137
|
-
--xz-color-black-alpha-100 (black at 10% opacity)
|
|
138
|
-
--xz-color-black-alpha-200 (black at 20% opacity)
|
|
139
|
-
...
|
|
140
|
-
--xz-color-black-alpha-1000 (black at 100% opacity)
|
|
141
|
-
|
|
142
|
-
--xz-color-white-alpha-100 (white at 10% opacity)
|
|
143
|
-
...
|
|
144
|
-
--xz-color-white-alpha-1000 (white at 100% opacity)
|
|
145
|
-
|
|
146
|
-
--xz-color-overlay-100 (dark overlay at 10% opacity)
|
|
147
|
-
...
|
|
148
|
-
--xz-color-overlay-1000 (dark overlay at 100% opacity)
|
|
149
|
-
```
|
|
150
|
-
|
|
151
|
-
Use `overlay-*` for modal/drawer backdrops. Use `black-alpha-*` / `white-alpha-*` for scrim layers or icon fills with transparency.
|
|
152
|
-
|
|
153
|
-
---
|
|
154
|
-
|
|
155
|
-
## Usage Guidelines
|
|
156
|
-
|
|
157
|
-
### Backgrounds & Surfaces
|
|
158
|
-
|
|
159
|
-
| Situation | Use |
|
|
160
|
-
|---|---|
|
|
161
|
-
| Page background | `--xz-color-surface-100` |
|
|
162
|
-
| Card, modal, dialog | `--xz-color-surface-200` |
|
|
163
|
-
| Nested card or secondary panel | `--xz-color-surface-300` |
|
|
164
|
-
| Popover, dropdown, tooltip | `--xz-color-surface-400` |
|
|
165
|
-
| Inverted/dark block on page | `--xz-color-bg-100` |
|
|
166
|
-
| Text on inverted block | `--xz-color-fg-100` |
|
|
167
|
-
|
|
168
|
-
### Text
|
|
169
|
-
|
|
170
|
-
| Situation | Use |
|
|
171
|
-
|---|---|
|
|
172
|
-
| Body text, headings | `--xz-color-text-100` |
|
|
173
|
-
| Secondary / helper text | `--xz-color-text-200` |
|
|
174
|
-
| Placeholder / disabled text | `--xz-color-text-300` |
|
|
175
|
-
| Colored status text (link, tag, label) | `--xz-color-{name}-text-100` |
|
|
176
|
-
|
|
177
|
-
### Borders
|
|
178
|
-
|
|
179
|
-
| Situation | Use |
|
|
180
|
-
|---|---|
|
|
181
|
-
| Subtle separator, divider | `--xz-color-line-100` |
|
|
182
|
-
| Default input or card border | `--xz-color-line-200` |
|
|
183
|
-
| Strong border, active outline | `--xz-color-line-300` |
|
|
184
|
-
| Colored border (semantic) | `--xz-color-{name}-line-100/200/300` |
|
|
185
|
-
|
|
186
|
-
### Solid Components (Buttons, Solid Badges)
|
|
187
|
-
|
|
188
|
-
```
|
|
189
|
-
background: --xz-color-{name}-bg-100
|
|
190
|
-
color: --xz-color-{name}-fg-100 ← always use fg-100 on bg-100
|
|
191
|
-
hover bg: --xz-color-{name}-bg-200
|
|
192
|
-
```
|
|
193
|
-
|
|
194
|
-
### Soft/Tinted Components (Alerts, Soft Badges)
|
|
195
|
-
|
|
196
|
-
```
|
|
197
|
-
background: --xz-color-{name}-soft-100
|
|
198
|
-
color: --xz-color-{name}-text-100
|
|
199
|
-
border: 1px solid --xz-color-{name}-line-100
|
|
200
|
-
```
|
|
201
|
-
|
|
202
|
-
### Outline/Ghost Components
|
|
203
|
-
|
|
204
|
-
```
|
|
205
|
-
background: transparent
|
|
206
|
-
color: --xz-color-{name}-text-100
|
|
207
|
-
border: 1px solid --xz-color-{name}-line-200
|
|
208
|
-
```
|
|
209
|
-
|
|
210
|
-
### Focus Ring
|
|
211
|
-
|
|
212
|
-
```
|
|
213
|
-
border-color: --xz-color-{name}-line-200
|
|
214
|
-
box-shadow: 0 0 0 3px --xz-color-{name}-soft-100
|
|
215
|
-
```
|
|
216
|
-
|
|
217
|
-
### Modal Backdrop
|
|
218
|
-
|
|
219
|
-
```
|
|
220
|
-
background: --xz-color-overlay-600
|
|
221
|
-
```
|
|
222
|
-
|
|
223
|
-
---
|
|
224
|
-
|
|
225
|
-
## Common UI Patterns
|
|
226
|
-
|
|
227
|
-
### Primary Button
|
|
228
|
-
|
|
229
|
-
```css
|
|
230
|
-
.btn-primary {
|
|
231
|
-
background: var(--xz-color-primary-bg-100);
|
|
232
|
-
color: var(--xz-color-primary-fg-100);
|
|
233
|
-
border: none;
|
|
234
|
-
}
|
|
235
|
-
.btn-primary:hover {
|
|
236
|
-
background: var(--xz-color-primary-bg-200);
|
|
237
|
-
}
|
|
238
|
-
```
|
|
239
|
-
|
|
240
|
-
### Outline Button
|
|
241
|
-
|
|
242
|
-
```css
|
|
243
|
-
.btn-outline {
|
|
244
|
-
background: transparent;
|
|
245
|
-
color: var(--xz-color-primary-text-100);
|
|
246
|
-
border: 1px solid var(--xz-color-primary-line-200);
|
|
247
|
-
}
|
|
248
|
-
.btn-outline:hover {
|
|
249
|
-
background: var(--xz-color-primary-soft-100);
|
|
250
|
-
}
|
|
251
|
-
```
|
|
252
|
-
|
|
253
|
-
### Danger Button
|
|
254
|
-
|
|
255
|
-
```css
|
|
256
|
-
.btn-danger {
|
|
257
|
-
background: var(--xz-color-danger-bg-100);
|
|
258
|
-
color: var(--xz-color-danger-fg-100);
|
|
259
|
-
border: none;
|
|
260
|
-
}
|
|
261
|
-
.btn-danger:hover {
|
|
262
|
-
background: var(--xz-color-danger-bg-200);
|
|
263
|
-
}
|
|
264
|
-
```
|
|
265
|
-
|
|
266
|
-
### Card
|
|
267
|
-
|
|
268
|
-
```css
|
|
269
|
-
.card {
|
|
270
|
-
background: var(--xz-color-surface-200);
|
|
271
|
-
color: var(--xz-color-text-100);
|
|
272
|
-
border: 1px solid var(--xz-color-line-100);
|
|
273
|
-
}
|
|
274
|
-
```
|
|
275
|
-
|
|
276
|
-
### Alert (soft style)
|
|
277
|
-
|
|
278
|
-
```css
|
|
279
|
-
/* Replace {name} with: success | danger | warning | info */
|
|
280
|
-
.alert-success {
|
|
281
|
-
background: var(--xz-color-success-soft-100);
|
|
282
|
-
color: var(--xz-color-success-text-100);
|
|
283
|
-
border: 1px solid var(--xz-color-success-line-100);
|
|
284
|
-
}
|
|
285
|
-
.alert-danger {
|
|
286
|
-
background: var(--xz-color-danger-soft-100);
|
|
287
|
-
color: var(--xz-color-danger-text-100);
|
|
288
|
-
border: 1px solid var(--xz-color-danger-line-100);
|
|
289
|
-
}
|
|
290
|
-
.alert-warning {
|
|
291
|
-
background: var(--xz-color-warning-soft-100);
|
|
292
|
-
color: var(--xz-color-warning-text-100);
|
|
293
|
-
border: 1px solid var(--xz-color-warning-line-100);
|
|
294
|
-
}
|
|
295
|
-
.alert-info {
|
|
296
|
-
background: var(--xz-color-info-soft-100);
|
|
297
|
-
color: var(--xz-color-info-text-100);
|
|
298
|
-
border: 1px solid var(--xz-color-info-line-100);
|
|
299
|
-
}
|
|
300
|
-
```
|
|
301
|
-
|
|
302
|
-
### Badge — Soft
|
|
303
|
-
|
|
304
|
-
```css
|
|
305
|
-
.badge-success {
|
|
306
|
-
background: var(--xz-color-success-soft-100);
|
|
307
|
-
color: var(--xz-color-success-text-100);
|
|
308
|
-
}
|
|
309
|
-
```
|
|
310
|
-
|
|
311
|
-
### Badge — Solid
|
|
312
|
-
|
|
313
|
-
```css
|
|
314
|
-
.badge-danger-solid {
|
|
315
|
-
background: var(--xz-color-danger-bg-100);
|
|
316
|
-
color: var(--xz-color-danger-fg-100);
|
|
317
|
-
}
|
|
318
|
-
```
|
|
319
|
-
|
|
320
|
-
### Form Input
|
|
321
|
-
|
|
322
|
-
```css
|
|
323
|
-
.input {
|
|
324
|
-
background: var(--xz-color-surface-100);
|
|
325
|
-
color: var(--xz-color-text-100);
|
|
326
|
-
border: 1px solid var(--xz-color-line-200);
|
|
327
|
-
}
|
|
328
|
-
.input::placeholder {
|
|
329
|
-
color: var(--xz-color-text-300);
|
|
330
|
-
}
|
|
331
|
-
.input:focus {
|
|
332
|
-
border-color: var(--xz-color-primary-line-200);
|
|
333
|
-
box-shadow: 0 0 0 3px var(--xz-color-primary-soft-100);
|
|
334
|
-
outline: none;
|
|
335
|
-
}
|
|
336
|
-
.input.error {
|
|
337
|
-
border-color: var(--xz-color-danger-line-200);
|
|
338
|
-
box-shadow: 0 0 0 3px var(--xz-color-danger-soft-100);
|
|
339
|
-
}
|
|
340
|
-
```
|
|
341
|
-
|
|
342
|
-
### Text Hierarchy
|
|
343
|
-
|
|
344
|
-
```css
|
|
345
|
-
.text-primary { color: var(--xz-color-text-100); }
|
|
346
|
-
.text-muted { color: var(--xz-color-text-200); }
|
|
347
|
-
.text-disabled { color: var(--xz-color-text-300); }
|
|
348
|
-
.text-link { color: var(--xz-color-primary-text-100); }
|
|
349
|
-
.text-danger { color: var(--xz-color-danger-text-100); }
|
|
350
|
-
.text-success { color: var(--xz-color-success-text-100); }
|
|
351
|
-
```
|
|
352
|
-
|
|
353
|
-
---
|
|
354
|
-
|
|
355
|
-
## Figma Variables Guide
|
|
356
|
-
|
|
357
|
-
Figma variables mirror the CSS token system exactly. Every CSS variable has a corresponding Figma variable in the same collection.
|
|
358
|
-
|
|
359
|
-
### Collection Structure
|
|
360
|
-
|
|
361
|
-
- **Collection name**: `colors`
|
|
362
|
-
- **Modes**: `Light` and `Dark`
|
|
363
|
-
- **Total variables**: ~160 color variables
|
|
364
|
-
|
|
365
|
-
### Naming Pattern
|
|
366
|
-
|
|
367
|
-
Figma uses slash-separated paths. The mapping to CSS is direct:
|
|
368
|
-
|
|
369
|
-
| Variable type | Figma path | CSS variable |
|
|
370
|
-
|---|---|---|
|
|
371
|
-
| Base theme token | `theme/base/{property}/{scale}` | `--xz-color-{property}-{scale}` |
|
|
372
|
-
| Semantic theme token | `theme/{category}/{property}/{scale}` | `--xz-color-{category}-{property}-{scale}` |
|
|
373
|
-
| Alpha token | `theme/blackAlpha/{scale}` | `--xz-color-black-alpha-{scale}` |
|
|
374
|
-
| Alpha token | `theme/whiteAlpha/{scale}` | `--xz-color-white-alpha-{scale}` |
|
|
375
|
-
| Overlay token | `theme/overlay/{scale}` | `--xz-color-overlay-{scale}` |
|
|
376
|
-
| Palette primitive | `palette/{name}` | `--xz-color-{name}` |
|
|
377
|
-
|
|
378
|
-
### Complete Figma → CSS Mapping
|
|
379
|
-
|
|
380
|
-
#### Base (16 variables)
|
|
381
|
-
|
|
382
|
-
| Figma Variable | CSS Variable |
|
|
383
|
-
|---|---|
|
|
384
|
-
| `theme/base/bg/100` | `--xz-color-bg-100` |
|
|
385
|
-
| `theme/base/bg/200` | `--xz-color-bg-200` |
|
|
386
|
-
| `theme/base/surface/50` | `--xz-color-surface-50` |
|
|
387
|
-
| `theme/base/surface/100` | `--xz-color-surface-100` |
|
|
388
|
-
| `theme/base/surface/200` | `--xz-color-surface-200` |
|
|
389
|
-
| `theme/base/surface/300` | `--xz-color-surface-300` |
|
|
390
|
-
| `theme/base/surface/400` | `--xz-color-surface-400` |
|
|
391
|
-
| `theme/base/fg/100` | `--xz-color-fg-100` |
|
|
392
|
-
| `theme/base/soft/100` | `--xz-color-soft-100` |
|
|
393
|
-
| `theme/base/soft/200` | `--xz-color-soft-200` |
|
|
394
|
-
| `theme/base/text/100` | `--xz-color-text-100` |
|
|
395
|
-
| `theme/base/text/200` | `--xz-color-text-200` |
|
|
396
|
-
| `theme/base/text/300` | `--xz-color-text-300` |
|
|
397
|
-
| `theme/base/line/100` | `--xz-color-line-100` |
|
|
398
|
-
| `theme/base/line/200` | `--xz-color-line-200` |
|
|
399
|
-
| `theme/base/line/300` | `--xz-color-line-300` |
|
|
400
|
-
|
|
401
|
-
#### Semantic Categories (11 variables each; neutral has 12)
|
|
402
|
-
|
|
403
|
-
Same pattern for all 8 categories: `primary`, `danger`, `success`, `warning`, `info`, `neutral`, `orange`, `purple`.
|
|
404
|
-
|
|
405
|
-
| Figma Variable | CSS Variable |
|
|
406
|
-
|---|---|
|
|
407
|
-
| `theme/{name}/soft/100` | `--xz-color-{name}-soft-100` |
|
|
408
|
-
| `theme/{name}/soft/200` | `--xz-color-{name}-soft-200` |
|
|
409
|
-
| `theme/{name}/softSolid/100` | `--xz-color-{name}-soft-solid-100` |
|
|
410
|
-
| `theme/{name}/softSolid/200` | `--xz-color-{name}-soft-solid-200` |
|
|
411
|
-
| `theme/{name}/line/100` | `--xz-color-{name}-line-100` |
|
|
412
|
-
| `theme/{name}/line/200` | `--xz-color-{name}-line-200` |
|
|
413
|
-
| `theme/{name}/line/300` | `--xz-color-{name}-line-300` |
|
|
414
|
-
| `theme/{name}/bg/100` | `--xz-color-{name}-bg-100` |
|
|
415
|
-
| `theme/{name}/bg/200` | `--xz-color-{name}-bg-200` |
|
|
416
|
-
| `theme/{name}/fg/100` | `--xz-color-{name}-fg-100` |
|
|
417
|
-
| `theme/{name}/text/100` | `--xz-color-{name}-text-100` |
|
|
418
|
-
|
|
419
|
-
> **`neutral` exception:** also includes `theme/neutral/text/200` → `--xz-color-neutral-text-200`.
|
|
420
|
-
|
|
421
|
-
#### Black Alpha (10 variables)
|
|
422
|
-
|
|
423
|
-
| Figma Variable | CSS Variable |
|
|
424
|
-
|---|---|
|
|
425
|
-
| `theme/blackAlpha/100` | `--xz-color-black-alpha-100` |
|
|
426
|
-
| `theme/blackAlpha/200` | `--xz-color-black-alpha-200` |
|
|
427
|
-
| `theme/blackAlpha/300` | `--xz-color-black-alpha-300` |
|
|
428
|
-
| `theme/blackAlpha/400` | `--xz-color-black-alpha-400` |
|
|
429
|
-
| `theme/blackAlpha/500` | `--xz-color-black-alpha-500` |
|
|
430
|
-
| `theme/blackAlpha/600` | `--xz-color-black-alpha-600` |
|
|
431
|
-
| `theme/blackAlpha/700` | `--xz-color-black-alpha-700` |
|
|
432
|
-
| `theme/blackAlpha/800` | `--xz-color-black-alpha-800` |
|
|
433
|
-
| `theme/blackAlpha/900` | `--xz-color-black-alpha-900` |
|
|
434
|
-
| `theme/blackAlpha/1000` | `--xz-color-black-alpha-1000` |
|
|
435
|
-
|
|
436
|
-
#### White Alpha (10 variables)
|
|
437
|
-
|
|
438
|
-
| Figma Variable | CSS Variable |
|
|
439
|
-
|---|---|
|
|
440
|
-
| `theme/whiteAlpha/100` | `--xz-color-white-alpha-100` |
|
|
441
|
-
| `theme/whiteAlpha/200` | `--xz-color-white-alpha-200` |
|
|
442
|
-
| `theme/whiteAlpha/300` | `--xz-color-white-alpha-300` |
|
|
443
|
-
| `theme/whiteAlpha/400` | `--xz-color-white-alpha-400` |
|
|
444
|
-
| `theme/whiteAlpha/500` | `--xz-color-white-alpha-500` |
|
|
445
|
-
| `theme/whiteAlpha/600` | `--xz-color-white-alpha-600` |
|
|
446
|
-
| `theme/whiteAlpha/700` | `--xz-color-white-alpha-700` |
|
|
447
|
-
| `theme/whiteAlpha/800` | `--xz-color-white-alpha-800` |
|
|
448
|
-
| `theme/whiteAlpha/900` | `--xz-color-white-alpha-900` |
|
|
449
|
-
| `theme/whiteAlpha/1000` | `--xz-color-white-alpha-1000` |
|
|
450
|
-
|
|
451
|
-
#### Overlay (10 variables)
|
|
452
|
-
|
|
453
|
-
| Figma Variable | CSS Variable |
|
|
454
|
-
|---|---|
|
|
455
|
-
| `theme/overlay/100` | `--xz-color-overlay-100` |
|
|
456
|
-
| `theme/overlay/200` | `--xz-color-overlay-200` |
|
|
457
|
-
| `theme/overlay/300` | `--xz-color-overlay-300` |
|
|
458
|
-
| `theme/overlay/400` | `--xz-color-overlay-400` |
|
|
459
|
-
| `theme/overlay/500` | `--xz-color-overlay-500` |
|
|
460
|
-
| `theme/overlay/600` | `--xz-color-overlay-600` |
|
|
461
|
-
| `theme/overlay/700` | `--xz-color-overlay-700` |
|
|
462
|
-
| `theme/overlay/800` | `--xz-color-overlay-800` |
|
|
463
|
-
| `theme/overlay/900` | `--xz-color-overlay-900` |
|
|
464
|
-
| `theme/overlay/1000` | `--xz-color-overlay-1000` |
|
|
465
|
-
|
|
466
|
-
#### Palette (8 variables)
|
|
467
|
-
|
|
468
|
-
| Figma Variable | CSS Variable |
|
|
469
|
-
|---|---|
|
|
470
|
-
| `palette/fastwork` | `--xz-color-fastwork` |
|
|
471
|
-
| `palette/gray` | `--xz-color-gray` |
|
|
472
|
-
| `palette/green` | `--xz-color-green` |
|
|
473
|
-
| `palette/yellow` | `--xz-color-yellow` |
|
|
474
|
-
| `palette/red` | `--xz-color-red` |
|
|
475
|
-
| `palette/orange` | `--xz-color-orange` |
|
|
476
|
-
| `palette/purple` | `--xz-color-purple` |
|
|
477
|
-
| `palette/cyan` | `--xz-color-cyan` |
|
|
478
|
-
|
|
479
|
-
### How to Use Figma Variables in Designs
|
|
480
|
-
|
|
481
|
-
1. Select a layer in Figma (frame, text, shape, etc.)
|
|
482
|
-
2. In the Fill or Stroke panel, click the color swatch
|
|
483
|
-
3. Switch to the **Variables** tab in the color picker
|
|
484
|
-
4. Pick from the `colors` collection
|
|
485
|
-
|
|
486
|
-
**Rules for Figma:**
|
|
487
|
-
- Always use `theme/*` variables for component fills, text colors, and stroke colors
|
|
488
|
-
- Use `palette/*` variables only as references — not directly on components
|
|
489
|
-
- Use `theme/base/surface/100` for page backgrounds, `theme/base/surface/200` for cards
|
|
490
|
-
- Use `theme/{name}/bg/100` for solid-filled elements and `theme/{name}/fg/100` for text on top of them
|
|
491
|
-
- Switch between Light/Dark previews using the **Mode** toggle on the variable collection
|
|
492
|
-
|
|
493
|
-
### Keeping Figma in Sync with Code
|
|
494
|
-
|
|
495
|
-
Variables are synced from the npm package via the **XOSMOZ Theme Sync** plugin:
|
|
496
|
-
|
|
497
|
-
1. Open **Plugins → Development → XOSMOZ Theme Sync** in Figma
|
|
498
|
-
2. Select your variable collection from the dropdown
|
|
499
|
-
3. Click **"Check for Updates"** to see if any colors changed
|
|
500
|
-
4. Click **"Update Variables"** to apply changes to both Light and Dark modes at once
|
|
501
|
-
|
|
502
|
-
If starting a new Figma file, use **"Create New Collection"** to generate all variables from scratch.
|