@viasat/beam-tokens 2.29.1 → 2.36.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 (28) hide show
  1. package/components/ActionList.css +1 -1
  2. package/components/Avatar.css +6 -6
  3. package/components/Badge.css +4 -4
  4. package/components/Button.css +43 -49
  5. package/components/Chip.css +11 -11
  6. package/components/CloseButton.css +2 -8
  7. package/components/EmptyState.css +2 -2
  8. package/components/FileUpload.css +6 -6
  9. package/components/Header.css +2 -2
  10. package/components/Input.css +8 -8
  11. package/components/Link.css +8 -8
  12. package/components/Pagination.css +1 -1
  13. package/components/ProgressBar.css +2 -2
  14. package/components/Slider.css +6 -6
  15. package/components/Spinner.css +2 -2
  16. package/components/Stepper.css +10 -10
  17. package/index.cjs +2 -2
  18. package/index.js +1342 -1350
  19. package/package.json +1 -1
  20. package/themes/onefi.css +1415 -4698
  21. package/tokens.css +719 -438
  22. package/tokens.scss +216 -1784
  23. package/types/configs/components/sd.components.config.d.ts +2 -1
  24. package/types/configs/dimensions/sd.dimension.config.d.ts +2 -1
  25. package/types/lib/js/tokens.d.ts +6 -14
  26. package/types/lib/js/tokensObj.d.ts +41 -25
  27. package/types/lib/storybook-token-table/tokens.d.ts +46 -33
  28. package/types/utils/constants/token-types.d.ts +2 -0
package/components/ActionList.css CHANGED
@@ -91,7 +91,7 @@
91
91
  --bm-comp-actionlist-color-text: var(--bm-sem-color-text-primary, #ffffff);
92
92
  --bm-comp-actionlist-color-bg-selected: var(
93
93
  --bm-sem-color-surface-selected,
94
- #00414d
94
+ #01262d
95
95
  );
96
96
  --bm-comp-actionlist-color-text-selected: var(
97
97
  --bm-sem-color-text-selected,
package/components/Avatar.css CHANGED
@@ -20,7 +20,7 @@
20
20
  --bm-comp-avatar-size-icon-xl: var(--bm-sem-size-icon-lg, 1.5rem);
21
21
  --bm-comp-avatar-color-border: var(--bm-sem-color-surface-01, #ffffff);
22
22
  --bm-comp-avatar-color-accent-bg: var(
23
- --bm-utility-color-accent-default,
23
+ --bm-alias-color-brand-primary-default,
24
24
  #00768f
25
25
  );
26
26
  --bm-comp-avatar-color-accent-fg: var(
@@ -28,7 +28,7 @@
28
28
  #ffffff
29
29
  );
30
30
  --bm-comp-avatar-color-neutral-bg: var(
31
- --bm-utility-color-gray-default,
31
+ --bm-alias-color-ramp-gray-base,
32
32
  #576775
33
33
  );
34
34
  --bm-comp-avatar-color-neutral-fg: var(
@@ -36,7 +36,7 @@
36
36
  #ffffff
37
37
  );
38
38
  --bm-comp-avatar-color-overflow-bg: var(
39
- --bm-utility-color-gray-subtler,
39
+ --bm-alias-color-ramp-gray-subtler,
40
40
  #dfe7ec
41
41
  );
42
42
  --bm-comp-avatar-color-overflow-fg: var(--bm-sem-color-text-primary, #141d24);
@@ -87,7 +87,7 @@
87
87
  --bm-comp-avatar-size-icon-xl: var(--bm-sem-size-icon-lg, 1.5rem);
88
88
  --bm-comp-avatar-color-border: var(--bm-sem-color-surface-01, #202e39);
89
89
  --bm-comp-avatar-color-accent-bg: var(
90
- --bm-utility-color-accent-default,
90
+ --bm-alias-color-brand-primary-default,
91
91
  #43bfd6
92
92
  );
93
93
  --bm-comp-avatar-color-accent-fg: var(
@@ -95,7 +95,7 @@
95
95
  #141d24
96
96
  );
97
97
  --bm-comp-avatar-color-neutral-bg: var(
98
- --bm-utility-color-gray-default,
98
+ --bm-alias-color-ramp-gray-base,
99
99
  #9fafbc
100
100
  );
101
101
  --bm-comp-avatar-color-neutral-fg: var(
@@ -103,7 +103,7 @@
103
103
  #141d24
104
104
  );
105
105
  --bm-comp-avatar-color-overflow-bg: var(
106
- --bm-utility-color-gray-subtler,
106
+ --bm-alias-color-ramp-gray-subtler,
107
107
  #32424e
108
108
  );
109
109
  --bm-comp-avatar-color-overflow-fg: var(--bm-sem-color-text-primary, #ffffff);
package/components/Badge.css CHANGED
@@ -189,11 +189,11 @@
189
189
  rgba(87, 103, 117, 0.4)
190
190
  );
191
191
  --bm-comp-badge-space-gap: var(--bm-sem-space-25, 0.25rem);
192
- --bm-comp-badge-space-x: var(--bm-utility-comp-badge-space-x, 0.75rem);
192
+ --bm-comp-badge-space-x: var(--bm-alias-badge-space-x, 0.75rem);
193
193
  --bm-comp-badge-size-icon: var(--bm-sem-size-icon-sm, 1rem);
194
194
  --bm-comp-badge-size-sm-height: var(--bm-primitive-dimension-150, 1.5rem);
195
195
  --bm-comp-badge-size-md-height: var(--bm-primitive-dimension-175, 1.75rem);
196
- --bm-comp-badge-radius: var(--bm-utility-comp-badge-radius, 624.938rem);
196
+ --bm-comp-badge-radius: var(--bm-alias-badge-radius, 624.938rem);
197
197
  --bm-comp-badge-border-width: var(--bm-sem-border-width-action, 0.063rem);
198
198
  --bm-comp-badge-typo-sm: var(
199
199
  --bm-sem-typo-label-xs,
@@ -465,11 +465,11 @@
465
465
  rgba(209, 218, 224, 0.4)
466
466
  );
467
467
  --bm-comp-badge-space-gap: var(--bm-sem-space-25, 0.25rem);
468
- --bm-comp-badge-space-x: var(--bm-utility-comp-badge-space-x, 0.75rem);
468
+ --bm-comp-badge-space-x: var(--bm-alias-badge-space-x, 0.75rem);
469
469
  --bm-comp-badge-size-icon: var(--bm-sem-size-icon-sm, 1rem);
470
470
  --bm-comp-badge-size-sm-height: var(--bm-primitive-dimension-150, 1.5rem);
471
471
  --bm-comp-badge-size-md-height: var(--bm-primitive-dimension-175, 1.75rem);
472
- --bm-comp-badge-radius: var(--bm-utility-comp-badge-radius, 624.938rem);
472
+ --bm-comp-badge-radius: var(--bm-alias-badge-radius, 624.938rem);
473
473
  --bm-comp-badge-border-width: var(--bm-sem-border-width-action, 0.063rem);
474
474
  --bm-comp-badge-typo-sm: var(
475
475
  --bm-sem-typo-label-xs,
package/components/Button.css CHANGED
@@ -19,28 +19,28 @@
19
19
  --bm-comp-btn-color-accent-filled-border: var(--bm-sem-color-none, #ffffff00);
20
20
  --bm-comp-btn-color-accent-outline-bg: var(--bm-sem-color-none, #ffffff00);
21
21
  --bm-comp-btn-color-accent-outline-fg: var(
22
- --bm-utility-color-accent-default,
22
+ --bm-sem-color-action-primary,
23
23
  #00768f
24
24
  );
25
25
  --bm-comp-btn-color-accent-outline-border: var(
26
- --bm-utility-color-accent-default,
26
+ --bm-sem-color-action-primary,
27
27
  #00768f
28
28
  );
29
29
  --bm-comp-btn-color-accent-ghost-bg: var(--bm-sem-color-none, #ffffff00);
30
30
  --bm-comp-btn-color-accent-ghost-fg: var(
31
- --bm-utility-color-accent-default,
31
+ --bm-sem-color-action-primary,
32
32
  #00768f
33
33
  );
34
34
  --bm-comp-btn-color-accent-ghost-border: var(--bm-sem-color-none, #ffffff00);
35
35
  --bm-comp-btn-color-accent-bare-bg: var(--bm-sem-color-none, #ffffff00);
36
36
  --bm-comp-btn-color-accent-bare-fg: var(
37
- --bm-utility-color-accent-default,
37
+ --bm-sem-color-action-primary,
38
38
  #00768f
39
39
  );
40
40
  --bm-comp-btn-color-accent-bare-border: var(--bm-sem-color-none, #ffffff00);
41
41
  --bm-comp-btn-color-neutral-filled-bg: var(
42
- --bm-sem-color-surface-inverse,
43
- #202e39
42
+ --bm-sem-color-action-neutral,
43
+ #141d24
44
44
  );
45
45
  --bm-comp-btn-color-neutral-filled-fg: var(
46
46
  --bm-sem-color-text-primary-inverse,
@@ -52,22 +52,22 @@
52
52
  );
53
53
  --bm-comp-btn-color-neutral-outline-bg: var(--bm-sem-color-none, #ffffff00);
54
54
  --bm-comp-btn-color-neutral-outline-fg: var(
55
- --bm-sem-color-text-primary,
55
+ --bm-sem-color-action-neutral,
56
56
  #141d24
57
57
  );
58
58
  --bm-comp-btn-color-neutral-outline-border: var(
59
- --bm-sem-color-border-inverse,
60
- #465967
59
+ --bm-sem-color-action-neutral,
60
+ #141d24
61
61
  );
62
62
  --bm-comp-btn-color-neutral-ghost-bg: var(--bm-sem-color-none, #ffffff00);
63
63
  --bm-comp-btn-color-neutral-ghost-fg: var(
64
- --bm-sem-color-text-primary,
64
+ --bm-sem-color-action-neutral,
65
65
  #141d24
66
66
  );
67
67
  --bm-comp-btn-color-neutral-ghost-border: var(--bm-sem-color-none, #ffffff00);
68
68
  --bm-comp-btn-color-neutral-bare-bg: var(--bm-sem-color-none, #ffffff00);
69
69
  --bm-comp-btn-color-neutral-bare-fg: var(
70
- --bm-sem-color-text-primary,
70
+ --bm-sem-color-action-neutral,
71
71
  #141d24
72
72
  );
73
73
  --bm-comp-btn-color-neutral-bare-border: var(--bm-sem-color-none, #ffffff00);
@@ -136,16 +136,16 @@
136
136
  #ffffff00
137
137
  );
138
138
  --bm-comp-btn-color-destructive-outline-fg: var(
139
- --bm-sem-color-text-negative,
139
+ --bm-sem-color-action-destructive,
140
140
  #cc2429
141
141
  );
142
142
  --bm-comp-btn-color-destructive-outline-border: var(
143
- --bm-sem-color-border-negative-strong,
143
+ --bm-sem-color-action-destructive,
144
144
  #cc2429
145
145
  );
146
146
  --bm-comp-btn-color-destructive-ghost-bg: var(--bm-sem-color-none, #ffffff00);
147
147
  --bm-comp-btn-color-destructive-ghost-fg: var(
148
- --bm-sem-color-text-negative,
148
+ --bm-sem-color-action-destructive,
149
149
  #cc2429
150
150
  );
151
151
  --bm-comp-btn-color-destructive-ghost-border: var(
@@ -154,7 +154,7 @@
154
154
  );
155
155
  --bm-comp-btn-color-destructive-bare-bg: var(--bm-sem-color-none, #ffffff00);
156
156
  --bm-comp-btn-color-destructive-bare-fg: var(
157
- --bm-sem-color-text-negative,
157
+ --bm-sem-color-action-destructive,
158
158
  #cc2429
159
159
  );
160
160
  --bm-comp-btn-color-destructive-bare-border: var(
@@ -206,21 +206,18 @@
206
206
  --bm-comp-btn-size-lg-icon: var(--bm-sem-size-icon-lg, 1.5rem);
207
207
  --bm-comp-btn-space-gap: var(--bm-sem-space-25, 0.25rem);
208
208
  --bm-comp-btn-space-label-x: var(--bm-sem-space-25, 0.25rem);
209
- --bm-comp-btn-space-sm-x: var(--bm-utility-comp-btn-space-sm-x, 0.5rem);
209
+ --bm-comp-btn-space-sm-x: var(--bm-alias-action-space-sm-x, 0.5rem);
210
210
  --bm-comp-btn-space-sm-y: var(--bm-sem-space-25, 0.25rem);
211
- --bm-comp-btn-space-md-x: var(--bm-utility-comp-btn-space-md-x, 0.75rem);
211
+ --bm-comp-btn-space-md-x: var(--bm-alias-action-space-md-x, 0.75rem);
212
212
  --bm-comp-btn-space-md-y: var(--bm-sem-space-50, 0.5rem);
213
- --bm-comp-btn-space-lg-x: var(--bm-utility-comp-btn-space-lg-x, 1rem);
213
+ --bm-comp-btn-space-lg-x: var(--bm-alias-action-space-lg-x, 1rem);
214
214
  --bm-comp-btn-space-lg-y: var(--bm-sem-space-50, 0.5rem);
215
215
  --bm-comp-btn-space-bare-x: var(--bm-sem-space-0, 0);
216
216
  --bm-comp-btn-space-bare-y: var(--bm-sem-space-0, 0);
217
217
  --bm-comp-btn-space-bare-gap: var(--bm-sem-space-50, 0.5rem);
218
218
  --bm-comp-btn-space-bare-label-x: var(--bm-sem-space-0, 0);
219
- --bm-comp-btn-radius-container: var(
220
- --bm-utility-comp-btn-radius-container,
221
- 0.25rem
222
- );
223
- --bm-comp-btn-radius-focus: var(--bm-utility-comp-btn-radius-focus, 0.5rem);
219
+ --bm-comp-btn-radius-container: var(--bm-sem-radius-action-default, 0.25rem);
220
+ --bm-comp-btn-radius-focus: var(--bm-alias-action-radius-focus, 0.5rem);
224
221
  --bm-comp-btn-typo-sm: var(
225
222
  --bm-sem-typo-compact-label-sm,
226
223
  600 0.875rem/1rem "Source Sans Pro"
@@ -257,27 +254,27 @@
257
254
  --bm-comp-btn-color-accent-filled-border: var(--bm-sem-color-none, #ffffff00);
258
255
  --bm-comp-btn-color-accent-outline-bg: var(--bm-sem-color-none, #ffffff00);
259
256
  --bm-comp-btn-color-accent-outline-fg: var(
260
- --bm-utility-color-accent-default,
257
+ --bm-sem-color-action-primary,
261
258
  #43bfd6
262
259
  );
263
260
  --bm-comp-btn-color-accent-outline-border: var(
264
- --bm-utility-color-accent-default,
261
+ --bm-sem-color-action-primary,
265
262
  #43bfd6
266
263
  );
267
264
  --bm-comp-btn-color-accent-ghost-bg: var(--bm-sem-color-none, #ffffff00);
268
265
  --bm-comp-btn-color-accent-ghost-fg: var(
269
- --bm-utility-color-accent-default,
266
+ --bm-sem-color-action-primary,
270
267
  #43bfd6
271
268
  );
272
269
  --bm-comp-btn-color-accent-ghost-border: var(--bm-sem-color-none, #ffffff00);
273
270
  --bm-comp-btn-color-accent-bare-bg: var(--bm-sem-color-none, #ffffff00);
274
271
  --bm-comp-btn-color-accent-bare-fg: var(
275
- --bm-utility-color-accent-default,
272
+ --bm-sem-color-action-primary,
276
273
  #43bfd6
277
274
  );
278
275
  --bm-comp-btn-color-accent-bare-border: var(--bm-sem-color-none, #ffffff00);
279
276
  --bm-comp-btn-color-neutral-filled-bg: var(
280
- --bm-sem-color-surface-inverse,
277
+ --bm-sem-color-action-neutral,
281
278
  #ffffff
282
279
  );
283
280
  --bm-comp-btn-color-neutral-filled-fg: var(
@@ -290,22 +287,22 @@
290
287
  );
291
288
  --bm-comp-btn-color-neutral-outline-bg: var(--bm-sem-color-none, #ffffff00);
292
289
  --bm-comp-btn-color-neutral-outline-fg: var(
293
- --bm-sem-color-text-primary,
290
+ --bm-sem-color-action-neutral,
294
291
  #ffffff
295
292
  );
296
293
  --bm-comp-btn-color-neutral-outline-border: var(
297
- --bm-sem-color-border-inverse,
298
- #dfe7ec
294
+ --bm-sem-color-action-neutral,
295
+ #ffffff
299
296
  );
300
297
  --bm-comp-btn-color-neutral-ghost-bg: var(--bm-sem-color-none, #ffffff00);
301
298
  --bm-comp-btn-color-neutral-ghost-fg: var(
302
- --bm-sem-color-text-primary,
299
+ --bm-sem-color-action-neutral,
303
300
  #ffffff
304
301
  );
305
302
  --bm-comp-btn-color-neutral-ghost-border: var(--bm-sem-color-none, #ffffff00);
306
303
  --bm-comp-btn-color-neutral-bare-bg: var(--bm-sem-color-none, #ffffff00);
307
304
  --bm-comp-btn-color-neutral-bare-fg: var(
308
- --bm-sem-color-text-primary,
305
+ --bm-sem-color-action-neutral,
309
306
  #ffffff
310
307
  );
311
308
  --bm-comp-btn-color-neutral-bare-border: var(--bm-sem-color-none, #ffffff00);
@@ -374,17 +371,17 @@
374
371
  #ffffff00
375
372
  );
376
373
  --bm-comp-btn-color-destructive-outline-fg: var(
377
- --bm-sem-color-text-negative,
378
- #f67378
374
+ --bm-sem-color-action-destructive,
375
+ #cc2429
379
376
  );
380
377
  --bm-comp-btn-color-destructive-outline-border: var(
381
- --bm-sem-color-border-negative-strong,
382
- #f67378
378
+ --bm-sem-color-action-destructive,
379
+ #cc2429
383
380
  );
384
381
  --bm-comp-btn-color-destructive-ghost-bg: var(--bm-sem-color-none, #ffffff00);
385
382
  --bm-comp-btn-color-destructive-ghost-fg: var(
386
- --bm-sem-color-text-negative,
387
- #f67378
383
+ --bm-sem-color-action-destructive,
384
+ #cc2429
388
385
  );
389
386
  --bm-comp-btn-color-destructive-ghost-border: var(
390
387
  --bm-sem-color-none,
@@ -392,8 +389,8 @@
392
389
  );
393
390
  --bm-comp-btn-color-destructive-bare-bg: var(--bm-sem-color-none, #ffffff00);
394
391
  --bm-comp-btn-color-destructive-bare-fg: var(
395
- --bm-sem-color-text-negative,
396
- #f67378
392
+ --bm-sem-color-action-destructive,
393
+ #cc2429
397
394
  );
398
395
  --bm-comp-btn-color-destructive-bare-border: var(
399
396
  --bm-sem-color-none,
@@ -444,21 +441,18 @@
444
441
  --bm-comp-btn-size-lg-icon: var(--bm-sem-size-icon-lg, 1.5rem);
445
442
  --bm-comp-btn-space-gap: var(--bm-sem-space-25, 0.25rem);
446
443
  --bm-comp-btn-space-label-x: var(--bm-sem-space-25, 0.25rem);
447
- --bm-comp-btn-space-sm-x: var(--bm-utility-comp-btn-space-sm-x, 0.5rem);
444
+ --bm-comp-btn-space-sm-x: var(--bm-alias-action-space-sm-x, 0.5rem);
448
445
  --bm-comp-btn-space-sm-y: var(--bm-sem-space-25, 0.25rem);
449
- --bm-comp-btn-space-md-x: var(--bm-utility-comp-btn-space-md-x, 0.75rem);
446
+ --bm-comp-btn-space-md-x: var(--bm-alias-action-space-md-x, 0.75rem);
450
447
  --bm-comp-btn-space-md-y: var(--bm-sem-space-50, 0.5rem);
451
- --bm-comp-btn-space-lg-x: var(--bm-utility-comp-btn-space-lg-x, 1rem);
448
+ --bm-comp-btn-space-lg-x: var(--bm-alias-action-space-lg-x, 1rem);
452
449
  --bm-comp-btn-space-lg-y: var(--bm-sem-space-50, 0.5rem);
453
450
  --bm-comp-btn-space-bare-x: var(--bm-sem-space-0, 0);
454
451
  --bm-comp-btn-space-bare-y: var(--bm-sem-space-0, 0);
455
452
  --bm-comp-btn-space-bare-gap: var(--bm-sem-space-50, 0.5rem);
456
453
  --bm-comp-btn-space-bare-label-x: var(--bm-sem-space-0, 0);
457
- --bm-comp-btn-radius-container: var(
458
- --bm-utility-comp-btn-radius-container,
459
- 0.25rem
460
- );
461
- --bm-comp-btn-radius-focus: var(--bm-utility-comp-btn-radius-focus, 0.5rem);
454
+ --bm-comp-btn-radius-container: var(--bm-sem-radius-action-default, 0.25rem);
455
+ --bm-comp-btn-radius-focus: var(--bm-alias-action-radius-focus, 0.5rem);
462
456
  --bm-comp-btn-typo-sm: var(
463
457
  --bm-sem-typo-compact-label-sm,
464
458
  600 0.875rem/1rem "Source Sans Pro"
package/components/Chip.css CHANGED
@@ -24,15 +24,15 @@
24
24
  #00768f
25
25
  );
26
26
  --bm-comp-chip-radius-container: var(
27
- --bm-utility-comp-chip-radius-container,
27
+ --bm-alias-chip-radius-container,
28
28
  0.25rem
29
29
  );
30
- --bm-comp-chip-radius-focus: var(--bm-utility-comp-chip-radius-focus, 0.5rem);
30
+ --bm-comp-chip-radius-focus: var(--bm-alias-chip-radius-focus, 0.5rem);
31
31
  --bm-comp-chip-border-width: var(--bm-sem-border-width-action, 0.063rem);
32
- --bm-comp-chip-space-sm-x: var(--bm-utility-comp-chip-space-sm-x, 0.5rem);
32
+ --bm-comp-chip-space-sm-x: var(--bm-alias-chip-space-sm-x, 0.5rem);
33
33
  --bm-comp-chip-space-sm-gap: var(--bm-sem-space-25, 0.25rem);
34
- --bm-comp-chip-space-md-x: var(--bm-utility-comp-chip-space-md-x, 0.5rem);
35
- --bm-comp-chip-space-lg-x: var(--bm-utility-comp-chip-space-lg-x, 0.75rem);
34
+ --bm-comp-chip-space-md-x: var(--bm-alias-chip-space-md-x, 0.5rem);
35
+ --bm-comp-chip-space-lg-x: var(--bm-alias-chip-space-lg-x, 0.75rem);
36
36
  --bm-comp-chip-space-text: var(--bm-sem-space-25, 0.25rem);
37
37
  --bm-comp-chip-size-sm-height: var(--bm-sem-size-height-xs, 1.5rem);
38
38
  --bm-comp-chip-size-sm-icon: var(--bm-sem-size-icon-sm, 1rem);
@@ -72,7 +72,7 @@
72
72
  --bm-comp-chip-color-border: var(--bm-sem-color-none, #ffffff00);
73
73
  --bm-comp-chip-color-bg-selected: var(
74
74
  --bm-sem-color-surface-selected,
75
- #00414d
75
+ #01262d
76
76
  );
77
77
  --bm-comp-chip-color-fg-selected: var(--bm-sem-color-icon-selected, #43bfd6);
78
78
  --bm-comp-chip-color-border-selected: var(
@@ -80,15 +80,15 @@
80
80
  #43bfd6
81
81
  );
82
82
  --bm-comp-chip-radius-container: var(
83
- --bm-utility-comp-chip-radius-container,
83
+ --bm-alias-chip-radius-container,
84
84
  0.25rem
85
85
  );
86
- --bm-comp-chip-radius-focus: var(--bm-utility-comp-chip-radius-focus, 0.5rem);
86
+ --bm-comp-chip-radius-focus: var(--bm-alias-chip-radius-focus, 0.5rem);
87
87
  --bm-comp-chip-border-width: var(--bm-sem-border-width-action, 0.063rem);
88
- --bm-comp-chip-space-sm-x: var(--bm-utility-comp-chip-space-sm-x, 0.5rem);
88
+ --bm-comp-chip-space-sm-x: var(--bm-alias-chip-space-sm-x, 0.5rem);
89
89
  --bm-comp-chip-space-sm-gap: var(--bm-sem-space-25, 0.25rem);
90
- --bm-comp-chip-space-md-x: var(--bm-utility-comp-chip-space-md-x, 0.5rem);
91
- --bm-comp-chip-space-lg-x: var(--bm-utility-comp-chip-space-lg-x, 0.75rem);
90
+ --bm-comp-chip-space-md-x: var(--bm-alias-chip-space-md-x, 0.5rem);
91
+ --bm-comp-chip-space-lg-x: var(--bm-alias-chip-space-lg-x, 0.75rem);
92
92
  --bm-comp-chip-space-text: var(--bm-sem-space-25, 0.25rem);
93
93
  --bm-comp-chip-size-sm-height: var(--bm-sem-size-height-xs, 1.5rem);
94
94
  --bm-comp-chip-size-sm-icon: var(--bm-sem-size-icon-sm, 1rem);
package/components/CloseButton.css CHANGED
@@ -19,10 +19,7 @@
19
19
  --bm-comp-close-btn-size-md: var(--bm-sem-size-icon-md, 1.25rem);
20
20
  --bm-comp-close-btn-size-lg: var(--bm-sem-size-icon-lg, 1.5rem);
21
21
  --bm-comp-close-btn-size-xl: var(--bm-sem-size-icon-xl, 1.75rem);
22
- --bm-comp-close-btn-radius: var(
23
- --bm-utility-comp-btn-radius-container,
24
- 0.25rem
25
- );
22
+ --bm-comp-close-btn-radius: var(--bm-alias-action-radius-container, 0.25rem);
26
23
  }
27
24
 
28
25
  :host,
@@ -45,8 +42,5 @@
45
42
  --bm-comp-close-btn-size-md: var(--bm-sem-size-icon-md, 1.25rem);
46
43
  --bm-comp-close-btn-size-lg: var(--bm-sem-size-icon-lg, 1.5rem);
47
44
  --bm-comp-close-btn-size-xl: var(--bm-sem-size-icon-xl, 1.75rem);
48
- --bm-comp-close-btn-radius: var(
49
- --bm-utility-comp-btn-radius-container,
50
- 0.25rem
51
- );
45
+ --bm-comp-close-btn-radius: var(--bm-alias-action-radius-container, 0.25rem);
52
46
  }
package/components/EmptyState.css CHANGED
@@ -14,7 +14,7 @@
14
14
  );
15
15
  --bm-comp-empty-state-color-body: var(--bm-sem-color-text-secondary, #576775);
16
16
  --bm-comp-empty-state-color-icon: var(
17
- --bm-utility-color-accent-default,
17
+ --bm-alias-color-brand-primary-default,
18
18
  #00768f
19
19
  );
20
20
  --bm-comp-empty-state-space-gap: var(--bm-sem-space-200, 2rem);
@@ -47,7 +47,7 @@
47
47
  );
48
48
  --bm-comp-empty-state-color-body: var(--bm-sem-color-text-secondary, #c3cdd5);
49
49
  --bm-comp-empty-state-color-icon: var(
50
- --bm-utility-color-accent-default,
50
+ --bm-alias-color-brand-primary-default,
51
51
  #43bfd6
52
52
  );
53
53
  --bm-comp-empty-state-space-gap: var(--bm-sem-space-200, 2rem);
package/components/FileUpload.css CHANGED
@@ -25,15 +25,15 @@
25
25
  #8697a5
26
26
  );
27
27
  --bm-comp-file-upload-color-dropzone-bg-drag: var(
28
- --bm-utility-color-accent-subtlest,
28
+ --bm-sem-color-surface-selected,
29
29
  #e9fcff
30
30
  );
31
31
  --bm-comp-file-upload-color-dropzone-border-drag: var(
32
- --bm-utility-color-accent-default,
32
+ --bm-alias-color-brand-primary-default,
33
33
  #00768f
34
34
  );
35
35
  --bm-comp-file-upload-color-dropzone-icon-drag: var(
36
- --bm-utility-color-accent-default,
36
+ --bm-alias-color-brand-primary-default,
37
37
  #00768f
38
38
  );
39
39
  --bm-comp-file-upload-color-file-bg: var(
@@ -132,15 +132,15 @@
132
132
  #9fafbc
133
133
  );
134
134
  --bm-comp-file-upload-color-dropzone-bg-drag: var(
135
- --bm-utility-color-accent-subtlest,
135
+ --bm-sem-color-surface-selected,
136
136
  #01262d
137
137
  );
138
138
  --bm-comp-file-upload-color-dropzone-border-drag: var(
139
- --bm-utility-color-accent-default,
139
+ --bm-alias-color-brand-primary-default,
140
140
  #43bfd6
141
141
  );
142
142
  --bm-comp-file-upload-color-dropzone-icon-drag: var(
143
- --bm-utility-color-accent-default,
143
+ --bm-alias-color-brand-primary-default,
144
144
  #43bfd6
145
145
  );
146
146
  --bm-comp-file-upload-color-file-bg: var(
package/components/Header.css CHANGED
@@ -19,7 +19,7 @@
19
19
  #141d24
20
20
  );
21
21
  --bm-comp-header-color-nav-item-indicator: var(
22
- --bm-utility-color-accent-default,
22
+ --bm-sem-color-icon-selected,
23
23
  #00768f
24
24
  );
25
25
  --bm-comp-header-space-x: var(--bm-sem-space-100, 1rem);
@@ -71,7 +71,7 @@
71
71
  #ffffff
72
72
  );
73
73
  --bm-comp-header-color-nav-item-indicator: var(
74
- --bm-utility-color-accent-default,
74
+ --bm-sem-color-icon-selected,
75
75
  #43bfd6
76
76
  );
77
77
  --bm-comp-header-space-x: var(--bm-sem-space-100, 1rem);
package/components/Input.css CHANGED
@@ -39,7 +39,7 @@
39
39
  );
40
40
  --bm-comp-input-color-divider: var(--bm-sem-color-border-02, #d1dae0);
41
41
  --bm-comp-input-color-choice-checkbox-selected-bg: var(
42
- --bm-utility-color-accent-default,
42
+ --bm-alias-color-brand-primary-default,
43
43
  #00768f
44
44
  );
45
45
  --bm-comp-input-color-choice-checkbox-selected-icon: var(
@@ -55,7 +55,7 @@
55
55
  #ffffff00
56
56
  );
57
57
  --bm-comp-input-color-choice-switch-selected-bg: var(
58
- --bm-utility-color-accent-default,
58
+ --bm-alias-color-brand-primary-default,
59
59
  #00768f
60
60
  );
61
61
  --bm-comp-input-color-choice-switch-selected-icon: var(
@@ -71,11 +71,11 @@
71
71
  #ffffff
72
72
  );
73
73
  --bm-comp-input-color-choice-radio-selected-border: var(
74
- --bm-utility-color-accent-default,
74
+ --bm-alias-color-brand-primary-default,
75
75
  #00768f
76
76
  );
77
77
  --bm-comp-input-color-choice-radio-selected-inner-circle: var(
78
- --bm-utility-color-accent-default,
78
+ --bm-alias-color-brand-primary-default,
79
79
  #00768f
80
80
  );
81
81
  --bm-comp-input-color-choice-radio-selected-bg-error: var(
@@ -208,7 +208,7 @@
208
208
  );
209
209
  --bm-comp-input-color-divider: var(--bm-sem-color-border-02, #465967);
210
210
  --bm-comp-input-color-choice-checkbox-selected-bg: var(
211
- --bm-utility-color-accent-default,
211
+ --bm-alias-color-brand-primary-default,
212
212
  #43bfd6
213
213
  );
214
214
  --bm-comp-input-color-choice-checkbox-selected-icon: var(
@@ -224,7 +224,7 @@
224
224
  #ffffff00
225
225
  );
226
226
  --bm-comp-input-color-choice-switch-selected-bg: var(
227
- --bm-utility-color-accent-default,
227
+ --bm-alias-color-brand-primary-default,
228
228
  #43bfd6
229
229
  );
230
230
  --bm-comp-input-color-choice-switch-selected-icon: var(
@@ -240,11 +240,11 @@
240
240
  #202e39
241
241
  );
242
242
  --bm-comp-input-color-choice-radio-selected-border: var(
243
- --bm-utility-color-accent-default,
243
+ --bm-alias-color-brand-primary-default,
244
244
  #43bfd6
245
245
  );
246
246
  --bm-comp-input-color-choice-radio-selected-inner-circle: var(
247
- --bm-utility-color-accent-default,
247
+ --bm-alias-color-brand-primary-default,
248
248
  #43bfd6
249
249
  );
250
250
  --bm-comp-input-color-choice-radio-selected-bg-error: var(
package/components/Link.css CHANGED
@@ -30,15 +30,15 @@
30
30
  400 1.25rem/2rem "Source Sans Pro"
31
31
  );
32
32
  --bm-comp-link-color-primary-enabled: var(
33
- --bm-sem-color-link-primary,
33
+ --bm-sem-color-action-primary,
34
34
  #00768f
35
35
  );
36
36
  --bm-comp-link-color-primary-hover: var(
37
- --bm-utility-color-accent-strong,
37
+ --bm-sem-color-action-primary-hover,
38
38
  #005b75
39
39
  );
40
40
  --bm-comp-link-color-primary-active: var(
41
- --bm-utility-color-accent-stronger,
41
+ --bm-sem-color-action-primary-active,
42
42
  #00414d
43
43
  );
44
44
  --bm-comp-link-color-secondary-enabled: var(
@@ -86,16 +86,16 @@
86
86
  400 1.25rem/2rem "Source Sans Pro"
87
87
  );
88
88
  --bm-comp-link-color-primary-enabled: var(
89
- --bm-sem-color-link-primary,
89
+ --bm-sem-color-action-primary,
90
90
  #43bfd6
91
91
  );
92
92
  --bm-comp-link-color-primary-hover: var(
93
- --bm-utility-color-accent-strong,
94
- #b2e7f0
93
+ --bm-sem-color-action-primary-hover,
94
+ #8cd8e6
95
95
  );
96
96
  --bm-comp-link-color-primary-active: var(
97
- --bm-utility-color-accent-stronger,
98
- #d7f4f9
97
+ --bm-sem-color-action-primary-active,
98
+ #b2e7f0
99
99
  );
100
100
  --bm-comp-link-color-secondary-enabled: var(
101
101
  --bm-sem-color-link-secondary,
package/components/Pagination.css CHANGED
@@ -51,7 +51,7 @@
51
51
  --bm-comp-pagination-color-text: var(--bm-sem-color-text-secondary, #c3cdd5);
52
52
  --bm-comp-pagination-color-bg-selected: var(
53
53
  --bm-sem-color-surface-selected,
54
- #00414d
54
+ #01262d
55
55
  );
56
56
  --bm-comp-pagination-color-fg-selected: var(
57
57
  --bm-sem-color-text-selected,
package/components/ProgressBar.css CHANGED
@@ -9,7 +9,7 @@
9
9
  .bm-consumer,
10
10
  [data-bm-theme~="bm-light"] {
11
11
  --bm-comp-progress-bar-color-indicator-default: var(
12
- --bm-utility-color-accent-default,
12
+ --bm-alias-color-brand-primary-default,
13
13
  #00768f
14
14
  );
15
15
  --bm-comp-progress-bar-color-indicator-success: var(
@@ -53,7 +53,7 @@
53
53
  .bm-consumer,
54
54
  [data-bm-theme~="bm-dark"] {
55
55
  --bm-comp-progress-bar-color-indicator-default: var(
56
- --bm-utility-color-accent-default,
56
+ --bm-alias-color-brand-primary-default,
57
57
  #43bfd6
58
58
  );
59
59
  --bm-comp-progress-bar-color-indicator-success: var(
package/components/Slider.css CHANGED
@@ -10,16 +10,16 @@
10
10
  [data-bm-theme~="bm-light"] {
11
11
  --bm-comp-slider-color-track-bg: var(--bm-sem-color-border-02, #d1dae0);
12
12
  --bm-comp-slider-color-track-bg-filled: var(
13
- --bm-utility-color-accent-default,
13
+ --bm-alias-color-brand-primary-default,
14
14
  #00768f
15
15
  );
16
16
  --bm-comp-slider-color-handle-bg: var(--bm-sem-color-surface-01, #ffffff);
17
17
  --bm-comp-slider-color-handle-border: var(
18
- --bm-utility-color-accent-default,
18
+ --bm-alias-color-brand-primary-default,
19
19
  #00768f
20
20
  );
21
21
  --bm-comp-slider-color-endpoint: var(
22
- --bm-utility-color-accent-default,
22
+ --bm-alias-color-brand-primary-default,
23
23
  #00768f
24
24
  );
25
25
  --bm-comp-slider-color-values: var(--bm-sem-color-text-primary, #141d24);
@@ -54,16 +54,16 @@
54
54
  [data-bm-theme~="bm-dark"] {
55
55
  --bm-comp-slider-color-track-bg: var(--bm-sem-color-border-02, #465967);
56
56
  --bm-comp-slider-color-track-bg-filled: var(
57
- --bm-utility-color-accent-default,
57
+ --bm-alias-color-brand-primary-default,
58
58
  #43bfd6
59
59
  );
60
60
  --bm-comp-slider-color-handle-bg: var(--bm-sem-color-surface-01, #202e39);
61
61
  --bm-comp-slider-color-handle-border: var(
62
- --bm-utility-color-accent-default,
62
+ --bm-alias-color-brand-primary-default,
63
63
  #43bfd6
64
64
  );
65
65
  --bm-comp-slider-color-endpoint: var(
66
- --bm-utility-color-accent-default,
66
+ --bm-alias-color-brand-primary-default,
67
67
  #43bfd6
68
68
  );
69
69
  --bm-comp-slider-color-values: var(--bm-sem-color-text-primary, #ffffff);