@skyux/theme 11.17.0 → 11.19.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 (5) hide show
  1. package/css/sky.css +3 -0
  2. package/css/themes/modern/styles.css +169 -79
  3. package/documentation.json +102 -102
  4. package/fesm2022/skyux-theme.mjs.map +1 -1
  5. package/package.json +2 -2
package/css/sky.css CHANGED
@@ -1573,6 +1573,9 @@ body:not(.sky-theme-modern) {
1573
1573
  display: inline-flex;
1574
1574
  position: relative;
1575
1575
  }
1576
+ .sky-switch:not(.sky-theme-modern *):has(~ .sky-control-help-container) .sky-switch-label {
1577
+ margin-right: 0;
1578
+ }
1576
1579
  .sky-switch:not(.sky-theme-modern *).sky-switch-disabled {
1577
1580
  cursor: default;
1578
1581
  }
package/css/themes/modern/styles.css CHANGED
@@ -55,6 +55,7 @@
55
55
  --modern-size-64: 64px;
56
56
  --modern-size-48: 48px;
57
57
  --modern-size-44: 44px;
58
+ --modern-size-40: 40px;
58
59
  --modern-size-32: 32px;
59
60
  --modern-size-30: 30px;
60
61
  --modern-size-26: 26px;
@@ -84,11 +85,14 @@
84
85
  --modern-space-none: 0rem;
85
86
  --modern-color-sky_blue-40: #40c7f4;
86
87
  --modern-color-sky_blue-20: #bfecfb;
88
+ --modern-color-yellow-80: #c57c00;
87
89
  --modern-color-yellow-50: #fbb034;
90
+ --modern-color-yellow-40: #fcd085;
88
91
  --modern-color-yellow-30: #ffd597;
89
92
  --modern-color-green-50: #72bf44;
90
93
  --modern-color-green-30: #b7da9b;
91
94
  --modern-color-blue-05: #ebfbff;
95
+ --modern-color-blue-80: #0d5ead;
92
96
  --modern-color-blue-74: #1870b8;
93
97
  --modern-color-blue-50: #00b4f1;
94
98
  --modern-color-blue-30: #81d4f7;
@@ -129,6 +133,11 @@
129
133
  --sky-color-border-input-active: var(--modern-color-blue-74);
130
134
  --sky-color-border-input-hover: var(--modern-color-blue-74);
131
135
  --sky-color-border-input-base: var(--modern-color-gray-50);
136
+ --sky-color-border-action-input-disabled: var(--modern-color-gray-50);
137
+ --sky-color-border-action-input-focus: var(--modern-color-blue-74);
138
+ --sky-color-border-action-input-active: var(--modern-color-blue-74);
139
+ --sky-color-border-action-input-hover: var(--modern-color-blue-74);
140
+ --sky-color-border-action-input-base: var(--modern-color-gray-50);
132
141
  --sky-color-border-action-danger-disabled: var(--modern-color-gray-15);
133
142
  --sky-color-border-action-danger-focus: var(--modern-color-red-30);
134
143
  --sky-color-border-action-danger-active: var(--modern-color-red-30);
@@ -150,12 +159,14 @@
150
159
  --sky-color-border-action-primary-hover: var(--modern-color-blue-10);
151
160
  --sky-color-border-action-primary-base: var(--modern-color-blue-74);
152
161
  --sky-color-border-container-base: var(--modern-color-gray-15);
162
+ --sky-color-border-text_highlight: var(--modern-color-yellow-80);
153
163
  --sky-color-border-elevation: var(--modern-color-gray-15);
154
164
  --sky-color-border-divider: var(--modern-color-gray-15);
155
165
  --sky-color-border-info: var(--modern-color-blue-50);
156
166
  --sky-color-border-success: var(--modern-color-green-50);
157
167
  --sky-color-border-warning: var(--modern-color-yellow-50);
158
168
  --sky-color-border-danger: var(--modern-color-red-50);
169
+ --sky-color-border-selected_soft: var(--modern-color-blue-30);
159
170
  --sky-color-border-selected: var(--modern-color-blue-74);
160
171
  --sky-color-background-list-disabled: var(--modern-color-gray-07);
161
172
  --sky-color-background-list-focus: var(--modern-color-transparent);
@@ -176,6 +187,11 @@
176
187
  --sky-color-background-selected-danger: var(--modern-color-red-30);
177
188
  --sky-color-background-selected-soft: var(--modern-color-blue-05);
178
189
  --sky-color-background-selected-heavy: var(--modern-color-blue-05);
190
+ --sky-color-background-action-input-disabled: var(--modern-color-gray-07);
191
+ --sky-color-background-action-input-focus: var(--modern-color-transparent);
192
+ --sky-color-background-action-input-active: var(--modern-color-transparent);
193
+ --sky-color-background-action-input-hover: var(--modern-color-transparent);
194
+ --sky-color-background-action-input-base: var(--modern-color-transparent);
179
195
  --sky-color-background-action-danger-disabled: var(--modern-color-gray-07);
180
196
  --sky-color-background-action-danger-focus: var(--modern-color-red-70);
181
197
  --sky-color-background-action-danger-active: var(--modern-color-red-70);
@@ -202,6 +218,7 @@
202
218
  --sky-color-background-container-danger: var(--modern-color-red-30);
203
219
  --sky-color-background-container-menu: var(--modern-color-white);
204
220
  --sky-color-background-container-base: var(--modern-color-white);
221
+ --sky-color-background-text_highlight: var(--modern-color-yellow-40);
205
222
  --sky-color-background-scrim: var(--modern-color-scrim);
206
223
  --sky-color-background-page: var(--modern-color-gray-005);
207
224
  --sky-color-icon-action: var(--modern-color-blue-74);
@@ -212,6 +229,7 @@
212
229
  --sky-color-icon-danger: var(--modern-color-red-50);
213
230
  --sky-color-icon-deemphasized: var(--modern-color-gray-70);
214
231
  --sky-color-icon-default: var(--modern-color-gray-105);
232
+ --sky-color-text-link_highlight: var(--modern-color-blue-80);
215
233
  --sky-color-text-heading: var(--modern-color-gray-105);
216
234
  --sky-color-text-inverse: var(--modern-color-white);
217
235
  --sky-color-text-danger: var(--modern-color-red-70);
@@ -227,6 +245,7 @@
227
245
  --sky-border-style-elevation: var(--modern-border-style-solid);
228
246
  --sky-border-style-divider: var(--modern-border-style-solid);
229
247
  --sky-border-style-accent: var(--modern-border-style-solid);
248
+ --sky-border-radius-round: var(--modern-border-radius-round);
230
249
  --sky-border-radius-thumb: var(--modern-border-radius-round);
231
250
  --sky-border-radius-pill: var(--modern-border-radius-pill);
232
251
  --sky-border-radius-m: var(--modern-border-radius-md);
@@ -235,7 +254,6 @@
235
254
  --sky-border-width-separator-row: var(--modern-size-1);
236
255
  --sky-border-width-separator-light: var(--modern-size-1);
237
256
  --sky-border-width-separator-dark: var(--modern-size-1);
238
- --sky-border-width-input-selected: var(--modern-size-1);
239
257
  --sky-border-width-input-disabled: var(--modern-size-1);
240
258
  --sky-border-width-input-error: var(--modern-size-2);
241
259
  --sky-border-width-input-focus: var(--modern-size-2);
@@ -254,6 +272,7 @@
254
272
  --sky-border-width-action-hover: var(--modern-size-1);
255
273
  --sky-border-width-action-base: var(--modern-size-1);
256
274
  --sky-border-width-elevation: var(--modern-size-1);
275
+ --sky-border-width-text_highlight: var(--modern-size-1);
257
276
  --sky-border-width-divider: var(--modern-size-1);
258
277
  --sky-border-width-accent: var(--modern-size-7);
259
278
  --sky-size-max_width-overlay_message: var(--modern-size-236);
@@ -266,6 +285,9 @@
266
285
  --sky-size-icon-l: var(--modern-size-24);
267
286
  --sky-size-icon-m: var(--modern-size-20);
268
287
  --sky-size-icon-s: var(--modern-size-16);
288
+ --sky-size-icon-xs: var(--modern-size-10);
289
+ --sky-size-icon-xxs: var(--modern-size-5);
290
+ --sky-size-picker_btn: var(--modern-size-30);
269
291
  --sky-size-switch: var(--modern-size-26);
270
292
  --sky-space-stacked-xxl: var(--modern-space-xxl);
271
293
  --sky-space-stacked-xl: var(--modern-space-xl);
@@ -279,6 +301,7 @@
279
301
  --sky-space-inline-m: var(--modern-space-md);
280
302
  --sky-space-inline-s: var(--modern-space-s);
281
303
  --sky-space-inline-xs: var(--modern-space-xs);
304
+ --sky-space-inline-xxs: var(--modern-size-2);
282
305
  --sky-space-gap-text_action-l: var(--modern-space-lg);
283
306
  --sky-space-gap-text_action-m: var(--modern-space-md);
284
307
  --sky-space-gap-text_action-s: var(--modern-space-s);
@@ -303,21 +326,13 @@
303
326
  --sky-space-gap-form-l: var(--modern-space-lg);
304
327
  --sky-space-gap-form-m: var(--modern-space-md);
305
328
  --sky-space-gap-form-s: var(--modern-space-s);
329
+ --sky-space-gap-form-xs: var(--modern-space-xs);
306
330
  --sky-space-gap-form-0: 0rem;
307
331
  --sky-space-gap-action_group-xl: var(--modern-size-20);
308
332
  --sky-space-gap-action_group-l: var(--modern-size-15);
309
333
  --sky-space-gap-action_group-m: var(--modern-size-10);
310
334
  --sky-space-gap-action_group-s: var(--modern-size-5);
311
335
  --sky-space-gap-action_group-0: 0rem;
312
- --sky-space-inset-floated-left-m: var(--modern-space-xl);
313
- --sky-space-inset-floated-left-s: var(--modern-space-lg);
314
- --sky-space-inset-floated-bottom-m: var(--modern-space-xl);
315
- --sky-space-inset-floated-bottom-s: var(--modern-space-lg);
316
- --sky-space-inset-floated-right-m: var(--modern-space-xl);
317
- --sky-space-inset-floated-right-s: var(--modern-space-lg);
318
- --sky-space-inset-floated-top-m: var(--modern-space-s);
319
- --sky-space-inset-floated-top-s: var(--modern-space-xs);
320
- --sky-space-inset-floated-top-0: var(--modern-space-none);
321
336
  --sky-space-inset-horizontal-left-xl: var(--modern-space-xl);
322
337
  --sky-space-inset-horizontal-left-l: var(--modern-space-lg);
323
338
  --sky-space-inset-horizontal-left-m: var(--modern-space-md);
@@ -388,25 +403,44 @@
388
403
  --sky-space-inset-pillarbox-1_4-right-xs: var(--modern-size-5);
389
404
  --sky-space-inset-pillarbox-1_4-top-s: var(--modern-size-4);
390
405
  --sky-space-inset-pillarbox-1_4-top-xs: var(--modern-size-1);
406
+ --sky-space-inset-letterbox-left-m: var(--modern-space-s);
407
+ --sky-space-inset-letterbox-bottom-m: var(--modern-space-lg);
408
+ --sky-space-inset-letterbox-right-m: var(--modern-space-s);
409
+ --sky-space-inset-letterbox-top-m: var(--modern-space-lg);
391
410
  --sky-space-inset-input_label-bottom-m: var(--modern-size-2);
392
411
  --sky-space-inset-input_label-top-m: var(--modern-size-6);
393
412
  --sky-space-inset-input-left-m: var(--modern-size-15);
394
413
  --sky-space-inset-input-bottom-m: var(--modern-size-9);
395
414
  --sky-space-inset-input-right-m: var(--modern-size-15);
396
415
  --sky-space-inset-input-top-m: var(--modern-size-10);
416
+ --sky-space-inset-floated-left-m: var(--modern-space-xl);
417
+ --sky-space-inset-floated-left-s: var(--modern-space-lg);
418
+ --sky-space-inset-floated-bottom-m: var(--modern-space-xl);
419
+ --sky-space-inset-floated-bottom-s: var(--modern-space-lg);
420
+ --sky-space-inset-floated-right-m: var(--modern-space-xl);
421
+ --sky-space-inset-floated-right-s: var(--modern-space-lg);
422
+ --sky-space-inset-floated-top-m: var(--modern-space-s);
423
+ --sky-space-inset-floated-top-s: var(--modern-space-xs);
424
+ --sky-space-inset-floated-top-0: var(--modern-space-none);
397
425
  --sky-space-inset-bottomless-bottom-xl: var(--modern-space-none);
398
426
  --sky-space-inset-bottomless-bottom-l: var(--modern-space-none);
427
+ --sky-space-inset-bottomless-bottom-m: var(--modern-space-none);
399
428
  --sky-space-inset-bottomless-left-xl: var(--modern-space-xl);
400
429
  --sky-space-inset-bottomless-left-l: var(--modern-space-lg);
430
+ --sky-space-inset-bottomless-left-m: var(--modern-size-15);
401
431
  --sky-space-inset-bottomless-right-xl: var(--modern-space-xl);
402
432
  --sky-space-inset-bottomless-right-l: var(--modern-space-lg);
433
+ --sky-space-inset-bottomless-right-m: var(--modern-size-15);
403
434
  --sky-space-inset-bottomless-top-xl: var(--modern-space-xl);
404
435
  --sky-space-inset-bottomless-top-l: var(--modern-space-lg);
436
+ --sky-space-inset-bottomless-top-m: var(--modern-size-15);
405
437
  --sky-space-inset-balanced-xl: var(--modern-space-xl);
406
438
  --sky-space-inset-balanced-l: var(--modern-space-lg);
407
439
  --sky-space-inset-balanced-m: var(--modern-space-md);
408
440
  --sky-space-inset-balanced-s: var(--modern-space-s);
409
441
  --sky-space-inset-balanced-xs: var(--modern-space-xs);
442
+ --sky-space-inset-balanced-xxs: var(--modern-size-2);
443
+ --sky-space-inset-balanced-none: 0rem;
410
444
  --sky-font-text_decoration-inline_link-disabled: none;
411
445
  --sky-font-text_decoration-inline_link-focus: none;
412
446
  --sky-font-text_decoration-inline_link-active: underline;
@@ -1233,6 +1267,10 @@
1233
1267
  --sky-override-error-label-margin-top: var(--modern-size-5);
1234
1268
  }
1235
1269
 
1270
+ .sky-theme-modern:not(.sky-theme-brand-blackbaud) select {
1271
+ --sky-override-select-icon-size: var(--modern-size-15) var(--modern-size-30);
1272
+ }
1273
+
1236
1274
  .sky-theme-modern .sky-error-label {
1237
1275
  margin-top: var(--sky-override-error-label-margin-top, var(--sky-space-inset-input_label-top-m));
1238
1276
  color: var(--sky-text-color-default);
@@ -1248,22 +1286,44 @@
1248
1286
  font-style: italic;
1249
1287
  opacity: 1;
1250
1288
  }
1289
+ .sky-theme-modern select {
1290
+ background: var(--sky-color-background-input-base) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1IDEwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxMCI+Cgk8c3R5bGU+CgkJdHNwYW4geyB3aGl0ZS1zcGFjZTpwcmUgfQoJCS5zaHAwIHsgZmlsbDogIzQ0NDQ0NCB9IAoJPC9zdHlsZT4KCTxwYXRoIGlkPSJMYXllciIgY2xhc3M9InNocDAiIGQ9Ik0xLjQxIDQuNjdMMi40OCAzLjE4TDMuNTQgNC42N0wxLjQxIDQuNjdMMS40MSA0LjY3WiIgLz4KCTxwYXRoIGlkPSJMYXllciIgY2xhc3M9InNocDAiIGQ9Ik0zLjU0IDUuMzNMMi40OCA2LjgyTDEuNDEgNS4zM0wzLjU0IDUuMzNMMy41NCA1LjMzWiIgLz4KPC9zdmc+) no-repeat right 50%;
1291
+ background-size: var(--sky-override-select-icon-size, var(--sky-size-icon-s) var(--sky-size-icon-xl));
1292
+ }
1293
+
1294
+ .sky-theme-modern:not(.sky-theme-brand-blackbaud) {
1295
+ --sky-override-icon-switch-border-width-disabled: 0;
1296
+ --sky-override-icon-color-group: var(--sky-color-icon-action);
1297
+ --sky-override-switch-icon-checked-color-no-group: var(
1298
+ --sky-color-text-default
1299
+ );
1300
+ --sky-override-icon-switch-size: 35px;
1301
+ --sky-override-icon-switch-font-size: 18px;
1302
+ --sky-override-icon-switch-size-group: 40px;
1303
+ --sky-override-icon-switch-font-size-group: 20px;
1304
+ --sky-override-switch-background-color: var(--modern-color-white);
1305
+ --sky-override-switch-background-color-success: #d2e8c0;
1306
+ --sky-override-switch-background-color-warning: #ffeaca;
1307
+ --sky-override-switch-background-color-danger: #fac8bf;
1308
+ --sky-override-switch-border-color: var(--modern-color-blue-74);
1309
+ --sky-override-switch-checked-color: var(--sky-color-icon-action);
1310
+ --sky-switch-label-margin-right: 10px;
1311
+ }
1251
1312
 
1252
1313
  .sky-theme-modern .sky-switch {
1253
1314
  cursor: pointer;
1254
1315
  display: inline-flex;
1255
1316
  position: relative;
1256
1317
  }
1318
+ .sky-theme-modern .sky-switch:has(~ .sky-control-help-container) .sky-switch-label {
1319
+ margin-right: 0;
1320
+ }
1257
1321
  .sky-theme-modern .sky-switch.sky-switch-disabled {
1258
1322
  cursor: not-allowed;
1259
1323
  }
1260
1324
  .sky-theme-modern .sky-switch.sky-control-label-required .sky-switch-label {
1261
1325
  margin-right: 0;
1262
1326
  }
1263
- .sky-theme-modern .sky-switch:hover .sky-switch-control {
1264
- border-color: var(--sky-highlight-color-info);
1265
- border-width: 2px;
1266
- }
1267
1327
  .sky-theme-modern .sky-switch .sky-switch-input {
1268
1328
  border: 0;
1269
1329
  clip: rect(0 0 0 0);
@@ -1277,54 +1337,78 @@
1277
1337
  -webkit-appearance: none;
1278
1338
  }
1279
1339
  .sky-theme-modern .sky-switch .sky-switch-input.sky-switch-invalid + .sky-switch-control {
1280
- box-shadow: 0 0 8px rgba(239, 64, 68, 0.6);
1281
- border: 1px solid var(--sky-highlight-color-danger);
1282
- outline: none;
1340
+ border-width: var(--sky-border-width-input-error);
1341
+ border-color: var(--sky-color-border-input-error);
1283
1342
  }
1284
1343
  .sky-theme-modern .sky-switch .sky-switch-input:checked:not(:disabled) + .sky-switch-control, .sky-theme-modern .sky-switch .sky-switch-input[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control {
1285
- background-color: var(--sky-background-color-input-selected);
1344
+ background-color: var(--sky-color-background-selected-heavy);
1345
+ border-width: var(--sky-border-width-action-selected-s);
1346
+ border-color: var(--sky-color-border-selected);
1347
+ }
1348
+ .sky-theme-modern .sky-switch .sky-switch-input:checked:not(:disabled) + .sky-switch-control:not(.sky-switch-control-icon), .sky-theme-modern .sky-switch .sky-switch-input[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control:not(.sky-switch-control-icon) {
1349
+ color: var(--sky-override-switch-checked-color, var(--sky-color-icon-inverse));
1350
+ }
1351
+ .sky-theme-modern .sky-switch .sky-switch-input:checked:not(:disabled) + .sky-switch-control.sky-switch-control-icon, .sky-theme-modern .sky-switch .sky-switch-input[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control.sky-switch-control-icon {
1352
+ color: var(--sky-override-switch-icon-checked-color-no-group, var(--sky-color-icon-inverse));
1353
+ }
1354
+ .sky-theme-modern .sky-switch .sky-switch-input:checked:not(:disabled) + .sky-switch-control:is(.sky-switch-control-success,
1355
+ .sky-switch-control-warning,
1356
+ .sky-switch-control-danger), .sky-theme-modern .sky-switch .sky-switch-input[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control:is(.sky-switch-control-success,
1357
+ .sky-switch-control-warning,
1358
+ .sky-switch-control-danger) {
1359
+ color: var(--sky-color-icon-default);
1286
1360
  }
1287
1361
  .sky-theme-modern .sky-switch .sky-switch-input:checked:not(:disabled) + .sky-switch-control.sky-switch-control-success, .sky-theme-modern .sky-switch .sky-switch-input[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control.sky-switch-control-success {
1288
- background-color: #d2e8c0;
1362
+ background-color: var(--sky-override-switch-background-color-success, var(--sky-color-background-selected-success));
1289
1363
  }
1290
1364
  .sky-theme-modern .sky-switch .sky-switch-input:checked:not(:disabled) + .sky-switch-control.sky-switch-control-warning, .sky-theme-modern .sky-switch .sky-switch-input[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control.sky-switch-control-warning {
1291
- background-color: #ffeaca;
1365
+ background-color: var(--sky-override-switch-background-color-warning, var(--sky-color-background-selected-warning));
1292
1366
  }
1293
1367
  .sky-theme-modern .sky-switch .sky-switch-input:checked:not(:disabled) + .sky-switch-control.sky-switch-control-danger, .sky-theme-modern .sky-switch .sky-switch-input[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control.sky-switch-control-danger {
1294
- background-color: #fac8bf;
1368
+ background-color: var(--sky-override-switch-background-color-danger, var(--sky-color-background-selected-danger));
1295
1369
  }
1296
1370
  .sky-theme-modern .sky-switch .sky-switch-input:disabled + .sky-switch-control {
1297
- background-color: var(--sky-background-color-disabled);
1298
- }
1299
- .sky-theme-modern .sky-switch .sky-switch-input:focus + .sky-switch-control {
1300
- outline: thin dotted;
1301
- outline: -webkit-focus-ring-color auto 5px;
1371
+ background-color: var(--sky-color-background-input-disabled);
1372
+ border-width: var(--sky-border-width-input-disabled);
1373
+ border-color: var(--sky-color-border-input-disabled);
1374
+ color: var(--sky-color-text-deemphasized);
1302
1375
  }
1303
- .sky-theme-modern .sky-switch .sky-switch-input:not(:disabled).sky-switch-invalid + .sky-switch-control {
1304
- border: solid 2px var(--sky-highlight-color-danger);
1305
- box-shadow: none;
1376
+ .sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):hover + .sky-switch-control {
1377
+ border-width: var(--sky-border-width-input-hover);
1378
+ border-color: var(--sky-color-border-input-hover);
1306
1379
  }
1307
- .sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):checked + .sky-switch-control, .sky-theme-modern .sky-switch .sky-switch-input:not(:disabled)[type=checkbox]:indeterminate + .sky-switch-control, .sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):hover + .sky-switch-control {
1308
- border: solid 1px var(--sky-background-color-primary-dark);
1380
+ .sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):active + .sky-switch-control {
1381
+ border-width: var(--sky-border-width-input-active);
1382
+ border-color: var(--sky-color-border-input-active);
1309
1383
  }
1310
- .sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):focus + .sky-switch-control, .sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):active + .sky-switch-control {
1311
- border: solid 2px var(--sky-background-color-primary-dark);
1384
+ .sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):focus-visible + .sky-switch-control {
1385
+ border-width: var(--sky-border-width-input-focus);
1386
+ border-color: var(--sky-color-border-input-focus);
1312
1387
  }
1313
- .sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):focus:not(:active) + .sky-switch-control {
1314
- box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.3);
1388
+ .sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):focus-visible:not(:active) + .sky-switch-control {
1389
+ box-shadow: var(--sky-elevation-focus);
1315
1390
  outline: none;
1316
1391
  }
1392
+ .sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):not(:hover, :active, :focus-visible):checked:not(:disabled) + .sky-switch-control.sky-switch-control-success, .sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):not(:hover, :active, :focus-visible)[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control.sky-switch-control-success {
1393
+ border-color: var(--sky-override-switch-border-color, var(--sky-color-border-success));
1394
+ }
1395
+ .sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):not(:hover, :active, :focus-visible):checked:not(:disabled) + .sky-switch-control.sky-switch-control-warning, .sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):not(:hover, :active, :focus-visible)[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control.sky-switch-control-warning {
1396
+ border-color: var(--sky-override-switch-border-color, var(--sky-color-border-warning));
1397
+ }
1398
+ .sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):not(:hover, :active, :focus-visible):checked:not(:disabled) + .sky-switch-control.sky-switch-control-danger, .sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):not(:hover, :active, :focus-visible)[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control.sky-switch-control-danger {
1399
+ border-color: var(--sky-override-switch-border-color, var(--sky-color-border-danger));
1400
+ }
1317
1401
  .sky-theme-modern .sky-switch .sky-switch-control {
1318
- width: var(--sky-switch-size);
1319
- max-width: var(--sky-switch-size);
1320
- height: var(--sky-switch-size);
1321
- flex: 1 0 var(--sky-switch-size);
1322
- margin: 0 var(--sky-switch-margin) auto auto;
1402
+ width: var(--sky-size-switch);
1403
+ max-width: var(--sky-size-switch);
1404
+ height: var(--sky-size-switch);
1405
+ flex: 1 0 var(--sky-size-switch);
1406
+ margin: 0 var(--sky-space-gap-label-s) auto auto;
1323
1407
  display: inline-flex;
1324
1408
  position: relative;
1325
- border: 1px solid var(--sky-border-color-neutral-medium-dark);
1326
- background-color: #ffffff;
1327
- color: var(--sky-text-color-default);
1409
+ border: var(--sky-border-width-input-base) solid var(--sky-color-border-input-base);
1410
+ background-color: var(--sky-override-switch-background-color, var(--sky-color-background-input-base));
1411
+ color: var(--sky-color-icon-default);
1328
1412
  text-align: center;
1329
1413
  line-height: 1;
1330
1414
  align-items: center;
@@ -1333,19 +1417,19 @@
1333
1417
  }
1334
1418
  .sky-theme-modern .sky-switch .sky-switch-control.sky-switch-control-icon {
1335
1419
  max-width: none;
1336
- width: 35px;
1337
- height: 35px;
1338
- flex: 1 0 35px;
1339
- font-size: 18px;
1420
+ width: var(--sky-override-icon-switch-size, calc(var(--sky-font-line_height-body-m) * var(--sky-font-size-body-m) + var(--sky-space-inset-balanced-s) * 2));
1421
+ height: var(--sky-override-icon-switch-size, calc(var(--sky-font-line_height-body-m) * var(--sky-font-size-body-m) + var(--sky-space-inset-balanced-s) * 2));
1422
+ flex: 1 0 var(--sky-override-icon-switch-size, calc(var(--sky-font-line_height-body-m) * var(--sky-font-size-body-m) + var(--sky-space-inset-balanced-s) * 2));
1423
+ font-size: var(--sky-override-icon-switch-font-size, var(--sky-size-icon-m));
1340
1424
  }
1341
1425
  .sky-theme-modern .sky-switch .sky-switch-control::before {
1342
1426
  content: "";
1343
1427
  }
1344
1428
  .sky-theme-modern .sky-switch .sky-switch-label {
1345
- line-height: var(--sky-switch-size);
1429
+ line-height: var(--sky-size-switch);
1346
1430
  flex: 1 1 auto;
1347
1431
  width: 100%;
1348
- margin-right: 10px;
1432
+ margin-right: var(--sky-switch-label-margin-right, 0);
1349
1433
  min-width: 0;
1350
1434
  }
1351
1435
 
@@ -1355,49 +1439,49 @@
1355
1439
  border-radius: 0;
1356
1440
  }
1357
1441
  .sky-theme-modern .sky-switch-icon-group .sky-switch-control {
1358
- background-color: transparent;
1442
+ background-color: var(--sky-color-background-action-tertiary-base);
1443
+ border-width: var(--sky-width-action-base);
1444
+ border-color: var(--sky-color-border-action-tertiary-base);
1359
1445
  }
1360
- .sky-theme-modern .sky-switch-icon-group .sky-switch-input:checked + .sky-switch-control, .sky-theme-modern .sky-switch-icon-group .sky-switch-input[type=checkbox]:indeterminate + .sky-switch-control {
1361
- background-color: var(--sky-background-color-input-selected);
1446
+ .sky-theme-modern .sky-switch-icon-group .sky-switch-input:checked:not(:disabled) + .sky-switch-control.sky-switch-control-icon, .sky-theme-modern .sky-switch-icon-group .sky-switch-input[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control.sky-switch-control-icon {
1447
+ border-width: var(--sky-border-width-action-selected-s);
1448
+ color: var(--sky-override-switch-checked-color, var(--sky-color-icon-inverse));
1362
1449
  }
1363
- .sky-theme-modern .sky-switch-icon-group .sky-switch-input:disabled + .sky-switch-control {
1364
- background-color: #ededee;
1365
- border: none;
1366
- color: var(--sky-text-color-deemphasized);
1450
+ .sky-theme-modern .sky-switch-icon-group .sky-switch-input:disabled + .sky-switch-control.sky-switch-control-icon {
1451
+ border-color: var(--sky-color-border-action-tertiary-disabled);
1452
+ border-width: var(--sky-override-icon-switch-border-width-disabled, var(--sky-border-width-action-disabled));
1367
1453
  }
1368
- .sky-theme-modern .sky-switch-icon-group .sky-switch-input:checked + .sky-switch-control, .sky-theme-modern .sky-switch-icon-group .sky-switch-input:disabled:checked + .sky-switch-control, .sky-theme-modern .sky-switch-icon-group .sky-switch-input[type=checkbox]:indeterminate + .sky-switch-control, .sky-theme-modern .sky-switch-icon-group .sky-switch-input[type=checkbox]:disabled:indeterminate + .sky-switch-control {
1369
- color: var(--sky-background-color-primary-dark);
1454
+ .sky-theme-modern .sky-switch-icon-group .sky-switch-input:checked:disabled + .sky-switch-control.sky-switch-control-icon, .sky-theme-modern .sky-switch-icon-group .sky-switch-input[type=checkbox]:indeterminate:disabled + .sky-switch-control.sky-switch-control-icon {
1455
+ color: var(--sky-color-icon-action);
1370
1456
  }
1371
- .sky-theme-modern .sky-switch-icon-group .sky-switch-control {
1372
- border: none;
1373
- border-radius: 6px;
1457
+ .sky-theme-modern .sky-switch-icon-group .sky-switch-input:not(:disabled):hover + .sky-switch-control {
1458
+ border-width: var(--sky-border-width-action-hover);
1459
+ border-color: var(--sky-color-border-action-tertiary-hover);
1460
+ }
1461
+ .sky-theme-modern .sky-switch-icon-group .sky-switch-input:not(:disabled):active + .sky-switch-control {
1462
+ border-width: var(--sky-border-width-action-active);
1463
+ border-color: var(--sky-color-border-action-tertiary-active);
1464
+ }
1465
+ .sky-theme-modern .sky-switch-icon-group .sky-switch-input:not(:disabled):focus-visible + .sky-switch-control {
1466
+ border-width: var(--sky-border-width-action-focus);
1467
+ border-color: var(--sky-color-border-action-tertiary-focus);
1374
1468
  }
1375
1469
  .sky-theme-modern .sky-switch-icon-group .sky-switch-control.sky-switch-control-icon {
1376
- font-size: 20px;
1377
- height: 40px;
1378
- width: 40px;
1470
+ width: var(--sky-override-icon-switch-size-group, calc(var(--sky-font-line_height-body-m) * var(--sky-font-size-body-m) + var(--sky-space-inset-balanced-s) * 2));
1471
+ height: var(--sky-override-icon-switch-size-group, calc(var(--sky-font-line_height-body-m) * var(--sky-font-size-body-m) + var(--sky-space-inset-balanced-s) * 2));
1472
+ font-size: var(--sky-override-icon-switch-font-size-group, var(--sky-size-icon-m));
1379
1473
  }
1380
1474
  .sky-theme-modern .sky-switch-icon-group sky-checkbox .sky-switch-control-icon {
1381
- margin-right: 10px;
1475
+ margin-right: var(--sky-space-gap-action_group-m);
1382
1476
  }
1383
1477
  .sky-theme-modern .sky-switch-icon-group sky-checkbox:last-of-type .sky-switch-control-icon {
1384
1478
  margin-right: 0;
1385
1479
  }
1386
1480
  .sky-theme-modern .sky-switch-icon-group sky-radio .sky-switch-control-icon {
1387
- border-radius: 6px;
1388
- }
1389
-
1390
- .sky-theme-modern.sky-theme-mode-dark .sky-switch-input:disabled + .sky-switch-control {
1391
- background-color: #232427;
1392
- border-color: #686c73;
1393
- color: #c0c2c5;
1394
- }
1395
- .sky-theme-modern.sky-theme-mode-dark .sky-switch-icon-group .sky-switch-control {
1396
- color: #fbfcfe;
1481
+ border-radius: var(--sky-border-radius-s);
1397
1482
  }
1398
1483
 
1399
1484
  .sky-theme-modern:not(.sky-theme-brand-blackbaud) {
1400
- --sky-override-font-size: var(--sky-font-size-body-m);
1401
1485
  --sky-override-form-font-weight: var(--sky-font-weight-body-m);
1402
1486
  --sky-override-p-line-height: var(--sky-font-line_height-body-m);
1403
1487
  --sky-override-a-border-radius: 0;
@@ -1411,10 +1495,11 @@ html:has(.sky-theme-brand-blackbaud) {
1411
1495
  }
1412
1496
 
1413
1497
  .sky-theme-modern {
1414
- font-size: var(--sky-override-font-size, initial);
1498
+ font-size: var(--sky-font-size-body-m);
1415
1499
  font-weight: var(--sky-font-weight-body-m);
1416
1500
  font-family: var(--sky-font-family-primary);
1417
1501
  color: var(--sky-color-text-default);
1502
+ background-color: var(--sky-color-background-page);
1418
1503
  transition: background-color 150ms, color 150ms;
1419
1504
  }
1420
1505
 
@@ -1425,6 +1510,7 @@ html:has(.sky-theme-brand-blackbaud) {
1425
1510
  }
1426
1511
 
1427
1512
  .sky-theme-modern a {
1513
+ color: var(--sky-color-text-action);
1428
1514
  border-radius: var(--sky-override-a-border-radius, var(--sky-border-radius-s));
1429
1515
  }
1430
1516
  .sky-theme-modern a:focus-visible:not(:active) {
@@ -1469,8 +1555,12 @@ html:has(.sky-theme-brand-blackbaud) {
1469
1555
  line-height: var(--sky-override-p-line-height);
1470
1556
  }
1471
1557
  .sky-theme-modern mark.sky-highlight-mark {
1472
- background-color: var(--sky-background-color-danger-dark);
1473
- color: var(--sky-text-color-on-dark);
1558
+ background-color: var(--sky-color-background-text_highlight);
1559
+ color: var(--sky-color-text-default);
1560
+ border-bottom: var(--sky-border-width-text_highlight) var(--sky-border-style-accent) var(--sky-color-border-text_highlight);
1561
+ }
1562
+ .sky-theme-modern :is(a, .sky-btn-link-inline) mark.sky-highlight-mark {
1563
+ color: var(--sky-color-text-link_highlighted);
1474
1564
  }
1475
1565
  .sky-theme-modern .sky-rounded-corners {
1476
1566
  border-radius: var(--sky-border-radius-s);