@westayltd/design-tokens 0.3.8 → 0.3.10
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/README.md +39 -2
- package/dist/index.cjs +19 -11
- package/dist/index.d.cts +48 -0
- package/dist/index.d.ts +48 -0
- package/dist/index.js +19 -11
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @westayltd/design-tokens
|
|
2
2
|
|
|
3
|
-
Design token system for Westay applications — colors, spacing, typography, and
|
|
3
|
+
Design token system for Westay applications — colors, spacing, typography, radius, shadows, and grid.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
@@ -8,8 +8,45 @@ Design token system for Westay applications — colors, spacing, typography, and
|
|
|
8
8
|
npm install @westayltd/design-tokens
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
+
## Available Tokens
|
|
12
|
+
|
|
13
|
+
| Token group | Import path | Description |
|
|
14
|
+
|---|---|---|
|
|
15
|
+
| `tokens` | `@westayltd/design-tokens` | All tokens (colors, typography, spacing, radius) |
|
|
16
|
+
| `colors` | `@westayltd/design-tokens/colors` | Color palette JSON |
|
|
17
|
+
| `spacing` | `@westayltd/design-tokens/spacing` | Spacing scale JSON |
|
|
18
|
+
| `typography` | `@westayltd/design-tokens/typography` | Font sizes, weights, families |
|
|
19
|
+
| `radius` | `@westayltd/design-tokens/radius` | Border radius scale |
|
|
20
|
+
| `shadows` | `@westayltd/design-tokens/shadows` | Shadow definitions |
|
|
21
|
+
| `grid` | `@westayltd/design-tokens/grid` | Grid breakpoints and columns |
|
|
22
|
+
| `iconSizes` | `@westayltd/design-tokens/iconSizes` | Icon size scale |
|
|
23
|
+
|
|
24
|
+
## Color Scales
|
|
25
|
+
|
|
26
|
+
| Scale | Range | Usage |
|
|
27
|
+
|---|---|---|
|
|
28
|
+
| `primary` | 50–1300 | Grey/black scale, surfaces, text |
|
|
29
|
+
| `secondary` | 100–950 | Brand red |
|
|
30
|
+
| `accent` | 50–800 | Warm gold |
|
|
31
|
+
| `negative` | 100–800 | Error states |
|
|
32
|
+
| `positive` | 100–800 | Success states |
|
|
33
|
+
| `warning` | 100–800 | Warning states |
|
|
34
|
+
| `rating` | 100–800 | Star ratings |
|
|
35
|
+
| `link` | 50–800 | Links, info |
|
|
36
|
+
| `loyalty` | 50–900 | Loyalty/purple |
|
|
37
|
+
| `transparency` | black/white | Opacity overlays |
|
|
38
|
+
| `text` | title/body/secondary/tertiary | Semantic text colors |
|
|
39
|
+
| `borderColor` | — | Standard border (#E5E5E5) |
|
|
40
|
+
|
|
11
41
|
## Usage in Frontend (westay-b2c-fe-web)
|
|
12
42
|
|
|
43
|
+
In `tailwind.config.ts`, import from the package:
|
|
44
|
+
|
|
45
|
+
```ts
|
|
46
|
+
import { tokens } from "@westayltd/design-tokens";
|
|
47
|
+
const { spacing, typography, radius } = tokens;
|
|
48
|
+
```
|
|
49
|
+
|
|
13
50
|
After installing a new version, regenerate the Tailwind CSS variables:
|
|
14
51
|
|
|
15
52
|
```bash
|
|
@@ -22,7 +59,7 @@ This reads `design-tokens/colors.json` and outputs `src/app/design-tokens.css`.
|
|
|
22
59
|
|
|
23
60
|
## Version
|
|
24
61
|
|
|
25
|
-
Current version: **0.3.
|
|
62
|
+
Current version: **0.3.9**
|
|
26
63
|
|
|
27
64
|
## License
|
|
28
65
|
|
package/dist/index.cjs
CHANGED
|
@@ -262,18 +262,22 @@ var typography_default = {
|
|
|
262
262
|
},
|
|
263
263
|
textStyles: {
|
|
264
264
|
desktop: {
|
|
265
|
-
h1: { fontFamily: "sans", fontWeight: "600", fontSize: "
|
|
266
|
-
h2: { fontFamily: "sans", fontWeight: "600", fontSize: "
|
|
265
|
+
h1: { fontFamily: "sans", fontWeight: "600", fontSize: "32px", lineHeight: "44px" },
|
|
266
|
+
h2: { fontFamily: "sans", fontWeight: "600", fontSize: "28px", lineHeight: "36px" },
|
|
267
267
|
h3: { fontFamily: "sans", fontWeight: "500", fontSize: "24px", lineHeight: "32px" },
|
|
268
|
-
headingLg: { fontFamily: "sans", fontWeight: "600", fontSize: "
|
|
269
|
-
headingMd: { fontFamily: "sans", fontWeight: "600", fontSize: "
|
|
270
|
-
headingSm: { fontFamily: "sans", fontWeight: "600", fontSize: "22px", lineHeight: "
|
|
271
|
-
body: { fontFamily: "sans", fontWeight: "400", fontSize: "
|
|
272
|
-
bodyBold: { fontFamily: "sans", fontWeight: "600", fontSize: "
|
|
273
|
-
labelLg: { fontFamily: "sans", fontWeight: "400", fontSize: "
|
|
274
|
-
|
|
268
|
+
headingLg: { fontFamily: "sans", fontWeight: "600", fontSize: "30px", lineHeight: "38px" },
|
|
269
|
+
headingMd: { fontFamily: "sans", fontWeight: "600", fontSize: "26px", lineHeight: "32px" },
|
|
270
|
+
headingSm: { fontFamily: "sans", fontWeight: "600", fontSize: "22px", lineHeight: "28px" },
|
|
271
|
+
body: { fontFamily: "sans", fontWeight: "400", fontSize: "16px", lineHeight: "24px" },
|
|
272
|
+
bodyBold: { fontFamily: "sans", fontWeight: "600", fontSize: "16px", lineHeight: "24px" },
|
|
273
|
+
labelLg: { fontFamily: "sans", fontWeight: "400", fontSize: "14px", lineHeight: "20px" },
|
|
274
|
+
labelLgBold: { fontFamily: "sans", fontWeight: "600", fontSize: "14px", lineHeight: "20px" },
|
|
275
|
+
labelMd: { fontFamily: "sans", fontWeight: "400", fontSize: "13px", lineHeight: "17px" },
|
|
276
|
+
labelMdBold: { fontFamily: "sans", fontWeight: "600", fontSize: "13px", lineHeight: "17px" },
|
|
275
277
|
labelSm: { fontFamily: "sans", fontWeight: "400", fontSize: "12px", lineHeight: "16px" },
|
|
276
|
-
|
|
278
|
+
labelSmBold: { fontFamily: "sans", fontWeight: "600", fontSize: "12px", lineHeight: "16px" },
|
|
279
|
+
labelXs: { fontFamily: "sans", fontWeight: "400", fontSize: "11px", lineHeight: "14px" },
|
|
280
|
+
labelXsBold: { fontFamily: "sans", fontWeight: "600", fontSize: "11px", lineHeight: "14px" }
|
|
277
281
|
},
|
|
278
282
|
mobile: {
|
|
279
283
|
h1: { fontFamily: "sans", fontWeight: "600", fontSize: "28px", lineHeight: "36px" },
|
|
@@ -285,9 +289,13 @@ var typography_default = {
|
|
|
285
289
|
body: { fontFamily: "sans", fontWeight: "400", fontSize: "16px", lineHeight: "24px" },
|
|
286
290
|
bodyBold: { fontFamily: "sans", fontWeight: "600", fontSize: "16px", lineHeight: "24px" },
|
|
287
291
|
labelLg: { fontFamily: "sans", fontWeight: "400", fontSize: "14px", lineHeight: "20px" },
|
|
292
|
+
labelLgBold: { fontFamily: "sans", fontWeight: "600", fontSize: "14px", lineHeight: "20px" },
|
|
288
293
|
labelMd: { fontFamily: "sans", fontWeight: "400", fontSize: "12px", lineHeight: "16px" },
|
|
294
|
+
labelMdBold: { fontFamily: "sans", fontWeight: "600", fontSize: "12px", lineHeight: "16px" },
|
|
289
295
|
labelSm: { fontFamily: "sans", fontWeight: "400", fontSize: "10px", lineHeight: "14px" },
|
|
290
|
-
|
|
296
|
+
labelSmBold: { fontFamily: "sans", fontWeight: "600", fontSize: "10px", lineHeight: "14px" },
|
|
297
|
+
labelXs: { fontFamily: "sans", fontWeight: "400", fontSize: "9px", lineHeight: "12px" },
|
|
298
|
+
labelXsBold: { fontFamily: "sans", fontWeight: "600", fontSize: "9px", lineHeight: "12px" }
|
|
291
299
|
}
|
|
292
300
|
}
|
|
293
301
|
};
|
package/dist/index.d.cts
CHANGED
|
@@ -293,24 +293,48 @@ declare const tokens: {
|
|
|
293
293
|
fontSize: string;
|
|
294
294
|
lineHeight: string;
|
|
295
295
|
};
|
|
296
|
+
labelLgBold: {
|
|
297
|
+
fontFamily: string;
|
|
298
|
+
fontWeight: string;
|
|
299
|
+
fontSize: string;
|
|
300
|
+
lineHeight: string;
|
|
301
|
+
};
|
|
296
302
|
labelMd: {
|
|
297
303
|
fontFamily: string;
|
|
298
304
|
fontWeight: string;
|
|
299
305
|
fontSize: string;
|
|
300
306
|
lineHeight: string;
|
|
301
307
|
};
|
|
308
|
+
labelMdBold: {
|
|
309
|
+
fontFamily: string;
|
|
310
|
+
fontWeight: string;
|
|
311
|
+
fontSize: string;
|
|
312
|
+
lineHeight: string;
|
|
313
|
+
};
|
|
302
314
|
labelSm: {
|
|
303
315
|
fontFamily: string;
|
|
304
316
|
fontWeight: string;
|
|
305
317
|
fontSize: string;
|
|
306
318
|
lineHeight: string;
|
|
307
319
|
};
|
|
320
|
+
labelSmBold: {
|
|
321
|
+
fontFamily: string;
|
|
322
|
+
fontWeight: string;
|
|
323
|
+
fontSize: string;
|
|
324
|
+
lineHeight: string;
|
|
325
|
+
};
|
|
308
326
|
labelXs: {
|
|
309
327
|
fontFamily: string;
|
|
310
328
|
fontWeight: string;
|
|
311
329
|
fontSize: string;
|
|
312
330
|
lineHeight: string;
|
|
313
331
|
};
|
|
332
|
+
labelXsBold: {
|
|
333
|
+
fontFamily: string;
|
|
334
|
+
fontWeight: string;
|
|
335
|
+
fontSize: string;
|
|
336
|
+
lineHeight: string;
|
|
337
|
+
};
|
|
314
338
|
};
|
|
315
339
|
mobile: {
|
|
316
340
|
h1: {
|
|
@@ -367,24 +391,48 @@ declare const tokens: {
|
|
|
367
391
|
fontSize: string;
|
|
368
392
|
lineHeight: string;
|
|
369
393
|
};
|
|
394
|
+
labelLgBold: {
|
|
395
|
+
fontFamily: string;
|
|
396
|
+
fontWeight: string;
|
|
397
|
+
fontSize: string;
|
|
398
|
+
lineHeight: string;
|
|
399
|
+
};
|
|
370
400
|
labelMd: {
|
|
371
401
|
fontFamily: string;
|
|
372
402
|
fontWeight: string;
|
|
373
403
|
fontSize: string;
|
|
374
404
|
lineHeight: string;
|
|
375
405
|
};
|
|
406
|
+
labelMdBold: {
|
|
407
|
+
fontFamily: string;
|
|
408
|
+
fontWeight: string;
|
|
409
|
+
fontSize: string;
|
|
410
|
+
lineHeight: string;
|
|
411
|
+
};
|
|
376
412
|
labelSm: {
|
|
377
413
|
fontFamily: string;
|
|
378
414
|
fontWeight: string;
|
|
379
415
|
fontSize: string;
|
|
380
416
|
lineHeight: string;
|
|
381
417
|
};
|
|
418
|
+
labelSmBold: {
|
|
419
|
+
fontFamily: string;
|
|
420
|
+
fontWeight: string;
|
|
421
|
+
fontSize: string;
|
|
422
|
+
lineHeight: string;
|
|
423
|
+
};
|
|
382
424
|
labelXs: {
|
|
383
425
|
fontFamily: string;
|
|
384
426
|
fontWeight: string;
|
|
385
427
|
fontSize: string;
|
|
386
428
|
lineHeight: string;
|
|
387
429
|
};
|
|
430
|
+
labelXsBold: {
|
|
431
|
+
fontFamily: string;
|
|
432
|
+
fontWeight: string;
|
|
433
|
+
fontSize: string;
|
|
434
|
+
lineHeight: string;
|
|
435
|
+
};
|
|
388
436
|
};
|
|
389
437
|
};
|
|
390
438
|
};
|
package/dist/index.d.ts
CHANGED
|
@@ -293,24 +293,48 @@ declare const tokens: {
|
|
|
293
293
|
fontSize: string;
|
|
294
294
|
lineHeight: string;
|
|
295
295
|
};
|
|
296
|
+
labelLgBold: {
|
|
297
|
+
fontFamily: string;
|
|
298
|
+
fontWeight: string;
|
|
299
|
+
fontSize: string;
|
|
300
|
+
lineHeight: string;
|
|
301
|
+
};
|
|
296
302
|
labelMd: {
|
|
297
303
|
fontFamily: string;
|
|
298
304
|
fontWeight: string;
|
|
299
305
|
fontSize: string;
|
|
300
306
|
lineHeight: string;
|
|
301
307
|
};
|
|
308
|
+
labelMdBold: {
|
|
309
|
+
fontFamily: string;
|
|
310
|
+
fontWeight: string;
|
|
311
|
+
fontSize: string;
|
|
312
|
+
lineHeight: string;
|
|
313
|
+
};
|
|
302
314
|
labelSm: {
|
|
303
315
|
fontFamily: string;
|
|
304
316
|
fontWeight: string;
|
|
305
317
|
fontSize: string;
|
|
306
318
|
lineHeight: string;
|
|
307
319
|
};
|
|
320
|
+
labelSmBold: {
|
|
321
|
+
fontFamily: string;
|
|
322
|
+
fontWeight: string;
|
|
323
|
+
fontSize: string;
|
|
324
|
+
lineHeight: string;
|
|
325
|
+
};
|
|
308
326
|
labelXs: {
|
|
309
327
|
fontFamily: string;
|
|
310
328
|
fontWeight: string;
|
|
311
329
|
fontSize: string;
|
|
312
330
|
lineHeight: string;
|
|
313
331
|
};
|
|
332
|
+
labelXsBold: {
|
|
333
|
+
fontFamily: string;
|
|
334
|
+
fontWeight: string;
|
|
335
|
+
fontSize: string;
|
|
336
|
+
lineHeight: string;
|
|
337
|
+
};
|
|
314
338
|
};
|
|
315
339
|
mobile: {
|
|
316
340
|
h1: {
|
|
@@ -367,24 +391,48 @@ declare const tokens: {
|
|
|
367
391
|
fontSize: string;
|
|
368
392
|
lineHeight: string;
|
|
369
393
|
};
|
|
394
|
+
labelLgBold: {
|
|
395
|
+
fontFamily: string;
|
|
396
|
+
fontWeight: string;
|
|
397
|
+
fontSize: string;
|
|
398
|
+
lineHeight: string;
|
|
399
|
+
};
|
|
370
400
|
labelMd: {
|
|
371
401
|
fontFamily: string;
|
|
372
402
|
fontWeight: string;
|
|
373
403
|
fontSize: string;
|
|
374
404
|
lineHeight: string;
|
|
375
405
|
};
|
|
406
|
+
labelMdBold: {
|
|
407
|
+
fontFamily: string;
|
|
408
|
+
fontWeight: string;
|
|
409
|
+
fontSize: string;
|
|
410
|
+
lineHeight: string;
|
|
411
|
+
};
|
|
376
412
|
labelSm: {
|
|
377
413
|
fontFamily: string;
|
|
378
414
|
fontWeight: string;
|
|
379
415
|
fontSize: string;
|
|
380
416
|
lineHeight: string;
|
|
381
417
|
};
|
|
418
|
+
labelSmBold: {
|
|
419
|
+
fontFamily: string;
|
|
420
|
+
fontWeight: string;
|
|
421
|
+
fontSize: string;
|
|
422
|
+
lineHeight: string;
|
|
423
|
+
};
|
|
382
424
|
labelXs: {
|
|
383
425
|
fontFamily: string;
|
|
384
426
|
fontWeight: string;
|
|
385
427
|
fontSize: string;
|
|
386
428
|
lineHeight: string;
|
|
387
429
|
};
|
|
430
|
+
labelXsBold: {
|
|
431
|
+
fontFamily: string;
|
|
432
|
+
fontWeight: string;
|
|
433
|
+
fontSize: string;
|
|
434
|
+
lineHeight: string;
|
|
435
|
+
};
|
|
388
436
|
};
|
|
389
437
|
};
|
|
390
438
|
};
|
package/dist/index.js
CHANGED
|
@@ -236,18 +236,22 @@ var typography_default = {
|
|
|
236
236
|
},
|
|
237
237
|
textStyles: {
|
|
238
238
|
desktop: {
|
|
239
|
-
h1: { fontFamily: "sans", fontWeight: "600", fontSize: "
|
|
240
|
-
h2: { fontFamily: "sans", fontWeight: "600", fontSize: "
|
|
239
|
+
h1: { fontFamily: "sans", fontWeight: "600", fontSize: "32px", lineHeight: "44px" },
|
|
240
|
+
h2: { fontFamily: "sans", fontWeight: "600", fontSize: "28px", lineHeight: "36px" },
|
|
241
241
|
h3: { fontFamily: "sans", fontWeight: "500", fontSize: "24px", lineHeight: "32px" },
|
|
242
|
-
headingLg: { fontFamily: "sans", fontWeight: "600", fontSize: "
|
|
243
|
-
headingMd: { fontFamily: "sans", fontWeight: "600", fontSize: "
|
|
244
|
-
headingSm: { fontFamily: "sans", fontWeight: "600", fontSize: "22px", lineHeight: "
|
|
245
|
-
body: { fontFamily: "sans", fontWeight: "400", fontSize: "
|
|
246
|
-
bodyBold: { fontFamily: "sans", fontWeight: "600", fontSize: "
|
|
247
|
-
labelLg: { fontFamily: "sans", fontWeight: "400", fontSize: "
|
|
248
|
-
|
|
242
|
+
headingLg: { fontFamily: "sans", fontWeight: "600", fontSize: "30px", lineHeight: "38px" },
|
|
243
|
+
headingMd: { fontFamily: "sans", fontWeight: "600", fontSize: "26px", lineHeight: "32px" },
|
|
244
|
+
headingSm: { fontFamily: "sans", fontWeight: "600", fontSize: "22px", lineHeight: "28px" },
|
|
245
|
+
body: { fontFamily: "sans", fontWeight: "400", fontSize: "16px", lineHeight: "24px" },
|
|
246
|
+
bodyBold: { fontFamily: "sans", fontWeight: "600", fontSize: "16px", lineHeight: "24px" },
|
|
247
|
+
labelLg: { fontFamily: "sans", fontWeight: "400", fontSize: "14px", lineHeight: "20px" },
|
|
248
|
+
labelLgBold: { fontFamily: "sans", fontWeight: "600", fontSize: "14px", lineHeight: "20px" },
|
|
249
|
+
labelMd: { fontFamily: "sans", fontWeight: "400", fontSize: "13px", lineHeight: "17px" },
|
|
250
|
+
labelMdBold: { fontFamily: "sans", fontWeight: "600", fontSize: "13px", lineHeight: "17px" },
|
|
249
251
|
labelSm: { fontFamily: "sans", fontWeight: "400", fontSize: "12px", lineHeight: "16px" },
|
|
250
|
-
|
|
252
|
+
labelSmBold: { fontFamily: "sans", fontWeight: "600", fontSize: "12px", lineHeight: "16px" },
|
|
253
|
+
labelXs: { fontFamily: "sans", fontWeight: "400", fontSize: "11px", lineHeight: "14px" },
|
|
254
|
+
labelXsBold: { fontFamily: "sans", fontWeight: "600", fontSize: "11px", lineHeight: "14px" }
|
|
251
255
|
},
|
|
252
256
|
mobile: {
|
|
253
257
|
h1: { fontFamily: "sans", fontWeight: "600", fontSize: "28px", lineHeight: "36px" },
|
|
@@ -259,9 +263,13 @@ var typography_default = {
|
|
|
259
263
|
body: { fontFamily: "sans", fontWeight: "400", fontSize: "16px", lineHeight: "24px" },
|
|
260
264
|
bodyBold: { fontFamily: "sans", fontWeight: "600", fontSize: "16px", lineHeight: "24px" },
|
|
261
265
|
labelLg: { fontFamily: "sans", fontWeight: "400", fontSize: "14px", lineHeight: "20px" },
|
|
266
|
+
labelLgBold: { fontFamily: "sans", fontWeight: "600", fontSize: "14px", lineHeight: "20px" },
|
|
262
267
|
labelMd: { fontFamily: "sans", fontWeight: "400", fontSize: "12px", lineHeight: "16px" },
|
|
268
|
+
labelMdBold: { fontFamily: "sans", fontWeight: "600", fontSize: "12px", lineHeight: "16px" },
|
|
263
269
|
labelSm: { fontFamily: "sans", fontWeight: "400", fontSize: "10px", lineHeight: "14px" },
|
|
264
|
-
|
|
270
|
+
labelSmBold: { fontFamily: "sans", fontWeight: "600", fontSize: "10px", lineHeight: "14px" },
|
|
271
|
+
labelXs: { fontFamily: "sans", fontWeight: "400", fontSize: "9px", lineHeight: "12px" },
|
|
272
|
+
labelXsBold: { fontFamily: "sans", fontWeight: "600", fontSize: "9px", lineHeight: "12px" }
|
|
265
273
|
}
|
|
266
274
|
}
|
|
267
275
|
};
|