@skyux/theme 12.32.1 → 12.34.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/themes/modern/styles.css +573 -95
- package/fesm2022/skyux-theme.mjs +193 -69
- package/fesm2022/skyux-theme.mjs.map +1 -1
- package/lib/theming/theme-brand.d.ts +21 -1
- package/lib/theming/theme-brand.service.d.ts +37 -0
- package/lib/theming/theme-serialization-types.d.ts +4 -0
- package/package.json +2 -2
|
@@ -28,6 +28,7 @@
|
|
|
28
28
|
--bb-color-blue-700: #2256aa;
|
|
29
29
|
--bb-color-blue-800: #1a4080;
|
|
30
30
|
--bb-color-blue-900: #112b55;
|
|
31
|
+
--bb-color-brand-trusted_blue: #004054;
|
|
31
32
|
--bb-color-gray-100: #d3d5d6;
|
|
32
33
|
--bb-color-gray-1000: #1e2229;
|
|
33
34
|
--bb-color-gray-1100: #161a1f;
|
|
@@ -151,7 +152,7 @@
|
|
|
151
152
|
--bb-font-weight-light: 300;
|
|
152
153
|
--bb-font-weight-regular: 400;
|
|
153
154
|
--bb-font-weight-semibold: 600;
|
|
154
|
-
--bb-image-logo-primary-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/
|
|
155
|
+
--bb-image-logo-primary-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.0.0-alpha.0/assets/images/bb-logo.png");
|
|
155
156
|
--bb-letter_spacing-normal: normal;
|
|
156
157
|
--bb-letter_spacing-wider: 0.16px;
|
|
157
158
|
--bb-line_height-300: calc(18/13);
|
|
@@ -163,6 +164,7 @@
|
|
|
163
164
|
--bb-line_height-800: calc(36/27);
|
|
164
165
|
--bb-opacity-600: .6;
|
|
165
166
|
--bb-shadow-blue-0: 0 0 0 0 rgba(0, 0, 0, 0);
|
|
167
|
+
--bb-shadow-gray-0: 0 0 0 0 rgba(0, 0, 0, 0);
|
|
166
168
|
--bb-size-0: 0rem;
|
|
167
169
|
--bb-size-fixed-100: 16px;
|
|
168
170
|
--bb-size-fixed-12: 2px;
|
|
@@ -221,27 +223,14 @@
|
|
|
221
223
|
--bb-shadow-blue-400: 0 2px 4px -1px rgba(17, 43, 85, 0.2), 0 1px 10px 0 rgba(17, 43, 85, 0.12), 0 4px 5px 0 rgba(17, 43, 85, 0.14);
|
|
222
224
|
--bb-shadow-blue-50: 0 1px 1px 0 rgba(17, 43, 85, 0.12), 0 1.5px 1px -1px rgba(17, 43, 85, 0.12);
|
|
223
225
|
--bb-shadow-blue-800: 0 5px 5px -3px rgba(17, 43, 85, 0.2), 0 3px 14px 2px rgba(17, 43, 85, 0.12), 0 8px 10px 1px rgba(17, 43, 85, 0.14);
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
--
|
|
228
|
-
--
|
|
229
|
-
--
|
|
230
|
-
--
|
|
231
|
-
--
|
|
232
|
-
--sky-space-inset-letterbox-bottom-l: var(--bb-size-fluid-125);
|
|
233
|
-
--sky-space-inset-letterbox-bottom-m: var(--bb-size-fluid-75);
|
|
234
|
-
--sky-space-inset-letterbox-bottom-s: var(--bb-size-fluid-25);
|
|
235
|
-
--sky-space-inset-letterbox-left-l: var(--bb-size-fluid-75);
|
|
236
|
-
--sky-space-inset-letterbox-left-m: var(--bb-size-fluid-25);
|
|
237
|
-
--sky-space-inset-letterbox-left-s: var(--bb-size-fluid-12);
|
|
238
|
-
--sky-space-inset-letterbox-right-l: var(--bb-size-fluid-75);
|
|
239
|
-
--sky-space-inset-letterbox-right-m: var(--bb-size-fluid-25);
|
|
240
|
-
--sky-space-inset-letterbox-right-s: var(--bb-size-fluid-12);
|
|
241
|
-
--sky-space-inset-letterbox-top-l: var(--bb-size-fluid-125);
|
|
242
|
-
--sky-space-inset-letterbox-top-m: var(--bb-size-fluid-75);
|
|
243
|
-
--sky-space-inset-letterbox-top-s: var(--bb-size-fluid-25);
|
|
244
|
-
--sky-type-body-m: var(--bb-font-size-300) sans-serif;
|
|
226
|
+
--bb-shadow-gray-100: 0 1px 3px 0 rgba(22, 26, 31, 0.2), 0 2px 1px -1px rgba(22, 26, 31, 0.12), 0 1px 1px 0 rgba(22, 26, 31, 0.14);
|
|
227
|
+
--bb-shadow-gray-1600: 0 8px 10px -5px rgba(22, 26, 31, 0.2), 0 6px 30px 5px rgba(22, 26, 31, 0.12), 0 16px 24px 2px rgba(30, 34, 41, 0.14);
|
|
228
|
+
--bb-shadow-gray-200: 0 1px 8px 0 rgba(22, 26, 31, 0.2), 0 3px 3px -2px rgba(22, 26, 31, 0.12), 0 3px 4px 0 rgba(22, 26, 31, 0.14);
|
|
229
|
+
--bb-shadow-gray-2400: 0 11px 15px -7px rgba(22, 26, 31, 0.2), 0 9px 46px 8px rgba(22, 26, 31, 0.12), 0 24px 38px 3px rgba(22, 26, 31, 0.14);
|
|
230
|
+
--bb-shadow-gray-25: 0 1px 1px 0 rgba(22, 26, 31, 0.05);
|
|
231
|
+
--bb-shadow-gray-400: 0 2px 4px -1px rgba(22, 26, 31, 0.2), 0 1px 10px 0 rgba(22, 26, 31, 0.12), 0 4px 5px 0 rgba(22, 26, 31, 0.14);
|
|
232
|
+
--bb-shadow-gray-50: 0 1px 1px 0 rgba(22, 26, 31, 0.12), 0 1.5px 1px -1px rgba(22, 26, 31, 0.12);
|
|
233
|
+
--bb-shadow-gray-800: 0 5px 5px -3px rgba(22, 26, 31, 0.2), 0 3px 14px 2px rgba(22, 26, 31, 0.12), 0 8px 10px 1px rgba(22, 26, 31, 0.14);
|
|
245
234
|
}
|
|
246
235
|
|
|
247
236
|
.sky-theme-modern.sky-theme-brand-base.sky-theme-mode-dark {
|
|
@@ -394,6 +383,10 @@
|
|
|
394
383
|
--sky-color-icon-selected: var(--bb-color-blue-600);
|
|
395
384
|
--sky-color-icon-success: var(--bb-color-green-700);
|
|
396
385
|
--sky-color-icon-warning: var(--bb-color-yellow-600);
|
|
386
|
+
--sky-color-illustration-fill-heavy: var(--bb-color-green-700);
|
|
387
|
+
--sky-color-illustration-fill-soft: var(--bb-color-green-900);
|
|
388
|
+
--sky-color-illustration-fill-softest: var(--bb-color-gray-900);
|
|
389
|
+
--sky-color-illustration-stroke: var(--bb-color-green-200);
|
|
397
390
|
--sky-color-text-action: var(--bb-color-sky-600);
|
|
398
391
|
--sky-color-text-action_contrast: var(--bb-color-blue-300);
|
|
399
392
|
--sky-color-text-danger: var(--bb-color-red-400);
|
|
@@ -443,25 +436,25 @@
|
|
|
443
436
|
--sky-color-background-blocking: var(--bb-color-blocking);
|
|
444
437
|
--sky-color-background-container-base: var(--bb-color-white);
|
|
445
438
|
--sky-color-background-container-danger: var(--bb-color-red-300);
|
|
446
|
-
--sky-color-background-container-dimmed: var(--bb-color-
|
|
439
|
+
--sky-color-background-container-dimmed: var(--bb-color-gray-25);
|
|
447
440
|
--sky-color-background-container-info: var(--bb-color-blue-200);
|
|
448
441
|
--sky-color-background-container-menu: var(--bb-color-white);
|
|
449
442
|
--sky-color-background-container-success: var(--bb-color-green-300);
|
|
450
443
|
--sky-color-background-container-warning: var(--bb-color-yellow-300);
|
|
451
|
-
--sky-color-background-file_drop: var(--bb-color-
|
|
444
|
+
--sky-color-background-file_drop: var(--bb-color-gray-25);
|
|
452
445
|
--sky-color-background-icon_matte-action-heavy: var(--bb-color-blue-600);
|
|
453
446
|
--sky-color-background-icon_matte-action-soft: var(--bb-color-blue-100);
|
|
454
447
|
--sky-color-background-icon_matte-danger: var(--bb-color-red-600);
|
|
455
448
|
--sky-color-background-icon_matte-success: var(--bb-color-green-700);
|
|
456
449
|
--sky-color-background-icon_matte-warning: var(--bb-color-yellow-600);
|
|
457
|
-
--sky-color-background-input-base: var(--bb-color-
|
|
450
|
+
--sky-color-background-input-base: var(--bb-color-white);
|
|
458
451
|
--sky-color-background-input-disabled: var(--bb-color-gray-50);
|
|
459
452
|
--sky-color-background-nav-active: var(--bb-color-blue-100);
|
|
460
453
|
--sky-color-background-nav-base: var(--bb-color-transparent);
|
|
461
454
|
--sky-color-background-nav-disabled: var(--bb-color-gray-50);
|
|
462
455
|
--sky-color-background-nav-focus: var(--bb-color-transparent);
|
|
463
456
|
--sky-color-background-nav-hover: var(--bb-color-blue-50);
|
|
464
|
-
--sky-color-background-page: var(--bb-color-
|
|
457
|
+
--sky-color-background-page: var(--bb-color-gray-50);
|
|
465
458
|
--sky-color-background-row-active: var(--bb-color-blue-100);
|
|
466
459
|
--sky-color-background-row-base: var(--bb-color-white);
|
|
467
460
|
--sky-color-background-row-disabled: var(--bb-color-gray-50);
|
|
@@ -472,6 +465,7 @@
|
|
|
472
465
|
--sky-color-background-selected-heavy: var(--bb-color-blue-600);
|
|
473
466
|
--sky-color-background-selected-soft: var(--bb-color-blue-100);
|
|
474
467
|
--sky-color-background-selected-success: var(--bb-color-green-300);
|
|
468
|
+
--sky-color-background-selected-switch-base: var(--bb-color-blue-600);
|
|
475
469
|
--sky-color-background-selected-switch-disabled: var(--bb-color-gray-50);
|
|
476
470
|
--sky-color-background-selected-warning: var(--bb-color-yellow-300);
|
|
477
471
|
--sky-color-background-tab-active: var(--bb-color-transparent);
|
|
@@ -491,7 +485,7 @@
|
|
|
491
485
|
--sky-color-border-action-danger-focus: var(--bb-color-red-1000);
|
|
492
486
|
--sky-color-border-action-danger-hover: var(--bb-color-red-1000);
|
|
493
487
|
--sky-color-border-action-input-active: var(--bb-color-blue-600);
|
|
494
|
-
--sky-color-border-action-input-base: var(--bb-color-
|
|
488
|
+
--sky-color-border-action-input-base: var(--bb-color-gray-200);
|
|
495
489
|
--sky-color-border-action-input-disabled: var(--bb-color-gray-200);
|
|
496
490
|
--sky-color-border-action-input-focus: var(--bb-color-blue-600);
|
|
497
491
|
--sky-color-border-action-input-hover: var(--bb-color-blue-600);
|
|
@@ -501,7 +495,7 @@
|
|
|
501
495
|
--sky-color-border-action-primary-focus: var(--bb-color-blue-1000);
|
|
502
496
|
--sky-color-border-action-primary-hover: var(--bb-color-blue-1000);
|
|
503
497
|
--sky-color-border-action-secondary-active: var(--bb-color-blue-600);
|
|
504
|
-
--sky-color-border-action-secondary-base: var(--bb-color-
|
|
498
|
+
--sky-color-border-action-secondary-base: var(--bb-color-gray-200);
|
|
505
499
|
--sky-color-border-action-secondary-disabled: var(--bb-color-gray-200);
|
|
506
500
|
--sky-color-border-action-secondary-focus: var(--bb-color-blue-600);
|
|
507
501
|
--sky-color-border-action-secondary-hover: var(--bb-color-blue-600);
|
|
@@ -511,13 +505,13 @@
|
|
|
511
505
|
--sky-color-border-action-tertiary-focus: var(--bb-color-blue-600);
|
|
512
506
|
--sky-color-border-action-tertiary-hover: var(--bb-color-blue-600);
|
|
513
507
|
--sky-color-border-column_divider: var(--bb-color-blue-600);
|
|
514
|
-
--sky-color-border-container-base: var(--bb-color-
|
|
508
|
+
--sky-color-border-container-base: var(--bb-color-gray-100);
|
|
515
509
|
--sky-color-border-danger: var(--bb-color-red-600);
|
|
516
|
-
--sky-color-border-divider: var(--bb-color-
|
|
517
|
-
--sky-color-border-elevation: var(--bb-color-
|
|
510
|
+
--sky-color-border-divider: var(--bb-color-gray-200);
|
|
511
|
+
--sky-color-border-elevation: var(--bb-color-gray-100);
|
|
518
512
|
--sky-color-border-info: var(--bb-color-blue-600);
|
|
519
513
|
--sky-color-border-input-active: var(--bb-color-blue-600);
|
|
520
|
-
--sky-color-border-input-base: var(--bb-color-
|
|
514
|
+
--sky-color-border-input-base: var(--bb-color-gray-200);
|
|
521
515
|
--sky-color-border-input-disabled: var(--bb-color-gray-200);
|
|
522
516
|
--sky-color-border-input-error: var(--bb-color-red-600);
|
|
523
517
|
--sky-color-border-input-focus: var(--bb-color-blue-600);
|
|
@@ -530,11 +524,11 @@
|
|
|
530
524
|
--sky-color-border-progress_step: var(--bb-color-gray-400);
|
|
531
525
|
--sky-color-border-selected: var(--bb-color-blue-600);
|
|
532
526
|
--sky-color-border-selected_soft: var(--bb-color-blue-300);
|
|
533
|
-
--sky-color-border-separator-light: var(--bb-color-
|
|
534
|
-
--sky-color-border-separator-row: var(--bb-color-
|
|
527
|
+
--sky-color-border-separator-light: var(--bb-color-gray-100);
|
|
528
|
+
--sky-color-border-separator-row: var(--bb-color-gray-100);
|
|
535
529
|
--sky-color-border-success: var(--bb-color-green-700);
|
|
536
530
|
--sky-color-border-switch-active: var(--bb-color-blue-600);
|
|
537
|
-
--sky-color-border-switch-base: var(--bb-color-
|
|
531
|
+
--sky-color-border-switch-base: var(--bb-color-gray-500);
|
|
538
532
|
--sky-color-border-switch-disabled: var(--bb-color-gray-200);
|
|
539
533
|
--sky-color-border-switch-error: var(--bb-color-red-600);
|
|
540
534
|
--sky-color-border-switch-focus: var(--bb-color-blue-600);
|
|
@@ -564,62 +558,65 @@
|
|
|
564
558
|
--sky-color-icon-deemphasized: var(--bb-color-gray-600);
|
|
565
559
|
--sky-color-icon-default: var(--bb-color-gray-900);
|
|
566
560
|
--sky-color-icon-info: var(--bb-color-blue-600);
|
|
567
|
-
--sky-color-icon-input-action: var(--bb-color-
|
|
561
|
+
--sky-color-icon-input-action: var(--bb-color-gray-600);
|
|
568
562
|
--sky-color-icon-inverse: var(--bb-color-white);
|
|
569
563
|
--sky-color-icon-selected: var(--bb-color-blue-600);
|
|
570
564
|
--sky-color-icon-success: var(--bb-color-green-700);
|
|
571
565
|
--sky-color-icon-warning: var(--bb-color-yellow-600);
|
|
566
|
+
--sky-color-illustration-fill-heavy: var(--bb-color-green-400);
|
|
567
|
+
--sky-color-illustration-fill-soft: var(--bb-color-green-100);
|
|
568
|
+
--sky-color-illustration-fill-softest: var(--bb-color-white);
|
|
569
|
+
--sky-color-illustration-stroke: var(--bb-color-brand-trusted_blue);
|
|
572
570
|
--sky-color-text-action: var(--bb-color-blue-600);
|
|
573
571
|
--sky-color-text-action_contrast: var(--bb-color-blue-700);
|
|
574
572
|
--sky-color-text-danger: var(--bb-color-red-600);
|
|
575
573
|
--sky-color-text-deemphasized: var(--bb-color-gray-600);
|
|
576
574
|
--sky-color-text-default: var(--bb-color-gray-900);
|
|
577
|
-
--sky-color-text-heading: var(--bb-color-
|
|
575
|
+
--sky-color-text-heading: var(--bb-color-gray-1100);
|
|
578
576
|
--sky-color-text-inverse: var(--bb-color-white);
|
|
579
577
|
--sky-color-text-selected: var(--bb-color-blue-600);
|
|
580
|
-
--sky-elevation-action-danger-active: var(--bb-shadow-
|
|
581
|
-
--sky-elevation-action-danger-
|
|
582
|
-
--sky-elevation-action-
|
|
583
|
-
--sky-elevation-action-
|
|
584
|
-
--sky-elevation-action-
|
|
585
|
-
--sky-elevation-action-
|
|
586
|
-
--sky-elevation-action-
|
|
587
|
-
--sky-elevation-action-
|
|
588
|
-
--sky-elevation-action-
|
|
589
|
-
--sky-elevation-action-
|
|
590
|
-
--sky-elevation-action-
|
|
591
|
-
--sky-elevation-action-
|
|
592
|
-
--sky-elevation-action-
|
|
593
|
-
--sky-elevation-action-
|
|
594
|
-
--sky-elevation-action-
|
|
595
|
-
--sky-elevation-
|
|
596
|
-
--sky-elevation-
|
|
578
|
+
--sky-elevation-action-danger-active: var(--bb-shadow-gray-0);
|
|
579
|
+
--sky-elevation-action-danger-base: var(--bb-shadow-gray-0);
|
|
580
|
+
--sky-elevation-action-danger-disabled: var(--bb-shadow-gray-0);
|
|
581
|
+
--sky-elevation-action-danger-focus: var(--bb-shadow-gray-0);
|
|
582
|
+
--sky-elevation-action-danger-hover: var(--bb-shadow-gray-0);
|
|
583
|
+
--sky-elevation-action-input-active: var(--bb-shadow-gray-0);
|
|
584
|
+
--sky-elevation-action-input-base: var(--bb-shadow-gray-0);
|
|
585
|
+
--sky-elevation-action-input-disabled: var(--bb-shadow-gray-0);
|
|
586
|
+
--sky-elevation-action-input-focus: var(--bb-shadow-gray-0);
|
|
587
|
+
--sky-elevation-action-input-hover: var(--bb-shadow-gray-0);
|
|
588
|
+
--sky-elevation-action-primary-active: var(--bb-shadow-gray-0);
|
|
589
|
+
--sky-elevation-action-primary-base: var(--bb-shadow-gray-0);
|
|
590
|
+
--sky-elevation-action-primary-disabled: var(--bb-shadow-gray-0);
|
|
591
|
+
--sky-elevation-action-primary-focus: var(--bb-shadow-gray-0);
|
|
592
|
+
--sky-elevation-action-primary-hover: var(--bb-shadow-gray-0);
|
|
593
|
+
--sky-elevation-action-secondary-active: var(--bb-shadow-gray-0);
|
|
594
|
+
--sky-elevation-action-secondary-base: var(--bb-shadow-gray-0);
|
|
595
|
+
--sky-elevation-action-secondary-disabled: var(--bb-shadow-gray-0);
|
|
596
|
+
--sky-elevation-action-secondary-focus: var(--bb-shadow-gray-0);
|
|
597
|
+
--sky-elevation-action-secondary-hover: var(--bb-shadow-gray-0);
|
|
598
|
+
--sky-elevation-action-tertiary-active: var(--bb-shadow-gray-0);
|
|
599
|
+
--sky-elevation-action-tertiary-base: var(--bb-shadow-gray-0);
|
|
600
|
+
--sky-elevation-action-tertiary-disabled: var(--bb-shadow-gray-0);
|
|
601
|
+
--sky-elevation-action-tertiary-focus: var(--bb-shadow-gray-0);
|
|
602
|
+
--sky-elevation-action-tertiary-hover: var(--bb-shadow-gray-0);
|
|
603
|
+
--sky-elevation-action-toolbar-active: var(--bb-shadow-gray-0);
|
|
604
|
+
--sky-elevation-action-toolbar-base: var(--bb-shadow-gray-0);
|
|
605
|
+
--sky-elevation-action-toolbar-disabled: var(--bb-shadow-gray-0);
|
|
606
|
+
--sky-elevation-action-toolbar-focus: var(--bb-shadow-gray-0);
|
|
607
|
+
--sky-elevation-action-toolbar-hover: var(--bb-shadow-gray-0);
|
|
608
|
+
--sky-elevation-input-base: var(--bb-shadow-gray-0);
|
|
609
|
+
--sky-elevation-input-disabled: var(--bb-shadow-gray-0);
|
|
610
|
+
--sky-elevation-none: var(--bb-shadow-gray-0);
|
|
597
611
|
--sky-image-logo-primary-src: var(--bb-image-logo-primary-src);
|
|
598
612
|
--sky-opacity-wait: var(--bb-opacity-600);
|
|
599
|
-
--sky-
|
|
600
|
-
--sky-elevation-
|
|
601
|
-
--sky-elevation-
|
|
602
|
-
--sky-elevation-
|
|
603
|
-
--sky-elevation-
|
|
604
|
-
--sky-elevation-
|
|
605
|
-
--sky-elevation-
|
|
606
|
-
--sky-elevation-action-input-hover: var(--bb-shadow-blue-25);
|
|
607
|
-
--sky-elevation-action-primary-base: var(--bb-shadow-blue-50);
|
|
608
|
-
--sky-elevation-action-primary-focus: var(--bb-shadow-blue-50);
|
|
609
|
-
--sky-elevation-action-primary-hover: var(--bb-shadow-blue-50);
|
|
610
|
-
--sky-elevation-action-secondary-base: var(--bb-shadow-blue-50);
|
|
611
|
-
--sky-elevation-action-secondary-focus: var(--bb-shadow-blue-50);
|
|
612
|
-
--sky-elevation-action-secondary-hover: var(--bb-shadow-blue-50);
|
|
613
|
-
--sky-elevation-action-tertiary-hover: var(--bb-shadow-blue-50);
|
|
614
|
-
--sky-elevation-action-toolbar-hover: var(--bb-shadow-blue-50);
|
|
615
|
-
--sky-elevation-focus: var(--bb-shadow-blue-200);
|
|
616
|
-
--sky-elevation-input-base: var(--bb-shadow-blue-25);
|
|
617
|
-
--sky-elevation-overflow: var(--bb-shadow-blue-200);
|
|
618
|
-
--sky-elevation-overlay-100: var(--bb-shadow-blue-400);
|
|
619
|
-
--sky-elevation-overlay-200: var(--bb-shadow-blue-800);
|
|
620
|
-
--sky-elevation-overlay-300: var(--bb-shadow-blue-1600);
|
|
621
|
-
--sky-elevation-overlay-400: var(--bb-shadow-blue-2400);
|
|
622
|
-
--sky-elevation-raised-100: var(--bb-shadow-blue-100);
|
|
613
|
+
--sky-elevation-focus: var(--bb-shadow-gray-200);
|
|
614
|
+
--sky-elevation-overflow: var(--bb-shadow-gray-200);
|
|
615
|
+
--sky-elevation-overlay-100: var(--bb-shadow-gray-400);
|
|
616
|
+
--sky-elevation-overlay-200: var(--bb-shadow-gray-800);
|
|
617
|
+
--sky-elevation-overlay-300: var(--bb-shadow-gray-1600);
|
|
618
|
+
--sky-elevation-overlay-400: var(--bb-shadow-gray-2400);
|
|
619
|
+
--sky-elevation-raised-100: var(--bb-shadow-gray-100);
|
|
623
620
|
}
|
|
624
621
|
|
|
625
622
|
.sky-theme-modern.sky-theme-brand-base {
|
|
@@ -906,6 +903,10 @@
|
|
|
906
903
|
--sky-comp-layout-tabset-tabs-space-inset-xs-left: var(--bb-size-fluid-50);
|
|
907
904
|
--sky-comp-layout-tabset-tabs-space-inset-xs-right: var(--bb-size-0);
|
|
908
905
|
--sky-comp-layout-tabset-tabs-space-inset-xs-top: var(--bb-size-0);
|
|
906
|
+
--sky-comp-list_summary-space-inset-bottom: var(--bb-size-fluid-25);
|
|
907
|
+
--sky-comp-list_summary-space-inset-left: var(--bb-size-fluid-50);
|
|
908
|
+
--sky-comp-list_summary-space-inset-right: var(--bb-size-fluid-50);
|
|
909
|
+
--sky-comp-list_summary-space-inset-top: var(--bb-size-fluid-25);
|
|
909
910
|
--sky-comp-modal-content-space-inset-bottom: var(--bb-size-fluid-150);
|
|
910
911
|
--sky-comp-modal-content-space-inset-left: var(--bb-size-fluid-150);
|
|
911
912
|
--sky-comp-modal-content-space-inset-right: var(--bb-size-fluid-150);
|
|
@@ -1274,22 +1275,488 @@
|
|
|
1274
1275
|
--sky-comp-checkbox-border-radius: var(--sky-border-radius-s);
|
|
1275
1276
|
--sky-font-family-primary: var(--bb-font-blkb_sans-family);
|
|
1276
1277
|
--sky-space-inset-switch: calc(var(--sky-size-switch) + var(--sky-space-gap-label-s));
|
|
1277
|
-
|
|
1278
|
-
|
|
1279
|
-
|
|
1280
|
-
|
|
1281
|
-
|
|
1282
|
-
|
|
1283
|
-
|
|
1284
|
-
|
|
1285
|
-
--
|
|
1286
|
-
--
|
|
1287
|
-
--
|
|
1288
|
-
--
|
|
1289
|
-
--
|
|
1290
|
-
--
|
|
1291
|
-
--
|
|
1292
|
-
--
|
|
1278
|
+
}
|
|
1279
|
+
|
|
1280
|
+
@property --bb-image-logo-primary-src {
|
|
1281
|
+
syntax: "<url>";
|
|
1282
|
+
inherits: true;
|
|
1283
|
+
initial-value: url("data:,");
|
|
1284
|
+
}
|
|
1285
|
+
.sky-theme-modern.sky-theme-brand-base.sky-theme-brand-blackbaud {
|
|
1286
|
+
--bb-border-radius-0: 0rem;
|
|
1287
|
+
--bb-border-radius-012: .125rem;
|
|
1288
|
+
--bb-border-radius-025: .25rem;
|
|
1289
|
+
--bb-border-radius-050: .5rem;
|
|
1290
|
+
--bb-border-radius-pill: 999rem;
|
|
1291
|
+
--bb-border-radius-round: 50%;
|
|
1292
|
+
--bb-border-style-dotted: dotted;
|
|
1293
|
+
--bb-border-style-solid: solid;
|
|
1294
|
+
--bb-brand-name: "Blackbaud";
|
|
1295
|
+
--bb-color-black: #000000;
|
|
1296
|
+
--bb-color-blocking: rgba(255, 255, 255, 0.7);
|
|
1297
|
+
--bb-color-blue-100: #eef3fc;
|
|
1298
|
+
--bb-color-blue-1000: #09152b;
|
|
1299
|
+
--bb-color-blue-200: #d5e1f7;
|
|
1300
|
+
--bb-color-blue-25: #fbfcfe;
|
|
1301
|
+
--bb-color-blue-250: #bfd3f2;
|
|
1302
|
+
--bb-color-blue-300: #aac4ee;
|
|
1303
|
+
--bb-color-blue-400: #80a6e6;
|
|
1304
|
+
--bb-color-blue-50: #f4f8fd;
|
|
1305
|
+
--bb-color-blue-500: #5589dd;
|
|
1306
|
+
--bb-color-blue-600: #2b6bd5;
|
|
1307
|
+
--bb-color-blue-700: #2256aa;
|
|
1308
|
+
--bb-color-blue-800: #1a4080;
|
|
1309
|
+
--bb-color-blue-900: #112b55;
|
|
1310
|
+
--bb-color-brand-trusted_blue: #004054;
|
|
1311
|
+
--bb-color-gray-100: #d3d5d6;
|
|
1312
|
+
--bb-color-gray-1000: #1e2229;
|
|
1313
|
+
--bb-color-gray-1100: #161a1f;
|
|
1314
|
+
--bb-color-gray-1200: #0f1114;
|
|
1315
|
+
--bb-color-gray-200: #bebfc2;
|
|
1316
|
+
--bb-color-gray-25: #f9f9f9;
|
|
1317
|
+
--bb-color-gray-300: #a8aaad;
|
|
1318
|
+
--bb-color-gray-400: #929599;
|
|
1319
|
+
--bb-color-gray-50: #eeeeef;
|
|
1320
|
+
--bb-color-gray-500: #7c8085;
|
|
1321
|
+
--bb-color-gray-600: #666b70;
|
|
1322
|
+
--bb-color-gray-700: #51555c;
|
|
1323
|
+
--bb-color-gray-800: #3b4047;
|
|
1324
|
+
--bb-color-gray-900: #252b33;
|
|
1325
|
+
--bb-color-green-100: #ecfcf4;
|
|
1326
|
+
--bb-color-green-1000: #022b17;
|
|
1327
|
+
--bb-color-green-200: #cef7e3;
|
|
1328
|
+
--bb-color-green-300: #9ef0c7;
|
|
1329
|
+
--bb-color-green-400: #6de8ab;
|
|
1330
|
+
--bb-color-green-500: #3de18f;
|
|
1331
|
+
--bb-color-green-600: #0cd973;
|
|
1332
|
+
--bb-color-green-700: #0aa959;
|
|
1333
|
+
--bb-color-green-800: #078245;
|
|
1334
|
+
--bb-color-green-900: #05572e;
|
|
1335
|
+
--bb-color-orange-100: #fef3eb;
|
|
1336
|
+
--bb-color-orange-1000: #311400;
|
|
1337
|
+
--bb-color-orange-200: #fde0cc;
|
|
1338
|
+
--bb-color-orange-300: #fbc299;
|
|
1339
|
+
--bb-color-orange-400: #f9a366;
|
|
1340
|
+
--bb-color-orange-500: #f78533;
|
|
1341
|
+
--bb-color-orange-600: #f56600;
|
|
1342
|
+
--bb-color-orange-700: #c45200;
|
|
1343
|
+
--bb-color-orange-800: #933d00;
|
|
1344
|
+
--bb-color-orange-900: #622900;
|
|
1345
|
+
--bb-color-pink-100: #fef2fd;
|
|
1346
|
+
--bb-color-pink-1000: #30132f;
|
|
1347
|
+
--bb-color-pink-200: #fcdffb;
|
|
1348
|
+
--bb-color-pink-300: #fac0f7;
|
|
1349
|
+
--bb-color-pink-400: #f7a0f3;
|
|
1350
|
+
--bb-color-pink-500: #f581ef;
|
|
1351
|
+
--bb-color-pink-600: #f261eb;
|
|
1352
|
+
--bb-color-pink-700: #c24ebc;
|
|
1353
|
+
--bb-color-pink-800: #913a8d;
|
|
1354
|
+
--bb-color-pink-900: #61275e;
|
|
1355
|
+
--bb-color-purple-100: #f9f2fe;
|
|
1356
|
+
--bb-color-purple-1000: #231330;
|
|
1357
|
+
--bb-color-purple-200: #efdffc;
|
|
1358
|
+
--bb-color-purple-300: #dfc0fa;
|
|
1359
|
+
--bb-color-purple-400: #d0a0f7;
|
|
1360
|
+
--bb-color-purple-500: #c081f5;
|
|
1361
|
+
--bb-color-purple-600: #b061f2;
|
|
1362
|
+
--bb-color-purple-700: #8d4ec2;
|
|
1363
|
+
--bb-color-purple-800: #6a3a91;
|
|
1364
|
+
--bb-color-purple-900: #462761;
|
|
1365
|
+
--bb-color-red-100: #fcefef;
|
|
1366
|
+
--bb-color-red-1000: #2b0c0c;
|
|
1367
|
+
--bb-color-red-200: #f7d8d8;
|
|
1368
|
+
--bb-color-red-300: #f0b0b1;
|
|
1369
|
+
--bb-color-red-400: #e8898b;
|
|
1370
|
+
--bb-color-red-500: #e16164;
|
|
1371
|
+
--bb-color-red-600: #d93a3d;
|
|
1372
|
+
--bb-color-red-700: #ae2e31;
|
|
1373
|
+
--bb-color-red-800: #822325;
|
|
1374
|
+
--bb-color-red-900: #571718;
|
|
1375
|
+
--bb-color-scrim: rgba(37, 43, 51, 0.5);
|
|
1376
|
+
--bb-color-sky-100: #ebfbff;
|
|
1377
|
+
--bb-color-sky-1000: #002933;
|
|
1378
|
+
--bb-color-sky-200: #ccf5ff;
|
|
1379
|
+
--bb-color-sky-300: #99ecff;
|
|
1380
|
+
--bb-color-sky-400: #66e2ff;
|
|
1381
|
+
--bb-color-sky-500: #33d9ff;
|
|
1382
|
+
--bb-color-sky-600: #00cfff;
|
|
1383
|
+
--bb-color-sky-700: #00a6cc;
|
|
1384
|
+
--bb-color-sky-800: #007c99;
|
|
1385
|
+
--bb-color-sky-900: #005366;
|
|
1386
|
+
--bb-color-slate-100: #f1f5fa;
|
|
1387
|
+
--bb-color-teal-100: #ebfaf9;
|
|
1388
|
+
--bb-color-teal-1000: #012625;
|
|
1389
|
+
--bb-color-teal-200: #cdf2f1;
|
|
1390
|
+
--bb-color-teal-300: #9ce5e3;
|
|
1391
|
+
--bb-color-teal-400: #6ad8d4;
|
|
1392
|
+
--bb-color-teal-500: #39cbc6;
|
|
1393
|
+
--bb-color-teal-600: #07beb8;
|
|
1394
|
+
--bb-color-teal-700: #069893;
|
|
1395
|
+
--bb-color-teal-800: #04726e;
|
|
1396
|
+
--bb-color-teal-900: #034c4a;
|
|
1397
|
+
--bb-color-transparent: rgba(0, 0, 0, 0);
|
|
1398
|
+
--bb-color-white: #ffffff;
|
|
1399
|
+
--bb-color-yellow-100: #fff9ef;
|
|
1400
|
+
--bb-color-yellow-1000: #32230a;
|
|
1401
|
+
--bb-color-yellow-200: #feefd6;
|
|
1402
|
+
--bb-color-yellow-300: #fddfae;
|
|
1403
|
+
--bb-color-yellow-400: #fdd085;
|
|
1404
|
+
--bb-color-yellow-500: #fcc05d;
|
|
1405
|
+
--bb-color-yellow-600: #fbb034;
|
|
1406
|
+
--bb-color-yellow-700: #c98d2a;
|
|
1407
|
+
--bb-color-yellow-800: #976a1f;
|
|
1408
|
+
--bb-color-yellow-900: #644615;
|
|
1409
|
+
--bb-font-blkb_sans-fallback: Helvetica Neue, Arial, sans-serif;
|
|
1410
|
+
--bb-font-blkb_sans-name: BLKB Sans;
|
|
1411
|
+
--bb-font-monospaced-family: Menlo, Monaco, Consolas, Courier New, monospace;
|
|
1412
|
+
--bb-font-size-300: 0.8125rem;
|
|
1413
|
+
--bb-font-size-400: 0.9375rem;
|
|
1414
|
+
--bb-font-size-500: 1.0625rem;
|
|
1415
|
+
--bb-font-size-600: 1.1875rem;
|
|
1416
|
+
--bb-font-size-650: 1.3125rem;
|
|
1417
|
+
--bb-font-size-700: 1.5rem;
|
|
1418
|
+
--bb-font-size-800: 1.6875rem;
|
|
1419
|
+
--bb-font-style-italic-style: italic;
|
|
1420
|
+
--bb-font-style-italic-weight: 400;
|
|
1421
|
+
--bb-font-style-light: 300;
|
|
1422
|
+
--bb-font-style-light-italic-style: italic;
|
|
1423
|
+
--bb-font-style-light-italic-weight: 300;
|
|
1424
|
+
--bb-font-style-normal-style: normal;
|
|
1425
|
+
--bb-font-style-normal-weight: 400;
|
|
1426
|
+
--bb-font-style-regular: 400;
|
|
1427
|
+
--bb-font-style-semibold: 600;
|
|
1428
|
+
--bb-font-style-semibold-italic-style: italic;
|
|
1429
|
+
--bb-font-style-semibold-italic-weight: 600;
|
|
1430
|
+
--bb-font-weight-bold: 700;
|
|
1431
|
+
--bb-font-weight-light: 300;
|
|
1432
|
+
--bb-font-weight-regular: 400;
|
|
1433
|
+
--bb-font-weight-semibold: 600;
|
|
1434
|
+
--bb-image-logo-primary-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.0.0-alpha.0/assets/images/bb-logo.png");
|
|
1435
|
+
--bb-letter_spacing-normal: normal;
|
|
1436
|
+
--bb-letter_spacing-wider: 0.16px;
|
|
1437
|
+
--bb-line_height-300: calc(18/13);
|
|
1438
|
+
--bb-line_height-400: calc(20/15);
|
|
1439
|
+
--bb-line_height-500: calc(24/17);
|
|
1440
|
+
--bb-line_height-600: calc(28/19);
|
|
1441
|
+
--bb-line_height-650: calc(28/21);
|
|
1442
|
+
--bb-line_height-700: calc(32/24);
|
|
1443
|
+
--bb-line_height-800: calc(36/27);
|
|
1444
|
+
--bb-opacity-600: .6;
|
|
1445
|
+
--bb-shadow-blue-0: 0 0 0 0 rgba(0, 0, 0, 0);
|
|
1446
|
+
--bb-shadow-gray-0: 0 0 0 0 rgba(0, 0, 0, 0);
|
|
1447
|
+
--bb-size-0: 0rem;
|
|
1448
|
+
--bb-size-fixed-100: 16px;
|
|
1449
|
+
--bb-size-fixed-12: 2px;
|
|
1450
|
+
--bb-size-fixed-125: 20px;
|
|
1451
|
+
--bb-size-fixed-150: 24px;
|
|
1452
|
+
--bb-size-fixed-2000: 320px;
|
|
1453
|
+
--bb-size-fixed-25: 4px;
|
|
1454
|
+
--bb-size-fixed-250: 36px;
|
|
1455
|
+
--bb-size-fixed-37: 6px;
|
|
1456
|
+
--bb-size-fixed-4000: 640px;
|
|
1457
|
+
--bb-size-fixed-50: 8px;
|
|
1458
|
+
--bb-size-fixed-6: 1px;
|
|
1459
|
+
--bb-size-fixed-600: 96px;
|
|
1460
|
+
--bb-size-fixed-6000: 960px;
|
|
1461
|
+
--bb-size-fixed-75: 12px;
|
|
1462
|
+
--bb-size-fluid-100: 1rem;
|
|
1463
|
+
--bb-size-fluid-12: 0.125rem;
|
|
1464
|
+
--bb-size-fluid-125: 1.25rem;
|
|
1465
|
+
--bb-size-fluid-150: 1.5rem;
|
|
1466
|
+
--bb-size-fluid-18: 0.1875rem;
|
|
1467
|
+
--bb-size-fluid-200: 2rem;
|
|
1468
|
+
--bb-size-fluid-225: 2.25rem;
|
|
1469
|
+
--bb-size-fluid-25: 0.25rem;
|
|
1470
|
+
--bb-size-fluid-250: 2.5rem;
|
|
1471
|
+
--bb-size-fluid-300: 3rem;
|
|
1472
|
+
--bb-size-fluid-350: 3.5rem;
|
|
1473
|
+
--bb-size-fluid-37: 0.375rem;
|
|
1474
|
+
--bb-size-fluid-400: 4rem;
|
|
1475
|
+
--bb-size-fluid-50: 0.5rem;
|
|
1476
|
+
--bb-size-fluid-500: 5rem;
|
|
1477
|
+
--bb-size-fluid-550: 5.5rem;
|
|
1478
|
+
--bb-size-fluid-6: 0.0625rem;
|
|
1479
|
+
--bb-size-fluid-600: 6rem;
|
|
1480
|
+
--bb-size-fluid-62: 0.625rem;
|
|
1481
|
+
--bb-size-fluid-75: 0.75rem;
|
|
1482
|
+
--bb-size-reading_container-max_width: 50ch, 40vw;
|
|
1483
|
+
--bb-space-0: 0rem;
|
|
1484
|
+
--bb-space-1: 1px;
|
|
1485
|
+
--bb-space-10: 48px;
|
|
1486
|
+
--bb-space-11: 64px;
|
|
1487
|
+
--bb-space-2: 2px;
|
|
1488
|
+
--bb-space-3: 4px;
|
|
1489
|
+
--bb-space-4: 6px;
|
|
1490
|
+
--bb-space-5: 8px;
|
|
1491
|
+
--bb-space-6: 12px;
|
|
1492
|
+
--bb-space-7: 16px;
|
|
1493
|
+
--bb-space-8: 24px;
|
|
1494
|
+
--bb-space-9: 36px;
|
|
1495
|
+
--bb-color-gradient-blue: linear-gradient( var(--bb-color-blue-500), var(--bb-color-blue-700));
|
|
1496
|
+
--bb-font-blkb_sans-family: var(--bb-font-blkb_sans-name), var(--bb-font-blkb_sans-fallback);
|
|
1497
|
+
--bb-shadow-blue-100: 0 1px 3px 0 rgba(17, 43, 85, 0.2), 0 2px 1px -1px rgba(17, 43, 85, 0.12), 0 1px 1px 0 rgba(17, 43, 85, 0.14);
|
|
1498
|
+
--bb-shadow-blue-1600: 0 8px 10px -5px rgba(17, 43, 85, 0.2), 0 6px 30px 5px rgba(17, 43, 85, 0.12), 0 16px 24px 2px rgba(17, 43, 85, 0.14);
|
|
1499
|
+
--bb-shadow-blue-200: 0 1px 8px 0 rgba(17, 43, 85, 0.2), 0 3px 3px -2px rgba(17, 43, 85, 0.12), 0 3px 4px 0 rgba(17, 43, 85, 0.14);
|
|
1500
|
+
--bb-shadow-blue-2400: 0 11px 15px -7px rgba(17, 43, 85, 0.2), 0 9px 46px 8px rgba(17, 43, 85, 0.12), 0 24px 38px 3px rgba(17, 43, 85, 0.14);
|
|
1501
|
+
--bb-shadow-blue-25: 0 1px 1px 0 rgba(17, 43, 85, 0.05);
|
|
1502
|
+
--bb-shadow-blue-400: 0 2px 4px -1px rgba(17, 43, 85, 0.2), 0 1px 10px 0 rgba(17, 43, 85, 0.12), 0 4px 5px 0 rgba(17, 43, 85, 0.14);
|
|
1503
|
+
--bb-shadow-blue-50: 0 1px 1px 0 rgba(17, 43, 85, 0.12), 0 1.5px 1px -1px rgba(17, 43, 85, 0.12);
|
|
1504
|
+
--bb-shadow-blue-800: 0 5px 5px -3px rgba(17, 43, 85, 0.2), 0 3px 14px 2px rgba(17, 43, 85, 0.12), 0 8px 10px 1px rgba(17, 43, 85, 0.14);
|
|
1505
|
+
--bb-shadow-gray-100: 0 1px 3px 0 rgba(22, 26, 31, 0.2), 0 2px 1px -1px rgba(22, 26, 31, 0.12), 0 1px 1px 0 rgba(22, 26, 31, 0.14);
|
|
1506
|
+
--bb-shadow-gray-1600: 0 8px 10px -5px rgba(22, 26, 31, 0.2), 0 6px 30px 5px rgba(22, 26, 31, 0.12), 0 16px 24px 2px rgba(30, 34, 41, 0.14);
|
|
1507
|
+
--bb-shadow-gray-200: 0 1px 8px 0 rgba(22, 26, 31, 0.2), 0 3px 3px -2px rgba(22, 26, 31, 0.12), 0 3px 4px 0 rgba(22, 26, 31, 0.14);
|
|
1508
|
+
--bb-shadow-gray-2400: 0 11px 15px -7px rgba(22, 26, 31, 0.2), 0 9px 46px 8px rgba(22, 26, 31, 0.12), 0 24px 38px 3px rgba(22, 26, 31, 0.14);
|
|
1509
|
+
--bb-shadow-gray-25: 0 1px 1px 0 rgba(22, 26, 31, 0.05);
|
|
1510
|
+
--bb-shadow-gray-400: 0 2px 4px -1px rgba(22, 26, 31, 0.2), 0 1px 10px 0 rgba(22, 26, 31, 0.12), 0 4px 5px 0 rgba(22, 26, 31, 0.14);
|
|
1511
|
+
--bb-shadow-gray-50: 0 1px 1px 0 rgba(22, 26, 31, 0.12), 0 1.5px 1px -1px rgba(22, 26, 31, 0.12);
|
|
1512
|
+
--bb-shadow-gray-800: 0 5px 5px -3px rgba(22, 26, 31, 0.2), 0 3px 14px 2px rgba(22, 26, 31, 0.12), 0 8px 10px 1px rgba(22, 26, 31, 0.14);
|
|
1513
|
+
}
|
|
1514
|
+
|
|
1515
|
+
.sky-theme-modern.sky-theme-brand-base.sky-theme-brand-blackbaud {
|
|
1516
|
+
--sky-brand-name: var(--bb-brand-name);
|
|
1517
|
+
--sky-color-background-container-dimmed: var(--bb-color-blue-25);
|
|
1518
|
+
--sky-color-background-file_drop: var(--bb-color-blue-25);
|
|
1519
|
+
--sky-color-background-input-base: var(--bb-color-blue-25);
|
|
1520
|
+
--sky-color-background-page: var(--bb-color-slate-100);
|
|
1521
|
+
--sky-color-background-scrim: var(--bb-color-scrim);
|
|
1522
|
+
--sky-color-border-action-input-base: var(--bb-color-blue-250);
|
|
1523
|
+
--sky-color-border-action-secondary-base: var(--bb-color-blue-300);
|
|
1524
|
+
--sky-color-border-container-base: var(--bb-color-blue-200);
|
|
1525
|
+
--sky-color-border-divider: var(--bb-color-blue-300);
|
|
1526
|
+
--sky-color-border-elevation: var(--bb-color-blue-200);
|
|
1527
|
+
--sky-color-border-input-base: var(--bb-color-blue-250);
|
|
1528
|
+
--sky-color-border-separator-light: var(--bb-color-blue-250);
|
|
1529
|
+
--sky-color-border-separator-row: var(--bb-color-blue-250);
|
|
1530
|
+
--sky-color-border-switch-base: var(--bb-color-blue-500);
|
|
1531
|
+
--sky-color-category-blue: var(--bb-color-sky-300);
|
|
1532
|
+
--sky-color-category-green: var(--bb-color-green-300);
|
|
1533
|
+
--sky-color-category-orange: var(--bb-color-orange-400);
|
|
1534
|
+
--sky-color-category-purple: var(--bb-color-purple-300);
|
|
1535
|
+
--sky-color-category-red: var(--bb-color-red-300);
|
|
1536
|
+
--sky-color-category-teal: var(--bb-color-teal-400);
|
|
1537
|
+
--sky-color-category-yellow: var(--bb-color-yellow-300);
|
|
1538
|
+
--sky-color-icon-input-action: var(--bb-color-blue-600);
|
|
1539
|
+
--sky-color-illustration-fill-heavy: var(--bb-color-green-400);
|
|
1540
|
+
--sky-color-illustration-fill-soft: var(--bb-color-green-100);
|
|
1541
|
+
--sky-color-illustration-fill-softest: var(--bb-color-white);
|
|
1542
|
+
--sky-color-illustration-stroke: var(--bb-color-brand-trusted_blue);
|
|
1543
|
+
--sky-color-text-heading: var(--bb-color-blue-900);
|
|
1544
|
+
--sky-elevation-action-danger-active: var(--bb-shadow-blue-0);
|
|
1545
|
+
--sky-elevation-action-danger-disabled: var(--bb-shadow-blue-0);
|
|
1546
|
+
--sky-elevation-action-input-disabled: var(--bb-shadow-blue-0);
|
|
1547
|
+
--sky-elevation-action-primary-active: var(--bb-shadow-blue-0);
|
|
1548
|
+
--sky-elevation-action-primary-disabled: var(--bb-shadow-blue-0);
|
|
1549
|
+
--sky-elevation-action-secondary-active: var(--bb-shadow-blue-0);
|
|
1550
|
+
--sky-elevation-action-secondary-disabled: var(--bb-shadow-blue-0);
|
|
1551
|
+
--sky-elevation-action-tertiary-active: var(--bb-shadow-blue-0);
|
|
1552
|
+
--sky-elevation-action-tertiary-base: var(--bb-shadow-blue-0);
|
|
1553
|
+
--sky-elevation-action-tertiary-disabled: var(--bb-shadow-blue-0);
|
|
1554
|
+
--sky-elevation-action-tertiary-focus: var(--bb-shadow-blue-0);
|
|
1555
|
+
--sky-elevation-action-toolbar-active: var(--bb-shadow-blue-0);
|
|
1556
|
+
--sky-elevation-action-toolbar-base: var(--bb-shadow-blue-0);
|
|
1557
|
+
--sky-elevation-action-toolbar-disabled: var(--bb-shadow-blue-0);
|
|
1558
|
+
--sky-elevation-action-toolbar-focus: var(--bb-shadow-blue-0);
|
|
1559
|
+
--sky-elevation-input-disabled: var(--bb-shadow-blue-0);
|
|
1560
|
+
--sky-elevation-none: var(--bb-shadow-blue-0);
|
|
1561
|
+
--sky-image-logo-primary-src: var(--bb-image-logo-primary-src);
|
|
1562
|
+
--sky-opacity-wait: var(--bb-opacity-600);
|
|
1563
|
+
--sky-color-background-selected-switch-base: var(--bb-color-gradient-blue);
|
|
1564
|
+
--sky-elevation-action-danger-base: var(--bb-shadow-blue-50);
|
|
1565
|
+
--sky-elevation-action-danger-focus: var(--bb-shadow-blue-50);
|
|
1566
|
+
--sky-elevation-action-danger-hover: var(--bb-shadow-blue-50);
|
|
1567
|
+
--sky-elevation-action-input-active: var(--bb-shadow-blue-25);
|
|
1568
|
+
--sky-elevation-action-input-base: var(--bb-shadow-blue-25);
|
|
1569
|
+
--sky-elevation-action-input-focus: var(--bb-shadow-blue-25);
|
|
1570
|
+
--sky-elevation-action-input-hover: var(--bb-shadow-blue-25);
|
|
1571
|
+
--sky-elevation-action-primary-base: var(--bb-shadow-blue-50);
|
|
1572
|
+
--sky-elevation-action-primary-focus: var(--bb-shadow-blue-50);
|
|
1573
|
+
--sky-elevation-action-primary-hover: var(--bb-shadow-blue-50);
|
|
1574
|
+
--sky-elevation-action-secondary-base: var(--bb-shadow-blue-50);
|
|
1575
|
+
--sky-elevation-action-secondary-focus: var(--bb-shadow-blue-50);
|
|
1576
|
+
--sky-elevation-action-secondary-hover: var(--bb-shadow-blue-50);
|
|
1577
|
+
--sky-elevation-action-tertiary-hover: var(--bb-shadow-blue-50);
|
|
1578
|
+
--sky-elevation-action-toolbar-hover: var(--bb-shadow-blue-50);
|
|
1579
|
+
--sky-elevation-focus: var(--bb-shadow-blue-200);
|
|
1580
|
+
--sky-elevation-input-base: var(--bb-shadow-blue-25);
|
|
1581
|
+
--sky-elevation-overflow: var(--bb-shadow-blue-200);
|
|
1582
|
+
--sky-elevation-overlay-100: var(--bb-shadow-blue-400);
|
|
1583
|
+
--sky-elevation-overlay-200: var(--bb-shadow-blue-800);
|
|
1584
|
+
--sky-elevation-overlay-300: var(--bb-shadow-blue-1600);
|
|
1585
|
+
--sky-elevation-overlay-400: var(--bb-shadow-blue-2400);
|
|
1586
|
+
--sky-elevation-raised-100: var(--bb-shadow-blue-100);
|
|
1587
|
+
}
|
|
1588
|
+
|
|
1589
|
+
.sky-theme-modern.sky-theme-brand-base.sky-theme-brand-blackbaud.sky-theme-mode-dark {
|
|
1590
|
+
--sky-color-background-action-danger-active: var(--bb-color-red-600);
|
|
1591
|
+
--sky-color-background-action-danger-base: var(--bb-color-red-600);
|
|
1592
|
+
--sky-color-background-action-danger-disabled: var(--bb-color-gray-700);
|
|
1593
|
+
--sky-color-background-action-danger-focus: var(--bb-color-red-600);
|
|
1594
|
+
--sky-color-background-action-danger-hover: var(--bb-color-red-600);
|
|
1595
|
+
--sky-color-background-action-input-active: var(--bb-color-transparent);
|
|
1596
|
+
--sky-color-background-action-input-base: var(--bb-color-blue-900);
|
|
1597
|
+
--sky-color-background-action-input-disabled: var(--bb-color-gray-700);
|
|
1598
|
+
--sky-color-background-action-input-focus: var(--bb-color-transparent);
|
|
1599
|
+
--sky-color-background-action-input-hover: var(--bb-color-transparent);
|
|
1600
|
+
--sky-color-background-action-primary-active: var(--bb-color-sky-500);
|
|
1601
|
+
--sky-color-background-action-primary-base: var(--bb-color-sky-600);
|
|
1602
|
+
--sky-color-background-action-primary-disabled: var(--bb-color-gray-700);
|
|
1603
|
+
--sky-color-background-action-primary-focus: var(--bb-color-sky-600);
|
|
1604
|
+
--sky-color-background-action-primary-hover: var(--bb-color-sky-600);
|
|
1605
|
+
--sky-color-background-action-secondary-active: var(--bb-color-gray-600);
|
|
1606
|
+
--sky-color-background-action-secondary-base: var(--bb-color-gray-800);
|
|
1607
|
+
--sky-color-background-action-secondary-disabled: var(--bb-color-gray-700);
|
|
1608
|
+
--sky-color-background-action-secondary-focus: var(--bb-color-gray-700);
|
|
1609
|
+
--sky-color-background-action-secondary-hover: var(--bb-color-gray-700);
|
|
1610
|
+
--sky-color-background-action-tertiary-active: var(--bb-color-transparent);
|
|
1611
|
+
--sky-color-background-action-tertiary-base: var(--bb-color-transparent);
|
|
1612
|
+
--sky-color-background-action-tertiary-disabled: var(--bb-color-gray-700);
|
|
1613
|
+
--sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
|
|
1614
|
+
--sky-color-background-action-tertiary-hover: var(--bb-color-transparent);
|
|
1615
|
+
--sky-color-background-blocking: var(--bb-color-blocking);
|
|
1616
|
+
--sky-color-background-container-base: var(--bb-color-gray-1000);
|
|
1617
|
+
--sky-color-background-container-danger: var(--bb-color-red-800);
|
|
1618
|
+
--sky-color-background-container-dimmed: var(--bb-color-gray-1000);
|
|
1619
|
+
--sky-color-background-container-info: var(--bb-color-blue-800);
|
|
1620
|
+
--sky-color-background-container-menu: var(--bb-color-gray-900);
|
|
1621
|
+
--sky-color-background-container-success: var(--bb-color-green-900);
|
|
1622
|
+
--sky-color-background-container-warning: var(--bb-color-yellow-800);
|
|
1623
|
+
--sky-color-background-file_drop: var(--bb-color-gray-1000);
|
|
1624
|
+
--sky-color-background-icon_matte-action-heavy: var(--bb-color-blue-600);
|
|
1625
|
+
--sky-color-background-icon_matte-action-soft: var(--bb-color-blue-900);
|
|
1626
|
+
--sky-color-background-icon_matte-danger: var(--bb-color-red-600);
|
|
1627
|
+
--sky-color-background-icon_matte-success: var(--bb-color-green-700);
|
|
1628
|
+
--sky-color-background-icon_matte-warning: var(--bb-color-yellow-600);
|
|
1629
|
+
--sky-color-background-input-base: var(--bb-color-gray-900);
|
|
1630
|
+
--sky-color-background-input-disabled: var(--bb-color-gray-700);
|
|
1631
|
+
--sky-color-background-nav-active: var(--bb-color-transparent);
|
|
1632
|
+
--sky-color-background-nav-base: var(--bb-color-transparent);
|
|
1633
|
+
--sky-color-background-nav-disabled: var(--bb-color-gray-700);
|
|
1634
|
+
--sky-color-background-nav-focus: var(--bb-color-transparent);
|
|
1635
|
+
--sky-color-background-nav-hover: var(--bb-color-transparent);
|
|
1636
|
+
--sky-color-background-page: var(--bb-color-gray-1100);
|
|
1637
|
+
--sky-color-background-row-active: var(--bb-color-transparent);
|
|
1638
|
+
--sky-color-background-row-base: var(--bb-color-gray-1000);
|
|
1639
|
+
--sky-color-background-row-disabled: var(--bb-color-gray-700);
|
|
1640
|
+
--sky-color-background-row-focus: var(--bb-color-transparent);
|
|
1641
|
+
--sky-color-background-row-hover: var(--bb-color-transparent);
|
|
1642
|
+
--sky-color-background-scrim: var(--bb-color-scrim);
|
|
1643
|
+
--sky-color-background-selected-danger: var(--bb-color-red-900);
|
|
1644
|
+
--sky-color-background-selected-heavy: var(--bb-color-blue-600);
|
|
1645
|
+
--sky-color-background-selected-soft: var(--bb-color-blue-900);
|
|
1646
|
+
--sky-color-background-selected-success: var(--bb-color-green-900);
|
|
1647
|
+
--sky-color-background-selected-switch-base: var(--bb-color-blue-600);
|
|
1648
|
+
--sky-color-background-selected-switch-disabled: var(--bb-color-gray-700);
|
|
1649
|
+
--sky-color-background-selected-warning: var(--bb-color-yellow-900);
|
|
1650
|
+
--sky-color-background-tab-active: var(--bb-color-transparent);
|
|
1651
|
+
--sky-color-background-tab-base: var(--bb-color-transparent);
|
|
1652
|
+
--sky-color-background-tab-disabled: var(--bb-color-gray-700);
|
|
1653
|
+
--sky-color-background-tab-focus: var(--bb-color-transparent);
|
|
1654
|
+
--sky-color-background-tab-hover: var(--bb-color-transparent);
|
|
1655
|
+
--sky-color-background-tab-selected: var(--bb-color-transparent);
|
|
1656
|
+
--sky-color-background-tab-wizard-disabled: var(--bb-color-transparent);
|
|
1657
|
+
--sky-color-background-text_highlight: var(--bb-color-yellow-800);
|
|
1658
|
+
--sky-color-background-thumb-base: var(--bb-color-white);
|
|
1659
|
+
--sky-color-background-thumb-disabled: var(--bb-color-gray-600);
|
|
1660
|
+
--sky-color-background-thumbnail_matte: var(--bb-color-white);
|
|
1661
|
+
--sky-color-border-action-danger-active: var(--bb-color-red-200);
|
|
1662
|
+
--sky-color-border-action-danger-base: var(--bb-color-red-600);
|
|
1663
|
+
--sky-color-border-action-danger-disabled: var(--bb-color-gray-800);
|
|
1664
|
+
--sky-color-border-action-danger-focus: var(--bb-color-red-200);
|
|
1665
|
+
--sky-color-border-action-danger-hover: var(--bb-color-red-200);
|
|
1666
|
+
--sky-color-border-action-input-active: var(--bb-color-blue-600);
|
|
1667
|
+
--sky-color-border-action-input-base: var(--bb-color-blue-400);
|
|
1668
|
+
--sky-color-border-action-input-disabled: var(--bb-color-gray-800);
|
|
1669
|
+
--sky-color-border-action-input-focus: var(--bb-color-blue-600);
|
|
1670
|
+
--sky-color-border-action-input-hover: var(--bb-color-blue-600);
|
|
1671
|
+
--sky-color-border-action-primary-active: var(--bb-color-sky-500);
|
|
1672
|
+
--sky-color-border-action-primary-base: var(--bb-color-sky-600);
|
|
1673
|
+
--sky-color-border-action-primary-disabled: var(--bb-color-gray-800);
|
|
1674
|
+
--sky-color-border-action-primary-focus: var(--bb-color-sky-600);
|
|
1675
|
+
--sky-color-border-action-primary-hover: var(--bb-color-sky-600);
|
|
1676
|
+
--sky-color-border-action-secondary-active: var(--bb-color-sky-500);
|
|
1677
|
+
--sky-color-border-action-secondary-base: var(--bb-color-gray-700);
|
|
1678
|
+
--sky-color-border-action-secondary-disabled: var(--bb-color-gray-800);
|
|
1679
|
+
--sky-color-border-action-secondary-focus: var(--bb-color-sky-600);
|
|
1680
|
+
--sky-color-border-action-secondary-hover: var(--bb-color-sky-600);
|
|
1681
|
+
--sky-color-border-action-tertiary-active: var(--bb-color-sky-500);
|
|
1682
|
+
--sky-color-border-action-tertiary-base: var(--bb-color-transparent);
|
|
1683
|
+
--sky-color-border-action-tertiary-disabled: var(--bb-color-gray-800);
|
|
1684
|
+
--sky-color-border-action-tertiary-focus: var(--bb-color-sky-600);
|
|
1685
|
+
--sky-color-border-action-tertiary-hover: var(--bb-color-sky-600);
|
|
1686
|
+
--sky-color-border-column_divider: var(--bb-color-blue-400);
|
|
1687
|
+
--sky-color-border-container-base: var(--bb-color-blue-900);
|
|
1688
|
+
--sky-color-border-danger: var(--bb-color-red-400);
|
|
1689
|
+
--sky-color-border-divider: var(--bb-color-gray-800);
|
|
1690
|
+
--sky-color-border-elevation: var(--bb-color-gray-800);
|
|
1691
|
+
--sky-color-border-info: var(--bb-color-blue-400);
|
|
1692
|
+
--sky-color-border-input-active: var(--bb-color-blue-600);
|
|
1693
|
+
--sky-color-border-input-base: var(--bb-color-blue-200);
|
|
1694
|
+
--sky-color-border-input-disabled: var(--bb-color-gray-400);
|
|
1695
|
+
--sky-color-border-input-error: var(--bb-color-red-600);
|
|
1696
|
+
--sky-color-border-input-focus: var(--bb-color-blue-600);
|
|
1697
|
+
--sky-color-border-input-hover: var(--bb-color-blue-600);
|
|
1698
|
+
--sky-color-border-nav-active: var(--bb-color-sky-500);
|
|
1699
|
+
--sky-color-border-nav-base: var(--bb-color-transparent);
|
|
1700
|
+
--sky-color-border-nav-disabled: var(--bb-color-gray-800);
|
|
1701
|
+
--sky-color-border-nav-focus: var(--bb-color-sky-600);
|
|
1702
|
+
--sky-color-border-nav-hover: var(--bb-color-sky-600);
|
|
1703
|
+
--sky-color-border-progress_step: var(--bb-color-gray-600);
|
|
1704
|
+
--sky-color-border-selected: var(--bb-color-blue-400);
|
|
1705
|
+
--sky-color-border-selected_soft: var(--bb-color-blue-500);
|
|
1706
|
+
--sky-color-border-separator-dark: var(--bb-color-gray-800);
|
|
1707
|
+
--sky-color-border-separator-light: var(--bb-color-gray-700);
|
|
1708
|
+
--sky-color-border-separator-row: var(--bb-color-gray-800);
|
|
1709
|
+
--sky-color-border-success: var(--bb-color-green-400);
|
|
1710
|
+
--sky-color-border-switch-active: var(--bb-color-blue-600);
|
|
1711
|
+
--sky-color-border-switch-base: var(--bb-color-blue-500);
|
|
1712
|
+
--sky-color-border-switch-disabled: var(--bb-color-gray-400);
|
|
1713
|
+
--sky-color-border-switch-error: var(--bb-color-red-600);
|
|
1714
|
+
--sky-color-border-switch-focus: var(--bb-color-blue-600);
|
|
1715
|
+
--sky-color-border-switch-hover: var(--bb-color-blue-600);
|
|
1716
|
+
--sky-color-border-switch-selected-active: var(--bb-color-blue-900);
|
|
1717
|
+
--sky-color-border-switch-selected-base: var(--bb-color-transparent);
|
|
1718
|
+
--sky-color-border-switch-selected-disabled: var(--bb-color-gray-400);
|
|
1719
|
+
--sky-color-border-switch-selected-focus: var(--bb-color-blue-900);
|
|
1720
|
+
--sky-color-border-switch-selected-hover: var(--bb-color-blue-900);
|
|
1721
|
+
--sky-color-border-tab-active: var(--bb-color-sky-500);
|
|
1722
|
+
--sky-color-border-tab-base: var(--bb-color-transparent);
|
|
1723
|
+
--sky-color-border-tab-disabled: var(--bb-color-gray-800);
|
|
1724
|
+
--sky-color-border-tab-focus: var(--bb-color-sky-600);
|
|
1725
|
+
--sky-color-border-tab-hover: var(--bb-color-sky-600);
|
|
1726
|
+
--sky-color-border-tab-wizard-disabled: var(--bb-color-transparent);
|
|
1727
|
+
--sky-color-border-text_highlight: var(--bb-color-yellow-600);
|
|
1728
|
+
--sky-color-border-warning: var(--bb-color-yellow-400);
|
|
1729
|
+
--sky-color-icon-action: var(--bb-color-sky-600);
|
|
1730
|
+
--sky-color-icon-danger: var(--bb-color-red-400);
|
|
1731
|
+
--sky-color-icon-deemphasized: var(--bb-color-gray-300);
|
|
1732
|
+
--sky-color-icon-default: var(--bb-color-gray-25);
|
|
1733
|
+
--sky-color-icon-info: var(--bb-color-blue-600);
|
|
1734
|
+
--sky-color-icon-input-action: var(--bb-color-sky-600);
|
|
1735
|
+
--sky-color-icon-inverse: var(--bb-color-gray-1100);
|
|
1736
|
+
--sky-color-icon-selected: var(--bb-color-blue-600);
|
|
1737
|
+
--sky-color-icon-success: var(--bb-color-green-700);
|
|
1738
|
+
--sky-color-icon-warning: var(--bb-color-yellow-600);
|
|
1739
|
+
--sky-color-illustration-fill-heavy: var(--bb-color-green-700);
|
|
1740
|
+
--sky-color-illustration-fill-soft: var(--bb-color-green-900);
|
|
1741
|
+
--sky-color-illustration-fill-softest: var(--bb-color-gray-900);
|
|
1742
|
+
--sky-color-illustration-stroke: var(--bb-color-green-200);
|
|
1743
|
+
--sky-color-text-action: var(--bb-color-sky-600);
|
|
1744
|
+
--sky-color-text-action_contrast: var(--bb-color-blue-300);
|
|
1745
|
+
--sky-color-text-danger: var(--bb-color-red-400);
|
|
1746
|
+
--sky-color-text-deemphasized: var(--bb-color-gray-300);
|
|
1747
|
+
--sky-color-text-default: var(--bb-color-gray-25);
|
|
1748
|
+
--sky-color-text-heading: var(--bb-color-gray-50);
|
|
1749
|
+
--sky-color-text-inverse: var(--bb-color-gray-1100);
|
|
1750
|
+
--sky-color-text-selected: var(--bb-color-blue-400);
|
|
1751
|
+
--sky-elevation-none: var(--bb-shadow-blue-0);
|
|
1752
|
+
--sky-opacity-wait: var(--bb-opacity-600);
|
|
1753
|
+
--sky-elevation-focus: var(--bb-shadow-blue-200);
|
|
1754
|
+
--sky-elevation-overflow: var(--bb-shadow-blue-200);
|
|
1755
|
+
--sky-elevation-overlay-100: var(--bb-shadow-blue-400);
|
|
1756
|
+
--sky-elevation-overlay-200: var(--bb-shadow-blue-800);
|
|
1757
|
+
--sky-elevation-overlay-300: var(--bb-shadow-blue-1600);
|
|
1758
|
+
--sky-elevation-overlay-400: var(--bb-shadow-blue-2400);
|
|
1759
|
+
--sky-elevation-raised-100: var(--bb-shadow-blue-100);
|
|
1293
1760
|
}
|
|
1294
1761
|
|
|
1295
1762
|
@property --modern-image-logo-primary-src {
|
|
@@ -1305,6 +1772,8 @@
|
|
|
1305
1772
|
--modern-border-style-dotted: dotted;
|
|
1306
1773
|
--modern-border-style-solid: solid;
|
|
1307
1774
|
--modern-brand-name: "Blackbaud";
|
|
1775
|
+
--modern-color-bb_green: #6de8ab;
|
|
1776
|
+
--modern-color-bb_green_tint: #e7fbf1;
|
|
1308
1777
|
--modern-color-black: #000000;
|
|
1309
1778
|
--modern-color-blocking: rgba(255, 255, 255, 0.7);
|
|
1310
1779
|
--modern-color-blue-05: #ebfbff;
|
|
@@ -1337,6 +1806,7 @@
|
|
|
1337
1806
|
--modern-color-scrim: rgba(0, 0, 0, 0.5);
|
|
1338
1807
|
--modern-color-shadow_color: rgba(0, 0, 0, 0.3);
|
|
1339
1808
|
--modern-color-transparent: rgba(0, 0, 0, 0);
|
|
1809
|
+
--modern-color-trusted_blue: #004054;
|
|
1340
1810
|
--modern-color-white: #ffffff;
|
|
1341
1811
|
--modern-color-yellow-30: #ffd597;
|
|
1342
1812
|
--modern-color-yellow-40: #fcd085;
|
|
@@ -1367,7 +1837,7 @@
|
|
|
1367
1837
|
--modern-font-weight-light: 300;
|
|
1368
1838
|
--modern-font-weight-regular: 400;
|
|
1369
1839
|
--modern-font-weight-semibold: 600;
|
|
1370
|
-
--modern-image-logo-primary-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/
|
|
1840
|
+
--modern-image-logo-primary-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.0.0-alpha.0/assets/images/bb-logo.png");
|
|
1371
1841
|
--modern-letter_spacing-normal: normal;
|
|
1372
1842
|
--modern-line_height-110: 1.1;
|
|
1373
1843
|
--modern-line_height-115: 1.15;
|
|
@@ -1587,6 +2057,10 @@
|
|
|
1587
2057
|
--sky-color-icon-selected: var(--modern-color-blue-74);
|
|
1588
2058
|
--sky-color-icon-success: var(--modern-color-green-50);
|
|
1589
2059
|
--sky-color-icon-warning: var(--modern-color-yellow-50);
|
|
2060
|
+
--sky-color-illustration-fill-heavy: var(--modern-color-bb_green);
|
|
2061
|
+
--sky-color-illustration-fill-soft: var(--modern-color-bb_green_tint);
|
|
2062
|
+
--sky-color-illustration-fill-softest: var(--modern-color-white);
|
|
2063
|
+
--sky-color-illustration-stroke: var(--modern-color-trusted_blue);
|
|
1590
2064
|
--sky-color-text-action: var(--modern-color-blue-74);
|
|
1591
2065
|
--sky-color-text-action_contrast: var(--modern-color-blue-80);
|
|
1592
2066
|
--sky-color-text-danger: var(--modern-color-red-70);
|
|
@@ -1923,6 +2397,10 @@
|
|
|
1923
2397
|
--sky-comp-layout-tabset-tabs-space-inset-xs-left: var(--modern-space-md);
|
|
1924
2398
|
--sky-comp-layout-tabset-tabs-space-inset-xs-right: var(--modern-size-0);
|
|
1925
2399
|
--sky-comp-layout-tabset-tabs-space-inset-xs-top: var(--modern-size-0);
|
|
2400
|
+
--sky-comp-list_summary-space-inset-bottom: var(--modern-size-5);
|
|
2401
|
+
--sky-comp-list_summary-space-inset-left: var(--modern-size-10);
|
|
2402
|
+
--sky-comp-list_summary-space-inset-right: var(--modern-size-10);
|
|
2403
|
+
--sky-comp-list_summary-space-inset-top: var(--modern-size-5);
|
|
1926
2404
|
--sky-comp-modal-content-space-inset-bottom: var(--modern-space-xl);
|
|
1927
2405
|
--sky-comp-modal-content-space-inset-left: var(--modern-space-xl);
|
|
1928
2406
|
--sky-comp-modal-content-space-inset-right: var(--modern-space-xl);
|