@westayltd/design-tokens 0.3.8 → 0.3.9
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 +39 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @westayltd/design-tokens
|
|
2
2
|
|
|
3
|
-
Design token system for Westay applications — colors, spacing, typography, and
|
|
3
|
+
Design token system for Westay applications — colors, spacing, typography, radius, shadows, and grid.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
@@ -8,8 +8,45 @@ Design token system for Westay applications — colors, spacing, typography, and
|
|
|
8
8
|
npm install @westayltd/design-tokens
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
+
## Available Tokens
|
|
12
|
+
|
|
13
|
+
| Token group | Import path | Description |
|
|
14
|
+
|---|---|---|
|
|
15
|
+
| `tokens` | `@westayltd/design-tokens` | All tokens (colors, typography, spacing, radius) |
|
|
16
|
+
| `colors` | `@westayltd/design-tokens/colors` | Color palette JSON |
|
|
17
|
+
| `spacing` | `@westayltd/design-tokens/spacing` | Spacing scale JSON |
|
|
18
|
+
| `typography` | `@westayltd/design-tokens/typography` | Font sizes, weights, families |
|
|
19
|
+
| `radius` | `@westayltd/design-tokens/radius` | Border radius scale |
|
|
20
|
+
| `shadows` | `@westayltd/design-tokens/shadows` | Shadow definitions |
|
|
21
|
+
| `grid` | `@westayltd/design-tokens/grid` | Grid breakpoints and columns |
|
|
22
|
+
| `iconSizes` | `@westayltd/design-tokens/iconSizes` | Icon size scale |
|
|
23
|
+
|
|
24
|
+
## Color Scales
|
|
25
|
+
|
|
26
|
+
| Scale | Range | Usage |
|
|
27
|
+
|---|---|---|
|
|
28
|
+
| `primary` | 50–1300 | Grey/black scale, surfaces, text |
|
|
29
|
+
| `secondary` | 100–950 | Brand red |
|
|
30
|
+
| `accent` | 50–800 | Warm gold |
|
|
31
|
+
| `negative` | 100–800 | Error states |
|
|
32
|
+
| `positive` | 100–800 | Success states |
|
|
33
|
+
| `warning` | 100–800 | Warning states |
|
|
34
|
+
| `rating` | 100–800 | Star ratings |
|
|
35
|
+
| `link` | 50–800 | Links, info |
|
|
36
|
+
| `loyalty` | 50–900 | Loyalty/purple |
|
|
37
|
+
| `transparency` | black/white | Opacity overlays |
|
|
38
|
+
| `text` | title/body/secondary/tertiary | Semantic text colors |
|
|
39
|
+
| `borderColor` | — | Standard border (#E5E5E5) |
|
|
40
|
+
|
|
11
41
|
## Usage in Frontend (westay-b2c-fe-web)
|
|
12
42
|
|
|
43
|
+
In `tailwind.config.ts`, import from the package:
|
|
44
|
+
|
|
45
|
+
```ts
|
|
46
|
+
import { tokens } from "@westayltd/design-tokens";
|
|
47
|
+
const { spacing, typography, radius } = tokens;
|
|
48
|
+
```
|
|
49
|
+
|
|
13
50
|
After installing a new version, regenerate the Tailwind CSS variables:
|
|
14
51
|
|
|
15
52
|
```bash
|
|
@@ -22,7 +59,7 @@ This reads `design-tokens/colors.json` and outputs `src/app/design-tokens.css`.
|
|
|
22
59
|
|
|
23
60
|
## Version
|
|
24
61
|
|
|
25
|
-
Current version: **0.3.
|
|
62
|
+
Current version: **0.3.9**
|
|
26
63
|
|
|
27
64
|
## License
|
|
28
65
|
|