@blackbaud/skyux-design-tokens 4.2.1 → 4.3.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 (17) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/assets/assets.json +1 -1
  3. package/assets/scss/base.css +23 -12
  4. package/assets/scss/blackbaud.css +20 -11
  5. package/assets/scss/modern.css +1 -1
  6. package/bundles/base.css +23 -12
  7. package/bundles/blackbaud.css +20 -11
  8. package/bundles/modern.css +1 -1
  9. package/package.json +1 -1
  10. /package/assets/images/{chevron_up_down_24_fill-base-dark.svg → chevron_up_down_20_fill-base-dark.svg} +0 -0
  11. /package/assets/images/{chevron_up_down_24_fill-base-light.svg → chevron_up_down_20_fill-base-light.svg} +0 -0
  12. /package/assets/images/{chevron_up_down_24_fill-bb-dark.svg → chevron_up_down_20_fill-bb-dark.svg} +0 -0
  13. /package/assets/images/{chevron_up_down_24_fill-bb-light.svg → chevron_up_down_20_fill-bb-light.svg} +0 -0
  14. /package/assets/images/{chevron_up_down_24_fill-disabled-base-dark.svg → chevron_up_down_20_fill-disabled-base-dark.svg} +0 -0
  15. /package/assets/images/{chevron_up_down_24_fill-disabled-base-light.svg → chevron_up_down_20_fill-disabled-base-light.svg} +0 -0
  16. /package/assets/images/{chevron_up_down_24_fill-disabled-bb-dark.svg → chevron_up_down_20_fill-disabled-bb-dark.svg} +0 -0
  17. /package/assets/images/{chevron_up_down_24_fill-disabled-bb-light.svg → chevron_up_down_20_fill-disabled-bb-light.svg} +0 -0
package/CHANGELOG.md CHANGED
@@ -2,6 +2,19 @@
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.3.0](https://github.com/blackbaud/skyux-design-tokens/compare/4.2.1...4.3.0) (2026-02-12)
6
+
7
+
8
+ ### Features
9
+
10
+ * add dark mode colors for accent button ([#320](https://github.com/blackbaud/skyux-design-tokens/issues/320)) ([72e0404](https://github.com/blackbaud/skyux-design-tokens/commit/72e0404901353ef6f7759579088cbffbaa9ebe16))
11
+ * update base tokens for blocking colors in light and dark mode ([#315](https://github.com/blackbaud/skyux-design-tokens/issues/315)) ([f8fb7da](https://github.com/blackbaud/skyux-design-tokens/commit/f8fb7dad22f92ec866d401aa11d9020430d93a7e))
12
+
13
+
14
+ ### Bug Fixes
15
+
16
+ * renaming select icons to 20 size ([#319](https://github.com/blackbaud/skyux-design-tokens/issues/319)) ([9bbd24f](https://github.com/blackbaud/skyux-design-tokens/commit/9bbd24f112e0301a45d9f563577a275ca4794668))
17
+
5
18
  ## [4.2.1](https://github.com/blackbaud/skyux-design-tokens/compare/4.2.0...4.2.1) (2026-01-30)
6
19
 
7
20
 
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.2.1/assets/images/favicon.ico"
5
+ "src": "https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.3.0/assets/images/favicon.ico"
6
6
  }
7
7
  },
8
8
  "strings": {
package/assets/scss/base.css CHANGED
@@ -63,7 +63,6 @@
63
63
  --bb-border-style-solid: solid;
64
64
  --bb-brand-name: 'Blackbaud';
65
65
  --bb-color-black: #000000;
66
- --bb-color-blocking: rgba(255, 255, 255, 0.7);
67
66
  --bb-color-blue-100: #eef3fc;
68
67
  --bb-color-blue-1000: #0d2040;
69
68
  --bb-color-blue-1100: #0b1b35;
@@ -165,8 +164,10 @@
165
164
  --bb-color-red-700: #ae2e31;
166
165
  --bb-color-red-800: #822325;
167
166
  --bb-color-red-900: #641b1c;
167
+ --bb-color-rgba-black-70: rgba(0, 0, 0, 0.7);
168
168
  --bb-color-rgba-purple-600-40: rgba(176, 97, 242, 0.4);
169
169
  --bb-color-rgba-sky-600-40: rgba(0, 207, 255, 0.4);
170
+ --bb-color-rgba-white-70: rgba(255, 255, 255, 0.7);
170
171
  --bb-color-scrim: rgba(37, 43, 51, 0.5);
171
172
  --bb-color-sky-100: #d6f7ff;
172
173
  --bb-color-sky-1000: #002933;
@@ -254,15 +255,15 @@
254
255
  --bb-font-weight-light: 300;
255
256
  --bb-font-weight-regular: 400;
256
257
  --bb-font-weight-semibold: 600;
257
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.1/assets/images/bb-logo.png');
258
- --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.1/assets/images/chevron_up_down_24_fill-base-dark.svg');
259
- --bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.1/assets/images/chevron_up_down_24_fill-base-light.svg');
260
- --bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.1/assets/images/chevron_up_down_24_fill-bb-dark.svg');
261
- --bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.1/assets/images/chevron_up_down_24_fill-bb-light.svg');
262
- --bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.1/assets/images/chevron_up_down_24_fill-disabled-base-dark.svg');
263
- --bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.1/assets/images/chevron_up_down_24_fill-disabled-base-light.svg');
264
- --bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.1/assets/images/chevron_up_down_24_fill-disabled-bb-dark.svg');
265
- --bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.1/assets/images/chevron_up_down_24_fill-disabled-bb-light.svg');
258
+ --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.3.0/assets/images/bb-logo.png');
259
+ --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.3.0/assets/images/chevron_up_down_20_fill-base-dark.svg');
260
+ --bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.3.0/assets/images/chevron_up_down_20_fill-base-light.svg');
261
+ --bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.3.0/assets/images/chevron_up_down_20_fill-bb-dark.svg');
262
+ --bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.3.0/assets/images/chevron_up_down_20_fill-bb-light.svg');
263
+ --bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.3.0/assets/images/chevron_up_down_20_fill-disabled-base-dark.svg');
264
+ --bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.3.0/assets/images/chevron_up_down_20_fill-disabled-base-light.svg');
265
+ --bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.3.0/assets/images/chevron_up_down_20_fill-disabled-bb-dark.svg');
266
+ --bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.3.0/assets/images/chevron_up_down_20_fill-disabled-bb-light.svg');
266
267
  --bb-letter_spacing-normal: normal;
267
268
  --bb-letter_spacing-wider: 0.01rem;
268
269
  --bb-letter_spacing-widest: 0.046875rem;
@@ -346,6 +347,10 @@
346
347
  --bb-shadow-slate-800: 0 5px 5px -3px rgba(33, 44, 63, 0.2), 0 3px 14px 2px rgba(33, 44, 63, 0.12), 0 8px 10px 1px rgba(33, 44, 63, 0.14);
347
348
  }
348
349
  .sky-theme-modern.sky-theme-brand-base.sky-theme-mode-dark {
350
+ --sky-color-background-action-accent-active: var(--bb-color-gray-600);
351
+ --sky-color-background-action-accent-base: var(--bb-color-blue-900);
352
+ --sky-color-background-action-accent-focus: var(--bb-color-gray-700);
353
+ --sky-color-background-action-accent-hover: var(--bb-color-gray-700);
349
354
  --sky-color-background-action-danger-active: var(--bb-color-red-600);
350
355
  --sky-color-background-action-danger-base: var(--bb-color-red-600);
351
356
  --sky-color-background-action-danger-focus: var(--bb-color-red-600);
@@ -366,7 +371,7 @@
366
371
  --sky-color-background-action-tertiary-base: var(--bb-color-transparent);
367
372
  --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
368
373
  --sky-color-background-action-tertiary-hover: var(--bb-color-transparent);
369
- --sky-color-background-blocking: var(--bb-color-blocking);
374
+ --sky-color-background-blocking: var(--bb-color-rgba-black-70);
370
375
  --sky-color-background-container-base: var(--bb-color-gray-1000);
371
376
  --sky-color-background-container-danger: var(--bb-color-red-800);
372
377
  --sky-color-background-container-dimmed: var(--bb-color-gray-1000);
@@ -410,6 +415,10 @@
410
415
  --sky-color-background-thumb-base: var(--bb-color-white);
411
416
  --sky-color-background-thumb-disabled: var(--bb-color-gray-600);
412
417
  --sky-color-background-thumbnail_matte: var(--bb-color-white);
418
+ --sky-color-border-action-accent-active: var(--bb-color-sky-500);
419
+ --sky-color-border-action-accent-base: var(--bb-color-gray-700);
420
+ --sky-color-border-action-accent-focus: var(--bb-color-sky-600);
421
+ --sky-color-border-action-accent-hover: var(--bb-color-sky-600);
413
422
  --sky-color-border-action-danger-active: var(--bb-color-red-200);
414
423
  --sky-color-border-action-danger-base: var(--bb-color-red-600);
415
424
  --sky-color-border-action-danger-focus: var(--bb-color-red-200);
@@ -558,6 +567,7 @@
558
567
  --sky-image-select_icon-base: var(--bb-image-select_icon-base-dark-src);
559
568
  --sky-image-select_icon-disabled: var(--bb-image-select_icon-disabled-base-dark-src);
560
569
  --sky-opacity-wait: var(--bb-opacity-600);
570
+ --sky-color-background-action-accent-disabled: var(--sky-color-background-disabled);
561
571
  --sky-color-background-action-danger-disabled: var(--sky-color-background-disabled);
562
572
  --sky-color-background-action-input-disabled: var(--sky-color-background-disabled);
563
573
  --sky-color-background-action-primary-disabled: var(--sky-color-background-disabled);
@@ -568,6 +578,7 @@
568
578
  --sky-color-background-row-disabled: var(--sky-color-background-disabled);
569
579
  --sky-color-background-selected-switch-disabled: var(--sky-color-background-disabled);
570
580
  --sky-color-background-tab-disabled: var(--sky-color-background-disabled);
581
+ --sky-color-border-action-accent-disabled: var(--sky-color-background-disabled);
571
582
  --sky-color-border-action-danger-disabled: var(--sky-color-border-disabled);
572
583
  --sky-color-border-action-input-disabled: var(--sky-color-border-disabled);
573
584
  --sky-color-border-action-primary-disabled: var(--sky-color-border-disabled);
@@ -612,7 +623,7 @@
612
623
  --sky-color-background-action-tertiary-base: var(--bb-color-transparent);
613
624
  --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
614
625
  --sky-color-background-action-tertiary-hover: var(--bb-color-blue-50);
615
- --sky-color-background-blocking: var(--bb-color-blocking);
626
+ --sky-color-background-blocking: var(--bb-color-rgba-white-70);
616
627
  --sky-color-background-container-base: var(--bb-color-white);
617
628
  --sky-color-background-container-danger: var(--bb-color-red-200);
618
629
  --sky-color-background-container-dimmed: var(--bb-color-gray-25);
package/assets/scss/blackbaud.css CHANGED
@@ -63,7 +63,6 @@
63
63
  --bb-border-style-solid: solid;
64
64
  --bb-brand-name: 'Blackbaud';
65
65
  --bb-color-black: #000000;
66
- --bb-color-blocking: rgba(255, 255, 255, 0.7);
67
66
  --bb-color-blue-100: #eef3fc;
68
67
  --bb-color-blue-1000: #0d2040;
69
68
  --bb-color-blue-1100: #0b1b35;
@@ -165,8 +164,10 @@
165
164
  --bb-color-red-700: #ae2e31;
166
165
  --bb-color-red-800: #822325;
167
166
  --bb-color-red-900: #641b1c;
167
+ --bb-color-rgba-black-70: rgba(0, 0, 0, 0.7);
168
168
  --bb-color-rgba-purple-600-40: rgba(176, 97, 242, 0.4);
169
169
  --bb-color-rgba-sky-600-40: rgba(0, 207, 255, 0.4);
170
+ --bb-color-rgba-white-70: rgba(255, 255, 255, 0.7);
170
171
  --bb-color-scrim: rgba(37, 43, 51, 0.5);
171
172
  --bb-color-sky-100: #d6f7ff;
172
173
  --bb-color-sky-1000: #002933;
@@ -254,15 +255,15 @@
254
255
  --bb-font-weight-light: 300;
255
256
  --bb-font-weight-regular: 400;
256
257
  --bb-font-weight-semibold: 600;
257
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.1/assets/images/bb-logo.png');
258
- --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.1/assets/images/chevron_up_down_24_fill-base-dark.svg');
259
- --bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.1/assets/images/chevron_up_down_24_fill-base-light.svg');
260
- --bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.1/assets/images/chevron_up_down_24_fill-bb-dark.svg');
261
- --bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.1/assets/images/chevron_up_down_24_fill-bb-light.svg');
262
- --bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.1/assets/images/chevron_up_down_24_fill-disabled-base-dark.svg');
263
- --bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.1/assets/images/chevron_up_down_24_fill-disabled-base-light.svg');
264
- --bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.1/assets/images/chevron_up_down_24_fill-disabled-bb-dark.svg');
265
- --bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.1/assets/images/chevron_up_down_24_fill-disabled-bb-light.svg');
258
+ --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.3.0/assets/images/bb-logo.png');
259
+ --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.3.0/assets/images/chevron_up_down_20_fill-base-dark.svg');
260
+ --bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.3.0/assets/images/chevron_up_down_20_fill-base-light.svg');
261
+ --bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.3.0/assets/images/chevron_up_down_20_fill-bb-dark.svg');
262
+ --bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.3.0/assets/images/chevron_up_down_20_fill-bb-light.svg');
263
+ --bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.3.0/assets/images/chevron_up_down_20_fill-disabled-base-dark.svg');
264
+ --bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.3.0/assets/images/chevron_up_down_20_fill-disabled-base-light.svg');
265
+ --bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.3.0/assets/images/chevron_up_down_20_fill-disabled-bb-dark.svg');
266
+ --bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.3.0/assets/images/chevron_up_down_20_fill-disabled-bb-light.svg');
266
267
  --bb-letter_spacing-normal: normal;
267
268
  --bb-letter_spacing-wider: 0.01rem;
268
269
  --bb-letter_spacing-widest: 0.046875rem;
@@ -416,6 +417,10 @@
416
417
  --sky-elevation-raised-100: var(--bb-shadow-slate-100);
417
418
  }
418
419
  .sky-theme-modern.sky-theme-brand-base.sky-theme-brand-blackbaud.sky-theme-mode-dark {
420
+ --sky-color-background-action-accent-active: var(--bb-color-gray-600);
421
+ --sky-color-background-action-accent-base: var(--bb-color-blue-900);
422
+ --sky-color-background-action-accent-focus: var(--bb-color-gray-700);
423
+ --sky-color-background-action-accent-hover: var(--bb-color-gray-700);
419
424
  --sky-color-background-action-danger-active: var(--bb-color-red-600);
420
425
  --sky-color-background-action-danger-base: var(--bb-color-red-600);
421
426
  --sky-color-background-action-danger-disabled: var(--bb-color-gray-700);
@@ -441,7 +446,7 @@
441
446
  --sky-color-background-action-tertiary-disabled: var(--bb-color-gray-700);
442
447
  --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
443
448
  --sky-color-background-action-tertiary-hover: var(--bb-color-transparent);
444
- --sky-color-background-blocking: var(--bb-color-blocking);
449
+ --sky-color-background-blocking: var(--bb-color-rgba-black-70);
445
450
  --sky-color-background-container-base: var(--bb-color-gray-1000);
446
451
  --sky-color-background-container-danger: var(--bb-color-red-800);
447
452
  --sky-color-background-container-dimmed: var(--bb-color-gray-1000);
@@ -449,6 +454,7 @@
449
454
  --sky-color-background-container-menu: var(--bb-color-gray-900);
450
455
  --sky-color-background-container-success: var(--bb-color-green-900);
451
456
  --sky-color-background-container-warning: var(--bb-color-yellow-800);
457
+ --sky-color-background-disabled: var(--bb-color-gray-700);
452
458
  --sky-color-background-file_drop: var(--bb-color-gray-1000);
453
459
  --sky-color-background-icon_matte-action-heavy: var(--bb-color-blue-600);
454
460
  --sky-color-background-icon_matte-action-soft: var(--bb-color-blue-900);
@@ -516,6 +522,7 @@
516
522
  --sky-color-border-column_divider: var(--bb-color-blue-400);
517
523
  --sky-color-border-container-base: var(--bb-color-blue-900);
518
524
  --sky-color-border-danger: var(--bb-color-red-400);
525
+ --sky-color-border-disabled: var(--bb-color-gray-800);
519
526
  --sky-color-border-divider: var(--bb-color-gray-800);
520
527
  --sky-color-border-elevation: var(--bb-color-gray-800);
521
528
  --sky-color-border-info: var(--bb-color-blue-400);
@@ -582,6 +589,8 @@
582
589
  --sky-image-select_icon-base: var(--bb-image-select_icon-bb-dark-src);
583
590
  --sky-image-select_icon-disabled: var(--bb-image-select_icon-disabled-bb-dark-src);
584
591
  --sky-opacity-wait: var(--bb-opacity-600);
592
+ --sky-color-background-action-accent-disabled: var(--sky-color-background-disabled);
593
+ --sky-color-border-action-accent-base: var(--bb-color-gradient-brand-secondary);
585
594
  --sky-elevation-focus: var(--bb-shadow-slate-200);
586
595
  --sky-elevation-overflow: var(--bb-shadow-slate-200);
587
596
  --sky-elevation-overlay-100: var(--bb-shadow-slate-400);
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.2.1/assets/images/bb-logo.png');
80
+ --modern-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.3.0/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
@@ -63,7 +63,6 @@
63
63
  --bb-border-style-solid: solid;
64
64
  --bb-brand-name: 'Blackbaud';
65
65
  --bb-color-black: #000000;
66
- --bb-color-blocking: rgba(255, 255, 255, 0.7);
67
66
  --bb-color-blue-100: #eef3fc;
68
67
  --bb-color-blue-1000: #0d2040;
69
68
  --bb-color-blue-1100: #0b1b35;
@@ -165,8 +164,10 @@
165
164
  --bb-color-red-700: #ae2e31;
166
165
  --bb-color-red-800: #822325;
167
166
  --bb-color-red-900: #641b1c;
167
+ --bb-color-rgba-black-70: rgba(0, 0, 0, 0.7);
168
168
  --bb-color-rgba-purple-600-40: rgba(176, 97, 242, 0.4);
169
169
  --bb-color-rgba-sky-600-40: rgba(0, 207, 255, 0.4);
170
+ --bb-color-rgba-white-70: rgba(255, 255, 255, 0.7);
170
171
  --bb-color-scrim: rgba(37, 43, 51, 0.5);
171
172
  --bb-color-sky-100: #d6f7ff;
172
173
  --bb-color-sky-1000: #002933;
@@ -254,15 +255,15 @@
254
255
  --bb-font-weight-light: 300;
255
256
  --bb-font-weight-regular: 400;
256
257
  --bb-font-weight-semibold: 600;
257
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.1/assets/images/bb-logo.png');
258
- --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.1/assets/images/chevron_up_down_24_fill-base-dark.svg');
259
- --bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.1/assets/images/chevron_up_down_24_fill-base-light.svg');
260
- --bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.1/assets/images/chevron_up_down_24_fill-bb-dark.svg');
261
- --bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.1/assets/images/chevron_up_down_24_fill-bb-light.svg');
262
- --bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.1/assets/images/chevron_up_down_24_fill-disabled-base-dark.svg');
263
- --bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.1/assets/images/chevron_up_down_24_fill-disabled-base-light.svg');
264
- --bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.1/assets/images/chevron_up_down_24_fill-disabled-bb-dark.svg');
265
- --bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.1/assets/images/chevron_up_down_24_fill-disabled-bb-light.svg');
258
+ --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.3.0/assets/images/bb-logo.png');
259
+ --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.3.0/assets/images/chevron_up_down_20_fill-base-dark.svg');
260
+ --bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.3.0/assets/images/chevron_up_down_20_fill-base-light.svg');
261
+ --bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.3.0/assets/images/chevron_up_down_20_fill-bb-dark.svg');
262
+ --bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.3.0/assets/images/chevron_up_down_20_fill-bb-light.svg');
263
+ --bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.3.0/assets/images/chevron_up_down_20_fill-disabled-base-dark.svg');
264
+ --bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.3.0/assets/images/chevron_up_down_20_fill-disabled-base-light.svg');
265
+ --bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.3.0/assets/images/chevron_up_down_20_fill-disabled-bb-dark.svg');
266
+ --bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.3.0/assets/images/chevron_up_down_20_fill-disabled-bb-light.svg');
266
267
  --bb-letter_spacing-normal: normal;
267
268
  --bb-letter_spacing-wider: 0.01rem;
268
269
  --bb-letter_spacing-widest: 0.046875rem;
@@ -346,6 +347,10 @@
346
347
  --bb-shadow-slate-800: 0 5px 5px -3px rgba(33, 44, 63, 0.2), 0 3px 14px 2px rgba(33, 44, 63, 0.12), 0 8px 10px 1px rgba(33, 44, 63, 0.14);
347
348
  }
348
349
  .sky-theme-modern.sky-theme-brand-base.sky-theme-mode-dark {
350
+ --sky-color-background-action-accent-active: var(--bb-color-gray-600);
351
+ --sky-color-background-action-accent-base: var(--bb-color-blue-900);
352
+ --sky-color-background-action-accent-focus: var(--bb-color-gray-700);
353
+ --sky-color-background-action-accent-hover: var(--bb-color-gray-700);
349
354
  --sky-color-background-action-danger-active: var(--bb-color-red-600);
350
355
  --sky-color-background-action-danger-base: var(--bb-color-red-600);
351
356
  --sky-color-background-action-danger-focus: var(--bb-color-red-600);
@@ -366,7 +371,7 @@
366
371
  --sky-color-background-action-tertiary-base: var(--bb-color-transparent);
367
372
  --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
368
373
  --sky-color-background-action-tertiary-hover: var(--bb-color-transparent);
369
- --sky-color-background-blocking: var(--bb-color-blocking);
374
+ --sky-color-background-blocking: var(--bb-color-rgba-black-70);
370
375
  --sky-color-background-container-base: var(--bb-color-gray-1000);
371
376
  --sky-color-background-container-danger: var(--bb-color-red-800);
372
377
  --sky-color-background-container-dimmed: var(--bb-color-gray-1000);
@@ -410,6 +415,10 @@
410
415
  --sky-color-background-thumb-base: var(--bb-color-white);
411
416
  --sky-color-background-thumb-disabled: var(--bb-color-gray-600);
412
417
  --sky-color-background-thumbnail_matte: var(--bb-color-white);
418
+ --sky-color-border-action-accent-active: var(--bb-color-sky-500);
419
+ --sky-color-border-action-accent-base: var(--bb-color-gray-700);
420
+ --sky-color-border-action-accent-focus: var(--bb-color-sky-600);
421
+ --sky-color-border-action-accent-hover: var(--bb-color-sky-600);
413
422
  --sky-color-border-action-danger-active: var(--bb-color-red-200);
414
423
  --sky-color-border-action-danger-base: var(--bb-color-red-600);
415
424
  --sky-color-border-action-danger-focus: var(--bb-color-red-200);
@@ -558,6 +567,7 @@
558
567
  --sky-image-select_icon-base: var(--bb-image-select_icon-base-dark-src);
559
568
  --sky-image-select_icon-disabled: var(--bb-image-select_icon-disabled-base-dark-src);
560
569
  --sky-opacity-wait: var(--bb-opacity-600);
570
+ --sky-color-background-action-accent-disabled: var(--sky-color-background-disabled);
561
571
  --sky-color-background-action-danger-disabled: var(--sky-color-background-disabled);
562
572
  --sky-color-background-action-input-disabled: var(--sky-color-background-disabled);
563
573
  --sky-color-background-action-primary-disabled: var(--sky-color-background-disabled);
@@ -568,6 +578,7 @@
568
578
  --sky-color-background-row-disabled: var(--sky-color-background-disabled);
569
579
  --sky-color-background-selected-switch-disabled: var(--sky-color-background-disabled);
570
580
  --sky-color-background-tab-disabled: var(--sky-color-background-disabled);
581
+ --sky-color-border-action-accent-disabled: var(--sky-color-background-disabled);
571
582
  --sky-color-border-action-danger-disabled: var(--sky-color-border-disabled);
572
583
  --sky-color-border-action-input-disabled: var(--sky-color-border-disabled);
573
584
  --sky-color-border-action-primary-disabled: var(--sky-color-border-disabled);
@@ -612,7 +623,7 @@
612
623
  --sky-color-background-action-tertiary-base: var(--bb-color-transparent);
613
624
  --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
614
625
  --sky-color-background-action-tertiary-hover: var(--bb-color-blue-50);
615
- --sky-color-background-blocking: var(--bb-color-blocking);
626
+ --sky-color-background-blocking: var(--bb-color-rgba-white-70);
616
627
  --sky-color-background-container-base: var(--bb-color-white);
617
628
  --sky-color-background-container-danger: var(--bb-color-red-200);
618
629
  --sky-color-background-container-dimmed: var(--bb-color-gray-25);
package/bundles/blackbaud.css CHANGED
@@ -63,7 +63,6 @@
63
63
  --bb-border-style-solid: solid;
64
64
  --bb-brand-name: 'Blackbaud';
65
65
  --bb-color-black: #000000;
66
- --bb-color-blocking: rgba(255, 255, 255, 0.7);
67
66
  --bb-color-blue-100: #eef3fc;
68
67
  --bb-color-blue-1000: #0d2040;
69
68
  --bb-color-blue-1100: #0b1b35;
@@ -165,8 +164,10 @@
165
164
  --bb-color-red-700: #ae2e31;
166
165
  --bb-color-red-800: #822325;
167
166
  --bb-color-red-900: #641b1c;
167
+ --bb-color-rgba-black-70: rgba(0, 0, 0, 0.7);
168
168
  --bb-color-rgba-purple-600-40: rgba(176, 97, 242, 0.4);
169
169
  --bb-color-rgba-sky-600-40: rgba(0, 207, 255, 0.4);
170
+ --bb-color-rgba-white-70: rgba(255, 255, 255, 0.7);
170
171
  --bb-color-scrim: rgba(37, 43, 51, 0.5);
171
172
  --bb-color-sky-100: #d6f7ff;
172
173
  --bb-color-sky-1000: #002933;
@@ -254,15 +255,15 @@
254
255
  --bb-font-weight-light: 300;
255
256
  --bb-font-weight-regular: 400;
256
257
  --bb-font-weight-semibold: 600;
257
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.1/assets/images/bb-logo.png');
258
- --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.1/assets/images/chevron_up_down_24_fill-base-dark.svg');
259
- --bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.1/assets/images/chevron_up_down_24_fill-base-light.svg');
260
- --bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.1/assets/images/chevron_up_down_24_fill-bb-dark.svg');
261
- --bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.1/assets/images/chevron_up_down_24_fill-bb-light.svg');
262
- --bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.1/assets/images/chevron_up_down_24_fill-disabled-base-dark.svg');
263
- --bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.1/assets/images/chevron_up_down_24_fill-disabled-base-light.svg');
264
- --bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.1/assets/images/chevron_up_down_24_fill-disabled-bb-dark.svg');
265
- --bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.1/assets/images/chevron_up_down_24_fill-disabled-bb-light.svg');
258
+ --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.3.0/assets/images/bb-logo.png');
259
+ --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.3.0/assets/images/chevron_up_down_20_fill-base-dark.svg');
260
+ --bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.3.0/assets/images/chevron_up_down_20_fill-base-light.svg');
261
+ --bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.3.0/assets/images/chevron_up_down_20_fill-bb-dark.svg');
262
+ --bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.3.0/assets/images/chevron_up_down_20_fill-bb-light.svg');
263
+ --bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.3.0/assets/images/chevron_up_down_20_fill-disabled-base-dark.svg');
264
+ --bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.3.0/assets/images/chevron_up_down_20_fill-disabled-base-light.svg');
265
+ --bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.3.0/assets/images/chevron_up_down_20_fill-disabled-bb-dark.svg');
266
+ --bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.3.0/assets/images/chevron_up_down_20_fill-disabled-bb-light.svg');
266
267
  --bb-letter_spacing-normal: normal;
267
268
  --bb-letter_spacing-wider: 0.01rem;
268
269
  --bb-letter_spacing-widest: 0.046875rem;
@@ -416,6 +417,10 @@
416
417
  --sky-elevation-raised-100: var(--bb-shadow-slate-100);
417
418
  }
418
419
  .sky-theme-modern.sky-theme-brand-base.sky-theme-brand-blackbaud.sky-theme-mode-dark {
420
+ --sky-color-background-action-accent-active: var(--bb-color-gray-600);
421
+ --sky-color-background-action-accent-base: var(--bb-color-blue-900);
422
+ --sky-color-background-action-accent-focus: var(--bb-color-gray-700);
423
+ --sky-color-background-action-accent-hover: var(--bb-color-gray-700);
419
424
  --sky-color-background-action-danger-active: var(--bb-color-red-600);
420
425
  --sky-color-background-action-danger-base: var(--bb-color-red-600);
421
426
  --sky-color-background-action-danger-disabled: var(--bb-color-gray-700);
@@ -441,7 +446,7 @@
441
446
  --sky-color-background-action-tertiary-disabled: var(--bb-color-gray-700);
442
447
  --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
443
448
  --sky-color-background-action-tertiary-hover: var(--bb-color-transparent);
444
- --sky-color-background-blocking: var(--bb-color-blocking);
449
+ --sky-color-background-blocking: var(--bb-color-rgba-black-70);
445
450
  --sky-color-background-container-base: var(--bb-color-gray-1000);
446
451
  --sky-color-background-container-danger: var(--bb-color-red-800);
447
452
  --sky-color-background-container-dimmed: var(--bb-color-gray-1000);
@@ -449,6 +454,7 @@
449
454
  --sky-color-background-container-menu: var(--bb-color-gray-900);
450
455
  --sky-color-background-container-success: var(--bb-color-green-900);
451
456
  --sky-color-background-container-warning: var(--bb-color-yellow-800);
457
+ --sky-color-background-disabled: var(--bb-color-gray-700);
452
458
  --sky-color-background-file_drop: var(--bb-color-gray-1000);
453
459
  --sky-color-background-icon_matte-action-heavy: var(--bb-color-blue-600);
454
460
  --sky-color-background-icon_matte-action-soft: var(--bb-color-blue-900);
@@ -516,6 +522,7 @@
516
522
  --sky-color-border-column_divider: var(--bb-color-blue-400);
517
523
  --sky-color-border-container-base: var(--bb-color-blue-900);
518
524
  --sky-color-border-danger: var(--bb-color-red-400);
525
+ --sky-color-border-disabled: var(--bb-color-gray-800);
519
526
  --sky-color-border-divider: var(--bb-color-gray-800);
520
527
  --sky-color-border-elevation: var(--bb-color-gray-800);
521
528
  --sky-color-border-info: var(--bb-color-blue-400);
@@ -582,6 +589,8 @@
582
589
  --sky-image-select_icon-base: var(--bb-image-select_icon-bb-dark-src);
583
590
  --sky-image-select_icon-disabled: var(--bb-image-select_icon-disabled-bb-dark-src);
584
591
  --sky-opacity-wait: var(--bb-opacity-600);
592
+ --sky-color-background-action-accent-disabled: var(--sky-color-background-disabled);
593
+ --sky-color-border-action-accent-base: var(--bb-color-gradient-brand-secondary);
585
594
  --sky-elevation-focus: var(--bb-shadow-slate-200);
586
595
  --sky-elevation-overflow: var(--bb-shadow-slate-200);
587
596
  --sky-elevation-overlay-100: var(--bb-shadow-slate-400);
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.2.1/assets/images/bb-logo.png');
80
+ --modern-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.3.0/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.2.1",
3
+ "version": "4.3.0",
4
4
  "description": "Design tokens for SKY UX",
5
5
  "homepage": "https://github.com/blackbaud/skyux-design-tokens",
6
6
  "license": "MIT",