@westayltd/design-tokens 0.2.2 → 0.3.1

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/dist/index.d.cts CHANGED
@@ -1,210 +1,246 @@
1
+ type RNTextStyle = {
2
+ fontFamily: string;
3
+ fontWeight: string;
4
+ fontSize: number;
5
+ lineHeight: number;
6
+ };
7
+ type ViewportStyles = {
8
+ [name: string]: RNTextStyle;
9
+ };
1
10
  declare const tokens: {
2
11
  colors: {
3
- light: {
4
- brand: {
5
- crimson: {
6
- "800": string;
7
- "700": string;
8
- "600": string;
9
- "500": string;
10
- "400": string;
11
- "300": string;
12
- "200": string;
13
- "100": string;
14
- transparent: {
15
- "800": string;
16
- "700": string;
17
- "600": string;
18
- "500": string;
19
- "400": string;
20
- "300": string;
21
- "200": string;
22
- "100": string;
23
- };
24
- };
25
- burgundy: {
26
- "800": string;
27
- "700": string;
28
- "600": string;
29
- "500": string;
30
- "400": string;
31
- "300": string;
32
- "200": string;
33
- "100": string;
34
- };
35
- royals: {
36
- "800": string;
37
- "700": string;
38
- "600": string;
39
- "500": string;
40
- "400": string;
41
- "300": string;
42
- "200": string;
43
- "100": string;
44
- };
45
- oldMoney: {
46
- "800": string;
47
- "700": string;
48
- "600": string;
49
- "500": string;
50
- "400": string;
51
- "300": string;
52
- "200": string;
53
- "100": string;
54
- };
55
- driftwood: {
56
- "800": string;
57
- "700": string;
58
- "600": string;
59
- "500": string;
60
- "400": string;
61
- "300": string;
62
- "200": string;
63
- "100": string;
64
- };
65
- oceanic: {
66
- "800": string;
67
- "700": string;
68
- "600": string;
69
- "500": string;
70
- "400": string;
71
- "300": string;
72
- "200": string;
73
- "100": string;
74
- };
75
- };
76
- neutral: {
77
- monochrome: {
78
- "800": string;
79
- "700": string;
80
- "600": string;
81
- "500": string;
82
- "400": string;
83
- "300": string;
84
- "200": string;
85
- "100": string;
86
- transparent: {
87
- "800": string;
88
- "700": string;
89
- "600": string;
90
- "500": string;
91
- "400": string;
92
- "300": string;
93
- "200": string;
94
- "100": string;
95
- };
96
- };
97
- greyscale: {
98
- "800": string;
99
- "700": string;
100
- "600": string;
101
- "500": string;
102
- "400": string;
103
- "300": string;
104
- "200": string;
105
- "100": string;
106
- transparent: {
107
- "800": string;
108
- "700": string;
109
- "600": string;
110
- "500": string;
111
- "400": string;
112
- "300": string;
113
- "200": string;
114
- "100": string;
115
- };
116
- };
117
- };
118
- feedback: {
119
- success: {
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
- };
129
- error: {
130
- "800": string;
131
- "700": string;
132
- "600": string;
133
- "500": string;
134
- "400": string;
135
- "300": string;
136
- "200": string;
137
- "100": string;
138
- };
139
- warning: {
140
- "800": string;
141
- "700": string;
142
- "600": string;
143
- "500": string;
144
- "400": string;
145
- "300": string;
146
- "200": string;
147
- "100": string;
148
- };
149
- };
150
- gradient: {
151
- membership: {
152
- access: string[];
153
- elite: string[];
154
- prestige: string[];
155
- prive: string[];
156
- };
157
- };
12
+ background: {
13
+ DEFAULT: string;
14
+ dark: string;
15
+ frosted: string;
16
+ frostedDark: string;
158
17
  };
159
- dark: {
160
- surface: {
161
- bg: string;
162
- raised: string;
163
- border: string;
18
+ primary: {
19
+ "1300": string;
20
+ "1200": string;
21
+ "1100": string;
22
+ "1000": string;
23
+ "900": string;
24
+ "800": string;
25
+ "700": string;
26
+ "600": string;
27
+ "500": string;
28
+ "400": string;
29
+ "300": string;
30
+ "250": string;
31
+ "200": string;
32
+ "150": string;
33
+ "100": string;
34
+ "50": string;
35
+ };
36
+ secondary: {
37
+ "950": string;
38
+ "900": string;
39
+ "800": string;
40
+ "700": string;
41
+ "600": string;
42
+ "500": string;
43
+ "400": string;
44
+ "300": string;
45
+ "200": string;
46
+ "100": string;
47
+ };
48
+ accent: {
49
+ "800": string;
50
+ "700": string;
51
+ "600": string;
52
+ "500": string;
53
+ "400": string;
54
+ "300": string;
55
+ "200": string;
56
+ "100": string;
57
+ "50": string;
58
+ };
59
+ negative: {
60
+ "800": string;
61
+ "700": string;
62
+ "600": string;
63
+ "500": string;
64
+ "400": string;
65
+ "300": string;
66
+ "200": string;
67
+ "100": string;
68
+ };
69
+ positive: {
70
+ "800": string;
71
+ "700": string;
72
+ "600": string;
73
+ "500": string;
74
+ "400": string;
75
+ "300": string;
76
+ "200": string;
77
+ "100": string;
78
+ };
79
+ warning: {
80
+ "800": string;
81
+ "700": string;
82
+ "600": string;
83
+ "500": string;
84
+ "400": string;
85
+ "300": string;
86
+ "200": string;
87
+ "100": string;
88
+ };
89
+ rating: {
90
+ "800": string;
91
+ "700": string;
92
+ "600": string;
93
+ "500": string;
94
+ "400": string;
95
+ "300": string;
96
+ "200": string;
97
+ "100": string;
98
+ };
99
+ link: {
100
+ "800": string;
101
+ "700": string;
102
+ "600": string;
103
+ "500": string;
104
+ "400": string;
105
+ "300": string;
106
+ "200": string;
107
+ "100": string;
108
+ };
109
+ paleSteel: {
110
+ "800": string;
111
+ "700": string;
112
+ "600": string;
113
+ "500": string;
114
+ "400": string;
115
+ "300": string;
116
+ "200": string;
117
+ "100": string;
118
+ };
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
+ loyalty: {
131
+ "900": string;
132
+ "800": string;
133
+ "700": string;
134
+ "600": string;
135
+ "500": string;
136
+ "400": string;
137
+ "300": string;
138
+ "200": string;
139
+ "100": string;
140
+ "50": string;
141
+ };
142
+ "surface-dark": string;
143
+ "surface-medium": string;
144
+ "surface-soft": string;
145
+ "surface-softer": string;
146
+ "page-background": string;
147
+ transparency: {
148
+ black: {
149
+ "90": string;
150
+ "80": string;
151
+ "65": string;
152
+ "50": string;
153
+ "35": string;
154
+ "25": string;
155
+ "20": string;
156
+ "15": string;
157
+ "10": string;
158
+ "5": string;
159
+ "1": string;
164
160
  };
165
- text: {
166
- primary: string;
167
- secondary: string;
168
- muted: string;
161
+ white: {
162
+ "90": string;
163
+ "80": string;
164
+ "65": string;
165
+ "50": string;
166
+ "35": string;
167
+ "25": string;
168
+ "20": string;
169
+ "15": string;
170
+ "10": string;
171
+ "5": string;
172
+ "1": string;
169
173
  };
170
174
  };
171
175
  text: {
172
- body: {
173
- "800": string;
174
- "700": string;
175
- "600": string;
176
- "500": string;
177
- "400": string;
178
- "300": string;
179
- "200": string;
180
- "100": string;
181
- };
176
+ title: string;
177
+ body: string;
178
+ secondary: string;
179
+ tertiary: string;
180
+ };
181
+ };
182
+ dark: {
183
+ surface: {
184
+ bg: string;
185
+ raised: string;
186
+ border: string;
187
+ };
188
+ text: {
189
+ primary: string;
190
+ secondary: string;
191
+ muted: string;
182
192
  };
183
193
  };
184
194
  spacing: {
185
195
  "0": string;
186
196
  "1": string;
197
+ "1.5": string;
187
198
  "2": string;
188
199
  "3": string;
189
200
  "4": string;
190
201
  "5": string;
191
202
  "6": string;
203
+ "7": string;
192
204
  "8": string;
205
+ "9": string;
193
206
  "10": string;
207
+ "11": string;
194
208
  "12": string;
209
+ "13": string;
210
+ "14": string;
211
+ "15": string;
212
+ "16": string;
213
+ "17": string;
214
+ "18": string;
215
+ "19": string;
216
+ "20": string;
217
+ "21": string;
218
+ "22": string;
219
+ "23": string;
220
+ "24": string;
195
221
  };
196
222
  typography: {
197
223
  fontFamily: {
198
224
  sans: string[];
225
+ serif: string[];
199
226
  };
200
227
  fontSize: {
228
+ "3xs": string;
229
+ "2xs": string;
230
+ "xs-alt": string;
201
231
  xs: string;
232
+ "13": string;
202
233
  sm: string;
203
234
  base: string;
204
235
  lg: string;
205
236
  xl: string;
237
+ xxl: string;
206
238
  "2xl": string;
239
+ "2xl-alt": string;
207
240
  "3xl": string;
241
+ "3xl-alt": string;
242
+ "4xl": string;
243
+ "5xl": string;
208
244
  };
209
245
  fontWeight: {
210
246
  regular: string;
@@ -217,16 +253,316 @@ declare const tokens: {
217
253
  normal: string;
218
254
  relaxed: string;
219
255
  };
256
+ textStyles: {
257
+ desktop: {
258
+ h1: {
259
+ fontFamily: string;
260
+ fontWeight: string;
261
+ fontSize: string;
262
+ lineHeight: string;
263
+ };
264
+ h2: {
265
+ fontFamily: string;
266
+ fontWeight: string;
267
+ fontSize: string;
268
+ lineHeight: string;
269
+ };
270
+ h3: {
271
+ fontFamily: string;
272
+ fontWeight: string;
273
+ fontSize: string;
274
+ lineHeight: string;
275
+ };
276
+ headingLg: {
277
+ fontFamily: string;
278
+ fontWeight: string;
279
+ fontSize: string;
280
+ lineHeight: string;
281
+ };
282
+ headingMd: {
283
+ fontFamily: string;
284
+ fontWeight: string;
285
+ fontSize: string;
286
+ lineHeight: string;
287
+ };
288
+ headingSm: {
289
+ fontFamily: string;
290
+ fontWeight: string;
291
+ fontSize: string;
292
+ lineHeight: string;
293
+ };
294
+ body: {
295
+ fontFamily: string;
296
+ fontWeight: string;
297
+ fontSize: string;
298
+ lineHeight: string;
299
+ };
300
+ bodyBold: {
301
+ fontFamily: string;
302
+ fontWeight: string;
303
+ fontSize: string;
304
+ lineHeight: string;
305
+ };
306
+ labelLg: {
307
+ fontFamily: string;
308
+ fontWeight: string;
309
+ fontSize: string;
310
+ lineHeight: string;
311
+ };
312
+ labelMd: {
313
+ fontFamily: string;
314
+ fontWeight: string;
315
+ fontSize: string;
316
+ lineHeight: string;
317
+ };
318
+ labelSm: {
319
+ fontFamily: string;
320
+ fontWeight: string;
321
+ fontSize: string;
322
+ lineHeight: string;
323
+ };
324
+ labelXs: {
325
+ fontFamily: string;
326
+ fontWeight: string;
327
+ fontSize: string;
328
+ lineHeight: string;
329
+ };
330
+ };
331
+ mobile: {
332
+ h1: {
333
+ fontFamily: string;
334
+ fontWeight: string;
335
+ fontSize: string;
336
+ lineHeight: string;
337
+ };
338
+ h2: {
339
+ fontFamily: string;
340
+ fontWeight: string;
341
+ fontSize: string;
342
+ lineHeight: string;
343
+ };
344
+ h3: {
345
+ fontFamily: string;
346
+ fontWeight: string;
347
+ fontSize: string;
348
+ lineHeight: string;
349
+ };
350
+ headingLg: {
351
+ fontFamily: string;
352
+ fontWeight: string;
353
+ fontSize: string;
354
+ lineHeight: string;
355
+ };
356
+ headingMd: {
357
+ fontFamily: string;
358
+ fontWeight: string;
359
+ fontSize: string;
360
+ lineHeight: string;
361
+ };
362
+ headingSm: {
363
+ fontFamily: string;
364
+ fontWeight: string;
365
+ fontSize: string;
366
+ lineHeight: string;
367
+ };
368
+ body: {
369
+ fontFamily: string;
370
+ fontWeight: string;
371
+ fontSize: string;
372
+ lineHeight: string;
373
+ };
374
+ bodyBold: {
375
+ fontFamily: string;
376
+ fontWeight: string;
377
+ fontSize: string;
378
+ lineHeight: string;
379
+ };
380
+ labelLg: {
381
+ fontFamily: string;
382
+ fontWeight: string;
383
+ fontSize: string;
384
+ lineHeight: string;
385
+ };
386
+ labelMd: {
387
+ fontFamily: string;
388
+ fontWeight: string;
389
+ fontSize: string;
390
+ lineHeight: string;
391
+ };
392
+ labelSm: {
393
+ fontFamily: string;
394
+ fontWeight: string;
395
+ fontSize: string;
396
+ lineHeight: string;
397
+ };
398
+ labelXs: {
399
+ fontFamily: string;
400
+ fontWeight: string;
401
+ fontSize: string;
402
+ lineHeight: string;
403
+ };
404
+ };
405
+ };
220
406
  };
221
407
  radius: {
222
408
  none: string;
409
+ xs: string;
223
410
  sm: string;
224
411
  md: string;
225
412
  lg: string;
226
413
  xl: string;
414
+ "2xl": string;
415
+ "3xl": string;
416
+ "4xl": string;
417
+ "5xl": string;
227
418
  full: string;
228
419
  };
420
+ grid: {
421
+ mobile: {
422
+ breakpoint: string;
423
+ columns: number;
424
+ gutter: string;
425
+ margin: string;
426
+ layout: string;
427
+ };
428
+ desktop: {
429
+ breakpoint: string;
430
+ columns: number;
431
+ gutter: string;
432
+ margin: string;
433
+ layout: string;
434
+ };
435
+ };
436
+ shadows: {
437
+ light: {
438
+ low: string;
439
+ mid: string;
440
+ high: string;
441
+ glow: string;
442
+ };
443
+ dark: {
444
+ low: string;
445
+ mid: string;
446
+ high: string;
447
+ glow: string;
448
+ };
449
+ mobile: {
450
+ light: {
451
+ low: {
452
+ shadowColor: string;
453
+ shadowOffset: {
454
+ width: number;
455
+ height: number;
456
+ };
457
+ shadowOpacity: number;
458
+ shadowRadius: number;
459
+ elevation: number;
460
+ backgroundColor: string;
461
+ };
462
+ mid: {
463
+ shadowColor: string;
464
+ shadowOffset: {
465
+ width: number;
466
+ height: number;
467
+ };
468
+ shadowOpacity: number;
469
+ shadowRadius: number;
470
+ elevation: number;
471
+ backgroundColor: string;
472
+ };
473
+ high: {
474
+ shadowColor: string;
475
+ shadowOffset: {
476
+ width: number;
477
+ height: number;
478
+ };
479
+ shadowOpacity: number;
480
+ shadowRadius: number;
481
+ elevation: number;
482
+ backgroundColor: string;
483
+ };
484
+ glow: {
485
+ shadowColor: string;
486
+ shadowOffset: {
487
+ width: number;
488
+ height: number;
489
+ };
490
+ shadowOpacity: number;
491
+ shadowRadius: number;
492
+ elevation: number;
493
+ backgroundColor: string;
494
+ };
495
+ };
496
+ dark: {
497
+ low: {
498
+ shadowColor: string;
499
+ shadowOffset: {
500
+ width: number;
501
+ height: number;
502
+ };
503
+ shadowOpacity: number;
504
+ shadowRadius: number;
505
+ elevation: number;
506
+ backgroundColor: string;
507
+ };
508
+ mid: {
509
+ shadowColor: string;
510
+ shadowOffset: {
511
+ width: number;
512
+ height: number;
513
+ };
514
+ shadowOpacity: number;
515
+ shadowRadius: number;
516
+ elevation: number;
517
+ backgroundColor: string;
518
+ };
519
+ high: {
520
+ shadowColor: string;
521
+ shadowOffset: {
522
+ width: number;
523
+ height: number;
524
+ };
525
+ shadowOpacity: number;
526
+ shadowRadius: number;
527
+ elevation: number;
528
+ backgroundColor: string;
529
+ };
530
+ glow: {
531
+ shadowColor: string;
532
+ shadowOffset: {
533
+ width: number;
534
+ height: number;
535
+ };
536
+ shadowOpacity: number;
537
+ shadowRadius: number;
538
+ elevation: number;
539
+ backgroundColor: string;
540
+ };
541
+ };
542
+ };
543
+ };
544
+ iconSizes: {
545
+ mobile: {
546
+ xxl: string;
547
+ xs: string;
548
+ sm: string;
549
+ md: string;
550
+ lg: string;
551
+ xl: string;
552
+ };
553
+ desktop: {
554
+ xxl: string;
555
+ xs: string;
556
+ sm: string;
557
+ md: string;
558
+ lg: string;
559
+ xl: string;
560
+ };
561
+ };
562
+ textStyles: {
563
+ desktop: ViewportStyles;
564
+ mobile: ViewportStyles;
565
+ };
229
566
  };
230
- type ThemeMode = "light" | "dark";
231
567
 
232
- export { type ThemeMode, tokens };
568
+ export { type RNTextStyle, type ViewportStyles, tokens };