@siemens/element-theme 51.0.0-rc.9 → 51.0.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 (39) hide show
  1. package/package.json +1 -1
  2. package/src/styles/bootstrap/_alert.scss +18 -18
  3. package/src/styles/bootstrap/_badges.scss +37 -37
  4. package/src/styles/bootstrap/_button-group.scss +8 -8
  5. package/src/styles/bootstrap/_buttons.scss +67 -67
  6. package/src/styles/bootstrap/_card.scss +13 -12
  7. package/src/styles/bootstrap/_dropdowns.scss +5 -5
  8. package/src/styles/bootstrap/_images.scss +1 -1
  9. package/src/styles/bootstrap/_list-group.scss +50 -12
  10. package/src/styles/bootstrap/_modals.scss +2 -2
  11. package/src/styles/bootstrap/_nav.scss +6 -6
  12. package/src/styles/bootstrap/_pagination.scss +2 -2
  13. package/src/styles/bootstrap/_popovers.scss +1 -1
  14. package/src/styles/bootstrap/_utilities.scss +38 -37
  15. package/src/styles/bootstrap/_variables.scss +89 -91
  16. package/src/styles/bootstrap/forms/_form-check.scss +20 -20
  17. package/src/styles/bootstrap/forms/_form-control.scss +15 -15
  18. package/src/styles/bootstrap/forms/_form-file.scss +6 -6
  19. package/src/styles/bootstrap/forms/_form-range.scss +12 -12
  20. package/src/styles/components/_application-header.scss +15 -15
  21. package/src/styles/components/_datatable.scss +11 -11
  22. package/src/styles/components/_drag_drop.scss +5 -5
  23. package/src/styles/components/_elevation.scss +4 -4
  24. package/src/styles/components/_layout.scss +1 -1
  25. package/src/styles/components/_links.scss +1 -1
  26. package/src/styles/components/_list-item.scss +14 -19
  27. package/src/styles/components/_markdown.scss +1 -1
  28. package/src/styles/components/_pills.scss +3 -3
  29. package/src/styles/components/_scrollbar.scss +3 -3
  30. package/src/styles/components/_search-bar.scss +6 -6
  31. package/src/styles/components/_skeleton.scss +3 -3
  32. package/src/styles/components/_switch.scss +12 -12
  33. package/src/styles/components/_widgets.scss +1 -1
  34. package/src/styles/mixins/_utilities.scss +94 -82
  35. package/src/styles/variables/_elevation.scss +8 -8
  36. package/src/styles/variables/_focus.scss +3 -3
  37. package/src/styles/variables/_system-tokens.scss +202 -180
  38. package/src/styles/variables/_utilities.scss +4 -4
  39. package/src/theme/_theme-element.scss +326 -302
package/src/styles/bootstrap/_variables.scss CHANGED
@@ -2,6 +2,7 @@
2
2
  @use '../variables/system-tokens';
3
3
  @use '../variables/semantic-tokens';
4
4
  @use '../variables/spacers';
5
+ @use '../variables/sizing';
5
6
  @use '../variables/typography';
6
7
  @use './functions';
7
8
 
@@ -42,18 +43,18 @@ $position-values: (
42
43
  //
43
44
  // Settings for the `<body>` element.
44
45
 
45
- $body-bg: system-tokens.$si-sys-background-0 !default;
46
- $body-color: system-tokens.$si-sys-text-primary !default;
46
+ $body-bg: system-tokens.$si-sys-color-background-0 !default;
47
+ $body-color: system-tokens.$si-sys-color-text-primary !default;
47
48
  $body-text-align: null !default;
48
49
 
49
50
  // Links
50
51
  //
51
52
  // Style anchor elements.
52
53
 
53
- $link-color: system-tokens.$si-sys-text-accent;
54
+ $link-color: system-tokens.$si-sys-color-text-accent;
54
55
  $link-decoration: none !default;
55
56
  $link-shade-percentage: 20% !default;
56
- $link-hover-color: system-tokens.$si-sys-text-accent-hover;
57
+ $link-hover-color: system-tokens.$si-sys-color-text-accent-hover;
57
58
  $link-hover-decoration: underline !default;
58
59
  $link-border-radius: semantic-tokens.$element-button-radius;
59
60
 
@@ -126,19 +127,19 @@ $border-widths: (
126
127
  5: 5px
127
128
  ) !default;
128
129
 
129
- $border-color: system-tokens.$si-sys-border-4 !default;
130
+ $border-color: system-tokens.$si-sys-color-border-4 !default;
130
131
 
131
132
  $border-radius: semantic-tokens.$element-radius-2 !default;
132
133
  $border-radius-sm: semantic-tokens.$element-radius-1 !default;
133
134
  $border-radius-lg: semantic-tokens.$element-radius-2 !default;
134
135
  $border-radius-pill: 50rem !default;
135
136
 
136
- // DEPRECATED: Use $si-sys-effects-shadow-2 instead.
137
- $box-shadow: system-tokens.$si-sys-effects-shadow-2 !default;
138
- // DEPRECATED: Use $si-sys-effects-shadow-1 instead.
139
- $box-shadow-sm: system-tokens.$si-sys-effects-shadow-1 !default;
140
- // DEPRECATED: Use $si-sys-effects-shadow-3 instead.
141
- $box-shadow-lg: system-tokens.$si-sys-effects-shadow-3 !default;
137
+ // DEPRECATED: Use $si-sys-color-effects-shadow-2 instead.
138
+ $box-shadow: system-tokens.$si-sys-color-effects-shadow-2 !default;
139
+ // DEPRECATED: Use $si-sys-color-effects-shadow-1 instead.
140
+ $box-shadow-sm: system-tokens.$si-sys-color-effects-shadow-1 !default;
141
+ // DEPRECATED: Use $si-sys-color-effects-shadow-3 instead.
142
+ $box-shadow-lg: system-tokens.$si-sys-color-effects-shadow-3 !default;
142
143
  // DEPRECATED: There is no replacement.
143
144
  $box-shadow-inset: inset 0 1px 1px var(--element-box-shadow-color-2);
144
145
 
@@ -205,7 +206,7 @@ $headings-font-family: null !default;
205
206
  $headings-font-style: null !default;
206
207
  $headings-font-weight: typography.$si-font-weight-sbold !default;
207
208
  $headings-line-height: 1.2 !default;
208
- $headings-color: system-tokens.$si-sys-text-primary !default;
209
+ $headings-color: system-tokens.$si-sys-color-text-primary !default;
209
210
 
210
211
  $lead-font-size: typography.$si-font-size-body-lg !default;
211
212
  $lead-line-height: typography.$si-line-height-body-lg !default;
@@ -217,15 +218,15 @@ $sub-sup-font-size: 0.75em !default;
217
218
 
218
219
  $initialism-font-size: $small-font-size !default;
219
220
 
220
- $text-disabled: system-tokens.$si-sys-text-disabled !default;
221
+ $text-disabled: system-tokens.$si-sys-color-text-disabled !default;
221
222
 
222
223
  $blockquote-margin-y: map.get(spacers.$spacers-block, 6) !default;
223
224
  $blockquote-font-size: typography.$si-font-size-body-lg !default;
224
- $blockquote-footer-color: system-tokens.$si-sys-text-secondary !default;
225
+ $blockquote-footer-color: system-tokens.$si-sys-color-text-secondary !default;
225
226
  $blockquote-footer-font-size: $small-font-size !default;
226
227
 
227
228
  $hr-margin-y: map.get(spacers.$spacers-block, 6) !default;
228
- $hr-color: system-tokens.$si-sys-border-4 !default;
229
+ $hr-color: system-tokens.$si-sys-color-border-4 !default;
229
230
  $hr-height: $border-width !default;
230
231
  $hr-opacity: 1 !default;
231
232
 
@@ -241,8 +242,8 @@ $nested-kbd-font-weight: $font-weight-bold !default;
241
242
 
242
243
  $list-inline-padding: 0.5rem !default;
243
244
 
244
- $mark-bg: system-tokens.$si-sys-background-caution;
245
- $mark-color: system-tokens.$si-sys-text-on-caution;
245
+ $mark-bg: system-tokens.$si-sys-color-background-caution;
246
+ $mark-color: system-tokens.$si-sys-color-text-on-caution;
246
247
 
247
248
  // Tables
248
249
  //
@@ -256,19 +257,19 @@ $table-cell-padding-x-sm: map.get(spacers.$spacers-inline, 4) !default;
256
257
  $table-cell-vertical-align: top !default;
257
258
 
258
259
  $table-color: $body-color !default;
259
- $table-bg: system-tokens.$si-sys-background-1 !default;
260
+ $table-bg: system-tokens.$si-sys-color-background-1 !default;
260
261
  $table-accent-bg: transparent !default;
261
262
 
262
263
  $table-th-font-weight: null !default;
263
264
 
264
265
  $table-striped-color: $table-color !default;
265
- $table-striped-bg: system-tokens.$si-sys-background-0 !default;
266
+ $table-striped-bg: system-tokens.$si-sys-color-background-0 !default;
266
267
 
267
268
  $table-active-color: $table-color !default;
268
- $table-active-bg: system-tokens.$si-sys-background-active !default;
269
+ $table-active-bg: system-tokens.$si-sys-color-background-active !default;
269
270
 
270
271
  $table-hover-color: $table-color !default;
271
- $table-hover-bg: system-tokens.$si-sys-background-hover !default;
272
+ $table-hover-bg: system-tokens.$si-sys-color-background-hover !default;
272
273
 
273
274
  $table-border-width: $border-width !default;
274
275
  $table-border-color: $border-color !default;
@@ -280,10 +281,10 @@ $table-group-separator-color: currentColor !default;
280
281
  $table-caption-color: semantic-tokens.$element-text-secondary !default;
281
282
 
282
283
  $table-variants: (
283
- 'success': system-tokens.$si-sys-background-success-subtle,
284
- 'info': system-tokens.$si-sys-background-information-subtle,
285
- 'warning': system-tokens.$si-sys-background-warning-subtle,
286
- 'danger': system-tokens.$si-sys-background-danger-subtle
284
+ 'success': system-tokens.$si-sys-color-background-success-subtle,
285
+ 'info': system-tokens.$si-sys-color-background-information-subtle,
286
+ 'warning': system-tokens.$si-sys-color-background-warning-subtle,
287
+ 'danger': system-tokens.$si-sys-color-background-danger-subtle
287
288
  ) !default;
288
289
 
289
290
  // Buttons
@@ -301,7 +302,7 @@ $btn-padding-y-lg: map.get(spacers.$spacers-block, 5);
301
302
 
302
303
  $btn-link-color: $link-color !default;
303
304
  $btn-link-hover-color: $link-hover-color !default;
304
- $btn-link-disabled-color: system-tokens.$si-sys-text-disabled !default;
305
+ $btn-link-disabled-color: system-tokens.$si-sys-color-text-disabled !default;
305
306
 
306
307
  // Allows for customizing button radius independently from global border radius
307
308
  $btn-border-radius: semantic-tokens.$element-button-radius !default;
@@ -321,13 +322,13 @@ $form-text-margin-top: map.get(spacers.$spacers-block, 2);
321
322
  $form-text-font-size: $small-font-size !default;
322
323
  $form-text-font-style: null !default;
323
324
  $form-text-font-weight: null !default;
324
- $form-text-color: system-tokens.$si-sys-text-secondary !default;
325
+ $form-text-color: system-tokens.$si-sys-color-text-secondary !default;
325
326
 
326
327
  $form-label-margin-bottom: 4px !default;
327
328
  $form-label-font-size: typography.$si-font-size-body !default;
328
329
  $form-label-font-style: null !default;
329
330
  $form-label-font-weight: null !default;
330
- $form-label-color: system-tokens.$si-sys-text-secondary !default;
331
+ $form-label-color: system-tokens.$si-sys-color-text-secondary !default;
331
332
 
332
333
  $input-padding-y-full: map.get(spacers.$spacers-block, 4);
333
334
  $input-padding-y: calc(map.get(spacers.$spacers-block, 4) - 1px); // 8px including 1px border
@@ -340,14 +341,14 @@ $input-font-weight: $font-weight-base;
340
341
  // rounding differences (Safari rounds 14 × 1.1428... to 15px, Chrome to 16px). See #2031
341
342
  $input-line-height: calc(typography.$si-font-size-body * typography.$si-line-height-body);
342
343
 
343
- $input-bg: system-tokens.$si-sys-background-1 !default;
344
- $input-disabled-bg: system-tokens.$si-sys-background-1 !default;
345
- $input-disabled-color: system-tokens.$si-sys-text-disabled !default;
346
- $input-disabled-border-color: system-tokens.$si-sys-border-4 !default;
344
+ $input-bg: system-tokens.$si-sys-color-background-1 !default;
345
+ $input-disabled-bg: system-tokens.$si-sys-color-background-1 !default;
346
+ $input-disabled-color: system-tokens.$si-sys-color-text-disabled !default;
347
+ $input-disabled-border-color: system-tokens.$si-sys-color-border-4 !default;
347
348
 
348
- $input-color: system-tokens.$si-sys-text-primary !default;
349
- $input-border-color: system-tokens.$si-sys-border-2 !default;
350
- $input-focus-border-color: system-tokens.$si-sys-border-1 !default;
349
+ $input-color: system-tokens.$si-sys-color-text-primary !default;
350
+ $input-border-color: system-tokens.$si-sys-color-border-2 !default;
351
+ $input-focus-border-color: system-tokens.$si-sys-color-border-1 !default;
351
352
  $input-border-width: $border-width !default;
352
353
  // DEPRECATED: There is no replacement.
353
354
  $input-box-shadow: $box-shadow-inset !default;
@@ -357,21 +358,16 @@ $input-border-radius: semantic-tokens.$element-input-radius !default;
357
358
  $input-focus-bg: $input-bg !default;
358
359
  $input-focus-color: $input-color !default;
359
360
 
360
- $input-placeholder-color: system-tokens.$si-sys-text-secondary !default;
361
+ $input-placeholder-color: system-tokens.$si-sys-color-text-secondary !default;
361
362
  $input-placeholder-disabled-color: transparent !default;
362
363
  $input-plaintext-color: $body-color !default;
363
364
 
364
365
  $input-height-border: $input-border-width * 2 !default;
365
366
 
366
- $input-height: calc(1lh + ($input-padding-y-full * 2));
367
+ $input-height: map.get(sizing.$sizing, 80);
367
368
 
368
369
  // don't derive from $input-height as it generates a nested calc() expression
369
- $input-height-inner: calc($input-line-height + ($input-padding-y-full - 1px) * 2) !default;
370
- // Wrap in parenthesis: `*` binds tighter than `-`, so without them only the border term gets multiplied.
371
- // DEPRECATED: Calculate it yourself using $input-height-inner
372
- $input-height-inner-half: calc((#{$input-height-inner}) * 0.5) !default;
373
- // DEPRECATED: Calculate it yourself using $input-height-inner
374
- $input-height-inner-quarter: calc((#{$input-height-inner}) * 0.25) !default;
370
+ $input-height-inner: calc(map.get(sizing.$sizing, 80) - (2 * 1px)) !default;
375
371
 
376
372
  $input-transition:
377
373
  border-color 0.15s ease-in-out,
@@ -384,15 +380,15 @@ $input-group-addon-padding-y: $input-padding-y !default;
384
380
  $input-group-addon-padding-x: $input-padding-x !default;
385
381
  $input-group-addon-font-weight: $input-font-weight !default;
386
382
  $input-group-addon-color: $input-color !default;
387
- $input-group-addon-bg: system-tokens.$si-sys-background-1 !default;
383
+ $input-group-addon-bg: system-tokens.$si-sys-color-background-1 !default;
388
384
  $input-group-addon-border-color: $input-border-color !default;
389
385
 
390
386
  // Form validation
391
387
 
392
388
  $form-feedback-font-size: $form-text-font-size !default;
393
389
  $form-feedback-valid-color: null !default;
394
- $form-feedback-warning-color: system-tokens.$si-sys-text-warning !default;
395
- $form-feedback-invalid-color: system-tokens.$si-sys-text-danger !default;
390
+ $form-feedback-warning-color: system-tokens.$si-sys-color-text-warning !default;
391
+ $form-feedback-invalid-color: system-tokens.$si-sys-color-text-danger !default;
396
392
 
397
393
  $form-feedback-icon-valid: semantic-tokens.$element-feedback-icon-valid;
398
394
  $form-feedback-icon-invalid: semantic-tokens.$element-feedback-icon-invalid;
@@ -405,12 +401,12 @@ $form-validation-states: (
405
401
  'icon': $form-feedback-icon-valid
406
402
  ),
407
403
  'invalid': (
408
- 'color': system-tokens.$si-sys-border-danger,
404
+ 'color': system-tokens.$si-sys-color-border-danger,
409
405
  'text-color': $form-feedback-invalid-color,
410
406
  'icon': $form-feedback-icon-invalid
411
407
  ),
412
408
  'warning': (
413
- 'color': system-tokens.$si-sys-border-warning,
409
+ 'color': system-tokens.$si-sys-color-border-warning,
414
410
  'text-color': $form-feedback-warning-color,
415
411
  'icon': $form-feedback-icon-warning
416
412
  )
@@ -430,22 +426,22 @@ $nav-link-padding-x: map.get(spacers.$spacers-inline, 8);
430
426
  $nav-link-font-size: typography.$si-font-size-h4;
431
427
  $nav-link-font-weight: typography.$si-font-weight-h4;
432
428
  $nav-link-line-height: typography.$si-line-height-h4;
433
- $nav-link-color: system-tokens.$si-sys-text-primary !default;
429
+ $nav-link-color: system-tokens.$si-sys-color-text-primary !default;
434
430
  $nav-link-hover-color: $link-hover-color !default;
435
431
  $nav-link-transition: ();
436
- $nav-link-disabled-color: system-tokens.$si-sys-text-disabled !default;
432
+ $nav-link-disabled-color: system-tokens.$si-sys-color-text-disabled !default;
437
433
 
438
434
  $nav-tabs-border-color: transparent;
439
435
  $nav-tabs-border-width: 2px;
440
436
  $nav-tabs-border-radius: 0;
441
437
  $nav-tabs-link-hover-border-color: transparent transparent $nav-tabs-border-color !default;
442
- $nav-tabs-link-active-color: system-tokens.$si-sys-text-accent-active !default;
438
+ $nav-tabs-link-active-color: system-tokens.$si-sys-color-text-accent-active !default;
443
439
  $nav-tabs-link-active-bg: transparent !default;
444
440
 
445
441
  // Badges
446
442
  $badge-font-size: typography.$si-font-size-body;
447
443
  $badge-font-weight: typography.$si-font-weight-body;
448
- $badge-color: system-tokens.$si-sys-text-inverse !default;
444
+ $badge-color: system-tokens.$si-sys-color-text-inverse !default;
449
445
  $badge-padding-y: map.get(spacers.$spacers-block, 1);
450
446
  $badge-padding-x: map.get(spacers.$spacers-inline, 4);
451
447
  $badge-border-radius: 0.75rem;
@@ -464,16 +460,16 @@ $dropdown-font-size: $font-size-base !default;
464
460
  // this is to have room for icon and badges
465
461
  $dropdown-line-height: $badge-height;
466
462
  $dropdown-color: $body-color !default;
467
- $dropdown-bg: system-tokens.$si-sys-background-1 !default;
463
+ $dropdown-bg: system-tokens.$si-sys-color-background-3 !default;
468
464
  $dropdown-border-radius: semantic-tokens.$element-radius-2 !default;
469
- $dropdown-divider-bg: system-tokens.$si-sys-border-4 !default;
465
+ $dropdown-divider-bg: system-tokens.$si-sys-color-border-4 !default;
470
466
  $dropdown-divider-margin-y: 4px !default;
471
- $dropdown-box-shadow: system-tokens.$si-sys-effects-shadow-2 !default;
472
- $dropdown-link-color: system-tokens.$si-sys-text-primary !default;
473
- $dropdown-link-disabled-color: system-tokens.$si-sys-text-disabled !default;
467
+ $dropdown-box-shadow: system-tokens.$si-sys-color-effects-shadow-2 !default;
468
+ $dropdown-link-color: system-tokens.$si-sys-color-text-primary !default;
469
+ $dropdown-link-disabled-color: system-tokens.$si-sys-color-text-disabled !default;
474
470
  $dropdown-item-padding-y: map.get(spacers.$spacers-block, 2);
475
471
  $dropdown-item-padding-x: map.get(spacers.$spacers-inline, 5);
476
- $dropdown-header-color: system-tokens.$si-sys-text-primary !default;
472
+ $dropdown-header-color: system-tokens.$si-sys-color-text-primary !default;
477
473
 
478
474
  // Cards
479
475
 
@@ -484,11 +480,11 @@ $card-border-radius: $border-radius !default;
484
480
  $card-inner-border-radius: $card-border-radius;
485
481
  $card-cap-padding-y: map.get(spacers.$spacers-block, 5) !default;
486
482
  $card-cap-padding-x: $card-spacer-x !default;
487
- $card-cap-bg: system-tokens.$si-sys-background-1 !default;
483
+ $card-cap-bg: system-tokens.$si-sys-color-background-1 !default;
488
484
  $card-cap-color: null !default;
489
485
  $card-height: null !default;
490
486
  $card-color: null !default;
491
- $card-bg: system-tokens.$si-sys-background-1 !default;
487
+ $card-bg: system-tokens.$si-sys-color-background-1 !default;
492
488
  $card-img-overlay-padding: map.get(spacers.$spacers-block, 6) map.get(spacers.$spacers-inline, 6) !default;
493
489
  $card-group-margin: $grid-gutter-width !default;
494
490
 
@@ -496,8 +492,8 @@ $card-group-margin: $grid-gutter-width !default;
496
492
 
497
493
  $tooltip-font-size: $font-size-base !default;
498
494
  $tooltip-max-width: 200px !default;
499
- $tooltip-color: system-tokens.$si-sys-text-inverse !default;
500
- $tooltip-bg: system-tokens.$si-sys-background-inverse !default;
495
+ $tooltip-color: system-tokens.$si-sys-color-text-inverse !default;
496
+ $tooltip-bg: system-tokens.$si-sys-color-background-inverse !default;
501
497
  $tooltip-border-radius: semantic-tokens.$element-radius-2 !default;
502
498
  $tooltip-opacity: 0.9 !default;
503
499
  $tooltip-padding-y: map.get(spacers.$spacers-block, 4) !default;
@@ -511,24 +507,24 @@ $tooltip-arrow-color: $tooltip-bg !default;
511
507
  // Popovers
512
508
 
513
509
  $popover-font-size: $font-size-base;
514
- $popover-bg: system-tokens.$si-sys-background-3 !default;
510
+ $popover-bg: system-tokens.$si-sys-color-background-3 !default;
515
511
  $popover-max-width: 276px !default;
516
512
  $popover-border-width: $border-width !default;
517
- $popover-border-color: system-tokens.$si-sys-border-4 !default;
513
+ $popover-border-color: system-tokens.$si-sys-color-border-4 !default;
518
514
  $popover-border-radius: $border-radius-lg !default;
519
515
  $popover-inner-border-radius: functions.subtract(
520
516
  $popover-border-radius,
521
517
  $popover-border-width
522
518
  ) !default;
523
- // DEPRECATED: Use $si-sys-effects-shadow-3 instead.
519
+ // DEPRECATED: Use $si-sys-color-effects-shadow-3 instead.
524
520
  $popover-box-shadow: $box-shadow !default;
525
521
 
526
- $popover-header-bg: system-tokens.$si-sys-background-3 !default;
527
- $popover-header-color: system-tokens.$si-sys-text-accent;
522
+ $popover-header-bg: system-tokens.$si-sys-color-background-3 !default;
523
+ $popover-header-color: system-tokens.$si-sys-color-text-accent;
528
524
  $popover-header-padding-y: map.get(spacers.$spacers-block, 5) !default;
529
525
  $popover-header-padding-x: map.get(spacers.$spacers-inline, 5) !default;
530
526
 
531
- $popover-body-color: system-tokens.$si-sys-text-primary !default;
527
+ $popover-body-color: system-tokens.$si-sys-color-text-primary !default;
532
528
  $popover-body-padding-y: $popover-header-padding-y !default;
533
529
  $popover-body-padding-x: $popover-header-padding-x !default;
534
530
 
@@ -552,19 +548,19 @@ $modal-dialog-margin-y-sm-up: map.get(spacers.$spacers-block, 9);
552
548
  $modal-title-line-height: typography.$si-line-height-h4 !default;
553
549
 
554
550
  $modal-content-color: null !default;
555
- $modal-content-bg: system-tokens.$si-sys-background-1 !default;
551
+ $modal-content-bg: system-tokens.$si-sys-color-background-1 !default;
556
552
  $modal-content-border-width: $border-width !default;
557
553
  $modal-content-border-radius: $border-radius-lg !default;
558
554
  $modal-content-inner-border-radius: functions.subtract(
559
555
  $modal-content-border-radius,
560
556
  $modal-content-border-width
561
557
  ) !default;
562
- // DEPRECATED: Use $si-sys-effects-shadow-3 instead.
558
+ // DEPRECATED: Use $si-sys-color-effects-shadow-3 instead.
563
559
  $modal-content-box-shadow-xs: $box-shadow-sm !default;
564
- // DEPRECATED: Use $si-sys-effects-shadow-2 instead.
560
+ // DEPRECATED: Use $si-sys-color-effects-shadow-2 instead.
565
561
  $modal-content-box-shadow-sm-up: $box-shadow !default;
566
562
 
567
- $modal-backdrop-bg: system-tokens.$si-sys-effects-backdrop !default;
563
+ $modal-backdrop-bg: system-tokens.$si-sys-color-effects-backdrop !default;
568
564
  $modal-backdrop-opacity: 1 !default;
569
565
  $modal-header-border-color: $border-color !default;
570
566
  $modal-footer-border-color: $modal-header-border-color !default;
@@ -601,18 +597,20 @@ $alert-dismissible-padding-r: calc(
601
597
 
602
598
  $progress-height: 0.5rem !default;
603
599
  $progress-font-size: calc(#{$font-size-base} * 0.75) !default;
604
- $progress-bg: system-tokens.$si-sys-border-4 !default;
600
+ $progress-bg: system-tokens.$si-sys-color-border-4 !default;
605
601
  $progress-border-radius: $progress-height * 0.5 !default;
606
602
  $progress-box-shadow: none !default;
607
- $progress-bar-color: system-tokens.$si-sys-background-accent !default;
608
- $progress-bar-bg: system-tokens.$si-sys-background-accent !default;
603
+ $progress-bar-color: system-tokens.$si-sys-color-background-accent !default;
604
+ $progress-bar-bg: system-tokens.$si-sys-color-background-accent !default;
609
605
  $progress-bar-animation-timing: 1s linear infinite !default;
610
606
  $progress-bar-transition: width animations.element-transition-duration(0.6s) ease;
611
607
 
612
608
  // List group
609
+ // @deprecated All `$list-group-*` variables below belong to the deprecated
610
+ // Bootstrap list group. Use the Element list (`.list` / `.list-item`) instead.
613
611
 
614
- $list-group-color: system-tokens.$si-sys-text-primary !default;
615
- $list-group-bg: system-tokens.$si-sys-background-1 !default;
612
+ $list-group-color: system-tokens.$si-sys-color-text-primary !default;
613
+ $list-group-bg: system-tokens.$si-sys-color-background-1 !default;
616
614
  $list-group-border-color: $border-color !default;
617
615
  $list-group-border-width: $border-width !default;
618
616
  $list-group-border-radius: $border-radius !default;
@@ -620,19 +618,19 @@ $list-group-border-radius: $border-radius !default;
620
618
  $list-group-item-padding-y: map.get(spacers.$spacers-block, 4) !default;
621
619
  $list-group-item-padding-x: map.get(spacers.$spacers-inline, 6) !default; // 1.25rem !default;
622
620
 
623
- $list-group-hover-bg: system-tokens.$si-sys-background-hover !default;
621
+ $list-group-hover-bg: system-tokens.$si-sys-color-background-hover !default;
624
622
  $list-group-active-color: $body-color !default;
625
- $list-group-active-bg: system-tokens.$si-sys-background-active !default;
623
+ $list-group-active-bg: system-tokens.$si-sys-color-background-active !default;
626
624
  $list-group-active-border-color: $border-color !default;
627
625
 
628
- $list-group-disabled-color: system-tokens.$si-sys-text-disabled !default;
626
+ $list-group-disabled-color: system-tokens.$si-sys-color-text-disabled !default;
629
627
  $list-group-disabled-bg: $list-group-bg !default;
630
628
 
631
- $list-group-action-color: system-tokens.$si-sys-text-primary !default;
629
+ $list-group-action-color: system-tokens.$si-sys-color-text-primary !default;
632
630
  $list-group-action-hover-color: $list-group-action-color !important !default;
633
631
 
634
632
  $list-group-action-active-color: $body-color !default;
635
- $list-group-action-active-bg: system-tokens.$si-sys-background-0 !default;
633
+ $list-group-action-active-bg: system-tokens.$si-sys-color-background-0 !default;
636
634
 
637
635
  // Image thumbnails
638
636
 
@@ -641,13 +639,13 @@ $thumbnail-bg: $body-bg !default;
641
639
  $thumbnail-border-width: $border-width !default;
642
640
  $thumbnail-border-color: $border-color !default;
643
641
  $thumbnail-border-radius: $border-radius !default;
644
- // DEPRECATED: Use $si-sys-effects-shadow-1 instead.
642
+ // DEPRECATED: Use $si-sys-color-effects-shadow-1 instead.
645
643
  $thumbnail-box-shadow: $box-shadow-sm !default;
646
644
 
647
645
  // Figures
648
646
 
649
647
  $figure-caption-font-size: $small-font-size !default;
650
- $figure-caption-color: system-tokens.$si-sys-text-secondary !default;
648
+ $figure-caption-color: system-tokens.$si-sys-color-text-secondary !default;
651
649
 
652
650
  // Breadcrumbs
653
651
 
@@ -657,7 +655,7 @@ $breadcrumb-padding-x: 0;
657
655
  $breadcrumb-item-padding-x: map.get(spacers.$spacers-inline, 5);
658
656
  $breadcrumb-margin-bottom: 0;
659
657
  $breadcrumb-bg: inherit !default;
660
- $breadcrumb-divider-color: system-tokens.$si-sys-text-secondary !default;
658
+ $breadcrumb-divider-color: system-tokens.$si-sys-color-text-secondary !default;
661
659
  $breadcrumb-active-color: $link-color !default;
662
660
  $breadcrumb-divider: string.quote('>') !default;
663
661
  $breadcrumb-divider-flipped: $breadcrumb-divider !default;
@@ -667,22 +665,22 @@ $breadcrumb-border-radius: 0 !default;
667
665
 
668
666
  $code-font-size: typography.$si-font-size-body !default;
669
667
  $code-line-height: typography.$si-line-height-body !default;
670
- $code-color: system-tokens.$si-sys-text-primary !default;
671
- $code-background: system-tokens.$si-sys-background-active !default;
668
+ $code-color: system-tokens.$si-sys-color-text-primary !default;
669
+ $code-background: system-tokens.$si-sys-color-background-active !default;
672
670
  $code-padding-y: map.get(spacers.$spacers-block, 1) !default;
673
671
  $code-padding-x: map.get(spacers.$spacers-inline, 2) !default;
674
672
  $code-border-radius: semantic-tokens.$element-radius-1 !default;
675
673
 
676
674
  $kbd-padding-y: 0.2rem !default;
677
675
  $kbd-padding-x: 0.4rem !default;
678
- $kbd-color: system-tokens.$si-sys-text-primary !default;
679
- $kbd-bg: system-tokens.$si-sys-background-3 !default;
676
+ $kbd-color: system-tokens.$si-sys-color-text-primary !default;
677
+ $kbd-bg: system-tokens.$si-sys-color-background-3 !default;
680
678
  // variable is unused. TODO: remove it.
681
679
  $kbd-font-size: $code-font-size !default;
682
680
 
683
- $pre-color: system-tokens.$si-sys-text-primary !default;
681
+ $pre-color: system-tokens.$si-sys-color-text-primary !default;
684
682
  $pre-padding-y: map.get(spacers.$spacers-block, 4) !default;
685
683
  $pre-padding-x: map.get(spacers.$spacers-inline, 4) !default;
686
- $pre-border-color: system-tokens.$si-sys-border-4 !default;
684
+ $pre-border-color: system-tokens.$si-sys-color-border-4 !default;
687
685
  $pre-border-width: $border-width !default;
688
686
  $pre-border-radius: semantic-tokens.$element-radius-1 !default;
package/src/styles/bootstrap/forms/_form-check.scss CHANGED
@@ -43,21 +43,21 @@ $form-check-label-start: calc($form-check-size + map.get(spacers.$spacers-inline
43
43
  %form-check-base {
44
44
  position: relative;
45
45
  appearance: none;
46
- background-color: system-tokens.$si-sys-background-1;
47
- border: 1px solid system-tokens.$si-sys-border-2;
46
+ background-color: system-tokens.$si-sys-color-background-1;
47
+ border: 1px solid system-tokens.$si-sys-color-border-2;
48
48
  flex-shrink: 0;
49
49
  float: inline-start;
50
50
 
51
51
  &:is(:hover, .hover) {
52
- background: system-tokens.$si-sys-background-hover;
52
+ background: system-tokens.$si-sys-color-background-hover;
53
53
  }
54
54
 
55
55
  &:is(:active, .active) {
56
- background: system-tokens.$si-sys-background-active;
56
+ background: system-tokens.$si-sys-color-background-active;
57
57
  }
58
58
 
59
59
  &:is([disabled], .disabled) {
60
- border-color: system-tokens.$si-sys-text-disabled;
60
+ border-color: system-tokens.$si-sys-color-text-disabled;
61
61
  background-color: transparent;
62
62
  }
63
63
  }
@@ -80,27 +80,27 @@ $form-check-label-start: calc($form-check-size + map.get(spacers.$spacers-inline
80
80
  }
81
81
 
82
82
  &:is(:checked, .checked, :indeterminate) {
83
- background-color: system-tokens.$si-sys-background-accent;
83
+ background-color: system-tokens.$si-sys-color-background-accent;
84
84
  border-color: transparent;
85
85
 
86
86
  &:hover {
87
- background-color: system-tokens.$si-sys-background-accent-hover;
87
+ background-color: system-tokens.$si-sys-color-background-accent-hover;
88
88
  border-color: transparent;
89
89
  }
90
90
 
91
91
  &:active {
92
- background-color: system-tokens.$si-sys-background-accent-active;
92
+ background-color: system-tokens.$si-sys-color-background-accent-active;
93
93
  border-color: transparent;
94
94
  }
95
95
 
96
96
  &::after {
97
- background-color: system-tokens.$si-sys-text-on-accent;
97
+ background-color: system-tokens.$si-sys-color-text-on-accent;
98
98
  opacity: 1;
99
99
  }
100
100
 
101
101
  &[disabled] {
102
102
  border-color: transparent;
103
- background-color: system-tokens.$si-sys-text-disabled;
103
+ background-color: system-tokens.$si-sys-color-text-disabled;
104
104
  }
105
105
  }
106
106
 
@@ -135,26 +135,26 @@ $form-check-label-start: calc($form-check-size + map.get(spacers.$spacers-inline
135
135
 
136
136
  &:checked {
137
137
  border-color: transparent;
138
- background-color: system-tokens.$si-sys-background-accent;
138
+ background-color: system-tokens.$si-sys-color-background-accent;
139
139
 
140
140
  &::after {
141
141
  border-color: transparent;
142
- background-color: system-tokens.$si-sys-text-on-accent;
142
+ background-color: system-tokens.$si-sys-color-text-on-accent;
143
143
  }
144
144
 
145
145
  &:hover {
146
146
  border-color: transparent;
147
- background-color: system-tokens.$si-sys-background-accent-hover;
147
+ background-color: system-tokens.$si-sys-color-background-accent-hover;
148
148
  }
149
149
 
150
150
  &:active {
151
151
  border-color: transparent;
152
- background-color: system-tokens.$si-sys-border-accent-active;
152
+ background-color: system-tokens.$si-sys-color-border-accent-active;
153
153
  }
154
154
 
155
155
  &[disabled] {
156
156
  border-color: transparent;
157
- background-color: system-tokens.$si-sys-text-disabled;
157
+ background-color: system-tokens.$si-sys-color-text-disabled;
158
158
  }
159
159
  }
160
160
  }
@@ -163,7 +163,7 @@ $form-check-label-start: calc($form-check-size + map.get(spacers.$spacers-inline
163
163
  display: inline-block;
164
164
  position: relative;
165
165
  padding-inline-end: $form-check-padding-x;
166
- color: system-tokens.$si-sys-text-primary;
166
+ color: system-tokens.$si-sys-color-text-primary;
167
167
  }
168
168
 
169
169
  .form-check-input {
@@ -174,7 +174,7 @@ $form-check-label-start: calc($form-check-size + map.get(spacers.$spacers-inline
174
174
  }
175
175
 
176
176
  &[disabled] ~ .form-check-label {
177
- color: system-tokens.$si-sys-text-disabled;
177
+ color: system-tokens.$si-sys-color-text-disabled;
178
178
  }
179
179
 
180
180
  &:is([type='checkbox'], .si-form-checkbox) {
@@ -209,7 +209,7 @@ $form-check-label-start: calc($form-check-size + map.get(spacers.$spacers-inline
209
209
  + .btn {
210
210
  pointer-events: none;
211
211
  filter: none;
212
- color: system-tokens.$si-sys-text-disabled;
212
+ color: system-tokens.$si-sys-color-text-disabled;
213
213
  }
214
214
  }
215
215
  }
@@ -241,7 +241,7 @@ formly-field-multicheckbox {
241
241
  }
242
242
 
243
243
  &[disabled] ~ label {
244
- color: system-tokens.$si-sys-text-disabled;
244
+ color: system-tokens.$si-sys-color-text-disabled;
245
245
  }
246
246
  }
247
247
  }
@@ -256,7 +256,7 @@ formly-field-radio {
256
256
  }
257
257
 
258
258
  &[disabled] ~ label {
259
- color: system-tokens.$si-sys-text-disabled;
259
+ color: system-tokens.$si-sys-color-text-disabled;
260
260
  }
261
261
  }
262
262
  }