@balena/design-tokens 0.5.0 → 0.6.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 (5) hide show
  1. package/build/css/tokens.css +93 -35
  2. package/build/js/tokens.d.ts +228 -4
  3. package/build/js/tokens.js +232 -8
  4. package/build/json/tokens.json +1088 -104
  5. package/package.json +2 -2
package/build/css/tokens.css CHANGED
@@ -1,9 +1,13 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 18 Apr 2024 18:16:30 GMT
3
+ * Generated on Tue, 30 Apr 2024 12:22:49 GMT
4
4
  */
5
5
 
6
6
  :root {
7
+ --typography-components-badge-text-case: uppercase;
8
+ --typography-components-badge-line-height: 0.857rem;
9
+ --typography-components-badge-font-weight: 600;
10
+ --typography-components-badge-font-size: 0.714rem;
7
11
  --typography-icon-sm-solid-text-case: none;
8
12
  --typography-icon-sm-solid-line-height: 1.286rem;
9
13
  --typography-icon-sm-solid-font-weight: 400;
@@ -61,7 +65,7 @@
61
65
  --typography-title-md-font-weight: 400;
62
66
  --typography-title-md-font-size: 1.714rem;
63
67
  --typography-overline-text-case: uppercase;
64
- --typography-overline-line-height: 1.179rem;
68
+ --typography-overline-line-height: 1rem;
65
69
  --typography-overline-font-weight: 600;
66
70
  --typography-overline-font-size: 0.786rem;
67
71
  --typography-display-text-case: none;
@@ -70,8 +74,8 @@
70
74
  --typography-display-font-size: 2.857rem;
71
75
  --typography-fontfamily-code: 'Ubuntu Mono', 'Courier New', monospace;
72
76
  --typography-fontfamily-body: 'Source Sans Pro', Helvetica, sans-serif;
73
- --typography-weight-strong: 500;
74
- --typography-weight: 400;
77
+ --typography-weight-strong: 600;
78
+ --typography-weight: 500;
75
79
  --color-icon-inverse: #ffffff;
76
80
  --color-bg-overlay-dark: rgba(10, 25, 36, 0.8);
77
81
  --color-bg-overlay-light: rgba(255, 255, 255, 0.8);
@@ -173,6 +177,12 @@
173
177
  --color-palette-neutral-100: #ccdbe7;
174
178
  --color-palette-neutral-75: #e3ebf1;
175
179
  --color-palette-neutral-50: #f9fafb;
180
+ --typography-components-badge-shorthand: var(
181
+ --typography-components-badge-font-weight
182
+ )
183
+ var(--typography-components-badge-font-size) /
184
+ var(--typography-components-badge-line-height)
185
+ var(--typography-fontfamily-body);
176
186
  --typography-code-md-shorthand: var(--typography-code-md-font-weight)
177
187
  var(--typography-code-md-font-size) / var(--typography-code-md-line-height)
178
188
  var(--typography-fontfamily-code);
@@ -210,49 +220,97 @@
210
220
  --color-status-warning: var(--color-palette-orange-500);
211
221
  --color-status-info: var(--color-palette-blue-500);
212
222
  --color-status-success: var(--color-palette-green-500);
213
- --color-icon-danger: var(--color-palette-red-700);
214
- --color-icon-warning: var(--color-palette-orange-700);
215
- --color-icon-success: var(--color-palette-green-700);
216
- --color-icon-info: var(--color-palette-blue-700);
223
+ --color-icon-palette-yellow: var(--color-palette-yellow-700);
224
+ --color-icon-palette-purple: var(--color-palette-purple-700);
225
+ --color-icon-palette-teal: var(--color-palette-teal-700);
226
+ --color-icon-palette-neutral: var(--color-palette-neutral-700);
227
+ --color-icon-palette-red: var(--color-palette-red-700);
228
+ --color-icon-palette-orange: var(--color-palette-orange-700);
229
+ --color-icon-palette-green: var(--color-palette-green-700);
230
+ --color-icon-palette-blue: var(--color-palette-blue-700);
217
231
  --color-icon-accent: var(--color-palette-blue-700);
218
232
  --color-icon-subtlest: var(--color-palette-neutral-300);
219
233
  --color-icon-subtle: var(--color-palette-neutral-500);
220
- --color-icon: var(--color-palette-neutral-700);
221
- --color-border-danger-strong: var(--color-palette-red-600);
222
- --color-border-danger: var(--color-palette-red-200);
223
- --color-border-warning-strong: var(--color-palette-orange-600);
224
- --color-border-warning: var(--color-palette-orange-200);
225
- --color-border-success-strong: var(--color-palette-green-600);
226
- --color-border-success: var(--color-palette-green-200);
227
- --color-border-info-strong: var(--color-palette-blue-600);
228
- --color-border-info: var(--color-palette-blue-200);
234
+ --color-border-palette-yellow-strong: var(--color-palette-yellow-800);
235
+ --color-border-palette-yellow: var(--color-palette-yellow-600);
236
+ --color-border-palette-purple-strong: var(--color-palette-purple-600);
237
+ --color-border-palette-purple: var(--color-palette-purple-200);
238
+ --color-border-palette-teal-strong: var(--color-palette-teal-600);
239
+ --color-border-palette-teal: var(--color-palette-teal-200);
240
+ --color-border-palette-neutral-strong: var(--color-palette-neutral-600);
241
+ --color-border-palette-neutral: var(--color-palette-neutral-200);
242
+ --color-border-palette-red-strong: var(--color-palette-red-600);
243
+ --color-border-palette-red: var(--color-palette-red-200);
244
+ --color-border-palette-orange-strong: var(--color-palette-orange-600);
245
+ --color-border-palette-orange: var(--color-palette-orange-200);
246
+ --color-border-palette-green-strong: var(--color-palette-green-600);
247
+ --color-border-palette-green: var(--color-palette-green-200);
248
+ --color-border-palette-blue-strong: var(--color-palette-blue-600);
249
+ --color-border-palette-blue: var(--color-palette-blue-200);
229
250
  --color-border-accent-strong: var(--color-palette-blue-600);
230
251
  --color-border-accent: var(--color-palette-blue-300);
231
- --color-border-strong: var(--color-palette-neutral-600);
232
252
  --color-border-subtle: var(--color-palette-neutral-75);
233
- --color-border: var(--color-palette-neutral-200);
253
+ --color-bg-palette-yellow-strong: var(--color-palette-yellow-1000);
254
+ --color-bg-palette-yellow: var(--color-palette-yellow-50);
255
+ --color-bg-palette-purple-strong: var(--color-palette-purple-800);
256
+ --color-bg-palette-purple: var(--color-palette-purple-50);
257
+ --color-bg-palette-teal-strong: var(--color-palette-teal-800);
258
+ --color-bg-palette-teal: var(--color-palette-teal-50);
259
+ --color-bg-palette-neutral-strong: var(--color-palette-neutral-800);
260
+ --color-bg-palette-neutral: var(--color-palette-neutral-75);
261
+ --color-bg-palette-red-strong: var(--color-palette-red-800);
262
+ --color-bg-palette-red: var(--color-palette-red-50);
263
+ --color-bg-palette-orange-strong: var(--color-palette-orange-900);
264
+ --color-bg-palette-orange: var(--color-palette-orange-50);
265
+ --color-bg-palette-green-strong: var(--color-palette-green-800);
266
+ --color-bg-palette-green: var(--color-palette-green-50);
267
+ --color-bg-palette-blue-strong: var(--color-palette-blue-800);
268
+ --color-bg-palette-blue: var(--color-palette-blue-50);
234
269
  --color-bg-code: var(--color-palette-red-50);
235
- --color-bg-danger-strong: var(--color-palette-red-800);
236
- --color-bg-danger: var(--color-palette-red-50);
237
- --color-bg-warning-strong: var(--color-palette-orange-900);
238
- --color-bg-warning: var(--color-palette-orange-50);
239
- --color-bg-success-strong: var(--color-palette-green-800);
240
- --color-bg-success: var(--color-palette-green-50);
241
- --color-bg-info-strong: var(--color-palette-blue-800);
242
- --color-bg-info: var(--color-palette-blue-50);
243
270
  --color-bg-accent-strong: var(--color-palette-blue-600);
244
271
  --color-bg-accent: var(--color-palette-blue-50);
245
272
  --color-bg-strongest: var(--color-palette-neutral-900);
246
- --color-bg-strong: var(--color-palette-neutral-800);
247
- --color-bg-subtle: var(--color-palette-neutral-75);
248
273
  --color-bg: var(--color-palette-neutral-50);
249
- --color-text-code: var(--color-palette-red-1000);
250
- --color-text-danger: var(--color-palette-red-1000);
251
- --color-text-warning: var(--color-palette-orange-1000);
252
- --color-text-success: var(--color-palette-green-1000);
253
- --color-text-info: var(--color-palette-blue-1000);
274
+ --color-text-palette-yellow: var(--color-palette-yellow-1000);
275
+ --color-text-palette-purple: var(--color-palette-purple-900);
276
+ --color-text-palette-teal: var(--color-palette-teal-900);
277
+ --color-text-palette-neutral: var(--color-palette-neutral-800);
278
+ --color-text-palette-red: var(--color-palette-red-1000);
279
+ --color-text-palette-orange: var(--color-palette-orange-1000);
280
+ --color-text-palette-green: var(--color-palette-green-1000);
281
+ --color-text-palette-blue: var(--color-palette-blue-1000);
254
282
  --color-text-accent: var(--color-palette-blue-600);
255
283
  --color-text-subtlest: var(--color-palette-neutral-100);
256
284
  --color-text-subtle: var(--color-palette-neutral-600);
257
- --color-text: var(--color-palette-neutral-800);
285
+ --color-icon-danger: var(--color-icon-palette-red);
286
+ --color-icon-warning: var(--color-icon-palette-orange);
287
+ --color-icon-success: var(--color-icon-palette-green);
288
+ --color-icon-info: var(--color-icon-palette-blue);
289
+ --color-icon: var(--color-icon-palette-neutral);
290
+ --color-border-danger-strong: var(--color-border-palette-red-strong);
291
+ --color-border-danger: var(--color-border-palette-red);
292
+ --color-border-warning-strong: var(--color-border-palette-orange-strong);
293
+ --color-border-warning: var(--color-border-palette-orange);
294
+ --color-border-success-strong: var(--color-border-palette-green-strong);
295
+ --color-border-success: var(--color-border-palette-green);
296
+ --color-border-info-strong: var(--color-border-palette-blue-strong);
297
+ --color-border-info: var(--color-border-palette-blue);
298
+ --color-border-strong: var(--color-border-palette-neutral-strong);
299
+ --color-border: var(--color-border-palette-neutral);
300
+ --color-bg-danger-strong: var(--color-bg-palette-red-strong);
301
+ --color-bg-danger: var(--color-bg-palette-red);
302
+ --color-bg-warning-strong: var(--color-bg-palette-orange-strong);
303
+ --color-bg-warning: var(--color-bg-palette-orange);
304
+ --color-bg-success-strong: var(--color-bg-palette-green-strong);
305
+ --color-bg-success: var(--color-bg-palette-green);
306
+ --color-bg-info-strong: var(--color-bg-palette-blue-strong);
307
+ --color-bg-info: var(--color-bg-palette-blue);
308
+ --color-bg-strong: var(--color-bg-palette-neutral-strong);
309
+ --color-bg-subtle: var(--color-bg-palette-neutral);
310
+ --color-text-code: var(--color-text-palette-red);
311
+ --color-text-danger: var(--color-text-palette-red);
312
+ --color-text-warning: var(--color-text-palette-orange);
313
+ --color-text-success: var(--color-text-palette-green);
314
+ --color-text-info: var(--color-text-palette-blue);
315
+ --color-text: var(--color-text-palette-neutral);
258
316
  }
package/build/js/tokens.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 18 Apr 2024 18:16:30 GMT
3
+ * Generated on Tue, 30 Apr 2024 12:22:49 GMT
4
4
  */
5
5
 
6
6
  export const color: {
@@ -445,6 +445,40 @@ export const color: {
445
445
  value: string;
446
446
  name: string;
447
447
  };
448
+ palette: {
449
+ blue: {
450
+ value: string;
451
+ name: string;
452
+ };
453
+ green: {
454
+ value: string;
455
+ name: string;
456
+ };
457
+ orange: {
458
+ value: string;
459
+ name: string;
460
+ };
461
+ red: {
462
+ value: string;
463
+ name: string;
464
+ };
465
+ neutral: {
466
+ value: string;
467
+ name: string;
468
+ };
469
+ teal: {
470
+ value: string;
471
+ name: string;
472
+ };
473
+ purple: {
474
+ value: string;
475
+ name: string;
476
+ };
477
+ yellow: {
478
+ value: string;
479
+ name: string;
480
+ };
481
+ };
448
482
  };
449
483
  bg: {
450
484
  value: string;
@@ -505,6 +539,10 @@ export const color: {
505
539
  name: string;
506
540
  };
507
541
  };
542
+ code: {
543
+ value: string;
544
+ name: string;
545
+ };
508
546
  overlay: {
509
547
  light: {
510
548
  value: string;
@@ -515,9 +553,71 @@ export const color: {
515
553
  name: string;
516
554
  };
517
555
  };
518
- code: {
519
- value: string;
520
- name: string;
556
+ palette: {
557
+ blue: {
558
+ value: string;
559
+ name: string;
560
+ strong: {
561
+ value: string;
562
+ name: string;
563
+ };
564
+ };
565
+ green: {
566
+ value: string;
567
+ name: string;
568
+ strong: {
569
+ value: string;
570
+ name: string;
571
+ };
572
+ };
573
+ orange: {
574
+ value: string;
575
+ name: string;
576
+ strong: {
577
+ value: string;
578
+ name: string;
579
+ };
580
+ };
581
+ red: {
582
+ value: string;
583
+ name: string;
584
+ strong: {
585
+ value: string;
586
+ name: string;
587
+ };
588
+ };
589
+ neutral: {
590
+ value: string;
591
+ name: string;
592
+ strong: {
593
+ value: string;
594
+ name: string;
595
+ };
596
+ };
597
+ teal: {
598
+ value: string;
599
+ name: string;
600
+ strong: {
601
+ value: string;
602
+ name: string;
603
+ };
604
+ };
605
+ purple: {
606
+ value: string;
607
+ name: string;
608
+ strong: {
609
+ value: string;
610
+ name: string;
611
+ };
612
+ };
613
+ yellow: {
614
+ value: string;
615
+ name: string;
616
+ strong: {
617
+ value: string;
618
+ name: string;
619
+ };
620
+ };
521
621
  };
522
622
  };
523
623
  border: {
@@ -571,6 +671,72 @@ export const color: {
571
671
  name: string;
572
672
  };
573
673
  };
674
+ palette: {
675
+ blue: {
676
+ value: string;
677
+ name: string;
678
+ strong: {
679
+ value: string;
680
+ name: string;
681
+ };
682
+ };
683
+ green: {
684
+ value: string;
685
+ name: string;
686
+ strong: {
687
+ value: string;
688
+ name: string;
689
+ };
690
+ };
691
+ orange: {
692
+ value: string;
693
+ name: string;
694
+ strong: {
695
+ value: string;
696
+ name: string;
697
+ };
698
+ };
699
+ red: {
700
+ value: string;
701
+ name: string;
702
+ strong: {
703
+ value: string;
704
+ name: string;
705
+ };
706
+ };
707
+ neutral: {
708
+ value: string;
709
+ name: string;
710
+ strong: {
711
+ value: string;
712
+ name: string;
713
+ };
714
+ };
715
+ teal: {
716
+ value: string;
717
+ name: string;
718
+ strong: {
719
+ value: string;
720
+ name: string;
721
+ };
722
+ };
723
+ purple: {
724
+ value: string;
725
+ name: string;
726
+ strong: {
727
+ value: string;
728
+ name: string;
729
+ };
730
+ };
731
+ yellow: {
732
+ value: string;
733
+ name: string;
734
+ strong: {
735
+ value: string;
736
+ name: string;
737
+ };
738
+ };
739
+ };
574
740
  };
575
741
  icon: {
576
742
  value: string;
@@ -607,6 +773,40 @@ export const color: {
607
773
  value: string;
608
774
  name: string;
609
775
  };
776
+ palette: {
777
+ blue: {
778
+ value: string;
779
+ name: string;
780
+ };
781
+ green: {
782
+ value: string;
783
+ name: string;
784
+ };
785
+ orange: {
786
+ value: string;
787
+ name: string;
788
+ };
789
+ red: {
790
+ value: string;
791
+ name: string;
792
+ };
793
+ neutral: {
794
+ value: string;
795
+ name: string;
796
+ };
797
+ teal: {
798
+ value: string;
799
+ name: string;
800
+ };
801
+ purple: {
802
+ value: string;
803
+ name: string;
804
+ };
805
+ yellow: {
806
+ value: string;
807
+ name: string;
808
+ };
809
+ };
610
810
  };
611
811
  status: {
612
812
  success: {
@@ -1001,4 +1201,28 @@ export const typography: {
1001
1201
  };
1002
1202
  };
1003
1203
  };
1204
+ components: {
1205
+ badge: {
1206
+ fontSize: {
1207
+ value: string;
1208
+ name: string;
1209
+ };
1210
+ fontWeight: {
1211
+ value: number;
1212
+ name: string;
1213
+ };
1214
+ lineHeight: {
1215
+ value: string;
1216
+ name: string;
1217
+ };
1218
+ textCase: {
1219
+ value: string;
1220
+ name: string;
1221
+ };
1222
+ shorthand: {
1223
+ value: string;
1224
+ name: string;
1225
+ };
1226
+ };
1227
+ };
1004
1228
  };