@siemens/element-theme 48.0.0-next.5 → 48.0.0-next.6

package/src/styles/components/_widgets.scss

@@ -7,9 +7,9 @@
 @use './skeleton';
 
 .si-value-widget-value {
-  @extend .si-display-3;
+  @extend .si-display-bold;
   display: inline-block;
-  min-block-size: variables.$si-font-size-display-3 * variables.$si-line-height-display-3;
+  min-block-size: variables.$si-font-size-display-bold * variables.$si-line-height-display-bold;
 }
 
 /**
@@ -17,16 +17,16 @@
 * the line height.
 */
 .si-value-widget-value-skeleton {
-  @extend .si-display-3;
+  @extend .si-display-bold;
   @extend .si-skeleton;
   display: inline-block;
-  block-size: variables.$si-font-size-display-3;
+  block-size: variables.$si-font-size-display-bold;
   vertical-align: middle;
   inline-size: 100%;
 }
 
 .si-value-widget-unit {
-  @extend .si-body-1;
+  @extend .si-body-lg;
   display: inline-block;
   margin-inline-start: map.get(variables.$spacers, 2);
 }
@@ -47,7 +47,7 @@
 
 .si-link-widget-skeleton {
   @extend .si-skeleton;
-  block-size: calc(variables.$si-font-size-body-2 * variables.$si-line-height-body-2);
+  block-size: calc(variables.$si-font-size-body * variables.$si-line-height-body);
   inline-size: 100%;
 }
 

package/src/styles/variables/_typography.scss

@@ -1,74 +1,147 @@
+@use 'sass:math';
+
 @mixin si-font($font-size, $line-height, $font-weight) {
   font-size: $font-size;
   font-weight: $font-weight;
   line-height: $line-height;
 }
 
-$si-font-family: 'Siemens Sans', sans-serif;
+@function px-to-rem($value) {
+  @return math.div($value, 16px) * 1rem;
+}
+
+@function px-to-ratio($base, $value) {
+  $ratio: math.div($value, $base * 16px);
+  @return math.div($ratio, $ratio * 0 + 1);
+}
+
+$si-font-family: 'SiemensSans Pro', sans-serif;
 
 $si-font-weight-lighter: lighter !default;
 $si-font-weight-light: 300 !default;
-$si-font-weight-normal: normal !default;
-$si-font-weight-bold: bold !default;
+$si-font-weight-normal: 400 !default;
+$si-font-weight-medium: 500 !default;
+$si-font-weight-semibold: 600 !default;
+$si-font-weight-bold: 700 !default;
 $si-font-weight-bolder: bolder !default;
 $si-font-weight-black: 900 !default;
 
-$si-font-size-h1: 1.85rem;
-$si-line-height-h1: 1.067;
-$si-font-weight-h1: $si-font-weight-normal;
-
-$si-font-size-h1-black: $si-font-size-h1;
-$si-line-height-h1-black: $si-line-height-h1;
-$si-font-weight-h1-black: $si-font-weight-black;
-
-$si-font-size-h2: 1.25rem;
-$si-line-height-h2: 1.2;
-$si-font-weight-h2: $si-font-weight-normal;
-
-$si-font-size-h3: 1.125rem;
-$si-line-height-h3: 1.111;
-$si-font-weight-h3: $si-font-weight-bold;
-
-$si-font-size-title-1-bold: 1rem;
-$si-line-height-title-1-bold: 1.125;
-$si-font-weight-title-1-bold: $si-font-weight-black;
+$si-font-size-h1-bold: px-to-rem(30px);
+$si-line-height-h1-bold: px-to-ratio($si-font-size-h1-bold, 36px);
+$si-font-weight-h1-bold: $si-font-weight-bold;
 
-$si-font-size-title-1: 1rem;
-$si-line-height-title-1: 1.125;
-$si-font-weight-title-1: $si-font-weight-bold;
-
-$si-font-size-body-1: 1rem;
-$si-line-height-body-1: 1.125;
-$si-font-weight-body-1: $si-font-weight-normal;
-
-$si-font-size-title-2-bold: 0.875rem;
-$si-line-height-title-2-bold: 1.143;
-$si-font-weight-title-2-bold: $si-font-weight-black;
-
-$si-font-size-title-2: 0.875rem;
-$si-line-height-title-2: 1.143;
-$si-font-weight-title-2: $si-font-weight-bold;
-
-$si-font-size-body-2: 0.875rem;
-$si-line-height-body-2: 1.143;
-$si-font-weight-body-2: $si-font-weight-normal;
-
-$si-font-size-caption-1: 0.75rem;
-$si-line-height-caption-1: 1.333;
-$si-font-weight-caption-1: $si-font-weight-normal;
-
-$si-font-size-display-1: 3.5rem;
-$si-line-height-display-1: 4.5rem;
-$si-font-weight-display-1: $si-font-weight-normal;
-
-$si-font-size-display-2: 3rem;
-$si-line-height-display-2: 4rem;
-$si-font-weight-display-2: $si-font-weight-normal;
-
-$si-font-size-display-3: 2.5rem;
-$si-line-height-display-3: 1.3;
-$si-font-weight-display-3: $si-font-weight-black;
+$si-font-size-h1: px-to-rem(30px);
+$si-line-height-h1: px-to-ratio($si-font-size-h1, 36px);
+$si-font-weight-h1: $si-font-weight-normal;
 
-$si-font-size-display-4: 2.5rem;
-$si-line-height-display-4: 1.3;
-$si-font-weight-display-4: $si-font-weight-normal;
+$si-font-size-h2: px-to-rem(20px);
+$si-line-height-h2: px-to-ratio($si-font-size-h2, 24px);
+$si-font-weight-h2: $si-font-weight-semibold;
+
+$si-font-size-h3: px-to-rem(18px);
+$si-line-height-h3: px-to-ratio($si-font-size-h3, 24px);
+$si-font-weight-h3: $si-font-weight-semibold;
+
+$si-font-size-h4: px-to-rem(16px);
+$si-line-height-h4: px-to-ratio($si-font-size-h4, 20px);
+$si-font-weight-h4: $si-font-weight-semibold;
+
+$si-font-size-h4-bold: px-to-rem(16px);
+$si-line-height-h4-bold: px-to-ratio($si-font-size-h4-bold, 20px);
+$si-font-weight-h4-bold: $si-font-weight-bold;
+
+$si-font-size-h5: px-to-rem(14px);
+$si-line-height-h5: px-to-ratio($si-font-size-h5, 16px);
+$si-font-weight-h5: $si-font-weight-semibold;
+
+$si-font-size-h5-bold: px-to-rem(14px);
+$si-line-height-h5-bold: px-to-ratio($si-font-size-h5-bold, 16px);
+$si-font-weight-h5-bold: $si-font-weight-bold;
+
+$si-font-size-body-lg: px-to-rem(16px);
+$si-line-height-body-lg: px-to-ratio($si-font-size-body-lg, 20px);
+$si-font-weight-body-lg: $si-font-weight-normal;
+
+$si-font-size-body: px-to-rem(14px);
+$si-line-height-body: px-to-ratio($si-font-size-body, 16px);
+$si-font-weight-body: $si-font-weight-normal;
+
+$si-font-size-caption: px-to-rem(12px);
+$si-line-height-caption: px-to-ratio($si-font-size-caption, 16px);
+$si-font-weight-caption: $si-font-weight-normal;
+
+$si-font-size-display-xl: px-to-rem(56px);
+$si-line-height-display-xl: px-to-ratio($si-font-size-display-xl, 72px);
+$si-font-weight-display-xl: $si-font-weight-normal;
+
+$si-font-size-display-lg: px-to-rem(48px);
+$si-line-height-display-lg: px-to-ratio($si-font-size-display-lg, 64px);
+$si-font-weight-display-lg: $si-font-weight-normal;
+
+$si-font-size-display-bold: px-to-rem(40px);
+$si-line-height-display-bold: px-to-ratio($si-font-size-display-bold, 52px);
+$si-font-weight-display-bold: $si-font-weight-bold;
+
+$si-font-size-display: px-to-rem(40px);
+$si-line-height-display: px-to-ratio($si-font-size-display, 52px);
+$si-font-weight-display: $si-font-weight-normal;
+
+// @deprecated Will be removed in a future major version, use `$si-*-h1-bold` instead.
+$si-font-size-h1-black: $si-font-size-h1-bold;
+$si-line-height-h1-black: $si-line-height-h1-bold;
+$si-font-weight-h1-black: $si-font-weight-h1-bold;
+
+// @deprecated Will be removed in a future major version, use `$si-*-h4-bold` instead.
+$si-font-size-title-1-bold: $si-font-size-h4-bold;
+$si-line-height-title-1-bold: $si-line-height-h4-bold;
+$si-font-weight-title-1-bold: $si-font-weight-h4-bold;
+
+// @deprecated Will be removed in a future major version, use `$si-*-h4` instead.
+$si-font-size-title-1: $si-font-size-h4;
+$si-line-height-title-1: $si-line-height-h4;
+$si-font-weight-title-1: $si-font-weight-h4;
+
+// @deprecated Will be removed in a future major version, use `$si-*-h5-bold` instead.
+$si-font-size-title-2-bold: $si-font-size-h5-bold;
+$si-line-height-title-2-bold: $si-line-height-h5-bold;
+$si-font-weight-title-2-bold: $si-font-weight-h5-bold;
+
+// @deprecated Will be removed in a future major version, use `$si-*-h5` instead.
+$si-font-size-title-2: $si-font-size-h5;
+$si-line-height-title-2: $si-line-height-h5;
+$si-font-weight-title-2: $si-font-weight-h5;
+
+// @deprecated Will be removed in a future major version, use `$si-*-body-lg` instead.
+$si-font-size-body-1: $si-font-size-body-lg;
+$si-line-height-body-1: $si-line-height-body-lg;
+$si-font-weight-body-1: $si-font-weight-body-lg;
+
+// @deprecated Will be removed in a future major version, use `$si-*-body` instead.
+$si-font-size-body-2: $si-font-size-body;
+$si-line-height-body-2: $si-line-height-body;
+$si-font-weight-body-2: $si-font-weight-body;
+
+// @deprecated Will be removed in a future major version, use `$si-*-caption` instead.
+$si-font-size-caption-1: $si-font-size-caption;
+$si-line-height-caption-1: $si-line-height-caption;
+$si-font-weight-caption-1: $si-font-weight-caption;
+
+// @deprecated Will be removed in a future major version, use `$si-*-display-xl` instead.
+$si-font-size-display-1: $si-font-size-display-xl;
+$si-line-height-display-1: $si-line-height-display-xl;
+$si-font-weight-display-1: $si-font-weight-display-xl;
+
+// @deprecated Will be removed in a future major version, use `$si-*-display-lg` instead.
+$si-font-size-display-2: $si-font-size-display-lg;
+$si-line-height-display-2: $si-line-height-display-lg;
+$si-font-weight-display-2: $si-font-weight-display-lg;
+
+// @deprecated Will be removed in a future major version, use `$si-*-display-bold` instead.
+$si-font-size-display-3: $si-font-size-display-bold;
+$si-line-height-display-3: $si-line-height-display-bold;
+$si-font-weight-display-3: $si-font-weight-display-bold;
+
+// @deprecated Will be removed in a future major version, use `$si-*-display` instead.
+$si-font-size-display-4: $si-font-size-display;
+$si-line-height-display-4: $si-line-height-display;
+$si-font-weight-display-4: $si-font-weight-display;

package/src/styles/variables/_utilities.scss

@@ -476,9 +476,11 @@ $utilities: (
     property: font-weight,
     class: fw,
     values: (
-      light: variables.$font-weight-light,
       lighter: variables.$font-weight-lighter,
+      light: variables.$font-weight-light,
       normal: variables.$font-weight-normal,
+      medium: variables.$font-weight-medium,
+      semibold: variables.$font-weight-semibold,
       bold: variables.$font-weight-bold,
       bolder: variables.$font-weight-bolder
     )