@skyux/theme 13.12.0 → 14.0.0-alpha.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 (6) hide show
  1. package/css/sky.css +33 -24
  2. package/css/themes/modern/styles.css +183 -75
  3. package/fesm2022/skyux-theme.mjs +28 -28
  4. package/fesm2022/skyux-theme.mjs.map +1 -1
  5. package/package.json +6 -6
  6. /package/{index.d.ts → types/skyux-theme.d.ts} +0 -0
package/css/themes/modern/styles.css CHANGED
@@ -3,6 +3,46 @@
3
3
  inherits: true;
4
4
  initial-value: url("data:,");
5
5
  }
6
+ @property --bb-image-select_icon-base-dark-src {
7
+ syntax: "<url>";
8
+ inherits: true;
9
+ initial-value: url("data:,");
10
+ }
11
+ @property --bb-image-select_icon-base-light-src {
12
+ syntax: "<url>";
13
+ inherits: true;
14
+ initial-value: url("data:,");
15
+ }
16
+ @property --bb-image-select_icon-bb-dark-src {
17
+ syntax: "<url>";
18
+ inherits: true;
19
+ initial-value: url("data:,");
20
+ }
21
+ @property --bb-image-select_icon-bb-light-src {
22
+ syntax: "<url>";
23
+ inherits: true;
24
+ initial-value: url("data:,");
25
+ }
26
+ @property --bb-image-select_icon-disabled-base-dark-src {
27
+ syntax: "<url>";
28
+ inherits: true;
29
+ initial-value: url("data:,");
30
+ }
31
+ @property --bb-image-select_icon-disabled-base-light-src {
32
+ syntax: "<url>";
33
+ inherits: true;
34
+ initial-value: url("data:,");
35
+ }
36
+ @property --bb-image-select_icon-disabled-bb-dark-src {
37
+ syntax: "<url>";
38
+ inherits: true;
39
+ initial-value: url("data:,");
40
+ }
41
+ @property --bb-image-select_icon-disabled-bb-light-src {
42
+ syntax: "<url>";
43
+ inherits: true;
44
+ initial-value: url("data:,");
45
+ }
6
46
  .sky-theme-modern.sky-theme-brand-base {
7
47
  --bb-border-radius-0: 0rem;
8
48
  --bb-border-radius-012: .125rem;
@@ -12,7 +52,7 @@
12
52
  --bb-border-radius-round: 50%;
13
53
  --bb-border-style-dotted: dotted;
14
54
  --bb-border-style-solid: solid;
15
- --bb-brand-name: "Blackbaud";
55
+ --bb-brand-name: 'Blackbaud';
16
56
  --bb-color-black: #000000;
17
57
  --bb-color-blocking: rgba(255, 255, 255, 0.7);
18
58
  --bb-color-blue-100: #eef3fc;
@@ -42,7 +82,7 @@
42
82
  --bb-color-gray-400: #a3a6a9;
43
83
  --bb-color-gray-50: #f4f4f5;
44
84
  --bb-color-gray-500: #85888d;
45
- --bb-color-gray-600: #6b6f74;
85
+ --bb-color-gray-600: #666b70;
46
86
  --bb-color-gray-700: #51555c;
47
87
  --bb-color-gray-800: #3b4047;
48
88
  --bb-color-gray-900: #252b33;
@@ -205,7 +245,15 @@
205
245
  --bb-font-weight-light: 300;
206
246
  --bb-font-weight-regular: 400;
207
247
  --bb-font-weight-semibold: 600;
208
- --bb-image-logo-primary-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.1.0/assets/images/bb-logo.png");
248
+ --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/bb-logo.png');
249
+ --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/chevron_up_down_24_fill-base-dark.svg');
250
+ --bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/chevron_up_down_24_fill-base-light.svg');
251
+ --bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/chevron_up_down_24_fill-bb-dark.svg');
252
+ --bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/chevron_up_down_24_fill-bb-light.svg');
253
+ --bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/chevron_up_down_24_fill-disabled-base-dark.svg');
254
+ --bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/chevron_up_down_24_fill-disabled-base-light.svg');
255
+ --bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/chevron_up_down_24_fill-disabled-bb-dark.svg');
256
+ --bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/chevron_up_down_24_fill-disabled-bb-light.svg');
209
257
  --bb-letter_spacing-normal: normal;
210
258
  --bb-letter_spacing-wider: 0.01rem;
211
259
  --bb-letter_spacing-widest: 0.046875rem;
@@ -292,27 +340,22 @@
292
340
  .sky-theme-modern.sky-theme-brand-base.sky-theme-mode-dark {
293
341
  --sky-color-background-action-danger-active: var(--bb-color-red-600);
294
342
  --sky-color-background-action-danger-base: var(--bb-color-red-600);
295
- --sky-color-background-action-danger-disabled: var(--bb-color-gray-700);
296
343
  --sky-color-background-action-danger-focus: var(--bb-color-red-600);
297
344
  --sky-color-background-action-danger-hover: var(--bb-color-red-600);
298
345
  --sky-color-background-action-input-active: var(--bb-color-transparent);
299
346
  --sky-color-background-action-input-base: var(--bb-color-blue-900);
300
- --sky-color-background-action-input-disabled: var(--bb-color-gray-700);
301
347
  --sky-color-background-action-input-focus: var(--bb-color-blue-900);
302
348
  --sky-color-background-action-input-hover: var(--bb-color-transparent);
303
349
  --sky-color-background-action-primary-active: var(--bb-color-sky-500);
304
350
  --sky-color-background-action-primary-base: var(--bb-color-sky-600);
305
- --sky-color-background-action-primary-disabled: var(--bb-color-gray-700);
306
351
  --sky-color-background-action-primary-focus: var(--bb-color-sky-600);
307
352
  --sky-color-background-action-primary-hover: var(--bb-color-sky-600);
308
353
  --sky-color-background-action-secondary-active: var(--bb-color-gray-600);
309
354
  --sky-color-background-action-secondary-base: var(--bb-color-gray-800);
310
- --sky-color-background-action-secondary-disabled: var(--bb-color-gray-700);
311
355
  --sky-color-background-action-secondary-focus: var(--bb-color-gray-700);
312
356
  --sky-color-background-action-secondary-hover: var(--bb-color-gray-700);
313
357
  --sky-color-background-action-tertiary-active: var(--bb-color-transparent);
314
358
  --sky-color-background-action-tertiary-base: var(--bb-color-transparent);
315
- --sky-color-background-action-tertiary-disabled: var(--bb-color-gray-700);
316
359
  --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
317
360
  --sky-color-background-action-tertiary-hover: var(--bb-color-transparent);
318
361
  --sky-color-background-blocking: var(--bb-color-blocking);
@@ -324,6 +367,7 @@
324
367
  --sky-color-background-container-success: var(--bb-color-green-900);
325
368
  --sky-color-background-container-tooltip: var(--bb-color-gray-25);
326
369
  --sky-color-background-container-warning: var(--bb-color-yellow-800);
370
+ --sky-color-background-disabled: var(--bb-color-gray-700);
327
371
  --sky-color-background-file_drop: var(--bb-color-gray-1000);
328
372
  --sky-color-background-icon_matte-action-heavy: var(--bb-color-blue-600);
329
373
  --sky-color-background-icon_matte-action-soft: var(--bb-color-blue-900);
@@ -332,16 +376,13 @@
332
376
  --sky-color-background-icon_matte-success: var(--bb-color-green-700);
333
377
  --sky-color-background-icon_matte-warning: var(--bb-color-yellow-600);
334
378
  --sky-color-background-input-base: var(--bb-color-gray-900);
335
- --sky-color-background-input-disabled: var(--bb-color-gray-700);
336
379
  --sky-color-background-nav-active: var(--bb-color-transparent);
337
380
  --sky-color-background-nav-base: var(--bb-color-transparent);
338
- --sky-color-background-nav-disabled: var(--bb-color-gray-700);
339
381
  --sky-color-background-nav-focus: var(--bb-color-transparent);
340
382
  --sky-color-background-nav-hover: var(--bb-color-transparent);
341
383
  --sky-color-background-page: var(--bb-color-gray-1100);
342
384
  --sky-color-background-row-active: var(--bb-color-transparent);
343
385
  --sky-color-background-row-base: var(--bb-color-gray-1000);
344
- --sky-color-background-row-disabled: var(--bb-color-gray-700);
345
386
  --sky-color-background-row-focus: var(--bb-color-gray-1000);
346
387
  --sky-color-background-row-hover: var(--bb-color-transparent);
347
388
  --sky-color-background-scrim: var(--bb-color-scrim);
@@ -350,11 +391,9 @@
350
391
  --sky-color-background-selected-soft: var(--bb-color-blue-900);
351
392
  --sky-color-background-selected-success: var(--bb-color-green-900);
352
393
  --sky-color-background-selected-switch-base: var(--bb-color-blue-600);
353
- --sky-color-background-selected-switch-disabled: var(--bb-color-gray-700);
354
394
  --sky-color-background-selected-warning: var(--bb-color-yellow-900);
355
395
  --sky-color-background-tab-active: var(--bb-color-transparent);
356
396
  --sky-color-background-tab-base: var(--bb-color-transparent);
357
- --sky-color-background-tab-disabled: var(--bb-color-gray-700);
358
397
  --sky-color-background-tab-focus: var(--bb-color-transparent);
359
398
  --sky-color-background-tab-hover: var(--bb-color-transparent);
360
399
  --sky-color-background-tab-selected: var(--bb-color-transparent);
@@ -365,44 +404,38 @@
365
404
  --sky-color-background-thumbnail_matte: var(--bb-color-white);
366
405
  --sky-color-border-action-danger-active: var(--bb-color-red-200);
367
406
  --sky-color-border-action-danger-base: var(--bb-color-red-600);
368
- --sky-color-border-action-danger-disabled: var(--bb-color-gray-800);
369
407
  --sky-color-border-action-danger-focus: var(--bb-color-red-200);
370
408
  --sky-color-border-action-danger-hover: var(--bb-color-red-200);
371
409
  --sky-color-border-action-input-active: var(--bb-color-blue-600);
372
410
  --sky-color-border-action-input-base: var(--bb-color-blue-400);
373
- --sky-color-border-action-input-disabled: var(--bb-color-gray-800);
374
411
  --sky-color-border-action-input-focus: var(--bb-color-blue-600);
375
412
  --sky-color-border-action-input-hover: var(--bb-color-blue-600);
376
413
  --sky-color-border-action-primary-active: var(--bb-color-sky-500);
377
414
  --sky-color-border-action-primary-base: var(--bb-color-sky-600);
378
- --sky-color-border-action-primary-disabled: var(--bb-color-gray-800);
379
415
  --sky-color-border-action-primary-focus: var(--bb-color-sky-600);
380
416
  --sky-color-border-action-primary-hover: var(--bb-color-sky-600);
381
417
  --sky-color-border-action-secondary-active: var(--bb-color-sky-500);
382
418
  --sky-color-border-action-secondary-base: var(--bb-color-gray-700);
383
- --sky-color-border-action-secondary-disabled: var(--bb-color-gray-800);
384
419
  --sky-color-border-action-secondary-focus: var(--bb-color-sky-600);
385
420
  --sky-color-border-action-secondary-hover: var(--bb-color-sky-600);
386
421
  --sky-color-border-action-tertiary-active: var(--bb-color-sky-500);
387
422
  --sky-color-border-action-tertiary-base: var(--bb-color-transparent);
388
- --sky-color-border-action-tertiary-disabled: var(--bb-color-gray-800);
389
423
  --sky-color-border-action-tertiary-focus: var(--bb-color-sky-600);
390
424
  --sky-color-border-action-tertiary-hover: var(--bb-color-sky-600);
391
425
  --sky-color-border-column_divider: var(--bb-color-blue-400);
392
426
  --sky-color-border-container-base: var(--bb-color-blue-900);
393
427
  --sky-color-border-danger: var(--bb-color-red-400);
428
+ --sky-color-border-disabled: var(--bb-color-gray-800);
394
429
  --sky-color-border-divider: var(--bb-color-gray-800);
395
430
  --sky-color-border-elevation: var(--bb-color-gray-800);
396
431
  --sky-color-border-info: var(--bb-color-blue-400);
397
432
  --sky-color-border-input-active: var(--bb-color-blue-600);
398
433
  --sky-color-border-input-base: var(--bb-color-blue-200);
399
- --sky-color-border-input-disabled: var(--bb-color-gray-400);
400
434
  --sky-color-border-input-error: var(--bb-color-red-600);
401
435
  --sky-color-border-input-focus: var(--bb-color-blue-600);
402
436
  --sky-color-border-input-hover: var(--bb-color-blue-600);
403
437
  --sky-color-border-nav-active: var(--bb-color-sky-500);
404
438
  --sky-color-border-nav-base: var(--bb-color-transparent);
405
- --sky-color-border-nav-disabled: var(--bb-color-gray-800);
406
439
  --sky-color-border-nav-focus: var(--bb-color-sky-600);
407
440
  --sky-color-border-nav-hover: var(--bb-color-sky-600);
408
441
  --sky-color-border-progress_step: var(--bb-color-gray-600);
@@ -414,18 +447,15 @@
414
447
  --sky-color-border-success: var(--bb-color-green-400);
415
448
  --sky-color-border-switch-active: var(--bb-color-blue-600);
416
449
  --sky-color-border-switch-base: var(--bb-color-blue-500);
417
- --sky-color-border-switch-disabled: var(--bb-color-gray-400);
418
450
  --sky-color-border-switch-error: var(--bb-color-red-600);
419
451
  --sky-color-border-switch-focus: var(--bb-color-blue-600);
420
452
  --sky-color-border-switch-hover: var(--bb-color-blue-600);
421
453
  --sky-color-border-switch-selected-active: var(--bb-color-blue-900);
422
454
  --sky-color-border-switch-selected-base: var(--bb-color-transparent);
423
- --sky-color-border-switch-selected-disabled: var(--bb-color-gray-400);
424
455
  --sky-color-border-switch-selected-focus: var(--bb-color-blue-900);
425
456
  --sky-color-border-switch-selected-hover: var(--bb-color-blue-900);
426
457
  --sky-color-border-tab-active: var(--bb-color-sky-500);
427
458
  --sky-color-border-tab-base: var(--bb-color-transparent);
428
- --sky-color-border-tab-disabled: var(--bb-color-gray-800);
429
459
  --sky-color-border-tab-focus: var(--bb-color-sky-600);
430
460
  --sky-color-border-tab-hover: var(--bb-color-sky-600);
431
461
  --sky-color-border-tab-wizard-disabled: var(--bb-color-transparent);
@@ -517,7 +547,29 @@
517
547
  --sky-color-viz-sequence-8: var(--bb-color-teal-300);
518
548
  --sky-color-viz-sequence-9: var(--bb-color-teal-200);
519
549
  --sky-elevation-none: var(--bb-shadow-gray-0);
550
+ --sky-image-select_icon-base: var(--bb-image-select_icon-base-dark-src);
551
+ --sky-image-select_icon-disabled: var(--bb-image-select_icon-disabled-base-dark-src);
520
552
  --sky-opacity-wait: var(--bb-opacity-600);
553
+ --sky-color-background-action-danger-disabled: var(--sky-color-background-disabled);
554
+ --sky-color-background-action-input-disabled: var(--sky-color-background-disabled);
555
+ --sky-color-background-action-primary-disabled: var(--sky-color-background-disabled);
556
+ --sky-color-background-action-secondary-disabled: var(--sky-color-background-disabled);
557
+ --sky-color-background-action-tertiary-disabled: var(--sky-color-background-disabled);
558
+ --sky-color-background-input-disabled: var(--sky-color-background-disabled);
559
+ --sky-color-background-nav-disabled: var(--sky-color-background-disabled);
560
+ --sky-color-background-row-disabled: var(--sky-color-background-disabled);
561
+ --sky-color-background-selected-switch-disabled: var(--sky-color-background-disabled);
562
+ --sky-color-background-tab-disabled: var(--sky-color-background-disabled);
563
+ --sky-color-border-action-danger-disabled: var(--sky-color-border-disabled);
564
+ --sky-color-border-action-input-disabled: var(--sky-color-border-disabled);
565
+ --sky-color-border-action-primary-disabled: var(--sky-color-border-disabled);
566
+ --sky-color-border-action-secondary-disabled: var(--sky-color-border-disabled);
567
+ --sky-color-border-action-tertiary-disabled: var(--sky-color-border-disabled);
568
+ --sky-color-border-input-disabled: var(--sky-color-border-disabled);
569
+ --sky-color-border-nav-disabled: var(--sky-color-border-disabled);
570
+ --sky-color-border-switch-disabled: var(--sky-color-border-disabled);
571
+ --sky-color-border-switch-selected-disabled: var(--sky-color-border-disabled);
572
+ --sky-color-border-tab-disabled: var(--sky-color-border-disabled);
521
573
  --sky-elevation-focus: var(--bb-shadow-gray-200);
522
574
  --sky-elevation-overflow: var(--bb-shadow-gray-200);
523
575
  --sky-elevation-overlay-100: var(--bb-shadow-gray-400);
@@ -531,32 +583,26 @@
531
583
  --sky-brand-name: var(--bb-brand-name);
532
584
  --sky-color-background-action-accent-active: var(--bb-color-blue-100);
533
585
  --sky-color-background-action-accent-base: var(--bb-color-white);
534
- --sky-color-background-action-accent-disabled: var(--bb-color-gray-50);
535
586
  --sky-color-background-action-accent-focus: var(--bb-color-white);
536
587
  --sky-color-background-action-accent-hover: var(--bb-color-blue-50);
537
588
  --sky-color-background-action-danger-active: var(--bb-color-red-800);
538
589
  --sky-color-background-action-danger-base: var(--bb-color-red-600);
539
- --sky-color-background-action-danger-disabled: var(--bb-color-gray-100);
540
590
  --sky-color-background-action-danger-focus: var(--bb-color-red-600);
541
591
  --sky-color-background-action-danger-hover: var(--bb-color-red-700);
542
592
  --sky-color-background-action-input-active: var(--bb-color-blue-100);
543
593
  --sky-color-background-action-input-base: var(--bb-color-white);
544
- --sky-color-background-action-input-disabled: var(--bb-color-gray-100);
545
594
  --sky-color-background-action-input-focus: var(--bb-color-white);
546
595
  --sky-color-background-action-input-hover: var(--bb-color-blue-50);
547
596
  --sky-color-background-action-primary-active: var(--bb-color-blue-800);
548
597
  --sky-color-background-action-primary-base: var(--bb-color-blue-600);
549
- --sky-color-background-action-primary-disabled: var(--bb-color-gray-100);
550
598
  --sky-color-background-action-primary-focus: var(--bb-color-blue-600);
551
599
  --sky-color-background-action-primary-hover: var(--bb-color-blue-700);
552
600
  --sky-color-background-action-secondary-active: var(--bb-color-blue-100);
553
601
  --sky-color-background-action-secondary-base: var(--bb-color-white);
554
- --sky-color-background-action-secondary-disabled: var(--bb-color-gray-100);
555
602
  --sky-color-background-action-secondary-focus: var(--bb-color-white);
556
603
  --sky-color-background-action-secondary-hover: var(--bb-color-blue-50);
557
604
  --sky-color-background-action-tertiary-active: var(--bb-color-blue-100);
558
605
  --sky-color-background-action-tertiary-base: var(--bb-color-transparent);
559
- --sky-color-background-action-tertiary-disabled: var(--bb-color-gray-100);
560
606
  --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
561
607
  --sky-color-background-action-tertiary-hover: var(--bb-color-blue-50);
562
608
  --sky-color-background-blocking: var(--bb-color-blocking);
@@ -568,6 +614,7 @@
568
614
  --sky-color-background-container-success: var(--bb-color-green-200);
569
615
  --sky-color-background-container-tooltip: var(--bb-color-gray-900);
570
616
  --sky-color-background-container-warning: var(--bb-color-yellow-200);
617
+ --sky-color-background-disabled: var(--bb-color-gray-100);
571
618
  --sky-color-background-file_drop: var(--bb-color-gray-25);
572
619
  --sky-color-background-icon_matte-action-heavy: var(--bb-color-blue-600);
573
620
  --sky-color-background-icon_matte-action-soft: var(--bb-color-blue-100);
@@ -576,16 +623,13 @@
576
623
  --sky-color-background-icon_matte-success: var(--bb-color-green-600);
577
624
  --sky-color-background-icon_matte-warning: var(--bb-color-yellow-400);
578
625
  --sky-color-background-input-base: var(--bb-color-white);
579
- --sky-color-background-input-disabled: var(--bb-color-gray-100);
580
626
  --sky-color-background-nav-active: var(--bb-color-blue-100);
581
627
  --sky-color-background-nav-base: var(--bb-color-transparent);
582
- --sky-color-background-nav-disabled: var(--bb-color-gray-100);
583
628
  --sky-color-background-nav-focus: var(--bb-color-transparent);
584
629
  --sky-color-background-nav-hover: var(--bb-color-blue-50);
585
630
  --sky-color-background-page: var(--bb-color-gray-100);
586
631
  --sky-color-background-row-active: var(--bb-color-blue-100);
587
632
  --sky-color-background-row-base: var(--bb-color-white);
588
- --sky-color-background-row-disabled: var(--bb-color-gray-100);
589
633
  --sky-color-background-row-focus: var(--bb-color-white);
590
634
  --sky-color-background-row-hover: var(--bb-color-blue-50);
591
635
  --sky-color-background-scrim: var(--bb-color-scrim);
@@ -594,11 +638,9 @@
594
638
  --sky-color-background-selected-soft: var(--bb-color-blue-100);
595
639
  --sky-color-background-selected-success: var(--bb-color-green-200);
596
640
  --sky-color-background-selected-switch-base: var(--bb-color-blue-600);
597
- --sky-color-background-selected-switch-disabled: var(--bb-color-gray-100);
598
641
  --sky-color-background-selected-warning: var(--bb-color-yellow-200);
599
642
  --sky-color-background-tab-active: var(--bb-color-transparent);
600
643
  --sky-color-background-tab-base: var(--bb-color-transparent);
601
- --sky-color-background-tab-disabled: var(--bb-color-gray-100);
602
644
  --sky-color-background-tab-focus: var(--bb-color-transparent);
603
645
  --sky-color-background-tab-hover: var(--bb-color-transparent);
604
646
  --sky-color-background-tab-selected: var(--bb-color-transparent);
@@ -609,49 +651,42 @@
609
651
  --sky-color-background-thumbnail_matte: var(--bb-color-white);
610
652
  --sky-color-border-action-accent-active: var(--bb-color-blue-600);
611
653
  --sky-color-border-action-accent-base: var(--bb-color-gray-200);
612
- --sky-color-border-action-accent-disabled: var(--bb-color-gray-200);
613
654
  --sky-color-border-action-accent-focus: var(--bb-color-blue-600);
614
655
  --sky-color-border-action-accent-hover: var(--bb-color-blue-600);
615
656
  --sky-color-border-action-danger-active: var(--bb-color-red-1000);
616
657
  --sky-color-border-action-danger-base: var(--bb-color-red-600);
617
- --sky-color-border-action-danger-disabled: var(--bb-color-gray-300);
618
658
  --sky-color-border-action-danger-focus: var(--bb-color-red-1000);
619
659
  --sky-color-border-action-danger-hover: var(--bb-color-red-1000);
620
660
  --sky-color-border-action-input-active: var(--bb-color-blue-600);
621
661
  --sky-color-border-action-input-base: var(--bb-color-gray-300);
622
- --sky-color-border-action-input-disabled: var(--bb-color-gray-300);
623
662
  --sky-color-border-action-input-focus: var(--bb-color-blue-600);
624
663
  --sky-color-border-action-input-hover: var(--bb-color-blue-600);
625
664
  --sky-color-border-action-primary-active: var(--bb-color-blue-1000);
626
665
  --sky-color-border-action-primary-base: var(--bb-color-blue-600);
627
- --sky-color-border-action-primary-disabled: var(--bb-color-gray-300);
628
666
  --sky-color-border-action-primary-focus: var(--bb-color-blue-1000);
629
667
  --sky-color-border-action-primary-hover: var(--bb-color-blue-1000);
630
668
  --sky-color-border-action-secondary-active: var(--bb-color-blue-600);
631
669
  --sky-color-border-action-secondary-base: var(--bb-color-gray-300);
632
- --sky-color-border-action-secondary-disabled: var(--bb-color-gray-300);
633
670
  --sky-color-border-action-secondary-focus: var(--bb-color-blue-600);
634
671
  --sky-color-border-action-secondary-hover: var(--bb-color-blue-600);
635
672
  --sky-color-border-action-tertiary-active: var(--bb-color-blue-600);
636
673
  --sky-color-border-action-tertiary-base: var(--bb-color-transparent);
637
- --sky-color-border-action-tertiary-disabled: var(--bb-color-gray-300);
638
674
  --sky-color-border-action-tertiary-focus: var(--bb-color-blue-600);
639
675
  --sky-color-border-action-tertiary-hover: var(--bb-color-blue-600);
640
676
  --sky-color-border-column_divider: var(--bb-color-blue-600);
641
677
  --sky-color-border-container-base: var(--bb-color-gray-200);
642
678
  --sky-color-border-danger: var(--bb-color-red-600);
679
+ --sky-color-border-disabled: var(--bb-color-gray-300);
643
680
  --sky-color-border-divider: var(--bb-color-gray-300);
644
681
  --sky-color-border-elevation: var(--bb-color-gray-200);
645
682
  --sky-color-border-info: var(--bb-color-blue-600);
646
683
  --sky-color-border-input-active: var(--bb-color-blue-600);
647
684
  --sky-color-border-input-base: var(--bb-color-gray-300);
648
- --sky-color-border-input-disabled: var(--bb-color-gray-300);
649
685
  --sky-color-border-input-error: var(--bb-color-red-600);
650
686
  --sky-color-border-input-focus: var(--bb-color-blue-600);
651
687
  --sky-color-border-input-hover: var(--bb-color-blue-600);
652
688
  --sky-color-border-nav-active: var(--bb-color-blue-600);
653
689
  --sky-color-border-nav-base: var(--bb-color-transparent);
654
- --sky-color-border-nav-disabled: var(--bb-color-gray-300);
655
690
  --sky-color-border-nav-focus: var(--bb-color-blue-600);
656
691
  --sky-color-border-nav-hover: var(--bb-color-blue-600);
657
692
  --sky-color-border-progress_step: var(--bb-color-gray-400);
@@ -662,18 +697,15 @@
662
697
  --sky-color-border-success: var(--bb-color-green-600);
663
698
  --sky-color-border-switch-active: var(--bb-color-blue-600);
664
699
  --sky-color-border-switch-base: var(--bb-color-gray-500);
665
- --sky-color-border-switch-disabled: var(--bb-color-gray-300);
666
700
  --sky-color-border-switch-error: var(--bb-color-red-600);
667
701
  --sky-color-border-switch-focus: var(--bb-color-blue-600);
668
702
  --sky-color-border-switch-hover: var(--bb-color-blue-600);
669
703
  --sky-color-border-switch-selected-active: var(--bb-color-blue-1000);
670
704
  --sky-color-border-switch-selected-base: var(--bb-color-transparent);
671
- --sky-color-border-switch-selected-disabled: var(--bb-color-gray-300);
672
705
  --sky-color-border-switch-selected-focus: var(--bb-color-blue-1000);
673
706
  --sky-color-border-switch-selected-hover: var(--bb-color-blue-1000);
674
707
  --sky-color-border-tab-active: var(--bb-color-blue-600);
675
708
  --sky-color-border-tab-base: var(--bb-color-transparent);
676
- --sky-color-border-tab-disabled: var(--bb-color-gray-300);
677
709
  --sky-color-border-tab-focus: var(--bb-color-blue-600);
678
710
  --sky-color-border-tab-hover: var(--bb-color-blue-600);
679
711
  --sky-color-border-tab-wizard-disabled: var(--bb-color-transparent);
@@ -798,7 +830,31 @@
798
830
  --sky-elevation-input-disabled: var(--bb-shadow-gray-0);
799
831
  --sky-elevation-none: var(--bb-shadow-gray-0);
800
832
  --sky-image-logo-primary-src: var(--bb-image-logo-primary-src);
833
+ --sky-image-select_icon-base: var(--bb-image-select_icon-base-light-src);
834
+ --sky-image-select_icon-disabled: var(--bb-image-select_icon-disabled-base-light-src);
801
835
  --sky-opacity-wait: var(--bb-opacity-600);
836
+ --sky-color-background-action-accent-disabled: var(--sky-color-background-disabled);
837
+ --sky-color-background-action-danger-disabled: var(--sky-color-background-disabled);
838
+ --sky-color-background-action-input-disabled: var(--sky-color-background-disabled);
839
+ --sky-color-background-action-primary-disabled: var(--sky-color-background-disabled);
840
+ --sky-color-background-action-secondary-disabled: var(--sky-color-background-disabled);
841
+ --sky-color-background-action-tertiary-disabled: var(--sky-color-background-disabled);
842
+ --sky-color-background-input-disabled: var(--sky-color-background-disabled);
843
+ --sky-color-background-nav-disabled: var(--sky-color-background-disabled);
844
+ --sky-color-background-row-disabled: var(--sky-color-background-disabled);
845
+ --sky-color-background-selected-switch-disabled: var(--sky-color-background-disabled);
846
+ --sky-color-background-tab-disabled: var(--sky-color-background-disabled);
847
+ --sky-color-border-action-accent-disabled: var(--sky-color-border-disabled);
848
+ --sky-color-border-action-danger-disabled: var(--sky-color-border-disabled);
849
+ --sky-color-border-action-input-disabled: var(--sky-color-border-disabled);
850
+ --sky-color-border-action-primary-disabled: var(--sky-color-border-disabled);
851
+ --sky-color-border-action-secondary-disabled: var(--sky-color-border-disabled);
852
+ --sky-color-border-action-tertiary-disabled: var(--sky-color-border-disabled);
853
+ --sky-color-border-input-disabled: var(--sky-color-border-disabled);
854
+ --sky-color-border-nav-disabled: var(--sky-color-border-disabled);
855
+ --sky-color-border-switch-disabled: var(--sky-color-border-disabled);
856
+ --sky-color-border-switch-selected-disabled: var(--sky-color-border-disabled);
857
+ --sky-color-border-tab-disabled: var(--sky-color-border-disabled);
802
858
  --sky-elevation-focus: var(--bb-shadow-gray-200);
803
859
  --sky-elevation-overflow: var(--bb-shadow-gray-200);
804
860
  --sky-elevation-overlay-100: var(--bb-shadow-gray-400);
@@ -1501,27 +1557,27 @@
1501
1557
  --sky-space-stacked-xl: var(--bb-size-fluid-150);
1502
1558
  --sky-space-stacked-xs: var(--bb-size-fluid-25);
1503
1559
  --sky-space-stacked-xxl: var(--bb-size-fluid-300);
1504
- --sky-type-display-1: var(--sky-font-style-display-1) var(--sky-font-size-display-1)/32 "var(--bb-font-blkb_sans-name)";
1505
- --sky-type-display-2: var(--sky-font-style-display-2) var(--sky-font-size-display-2)/28 "var(--bb-font-blkb_sans-name)";
1506
- --sky-type-display-3: var(--sky-font-style-display-3) var(--sky-font-size-display-3)/28 "var(--bb-font-blkb_sans-name)";
1507
- --sky-type-display-4: var(--sky-font-style-display-4) var(--sky-font-size-display-4)/24 "var(--bb-font-blkb_sans-name)";
1508
- --sky-type-eyebrow: var(--sky-font-style-eyebrow) var(--sky-font-size-eyebrow)/20 "var(--bb-font-blkb_sans-name)";
1509
- --sky-type-heading-2: var(--sky-font-style-heading-2) var(--sky-font-size-heading-2)/28 "var(--bb-font-blkb_sans-name)";
1510
- --sky-type-heading-3: var(--sky-font-style-heading-3) var(--sky-font-size-heading-3)/24 "var(--bb-font-blkb_sans-name)";
1511
- --sky-type-heading-4: var(--sky-font-style-heading-4) var(--sky-font-size-heading-4)/20 "var(--bb-font-blkb_sans-name)";
1512
- --sky-type-heading-5: var(--sky-font-style-heading-5) var(--sky-font-size-heading-5)/20 "var(--bb-font-blkb_sans-name)";
1513
- --sky-type-hint-m: italic 400 var(--sky-font-size-hint-m)/20 "var(--bb-font-blkb_sans-name)";
1514
- --sky-type-hint-s: italic 400 var(--sky-font-size-hint-s)/18 "var(--bb-font-blkb_sans-name)";
1515
- --sky-type-input-label: var(--sky-font-style-input-label) var(--sky-font-size-input-label)/18 "var(--bb-font-blkb_sans-name)";
1560
+ --sky-type-display-1: var(--sky-font-style-display-1) var(--sky-font-size-display-1)/32 'var(--bb-font-blkb_sans-name)';
1561
+ --sky-type-display-2: var(--sky-font-style-display-2) var(--sky-font-size-display-2)/28 'var(--bb-font-blkb_sans-name)';
1562
+ --sky-type-display-3: var(--sky-font-style-display-3) var(--sky-font-size-display-3)/28 'var(--bb-font-blkb_sans-name)';
1563
+ --sky-type-display-4: var(--sky-font-style-display-4) var(--sky-font-size-display-4)/24 'var(--bb-font-blkb_sans-name)';
1564
+ --sky-type-eyebrow: var(--sky-font-style-eyebrow) var(--sky-font-size-eyebrow)/20 'var(--bb-font-blkb_sans-name)';
1565
+ --sky-type-heading-2: var(--sky-font-style-heading-2) var(--sky-font-size-heading-2)/28 'var(--bb-font-blkb_sans-name)';
1566
+ --sky-type-heading-3: var(--sky-font-style-heading-3) var(--sky-font-size-heading-3)/24 'var(--bb-font-blkb_sans-name)';
1567
+ --sky-type-heading-4: var(--sky-font-style-heading-4) var(--sky-font-size-heading-4)/20 'var(--bb-font-blkb_sans-name)';
1568
+ --sky-type-heading-5: var(--sky-font-style-heading-5) var(--sky-font-size-heading-5)/20 'var(--bb-font-blkb_sans-name)';
1569
+ --sky-type-hint-m: italic 400 var(--sky-font-size-hint-m)/20 'var(--bb-font-blkb_sans-name)';
1570
+ --sky-type-hint-s: italic 400 var(--sky-font-size-hint-s)/18 'var(--bb-font-blkb_sans-name)';
1571
+ --sky-type-input-label: var(--sky-font-style-input-label) var(--sky-font-size-input-label)/18 'var(--bb-font-blkb_sans-name)';
1516
1572
  --sky-comp-checkbox-border-radius: var(--sky-border-radius-s);
1517
1573
  --sky-font-family-primary: var(--bb-font-blkb_sans-family);
1518
1574
  --sky-space-inset-switch: calc(var(--sky-size-switch) + var(--sky-space-gap-label-s));
1519
- --sky-type-body-l: var(--sky-font-style-body-l) var(--sky-font-size-body-l)/24 "var(--bb-font-blkb_sans-name)";
1520
- --sky-type-body-m: var(--sky-font-style-body-m) var(--sky-font-size-body-m)/20 "var(--bb-font-blkb_sans-name)";
1521
- --sky-type-body-s: var(--sky-font-style-body-s) var(--sky-font-size-body-s)/18 "var(--bb-font-blkb_sans-name)";
1522
- --sky-type-body-xs: var(--sky-font-style-body-xs) var(--sky-font-size-body-xs)/16 "var(--bb-font-blkb_sans-name)";
1523
- --sky-type-heading-1: var(--sky-font-style-heading-1) var(--sky-font-size-heading-1)/36 "var(--bb-font-blkb_sans-name)";
1524
- --sky-type-input-val: var(--sky-font-style-body-s) var(--sky-font-size-input-val)/20 "var(--bb-font-blkb_sans-name)";
1575
+ --sky-type-body-l: var(--sky-font-style-body-l) var(--sky-font-size-body-l)/24 'var(--bb-font-blkb_sans-name)';
1576
+ --sky-type-body-m: var(--sky-font-style-body-m) var(--sky-font-size-body-m)/20 'var(--bb-font-blkb_sans-name)';
1577
+ --sky-type-body-s: var(--sky-font-style-body-s) var(--sky-font-size-body-s)/18 'var(--bb-font-blkb_sans-name)';
1578
+ --sky-type-body-xs: var(--sky-font-style-body-xs) var(--sky-font-size-body-xs)/16 'var(--bb-font-blkb_sans-name)';
1579
+ --sky-type-heading-1: var(--sky-font-style-heading-1) var(--sky-font-size-heading-1)/36 'var(--bb-font-blkb_sans-name)';
1580
+ --sky-type-input-val: var(--sky-font-style-body-s) var(--sky-font-size-input-val)/20 'var(--bb-font-blkb_sans-name)';
1525
1581
  }
1526
1582
 
1527
1583
  @property --bb-image-logo-primary-src {
@@ -1529,6 +1585,46 @@
1529
1585
  inherits: true;
1530
1586
  initial-value: url("data:,");
1531
1587
  }
1588
+ @property --bb-image-select_icon-base-dark-src {
1589
+ syntax: "<url>";
1590
+ inherits: true;
1591
+ initial-value: url("data:,");
1592
+ }
1593
+ @property --bb-image-select_icon-base-light-src {
1594
+ syntax: "<url>";
1595
+ inherits: true;
1596
+ initial-value: url("data:,");
1597
+ }
1598
+ @property --bb-image-select_icon-bb-dark-src {
1599
+ syntax: "<url>";
1600
+ inherits: true;
1601
+ initial-value: url("data:,");
1602
+ }
1603
+ @property --bb-image-select_icon-bb-light-src {
1604
+ syntax: "<url>";
1605
+ inherits: true;
1606
+ initial-value: url("data:,");
1607
+ }
1608
+ @property --bb-image-select_icon-disabled-base-dark-src {
1609
+ syntax: "<url>";
1610
+ inherits: true;
1611
+ initial-value: url("data:,");
1612
+ }
1613
+ @property --bb-image-select_icon-disabled-base-light-src {
1614
+ syntax: "<url>";
1615
+ inherits: true;
1616
+ initial-value: url("data:,");
1617
+ }
1618
+ @property --bb-image-select_icon-disabled-bb-dark-src {
1619
+ syntax: "<url>";
1620
+ inherits: true;
1621
+ initial-value: url("data:,");
1622
+ }
1623
+ @property --bb-image-select_icon-disabled-bb-light-src {
1624
+ syntax: "<url>";
1625
+ inherits: true;
1626
+ initial-value: url("data:,");
1627
+ }
1532
1628
  .sky-theme-modern.sky-theme-brand-base.sky-theme-brand-blackbaud {
1533
1629
  --bb-border-radius-0: 0rem;
1534
1630
  --bb-border-radius-012: .125rem;
@@ -1538,7 +1634,7 @@
1538
1634
  --bb-border-radius-round: 50%;
1539
1635
  --bb-border-style-dotted: dotted;
1540
1636
  --bb-border-style-solid: solid;
1541
- --bb-brand-name: "Blackbaud";
1637
+ --bb-brand-name: 'Blackbaud';
1542
1638
  --bb-color-black: #000000;
1543
1639
  --bb-color-blocking: rgba(255, 255, 255, 0.7);
1544
1640
  --bb-color-blue-100: #eef3fc;
@@ -1568,7 +1664,7 @@
1568
1664
  --bb-color-gray-400: #a3a6a9;
1569
1665
  --bb-color-gray-50: #f4f4f5;
1570
1666
  --bb-color-gray-500: #85888d;
1571
- --bb-color-gray-600: #6b6f74;
1667
+ --bb-color-gray-600: #666b70;
1572
1668
  --bb-color-gray-700: #51555c;
1573
1669
  --bb-color-gray-800: #3b4047;
1574
1670
  --bb-color-gray-900: #252b33;
@@ -1731,7 +1827,15 @@
1731
1827
  --bb-font-weight-light: 300;
1732
1828
  --bb-font-weight-regular: 400;
1733
1829
  --bb-font-weight-semibold: 600;
1734
- --bb-image-logo-primary-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.1.0/assets/images/bb-logo.png");
1830
+ --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/bb-logo.png');
1831
+ --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/chevron_up_down_24_fill-base-dark.svg');
1832
+ --bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/chevron_up_down_24_fill-base-light.svg');
1833
+ --bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/chevron_up_down_24_fill-bb-dark.svg');
1834
+ --bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/chevron_up_down_24_fill-bb-light.svg');
1835
+ --bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/chevron_up_down_24_fill-disabled-base-dark.svg');
1836
+ --bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/chevron_up_down_24_fill-disabled-base-light.svg');
1837
+ --bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/chevron_up_down_24_fill-disabled-bb-dark.svg');
1838
+ --bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/chevron_up_down_24_fill-disabled-bb-light.svg');
1735
1839
  --bb-letter_spacing-normal: normal;
1736
1840
  --bb-letter_spacing-wider: 0.01rem;
1737
1841
  --bb-letter_spacing-widest: 0.046875rem;
@@ -1856,6 +1960,8 @@
1856
1960
  --sky-elevation-input-disabled: var(--bb-shadow-slate-0);
1857
1961
  --sky-elevation-none: var(--bb-shadow-slate-0);
1858
1962
  --sky-image-logo-primary-src: var(--bb-image-logo-primary-src);
1963
+ --sky-image-select_icon-base: var(--bb-image-select_icon-bb-light-src);
1964
+ --sky-image-select_icon-disabled: var(--bb-image-select_icon-disabled-bb-light-src);
1859
1965
  --sky-opacity-wait: var(--bb-opacity-600);
1860
1966
  --sky-color-background-selected-switch-base: var(--bb-color-gradient-blue);
1861
1967
  --sky-color-border-action-accent-base: var(--bb-color-gradient-brand-secondary);
@@ -2048,6 +2154,8 @@
2048
2154
  --sky-color-text-inverse: var(--bb-color-gray-1100);
2049
2155
  --sky-color-text-selected: var(--bb-color-blue-400);
2050
2156
  --sky-elevation-none: var(--bb-shadow-slate-0);
2157
+ --sky-image-select_icon-base: var(--bb-image-select_icon-bb-dark-src);
2158
+ --sky-image-select_icon-disabled: var(--bb-image-select_icon-disabled-bb-dark-src);
2051
2159
  --sky-opacity-wait: var(--bb-opacity-600);
2052
2160
  --sky-elevation-focus: var(--bb-shadow-slate-200);
2053
2161
  --sky-elevation-overflow: var(--bb-shadow-slate-200);
@@ -2670,14 +2778,14 @@
2670
2778
  .sky-theme-modern .sky-btn-tab:focus-visible.sky-btn-tab-selected {
2671
2779
  background-color: var(--sky-color-background-selected-soft);
2672
2780
  }
2781
+ .sky-theme-modern .sky-btn-tab:focus-visible:not(:active):not(.sky-btn-tab-selected) {
2782
+ color: var(--sky-color-text-default);
2783
+ }
2673
2784
  .sky-theme-modern .sky-btn-tab:focus-visible:not(:active) {
2674
2785
  outline: solid var(--sky-border-width-selected-m) var(--sky-color-border-tab-focus);
2675
2786
  outline-offset: calc(var(--sky-border-width-selected-m) * -1);
2676
2787
  box-shadow: none;
2677
2788
  }
2678
- .sky-theme-modern .sky-btn-tab:focus-visible:not(:active):not(.sky-btn-tab-selected) {
2679
- color: var(--sky-color-text-default);
2680
- }
2681
2789
  .sky-theme-modern .sky-btn-tab:active, .sky-theme-modern .sky-btn-tab:active:hover:not(.sky-btn-tab-disabled):not(.sky-btn-tab-selected):not(:focus-visible) {
2682
2790
  color: var(--sky-color-text-default);
2683
2791
  background-color: var(--sky-color-background-tab-active);
@@ -2897,12 +3005,6 @@
2897
3005
  border-width: var(--sky-border-width-input-error);
2898
3006
  border-color: var(--sky-color-border-switch-error);
2899
3007
  }
2900
- .sky-theme-modern .sky-switch .sky-switch-input:checked:not(:disabled) + .sky-switch-control, .sky-theme-modern .sky-switch .sky-switch-input[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control {
2901
- background: var(--sky-color-background-selected-switch-base);
2902
- background-origin: border-box;
2903
- border-width: var(--sky-border-width-selected-s);
2904
- border-color: var(--sky-color-border-switch-selected-base);
2905
- }
2906
3008
  .sky-theme-modern .sky-switch .sky-switch-input:checked:not(:disabled) + .sky-switch-control:not(.sky-switch-control-icon), .sky-theme-modern .sky-switch .sky-switch-input[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control:not(.sky-switch-control-icon) {
2907
3009
  color: var(--sky-color-icon-inverse);
2908
3010
  }
@@ -2911,6 +3013,12 @@
2911
3013
  color: var(--sky-color-icon-selected);
2912
3014
  border-color: var(--sky-color-border-selected);
2913
3015
  }
3016
+ .sky-theme-modern .sky-switch .sky-switch-input:checked:not(:disabled) + .sky-switch-control, .sky-theme-modern .sky-switch .sky-switch-input[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control {
3017
+ background: var(--sky-color-background-selected-switch-base);
3018
+ background-origin: border-box;
3019
+ border-width: var(--sky-border-width-selected-s);
3020
+ border-color: var(--sky-color-border-switch-selected-base);
3021
+ }
2914
3022
  .sky-theme-modern .sky-switch .sky-switch-input:checked:not(:disabled) + .sky-switch-control:is(.sky-switch-control-success,
2915
3023
  .sky-switch-control-warning,
2916
3024
  .sky-switch-control-danger), .sky-theme-modern .sky-switch .sky-switch-input[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control:is(.sky-switch-control-success,