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

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

@@ -9,8 +9,8 @@
 @use 'sass:map';
 
 :is(.form-control, .form-select) {
-  --border-color: #{system-tokens.$si-sys-border-2};
-  --si-textarea-mask: #{system-tokens.$si-sys-background-1};
+  --border-color: #{system-tokens.$si-sys-color-border-2};
+  --si-textarea-mask: #{system-tokens.$si-sys-color-background-1};
   // Formula:
   // (1.25rem / 0px) (feedback icon size)
   // + (action-size / 0px) (action-offset includes a padding)
@@ -28,8 +28,8 @@
   font-size: variables.$input-font-size;
   font-weight: variables.$input-font-weight;
   line-height: variables.$input-line-height;
-  color: system-tokens.$si-sys-text-primary;
-  background-color: system-tokens.$si-sys-background-1;
+  color: system-tokens.$si-sys-color-text-primary;
+  background-color: system-tokens.$si-sys-color-background-1;
   background-clip: padding-box;
   border: variables.$input-border-width solid var(--border-color);
   border-radius: variables.$input-border-radius;
@@ -69,32 +69,32 @@
   }
 
   &:autofill {
-    background: system-tokens.$si-sys-background-information-subtle;
+    background: system-tokens.$si-sys-color-background-information-subtle;
   }
 
   &:is(:focus, :hover, :has(+ .form-control-actions:is(:hover, :focus-within))) {
-    --border-color: #{system-tokens.$si-sys-border-1};
-    --si-textarea-mask: #{system-tokens.$si-sys-background-4};
-    background-color: system-tokens.$si-sys-background-4;
+    --border-color: #{system-tokens.$si-sys-color-border-1};
+    --si-textarea-mask: #{system-tokens.$si-sys-color-background-4};
+    background-color: system-tokens.$si-sys-color-background-4;
   }
 
   &:is(.readonly, [readonly]) {
     &,
     &:is(:hover, :focus, :has(+ .form-control-actions:is(:hover, :focus-within))) {
-      --border-color: #{system-tokens.$si-sys-border-4};
+      --border-color: #{system-tokens.$si-sys-color-border-4};
       --si-textarea-mask: transparent;
       background-color: transparent;
-      color: system-tokens.$si-sys-text-primary;
+      color: system-tokens.$si-sys-color-text-primary;
     }
   }
 
   &:is(.disabled, :disabled) {
     &,
     &:is(:hover, :focus, :has(+ .form-control-actions:is(:hover, :focus-within))) {
-      --border-color: #{system-tokens.$si-sys-border-4};
+      --border-color: #{system-tokens.$si-sys-color-border-4};
       --si-textarea-mask: transparent;
       background-color: transparent;
-      color: system-tokens.$si-sys-text-disabled;
+      color: system-tokens.$si-sys-color-text-disabled;
     }
 
     &::placeholder {
@@ -197,7 +197,6 @@ select:is(.form-control, .form-select):not([multiple]) {
       )
       center,
     right calc(map.get(spacers.$spacers-block, 2) - variables.$input-border-width) top 50%;
-  background-size: si-vars.$si-icon-font-size, variables.$form-feedback-icon-size;
 
   @include utilities.rtl {
     background-position: left
@@ -215,6 +214,7 @@ select:is(.form-control, .form-select)[multiple] {
   border-start-end-radius: 0;
   border-end-end-radius: 0;
   padding: 0;
+  block-size: unset;
 
   option {
     padding: map.get(spacers.$spacers-block, 4) map.get(spacers.$spacers-inline, 4);
@@ -222,7 +222,7 @@ select:is(.form-control, .form-select)[multiple] {
 
   option:checked,
   &:not(:disabled) option:not(:disabled):hover {
-    background: system-tokens.$si-sys-background-0;
-    color: system-tokens.$si-sys-text-accent;
+    background: system-tokens.$si-sys-color-background-0;
+    color: system-tokens.$si-sys-color-text-accent;
   }
 }

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

@@ -11,8 +11,8 @@
   }
 
   &::file-selector-button {
-    color: system-tokens.$si-sys-text-on-accent-secondary;
-    background: system-tokens.$si-sys-background-accent-secondary;
+    color: system-tokens.$si-sys-color-text-on-accent-secondary;
+    background: system-tokens.$si-sys-color-background-accent-secondary;
     border-color: inherit;
     border-block-width: 0;
     border-inline-width: 0 1px;
@@ -23,12 +23,12 @@
   }
 
   &:hover::file-selector-button {
-    color: system-tokens.$si-sys-text-on-accent-secondary-hover;
-    background: system-tokens.$si-sys-background-accent-secondary-hover;
+    color: system-tokens.$si-sys-color-text-on-accent-secondary-hover;
+    background: system-tokens.$si-sys-color-background-accent-secondary-hover;
   }
 
   &:active::file-selector-button {
-    color: system-tokens.$si-sys-text-on-accent-secondary-active;
-    background: system-tokens.$si-sys-background-accent-secondary-active;
+    color: system-tokens.$si-sys-color-text-on-accent-secondary-active;
+    background: system-tokens.$si-sys-color-background-accent-secondary-active;
   }
 }

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

@@ -1,7 +1,7 @@
 @use '../../variables/focus';
 @use '../../variables/system-tokens';
 
-$track-color: system-tokens.$si-sys-border-4 !default;
+$track-color: system-tokens.$si-sys-color-border-4 !default;
 $track-height: 4px !default;
 $thumb-size: 24px !default;
 
@@ -14,36 +14,36 @@ $thumb-size: 24px !default;
 
 @mixin range-thumb {
   box-shadow: var(--thumb-shadow);
-  border: 1px solid system-tokens.$si-sys-border-accent;
+  border: 1px solid system-tokens.$si-sys-color-border-accent;
   block-size: $thumb-size;
   inline-size: $thumb-size;
   border-radius: 50%;
-  background: system-tokens.$si-sys-background-1;
+  background: system-tokens.$si-sys-color-background-1;
   cursor: pointer;
 
   &:hover {
-    border-color: system-tokens.$si-sys-border-accent-hover;
+    border-color: system-tokens.$si-sys-color-border-accent-hover;
     background: radial-gradient(
       circle,
-      system-tokens.$si-sys-text-accent-hover 0%,
-      system-tokens.$si-sys-text-accent-hover 35%,
-      system-tokens.$si-sys-background-accent-secondary-hover 36%
+      system-tokens.$si-sys-color-text-accent-hover 0%,
+      system-tokens.$si-sys-color-text-accent-hover 35%,
+      system-tokens.$si-sys-color-background-accent-secondary-hover 36%
     );
   }
 
   &:active {
-    border-color: system-tokens.$si-sys-border-accent-active;
+    border-color: system-tokens.$si-sys-color-border-accent-active;
     background: radial-gradient(
       circle,
-      system-tokens.$si-sys-background-accent-active 0%,
-      system-tokens.$si-sys-background-accent-active 35%,
-      system-tokens.$si-sys-background-accent-secondary-active 36%
+      system-tokens.$si-sys-color-background-accent-active 0%,
+      system-tokens.$si-sys-color-background-accent-active 35%,
+      system-tokens.$si-sys-color-background-accent-secondary-active 36%
     );
   }
 }
 
 .form-range {
-  --thumb-shadow: #{system-tokens.$si-sys-effects-shadow-2};
+  --thumb-shadow: #{system-tokens.$si-sys-color-effects-shadow-2};
   -webkit-appearance: none; // stylelint-disable-line property-no-vendor-prefix
   background: transparent;
   inline-size: 100%;

package/src/styles/components/_application-header.scss

@@ -26,10 +26,10 @@
     var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px)
   );
   z-index: zindex.$zindex-application-header;
-  background: system-tokens.$si-sys-background-1;
+  background: system-tokens.$si-sys-color-background-1;
   min-block-size: si-vars.$si-application-header-height;
   align-items: stretch;
-  border-block-end: 1px solid system-tokens.$si-sys-border-4;
+  border-block-end: 1px solid system-tokens.$si-sys-color-border-4;
 
   // hide border when mobile styles are applied and either the dropdown-menu is shown or navigation is expanded
   &:has(.dropdown-menu.show),
@@ -42,7 +42,7 @@
     order: 2;
     flex-basis: 100%;
     box-shadow: none;
-    border-block-start: 1px solid system-tokens.$si-sys-border-4;
+    border-block-start: 1px solid system-tokens.$si-sys-color-border-4;
     margin-block: 0;
     border-radius: 0;
   }
@@ -94,7 +94,7 @@
   display: flex;
   flex-flow: column;
   padding-block: map.get(spacers.$spacers-block, 4);
-  border-block-start: 1px solid system-tokens.$si-sys-border-4;
+  border-block-start: 1px solid system-tokens.$si-sys-color-border-4;
 }
 
 .header-navigation {
@@ -106,13 +106,13 @@
 
   .header-item {
     &.active {
-      --si-header-item-border: #{system-tokens.$si-sys-border-accent};
-      color: system-tokens.$si-sys-text-accent;
+      --si-header-item-border: #{system-tokens.$si-sys-color-border-accent};
+      color: system-tokens.$si-sys-color-text-accent;
     }
 
     &:hover {
-      --si-header-item-border: #{system-tokens.$si-sys-border-accent-hover};
-      color: system-tokens.$si-sys-text-accent-hover;
+      --si-header-item-border: #{system-tokens.$si-sys-color-border-accent-hover};
+      color: system-tokens.$si-sys-color-text-accent-hover;
     }
   }
 }
@@ -130,13 +130,13 @@
 }
 
 .header-toggle {
-  color: system-tokens.$si-sys-text-primary;
+  color: system-tokens.$si-sys-color-text-primary;
   border: 0;
   padding: map.get(spacers.$spacers-block, 5) map.get(spacers.$spacers-inline, 5);
   background-color: transparent; // remove default button style
 
   &:is(:hover, .show, :active) {
-    background: system-tokens.$si-sys-background-hover;
+    background: system-tokens.$si-sys-color-background-hover;
     text-decoration: none;
   }
 }
@@ -147,7 +147,7 @@
   flex-basis: 0;
   align-items: center;
   position: relative;
-  color: system-tokens.$si-sys-text-primary;
+  color: system-tokens.$si-sys-color-text-primary;
   inline-size: 100%;
   font-size: typography.$si-font-size-h4;
   line-height: typography.$si-line-height-h4;
@@ -176,8 +176,8 @@
   }
 
   &:hover {
-    color: system-tokens.$si-sys-text-primary;
-    background-color: system-tokens.$si-sys-background-hover;
+    color: system-tokens.$si-sys-color-text-primary;
+    background-color: system-tokens.$si-sys-color-background-hover;
     text-decoration: none;
   }
 
@@ -193,13 +193,13 @@
   }
 
   &.header-selection-item {
-    color: system-tokens.$si-sys-text-accent;
+    color: system-tokens.$si-sys-color-text-accent;
     font-size: typography.$si-font-size-h5;
     font-weight: typography.$si-font-weight-h5;
     line-height: typography.$si-line-height-h5;
 
     &:hover {
-      color: system-tokens.$si-sys-text-accent-hover;
+      color: system-tokens.$si-sys-color-text-accent-hover;
     }
   }
 }

package/src/styles/components/_datatable.scss

@@ -12,10 +12,10 @@
 
 $datatable-header-border-color: variables.$table-border-color !default;
 $datatable-header-background-color: variables.$table-bg !default;
-$datatable-header-color: system-tokens.$si-sys-text-primary !default;
+$datatable-header-color: system-tokens.$si-sys-color-text-primary !default;
 $datatable-footer-background-color: transparent !default;
 
-$datatable-summary-background-color: system-tokens.$si-sys-background-2 !default;
+$datatable-summary-background-color: system-tokens.$si-sys-color-background-2 !default;
 $datatable-striped-background-color: variables.$table-striped-bg !default;
 
 $datatable-header-height: 40px !default;
@@ -24,12 +24,12 @@ $datatable-body-row-min-height: 48px !default;
 
 $datatable-ghost-cell-container-background: variables.$table-bg !default;
 
-$datatable-ghost-cell-strip-background: system-tokens.$si-sys-background-hover !default;
+$datatable-ghost-cell-strip-background: system-tokens.$si-sys-color-background-hover !default;
 $datatable-ghost-cell-strip-background-image: linear-gradient(
   90deg,
-  system-tokens.$si-sys-background-hover 0%,
-  system-tokens.$si-sys-background-active 25%,
-  system-tokens.$si-sys-background-hover 50%
+  system-tokens.$si-sys-color-background-hover 0%,
+  system-tokens.$si-sys-color-background-active 25%,
+  system-tokens.$si-sys-color-background-hover 50%
 ) !default;
 $datatable-ghost-cell-strip-radius: 0 !default;
 
@@ -121,7 +121,7 @@ $datatable-ghost-cell-strip-radius: 0 !default;
     .datatable-row-left {
       .datatable-body-cell:last-child,
       .datatable-header-cell:last-child {
-        box-shadow: system-tokens.$si-sys-effects-shadow-3;
+        box-shadow: system-tokens.$si-sys-color-effects-shadow-3;
         clip-path: inset(0 -8px 0 0);
       }
     }
@@ -129,7 +129,7 @@ $datatable-ghost-cell-strip-radius: 0 !default;
     .datatable-row-right {
       .datatable-body-cell:first-child,
       .datatable-header-cell:first-child {
-        box-shadow: system-tokens.$si-sys-effects-shadow-3;
+        box-shadow: system-tokens.$si-sys-color-effects-shadow-3;
         clip-path: inset(0 0 0 -8px);
       }
     }
@@ -237,7 +237,7 @@ $datatable-ghost-cell-strip-radius: 0 !default;
     // Resizable handle
     .resizeable:hover {
       .resize-handle {
-        background-color: system-tokens.$si-sys-background-0;
+        background-color: system-tokens.$si-sys-color-background-0;
         inline-size: 2px;
         border-radius: 2px;
         padding-block: 0;
@@ -334,7 +334,7 @@ $datatable-ghost-cell-strip-radius: 0 !default;
     align-items: flex-end;
     align-content: flex-end;
     background-color: $datatable-footer-background-color;
-    color: system-tokens.$si-sys-text-secondary;
+    color: system-tokens.$si-sys-color-text-secondary;
     font-size: typography.$si-font-size-body-sm;
     margin-block-start: -1px;
     position: relative;
@@ -353,7 +353,7 @@ $datatable-ghost-cell-strip-radius: 0 !default;
         inset-inline-start: 0;
         inline-size: 100%;
         block-size: 1px;
-        background-color: system-tokens.$si-sys-background-0;
+        background-color: system-tokens.$si-sys-color-background-0;
       }
     }
   }

package/src/styles/components/_drag_drop.scss

@@ -23,8 +23,8 @@
 }
 
 .cdk-drag-preview {
-  background-color: variables.$si-sys-background-3 !important;
-  box-shadow: variables.$si-sys-effects-shadow-3 !important;
+  background-color: variables.$si-sys-color-background-3 !important;
+  box-shadow: variables.$si-sys-color-effects-shadow-3 !important;
   position: relative !important;
   inset-inline-start: -5px !important;
   inset-block-start: -10px !important;
@@ -37,7 +37,7 @@
 }
 
 .cdk-drag-handle {
-  color: variables.$si-sys-text-secondary;
+  color: variables.$si-sys-color-text-secondary;
 }
 
 .cdk-drag-disabled {
@@ -71,7 +71,7 @@
 
 .cdk-drop-list:not([cdkDropListHasAnchor]) .cdk-drag-placeholder {
   opacity: 0.3;
-  background-color: variables.$si-sys-background-information-subtle !important;
+  background-color: variables.$si-sys-color-background-information-subtle !important;
   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
   min-block-size: 45px;
   font-size: 0; // hide direct text
@@ -93,7 +93,7 @@
 
 .droppable-container {
   &.drop-border {
-    border: 1px dashed variables.$si-sys-border-2;
+    border: 1px dashed variables.$si-sys-color-border-2;
   }
 
   .cdk-drag-placeholder {

package/src/styles/components/_elevation.scss

@@ -7,20 +7,20 @@
 
 // @deprecated Use .shadow-1 instead.
 .elevation-1 {
-  box-shadow: system-tokens.$si-sys-effects-shadow-1;
+  box-shadow: system-tokens.$si-sys-color-effects-shadow-1;
 }
 
 // @deprecated Use .shadow-2 instead.
 .elevation-2 {
-  box-shadow: system-tokens.$si-sys-effects-shadow-2;
+  box-shadow: system-tokens.$si-sys-color-effects-shadow-2;
 }
 
 // @deprecated Use .shadow-3 instead.
 .elevation-3 {
-  box-shadow: system-tokens.$si-sys-effects-shadow-3;
+  box-shadow: system-tokens.$si-sys-color-effects-shadow-3;
 }
 
 // @deprecated Use .shadow-4 instead.
 .elevation-4 {
-  box-shadow: system-tokens.$si-sys-effects-shadow-4;
+  box-shadow: system-tokens.$si-sys-color-effects-shadow-4;
 }

package/src/styles/components/_layout.scss

@@ -67,7 +67,7 @@
   grid-area: subtitle;
   margin-block-start: map.get(variables.$spacers-block, 4);
   margin-block-end: 0;
-  color: variables.$si-sys-text-secondary;
+  color: variables.$si-sys-color-text-secondary;
   @include variables.si-font(
     variables.$si-font-size-body,
     variables.$si-line-height-body,

package/src/styles/components/_links.scss

@@ -10,7 +10,7 @@ $si-link-icon-line-height: math.div(14em, 16);
 $si-link-icon-spacing: math.div(4em, 16);
 
 a:active {
-  color: system-tokens.$si-sys-text-accent-active;
+  color: system-tokens.$si-sys-color-text-accent-active;
   text-decoration: underline;
 }
 

package/src/styles/components/_list-item.scss

@@ -16,7 +16,7 @@ ol:has(.list-item) {
 
 .list {
   &.list-divider > li:not(:last-child) {
-    border-block-end: 1px solid variables.$si-sys-border-4;
+    border-block-end: 1px solid variables.$si-sys-color-border-4;
   }
 
   &.list-filled,
@@ -25,12 +25,12 @@ ol:has(.list-item) {
   }
 
   &.list-filled .list-item {
-    background-color: variables.$si-sys-background-1;
+    background-color: variables.$si-sys-color-background-1;
     border-radius: variables.$element-radius-2;
   }
 
   &.list-outline .list-item {
-    border: 1px solid variables.$si-sys-border-4;
+    border: 1px solid variables.$si-sys-color-border-4;
     border-radius: variables.$element-radius-2;
   }
 }
@@ -79,7 +79,7 @@ ol:has(.list-item) {
 
   .list-item-timestamp {
     grid-area: timestamp;
-    color: variables.$si-sys-text-secondary;
+    color: variables.$si-sys-color-text-secondary;
     margin-block-end: 0;
   }
 
@@ -89,19 +89,14 @@ ol:has(.list-item) {
     margin-block-end: 0;
 
     @include typography.si-font(
-      typography.$si-font-size-h5,
-      typography.$si-line-height-h5,
-      typography.$si-font-weight-h5
+      typography.$si-font-size-body-sbold,
+      typography.$si-line-height-body-sbold,
+      typography.$si-font-weight-body-sbold
     );
 
     &.unread {
       position: relative;
-
-      @include typography.si-font(
-        typography.$si-font-size-h5-bold,
-        typography.$si-line-height-h5-bold,
-        typography.$si-font-weight-h5-bold
-      );
+      font-weight: typography.$si-font-weight-bold;
 
       &::before {
         content: '';
@@ -109,7 +104,7 @@ ol:has(.list-item) {
         block-size: 0.375rem;
         inline-size: 0.375rem;
         border-radius: 50%;
-        background-color: variables.$si-sys-background-inverse;
+        background-color: variables.$si-sys-color-background-inverse;
         inset-inline-start: -0.625rem;
         inset-block-start: 50%;
         translate: 0 -50%;
@@ -132,11 +127,11 @@ ol:has(.list-item) {
     display: flex;
     flex-direction: row;
     align-items: center;
-    color: variables.$si-sys-text-secondary;
+    color: variables.$si-sys-color-text-secondary;
     margin-block-end: map.get(variables.$spacers-block, 4);
 
     a:not(:hover) {
-      color: variables.$si-sys-text-secondary;
+      color: variables.$si-sys-color-text-secondary;
     }
 
     .badge {
@@ -147,7 +142,7 @@ ol:has(.list-item) {
       inline-size: 0.125rem;
       block-size: 0.125rem;
       border-radius: 50%;
-      background-color: variables.$si-sys-text-secondary;
+      background-color: variables.$si-sys-color-text-secondary;
       margin-inline: map.get(variables.$spacers-inline, 2);
     }
   }
@@ -164,11 +159,11 @@ ol:has(.list-item) {
     color: inherit;
 
     &:hover {
-      background-color: variables.$si-sys-background-hover;
+      background-color: variables.$si-sys-color-background-hover;
     }
 
     &:active {
-      background-color: variables.$si-sys-background-active;
+      background-color: variables.$si-sys-color-background-active;
     }
 
     &:focus-visible {

package/src/styles/components/_markdown.scss

@@ -63,7 +63,7 @@
   }
 
   blockquote {
-    border-inline-start: 4px solid variables.$si-sys-border-4;
+    border-inline-start: 4px solid variables.$si-sys-color-border-4;
     padding-inline-start: map.get(variables.$spacers-inline, 4);
 
     p {

package/src/styles/components/_pills.scss

@@ -6,19 +6,19 @@
   display: flex;
   align-items: center;
   border-radius: 0.75rem;
-  background: var(--filter-pill-background-color, variables.$si-sys-background-0);
+  background: var(--filter-pill-background-color, variables.$si-sys-color-background-0);
   padding-inline: map.get(variables.$spacers-inline, 4);
   max-inline-size: 100%;
 
   &.active {
-    background: variables.$si-sys-background-active;
+    background: variables.$si-sys-color-background-active;
   }
 
   &.pill-interactive {
     cursor: pointer;
 
     &:hover {
-      background: variables.$si-sys-background-accent-secondary-hover;
+      background: variables.$si-sys-color-background-accent-secondary-hover;
     }
   }
 

package/src/styles/components/_scrollbar.scss

@@ -4,8 +4,8 @@
 #{selectors.$document} {
   scrollbar-color: color-mix(
       in srgb,
-      system-tokens.$si-sys-border-2 60%,
-      system-tokens.$si-sys-background-1
+      system-tokens.$si-sys-color-border-2 60%,
+      system-tokens.$si-sys-color-background-1
     )
-    system-tokens.$si-sys-background-1;
+    system-tokens.$si-sys-color-background-1;
 }

package/src/styles/components/_search-bar.scss

@@ -12,23 +12,23 @@
     .search-bar-icon,
     .search-bar-input,
     .search-bar-input::placeholder {
-      color: system-tokens.$si-sys-text-disabled;
+      color: system-tokens.$si-sys-color-text-disabled;
     }
   }
 }
 
 .search-bar-input.form-control {
   transition: none;
-  background-color: system-tokens.$si-sys-background-1 !important; // stylelint-disable-line declaration-no-important
+  background-color: system-tokens.$si-sys-color-background-1 !important; // stylelint-disable-line declaration-no-important
   border-radius: semantic-tokens.$element-radius-2;
   border-width: 0;
 
   &::placeholder {
-    color: system-tokens.$si-sys-text-secondary;
+    color: system-tokens.$si-sys-color-text-secondary;
   }
 
   &:is(:hover, :focus)::placeholder {
-    color: system-tokens.$si-sys-text-primary;
+    color: system-tokens.$si-sys-color-text-primary;
   }
 
   .search-bar:has(.search-bar-icon) & {
@@ -45,7 +45,7 @@
   }
 
   .search-bar.variant-background-0 & {
-    background-color: system-tokens.$si-sys-background-4 !important; // stylelint-disable-line declaration-no-important
+    background-color: system-tokens.$si-sys-color-background-2 !important; // stylelint-disable-line declaration-no-important
   }
 }
 
@@ -55,7 +55,7 @@
   inset-inline-start: map.get(variables.$spacers-inline, 2);
   align-items: center;
   font-size: variables.$si-icon-font-size;
-  color: system-tokens.$si-sys-text-disabled;
+  color: system-tokens.$si-sys-color-text-disabled;
   pointer-events: none;
 }
 

package/src/styles/components/_skeleton.scss

@@ -13,9 +13,9 @@
   min-block-size: 1em;
   background: linear-gradient(
     90deg,
-    system-tokens.$si-sys-background-hover 0%,
-    system-tokens.$si-sys-background-active 25%,
-    system-tokens.$si-sys-background-hover 50%
+    system-tokens.$si-sys-color-background-hover 0%,
+    system-tokens.$si-sys-color-background-active 25%,
+    system-tokens.$si-sys-color-background-hover 50%
   );
   background-size: 200% 100%;
   background-position-x: 100%;