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

package/src/styles/bootstrap/_variables.scss

@@ -1,5 +1,6 @@
 @use '../variables/animations';
 @use '../variables/elevation';
+@use '../variables/system-tokens';
 @use '../variables/semantic-tokens';
 @use '../variables/spacers';
 @use '../variables/typography';
@@ -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;
 
@@ -124,7 +125,7 @@ $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;
@@ -154,8 +155,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;
@@ -184,7 +184,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,
@@ -200,7 +200,7 @@ $headings-font-family: null !default;
 $headings-font-style: null !default;
 $headings-font-weight: typography.$si-font-weight-semibold !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;
@@ -212,15 +212,15 @@ $sub-sup-font-size: 0.75em !default;
 
 $initialism-font-size: $small-font-size !default;
 
-$text-muted: semantic-tokens.$element-text-disabled !default;
+$text-muted: system-tokens.$si-sys-text-disabled !default;
 
 $blockquote-margin-y: spacers.$spacer !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-color: system-tokens.$si-sys-border-4 !default;
 $hr-height: $border-width !default;
 $hr-opacity: 1 !default;
 
@@ -236,8 +236,8 @@ $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
 //
@@ -251,19 +251,19 @@ $table-cell-padding-x-sm: map.get(spacers.$spacers, 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-selected !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,13 +272,13 @@ $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
@@ -296,7 +296,7 @@ $btn-padding-y-lg: map.get(spacers.$spacers, 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;
@@ -316,13 +316,13 @@ $form-text-margin-top: map.get(spacers.$spacers, 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
@@ -333,12 +333,14 @@ $input-font-weight: $font-weight-base;
 // 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-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;
 $input-box-shadow: $box-shadow-inset !default;
 
@@ -347,7 +349,7 @@ $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;
 
@@ -374,15 +376,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 +397,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
   )
@@ -420,22 +422,22 @@ $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-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-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-border-radius: 0.75rem;
@@ -454,16 +456,16 @@ $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-1 !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-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-header-color: semantic-tokens.$element-text-primary !default;
+$dropdown-header-color: system-tokens.$si-sys-text-primary !default;
 
 // Cards
 
@@ -474,11 +476,11 @@ $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-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-bg: system-tokens.$si-sys-background-1 !default;
 $card-img-overlay-padding: spacers.$spacer !default;
 $card-group-margin: $grid-gutter-width !default;
 
@@ -486,8 +488,8 @@ $card-group-margin: $grid-gutter-width !default;
 
 $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;
@@ -501,10 +503,10 @@ $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,
@@ -512,12 +514,12 @@ $popover-inner-border-radius: functions.subtract(
 ) !default;
 $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-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-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;
 
@@ -541,7 +543,7 @@ $modal-dialog-margin-y-sm-up: map.get(spacers.$spacers, 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(
@@ -551,7 +553,7 @@ $modal-content-inner-border-radius: functions.subtract(
 $modal-content-box-shadow-xs: $box-shadow-sm !default;
 $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;
@@ -586,18 +588,18 @@ $alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width
 
 $progress-height: 0.5rem !default;
 $progress-font-size: $font-size-base * 0.75 !default;
-$progress-bg: semantic-tokens.$element-ui-4 !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
 
-$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;
@@ -605,19 +607,19 @@ $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-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-selected !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
 
@@ -631,7 +633,7 @@ $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
 
@@ -641,7 +643,7 @@ $breadcrumb-padding-x: 0;
 $breadcrumb-item-padding-x: map.get(spacers.$spacers, 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 +653,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-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-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-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-border-color: semantic-tokens.$element-ui-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

@@ -1,4 +1,5 @@
 @use '../../variables/semantic-tokens';
+@use '../../variables/system-tokens';
 @use '../../variables/spacers';
 @use '../functions';
 @use '../variables';
@@ -25,6 +26,7 @@ $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);
 
   @extend %form-check-spacing;
 
@@ -35,6 +37,7 @@ $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;
 }
@@ -42,24 +45,22 @@ $form-check-label-start: calc($form-check-size + map.get(spacers.$spacers, 4));
 %form-check-base {
   position: relative;
   appearance: none;
-  background-color: semantic-tokens.$element-base-1;
-  border: 1px solid semantic-tokens.$element-ui-1;
+  background-color: system-tokens.$si-sys-background-1;
+  border: 1px solid system-tokens.$si-sys-border-2;
   flex-shrink: 0;
   float: inline-start;
 
   &:is(:hover, .hover) {
-    border-color: semantic-tokens.$element-ui-1;
-    background: semantic-tokens.$element-base-1-hover;
+    background: system-tokens.$si-sys-background-hover;
   }
 
   &:is(:active, .active) {
-    border-color: semantic-tokens.$element-action-primary-active;
-    background: semantic-tokens.$element-action-primary-active;
+    background: system-tokens.$si-sys-background-selected;
   }
 
   &:is([disabled], .disabled) {
-    border-color: semantic-tokens.$element-ui-3;
-    background-color: semantic-tokens.$element-ui-5;
+    border-color: system-tokens.$si-sys-text-disabled;
+    background-color: transparent;
   }
 }
 
@@ -80,60 +81,40 @@ $form-check-label-start: calc($form-check-size + map.get(spacers.$spacers, 4));
     opacity: 0;
   }
 
-  &:is(:checked, .checked) {
-    background-color: semantic-tokens.$element-action-primary;
-    border-color: semantic-tokens.$element-action-primary;
+  &:is(:checked, .checked, :indeterminate) {
+    background-color: system-tokens.$si-sys-background-accent;
+    border-color: transparent;
 
     &:hover {
-      background-color: semantic-tokens.$element-action-primary-hover;
-      border-color: semantic-tokens.$element-action-primary-hover;
+      background-color: system-tokens.$si-sys-background-accent-hover;
+      border-color: transparent;
     }
 
     &:active {
-      background-color: semantic-tokens.$element-action-primary-active;
-      border-color: semantic-tokens.$element-action-primary-active;
+      background-color: system-tokens.$si-sys-background-accent-active;
+      border-color: transparent;
     }
 
     &::after {
-      background-color: semantic-tokens.$element-text-inverse;
+      background-color: system-tokens.$si-sys-text-on-accent;
       opacity: 1;
     }
 
     &[disabled] {
-      background-color: semantic-tokens.$element-ui-3;
-      border-color: semantic-tokens.$element-ui-3;
+      border-color: transparent;
+      background-color: system-tokens.$si-sys-text-disabled;
     }
   }
 
   &: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: 0.625rem;
       block-size: 0.125rem;
       opacity: 1;
       inset-inline-start: 0.125rem;
       inset-block-start: 0.375rem;
     }
-
-    &:hover {
-      border-color: semantic-tokens.$element-action-primary-hover;
-
-      &::after {
-        background-color: semantic-tokens.$element-action-primary-hover;
-      }
-    }
-
-    &:disabled {
-      border-color: semantic-tokens.$element-ui-3;
-
-      &::after {
-        background-color: semantic-tokens.$element-ui-3;
-      }
-    }
   }
 }
 
@@ -155,36 +136,27 @@ $form-check-label-start: calc($form-check-size + map.get(spacers.$spacers, 4));
   }
 
   &:checked {
-    border-color: semantic-tokens.$element-action-primary;
-    background-color: semantic-tokens.$element-action-primary;
+    border-color: transparent;
+    background-color: system-tokens.$si-sys-background-accent;
 
     &::after {
-      background-color: semantic-tokens.$element-action-primary-text;
+      border-color: transparent;
+      background-color: system-tokens.$si-sys-text-on-accent;
     }
 
     &: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-text;
-      }
+      border-color: transparent;
+      background-color: system-tokens.$si-sys-background-accent-hover;
     }
 
     &:active {
-      border-color: semantic-tokens.$element-action-primary-active;
-
-      &::after {
-        background-color: semantic-tokens.$element-action-primary-text;
-      }
+      border-color: transparent;
+      background-color: system-tokens.$si-sys-border-accent-active;
     }
 
     &[disabled] {
-      border-color: semantic-tokens.$element-ui-3;
-
-      &::after {
-        background-color: semantic-tokens.$element-ui-3;
-      }
+      border-color: transparent;
+      background-color: system-tokens.$si-sys-text-disabled;
     }
   }
 }
@@ -193,7 +165,7 @@ $form-check-label-start: calc($form-check-size + map.get(spacers.$spacers, 4));
   display: inline-block;
   position: relative;
   padding-inline-end: $form-check-padding-x;
-  color: semantic-tokens.$element-text-primary;
+  color: system-tokens.$si-sys-text-primary;
 }
 
 .form-check-input {
@@ -204,7 +176,7 @@ $form-check-label-start: calc($form-check-size + map.get(spacers.$spacers, 4));
   }
 
   &[disabled] ~ .form-check-label {
-    color: semantic-tokens.$element-text-disabled;
+    color: system-tokens.$si-sys-text-disabled;
   }
 
   &:is([type='checkbox'], .si-form-checkbox) {
@@ -239,7 +211,7 @@ $form-check-label-start: calc($form-check-size + map.get(spacers.$spacers, 4));
     + .btn {
       pointer-events: none;
       filter: none;
-      color: semantic-tokens.$element-text-disabled;
+      color: system-tokens.$si-sys-text-disabled;
     }
   }
 }
@@ -271,7 +243,7 @@ formly-field-multicheckbox {
     }
 
     &[disabled] ~ label {
-      color: semantic-tokens.$element-text-disabled;
+      color: system-tokens.$si-sys-text-disabled;
     }
   }
 }
@@ -286,7 +258,7 @@ formly-field-radio {
     }
 
     &[disabled] ~ label {
-      color: semantic-tokens.$element-text-disabled;
+      color: system-tokens.$si-sys-text-disabled;
     }
   }
 }