@skyux/theme 12.27.0 → 12.28.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 (2) hide show
  1. package/css/themes/modern/styles.css +63 -82
  2. package/package.json +2 -2
package/css/themes/modern/styles.css CHANGED
@@ -17,8 +17,9 @@
17
17
  --bb-color-blocking: rgba(255, 255, 255, 0.7);
18
18
  --bb-color-blue-100: #eef3fc;
19
19
  --bb-color-blue-1000: #09152b;
20
- --bb-color-blue-200: #d0e1f7;
20
+ --bb-color-blue-200: #d5e1f7;
21
21
  --bb-color-blue-25: #fbfcfe;
22
+ --bb-color-blue-250: #bfd3f2;
22
23
  --bb-color-blue-300: #aac4ee;
23
24
  --bb-color-blue-400: #80a6e6;
24
25
  --bb-color-blue-50: #f4f8fd;
@@ -132,6 +133,7 @@
132
133
  --bb-font-size-400: 0.9375rem;
133
134
  --bb-font-size-500: 1.0625rem;
134
135
  --bb-font-size-600: 1.1875rem;
136
+ --bb-font-size-650: 1.3125rem;
135
137
  --bb-font-size-700: 1.5rem;
136
138
  --bb-font-size-800: 1.6875rem;
137
139
  --bb-font-style-italic-style: italic;
@@ -149,15 +151,16 @@
149
151
  --bb-font-weight-light: 300;
150
152
  --bb-font-weight-regular: 400;
151
153
  --bb-font-weight-semibold: 600;
152
- --bb-image-logo-primary-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/2.0.0-alpha.2/assets/images/bb-logo.png");
154
+ --bb-image-logo-primary-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/2.0.0-alpha.5/assets/images/bb-logo.png");
153
155
  --bb-letter_spacing-normal: normal;
154
156
  --bb-letter_spacing-wider: 0.16px;
155
157
  --bb-line_height-300: calc(18/13);
156
158
  --bb-line_height-400: calc(20/15);
157
159
  --bb-line_height-500: calc(24/17);
158
160
  --bb-line_height-600: calc(28/19);
161
+ --bb-line_height-650: calc(28/21);
159
162
  --bb-line_height-700: calc(32/24);
160
- --bb-line_height-800: calc(36/26);
163
+ --bb-line_height-800: calc(36/27);
161
164
  --bb-opacity-600: .6;
162
165
  --bb-shadow-blue-0: 0 0 0 0 rgba(0, 0, 0, 0);
163
166
  --bb-size-0: 0rem;
@@ -267,11 +270,6 @@
267
270
  --sky-color-background-action-tertiary-disabled: var(--bb-color-gray-700);
268
271
  --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
269
272
  --sky-color-background-action-tertiary-hover: var(--bb-color-transparent);
270
- --sky-color-background-action-toolbar-active: var(--bb-color-transparent);
271
- --sky-color-background-action-toolbar-base: var(--bb-color-transparent);
272
- --sky-color-background-action-toolbar-disabled: var(--bb-color-gray-700);
273
- --sky-color-background-action-toolbar-focus: var(--bb-color-transparent);
274
- --sky-color-background-action-toolbar-hover: var(--bb-color-transparent);
275
273
  --sky-color-background-blocking: var(--bb-color-blocking);
276
274
  --sky-color-background-container-base: var(--bb-color-gray-1000);
277
275
  --sky-color-background-container-danger: var(--bb-color-red-800);
@@ -287,17 +285,17 @@
287
285
  --sky-color-background-icon_matte-warning: var(--bb-color-yellow-600);
288
286
  --sky-color-background-input-base: var(--bb-color-gray-900);
289
287
  --sky-color-background-input-disabled: var(--bb-color-gray-700);
290
- --sky-color-background-list-active: var(--bb-color-transparent);
291
- --sky-color-background-list-base: var(--bb-color-transparent);
292
- --sky-color-background-list-disabled: var(--bb-color-gray-50);
293
- --sky-color-background-list-focus: var(--bb-color-transparent);
294
- --sky-color-background-list-hover: var(--bb-color-transparent);
295
288
  --sky-color-background-nav-active: var(--bb-color-transparent);
296
289
  --sky-color-background-nav-base: var(--bb-color-transparent);
297
290
  --sky-color-background-nav-disabled: var(--bb-color-gray-50);
298
291
  --sky-color-background-nav-focus: var(--bb-color-transparent);
299
292
  --sky-color-background-nav-hover: var(--bb-color-transparent);
300
293
  --sky-color-background-page: var(--bb-color-gray-1100);
294
+ --sky-color-background-row-active: var(--bb-color-transparent);
295
+ --sky-color-background-row-base: var(--bb-color-gray-1000);
296
+ --sky-color-background-row-disabled: var(--bb-color-gray-50);
297
+ --sky-color-background-row-focus: var(--bb-color-transparent);
298
+ --sky-color-background-row-hover: var(--bb-color-transparent);
301
299
  --sky-color-background-scrim: var(--bb-color-scrim);
302
300
  --sky-color-background-selected-danger: var(--bb-color-red-900);
303
301
  --sky-color-background-selected-heavy: var(--bb-color-blue-600);
@@ -309,9 +307,10 @@
309
307
  --sky-color-background-tab-disabled: var(--bb-color-gray-700);
310
308
  --sky-color-background-tab-focus: var(--bb-color-transparent);
311
309
  --sky-color-background-tab-hover: var(--bb-color-transparent);
310
+ --sky-color-background-tab-selected: var(--bb-color-transparent);
312
311
  --sky-color-background-text_highlight: var(--bb-color-yellow-800);
313
312
  --sky-color-background-thumb-base: var(--bb-color-white);
314
- --sky-color-background-thumb-disabled: var(--bb-color-gray-50);
313
+ --sky-color-background-thumb-disabled: var(--bb-color-gray-600);
315
314
  --sky-color-background-thumbnail_matte: var(--bb-color-white);
316
315
  --sky-color-border-action-danger-active: var(--bb-color-red-200);
317
316
  --sky-color-border-action-danger-base: var(--bb-color-red-600);
@@ -338,11 +337,6 @@
338
337
  --sky-color-border-action-tertiary-disabled: var(--bb-color-gray-800);
339
338
  --sky-color-border-action-tertiary-focus: var(--bb-color-sky-600);
340
339
  --sky-color-border-action-tertiary-hover: var(--bb-color-sky-600);
341
- --sky-color-border-action-toolbar-active: var(--bb-color-sky-500);
342
- --sky-color-border-action-toolbar-base: var(--bb-color-transparent);
343
- --sky-color-border-action-toolbar-disabled: var(--bb-color-gray-800);
344
- --sky-color-border-action-toolbar-focus: var(--bb-color-sky-600);
345
- --sky-color-border-action-toolbar-hover: var(--bb-color-sky-600);
346
340
  --sky-color-border-column_divider: var(--bb-color-blue-400);
347
341
  --sky-color-border-container-base: var(--bb-color-blue-900);
348
342
  --sky-color-border-danger: var(--bb-color-red-400);
@@ -441,11 +435,6 @@
441
435
  --sky-color-background-action-tertiary-disabled: var(--bb-color-gray-50);
442
436
  --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
443
437
  --sky-color-background-action-tertiary-hover: var(--bb-color-blue-50);
444
- --sky-color-background-action-toolbar-active: var(--bb-color-blue-100);
445
- --sky-color-background-action-toolbar-base: var(--bb-color-white);
446
- --sky-color-background-action-toolbar-disabled: var(--bb-color-gray-50);
447
- --sky-color-background-action-toolbar-focus: var(--bb-color-white);
448
- --sky-color-background-action-toolbar-hover: var(--bb-color-blue-50);
449
438
  --sky-color-background-blocking: var(--bb-color-blocking);
450
439
  --sky-color-background-container-base: var(--bb-color-white);
451
440
  --sky-color-background-container-danger: var(--bb-color-red-300);
@@ -461,17 +450,17 @@
461
450
  --sky-color-background-icon_matte-warning: var(--bb-color-yellow-600);
462
451
  --sky-color-background-input-base: var(--bb-color-blue-25);
463
452
  --sky-color-background-input-disabled: var(--bb-color-gray-50);
464
- --sky-color-background-list-active: var(--bb-color-blue-100);
465
- --sky-color-background-list-base: var(--bb-color-transparent);
466
- --sky-color-background-list-disabled: var(--bb-color-gray-50);
467
- --sky-color-background-list-focus: var(--bb-color-transparent);
468
- --sky-color-background-list-hover: var(--bb-color-blue-50);
469
453
  --sky-color-background-nav-active: var(--bb-color-blue-100);
470
454
  --sky-color-background-nav-base: var(--bb-color-transparent);
471
455
  --sky-color-background-nav-disabled: var(--bb-color-gray-50);
472
456
  --sky-color-background-nav-focus: var(--bb-color-transparent);
473
457
  --sky-color-background-nav-hover: var(--bb-color-blue-50);
474
458
  --sky-color-background-page: var(--bb-color-slate-100);
459
+ --sky-color-background-row-active: var(--bb-color-blue-100);
460
+ --sky-color-background-row-base: var(--bb-color-white);
461
+ --sky-color-background-row-disabled: var(--bb-color-gray-50);
462
+ --sky-color-background-row-focus: var(--bb-color-transparent);
463
+ --sky-color-background-row-hover: var(--bb-color-blue-50);
475
464
  --sky-color-background-scrim: var(--bb-color-scrim);
476
465
  --sky-color-background-selected-danger: var(--bb-color-red-300);
477
466
  --sky-color-background-selected-heavy: var(--bb-color-blue-600);
@@ -483,9 +472,10 @@
483
472
  --sky-color-background-tab-disabled: var(--bb-color-gray-50);
484
473
  --sky-color-background-tab-focus: var(--bb-color-transparent);
485
474
  --sky-color-background-tab-hover: var(--bb-color-transparent);
475
+ --sky-color-background-tab-selected: var(--bb-color-transparent);
486
476
  --sky-color-background-text_highlight: var(--bb-color-yellow-400);
487
477
  --sky-color-background-thumb-base: var(--bb-color-white);
488
- --sky-color-background-thumb-disabled: var(--bb-color-gray-50);
478
+ --sky-color-background-thumb-disabled: var(--bb-color-gray-25);
489
479
  --sky-color-background-thumbnail_matte: var(--bb-color-white);
490
480
  --sky-color-border-action-danger-active: var(--bb-color-red-1000);
491
481
  --sky-color-border-action-danger-base: var(--bb-color-red-600);
@@ -493,7 +483,7 @@
493
483
  --sky-color-border-action-danger-focus: var(--bb-color-red-1000);
494
484
  --sky-color-border-action-danger-hover: var(--bb-color-red-1000);
495
485
  --sky-color-border-action-input-active: var(--bb-color-blue-600);
496
- --sky-color-border-action-input-base: var(--bb-color-blue-200);
486
+ --sky-color-border-action-input-base: var(--bb-color-blue-250);
497
487
  --sky-color-border-action-input-disabled: var(--bb-color-gray-200);
498
488
  --sky-color-border-action-input-focus: var(--bb-color-blue-600);
499
489
  --sky-color-border-action-input-hover: var(--bb-color-blue-600);
@@ -512,11 +502,6 @@
512
502
  --sky-color-border-action-tertiary-disabled: var(--bb-color-gray-200);
513
503
  --sky-color-border-action-tertiary-focus: var(--bb-color-blue-600);
514
504
  --sky-color-border-action-tertiary-hover: var(--bb-color-blue-600);
515
- --sky-color-border-action-toolbar-active: var(--bb-color-blue-600);
516
- --sky-color-border-action-toolbar-base: var(--bb-color-blue-300);
517
- --sky-color-border-action-toolbar-disabled: var(--bb-color-gray-200);
518
- --sky-color-border-action-toolbar-focus: var(--bb-color-blue-600);
519
- --sky-color-border-action-toolbar-hover: var(--bb-color-blue-600);
520
505
  --sky-color-border-column_divider: var(--bb-color-blue-600);
521
506
  --sky-color-border-container-base: var(--bb-color-blue-200);
522
507
  --sky-color-border-danger: var(--bb-color-red-600);
@@ -524,7 +509,7 @@
524
509
  --sky-color-border-elevation: var(--bb-color-blue-200);
525
510
  --sky-color-border-info: var(--bb-color-blue-600);
526
511
  --sky-color-border-input-active: var(--bb-color-blue-600);
527
- --sky-color-border-input-base: var(--bb-color-blue-200);
512
+ --sky-color-border-input-base: var(--bb-color-blue-250);
528
513
  --sky-color-border-input-disabled: var(--bb-color-gray-200);
529
514
  --sky-color-border-input-error: var(--bb-color-red-600);
530
515
  --sky-color-border-input-focus: var(--bb-color-blue-600);
@@ -537,8 +522,8 @@
537
522
  --sky-color-border-progress_step: var(--bb-color-gray-400);
538
523
  --sky-color-border-selected: var(--bb-color-blue-600);
539
524
  --sky-color-border-selected_soft: var(--bb-color-blue-300);
540
- --sky-color-border-separator-light: var(--bb-color-blue-200);
541
- --sky-color-border-separator-row: var(--bb-color-blue-200);
525
+ --sky-color-border-separator-light: var(--bb-color-blue-250);
526
+ --sky-color-border-separator-row: var(--bb-color-blue-250);
542
527
  --sky-color-border-success: var(--bb-color-green-700);
543
528
  --sky-color-border-switch-active: var(--bb-color-blue-600);
544
529
  --sky-color-border-switch-base: var(--bb-color-blue-500);
@@ -848,20 +833,20 @@
848
833
  --sky-comp-page-content-blocks-space-inset-xs-right: var(--bb-size-fluid-50);
849
834
  --sky-comp-page-content-blocks-space-inset-xs-top: var(--bb-size-fluid-50);
850
835
  --sky-comp-page-content-fit-space-inset-sm-bottom: var(--bb-size-0);
851
- --sky-comp-page-content-fit-space-inset-sm-left: var(--bb-size-fluid-150);
852
- --sky-comp-page-content-fit-space-inset-sm-right: var(--bb-size-fluid-150);
836
+ --sky-comp-page-content-fit-space-inset-sm-left: var(--bb-size-0);
837
+ --sky-comp-page-content-fit-space-inset-sm-right: var(--bb-size-0);
853
838
  --sky-comp-page-content-fit-space-inset-sm-top: var(--bb-size-0);
854
839
  --sky-comp-page-content-fit-space-inset-xs-bottom: var(--bb-size-0);
855
- --sky-comp-page-content-fit-space-inset-xs-left: var(--bb-size-fluid-50);
856
- --sky-comp-page-content-fit-space-inset-xs-right: var(--bb-size-fluid-50);
840
+ --sky-comp-page-content-fit-space-inset-xs-left: var(--bb-size-0);
841
+ --sky-comp-page-content-fit-space-inset-xs-right: var(--bb-size-0);
857
842
  --sky-comp-page-content-fit-space-inset-xs-top: var(--bb-size-0);
858
843
  --sky-comp-page-content-list-space-inset-sm-bottom: var(--bb-size-0);
859
- --sky-comp-page-content-list-space-inset-sm-left: var(--bb-size-fluid-150);
860
- --sky-comp-page-content-list-space-inset-sm-right: var(--bb-size-fluid-150);
844
+ --sky-comp-page-content-list-space-inset-sm-left: var(--bb-size-0);
845
+ --sky-comp-page-content-list-space-inset-sm-right: var(--bb-size-0);
861
846
  --sky-comp-page-content-list-space-inset-sm-top: var(--bb-size-0);
862
847
  --sky-comp-page-content-list-space-inset-xs-bottom: var(--bb-size-0);
863
- --sky-comp-page-content-list-space-inset-xs-left: var(--bb-size-fluid-50);
864
- --sky-comp-page-content-list-space-inset-xs-right: var(--bb-size-fluid-50);
848
+ --sky-comp-page-content-list-space-inset-xs-left: var(--bb-size-0);
849
+ --sky-comp-page-content-list-space-inset-xs-right: var(--bb-size-0);
865
850
  --sky-comp-page-content-list-space-inset-xs-top: var(--bb-size-0);
866
851
  --sky-comp-page-content-tabs-space-inset-sm-bottom: var(--bb-size-0);
867
852
  --sky-comp-page-content-tabs-space-inset-sm-left: var(--bb-size-0);
@@ -1106,9 +1091,9 @@
1106
1091
  --sky-font-line_height-body-m: var(--bb-line_height-400);
1107
1092
  --sky-font-line_height-body-s: var(--bb-line_height-300);
1108
1093
  --sky-font-line_height-display-1: var(--bb-line_height-700);
1109
- --sky-font-line_height-display-2: var(--bb-line_height-600);
1110
- --sky-font-line_height-display-3: var(--bb-line_height-500);
1111
- --sky-font-line_height-display-4: var(--bb-line_height-400);
1094
+ --sky-font-line_height-display-2: var(--bb-line_height-650);
1095
+ --sky-font-line_height-display-3: var(--bb-line_height-600);
1096
+ --sky-font-line_height-display-4: var(--bb-line_height-500);
1112
1097
  --sky-font-line_height-heading-1: var(--bb-line_height-800);
1113
1098
  --sky-font-line_height-heading-2: var(--bb-line_height-600);
1114
1099
  --sky-font-line_height-heading-3: var(--bb-line_height-500);
@@ -1122,9 +1107,9 @@
1122
1107
  --sky-font-size-body-m: var(--bb-font-size-400);
1123
1108
  --sky-font-size-body-s: var(--bb-font-size-300);
1124
1109
  --sky-font-size-display-1: var(--bb-font-size-700);
1125
- --sky-font-size-display-2: var(--bb-font-size-600);
1126
- --sky-font-size-display-3: var(--bb-font-size-500);
1127
- --sky-font-size-display-4: var(--bb-font-size-400);
1110
+ --sky-font-size-display-2: var(--bb-font-size-650);
1111
+ --sky-font-size-display-3: var(--bb-font-size-600);
1112
+ --sky-font-size-display-4: var(--bb-font-size-500);
1128
1113
  --sky-font-size-heading-1: var(--bb-font-size-800);
1129
1114
  --sky-font-size-heading-2: var(--bb-font-size-600);
1130
1115
  --sky-font-size-heading-3: var(--bb-font-size-500);
@@ -1137,12 +1122,12 @@
1137
1122
  --sky-font-style-body-l: var(--bb-font-style-regular);
1138
1123
  --sky-font-style-body-m: var(--bb-font-style-regular);
1139
1124
  --sky-font-style-body-s: var(--bb-font-style-regular);
1140
- --sky-font-style-display-1: var(--bb-font-style-regular);
1141
- --sky-font-style-display-2: var(--bb-font-style-regular);
1142
- --sky-font-style-display-3: var(--bb-font-style-regular);
1143
- --sky-font-style-display-4: var(--bb-font-style-regular);
1125
+ --sky-font-style-display-1: var(--bb-font-style-semibold);
1126
+ --sky-font-style-display-2: var(--bb-font-style-semibold);
1127
+ --sky-font-style-display-3: var(--bb-font-style-semibold);
1128
+ --sky-font-style-display-4: var(--bb-font-style-semibold);
1144
1129
  --sky-font-style-emphasized: var(--bb-font-style-semibold);
1145
- --sky-font-style-heading-1: var(--bb-font-style-semibold);
1130
+ --sky-font-style-heading-1: var(--bb-font-style-regular);
1146
1131
  --sky-font-style-heading-2: var(--bb-font-style-semibold);
1147
1132
  --sky-font-style-heading-3: var(--bb-font-style-semibold);
1148
1133
  --sky-font-style-heading-4: var(--bb-font-style-semibold);
@@ -1151,8 +1136,8 @@
1151
1136
  --sky-font-weight-body-l: var(--bb-font-weight-regular);
1152
1137
  --sky-font-weight-body-m: var(--bb-font-weight-regular);
1153
1138
  --sky-font-weight-body-s: var(--bb-font-weight-semibold);
1154
- --sky-font-weight-display-1: var(--bb-font-weight-regular);
1155
- --sky-font-weight-display-2: var(--bb-font-weight-regular);
1139
+ --sky-font-weight-display-1: var(--bb-font-weight-semibold);
1140
+ --sky-font-weight-display-2: var(--bb-font-weight-semibold);
1156
1141
  --sky-font-weight-display-3: var(--bb-font-weight-semibold);
1157
1142
  --sky-font-weight-display-4: var(--bb-font-weight-semibold);
1158
1143
  --sky-font-weight-emphasized: var(--bb-font-weight-semibold);
@@ -1383,7 +1368,7 @@
1383
1368
  --modern-font-weight-light: 300;
1384
1369
  --modern-font-weight-regular: 400;
1385
1370
  --modern-font-weight-semibold: 600;
1386
- --modern-image-logo-primary-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/2.0.0-alpha.2/assets/images/bb-logo.png");
1371
+ --modern-image-logo-primary-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/2.0.0-alpha.5/assets/images/bb-logo.png");
1387
1372
  --modern-letter_spacing-normal: normal;
1388
1373
  --modern-line_height-110: 1.1;
1389
1374
  --modern-line_height-115: 1.15;
@@ -1473,11 +1458,6 @@
1473
1458
  --sky-color-background-action-tertiary-disabled: var(--modern-color-gray-07);
1474
1459
  --sky-color-background-action-tertiary-focus: var(--modern-color-transparent);
1475
1460
  --sky-color-background-action-tertiary-hover: var(--modern-color-transparent);
1476
- --sky-color-background-action-toolbar-active: var(--modern-color-transparent);
1477
- --sky-color-background-action-toolbar-base: var(--modern-color-transparent);
1478
- --sky-color-background-action-toolbar-disabled: var(--modern-color-gray-07);
1479
- --sky-color-background-action-toolbar-focus: var(--modern-color-transparent);
1480
- --sky-color-background-action-toolbar-hover: var(--modern-color-transparent);
1481
1461
  --sky-color-background-blocking: var(--modern-color-blocking);
1482
1462
  --sky-color-background-container-base: var(--modern-color-white);
1483
1463
  --sky-color-background-container-danger: var(--modern-color-red-30);
@@ -1493,17 +1473,17 @@
1493
1473
  --sky-color-background-icon_matte-warning: var(--modern-color-yellow-50);
1494
1474
  --sky-color-background-input-base: var(--modern-color-transparent);
1495
1475
  --sky-color-background-input-disabled: var(--modern-color-gray-07);
1496
- --sky-color-background-list-active: var(--modern-color-transparent);
1497
- --sky-color-background-list-base: var(--modern-color-transparent);
1498
- --sky-color-background-list-disabled: var(--modern-color-gray-07);
1499
- --sky-color-background-list-focus: var(--modern-color-transparent);
1500
- --sky-color-background-list-hover: var(--modern-color-transparent);
1501
1476
  --sky-color-background-nav-active: var(--modern-color-transparent);
1502
1477
  --sky-color-background-nav-base: var(--modern-color-transparent);
1503
1478
  --sky-color-background-nav-disabled: var(--modern-color-gray-07);
1504
1479
  --sky-color-background-nav-focus: var(--modern-color-transparent);
1505
1480
  --sky-color-background-nav-hover: var(--modern-color-transparent);
1506
1481
  --sky-color-background-page: var(--modern-color-gray-005);
1482
+ --sky-color-background-row-active: var(--modern-color-transparent);
1483
+ --sky-color-background-row-base: var(--modern-color-transparent);
1484
+ --sky-color-background-row-disabled: var(--modern-color-gray-07);
1485
+ --sky-color-background-row-focus: var(--modern-color-transparent);
1486
+ --sky-color-background-row-hover: var(--modern-color-transparent);
1507
1487
  --sky-color-background-scrim: var(--modern-color-scrim);
1508
1488
  --sky-color-background-selected-danger: var(--modern-color-red-30);
1509
1489
  --sky-color-background-selected-heavy: var(--modern-color-blue-05);
@@ -1515,6 +1495,7 @@
1515
1495
  --sky-color-background-tab-disabled: var(--modern-color-transparent);
1516
1496
  --sky-color-background-tab-focus: var(--modern-color-transparent);
1517
1497
  --sky-color-background-tab-hover: var(--modern-color-transparent);
1498
+ --sky-color-background-tab-selected: var(--modern-color-transparent);
1518
1499
  --sky-color-background-text_highlight: var(--modern-color-yellow-40);
1519
1500
  --sky-color-background-thumb-base: var(--modern-color-white);
1520
1501
  --sky-color-background-thumb-disabled: var(--modern-color-gray-07);
@@ -1544,11 +1525,6 @@
1544
1525
  --sky-color-border-action-tertiary-disabled: var(--modern-color-gray-15);
1545
1526
  --sky-color-border-action-tertiary-focus: var(--modern-color-blue-74);
1546
1527
  --sky-color-border-action-tertiary-hover: var(--modern-color-blue-74);
1547
- --sky-color-border-action-toolbar-active: var(--modern-color-blue-74);
1548
- --sky-color-border-action-toolbar-base: var(--modern-color-transparent);
1549
- --sky-color-border-action-toolbar-disabled: var(--modern-color-gray-15);
1550
- --sky-color-border-action-toolbar-focus: var(--modern-color-blue-74);
1551
- --sky-color-border-action-toolbar-hover: var(--modern-color-blue-74);
1552
1528
  --sky-color-border-column_divider: var(--modern-color-gray-70);
1553
1529
  --sky-color-border-container-base: var(--modern-color-gray-15);
1554
1530
  --sky-color-border-danger: var(--modern-color-red-50);
@@ -2483,6 +2459,7 @@
2483
2459
  --sky-border-width-selected-s
2484
2460
  )
2485
2461
  );
2462
+ --sky-override-tab-selected-color: var(--sky-color-text-default);
2486
2463
  --sky-override-tab-selected-focus-color: var(--sky-color-text-default);
2487
2464
  --sky-override-tab-selected-focus-background-color: var(
2488
2465
  --sky-color-background-tab-focus
@@ -3028,18 +3005,22 @@
3028
3005
  }
3029
3006
  .sky-theme-modern .sky-btn-tab:focus-visible {
3030
3007
  background-color: var(--sky-color-background-tab-focus);
3031
- color: var(--sky-color-text-default);
3032
3008
  outline: none;
3033
3009
  }
3010
+ .sky-theme-modern .sky-btn-tab:focus-visible:not(.sky-btn-tab-selected) {
3011
+ color: var(--sky-color-text-default);
3012
+ }
3034
3013
  .sky-theme-modern .sky-btn-tab:focus-visible.sky-btn-tab-selected {
3035
3014
  background-color: var(--sky-override-tab-selected-focus-background-color, var(--sky-color-background-selected-soft));
3036
3015
  }
3037
3016
  .sky-theme-modern .sky-btn-tab:focus-visible:not(:active) {
3038
- color: var(--sky-color-text-default);
3039
3017
  outline: solid var(--sky-border-width-selected-m) var(--sky-color-border-tab-focus);
3040
3018
  outline-offset: calc(var(--sky-border-width-selected-m) * -1);
3041
3019
  box-shadow: var(--sky-override-tab-box-shadow-focus-elevation, none);
3042
3020
  }
3021
+ .sky-theme-modern .sky-btn-tab:focus-visible:not(:active):not(.sky-btn-tab-selected) {
3022
+ color: var(--sky-color-text-default);
3023
+ }
3043
3024
  .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) {
3044
3025
  color: var(--sky-color-text-default);
3045
3026
  background-color: var(--sky-color-background-tab-active);
@@ -3065,8 +3046,8 @@
3065
3046
  font-size: var(--sky-font-size-body-m);
3066
3047
  }
3067
3048
  .sky-theme-modern .sky-btn-tab-selected:not(.sky-btn-tab-disabled) {
3068
- background-color: var(--sky-override-tab-selected-background-color, var(--sky-color-background-selected-soft));
3069
- color: var(--sky-color-text-default);
3049
+ background-color: var(--sky-override-tab-selected-background-color, var(--sky-color-background-tab-selected));
3050
+ color: var(--sky-override-tab-selected-color, var(--sky-color-text-selected));
3070
3051
  box-shadow: none;
3071
3052
  }
3072
3053
  .sky-theme-modern .sky-btn-tab-selected:not(.sky-btn-tab-disabled):not(:active) {
@@ -3074,8 +3055,8 @@
3074
3055
  padding-bottom: calc(var(--sky-comp-tab-horizontal-space-inset-bottom) - var(--sky-override-tab-selected-border-bottom-size, var(--sky-border-width-selected-m)));
3075
3056
  }
3076
3057
  .sky-theme-modern .sky-btn-tab-selected:not(.sky-btn-tab-disabled):hover:not(.sky-btn-tab-disabled) {
3077
- background-color: var(--sky-override-tab-selected-background-color, var(--sky-color-background-selected-soft));
3078
- color: var(--sky-color-text-default);
3058
+ background-color: var(--sky-override-tab-selected-background-color, var(--sky-color-background-tab-selected));
3059
+ color: var(--sky-override-tab-selected-color, var(--sky-color-text-selected));
3079
3060
  }
3080
3061
  .sky-theme-modern .sky-btn-tab-selected:not(.sky-btn-tab-disabled) .sky-btn-tab-close,
3081
3062
  .sky-theme-modern .sky-btn-tab-selected:not(.sky-btn-tab-disabled) .sky-tab-header-count {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skyux/theme",
3
- "version": "12.27.0",
3
+ "version": "12.28.1",
4
4
  "author": "Blackbaud, Inc.",
5
5
  "keywords": [
6
6
  "blackbaud",
@@ -20,7 +20,7 @@
20
20
  "@angular/core": "^19.2.14"
21
21
  },
22
22
  "dependencies": {
23
- "@blackbaud/skyux-design-tokens": "2.0.0-alpha.2",
23
+ "@blackbaud/skyux-design-tokens": "2.0.0-alpha.5",
24
24
  "@skyux/icons": "9.0.0",
25
25
  "fontfaceobserver": "2.3.0",
26
26
  "tslib": "^2.8.1"