@westayltd/design-tokens 0.3.2 → 0.3.4

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 (6) hide show
  1. package/README.md +213 -0
  2. package/dist/index.cjs +13 -19
  3. package/dist/index.d.cts +5 -11
  4. package/dist/index.d.ts +5 -11
  5. package/dist/index.js +13 -19
  6. package/package.json +5 -2
package/README.md ADDED
@@ -0,0 +1,213 @@
1
+ # @westayltd/design-tokens
2
+
3
+ A comprehensive design token system for Westay applications, providing consistent colors, spacing, typography, and radius values across the platform.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ npm install @westayltd/design-tokens
9
+ ```
10
+
11
+ ## Usage
12
+
13
+ ### Import All Tokens
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';
34
+ ```
35
+
36
+ ### TypeScript Support
37
+
38
+ The package includes full TypeScript definitions:
39
+
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
49
+
50
+ ### Colors
51
+
52
+ The color system supports both light and dark themes:
53
+
54
+ ```typescript
55
+ import { tokens } from '@westayltd/design-tokens';
56
+
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
70
+ ```
71
+
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
77
+
78
+ ### Spacing
79
+
80
+ Consistent spacing scale from 0 to 12:
81
+
82
+ ```typescript
83
+ tokens.spacing[0] // "0px"
84
+ tokens.spacing[1] // "4px"
85
+ tokens.spacing[2] // "8px"
86
+ tokens.spacing[3] // "12px"
87
+ tokens.spacing[4] // "16px"
88
+ tokens.spacing[5] // "20px"
89
+ tokens.spacing[6] // "24px"
90
+ tokens.spacing[8] // "32px"
91
+ tokens.spacing[10] // "40px"
92
+ tokens.spacing[12] // "48px"
93
+ ```
94
+
95
+ ### Typography
96
+
97
+ Font families, sizes, weights, and line heights:
98
+
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"
122
+ ```
123
+
124
+ ### Radius
125
+
126
+ Border radius values:
127
+
128
+ ```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"
135
+ ```
136
+
137
+ ## Building the Package
138
+
139
+ To build the package from source:
140
+
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:
195
+
196
+ ```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';
205
+ ```
206
+
207
+ ## Version
208
+
209
+ Current version: **0.2.1**
210
+
211
+ ## License
212
+
213
+ MIT
package/dist/index.cjs CHANGED
@@ -115,14 +115,15 @@ var colors_default = {
115
115
  "100": "#F7EEDD"
116
116
  },
117
117
  link: {
118
- "800": "#255965",
119
- "700": "#246B7A",
120
- "600": "#258495",
121
- "500": "#2CAFBE",
122
- "400": "#45C0CB",
123
- "300": "#80D9E0",
124
- "200": "#B4E9ED",
125
- "100": "#D7F4F6"
118
+ "800": "#204CAD",
119
+ "700": "#1F5ED6",
120
+ "600": "#2774E9",
121
+ "500": "#3D92F4",
122
+ "400": "#62B1F8",
123
+ "300": "#94CDFC",
124
+ "200": "#C0E0FD",
125
+ "100": "#DBEDFE",
126
+ "50": "#EFF7FF"
126
127
  },
127
128
  paleSteel: {
128
129
  "800": "#202236",
@@ -134,17 +135,6 @@ var colors_default = {
134
135
  "200": "#E8E8ED",
135
136
  "100": "#F9F9FB"
136
137
  },
137
- label: {
138
- "800": "#204CAD",
139
- "700": "#1F5ED6",
140
- "600": "#2774E9",
141
- "500": "#3D92F4",
142
- "400": "#62B1F8",
143
- "300": "#94CDFC",
144
- "200": "#C0E0FD",
145
- "100": "#DBEDFE",
146
- "50": "#EFF7FF"
147
- },
148
138
  loyalty: {
149
139
  "900": "#482B54",
150
140
  "800": "#5F3672",
@@ -195,6 +185,10 @@ var colors_default = {
195
185
  body: "#4D4D4D",
196
186
  secondary: "#757575",
197
187
  tertiary: "#A9A9A9"
188
+ },
189
+ borderColors: {
190
+ DEFAULT: "#E5E5E5",
191
+ dark: "#4D4D4D"
198
192
  }
199
193
  },
200
194
  dark: {
package/dist/index.d.cts CHANGED
@@ -105,6 +105,7 @@ declare const tokens: {
105
105
  "300": string;
106
106
  "200": string;
107
107
  "100": string;
108
+ "50": string;
108
109
  };
109
110
  paleSteel: {
110
111
  "800": string;
@@ -116,17 +117,6 @@ declare const tokens: {
116
117
  "200": string;
117
118
  "100": string;
118
119
  };
119
- label: {
120
- "800": string;
121
- "700": string;
122
- "600": string;
123
- "500": string;
124
- "400": string;
125
- "300": string;
126
- "200": string;
127
- "100": string;
128
- "50": string;
129
- };
130
120
  loyalty: {
131
121
  "900": string;
132
122
  "800": string;
@@ -178,6 +168,10 @@ declare const tokens: {
178
168
  secondary: string;
179
169
  tertiary: string;
180
170
  };
171
+ borderColors: {
172
+ DEFAULT: string;
173
+ dark: string;
174
+ };
181
175
  };
182
176
  dark: {
183
177
  surface: {
package/dist/index.d.ts CHANGED
@@ -105,6 +105,7 @@ declare const tokens: {
105
105
  "300": string;
106
106
  "200": string;
107
107
  "100": string;
108
+ "50": string;
108
109
  };
109
110
  paleSteel: {
110
111
  "800": string;
@@ -116,17 +117,6 @@ declare const tokens: {
116
117
  "200": string;
117
118
  "100": string;
118
119
  };
119
- label: {
120
- "800": string;
121
- "700": string;
122
- "600": string;
123
- "500": string;
124
- "400": string;
125
- "300": string;
126
- "200": string;
127
- "100": string;
128
- "50": string;
129
- };
130
120
  loyalty: {
131
121
  "900": string;
132
122
  "800": string;
@@ -178,6 +168,10 @@ declare const tokens: {
178
168
  secondary: string;
179
169
  tertiary: string;
180
170
  };
171
+ borderColors: {
172
+ DEFAULT: string;
173
+ dark: string;
174
+ };
181
175
  };
182
176
  dark: {
183
177
  surface: {
package/dist/index.js CHANGED
@@ -89,14 +89,15 @@ var colors_default = {
89
89
  "100": "#F7EEDD"
90
90
  },
91
91
  link: {
92
- "800": "#255965",
93
- "700": "#246B7A",
94
- "600": "#258495",
95
- "500": "#2CAFBE",
96
- "400": "#45C0CB",
97
- "300": "#80D9E0",
98
- "200": "#B4E9ED",
99
- "100": "#D7F4F6"
92
+ "800": "#204CAD",
93
+ "700": "#1F5ED6",
94
+ "600": "#2774E9",
95
+ "500": "#3D92F4",
96
+ "400": "#62B1F8",
97
+ "300": "#94CDFC",
98
+ "200": "#C0E0FD",
99
+ "100": "#DBEDFE",
100
+ "50": "#EFF7FF"
100
101
  },
101
102
  paleSteel: {
102
103
  "800": "#202236",
@@ -108,17 +109,6 @@ var colors_default = {
108
109
  "200": "#E8E8ED",
109
110
  "100": "#F9F9FB"
110
111
  },
111
- label: {
112
- "800": "#204CAD",
113
- "700": "#1F5ED6",
114
- "600": "#2774E9",
115
- "500": "#3D92F4",
116
- "400": "#62B1F8",
117
- "300": "#94CDFC",
118
- "200": "#C0E0FD",
119
- "100": "#DBEDFE",
120
- "50": "#EFF7FF"
121
- },
122
112
  loyalty: {
123
113
  "900": "#482B54",
124
114
  "800": "#5F3672",
@@ -169,6 +159,10 @@ var colors_default = {
169
159
  body: "#4D4D4D",
170
160
  secondary: "#757575",
171
161
  tertiary: "#A9A9A9"
162
+ },
163
+ borderColors: {
164
+ DEFAULT: "#E5E5E5",
165
+ dark: "#4D4D4D"
172
166
  }
173
167
  },
174
168
  dark: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@westayltd/design-tokens",
3
- "version": "0.3.2",
3
+ "version": "0.3.4",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -28,5 +28,8 @@
28
28
  "devDependencies": {
29
29
  "tsup": "^8.3.0",
30
30
  "typescript": "^5.7.0"
31
+ },
32
+ "dependencies": {
33
+ "@westayltd/design-tokens": "^0.3.3"
31
34
  }
32
- }
35
+ }