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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siemens/element-theme",
-  "version": "48.0.0-next.4",
+  "version": "48.0.0-next.6",
   "description": "Element CSS theme.",
   "license": "MIT",
   "repository": {

package/src/styles/_themes.scss

@@ -28,7 +28,7 @@ $_themes: () !default;
 
     :root#{$theme-name}#{$mode} {
       @each $token, $val in $vars {
-        --element-#{$token}: #{$val};
+        --#{$token}: #{$val};
       }
     }
   }

package/src/styles/bootstrap/_alert.scss

@@ -22,12 +22,12 @@
 
 .alert,
 .alert-link {
-  font-size: typography.$si-font-size-title-1;
-  line-height: typography.$si-line-height-title-1;
+  font-size: typography.$si-font-size-h4;
+  line-height: typography.$si-line-height-h4;
 }
 
 .alert-link {
-  font-weight: typography.$si-font-weight-title-1;
+  font-weight: typography.$si-font-weight-h4;
   color: inherit;
 
   &:hover {

package/src/styles/bootstrap/_badges.scss

@@ -8,8 +8,8 @@
 // stylelint-disable declaration-no-important
 
 %badge-text-emphasis {
-  font-size: typography.$si-font-size-title-2;
-  font-weight: typography.$si-font-weight-title-2;
+  font-size: typography.$si-font-size-h5;
+  font-weight: typography.$si-font-weight-h5;
 }
 
 .badge {
@@ -22,8 +22,8 @@
   block-size: map.get(spacers.$spacers, 8);
   line-height: map.get(spacers.$spacers, 8);
   flex-shrink: 0;
-  font-size: typography.$si-font-size-body-2;
-  font-weight: typography.$si-font-weight-body-2;
+  font-size: typography.$si-font-size-body;
+  font-weight: typography.$si-font-weight-body;
   max-inline-size: 196px;
   min-inline-size: map.get(spacers.$spacers, 8);
   text-overflow: ellipsis;
@@ -153,12 +153,12 @@
   position: relative;
   background-color: semantic-tokens.$element-action-danger;
   color: semantic-tokens.$element-action-danger-text;
-  font-size: typography.$si-font-size-caption-1;
+  font-size: typography.$si-font-size-caption;
   line-height: 13px;
   padding-block: 0;
   padding-inline: map.get(spacers.$spacers, 2);
   font-family: variables.$font-family-sans-serif;
-  font-weight: typography.$si-font-weight-bold;
+  font-weight: typography.$si-font-weight-semibold;
 }
 
 .icon + .badge-text {

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

@@ -63,8 +63,8 @@
 
     &.btn-sm {
       padding-block: map.get(spacers.$spacers, 4) - 1px;
-      font-size: typography.$si-font-size-body-2;
-      line-height: typography.$si-line-height-body-2;
+      font-size: typography.$si-font-size-body;
+      line-height: typography.$si-line-height-body;
     }
   }
 

package/src/styles/bootstrap/_buttons.scss

@@ -27,7 +27,7 @@ button {
 
 :is(.btn, .btn-close) {
   line-height: bootstrap-variables.$btn-line-height;
-  font-weight: typography.$si-font-weight-title-2;
+  font-weight: typography.$si-font-weight-h5;
   padding-block: calc(bootstrap-variables.$btn-padding-y - var(--btn-border-width, 0px));
   padding-inline: calc(bootstrap-variables.$btn-padding-x - var(--btn-border-width, 0px));
   font-size: bootstrap-variables.$btn-font-size;
@@ -133,7 +133,7 @@ button {
 .btn-link {
   --btn-color: #{bootstrap-variables.$btn-link-color};
   --btn-color-hover: #{bootstrap-variables.$btn-link-hover-color};
-  font-weight: typography.$si-font-weight-body-2;
+  font-weight: typography.$si-font-weight-body;
   justify-content: flex-start;
   text-decoration: bootstrap-variables.$link-decoration;
   padding: 0;
@@ -222,9 +222,9 @@ button {
   --btn-border-color-hover: #{semantic-tokens.$element-ui-1};
 
   @include typography.si-font(
-    typography.$si-font-size-body-2,
-    typography.$si-line-height-body-2,
-    typography.$si-font-weight-body-2
+    typography.$si-font-size-body,
+    typography.$si-line-height-body,
+    typography.$si-font-weight-body
   );
   padding-block: bootstrap-variables.$input-padding-y;
   padding-inline: 7px;

package/src/styles/bootstrap/_card.scss

@@ -77,8 +77,8 @@
 }
 
 .card-header {
-  font-size: typography.$si-font-size-title-2;
-  font-weight: typography.$si-font-weight-title-2;
+  font-size: typography.$si-font-size-h5;
+  font-weight: typography.$si-font-weight-h5;
   min-block-size: map.get(spacers.$spacers, 9) + map.get(spacers.$spacers, 4);
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -88,7 +88,7 @@
   margin-block-end: 0; // Removes the default margin-bottom of <hN>
   color: variables.$card-cap-color;
   background-color: variables.$card-cap-bg;
-  line-height: typography.$si-font-size-title-2;
+  line-height: typography.$si-font-size-h5;
 
   .icon {
     // The icon would be 8px too high without this.

package/src/styles/bootstrap/_dropdowns.scss

@@ -98,6 +98,7 @@
   background-color: transparent; // For `<button>`s
   border: 0; // For `<button>`s
   cursor: pointer;
+  border-radius: 0;
 
   .item-title {
     flex: 1;
@@ -157,8 +158,8 @@
   margin-block-end: 0; // for use with heading elements
   color: bootstrap-variables.$dropdown-header-color;
   white-space: nowrap; // as with > li > a
-  font-size: typography.$si-font-size-title-2;
-  font-weight: typography.$si-font-weight-title-2;
+  font-size: typography.$si-font-size-h5;
+  font-weight: typography.$si-font-weight-h5;
 }
 
 .dropdown-divider {

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

@@ -56,6 +56,7 @@
   text-decoration: none;
   background-color: variables.$list-group-bg;
   border: variables.$list-group-border-width solid variables.$list-group-border-color;
+  border-radius: 0;
   border-inline-width: 0;
   margin: 0;
 
@@ -108,7 +109,7 @@
 }
 
 .list-header {
-  font-size: typography.$si-font-size-caption-1;
+  font-size: typography.$si-font-size-caption;
   padding-block: variables.$list-group-item-padding-y;
   padding-inline: variables.$list-group-item-padding-x;
   color: variables.$headings-color;

package/src/styles/bootstrap/_modals.scss

@@ -96,8 +96,8 @@
 }
 
 .modal-title {
-  font-size: typography.$si-font-size-title-1;
-  font-weight: typography.$si-font-weight-title-1;
+  font-size: typography.$si-font-size-h4;
+  font-weight: typography.$si-font-weight-h4;
   line-height: variables.$modal-title-line-height;
   margin-block-end: 0;
 }

package/src/styles/bootstrap/_pagination.scss

@@ -25,8 +25,8 @@ $page-button-size: 24px;
   padding-inline: map.get(spacers.$spacers, 2);
   margin-inline: map.get(spacers.$spacers, 1);
   background: transparent;
-  font-size: typography.$si-font-size-title-2;
-  font-weight: typography.$si-font-weight-title-2;
+  font-size: typography.$si-font-size-h5;
+  font-weight: typography.$si-font-weight-h5;
   color: semantic-tokens.$element-text-primary;
   border: 0;
 

package/src/styles/bootstrap/_reboot.scss

@@ -196,7 +196,7 @@ blockquote {
 
 b,
 strong {
-  font-weight: variables.$font-weight-bolder;
+  font-weight: variables.$font-weight-semibold;
 }
 
 // Small

package/src/styles/bootstrap/_tables.scss

@@ -69,9 +69,9 @@
 
     th {
       vertical-align: baseline;
-      font-size: typography.$si-font-size-title-2;
-      font-weight: typography.$si-font-weight-title-2;
-      line-height: typography.$si-line-height-title-2;
+      font-size: typography.$si-font-size-h5;
+      font-weight: typography.$si-font-weight-h5;
+      line-height: typography.$si-line-height-h5;
     }
   }
 

package/src/styles/bootstrap/_type.scss

@@ -109,11 +109,13 @@ h1,
   );
 }
 
+.si-h1-bold,
+// @deprecated Will be removed in a future major version, use `.si-h1-bold` instead.
 .si-h1-black {
   @include typography.si-font(
-    typography.$si-font-size-h1-black,
-    typography.$si-line-height-h1-black,
-    typography.$si-font-weight-h1-black
+    typography.$si-font-size-h1-bold,
+    typography.$si-line-height-h1-bold,
+    typography.$si-font-weight-h1-bold
   );
 }
 
@@ -137,108 +139,121 @@ h3,
   );
 }
 
-h4,
-h5,
-h6,
-.h4,
-.h5,
-.h6 {
-  @include typography.si-font(
-    typography.$si-font-size-body-1,
-    typography.$si-line-height-body-1,
-    typography.$si-font-weight-body-1
-  );
-}
-
+.si-h4-bold,
+// @deprecated Will be removed in a future major version, use `.si-h4-bold` instead.
 .si-title-1-bold {
   @include typography.si-font(
-    typography.$si-font-size-title-1-bold,
-    typography.$si-line-height-title-1-bold,
-    typography.$si-font-weight-title-1-bold
+    typography.$si-font-size-h4-bold,
+    typography.$si-line-height-h4-bold,
+    typography.$si-font-weight-h4-bold
   );
 }
 
+h4,
+.h4,
+.si-h4,
+// @deprecated Will be removed in a future major version, use `.si-h4` instead.
 .si-title-1 {
   @include typography.si-font(
-    typography.$si-font-size-title-1,
-    typography.$si-line-height-title-1,
-    typography.$si-font-weight-title-1
+    typography.$si-font-size-h4,
+    typography.$si-line-height-h4,
+    typography.$si-font-weight-h4
   );
 }
 
-.si-body-1 {
+.si-h5-bold,
+// @deprecated Will be removed in a future major version, use `.si-h5-bold` instead.
+.si-title-2-bold {
   @include typography.si-font(
-    typography.$si-font-size-body-1,
-    typography.$si-line-height-body-1,
-    typography.$si-font-weight-body-1
+    typography.$si-font-size-h5-bold,
+    typography.$si-line-height-h5-bold,
+    typography.$si-font-weight-h5-bold
   );
 }
 
-.si-title-2-bold {
+h5,
+h6,
+.h5,
+.h6,
+.si-h5,
+// @deprecated Will be removed in a future major version, use `.si-h5` instead.
+.si-title-2 {
   @include typography.si-font(
-    typography.$si-font-size-title-2-bold,
-    typography.$si-line-height-title-2-bold,
-    typography.$si-font-weight-title-2-bold
+    typography.$si-font-size-h5,
+    typography.$si-line-height-h5,
+    typography.$si-font-weight-h5
   );
 }
 
-.si-title-2 {
+.si-body-lg,
+// @deprecated Will be removed in a future major version, use `.si-body-lg` instead.
+.si-body-1 {
   @include typography.si-font(
-    typography.$si-font-size-title-2,
-    typography.$si-line-height-title-2,
-    typography.$si-font-weight-title-2
+    typography.$si-font-size-body-lg,
+    typography.$si-line-height-body-lg,
+    typography.$si-font-weight-body-lg
   );
 }
 
+.si-body,
+// @deprecated Will be removed in a future major version, use `.si-body` instead.
 .si-body-2 {
   @include typography.si-font(
-    typography.$si-font-size-body-2,
-    typography.$si-line-height-body-2,
-    typography.$si-font-weight-body-2
+    typography.$si-font-size-body,
+    typography.$si-line-height-body,
+    typography.$si-font-weight-body
   );
 }
 
 .si-caption {
   @include typography.si-font(
-    typography.$si-font-size-caption-1,
-    typography.$si-line-height-caption-1,
-    typography.$si-font-weight-caption-1
+    typography.$si-font-size-caption,
+    typography.$si-line-height-caption,
+    typography.$si-font-weight-caption
   );
 }
 
+.si-display-xl,
 .display-1,
+// @deprecated Will be removed in a future major version, use `.si-display-xl` instead.
 .si-display-1 {
   @include typography.si-font(
-    typography.$si-font-size-display-1,
-    typography.$si-line-height-display-1,
-    typography.$si-font-weight-display-1
+    typography.$si-font-size-display-xl,
+    typography.$si-line-height-display-xl,
+    typography.$si-font-weight-display-xl
   );
 }
 
+.si-display-lg,
 .display-2,
+// @deprecated Will be removed in a future major version, use `.si-display-lg` instead.
 .si-display-2 {
   @include typography.si-font(
-    typography.$si-font-size-display-2,
-    typography.$si-line-height-display-2,
-    typography.$si-font-weight-display-2
+    typography.$si-font-size-display-lg,
+    typography.$si-line-height-display-lg,
+    typography.$si-font-weight-display-lg
   );
 }
 
+.si-display-bold,
 .display-3,
+// @deprecated Will be removed in a future major version, use `.si-display-bold` instead.
 .si-display-3 {
   @include typography.si-font(
-    typography.$si-font-size-display-3,
-    typography.$si-line-height-display-3,
-    typography.$si-font-weight-display-3
+    typography.$si-font-size-display-bold,
+    typography.$si-line-height-display-bold,
+    typography.$si-font-weight-display-bold
   );
 }
 
+.si-display,
 .display-4,
+// @deprecated Will be removed in a future major version, use `.si-display` instead.
 .si-display-4 {
   @include typography.si-font(
-    typography.$si-font-size-display-4,
-    typography.$si-line-height-display-4,
-    typography.$si-font-weight-display-4
+    typography.$si-font-size-display,
+    typography.$si-line-height-display,
+    typography.$si-font-weight-display
   );
 }
 

package/src/styles/bootstrap/_variables.scss

@@ -163,19 +163,21 @@ $font-family-code: $font-family-monospace !default;
 // $font-size-root effects the value of `rem`, which is used for as well font sizes, paddings and margins
 // $font-size-base effects the font size of the body text
 $font-size-root: null !default;
-$font-size-base: typography.$si-font-size-body-2 !default;
-$font-size-lg: typography.$si-font-size-body-1 !default;
-$font-size-sm: typography.$si-font-size-caption-1 !default;
+$font-size-base: typography.$si-font-size-body !default;
+$font-size-lg: typography.$si-font-size-body-lg !default;
+$font-size-sm: typography.$si-font-size-caption !default;
 
 $font-weight-lighter: typography.$si-font-weight-lighter;
 $font-weight-light: typography.$si-font-weight-light;
 $font-weight-normal: typography.$si-font-weight-normal;
+$font-weight-medium: typography.$si-font-weight-medium;
+$font-weight-semibold: typography.$si-font-weight-semibold;
 $font-weight-bold: typography.$si-font-weight-bold;
 $font-weight-bolder: typography.$si-font-weight-bolder;
 
 $font-weight-base: $font-weight-normal !default;
 
-$line-height-base: typography.$si-line-height-body-2 !default;
+$line-height-base: typography.$si-line-height-body !default;
 $line-height-sm: 1.25 !default;
 $line-height-lg: 2 !default;
 
@@ -198,14 +200,14 @@ $font-sizes: (
 $headings-margin-bottom: spacers.$spacer * 0.5 !default;
 $headings-font-family: null !default;
 $headings-font-style: null !default;
-$headings-font-weight: typography.$si-font-weight-bold !default;
+$headings-font-weight: typography.$si-font-weight-semibold !default;
 $headings-line-height: 1.2 !default;
 $headings-color: semantic-tokens.$element-text-primary !default;
 
-$lead-font-size: typography.$si-font-size-body-1 !default;
+$lead-font-size: typography.$si-font-size-body-lg !default;
 $lead-font-weight: typography.$si-font-weight-normal !default;
 
-$small-font-size: typography.$si-font-size-caption-1 !default;
+$small-font-size: typography.$si-font-size-caption !default;
 
 $sub-sup-font-size: 0.75em !default;
 
@@ -214,7 +216,7 @@ $initialism-font-size: $small-font-size !default;
 $text-muted: semantic-tokens.$element-text-disabled !default;
 
 $blockquote-margin-y: spacers.$spacer !default;
-$blockquote-font-size: typography.$si-font-size-body-1 !default;
+$blockquote-font-size: typography.$si-font-size-body-lg !default;
 $blockquote-footer-color: semantic-tokens.$element-text-secondary !default;
 $blockquote-footer-font-size: $small-font-size !default;
 
@@ -287,7 +289,7 @@ $table-variants: (
 $btn-padding-y: map.get(spacers.$spacers, 4);
 $btn-padding-x: map.get(spacers.$spacers, 6);
 $btn-font-size: $font-size-base;
-$btn-line-height: typography.$si-line-height-title-2 !default;
+$btn-line-height: typography.$si-line-height-h5 !default;
 $btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping
 
 $btn-font-size-sm: $font-size-sm;
@@ -318,7 +320,7 @@ $form-text-font-weight: null !default;
 $form-text-color: semantic-tokens.$element-text-secondary !default;
 
 $form-label-margin-bottom: 4px !default;
-$form-label-font-size: typography.$si-font-size-body-2 !default;
+$form-label-font-size: typography.$si-font-size-body !default;
 $form-label-font-style: null !default;
 $form-label-font-weight: null !default;
 $form-label-color: semantic-tokens.$element-text-secondary !default;
@@ -416,8 +418,8 @@ $form-validation-states: (
 
 $nav-link-padding-y: 10px;
 $nav-link-padding-x: map.get(spacers.$spacers, 8);
-$nav-link-font-size: typography.$si-font-size-title-1;
-$nav-link-font-weight: typography.$si-font-weight-title-1;
+$nav-link-font-size: typography.$si-font-size-h4;
+$nav-link-font-weight: typography.$si-font-weight-h4;
 $nav-link-color: semantic-tokens.$element-text-secondary !default;
 $nav-link-hover-color: $link-hover-color !default;
 $nav-link-transition: ();
@@ -513,8 +515,8 @@ $popover-arrow-color: $popover-bg !default;
 $popover-arrow-outer-color: $popover-border-color !default;
 
 // Badges
-$badge-font-size: typography.$si-font-size-body-2;
-$badge-font-weight: typography.$si-font-weight-body-2;
+$badge-font-size: typography.$si-font-size-body;
+$badge-font-weight: typography.$si-font-weight-body;
 $badge-color: semantic-tokens.$element-text-inverse !default;
 $badge-padding-y: 0;
 $badge-padding-x: map.get(spacers.$spacers, 4);
@@ -531,7 +533,7 @@ $modal-footer-margin-between: map.get(spacers.$spacers, 6);
 $modal-dialog-margin: map.get(spacers.$spacers, 4);
 $modal-dialog-margin-y-sm-up: map.get(spacers.$spacers, 9);
 
-$modal-title-line-height: typography.$si-line-height-title-1 !default;
+$modal-title-line-height: typography.$si-line-height-h4 !default;
 
 $modal-content-color: null !default;
 $modal-content-bg: semantic-tokens.$element-base-1 !default;

package/src/styles/bootstrap/forms/_form-control.scss

@@ -87,7 +87,7 @@
 
 .form-control:not(textarea):not(select[multiple]) {
   // force height to fix line-height issue in firefox
-  block-size: calc(#{typography.$si-line-height-body-2}em + #{2 * map.get(spacers.$spacers, 4)});
+  block-size: calc(#{typography.$si-line-height-body}em + #{2 * map.get(spacers.$spacers, 4)});
 }
 
 .addon-second-icon {

package/src/styles/bootstrap/forms/_form-label.scss

@@ -13,8 +13,7 @@
 
 .form-label {
   display: inline-block;
-  line-height: 0.875rem;
-  padding-block: map.get(spacers.$spacers, 3) map.get(spacers.$spacers, 2);
+  padding-block: map.get(spacers.$spacers, 2);
 
   .text-end & {
     padding-inline-end: variables.$input-padding-x;
@@ -25,8 +24,11 @@
   padding-block: map.get(spacers.$spacers, 4) - 1px 0;
 }
 
-.required:is(.form-label, .col-form-label, .form-check-label)::after {
-  content: '*';
+:is(.form-label, .col-form-label, .form-check-label) {
+  &.required::after,
+  .required::after {
+    content: '*';
+  }
 }
 
 .form-text {

package/src/styles/bootstrap/forms/_validation.scss

@@ -28,7 +28,7 @@
   font-size: variables.$form-feedback-font-size;
   display: none;
   inline-size: 100%;
-  line-height: typography.$si-line-height-caption-1;
+  line-height: typography.$si-line-height-caption;
   margin-block: map.get(spacers.$spacers, 1);
   margin-inline: map.get(spacers.$spacers, 1);
 }

package/src/styles/components/_application-header.scss

@@ -76,9 +76,11 @@
 }
 
 .application-name {
-  font-size: typography.$si-font-size-body-1;
-  font-weight: typography.$si-font-weight-body-1;
+  font-size: typography.$si-font-size-body-lg;
+  font-weight: typography.$si-font-weight-body-lg;
   padding: map.get(spacers.$spacers, 5);
+  margin: 0;
+  line-height: normal;
   white-space: nowrap;
 }
 
@@ -133,10 +135,10 @@
   position: relative;
   color: semantic-tokens.$element-text-primary;
   inline-size: 100%;
-  font-size: typography.$si-font-size-title-1;
-  line-height: typography.$si-line-height-title-1;
-  font-weight: typography.$si-font-weight-title-1;
-  padding-block: 15px;
+  font-size: typography.$si-font-size-h4;
+  line-height: typography.$si-line-height-h4;
+  font-weight: typography.$si-font-weight-h4;
+  padding-block: 13px;
   padding-inline: map.get(spacers.$spacers, 5);
   background: none;
   box-shadow: none;
@@ -176,9 +178,9 @@
 
   &.header-selection-item {
     color: semantic-tokens.$element-action-secondary-text;
-    font-size: typography.$si-font-size-title-2;
-    font-weight: typography.$si-font-weight-title-2;
-    line-height: typography.$si-line-height-title-2;
+    font-size: typography.$si-font-size-h5;
+    font-weight: typography.$si-font-weight-h5;
+    line-height: typography.$si-line-height-h5;
 
     &:hover {
       color: semantic-tokens.$element-action-secondary-text-hover;

package/src/styles/components/_datatable.scss

@@ -151,7 +151,7 @@ $datatable-ghost-cell-strip-radius: 0 !default;
       padding-block: 0;
       padding-inline: 4px;
       min-inline-size: $datatable-cell-min-width;
-      line-height: typography.$si-line-height-body-2;
+      line-height: typography.$si-line-height-body;
 
       > div {
         padding: 4px;
@@ -189,9 +189,9 @@ $datatable-ghost-cell-strip-radius: 0 !default;
     color: $datatable-header-color;
     block-size: $datatable-header-height;
     vertical-align: baseline;
-    font-size: typography.$si-font-size-title-2;
-    font-weight: typography.$si-font-weight-title-2;
-    line-height: typography.$si-line-height-title-2;
+    font-size: typography.$si-font-size-h5;
+    font-weight: typography.$si-font-weight-h5;
+    line-height: typography.$si-line-height-h5;
     user-select: none;
 
     .sort-btn {
@@ -290,7 +290,7 @@ $datatable-ghost-cell-strip-radius: 0 !default;
     align-content: flex-end;
     background-color: $datatable-footer-background-color;
     color: semantic-tokens.$element-text-secondary;
-    font-size: typography.$si-font-size-caption-1;
+    font-size: typography.$si-font-size-caption;
     margin-block-start: -1px;
     position: relative;
     z-index: 11;

package/src/styles/components/_layout.scss

@@ -64,9 +64,9 @@
   margin-block-end: 0;
   color: variables.$element-text-secondary;
   @include variables.si-font(
-    variables.$si-font-size-body-2,
-    variables.$si-line-height-body-2,
-    variables.$si-font-weight-body-2
+    variables.$si-font-size-body,
+    variables.$si-line-height-body,
+    variables.$si-font-weight-body
   );
 }