@siemens/element-theme 49.2.0 → 49.4.0

package/package.json

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

package/src/styles/bootstrap/_buttons.scss

@@ -11,9 +11,9 @@
 $btn-icon-font-size-default: variables.$si-icon-font-size !default;
 $btn-icon-font-size-lg: variables.$si-icon-font-size-lg !default;
 $btn-icon-font-size-sm: variables.$si-icon-font-size !default;
-$btn-icon-size-default: 32px !default;
-$btn-icon-size-lg: 40px !default;
-$btn-icon-size-sm: 24px !default;
+$btn-icon-size-default: 2rem !default;
+$btn-icon-size-lg: 2.5rem !default;
+$btn-icon-size-sm: 1.5rem !default;
 
 // there are some non .btn buttons used in element
 button {

package/src/styles/bootstrap/_card.scss

@@ -78,7 +78,6 @@
   &.action-card:not(:disabled) {
     &:hover {
       &,
-      .card-header,
       .card-footer {
         background-color: semantic-tokens.$element-base-1-hover;
       }
@@ -86,7 +85,6 @@
 
     &:active {
       &,
-      .card-header,
       .card-footer {
         background-color: semantic-tokens.$element-base-1-selected;
       }
@@ -100,6 +98,11 @@
   &:focus-visible {
     outline-offset: 2px;
   }
+
+  &.card-outline {
+    background-color: transparent;
+    box-shadow: inset 0 0 0 1px semantic-tokens.$element-ui-4;
+  }
 }
 
 button.card {
@@ -124,7 +127,6 @@ button.card {
   padding-inline: variables.$card-cap-padding-x;
   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-h5;
 
   + * .card-body, // for action cards, where we wrap the content
@@ -174,7 +176,6 @@ button.card {
   padding-inline: variables.$card-cap-padding-x;
   padding-block-start: variables.$card-cap-padding-y;
   padding-block-end: variables.$card-cap-padding-x;
-  background-color: variables.$card-cap-bg;
 }
 
 :is(.card-header, .card-body):first-child {

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

@@ -52,7 +52,7 @@
 
   &:is(.readonly, [readonly]) {
     &,
-    :is(:hover, :focus) {
+    &:is(:hover, :focus) {
       --border-color: #{semantic-tokens.$element-ui-4};
       background-color: variables.$input-bg;
     }

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

@@ -1,4 +1,5 @@
 @use '../../variables/spacers';
+@use '../../bootstrap/functions';
 @use '../variables';
 
 @use 'sass:map';
@@ -21,7 +22,7 @@
 }
 
 .col-form-label {
-  padding-block: map.get(spacers.$spacers, 4) - 1px 0;
+  padding-block: functions.add(variables.$input-padding-y, variables.$input-border-width);
 }
 
 :is(.form-label, .col-form-label, .form-check-label) {

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

@@ -103,6 +103,18 @@
   .application-header.show-navigation & {
     @extend %collapsible-expanded;
   }
+
+  .header-item {
+    &.active {
+      --si-header-item-border: #{semantic-tokens.$element-action-primary};
+      color: semantic-tokens.$element-action-primary;
+    }
+
+    &:hover {
+      --si-header-item-border: #{semantic-tokens.$element-action-primary-hover};
+      color: semantic-tokens.$element-action-primary-hover;
+    }
+  }
 }
 
 .header-collapsible-actions {
@@ -174,8 +186,10 @@
     position: absolute;
     inset-block-end: 0;
     inset-inline: 0;
-    block-size: map.get(spacers.$spacers, 2);
     background: var(--si-header-item-border);
+
+    block-size: 100%;
+    inline-size: map.get(spacers.$spacers, 2);
   }
 
   &.header-selection-item {
@@ -208,18 +222,6 @@
         display: flex;
         flex: 1 1 33.333%;
         justify-content: center;
-
-        .header-item {
-          &.active {
-            color: semantic-tokens.$element-action-primary;
-            --si-header-item-border: #{semantic-tokens.$element-action-primary};
-          }
-
-          &:hover {
-            color: semantic-tokens.$element-action-primary-hover;
-            --si-header-item-border: #{semantic-tokens.$element-action-primary-hover};
-          }
-        }
       }
 
       .header-actions {
@@ -243,6 +245,11 @@
       .header-item {
         inline-size: auto;
         flex-basis: auto;
+
+        &::after {
+          inline-size: 100%;
+          block-size: map.get(spacers.$spacers, 2);
+        }
       }
     }
   }