@skyux/theme 12.28.0 → 12.29.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/css/themes/modern/styles.css +67 -76
  2. package/package.json +2 -2
package/css/themes/modern/styles.css CHANGED
@@ -12,7 +12,7 @@
12
12
  --bb-border-radius-round: 50%;
13
13
  --bb-border-style-dotted: dotted;
14
14
  --bb-border-style-solid: solid;
15
- --bb-brand-name: Blackbaud;
15
+ --bb-brand-name: "Blackbaud";
16
16
  --bb-color-black: #000000;
17
17
  --bb-color-blocking: rgba(255, 255, 255, 0.7);
18
18
  --bb-color-blue-100: #eef3fc;
@@ -133,6 +133,7 @@
133
133
  --bb-font-size-400: 0.9375rem;
134
134
  --bb-font-size-500: 1.0625rem;
135
135
  --bb-font-size-600: 1.1875rem;
136
+ --bb-font-size-650: 1.3125rem;
136
137
  --bb-font-size-700: 1.5rem;
137
138
  --bb-font-size-800: 1.6875rem;
138
139
  --bb-font-style-italic-style: italic;
@@ -150,15 +151,16 @@
150
151
  --bb-font-weight-light: 300;
151
152
  --bb-font-weight-regular: 400;
152
153
  --bb-font-weight-semibold: 600;
153
- --bb-image-logo-primary-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/2.0.0-alpha.3/assets/images/bb-logo.png");
154
+ --bb-image-logo-primary-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/2.0.0-alpha.8/assets/images/bb-logo.png");
154
155
  --bb-letter_spacing-normal: normal;
155
156
  --bb-letter_spacing-wider: 0.16px;
156
157
  --bb-line_height-300: calc(18/13);
157
158
  --bb-line_height-400: calc(20/15);
158
159
  --bb-line_height-500: calc(24/17);
159
160
  --bb-line_height-600: calc(28/19);
161
+ --bb-line_height-650: calc(28/21);
160
162
  --bb-line_height-700: calc(32/24);
161
- --bb-line_height-800: calc(36/26);
163
+ --bb-line_height-800: calc(36/27);
162
164
  --bb-opacity-600: .6;
163
165
  --bb-shadow-blue-0: 0 0 0 0 rgba(0, 0, 0, 0);
164
166
  --bb-size-0: 0rem;
@@ -268,14 +270,10 @@
268
270
  --sky-color-background-action-tertiary-disabled: var(--bb-color-gray-700);
269
271
  --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
270
272
  --sky-color-background-action-tertiary-hover: var(--bb-color-transparent);
271
- --sky-color-background-action-toolbar-active: var(--bb-color-transparent);
272
- --sky-color-background-action-toolbar-base: var(--bb-color-transparent);
273
- --sky-color-background-action-toolbar-disabled: var(--bb-color-gray-700);
274
- --sky-color-background-action-toolbar-focus: var(--bb-color-transparent);
275
- --sky-color-background-action-toolbar-hover: var(--bb-color-transparent);
276
273
  --sky-color-background-blocking: var(--bb-color-blocking);
277
274
  --sky-color-background-container-base: var(--bb-color-gray-1000);
278
275
  --sky-color-background-container-danger: var(--bb-color-red-800);
276
+ --sky-color-background-container-dimmed: var(--bb-color-gray-1000);
279
277
  --sky-color-background-container-info: var(--bb-color-blue-800);
280
278
  --sky-color-background-container-menu: var(--bb-color-gray-900);
281
279
  --sky-color-background-container-success: var(--bb-color-green-900);
@@ -288,17 +286,17 @@
288
286
  --sky-color-background-icon_matte-warning: var(--bb-color-yellow-600);
289
287
  --sky-color-background-input-base: var(--bb-color-gray-900);
290
288
  --sky-color-background-input-disabled: var(--bb-color-gray-700);
291
- --sky-color-background-list-active: var(--bb-color-transparent);
292
- --sky-color-background-list-base: var(--bb-color-transparent);
293
- --sky-color-background-list-disabled: var(--bb-color-gray-50);
294
- --sky-color-background-list-focus: var(--bb-color-transparent);
295
- --sky-color-background-list-hover: var(--bb-color-transparent);
296
289
  --sky-color-background-nav-active: var(--bb-color-transparent);
297
290
  --sky-color-background-nav-base: var(--bb-color-transparent);
298
291
  --sky-color-background-nav-disabled: var(--bb-color-gray-50);
299
292
  --sky-color-background-nav-focus: var(--bb-color-transparent);
300
293
  --sky-color-background-nav-hover: var(--bb-color-transparent);
301
294
  --sky-color-background-page: var(--bb-color-gray-1100);
295
+ --sky-color-background-row-active: var(--bb-color-transparent);
296
+ --sky-color-background-row-base: var(--bb-color-gray-1000);
297
+ --sky-color-background-row-disabled: var(--bb-color-gray-50);
298
+ --sky-color-background-row-focus: var(--bb-color-transparent);
299
+ --sky-color-background-row-hover: var(--bb-color-transparent);
302
300
  --sky-color-background-scrim: var(--bb-color-scrim);
303
301
  --sky-color-background-selected-danger: var(--bb-color-red-900);
304
302
  --sky-color-background-selected-heavy: var(--bb-color-blue-600);
@@ -310,9 +308,10 @@
310
308
  --sky-color-background-tab-disabled: var(--bb-color-gray-700);
311
309
  --sky-color-background-tab-focus: var(--bb-color-transparent);
312
310
  --sky-color-background-tab-hover: var(--bb-color-transparent);
311
+ --sky-color-background-tab-selected: var(--bb-color-transparent);
313
312
  --sky-color-background-text_highlight: var(--bb-color-yellow-800);
314
313
  --sky-color-background-thumb-base: var(--bb-color-white);
315
- --sky-color-background-thumb-disabled: var(--bb-color-gray-50);
314
+ --sky-color-background-thumb-disabled: var(--bb-color-gray-600);
316
315
  --sky-color-background-thumbnail_matte: var(--bb-color-white);
317
316
  --sky-color-border-action-danger-active: var(--bb-color-red-200);
318
317
  --sky-color-border-action-danger-base: var(--bb-color-red-600);
@@ -339,11 +338,6 @@
339
338
  --sky-color-border-action-tertiary-disabled: var(--bb-color-gray-800);
340
339
  --sky-color-border-action-tertiary-focus: var(--bb-color-sky-600);
341
340
  --sky-color-border-action-tertiary-hover: var(--bb-color-sky-600);
342
- --sky-color-border-action-toolbar-active: var(--bb-color-sky-500);
343
- --sky-color-border-action-toolbar-base: var(--bb-color-transparent);
344
- --sky-color-border-action-toolbar-disabled: var(--bb-color-gray-800);
345
- --sky-color-border-action-toolbar-focus: var(--bb-color-sky-600);
346
- --sky-color-border-action-toolbar-hover: var(--bb-color-sky-600);
347
341
  --sky-color-border-column_divider: var(--bb-color-blue-400);
348
342
  --sky-color-border-container-base: var(--bb-color-blue-900);
349
343
  --sky-color-border-danger: var(--bb-color-red-400);
@@ -442,14 +436,10 @@
442
436
  --sky-color-background-action-tertiary-disabled: var(--bb-color-gray-50);
443
437
  --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
444
438
  --sky-color-background-action-tertiary-hover: var(--bb-color-blue-50);
445
- --sky-color-background-action-toolbar-active: var(--bb-color-blue-100);
446
- --sky-color-background-action-toolbar-base: var(--bb-color-white);
447
- --sky-color-background-action-toolbar-disabled: var(--bb-color-gray-50);
448
- --sky-color-background-action-toolbar-focus: var(--bb-color-white);
449
- --sky-color-background-action-toolbar-hover: var(--bb-color-blue-50);
450
439
  --sky-color-background-blocking: var(--bb-color-blocking);
451
440
  --sky-color-background-container-base: var(--bb-color-white);
452
441
  --sky-color-background-container-danger: var(--bb-color-red-300);
442
+ --sky-color-background-container-dimmed: var(--bb-color-blue-25);
453
443
  --sky-color-background-container-info: var(--bb-color-blue-200);
454
444
  --sky-color-background-container-menu: var(--bb-color-white);
455
445
  --sky-color-background-container-success: var(--bb-color-green-300);
@@ -462,17 +452,17 @@
462
452
  --sky-color-background-icon_matte-warning: var(--bb-color-yellow-600);
463
453
  --sky-color-background-input-base: var(--bb-color-blue-25);
464
454
  --sky-color-background-input-disabled: var(--bb-color-gray-50);
465
- --sky-color-background-list-active: var(--bb-color-blue-100);
466
- --sky-color-background-list-base: var(--bb-color-transparent);
467
- --sky-color-background-list-disabled: var(--bb-color-gray-50);
468
- --sky-color-background-list-focus: var(--bb-color-transparent);
469
- --sky-color-background-list-hover: var(--bb-color-blue-50);
470
455
  --sky-color-background-nav-active: var(--bb-color-blue-100);
471
456
  --sky-color-background-nav-base: var(--bb-color-transparent);
472
457
  --sky-color-background-nav-disabled: var(--bb-color-gray-50);
473
458
  --sky-color-background-nav-focus: var(--bb-color-transparent);
474
459
  --sky-color-background-nav-hover: var(--bb-color-blue-50);
475
460
  --sky-color-background-page: var(--bb-color-slate-100);
461
+ --sky-color-background-row-active: var(--bb-color-blue-100);
462
+ --sky-color-background-row-base: var(--bb-color-white);
463
+ --sky-color-background-row-disabled: var(--bb-color-gray-50);
464
+ --sky-color-background-row-focus: var(--bb-color-transparent);
465
+ --sky-color-background-row-hover: var(--bb-color-blue-50);
476
466
  --sky-color-background-scrim: var(--bb-color-scrim);
477
467
  --sky-color-background-selected-danger: var(--bb-color-red-300);
478
468
  --sky-color-background-selected-heavy: var(--bb-color-blue-600);
@@ -484,9 +474,10 @@
484
474
  --sky-color-background-tab-disabled: var(--bb-color-gray-50);
485
475
  --sky-color-background-tab-focus: var(--bb-color-transparent);
486
476
  --sky-color-background-tab-hover: var(--bb-color-transparent);
477
+ --sky-color-background-tab-selected: var(--bb-color-transparent);
487
478
  --sky-color-background-text_highlight: var(--bb-color-yellow-400);
488
479
  --sky-color-background-thumb-base: var(--bb-color-white);
489
- --sky-color-background-thumb-disabled: var(--bb-color-gray-50);
480
+ --sky-color-background-thumb-disabled: var(--bb-color-gray-25);
490
481
  --sky-color-background-thumbnail_matte: var(--bb-color-white);
491
482
  --sky-color-border-action-danger-active: var(--bb-color-red-1000);
492
483
  --sky-color-border-action-danger-base: var(--bb-color-red-600);
@@ -513,11 +504,6 @@
513
504
  --sky-color-border-action-tertiary-disabled: var(--bb-color-gray-200);
514
505
  --sky-color-border-action-tertiary-focus: var(--bb-color-blue-600);
515
506
  --sky-color-border-action-tertiary-hover: var(--bb-color-blue-600);
516
- --sky-color-border-action-toolbar-active: var(--bb-color-blue-600);
517
- --sky-color-border-action-toolbar-base: var(--bb-color-blue-300);
518
- --sky-color-border-action-toolbar-disabled: var(--bb-color-gray-200);
519
- --sky-color-border-action-toolbar-focus: var(--bb-color-blue-600);
520
- --sky-color-border-action-toolbar-hover: var(--bb-color-blue-600);
521
507
  --sky-color-border-column_divider: var(--bb-color-blue-600);
522
508
  --sky-color-border-container-base: var(--bb-color-blue-200);
523
509
  --sky-color-border-danger: var(--bb-color-red-600);
@@ -752,6 +738,10 @@
752
738
  --sky-comp-card-small-header-space-inset-left: var(--bb-size-fluid-100);
753
739
  --sky-comp-card-small-header-space-inset-right: var(--bb-size-fluid-100);
754
740
  --sky-comp-card-small-header-space-inset-top: var(--bb-size-fluid-100);
741
+ --sky-comp-card-space-offset-bottom: var(--bb-size-fluid-50);
742
+ --sky-comp-card-space-offset-left: var(--bb-size-0);
743
+ --sky-comp-card-space-offset-right: var(--bb-size-fluid-50);
744
+ --sky-comp-card-space-offset-top: var(--bb-size-0);
755
745
  --sky-comp-colorpicker-content-space-inset-bottom: var(--bb-size-fluid-50);
756
746
  --sky-comp-colorpicker-content-space-inset-left: var(--bb-size-fluid-75);
757
747
  --sky-comp-colorpicker-content-space-inset-right: var(--bb-size-fluid-75);
@@ -1107,9 +1097,9 @@
1107
1097
  --sky-font-line_height-body-m: var(--bb-line_height-400);
1108
1098
  --sky-font-line_height-body-s: var(--bb-line_height-300);
1109
1099
  --sky-font-line_height-display-1: var(--bb-line_height-700);
1110
- --sky-font-line_height-display-2: var(--bb-line_height-600);
1111
- --sky-font-line_height-display-3: var(--bb-line_height-500);
1112
- --sky-font-line_height-display-4: var(--bb-line_height-400);
1100
+ --sky-font-line_height-display-2: var(--bb-line_height-650);
1101
+ --sky-font-line_height-display-3: var(--bb-line_height-600);
1102
+ --sky-font-line_height-display-4: var(--bb-line_height-500);
1113
1103
  --sky-font-line_height-heading-1: var(--bb-line_height-800);
1114
1104
  --sky-font-line_height-heading-2: var(--bb-line_height-600);
1115
1105
  --sky-font-line_height-heading-3: var(--bb-line_height-500);
@@ -1123,9 +1113,9 @@
1123
1113
  --sky-font-size-body-m: var(--bb-font-size-400);
1124
1114
  --sky-font-size-body-s: var(--bb-font-size-300);
1125
1115
  --sky-font-size-display-1: var(--bb-font-size-700);
1126
- --sky-font-size-display-2: var(--bb-font-size-600);
1127
- --sky-font-size-display-3: var(--bb-font-size-500);
1128
- --sky-font-size-display-4: var(--bb-font-size-400);
1116
+ --sky-font-size-display-2: var(--bb-font-size-650);
1117
+ --sky-font-size-display-3: var(--bb-font-size-600);
1118
+ --sky-font-size-display-4: var(--bb-font-size-500);
1129
1119
  --sky-font-size-heading-1: var(--bb-font-size-800);
1130
1120
  --sky-font-size-heading-2: var(--bb-font-size-600);
1131
1121
  --sky-font-size-heading-3: var(--bb-font-size-500);
@@ -1138,10 +1128,10 @@
1138
1128
  --sky-font-style-body-l: var(--bb-font-style-regular);
1139
1129
  --sky-font-style-body-m: var(--bb-font-style-regular);
1140
1130
  --sky-font-style-body-s: var(--bb-font-style-regular);
1141
- --sky-font-style-display-1: var(--bb-font-style-regular);
1142
- --sky-font-style-display-2: var(--bb-font-style-regular);
1143
- --sky-font-style-display-3: var(--bb-font-style-regular);
1144
- --sky-font-style-display-4: var(--bb-font-style-regular);
1131
+ --sky-font-style-display-1: var(--bb-font-style-semibold);
1132
+ --sky-font-style-display-2: var(--bb-font-style-semibold);
1133
+ --sky-font-style-display-3: var(--bb-font-style-semibold);
1134
+ --sky-font-style-display-4: var(--bb-font-style-semibold);
1145
1135
  --sky-font-style-emphasized: var(--bb-font-style-semibold);
1146
1136
  --sky-font-style-heading-1: var(--bb-font-style-regular);
1147
1137
  --sky-font-style-heading-2: var(--bb-font-style-semibold);
@@ -1151,9 +1141,9 @@
1151
1141
  --sky-font-style-input-label: var(--bb-font-style-regular);
1152
1142
  --sky-font-weight-body-l: var(--bb-font-weight-regular);
1153
1143
  --sky-font-weight-body-m: var(--bb-font-weight-regular);
1154
- --sky-font-weight-body-s: var(--bb-font-weight-semibold);
1155
- --sky-font-weight-display-1: var(--bb-font-weight-regular);
1156
- --sky-font-weight-display-2: var(--bb-font-weight-regular);
1144
+ --sky-font-weight-body-s: var(--bb-font-weight-regular);
1145
+ --sky-font-weight-display-1: var(--bb-font-weight-semibold);
1146
+ --sky-font-weight-display-2: var(--bb-font-weight-semibold);
1157
1147
  --sky-font-weight-display-3: var(--bb-font-weight-semibold);
1158
1148
  --sky-font-weight-display-4: var(--bb-font-weight-semibold);
1159
1149
  --sky-font-weight-emphasized: var(--bb-font-weight-semibold);
@@ -1321,7 +1311,7 @@
1321
1311
  --modern-border-radius-round: 50%;
1322
1312
  --modern-border-style-dotted: dotted;
1323
1313
  --modern-border-style-solid: solid;
1324
- --modern-brand-name: Blackbaud;
1314
+ --modern-brand-name: "Blackbaud";
1325
1315
  --modern-color-black: #000000;
1326
1316
  --modern-color-blocking: rgba(255, 255, 255, 0.7);
1327
1317
  --modern-color-blue-05: #ebfbff;
@@ -1384,7 +1374,7 @@
1384
1374
  --modern-font-weight-light: 300;
1385
1375
  --modern-font-weight-regular: 400;
1386
1376
  --modern-font-weight-semibold: 600;
1387
- --modern-image-logo-primary-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/2.0.0-alpha.3/assets/images/bb-logo.png");
1377
+ --modern-image-logo-primary-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/2.0.0-alpha.8/assets/images/bb-logo.png");
1388
1378
  --modern-letter_spacing-normal: normal;
1389
1379
  --modern-line_height-110: 1.1;
1390
1380
  --modern-line_height-115: 1.15;
@@ -1474,14 +1464,10 @@
1474
1464
  --sky-color-background-action-tertiary-disabled: var(--modern-color-gray-07);
1475
1465
  --sky-color-background-action-tertiary-focus: var(--modern-color-transparent);
1476
1466
  --sky-color-background-action-tertiary-hover: var(--modern-color-transparent);
1477
- --sky-color-background-action-toolbar-active: var(--modern-color-transparent);
1478
- --sky-color-background-action-toolbar-base: var(--modern-color-transparent);
1479
- --sky-color-background-action-toolbar-disabled: var(--modern-color-gray-07);
1480
- --sky-color-background-action-toolbar-focus: var(--modern-color-transparent);
1481
- --sky-color-background-action-toolbar-hover: var(--modern-color-transparent);
1482
1467
  --sky-color-background-blocking: var(--modern-color-blocking);
1483
1468
  --sky-color-background-container-base: var(--modern-color-white);
1484
1469
  --sky-color-background-container-danger: var(--modern-color-red-30);
1470
+ --sky-color-background-container-dimmed: var(--modern-color-transparent);
1485
1471
  --sky-color-background-container-info: var(--modern-color-blue-10);
1486
1472
  --sky-color-background-container-menu: var(--modern-color-white);
1487
1473
  --sky-color-background-container-success: var(--modern-color-green-30);
@@ -1494,17 +1480,17 @@
1494
1480
  --sky-color-background-icon_matte-warning: var(--modern-color-yellow-50);
1495
1481
  --sky-color-background-input-base: var(--modern-color-transparent);
1496
1482
  --sky-color-background-input-disabled: var(--modern-color-gray-07);
1497
- --sky-color-background-list-active: var(--modern-color-transparent);
1498
- --sky-color-background-list-base: var(--modern-color-transparent);
1499
- --sky-color-background-list-disabled: var(--modern-color-gray-07);
1500
- --sky-color-background-list-focus: var(--modern-color-transparent);
1501
- --sky-color-background-list-hover: var(--modern-color-transparent);
1502
1483
  --sky-color-background-nav-active: var(--modern-color-transparent);
1503
1484
  --sky-color-background-nav-base: var(--modern-color-transparent);
1504
1485
  --sky-color-background-nav-disabled: var(--modern-color-gray-07);
1505
1486
  --sky-color-background-nav-focus: var(--modern-color-transparent);
1506
1487
  --sky-color-background-nav-hover: var(--modern-color-transparent);
1507
1488
  --sky-color-background-page: var(--modern-color-gray-005);
1489
+ --sky-color-background-row-active: var(--modern-color-transparent);
1490
+ --sky-color-background-row-base: var(--modern-color-transparent);
1491
+ --sky-color-background-row-disabled: var(--modern-color-gray-07);
1492
+ --sky-color-background-row-focus: var(--modern-color-transparent);
1493
+ --sky-color-background-row-hover: var(--modern-color-transparent);
1508
1494
  --sky-color-background-scrim: var(--modern-color-scrim);
1509
1495
  --sky-color-background-selected-danger: var(--modern-color-red-30);
1510
1496
  --sky-color-background-selected-heavy: var(--modern-color-blue-05);
@@ -1516,6 +1502,7 @@
1516
1502
  --sky-color-background-tab-disabled: var(--modern-color-transparent);
1517
1503
  --sky-color-background-tab-focus: var(--modern-color-transparent);
1518
1504
  --sky-color-background-tab-hover: var(--modern-color-transparent);
1505
+ --sky-color-background-tab-selected: var(--modern-color-transparent);
1519
1506
  --sky-color-background-text_highlight: var(--modern-color-yellow-40);
1520
1507
  --sky-color-background-thumb-base: var(--modern-color-white);
1521
1508
  --sky-color-background-thumb-disabled: var(--modern-color-gray-07);
@@ -1545,11 +1532,6 @@
1545
1532
  --sky-color-border-action-tertiary-disabled: var(--modern-color-gray-15);
1546
1533
  --sky-color-border-action-tertiary-focus: var(--modern-color-blue-74);
1547
1534
  --sky-color-border-action-tertiary-hover: var(--modern-color-blue-74);
1548
- --sky-color-border-action-toolbar-active: var(--modern-color-blue-74);
1549
- --sky-color-border-action-toolbar-base: var(--modern-color-transparent);
1550
- --sky-color-border-action-toolbar-disabled: var(--modern-color-gray-15);
1551
- --sky-color-border-action-toolbar-focus: var(--modern-color-blue-74);
1552
- --sky-color-border-action-toolbar-hover: var(--modern-color-blue-74);
1553
1535
  --sky-color-border-column_divider: var(--modern-color-gray-70);
1554
1536
  --sky-color-border-container-base: var(--modern-color-gray-15);
1555
1537
  --sky-color-border-danger: var(--modern-color-red-50);
@@ -1784,6 +1766,10 @@
1784
1766
  --sky-comp-card-small-header-space-inset-left: var(--modern-size-15);
1785
1767
  --sky-comp-card-small-header-space-inset-right: var(--modern-size-15);
1786
1768
  --sky-comp-card-small-header-space-inset-top: var(--modern-size-15);
1769
+ --sky-comp-card-space-offset-bottom: var(--modern-size-10);
1770
+ --sky-comp-card-space-offset-left: var(--modern-size-0);
1771
+ --sky-comp-card-space-offset-right: var(--modern-size-10);
1772
+ --sky-comp-card-space-offset-top: var(--modern-size-0);
1787
1773
  --sky-comp-colorpicker-content-space-inset-bottom: var(--modern-size-15);
1788
1774
  --sky-comp-colorpicker-content-space-inset-left: var(--modern-size-30);
1789
1775
  --sky-comp-colorpicker-content-space-inset-right: var(--modern-size-30);
@@ -2174,7 +2160,7 @@
2174
2160
  --sky-font-style-display-2: var(--modern-font-style-regular);
2175
2161
  --sky-font-style-display-3: var(--modern-font-style-regular);
2176
2162
  --sky-font-style-display-4: var(--modern-font-style-bold);
2177
- --sky-font-style-emphasized: var(--modern-font-style-semibold);
2163
+ --sky-font-style-emphasized: var(--modern-font-style-bold);
2178
2164
  --sky-font-style-heading-1: var(--modern-font-style-light);
2179
2165
  --sky-font-style-heading-2: var(--modern-font-style-regular);
2180
2166
  --sky-font-style-heading-3: var(--modern-font-style-regular);
@@ -2484,6 +2470,7 @@
2484
2470
  --sky-border-width-selected-s
2485
2471
  )
2486
2472
  );
2473
+ --sky-override-tab-selected-color: var(--sky-color-text-default);
2487
2474
  --sky-override-tab-selected-focus-color: var(--sky-color-text-default);
2488
2475
  --sky-override-tab-selected-focus-background-color: var(
2489
2476
  --sky-color-background-tab-focus
@@ -2944,21 +2931,21 @@
2944
2931
  box-shadow: var(--sky-override-button-tertiary-disabled-box-shadow, inset 0 0 0 var(--sky-border-width-action-disabled) var(--sky-color-border-action-tertiary-disabled), var(--sky-comp-override-toolbar-button-elevation-disabled, var(--sky-elevation-action-tertiary-disabled)));
2945
2932
  }
2946
2933
  .sky-theme-modern .sky-btn-link-inline {
2947
- background-color: var(--sky-color-background-action-tertiary-base);
2934
+ background-color: transparent;
2948
2935
  border-radius: var(--sky-override-button-link-inline-border-radius, var(--sky-border-radius-s));
2949
2936
  padding: var(--sky-space-inset-balanced-none);
2950
2937
  color: var(--sky-color-text-action);
2951
2938
  font-size: var(--sky-override-button-link-inline-font-size, inherit);
2952
2939
  }
2953
2940
  .sky-theme-modern .sky-btn-link-inline:focus-visible:not(:active) {
2954
- background-color: var(--sky-color-background-action-tertiary-focus);
2941
+ background-color: transparent;
2955
2942
  box-shadow: var(--sky-override-button-link-inline-box-shadow-focus, 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus));
2956
2943
  }
2957
2944
  .sky-theme-modern .sky-btn-link-inline:active {
2958
- background-color: var(--sky-color-background-action-tertiary-active);
2945
+ background-color: transparent;
2959
2946
  }
2960
2947
  .sky-theme-modern .sky-btn-link-inline:hover {
2961
- background-color: var(--sky-color-background-action-tertiary-hover);
2948
+ background-color: transparent;
2962
2949
  }
2963
2950
  .sky-theme-modern .sky-btn-link-inline:hover, .sky-theme-modern .sky-btn-link-inline:active {
2964
2951
  color: var(--sky-override-button-link-inline-color-hover-active, var(--sky-color-text-action));
@@ -3029,18 +3016,22 @@
3029
3016
  }
3030
3017
  .sky-theme-modern .sky-btn-tab:focus-visible {
3031
3018
  background-color: var(--sky-color-background-tab-focus);
3032
- color: var(--sky-color-text-default);
3033
3019
  outline: none;
3034
3020
  }
3021
+ .sky-theme-modern .sky-btn-tab:focus-visible:not(.sky-btn-tab-selected) {
3022
+ color: var(--sky-color-text-default);
3023
+ }
3035
3024
  .sky-theme-modern .sky-btn-tab:focus-visible.sky-btn-tab-selected {
3036
3025
  background-color: var(--sky-override-tab-selected-focus-background-color, var(--sky-color-background-selected-soft));
3037
3026
  }
3038
3027
  .sky-theme-modern .sky-btn-tab:focus-visible:not(:active) {
3039
- color: var(--sky-color-text-default);
3040
3028
  outline: solid var(--sky-border-width-selected-m) var(--sky-color-border-tab-focus);
3041
3029
  outline-offset: calc(var(--sky-border-width-selected-m) * -1);
3042
3030
  box-shadow: var(--sky-override-tab-box-shadow-focus-elevation, none);
3043
3031
  }
3032
+ .sky-theme-modern .sky-btn-tab:focus-visible:not(:active):not(.sky-btn-tab-selected) {
3033
+ color: var(--sky-color-text-default);
3034
+ }
3044
3035
  .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) {
3045
3036
  color: var(--sky-color-text-default);
3046
3037
  background-color: var(--sky-color-background-tab-active);
@@ -3066,8 +3057,8 @@
3066
3057
  font-size: var(--sky-font-size-body-m);
3067
3058
  }
3068
3059
  .sky-theme-modern .sky-btn-tab-selected:not(.sky-btn-tab-disabled) {
3069
- background-color: var(--sky-override-tab-selected-background-color, var(--sky-color-background-selected-soft));
3070
- color: var(--sky-color-text-default);
3060
+ background-color: var(--sky-override-tab-selected-background-color, var(--sky-color-background-tab-selected));
3061
+ color: var(--sky-override-tab-selected-color, var(--sky-color-text-selected));
3071
3062
  box-shadow: none;
3072
3063
  }
3073
3064
  .sky-theme-modern .sky-btn-tab-selected:not(.sky-btn-tab-disabled):not(:active) {
@@ -3075,8 +3066,8 @@
3075
3066
  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)));
3076
3067
  }
3077
3068
  .sky-theme-modern .sky-btn-tab-selected:not(.sky-btn-tab-disabled):hover:not(.sky-btn-tab-disabled) {
3078
- background-color: var(--sky-override-tab-selected-background-color, var(--sky-color-background-selected-soft));
3079
- color: var(--sky-color-text-default);
3069
+ background-color: var(--sky-override-tab-selected-background-color, var(--sky-color-background-tab-selected));
3070
+ color: var(--sky-override-tab-selected-color, var(--sky-color-text-selected));
3080
3071
  }
3081
3072
  .sky-theme-modern .sky-btn-tab-selected:not(.sky-btn-tab-disabled) .sky-btn-tab-close,
3082
3073
  .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.28.0",
3
+ "version": "12.29.0",
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.3",
23
+ "@blackbaud/skyux-design-tokens": "2.0.0-alpha.8",
24
24
  "@skyux/icons": "9.0.0",
25
25
  "fontfaceobserver": "2.3.0",
26
26
  "tslib": "^2.8.1"