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