@blackbaud/skyux-design-tokens 4.0.2 → 4.1.1

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 (9) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/assets/assets.json +1 -1
  3. package/assets/scss/base.css +64 -2
  4. package/assets/scss/blackbaud.css +2 -2
  5. package/assets/scss/modern.css +1 -1
  6. package/bundles/base.css +64 -2
  7. package/bundles/blackbaud.css +2 -2
  8. package/bundles/modern.css +1 -1
  9. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -2,6 +2,20 @@
2
2
 
3
3
  - Added `neutral-medium-dark` token in modern. [#64](https://github.com/blackbaud/skyux-design-tokens/pull/64)
4
4
 
5
+ ## [4.1.1](https://github.com/blackbaud/skyux-design-tokens/compare/4.1.0...4.1.1) (2026-01-09)
6
+
7
+
8
+ ### Bug Fixes
9
+
10
+ * darken gray 600 slightly ([#308](https://github.com/blackbaud/skyux-design-tokens/issues/308)) ([080fce7](https://github.com/blackbaud/skyux-design-tokens/commit/080fce71e131c99aaa9509fd1debb95ad1e227ed))
11
+
12
+ ## [4.1.0](https://github.com/blackbaud/skyux-design-tokens/compare/4.0.2...4.1.0) (2026-01-09)
13
+
14
+
15
+ ### Features
16
+
17
+ * flip viz and category colors on base scales for dark mode ([#309](https://github.com/blackbaud/skyux-design-tokens/issues/309)) ([563bab6](https://github.com/blackbaud/skyux-design-tokens/commit/563bab6f6b502d5e72adaddd6b5a6decb30680f6))
18
+
5
19
  ## [4.0.2](https://github.com/blackbaud/skyux-design-tokens/compare/4.0.1...4.0.2) (2025-12-08)
6
20
 
7
21
 
package/assets/assets.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "fonts": [],
3
3
  "images": {
4
4
  "favicon": {
5
- "src": "https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.0.2/assets/images/favicon.ico"
5
+ "src": "https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.1.1/assets/images/favicon.ico"
6
6
  }
7
7
  },
8
8
  "strings": {
package/assets/scss/base.css CHANGED
@@ -43,7 +43,7 @@
43
43
  --bb-color-gray-400: #a3a6a9;
44
44
  --bb-color-gray-50: #f4f4f5;
45
45
  --bb-color-gray-500: #85888d;
46
- --bb-color-gray-600: #6b6f74;
46
+ --bb-color-gray-600: #666b70;
47
47
  --bb-color-gray-700: #51555c;
48
48
  --bb-color-gray-800: #3b4047;
49
49
  --bb-color-gray-900: #252b33;
@@ -206,7 +206,7 @@
206
206
  --bb-font-weight-light: 300;
207
207
  --bb-font-weight-regular: 400;
208
208
  --bb-font-weight-semibold: 600;
209
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.0.2/assets/images/bb-logo.png');
209
+ --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.1.1/assets/images/bb-logo.png');
210
210
  --bb-letter_spacing-normal: normal;
211
211
  --bb-letter_spacing-wider: 0.01rem;
212
212
  --bb-letter_spacing-widest: 0.046875rem;
@@ -431,6 +431,27 @@
431
431
  --sky-color-border-tab-wizard-disabled: var(--bb-color-transparent);
432
432
  --sky-color-border-text_highlight: var(--bb-color-yellow-600);
433
433
  --sky-color-border-warning: var(--bb-color-yellow-400);
434
+ --sky-color-category-blue: var(--bb-color-sky-900);
435
+ --sky-color-category-green: var(--bb-color-green-900);
436
+ --sky-color-category-orange: var(--bb-color-orange-900);
437
+ --sky-color-category-purple: var(--bb-color-purple-900);
438
+ --sky-color-category-red: var(--bb-color-red-900);
439
+ --sky-color-category-teal: var(--bb-color-teal-900);
440
+ --sky-color-category-yellow: var(--bb-color-yellow-900);
441
+ --sky-color-classify-1-heavy: var(--bb-color-teal-400);
442
+ --sky-color-classify-1-soft: var(--bb-color-teal-900);
443
+ --sky-color-classify-2-heavy: var(--bb-color-purple-400);
444
+ --sky-color-classify-2-soft: var(--bb-color-purple-900);
445
+ --sky-color-classify-3-heavy: var(--bb-color-sky-400);
446
+ --sky-color-classify-3-soft: var(--bb-color-sky-900);
447
+ --sky-color-classify-4-heavy: var(--bb-color-orange-400);
448
+ --sky-color-classify-4-soft: var(--bb-color-orange-900);
449
+ --sky-color-classify-5-heavy: var(--bb-color-pink-400);
450
+ --sky-color-classify-5-soft: var(--bb-color-pink-900);
451
+ --sky-color-classify-6-heavy: var(--bb-color-green-400);
452
+ --sky-color-classify-6-soft: var(--bb-color-green-900);
453
+ --sky-color-classify-7-heavy: var(--bb-color-red-400);
454
+ --sky-color-classify-7-soft: var(--bb-color-red-900);
434
455
  --sky-color-icon-action: var(--bb-color-sky-600);
435
456
  --sky-color-icon-danger: var(--bb-color-red-400);
436
457
  --sky-color-icon-deemphasized: var(--bb-color-gray-300);
@@ -454,6 +475,47 @@
454
475
  --sky-color-text-heading: var(--bb-color-gray-50);
455
476
  --sky-color-text-inverse: var(--bb-color-gray-1100);
456
477
  --sky-color-text-selected: var(--bb-color-blue-400);
478
+ --sky-color-viz-axis: var(--bb-color-gray-600);
479
+ --sky-color-viz-category-1: var(--bb-color-teal-600);
480
+ --sky-color-viz-category-2: var(--bb-color-purple-300);
481
+ --sky-color-viz-category-3: var(--bb-color-blue-600);
482
+ --sky-color-viz-category-4: var(--bb-color-sky-200);
483
+ --sky-color-viz-category-5: var(--bb-color-orange-500);
484
+ --sky-color-viz-category-6: var(--bb-color-red-300);
485
+ --sky-color-viz-category-7: var(--bb-color-pink-500);
486
+ --sky-color-viz-category-8: var(--bb-color-green-400);
487
+ --sky-color-viz-diverge-neg-1: var(--bb-color-red-1000);
488
+ --sky-color-viz-diverge-neg-10: var(--bb-color-red-100);
489
+ --sky-color-viz-diverge-neg-2: var(--bb-color-red-900);
490
+ --sky-color-viz-diverge-neg-3: var(--bb-color-red-800);
491
+ --sky-color-viz-diverge-neg-4: var(--bb-color-red-700);
492
+ --sky-color-viz-diverge-neg-5: var(--bb-color-red-600);
493
+ --sky-color-viz-diverge-neg-6: var(--bb-color-red-500);
494
+ --sky-color-viz-diverge-neg-7: var(--bb-color-red-400);
495
+ --sky-color-viz-diverge-neg-8: var(--bb-color-red-300);
496
+ --sky-color-viz-diverge-neg-9: var(--bb-color-red-200);
497
+ --sky-color-viz-diverge-pos-1: var(--bb-color-blue-1000);
498
+ --sky-color-viz-diverge-pos-10: var(--bb-color-blue-100);
499
+ --sky-color-viz-diverge-pos-2: var(--bb-color-blue-900);
500
+ --sky-color-viz-diverge-pos-3: var(--bb-color-blue-800);
501
+ --sky-color-viz-diverge-pos-4: var(--bb-color-blue-700);
502
+ --sky-color-viz-diverge-pos-5: var(--bb-color-blue-600);
503
+ --sky-color-viz-diverge-pos-6: var(--bb-color-blue-500);
504
+ --sky-color-viz-diverge-pos-7: var(--bb-color-blue-400);
505
+ --sky-color-viz-diverge-pos-8: var(--bb-color-blue-300);
506
+ --sky-color-viz-diverge-pos-9: var(--bb-color-blue-200);
507
+ --sky-color-viz-gridline: var(--bb-color-gray-900);
508
+ --sky-color-viz-marker: var(--bb-color-gray-200);
509
+ --sky-color-viz-sequence-1: var(--bb-color-teal-1000);
510
+ --sky-color-viz-sequence-10: var(--bb-color-teal-100);
511
+ --sky-color-viz-sequence-2: var(--bb-color-teal-900);
512
+ --sky-color-viz-sequence-3: var(--bb-color-teal-800);
513
+ --sky-color-viz-sequence-4: var(--bb-color-teal-700);
514
+ --sky-color-viz-sequence-5: var(--bb-color-teal-600);
515
+ --sky-color-viz-sequence-6: var(--bb-color-teal-500);
516
+ --sky-color-viz-sequence-7: var(--bb-color-teal-400);
517
+ --sky-color-viz-sequence-8: var(--bb-color-teal-300);
518
+ --sky-color-viz-sequence-9: var(--bb-color-teal-200);
457
519
  --sky-elevation-none: var(--bb-shadow-gray-0);
458
520
  --sky-opacity-wait: var(--bb-opacity-600);
459
521
  --sky-elevation-focus: var(--bb-shadow-gray-200);
package/assets/scss/blackbaud.css CHANGED
@@ -43,7 +43,7 @@
43
43
  --bb-color-gray-400: #a3a6a9;
44
44
  --bb-color-gray-50: #f4f4f5;
45
45
  --bb-color-gray-500: #85888d;
46
- --bb-color-gray-600: #6b6f74;
46
+ --bb-color-gray-600: #666b70;
47
47
  --bb-color-gray-700: #51555c;
48
48
  --bb-color-gray-800: #3b4047;
49
49
  --bb-color-gray-900: #252b33;
@@ -206,7 +206,7 @@
206
206
  --bb-font-weight-light: 300;
207
207
  --bb-font-weight-regular: 400;
208
208
  --bb-font-weight-semibold: 600;
209
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.0.2/assets/images/bb-logo.png');
209
+ --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.1.1/assets/images/bb-logo.png');
210
210
  --bb-letter_spacing-normal: normal;
211
211
  --bb-letter_spacing-wider: 0.01rem;
212
212
  --bb-letter_spacing-widest: 0.046875rem;
package/assets/scss/modern.css CHANGED
@@ -77,7 +77,7 @@
77
77
  --modern-font-weight-light: 300;
78
78
  --modern-font-weight-regular: 400;
79
79
  --modern-font-weight-semibold: 600;
80
- --modern-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.0.2/assets/images/bb-logo.png');
80
+ --modern-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.1.1/assets/images/bb-logo.png');
81
81
  --modern-letter_spacing-normal: normal;
82
82
  --modern-line_height-110: 1.1;
83
83
  --modern-line_height-115: 1.15;
package/bundles/base.css CHANGED
@@ -43,7 +43,7 @@
43
43
  --bb-color-gray-400: #a3a6a9;
44
44
  --bb-color-gray-50: #f4f4f5;
45
45
  --bb-color-gray-500: #85888d;
46
- --bb-color-gray-600: #6b6f74;
46
+ --bb-color-gray-600: #666b70;
47
47
  --bb-color-gray-700: #51555c;
48
48
  --bb-color-gray-800: #3b4047;
49
49
  --bb-color-gray-900: #252b33;
@@ -206,7 +206,7 @@
206
206
  --bb-font-weight-light: 300;
207
207
  --bb-font-weight-regular: 400;
208
208
  --bb-font-weight-semibold: 600;
209
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.0.2/assets/images/bb-logo.png');
209
+ --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.1.1/assets/images/bb-logo.png');
210
210
  --bb-letter_spacing-normal: normal;
211
211
  --bb-letter_spacing-wider: 0.01rem;
212
212
  --bb-letter_spacing-widest: 0.046875rem;
@@ -431,6 +431,27 @@
431
431
  --sky-color-border-tab-wizard-disabled: var(--bb-color-transparent);
432
432
  --sky-color-border-text_highlight: var(--bb-color-yellow-600);
433
433
  --sky-color-border-warning: var(--bb-color-yellow-400);
434
+ --sky-color-category-blue: var(--bb-color-sky-900);
435
+ --sky-color-category-green: var(--bb-color-green-900);
436
+ --sky-color-category-orange: var(--bb-color-orange-900);
437
+ --sky-color-category-purple: var(--bb-color-purple-900);
438
+ --sky-color-category-red: var(--bb-color-red-900);
439
+ --sky-color-category-teal: var(--bb-color-teal-900);
440
+ --sky-color-category-yellow: var(--bb-color-yellow-900);
441
+ --sky-color-classify-1-heavy: var(--bb-color-teal-400);
442
+ --sky-color-classify-1-soft: var(--bb-color-teal-900);
443
+ --sky-color-classify-2-heavy: var(--bb-color-purple-400);
444
+ --sky-color-classify-2-soft: var(--bb-color-purple-900);
445
+ --sky-color-classify-3-heavy: var(--bb-color-sky-400);
446
+ --sky-color-classify-3-soft: var(--bb-color-sky-900);
447
+ --sky-color-classify-4-heavy: var(--bb-color-orange-400);
448
+ --sky-color-classify-4-soft: var(--bb-color-orange-900);
449
+ --sky-color-classify-5-heavy: var(--bb-color-pink-400);
450
+ --sky-color-classify-5-soft: var(--bb-color-pink-900);
451
+ --sky-color-classify-6-heavy: var(--bb-color-green-400);
452
+ --sky-color-classify-6-soft: var(--bb-color-green-900);
453
+ --sky-color-classify-7-heavy: var(--bb-color-red-400);
454
+ --sky-color-classify-7-soft: var(--bb-color-red-900);
434
455
  --sky-color-icon-action: var(--bb-color-sky-600);
435
456
  --sky-color-icon-danger: var(--bb-color-red-400);
436
457
  --sky-color-icon-deemphasized: var(--bb-color-gray-300);
@@ -454,6 +475,47 @@
454
475
  --sky-color-text-heading: var(--bb-color-gray-50);
455
476
  --sky-color-text-inverse: var(--bb-color-gray-1100);
456
477
  --sky-color-text-selected: var(--bb-color-blue-400);
478
+ --sky-color-viz-axis: var(--bb-color-gray-600);
479
+ --sky-color-viz-category-1: var(--bb-color-teal-600);
480
+ --sky-color-viz-category-2: var(--bb-color-purple-300);
481
+ --sky-color-viz-category-3: var(--bb-color-blue-600);
482
+ --sky-color-viz-category-4: var(--bb-color-sky-200);
483
+ --sky-color-viz-category-5: var(--bb-color-orange-500);
484
+ --sky-color-viz-category-6: var(--bb-color-red-300);
485
+ --sky-color-viz-category-7: var(--bb-color-pink-500);
486
+ --sky-color-viz-category-8: var(--bb-color-green-400);
487
+ --sky-color-viz-diverge-neg-1: var(--bb-color-red-1000);
488
+ --sky-color-viz-diverge-neg-10: var(--bb-color-red-100);
489
+ --sky-color-viz-diverge-neg-2: var(--bb-color-red-900);
490
+ --sky-color-viz-diverge-neg-3: var(--bb-color-red-800);
491
+ --sky-color-viz-diverge-neg-4: var(--bb-color-red-700);
492
+ --sky-color-viz-diverge-neg-5: var(--bb-color-red-600);
493
+ --sky-color-viz-diverge-neg-6: var(--bb-color-red-500);
494
+ --sky-color-viz-diverge-neg-7: var(--bb-color-red-400);
495
+ --sky-color-viz-diverge-neg-8: var(--bb-color-red-300);
496
+ --sky-color-viz-diverge-neg-9: var(--bb-color-red-200);
497
+ --sky-color-viz-diverge-pos-1: var(--bb-color-blue-1000);
498
+ --sky-color-viz-diverge-pos-10: var(--bb-color-blue-100);
499
+ --sky-color-viz-diverge-pos-2: var(--bb-color-blue-900);
500
+ --sky-color-viz-diverge-pos-3: var(--bb-color-blue-800);
501
+ --sky-color-viz-diverge-pos-4: var(--bb-color-blue-700);
502
+ --sky-color-viz-diverge-pos-5: var(--bb-color-blue-600);
503
+ --sky-color-viz-diverge-pos-6: var(--bb-color-blue-500);
504
+ --sky-color-viz-diverge-pos-7: var(--bb-color-blue-400);
505
+ --sky-color-viz-diverge-pos-8: var(--bb-color-blue-300);
506
+ --sky-color-viz-diverge-pos-9: var(--bb-color-blue-200);
507
+ --sky-color-viz-gridline: var(--bb-color-gray-900);
508
+ --sky-color-viz-marker: var(--bb-color-gray-200);
509
+ --sky-color-viz-sequence-1: var(--bb-color-teal-1000);
510
+ --sky-color-viz-sequence-10: var(--bb-color-teal-100);
511
+ --sky-color-viz-sequence-2: var(--bb-color-teal-900);
512
+ --sky-color-viz-sequence-3: var(--bb-color-teal-800);
513
+ --sky-color-viz-sequence-4: var(--bb-color-teal-700);
514
+ --sky-color-viz-sequence-5: var(--bb-color-teal-600);
515
+ --sky-color-viz-sequence-6: var(--bb-color-teal-500);
516
+ --sky-color-viz-sequence-7: var(--bb-color-teal-400);
517
+ --sky-color-viz-sequence-8: var(--bb-color-teal-300);
518
+ --sky-color-viz-sequence-9: var(--bb-color-teal-200);
457
519
  --sky-elevation-none: var(--bb-shadow-gray-0);
458
520
  --sky-opacity-wait: var(--bb-opacity-600);
459
521
  --sky-elevation-focus: var(--bb-shadow-gray-200);
package/bundles/blackbaud.css CHANGED
@@ -43,7 +43,7 @@
43
43
  --bb-color-gray-400: #a3a6a9;
44
44
  --bb-color-gray-50: #f4f4f5;
45
45
  --bb-color-gray-500: #85888d;
46
- --bb-color-gray-600: #6b6f74;
46
+ --bb-color-gray-600: #666b70;
47
47
  --bb-color-gray-700: #51555c;
48
48
  --bb-color-gray-800: #3b4047;
49
49
  --bb-color-gray-900: #252b33;
@@ -206,7 +206,7 @@
206
206
  --bb-font-weight-light: 300;
207
207
  --bb-font-weight-regular: 400;
208
208
  --bb-font-weight-semibold: 600;
209
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.0.2/assets/images/bb-logo.png');
209
+ --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.1.1/assets/images/bb-logo.png');
210
210
  --bb-letter_spacing-normal: normal;
211
211
  --bb-letter_spacing-wider: 0.01rem;
212
212
  --bb-letter_spacing-widest: 0.046875rem;
package/bundles/modern.css CHANGED
@@ -77,7 +77,7 @@
77
77
  --modern-font-weight-light: 300;
78
78
  --modern-font-weight-regular: 400;
79
79
  --modern-font-weight-semibold: 600;
80
- --modern-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.0.2/assets/images/bb-logo.png');
80
+ --modern-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.1.1/assets/images/bb-logo.png');
81
81
  --modern-letter_spacing-normal: normal;
82
82
  --modern-line_height-110: 1.1;
83
83
  --modern-line_height-115: 1.15;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blackbaud/skyux-design-tokens",
3
- "version": "4.0.2",
3
+ "version": "4.1.1",
4
4
  "description": "Design tokens for SKY UX",
5
5
  "homepage": "https://github.com/blackbaud/skyux-design-tokens",
6
6
  "license": "MIT",