@westayltd/design-tokens 0.2.2 → 0.3.0

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 (12) hide show
  1. package/colors.json +165 -169
  2. package/dist/index.cjs +332 -171
  3. package/dist/index.d.cts +512 -176
  4. package/dist/index.d.ts +512 -176
  5. package/dist/index.js +332 -171
  6. package/grid.json +16 -0
  7. package/iconSizes.json +18 -0
  8. package/package.json +5 -2
  9. package/radius.json +8 -3
  10. package/shadows.json +28 -0
  11. package/spacing.json +17 -1
  12. package/typography.json +43 -2
package/dist/index.cjs CHANGED
@@ -26,166 +26,181 @@ module.exports = __toCommonJS(index_exports);
26
26
 
27
27
  // colors.json
28
28
  var colors_default = {
29
- light: {
30
- brand: {
31
- crimson: {
32
- "800": "#BB2F2A",
33
- "700": "#EA3B34",
34
- "600": "#EE5656",
35
- "500": "#F17878",
36
- "400": "#F59A9A",
37
- "300": "#FDECEC",
38
- "200": "#FCDDDD",
39
- "100": "#FDEEEE",
40
- transparent: {
41
- "800": "rgba(187, 47, 42, 0.1)",
42
- "700": "rgba(234, 59, 52, 0.1)",
43
- "600": "rgba(238, 86, 86, 0.1)",
44
- "500": "rgba(241, 120, 120, 0.1)",
45
- "400": "rgba(245, 154, 154, 0.1)",
46
- "300": "rgba(253, 236, 236, 0.1)",
47
- "200": "rgba(252, 221, 221, 0.1)",
48
- "100": "rgba(253, 238, 238, 0.1)"
49
- }
50
- },
51
- burgundy: {
52
- "800": "#A12C3D",
53
- "700": "#B35563",
54
- "600": "#C67E88",
55
- "500": "#D8A6AE",
56
- "400": "#E1BBC1",
57
- "300": "#EBCFD3",
58
- "200": "#F4E4E6",
59
- "100": "#FDF8F9"
60
- },
61
- royals: {
62
- "800": "#0A223A",
63
- "700": "#06315C",
64
- "600": "#013C76",
65
- "500": "#004484",
66
- "400": "#0054A4",
67
- "300": "#005FBA",
68
- "200": "#0071DF",
69
- "100": "#46A2FF"
70
- },
71
- oldMoney: {
72
- "800": "#1E423D",
73
- "700": "#285952",
74
- "600": "#2E7569",
75
- "500": "#448E80",
76
- "400": "#6CADA1",
77
- "300": "#A5D6CD",
78
- "200": "#C5FBF1",
79
- "100": "#DDFFF9"
80
- },
81
- driftwood: {
82
- "800": "#A47C46",
83
- "700": "#C2914E",
84
- "600": "#DEAA62",
85
- "500": "#DFB67F",
86
- "400": "#FDCF93",
87
- "300": "#FFD9A6",
88
- "200": "#FFE6C3",
89
- "100": "#FFEFDA"
90
- },
91
- oceanic: {
92
- "800": "#01D1C1",
93
- "700": "#1AD8C9",
94
- "600": "#37EDDF",
95
- "500": "#61FFF3",
96
- "400": "#93FFF7",
97
- "300": "#BEFFFA",
98
- "200": "#DBFFFC",
99
- "100": "#EFFFFE"
100
- }
29
+ colors: {
30
+ background: {
31
+ DEFAULT: "#FFFFFF",
32
+ dark: "#161616",
33
+ frosted: "rgba(255, 255, 255, 0.95)",
34
+ frostedDark: "rgba(22, 22, 22, 0.95)"
101
35
  },
102
- neutral: {
103
- monochrome: {
104
- "800": "#000000",
105
- "700": "#161616",
106
- "600": "#1C1C1C",
107
- "500": "#262626",
108
- "400": "#353434",
109
- "300": "#4B4A4A",
110
- "200": "#686868",
111
- "100": "#919191",
112
- transparent: {
113
- "800": "rgba(0, 0, 0, 0.1)",
114
- "700": "rgba(22, 22, 22, 0.1)",
115
- "600": "rgba(28, 28, 28, 0.1)",
116
- "500": "rgba(38, 38, 38, 0.1)",
117
- "400": "rgba(53, 52, 52, 0.1)",
118
- "300": "rgba(75, 74, 74, 0.1)",
119
- "200": "rgba(104, 104, 104, 0.1)",
120
- "100": "rgba(145, 145, 145, 0.1)"
121
- }
122
- },
123
- greyscale: {
124
- "800": "#CCCCCC",
125
- "700": "#D6D6D6",
126
- "600": "#E0E0E0",
127
- "500": "#EBEBEB",
128
- "400": "#EFEFF3",
129
- "300": "#EFEFF3",
130
- "200": "#FAFAFC",
131
- "100": "#FFFFFF",
132
- transparent: {
133
- "800": "rgba(204, 204, 204, 0.1)",
134
- "700": "rgba(214, 214, 214, 0.1)",
135
- "600": "rgba(224, 224, 224, 0.1)",
136
- "500": "rgba(235, 235, 235, 0.1)",
137
- "400": "rgba(239, 239, 243, 0.1)",
138
- "300": "rgba(239, 239, 243, 0.1)",
139
- "200": "rgba(250, 250, 252, 0.1)",
140
- "100": "rgba(255, 255, 255, 0.1)"
141
- }
142
- }
36
+ primary: {
37
+ "1300": "#121212",
38
+ "1200": "#1A1A1A",
39
+ "1100": "#292929",
40
+ "1000": "#3A3A3A",
41
+ "900": "#4D4D4D",
42
+ "800": "#636363",
43
+ "700": "#757575",
44
+ "600": "#909090",
45
+ "500": "#A9A9A9",
46
+ "400": "#C0C0C0",
47
+ "300": "#DCDCDC",
48
+ "250": "#E5E5E5",
49
+ "200": "#F0F0F4",
50
+ "150": "#F5F5F9",
51
+ "100": "#FAFAFA",
52
+ "50": "#FFFFFF"
143
53
  },
144
- feedback: {
145
- success: {
146
- "800": "#0F5132",
147
- "700": "#146C43",
148
- "600": "#198754",
149
- "500": "#28A745",
150
- "400": "#5CB85C",
151
- "300": "#8FD19E",
152
- "200": "#C7E9D5",
153
- "100": "#E9F7EF"
154
- },
155
- error: {
156
- "800": "#7E1C1C",
157
- "700": "#9C2F2F",
158
- "600": "#C24040",
159
- "500": "#D96363",
160
- "400": "#E99696",
161
- "300": "#F2BDBD",
162
- "200": "#F9DADA",
163
- "100": "#FDF2F2"
54
+ secondary: {
55
+ "950": "#450A0E",
56
+ "900": "#7E1E24",
57
+ "800": "#981C24",
58
+ "700": "#B81D27",
59
+ "600": "#DB2733",
60
+ "500": "#EE444F",
61
+ "400": "#F7727B",
62
+ "300": "#FCA5AB",
63
+ "200": "#FECACD",
64
+ "100": "#FEE2E4"
65
+ },
66
+ accent: {
67
+ "800": "#633F30",
68
+ "700": "#754B33",
69
+ "600": "#92623C",
70
+ "500": "#AA7C48",
71
+ "400": "#BD9560",
72
+ "300": "#C9AB7B",
73
+ "200": "#DDCCAB",
74
+ "100": "#EDE5D4",
75
+ "50": "#F8F5EE"
76
+ },
77
+ negative: {
78
+ "800": "#7E1C1C",
79
+ "700": "#9C2F2F",
80
+ "600": "#C24040",
81
+ "500": "#D96363",
82
+ "400": "#E99696",
83
+ "300": "#F2BDBD",
84
+ "200": "#F9DADA",
85
+ "100": "#FDF2F2"
86
+ },
87
+ positive: {
88
+ "800": "#0F5132",
89
+ "700": "#146C43",
90
+ "600": "#198754",
91
+ "500": "#28A745",
92
+ "400": "#5CB85C",
93
+ "300": "#8FD19E",
94
+ "200": "#C7E9D5",
95
+ "100": "#E9F7EF"
96
+ },
97
+ warning: {
98
+ "800": "#985108",
99
+ "700": "#BB6902",
100
+ "600": "#E29400",
101
+ "500": "#FFC107",
102
+ "400": "#FFDF1B",
103
+ "300": "#FFEE46",
104
+ "200": "#FFF885",
105
+ "100": "#FFFBC5"
106
+ },
107
+ rating: {
108
+ "800": "#80462C",
109
+ "700": "#9F572F",
110
+ "600": "#C06E36",
111
+ "500": "#CE8441",
112
+ "400": "#D69D61",
113
+ "300": "#DFB67F",
114
+ "200": "#EED9BA",
115
+ "100": "#F7EEDD"
116
+ },
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"
126
+ },
127
+ paleSteel: {
128
+ "800": "#202236",
129
+ "700": "#383950",
130
+ "600": "#4C4E62",
131
+ "500": "#6C6C7F",
132
+ "400": "#9D9DAE",
133
+ "300": "#D1D2DB",
134
+ "200": "#E8E8ED",
135
+ "100": "#F9F9FB"
136
+ },
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
+ loyalty: {
149
+ "900": "#482B54",
150
+ "800": "#5F3672",
151
+ "700": "#72408B",
152
+ "600": "#8A51A8",
153
+ "500": "#A670C5",
154
+ "400": "#C299D9",
155
+ "300": "#D8BFE8",
156
+ "200": "#E8DBF3",
157
+ "100": "#F4EEF9",
158
+ "50": "#FAF7FC"
159
+ },
160
+ "surface-dark": "#9D9DAE",
161
+ "surface-medium": "#D1D2DB",
162
+ "surface-soft": "#F0F0F4",
163
+ "surface-softer": "#F0F0F4",
164
+ "page-background": "#FFFFFF",
165
+ transparency: {
166
+ black: {
167
+ "90": "rgba(26, 26, 26, 0.90)",
168
+ "80": "rgba(26, 26, 26, 0.80)",
169
+ "65": "rgba(26, 26, 26, 0.65)",
170
+ "50": "rgba(26, 26, 26, 0.50)",
171
+ "35": "rgba(26, 26, 26, 0.35)",
172
+ "25": "rgba(26, 26, 26, 0.25)",
173
+ "20": "rgba(26, 26, 26, 0.20)",
174
+ "15": "rgba(26, 26, 26, 0.15)",
175
+ "10": "rgba(26, 26, 26, 0.10)",
176
+ "5": "rgba(26, 26, 26, 0.05)",
177
+ "1": "rgba(26, 26, 26, 0.01)"
164
178
  },
165
- warning: {
166
- "800": "#664D03",
167
- "700": "#D29604",
168
- "600": "#FFC107",
169
- "500": "#F9B12D",
170
- "400": "#FFE58F",
171
- "300": "#FFF3CD",
172
- "200": "#FFF9DADA",
173
- "100": "#FDF2F2"
179
+ white: {
180
+ "90": "rgba(255, 255, 255, 0.90)",
181
+ "80": "rgba(255, 255, 255, 0.80)",
182
+ "65": "rgba(255, 255, 255, 0.65)",
183
+ "50": "rgba(255, 255, 255, 0.50)",
184
+ "35": "rgba(255, 255, 255, 0.35)",
185
+ "25": "rgba(255, 255, 255, 0.25)",
186
+ "20": "rgba(255, 255, 255, 0.20)",
187
+ "15": "rgba(255, 255, 255, 0.15)",
188
+ "10": "rgba(255, 255, 255, 0.10)",
189
+ "5": "rgba(255, 255, 255, 0.05)",
190
+ "1": "rgba(255, 255, 255, 0.01)"
174
191
  }
175
192
  },
176
- gradient: {
177
- membership: {
178
- access: ["#1A237E", "#3949AB"],
179
- elite: ["#4E342E", "#8D6E63"],
180
- prestige: ["#C9A23F", "#F5E082"],
181
- prive: ["#212121", "#000000"]
182
- }
193
+ text: {
194
+ title: "#1A1A1A",
195
+ body: "#4D4D4D",
196
+ secondary: "#757575",
197
+ tertiary: "#A9A9A9"
183
198
  }
184
199
  },
185
200
  dark: {
186
201
  surface: {
187
202
  bg: "#0B0B0C",
188
- raised: "#161618",
203
+ raised: "#161616",
189
204
  border: "#2E2E33"
190
205
  },
191
206
  text: {
@@ -193,18 +208,6 @@ var colors_default = {
193
208
  secondary: "#D1D5DB",
194
209
  muted: "#9CA3AF"
195
210
  }
196
- },
197
- text: {
198
- body: {
199
- "800": "#000000",
200
- "700": "#161616",
201
- "600": "#333333",
202
- "500": "#4D4D4D",
203
- "400": "#666666",
204
- "300": "#808080",
205
- "200": "#B3B3B3",
206
- "100": "#FFFFFF"
207
- }
208
211
  }
209
212
  };
210
213
 
@@ -212,29 +215,55 @@ var colors_default = {
212
215
  var spacing_default = {
213
216
  "0": "0px",
214
217
  "1": "4px",
218
+ "1.5": "6px",
215
219
  "2": "8px",
216
220
  "3": "12px",
217
221
  "4": "16px",
218
222
  "5": "20px",
219
223
  "6": "24px",
224
+ "7": "28px",
220
225
  "8": "32px",
226
+ "9": "36px",
221
227
  "10": "40px",
222
- "12": "48px"
228
+ "11": "44px",
229
+ "12": "48px",
230
+ "13": "52px",
231
+ "14": "56px",
232
+ "15": "60px",
233
+ "16": "64px",
234
+ "17": "68px",
235
+ "18": "72px",
236
+ "19": "76px",
237
+ "20": "80px",
238
+ "21": "84px",
239
+ "22": "88px",
240
+ "23": "92px",
241
+ "24": "96px"
223
242
  };
224
243
 
225
244
  // typography.json
226
245
  var typography_default = {
227
246
  fontFamily: {
228
- sans: ["Helvetica", "Arial", "sans-serif"]
247
+ sans: ["Inter", "Helvetica", "Arial", "sans-serif"],
248
+ serif: ["Bodoni Moda", "Georgia", "serif"]
229
249
  },
230
250
  fontSize: {
251
+ "3xs": "9px",
252
+ "2xs": "10px",
253
+ "xs-alt": "11px",
231
254
  xs: "12px",
255
+ "13": "13px",
232
256
  sm: "14px",
233
257
  base: "16px",
234
258
  lg: "18px",
235
259
  xl: "20px",
260
+ xxl: "22px",
236
261
  "2xl": "24px",
237
- "3xl": "30px"
262
+ "2xl-alt": "28px",
263
+ "3xl": "30px",
264
+ "3xl-alt": "32px",
265
+ "4xl": "36px",
266
+ "5xl": "48px"
238
267
  },
239
268
  fontWeight: {
240
269
  regular: "400",
@@ -246,28 +275,160 @@ var typography_default = {
246
275
  tight: "1.2",
247
276
  normal: "1.5",
248
277
  relaxed: "1.7"
278
+ },
279
+ textStyles: {
280
+ desktop: {
281
+ h1: { fontFamily: "sans", fontWeight: "600", fontSize: "36px", lineHeight: "48px" },
282
+ h2: { fontFamily: "sans", fontWeight: "600", fontSize: "30px", lineHeight: "40px" },
283
+ h3: { fontFamily: "sans", fontWeight: "500", fontSize: "24px", lineHeight: "32px" },
284
+ headingLg: { fontFamily: "sans", fontWeight: "600", fontSize: "32px", lineHeight: "40px" },
285
+ headingMd: { fontFamily: "sans", fontWeight: "600", fontSize: "28px", lineHeight: "36px" },
286
+ headingSm: { fontFamily: "sans", fontWeight: "600", fontSize: "22px", lineHeight: "30px" },
287
+ body: { fontFamily: "sans", fontWeight: "400", fontSize: "18px", lineHeight: "26px" },
288
+ bodyBold: { fontFamily: "sans", fontWeight: "600", fontSize: "18px", lineHeight: "26px" },
289
+ labelLg: { fontFamily: "sans", fontWeight: "400", fontSize: "16px", lineHeight: "18px" },
290
+ labelMd: { fontFamily: "sans", fontWeight: "400", fontSize: "14px", lineHeight: "18px" },
291
+ labelSm: { fontFamily: "sans", fontWeight: "400", fontSize: "12px", lineHeight: "16px" },
292
+ labelXs: { fontFamily: "sans", fontWeight: "400", fontSize: "11px", lineHeight: "14px" }
293
+ },
294
+ mobile: {
295
+ h1: { fontFamily: "sans", fontWeight: "600", fontSize: "28px", lineHeight: "36px" },
296
+ h2: { fontFamily: "sans", fontWeight: "600", fontSize: "24px", lineHeight: "32px" },
297
+ h3: { fontFamily: "sans", fontWeight: "500", fontSize: "20px", lineHeight: "28px" },
298
+ headingLg: { fontFamily: "sans", fontWeight: "600", fontSize: "28px", lineHeight: "36px" },
299
+ headingMd: { fontFamily: "sans", fontWeight: "600", fontSize: "24px", lineHeight: "28px" },
300
+ headingSm: { fontFamily: "sans", fontWeight: "600", fontSize: "20px", lineHeight: "28px" },
301
+ body: { fontFamily: "sans", fontWeight: "400", fontSize: "16px", lineHeight: "24px" },
302
+ bodyBold: { fontFamily: "sans", fontWeight: "600", fontSize: "16px", lineHeight: "24px" },
303
+ labelLg: { fontFamily: "sans", fontWeight: "400", fontSize: "14px", lineHeight: "20px" },
304
+ labelMd: { fontFamily: "sans", fontWeight: "400", fontSize: "12px", lineHeight: "16px" },
305
+ labelSm: { fontFamily: "sans", fontWeight: "400", fontSize: "10px", lineHeight: "14px" },
306
+ labelXs: { fontFamily: "sans", fontWeight: "400", fontSize: "9px", lineHeight: "12px" }
307
+ }
249
308
  }
250
309
  };
251
310
 
252
311
  // radius.json
253
312
  var radius_default = {
254
313
  none: "0px",
255
- sm: "6px",
256
- md: "10px",
257
- lg: "14px",
314
+ xs: "4px",
315
+ sm: "8px",
316
+ md: "12px",
317
+ lg: "16px",
258
318
  xl: "20px",
319
+ "2xl": "24px",
320
+ "3xl": "28px",
321
+ "4xl": "32px",
322
+ "5xl": "48px",
259
323
  full: "9999px"
260
324
  };
261
325
 
326
+ // grid.json
327
+ var grid_default = {
328
+ mobile: {
329
+ breakpoint: "480px",
330
+ columns: 4,
331
+ gutter: "20px",
332
+ margin: "20px",
333
+ layout: "auto"
334
+ },
335
+ desktop: {
336
+ breakpoint: "1366px",
337
+ columns: 12,
338
+ gutter: "32px",
339
+ margin: "48px",
340
+ layout: "auto"
341
+ }
342
+ };
343
+
344
+ // shadows.json
345
+ var shadows_default = {
346
+ light: {
347
+ low: "0 0 2px 0 rgba(26, 26, 26, 0.05)",
348
+ mid: "0 0 4px 0 rgba(26, 26, 26, 0.10)",
349
+ high: "0 0 4px 0 rgba(26, 26, 26, 0.20)",
350
+ glow: "0 0 24px 4px rgba(26, 26, 26, 0.15)"
351
+ },
352
+ dark: {
353
+ low: "0 0 2px 0 rgba(255, 255, 255, 0.25)",
354
+ mid: "0 0 4px 0 rgba(255, 255, 255, 0.25)",
355
+ high: "0 0 4px 0 rgba(255, 255, 255, 0.35)",
356
+ glow: "0 0 24px 4px rgba(255, 255, 255, 0.10)"
357
+ },
358
+ mobile: {
359
+ light: {
360
+ low: { shadowColor: "#000", shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.05, shadowRadius: 2, elevation: 2, backgroundColor: "#FAFAFA" },
361
+ mid: { shadowColor: "#000", shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1, shadowRadius: 4, elevation: 4, backgroundColor: "#FAFAFA" },
362
+ high: { shadowColor: "#000", shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.15, shadowRadius: 8, elevation: 8, backgroundColor: "#FAFAFA" },
363
+ glow: { shadowColor: "#000", shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.1, shadowRadius: 12, elevation: 4, backgroundColor: "#FAFAFA" }
364
+ },
365
+ dark: {
366
+ low: { shadowColor: "#fff", shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.08, shadowRadius: 2, elevation: 2, backgroundColor: "#1A1A1A" },
367
+ mid: { shadowColor: "#fff", shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.12, shadowRadius: 4, elevation: 4, backgroundColor: "#1A1A1A" },
368
+ high: { shadowColor: "#fff", shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.15, shadowRadius: 8, elevation: 8, backgroundColor: "#1A1A1A" },
369
+ glow: { shadowColor: "#fff", shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.1, shadowRadius: 12, elevation: 4, backgroundColor: "#1A1A1A" }
370
+ }
371
+ }
372
+ };
373
+
374
+ // iconSizes.json
375
+ var iconSizes_default = {
376
+ mobile: {
377
+ xxl: "8px",
378
+ xs: "12px",
379
+ sm: "16px",
380
+ md: "20px",
381
+ lg: "24px",
382
+ xl: "32px"
383
+ },
384
+ desktop: {
385
+ xxl: "12px",
386
+ xs: "16px",
387
+ sm: "20px",
388
+ md: "24px",
389
+ lg: "28px",
390
+ xl: "36px"
391
+ }
392
+ };
393
+
262
394
  // index.ts
395
+ function parsePx(value) {
396
+ if (value.endsWith("px")) return parseFloat(value);
397
+ return parseFloat(value);
398
+ }
399
+ var fontFamilyMap = typography_default.fontFamily;
400
+ function resolveFontFamily(key) {
401
+ const fonts = fontFamilyMap[key];
402
+ if (!fonts) return key;
403
+ return fonts[0];
404
+ }
405
+ var textStyles = {
406
+ desktop: {},
407
+ mobile: {}
408
+ };
409
+ for (const [viewport, styles] of Object.entries(typography_default.textStyles)) {
410
+ const vp = viewport;
411
+ for (const [name, style] of Object.entries(styles)) {
412
+ textStyles[vp][name] = {
413
+ fontFamily: resolveFontFamily(style.fontFamily),
414
+ fontWeight: style.fontWeight,
415
+ fontSize: parsePx(style.fontSize),
416
+ lineHeight: parsePx(style.lineHeight)
417
+ };
418
+ }
419
+ }
263
420
  var tokens = {
264
- colors: colors_default,
421
+ colors: colors_default.colors,
422
+ dark: colors_default.dark,
265
423
  spacing: spacing_default,
266
424
  typography: typography_default,
267
- radius: radius_default
425
+ radius: radius_default,
426
+ grid: grid_default,
427
+ shadows: shadows_default,
428
+ iconSizes: iconSizes_default,
429
+ textStyles
268
430
  };
269
431
  // Annotate the CommonJS export names for ESM import in node:
270
432
  0 && (module.exports = {
271
433
  tokens
272
434
  });
273
- //# sourceMappingURL=index.cjs.map