@siemens/element-theme 49.0.0-rc.4 → 49.1.0

package/package.json

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

package/src/styles/bootstrap/_card.scss

@@ -127,6 +127,7 @@ button.card {
   background-color: variables.$card-cap-bg;
   line-height: typography.$si-font-size-h5;
 
+  + * .card-body, // for action cards, where we wrap the content
   + .card-body {
     margin-block-start: map.get(spacers.$spacers, 2) * -1;
     padding-block-start: map.get(spacers.$spacers, 2);

package/src/styles/bootstrap/_functions.scss

@@ -105,11 +105,11 @@ $escaped-characters: (
     @return $value1 + $value2;
   }
 
-  @return if(
-    $return-calc == true,
-    calc(#{$value1} + #{$value2}),
-    $value1 + string.unquote(' + ') + $value2
-  );
+  @if $return-calc {
+    @return calc(#{$value1} + #{$value2});
+  } @else {
+    @return $value1 + string.unquote(' + ') + $value2;
+  }
 }
 
 @function subtract($value1, $value2, $return-calc: true) {
@@ -138,15 +138,18 @@ $escaped-characters: (
     $value2: string.unquote('(') + $value2 + string.unquote(')');
   }
 
-  @return if(
-    $return-calc == true,
-    calc(#{$value1} - #{$value2}),
-    $value1 + string.unquote(' - ') + $value2
-  );
+  @if $return-calc {
+    @return calc(#{$value1} - #{$value2});
+  } @else {
+    @return $value1 + string.unquote(' - ') + $value2;
+  }
 }
 
 @function divide($dividend, $divisor, $precision: 10) {
-  $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
+  $sign: -1;
+  @if ($dividend > 0 and $divisor > 0) or ($dividend < 0 and $divisor < 0) {
+    $sign: 1;
+  }
   $dividend: math.abs($dividend);
   $divisor: math.abs($divisor);
   @if $dividend == 0 {

package/src/styles/bootstrap/_type.scss

@@ -33,8 +33,11 @@
 }
 
 .lead {
-  font-size: variables.$lead-font-size;
-  font-weight: variables.$lead-font-weight;
+  @include typography.si-font(
+    variables.$lead-font-size,
+    variables.$lead-line-height,
+    variables.$lead-font-weight
+  );
 }
 
 //

package/src/styles/bootstrap/_variables.scss

@@ -205,7 +205,8 @@ $headings-line-height: 1.2 !default;
 $headings-color: semantic-tokens.$element-text-primary !default;
 
 $lead-font-size: typography.$si-font-size-body-lg !default;
-$lead-font-weight: typography.$si-font-weight-normal !default;
+$lead-line-height: typography.$si-line-height-body-lg !default;
+$lead-font-weight: typography.$si-font-weight-body-lg !default;
 
 $small-font-size: typography.$si-font-size-caption !default;
 

package/src/styles/components/_datatable.scss

@@ -14,6 +14,8 @@ $datatable-header-background-color: transparent !default;
 $datatable-header-color: semantic-tokens.$element-text-primary !default;
 $datatable-footer-background-color: transparent !default;
 
+$datatable-summary-background-color: semantic-tokens.$element-base-4 !default;
+
 $datatable-header-height: 40px !default;
 $datatable-cell-min-width: 40px !default;
 $datatable-body-row-min-height: 48px !default;
@@ -246,6 +248,12 @@ $datatable-ghost-cell-strip-radius: 0 !default;
     }
   }
 
+  // Summary Styles
+  .datatable-summary-row .datatable-body-row {
+    background-color: $datatable-summary-background-color;
+    font-weight: typography.$si-font-weight-title-2;
+  }
+
   // Body Styles
   .datatable-body {
     .datatable-row-wrapper {