@blackbaud/skyux-design-tokens 6.5.0 → 6.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.
- package/CHANGELOG.md +19 -0
- package/assets/assets.json +1 -1
- package/assets/scss/base.css +73 -30
- package/assets/scss/blackbaud.css +197 -154
- package/bundles/base.css +73 -30
- package/bundles/blackbaud.css +197 -154
- package/bundles/public-api-styles.json +1 -1
- package/bundles/public-api-tokens.json +10 -1
- package/bundles/public-api.css +5 -3
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,24 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [6.6.0](https://github.com/blackbaud/skyux-design-tokens/compare/6.5.1...6.6.0) (2026-08-26)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Features
|
|
7
|
+
|
|
8
|
+
* update dark mode colors to steel-gray variety ([#420](https://github.com/blackbaud/skyux-design-tokens/issues/420)) ([9915c94](https://github.com/blackbaud/skyux-design-tokens/commit/9915c94e0e433b71c0d4f0fac050a14754b56508))
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Bug Fixes
|
|
12
|
+
|
|
13
|
+
* update action contrast text color in dark mode ([#423](https://github.com/blackbaud/skyux-design-tokens/issues/423)) ([19aebfd](https://github.com/blackbaud/skyux-design-tokens/commit/19aebfd9eeb174e93c55291de4225e52841e1b57))
|
|
14
|
+
|
|
15
|
+
## [6.5.1](https://github.com/blackbaud/skyux-design-tokens/compare/6.5.0...6.5.1) (2026-08-25)
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### Bug Fixes
|
|
19
|
+
|
|
20
|
+
* update on_prom icon colors to include disabled state ([#415](https://github.com/blackbaud/skyux-design-tokens/issues/415)) ([f586c8d](https://github.com/blackbaud/skyux-design-tokens/commit/f586c8dcd75cbb21033eaf2633534506188cd0dd))
|
|
21
|
+
|
|
3
22
|
## [6.5.0](https://github.com/blackbaud/skyux-design-tokens/compare/6.4.0...6.5.0) (2026-08-24)
|
|
4
23
|
|
|
5
24
|
|
package/assets/assets.json
CHANGED
package/assets/scss/base.css
CHANGED
|
@@ -84,6 +84,7 @@
|
|
|
84
84
|
--bb-color-blue-dark-1000: #00112b;
|
|
85
85
|
--bb-color-blue-dark-200: #b4dbff;
|
|
86
86
|
--bb-color-blue-dark-300: #83c1ff;
|
|
87
|
+
--bb-color-blue-dark-375: #79adf1;
|
|
87
88
|
--bb-color-blue-dark-400: #59a6ff;
|
|
88
89
|
--bb-color-blue-dark-500: #2885ef;
|
|
89
90
|
--bb-color-blue-dark-600: #0066cd;
|
|
@@ -241,6 +242,10 @@
|
|
|
241
242
|
--bb-color-rgba-sky-600-40: rgba(0, 207, 255, 0.4);
|
|
242
243
|
--bb-color-rgba-steel-fusion-100-5: rgba(243, 246, 249, 0.05);
|
|
243
244
|
--bb-color-rgba-steel-fusion-1100-70: rgba(28, 34, 40, 0.7);
|
|
245
|
+
--bb-color-rgba-steel-gray-100-10: rgba(245, 246, 247, 0.1);
|
|
246
|
+
--bb-color-rgba-steel-gray-100-15: rgba(245, 246, 247, 0.15);
|
|
247
|
+
--bb-color-rgba-steel-gray-100-25: rgba(245, 246, 247, 0.25);
|
|
248
|
+
--bb-color-rgba-white-18: rgba(255, 255, 255, 0.18);
|
|
244
249
|
--bb-color-rgba-white-5: rgba(255, 255, 255, 0.05);
|
|
245
250
|
--bb-color-rgba-white-70: rgba(255, 255, 255, 0.7);
|
|
246
251
|
--bb-color-rgba-yellow-dark-600-25: rgba(162, 81, 0, 0.25);
|
|
@@ -301,6 +306,22 @@
|
|
|
301
306
|
--bb-color-steel-fusion-700: #5e6770;
|
|
302
307
|
--bb-color-steel-fusion-800: #4a5259;
|
|
303
308
|
--bb-color-steel-fusion-900: #363d44;
|
|
309
|
+
--bb-color-steel-gray-100: #f5f6f7;
|
|
310
|
+
--bb-color-steel-gray-1000: #2e3135;
|
|
311
|
+
--bb-color-steel-gray-1050: #25272a;
|
|
312
|
+
--bb-color-steel-gray-1075: #222427;
|
|
313
|
+
--bb-color-steel-gray-1100: #1f2224;
|
|
314
|
+
--bb-color-steel-gray-1125: #1e2022;
|
|
315
|
+
--bb-color-steel-gray-1150: #1c1e20;
|
|
316
|
+
--bb-color-steel-gray-1200: #17191b;
|
|
317
|
+
--bb-color-steel-gray-200: #e2e4e5;
|
|
318
|
+
--bb-color-steel-gray-300: #cbcdcf;
|
|
319
|
+
--bb-color-steel-gray-400: #b3b5b8;
|
|
320
|
+
--bb-color-steel-gray-500: #979a9d;
|
|
321
|
+
--bb-color-steel-gray-600: #7a7d81;
|
|
322
|
+
--bb-color-steel-gray-700: #636669;
|
|
323
|
+
--bb-color-steel-gray-800: #4e5154;
|
|
324
|
+
--bb-color-steel-gray-900: #3a3c3f;
|
|
304
325
|
--bb-color-teal-100: #dcf6f5;
|
|
305
326
|
--bb-color-teal-1000: #022a28;
|
|
306
327
|
--bb-color-teal-1100: #011e1d;
|
|
@@ -381,15 +402,15 @@
|
|
|
381
402
|
--bb-font-weight-light: 300;
|
|
382
403
|
--bb-font-weight-regular: 400;
|
|
383
404
|
--bb-font-weight-semibold: 600;
|
|
384
|
-
--bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
385
|
-
--bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
386
|
-
--bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
387
|
-
--bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
388
|
-
--bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
389
|
-
--bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
390
|
-
--bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
391
|
-
--bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
392
|
-
--bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
405
|
+
--bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.6.0/assets/images/bb-logo.png');
|
|
406
|
+
--bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.6.0/assets/images/chevron_up_down_20_fill-base-dark.svg');
|
|
407
|
+
--bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.6.0/assets/images/chevron_up_down_20_fill-base-light.svg');
|
|
408
|
+
--bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.6.0/assets/images/chevron_up_down_20_fill-bb-dark.svg');
|
|
409
|
+
--bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.6.0/assets/images/chevron_up_down_20_fill-bb-light.svg');
|
|
410
|
+
--bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.6.0/assets/images/chevron_up_down_20_fill-disabled-base-dark.svg');
|
|
411
|
+
--bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.6.0/assets/images/chevron_up_down_20_fill-disabled-base-light.svg');
|
|
412
|
+
--bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.6.0/assets/images/chevron_up_down_20_fill-disabled-bb-dark.svg');
|
|
413
|
+
--bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.6.0/assets/images/chevron_up_down_20_fill-disabled-bb-light.svg');
|
|
393
414
|
--bb-letter_spacing-normal: normal;
|
|
394
415
|
--bb-letter_spacing-wider: 0.01rem;
|
|
395
416
|
--bb-letter_spacing-widest: 0.046875rem;
|
|
@@ -404,6 +425,8 @@
|
|
|
404
425
|
--bb-line_height-700: calc(32/24);
|
|
405
426
|
--bb-line_height-800: calc(36/27);
|
|
406
427
|
--bb-opacity-600: .6;
|
|
428
|
+
--bb-shadow-slate-0: 0 0 0 0 rgba(0, 0, 0, 0);
|
|
429
|
+
--bb-shadow-steel-fusion-0: 0 0 0 0 rgba(0, 0, 0, 0);
|
|
407
430
|
--bb-size-0: 0rem;
|
|
408
431
|
--bb-size-fixed-100: 16px;
|
|
409
432
|
--bb-size-fixed-12: 2px;
|
|
@@ -477,16 +500,34 @@
|
|
|
477
500
|
--bb-shadow-heavy-black-50: 0 1px 1px 0 rgba(0, 0, 0, 0.3), 0 1.5px 1px -1px rgba(0, 0, 0, 0.6);
|
|
478
501
|
--bb-shadow-heavy-black-800: 0 5px 5px -3px rgba(0, 0, 0, 0.24), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 8px 10px 1px rgba(0, 0, 0, 0.1);
|
|
479
502
|
--bb-shadow-heavy-black-simple-400: 1px 2px 4px 0 rgba(0, 0, 0, 0.65);
|
|
480
|
-
--bb-shadow-slate-
|
|
481
|
-
--bb-shadow-slate-
|
|
482
|
-
--bb-shadow-slate-
|
|
483
|
-
--bb-shadow-slate-
|
|
484
|
-
--bb-shadow-slate-
|
|
485
|
-
--bb-shadow-slate-
|
|
486
|
-
--bb-shadow-slate-
|
|
487
|
-
--bb-shadow-slate-
|
|
488
|
-
--bb-shadow-slate-
|
|
489
|
-
--bb-shadow-
|
|
503
|
+
--bb-shadow-slate-100: 0 1px 3px 0 rgba(12, 16, 22, 0.2), 0 2px 1px -1px rgba(12, 16, 22, 0.12), 0 1px 1px 0 rgba(12, 16, 22, 0.14);
|
|
504
|
+
--bb-shadow-slate-1600: 0 8px 10px -5px rgba(12, 16, 22, 0.2), 0 6px 30px 5px rgba(12, 16, 22, 0.12), 0 16px 24px 2px rgba(12, 16, 22, 0.14);
|
|
505
|
+
--bb-shadow-slate-200: 0 1px 8px 0 rgba(12, 16, 22, 0.2), 0 3px 3px -2px rgba(12, 16, 22, 0.12), 0 3px 4px 0 rgba(12, 16, 22, 0.14);
|
|
506
|
+
--bb-shadow-slate-2400: 0 11px 15px -7px rgba(12, 16, 22, 0.2), 0 9px 46px 8px rgba(12, 16, 22, 0.12), 0 24px 38px 3px rgba(12, 16, 22, 0.14);
|
|
507
|
+
--bb-shadow-slate-25: 0 1px 1px 0 rgba(12, 16, 22, 0.05);
|
|
508
|
+
--bb-shadow-slate-400: 0 2px 4px -1px rgba(12, 16, 22, 0.2), 0 1px 10px 0 rgba(12, 16, 22, 0.12), 0 4px 5px 0 rgba(12, 16, 22, 0.14);
|
|
509
|
+
--bb-shadow-slate-50: 0 1px 1px 0 rgba(12, 16, 22, 0.05), 0 1.5px 1px -1px rgba(12, 16, 22, 0.12);
|
|
510
|
+
--bb-shadow-slate-800: 0 5px 5px -3px rgba(12, 16, 22, 0.2), 0 3px 14px 2px rgba(12, 16, 22, 0.12), 0 8px 10px 1px rgba(12, 16, 22, 0.14);
|
|
511
|
+
--bb-shadow-slate-simple-400: 1px 2px 4px 0 rgba(12, 16, 22, 0.5);
|
|
512
|
+
--bb-shadow-steel-fusion-100: 0 1px 3px 0 rgba(0, 0, 0, .3), 0 2px 1px -1px rgba(0, 0, 0, .25), 0 1px 1px 0 rgba(0, 0, 0, .28);
|
|
513
|
+
--bb-shadow-steel-fusion-1600: 0 8px 10px -5px rgba(0, 0, 0, 0.36), 0 6px 30px 5px rgba(0, 0, 0, 0.22), 0 16px 24px 2px rgba(0, 0, 0, 0.25);
|
|
514
|
+
--bb-shadow-steel-fusion-200: 0 1px 8px 0 rgba(0, 0, 0, 0.5), 0 3px 3px -2px rgba(0, 0, 0, 0.3), 0 3px 4px 0 rgba(0, 0, 0, 0.35);
|
|
515
|
+
--bb-shadow-steel-fusion-2400: 0 11px 15px -7px rgba(0, 0, 0, 0.34), 0 9px 46px 8px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.24);
|
|
516
|
+
--bb-shadow-steel-fusion-25: 0 1px 1px 0 rgba(0, 0, 0, 0.35);
|
|
517
|
+
--bb-shadow-steel-fusion-400: 0 2px 4px -1px rgba(0, 0, 0, 0.24), 0 1px 10px 0 rgba(0, 0, 0, 0.16), 0 4px 5px 0 rgba(0, 0, 0, 0.21);
|
|
518
|
+
--bb-shadow-steel-fusion-50: 0 1px 1px 0 rgba(0, 0, 0, 0.3), 0 1.5px 1px -1px rgba(0, 0, 0, 0.6);
|
|
519
|
+
--bb-shadow-steel-fusion-800: 0 5px 5px -3px rgba(0, 0, 0, 0.24), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 8px 10px 1px rgba(0, 0, 0, 0.1);
|
|
520
|
+
--bb-shadow-steel-fusion-simple-400: 1px 2px 4px 0 rgba(0, 0, 0, 0.65);
|
|
521
|
+
--bb-shadow-steel-gray-0: 0 0 0 0 rgba(33, 44, 63, 0);
|
|
522
|
+
--bb-shadow-steel-gray-100: 0 1px 3px 0 rgba(0, 0, 0, .3), 0 2px 1px -1px rgba(0, 0, 0, .25), 0 1px 1px 0 rgba(0, 0, 0, .28);
|
|
523
|
+
--bb-shadow-steel-gray-1600: 0 8px 10px -5px rgba(0, 0, 0, 0.36), 0 6px 30px 5px rgba(0, 0, 0, 0.22), 0 16px 24px 2px rgba(0, 0, 0, 0.25);
|
|
524
|
+
--bb-shadow-steel-gray-200: 0 1px 8px 0 rgba(0, 0, 0, 0.5), 0 3px 3px -2px rgba(0, 0, 0, 0.3), 0 3px 4px 0 rgba(0, 0, 0, 0.35);
|
|
525
|
+
--bb-shadow-steel-gray-2400: 0 11px 15px -7px rgba(0, 0, 0, 0.34), 0 9px 46px 8px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.24);
|
|
526
|
+
--bb-shadow-steel-gray-25: 0 1px 1px 0 rgba(0, 0, 0, 0.35);
|
|
527
|
+
--bb-shadow-steel-gray-400: 0 2px 4px -1px rgba(0, 0, 0, 0.24), 0 1px 10px 0 rgba(0, 0, 0, 0.16), 0 4px 5px 0 rgba(0, 0, 0, 0.21);
|
|
528
|
+
--bb-shadow-steel-gray-50: 0 1px 1px 0 rgba(0, 0, 0, 0.3), 0 1.5px 1px -1px rgba(0, 0, 0, 0.6);
|
|
529
|
+
--bb-shadow-steel-gray-800: 0 5px 5px -3px rgba(0, 0, 0, 0.24), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 8px 10px 1px rgba(0, 0, 0, 0.1);
|
|
530
|
+
--bb-shadow-steel-gray-simple-400: 1px 2px 4px 0 rgba(0, 0, 0, 0.65);
|
|
490
531
|
}
|
|
491
532
|
:root:has(body.sky-theme-modern.sky-theme-brand-base) {
|
|
492
533
|
--bb-color-scrollbar-base-dark-thumb: #51555c;
|
|
@@ -670,7 +711,8 @@
|
|
|
670
711
|
--sky-color-icon-info: var(--bb-color-blue-600);
|
|
671
712
|
--sky-color-icon-input-action: var(--bb-color-gray-600);
|
|
672
713
|
--sky-color-icon-inverse: var(--bb-color-white);
|
|
673
|
-
--sky-color-icon-on_prominent: var(--bb-color-white);
|
|
714
|
+
--sky-color-icon-on_prominent-base: var(--bb-color-white);
|
|
715
|
+
--sky-color-icon-on_prominent-disabled: var(--bb-color-gray-600);
|
|
674
716
|
--sky-color-icon-selected: var(--bb-color-blue-600);
|
|
675
717
|
--sky-color-icon-success: var(--bb-color-green-600);
|
|
676
718
|
--sky-color-icon-warning: var(--bb-color-yellow-400);
|
|
@@ -972,7 +1014,8 @@
|
|
|
972
1014
|
--sky-color-icon-info: var(--bb-color-blue-600);
|
|
973
1015
|
--sky-color-icon-input-action: var(--bb-color-sky-600);
|
|
974
1016
|
--sky-color-icon-inverse: var(--bb-color-gray-1100);
|
|
975
|
-
--sky-color-icon-on_prominent: var(--bb-color-white);
|
|
1017
|
+
--sky-color-icon-on_prominent-base: var(--bb-color-white);
|
|
1018
|
+
--sky-color-icon-on_prominent-disabled: var(--bb-color-gray-600);
|
|
976
1019
|
--sky-color-icon-selected: var(--bb-color-blue-600);
|
|
977
1020
|
--sky-color-icon-success: var(--bb-color-green-700);
|
|
978
1021
|
--sky-color-icon-warning: var(--bb-color-yellow-600);
|
|
@@ -981,7 +1024,7 @@
|
|
|
981
1024
|
--sky-color-illustration-fill-softest: var(--bb-color-gray-900);
|
|
982
1025
|
--sky-color-illustration-stroke: var(--bb-color-green-200);
|
|
983
1026
|
--sky-color-text-action: var(--bb-color-sky-600);
|
|
984
|
-
--sky-color-text-action_contrast: var(--bb-color-blue-
|
|
1027
|
+
--sky-color-text-action_contrast: var(--bb-color-blue-dark-200);
|
|
985
1028
|
--sky-color-text-danger: var(--bb-color-red-400);
|
|
986
1029
|
--sky-color-text-deemphasized: var(--bb-color-gray-300);
|
|
987
1030
|
--sky-color-text-default: var(--bb-color-gray-25);
|
|
@@ -990,14 +1033,14 @@
|
|
|
990
1033
|
--sky-color-text-on_prominent: var(--bb-color-white);
|
|
991
1034
|
--sky-color-text-selected: var(--bb-color-blue-400);
|
|
992
1035
|
--sky-color-viz-axis: var(--bb-color-gray-600);
|
|
993
|
-
--sky-color-viz-category-1: var(--bb-color-teal-600);
|
|
994
|
-
--sky-color-viz-category-2: var(--bb-color-purple-300);
|
|
995
|
-
--sky-color-viz-category-3: var(--bb-color-blue-600);
|
|
996
|
-
--sky-color-viz-category-4: var(--bb-color-sky-200);
|
|
997
|
-
--sky-color-viz-category-5: var(--bb-color-orange-500);
|
|
998
|
-
--sky-color-viz-category-6: var(--bb-color-red-300);
|
|
999
|
-
--sky-color-viz-category-7: var(--bb-color-pink-500);
|
|
1000
|
-
--sky-color-viz-category-8: var(--bb-color-green-400);
|
|
1036
|
+
--sky-color-viz-category-1: var(--bb-color-teal-dark-600);
|
|
1037
|
+
--sky-color-viz-category-2: var(--bb-color-purple-dark-300);
|
|
1038
|
+
--sky-color-viz-category-3: var(--bb-color-blue-dark-600);
|
|
1039
|
+
--sky-color-viz-category-4: var(--bb-color-sky-dark-200);
|
|
1040
|
+
--sky-color-viz-category-5: var(--bb-color-orange-dark-500);
|
|
1041
|
+
--sky-color-viz-category-6: var(--bb-color-red-dark-300);
|
|
1042
|
+
--sky-color-viz-category-7: var(--bb-color-pink-dark-500);
|
|
1043
|
+
--sky-color-viz-category-8: var(--bb-color-green-dark-400);
|
|
1001
1044
|
--sky-color-viz-diverge-neg-1: var(--bb-color-red-1000);
|
|
1002
1045
|
--sky-color-viz-diverge-neg-10: var(--bb-color-red-100);
|
|
1003
1046
|
--sky-color-viz-diverge-neg-2: var(--bb-color-red-900);
|