npm - @siemens/ix - Versions diffs - 2.0.0-beta.0 → 2.0.0-beta.1 - Mend

@siemens/ix 2.0.0-beta.0 → 2.0.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1215) hide show

package/scss/theme/classic-dark/_letterSpacing.scss ADDED Viewed

@@ -0,0 +1,13 @@
+/*
+ * COPYRIGHT (c) Siemens AG 2018-2023 ALL RIGHTS RESERVED.
+ */
+:root {
+  .theme-classic-dark {
+      --theme-letter-spacing-xs: -1.2%;
+      --theme-letter-spacing-sm: -0.6%;
+      --theme-letter-spacing-md: 0%;
+      --theme-letter-spacing-lg: 0.6%;
+      --theme-letter-spacing-xl: 1.2%;
+      --theme-letter-spacing-xxl: 2%;
+  }
+}

package/scss/theme/classic-dark/_lineHeights.scss CHANGED Viewed

@@ -3,7 +3,6 @@
  */
 :root {
   .theme-classic-dark {
-      --theme-line-height-xs: 140%;
       --theme-line-height-s: 150%;
       --theme-line-height-s-single: 150%;
       --theme-line-height-caption: 150%;
@@ -14,5 +13,9 @@
       --theme-line-height-l-single: 125%;
       --theme-line-height-h2: 145.5%;
       --theme-line-height-xl: 109.1%;
+      --theme-line-height-xs: 100%;
+      --theme-line-height-sm: 120%;
+      --theme-line-height-md: 143%;
+      --theme-line-height-lg: 150%;
   }
 }

package/scss/theme/classic-dark/_sizing.scss CHANGED Viewed

@@ -11,6 +11,18 @@
       --theme-small-icon-size: 1rem;
       --theme-focus--border-thickness: 0.0625rem;
       --theme-input-min-width: 2rem;
+      --theme-size--3: 0.375rem;
+      --theme-size--2: 0.5rem;
+      --theme-size--1: 0.75rem;
+      --theme-size-0: 1rem;
+      --theme-size-1: 1.5rem;
+      --theme-size-2: 2rem;
+      --theme-size-3: 3rem;
+      --theme-size-4: 4rem;
+      --theme-size-5: 6rem;
+      --theme-size-6: 8rem;
+      --theme-size-7: 12rem;
+      --theme-size-8: 16rem;
       --theme-tab-indicator--height: 0.125rem;
   }
 }

package/scss/theme/classic-dark/_spacing.scss CHANGED Viewed

@@ -5,5 +5,17 @@
   .theme-classic-dark {
       --theme-input-padding-y: 0.5rem;
       --theme-input-padding-x: 0.5rem;
+      --theme-space--3: 0.125rem;
+      --theme-space--2: 0.1875rem;
+      --theme-space--1: 0.25rem;
+      --theme-space-0: 0.735rem;
+      --theme-space-1: 0.5rem;
+      --theme-space-2: 0.75rem;
+      --theme-space-3: 1rem;
+      --theme-space-4: 1.5rem;
+      --theme-space-5: 2rem;
+      --theme-space-6: 3rem;
+      --theme-space-7: 4rem;
+      --theme-space-8: 6rem;
   }
 }

package/scss/theme/classic-dark/_typography.scss CHANGED Viewed

@@ -3,21 +3,44 @@
  */
 :root {
   .theme-classic-dark {
-      --theme-text-h2: var(--theme-font-weight-bold) var(--theme-font-size-xl)/var(--theme-line-height-h2) var(--theme-siemens-sans);
-      --theme-text-xl: var(--theme-font-weight-normal) var(--theme-font-size-xl)/var(--theme-line-height-xl) var(--theme-siemens-sans);
-      --theme-text-l-title: var(--theme-font-weight-bold) var(--theme-font-size-l)/var(--theme-line-height-l) var(--theme-siemens-sans);
-      --theme-text-l-title-single: var(--theme-font-weight-bold) var(--theme-font-size-l)/var(--theme-line-height-l-single) var(--theme-siemens-sans);
-      --theme-text-l: var(--theme-font-weight-normal) var(--theme-font-size-l)/var(--theme-line-height-l) var(--theme-siemens-sans);
-      --theme-text-l-single: var(--theme-font-weight-normal) var(--theme-font-size-l)/var(--theme-line-height-l-single) var(--theme-siemens-sans);
-      --theme-text-default-title: var(--theme-font-weight-bold) var(--theme-font-size-default)/var(--theme-line-height-default) var(--theme-siemens-sans);
-      --theme-text-default-title-single: var(--theme-font-weight-bold) var(--theme-font-size-default)/var(--theme-line-height-default-single) var(--theme-siemens-sans);
-      --theme-text-default: var(--theme-font-weight-normal) var(--theme-font-size-default)/var(--theme-line-height-default) var(--theme-siemens-sans);
-      --theme-text-default-single: var(--theme-font-weight-normal) var(--theme-font-size-default)/var(--theme-line-height-default-single) var(--theme-siemens-sans);
-      --theme-text-caption: var(--theme-font-weight-bold) var(--theme-font-size-caption)/var(--theme-line-height-caption) var(--theme-siemens-sans);
-      --theme-text-caption-single: var(--theme-font-weight-bold) var(--theme-font-size-caption)/var(--theme-line-height-caption-single) var(--theme-siemens-sans);
-      --theme-text-s: var(--theme-font-weight-normal) var(--theme-font-size-s)/var(--theme-line-height-s) var(--theme-siemens-sans);
-      --theme-text-s-single: var(--theme-font-weight-normal) var(--theme-font-size-s)/var(--theme-line-height-s-single) var(--theme-siemens-sans);
-      --theme-text-xs: var(--theme-font-weight-normal) var(--theme-font-size-xs)/var(--theme-line-height-xs) var(--theme-siemens-sans);
-      --theme-text-default-underline: var(--theme-font-weight-normal) var(--theme-font-size-default)/var(--theme-line-height-default) var(--theme-siemens-sans);
+      --theme-text-h2: var(--theme-font-weight-bold) var(--theme-font-size-xl)/var(--theme-line-height-h2) var(--theme-font-sans);
+      --theme-text-xl: var(--theme-font-weight-normal) var(--theme-font-size-xl)/var(--theme-line-height-xl) var(--theme-font-sans);
+      --theme-text-l-title: var(--theme-font-weight-bold) var(--theme-font-size-l)/var(--theme-line-height-l) var(--theme-font-sans);
+      --theme-text-l-title-single: var(--theme-font-weight-bold) var(--theme-font-size-l)/var(--theme-line-height-l-single) var(--theme-font-sans);
+      --theme-text-l: var(--theme-font-weight-normal) var(--theme-font-size-l)/var(--theme-line-height-l) var(--theme-font-sans);
+      --theme-text-l-single: var(--theme-font-weight-normal) var(--theme-font-size-l)/var(--theme-line-height-l-single) var(--theme-font-sans);
+      --theme-text-default-title: var(--theme-font-weight-bold) var(--theme-font-size-default)/var(--theme-line-height-default) var(--theme-font-sans);
+      --theme-text-default-title-single: var(--theme-font-weight-bold) var(--theme-font-size-default)/var(--theme-line-height-default-single) var(--theme-font-sans);
+      --theme-text-default: var(--theme-font-weight-normal) var(--theme-font-size-default)/var(--theme-line-height-default) var(--theme-font-sans);
+      --theme-text-default-single: var(--theme-font-weight-normal) var(--theme-font-size-default)/var(--theme-line-height-default-single) var(--theme-font-sans);
+      --theme-text-caption: var(--theme-font-weight-bold) var(--theme-font-size-caption)/var(--theme-line-height-caption) var(--theme-font-sans);
+      --theme-text-caption-single: var(--theme-font-weight-bold) var(--theme-font-size-caption)/var(--theme-line-height-caption-single) var(--theme-font-sans);
+      --theme-text-s: var(--theme-font-weight-normal) var(--theme-font-size-s)/var(--theme-line-height-s) var(--theme-font-sans);
+      --theme-text-s-single: var(--theme-font-weight-normal) var(--theme-font-size-s)/var(--theme-line-height-s-single) var(--theme-font-sans);
+      --theme-text-xs: var(--theme-font-weight-normal) var(--theme-font-size-xs)/140% var(--theme-font-sans);
+      --theme-text-default-underline: var(--theme-font-weight-normal) var(--theme-font-size-default)/var(--theme-line-height-default) var(--theme-font-sans);
+      --theme-label: var(--theme-font-weight-normal) var(--theme-ms-0)/var(--theme-line-height-sm) var(--theme-font-sans);
+      --theme-label-lg: var(--theme-font-weight-normal) var(--theme-ms-1)/var(--theme-line-height-sm) var(--theme-font-sans);
+      --theme-label-sm: var(--theme-font-weight-normal) var(--theme-ms--1)/var(--theme-line-height-sm) var(--theme-font-sans);
+      --theme-label-xs: var(--theme-font-weight-normal) var(--theme-ms--2)/var(--theme-line-height-sm) var(--theme-font-sans);
+      --theme-body: var(--theme-font-weight-normal) var(--theme-ms-0)/var(--theme-line-height-md) var(--theme-font-sans);
+      --theme-body-xs: var(--theme-font-weight-normal) var(--theme-ms--2)/var(--theme-line-height-md) var(--theme-font-sans);
+      --theme-body-sm: var(--theme-font-weight-normal) var(--theme-ms--1)/var(--theme-line-height-md) var(--theme-font-sans);
+      --theme-body-lg: var(--theme-font-weight-normal) var(--theme-ms-1)/var(--theme-line-height-md) var(--theme-font-sans);
+      --theme-display: var(--theme-font-weight-normal) var(--theme-ms-3)/var(--theme-line-height-xs) var(--theme-font-sans);
+      --theme-display-xs: var(--theme-font-weight-normal) var(--theme-ms-1)/var(--theme-line-height-xs) var(--theme-font-sans);
+      --theme-display-sm: var(--theme-font-weight-normal) var(--theme-ms-2)/var(--theme-line-height-xs) var(--theme-font-sans);
+      --theme-display-lg: var(--theme-font-weight-normal) var(--theme-ms-4)/var(--theme-line-height-xs) var(--theme-font-sans);
+      --theme-display-xl: var(--theme-font-weight-bold) var(--theme-ms-5)/var(--theme-line-height-xs) var(--theme-font-sans);
+      --theme-display-xxl: var(--theme-font-weight-bold) var(--theme-ms-6)/var(--theme-line-height-xs) var(--theme-font-sans);
+      --theme-h6: var(--theme-font-weight-bold) var(--theme-ms--1)/var(--theme-line-height-md) var(--theme-font-sans);
+      --theme-h5: var(--theme-font-weight-bold) var(--theme-ms-0)/var(--theme-line-height-md) var(--theme-font-sans);
+      --theme-h4: var(--theme-font-weight-bold) var(--theme-ms-1)/var(--theme-line-height-md) var(--theme-font-sans);
+      --theme-h3: var(--theme-font-weight-bold) var(--theme-ms-2)/var(--theme-line-height-md) var(--theme-font-sans);
+      --theme-h2: var(--theme-font-weight-bold) var(--theme-ms-3)/var(--theme-line-height-md) var(--theme-font-sans);
+      --theme-h1: var(--theme-font-weight-bold) var(--theme-ms-4)/var(--theme-line-height-sm) var(--theme-font-sans);
+      --theme-code: var(--theme-font-weight-normal) var(--theme-ms-0)/var(--theme-line-height-lg) var(--theme-font-code);
+      --theme-code-sm: var(--theme-font-weight-normal) var(--theme-ms--1)/var(--theme-line-height-lg) var(--theme-font-code);
+      --theme-code-lg: var(--theme-font-weight-normal) var(--theme-ms-1)/var(--theme-line-height-lg) var(--theme-font-code);
   }
 }

package/scss/theme/classic-light/_boxShadow.scss CHANGED Viewed

@@ -3,11 +3,11 @@
  */
 :root {
   .theme-classic-light {
-      --theme-shadow-1: 0 1 1 #00000033, 0 2 2 #0000001a;
-      --theme-shadow-2: 0 0 16 #0000001a, 4 0 8 #00000033, -4 0 8 #00000033;
-      --theme-shadow-3: 0 0 8 #00000033, 0 2 6 #00000033;
-      --theme-shadow-4: 0 12 18 #0000001a, 0 4 8 #0000001a, 0 0 2 #0000001a;
-      --theme-inset-shadow-1: inset 0 2 4 #0000001f;
+      --theme-shadow-1: 0px 1px 1px #00000033, 0px 2px 2px #0000001a;
+      --theme-shadow-2: 0px 0px 16px #0000001a, 4px 0px 8px #00000033, -4px 0px 8px #00000033;
+      --theme-shadow-3: 0px 0px 8px #00000033, 0px 2px 6px #00000033;
+      --theme-shadow-4: 0px 12px 18px #0000001a, 0px 4px 8px #0000001a, 0px 0px 2px #0000001a;
+      --theme-inset-shadow-1: inset 0px 2px 4px #0000001f;
       --theme-input--box-shadow: var(--theme-inset-shadow-1);
       --theme-menu--box-shadow: var(--theme-shadow-4);
       --theme-navigation--box-shadow: var(--theme-shadow-2);

package/scss/theme/classic-light/_fontFamilies.scss CHANGED Viewed

@@ -3,6 +3,7 @@
  */
 :root {
   .theme-classic-light {
-      --theme-siemens-sans: Siemens Sans;
+      --theme-font-code: JetBrains Mono;
+      --theme-font-sans: Arial;
   }
 }

package/scss/theme/classic-light/_fontSizes.scss CHANGED Viewed

@@ -9,5 +9,16 @@
       --theme-font-size-default: 0.875rem;
       --theme-font-size-l: 1rem;
       --theme-font-size-xl: 1.375rem;
+      --theme-ms--2: 0.625rem;
+      --theme-ms--1: 0.75rem;
+      --theme-ms-0: 0.875rem;
+      --theme-ms-1: 1rem;
+      --theme-ms-2: 1.25rem;
+      --theme-ms-3: 1.5rem;
+      --theme-ms-4: 1.8125rem;
+      --theme-ms-5: 2.1875rem;
+      --theme-ms-6: 2.625rem;
+      --theme-ms-7: 3.125rem;
+      --theme-ms-8: 3.75rem;
   }
 }

package/scss/theme/classic-light/_fontWeights.scss CHANGED Viewed

@@ -3,7 +3,8 @@
  */
 :root {
   .theme-classic-light {
-      --theme-font-weight-bold: 700;
       --theme-font-weight-normal: 400;
+      --theme-font-weight-bold: 700;
+      --theme-font-weight-black: 900;
   }
 }

package/scss/theme/classic-light/_index.scss CHANGED Viewed

@@ -14,3 +14,10 @@
 @import "./spacing";
 @import "./borderWidth";
 @import "./border";
+@import "./letterSpacing";
+:root {
+  .theme-classic-light {
+    --ix-theme-name: classic-light;
+  }
+}

package/scss/theme/classic-light/_letterSpacing.scss ADDED Viewed

@@ -0,0 +1,13 @@
+/*
+ * COPYRIGHT (c) Siemens AG 2018-2023 ALL RIGHTS RESERVED.
+ */
+:root {
+  .theme-classic-light {
+      --theme-letter-spacing-xs: -1.2%;
+      --theme-letter-spacing-sm: -0.6%;
+      --theme-letter-spacing-md: 0%;
+      --theme-letter-spacing-lg: 0.6%;
+      --theme-letter-spacing-xl: 1.2%;
+      --theme-letter-spacing-xxl: 2%;
+  }
+}

package/scss/theme/classic-light/_lineHeights.scss CHANGED Viewed

@@ -3,7 +3,6 @@
  */
 :root {
   .theme-classic-light {
-      --theme-line-height-xs: 140%;
       --theme-line-height-s: 150%;
       --theme-line-height-s-single: 150%;
       --theme-line-height-caption: 150%;
@@ -14,5 +13,9 @@
       --theme-line-height-l-single: 125%;
       --theme-line-height-h2: 145.5%;
       --theme-line-height-xl: 109.1%;
+      --theme-line-height-xs: 100%;
+      --theme-line-height-sm: 120%;
+      --theme-line-height-md: 143%;
+      --theme-line-height-lg: 150%;
   }
 }

package/scss/theme/classic-light/_sizing.scss CHANGED Viewed

@@ -11,6 +11,18 @@
       --theme-small-icon-size: 1rem;
       --theme-focus--border-thickness: 0.0625rem;
       --theme-input-min-width: 2rem;
+      --theme-size--3: 0.375rem;
+      --theme-size--2: 0.5rem;
+      --theme-size--1: 0.75rem;
+      --theme-size-0: 1rem;
+      --theme-size-1: 1.5rem;
+      --theme-size-2: 2rem;
+      --theme-size-3: 3rem;
+      --theme-size-4: 4rem;
+      --theme-size-5: 6rem;
+      --theme-size-6: 8rem;
+      --theme-size-7: 12rem;
+      --theme-size-8: 16rem;
       --theme-tab-indicator--height: 0.125rem;
   }
 }

package/scss/theme/classic-light/_spacing.scss CHANGED Viewed

@@ -5,5 +5,17 @@
   .theme-classic-light {
       --theme-input-padding-y: 0.5rem;
       --theme-input-padding-x: 0.5rem;
+      --theme-space--3: 0.125rem;
+      --theme-space--2: 0.1875rem;
+      --theme-space--1: 0.25rem;
+      --theme-space-0: 0.735rem;
+      --theme-space-1: 0.5rem;
+      --theme-space-2: 0.75rem;
+      --theme-space-3: 1rem;
+      --theme-space-4: 1.5rem;
+      --theme-space-5: 2rem;
+      --theme-space-6: 3rem;
+      --theme-space-7: 4rem;
+      --theme-space-8: 6rem;
   }
 }

package/scss/theme/classic-light/_typography.scss CHANGED Viewed

@@ -3,21 +3,44 @@
  */
 :root {
   .theme-classic-light {
-      --theme-text-h2: var(--theme-font-weight-bold) var(--theme-font-size-xl)/var(--theme-line-height-h2) var(--theme-siemens-sans);
-      --theme-text-xl: var(--theme-font-weight-normal) var(--theme-font-size-xl)/var(--theme-line-height-xl) var(--theme-siemens-sans);
-      --theme-text-l-title: var(--theme-font-weight-bold) var(--theme-font-size-l)/var(--theme-line-height-l) var(--theme-siemens-sans);
-      --theme-text-l-title-single: var(--theme-font-weight-bold) var(--theme-font-size-l)/var(--theme-line-height-l-single) var(--theme-siemens-sans);
-      --theme-text-l: var(--theme-font-weight-normal) var(--theme-font-size-l)/var(--theme-line-height-l) var(--theme-siemens-sans);
-      --theme-text-l-single: var(--theme-font-weight-normal) var(--theme-font-size-l)/var(--theme-line-height-l-single) var(--theme-siemens-sans);
-      --theme-text-default-title: var(--theme-font-weight-bold) var(--theme-font-size-default)/var(--theme-line-height-default) var(--theme-siemens-sans);
-      --theme-text-default-title-single: var(--theme-font-weight-bold) var(--theme-font-size-default)/var(--theme-line-height-default-single) var(--theme-siemens-sans);
-      --theme-text-default: var(--theme-font-weight-normal) var(--theme-font-size-default)/var(--theme-line-height-default) var(--theme-siemens-sans);
-      --theme-text-default-single: var(--theme-font-weight-normal) var(--theme-font-size-default)/var(--theme-line-height-default-single) var(--theme-siemens-sans);
-      --theme-text-caption: var(--theme-font-weight-bold) var(--theme-font-size-caption)/var(--theme-line-height-caption) var(--theme-siemens-sans);
-      --theme-text-caption-single: var(--theme-font-weight-bold) var(--theme-font-size-caption)/var(--theme-line-height-caption-single) var(--theme-siemens-sans);
-      --theme-text-s: var(--theme-font-weight-normal) var(--theme-font-size-s)/var(--theme-line-height-s) var(--theme-siemens-sans);
-      --theme-text-s-single: var(--theme-font-weight-normal) var(--theme-font-size-s)/var(--theme-line-height-s-single) var(--theme-siemens-sans);
-      --theme-text-xs: var(--theme-font-weight-normal) var(--theme-font-size-xs)/var(--theme-line-height-xs) var(--theme-siemens-sans);
-      --theme-text-default-underline: var(--theme-font-weight-normal) var(--theme-font-size-default)/var(--theme-line-height-default) var(--theme-siemens-sans);
+      --theme-text-h2: var(--theme-font-weight-bold) var(--theme-font-size-xl)/var(--theme-line-height-h2) var(--theme-font-sans);
+      --theme-text-xl: var(--theme-font-weight-normal) var(--theme-font-size-xl)/var(--theme-line-height-xl) var(--theme-font-sans);
+      --theme-text-l-title: var(--theme-font-weight-bold) var(--theme-font-size-l)/var(--theme-line-height-l) var(--theme-font-sans);
+      --theme-text-l-title-single: var(--theme-font-weight-bold) var(--theme-font-size-l)/var(--theme-line-height-l-single) var(--theme-font-sans);
+      --theme-text-l: var(--theme-font-weight-normal) var(--theme-font-size-l)/var(--theme-line-height-l) var(--theme-font-sans);
+      --theme-text-l-single: var(--theme-font-weight-normal) var(--theme-font-size-l)/var(--theme-line-height-l-single) var(--theme-font-sans);
+      --theme-text-default-title: var(--theme-font-weight-bold) var(--theme-font-size-default)/var(--theme-line-height-default) var(--theme-font-sans);
+      --theme-text-default-title-single: var(--theme-font-weight-bold) var(--theme-font-size-default)/var(--theme-line-height-default-single) var(--theme-font-sans);
+      --theme-text-default: var(--theme-font-weight-normal) var(--theme-font-size-default)/var(--theme-line-height-default) var(--theme-font-sans);
+      --theme-text-default-single: var(--theme-font-weight-normal) var(--theme-font-size-default)/var(--theme-line-height-default-single) var(--theme-font-sans);
+      --theme-text-caption: var(--theme-font-weight-bold) var(--theme-font-size-caption)/var(--theme-line-height-caption) var(--theme-font-sans);
+      --theme-text-caption-single: var(--theme-font-weight-bold) var(--theme-font-size-caption)/var(--theme-line-height-caption-single) var(--theme-font-sans);
+      --theme-text-s: var(--theme-font-weight-normal) var(--theme-font-size-s)/var(--theme-line-height-s) var(--theme-font-sans);
+      --theme-text-s-single: var(--theme-font-weight-normal) var(--theme-font-size-s)/var(--theme-line-height-s-single) var(--theme-font-sans);
+      --theme-text-xs: var(--theme-font-weight-normal) var(--theme-font-size-xs)/140% var(--theme-font-sans);
+      --theme-text-default-underline: var(--theme-font-weight-normal) var(--theme-font-size-default)/var(--theme-line-height-default) var(--theme-font-sans);
+      --theme-label: var(--theme-font-weight-normal) var(--theme-ms-0)/var(--theme-line-height-sm) var(--theme-font-sans);
+      --theme-label-lg: var(--theme-font-weight-normal) var(--theme-ms-1)/var(--theme-line-height-sm) var(--theme-font-sans);
+      --theme-label-sm: var(--theme-font-weight-normal) var(--theme-ms--1)/var(--theme-line-height-sm) var(--theme-font-sans);
+      --theme-label-xs: var(--theme-font-weight-normal) var(--theme-ms--2)/var(--theme-line-height-sm) var(--theme-font-sans);
+      --theme-body: var(--theme-font-weight-normal) var(--theme-ms-0)/var(--theme-line-height-md) var(--theme-font-sans);
+      --theme-body-xs: var(--theme-font-weight-normal) var(--theme-ms--2)/var(--theme-line-height-md) var(--theme-font-sans);
+      --theme-body-sm: var(--theme-font-weight-normal) var(--theme-ms--1)/var(--theme-line-height-md) var(--theme-font-sans);
+      --theme-body-lg: var(--theme-font-weight-normal) var(--theme-ms-1)/var(--theme-line-height-md) var(--theme-font-sans);
+      --theme-display: var(--theme-font-weight-normal) var(--theme-ms-3)/var(--theme-line-height-xs) var(--theme-font-sans);
+      --theme-display-xs: var(--theme-font-weight-normal) var(--theme-ms-1)/var(--theme-line-height-xs) var(--theme-font-sans);
+      --theme-display-sm: var(--theme-font-weight-normal) var(--theme-ms-2)/var(--theme-line-height-xs) var(--theme-font-sans);
+      --theme-display-lg: var(--theme-font-weight-normal) var(--theme-ms-4)/var(--theme-line-height-xs) var(--theme-font-sans);
+      --theme-display-xl: var(--theme-font-weight-bold) var(--theme-ms-5)/var(--theme-line-height-xs) var(--theme-font-sans);
+      --theme-display-xxl: var(--theme-font-weight-bold) var(--theme-ms-6)/var(--theme-line-height-xs) var(--theme-font-sans);
+      --theme-h6: var(--theme-font-weight-bold) var(--theme-ms--1)/var(--theme-line-height-md) var(--theme-font-sans);
+      --theme-h5: var(--theme-font-weight-bold) var(--theme-ms-0)/var(--theme-line-height-md) var(--theme-font-sans);
+      --theme-h4: var(--theme-font-weight-bold) var(--theme-ms-1)/var(--theme-line-height-md) var(--theme-font-sans);
+      --theme-h3: var(--theme-font-weight-bold) var(--theme-ms-2)/var(--theme-line-height-md) var(--theme-font-sans);
+      --theme-h2: var(--theme-font-weight-bold) var(--theme-ms-3)/var(--theme-line-height-md) var(--theme-font-sans);
+      --theme-h1: var(--theme-font-weight-bold) var(--theme-ms-4)/var(--theme-line-height-sm) var(--theme-font-sans);
+      --theme-code: var(--theme-font-weight-normal) var(--theme-ms-0)/var(--theme-line-height-lg) var(--theme-font-code);
+      --theme-code-sm: var(--theme-font-weight-normal) var(--theme-ms--1)/var(--theme-line-height-lg) var(--theme-font-code);
+      --theme-code-lg: var(--theme-font-weight-normal) var(--theme-ms-1)/var(--theme-line-height-lg) var(--theme-font-code);
   }
 }

package/scss/theme/legacy-classic-dark/_fontFamilies.scss CHANGED Viewed

@@ -3,6 +3,7 @@
  */
 :root {
   .theme-legacy-classic-dark {
-      --theme-siemens-sans: Siemens Sans;
+      --theme-font-code: JetBrains Mono;
+      --theme-font-sans: Arial;
   }
 }

package/scss/theme/legacy-classic-dark/_fontSizes.scss CHANGED Viewed

@@ -9,5 +9,16 @@
       --theme-font-size-default: 0.875rem;
       --theme-font-size-l: 1rem;
       --theme-font-size-xl: 1.375rem;
+      --theme-ms--2: 0.625rem;
+      --theme-ms--1: 0.75rem;
+      --theme-ms-0: 0.875rem;
+      --theme-ms-1: 1rem;
+      --theme-ms-2: 1.25rem;
+      --theme-ms-3: 1.5rem;
+      --theme-ms-4: 1.8125rem;
+      --theme-ms-5: 2.1875rem;
+      --theme-ms-6: 2.625rem;
+      --theme-ms-7: 3.125rem;
+      --theme-ms-8: 3.75rem;
   }
 }

package/scss/theme/legacy-classic-dark/_fontWeights.scss CHANGED Viewed

@@ -3,7 +3,8 @@
  */
 :root {
   .theme-legacy-classic-dark {
-      --theme-font-weight-bold: 700;
       --theme-font-weight-normal: 400;
+      --theme-font-weight-bold: 700;
+      --theme-font-weight-black: 900;
   }
 }

package/scss/theme/legacy-classic-dark/_index.scss CHANGED Viewed

@@ -14,3 +14,10 @@
 @import "./spacing";
 @import "./borderWidth";
 @import "./border";
+@import "./letterSpacing";
+:root {
+  .theme-legacy-classic-dark {
+    --ix-theme-name: legacy-classic-dark;
+  }
+}

package/scss/theme/legacy-classic-dark/_letterSpacing.scss ADDED Viewed

@@ -0,0 +1,13 @@
+/*
+ * COPYRIGHT (c) Siemens AG 2018-2023 ALL RIGHTS RESERVED.
+ */
+:root {
+  .theme-legacy-classic-dark {
+      --theme-letter-spacing-xs: -1.2%;
+      --theme-letter-spacing-sm: -0.6%;
+      --theme-letter-spacing-md: 0%;
+      --theme-letter-spacing-lg: 0.6%;
+      --theme-letter-spacing-xl: 1.2%;
+      --theme-letter-spacing-xxl: 2%;
+  }
+}

package/scss/theme/legacy-classic-dark/_lineHeights.scss CHANGED Viewed

@@ -3,7 +3,6 @@
  */
 :root {
   .theme-legacy-classic-dark {
-      --theme-line-height-xs: 140%;
       --theme-line-height-s: 150%;
       --theme-line-height-s-single: 150%;
       --theme-line-height-caption: 150%;
@@ -14,5 +13,9 @@
       --theme-line-height-l-single: 125%;
       --theme-line-height-h2: 145.5%;
       --theme-line-height-xl: 109.1%;
+      --theme-line-height-xs: 100%;
+      --theme-line-height-sm: 120%;
+      --theme-line-height-md: 143%;
+      --theme-line-height-lg: 150%;
   }
 }

package/scss/theme/legacy-classic-dark/_sizing.scss CHANGED Viewed

@@ -11,6 +11,18 @@
       --theme-small-icon-size: 1rem;
       --theme-focus--border-thickness: 0.0625rem;
       --theme-input-min-width: 2rem;
+      --theme-size--3: 0.375rem;
+      --theme-size--2: 0.5rem;
+      --theme-size--1: 0.75rem;
+      --theme-size-0: 1rem;
+      --theme-size-1: 1.5rem;
+      --theme-size-2: 2rem;
+      --theme-size-3: 3rem;
+      --theme-size-4: 4rem;
+      --theme-size-5: 6rem;
+      --theme-size-6: 8rem;
+      --theme-size-7: 12rem;
+      --theme-size-8: 16rem;
       --theme-tab-indicator--height: 0.25rem;
   }
 }

package/scss/theme/legacy-classic-dark/_spacing.scss CHANGED Viewed

@@ -5,5 +5,17 @@
   .theme-legacy-classic-dark {
       --theme-input-padding-y: 0.5rem;
       --theme-input-padding-x: 0.5rem;
+      --theme-space--3: 0.125rem;
+      --theme-space--2: 0.1875rem;
+      --theme-space--1: 0.25rem;
+      --theme-space-0: 0.735rem;
+      --theme-space-1: 0.5rem;
+      --theme-space-2: 0.75rem;
+      --theme-space-3: 1rem;
+      --theme-space-4: 1.5rem;
+      --theme-space-5: 2rem;
+      --theme-space-6: 3rem;
+      --theme-space-7: 4rem;
+      --theme-space-8: 6rem;
   }
 }

package/scss/theme/legacy-classic-dark/_typography.scss CHANGED Viewed

@@ -3,21 +3,44 @@
  */
 :root {
   .theme-legacy-classic-dark {
-      --theme-text-h2: var(--theme-font-weight-bold) var(--theme-font-size-xl)/var(--theme-line-height-h2) var(--theme-siemens-sans);
-      --theme-text-xl: var(--theme-font-weight-normal) var(--theme-font-size-xl)/var(--theme-line-height-xl) var(--theme-siemens-sans);
-      --theme-text-l-title: var(--theme-font-weight-bold) var(--theme-font-size-l)/var(--theme-line-height-l) var(--theme-siemens-sans);
-      --theme-text-l-title-single: var(--theme-font-weight-bold) var(--theme-font-size-l)/var(--theme-line-height-l-single) var(--theme-siemens-sans);
-      --theme-text-l: var(--theme-font-weight-normal) var(--theme-font-size-l)/var(--theme-line-height-l) var(--theme-siemens-sans);
-      --theme-text-l-single: var(--theme-font-weight-normal) var(--theme-font-size-l)/var(--theme-line-height-l-single) var(--theme-siemens-sans);
-      --theme-text-default-title: var(--theme-font-weight-bold) var(--theme-font-size-default)/var(--theme-line-height-default) var(--theme-siemens-sans);
-      --theme-text-default-title-single: var(--theme-font-weight-bold) var(--theme-font-size-default)/var(--theme-line-height-default-single) var(--theme-siemens-sans);
-      --theme-text-default: var(--theme-font-weight-normal) var(--theme-font-size-default)/var(--theme-line-height-default) var(--theme-siemens-sans);
-      --theme-text-default-single: var(--theme-font-weight-normal) var(--theme-font-size-default)/var(--theme-line-height-default-single) var(--theme-siemens-sans);
-      --theme-text-caption: var(--theme-font-weight-bold) var(--theme-font-size-caption)/var(--theme-line-height-caption) var(--theme-siemens-sans);
-      --theme-text-caption-single: var(--theme-font-weight-bold) var(--theme-font-size-caption)/var(--theme-line-height-caption-single) var(--theme-siemens-sans);
-      --theme-text-s: var(--theme-font-weight-normal) var(--theme-font-size-s)/var(--theme-line-height-s) var(--theme-siemens-sans);
-      --theme-text-s-single: var(--theme-font-weight-normal) var(--theme-font-size-s)/var(--theme-line-height-s-single) var(--theme-siemens-sans);
-      --theme-text-xs: var(--theme-font-weight-normal) var(--theme-font-size-xs)/var(--theme-line-height-xs) var(--theme-siemens-sans);
-      --theme-text-default-underline: var(--theme-font-weight-normal) var(--theme-font-size-default)/var(--theme-line-height-default) var(--theme-siemens-sans);
+      --theme-text-h2: var(--theme-font-weight-bold) var(--theme-font-size-xl)/var(--theme-line-height-h2) var(--theme-font-sans);
+      --theme-text-xl: var(--theme-font-weight-normal) var(--theme-font-size-xl)/var(--theme-line-height-xl) var(--theme-font-sans);
+      --theme-text-l-title: var(--theme-font-weight-bold) var(--theme-font-size-l)/var(--theme-line-height-l) var(--theme-font-sans);
+      --theme-text-l-title-single: var(--theme-font-weight-bold) var(--theme-font-size-l)/var(--theme-line-height-l-single) var(--theme-font-sans);
+      --theme-text-l: var(--theme-font-weight-normal) var(--theme-font-size-l)/var(--theme-line-height-l) var(--theme-font-sans);
+      --theme-text-l-single: var(--theme-font-weight-normal) var(--theme-font-size-l)/var(--theme-line-height-l-single) var(--theme-font-sans);
+      --theme-text-default-title: var(--theme-font-weight-bold) var(--theme-font-size-default)/var(--theme-line-height-default) var(--theme-font-sans);
+      --theme-text-default-title-single: var(--theme-font-weight-bold) var(--theme-font-size-default)/var(--theme-line-height-default-single) var(--theme-font-sans);
+      --theme-text-default: var(--theme-font-weight-normal) var(--theme-font-size-default)/var(--theme-line-height-default) var(--theme-font-sans);
+      --theme-text-default-single: var(--theme-font-weight-normal) var(--theme-font-size-default)/var(--theme-line-height-default-single) var(--theme-font-sans);
+      --theme-text-caption: var(--theme-font-weight-bold) var(--theme-font-size-caption)/var(--theme-line-height-caption) var(--theme-font-sans);
+      --theme-text-caption-single: var(--theme-font-weight-bold) var(--theme-font-size-caption)/var(--theme-line-height-caption-single) var(--theme-font-sans);
+      --theme-text-s: var(--theme-font-weight-normal) var(--theme-font-size-s)/var(--theme-line-height-s) var(--theme-font-sans);
+      --theme-text-s-single: var(--theme-font-weight-normal) var(--theme-font-size-s)/var(--theme-line-height-s-single) var(--theme-font-sans);
+      --theme-text-xs: var(--theme-font-weight-normal) var(--theme-font-size-xs)/140% var(--theme-font-sans);
+      --theme-text-default-underline: var(--theme-font-weight-normal) var(--theme-font-size-default)/var(--theme-line-height-default) var(--theme-font-sans);
+      --theme-label: var(--theme-font-weight-normal) var(--theme-ms-0)/var(--theme-line-height-sm) var(--theme-font-sans);
+      --theme-label-lg: var(--theme-font-weight-normal) var(--theme-ms-1)/var(--theme-line-height-sm) var(--theme-font-sans);
+      --theme-label-sm: var(--theme-font-weight-normal) var(--theme-ms--1)/var(--theme-line-height-sm) var(--theme-font-sans);
+      --theme-label-xs: var(--theme-font-weight-normal) var(--theme-ms--2)/var(--theme-line-height-sm) var(--theme-font-sans);
+      --theme-body: var(--theme-font-weight-normal) var(--theme-ms-0)/var(--theme-line-height-md) var(--theme-font-sans);
+      --theme-body-xs: var(--theme-font-weight-normal) var(--theme-ms--2)/var(--theme-line-height-md) var(--theme-font-sans);
+      --theme-body-sm: var(--theme-font-weight-normal) var(--theme-ms--1)/var(--theme-line-height-md) var(--theme-font-sans);
+      --theme-body-lg: var(--theme-font-weight-normal) var(--theme-ms-1)/var(--theme-line-height-md) var(--theme-font-sans);
+      --theme-display: var(--theme-font-weight-normal) var(--theme-ms-3)/var(--theme-line-height-xs) var(--theme-font-sans);
+      --theme-display-xs: var(--theme-font-weight-normal) var(--theme-ms-1)/var(--theme-line-height-xs) var(--theme-font-sans);
+      --theme-display-sm: var(--theme-font-weight-normal) var(--theme-ms-2)/var(--theme-line-height-xs) var(--theme-font-sans);
+      --theme-display-lg: var(--theme-font-weight-normal) var(--theme-ms-4)/var(--theme-line-height-xs) var(--theme-font-sans);
+      --theme-display-xl: var(--theme-font-weight-bold) var(--theme-ms-5)/var(--theme-line-height-xs) var(--theme-font-sans);
+      --theme-display-xxl: var(--theme-font-weight-bold) var(--theme-ms-6)/var(--theme-line-height-xs) var(--theme-font-sans);
+      --theme-h6: var(--theme-font-weight-bold) var(--theme-ms--1)/var(--theme-line-height-md) var(--theme-font-sans);
+      --theme-h5: var(--theme-font-weight-bold) var(--theme-ms-0)/var(--theme-line-height-md) var(--theme-font-sans);
+      --theme-h4: var(--theme-font-weight-bold) var(--theme-ms-1)/var(--theme-line-height-md) var(--theme-font-sans);
+      --theme-h3: var(--theme-font-weight-bold) var(--theme-ms-2)/var(--theme-line-height-md) var(--theme-font-sans);
+      --theme-h2: var(--theme-font-weight-bold) var(--theme-ms-3)/var(--theme-line-height-md) var(--theme-font-sans);
+      --theme-h1: var(--theme-font-weight-bold) var(--theme-ms-4)/var(--theme-line-height-sm) var(--theme-font-sans);
+      --theme-code: var(--theme-font-weight-normal) var(--theme-ms-0)/var(--theme-line-height-lg) var(--theme-font-code);
+      --theme-code-sm: var(--theme-font-weight-normal) var(--theme-ms--1)/var(--theme-line-height-lg) var(--theme-font-code);
+      --theme-code-lg: var(--theme-font-weight-normal) var(--theme-ms-1)/var(--theme-line-height-lg) var(--theme-font-code);
   }
 }

package/scss/theme/legacy-classic-light/_fontFamilies.scss CHANGED Viewed

@@ -3,6 +3,7 @@
  */
 :root {
   .theme-legacy-classic-light {
-      --theme-siemens-sans: Siemens Sans;
+      --theme-font-code: JetBrains Mono;
+      --theme-font-sans: Arial;
   }
 }

package/scss/theme/legacy-classic-light/_fontSizes.scss CHANGED Viewed

@@ -9,5 +9,16 @@
       --theme-font-size-default: 0.875rem;
       --theme-font-size-l: 1rem;
       --theme-font-size-xl: 1.375rem;
+      --theme-ms--2: 0.625rem;
+      --theme-ms--1: 0.75rem;
+      --theme-ms-0: 0.875rem;
+      --theme-ms-1: 1rem;
+      --theme-ms-2: 1.25rem;
+      --theme-ms-3: 1.5rem;
+      --theme-ms-4: 1.8125rem;
+      --theme-ms-5: 2.1875rem;
+      --theme-ms-6: 2.625rem;
+      --theme-ms-7: 3.125rem;
+      --theme-ms-8: 3.75rem;
   }
 }

package/scss/theme/legacy-classic-light/_fontWeights.scss CHANGED Viewed

@@ -3,7 +3,8 @@
  */
 :root {
   .theme-legacy-classic-light {
-      --theme-font-weight-bold: 700;
       --theme-font-weight-normal: 400;
+      --theme-font-weight-bold: 700;
+      --theme-font-weight-black: 900;
   }
 }

package/scss/theme/legacy-classic-light/_index.scss CHANGED Viewed

@@ -14,3 +14,10 @@
 @import "./spacing";
 @import "./borderWidth";
 @import "./border";
+@import "./letterSpacing";
+:root {
+  .theme-legacy-classic-light {
+    --ix-theme-name: legacy-classic-light;
+  }
+}

package/scss/theme/legacy-classic-light/_letterSpacing.scss ADDED Viewed

@@ -0,0 +1,13 @@
+/*
+ * COPYRIGHT (c) Siemens AG 2018-2023 ALL RIGHTS RESERVED.
+ */
+:root {
+  .theme-legacy-classic-light {
+      --theme-letter-spacing-xs: -1.2%;
+      --theme-letter-spacing-sm: -0.6%;
+      --theme-letter-spacing-md: 0%;
+      --theme-letter-spacing-lg: 0.6%;
+      --theme-letter-spacing-xl: 1.2%;
+      --theme-letter-spacing-xxl: 2%;
+  }
+}

package/scss/theme/legacy-classic-light/_lineHeights.scss CHANGED Viewed

@@ -3,7 +3,6 @@
  */
 :root {
   .theme-legacy-classic-light {
-      --theme-line-height-xs: 140%;
       --theme-line-height-s: 150%;
       --theme-line-height-s-single: 150%;
       --theme-line-height-caption: 150%;
@@ -14,5 +13,9 @@
       --theme-line-height-l-single: 125%;
       --theme-line-height-h2: 145.5%;
       --theme-line-height-xl: 109.1%;
+      --theme-line-height-xs: 100%;
+      --theme-line-height-sm: 120%;
+      --theme-line-height-md: 143%;
+      --theme-line-height-lg: 150%;
   }
 }

package/scss/theme/legacy-classic-light/_sizing.scss CHANGED Viewed

@@ -11,6 +11,18 @@
       --theme-small-icon-size: 1rem;
       --theme-focus--border-thickness: 0.0625rem;
       --theme-input-min-width: 2rem;
+      --theme-size--3: 0.375rem;
+      --theme-size--2: 0.5rem;
+      --theme-size--1: 0.75rem;
+      --theme-size-0: 1rem;
+      --theme-size-1: 1.5rem;
+      --theme-size-2: 2rem;
+      --theme-size-3: 3rem;
+      --theme-size-4: 4rem;
+      --theme-size-5: 6rem;
+      --theme-size-6: 8rem;
+      --theme-size-7: 12rem;
+      --theme-size-8: 16rem;
       --theme-tab-indicator--height: 0.25rem;
   }
 }