@blackbaud/skyux-design-tokens 6.5.1 → 6.7.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 +69 -28
- package/assets/scss/blackbaud.css +195 -153
- package/bundles/base.css +69 -28
- package/bundles/base_blackbaud_public-api.css +3753 -0
- package/bundles/base_public-api.css +2922 -0
- package/bundles/blackbaud.css +195 -153
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,24 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [6.7.0](https://github.com/blackbaud/skyux-design-tokens/compare/6.6.0...6.7.0) (2026-08-26)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Features
|
|
7
|
+
|
|
8
|
+
* generate base/brand/public API combo CSS ([#428](https://github.com/blackbaud/skyux-design-tokens/issues/428)) ([dbfb37e](https://github.com/blackbaud/skyux-design-tokens/commit/dbfb37e27a79f7cb5b386a9c7b921a641d85d578))
|
|
9
|
+
|
|
10
|
+
## [6.6.0](https://github.com/blackbaud/skyux-design-tokens/compare/6.5.1...6.6.0) (2026-08-26)
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
### Features
|
|
14
|
+
|
|
15
|
+
* 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))
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### Bug Fixes
|
|
19
|
+
|
|
20
|
+
* 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))
|
|
21
|
+
|
|
3
22
|
## [6.5.1](https://github.com/blackbaud/skyux-design-tokens/compare/6.5.0...6.5.1) (2026-08-25)
|
|
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.7.0/assets/images/bb-logo.png');
|
|
406
|
+
--bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.7.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.7.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.7.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.7.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.7.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.7.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.7.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.7.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;
|
|
@@ -983,7 +1024,7 @@
|
|
|
983
1024
|
--sky-color-illustration-fill-softest: var(--bb-color-gray-900);
|
|
984
1025
|
--sky-color-illustration-stroke: var(--bb-color-green-200);
|
|
985
1026
|
--sky-color-text-action: var(--bb-color-sky-600);
|
|
986
|
-
--sky-color-text-action_contrast: var(--bb-color-blue-
|
|
1027
|
+
--sky-color-text-action_contrast: var(--bb-color-blue-dark-200);
|
|
987
1028
|
--sky-color-text-danger: var(--bb-color-red-400);
|
|
988
1029
|
--sky-color-text-deemphasized: var(--bb-color-gray-300);
|
|
989
1030
|
--sky-color-text-default: var(--bb-color-gray-25);
|
|
@@ -992,14 +1033,14 @@
|
|
|
992
1033
|
--sky-color-text-on_prominent: var(--bb-color-white);
|
|
993
1034
|
--sky-color-text-selected: var(--bb-color-blue-400);
|
|
994
1035
|
--sky-color-viz-axis: var(--bb-color-gray-600);
|
|
995
|
-
--sky-color-viz-category-1: var(--bb-color-teal-600);
|
|
996
|
-
--sky-color-viz-category-2: var(--bb-color-purple-300);
|
|
997
|
-
--sky-color-viz-category-3: var(--bb-color-blue-600);
|
|
998
|
-
--sky-color-viz-category-4: var(--bb-color-sky-200);
|
|
999
|
-
--sky-color-viz-category-5: var(--bb-color-orange-500);
|
|
1000
|
-
--sky-color-viz-category-6: var(--bb-color-red-300);
|
|
1001
|
-
--sky-color-viz-category-7: var(--bb-color-pink-500);
|
|
1002
|
-
--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);
|
|
1003
1044
|
--sky-color-viz-diverge-neg-1: var(--bb-color-red-1000);
|
|
1004
1045
|
--sky-color-viz-diverge-neg-10: var(--bb-color-red-100);
|
|
1005
1046
|
--sky-color-viz-diverge-neg-2: var(--bb-color-red-900);
|