@westayltd/design-tokens 0.3.5 → 0.3.7

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.
Files changed (7) hide show
  1. package/README.md +92 -153
  2. package/colors.json +10 -21
  3. package/dist/index.cjs +3 -13
  4. package/dist/index.d.cts +0 -10
  5. package/dist/index.d.ts +0 -10
  6. package/dist/index.js +3 -13
  7. package/package.json +2 -2
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @westayltd/design-tokens
2
2
 
3
- A comprehensive design token system for Westay applications, providing consistent colors, spacing, typography, and radius values across the platform.
3
+ Design token system for Westay applications — colors, spacing, typography, and radius.
4
4
 
5
5
  ## Installation
6
6
 
@@ -8,79 +8,78 @@ A comprehensive design token system for Westay applications, providing consisten
8
8
  npm install @westayltd/design-tokens
9
9
  ```
10
10
 
11
- ## Usage
11
+ ## Usage in Frontend (westay-b2c-fe-web)
12
12
 
13
- ### Import All Tokens
13
+ After installing a new version, regenerate the Tailwind CSS variables:
14
14
 
15
- ```typescript
16
- import { tokens } from '@westayltd/design-tokens';
17
-
18
- // Access all tokens
19
- const brandColor = tokens.colors.light.brand.crimson[500];
20
- const spacing = tokens.spacing[4]; // "16px"
21
- const fontSize = tokens.typography.fontSize.base; // "16px"
22
- const borderRadius = tokens.radius.md; // "10px"
23
- ```
24
-
25
- ### Import Individual Token Files
26
-
27
- You can also import individual JSON files directly:
28
-
29
- ```typescript
30
- import colors from '@westayltd/design-tokens/colors';
31
- import spacing from '@westayltd/design-tokens/spacing';
32
- import typography from '@westayltd/design-tokens/typography';
33
- import radius from '@westayltd/design-tokens/radius';
15
+ ```bash
16
+ npm run generate:tokens
34
17
  ```
35
18
 
36
- ### TypeScript Support
19
+ This reads `design-tokens/colors.json` and outputs `src/app/design-tokens.css`.
37
20
 
38
- The package includes full TypeScript definitions:
21
+ ---
39
22
 
40
- ```typescript
41
- import { tokens, ThemeMode, Tokens } from '@westayltd/design-tokens';
42
-
43
- // Type-safe access
44
- const mode: ThemeMode = 'light';
45
- const color: string = tokens.colors[mode].brand.crimson[500];
46
- ```
47
-
48
- ## Available Tokens
23
+ ## Token Structure
49
24
 
50
25
  ### Colors
51
26
 
52
- The color system supports both light and dark themes:
27
+ Flat color palette — no light/dark nesting:
53
28
 
54
29
  ```typescript
55
30
  import { tokens } from '@westayltd/design-tokens';
56
31
 
57
- // Light theme colors
58
- tokens.colors.light.brand.crimson[500] // "#F17878"
59
- tokens.colors.light.brand.burgundy[500] // "#D8A6AE"
60
- tokens.colors.light.brand.royals[500] // "#004484"
61
- tokens.colors.light.brand.oldMoney[500] // "#448E80"
62
- tokens.colors.light.surface.bg // Background colors
63
- tokens.colors.light.text.primary // Text colors
64
- tokens.colors.light.feedback.success // Feedback colors
65
-
66
- // Dark theme colors
67
- tokens.colors.dark.brand.crimson[500]
68
- tokens.colors.dark.surface.bg
69
- tokens.colors.dark.text.primary
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
70
46
  ```
71
47
 
72
- **Color Categories:**
73
- - **Brand**: Crimson, Burgundy, Royals, OldMoney
74
- - **Surface**: Background, subtle, raised, border colors
75
- - **Text**: Primary, secondary, muted, inverse
76
- - **Feedback**: Success, error, warning, info
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
77
 
78
78
  ### Spacing
79
79
 
80
- Consistent spacing scale from 0 to 12:
80
+ Scale from 0 to 24:
81
81
 
82
82
  ```typescript
83
- tokens.spacing[0] // "0px"
84
83
  tokens.spacing[1] // "4px"
85
84
  tokens.spacing[2] // "8px"
86
85
  tokens.spacing[3] // "12px"
@@ -90,123 +89,63 @@ tokens.spacing[6] // "24px"
90
89
  tokens.spacing[8] // "32px"
91
90
  tokens.spacing[10] // "40px"
92
91
  tokens.spacing[12] // "48px"
92
+ tokens.spacing[16] // "64px"
93
+ tokens.spacing[20] // "80px"
94
+ tokens.spacing[24] // "96px"
93
95
  ```
94
96
 
95
97
  ### Typography
96
98
 
97
- Font families, sizes, weights, and line heights:
98
-
99
99
  ```typescript
100
- // Font Family
101
- tokens.typography.fontFamily.sans // ["Helvetica", "Arial", "sans-serif"]
102
-
103
- // Font Sizes
104
- tokens.typography.fontSize.xs // "12px"
105
- tokens.typography.fontSize.sm // "14px"
106
- tokens.typography.fontSize.base // "16px"
107
- tokens.typography.fontSize.lg // "18px"
108
- tokens.typography.fontSize.xl // "20px"
109
- tokens.typography.fontSize['2xl'] // "24px"
110
- tokens.typography.fontSize['3xl'] // "30px"
111
-
112
- // Font Weights
113
- tokens.typography.fontWeight.regular // "400"
114
- tokens.typography.fontWeight.medium // "500"
115
- tokens.typography.fontWeight.semibold // "600"
116
- tokens.typography.fontWeight.bold // "700"
117
-
118
- // Line Heights
119
- tokens.typography.lineHeight.tight // "1.2"
120
- tokens.typography.lineHeight.normal // "1.5"
121
- tokens.typography.lineHeight.relaxed // "1.7"
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"
122
105
  ```
123
106
 
124
- ### Radius
125
-
126
- Border radius values:
107
+ ### Border Radius
127
108
 
128
109
  ```typescript
129
- tokens.radius.none // "0px"
130
- tokens.radius.sm // "6px"
131
- tokens.radius.md // "10px"
132
- tokens.radius.lg // "14px"
133
- tokens.radius.xl // "20px"
134
- tokens.radius.full // "9999px"
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"
135
120
  ```
136
121
 
137
- ## Building the Package
138
-
139
- To build the package from source:
122
+ ---
140
123
 
141
- ```bash
142
- cd design-tokens
143
- npm install
144
- npm run build
145
- ```
146
-
147
- This will:
148
- - Compile TypeScript to both CommonJS and ES Module formats
149
- - Generate TypeScript declaration files (`.d.ts`)
150
- - Generate source maps for debugging
151
- - Output files to the `dist/` directory
152
-
153
- ### Development Mode
154
-
155
- For development with watch mode:
156
-
157
- ```bash
158
- npm run dev
159
- ```
160
-
161
- This will automatically rebuild when source files change.
162
-
163
- ## Package Structure
164
-
165
- ```
166
- design-tokens/
167
- ├── colors.json # Color tokens (light & dark themes)
168
- ├── spacing.json # Spacing scale
169
- ├── typography.json # Typography tokens
170
- ├── radius.json # Border radius tokens
171
- ├── index.ts # Main entry point
172
- ├── tsconfig.json # TypeScript configuration
173
- ├── tsup.config.ts # Build configuration
174
- ├── package.json # Package metadata
175
- └── dist/ # Built output
176
- ├── index.js # ES Module build
177
- ├── index.cjs # CommonJS build
178
- ├── index.d.ts # TypeScript declarations
179
- └── *.map # Source maps
180
- ```
181
-
182
- ## Exports
183
-
184
- The package exports:
185
-
186
- - **Main export**: `@westayltd/design-tokens` - Full tokens object with TypeScript types
187
- - **Colors**: `@westayltd/design-tokens/colors` - Colors JSON file
188
- - **Spacing**: `@westayltd/design-tokens/spacing` - Spacing JSON file
189
- - **Typography**: `@westayltd/design-tokens/typography` - Typography JSON file
190
- - **Radius**: `@westayltd/design-tokens/radius` - Radius JSON file
191
-
192
- ## TypeScript Types
193
-
194
- The package exports the following TypeScript types:
124
+ ## Tailwind Config
195
125
 
196
126
  ```typescript
197
- import type {
198
- ThemeMode, // "light" | "dark"
199
- Tokens, // Complete tokens object type
200
- Colors, // Colors type
201
- Spacing, // Spacing type
202
- Typography, // Typography type
203
- Radius // Radius type
204
- } from '@westayltd/design-tokens';
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
+ }
205
142
  ```
206
143
 
144
+ ---
145
+
207
146
  ## Version
208
147
 
209
- Current version: **0.2.1**
148
+ Current version: **0.3.7**
210
149
 
211
150
  ## License
212
151
 
package/colors.json CHANGED
@@ -16,12 +16,12 @@
16
16
  "700": "#757575",
17
17
  "600": "#919191",
18
18
  "500": "#A9A9A9",
19
- "400": "#C0C0C0",
20
- "300": "#DCDCDC",
21
- "250": "#E5E5E5",
22
- "200": "#F0F0F4",
23
- "150": "#F5F5F9",
24
- "100": "#FAFAFA",
19
+ "400": "#BDBEC2",
20
+ "300": "#D1D2DB",
21
+ "250": "#E5E6EC",
22
+ "200": "#F9F9FD",
23
+ "150": "#FBFBFE",
24
+ "100": "#FCFCFE",
25
25
  "50": "#FFFFFF"
26
26
  },
27
27
  "secondary": {
@@ -98,16 +98,6 @@
98
98
  "100": "#DBEDFE",
99
99
  "50": "#EFF7FF"
100
100
  },
101
- "paleSteel": {
102
- "800": "#202236",
103
- "700": "#383950",
104
- "600": "#4C4E62",
105
- "500": "#6C6C7F",
106
- "400": "#9D9DAE",
107
- "300": "#D1D2DB",
108
- "200": "#E8E8ED",
109
- "100": "#F9F9FB"
110
- },
111
101
  "loyalty": {
112
102
  "900": "#482B54",
113
103
  "800": "#5F3672",
@@ -120,10 +110,10 @@
120
110
  "100": "#F4EEF9",
121
111
  "50": "#FAF7FC"
122
112
  },
123
- "surface-dark": "#9D9DAE",
113
+ "surface-dark": "#BDBEC2",
124
114
  "surface-medium": "#D1D2DB",
125
- "surface-soft": "#F0F0F4",
126
- "surface-softer": "#F0F0F4",
115
+ "surface-soft": "#F9F9FD",
116
+ "surface-softer": "#FBFBFE",
127
117
  "page-background": "#FFFFFF",
128
118
  "transparency": {
129
119
  "black": {
@@ -164,7 +154,6 @@
164
154
  "dark": "#4D4D4D"
165
155
  }
166
156
  },
167
-
168
157
  "dark": {
169
158
  "surface": {
170
159
  "bg": "#0B0B0C",
@@ -177,4 +166,4 @@
177
166
  "muted": "#9CA3AF"
178
167
  }
179
168
  }
180
- }
169
+ }
package/dist/index.cjs CHANGED
@@ -125,16 +125,6 @@ var colors_default = {
125
125
  "100": "#DBEDFE",
126
126
  "50": "#EFF7FF"
127
127
  },
128
- paleSteel: {
129
- "800": "#202236",
130
- "700": "#383950",
131
- "600": "#4C4E62",
132
- "500": "#6C6C7F",
133
- "400": "#9D9DAE",
134
- "300": "#D1D2DB",
135
- "200": "#E8E8ED",
136
- "100": "#F9F9FB"
137
- },
138
128
  loyalty: {
139
129
  "900": "#482B54",
140
130
  "800": "#5F3672",
@@ -147,10 +137,10 @@ var colors_default = {
147
137
  "100": "#F4EEF9",
148
138
  "50": "#FAF7FC"
149
139
  },
150
- "surface-dark": "#9D9DAE",
140
+ "surface-dark": "#BDBEC2",
151
141
  "surface-medium": "#D1D2DB",
152
- "surface-soft": "#F0F0F4",
153
- "surface-softer": "#F0F0F4",
142
+ "surface-soft": "#F9F9FD",
143
+ "surface-softer": "#FBFBFE",
154
144
  "page-background": "#FFFFFF",
155
145
  transparency: {
156
146
  black: {
package/dist/index.d.cts CHANGED
@@ -107,16 +107,6 @@ declare const tokens: {
107
107
  "100": string;
108
108
  "50": string;
109
109
  };
110
- paleSteel: {
111
- "800": string;
112
- "700": string;
113
- "600": string;
114
- "500": string;
115
- "400": string;
116
- "300": string;
117
- "200": string;
118
- "100": string;
119
- };
120
110
  loyalty: {
121
111
  "900": string;
122
112
  "800": string;
package/dist/index.d.ts CHANGED
@@ -107,16 +107,6 @@ declare const tokens: {
107
107
  "100": string;
108
108
  "50": string;
109
109
  };
110
- paleSteel: {
111
- "800": string;
112
- "700": string;
113
- "600": string;
114
- "500": string;
115
- "400": string;
116
- "300": string;
117
- "200": string;
118
- "100": string;
119
- };
120
110
  loyalty: {
121
111
  "900": string;
122
112
  "800": string;
package/dist/index.js CHANGED
@@ -99,16 +99,6 @@ var colors_default = {
99
99
  "100": "#DBEDFE",
100
100
  "50": "#EFF7FF"
101
101
  },
102
- paleSteel: {
103
- "800": "#202236",
104
- "700": "#383950",
105
- "600": "#4C4E62",
106
- "500": "#6C6C7F",
107
- "400": "#9D9DAE",
108
- "300": "#D1D2DB",
109
- "200": "#E8E8ED",
110
- "100": "#F9F9FB"
111
- },
112
102
  loyalty: {
113
103
  "900": "#482B54",
114
104
  "800": "#5F3672",
@@ -121,10 +111,10 @@ var colors_default = {
121
111
  "100": "#F4EEF9",
122
112
  "50": "#FAF7FC"
123
113
  },
124
- "surface-dark": "#9D9DAE",
114
+ "surface-dark": "#BDBEC2",
125
115
  "surface-medium": "#D1D2DB",
126
- "surface-soft": "#F0F0F4",
127
- "surface-softer": "#F0F0F4",
116
+ "surface-soft": "#F9F9FD",
117
+ "surface-softer": "#FBFBFE",
128
118
  "page-background": "#FFFFFF",
129
119
  transparency: {
130
120
  black: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@westayltd/design-tokens",
3
- "version": "0.3.5",
3
+ "version": "0.3.7",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -30,6 +30,6 @@
30
30
  "typescript": "^5.7.0"
31
31
  },
32
32
  "dependencies": {
33
- "@westayltd/design-tokens": "^0.3.3"
33
+ "@westayltd/design-tokens": "^0.3.5"
34
34
  }
35
35
  }