@siemens/element-theme 51.0.0-rc.4 → 51.0.0-rc.6

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 (32) hide show
  1. package/package.json +1 -1
  2. package/src/styles/_variables.scss +1 -0
  3. package/src/styles/bootstrap/_alert.scss +19 -19
  4. package/src/styles/bootstrap/_badges.scss +38 -38
  5. package/src/styles/bootstrap/_button-group.scss +9 -8
  6. package/src/styles/bootstrap/_buttons.scss +83 -82
  7. package/src/styles/bootstrap/_card.scss +13 -14
  8. package/src/styles/bootstrap/_dropdowns.scss +6 -6
  9. package/src/styles/bootstrap/_list-group.scss +13 -13
  10. package/src/styles/bootstrap/_nav.scss +7 -7
  11. package/src/styles/bootstrap/_pagination.scss +3 -2
  12. package/src/styles/bootstrap/_tables.scss +2 -2
  13. package/src/styles/bootstrap/_variables.scss +74 -71
  14. package/src/styles/bootstrap/forms/_form-check.scss +32 -62
  15. package/src/styles/bootstrap/forms/_form-control.scss +15 -15
  16. package/src/styles/bootstrap/forms/_form-file.scss +7 -7
  17. package/src/styles/bootstrap/forms/_form-range.scss +13 -13
  18. package/src/styles/components/_application-header.scss +23 -22
  19. package/src/styles/components/_datatable.scss +13 -12
  20. package/src/styles/components/_drag_drop.scss +4 -4
  21. package/src/styles/components/_layout.scss +14 -1
  22. package/src/styles/components/_links.scss +2 -2
  23. package/src/styles/components/_list-item.scss +7 -7
  24. package/src/styles/components/_markdown.scss +28 -14
  25. package/src/styles/components/_pills.scss +3 -3
  26. package/src/styles/components/_scrollbar.scss +4 -4
  27. package/src/styles/components/_skeleton.scss +4 -3
  28. package/src/styles/components/_switch.scss +12 -14
  29. package/src/styles/components/_widgets.scss +1 -1
  30. package/src/styles/variables/_focus.scss +4 -3
  31. package/src/styles/variables/_system-tokens.scss +180 -0
  32. package/src/theme/_theme-element.scss +362 -2
package/src/styles/bootstrap/_dropdowns.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  @use '../variables';
2
- @use '../variables/semantic-tokens';
2
+ @use '../variables/system-tokens';
3
3
  @use '../variables/spacers';
4
4
  @use '../variables/typography';
5
5
  @use '../variables/zindex';
@@ -126,15 +126,15 @@
126
126
 
127
127
  // duplicating hover styles from bootstrap. To split them from focus styles. Otherwise hover on focus elements will not work.
128
128
  &:hover {
129
- color: semantic-tokens.$element-text-primary;
130
- background-color: semantic-tokens.$element-base-1-hover;
129
+ color: system-tokens.$si-sys-text-primary;
130
+ background-color: system-tokens.$si-sys-background-hover;
131
131
  text-decoration: none;
132
132
  }
133
133
 
134
134
  // duplicating hover styles from bootstrap. To split them from focus styles. Otherwise hover on focus elements will not work.
135
135
  &:is(:active, .active) {
136
- color: var(--element-text-primary);
137
- background-color: var(--element-base-1-selected);
136
+ color: var(--si-sys-text-primary);
137
+ background-color: var(--si-sys-background-selected);
138
138
  }
139
139
 
140
140
  &:is(.disabled, :disabled) {
@@ -162,7 +162,7 @@
162
162
  // FIXME: drop when dropping si-menu-legacy
163
163
  .dropdown-item-static {
164
164
  &:is(.active, :active, :hover, :hover:focus:not(:focus-visible), :focus) {
165
- background-color: semantic-tokens.$element-base-1;
165
+ background-color: system-tokens.$si-sys-background-1;
166
166
  }
167
167
  }
168
168
 
package/src/styles/bootstrap/_list-group.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  @use 'sass:map';
2
2
 
3
3
  @use '../variables/focus';
4
- @use '../variables/semantic-tokens';
4
+ @use '../variables/system-tokens';
5
5
  @use '../variables/typography';
6
6
  @use 'mixins/breakpoints';
7
7
  @use 'variables';
@@ -168,31 +168,31 @@
168
168
  }
169
169
 
170
170
  .list-group-item-secondary {
171
- background-color: semantic-tokens.$element-ui-4;
172
- color: semantic-tokens.$element-text-primary;
171
+ background-color: system-tokens.$si-sys-background-neutral;
172
+ color: system-tokens.$si-sys-text-primary;
173
173
  }
174
174
 
175
175
  .list-group-item-success {
176
- color: semantic-tokens.$element-text-success;
177
- background: semantic-tokens.$element-base-success;
176
+ color: system-tokens.$si-sys-text-success;
177
+ background: system-tokens.$si-sys-background-success-subtle;
178
178
  }
179
179
 
180
180
  .list-group-item-warning {
181
- color: semantic-tokens.$element-text-warning;
182
- background: semantic-tokens.$element-base-warning;
181
+ color: system-tokens.$si-sys-text-warning;
182
+ background: system-tokens.$si-sys-background-warning-subtle;
183
183
  }
184
184
 
185
185
  .list-group-item-caution {
186
- background-color: semantic-tokens.$element-base-caution;
187
- color: semantic-tokens.$element-text-caution;
186
+ background-color: system-tokens.$si-sys-background-caution-subtle;
187
+ color: system-tokens.$si-sys-text-caution;
188
188
  }
189
189
 
190
190
  .list-group-item-danger {
191
- color: semantic-tokens.$element-text-danger;
192
- background: semantic-tokens.$element-base-danger;
191
+ color: system-tokens.$si-sys-text-danger;
192
+ background: system-tokens.$si-sys-background-danger-subtle;
193
193
  }
194
194
 
195
195
  .list-group-item-info {
196
- color: semantic-tokens.$element-text-information;
197
- background: semantic-tokens.$element-base-information;
196
+ color: system-tokens.$si-sys-text-information;
197
+ background: system-tokens.$si-sys-background-information-subtle;
198
198
  }
package/src/styles/bootstrap/_nav.scss CHANGED
@@ -1,4 +1,4 @@
1
- @use '../variables/semantic-tokens';
1
+ @use '../variables/system-tokens';
2
2
  @use '../variables/spacers';
3
3
  @use './variables';
4
4
 
@@ -16,9 +16,9 @@ $nav-tabs-min-width: 100px;
16
16
 
17
17
  .nav-link {
18
18
  &:hover {
19
- color: semantic-tokens.$element-action-secondary-text-hover;
20
- background: semantic-tokens.$element-action-secondary-hover;
21
- border-color: semantic-tokens.$element-action-secondary-border-hover;
19
+ color: system-tokens.$si-sys-text-on-accent-secondary-hover;
20
+ background: system-tokens.$si-sys-background-accent-secondary-hover;
21
+ border-color: system-tokens.$si-sys-border-accent-hover;
22
22
  }
23
23
  }
24
24
  }
@@ -57,12 +57,12 @@ $nav-tabs-min-width: 100px;
57
57
  inset-inline: 0;
58
58
  inset-block-end: 0;
59
59
  block-size: variables.$nav-tabs-border-width;
60
- background: semantic-tokens.$element-ui-4;
60
+ background: system-tokens.$si-sys-border-4;
61
61
  }
62
62
 
63
63
  &:focus-visible::before {
64
64
  // because otherwise the focus is cut off
65
- background: semantic-tokens.$element-focus-default;
65
+ background: system-tokens.$si-sys-effects-focus;
66
66
  }
67
67
 
68
68
  .nav-link {
@@ -84,7 +84,7 @@ $nav-tabs-min-width: 100px;
84
84
  }
85
85
 
86
86
  &.active {
87
- border-color: semantic-tokens.$element-action-secondary-border-hover;
87
+ border-color: system-tokens.$si-sys-border-accent-hover;
88
88
  }
89
89
 
90
90
  &:hover {
package/src/styles/bootstrap/_pagination.scss CHANGED
@@ -1,3 +1,4 @@
1
+ @use '../variables/system-tokens';
1
2
  @use '../variables/semantic-tokens';
2
3
  @use '../variables/spacers';
3
4
  @use '../variables/typography';
@@ -27,11 +28,11 @@ $page-button-size: 1.5rem;
27
28
  background: transparent;
28
29
  font-size: typography.$si-font-size-h5;
29
30
  font-weight: typography.$si-font-weight-h5;
30
- color: semantic-tokens.$element-text-primary;
31
+ color: system-tokens.$si-sys-text-primary;
31
32
  border: 0;
32
33
 
33
34
  &:is(.active, :hover:not(:disabled)):not(.separator) {
34
- background: semantic-tokens.$element-base-1-selected;
35
+ background: system-tokens.$si-sys-background-selected;
35
36
  }
36
37
 
37
38
  &:has(.icon) {
package/src/styles/bootstrap/_tables.scss CHANGED
@@ -96,7 +96,7 @@
96
96
  }
97
97
 
98
98
  :is(th, td) {
99
- block-size: 64px;
99
+ block-size: calc(2lh + 2 * map.get(spacers.$spacers, 2) + 2 * map.get(spacers.$spacers, 5));
100
100
  }
101
101
  }
102
102
  }
@@ -118,7 +118,7 @@
118
118
 
119
119
  tbody {
120
120
  :is(th, td) {
121
- block-size: 48px;
121
+ block-size: calc(2lh + 2 * map.get(spacers.$spacers, 4));
122
122
  }
123
123
  }
124
124
  }
package/src/styles/bootstrap/_variables.scss CHANGED
@@ -1,5 +1,6 @@
1
1
  @use '../variables/animations';
2
2
  @use '../variables/elevation';
3
+ @use '../variables/system-tokens';
3
4
  @use '../variables/semantic-tokens';
4
5
  @use '../variables/spacers';
5
6
  @use '../variables/typography';
@@ -42,18 +43,18 @@ $position-values: (
42
43
  //
43
44
  // Settings for the `<body>` element.
44
45
 
45
- $body-bg: semantic-tokens.$element-base-0 !default;
46
- $body-color: semantic-tokens.$element-text-primary !default;
46
+ $body-bg: system-tokens.$si-sys-background-0 !default;
47
+ $body-color: system-tokens.$si-sys-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: semantic-tokens.$element-ui-0;
54
+ $link-color: system-tokens.$si-sys-text-accent;
54
55
  $link-decoration: none !default;
55
56
  $link-shade-percentage: 20% !default;
56
- $link-hover-color: semantic-tokens.$element-ui-0-hover;
57
+ $link-hover-color: system-tokens.$si-sys-text-accent-hover;
57
58
  $link-hover-decoration: underline !default;
58
59
  $link-border-radius: semantic-tokens.$element-button-radius;
59
60
 
@@ -124,7 +125,7 @@ $border-widths: (
124
125
  5: 5px
125
126
  ) !default;
126
127
 
127
- $border-color: semantic-tokens.$element-ui-4 !default;
128
+ $border-color: system-tokens.$si-sys-border-4 !default;
128
129
 
129
130
  $border-radius: semantic-tokens.$element-radius-2 !default;
130
131
  $border-radius-sm: semantic-tokens.$element-radius-1 !default;
@@ -200,7 +201,7 @@ $headings-font-family: null !default;
200
201
  $headings-font-style: null !default;
201
202
  $headings-font-weight: typography.$si-font-weight-semibold !default;
202
203
  $headings-line-height: 1.2 !default;
203
- $headings-color: semantic-tokens.$element-text-primary !default;
204
+ $headings-color: system-tokens.$si-sys-text-primary !default;
204
205
 
205
206
  $lead-font-size: typography.$si-font-size-body-lg !default;
206
207
  $lead-line-height: typography.$si-line-height-body-lg !default;
@@ -212,15 +213,15 @@ $sub-sup-font-size: 0.75em !default;
212
213
 
213
214
  $initialism-font-size: $small-font-size !default;
214
215
 
215
- $text-muted: semantic-tokens.$element-text-disabled !default;
216
+ $text-muted: system-tokens.$si-sys-text-disabled !default;
216
217
 
217
218
  $blockquote-margin-y: spacers.$spacer !default;
218
219
  $blockquote-font-size: typography.$si-font-size-body-lg !default;
219
- $blockquote-footer-color: semantic-tokens.$element-text-secondary !default;
220
+ $blockquote-footer-color: system-tokens.$si-sys-text-secondary !default;
220
221
  $blockquote-footer-font-size: $small-font-size !default;
221
222
 
222
223
  $hr-margin-y: spacers.$spacer !default;
223
- $hr-color: semantic-tokens.$element-ui-4 !default;
224
+ $hr-color: system-tokens.$si-sys-border-4 !default;
224
225
  $hr-height: $border-width !default;
225
226
  $hr-opacity: 1 !default;
226
227
 
@@ -236,8 +237,8 @@ $nested-kbd-font-weight: $font-weight-bold !default;
236
237
 
237
238
  $list-inline-padding: 0.5rem !default;
238
239
 
239
- $mark-bg: semantic-tokens.$element-status-caution;
240
- $mark-color: semantic-tokens.$element-status-caution-contrast;
240
+ $mark-bg: system-tokens.$si-sys-background-caution;
241
+ $mark-color: system-tokens.$si-sys-text-on-caution;
241
242
 
242
243
  // Tables
243
244
  //
@@ -251,19 +252,19 @@ $table-cell-padding-x-sm: map.get(spacers.$spacers, 4) !default;
251
252
  $table-cell-vertical-align: top !default;
252
253
 
253
254
  $table-color: $body-color !default;
254
- $table-bg: semantic-tokens.$element-base-1 !default;
255
+ $table-bg: system-tokens.$si-sys-background-1 !default;
255
256
  $table-accent-bg: transparent !default;
256
257
 
257
258
  $table-th-font-weight: null !default;
258
259
 
259
260
  $table-striped-color: $table-color !default;
260
- $table-striped-bg: semantic-tokens.$element-base-0 !default;
261
+ $table-striped-bg: system-tokens.$si-sys-background-0 !default;
261
262
 
262
263
  $table-active-color: $table-color !default;
263
- $table-active-bg: semantic-tokens.$element-base-1-selected !default;
264
+ $table-active-bg: system-tokens.$si-sys-background-selected !default;
264
265
 
265
266
  $table-hover-color: $table-color !default;
266
- $table-hover-bg: semantic-tokens.$element-base-1-hover !default;
267
+ $table-hover-bg: system-tokens.$si-sys-background-hover !default;
267
268
 
268
269
  $table-border-width: $border-width !default;
269
270
  $table-border-color: $border-color !default;
@@ -275,10 +276,10 @@ $table-group-separator-color: currentColor !default;
275
276
  $table-caption-color: $text-muted !default;
276
277
 
277
278
  $table-variants: (
278
- 'success': semantic-tokens.$element-base-success,
279
- 'info': semantic-tokens.$element-base-information,
280
- 'warning': semantic-tokens.$element-base-warning,
281
- 'danger': semantic-tokens.$element-base-danger
279
+ 'success': system-tokens.$si-sys-background-success-subtle,
280
+ 'info': system-tokens.$si-sys-background-information-subtle,
281
+ 'warning': system-tokens.$si-sys-background-warning-subtle,
282
+ 'danger': system-tokens.$si-sys-background-danger-subtle
282
283
  ) !default;
283
284
 
284
285
  // Buttons
@@ -296,7 +297,7 @@ $btn-padding-y-lg: map.get(spacers.$spacers, 5);
296
297
 
297
298
  $btn-link-color: $link-color !default;
298
299
  $btn-link-hover-color: $link-hover-color !default;
299
- $btn-link-disabled-color: semantic-tokens.$element-text-disabled !default;
300
+ $btn-link-disabled-color: system-tokens.$si-sys-text-disabled !default;
300
301
 
301
302
  // Allows for customizing button radius independently from global border radius
302
303
  $btn-border-radius: semantic-tokens.$element-button-radius !default;
@@ -316,13 +317,13 @@ $form-text-margin-top: map.get(spacers.$spacers, 2);
316
317
  $form-text-font-size: $small-font-size !default;
317
318
  $form-text-font-style: null !default;
318
319
  $form-text-font-weight: null !default;
319
- $form-text-color: semantic-tokens.$element-text-secondary !default;
320
+ $form-text-color: system-tokens.$si-sys-text-secondary !default;
320
321
 
321
322
  $form-label-margin-bottom: 4px !default;
322
323
  $form-label-font-size: typography.$si-font-size-body !default;
323
324
  $form-label-font-style: null !default;
324
325
  $form-label-font-weight: null !default;
325
- $form-label-color: semantic-tokens.$element-text-secondary !default;
326
+ $form-label-color: system-tokens.$si-sys-text-secondary !default;
326
327
 
327
328
  $input-padding-y: (map.get(spacers.$spacers, 4) - 1px); // 8px including 1px border
328
329
  $input-padding-x: (map.get(spacers.$spacers, 4) - 1px); // 8px including 1px border
@@ -333,12 +334,14 @@ $input-font-weight: $font-weight-base;
333
334
  // rounding differences (Safari rounds 14 × 1.1428... to 15px, Chrome to 16px). See #2031
334
335
  $input-line-height: typography.$si-line-height-body-rem !default;
335
336
 
336
- $input-bg: semantic-tokens.$element-base-1 !default;
337
- $input-disabled-bg: semantic-tokens.$element-base-1 !default;
338
- $input-disabled-border-color: semantic-tokens.$element-ui-4 !default;
337
+ $input-bg: system-tokens.$si-sys-background-1 !default;
338
+ $input-disabled-bg: system-tokens.$si-sys-background-1 !default;
339
+ $input-disabled-color: system-tokens.$si-sys-text-disabled !default;
340
+ $input-disabled-border-color: system-tokens.$si-sys-border-4 !default;
339
341
 
340
- $input-color: semantic-tokens.$element-text-primary !default;
341
- $input-border-color: semantic-tokens.$element-ui-2 !default;
342
+ $input-color: system-tokens.$si-sys-text-primary !default;
343
+ $input-border-color: system-tokens.$si-sys-border-2 !default;
344
+ $input-focus-border-color: system-tokens.$si-sys-border-1 !default;
342
345
  $input-border-width: $border-width !default;
343
346
  $input-box-shadow: $box-shadow-inset !default;
344
347
 
@@ -347,7 +350,7 @@ $input-border-radius: semantic-tokens.$element-input-radius !default;
347
350
  $input-focus-bg: $input-bg !default;
348
351
  $input-focus-color: $input-color !default;
349
352
 
350
- $input-placeholder-color: semantic-tokens.$element-text-secondary !default;
353
+ $input-placeholder-color: system-tokens.$si-sys-text-secondary !default;
351
354
  $input-placeholder-disabled-color: transparent !default;
352
355
  $input-plaintext-color: $body-color !default;
353
356
 
@@ -374,15 +377,15 @@ $input-group-addon-padding-y: $input-padding-y !default;
374
377
  $input-group-addon-padding-x: $input-padding-x !default;
375
378
  $input-group-addon-font-weight: $input-font-weight !default;
376
379
  $input-group-addon-color: $input-color !default;
377
- $input-group-addon-bg: semantic-tokens.$element-ui-4 !default;
380
+ $input-group-addon-bg: system-tokens.$si-sys-background-1 !default;
378
381
  $input-group-addon-border-color: $input-border-color !default;
379
382
 
380
383
  // Form validation
381
384
 
382
385
  $form-feedback-font-size: $form-text-font-size !default;
383
386
  $form-feedback-valid-color: null !default;
384
- $form-feedback-warning-color: semantic-tokens.$element-text-warning !default;
385
- $form-feedback-invalid-color: semantic-tokens.$element-text-danger !default;
387
+ $form-feedback-warning-color: system-tokens.$si-sys-text-warning !default;
388
+ $form-feedback-invalid-color: system-tokens.$si-sys-text-danger !default;
386
389
 
387
390
  $form-feedback-icon-valid: semantic-tokens.$element-feedback-icon-valid;
388
391
  $form-feedback-icon-invalid: semantic-tokens.$element-feedback-icon-invalid;
@@ -395,12 +398,12 @@ $form-validation-states: (
395
398
  'icon': $form-feedback-icon-valid
396
399
  ),
397
400
  'invalid': (
398
- 'color': semantic-tokens.$element-status-danger,
401
+ 'color': system-tokens.$si-sys-border-danger,
399
402
  'text-color': $form-feedback-invalid-color,
400
403
  'icon': $form-feedback-icon-invalid
401
404
  ),
402
405
  'warning': (
403
- 'color': semantic-tokens.$element-status-warning,
406
+ 'color': system-tokens.$si-sys-border-warning,
404
407
  'text-color': $form-feedback-warning-color,
405
408
  'icon': $form-feedback-icon-warning
406
409
  )
@@ -420,22 +423,22 @@ $nav-link-padding-x: map.get(spacers.$spacers, 8);
420
423
  $nav-link-font-size: typography.$si-font-size-h4;
421
424
  $nav-link-font-weight: typography.$si-font-weight-h4;
422
425
  $nav-link-line-height: typography.$si-line-height-h4;
423
- $nav-link-color: semantic-tokens.$element-text-primary !default;
426
+ $nav-link-color: system-tokens.$si-sys-text-primary !default;
424
427
  $nav-link-hover-color: $link-hover-color !default;
425
428
  $nav-link-transition: ();
426
- $nav-link-disabled-color: semantic-tokens.$element-text-disabled !default;
429
+ $nav-link-disabled-color: system-tokens.$si-sys-text-disabled !default;
427
430
 
428
431
  $nav-tabs-border-color: transparent;
429
432
  $nav-tabs-border-width: 2px;
430
433
  $nav-tabs-border-radius: 0;
431
434
  $nav-tabs-link-hover-border-color: transparent transparent $nav-tabs-border-color !default;
432
- $nav-tabs-link-active-color: semantic-tokens.$element-action-secondary-text-hover !default;
435
+ $nav-tabs-link-active-color: system-tokens.$si-sys-text-accent-active !default;
433
436
  $nav-tabs-link-active-bg: transparent !default;
434
437
 
435
438
  // Badges
436
439
  $badge-font-size: typography.$si-font-size-body;
437
440
  $badge-font-weight: typography.$si-font-weight-body;
438
- $badge-color: semantic-tokens.$element-text-inverse !default;
441
+ $badge-color: system-tokens.$si-sys-text-inverse !default;
439
442
  $badge-padding-y: map.get(spacers.$spacers, 1);
440
443
  $badge-padding-x: map.get(spacers.$spacers, 4);
441
444
  $badge-border-radius: 0.75rem;
@@ -454,16 +457,16 @@ $dropdown-font-size: $font-size-base !default;
454
457
  // this is to have room for icon and badges
455
458
  $dropdown-line-height: $badge-height;
456
459
  $dropdown-color: $body-color !default;
457
- $dropdown-bg: semantic-tokens.$element-base-1 !default;
460
+ $dropdown-bg: system-tokens.$si-sys-background-1 !default;
458
461
  $dropdown-border-radius: semantic-tokens.$element-radius-2 !default;
459
- $dropdown-divider-bg: semantic-tokens.$element-ui-4 !default;
462
+ $dropdown-divider-bg: system-tokens.$si-sys-border-4 !default;
460
463
  $dropdown-divider-margin-y: 4px !default;
461
464
  $dropdown-box-shadow: elevation.$element-elevation-2 !default;
462
- $dropdown-link-color: semantic-tokens.$element-text-primary !default;
463
- $dropdown-link-disabled-color: semantic-tokens.$element-text-disabled !default;
465
+ $dropdown-link-color: system-tokens.$si-sys-text-primary !default;
466
+ $dropdown-link-disabled-color: system-tokens.$si-sys-text-disabled !default;
464
467
  $dropdown-item-padding-y: map.get(spacers.$spacers, 2);
465
468
  $dropdown-item-padding-x: map.get(spacers.$spacers, 5);
466
- $dropdown-header-color: semantic-tokens.$element-text-primary !default;
469
+ $dropdown-header-color: system-tokens.$si-sys-text-primary !default;
467
470
 
468
471
  // Cards
469
472
 
@@ -474,11 +477,11 @@ $card-border-radius: $border-radius !default;
474
477
  $card-inner-border-radius: $card-border-radius;
475
478
  $card-cap-padding-y: map.get(spacers.$spacers, 5) !default;
476
479
  $card-cap-padding-x: $card-spacer-x !default;
477
- $card-cap-bg: semantic-tokens.$element-base-1 !default;
480
+ $card-cap-bg: system-tokens.$si-sys-background-1 !default;
478
481
  $card-cap-color: null !default;
479
482
  $card-height: null !default;
480
483
  $card-color: null !default;
481
- $card-bg: semantic-tokens.$element-base-1 !default;
484
+ $card-bg: system-tokens.$si-sys-background-1 !default;
482
485
  $card-img-overlay-padding: spacers.$spacer !default;
483
486
  $card-group-margin: $grid-gutter-width !default;
484
487
 
@@ -486,8 +489,8 @@ $card-group-margin: $grid-gutter-width !default;
486
489
 
487
490
  $tooltip-font-size: $font-size-base !default;
488
491
  $tooltip-max-width: 200px !default;
489
- $tooltip-color: semantic-tokens.$element-ui-5 !default;
490
- $tooltip-bg: semantic-tokens.$element-ui-1 !default;
492
+ $tooltip-color: system-tokens.$si-sys-text-inverse !default;
493
+ $tooltip-bg: system-tokens.$si-sys-background-inverse !default;
491
494
  $tooltip-border-radius: semantic-tokens.$element-radius-2 !default;
492
495
  $tooltip-opacity: 0.9 !default;
493
496
  $tooltip-padding-y: map.get(spacers.$spacers, 4) !default;
@@ -501,10 +504,10 @@ $tooltip-arrow-color: $tooltip-bg !default;
501
504
  // Popovers
502
505
 
503
506
  $popover-font-size: $font-size-base;
504
- $popover-bg: semantic-tokens.$element-base-3 !default;
507
+ $popover-bg: system-tokens.$si-sys-background-3 !default;
505
508
  $popover-max-width: 276px !default;
506
509
  $popover-border-width: $border-width !default;
507
- $popover-border-color: semantic-tokens.$element-ui-4 !default;
510
+ $popover-border-color: system-tokens.$si-sys-border-4 !default;
508
511
  $popover-border-radius: $border-radius-lg !default;
509
512
  $popover-inner-border-radius: functions.subtract(
510
513
  $popover-border-radius,
@@ -512,12 +515,12 @@ $popover-inner-border-radius: functions.subtract(
512
515
  ) !default;
513
516
  $popover-box-shadow: $box-shadow !default;
514
517
 
515
- $popover-header-bg: semantic-tokens.$element-base-3 !default;
516
- $popover-header-color: semantic-tokens.$element-text-active;
518
+ $popover-header-bg: system-tokens.$si-sys-background-3 !default;
519
+ $popover-header-color: system-tokens.$si-sys-text-accent;
517
520
  $popover-header-padding-y: map.get(spacers.$spacers, 5) !default;
518
521
  $popover-header-padding-x: map.get(spacers.$spacers, 5) !default;
519
522
 
520
- $popover-body-color: semantic-tokens.$element-text-primary !default;
523
+ $popover-body-color: system-tokens.$si-sys-text-primary !default;
521
524
  $popover-body-padding-y: $popover-header-padding-y !default;
522
525
  $popover-body-padding-x: $popover-header-padding-x !default;
523
526
 
@@ -541,7 +544,7 @@ $modal-dialog-margin-y-sm-up: map.get(spacers.$spacers, 9);
541
544
  $modal-title-line-height: typography.$si-line-height-h4 !default;
542
545
 
543
546
  $modal-content-color: null !default;
544
- $modal-content-bg: semantic-tokens.$element-base-1 !default;
547
+ $modal-content-bg: system-tokens.$si-sys-background-1 !default;
545
548
  $modal-content-border-width: $border-width !default;
546
549
  $modal-content-border-radius: $border-radius-lg !default;
547
550
  $modal-content-inner-border-radius: functions.subtract(
@@ -551,7 +554,7 @@ $modal-content-inner-border-radius: functions.subtract(
551
554
  $modal-content-box-shadow-xs: $box-shadow-sm !default;
552
555
  $modal-content-box-shadow-sm-up: $box-shadow !default;
553
556
 
554
- $modal-backdrop-bg: semantic-tokens.$element-base-translucent-1 !default;
557
+ $modal-backdrop-bg: system-tokens.$si-sys-effects-backdrop !default;
555
558
  $modal-backdrop-opacity: 1 !default;
556
559
  $modal-header-border-color: $border-color !default;
557
560
  $modal-footer-border-color: $modal-header-border-color !default;
@@ -586,18 +589,18 @@ $alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width
586
589
 
587
590
  $progress-height: 0.5rem !default;
588
591
  $progress-font-size: $font-size-base * 0.75 !default;
589
- $progress-bg: semantic-tokens.$element-ui-4 !default;
592
+ $progress-bg: system-tokens.$si-sys-border-4 !default;
590
593
  $progress-border-radius: $progress-height * 0.5 !default;
591
594
  $progress-box-shadow: none !default;
592
- $progress-bar-color: semantic-tokens.$element-text-inverse !default;
593
- $progress-bar-bg: semantic-tokens.$element-ui-0 !default;
595
+ $progress-bar-color: system-tokens.$si-sys-background-accent !default;
596
+ $progress-bar-bg: system-tokens.$si-sys-background-accent !default;
594
597
  $progress-bar-animation-timing: 1s linear infinite !default;
595
598
  $progress-bar-transition: width animations.element-transition-duration(0.6s) ease;
596
599
 
597
600
  // List group
598
601
 
599
- $list-group-color: semantic-tokens.$element-text-primary !default;
600
- $list-group-bg: semantic-tokens.$element-base-1 !default;
602
+ $list-group-color: system-tokens.$si-sys-text-primary !default;
603
+ $list-group-bg: system-tokens.$si-sys-background-1 !default;
601
604
  $list-group-border-color: $border-color !default;
602
605
  $list-group-border-width: $border-width !default;
603
606
  $list-group-border-radius: $border-radius !default;
@@ -605,19 +608,19 @@ $list-group-border-radius: $border-radius !default;
605
608
  $list-group-item-padding-y: map.get(spacers.$spacers, 4) !default;
606
609
  $list-group-item-padding-x: map.get(spacers.$spacers, 6) !default; // 1.25rem !default;
607
610
 
608
- $list-group-hover-bg: semantic-tokens.$element-base-1-hover !default;
611
+ $list-group-hover-bg: system-tokens.$si-sys-background-hover !default;
609
612
  $list-group-active-color: $body-color !default;
610
- $list-group-active-bg: semantic-tokens.$element-base-1-selected !default;
613
+ $list-group-active-bg: system-tokens.$si-sys-background-selected !default;
611
614
  $list-group-active-border-color: $border-color !default;
612
615
 
613
- $list-group-disabled-color: semantic-tokens.$element-text-disabled !default;
616
+ $list-group-disabled-color: system-tokens.$si-sys-text-disabled !default;
614
617
  $list-group-disabled-bg: $list-group-bg !default;
615
618
 
616
- $list-group-action-color: semantic-tokens.$element-text-primary !default;
619
+ $list-group-action-color: system-tokens.$si-sys-text-primary !default;
617
620
  $list-group-action-hover-color: $list-group-action-color !important !default;
618
621
 
619
622
  $list-group-action-active-color: $body-color !default;
620
- $list-group-action-active-bg: semantic-tokens.$element-base-0 !default;
623
+ $list-group-action-active-bg: system-tokens.$si-sys-background-0 !default;
621
624
 
622
625
  // Image thumbnails
623
626
 
@@ -631,7 +634,7 @@ $thumbnail-box-shadow: $box-shadow-sm !default;
631
634
  // Figures
632
635
 
633
636
  $figure-caption-font-size: $small-font-size !default;
634
- $figure-caption-color: semantic-tokens.$element-text-secondary !default;
637
+ $figure-caption-color: system-tokens.$si-sys-text-secondary !default;
635
638
 
636
639
  // Breadcrumbs
637
640
 
@@ -641,7 +644,7 @@ $breadcrumb-padding-x: 0;
641
644
  $breadcrumb-item-padding-x: map.get(spacers.$spacers, 5);
642
645
  $breadcrumb-margin-bottom: 0;
643
646
  $breadcrumb-bg: inherit !default;
644
- $breadcrumb-divider-color: semantic-tokens.$element-ui-2 !default;
647
+ $breadcrumb-divider-color: system-tokens.$si-sys-text-secondary !default;
645
648
  $breadcrumb-active-color: $link-color !default;
646
649
  $breadcrumb-divider: string.quote('>') !default;
647
650
  $breadcrumb-divider-flipped: $breadcrumb-divider !default;
@@ -651,22 +654,22 @@ $breadcrumb-border-radius: 0 !default;
651
654
 
652
655
  $code-font-size: typography.$si-font-size-body !default;
653
656
  $code-line-height: typography.$si-line-height-body !default;
654
- $code-color: semantic-tokens.$element-text-primary !default;
655
- $code-background: semantic-tokens.$element-ui-4 !default;
657
+ $code-color: system-tokens.$si-sys-text-primary !default;
658
+ $code-background: system-tokens.$si-sys-background-selected !default;
656
659
  $code-padding-y: map.get(spacers.$spacers, 1) !default;
657
660
  $code-padding-x: map.get(spacers.$spacers, 2) !default;
658
661
  $code-border-radius: semantic-tokens.$element-radius-1 !default;
659
662
 
660
663
  $kbd-padding-y: 0.2rem !default;
661
664
  $kbd-padding-x: 0.4rem !default;
662
- $kbd-color: semantic-tokens.$element-text-primary !default;
663
- $kbd-bg: semantic-tokens.$element-ui-1 !default;
665
+ $kbd-color: system-tokens.$si-sys-text-primary !default;
666
+ $kbd-bg: system-tokens.$si-sys-background-3 !default;
664
667
  // variable is unused. TODO: remove it.
665
668
  $kbd-font-size: $code-font-size !default;
666
669
 
667
- $pre-color: semantic-tokens.$element-text-primary !default;
670
+ $pre-color: system-tokens.$si-sys-text-primary !default;
668
671
  $pre-padding-y: map.get(spacers.$spacers, 4) !default;
669
672
  $pre-padding-x: map.get(spacers.$spacers, 4) !default;
670
- $pre-border-color: semantic-tokens.$element-ui-4 !default;
673
+ $pre-border-color: system-tokens.$si-sys-border-4 !default;
671
674
  $pre-border-width: $border-width !default;
672
675
  $pre-border-radius: semantic-tokens.$element-radius-1 !default;