@westayltd/design-tokens 0.3.7 → 0.3.8
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 +0 -123
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -20,129 +20,6 @@ This reads `design-tokens/colors.json` and outputs `src/app/design-tokens.css`.
|
|
|
20
20
|
|
|
21
21
|
---
|
|
22
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
|
|
49
|
-
|
|
50
|
-
| Scale | Range | Use |
|
|
51
|
-
|---|---|---|
|
|
52
|
-
| `primary` | 50–1300 | Grey/black scale, surfaces |
|
|
53
|
-
| `secondary` | 100–950 | Brand red |
|
|
54
|
-
| `accent` | 50–800 | Warm gold |
|
|
55
|
-
| `negative` | 100–800 | Error/destructive |
|
|
56
|
-
| `positive` | 100–800 | Success |
|
|
57
|
-
| `warning` | 100–800 | Amber/caution |
|
|
58
|
-
| `link` | 50–800 | Blue/info |
|
|
59
|
-
| `loyalty` | 50–900 | Purple |
|
|
60
|
-
| `rating` | 100–800 | Star gold |
|
|
61
|
-
| `borderColor` | DEFAULT / dark | `#E5E5E5` / `#4D4D4D` |
|
|
62
|
-
| `transparency` | black / white | rgba transparency scale |
|
|
63
|
-
| `text` | title / body / secondary / tertiary | Semantic text colors |
|
|
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
|
-
```
|
|
96
|
-
|
|
97
|
-
### Typography
|
|
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
|
-
---
|
|
123
|
-
|
|
124
|
-
## Tailwind Config
|
|
125
|
-
|
|
126
|
-
```typescript
|
|
127
|
-
import { tokens } from "@westayltd/design-tokens";
|
|
128
|
-
|
|
129
|
-
const { spacing, typography, radius } = tokens;
|
|
130
|
-
|
|
131
|
-
const config = {
|
|
132
|
-
theme: {
|
|
133
|
-
extend: {
|
|
134
|
-
colors: tokens.colors,
|
|
135
|
-
fontFamily: typography.fontFamily,
|
|
136
|
-
fontSize: typography.fontSize,
|
|
137
|
-
spacing,
|
|
138
|
-
borderRadius: radius,
|
|
139
|
-
}
|
|
140
|
-
}
|
|
141
|
-
}
|
|
142
|
-
```
|
|
143
|
-
|
|
144
|
-
---
|
|
145
|
-
|
|
146
23
|
## Version
|
|
147
24
|
|
|
148
25
|
Current version: **0.3.7**
|