@viasat/beam-tokens 2.71.0 → 2.72.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 (10) hide show
  1. package/components/Badge.css +164 -0
  2. package/components/BadgeIndicator.css +114 -0
  3. package/index.cjs +2 -2
  4. package/index.js +970 -945
  5. package/package.json +1 -1
  6. package/themes/onefi.css +6 -0
  7. package/tokens.css +8 -0
  8. package/tokens.scss +63 -0
  9. package/types/lib/js/tokens.d.ts +25 -0
  10. package/types/lib/js/tokensObj.d.ts +240 -0
package/components/Badge.css CHANGED
@@ -188,6 +188,42 @@
188
188
  --bm-sem-color-border-info-secondary,
189
189
  rgba(87, 103, 117, 0.4)
190
190
  );
191
+ --bm-comp-badge-color-accent-strong-bg: var(
192
+ --bm-alias-color-ramp-accent-base,
193
+ #00768f
194
+ );
195
+ --bm-comp-badge-color-accent-strong-fg: var(
196
+ --bm-sem-color-text-primary-inverse,
197
+ #ffffff
198
+ );
199
+ --bm-comp-badge-color-accent-strong-border: var(
200
+ --bm-sem-color-none,
201
+ #ffffff00
202
+ );
203
+ --bm-comp-badge-color-accent-medium-bg: var(
204
+ --bm-alias-color-ramp-accent-subtler,
205
+ #d7f4f9
206
+ );
207
+ --bm-comp-badge-color-accent-medium-fg: var(
208
+ --bm-alias-color-ramp-accent-base,
209
+ #00768f
210
+ );
211
+ --bm-comp-badge-color-accent-medium-border: var(
212
+ --bm-sem-color-none,
213
+ #ffffff00
214
+ );
215
+ --bm-comp-badge-color-accent-subtle-bg: var(
216
+ --bm-primitive-color-transparent,
217
+ #ffffff00
218
+ );
219
+ --bm-comp-badge-color-accent-subtle-fg: var(
220
+ --bm-alias-color-ramp-accent-base,
221
+ #00768f
222
+ );
223
+ --bm-comp-badge-color-accent-subtle-border: var(
224
+ --bm-alias-color-ramp-accent-muter,
225
+ #8cd8e6
226
+ );
191
227
  --bm-comp-badge-space-gap: var(--bm-sem-space-25, 0.25rem);
192
228
  --bm-comp-badge-space-x: var(--bm-alias-badge-space-x, 0.75rem);
193
229
  --bm-comp-badge-size-icon: var(--bm-sem-size-icon-sm, 1rem);
@@ -273,6 +309,52 @@
273
309
  --bm-sem-typo-compact-label-md,
274
310
  600 1rem/1.25rem "Source Sans Pro"
275
311
  );
312
+ --bm-comp-badge-indicator-radius: var(--bm-sem-radius-round, 624.938rem);
313
+ --bm-comp-badge-indicator-space-x: var(--bm-sem-space-25, 0.25rem);
314
+ --bm-comp-badge-indicator-size-sm: var(--bm-primitive-dimension-100, 1rem);
315
+ --bm-comp-badge-indicator-size-md: var(--bm-primitive-dimension-125, 1.25rem);
316
+ --bm-comp-badge-indicator-size-marker-sm: var(
317
+ --bm-primitive-dimension-50,
318
+ 0.5rem
319
+ );
320
+ --bm-comp-badge-indicator-size-marker-md: var(
321
+ --bm-primitive-dimension-75,
322
+ 0.75rem
323
+ );
324
+ --bm-comp-badge-indicator-size-icon-sm: 0.625rem;
325
+ --bm-comp-badge-indicator-size-icon-md: var(--bm-sem-size-icon-xs, 0.75rem);
326
+ --bm-comp-badge-indicator-typo-sm: var(
327
+ --bm-sem-typo-compact-label-xs,
328
+ 600 0.75rem/1rem "Source Sans Pro"
329
+ );
330
+ --bm-comp-badge-indicator-typo-md: var(
331
+ --bm-sem-typo-compact-label-xs,
332
+ 600 0.75rem/1rem "Source Sans Pro"
333
+ );
334
+ --bm-comp-badge-indicator-color-marker-accent-medium-bg: var(
335
+ --bm-alias-color-ramp-accent-mute,
336
+ #00a2c0
337
+ );
338
+ --bm-comp-badge-indicator-color-marker-info-primary-medium-bg: var(
339
+ --bm-alias-color-ramp-blue-mute,
340
+ #0095e0
341
+ );
342
+ --bm-comp-badge-indicator-color-marker-info-secondary-medium-bg: var(
343
+ --bm-alias-color-ramp-gray-mute,
344
+ #8697a5
345
+ );
346
+ --bm-comp-badge-indicator-color-marker-positive-medium-bg: var(
347
+ --bm-alias-color-ramp-green-mute,
348
+ #24a148
349
+ );
350
+ --bm-comp-badge-indicator-color-marker-warning-medium-bg: var(
351
+ --bm-alias-color-ramp-orange-mute,
352
+ #eb6200
353
+ );
354
+ --bm-comp-badge-indicator-color-marker-negative-medium-bg: var(
355
+ --bm-alias-color-ramp-red-mute,
356
+ #ed464c
357
+ );
276
358
  }
277
359
 
278
360
  :host,
@@ -464,6 +546,42 @@
464
546
  --bm-sem-color-border-info-secondary,
465
547
  rgba(209, 218, 224, 0.4)
466
548
  );
549
+ --bm-comp-badge-color-accent-strong-bg: var(
550
+ --bm-alias-color-ramp-accent-base,
551
+ #43bfd6
552
+ );
553
+ --bm-comp-badge-color-accent-strong-fg: var(
554
+ --bm-sem-color-text-primary-inverse,
555
+ #141d24
556
+ );
557
+ --bm-comp-badge-color-accent-strong-border: var(
558
+ --bm-sem-color-none,
559
+ #ffffff00
560
+ );
561
+ --bm-comp-badge-color-accent-medium-bg: var(
562
+ --bm-alias-color-ramp-accent-subtler,
563
+ #00414d
564
+ );
565
+ --bm-comp-badge-color-accent-medium-fg: var(
566
+ --bm-alias-color-ramp-accent-base,
567
+ #43bfd6
568
+ );
569
+ --bm-comp-badge-color-accent-medium-border: var(
570
+ --bm-sem-color-none,
571
+ #ffffff00
572
+ );
573
+ --bm-comp-badge-color-accent-subtle-bg: var(
574
+ --bm-primitive-color-transparent,
575
+ #ffffff00
576
+ );
577
+ --bm-comp-badge-color-accent-subtle-fg: var(
578
+ --bm-alias-color-ramp-accent-base,
579
+ #43bfd6
580
+ );
581
+ --bm-comp-badge-color-accent-subtle-border: var(
582
+ --bm-alias-color-ramp-accent-muter,
583
+ #00768f
584
+ );
467
585
  --bm-comp-badge-space-gap: var(--bm-sem-space-25, 0.25rem);
468
586
  --bm-comp-badge-space-x: var(--bm-alias-badge-space-x, 0.75rem);
469
587
  --bm-comp-badge-size-icon: var(--bm-sem-size-icon-sm, 1rem);
@@ -549,4 +667,50 @@
549
667
  --bm-sem-typo-compact-label-md,
550
668
  600 1rem/1.25rem "Source Sans Pro"
551
669
  );
670
+ --bm-comp-badge-indicator-radius: var(--bm-sem-radius-round, 624.938rem);
671
+ --bm-comp-badge-indicator-space-x: var(--bm-sem-space-25, 0.25rem);
672
+ --bm-comp-badge-indicator-size-sm: var(--bm-primitive-dimension-100, 1rem);
673
+ --bm-comp-badge-indicator-size-md: var(--bm-primitive-dimension-125, 1.25rem);
674
+ --bm-comp-badge-indicator-size-marker-sm: var(
675
+ --bm-primitive-dimension-50,
676
+ 0.5rem
677
+ );
678
+ --bm-comp-badge-indicator-size-marker-md: var(
679
+ --bm-primitive-dimension-75,
680
+ 0.75rem
681
+ );
682
+ --bm-comp-badge-indicator-size-icon-sm: 0.625rem;
683
+ --bm-comp-badge-indicator-size-icon-md: var(--bm-sem-size-icon-xs, 0.75rem);
684
+ --bm-comp-badge-indicator-typo-sm: var(
685
+ --bm-sem-typo-compact-label-xs,
686
+ 600 0.75rem/1rem "Source Sans Pro"
687
+ );
688
+ --bm-comp-badge-indicator-typo-md: var(
689
+ --bm-sem-typo-compact-label-xs,
690
+ 600 0.75rem/1rem "Source Sans Pro"
691
+ );
692
+ --bm-comp-badge-indicator-color-marker-accent-medium-bg: var(
693
+ --bm-alias-color-ramp-accent-mute,
694
+ #00a2c0
695
+ );
696
+ --bm-comp-badge-indicator-color-marker-info-primary-medium-bg: var(
697
+ --bm-alias-color-ramp-blue-mute,
698
+ #0095e0
699
+ );
700
+ --bm-comp-badge-indicator-color-marker-info-secondary-medium-bg: var(
701
+ --bm-alias-color-ramp-gray-mute,
702
+ #8697a5
703
+ );
704
+ --bm-comp-badge-indicator-color-marker-positive-medium-bg: var(
705
+ --bm-alias-color-ramp-green-mute,
706
+ #24a148
707
+ );
708
+ --bm-comp-badge-indicator-color-marker-warning-medium-bg: var(
709
+ --bm-alias-color-ramp-orange-mute,
710
+ #eb6200
711
+ );
712
+ --bm-comp-badge-indicator-color-marker-negative-medium-bg: var(
713
+ --bm-alias-color-ramp-red-mute,
714
+ #ed464c
715
+ );
552
716
  }
package/components/BadgeIndicator.css ADDED
@@ -0,0 +1,114 @@
1
+ :root,
2
+ :host,
3
+ .bm-light,
4
+ .bm-dark .bm-inverse,
5
+ .bm-dark.bm-inverse,
6
+ [data-bm-theme~="bm-dark"] .bm-inverse,
7
+ [data-bm-theme~="bm-dark"].bm-inverse,
8
+ .bm-enterprise,
9
+ .bm-consumer,
10
+ [data-bm-theme~="bm-light"] {
11
+ --bm-comp-badge-indicator-radius: var(--bm-sem-radius-round, 624.938rem);
12
+ --bm-comp-badge-indicator-space-x: var(--bm-sem-space-25, 0.25rem);
13
+ --bm-comp-badge-indicator-size-sm: var(--bm-primitive-dimension-100, 1rem);
14
+ --bm-comp-badge-indicator-size-md: var(--bm-primitive-dimension-125, 1.25rem);
15
+ --bm-comp-badge-indicator-size-marker-sm: var(
16
+ --bm-primitive-dimension-50,
17
+ 0.5rem
18
+ );
19
+ --bm-comp-badge-indicator-size-marker-md: var(
20
+ --bm-primitive-dimension-75,
21
+ 0.75rem
22
+ );
23
+ --bm-comp-badge-indicator-size-icon-sm: 0.625rem;
24
+ --bm-comp-badge-indicator-size-icon-md: var(--bm-sem-size-icon-xs, 0.75rem);
25
+ --bm-comp-badge-indicator-typo-sm: var(
26
+ --bm-sem-typo-compact-label-xs,
27
+ 600 0.75rem/1rem "Source Sans Pro"
28
+ );
29
+ --bm-comp-badge-indicator-typo-md: var(
30
+ --bm-sem-typo-compact-label-xs,
31
+ 600 0.75rem/1rem "Source Sans Pro"
32
+ );
33
+ --bm-comp-badge-indicator-color-marker-accent-medium-bg: var(
34
+ --bm-alias-color-ramp-accent-mute,
35
+ #00a2c0
36
+ );
37
+ --bm-comp-badge-indicator-color-marker-info-primary-medium-bg: var(
38
+ --bm-alias-color-ramp-blue-mute,
39
+ #0095e0
40
+ );
41
+ --bm-comp-badge-indicator-color-marker-info-secondary-medium-bg: var(
42
+ --bm-alias-color-ramp-gray-mute,
43
+ #8697a5
44
+ );
45
+ --bm-comp-badge-indicator-color-marker-positive-medium-bg: var(
46
+ --bm-alias-color-ramp-green-mute,
47
+ #24a148
48
+ );
49
+ --bm-comp-badge-indicator-color-marker-warning-medium-bg: var(
50
+ --bm-alias-color-ramp-orange-mute,
51
+ #eb6200
52
+ );
53
+ --bm-comp-badge-indicator-color-marker-negative-medium-bg: var(
54
+ --bm-alias-color-ramp-red-mute,
55
+ #ed464c
56
+ );
57
+ }
58
+
59
+ :host,
60
+ .bm-dark,
61
+ .bm-light .bm-inverse,
62
+ .bm-light.bm-inverse,
63
+ [data-bm-theme~="bm-light"] .bm-inverse,
64
+ [data-bm-theme~="bm-light"].bm-inverse,
65
+ .bm-enterprise,
66
+ .bm-consumer,
67
+ [data-bm-theme~="bm-dark"] {
68
+ --bm-comp-badge-indicator-radius: var(--bm-sem-radius-round, 624.938rem);
69
+ --bm-comp-badge-indicator-space-x: var(--bm-sem-space-25, 0.25rem);
70
+ --bm-comp-badge-indicator-size-sm: var(--bm-primitive-dimension-100, 1rem);
71
+ --bm-comp-badge-indicator-size-md: var(--bm-primitive-dimension-125, 1.25rem);
72
+ --bm-comp-badge-indicator-size-marker-sm: var(
73
+ --bm-primitive-dimension-50,
74
+ 0.5rem
75
+ );
76
+ --bm-comp-badge-indicator-size-marker-md: var(
77
+ --bm-primitive-dimension-75,
78
+ 0.75rem
79
+ );
80
+ --bm-comp-badge-indicator-size-icon-sm: 0.625rem;
81
+ --bm-comp-badge-indicator-size-icon-md: var(--bm-sem-size-icon-xs, 0.75rem);
82
+ --bm-comp-badge-indicator-typo-sm: var(
83
+ --bm-sem-typo-compact-label-xs,
84
+ 600 0.75rem/1rem "Source Sans Pro"
85
+ );
86
+ --bm-comp-badge-indicator-typo-md: var(
87
+ --bm-sem-typo-compact-label-xs,
88
+ 600 0.75rem/1rem "Source Sans Pro"
89
+ );
90
+ --bm-comp-badge-indicator-color-marker-accent-medium-bg: var(
91
+ --bm-alias-color-ramp-accent-mute,
92
+ #00a2c0
93
+ );
94
+ --bm-comp-badge-indicator-color-marker-info-primary-medium-bg: var(
95
+ --bm-alias-color-ramp-blue-mute,
96
+ #0095e0
97
+ );
98
+ --bm-comp-badge-indicator-color-marker-info-secondary-medium-bg: var(
99
+ --bm-alias-color-ramp-gray-mute,
100
+ #8697a5
101
+ );
102
+ --bm-comp-badge-indicator-color-marker-positive-medium-bg: var(
103
+ --bm-alias-color-ramp-green-mute,
104
+ #24a148
105
+ );
106
+ --bm-comp-badge-indicator-color-marker-warning-medium-bg: var(
107
+ --bm-alias-color-ramp-orange-mute,
108
+ #eb6200
109
+ );
110
+ --bm-comp-badge-indicator-color-marker-negative-medium-bg: var(
111
+ --bm-alias-color-ramp-red-mute,
112
+ #ed464c
113
+ );
114
+ }