@siemens/element-theme 49.5.0 → 49.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siemens/element-theme",
-  "version": "49.5.0",
+  "version": "49.7.0",
   "description": "Element CSS theme.",
   "license": "MIT",
   "repository": {

package/src/styles/bootstrap/_badges.scss

@@ -1,6 +1,7 @@
 @use '../variables/semantic-tokens';
 @use '../variables/spacers';
 @use '../variables/typography';
+@use './mixins/badge-text';
 @use './variables';
 
 @use 'sass:map';
@@ -139,9 +140,9 @@
 
   &::after {
     content: '';
-    inline-size: 10px;
-    block-size: 10px;
-    border-radius: 5px;
+    inline-size: variables.$badge-dot-size;
+    block-size: variables.$badge-dot-size;
+    border-radius: 50%;
     position: absolute;
     inset-block-start: 0;
     inset-inline-end: 0;
@@ -150,22 +151,14 @@
 }
 
 .badge-text {
-  block-size: 14px;
-  min-inline-size: 14px;
-  border-radius: 7px;
-  position: relative;
+  @include badge-text.badge-text();
   background-color: semantic-tokens.$element-action-danger;
   color: semantic-tokens.$element-action-danger-text;
-  font-size: typography.$si-font-size-caption;
-  line-height: 13px;
-  padding-block: 0;
-  padding-inline: map.get(spacers.$spacers, 2);
-  font-family: variables.$font-family-sans-serif;
-  font-weight: typography.$si-font-weight-semibold;
+  position: relative;
 }
 
 :is(.icon, .icon-sm, .icon-lg) + .badge-text {
-  inset-block-start: -8px;
-  inset-inline-start: -12px;
-  margin-inline-end: -12px;
+  inset-block-start: -0.5rem;
+  inset-inline-start: -0.75rem;
+  margin-inline-end: -0.75rem;
 }

package/src/styles/bootstrap/_button-group.scss

@@ -6,10 +6,6 @@
 
 @use 'sass:map';
 
-$btn-size-default: 32px !default;
-$btn-size-lg: 40px !default;
-$btn-size-sm: 24px !default;
-
 .btn-group {
   position: relative;
   display: inline-flex;
@@ -56,36 +52,23 @@ $btn-size-sm: 24px !default;
     margin-inline-start: -1px;
   }
 
-  .btn {
-    block-size: $btn-size-default;
-
-    &.btn-lg {
-      block-size: $btn-size-lg;
-    }
-
-    &.btn-sm {
-      block-size: $btn-size-sm;
-    }
-  }
-
-  .btn-icon,
   // @deprecated Will be removed in a future major version, use .btn-icon instead.
   .icon-only {
-    inline-size: $btn-size-default;
-
-    &.btn-lg {
-      inline-size: $btn-size-lg;
-    }
+    min-inline-size: 0;
+    padding: 0;
+    aspect-ratio: 1 / 1;
+    block-size: calc(var(--btn-font-size) * var(--btn-line-height) + 2 * var(--btn-padding-y));
 
-    &.btn-sm {
-      inline-size: $btn-size-sm;
+    .icon {
+      margin: 0;
     }
   }
 
   // Dropdown toggle styling for split buttons
   .btn.dropdown-toggle {
-    inline-size: $btn-size-sm;
-    padding: 0;
+    aspect-ratio: 0;
+    padding-block: 0;
+    padding-inline: calc(map.get(spacers.$spacers, 1) - var(--btn-border-width, 0px));
     border-start-start-radius: 0;
     border-end-start-radius: 0;
 
@@ -103,12 +86,12 @@ $btn-size-sm: 24px !default;
   // Selection buttons
   .btn-check + .btn,
   label.btn:has(.btn-check) {
+    --btn-border-width: 1px;
+    --btn-border-color: #{semantic-tokens.$element-ui-4};
+    --btn-border-color-hover: #{semantic-tokens.$element-ui-4};
     cursor: pointer;
     background: transparent;
     color: semantic-tokens.$element-text-primary;
-    padding-block: calc(variables.$btn-padding-y - 1px);
-    padding-inline: calc(variables.$btn-padding-x - 1px);
-    border: 1px solid semantic-tokens.$element-ui-4;
     transition: none;
 
     &.btn-icon {

package/src/styles/bootstrap/_buttons.scss

@@ -8,30 +8,24 @@
 
 @use 'sass:map';
 
-$btn-icon-font-size-default: variables.$si-icon-font-size !default;
-$btn-icon-font-size-lg: variables.$si-icon-font-size-lg !default;
-$btn-icon-font-size-sm: variables.$si-icon-font-size !default;
-$btn-icon-size-default: 2rem !default;
-$btn-icon-size-lg: 2.5rem !default;
-$btn-icon-size-sm: 1.5rem !default;
+$btn-icon-font-size: variables.$si-icon-font-size;
 
 // there are some non .btn buttons used in element
 button {
   color: semantic-tokens.$element-text-primary;
 }
 
-@mixin button-icon-size($btn-size, $font-size) {
-  inline-size: $btn-size;
-  block-size: $btn-size;
-  font-size: $font-size;
-}
-
 :is(.btn, .btn-close) {
-  line-height: bootstrap-variables.$btn-line-height;
-  font-weight: typography.$si-font-weight-h5;
-  padding-block: calc(bootstrap-variables.$btn-padding-y - var(--btn-border-width, 0px));
+  --btn-icon-size: #{$btn-icon-font-size};
+  --btn-font-size: #{bootstrap-variables.$btn-font-size};
+  --btn-font-weight: #{typography.$si-font-weight-semibold};
+  --btn-line-height: #{bootstrap-variables.$btn-line-height};
+  --btn-padding-y: #{bootstrap-variables.$btn-padding-y};
+  line-height: var(--btn-line-height);
+  font-weight: var(--btn-font-weight);
+  padding-block: calc(var(--btn-padding-y) - var(--btn-border-width, 0px));
   padding-inline: calc(bootstrap-variables.$btn-padding-x - var(--btn-border-width, 0px));
-  font-size: bootstrap-variables.$btn-font-size;
+  font-size: var(--btn-font-size);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -68,7 +62,8 @@ button {
   }
 
   .icon {
-    margin-block: -#{map.get(spacers.$spacers, 2)};
+    font-size: var(--btn-icon-size);
+    margin-block: calc((var(--btn-icon-size) - var(--btn-font-size)) / -2);
     margin-inline-end: #{map.get(spacers.$spacers, 2)};
   }
 }
@@ -187,7 +182,7 @@ button {
   --btn-color: #{bootstrap-variables.$btn-link-color};
   --btn-color-hover: #{bootstrap-variables.$btn-link-hover-color};
   --btn-color-active: #{semantic-tokens.$element-action-primary-active};
-  font-weight: typography.$si-font-weight-body;
+  --btn-font-weight: #{typography.$si-font-weight-body};
   justify-content: flex-start;
   text-decoration: bootstrap-variables.$link-decoration;
   padding: 0;
@@ -208,71 +203,44 @@ button {
   display: inline-flex;
   padding: 0;
   flex-shrink: 0;
+  font-size: var(--btn-icon-size);
+  aspect-ratio: 1 / 1;
+  block-size: calc(var(--btn-font-size) * var(--btn-line-height) + 2 * var(--btn-padding-y));
 
   .icon {
+    margin-block: 0;
     margin-inline: 0;
   }
 }
 
-.btn-icon {
-  border-radius: semantic-tokens.$element-button-radius;
-}
-
 .btn-circle {
   border-radius: 50%;
 }
 
-.btn-circle,
-.btn-icon {
-  & {
-    @include button-icon-size($btn-icon-size-default, $btn-icon-font-size-default);
-  }
-
-  &.btn-lg {
-    @include button-icon-size($btn-icon-size-lg, $btn-icon-font-size-lg);
-  }
-
-  &.btn-sm {
-    @include button-icon-size($btn-icon-size-sm, $btn-icon-font-size-sm);
-  }
+.btn-lg {
+  --btn-padding-y: #{bootstrap-variables.$btn-padding-y-lg};
+}
 
-  .icon {
-    margin-block: 0;
-    margin-inline: 0;
-  }
+.btn-sm {
+  --btn-padding-y: #{bootstrap-variables.$btn-padding-y-sm};
 }
 
+// this is for compatibility so that old markup looks ok-ish
 .btn-close {
+  --btn-font-weight: #{typography.$si-font-weight-normal};
   --btn-bg: transparent;
   --btn-bg-hover: #{semantic-tokens.$element-base-1-hover};
   --btn-bg-active: #{semantic-tokens.$element-base-1-selected};
   --btn-color: #{semantic-tokens.$element-ui-1};
   --btn-color-active: #{semantic-tokens.$element-ui-1};
-}
-
-.btn-close.btn-tertiary {
-  --btn-bg-hover: #{semantic-tokens.$element-action-secondary-hover};
-  --btn-bg-active: #{semantic-tokens.$element-action-secondary-active};
-  --btn-color: #{semantic-tokens.$element-action-secondary-text};
-  --btn-color-hover: #{semantic-tokens.$element-action-secondary-text-hover};
-  --btn-color-active: #{semantic-tokens.$element-action-primary-active};
-}
-
-.btn-lg {
-  font-size: bootstrap-variables.$btn-font-size-lg;
-  line-height: 1.5;
-}
-
-.btn-sm {
-  font-size: bootstrap-variables.$btn-font-size-sm;
-  line-height: map.get(spacers.$spacers, 4);
-}
 
-// this is for compatibility so that old markup looks ok-ish
-.btn-close {
-  @include button-icon-size($btn-icon-size-default, $btn-icon-font-size-default);
-
-  font-weight: typography.$si-font-weight-normal;
+  &.btn-tertiary {
+    --btn-bg-hover: #{semantic-tokens.$element-action-secondary-hover};
+    --btn-bg-active: #{semantic-tokens.$element-action-secondary-active};
+    --btn-color: #{semantic-tokens.$element-action-secondary-text};
+    --btn-color-hover: #{semantic-tokens.$element-action-secondary-text-hover};
+    --btn-color-active: #{semantic-tokens.$element-action-primary-active};
+  }
 
   &::before {
     content: '\002715';
@@ -303,7 +271,7 @@ button {
     typography.$si-font-weight-body
   );
   padding-block: bootstrap-variables.$input-padding-y;
-  padding-inline: 7px;
+  padding-inline: bootstrap-variables.$btn-padding-x - bootstrap-variables.$input-border-width;
 
   border-radius: bootstrap-variables.$input-border-radius;
   justify-content: flex-start;

package/src/styles/bootstrap/_card.scss

@@ -117,9 +117,7 @@ button.card {
 }
 
 .card-header {
-  font-size: typography.$si-font-size-h5;
-  font-weight: typography.$si-font-weight-h5;
-  min-block-size: map.get(spacers.$spacers, 9) + map.get(spacers.$spacers, 4);
+  min-block-size: calc(1lh + 2 * variables.$card-cap-padding-y);
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
@@ -127,7 +125,12 @@ button.card {
   padding-inline: variables.$card-cap-padding-x;
   margin-block-end: 0; // Removes the default margin-bottom of <hN>
   color: variables.$card-cap-color;
-  line-height: typography.$si-font-size-h5;
+
+  @include typography.si-font(
+    typography.$si-font-size-h5,
+    typography.$si-line-height-h5,
+    typography.$si-font-weight-h5
+  );
 
   + * .card-body, // for action cards, where we wrap the content
   + .card-body {

package/src/styles/bootstrap/_dropdowns.scss

@@ -23,7 +23,6 @@
   overflow-y: auto;
   padding-block: bootstrap-variables.$dropdown-padding-y;
   padding-inline: bootstrap-variables.$dropdown-padding-x;
-  font-size: bootstrap-variables.$dropdown-font-size;
   color: bootstrap-variables.$dropdown-color;
   list-style: none;
   background-color: bootstrap-variables.$dropdown-bg;
@@ -39,8 +38,7 @@
   }
 }
 
-.dropdown-menu,
-.dropdown-item {
+:is(.dropdown-menu, .dropdown-item) {
   .icon + .item-title {
     padding-inline-start: map.get(spacers.$spacers, 4);
   }
@@ -83,11 +81,13 @@
   display: flex;
   flex-wrap: nowrap;
   align-items: center;
-  block-size: 32px;
+  block-size: calc(1lh + 2 * bootstrap-variables.$dropdown-item-padding-y);
   inline-size: 100%;
   padding-block: bootstrap-variables.$dropdown-item-padding-y;
   padding-inline: bootstrap-variables.$dropdown-item-padding-x;
   color: bootstrap-variables.$dropdown-link-color;
+  font-size: bootstrap-variables.$dropdown-font-size;
+  line-height: bootstrap-variables.$dropdown-line-height;
   text-decoration: none;
 }
 
@@ -153,7 +153,7 @@
 
 .dropdown-header {
   display: block;
-  padding-block: bootstrap-variables.$dropdown-padding-y;
+  padding-block: bootstrap-variables.$dropdown-item-padding-y;
   padding-inline: bootstrap-variables.$dropdown-item-padding-x;
   margin-block-end: 0; // for use with heading elements
   color: bootstrap-variables.$dropdown-header-color;

package/src/styles/bootstrap/_list-group.scss

@@ -101,11 +101,11 @@
 }
 
 .list-group-lg .list-group-item {
-  min-block-size: 64px;
+  min-block-size: calc(3rem + 2 * variables.$list-group-item-padding-y);
 }
 
 .list-group-md .list-group-item {
-  min-block-size: 48px;
+  min-block-size: calc(2rem + 2 * variables.$list-group-item-padding-y);
 }
 
 .list-header {

package/src/styles/bootstrap/_modals.scss

@@ -2,6 +2,7 @@
 @use '../variables/typography';
 @use '../variables/zindex';
 @use '../variables/si-vars';
+@use '../variables/animations';
 @use './functions';
 @use './mixins/backdrop';
 @use './mixins/breakpoints';
@@ -25,6 +26,18 @@
   // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
   // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
   // See also https://github.com/twbs/bootstrap/issues/17695
+
+  transition: variables.$transition-fade;
+  opacity: 1;
+
+  @starting-style {
+    opacity: 0;
+  }
+
+  &.dialog-leave {
+    opacity: 0;
+    transition-duration: animations.element-transition-duration(0.3s);
+  }
 }
 
 .modal-dialog {
@@ -36,13 +49,15 @@
   // because of :focus-visible that shouldn't be visible
   box-shadow: none !important; // stylelint-disable-line declaration-no-important
 
-  .modal.fade & {
-    transition: variables.$modal-transition;
+  transition: variables.$modal-transition;
+  transform: variables.$modal-show-transform;
+
+  @starting-style {
     transform: variables.$modal-fade-transform;
   }
 
-  .modal.show & {
-    transform: variables.$modal-show-transform;
+  .modal.dialog-leave & {
+    transform: variables.$modal-fade-transform;
   }
 
   // When trying to close, animate focus to scale

package/src/styles/bootstrap/_nav.scss

@@ -4,7 +4,7 @@
 
 @use 'sass:map';
 
-$nav-tabs-height: 40px;
+$nav-tabs-height: calc(1lh + 2 * variables.$nav-link-padding-y);
 $nav-tabs-min-width: 100px;
 
 .nav {
@@ -29,6 +29,7 @@ $nav-tabs-min-width: 100px;
   padding-inline: variables.$nav-link-padding-x;
   font-size: variables.$nav-link-font-size;
   font-weight: variables.$nav-link-font-weight;
+  line-height: variables.$nav-link-line-height;
   color: variables.$nav-link-color;
 
   &:is(:hover, :focus) {
@@ -46,7 +47,6 @@ $nav-tabs-min-width: 100px;
 
 .nav-tabs {
   position: relative;
-  block-size: $nav-tabs-height;
   line-height: 1.125rem;
   border: 0;
   flex-wrap: nowrap;
@@ -71,7 +71,6 @@ $nav-tabs-min-width: 100px;
     justify-content: center;
     block-size: $nav-tabs-height;
     min-inline-size: $nav-tabs-min-width;
-    margin-block-end: -(variables.$nav-tabs-border-width);
     background: none;
     border-style: solid;
     border-color: transparent;

package/src/styles/bootstrap/_pagination.scss

@@ -5,7 +5,7 @@
 
 @use 'sass:map';
 
-$page-button-size: 24px;
+$page-button-size: 1.5rem;
 
 .pagination {
   display: flex;

package/src/styles/bootstrap/_tooltip.scss

@@ -35,7 +35,6 @@
 }
 
 .tooltip-inner {
-  min-inline-size: 100px;
   max-inline-size: variables.$tooltip-max-width;
   padding-block: variables.$tooltip-padding-y;
   padding-inline: variables.$tooltip-padding-x;

package/src/styles/bootstrap/_variables.scss

@@ -184,8 +184,8 @@ $line-height-lg: 2 !default;
 $h1-font-size: typography.$si-font-size-h1 !default;
 $h2-font-size: typography.$si-font-size-h2 !default;
 $h3-font-size: typography.$si-font-size-h3 !default;
-$h4-font-size: 1rem !default;
-$h5-font-size: $font-size-base !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;
 
 $font-sizes: (
@@ -290,11 +290,11 @@ $table-variants: (
 $btn-padding-y: map.get(spacers.$spacers, 4);
 $btn-padding-x: map.get(spacers.$spacers, 4);
 $btn-font-size: $font-size-base;
-$btn-line-height: typography.$si-line-height-h5 !default;
+$btn-line-height: $line-height-base;
 $btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping
 
-$btn-font-size-sm: $font-size-sm;
-$btn-font-size-lg: $font-size-lg;
+$btn-padding-y-sm: map.get(spacers.$spacers, 2);
+$btn-padding-y-lg: map.get(spacers.$spacers, 5);
 
 $btn-link-color: $link-color !default;
 $btn-link-hover-color: $link-hover-color !default;
@@ -353,18 +353,18 @@ $input-plaintext-color: $body-color !default;
 
 $input-height-border: $input-border-width * 2 !default;
 
-$input-height-inner: functions.add($input-line-height * 1em, $input-padding-y * 2) !default;
-$input-height-inner-half: functions.add($input-line-height * 0.5em, $input-padding-y) !default;
-$input-height-inner-quarter: functions.add(
-  $input-line-height * 0.25em,
-  $input-padding-y * 0.5
-) !default;
-
 $input-height: functions.add(
   $input-line-height * 1em,
   functions.add($input-padding-y * 2, $input-height-border, false)
 ) !default;
 
+$input-height-inner: functions.subtract($input-height, $input-height-border, false) !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-transition:
   border-color 0.15s ease-in-out,
   box-shadow 0.15s ease-in-out !default;
@@ -421,6 +421,7 @@ $nav-link-padding-y: 10px;
 $nav-link-padding-x: map.get(spacers.$spacers, 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-hover-color: $link-hover-color !default;
 $nav-link-transition: ();
@@ -441,6 +442,7 @@ $dropdown-padding-x: 0 !default;
 $dropdown-padding-y: map.get(spacers.$spacers, 4) !default;
 $dropdown-spacer: 0.125rem !default;
 $dropdown-font-size: $font-size-base !default;
+$dropdown-line-height: $line-height-base;
 $dropdown-color: $body-color !default;
 $dropdown-bg: semantic-tokens.$element-base-1 !default;
 $dropdown-border-radius: semantic-tokens.$element-radius-2 !default;
@@ -449,7 +451,7 @@ $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: 6px !default;
+$dropdown-item-padding-y: map.get(spacers.$spacers, 4);
 $dropdown-item-padding-x: map.get(spacers.$spacers, 5);
 $dropdown-header-color: semantic-tokens.$element-text-primary !default;
 
@@ -522,6 +524,7 @@ $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-border-radius: 0.75rem;
+$badge-dot-size: 0.625rem;
 
 // Modals
 

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

@@ -8,23 +8,23 @@
 // there's too many differences between what BS5 does and what the design system expects
 @use 'sass:map';
 
-$form-check-size: map.get(spacers.$spacers, 6);
-$form-radio-size: map.get(spacers.$spacers, 6);
-$form-radio-inner-size: map.get(spacers.$spacers, 3);
-$form-radio-offset: ($form-radio-size - $form-radio-inner-size) * 0.5 - 1px;
+$form-check-size: 1rem;
+$form-radio-size: 1rem;
+$form-radio-inner-size: 0.375rem;
+$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-label-start: $form-check-size + map.get(spacers.$spacers, 4);
+$form-check-label-start: calc($form-check-size + map.get(spacers.$spacers, 4));
 
 %form-check-spacing {
   .form-check-input {
-    margin-inline-start: -1 * $form-check-label-start;
+    margin-inline-start: calc(-1 * $form-check-label-start);
   }
 }
 
 .form-check {
   padding-block: map.get(spacers.$spacers, 1);
-  padding-inline-start: map.get(spacers.$spacers, 8);
+  padding-inline-start: calc($form-check-size + map.get(spacers.$spacers, 4));
 
   @extend %form-check-spacing;
 
@@ -42,19 +42,19 @@ $form-check-label-start: $form-check-size + map.get(spacers.$spacers, 4);
 %form-check-base {
   position: relative;
   appearance: none;
-  background-color: semantic-tokens.$element-ui-5;
+  background-color: semantic-tokens.$element-base-1;
   border: 1px solid semantic-tokens.$element-ui-1;
   flex-shrink: 0;
   float: inline-start;
 
   &:is(:hover, .hover) {
-    border-color: semantic-tokens.$element-action-secondary-border-hover;
-    background: semantic-tokens.$element-action-secondary-hover;
+    border-color: semantic-tokens.$element-ui-1;
+    background: semantic-tokens.$element-base-1-hover;
   }
 
   &:is(:active, .active) {
     border-color: semantic-tokens.$element-action-primary-active;
-    background: semantic-tokens.$element-action-secondary-active;
+    background: semantic-tokens.$element-action-primary-active;
   }
 
   &:is([disabled], .disabled) {
@@ -67,7 +67,6 @@ $form-check-label-start: $form-check-size + map.get(spacers.$spacers, 4);
   inline-size: $form-check-size !important; // stylelint-disable-line declaration-no-important
   block-size: $form-check-size !important; // stylelint-disable-line declaration-no-important
   border-radius: semantic-tokens.$element-button-radius;
-  inset-inline-start: map.get(spacers.$spacers, 1);
 
   &::after {
     content: '';
@@ -107,16 +106,17 @@ $form-check-label-start: $form-check-size + map.get(spacers.$spacers, 4);
   }
 
   &:indeterminate {
+    background-color: semantic-tokens.$element-base-1;
     border-color: semantic-tokens.$element-action-primary;
 
     &::after {
       mask-image: none;
       background-color: semantic-tokens.$element-action-primary;
-      inline-size: 10px;
-      block-size: 2px;
+      inline-size: 0.625rem;
+      block-size: 0.125rem;
       opacity: 1;
-      inset-inline-start: 2px;
-      inset-block-start: 6px;
+      inset-inline-start: 0.125rem;
+      inset-block-start: 0.375rem;
     }
 
     &:hover {
@@ -156,16 +156,18 @@ $form-check-label-start: $form-check-size + map.get(spacers.$spacers, 4);
 
   &:checked {
     border-color: semantic-tokens.$element-action-primary;
+    background-color: semantic-tokens.$element-action-primary;
 
     &::after {
-      background-color: semantic-tokens.$element-action-primary;
+      background-color: semantic-tokens.$element-action-primary-text;
     }
 
     &:hover {
+      background-color: semantic-tokens.$element-action-primary-hover;
       border-color: semantic-tokens.$element-action-primary-hover;
 
       &::after {
-        background-color: semantic-tokens.$element-action-primary-hover;
+        background-color: semantic-tokens.$element-action-primary-text;
       }
     }
 
@@ -173,7 +175,7 @@ $form-check-label-start: $form-check-size + map.get(spacers.$spacers, 4);
       border-color: semantic-tokens.$element-action-primary-active;
 
       &::after {
-        background-color: semantic-tokens.$element-action-primary-active;
+        background-color: semantic-tokens.$element-action-primary-text;
       }
     }
 
@@ -246,7 +248,7 @@ $form-check-label-start: $form-check-size + map.get(spacers.$spacers, 4);
   .datatable-checkbox {
     inline-size: $form-check-size !important; // stylelint-disable-line declaration-no-important
     block-size: $form-check-size !important; // stylelint-disable-line declaration-no-important
-    inset-block-start: 1px !important; // stylelint-disable-line declaration-no-important
+    inset-block-start: 0.0625rem !important; // stylelint-disable-line declaration-no-important
 
     input[type='checkbox'] {
       @extend %form-check-base;
@@ -255,7 +257,7 @@ $form-check-label-start: $form-check-size + map.get(spacers.$spacers, 4);
   }
 
   .datatable-body .datatable-checkbox {
-    inset-block-start: 3px !important; // stylelint-disable-line declaration-no-important
+    inset-block-start: 0.1875rem !important; // stylelint-disable-line declaration-no-important
   }
 }
 

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

@@ -1,7 +1,6 @@
 @use '../../variables/focus';
 @use '../../variables/semantic-tokens';
 @use '../../variables/spacers';
-@use '../../variables/typography';
 @use '../../variables/utilities';
 @use '../variables';
 
@@ -9,6 +8,7 @@
 
 :is(.form-control, .form-select) {
   --border-color: #{semantic-tokens.$element-ui-2};
+  --si-textarea-mask: #{semantic-tokens.$element-base-1};
   --si-input-padding-inline-end: calc(
     var(--si-feedback-icon-offset, 0px) + var(--si-action-icon-offset, 0px) +
       #{variables.$input-padding-x}
@@ -22,8 +22,8 @@
   font-size: variables.$input-font-size;
   font-weight: variables.$input-font-weight;
   line-height: variables.$input-line-height;
-  color: variables.$input-color;
-  background-color: variables.$input-bg;
+  color: semantic-tokens.$element-text-primary;
+  background-color: semantic-tokens.$element-base-1;
   background-clip: padding-box;
   border: variables.$input-border-width solid var(--border-color);
   border-radius: variables.$input-border-radius;
@@ -48,20 +48,26 @@
 
   &:is(:focus, :hover) {
     --border-color: #{semantic-tokens.$element-ui-1};
+    --si-textarea-mask: #{semantic-tokens.$element-base-input-experimental};
+    background-color: semantic-tokens.$element-base-input-experimental;
   }
 
   &:is(.readonly, [readonly]) {
     &,
     &:is(:hover, :focus) {
       --border-color: #{semantic-tokens.$element-ui-4};
-      background-color: variables.$input-bg;
+      --si-textarea-mask: transparent;
+      background-color: transparent;
+      color: semantic-tokens.$element-text-primary;
     }
   }
 
   &:is(.disabled, :disabled) {
     &,
     &:is(:hover, :focus) {
-      --border-color: #{semantic-tokens.$element-ui-3};
+      --border-color: #{semantic-tokens.$element-ui-4};
+      --si-textarea-mask: transparent;
+      background-color: transparent;
       color: semantic-tokens.$element-text-disabled;
     }
 
@@ -88,7 +94,7 @@
 
 .form-control:not(textarea):not(select[multiple]) {
   // force height to fix line-height issue in firefox
-  block-size: calc(#{typography.$si-line-height-body}em + #{2 * map.get(spacers.$spacers, 4)});
+  block-size: variables.$input-height;
 }
 
 .addon-second-icon {
@@ -101,9 +107,8 @@ textarea.form-control {
   padding-inline-start: calc(variables.$input-padding-x - 3px);
   padding-inline-end: calc(var(--si-input-padding-inline-end) - 3px);
   line-height: variables.$input-line-height;
-  // prevent scrollbar overlapping rounded borders
   box-shadow: 0 0 0 1px var(--border-color);
-  border: 3px solid variables.$input-bg !important; // stylelint-disable-line declaration-no-important
+  border: 3px solid var(--si-textarea-mask) !important; // stylelint-disable-line declaration-no-important
   outline-offset: 2px !important; // stylelint-disable-line declaration-no-important
 }
 

package/src/styles/bootstrap/mixins/_badge-text.scss

@@ -0,0 +1,16 @@
+@use 'sass:map';
+
+@use '../../variables/spacers';
+@use '../../variables/typography';
+@use '.././variables';
+
+@mixin badge-text {
+  min-inline-size: 0.875rem;
+  border-radius: 0.4375rem;
+  font-size: typography.$si-font-size-caption;
+  line-height: 0.875rem;
+  padding-block: 0;
+  padding-inline: map.get(spacers.$spacers, 2);
+  font-family: variables.$font-family-sans-serif;
+  font-weight: typography.$si-font-weight-semibold;
+}

package/src/styles/components/_drag_drop.scss

@@ -36,7 +36,6 @@ body:has(.cdk-drag-preview, .ui-draggable-dragging) {
 }
 
 .cdk-drag-handle {
-  font-size: 24px;
   color: variables.$element-ui-2;
 }
 

package/src/styles/components/_switch.scss

@@ -2,13 +2,13 @@
 
 @use 'sass:map';
 
-$si-switch-size: 20px !default;
+$si-switch-size: 1.25rem !default;
 $si-switch-inline-size: calc(2 * #{$si-switch-size});
 $si-switch-inline-spacing: calc($si-switch-inline-size + map.get(variables.$spacers, 4));
 $si-switch-background-off-color: variables.$element-ui-4 !default;
 $si-switch-background-on-color: variables.$element-ui-0 !default;
 $si-switch-background-disabled-color: variables.$element-ui-3 !default;
-$si-switch-slider-margin: 4px !default;
+$si-switch-slider-margin: 0.25rem !default;
 $si-switch-slider-off-color: variables.$element-ui-2 !default;
 $si-switch-slider-on-color: variables.$element-ui-5 !default;
 $si-switch-transition-length: variables.element-transition-duration(0.4s) !default;
@@ -22,13 +22,13 @@ $si-switch-knob-size: calc(#{$si-switch-size} - 2 * #{$si-switch-slider-margin})
   .form-check-input {
     cursor: pointer;
     inset: 0;
-    margin-block: - map.get(variables.$spacers, 1);
+    margin-block: -0.125rem;
     margin-inline-start: calc(-1 * $si-switch-inline-spacing);
     inline-size: $si-switch-inline-size !important; // stylelint-disable-line declaration-no-important
     block-size: #{$si-switch-size} !important; // stylelint-disable-line declaration-no-important
-    background-color: $si-switch-background-off-color;
+    background-color: variables.$element-base-1;
     transition: $si-switch-transition-length;
-    border: 0;
+    border: 1px solid variables.$element-ui-2;
     border-radius: #{$si-switch-size};
     appearance: none;
 
@@ -37,9 +37,9 @@ $si-switch-knob-size: calc(#{$si-switch-size} - 2 * #{$si-switch-slider-margin})
       content: '';
       block-size: $si-switch-knob-size !important; // stylelint-disable-line declaration-no-important
       inline-size: $si-switch-knob-size !important; // stylelint-disable-line declaration-no-important
-      inset-inline-start: $si-switch-slider-margin;
-      inset-block-end: $si-switch-slider-margin;
-      background-color: $si-switch-slider-off-color;
+      inset-inline-start: calc(#{$si-switch-slider-margin} - 1px);
+      inset-block-end: calc(#{$si-switch-slider-margin} - 1px);
+      background-color: variables.$element-text-secondary;
       transition: $si-switch-transition-length;
       border-radius: 50%;
     }
@@ -49,14 +49,14 @@ $si-switch-knob-size: calc(#{$si-switch-size} - 2 * #{$si-switch-slider-margin})
     }
 
     &:hover {
-      background-color: variables.$element-ui-4;
+      background-color: variables.$element-base-1-hover;
     }
 
     &:is(:checked, .checked) {
-      background-color: $si-switch-background-on-color;
+      background-color: variables.$element-action-primary;
 
       &:hover {
-        background-color: variables.$element-ui-0-hover;
+        background-color: variables.$element-action-primary-hover;
       }
 
       &:active {
@@ -64,7 +64,8 @@ $si-switch-knob-size: calc(#{$si-switch-size} - 2 * #{$si-switch-slider-margin})
       }
 
       &:is(:disabled, .disabled) {
-        background-color: $si-switch-background-on-color;
+        background-color: variables.$element-action-primary;
+        border-color: variables.$element-action-primary;
       }
     }
 
@@ -74,7 +75,7 @@ $si-switch-knob-size: calc(#{$si-switch-size} - 2 * #{$si-switch-slider-margin})
     }
 
     &:is(:checked, .checked)::before {
-      inset-inline-start: calc(#{$si-switch-slider-margin} + #{$si-switch-size});
+      inset-inline-start: calc(#{$si-switch-slider-margin} + #{$si-switch-size} - 1px);
       background-color: $si-switch-slider-on-color;
     }
   }

package/src/styles/variables/_si-vars.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+@use './spacers';
 @use './animations';
 
 // Custom variables
@@ -9,10 +11,12 @@ $si-icon-font-size-lg: 1.5rem;
 $btn-width-normal: 80px;
 
 // Component styling
-$si-application-header-height: 48px;
 
-$si-titlebar-height: 36px;
-$si-system-banner-height: 20px;
+$si-application-header-height: calc(1.5rem + (2 * map.get(spacers.$spacers, 5) + 1px));
+$si-titlebar-padding-y: map.get(spacers.$spacers, 3);
+$si-titlebar-height: calc(1.5rem + 2 * $si-titlebar-padding-y);
+$si-system-banner-padding-y: map.get(spacers.$spacers, 1);
+$si-system-banner-height: calc(1rem + 2 * $si-system-banner-padding-y);
 
 // allows adding a custom titlebar on top
 // stylelint-disable-next-line length-zero-no-unit