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

package/src/styles/bootstrap/_type.scss

@@ -93,7 +93,7 @@
 }
 
 .blockquote-footer {
-  margin-block: -(variables.$blockquote-margin-y) variables.$blockquote-margin-y;
+  margin-block: calc(variables.$blockquote-margin-y * -1) variables.$blockquote-margin-y;
   font-size: variables.$blockquote-footer-font-size;
   color: variables.$blockquote-footer-color;
 
@@ -112,9 +112,8 @@ h1,
   );
 }
 
-.si-h1-bold,
-// @deprecated Will be removed in a future major version, use `.si-h1-bold` instead.
-.si-h1-black {
+// DEPRECATED: Use .si-h1 instead.
+.si-h1-bold {
   @include typography.si-font(
     typography.$si-font-size-h1-bold,
     typography.$si-line-height-h1-bold,
@@ -142,9 +141,8 @@ h3,
   );
 }
 
-.si-h4-bold,
-// @deprecated Will be removed in a future major version, use `.si-h4-bold` instead.
-.si-title-1-bold {
+// DEPRECATED: Use .si-h4 instead.
+.si-h4-bold {
   @include typography.si-font(
     typography.$si-font-size-h4-bold,
     typography.$si-line-height-h4-bold,
@@ -154,9 +152,7 @@ h3,
 
 h4,
 .h4,
-.si-h4,
-// @deprecated Will be removed in a future major version, use `.si-h4` instead.
-.si-title-1 {
+.si-h4 {
   @include typography.si-font(
     typography.$si-font-size-h4,
     typography.$si-line-height-h4,
@@ -164,9 +160,7 @@ h4,
   );
 }
 
-.si-h5-bold,
-// @deprecated Will be removed in a future major version, use `.si-h5-bold` instead.
-.si-title-2-bold {
+.si-h5-bold {
   @include typography.si-font(
     typography.$si-font-size-h5-bold,
     typography.$si-line-height-h5-bold,
@@ -175,12 +169,8 @@ h4,
 }
 
 h5,
-h6,
 .h5,
-.h6,
-.si-h5,
-// @deprecated Will be removed in a future major version, use `.si-h5` instead.
-.si-title-2 {
+.si-h5 {
   @include typography.si-font(
     typography.$si-font-size-h5,
     typography.$si-line-height-h5,
@@ -188,9 +178,17 @@ h6,
   );
 }
 
-.si-body-lg,
-// @deprecated Will be removed in a future major version, use `.si-body-lg` instead.
-.si-body-1 {
+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,
     typography.$si-line-height-body-lg,
@@ -198,9 +196,15 @@ h6,
   );
 }
 
-.si-body,
-// @deprecated Will be removed in a future major version, use `.si-body` instead.
-.si-body-2 {
+.si-body-lg-sbold {
+  @include typography.si-font(
+    typography.$si-font-size-body-lg-sbold,
+    typography.$si-line-height-body-lg-sbold,
+    typography.$si-font-weight-body-lg-sbold
+  );
+}
+
+.si-body {
   @include typography.si-font(
     typography.$si-font-size-body,
     typography.$si-line-height-body,
@@ -208,6 +212,47 @@ h6,
   );
 }
 
+.si-body-sbold {
+  @include typography.si-font(
+    typography.$si-font-size-body-sbold,
+    typography.$si-line-height-body-sbold,
+    typography.$si-font-weight-body-sbold
+  );
+}
+
+.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-paragraph-sbold {
+  @include typography.si-font(
+    typography.$si-font-size-body-paragraph-sbold,
+    typography.$si-line-height-body-paragraph-sbold,
+    typography.$si-font-weight-body-paragraph-sbold
+  );
+}
+
+.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-body-sm-sbold {
+  @include typography.si-font(
+    typography.$si-font-size-body-sm-sbold,
+    typography.$si-line-height-body-sm-sbold,
+    typography.$si-font-weight-body-sm-sbold
+  );
+}
+
+// DEPRECATED: Use .si-body-sm instead.
 .si-caption {
   @include typography.si-font(
     typography.$si-font-size-caption,
@@ -217,9 +262,7 @@ h6,
 }
 
 .si-display-xl,
-.display-1,
-// @deprecated Will be removed in a future major version, use `.si-display-xl` instead.
-.si-display-1 {
+.display-1 {
   @include typography.si-font(
     typography.$si-font-size-display-xl,
     typography.$si-line-height-display-xl,
@@ -227,10 +270,32 @@ h6,
   );
 }
 
+.si-display-xl-sbold {
+  @include typography.si-font(
+    typography.$si-font-size-display-xl-sbold,
+    typography.$si-line-height-display-xl-sbold,
+    typography.$si-font-weight-display-xl-sbold
+  );
+}
+
+.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-xxl-sbold {
+  @include typography.si-font(
+    typography.$si-font-size-display-xxl-sbold,
+    typography.$si-line-height-display-xxl-sbold,
+    typography.$si-font-weight-display-xxl-sbold
+  );
+}
+
 .si-display-lg,
-.display-2,
-// @deprecated Will be removed in a future major version, use `.si-display-lg` instead.
-.si-display-2 {
+.display-2 {
   @include typography.si-font(
     typography.$si-font-size-display-lg,
     typography.$si-line-height-display-lg,
@@ -238,10 +303,17 @@ h6,
   );
 }
 
+.si-display-lg-sbold {
+  @include typography.si-font(
+    typography.$si-font-size-display-lg-sbold,
+    typography.$si-line-height-display-lg-sbold,
+    typography.$si-font-weight-display-lg-sbold
+  );
+}
+
+// DEPRECATED: Use .si-display-lg-sbold instead of .si-display-bold.
 .si-display-bold,
-.display-3,
-// @deprecated Will be removed in a future major version, use `.si-display-bold` instead.
-.si-display-3 {
+.display-3 {
   @include typography.si-font(
     typography.$si-font-size-display-bold,
     typography.$si-line-height-display-bold,
@@ -249,10 +321,16 @@ h6,
   );
 }
 
+.si-display-sbold {
+  @include typography.si-font(
+    typography.$si-font-size-display-sbold,
+    typography.$si-line-height-display-sbold,
+    typography.$si-font-weight-display-sbold
+  );
+}
+
 .si-display,
-.display-4,
-// @deprecated Will be removed in a future major version, use `.si-display` instead.
-.si-display-4 {
+.display-4 {
   @include typography.si-font(
     typography.$si-font-size-display,
     typography.$si-line-height-display,
@@ -260,6 +338,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;
@@ -35,18 +35,12 @@
   }
 }
 
+// Deprecated legacy utilities. Use system-token text utilities instead.
 $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
+  'body': system-tokens.$si-sys-text-primary,
+  'tertiary': system-tokens.$si-sys-text-disabled,
+  'info': system-tokens.$si-sys-text-information,
+  'muted': system-tokens.$si-sys-text-disabled
 ) !default;
 
 @each $color, $value in $text-colors {
@@ -55,27 +49,28 @@ $text-colors: (
   }
 }
 
+// Deprecated legacy utilities. Use system-token background utilities instead.
 $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 +80,20 @@ $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,
+  'neutral-contrast': system-tokens.$si-sys-text-on-neutral
 ) !default;
 
 @each $color, $value in $status-colors {