@westayltd/design-tokens 0.3.7 → 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 +37 -123
- 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,144 +8,58 @@ Design token system for Westay applications — colors, spacing, typography, and
|
|
|
8
8
|
npm install @westayltd/design-tokens
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
-
##
|
|
12
|
-
|
|
13
|
-
After installing a new version, regenerate the Tailwind CSS variables:
|
|
14
|
-
|
|
15
|
-
```bash
|
|
16
|
-
npm run generate:tokens
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
This reads `design-tokens/colors.json` and outputs `src/app/design-tokens.css`.
|
|
20
|
-
|
|
21
|
-
---
|
|
22
|
-
|
|
23
|
-
## Token Structure
|
|
24
|
-
|
|
25
|
-
### Colors
|
|
26
|
-
|
|
27
|
-
Flat color palette — no light/dark nesting:
|
|
28
|
-
|
|
29
|
-
```typescript
|
|
30
|
-
import { tokens } from '@westayltd/design-tokens';
|
|
31
|
-
|
|
32
|
-
tokens.colors.primary[400] // "#BDBEC2" — Surface-Dark
|
|
33
|
-
tokens.colors.primary[300] // "#D1D2DB" — Surface-Medium
|
|
34
|
-
tokens.colors.primary[200] // "#F9F9FD" — Surface-Soft
|
|
35
|
-
tokens.colors.primary[150] // "#FBFBFE" — Surface-Softer
|
|
36
|
-
tokens.colors.primary[50] // "#FFFFFF" — Page Background
|
|
37
|
-
|
|
38
|
-
tokens.colors.secondary[500] // Brand red
|
|
39
|
-
tokens.colors.accent[500] // Warm gold
|
|
40
|
-
tokens.colors.positive[500] // Success green
|
|
41
|
-
tokens.colors.negative[500] // Error red
|
|
42
|
-
tokens.colors.warning[500] // Amber
|
|
43
|
-
tokens.colors.link[500] // Blue
|
|
44
|
-
tokens.colors.loyalty[500] // Purple
|
|
45
|
-
tokens.colors.rating[500] // Star gold
|
|
46
|
-
```
|
|
47
|
-
|
|
48
|
-
### Available Color Scales
|
|
11
|
+
## Available Tokens
|
|
49
12
|
|
|
50
|
-
|
|
|
13
|
+
| Token group | Import path | Description |
|
|
51
14
|
|---|---|---|
|
|
52
|
-
| `
|
|
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 |
|
|
53
29
|
| `secondary` | 100–950 | Brand red |
|
|
54
30
|
| `accent` | 50–800 | Warm gold |
|
|
55
|
-
| `negative` | 100–800 | Error
|
|
56
|
-
| `positive` | 100–800 | Success |
|
|
57
|
-
| `warning` | 100–800 |
|
|
58
|
-
| `
|
|
59
|
-
| `
|
|
60
|
-
| `
|
|
61
|
-
| `
|
|
62
|
-
| `
|
|
63
|
-
| `
|
|
64
|
-
| `background` | DEFAULT / dark / frosted / frostedDark | Background colors |
|
|
65
|
-
|
|
66
|
-
### Surface Color Mapping
|
|
67
|
-
|
|
68
|
-
Surfaces use `primary` shades:
|
|
69
|
-
|
|
70
|
-
| Surface | Token | Value |
|
|
71
|
-
|---|---|---|
|
|
72
|
-
| Surface-Dark | `primary-400` | `#BDBEC2` |
|
|
73
|
-
| Surface-Medium | `primary-300` | `#D1D2DB` |
|
|
74
|
-
| Surface-Soft | `primary-200` | `#F9F9FD` |
|
|
75
|
-
| Surface-Softer | `primary-150` | `#FBFBFE` |
|
|
76
|
-
| Page-Background | `primary-50` | `#FFFFFF` |
|
|
77
|
-
|
|
78
|
-
### Spacing
|
|
79
|
-
|
|
80
|
-
Scale from 0 to 24:
|
|
81
|
-
|
|
82
|
-
```typescript
|
|
83
|
-
tokens.spacing[1] // "4px"
|
|
84
|
-
tokens.spacing[2] // "8px"
|
|
85
|
-
tokens.spacing[3] // "12px"
|
|
86
|
-
tokens.spacing[4] // "16px"
|
|
87
|
-
tokens.spacing[5] // "20px"
|
|
88
|
-
tokens.spacing[6] // "24px"
|
|
89
|
-
tokens.spacing[8] // "32px"
|
|
90
|
-
tokens.spacing[10] // "40px"
|
|
91
|
-
tokens.spacing[12] // "48px"
|
|
92
|
-
tokens.spacing[16] // "64px"
|
|
93
|
-
tokens.spacing[20] // "80px"
|
|
94
|
-
tokens.spacing[24] // "96px"
|
|
95
|
-
```
|
|
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) |
|
|
96
40
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
```typescript
|
|
100
|
-
tokens.typography.fontSize.xs // "12px"
|
|
101
|
-
tokens.typography.fontSize.sm // "14px"
|
|
102
|
-
tokens.typography.fontSize.base // "16px"
|
|
103
|
-
tokens.typography.fontSize.lg // "18px"
|
|
104
|
-
tokens.typography.fontSize.xl // "20px"
|
|
105
|
-
```
|
|
106
|
-
|
|
107
|
-
### Border Radius
|
|
108
|
-
|
|
109
|
-
```typescript
|
|
110
|
-
tokens.radius.xs // "4px"
|
|
111
|
-
tokens.radius.sm // "8px"
|
|
112
|
-
tokens.radius.md // "12px"
|
|
113
|
-
tokens.radius.lg // "16px"
|
|
114
|
-
tokens.radius.xl // "20px"
|
|
115
|
-
tokens.radius['2xl'] // "24px"
|
|
116
|
-
tokens.radius['3xl'] // "28px"
|
|
117
|
-
tokens.radius['4xl'] // "32px"
|
|
118
|
-
tokens.radius['5xl'] // "48px"
|
|
119
|
-
tokens.radius.full // "9999px"
|
|
120
|
-
```
|
|
121
|
-
|
|
122
|
-
---
|
|
41
|
+
## Usage in Frontend (westay-b2c-fe-web)
|
|
123
42
|
|
|
124
|
-
|
|
43
|
+
In `tailwind.config.ts`, import from the package:
|
|
125
44
|
|
|
126
|
-
```
|
|
45
|
+
```ts
|
|
127
46
|
import { tokens } from "@westayltd/design-tokens";
|
|
128
|
-
|
|
129
47
|
const { spacing, typography, radius } = tokens;
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
After installing a new version, regenerate the Tailwind CSS variables:
|
|
130
51
|
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
extend: {
|
|
134
|
-
colors: tokens.colors,
|
|
135
|
-
fontFamily: typography.fontFamily,
|
|
136
|
-
fontSize: typography.fontSize,
|
|
137
|
-
spacing,
|
|
138
|
-
borderRadius: radius,
|
|
139
|
-
}
|
|
140
|
-
}
|
|
141
|
-
}
|
|
52
|
+
```bash
|
|
53
|
+
npm run generate:tokens
|
|
142
54
|
```
|
|
143
55
|
|
|
56
|
+
This reads `design-tokens/colors.json` and outputs `src/app/design-tokens.css`.
|
|
57
|
+
|
|
144
58
|
---
|
|
145
59
|
|
|
146
60
|
## Version
|
|
147
61
|
|
|
148
|
-
Current version: **0.3.
|
|
62
|
+
Current version: **0.3.9**
|
|
149
63
|
|
|
150
64
|
## License
|
|
151
65
|
|