@siemens/element-theme 47.9.0 → 48.0.0-next.2

package/package.json

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

package/src/styles/bootstrap/_badges.scss

@@ -7,6 +7,11 @@
 
 // stylelint-disable declaration-no-important
 
+%badge-text-emphasis {
+  font-size: typography.$si-font-size-title-2;
+  font-weight: typography.$si-font-weight-title-2;
+}
+
 .badge {
   display: inline-block;
   color: semantic-tokens.$element-text-primary;
@@ -17,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-title-2;
-  font-weight: typography.$si-font-weight-title-2;
+  font-size: typography.$si-font-size-body-2;
+  font-weight: typography.$si-font-weight-body-2;
   max-inline-size: 196px;
   min-inline-size: map.get(spacers.$spacers, 8);
   text-overflow: ellipsis;
@@ -86,31 +91,37 @@
   &.bg-info-emphasis {
     background: semantic-tokens.$element-status-information;
     color: semantic-tokens.$element-status-information-contrast;
+    @extend %badge-text-emphasis;
   }
 
   &.bg-success-emphasis {
     background: semantic-tokens.$element-status-success;
     color: semantic-tokens.$element-status-success-contrast;
+    @extend %badge-text-emphasis;
   }
 
   &.bg-warning-emphasis {
     background: semantic-tokens.$element-status-warning;
     color: semantic-tokens.$element-status-warning-contrast;
+    @extend %badge-text-emphasis;
   }
 
   &.bg-danger-emphasis {
     background: semantic-tokens.$element-status-danger;
     color: semantic-tokens.$element-status-danger-contrast;
+    @extend %badge-text-emphasis;
   }
 
   &.bg-critical-emphasis {
     background: semantic-tokens.$element-status-critical;
     color: semantic-tokens.$element-status-critical-contrast;
+    @extend %badge-text-emphasis;
   }
 
   &.bg-caution-emphasis {
     background: semantic-tokens.$element-status-caution;
     color: semantic-tokens.$element-status-caution-contrast;
+    @extend %badge-text-emphasis;
   }
 
   .icon {

package/src/styles/bootstrap/_card.scss

@@ -88,10 +88,11 @@
   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;
 
-  &,
   .icon {
-    line-height: typography.$si-font-size-title-2;
+    // The icon would be 8px too high without this.
+    margin-block: - map.get(spacers.$spacers, 2);
   }
 
   + .card-body {

package/src/styles/bootstrap/_nav.scss

@@ -81,9 +81,7 @@ $nav-tabs-min-width: 100px;
     cursor: pointer;
 
     .badge {
-      margin-inline-start: map.get(spacers.$spacers, 1);
-      margin-block-start: -7px;
-      flex-shrink: 0;
+      margin-inline-end: 0;
     }
 
     &.active {

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

@@ -16,17 +16,27 @@ $form-check-padding-x: map.get(spacers.$spacers, 2);
 
 $form-check-label-start: $form-check-size + map.get(spacers.$spacers, 4);
 
+%form-check-spacing {
+  .form-check-input {
+    margin-inline-start: -1 * $form-check-label-start;
+  }
+}
+
 .form-check {
   padding-block: map.get(spacers.$spacers, 1);
+  padding-inline-start: map.get(spacers.$spacers, 8);
+
+  @extend %form-check-spacing;
 
   :is(.valid-feedback, .invalid-feedback) {
-    margin-inline-start: $form-check-label-start;
+    margin-inline-start: 0;
   }
 }
 
 .form-check-inline {
   display: inline-block;
   margin-inline-end: variables.$form-check-inline-margin-end;
+  @extend %form-check-spacing;
 }
 
 %form-check-base {
@@ -162,7 +172,7 @@ $form-check-label-start: $form-check-size + map.get(spacers.$spacers, 4);
 %form-check-label {
   display: inline-block;
   position: relative;
-  padding-inline: map.get(spacers.$spacers, 4) $form-check-padding-x;
+  padding-inline-end: $form-check-padding-x;
   color: semantic-tokens.$element-text-primary;
 }
 

package/src/styles/components/_switch.scss

@@ -3,6 +3,8 @@
 @use 'sass:map';
 
 $si-switch-size: 20px !default;
+$si-switch-inline-size: calc(2 * #{$si-switch-size});
+$si-switch-inline-spacing: calc($si-switch-inline-size + map.get(variables.$spacers, 4));
 $si-switch-background-off-color: variables.$element-ui-4 !default;
 $si-switch-background-on-color: variables.$element-ui-0 !default;
 $si-switch-background-disabled-color: variables.$element-ui-3 !default;
@@ -15,16 +17,14 @@ $si-switch-knob-size: calc(#{$si-switch-size} - 2 * #{$si-switch-slider-margin})
 
 .form-switch {
   padding-block: map.get(variables.$spacers, 1);
+  padding-inline-start: $si-switch-inline-spacing;
 
   .form-check-input {
     cursor: pointer;
-    position: relative;
     inset: 0;
-    margin-inline: 0 map.get(variables.$spacers, 3);
     margin-block: - map.get(variables.$spacers, 1);
-    inline-size: calc(
-      2 * #{$si-switch-size}
-    ) !important; // stylelint-disable-line declaration-no-important
+    margin-inline-start: calc(-1 * $si-switch-inline-spacing);
+    inline-size: $si-switch-inline-size !important; // stylelint-disable-line declaration-no-important
     block-size: #{$si-switch-size} !important; // stylelint-disable-line declaration-no-important
     background-color: $si-switch-background-off-color;
     transition: $si-switch-transition-length;

package/src/styles/variables/_utilities.scss

@@ -557,7 +557,7 @@ $utilities: (
     )
   ),
   'rounded-end': (
-    property: border-end-start-radius border-end-end-radius,
+    property: border-start-end-radius border-end-end-radius,
     class: rounded-end,
     values: (
       null: variables.$border-radius

package/src/theme/_theme-element.scss

@@ -40,7 +40,7 @@ $theme-element-light: (
   base-caution: base.$color-yellow-100,
   base-warning: base.$color-orange-100,
   base-danger: base.$color-red-100,
-  base-critical: base.$color-red-100,
+  base-critical: data.$color-data-orchid-100,
   base-translucent-1: rgba(base.$color-black, 0.3),
   base-translucent-2: rgba(base.$color-deep-blue-900, 0.88),
   // EXPERIMENTAL: Do not use
@@ -74,7 +74,7 @@ $theme-element-light: (
   text-caution: base.$color-yellow-900,
   text-warning: base.$color-orange-900,
   text-danger: base.$color-red-700,
-  text-critical: base.$color-red-700,
+  text-critical: data.$color-data-orchid-700,
 
   status-information: base.$color-blue-500,
   status-information-contrast: base.$color-white,
@@ -86,7 +86,7 @@ $theme-element-light: (
   status-warning-contrast: base.$color-white,
   status-danger: base.$color-red-500,
   status-danger-contrast: base.$color-white,
-  status-critical: base.$color-red-900,
+  status-critical: data.$color-data-orchid-500,
   status-critical-contrast: base.$color-white,
 
   focus-default: base.$color-focus,
@@ -228,7 +228,7 @@ $theme-element-dark: (
   base-caution: base.$color-yellow-900,
   base-warning: base.$color-orange-900,
   base-danger: base.$color-red-900,
-  base-critical: base.$color-red-900,
+  base-critical: data.$color-data-orchid-700,
   base-translucent-1: rgba(base.$color-black, 0.7),
   base-translucent-2: rgba(base.$color-white, 0.88),
   // EXPERIMENTAL: Do not use
@@ -262,7 +262,7 @@ $theme-element-dark: (
   text-caution: base.$color-yellow-100,
   text-warning: base.$color-orange-100,
   text-danger: base.$color-red-100,
-  text-critical: base.$color-red-100,
+  text-critical: data.$color-data-orchid-100,
 
   status-information: base.$color-blue-500,
   status-information-contrast: base.$color-white,
@@ -274,7 +274,7 @@ $theme-element-dark: (
   status-warning-contrast: base.$color-deep-blue-900,
   status-danger: base.$color-red-500,
   status-danger-contrast: base.$color-white,
-  status-critical: base.$color-red-700,
+  status-critical: data.$color-data-orchid-500,
   status-critical-contrast: base.$color-white,
 
   focus-default: base.$color-focus,