@siemens/element-theme 51.0.0-rc.1 → 51.0.0-rc.10

package/src/styles/bootstrap/_variables.scss

@@ -1,7 +1,8 @@
 @use '../variables/animations';
-@use '../variables/elevation';
+@use '../variables/system-tokens';
 @use '../variables/semantic-tokens';
 @use '../variables/spacers';
+@use '../variables/sizing';
 @use '../variables/typography';
 @use './functions';
 
@@ -42,18 +43,18 @@ $position-values: (
 //
 // Settings for the `<body>` element.
 
-$body-bg: semantic-tokens.$element-base-0 !default;
-$body-color: semantic-tokens.$element-text-primary !default;
+$body-bg: system-tokens.$si-sys-background-0 !default;
+$body-color: system-tokens.$si-sys-text-primary !default;
 $body-text-align: null !default;
 
 // Links
 //
 // Style anchor elements.
 
-$link-color: semantic-tokens.$element-ui-0;
+$link-color: system-tokens.$si-sys-text-accent;
 $link-decoration: none !default;
 $link-shade-percentage: 20% !default;
-$link-hover-color: semantic-tokens.$element-ui-0-hover;
+$link-hover-color: system-tokens.$si-sys-text-accent-hover;
 $link-hover-decoration: underline !default;
 $link-border-radius: semantic-tokens.$element-button-radius;
 
@@ -103,13 +104,15 @@ $container-max-widths: (
 // Set the number of columns and specify the width of the gutters.
 
 $grid-columns: 12 !default;
-$grid-gutter-width: spacers.$spacer !default;
+$grid-gutter-width: map.get(spacers.$spacers-inline, 6) !default;
 $grid-row-columns: 6 !default;
-$gutters: spacers.$spacers !default;
+$gutters-inline: spacers.$spacers-inline !default;
+$gutters-block: spacers.$spacers-block !default;
+$gutters: $gutters-block !default;
 
 // Container padding
 
-$container-padding-x: $grid-gutter-width * 0.5 !default;
+$container-padding-x: calc(#{$grid-gutter-width} * 0.5) !default;
 
 // Components
 //
@@ -124,16 +127,20 @@ $border-widths: (
   5: 5px
 ) !default;
 
-$border-color: semantic-tokens.$element-ui-4 !default;
+$border-color: system-tokens.$si-sys-border-4 !default;
 
 $border-radius: semantic-tokens.$element-radius-2 !default;
 $border-radius-sm: semantic-tokens.$element-radius-1 !default;
 $border-radius-lg: semantic-tokens.$element-radius-2 !default;
 $border-radius-pill: 50rem !default;
 
-$box-shadow: elevation.$element-elevation-2 !default;
-$box-shadow-sm: elevation.$element-elevation-1 !default;
-$box-shadow-lg: elevation.$element-elevation-3 !default;
+// DEPRECATED: Use $si-sys-effects-shadow-2 instead.
+$box-shadow: system-tokens.$si-sys-effects-shadow-2 !default;
+// DEPRECATED: Use $si-sys-effects-shadow-1 instead.
+$box-shadow-sm: system-tokens.$si-sys-effects-shadow-1 !default;
+// DEPRECATED: Use $si-sys-effects-shadow-3 instead.
+$box-shadow-lg: system-tokens.$si-sys-effects-shadow-3 !default;
+// DEPRECATED: There is no replacement.
 $box-shadow-inset: inset 0 1px 1px var(--element-box-shadow-color-2);
 
 $component-active-color: semantic-tokens.$element-ui-5 !default;
@@ -154,8 +161,7 @@ $aspect-ratios: (
 //
 // Font, line-height, and color for body text, headings, and more.
 $font-family-sans-serif: var(--element-body-font-family);
-$font-family-monospace:
-  SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !default;
+$font-family-monospace: typography.$si-font-family-mono !default;
 
 $font-family-base: $font-family-sans-serif !default;
 $font-family-code: $font-family-monospace !default;
@@ -163,13 +169,13 @@ $font-family-code: $font-family-monospace !default;
 // $font-size-base effects the font size of the body text
 $font-size-base: typography.$si-font-size-body !default;
 $font-size-lg: typography.$si-font-size-body-lg !default;
-$font-size-sm: typography.$si-font-size-caption !default;
+$font-size-sm: typography.$si-font-size-body-sm !default;
 
 $font-weight-lighter: typography.$si-font-weight-lighter;
 $font-weight-light: typography.$si-font-weight-light;
 $font-weight-normal: typography.$si-font-weight-normal;
 $font-weight-medium: typography.$si-font-weight-medium;
-$font-weight-semibold: typography.$si-font-weight-semibold;
+$font-weight-semibold: typography.$si-font-weight-sbold;
 $font-weight-bold: typography.$si-font-weight-bold;
 $font-weight-bolder: typography.$si-font-weight-bolder;
 
@@ -184,7 +190,7 @@ $h2-font-size: typography.$si-font-size-h2 !default;
 $h3-font-size: typography.$si-font-size-h3 !default;
 $h4-font-size: typography.$si-font-size-h4 !default;
 $h5-font-size: typography.$si-font-size-h5 !default;
-$h6-font-size: $font-size-base !default;
+$h6-font-size: typography.$si-font-size-h6 !default;
 
 $font-sizes: (
   1: $h1-font-size,
@@ -195,32 +201,32 @@ $font-sizes: (
   6: $h6-font-size
 ) !default;
 
-$headings-margin-bottom: spacers.$spacer * 0.5 !default;
+$headings-margin-bottom: map.get(spacers.$spacers-block, 4) !default;
 $headings-font-family: null !default;
 $headings-font-style: null !default;
-$headings-font-weight: typography.$si-font-weight-semibold !default;
+$headings-font-weight: typography.$si-font-weight-sbold !default;
 $headings-line-height: 1.2 !default;
-$headings-color: semantic-tokens.$element-text-primary !default;
+$headings-color: system-tokens.$si-sys-text-primary !default;
 
 $lead-font-size: typography.$si-font-size-body-lg !default;
 $lead-line-height: typography.$si-line-height-body-lg !default;
 $lead-font-weight: typography.$si-font-weight-body-lg !default;
 
-$small-font-size: typography.$si-font-size-caption !default;
+$small-font-size: typography.$si-font-size-body-sm !default;
 
 $sub-sup-font-size: 0.75em !default;
 
 $initialism-font-size: $small-font-size !default;
 
-$text-muted: semantic-tokens.$element-text-disabled !default;
+$text-disabled: system-tokens.$si-sys-text-disabled !default;
 
-$blockquote-margin-y: spacers.$spacer !default;
+$blockquote-margin-y: map.get(spacers.$spacers-block, 6) !default;
 $blockquote-font-size: typography.$si-font-size-body-lg !default;
-$blockquote-footer-color: semantic-tokens.$element-text-secondary !default;
+$blockquote-footer-color: system-tokens.$si-sys-text-secondary !default;
 $blockquote-footer-font-size: $small-font-size !default;
 
-$hr-margin-y: spacers.$spacer !default;
-$hr-color: semantic-tokens.$element-ui-4 !default;
+$hr-margin-y: map.get(spacers.$spacers-block, 6) !default;
+$hr-color: system-tokens.$si-sys-border-4 !default;
 $hr-height: $border-width !default;
 $hr-opacity: 1 !default;
 
@@ -236,34 +242,34 @@ $nested-kbd-font-weight: $font-weight-bold !default;
 
 $list-inline-padding: 0.5rem !default;
 
-$mark-bg: semantic-tokens.$element-status-caution;
-$mark-color: semantic-tokens.$element-status-caution-contrast;
+$mark-bg: system-tokens.$si-sys-background-caution;
+$mark-color: system-tokens.$si-sys-text-on-caution;
 
 // Tables
 //
 // Customizes the `.table` component with basic values, each used across all table variations.
 
-$table-cell-padding-y: map.get(spacers.$spacers, 4) !default;
-$table-cell-padding-x: map.get(spacers.$spacers, 4) !default;
-$table-cell-padding-y-sm: map.get(spacers.$spacers, 2) !default;
-$table-cell-padding-x-sm: map.get(spacers.$spacers, 4) !default;
+$table-cell-padding-y: map.get(spacers.$spacers-block, 4) !default;
+$table-cell-padding-x: map.get(spacers.$spacers-inline, 4) !default;
+$table-cell-padding-y-sm: map.get(spacers.$spacers-block, 2) !default;
+$table-cell-padding-x-sm: map.get(spacers.$spacers-inline, 4) !default;
 
 $table-cell-vertical-align: top !default;
 
 $table-color: $body-color !default;
-$table-bg: semantic-tokens.$element-base-1 !default;
+$table-bg: system-tokens.$si-sys-background-1 !default;
 $table-accent-bg: transparent !default;
 
 $table-th-font-weight: null !default;
 
 $table-striped-color: $table-color !default;
-$table-striped-bg: semantic-tokens.$element-base-0 !default;
+$table-striped-bg: system-tokens.$si-sys-background-0 !default;
 
 $table-active-color: $table-color !default;
-$table-active-bg: semantic-tokens.$element-base-1-selected !default;
+$table-active-bg: system-tokens.$si-sys-background-active !default;
 
 $table-hover-color: $table-color !default;
-$table-hover-bg: semantic-tokens.$element-base-1-hover !default;
+$table-hover-bg: system-tokens.$si-sys-background-hover !default;
 
 $table-border-width: $border-width !default;
 $table-border-color: $border-color !default;
@@ -272,31 +278,31 @@ $table-striped-order: odd !default;
 
 $table-group-separator-color: currentColor !default;
 
-$table-caption-color: $text-muted !default;
+$table-caption-color: semantic-tokens.$element-text-secondary !default;
 
 $table-variants: (
-  'success': semantic-tokens.$element-base-success,
-  'info': semantic-tokens.$element-base-information,
-  'warning': semantic-tokens.$element-base-warning,
-  'danger': semantic-tokens.$element-base-danger
+  'success': system-tokens.$si-sys-background-success-subtle,
+  'info': system-tokens.$si-sys-background-information-subtle,
+  'warning': system-tokens.$si-sys-background-warning-subtle,
+  'danger': system-tokens.$si-sys-background-danger-subtle
 ) !default;
 
 // Buttons
 //
 // For each of Bootstrap's buttons, define text, background, and border color.
 
-$btn-padding-y: map.get(spacers.$spacers, 4);
-$btn-padding-x: map.get(spacers.$spacers, 4);
+$btn-padding-y: map.get(spacers.$spacers-block, 4);
+$btn-padding-x: map.get(spacers.$spacers-inline, 4);
 $btn-font-size: $font-size-base;
 $btn-line-height: $line-height-base;
 $btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping
 
-$btn-padding-y-sm: map.get(spacers.$spacers, 2);
-$btn-padding-y-lg: map.get(spacers.$spacers, 5);
+$btn-padding-y-sm: map.get(spacers.$spacers-block, 2);
+$btn-padding-y-lg: map.get(spacers.$spacers-block, 5);
 
 $btn-link-color: $link-color !default;
 $btn-link-hover-color: $link-hover-color !default;
-$btn-link-disabled-color: semantic-tokens.$element-text-disabled !default;
+$btn-link-disabled-color: system-tokens.$si-sys-text-disabled !default;
 
 // Allows for customizing button radius independently from global border radius
 $btn-border-radius: semantic-tokens.$element-button-radius !default;
@@ -312,34 +318,39 @@ $btn-transition:
 // Forms
 // According to figma it should be 2px + line-height: 16px
 // As overriding line-height is not planned by bootstrap, we use 4px + line-height of 14px
-$form-text-margin-top: map.get(spacers.$spacers, 2);
+$form-text-margin-top: map.get(spacers.$spacers-block, 2);
 $form-text-font-size: $small-font-size !default;
 $form-text-font-style: null !default;
 $form-text-font-weight: null !default;
-$form-text-color: semantic-tokens.$element-text-secondary !default;
+$form-text-color: system-tokens.$si-sys-text-secondary !default;
 
 $form-label-margin-bottom: 4px !default;
 $form-label-font-size: typography.$si-font-size-body !default;
 $form-label-font-style: null !default;
 $form-label-font-weight: null !default;
-$form-label-color: semantic-tokens.$element-text-secondary !default;
+$form-label-color: system-tokens.$si-sys-text-secondary !default;
 
-$input-padding-y: (map.get(spacers.$spacers, 4) - 1px); // 8px including 1px border
-$input-padding-x: (map.get(spacers.$spacers, 4) - 1px); // 8px including 1px border
+$input-padding-y-full: map.get(spacers.$spacers-block, 4);
+$input-padding-y: calc(map.get(spacers.$spacers-block, 4) - 1px); // 8px including 1px border
+$input-padding-x-full: map.get(spacers.$spacers-inline, 4);
+$input-padding-x: calc(map.get(spacers.$spacers-inline, 4) - 1px); // 8px including 1px border
 $input-font-family: null !default;
 $input-font-size: $font-size-base;
 $input-font-weight: $font-weight-base;
 // Use an explicit rem value instead of a unitless ratio to prevent cross-browser
 // rounding differences (Safari rounds 14 × 1.1428... to 15px, Chrome to 16px). See #2031
-$input-line-height: typography.$si-line-height-body-rem !default;
+$input-line-height: calc(typography.$si-font-size-body * typography.$si-line-height-body);
 
-$input-bg: semantic-tokens.$element-base-1 !default;
-$input-disabled-bg: semantic-tokens.$element-base-1 !default;
-$input-disabled-border-color: semantic-tokens.$element-ui-4 !default;
+$input-bg: system-tokens.$si-sys-background-1 !default;
+$input-disabled-bg: system-tokens.$si-sys-background-1 !default;
+$input-disabled-color: system-tokens.$si-sys-text-disabled !default;
+$input-disabled-border-color: system-tokens.$si-sys-border-4 !default;
 
-$input-color: semantic-tokens.$element-text-primary !default;
-$input-border-color: semantic-tokens.$element-ui-2 !default;
+$input-color: system-tokens.$si-sys-text-primary !default;
+$input-border-color: system-tokens.$si-sys-border-2 !default;
+$input-focus-border-color: system-tokens.$si-sys-border-1 !default;
 $input-border-width: $border-width !default;
+// DEPRECATED: There is no replacement.
 $input-box-shadow: $box-shadow-inset !default;
 
 $input-border-radius: semantic-tokens.$element-input-radius !default;
@@ -347,21 +358,16 @@ $input-border-radius: semantic-tokens.$element-input-radius !default;
 $input-focus-bg: $input-bg !default;
 $input-focus-color: $input-color !default;
 
-$input-placeholder-color: semantic-tokens.$element-text-secondary !default;
+$input-placeholder-color: system-tokens.$si-sys-text-secondary !default;
 $input-placeholder-disabled-color: transparent !default;
 $input-plaintext-color: $body-color !default;
 
 $input-height-border: $input-border-width * 2 !default;
 
-$input-height: functions.add(1lh, ($input-padding-y + $input-border-width) * 2) !default;
+$input-height: map.get(sizing.$sizing, 80);
 
 // don't derive from $input-height as it generates a nested calc() expression
-$input-height-inner: functions.add($input-line-height, $input-padding-y * 2) !default;
-// Wrap in parenthesis: `*` binds tighter than `-`, so without them only the border term gets multiplied.
-// DEPRECATED: Calculate it yourself using $input-height-inner
-$input-height-inner-half: calc((#{$input-height-inner}) * 0.5) !default;
-// DEPRECATED: Calculate it yourself using $input-height-inner
-$input-height-inner-quarter: calc((#{$input-height-inner}) * 0.25) !default;
+$input-height-inner: calc(map.get(sizing.$sizing, 80) - (2 * 1px)) !default;
 
 $input-transition:
   border-color 0.15s ease-in-out,
@@ -374,15 +380,15 @@ $input-group-addon-padding-y: $input-padding-y !default;
 $input-group-addon-padding-x: $input-padding-x !default;
 $input-group-addon-font-weight: $input-font-weight !default;
 $input-group-addon-color: $input-color !default;
-$input-group-addon-bg: semantic-tokens.$element-ui-4 !default;
+$input-group-addon-bg: system-tokens.$si-sys-background-1 !default;
 $input-group-addon-border-color: $input-border-color !default;
 
 // Form validation
 
 $form-feedback-font-size: $form-text-font-size !default;
 $form-feedback-valid-color: null !default;
-$form-feedback-warning-color: semantic-tokens.$element-text-warning !default;
-$form-feedback-invalid-color: semantic-tokens.$element-text-danger !default;
+$form-feedback-warning-color: system-tokens.$si-sys-text-warning !default;
+$form-feedback-invalid-color: system-tokens.$si-sys-text-danger !default;
 
 $form-feedback-icon-valid: semantic-tokens.$element-feedback-icon-valid;
 $form-feedback-icon-invalid: semantic-tokens.$element-feedback-icon-invalid;
@@ -395,12 +401,12 @@ $form-validation-states: (
     'icon': $form-feedback-icon-valid
   ),
   'invalid': (
-    'color': semantic-tokens.$element-status-danger,
+    'color': system-tokens.$si-sys-border-danger,
     'text-color': $form-feedback-invalid-color,
     'icon': $form-feedback-icon-invalid
   ),
   'warning': (
-    'color': semantic-tokens.$element-status-warning,
+    'color': system-tokens.$si-sys-border-warning,
     'text-color': $form-feedback-warning-color,
     'icon': $form-feedback-icon-warning
   )
@@ -416,28 +422,28 @@ $form-validation-states: (
 // Navs
 
 $nav-link-padding-y: 10px;
-$nav-link-padding-x: map.get(spacers.$spacers, 8);
+$nav-link-padding-x: map.get(spacers.$spacers-inline, 8);
 $nav-link-font-size: typography.$si-font-size-h4;
 $nav-link-font-weight: typography.$si-font-weight-h4;
 $nav-link-line-height: typography.$si-line-height-h4;
-$nav-link-color: semantic-tokens.$element-text-primary !default;
+$nav-link-color: system-tokens.$si-sys-text-primary !default;
 $nav-link-hover-color: $link-hover-color !default;
 $nav-link-transition: ();
-$nav-link-disabled-color: semantic-tokens.$element-text-disabled !default;
+$nav-link-disabled-color: system-tokens.$si-sys-text-disabled !default;
 
 $nav-tabs-border-color: transparent;
 $nav-tabs-border-width: 2px;
 $nav-tabs-border-radius: 0;
 $nav-tabs-link-hover-border-color: transparent transparent $nav-tabs-border-color !default;
-$nav-tabs-link-active-color: semantic-tokens.$element-action-secondary-text-hover !default;
+$nav-tabs-link-active-color: system-tokens.$si-sys-text-accent-active !default;
 $nav-tabs-link-active-bg: transparent !default;
 
 // Badges
 $badge-font-size: typography.$si-font-size-body;
 $badge-font-weight: typography.$si-font-weight-body;
-$badge-color: semantic-tokens.$element-text-inverse !default;
-$badge-padding-y: map.get(spacers.$spacers, 1);
-$badge-padding-x: map.get(spacers.$spacers, 4);
+$badge-color: system-tokens.$si-sys-text-inverse !default;
+$badge-padding-y: map.get(spacers.$spacers-block, 1);
+$badge-padding-x: map.get(spacers.$spacers-inline, 4);
 $badge-border-radius: 0.75rem;
 $badge-dot-size: 0.625rem;
 $badge-line-height: 1.25rem;
@@ -448,50 +454,50 @@ $badge-height: calc($badge-line-height + 2 * $badge-padding-y);
 // Dropdown menu container and contents.
 $dropdown-min-width: 10rem !default;
 $dropdown-padding-x: 0 !default;
-$dropdown-padding-y: map.get(spacers.$spacers, 4) !default;
+$dropdown-padding-y: map.get(spacers.$spacers-block, 4) !default;
 $dropdown-spacer: 0.125rem !default;
 $dropdown-font-size: $font-size-base !default;
 // this is to have room for icon and badges
 $dropdown-line-height: $badge-height;
 $dropdown-color: $body-color !default;
-$dropdown-bg: semantic-tokens.$element-base-1 !default;
+$dropdown-bg: system-tokens.$si-sys-background-3 !default;
 $dropdown-border-radius: semantic-tokens.$element-radius-2 !default;
-$dropdown-divider-bg: semantic-tokens.$element-ui-4 !default;
+$dropdown-divider-bg: system-tokens.$si-sys-border-4 !default;
 $dropdown-divider-margin-y: 4px !default;
-$dropdown-box-shadow: elevation.$element-elevation-2 !default;
-$dropdown-link-color: semantic-tokens.$element-text-primary !default;
-$dropdown-link-disabled-color: semantic-tokens.$element-text-disabled !default;
-$dropdown-item-padding-y: map.get(spacers.$spacers, 2);
-$dropdown-item-padding-x: map.get(spacers.$spacers, 5);
-$dropdown-header-color: semantic-tokens.$element-text-primary !default;
+$dropdown-box-shadow: system-tokens.$si-sys-effects-shadow-2 !default;
+$dropdown-link-color: system-tokens.$si-sys-text-primary !default;
+$dropdown-link-disabled-color: system-tokens.$si-sys-text-disabled !default;
+$dropdown-item-padding-y: map.get(spacers.$spacers-block, 2);
+$dropdown-item-padding-x: map.get(spacers.$spacers-inline, 5);
+$dropdown-header-color: system-tokens.$si-sys-text-primary !default;
 
 // Cards
 
-$card-spacer-y: map.get(spacers.$spacers, 6) !default;
-$card-spacer-x: map.get(spacers.$spacers, 6) !default;
-$card-title-spacer-y: map.get(spacers.$spacers, 5) !default;
+$card-spacer-y: map.get(spacers.$spacers-block, 6) !default;
+$card-spacer-x: map.get(spacers.$spacers-inline, 6) !default;
+$card-title-spacer-y: map.get(spacers.$spacers-block, 5) !default;
 $card-border-radius: $border-radius !default;
 $card-inner-border-radius: $card-border-radius;
-$card-cap-padding-y: map.get(spacers.$spacers, 5) !default;
+$card-cap-padding-y: map.get(spacers.$spacers-block, 5) !default;
 $card-cap-padding-x: $card-spacer-x !default;
-$card-cap-bg: semantic-tokens.$element-base-1 !default;
+$card-cap-bg: system-tokens.$si-sys-background-1 !default;
 $card-cap-color: null !default;
 $card-height: null !default;
 $card-color: null !default;
-$card-bg: semantic-tokens.$element-base-1 !default;
-$card-img-overlay-padding: spacers.$spacer !default;
+$card-bg: system-tokens.$si-sys-background-1 !default;
+$card-img-overlay-padding: map.get(spacers.$spacers-block, 6) map.get(spacers.$spacers-inline, 6) !default;
 $card-group-margin: $grid-gutter-width !default;
 
 // Tooltips
 
 $tooltip-font-size: $font-size-base !default;
 $tooltip-max-width: 200px !default;
-$tooltip-color: semantic-tokens.$element-ui-5 !default;
-$tooltip-bg: semantic-tokens.$element-ui-1 !default;
+$tooltip-color: system-tokens.$si-sys-text-inverse !default;
+$tooltip-bg: system-tokens.$si-sys-background-inverse !default;
 $tooltip-border-radius: semantic-tokens.$element-radius-2 !default;
 $tooltip-opacity: 0.9 !default;
-$tooltip-padding-y: map.get(spacers.$spacers, 4) !default;
-$tooltip-padding-x: map.get(spacers.$spacers, 6) !default;
+$tooltip-padding-y: map.get(spacers.$spacers-block, 4) !default;
+$tooltip-padding-x: map.get(spacers.$spacers-inline, 6) !default;
 $tooltip-margin: 0 !default;
 
 $tooltip-arrow-width: 12px !default;
@@ -501,23 +507,24 @@ $tooltip-arrow-color: $tooltip-bg !default;
 // Popovers
 
 $popover-font-size: $font-size-base;
-$popover-bg: semantic-tokens.$element-base-3 !default;
+$popover-bg: system-tokens.$si-sys-background-3 !default;
 $popover-max-width: 276px !default;
 $popover-border-width: $border-width !default;
-$popover-border-color: semantic-tokens.$element-ui-4 !default;
+$popover-border-color: system-tokens.$si-sys-border-4 !default;
 $popover-border-radius: $border-radius-lg !default;
 $popover-inner-border-radius: functions.subtract(
   $popover-border-radius,
   $popover-border-width
 ) !default;
+// DEPRECATED: Use $si-sys-effects-shadow-3 instead.
 $popover-box-shadow: $box-shadow !default;
 
-$popover-header-bg: semantic-tokens.$element-base-3 !default;
-$popover-header-color: semantic-tokens.$element-text-active;
-$popover-header-padding-y: map.get(spacers.$spacers, 5) !default;
-$popover-header-padding-x: map.get(spacers.$spacers, 5) !default;
+$popover-header-bg: system-tokens.$si-sys-background-3 !default;
+$popover-header-color: system-tokens.$si-sys-text-accent;
+$popover-header-padding-y: map.get(spacers.$spacers-block, 5) !default;
+$popover-header-padding-x: map.get(spacers.$spacers-inline, 5) !default;
 
-$popover-body-color: semantic-tokens.$element-text-primary !default;
+$popover-body-color: system-tokens.$si-sys-text-primary !default;
 $popover-body-padding-y: $popover-header-padding-y !default;
 $popover-body-padding-x: $popover-header-padding-x !default;
 
@@ -530,35 +537,37 @@ $popover-arrow-outer-color: $popover-border-color !default;
 // Modals
 
 // Padding applied to the modal body
-$modal-inner-padding: map.get(spacers.$spacers, 8);
+$modal-inner-padding: map.get(spacers.$spacers-block, 8);
 
 // Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding
-$modal-footer-margin-between: map.get(spacers.$spacers, 6);
+$modal-footer-margin-between: map.get(spacers.$spacers-block, 6);
 
-$modal-dialog-margin: map.get(spacers.$spacers, 4);
-$modal-dialog-margin-y-sm-up: map.get(spacers.$spacers, 9);
+$modal-dialog-margin: map.get(spacers.$spacers-block, 4);
+$modal-dialog-margin-y-sm-up: map.get(spacers.$spacers-block, 9);
 
 $modal-title-line-height: typography.$si-line-height-h4 !default;
 
 $modal-content-color: null !default;
-$modal-content-bg: semantic-tokens.$element-base-1 !default;
+$modal-content-bg: system-tokens.$si-sys-background-1 !default;
 $modal-content-border-width: $border-width !default;
 $modal-content-border-radius: $border-radius-lg !default;
 $modal-content-inner-border-radius: functions.subtract(
   $modal-content-border-radius,
   $modal-content-border-width
 ) !default;
+// DEPRECATED: Use $si-sys-effects-shadow-3 instead.
 $modal-content-box-shadow-xs: $box-shadow-sm !default;
+// DEPRECATED: Use $si-sys-effects-shadow-2 instead.
 $modal-content-box-shadow-sm-up: $box-shadow !default;
 
-$modal-backdrop-bg: semantic-tokens.$element-base-translucent-1 !default;
+$modal-backdrop-bg: system-tokens.$si-sys-effects-backdrop !default;
 $modal-backdrop-opacity: 1 !default;
 $modal-header-border-color: $border-color !default;
 $modal-footer-border-color: $modal-header-border-color !default;
 $modal-header-border-width: 0 !default;
 $modal-footer-border-width: 0 !default;
-$modal-header-padding-y: map.get(spacers.$spacers, 5);
-$modal-header-padding-x: map.get(spacers.$spacers, 8);
+$modal-header-padding-y: map.get(spacers.$spacers-block, 5);
+$modal-header-padding-x: map.get(spacers.$spacers-inline, 8);
 
 $modal-sm: 300px !default;
 $modal-md: 500px !default;
@@ -575,49 +584,53 @@ $modal-scale-transform: scale(1.02) !default;
 // Define alert colors, border radius, and padding.
 
 $alert-padding-y: 10px !default;
-$alert-padding-x: map.get(spacers.$spacers, 5) !default;
+$alert-padding-x: map.get(spacers.$spacers-inline, 5) !default;
 $alert-margin-bottom: 0 !default;
 $alert-border-radius: 0 !default;
 $alert-link-font-weight: $font-weight-bold !default;
 $alert-border-width: 0 !default;
-$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
+$alert-dismissible-padding-r: calc(
+  $alert-padding-x * 3
+) !default; // 3x covers width of x plus default padding on either side
 
 // Progress bars
 
 $progress-height: 0.5rem !default;
-$progress-font-size: $font-size-base * 0.75 !default;
-$progress-bg: semantic-tokens.$element-ui-4 !default;
+$progress-font-size: calc(#{$font-size-base} * 0.75) !default;
+$progress-bg: system-tokens.$si-sys-border-4 !default;
 $progress-border-radius: $progress-height * 0.5 !default;
 $progress-box-shadow: none !default;
-$progress-bar-color: semantic-tokens.$element-text-inverse !default;
-$progress-bar-bg: semantic-tokens.$element-ui-0 !default;
+$progress-bar-color: system-tokens.$si-sys-background-accent !default;
+$progress-bar-bg: system-tokens.$si-sys-background-accent !default;
 $progress-bar-animation-timing: 1s linear infinite !default;
 $progress-bar-transition: width animations.element-transition-duration(0.6s) ease;
 
 // List group
+// @deprecated All `$list-group-*` variables below belong to the deprecated
+// Bootstrap list group. Use the Element list (`.list` / `.list-item`) instead.
 
-$list-group-color: semantic-tokens.$element-text-primary !default;
-$list-group-bg: semantic-tokens.$element-base-1 !default;
+$list-group-color: system-tokens.$si-sys-text-primary !default;
+$list-group-bg: system-tokens.$si-sys-background-1 !default;
 $list-group-border-color: $border-color !default;
 $list-group-border-width: $border-width !default;
 $list-group-border-radius: $border-radius !default;
 
-$list-group-item-padding-y: map.get(spacers.$spacers, 4) !default;
-$list-group-item-padding-x: map.get(spacers.$spacers, 6) !default; // 1.25rem !default;
+$list-group-item-padding-y: map.get(spacers.$spacers-block, 4) !default;
+$list-group-item-padding-x: map.get(spacers.$spacers-inline, 6) !default; // 1.25rem !default;
 
-$list-group-hover-bg: semantic-tokens.$element-base-1-hover !default;
+$list-group-hover-bg: system-tokens.$si-sys-background-hover !default;
 $list-group-active-color: $body-color !default;
-$list-group-active-bg: semantic-tokens.$element-base-1-selected !default;
+$list-group-active-bg: system-tokens.$si-sys-background-active !default;
 $list-group-active-border-color: $border-color !default;
 
-$list-group-disabled-color: semantic-tokens.$element-text-disabled !default;
+$list-group-disabled-color: system-tokens.$si-sys-text-disabled !default;
 $list-group-disabled-bg: $list-group-bg !default;
 
-$list-group-action-color: semantic-tokens.$element-text-primary !default;
+$list-group-action-color: system-tokens.$si-sys-text-primary !default;
 $list-group-action-hover-color: $list-group-action-color !important !default;
 
 $list-group-action-active-color: $body-color !default;
-$list-group-action-active-bg: semantic-tokens.$element-base-0 !default;
+$list-group-action-active-bg: system-tokens.$si-sys-background-0 !default;
 
 // Image thumbnails
 
@@ -626,22 +639,23 @@ $thumbnail-bg: $body-bg !default;
 $thumbnail-border-width: $border-width !default;
 $thumbnail-border-color: $border-color !default;
 $thumbnail-border-radius: $border-radius !default;
+// DEPRECATED: Use $si-sys-effects-shadow-1 instead.
 $thumbnail-box-shadow: $box-shadow-sm !default;
 
 // Figures
 
 $figure-caption-font-size: $small-font-size !default;
-$figure-caption-color: semantic-tokens.$element-text-secondary !default;
+$figure-caption-color: system-tokens.$si-sys-text-secondary !default;
 
 // Breadcrumbs
 
 $breadcrumb-font-size: null !default;
 $breadcrumb-padding-y: 0;
 $breadcrumb-padding-x: 0;
-$breadcrumb-item-padding-x: map.get(spacers.$spacers, 5);
+$breadcrumb-item-padding-x: map.get(spacers.$spacers-inline, 5);
 $breadcrumb-margin-bottom: 0;
 $breadcrumb-bg: inherit !default;
-$breadcrumb-divider-color: semantic-tokens.$element-ui-2 !default;
+$breadcrumb-divider-color: system-tokens.$si-sys-text-secondary !default;
 $breadcrumb-active-color: $link-color !default;
 $breadcrumb-divider: string.quote('>') !default;
 $breadcrumb-divider-flipped: $breadcrumb-divider !default;
@@ -651,22 +665,22 @@ $breadcrumb-border-radius: 0 !default;
 
 $code-font-size: typography.$si-font-size-body !default;
 $code-line-height: typography.$si-line-height-body !default;
-$code-color: semantic-tokens.$element-text-primary !default;
-$code-background: semantic-tokens.$element-ui-4 !default;
-$code-padding-y: map.get(spacers.$spacers, 1) !default;
-$code-padding-x: map.get(spacers.$spacers, 2) !default;
+$code-color: system-tokens.$si-sys-text-primary !default;
+$code-background: system-tokens.$si-sys-background-active !default;
+$code-padding-y: map.get(spacers.$spacers-block, 1) !default;
+$code-padding-x: map.get(spacers.$spacers-inline, 2) !default;
 $code-border-radius: semantic-tokens.$element-radius-1 !default;
 
 $kbd-padding-y: 0.2rem !default;
 $kbd-padding-x: 0.4rem !default;
-$kbd-color: semantic-tokens.$element-text-primary !default;
-$kbd-bg: semantic-tokens.$element-ui-1 !default;
+$kbd-color: system-tokens.$si-sys-text-primary !default;
+$kbd-bg: system-tokens.$si-sys-background-3 !default;
 // variable is unused. TODO: remove it.
 $kbd-font-size: $code-font-size !default;
 
-$pre-color: semantic-tokens.$element-text-primary !default;
-$pre-padding-y: map.get(spacers.$spacers, 4) !default;
-$pre-padding-x: map.get(spacers.$spacers, 4) !default;
-$pre-border-color: semantic-tokens.$element-ui-4 !default;
+$pre-color: system-tokens.$si-sys-text-primary !default;
+$pre-padding-y: map.get(spacers.$spacers-block, 4) !default;
+$pre-padding-x: map.get(spacers.$spacers-inline, 4) !default;
+$pre-border-color: system-tokens.$si-sys-border-4 !default;
 $pre-border-width: $border-width !default;
 $pre-border-radius: semantic-tokens.$element-radius-1 !default;