@blackbaud/skyux-design-tokens 0.0.49 → 0.0.51

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 (4) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/assets/scss/blackbaud.css +71 -43
  3. package/assets/scss/modern.css +56 -26
  4. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -2,6 +2,23 @@
2
2
 
3
3
  - Added `neutral-medium-dark` token in modern. [#64](https://github.com/blackbaud/skyux-design-tokens/pull/64)
4
4
 
5
+ ## [0.0.51](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.50...0.0.51) (2025-04-04)
6
+
7
+
8
+ ### Bug Fixes
9
+
10
+ * update modern modal width tokens ([#152](https://github.com/blackbaud/skyux-design-tokens/issues/152)) ([878b3be](https://github.com/blackbaud/skyux-design-tokens/commit/878b3bec5948919cefa74bffb1cb66e41570b34b))
11
+
12
+ ## [0.0.50](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.49...0.0.50) (2025-04-03)
13
+
14
+
15
+ ### Features
16
+
17
+ * add modal widths ([#131](https://github.com/blackbaud/skyux-design-tokens/issues/131)) ([c5e9c8f](https://github.com/blackbaud/skyux-design-tokens/commit/c5e9c8f8962dafad7e0f89e30fd18e0758e91959))
18
+ * icon mattes for composite icons ([#143](https://github.com/blackbaud/skyux-design-tokens/issues/143)) ([f4ac4ed](https://github.com/blackbaud/skyux-design-tokens/commit/f4ac4edcc5b95c5de441005778cb8ca9b58ba142))
19
+ * new tokens for tile, zeroing out spacing ([#133](https://github.com/blackbaud/skyux-design-tokens/issues/133)) ([b609cae](https://github.com/blackbaud/skyux-design-tokens/commit/b609caee8f7c46d053a43101944e7ceb43ca5581))
20
+ * wait opacity and color ([#144](https://github.com/blackbaud/skyux-design-tokens/issues/144)) ([feeac51](https://github.com/blackbaud/skyux-design-tokens/commit/feeac517f5b2411dd27e78f95e5f25e0b627e7a9))
21
+
5
22
  ## [0.0.49](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.48...0.0.49) (2025-03-28)
6
23
 
7
24
 
package/assets/scss/blackbaud.css CHANGED
@@ -1,4 +1,5 @@
1
1
  .sky-theme-modern.sky-theme-brand-base {
2
+ --bb-opacity-600: .6;
2
3
  --bb-size-reading_container-max_width: 50ch, 40vw;
3
4
  --bb-size-fixed-6000: 960px;
4
5
  --bb-size-fixed-4000: 640px;
@@ -34,7 +35,7 @@
34
35
  --bb-size-fluid-18: 0.1875rem;
35
36
  --bb-size-fluid-12: 0.125rem;
36
37
  --bb-size-fluid-6: 0.0625rem;
37
- --bb-size-fluid-0: 0rem;
38
+ --bb-size-0: 0rem;
38
39
  --bb-shadow-gray-24: 0 11px 15px -7px rgba(0,0,0,0.2), 0 9px 46px 8px rgba(0,0,0,0.12), 0 24px 38px 3px rgba(0,0,0,0.14);
39
40
  --bb-shadow-gray-16: 0 8px 10px -5px rgba(0,0,0,0.2), 0 6px 30px 5px rgba(0,0,0,0.12), 0 16px 24px 2px rgba(0,0,0,0.14);
40
41
  --bb-shadow-gray-8: 0 5px 5px -3px rgba(0,0,0,0.2), 0 3px 14px 2px rgba(0,0,0,0.12), 0 8px 10px 1px rgba(0,0,0,0.14);
@@ -96,6 +97,7 @@
96
97
  --bb-color-gray-100: #d3d5d6;
97
98
  --bb-color-gray-50: #e9eaeb;
98
99
  --bb-color-gray-25: #f9f9f9;
100
+ --bb-color-blocking: rgba(255, 255, 255, 0.7);
99
101
  --bb-color-scrim: rgba(37, 43, 51, 0.5);
100
102
  --bb-color-transparent: rgba(0, 0, 0, 0);
101
103
  --bb-color-black: #000000;
@@ -203,6 +205,7 @@
203
205
  --sky-space-inset-balanced-s: var(--bb-size-fluid-12);
204
206
  }
205
207
  .sky-theme-modern.sky-theme-brand-base {
208
+ --sky-opacity-wait: var(--bb-opacity-600);
206
209
  --sky-elevation-overlay-400: var(--bb-shadow-gray-24);
207
210
  --sky-elevation-overlay-300: var(--bb-shadow-gray-16);
208
211
  --sky-elevation-overlay-200: var(--bb-shadow-gray-8);
@@ -255,28 +258,36 @@
255
258
  --sky-color-border-danger: var(--bb-color-red-600);
256
259
  --sky-color-border-selected_soft: var(--bb-color-blue-300);
257
260
  --sky-color-border-selected: var(--bb-color-blue-600);
258
- --sky-color-background-icon_matte: var(--bb-color-blue-100);
259
- --sky-color-background-thumbnail_matte: var(--bb-color-white);
260
- --sky-color-background-file_drop: var(--bb-color-gray-25);
261
- --sky-color-background-list-disabled: var(--bb-color-gray-50);
262
- --sky-color-background-list-focus: var(--bb-color-transparent);
263
- --sky-color-background-list-active: var(--bb-color-transparent);
264
- --sky-color-background-list-hover: var(--bb-color-transparent);
265
- --sky-color-background-list-base: var(--bb-color-transparent);
266
- --sky-color-background-nav-disabled: var(--bb-color-gray-50);
267
- --sky-color-background-nav-focus: var(--bb-color-transparent);
268
- --sky-color-background-nav-active: var(--bb-color-transparent);
269
- --sky-color-background-nav-hover: var(--bb-color-transparent);
270
- --sky-color-background-nav-base: var(--bb-color-transparent);
261
+ --sky-color-background-thumb-disabled: var(--bb-color-gray-50);
262
+ --sky-color-background-thumb-base: var(--bb-color-white);
271
263
  --sky-color-background-selected-success: var(--bb-color-green-300);
272
264
  --sky-color-background-selected-warning: var(--bb-color-yellow-300);
273
265
  --sky-color-background-selected-danger: var(--bb-color-red-300);
274
266
  --sky-color-background-selected-soft: var(--bb-color-blue-100);
275
267
  --sky-color-background-selected-heavy: var(--bb-color-blue-600);
276
- --sky-color-background-thumb-disabled: var(--bb-color-gray-50);
277
- --sky-color-background-thumb-base: var(--bb-color-white);
268
+ --sky-color-background-nav-disabled: var(--bb-color-gray-50);
269
+ --sky-color-background-nav-focus: var(--bb-color-transparent);
270
+ --sky-color-background-nav-active: var(--bb-color-transparent);
271
+ --sky-color-background-nav-hover: var(--bb-color-transparent);
272
+ --sky-color-background-nav-base: var(--bb-color-transparent);
273
+ --sky-color-background-list-disabled: var(--bb-color-gray-50);
274
+ --sky-color-background-list-focus: var(--bb-color-transparent);
275
+ --sky-color-background-list-active: var(--bb-color-transparent);
276
+ --sky-color-background-list-hover: var(--bb-color-transparent);
277
+ --sky-color-background-list-base: var(--bb-color-transparent);
278
278
  --sky-color-background-input-disabled: var(--bb-color-gray-50);
279
279
  --sky-color-background-input-base: var(--bb-color-transparent);
280
+ --sky-color-background-icon_matte-action-soft: var(--bb-color-blue-100);
281
+ --sky-color-background-icon_matte-action-heavy: var(--bb-color-blue-600);
282
+ --sky-color-background-icon_matte-success: var(--bb-color-green-700);
283
+ --sky-color-background-icon_matte-warning: var(--bb-color-yellow-600);
284
+ --sky-color-background-icon_matte-danger: var(--bb-color-red-600);
285
+ --sky-color-background-container-info: var(--bb-color-blue-100);
286
+ --sky-color-background-container-success: var(--bb-color-green-300);
287
+ --sky-color-background-container-warning: var(--bb-color-yellow-300);
288
+ --sky-color-background-container-danger: var(--bb-color-red-300);
289
+ --sky-color-background-container-menu: var(--bb-color-white);
290
+ --sky-color-background-container-base: var(--bb-color-white);
280
291
  --sky-color-background-action-input-disabled: var(--bb-color-gray-50);
281
292
  --sky-color-background-action-input-focus: var(--bb-color-transparent);
282
293
  --sky-color-background-action-input-active: var(--bb-color-transparent);
@@ -302,13 +313,10 @@
302
313
  --sky-color-background-action-primary-active: var(--bb-color-blue-600);
303
314
  --sky-color-background-action-primary-hover: var(--bb-color-blue-600);
304
315
  --sky-color-background-action-primary-base: var(--bb-color-blue-600);
305
- --sky-color-background-container-info: var(--bb-color-blue-100);
306
- --sky-color-background-container-success: var(--bb-color-green-300);
307
- --sky-color-background-container-warning: var(--bb-color-yellow-300);
308
- --sky-color-background-container-danger: var(--bb-color-red-300);
309
- --sky-color-background-container-menu: var(--bb-color-white);
310
- --sky-color-background-container-base: var(--bb-color-white);
316
+ --sky-color-background-thumbnail_matte: var(--bb-color-white);
317
+ --sky-color-background-file_drop: var(--bb-color-gray-25);
311
318
  --sky-color-background-text_highlight: var(--bb-color-yellow-400);
319
+ --sky-color-background-blocking: var(--bb-color-blocking);
312
320
  --sky-color-background-scrim: var(--bb-color-scrim);
313
321
  --sky-color-background-page: var(--bb-color-gray-25);
314
322
  --sky-color-icon-action: var(--bb-color-blue-600);
@@ -469,8 +477,11 @@
469
477
  --sky-size-avatar-s: var(--bb-size-fluid-200);
470
478
  --sky-size-thumbnail-l: var(--bb-size-fixed-600);
471
479
  --sky-size-max_width-overlay_message: var(--bb-size-reading_container-max_width);
472
- --sky-size-width-resize_handle: var(--bb-size-fixed-150);
480
+ --sky-size-width-modal-l: var(--bb-size-fixed-6000);
481
+ --sky-size-width-modal-m: var(--bb-size-fixed-4000);
482
+ --sky-size-width-modal-s: var(--bb-size-fixed-2000);
473
483
  --sky-size-width-viewport-smallest: var(--bb-size-fixed-2000);
484
+ --sky-size-width-resize_handle: var(--bb-size-fixed-150);
474
485
  --sky-size-illustration-xl: var(--bb-size-fluid-600);
475
486
  --sky-size-illustration-l: var(--bb-size-fluid-500);
476
487
  --sky-size-illustration-m: var(--bb-size-fluid-400);
@@ -492,6 +503,7 @@
492
503
  --sky-space-stacked-m: var(--bb-size-fluid-75);
493
504
  --sky-space-stacked-s: var(--bb-size-fluid-50);
494
505
  --sky-space-stacked-xs: var(--bb-size-fluid-25);
506
+ --sky-space-stacked-0: var(--bb-size-0);
495
507
  --sky-space-inline-xxl: var(--bb-size-fluid-300);
496
508
  --sky-space-inline-xl: var(--bb-size-fluid-150);
497
509
  --sky-space-inline-l: var(--bb-size-fluid-100);
@@ -499,12 +511,14 @@
499
511
  --sky-space-inline-s: var(--bb-size-fluid-50);
500
512
  --sky-space-inline-xs: var(--bb-size-fluid-25);
501
513
  --sky-space-inline-xxs: var(--bb-size-fluid-12);
514
+ --sky-space-inline-0: var(--bb-size-0);
502
515
  --sky-space-gap-text_action-l: var(--bb-size-fluid-100);
503
516
  --sky-space-gap-text_action-m: var(--bb-size-fluid-75);
504
517
  --sky-space-gap-text_action-s: var(--bb-size-fluid-50);
505
518
  --sky-space-gap-text_action-xs: var(--bb-size-fluid-25);
506
519
  --sky-space-gap-text_action-0: 0rem;
507
- --sky-space-gap-stacked_supplemental-l: var(--bb-size-fluid-100);
520
+ --sky-space-gap-stacked_supplemental-xl: var(--bb-size-fluid-100);
521
+ --sky-space-gap-stacked_supplemental-l: var(--bb-size-fluid-75);
508
522
  --sky-space-gap-stacked_supplemental-m: var(--bb-size-fluid-50);
509
523
  --sky-space-gap-stacked_supplemental-s: var(--bb-size-fluid-25);
510
524
  --sky-space-gap-stacked_supplemental-0: 0rem;
@@ -537,34 +551,44 @@
537
551
  --sky-space-inset-horizontal-left-l: var(--bb-size-fluid-100);
538
552
  --sky-space-inset-horizontal-left-m: var(--bb-size-fluid-75);
539
553
  --sky-space-inset-horizontal-left-s: var(--bb-size-fluid-50);
540
- --sky-space-inset-horizontal-bottom-xl: var(--bb-size-fluid-0);
541
- --sky-space-inset-horizontal-bottom-l: var(--bb-size-fluid-0);
542
- --sky-space-inset-horizontal-bottom-m: var(--bb-size-fluid-0);
543
- --sky-space-inset-horizontal-bottom-s: var(--bb-size-fluid-0);
554
+ --sky-space-inset-horizontal-left-0: var(--bb-size-0);
555
+ --sky-space-inset-horizontal-bottom-xl: var(--bb-size-0);
556
+ --sky-space-inset-horizontal-bottom-l: var(--bb-size-0);
557
+ --sky-space-inset-horizontal-bottom-m: var(--bb-size-0);
558
+ --sky-space-inset-horizontal-bottom-s: var(--bb-size-0);
559
+ --sky-space-inset-horizontal-bottom-0: var(--bb-size-0);
544
560
  --sky-space-inset-horizontal-right-xl: var(--bb-size-fluid-150);
545
561
  --sky-space-inset-horizontal-right-l: var(--bb-size-fluid-100);
546
562
  --sky-space-inset-horizontal-right-m: var(--bb-size-fluid-75);
547
563
  --sky-space-inset-horizontal-right-s: var(--bb-size-fluid-50);
548
- --sky-space-inset-horizontal-top-xl: var(--bb-size-fluid-0);
549
- --sky-space-inset-horizontal-top-l: var(--bb-size-fluid-0);
550
- --sky-space-inset-horizontal-top-m: var(--bb-size-fluid-0);
551
- --sky-space-inset-horizontal-top-s: var(--bb-size-fluid-0);
552
- --sky-space-inset-vertical-left-xl: var(--bb-size-fluid-0);
553
- --sky-space-inset-vertical-left-l: var(--bb-size-fluid-0);
554
- --sky-space-inset-vertical-left-m: var(--bb-size-fluid-0);
555
- --sky-space-inset-vertical-left-s: var(--bb-size-fluid-0);
564
+ --sky-space-inset-horizontal-right-0: var(--bb-size-0);
565
+ --sky-space-inset-horizontal-top-xl: var(--bb-size-0);
566
+ --sky-space-inset-horizontal-top-l: var(--bb-size-0);
567
+ --sky-space-inset-horizontal-top-m: var(--bb-size-0);
568
+ --sky-space-inset-horizontal-top-s: var(--bb-size-0);
569
+ --sky-space-inset-horizontal-top-0: var(--bb-size-0);
570
+ --sky-space-inset-vertical-fixed-bottom-l: var(--bb-size-fixed-100);
571
+ --sky-space-inset-vertical-fixed-top-l: var(--bb-size-fixed-100);
572
+ --sky-space-inset-vertical-left-xl: var(--bb-size-0);
573
+ --sky-space-inset-vertical-left-l: var(--bb-size-0);
574
+ --sky-space-inset-vertical-left-m: var(--bb-size-0);
575
+ --sky-space-inset-vertical-left-s: var(--bb-size-0);
576
+ --sky-space-inset-vertical-left-0: var(--bb-size-0);
556
577
  --sky-space-inset-vertical-bottom-xl: var(--bb-size-fluid-150);
557
578
  --sky-space-inset-vertical-bottom-l: var(--bb-size-fluid-100);
558
579
  --sky-space-inset-vertical-bottom-m: var(--bb-size-fluid-75);
559
580
  --sky-space-inset-vertical-bottom-s: var(--bb-size-fluid-50);
560
- --sky-space-inset-vertical-right-xl: var(--bb-size-fluid-0);
561
- --sky-space-inset-vertical-right-l: var(--bb-size-fluid-0);
562
- --sky-space-inset-vertical-right-m: var(--bb-size-fluid-0);
563
- --sky-space-inset-vertical-right-s: var(--bb-size-fluid-0);
581
+ --sky-space-inset-vertical-bottom-0: var(--bb-size-0);
582
+ --sky-space-inset-vertical-right-xl: var(--bb-size-0);
583
+ --sky-space-inset-vertical-right-l: var(--bb-size-0);
584
+ --sky-space-inset-vertical-right-m: var(--bb-size-0);
585
+ --sky-space-inset-vertical-right-s: var(--bb-size-0);
586
+ --sky-space-inset-vertical-right-0: var(--bb-size-0);
564
587
  --sky-space-inset-vertical-top-xl: var(--bb-size-fluid-150);
565
588
  --sky-space-inset-vertical-top-l: var(--bb-size-fluid-100);
566
589
  --sky-space-inset-vertical-top-m: var(--bb-size-fluid-75);
567
590
  --sky-space-inset-vertical-top-s: var(--bb-size-fluid-50);
591
+ --sky-space-inset-vertical-top-0: var(--bb-size-0);
568
592
  --sky-space-inset-thumbnail_matte-xl: var(--bb-size-fluid-50);
569
593
  --sky-space-inset-thumbnail_matte-l: var(--bb-size-fluid-25);
570
594
  --sky-space-inset-thumbnail_matte-m: var(--bb-size-fluid-18);
@@ -639,15 +663,19 @@
639
663
  --sky-space-inset-bottomless-left-xl: var(--bb-size-fluid-150);
640
664
  --sky-space-inset-bottomless-left-l: var(--bb-size-fluid-100);
641
665
  --sky-space-inset-bottomless-left-m: var(--bb-size-fluid-75);
642
- --sky-space-inset-bottomless-bottom-xl: var(--bb-size-fluid-0);
643
- --sky-space-inset-bottomless-bottom-l: var(--bb-size-fluid-0);
644
- --sky-space-inset-bottomless-bottom-m: var(--bb-size-fluid-0);
666
+ --sky-space-inset-bottomless-bottom-xl: var(--bb-size-0);
667
+ --sky-space-inset-bottomless-bottom-l: var(--bb-size-0);
668
+ --sky-space-inset-bottomless-bottom-m: var(--bb-size-0);
645
669
  --sky-space-inset-bottomless-right-xl: var(--bb-size-fluid-150);
646
670
  --sky-space-inset-bottomless-right-l: var(--bb-size-fluid-100);
647
671
  --sky-space-inset-bottomless-right-m: var(--bb-size-fluid-75);
648
672
  --sky-space-inset-bottomless-top-xl: var(--bb-size-fluid-150);
649
673
  --sky-space-inset-bottomless-top-l: var(--bb-size-fluid-100);
650
674
  --sky-space-inset-bottomless-top-m: var(--bb-size-fluid-75);
675
+ --sky-space-inset-balanced-fixed-xl: var(--bb-size-fixed-150);
676
+ --sky-space-inset-balanced-fixed-l: var(--bb-size-fixed-100);
677
+ --sky-space-inset-balanced-fixed-m: var(--bb-size-fixed-75);
678
+ --sky-space-inset-balanced-fixed-s: var(--bb-size-fixed-50);
651
679
  --sky-space-inset-balanced-xl: var(--bb-size-fluid-150);
652
680
  --sky-space-inset-balanced-l: var(--bb-size-fluid-100);
653
681
  --sky-space-inset-balanced-m: var(--bb-size-fluid-75);
package/assets/scss/modern.css CHANGED
@@ -1,4 +1,5 @@
1
1
  .sky-theme-modern {
2
+ --modern-opacity-600: .6;
2
3
  --modern-border-style-dotted: dotted;
3
4
  --modern-border-style-solid: solid;
4
5
  --modern-border-radius-round: 50%;
@@ -45,8 +46,10 @@
45
46
  --modern-font-size-150: 14px;
46
47
  --modern-font-size-125: 13px;
47
48
  --modern-font-size-100: 12px;
49
+ --modern-size-900: 900px;
50
+ --modern-size-600: 600px;
48
51
  --modern-size-400: 400px;
49
- --modern-size-320: 320px;
52
+ --modern-size-300: 300px;
50
53
  --modern-size-296: 296px;
51
54
  --modern-size-276: 276px;
52
55
  --modern-size-236: 236px;
@@ -101,11 +104,6 @@
101
104
  --modern-color-blue-50: #00b4f1;
102
105
  --modern-color-blue-30: #81d4f7;
103
106
  --modern-color-blue-10: #c1e8fb;
104
- --modern-color-scrim: rgba(0, 0, 0, 0.5);
105
- --modern-color-shadow_color: rgba(0, 0, 0, 0.3);
106
- --modern-color-transparent: rgba(0, 0, 0, 0);
107
- --modern-color-black: #000000;
108
- --modern-color-white: #ffffff;
109
107
  --modern-color-red-70: #d93a3d;
110
108
  --modern-color-red-50: #ef4044;
111
109
  --modern-color-red-30: #f7a08f;
@@ -118,8 +116,15 @@
118
116
  --modern-color-gray-20: #cdcfd2;
119
117
  --modern-color-gray-15: #d2d2d2;
120
118
  --modern-color-gray-10: #e2e3e4;
119
+ --modern-color-blocking: rgba(255, 255, 255, 0.7);
120
+ --modern-color-scrim: rgba(0, 0, 0, 0.5);
121
+ --modern-color-shadow_color: rgba(0, 0, 0, 0.3);
122
+ --modern-color-transparent: rgba(0, 0, 0, 0);
123
+ --modern-color-black: #000000;
124
+ --modern-color-white: #ffffff;
121
125
  }
122
126
  .sky-theme-modern {
127
+ --sky-opacity-wait: var(--modern-opacity-600);
123
128
  --sky-elevation-overlay-400: var(--modern-shadow-size-24);
124
129
  --sky-elevation-overlay-300: var(--modern-shadow-size-16);
125
130
  --sky-elevation-overlay-200: var(--modern-shadow-size-8);
@@ -172,19 +177,6 @@
172
177
  --sky-color-border-danger: var(--modern-color-red-50);
173
178
  --sky-color-border-selected_soft: var(--modern-color-blue-30);
174
179
  --sky-color-border-selected: var(--modern-color-blue-74);
175
- --sky-color-background-icon_matte: var(--modern-color-blue-05);
176
- --sky-color-background-thumbnail_matte: var(--modern-color-white);
177
- --sky-color-background-file_drop: var(--modern-color-gray-05);
178
- --sky-color-background-list-disabled: var(--modern-color-gray-07);
179
- --sky-color-background-list-focus: var(--modern-color-transparent);
180
- --sky-color-background-list-active: var(--modern-color-transparent);
181
- --sky-color-background-list-hover: var(--modern-color-transparent);
182
- --sky-color-background-list-base: var(--modern-color-transparent);
183
- --sky-color-background-nav-disabled: var(--modern-color-gray-07);
184
- --sky-color-background-nav-focus: var(--modern-color-transparent);
185
- --sky-color-background-nav-active: var(--modern-color-transparent);
186
- --sky-color-background-nav-hover: var(--modern-color-transparent);
187
- --sky-color-background-nav-base: var(--modern-color-transparent);
188
180
  --sky-color-background-thumb-disabled: var(--modern-color-gray-07);
189
181
  --sky-color-background-thumb-base: var(--modern-color-white);
190
182
  --sky-color-background-input-disabled: var(--modern-color-gray-07);
@@ -194,6 +186,27 @@
194
186
  --sky-color-background-selected-danger: var(--modern-color-red-30);
195
187
  --sky-color-background-selected-soft: var(--modern-color-blue-05);
196
188
  --sky-color-background-selected-heavy: var(--modern-color-blue-05);
189
+ --sky-color-background-nav-disabled: var(--modern-color-gray-07);
190
+ --sky-color-background-nav-focus: var(--modern-color-transparent);
191
+ --sky-color-background-nav-active: var(--modern-color-transparent);
192
+ --sky-color-background-nav-hover: var(--modern-color-transparent);
193
+ --sky-color-background-nav-base: var(--modern-color-transparent);
194
+ --sky-color-background-list-disabled: var(--modern-color-gray-07);
195
+ --sky-color-background-list-focus: var(--modern-color-transparent);
196
+ --sky-color-background-list-active: var(--modern-color-transparent);
197
+ --sky-color-background-list-hover: var(--modern-color-transparent);
198
+ --sky-color-background-list-base: var(--modern-color-transparent);
199
+ --sky-color-background-icon_matte-action-light: var(--modern-color-blue-05);
200
+ --sky-color-background-icon_matte-action-heavy: var(--modern-color-blue-74);
201
+ --sky-color-background-icon_matte-success: var(--modern-color-green-50);
202
+ --sky-color-background-icon_matte-warning: var(--modern-color-yellow-50);
203
+ --sky-color-background-icon_matte-danger: var(--modern-color-red-50);
204
+ --sky-color-background-container-info: var(--modern-color-blue-10);
205
+ --sky-color-background-container-success: var(--modern-color-green-30);
206
+ --sky-color-background-container-warning: var(--modern-color-yellow-30);
207
+ --sky-color-background-container-danger: var(--modern-color-red-30);
208
+ --sky-color-background-container-menu: var(--modern-color-white);
209
+ --sky-color-background-container-base: var(--modern-color-white);
197
210
  --sky-color-background-action-input-disabled: var(--modern-color-gray-07);
198
211
  --sky-color-background-action-input-focus: var(--modern-color-transparent);
199
212
  --sky-color-background-action-input-active: var(--modern-color-transparent);
@@ -219,13 +232,10 @@
219
232
  --sky-color-background-action-primary-active: var(--modern-color-blue-74);
220
233
  --sky-color-background-action-primary-hover: var(--modern-color-blue-74);
221
234
  --sky-color-background-action-primary-base: var(--modern-color-blue-74);
222
- --sky-color-background-container-info: var(--modern-color-blue-10);
223
- --sky-color-background-container-success: var(--modern-color-green-30);
224
- --sky-color-background-container-warning: var(--modern-color-yellow-30);
225
- --sky-color-background-container-danger: var(--modern-color-red-30);
226
- --sky-color-background-container-menu: var(--modern-color-white);
227
- --sky-color-background-container-base: var(--modern-color-white);
235
+ --sky-color-background-thumbnail_matte: var(--modern-color-white);
236
+ --sky-color-background-file_drop: var(--modern-color-gray-05);
228
237
  --sky-color-background-text_highlight: var(--modern-color-yellow-40);
238
+ --sky-color-background-blocking: var(--modern-color-blocking);
229
239
  --sky-color-background-scrim: var(--modern-color-scrim);
230
240
  --sky-color-background-page: var(--modern-color-gray-005);
231
241
  --sky-color-icon-action: var(--modern-color-blue-74);
@@ -287,8 +297,11 @@
287
297
  --sky-size-avatar-s: var(--modern-size-32);
288
298
  --sky-size-thumbnail-l: var(--modern-size-100);
289
299
  --sky-size-max_width-overlay_message: var(--modern-size-236);
290
- --sky-size-width-resize_handle: var(--modern-size-14);
300
+ --sky-size-width-modal-l: var(--modern-size-900);
301
+ --sky-size-width-modal-m: var(--modern-size-600);
302
+ --sky-size-width-modal-s: var(--modern-size-300);
291
303
  --sky-size-width-viewport-smallest: var(--modern-size-296);
304
+ --sky-size-width-resize_handle: var(--modern-size-14);
292
305
  --sky-size-illustration-xl: var(--modern-size-96);
293
306
  --sky-size-illustration-l: var(--modern-size-80);
294
307
  --sky-size-illustration-m: var(--modern-size-64);
@@ -310,6 +323,7 @@
310
323
  --sky-space-stacked-m: var(--modern-space-md);
311
324
  --sky-space-stacked-s: var(--modern-space-s);
312
325
  --sky-space-stacked-xs: var(--modern-space-xs);
326
+ --sky-space-stacked-0: var(--modern-space-none);
313
327
  --sky-space-inline-xxl: var(--modern-space-xxl);
314
328
  --sky-space-inline-xl: var(--modern-space-xl);
315
329
  --sky-space-inline-l: var(--modern-space-lg);
@@ -317,11 +331,13 @@
317
331
  --sky-space-inline-s: var(--modern-space-s);
318
332
  --sky-space-inline-xs: var(--modern-space-xs);
319
333
  --sky-space-inline-xxs: var(--modern-size-2);
334
+ --sky-space-inline-0: var(--modern-space-none);
320
335
  --sky-space-gap-text_action-l: var(--modern-space-lg);
321
336
  --sky-space-gap-text_action-m: var(--modern-space-md);
322
337
  --sky-space-gap-text_action-s: var(--modern-space-s);
323
338
  --sky-space-gap-text_action-xs: var(--modern-space-xs);
324
339
  --sky-space-gap-text_action-0: 0rem;
340
+ --sky-space-gap-stacked_supplemental-xl: var(--modern-size-20);
325
341
  --sky-space-gap-stacked_supplemental-l: var(--modern-size-15);
326
342
  --sky-space-gap-stacked_supplemental-m: var(--modern-size-10);
327
343
  --sky-space-gap-stacked_supplemental-s: var(--modern-size-5);
@@ -355,34 +371,44 @@
355
371
  --sky-space-inset-horizontal-left-l: var(--modern-space-lg);
356
372
  --sky-space-inset-horizontal-left-m: var(--modern-space-md);
357
373
  --sky-space-inset-horizontal-left-s: var(--modern-space-s);
374
+ --sky-space-inset-horizontal-left-0: var(--modern-space-none);
358
375
  --sky-space-inset-horizontal-bottom-xl: var(--modern-size-0);
359
376
  --sky-space-inset-horizontal-bottom-l: var(--modern-size-0);
360
377
  --sky-space-inset-horizontal-bottom-m: var(--modern-size-0);
361
378
  --sky-space-inset-horizontal-bottom-s: var(--modern-size-0);
379
+ --sky-space-inset-horizontal-bottom-0: var(--modern-space-none);
362
380
  --sky-space-inset-horizontal-right-xl: var(--modern-space-xl);
363
381
  --sky-space-inset-horizontal-right-l: var(--modern-space-lg);
364
382
  --sky-space-inset-horizontal-right-m: var(--modern-space-md);
365
383
  --sky-space-inset-horizontal-right-s: var(--modern-space-s);
384
+ --sky-space-inset-horizontal-right-0: var(--modern-space-none);
366
385
  --sky-space-inset-horizontal-top-xl: var(--modern-size-0);
367
386
  --sky-space-inset-horizontal-top-l: var(--modern-size-0);
368
387
  --sky-space-inset-horizontal-top-m: var(--modern-size-0);
369
388
  --sky-space-inset-horizontal-top-s: var(--modern-size-0);
389
+ --sky-space-inset-horizontal-top-0: var(--modern-space-none);
390
+ --sky-space-inset-vertical-fixed-bottom-l: var(--modern-size-20);
391
+ --sky-space-inset-vertical-fixed-top-l: var(--modern-size-20);
370
392
  --sky-space-inset-vertical-left-xl: var(--modern-size-0);
371
393
  --sky-space-inset-vertical-left-l: var(--modern-size-0);
372
394
  --sky-space-inset-vertical-left-m: var(--modern-size-0);
373
395
  --sky-space-inset-vertical-left-s: var(--modern-size-0);
396
+ --sky-space-inset-vertical-left-0: var(--modern-space-none);
374
397
  --sky-space-inset-vertical-bottom-xl: var(--modern-space-xl);
375
398
  --sky-space-inset-vertical-bottom-l: var(--modern-space-lg);
376
399
  --sky-space-inset-vertical-bottom-m: var(--modern-space-md);
377
400
  --sky-space-inset-vertical-bottom-s: var(--modern-space-s);
401
+ --sky-space-inset-vertical-bottom-0: var(--modern-space-none);
378
402
  --sky-space-inset-vertical-right-xl: var(--modern-size-0);
379
403
  --sky-space-inset-vertical-right-l: var(--modern-size-0);
380
404
  --sky-space-inset-vertical-right-m: var(--modern-size-0);
381
405
  --sky-space-inset-vertical-right-s: var(--modern-size-0);
406
+ --sky-space-inset-vertical-right-0: var(--modern-space-none);
382
407
  --sky-space-inset-vertical-top-xl: var(--modern-space-xl);
383
408
  --sky-space-inset-vertical-top-l: var(--modern-space-lg);
384
409
  --sky-space-inset-vertical-top-m: var(--modern-space-md);
385
410
  --sky-space-inset-vertical-top-s: var(--modern-space-s);
411
+ --sky-space-inset-vertical-top-0: var(--modern-space-none);
386
412
  --sky-space-inset-thumbnail_matte-xl: var(--modern-size-9);
387
413
  --sky-space-inset-thumbnail_matte-l: var(--modern-size-5);
388
414
  --sky-space-inset-thumbnail_matte-m: var(--modern-size-3);
@@ -466,6 +492,10 @@
466
492
  --sky-space-inset-bottomless-top-xl: var(--modern-space-xl);
467
493
  --sky-space-inset-bottomless-top-l: var(--modern-space-lg);
468
494
  --sky-space-inset-bottomless-top-m: var(--modern-size-15);
495
+ --sky-space-inset-balanced-fixed-xl: var(--modern-size-30);
496
+ --sky-space-inset-balanced-fixed-l: var(--modern-size-20);
497
+ --sky-space-inset-balanced-fixed-m: var(--modern-size-15);
498
+ --sky-space-inset-balanced-fixed-s: var(--modern-size-10);
469
499
  --sky-space-inset-balanced-xl: var(--modern-space-xl);
470
500
  --sky-space-inset-balanced-l: var(--modern-space-lg);
471
501
  --sky-space-inset-balanced-m: var(--modern-space-md);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blackbaud/skyux-design-tokens",
3
- "version": "0.0.49",
3
+ "version": "0.0.51",
4
4
  "description": "Design tokens for SKY UX",
5
5
  "homepage": "https://github.com/blackbaud/skyux-design-tokens",
6
6
  "license": "MIT",