@siemens/element-theme 49.4.0 → 49.5.0

package/package.json

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

package/src/styles/bootstrap/_badges.scss

@@ -19,18 +19,20 @@
   padding-inline: variables.$badge-padding-x;
   margin-block: 0;
   margin-inline: map.get(spacers.$spacers, 4);
-  block-size: map.get(spacers.$spacers, 8);
-  line-height: map.get(spacers.$spacers, 8);
+  line-height: 1.25rem;
   flex-shrink: 0;
   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);
+  max-inline-size: 24.5ch;
+  // Make min-inline-size equal the badge height to create a circular badge when there's only one character.
+  min-inline-size: calc(1.25rem + 2 * #{variables.$badge-padding-y}); // 1.75rem = same as height
   text-overflow: ellipsis;
   overflow: hidden;
   text-align: center;
   white-space: nowrap;
-  vertical-align: baseline;
+  // Use middle instead of baseline to produce consistent line-box heights
+  // across inline-block (text-only) and inline-flex (icon) badge variants.
+  vertical-align: middle;
   border-radius: variables.$badge-border-radius;
 
   &:empty {
@@ -124,11 +126,11 @@
     @extend %badge-text-emphasis;
   }
 
-  .icon {
-    padding-block: map.get(spacers.$spacers, 1);
-    margin-inline-start: -4px;
-    margin-inline-end: map.get(spacers.$spacers, 1);
-    vertical-align: bottom;
+  &:has(> .icon) {
+    display: inline-flex;
+    align-items: center;
+    gap: map.get(spacers.$spacers, 1);
+    padding-inline: map.get(spacers.$spacers, 2) variables.$badge-padding-x;
   }
 }
 

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

@@ -126,20 +126,23 @@ $btn-size-sm: 24px !default;
         margin-inline: 0;
       }
     }
-
-    &:hover {
-      color: semantic-tokens.$element-ui-0-hover;
-    }
   }
 
-  .btn-check:checked + .btn,
-  label.btn:has(.btn-check:checked) {
-    background: semantic-tokens.$element-action-secondary-active;
-    border-color: semantic-tokens.$element-action-secondary-border-hover;
+  .btn-check + .btn:hover,
+  label:has(.btn-check:not(:checked)):hover > * {
     color: semantic-tokens.$element-ui-0-hover;
-    z-index: 2;
+  }
+
+  .btn-check:checked {
+    + .btn {
+      background: semantic-tokens.$element-action-secondary-active;
+      border-color: semantic-tokens.$element-action-secondary-border-hover;
+      color: semantic-tokens.$element-ui-0-hover;
+      z-index: 2;
+    }
 
-    &:hover {
+    + .btn:hover,
+    &:hover + .btn {
       color: semantic-tokens.$element-text-primary;
     }
   }

package/src/styles/bootstrap/_buttons.scss

@@ -69,7 +69,7 @@ button {
 
   .icon {
     margin-block: -#{map.get(spacers.$spacers, 2)};
-    margin-inline: -#{map.get(spacers.$spacers, 2)} #{map.get(spacers.$spacers, 2)};
+    margin-inline-end: #{map.get(spacers.$spacers, 2)};
   }
 }
 
@@ -104,9 +104,23 @@ button {
   --btn-color-active: #{semantic-tokens.$element-action-warning-text};
 }
 
+// FIXME: Before the ghost variants were introduced, the .btn-ghost styling matched the tertiary styling.
+// To avoid a breaking change, the class .btn-primary-ghost has been added which deviates from the usual button naming convention.
+// With the next major release, the .btn-primary-ghost class should be removed so that the ghost buttons match the button naming convention
+// and schematics should update .btn-ghost to .btn-tertiary-ghost.
+.btn-primary-ghost {
+  --btn-bg: #{semantic-tokens.$element-base-1};
+  --btn-bg-hover: #{semantic-tokens.$element-base-1-hover};
+  --btn-bg-active: #{semantic-tokens.$element-base-1-selected};
+  --btn-color: #{semantic-tokens.$element-text-primary};
+  --btn-color-hover: #{semantic-tokens.$element-text-primary};
+  --btn-color-active: #{semantic-tokens.$element-text-primary};
+}
+
 .btn-secondary,
 .btn-secondary-warning,
-.btn-secondary-danger {
+.btn-secondary-danger,
+.btn-secondary-ghost {
   --btn-bg: #{semantic-tokens.$element-action-secondary};
   --btn-bg-hover: #{semantic-tokens.$element-action-secondary-hover};
   --btn-bg-active: #{semantic-tokens.$element-action-secondary-active};
@@ -121,7 +135,9 @@ button {
 
 .btn-tertiary,
 .btn-tertiary-warning,
-.btn-tertiary-danger {
+.btn-tertiary-danger,
+.btn-tertiary-ghost,
+.btn-ghost {
   --btn-bg: transparent;
   --btn-bg-hover: #{semantic-tokens.$element-action-secondary-hover};
   --btn-bg-active: #{semantic-tokens.$element-action-secondary-active};
@@ -154,6 +170,19 @@ button {
   --btn-border-color-active: #{semantic-tokens.$element-action-danger-active};
 }
 
+.btn-secondary-ghost,
+.btn-tertiary-ghost,
+.btn-ghost {
+  --btn-bg-hover: #{semantic-tokens.$element-base-1-hover};
+  --btn-bg-active: #{semantic-tokens.$element-base-1-selected};
+  --btn-color: #{semantic-tokens.$element-text-primary};
+  --btn-color-hover: #{semantic-tokens.$element-text-primary};
+  --btn-color-active: #{semantic-tokens.$element-text-primary};
+  --btn-border-color: #{semantic-tokens.$element-ui-3};
+  --btn-border-color-hover: transparent;
+  --btn-border-color-active: transparent;
+}
+
 .btn-link {
   --btn-color: #{bootstrap-variables.$btn-link-color};
   --btn-color-hover: #{bootstrap-variables.$btn-link-hover-color};
@@ -213,12 +242,10 @@ button {
   }
 }
 
-.btn-circle.btn-ghost,
-.btn-icon.btn-ghost,
 .btn-close {
   --btn-bg: transparent;
-  --btn-bg-hover: #{variables.$element-base-1-hover};
-  --btn-bg-active: #{variables.$element-base-1-selected};
+  --btn-bg-hover: #{semantic-tokens.$element-base-1-hover};
+  --btn-bg-active: #{semantic-tokens.$element-base-1-selected};
   --btn-color: #{semantic-tokens.$element-ui-1};
   --btn-color-active: #{semantic-tokens.$element-ui-1};
 }

package/src/styles/bootstrap/_modals.scss

@@ -209,7 +209,10 @@
 // scss-docs-start modal-fullscreen-loop
 @each $breakpoint in map.keys(variables.$grid-breakpoints) {
   $infix: breakpoints.breakpoint-infix($breakpoint, variables.$grid-breakpoints);
-  $postfix: if($infix != '', $infix + '-down', '');
+  $postfix: '';
+  @if ($infix != '') {
+    $postfix: $infix + '-down';
+  }
 
   @include breakpoints.media-breakpoint-down($breakpoint) {
     .modal-fullscreen#{$postfix} {

package/src/styles/bootstrap/_reboot.scss

@@ -269,21 +269,20 @@ code,
 kbd,
 samp {
   font-family: variables.$font-family-code;
-  font-size: 1em; // Correct the odd `em` font sizing in all browsers.
+  font-size: variables.$code-font-size;
+  line-height: variables.$code-line-height;
   direction: ltr;
   unicode-bidi: bidi-override;
 }
 
-// 1. Remove browser default top margin
-// 2. Reset browser default of `1em` to use `rem`s
-// 3. Don't allow content to break outside
-
 pre {
   display: block;
-  margin-block: 0 1rem; // 1 // 2
-  overflow: auto; // 3
-  font-size: variables.$code-font-size;
+  padding-block: variables.$pre-padding-y;
+  padding-inline: variables.$pre-padding-x;
+  border-radius: variables.$pre-border-radius;
+  overflow: auto;
   color: variables.$pre-color;
+  border: variables.$pre-border-color variables.$pre-border-width solid;
 
   // Account for some code outputs that place code tags in pre tags
   code {
@@ -294,9 +293,12 @@ pre {
 }
 
 code {
-  font-size: variables.$code-font-size;
+  background: variables.$code-background;
   color: variables.$code-color;
   word-wrap: break-word;
+  padding-block: variables.$code-padding-y;
+  padding-inline: variables.$code-padding-x;
+  border-radius: variables.$code-border-radius;
 
   // Streamline the style when inside anchors to avoid broken underline and more
   a > & {
@@ -307,14 +309,12 @@ code {
 kbd {
   padding-block: variables.$kbd-padding-y;
   padding-inline: variables.$kbd-padding-x;
-  font-size: variables.$kbd-font-size;
   color: variables.$kbd-color;
   background-color: variables.$kbd-bg;
   border-radius: variables.$border-radius-sm;
 
   kbd {
     padding: 0;
-    font-size: 1em;
     font-weight: variables.$nested-kbd-font-weight;
   }
 }
@@ -409,6 +409,17 @@ textarea {
   line-height: inherit;
 }
 
+input,
+textarea {
+  &:disabled {
+    color: variables.$text-muted;
+
+    &::placeholder {
+      color: variables.$input-placeholder-disabled-color;
+    }
+  }
+}
+
 // Remove the inheritance of text transform in Firefox
 button,
 select {

package/src/styles/bootstrap/_variables.scss

@@ -288,7 +288,7 @@ $table-variants: (
 // For each of Bootstrap's buttons, define text, background, and border color.
 
 $btn-padding-y: map.get(spacers.$spacers, 4);
-$btn-padding-x: map.get(spacers.$spacers, 6);
+$btn-padding-x: map.get(spacers.$spacers, 4);
 $btn-font-size: $font-size-base;
 $btn-line-height: typography.$si-line-height-h5 !default;
 $btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping
@@ -519,9 +519,9 @@ $popover-arrow-outer-color: $popover-border-color !default;
 $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-y: map.get(spacers.$spacers, 1);
 $badge-padding-x: map.get(spacers.$spacers, 4);
-$badge-border-radius: map.get(spacers.$spacers, 5);
+$badge-border-radius: 0.75rem;
 
 // Modals
 
@@ -645,13 +645,24 @@ $breadcrumb-border-radius: 0 !default;
 
 // Code
 
-$code-font-size: 87.5% !default;
-$code-color: semantic-tokens.$element-data-11 !default;
+$code-font-size: typography.$si-font-size-body !default;
+$code-line-height: typography.$si-line-height-body !default;
+$code-color: semantic-tokens.$element-text-primary !default;
+$code-background: semantic-tokens.$element-ui-4 !default;
+$code-padding-y: map.get(spacers.$spacers, 1) !default;
+$code-padding-x: map.get(spacers.$spacers, 2) !default;
+$code-border-radius: semantic-tokens.$element-radius-1 !default;
 
 $kbd-padding-y: 0.2rem !default;
 $kbd-padding-x: 0.4rem !default;
-$kbd-font-size: $code-font-size !default;
-$kbd-color: semantic-tokens.$element-base-1 !default;
+$kbd-color: semantic-tokens.$element-text-primary !default;
 $kbd-bg: semantic-tokens.$element-ui-1 !default;
+// variable is unused. TODO: remove it.
+$kbd-font-size: $code-font-size !default;
 
 $pre-color: semantic-tokens.$element-text-primary !default;
+$pre-padding-y: map.get(spacers.$spacers, 4) !default;
+$pre-padding-x: map.get(spacers.$spacers, 4) !default;
+$pre-border-color: semantic-tokens.$element-ui-4 !default;
+$pre-border-width: $border-width !default;
+$pre-border-radius: semantic-tokens.$element-radius-1 !default;

package/src/styles/bootstrap/mixins/_backdrop.scss

@@ -1,4 +1,5 @@
-// Shared between modals and offcanvases
+@use '../variables';
+
 @mixin overlay-backdrop($zindex, $backdrop-bg, $backdrop-opacity) {
   position: fixed;
   inset-block-start: 0;
@@ -7,13 +8,14 @@
   inline-size: 100vw;
   block-size: 100vh;
   background-color: $backdrop-bg;
+  opacity: $backdrop-opacity;
+  transition: variables.$transition-fade;
 
-  // Fade for backdrop
-  &.fade {
+  @starting-style {
     opacity: 0;
   }
 
-  &.show {
-    opacity: $backdrop-opacity;
+  &.backdrop-leave {
+    opacity: 0;
   }
 }

package/src/styles/bootstrap/mixins/_breakpoints.scss

@@ -28,7 +28,10 @@
   @if not $n {
     @error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
   }
-  @return if($n < list.length($breakpoint-names), list.nth($breakpoint-names, $n + 1), null);
+  @if ($n < list.length($breakpoint-names)) {
+    @return list.nth($breakpoint-names, $n + 1);
+  }
+  @return null;
 }
 
 // Minimum breakpoint width. Null for the smallest (first) breakpoint.
@@ -37,7 +40,10 @@
 //    576px
 @function breakpoint-min($name, $breakpoints: variables.$grid-breakpoints) {
   $min: map.get($breakpoints, $name);
-  @return if($min != 0, $min, null);
+  @if ($min != 0) {
+    @return $min;
+  }
+  @return null;
 }
 
 // Maximum breakpoint width.
@@ -51,7 +57,10 @@
 //    767.98px
 @function breakpoint-max($name, $breakpoints: variables.$grid-breakpoints) {
   $max: map.get($breakpoints, $name);
-  @return if($max and $max > 0, $max - 0.02, null);
+  @if ($max and $max > 0) {
+    @return $max - 0.02;
+  }
+  @return null;
 }
 
 // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
@@ -62,7 +71,10 @@
 //    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    "-sm"
 @function breakpoint-infix($name, $breakpoints: variables.$grid-breakpoints) {
-  @return if(breakpoint-min($name, $breakpoints) == null, '', '-#{$name}');
+  @if (breakpoint-min($name, $breakpoints) == null) {
+    @return '';
+  }
+  @return '-#{$name}';
 }
 
 // Media of at least the minimum breakpoint width. No query for the smallest breakpoint.

package/src/styles/bootstrap/mixins/_grid.scss

@@ -26,11 +26,9 @@
 
 @mixin make-col-ready($gutter: variables.$grid-gutter-width) {
   // Add box sizing if only the grid is loaded
-  box-sizing: if(
-    meta.variable-exists(include-column-box-sizing) and $include-column-box-sizing,
-    border-box,
-    null
-  );
+  @if (meta.variable-exists(include-column-box-sizing) and $include-column-box-sizing) {
+    box-sizing: border-box;
+  }
   // Prevent columns from becoming too narrow when at smaller grid tiers by
   // always setting `width: 100%;`. This works because we set the width
   // later on to override this initial width.
@@ -60,7 +58,11 @@
 
 @mixin make-col-offset($size, $columns: variables.$grid-columns) {
   $num: functions.divide($size, $columns);
-  margin-inline-start: if($num == 0, 0, math.percentage($num));
+  @if ($num == 0) {
+    margin-inline-start: 0;
+  } @else {
+    margin-inline-start: math.percentage($num);
+  }
 }
 
 // Row columns

package/src/styles/bootstrap/mixins/_utilities.scss

@@ -24,28 +24,33 @@
     }
 
     // Use custom class if present
-    $property-class: if(
-      map.has-key($utility, class),
-      map.get($utility, class),
-      list.nth($properties, 1)
-    );
-    $property-class: if($property-class == null, '', $property-class);
+    $property-class: list.nth($properties, 1);
+    @if (map.has-key($utility, class)) {
+      $property-class: map.get($utility, class);
+    }
+    @if ($property-class == null) {
+      $property-class: '';
+    }
 
     // State params to generate pseudo-classes
-    $state: if(map.has-key($utility, state), map.get($utility, state), ());
+    $state: ();
+    @if (map.has-key($utility, state)) {
+      $state: map.get($utility, state);
+    }
 
-    $infix: if(
-      $property-class == '' and string.slice($infix, 1, 1) == '-',
-      string.slice($infix, 2),
-      $infix
-    );
+    @if ($property-class == '' and string.slice($infix, 1, 1) == '-') {
+      $infix: string.slice($infix, 2);
+    }
 
     // Don't prefix if value key is null (eg. with shadow class)
-    $property-class-modifier: if(
-      $key,
-      if($property-class == '' and $infix == '', '', '-') + $key,
-      ''
-    );
+    $property-class-modifier: '';
+    @if ($key) {
+      @if ($property-class == '' and $infix == '') {
+        $property-class-modifier: $key;
+      } @else {
+        $property-class-modifier: '-' + $key;
+      }
+    }
 
     $is-css-var: map.get($utility, css-var);
     $is-local-vars: map.get($utility, local-vars);
@@ -62,6 +67,11 @@
           }
         }
       } @else {
+        $important: null;
+        @if (variables.$enable-important-utilities) {
+          $important: string.unquote('!important');
+        }
+
         .#{$property-class + $infix + $property-class-modifier} {
           @each $property in $properties {
             @if $is-local-vars {
@@ -69,14 +79,14 @@
                 --#{variables.$variable-prefix}#{$local-var}: #{$value};
               }
             }
-            #{$property}: $value if(variables.$enable-important-utilities, !important, null);
+            #{$property}: $value $important;
           }
         }
 
         @each $pseudo in $state {
           .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
             @each $property in $properties {
-              #{$property}: $value if(variables.$enable-important-utilities, !important, null);
+              #{$property}: $value $important;
             }
           }
         }

package/src/styles/components/_markdown.scss

@@ -13,16 +13,6 @@
     font-weight: variables.$si-font-weight-semibold;
   }
 
-  code {
-    color: variables.$element-text-primary;
-    background-color: variables.$element-ui-4;
-    padding-block: map.get(variables.$spacers, 1);
-    padding-inline: map.get(variables.$spacers, 2);
-    border-radius: variables.$element-radius-1;
-    font-family:
-      'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
-  }
-
   ul,
   ol {
     max-inline-size: 100%;
@@ -44,16 +34,6 @@
   }
 
   pre {
-    background-color: variables.$element-ui-4;
-    padding-block: map.get(variables.$spacers, 4);
-    padding-inline: map.get(variables.$spacers, 4);
-    border-radius: variables.$element-radius-1;
-    overflow-x: auto;
-    margin-inline: 0;
-    inline-size: max-content;
-    max-inline-size: 100%;
-    box-sizing: border-box;
-
     code {
       background-color: transparent;
       padding-block: 0;