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

package/src/styles/bootstrap/_card.scss

@@ -1,5 +1,5 @@
 @use '../variables/focus';
-@use '../variables/semantic-tokens';
+@use '../variables/system-tokens';
 @use '../variables/spacers';
 @use '../variables/typography';
 @use 'mixins/breakpoints';
@@ -43,56 +43,55 @@
   }
 
   &.accent-primary {
-    border-inline-start: map.get(spacers.$spacers, 4) solid semantic-tokens.$element-ui-0;
+    border-inline-start: map.get(spacers.$spacers, 4) solid system-tokens.$si-sys-border-accent;
   }
 
   &.accent-inactive {
-    border-inline-start: map.get(spacers.$spacers, 4) solid semantic-tokens.$element-ui-4;
+    border-inline-start: map.get(spacers.$spacers, 4) solid system-tokens.$si-sys-border-4;
   }
 
   &.accent-info {
-    border-inline-start: map.get(spacers.$spacers, 4) solid
-      semantic-tokens.$element-status-information;
+    border-inline-start: map.get(spacers.$spacers, 4) solid system-tokens.$si-sys-border-information;
   }
 
   &.accent-success {
-    border-inline-start: map.get(spacers.$spacers, 4) solid semantic-tokens.$element-status-success;
+    border-inline-start: map.get(spacers.$spacers, 4) solid system-tokens.$si-sys-border-success;
   }
 
   &.accent-warning {
-    border-inline-start: map.get(spacers.$spacers, 4) solid semantic-tokens.$element-status-warning;
+    border-inline-start: map.get(spacers.$spacers, 4) solid system-tokens.$si-sys-border-warning;
   }
 
   &.accent-caution {
-    border-inline-start: map.get(spacers.$spacers, 4) solid semantic-tokens.$element-status-caution;
+    border-inline-start: map.get(spacers.$spacers, 4) solid system-tokens.$si-sys-border-caution;
   }
 
   &.accent-danger {
-    border-inline-start: map.get(spacers.$spacers, 4) solid semantic-tokens.$element-status-danger;
+    border-inline-start: map.get(spacers.$spacers, 4) solid system-tokens.$si-sys-border-danger;
   }
 
   &.accent-critical {
-    border-inline-start: map.get(spacers.$spacers, 4) solid semantic-tokens.$element-status-critical;
+    border-inline-start: map.get(spacers.$spacers, 4) solid system-tokens.$si-sys-border-critical;
   }
 
   &.action-card:not(:disabled) {
     &:hover {
       &,
       .card-footer {
-        background-color: semantic-tokens.$element-base-1-hover;
+        background-color: system-tokens.$si-sys-background-hover;
       }
     }
 
     &:active {
       &,
       .card-footer {
-        background-color: semantic-tokens.$element-base-1-selected;
+        background-color: system-tokens.$si-sys-background-selected;
       }
     }
   }
 
   &.selected {
-    box-shadow: 0 0 0 1px semantic-tokens.$element-ui-0;
+    box-shadow: 0 0 0 1px system-tokens.$si-sys-border-accent-active;
   }
 
   &:focus-visible {
@@ -101,7 +100,7 @@
 
   &.card-outline {
     background-color: transparent;
-    box-shadow: inset 0 0 0 1px semantic-tokens.$element-ui-4;
+    box-shadow: inset 0 0 0 1px system-tokens.$si-sys-border-4;
   }
 }
 

package/src/styles/bootstrap/_dropdowns.scss

@@ -1,5 +1,5 @@
 @use '../variables';
-@use '../variables/semantic-tokens';
+@use '../variables/system-tokens';
 @use '../variables/spacers';
 @use '../variables/typography';
 @use '../variables/zindex';
@@ -126,15 +126,15 @@
 
   // duplicating hover styles from bootstrap. To split them from focus styles. Otherwise hover on focus elements will not work.
   &:hover {
-    color: semantic-tokens.$element-text-primary;
-    background-color: semantic-tokens.$element-base-1-hover;
+    color: system-tokens.$si-sys-text-primary;
+    background-color: system-tokens.$si-sys-background-hover;
     text-decoration: none;
   }
 
   // duplicating hover styles from bootstrap. To split them from focus styles. Otherwise hover on focus elements will not work.
   &:is(:active, .active) {
-    color: var(--element-text-primary);
-    background-color: var(--element-base-1-selected);
+    color: var(--si-sys-text-primary);
+    background-color: var(--si-sys-background-selected);
   }
 
   &:is(.disabled, :disabled) {
@@ -162,7 +162,7 @@
 // FIXME: drop when dropping si-menu-legacy
 .dropdown-item-static {
   &:is(.active, :active, :hover, :hover:focus:not(:focus-visible), :focus) {
-    background-color: semantic-tokens.$element-base-1;
+    background-color: system-tokens.$si-sys-background-1;
   }
 }
 

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

@@ -1,7 +1,7 @@
 @use 'sass:map';
 
 @use '../variables/focus';
-@use '../variables/semantic-tokens';
+@use '../variables/system-tokens';
 @use '../variables/typography';
 @use 'mixins/breakpoints';
 @use 'variables';
@@ -168,31 +168,31 @@
 }
 
 .list-group-item-secondary {
-  background-color: semantic-tokens.$element-ui-4;
-  color: semantic-tokens.$element-text-primary;
+  background-color: system-tokens.$si-sys-background-neutral;
+  color: system-tokens.$si-sys-text-primary;
 }
 
 .list-group-item-success {
-  color: semantic-tokens.$element-text-success;
-  background: semantic-tokens.$element-base-success;
+  color: system-tokens.$si-sys-text-success;
+  background: system-tokens.$si-sys-background-success-subtle;
 }
 
 .list-group-item-warning {
-  color: semantic-tokens.$element-text-warning;
-  background: semantic-tokens.$element-base-warning;
+  color: system-tokens.$si-sys-text-warning;
+  background: system-tokens.$si-sys-background-warning-subtle;
 }
 
 .list-group-item-caution {
-  background-color: semantic-tokens.$element-base-caution;
-  color: semantic-tokens.$element-text-caution;
+  background-color: system-tokens.$si-sys-background-caution-subtle;
+  color: system-tokens.$si-sys-text-caution;
 }
 
 .list-group-item-danger {
-  color: semantic-tokens.$element-text-danger;
-  background: semantic-tokens.$element-base-danger;
+  color: system-tokens.$si-sys-text-danger;
+  background: system-tokens.$si-sys-background-danger-subtle;
 }
 
 .list-group-item-info {
-  color: semantic-tokens.$element-text-information;
-  background: semantic-tokens.$element-base-information;
+  color: system-tokens.$si-sys-text-information;
+  background: system-tokens.$si-sys-background-information-subtle;
 }

package/src/styles/bootstrap/_nav.scss

@@ -1,5 +1,6 @@
-@use '../variables/semantic-tokens';
+@use '../variables/system-tokens';
 @use '../variables/spacers';
+@use '../variables/typography';
 @use './variables';
 
 @use 'sass:map';
@@ -16,9 +17,9 @@ $nav-tabs-min-width: 100px;
 
   .nav-link {
     &:hover {
-      color: semantic-tokens.$element-action-secondary-text-hover;
-      background: semantic-tokens.$element-action-secondary-hover;
-      border-color: semantic-tokens.$element-action-secondary-border-hover;
+      color: system-tokens.$si-sys-text-on-accent-secondary-hover;
+      background: system-tokens.$si-sys-background-accent-secondary-hover;
+      border-color: system-tokens.$si-sys-border-accent-hover;
     }
   }
 }
@@ -56,13 +57,13 @@ $nav-tabs-min-width: 100px;
     position: absolute;
     inset-inline: 0;
     inset-block-end: 0;
-    block-size: variables.$nav-tabs-border-width;
-    background: semantic-tokens.$element-ui-4;
+    block-size: 1px;
+    background: system-tokens.$si-sys-border-4;
   }
 
   &:focus-visible::before {
     // because otherwise the focus is cut off
-    background: semantic-tokens.$element-focus-default;
+    background: system-tokens.$si-sys-effects-focus;
   }
 
   .nav-link {
@@ -78,19 +79,27 @@ $nav-tabs-min-width: 100px;
     border-start-start-radius: variables.$btn-border-radius;
     border-start-end-radius: variables.$btn-border-radius;
     cursor: pointer;
+    font-weight: typography.$si-font-weight-body-lg;
 
     .badge {
       margin-inline-end: 0;
     }
 
     &.active {
-      border-color: semantic-tokens.$element-action-secondary-border-hover;
+      border-color: system-tokens.$si-sys-border-accent-hover;
+      font-size: typography.$si-font-size-body-lg-bold;
+      font-weight: typography.$si-font-weight-body-lg-bold;
+      line-height: typography.$si-line-height-body-lg-bold;
     }
 
     &:hover {
       isolation: isolate;
     }
 
+    &:not(.active):hover {
+      color: variables.$nav-link-color;
+    }
+
     &.disabled {
       color: variables.$nav-link-disabled-color;
       background-color: transparent;

package/src/styles/bootstrap/_pagination.scss

@@ -1,3 +1,4 @@
+@use '../variables/system-tokens';
 @use '../variables/semantic-tokens';
 @use '../variables/spacers';
 @use '../variables/typography';
@@ -27,11 +28,11 @@ $page-button-size: 1.5rem;
   background: transparent;
   font-size: typography.$si-font-size-h5;
   font-weight: typography.$si-font-weight-h5;
-  color: semantic-tokens.$element-text-primary;
+  color: system-tokens.$si-sys-text-primary;
   border: 0;
 
   &:is(.active, :hover:not(:disabled)):not(.separator) {
-    background: semantic-tokens.$element-base-1-selected;
+    background: system-tokens.$si-sys-background-selected;
   }
 
   &:has(.icon) {

package/src/styles/bootstrap/_reboot.scss

@@ -1,4 +1,5 @@
 @use '../variables/typography';
+@use '../selectors';
 @use './variables';
 
 // stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
@@ -25,7 +26,7 @@
 // Ability to the value of the root font sizes, affecting the value of `rem`.
 // null by default, thus nothing is generated.
 
-:root {
+#{selectors.$root} {
   @if variables.$enable-smooth-scroll {
     @media (prefers-reduced-motion: no-preference) {
       scroll-behavior: smooth;
@@ -41,7 +42,7 @@
 // 4. Change the default tap highlight to be completely transparent in iOS.
 
 // scss-docs-start reboot-body-rules
-body {
+#{selectors.$body} {
   margin: 0; // 1
   font-family: var(--#{variables.$variable-prefix}body-font-family);
   font-size: var(--#{variables.$variable-prefix}body-font-size);
@@ -341,6 +342,11 @@ table {
 }
 
 caption {
+  @include typography.si-font(
+    typography.$si-font-size-caption,
+    typography.$si-line-height-caption,
+    typography.$si-font-weight-caption
+  );
   padding-block: variables.$table-cell-padding-y;
   color: variables.$table-caption-color;
   text-align: start;

package/src/styles/bootstrap/_root.scss

@@ -1,9 +1,10 @@
 @use './variables';
+@use '../selectors';
 
 @use 'sass:meta';
 
 // this is _root.scss without the automatic `to-rgb` brain damage
-:root {
+#{selectors.$root} {
   // Note: Use `inspect` for lists so that quoted items keep the quotes.
   // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
   --#{variables.$variable-prefix}font-sans-serif: #{meta.inspect(variables.$font-family-sans-serif)};

package/src/styles/bootstrap/_tables.scss

@@ -96,7 +96,7 @@
     }
 
     :is(th, td) {
-      block-size: 64px;
+      block-size: calc(2lh + 2 * map.get(spacers.$spacers, 2) + 2 * map.get(spacers.$spacers, 5));
     }
   }
 }
@@ -118,7 +118,7 @@
 
   tbody {
     :is(th, td) {
-      block-size: 48px;
+      block-size: calc(2lh + 2 * map.get(spacers.$spacers, 4));
     }
   }
 }

package/src/styles/bootstrap/_type.scss

@@ -167,9 +167,7 @@ h4,
 }
 
 h5,
-h6,
 .h5,
-.h6,
 .si-h5 {
   @include typography.si-font(
     typography.$si-font-size-h5,
@@ -178,6 +176,16 @@ h6,
   );
 }
 
+h6,
+.h6,
+.si-h6 {
+  @include typography.si-font(
+    typography.$si-font-size-h6,
+    typography.$si-line-height-h6,
+    typography.$si-font-weight-h6
+  );
+}
+
 .si-body-lg {
   @include typography.si-font(
     typography.$si-font-size-body-lg,
@@ -194,6 +202,22 @@ h6,
   );
 }
 
+.si-body-paragraph {
+  @include typography.si-font(
+    typography.$si-font-size-body-paragraph,
+    typography.$si-line-height-body-paragraph,
+    typography.$si-font-weight-body-paragraph
+  );
+}
+
+.si-body-sm {
+  @include typography.si-font(
+    typography.$si-font-size-body-sm,
+    typography.$si-line-height-body-sm,
+    typography.$si-font-weight-body-sm
+  );
+}
+
 .si-caption {
   @include typography.si-font(
     typography.$si-font-size-caption,
@@ -211,6 +235,14 @@ h6,
   );
 }
 
+.si-display-xxl {
+  @include typography.si-font(
+    typography.$si-font-size-display-xxl,
+    typography.$si-line-height-display-xxl,
+    typography.$si-font-weight-display-xxl
+  );
+}
+
 .si-display-lg,
 .display-2 {
   @include typography.si-font(
@@ -238,6 +270,36 @@ h6,
   );
 }
 
+.si-code-sm,
+.si-code,
+.si-code-lg {
+  font-family: typography.$si-font-family-mono;
+}
+
+.si-code-sm {
+  @include typography.si-font(
+    typography.$si-font-size-code-sm,
+    typography.$si-line-height-code-sm,
+    typography.$si-font-weight-code-sm
+  );
+}
+
+.si-code {
+  @include typography.si-font(
+    typography.$si-font-size-code,
+    typography.$si-line-height-code,
+    typography.$si-font-weight-code
+  );
+}
+
+.si-code-lg {
+  @include typography.si-font(
+    typography.$si-font-size-code-lg,
+    typography.$si-line-height-code-lg,
+    typography.$si-font-weight-code-lg
+  );
+}
+
 .text-pre {
   white-space: pre;
 }

package/src/styles/bootstrap/_utilities.scss

@@ -1,4 +1,4 @@
-@use '../variables/semantic-tokens';
+@use '../variables/system-tokens';
 @use '../variables/utilities' as variables-utilities;
 @use 'mixins/breakpoints';
 @use 'mixins/utilities' as mixins-utilities;
@@ -36,17 +36,17 @@
 }
 
 $text-colors: (
-  'primary': semantic-tokens.$element-text-active,
-  'body': semantic-tokens.$element-text-primary,
-  'secondary': semantic-tokens.$element-text-secondary,
-  'tertiary': semantic-tokens.$element-text-disabled,
-  'success': semantic-tokens.$element-text-success,
-  'info': semantic-tokens.$element-text-information,
-  'warning': semantic-tokens.$element-text-warning,
-  'caution': semantic-tokens.$element-text-caution,
-  'danger': semantic-tokens.$element-text-danger,
-  'inverse': semantic-tokens.$element-text-inverse,
-  'muted': semantic-tokens.$element-text-disabled
+  'primary': system-tokens.$si-sys-text-accent,
+  'body': system-tokens.$si-sys-text-primary,
+  'secondary': system-tokens.$si-sys-text-secondary,
+  'tertiary': system-tokens.$si-sys-text-disabled,
+  'success': system-tokens.$si-sys-text-success,
+  'info': system-tokens.$si-sys-text-information,
+  'warning': system-tokens.$si-sys-text-warning,
+  'caution': system-tokens.$si-sys-text-caution,
+  'danger': system-tokens.$si-sys-text-danger,
+  'inverse': system-tokens.$si-sys-text-inverse,
+  'muted': system-tokens.$si-sys-text-disabled
 ) !default;
 
 @each $color, $value in $text-colors {
@@ -56,26 +56,26 @@ $text-colors: (
 }
 
 $background-colors: (
-  'primary': semantic-tokens.$element-ui-0,
-  'secondary': semantic-tokens.$element-text-secondary,
-  'tertiary': semantic-tokens.$element-text-disabled,
-  'success': semantic-tokens.$element-status-success,
-  'info': semantic-tokens.$element-status-information,
-  'warning': semantic-tokens.$element-status-warning,
-  'danger': semantic-tokens.$element-status-danger,
-  'base-0': semantic-tokens.$element-base-0,
-  'base-1': semantic-tokens.$element-base-1,
-  'base-2': semantic-tokens.$element-base-2,
-  'base-3': semantic-tokens.$element-base-3,
-  'base-4': semantic-tokens.$element-base-4,
-  'base-success': semantic-tokens.$element-base-success,
-  'base-info': semantic-tokens.$element-base-information,
-  'base-caution': semantic-tokens.$element-base-caution,
-  'base-warning': semantic-tokens.$element-base-warning,
-  'base-danger': semantic-tokens.$element-base-danger,
-  'base-critical': semantic-tokens.$element-base-critical,
-  'base-translucent-1': semantic-tokens.$element-base-translucent-1,
-  'base-translucent-2': semantic-tokens.$element-base-translucent-2
+  'primary': system-tokens.$si-sys-background-accent,
+  'secondary': system-tokens.$si-sys-text-secondary,
+  'tertiary': system-tokens.$si-sys-text-disabled,
+  'success': system-tokens.$si-sys-background-success,
+  'info': system-tokens.$si-sys-background-information,
+  'warning': system-tokens.$si-sys-background-warning,
+  'danger': system-tokens.$si-sys-background-danger,
+  'base-0': system-tokens.$si-sys-background-0,
+  'base-1': system-tokens.$si-sys-background-1,
+  'base-2': system-tokens.$si-sys-background-2,
+  'base-3': system-tokens.$si-sys-background-3,
+  'base-4': system-tokens.$si-sys-background-4,
+  'base-success': system-tokens.$si-sys-background-success-subtle,
+  'base-info': system-tokens.$si-sys-background-information-subtle,
+  'base-caution': system-tokens.$si-sys-background-caution-subtle,
+  'base-warning': system-tokens.$si-sys-background-warning-subtle,
+  'base-danger': system-tokens.$si-sys-background-danger-subtle,
+  'base-critical': system-tokens.$si-sys-background-critical-subtle,
+  'base-translucent-1': system-tokens.$si-sys-effects-backdrop,
+  'base-translucent-2': system-tokens.$si-sys-background-inverse
 ) !default;
 
 @each $color, $value in $background-colors {
@@ -85,19 +85,19 @@ $background-colors: (
 }
 
 $status-colors: (
-  'success': semantic-tokens.$element-status-success,
-  'info': semantic-tokens.$element-status-information,
-  'caution': semantic-tokens.$element-status-caution,
-  'warning': semantic-tokens.$element-status-warning,
-  'danger': semantic-tokens.$element-status-danger,
-  'critical': semantic-tokens.$element-status-critical,
-  'neutral': semantic-tokens.$element-ui-4,
-  'success-contrast': semantic-tokens.$element-status-success-contrast,
-  'info-contrast': semantic-tokens.$element-status-information-contrast,
-  'caution-contrast': semantic-tokens.$element-status-caution-contrast,
-  'warning-contrast': semantic-tokens.$element-status-warning-contrast,
-  'danger-contrast': semantic-tokens.$element-status-danger-contrast,
-  'critical-contrast': semantic-tokens.$element-status-critical-contrast
+  'success': system-tokens.$si-sys-background-success,
+  'info': system-tokens.$si-sys-background-information,
+  'caution': system-tokens.$si-sys-background-caution,
+  'warning': system-tokens.$si-sys-background-warning,
+  'danger': system-tokens.$si-sys-background-danger,
+  'critical': system-tokens.$si-sys-background-critical,
+  'neutral': system-tokens.$si-sys-background-neutral,
+  'success-contrast': system-tokens.$si-sys-text-on-success,
+  'info-contrast': system-tokens.$si-sys-text-on-information,
+  'caution-contrast': system-tokens.$si-sys-text-on-caution,
+  'warning-contrast': system-tokens.$si-sys-text-on-warning,
+  'danger-contrast': system-tokens.$si-sys-text-on-danger,
+  'critical-contrast': system-tokens.$si-sys-text-on-critical
 ) !default;
 
 @each $color, $value in $status-colors {