@fastwork/xosmoz-theme 0.72.4 → 0.72.5
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/dist/figma-plugin.zip +0 -0
- package/dist/llms.txt +39 -1
- package/package.json +1 -1
package/dist/figma-plugin.zip
CHANGED
|
Binary file
|
package/dist/llms.txt
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
## Core Rules
|
|
8
8
|
|
|
9
|
-
1. **Never use palette tokens** (`--xz-color-fastwork`, `--xz-color-gray`, etc.) directly in UI. Always use semantic tokens.
|
|
9
|
+
1. **Never use palette tokens** (`--xz-color-fastwork`, `--xz-color-gray`, etc.) directly in UI. Always use semantic tokens. Exception: `--xz-color-fastwork-star` and `--xz-color-fastwork-milestone` are special-purpose tokens meant for direct use (star ratings, milestone badges).
|
|
10
10
|
2. **Pair `bg-100` / `bg-200` with `text-fg`** for readable text on solid-color backgrounds.
|
|
11
11
|
3. **`text-100` vs `text-200`**: Use `text-100` (lighter) for colored text on surface backgrounds (links, messages, ghost buttons). Use `text-200` (darker) for text on soft/tinted backgrounds (soft buttons, soft badges) — the darker tone provides contrast against the tinted fill.
|
|
12
12
|
4. **`soft-*` vs `soft-solid-*`**: Use `soft-100` (transparent) when the element sits on the page background. Use `soft-solid-100` (opaque) when it sits on a card or modal (`surface-200`+) to prevent the tint from showing the underlying surface color bleeding through.
|
|
@@ -14,6 +14,17 @@
|
|
|
14
14
|
|
|
15
15
|
---
|
|
16
16
|
|
|
17
|
+
## Special-Purpose Palette Tokens
|
|
18
|
+
|
|
19
|
+
These palette tokens are meant for direct use (unlike the 8 base palette colors which should only be used through semantic tokens).
|
|
20
|
+
|
|
21
|
+
| Token | Purpose | Use for |
|
|
22
|
+
|---|---|---|
|
|
23
|
+
| `--xz-color-fastwork-star` | Star/rating color | Star rating icons, review stars, favorite indicators |
|
|
24
|
+
| `--xz-color-fastwork-milestone` | Milestone/achievement color | Milestone badges, achievement indicators, progress markers |
|
|
25
|
+
|
|
26
|
+
---
|
|
27
|
+
|
|
17
28
|
## Base Tokens
|
|
18
29
|
|
|
19
30
|
### Surfaces
|
|
@@ -468,6 +479,33 @@ Utility tokens with a 100–1000 scale (10%–100% opacity).
|
|
|
468
479
|
|
|
469
480
|
---
|
|
470
481
|
|
|
482
|
+
## Gradient Tokens
|
|
483
|
+
|
|
484
|
+
Direction-agnostic gradient color stops. The CSS variable stores only the color stops — the consumer chooses the direction (`linear-gradient`, `radial-gradient`, angle, etc.).
|
|
485
|
+
|
|
486
|
+
| Token | Light stops | Dark stops |
|
|
487
|
+
|---|---|---|
|
|
488
|
+
| `--xz-color-grad-arctic-breeze` | `#c0d8ff, #f6f3f8, #ffffff` | `#1a3a5c, #2a2535, #1e1e2e` |
|
|
489
|
+
| `--xz-color-grad-coral-reef` | `#84b5ff, #0569ff, #ae8eff, #ffcca5` | `#2a4a7a, #0340a0, #5a3fa0, #a06830` |
|
|
490
|
+
|
|
491
|
+
### Usage
|
|
492
|
+
|
|
493
|
+
Apply direction at the usage site:
|
|
494
|
+
```css
|
|
495
|
+
/* Linear gradient */
|
|
496
|
+
background: linear-gradient(to right, var(--xz-color-grad-arctic-breeze));
|
|
497
|
+
|
|
498
|
+
/* Custom angle */
|
|
499
|
+
background: linear-gradient(135deg, var(--xz-color-grad-coral-reef));
|
|
500
|
+
|
|
501
|
+
/* Radial */
|
|
502
|
+
background: radial-gradient(var(--xz-color-grad-arctic-breeze));
|
|
503
|
+
```
|
|
504
|
+
|
|
505
|
+
**Rule**: Never hardcode gradient colors directly. Use the token so gradients auto-switch between light and dark themes.
|
|
506
|
+
|
|
507
|
+
---
|
|
508
|
+
|
|
471
509
|
## Typography Tokens
|
|
472
510
|
|
|
473
511
|
Typography tokens are defined in `base.css` (not theme files). They do not change between light and dark themes. All font shorthand tokens are automatically responsive — at `max-width: 768px` they scale down via a media query. No extra breakpoint code needed.
|