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

package/src/styles/mixins/_utilities.scss

@@ -0,0 +1,271 @@
+@use '../variables/system-tokens' as tokens;
+
+// This file currently diverges from its original by add !important everywhere.
+// stylelint-disable declaration-no-important
+
+@mixin background-utilities($prefix: 'background-') {
+  .#{$prefix}0 {
+    background-color: tokens.$si-sys-background-0 !important;
+  }
+  .#{$prefix}1 {
+    background-color: tokens.$si-sys-background-1 !important;
+  }
+  .#{$prefix}2 {
+    background-color: tokens.$si-sys-background-2 !important;
+  }
+  .#{$prefix}3 {
+    background-color: tokens.$si-sys-background-3 !important;
+  }
+  .#{$prefix}4 {
+    background-color: tokens.$si-sys-background-4 !important;
+  }
+  .#{$prefix}accent {
+    background-color: tokens.$si-sys-background-accent !important;
+  }
+  .#{$prefix}accent-active {
+    background-color: tokens.$si-sys-background-accent-active !important;
+  }
+  .#{$prefix}accent-hover {
+    background-color: tokens.$si-sys-background-accent-hover !important;
+  }
+  .#{$prefix}accent-secondary {
+    background-color: tokens.$si-sys-background-accent-secondary !important;
+  }
+  .#{$prefix}accent-secondary-active {
+    background-color: tokens.$si-sys-background-accent-secondary-active !important;
+  }
+  .#{$prefix}accent-secondary-hover {
+    background-color: tokens.$si-sys-background-accent-secondary-hover !important;
+  }
+  .#{$prefix}active {
+    background-color: tokens.$si-sys-background-active !important;
+  }
+  .#{$prefix}caution {
+    background-color: tokens.$si-sys-background-caution !important;
+  }
+  .#{$prefix}caution-active {
+    background-color: tokens.$si-sys-background-caution-active !important;
+  }
+  .#{$prefix}caution-hover {
+    background-color: tokens.$si-sys-background-caution-hover !important;
+  }
+  .#{$prefix}caution-subtle {
+    background-color: tokens.$si-sys-background-caution-subtle !important;
+  }
+  .#{$prefix}critical {
+    background-color: tokens.$si-sys-background-critical !important;
+  }
+  .#{$prefix}critical-active {
+    background-color: tokens.$si-sys-background-critical-active !important;
+  }
+  .#{$prefix}critical-hover {
+    background-color: tokens.$si-sys-background-critical-hover !important;
+  }
+  .#{$prefix}critical-subtle {
+    background-color: tokens.$si-sys-background-critical-subtle !important;
+  }
+  .#{$prefix}danger {
+    background-color: tokens.$si-sys-background-danger !important;
+  }
+  .#{$prefix}danger-active {
+    background-color: tokens.$si-sys-background-danger-active !important;
+  }
+  .#{$prefix}danger-hover {
+    background-color: tokens.$si-sys-background-danger-hover !important;
+  }
+  .#{$prefix}danger-secondary {
+    background-color: tokens.$si-sys-background-danger-secondary !important;
+  }
+  .#{$prefix}danger-subtle {
+    background-color: tokens.$si-sys-background-danger-subtle !important;
+  }
+  .#{$prefix}hover {
+    background-color: tokens.$si-sys-background-hover !important;
+  }
+  .#{$prefix}information {
+    background-color: tokens.$si-sys-background-information !important;
+  }
+  .#{$prefix}information-active {
+    background-color: tokens.$si-sys-background-information-active !important;
+  }
+  .#{$prefix}information-hover {
+    background-color: tokens.$si-sys-background-information-hover !important;
+  }
+  .#{$prefix}information-subtle {
+    background-color: tokens.$si-sys-background-information-subtle !important;
+  }
+  .#{$prefix}inverse {
+    background-color: tokens.$si-sys-background-inverse !important;
+  }
+  .#{$prefix}neutral {
+    background-color: tokens.$si-sys-background-neutral !important;
+  }
+  .#{$prefix}neutral-active {
+    background-color: tokens.$si-sys-background-neutral-active !important;
+  }
+  .#{$prefix}neutral-hover {
+    background-color: tokens.$si-sys-background-neutral-hover !important;
+  }
+  .#{$prefix}success {
+    background-color: tokens.$si-sys-background-success !important;
+  }
+  .#{$prefix}success-active {
+    background-color: tokens.$si-sys-background-success-active !important;
+  }
+  .#{$prefix}success-hover {
+    background-color: tokens.$si-sys-background-success-hover !important;
+  }
+  .#{$prefix}success-subtle {
+    background-color: tokens.$si-sys-background-success-subtle !important;
+  }
+  .#{$prefix}warning {
+    background-color: tokens.$si-sys-background-warning !important;
+  }
+  .#{$prefix}warning-active {
+    background-color: tokens.$si-sys-background-warning-active !important;
+  }
+  .#{$prefix}warning-hover {
+    background-color: tokens.$si-sys-background-warning-hover !important;
+  }
+  .#{$prefix}warning-secondary {
+    background-color: tokens.$si-sys-background-warning-secondary !important;
+  }
+  .#{$prefix}warning-subtle {
+    background-color: tokens.$si-sys-background-warning-subtle !important;
+  }
+}
+
+@mixin text-utilities($prefix: 'text-') {
+  .#{$prefix}accent {
+    color: tokens.$si-sys-text-accent !important;
+  }
+  .#{$prefix}accent-active {
+    color: tokens.$si-sys-text-accent-active !important;
+  }
+  .#{$prefix}accent-hover {
+    color: tokens.$si-sys-text-accent-hover !important;
+  }
+  .#{$prefix}caution {
+    color: tokens.$si-sys-text-caution !important;
+  }
+  .#{$prefix}critical {
+    color: tokens.$si-sys-text-critical !important;
+  }
+  .#{$prefix}danger {
+    color: tokens.$si-sys-text-danger !important;
+  }
+  .#{$prefix}disabled {
+    color: tokens.$si-sys-text-disabled !important;
+  }
+  .#{$prefix}information {
+    color: tokens.$si-sys-text-information !important;
+  }
+  .#{$prefix}inverse {
+    color: tokens.$si-sys-text-inverse !important;
+  }
+  .#{$prefix}on-accent {
+    color: tokens.$si-sys-text-on-accent !important;
+  }
+  .#{$prefix}on-accent-secondary {
+    color: tokens.$si-sys-text-on-accent-secondary !important;
+  }
+  .#{$prefix}on-accent-secondary-active {
+    color: tokens.$si-sys-text-on-accent-secondary-active !important;
+  }
+  .#{$prefix}on-accent-secondary-hover {
+    color: tokens.$si-sys-text-on-accent-secondary-hover !important;
+  }
+  .#{$prefix}on-caution {
+    color: tokens.$si-sys-text-on-caution !important;
+  }
+  .#{$prefix}on-critical {
+    color: tokens.$si-sys-text-on-critical !important;
+  }
+  .#{$prefix}on-danger {
+    color: tokens.$si-sys-text-on-danger !important;
+  }
+  .#{$prefix}on-danger-secondary {
+    color: tokens.$si-sys-text-on-danger-secondary !important;
+  }
+  .#{$prefix}on-information {
+    color: tokens.$si-sys-text-on-information !important;
+  }
+  .#{$prefix}on-neutral {
+    color: tokens.$si-sys-text-on-neutral !important;
+  }
+  .#{$prefix}on-success {
+    color: tokens.$si-sys-text-on-success !important;
+  }
+  .#{$prefix}on-warning {
+    color: tokens.$si-sys-text-on-warning !important;
+  }
+  .#{$prefix}on-warning-secondary {
+    color: tokens.$si-sys-text-on-warning-secondary !important;
+  }
+  .#{$prefix}primary {
+    color: tokens.$si-sys-text-primary !important;
+  }
+  .#{$prefix}secondary {
+    color: tokens.$si-sys-text-secondary !important;
+  }
+  .#{$prefix}success {
+    color: tokens.$si-sys-text-success !important;
+  }
+  .#{$prefix}warning {
+    color: tokens.$si-sys-text-warning !important;
+  }
+}
+
+@mixin border-utilities($prefix: 'border-') {
+  .#{$prefix}1 {
+    border-color: tokens.$si-sys-border-1 !important;
+  }
+  .#{$prefix}2 {
+    border-color: tokens.$si-sys-border-2 !important;
+  }
+  .#{$prefix}3 {
+    border-color: tokens.$si-sys-border-3 !important;
+  }
+  .#{$prefix}4 {
+    border-color: tokens.$si-sys-border-4 !important;
+  }
+  .#{$prefix}accent {
+    border-color: tokens.$si-sys-border-accent !important;
+  }
+  .#{$prefix}accent-active {
+    border-color: tokens.$si-sys-border-accent-active !important;
+  }
+  .#{$prefix}accent-hover {
+    border-color: tokens.$si-sys-border-accent-hover !important;
+  }
+  .#{$prefix}caution {
+    border-color: tokens.$si-sys-border-caution !important;
+  }
+  .#{$prefix}critical {
+    border-color: tokens.$si-sys-border-critical !important;
+  }
+  .#{$prefix}danger {
+    border-color: tokens.$si-sys-border-danger !important;
+  }
+  .#{$prefix}danger-secondary {
+    border-color: tokens.$si-sys-border-danger-secondary !important;
+  }
+  .#{$prefix}information {
+    border-color: tokens.$si-sys-border-information !important;
+  }
+  .#{$prefix}inverse {
+    border-color: tokens.$si-sys-border-inverse !important;
+  }
+  .#{$prefix}neutral {
+    border-color: tokens.$si-sys-border-neutral !important;
+  }
+  .#{$prefix}success {
+    border-color: tokens.$si-sys-border-success !important;
+  }
+  .#{$prefix}warning {
+    border-color: tokens.$si-sys-border-warning !important;
+  }
+  .#{$prefix}warning-secondary {
+    border-color: tokens.$si-sys-border-warning-secondary !important;
+  }
+}

package/src/styles/variables/_elevation.scss

@@ -1,25 +1,27 @@
-$element-elevation-1:
-  0 0 4px var(--element-box-shadow-color-1),
-  0 4px 4px var(--element-box-shadow-color-2);
-$element-elevation-2:
-  0 0 8px var(--element-box-shadow-color-1),
-  0 8px 8px var(--element-box-shadow-color-2);
-$element-elevation-3:
-  0 0 16px var(--element-box-shadow-color-1),
-  0 16px 16px var(--element-box-shadow-color-2);
-$element-elevation-4:
-  0 0 32px var(--element-box-shadow-color-1),
-  0 32px 32px var(--element-box-shadow-color-2);
+@use 'system-tokens';
 
+// @deprecated Use $si-sys-effects-shadow-1 instead.
+$element-elevation-1: system-tokens.$si-sys-effects-shadow-1;
+// @deprecated Use $si-sys-effects-shadow-2 instead.
+$element-elevation-2: system-tokens.$si-sys-effects-shadow-2;
+// @deprecated Use $si-sys-effects-shadow-3 instead.
+$element-elevation-3: system-tokens.$si-sys-effects-shadow-3;
+// @deprecated Use $si-sys-effects-shadow-4 instead.
+$element-elevation-4: system-tokens.$si-sys-effects-shadow-4;
+
+// @deprecated There is no replacement.
 $element-elevation-inset-1:
   inset 0 0 4px var(--element-box-shadow-color-1),
   inset 0 4px 4px var(--element-box-shadow-color-2);
+// @deprecated There is no replacement.
 $element-elevation-inset-2:
   inset 0 0 8px var(--element-box-shadow-color-1),
   inset 0 8px 8px var(--element-box-shadow-color-2);
+// @deprecated There is no replacement.
 $element-elevation-inset-3:
   inset 0 0 16px var(--element-box-shadow-color-1),
   inset 0 16px 16px var(--element-box-shadow-color-2);
+// @deprecated There is no replacement.
 $element-elevation-inset-4:
   inset 0 0 32px var(--element-box-shadow-color-1),
   inset 0 32px 32px var(--element-box-shadow-color-2);

package/src/styles/variables/_focus.scss

@@ -1,8 +1,9 @@
+@use 'system-tokens';
 @use 'semantic-tokens';
 
 // Building focus< with outline
 $focus-style-outline: semantic-tokens.$element-button-focus-width solid
-  semantic-tokens.$element-focus-default;
+  system-tokens.$si-sys-effects-focus;
 $focus-style-outline-offset: semantic-tokens.$element-button-focus-overlay-width;
 $focus-style-outline-inside-offset: calc(-1 * #{semantic-tokens.$element-button-focus-width});
 
@@ -51,5 +52,5 @@ $focus-style-outline-inside-offset: calc(-1 * #{semantic-tokens.$element-button-
   @return inset 0 0 0 semantic-tokens.$element-button-focus-width $focus-color;
 }
 
-$si-focus-styling-box-shadow: make-focus(semantic-tokens.$element-focus-default);
-$si-focus-styling-inside-box-shadow: make-focus-inside(semantic-tokens.$element-focus-default);
+$si-focus-styling-box-shadow: make-focus(system-tokens.$si-sys-effects-focus);
+$si-focus-styling-inside-box-shadow: make-focus-inside(system-tokens.$si-sys-effects-focus);

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

@@ -1,21 +1,27 @@
 @use 'sass:map';
 @use './spacers';
+@use './sizing';
 @use './animations';
 
 // Custom variables
 $si-caret-transition-duration: animations.element-transition-duration(0.4s);
-$si-icon-font-size: 1.25rem;
-$si-icon-font-size-sm: 1rem;
-$si-icon-font-size-lg: 1.5rem;
 
-$btn-width-normal: 80px;
+// Icon sizes
+$si-icon-font-size-sm: var(--si-sys-sizing-icon-sm);
+$si-icon-font-size-md: var(--si-sys-sizing-icon-md);
+$si-icon-font-size: $si-icon-font-size-md;
+$si-icon-font-size-lg: var(--si-sys-sizing-icon-lg);
+$si-icon-font-size-xl: var(--si-sys-sizing-icon-xl);
+$si-icon-font-size-xxl: var(--si-sys-sizing-icon-xxl);
+
+$btn-width-normal: map.get(sizing.$sizing, 120);
 
 // Component styling
 
-$si-application-header-height: calc(1.5rem + (2 * map.get(spacers.$spacers, 5) + 1px));
-$si-titlebar-padding-y: map.get(spacers.$spacers, 3);
+$si-application-header-height: calc(map.get(sizing.$sizing, 100) + 1px);
+$si-titlebar-padding-y: map.get(spacers.$spacers-block, 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-padding-y: map.get(spacers.$spacers-block, 2);
 $si-system-banner-height: calc(1rem + 2 * $si-system-banner-padding-y);
 
 // allows adding a custom titlebar on top

package/src/styles/variables/_sizing.scss

@@ -0,0 +1,22 @@
+$sizing: (
+  10: var(--si-sys-sizing-sizing-10),
+  20: var(--si-sys-sizing-sizing-20),
+  30: var(--si-sys-sizing-sizing-30),
+  40: var(--si-sys-sizing-sizing-40),
+  50: var(--si-sys-sizing-sizing-50),
+  60: var(--si-sys-sizing-sizing-60),
+  70: var(--si-sys-sizing-sizing-70),
+  80: var(--si-sys-sizing-sizing-80),
+  90: var(--si-sys-sizing-sizing-90),
+  100: var(--si-sys-sizing-sizing-100),
+  110: var(--si-sys-sizing-sizing-110),
+  120: var(--si-sys-sizing-sizing-120),
+  130: var(--si-sys-sizing-sizing-130),
+  140: var(--si-sys-sizing-sizing-140),
+  150: var(--si-sys-sizing-sizing-150),
+  160: var(--si-sys-sizing-sizing-160),
+  170: var(--si-sys-sizing-sizing-170),
+  180: var(--si-sys-sizing-sizing-180),
+  190: var(--si-sys-sizing-sizing-190),
+  200: var(--si-sys-sizing-sizing-200)
+);

package/src/styles/variables/_spacers.scss

@@ -1,28 +1,56 @@
-$spacer: 16px;
+@use 'sass:map';
 
-// stylelint-disable-next-line scss/dollar-variable-default
-$spacers: (
+$spacers-inline: (
   0: 0,
-  // 2px
-  1: $spacer * 0.125,
-  // 4px
-  2: $spacer * 0.25,
-  // 6px
-  3: $spacer * 0.375,
-  // 8px
-  4: $spacer * 0.5,
-  // 12px
-  5: $spacer * 0.75,
-  // 16px
-  6: $spacer,
-  // 20px
-  7: $spacer * 1.25,
-  // 24px
-  8: $spacer * 1.5,
-  // 32px
-  9: $spacer * 2,
-  // 64px
-  10: $spacer * 4,
-  // 96px
-  11: $spacer * 6
+  1: var(--si-sys-sizing-spacing-x-10),
+  2: var(--si-sys-sizing-spacing-x-20),
+  3: var(--si-sys-sizing-spacing-x-30),
+  4: var(--si-sys-sizing-spacing-x-40),
+  5: var(--si-sys-sizing-spacing-x-50),
+  6: var(--si-sys-sizing-spacing-x-60),
+  7: var(--si-sys-sizing-spacing-x-70),
+  8: var(--si-sys-sizing-spacing-x-80),
+  9: var(--si-sys-sizing-spacing-x-90),
+  10: var(--si-sys-sizing-spacing-x-100),
+  11: var(--si-sys-sizing-spacing-x-110),
+  12: var(--si-sys-sizing-spacing-x-120),
+  13: var(--si-sys-sizing-spacing-x-130),
+  14: var(--si-sys-sizing-spacing-x-140)
 );
+
+$spacers-block: (
+  0: 0,
+  1: var(--si-sys-sizing-spacing-y-10),
+  2: var(--si-sys-sizing-spacing-y-20),
+  3: var(--si-sys-sizing-spacing-y-30),
+  4: var(--si-sys-sizing-spacing-y-40),
+  5: var(--si-sys-sizing-spacing-y-50),
+  6: var(--si-sys-sizing-spacing-y-60),
+  7: var(--si-sys-sizing-spacing-y-70),
+  8: var(--si-sys-sizing-spacing-y-80),
+  9: var(--si-sys-sizing-spacing-y-90),
+  10: var(--si-sys-sizing-spacing-y-100),
+  11: var(--si-sys-sizing-spacing-y-110),
+  12: var(--si-sys-sizing-spacing-y-120),
+  13: var(--si-sys-sizing-spacing-y-130),
+  14: var(--si-sys-sizing-spacing-y-140)
+);
+
+@function negative-spacer-map($spacers) {
+  $negative-spacers: ();
+
+  @each $key, $spacer in $spacers {
+    @if $key != 0 {
+      $negative-spacers: map.set($negative-spacers, $key, calc(#{$spacer} * -1));
+    }
+  }
+
+  @return $negative-spacers;
+}
+
+$negative-spacers-inline: negative-spacer-map($spacers-inline);
+$negative-spacers-block: negative-spacer-map($spacers-block);
+
+// @deprecated: Those are for compatibility and will go away with v52
+$spacer: 16px;
+$spacers: $spacers-block;

package/src/styles/variables/_system-tokens.scss

@@ -0,0 +1,190 @@
+/**
+ * Copyright (c) Siemens 2026
+ * Siemens Design Language Tokens
+ * Version 0.11.0
+ * Do not edit directly, this file was auto-generated.
+ */
+
+$si-sys-background-0: var(--si-sys-background-0);
+$si-sys-background-1: var(--si-sys-background-1);
+$si-sys-background-2: var(--si-sys-background-2);
+$si-sys-background-3: var(--si-sys-background-3);
+$si-sys-background-4: var(--si-sys-background-4);
+$si-sys-background-accent: var(--si-sys-background-accent);
+$si-sys-background-accent-active: var(--si-sys-background-accent-active);
+$si-sys-background-accent-hover: var(--si-sys-background-accent-hover);
+$si-sys-background-accent-secondary: var(--si-sys-background-accent-secondary);
+$si-sys-background-accent-secondary-active: var(--si-sys-background-accent-secondary-active);
+$si-sys-background-accent-secondary-hover: var(--si-sys-background-accent-secondary-hover);
+$si-sys-background-active: var(--si-sys-background-active);
+$si-sys-background-caution: var(--si-sys-background-caution);
+$si-sys-background-caution-active: var(--si-sys-background-caution-active);
+$si-sys-background-caution-hover: var(--si-sys-background-caution-hover);
+$si-sys-background-caution-subtle: var(--si-sys-background-caution-subtle);
+$si-sys-background-critical: var(--si-sys-background-critical);
+$si-sys-background-critical-active: var(--si-sys-background-critical-active);
+$si-sys-background-critical-hover: var(--si-sys-background-critical-hover);
+$si-sys-background-critical-subtle: var(--si-sys-background-critical-subtle);
+$si-sys-background-danger: var(--si-sys-background-danger);
+$si-sys-background-danger-active: var(--si-sys-background-danger-active);
+$si-sys-background-danger-hover: var(--si-sys-background-danger-hover);
+$si-sys-background-danger-secondary: var(--si-sys-background-danger-secondary);
+$si-sys-background-danger-subtle: var(--si-sys-background-danger-subtle);
+$si-sys-background-hover: var(--si-sys-background-hover);
+$si-sys-background-information: var(--si-sys-background-information);
+$si-sys-background-information-active: var(--si-sys-background-information-active);
+$si-sys-background-information-hover: var(--si-sys-background-information-hover);
+$si-sys-background-information-subtle: var(--si-sys-background-information-subtle);
+$si-sys-background-inverse: var(--si-sys-background-inverse);
+$si-sys-background-neutral: var(--si-sys-background-neutral);
+$si-sys-background-neutral-active: var(--si-sys-background-neutral-active);
+$si-sys-background-neutral-hover: var(--si-sys-background-neutral-hover);
+$si-sys-background-success: var(--si-sys-background-success);
+$si-sys-background-success-active: var(--si-sys-background-success-active);
+$si-sys-background-success-hover: var(--si-sys-background-success-hover);
+$si-sys-background-success-subtle: var(--si-sys-background-success-subtle);
+$si-sys-background-warning: var(--si-sys-background-warning);
+$si-sys-background-warning-active: var(--si-sys-background-warning-active);
+$si-sys-background-warning-hover: var(--si-sys-background-warning-hover);
+$si-sys-background-warning-secondary: var(--si-sys-background-warning-secondary);
+$si-sys-background-warning-subtle: var(--si-sys-background-warning-subtle);
+$si-sys-border-1: var(--si-sys-border-1);
+$si-sys-border-2: var(--si-sys-border-2);
+$si-sys-border-3: var(--si-sys-border-3);
+$si-sys-border-4: var(--si-sys-border-4);
+$si-sys-border-accent: var(--si-sys-border-accent);
+$si-sys-border-accent-active: var(--si-sys-border-accent-active);
+$si-sys-border-accent-hover: var(--si-sys-border-accent-hover);
+$si-sys-border-caution: var(--si-sys-border-caution);
+$si-sys-border-critical: var(--si-sys-border-critical);
+$si-sys-border-danger: var(--si-sys-border-danger);
+$si-sys-border-danger-secondary: var(--si-sys-border-danger-secondary);
+$si-sys-border-information: var(--si-sys-border-information);
+$si-sys-border-inverse: var(--si-sys-border-inverse);
+$si-sys-border-neutral: var(--si-sys-border-neutral);
+$si-sys-border-success: var(--si-sys-border-success);
+$si-sys-border-warning: var(--si-sys-border-warning);
+$si-sys-border-warning-secondary: var(--si-sys-border-warning-secondary);
+$si-sys-code-1: var(--si-sys-code-1);
+$si-sys-code-2: var(--si-sys-code-2);
+$si-sys-code-3: var(--si-sys-code-3);
+$si-sys-code-4: var(--si-sys-code-4);
+$si-sys-code-5: var(--si-sys-code-5);
+$si-sys-code-6: var(--si-sys-code-6);
+$si-sys-code-7: var(--si-sys-code-7);
+$si-sys-code-8: var(--si-sys-code-8);
+$si-sys-code-9: var(--si-sys-code-9);
+$si-sys-code-10: var(--si-sys-code-10);
+$si-sys-code-11: var(--si-sys-code-11);
+$si-sys-code-12: var(--si-sys-code-12);
+$si-sys-data-categorical-1: var(--si-sys-data-categorical-1);
+$si-sys-data-categorical-2: var(--si-sys-data-categorical-2);
+$si-sys-data-categorical-3: var(--si-sys-data-categorical-3);
+$si-sys-data-categorical-4: var(--si-sys-data-categorical-4);
+$si-sys-data-categorical-5: var(--si-sys-data-categorical-5);
+$si-sys-data-categorical-6: var(--si-sys-data-categorical-6);
+$si-sys-data-categorical-7: var(--si-sys-data-categorical-7);
+$si-sys-data-categorical-8: var(--si-sys-data-categorical-8);
+$si-sys-data-categorical-9: var(--si-sys-data-categorical-9);
+$si-sys-data-categorical-10: var(--si-sys-data-categorical-10);
+$si-sys-data-categorical-11: var(--si-sys-data-categorical-11);
+$si-sys-data-categorical-12: var(--si-sys-data-categorical-12);
+$si-sys-data-categorical-13: var(--si-sys-data-categorical-13);
+$si-sys-data-categorical-14: var(--si-sys-data-categorical-14);
+$si-sys-data-categorical-15: var(--si-sys-data-categorical-15);
+$si-sys-data-categorical-16: var(--si-sys-data-categorical-16);
+$si-sys-data-categorical-17: var(--si-sys-data-categorical-17);
+$si-sys-data-rating-average: var(--si-sys-data-rating-average);
+$si-sys-data-rating-bad: var(--si-sys-data-rating-bad);
+$si-sys-data-rating-excellent: var(--si-sys-data-rating-excellent);
+$si-sys-data-rating-good: var(--si-sys-data-rating-good);
+$si-sys-data-rating-poor: var(--si-sys-data-rating-poor);
+$si-sys-data-sequential-avocado-1: var(--si-sys-data-sequential-avocado-1);
+$si-sys-data-sequential-avocado-2: var(--si-sys-data-sequential-avocado-2);
+$si-sys-data-sequential-avocado-3: var(--si-sys-data-sequential-avocado-3);
+$si-sys-data-sequential-avocado-4: var(--si-sys-data-sequential-avocado-4);
+$si-sys-data-sequential-blue-1: var(--si-sys-data-sequential-blue-1);
+$si-sys-data-sequential-blue-2: var(--si-sys-data-sequential-blue-2);
+$si-sys-data-sequential-blue-3: var(--si-sys-data-sequential-blue-3);
+$si-sys-data-sequential-blue-4: var(--si-sys-data-sequential-blue-4);
+$si-sys-data-sequential-deep-blue-1: var(--si-sys-data-sequential-deep-blue-1);
+$si-sys-data-sequential-deep-blue-2: var(--si-sys-data-sequential-deep-blue-2);
+$si-sys-data-sequential-deep-blue-3: var(--si-sys-data-sequential-deep-blue-3);
+$si-sys-data-sequential-deep-blue-4: var(--si-sys-data-sequential-deep-blue-4);
+$si-sys-data-sequential-green-1: var(--si-sys-data-sequential-green-1);
+$si-sys-data-sequential-green-2: var(--si-sys-data-sequential-green-2);
+$si-sys-data-sequential-green-3: var(--si-sys-data-sequential-green-3);
+$si-sys-data-sequential-green-4: var(--si-sys-data-sequential-green-4);
+$si-sys-data-sequential-interactive-coral-1: var(--si-sys-data-sequential-interactive-coral-1);
+$si-sys-data-sequential-interactive-coral-2: var(--si-sys-data-sequential-interactive-coral-2);
+$si-sys-data-sequential-interactive-coral-3: var(--si-sys-data-sequential-interactive-coral-3);
+$si-sys-data-sequential-interactive-coral-4: var(--si-sys-data-sequential-interactive-coral-4);
+$si-sys-data-sequential-orange-1: var(--si-sys-data-sequential-orange-1);
+$si-sys-data-sequential-orange-2: var(--si-sys-data-sequential-orange-2);
+$si-sys-data-sequential-orange-3: var(--si-sys-data-sequential-orange-3);
+$si-sys-data-sequential-orange-4: var(--si-sys-data-sequential-orange-4);
+$si-sys-data-sequential-orchid-1: var(--si-sys-data-sequential-orchid-1);
+$si-sys-data-sequential-orchid-2: var(--si-sys-data-sequential-orchid-2);
+$si-sys-data-sequential-orchid-3: var(--si-sys-data-sequential-orchid-3);
+$si-sys-data-sequential-orchid-4: var(--si-sys-data-sequential-orchid-4);
+$si-sys-data-sequential-plum-1: var(--si-sys-data-sequential-plum-1);
+$si-sys-data-sequential-plum-2: var(--si-sys-data-sequential-plum-2);
+$si-sys-data-sequential-plum-3: var(--si-sys-data-sequential-plum-3);
+$si-sys-data-sequential-plum-4: var(--si-sys-data-sequential-plum-4);
+$si-sys-data-sequential-purple-1: var(--si-sys-data-sequential-purple-1);
+$si-sys-data-sequential-purple-2: var(--si-sys-data-sequential-purple-2);
+$si-sys-data-sequential-purple-3: var(--si-sys-data-sequential-purple-3);
+$si-sys-data-sequential-purple-4: var(--si-sys-data-sequential-purple-4);
+$si-sys-data-sequential-red-1: var(--si-sys-data-sequential-red-1);
+$si-sys-data-sequential-red-2: var(--si-sys-data-sequential-red-2);
+$si-sys-data-sequential-red-3: var(--si-sys-data-sequential-red-3);
+$si-sys-data-sequential-red-4: var(--si-sys-data-sequential-red-4);
+$si-sys-data-sequential-royal-blue-1: var(--si-sys-data-sequential-royal-blue-1);
+$si-sys-data-sequential-royal-blue-2: var(--si-sys-data-sequential-royal-blue-2);
+$si-sys-data-sequential-royal-blue-3: var(--si-sys-data-sequential-royal-blue-3);
+$si-sys-data-sequential-royal-blue-4: var(--si-sys-data-sequential-royal-blue-4);
+$si-sys-data-sequential-sand-1: var(--si-sys-data-sequential-sand-1);
+$si-sys-data-sequential-sand-2: var(--si-sys-data-sequential-sand-2);
+$si-sys-data-sequential-sand-3: var(--si-sys-data-sequential-sand-3);
+$si-sys-data-sequential-sand-4: var(--si-sys-data-sequential-sand-4);
+$si-sys-data-sequential-turquoise-1: var(--si-sys-data-sequential-turquoise-1);
+$si-sys-data-sequential-turquoise-2: var(--si-sys-data-sequential-turquoise-2);
+$si-sys-data-sequential-turquoise-3: var(--si-sys-data-sequential-turquoise-3);
+$si-sys-data-sequential-turquoise-4: var(--si-sys-data-sequential-turquoise-4);
+$si-sys-data-sequential-yellow-1: var(--si-sys-data-sequential-yellow-1);
+$si-sys-data-sequential-yellow-2: var(--si-sys-data-sequential-yellow-2);
+$si-sys-data-sequential-yellow-3: var(--si-sys-data-sequential-yellow-3);
+$si-sys-data-sequential-yellow-4: var(--si-sys-data-sequential-yellow-4);
+$si-sys-effects-backdrop: var(--si-sys-effects-backdrop);
+$si-sys-effects-focus: var(--si-sys-effects-focus);
+$si-sys-effects-logo: var(--si-sys-effects-logo);
+$si-sys-effects-shadow-1: var(--si-sys-effects-shadow-1);
+$si-sys-effects-shadow-2: var(--si-sys-effects-shadow-2);
+$si-sys-effects-shadow-3: var(--si-sys-effects-shadow-3);
+$si-sys-effects-shadow-4: var(--si-sys-effects-shadow-4);
+$si-sys-text-accent: var(--si-sys-text-accent);
+$si-sys-text-accent-active: var(--si-sys-text-accent-active);
+$si-sys-text-accent-hover: var(--si-sys-text-accent-hover);
+$si-sys-text-caution: var(--si-sys-text-caution);
+$si-sys-text-critical: var(--si-sys-text-critical);
+$si-sys-text-danger: var(--si-sys-text-danger);
+$si-sys-text-disabled: var(--si-sys-text-disabled);
+$si-sys-text-information: var(--si-sys-text-information);
+$si-sys-text-inverse: var(--si-sys-text-inverse);
+$si-sys-text-on-accent: var(--si-sys-text-on-accent);
+$si-sys-text-on-accent-secondary: var(--si-sys-text-on-accent-secondary);
+$si-sys-text-on-accent-secondary-active: var(--si-sys-text-on-accent-secondary-active);
+$si-sys-text-on-accent-secondary-hover: var(--si-sys-text-on-accent-secondary-hover);
+$si-sys-text-on-caution: var(--si-sys-text-on-caution);
+$si-sys-text-on-critical: var(--si-sys-text-on-critical);
+$si-sys-text-on-danger: var(--si-sys-text-on-danger);
+$si-sys-text-on-danger-secondary: var(--si-sys-text-on-danger-secondary);
+$si-sys-text-on-information: var(--si-sys-text-on-information);
+$si-sys-text-on-neutral: var(--si-sys-text-on-neutral);
+$si-sys-text-on-success: var(--si-sys-text-on-success);
+$si-sys-text-on-warning: var(--si-sys-text-on-warning);
+$si-sys-text-on-warning-secondary: var(--si-sys-text-on-warning-secondary);
+$si-sys-text-primary: var(--si-sys-text-primary);
+$si-sys-text-secondary: var(--si-sys-text-secondary);
+$si-sys-text-success: var(--si-sys-text-success);
+$si-sys-text-warning: var(--si-sys-text-warning);