@siemens/element-theme 51.0.0-rc.7 → 51.0.0-rc.9

package/src/styles/bootstrap/_tables.scss

@@ -18,7 +18,7 @@
   --#{variables.$variable-prefix}table-hover-bg: #{variables.$table-hover-bg};
 
   inline-size: 100%;
-  margin-block-end: spacers.$spacer;
+  margin-block-end: map.get(spacers.$spacers-block, 6);
   color: variables.$table-color;
   vertical-align: variables.$table-cell-vertical-align;
   border-color: variables.$table-border-color;
@@ -55,17 +55,17 @@
     vertical-align: middle;
 
     &:first-child {
-      padding-inline-start: map.get(spacers.$spacers, 6);
+      padding-inline-start: map.get(spacers.$spacers-inline, 6);
     }
 
     &:last-child {
-      padding-inline-end: map.get(spacers.$spacers, 6);
+      padding-inline-end: map.get(spacers.$spacers-inline, 6);
     }
   }
 
   thead {
     border-width: 0;
-    border-block-end: map.get(spacers.$spacers, 2) solid variables.$table-border-color;
+    border-block-end: map.get(spacers.$spacers-block, 2) solid variables.$table-border-color;
 
     th {
       vertical-align: baseline;
@@ -96,7 +96,9 @@
     }
 
     :is(th, td) {
-      block-size: calc(2lh + 2 * map.get(spacers.$spacers, 2) + 2 * map.get(spacers.$spacers, 5));
+      block-size: calc(
+        2lh + 2 * map.get(spacers.$spacers-block, 2) + 2 * map.get(spacers.$spacers-block, 5)
+      );
     }
   }
 }
@@ -118,7 +120,7 @@
 
   tbody {
     :is(th, td) {
-      block-size: calc(2lh + 2 * map.get(spacers.$spacers, 4));
+      block-size: calc(2lh + 2 * map.get(spacers.$spacers-block, 4));
     }
   }
 }

package/src/styles/bootstrap/_type.scss

@@ -93,7 +93,7 @@
 }
 
 .blockquote-footer {
-  margin-block: -(variables.$blockquote-margin-y) variables.$blockquote-margin-y;
+  margin-block: calc(variables.$blockquote-margin-y * -1) variables.$blockquote-margin-y;
   font-size: variables.$blockquote-footer-font-size;
   color: variables.$blockquote-footer-color;
 
@@ -112,6 +112,7 @@ h1,
   );
 }
 
+// DEPRECATED: Use .si-h1 instead.
 .si-h1-bold {
   @include typography.si-font(
     typography.$si-font-size-h1-bold,
@@ -140,6 +141,7 @@ h3,
   );
 }
 
+// DEPRECATED: Use .si-h4 instead.
 .si-h4-bold {
   @include typography.si-font(
     typography.$si-font-size-h4-bold,
@@ -194,6 +196,14 @@ h6,
   );
 }
 
+.si-body-lg-sbold {
+  @include typography.si-font(
+    typography.$si-font-size-body-lg-sbold,
+    typography.$si-line-height-body-lg-sbold,
+    typography.$si-font-weight-body-lg-sbold
+  );
+}
+
 .si-body {
   @include typography.si-font(
     typography.$si-font-size-body,
@@ -202,6 +212,14 @@ h6,
   );
 }
 
+.si-body-sbold {
+  @include typography.si-font(
+    typography.$si-font-size-body-sbold,
+    typography.$si-line-height-body-sbold,
+    typography.$si-font-weight-body-sbold
+  );
+}
+
 .si-body-paragraph {
   @include typography.si-font(
     typography.$si-font-size-body-paragraph,
@@ -210,6 +228,14 @@ h6,
   );
 }
 
+.si-body-paragraph-sbold {
+  @include typography.si-font(
+    typography.$si-font-size-body-paragraph-sbold,
+    typography.$si-line-height-body-paragraph-sbold,
+    typography.$si-font-weight-body-paragraph-sbold
+  );
+}
+
 .si-body-sm {
   @include typography.si-font(
     typography.$si-font-size-body-sm,
@@ -218,6 +244,15 @@ h6,
   );
 }
 
+.si-body-sm-sbold {
+  @include typography.si-font(
+    typography.$si-font-size-body-sm-sbold,
+    typography.$si-line-height-body-sm-sbold,
+    typography.$si-font-weight-body-sm-sbold
+  );
+}
+
+// DEPRECATED: Use .si-body-sm instead.
 .si-caption {
   @include typography.si-font(
     typography.$si-font-size-caption,
@@ -235,6 +270,14 @@ h6,
   );
 }
 
+.si-display-xl-sbold {
+  @include typography.si-font(
+    typography.$si-font-size-display-xl-sbold,
+    typography.$si-line-height-display-xl-sbold,
+    typography.$si-font-weight-display-xl-sbold
+  );
+}
+
 .si-display-xxl {
   @include typography.si-font(
     typography.$si-font-size-display-xxl,
@@ -243,6 +286,14 @@ h6,
   );
 }
 
+.si-display-xxl-sbold {
+  @include typography.si-font(
+    typography.$si-font-size-display-xxl-sbold,
+    typography.$si-line-height-display-xxl-sbold,
+    typography.$si-font-weight-display-xxl-sbold
+  );
+}
+
 .si-display-lg,
 .display-2 {
   @include typography.si-font(
@@ -252,6 +303,15 @@ h6,
   );
 }
 
+.si-display-lg-sbold {
+  @include typography.si-font(
+    typography.$si-font-size-display-lg-sbold,
+    typography.$si-line-height-display-lg-sbold,
+    typography.$si-font-weight-display-lg-sbold
+  );
+}
+
+// DEPRECATED: Use .si-display-lg-sbold instead of .si-display-bold.
 .si-display-bold,
 .display-3 {
   @include typography.si-font(
@@ -261,6 +321,14 @@ h6,
   );
 }
 
+.si-display-sbold {
+  @include typography.si-font(
+    typography.$si-font-size-display-sbold,
+    typography.$si-line-height-display-sbold,
+    typography.$si-font-weight-display-sbold
+  );
+}
+
 .si-display,
 .display-4 {
   @include typography.si-font(

package/src/styles/bootstrap/_utilities.scss

@@ -35,17 +35,11 @@
   }
 }
 
+// Deprecated legacy utilities. Use system-token text utilities instead.
 $text-colors: (
-  'primary': system-tokens.$si-sys-text-accent,
   'body': system-tokens.$si-sys-text-primary,
-  'secondary': system-tokens.$si-sys-text-secondary,
   'tertiary': system-tokens.$si-sys-text-disabled,
-  'success': system-tokens.$si-sys-text-success,
   'info': system-tokens.$si-sys-text-information,
-  'warning': system-tokens.$si-sys-text-warning,
-  'caution': system-tokens.$si-sys-text-caution,
-  'danger': system-tokens.$si-sys-text-danger,
-  'inverse': system-tokens.$si-sys-text-inverse,
   'muted': system-tokens.$si-sys-text-disabled
 ) !default;
 
@@ -55,6 +49,7 @@ $text-colors: (
   }
 }
 
+// Deprecated legacy utilities. Use system-token background utilities instead.
 $background-colors: (
   'primary': system-tokens.$si-sys-background-accent,
   'secondary': system-tokens.$si-sys-text-secondary,

package/src/styles/bootstrap/_variables.scss

@@ -1,5 +1,4 @@
 @use '../variables/animations';
-@use '../variables/elevation';
 @use '../variables/system-tokens';
 @use '../variables/semantic-tokens';
 @use '../variables/spacers';
@@ -104,13 +103,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
 //
@@ -132,9 +133,13 @@ $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;
@@ -163,13 +168,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;
 
@@ -195,10 +200,10 @@ $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: system-tokens.$si-sys-text-primary !default;
 
@@ -206,20 +211,20 @@ $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: system-tokens.$si-sys-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: system-tokens.$si-sys-text-secondary !default;
 $blockquote-footer-font-size: $small-font-size !default;
 
-$hr-margin-y: spacers.$spacer !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;
@@ -243,10 +248,10 @@ $mark-color: system-tokens.$si-sys-text-on-caution;
 //
 // 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;
 
@@ -260,7 +265,7 @@ $table-striped-color: $table-color !default;
 $table-striped-bg: system-tokens.$si-sys-background-0 !default;
 
 $table-active-color: $table-color !default;
-$table-active-bg: system-tokens.$si-sys-background-selected !default;
+$table-active-bg: system-tokens.$si-sys-background-active !default;
 
 $table-hover-color: $table-color !default;
 $table-hover-bg: system-tokens.$si-sys-background-hover !default;
@@ -285,14 +290,14 @@ $table-variants: (
 //
 // 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;
@@ -312,7 +317,7 @@ $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;
@@ -324,14 +329,16 @@ $form-label-font-style: null !default;
 $form-label-font-weight: null !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: system-tokens.$si-sys-background-1 !default;
 $input-disabled-bg: system-tokens.$si-sys-background-1 !default;
@@ -342,6 +349,7 @@ $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;
@@ -355,10 +363,10 @@ $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: calc(1lh + ($input-padding-y-full * 2));
 
 // 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;
+$input-height-inner: calc($input-line-height + ($input-padding-y-full - 1px) * 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;
@@ -418,7 +426,7 @@ $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;
@@ -438,8 +446,8 @@ $nav-tabs-link-active-bg: transparent !default;
 $badge-font-size: typography.$si-font-size-body;
 $badge-font-weight: typography.$si-font-weight-body;
 $badge-color: system-tokens.$si-sys-text-inverse !default;
-$badge-padding-y: map.get(spacers.$spacers, 1);
-$badge-padding-x: map.get(spacers.$spacers, 4);
+$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;
@@ -450,7 +458,7 @@ $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
@@ -460,28 +468,28 @@ $dropdown-bg: system-tokens.$si-sys-background-1 !default;
 $dropdown-border-radius: semantic-tokens.$element-radius-2 !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-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, 2);
-$dropdown-item-padding-x: map.get(spacers.$spacers, 5);
+$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: system-tokens.$si-sys-background-1 !default;
 $card-cap-color: null !default;
 $card-height: null !default;
 $card-color: null !default;
 $card-bg: system-tokens.$si-sys-background-1 !default;
-$card-img-overlay-padding: spacers.$spacer !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
@@ -492,8 +500,8 @@ $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;
@@ -512,12 +520,13 @@ $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: system-tokens.$si-sys-background-3 !default;
 $popover-header-color: system-tokens.$si-sys-text-accent;
-$popover-header-padding-y: map.get(spacers.$spacers, 5) !default;
-$popover-header-padding-x: map.get(spacers.$spacers, 5) !default;
+$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: system-tokens.$si-sys-text-primary !default;
 $popover-body-padding-y: $popover-header-padding-y !default;
@@ -532,13 +541,13 @@ $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;
 
@@ -550,7 +559,9 @@ $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: system-tokens.$si-sys-effects-backdrop !default;
@@ -559,8 +570,8 @@ $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;
@@ -577,17 +588,19 @@ $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-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;
@@ -604,12 +617,12 @@ $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: system-tokens.$si-sys-background-hover !default;
 $list-group-active-color: $body-color !default;
-$list-group-active-bg: system-tokens.$si-sys-background-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: system-tokens.$si-sys-text-disabled !default;
@@ -628,6 +641,7 @@ $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
@@ -640,7 +654,7 @@ $figure-caption-color: system-tokens.$si-sys-text-secondary !default;
 $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: system-tokens.$si-sys-text-secondary !default;
@@ -654,9 +668,9 @@ $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: system-tokens.$si-sys-text-primary !default;
-$code-background: system-tokens.$si-sys-background-selected !default;
-$code-padding-y: map.get(spacers.$spacers, 1) !default;
-$code-padding-x: map.get(spacers.$spacers, 2) !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;
@@ -667,8 +681,8 @@ $kbd-bg: system-tokens.$si-sys-background-3 !default;
 $kbd-font-size: $code-font-size !default;
 
 $pre-color: system-tokens.$si-sys-text-primary !default;
-$pre-padding-y: map.get(spacers.$spacers, 4) !default;
-$pre-padding-x: map.get(spacers.$spacers, 4) !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;

package/src/styles/bootstrap/forms/_form-check.scss

@@ -9,13 +9,13 @@
 // there's too many differences between what BS5 does and what the design system expects
 @use 'sass:map';
 
-$form-check-size: 1rem;
-$form-radio-size: 1rem;
-$form-radio-inner-size: 0.375rem;
+$form-check-size: max(1rem, 16px); // FIXME: ref value
+$form-radio-size: max(1rem, 16px); // FIXME: ref value
+$form-radio-inner-size: max(0.375rem, 6px); // FIXME: ref value
 $form-radio-offset: calc((#{$form-radio-size} - #{$form-radio-inner-size}) * 0.5 - 1px);
-$form-check-padding-x: map.get(spacers.$spacers, 2);
+$form-check-padding-x: map.get(spacers.$spacers-inline, 2);
 
-$form-check-label-start: calc($form-check-size + map.get(spacers.$spacers, 4));
+$form-check-label-start: calc($form-check-size + map.get(spacers.$spacers-inline, 4));
 
 %form-check-spacing {
   .form-check-input {
@@ -24,9 +24,8 @@ $form-check-label-start: calc($form-check-size + map.get(spacers.$spacers, 4));
 }
 
 .form-check {
-  padding-block: map.get(spacers.$spacers, 1);
-  padding-inline-start: calc($form-check-size + map.get(spacers.$spacers, 4));
-  margin-block-end: map.get(spacers.$spacers, 2);
+  padding-block: map.get(spacers.$spacers-block, 1);
+  padding-inline-start: calc($form-check-size + map.get(spacers.$spacers-inline, 4));
 
   @extend %form-check-spacing;
 
@@ -37,7 +36,6 @@ $form-check-label-start: calc($form-check-size + map.get(spacers.$spacers, 4));
 
 .form-check-inline {
   display: inline-block;
-  margin-block-end: 0;
   margin-inline-end: variables.$form-check-inline-margin-end;
   @extend %form-check-spacing;
 }
@@ -55,7 +53,7 @@ $form-check-label-start: calc($form-check-size + map.get(spacers.$spacers, 4));
   }
 
   &:is(:active, .active) {
-    background: system-tokens.$si-sys-background-selected;
+    background: system-tokens.$si-sys-background-active;
   }
 
   &:is([disabled], .disabled) {
@@ -109,11 +107,11 @@ $form-check-label-start: calc($form-check-size + map.get(spacers.$spacers, 4));
   &:indeterminate {
     &::after {
       mask-image: none;
-      inline-size: 0.625rem;
-      block-size: 0.125rem;
+      inline-size: calc($form-check-size * 0.625);
+      block-size: calc($form-check-size * 0.125);
       opacity: 1;
-      inset-inline-start: 0.125rem;
-      inset-block-start: 0.375rem;
+      inset-inline-start: calc($form-check-size * 0.125);
+      inset-block-start: calc($form-check-size * 0.375);
     }
   }
 }