@siemens/element-theme 51.0.0-rc.3 → 51.0.0-rc.4

package/README.md

@@ -0,0 +1,13 @@
+<p align="center">
+  <a href="https://element.siemens.io" target="_blank">
+    <img src="https://raw.githubusercontent.com/siemens/element/refs/heads/main/element-logo.svg" alt="Siemens Element" height="132" width="132">
+  </a>
+</p>
+
+<h1 align="center">@siemens/element-theme</h1>
+
+The Element theme provides the CSS and SCSS that implement the Siemens Design Language.
+It includes design tokens, typography, and color schemes with light and dark theme support.
+It is used by the Element Angular components.
+
+**Get started, explore components and read the docs at [element.siemens.io](https://element.siemens.io).**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siemens/element-theme",
-  "version": "51.0.0-rc.3",
+  "version": "51.0.0-rc.4",
   "description": "Element CSS theme.",
   "license": "MIT",
   "repository": {
@@ -24,5 +24,6 @@
     "responsive",
     "front-end",
     "framework"
-  ]
+  ],
+  "readme": "<p align=\"center\">\n  <a href=\"https://element.siemens.io\" target=\"_blank\">\n    <img src=\"https://raw.githubusercontent.com/siemens/element/refs/heads/main/element-logo.svg\" alt=\"Siemens Element\" height=\"132\" width=\"132\">\n  </a>\n</p>\n\n<h1 align=\"center\">@siemens/element-theme</h1>\n\nThe Element theme provides the CSS and SCSS that implement the Siemens Design Language.\nIt includes design tokens, typography, and color schemes with light and dark theme support.\nIt is used by the Element Angular components.\n\n**Get started, explore components and read the docs at [element.siemens.io](https://element.siemens.io).**\n"
 }

package/src/styles/_accessibility.scss

@@ -2,6 +2,10 @@
   --element-animations-enabled: 1;
 }
 
+.disable-animations {
+  --element-animations-enabled: 0;
+}
+
 @media (prefers-reduced-motion) {
   :root {
     --element-animations-enabled: 0;

package/src/styles/bootstrap/_forms.scss

@@ -1,6 +1,7 @@
 @use './forms/form-check';
 @use './forms/form-control';
 @use './forms/form-file';
+@use './forms/form-layout';
 @use './forms/form-label';
 @use './forms/form-range';
 // not part of the design system

package/src/styles/bootstrap/_mixins.scss

@@ -28,3 +28,4 @@
 @forward './mixins/clearfix';
 @forward './mixins/container';
 @forward './mixins/grid';
+@forward './mixins/form-layout';

package/src/styles/bootstrap/_type.scss

@@ -112,9 +112,7 @@ h1,
   );
 }
 
-.si-h1-bold,
-// @deprecated Will be removed in a future major version, use `.si-h1-bold` instead.
-.si-h1-black {
+.si-h1-bold {
   @include typography.si-font(
     typography.$si-font-size-h1-bold,
     typography.$si-line-height-h1-bold,
@@ -142,9 +140,7 @@ h3,
   );
 }
 
-.si-h4-bold,
-// @deprecated Will be removed in a future major version, use `.si-h4-bold` instead.
-.si-title-1-bold {
+.si-h4-bold {
   @include typography.si-font(
     typography.$si-font-size-h4-bold,
     typography.$si-line-height-h4-bold,
@@ -154,9 +150,7 @@ h3,
 
 h4,
 .h4,
-.si-h4,
-// @deprecated Will be removed in a future major version, use `.si-h4` instead.
-.si-title-1 {
+.si-h4 {
   @include typography.si-font(
     typography.$si-font-size-h4,
     typography.$si-line-height-h4,
@@ -164,9 +158,7 @@ h4,
   );
 }
 
-.si-h5-bold,
-// @deprecated Will be removed in a future major version, use `.si-h5-bold` instead.
-.si-title-2-bold {
+.si-h5-bold {
   @include typography.si-font(
     typography.$si-font-size-h5-bold,
     typography.$si-line-height-h5-bold,
@@ -178,9 +170,7 @@ h5,
 h6,
 .h5,
 .h6,
-.si-h5,
-// @deprecated Will be removed in a future major version, use `.si-h5` instead.
-.si-title-2 {
+.si-h5 {
   @include typography.si-font(
     typography.$si-font-size-h5,
     typography.$si-line-height-h5,
@@ -188,9 +178,7 @@ h6,
   );
 }
 
-.si-body-lg,
-// @deprecated Will be removed in a future major version, use `.si-body-lg` instead.
-.si-body-1 {
+.si-body-lg {
   @include typography.si-font(
     typography.$si-font-size-body-lg,
     typography.$si-line-height-body-lg,
@@ -198,9 +186,7 @@ h6,
   );
 }
 
-.si-body,
-// @deprecated Will be removed in a future major version, use `.si-body` instead.
-.si-body-2 {
+.si-body {
   @include typography.si-font(
     typography.$si-font-size-body,
     typography.$si-line-height-body,
@@ -217,9 +203,7 @@ h6,
 }
 
 .si-display-xl,
-.display-1,
-// @deprecated Will be removed in a future major version, use `.si-display-xl` instead.
-.si-display-1 {
+.display-1 {
   @include typography.si-font(
     typography.$si-font-size-display-xl,
     typography.$si-line-height-display-xl,
@@ -228,9 +212,7 @@ h6,
 }
 
 .si-display-lg,
-.display-2,
-// @deprecated Will be removed in a future major version, use `.si-display-lg` instead.
-.si-display-2 {
+.display-2 {
   @include typography.si-font(
     typography.$si-font-size-display-lg,
     typography.$si-line-height-display-lg,
@@ -239,9 +221,7 @@ h6,
 }
 
 .si-display-bold,
-.display-3,
-// @deprecated Will be removed in a future major version, use `.si-display-bold` instead.
-.si-display-3 {
+.display-3 {
   @include typography.si-font(
     typography.$si-font-size-display-bold,
     typography.$si-line-height-display-bold,
@@ -250,9 +230,7 @@ h6,
 }
 
 .si-display,
-.display-4,
-// @deprecated Will be removed in a future major version, use `.si-display` instead.
-.si-display-4 {
+.display-4 {
   @include typography.si-font(
     typography.$si-font-size-display,
     typography.$si-line-height-display,

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

@@ -0,0 +1,10 @@
+@use '../mixins/form-layout';
+
+.form-col-layout {
+  @include form-layout.form-col-layout;
+}
+
+/* Default responsive layout. */
+.responsive-form-col-layout {
+  @include form-layout.responsive-form-col-layout(48ch);
+}

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

@@ -43,9 +43,6 @@
 @mixin form-validation-styles($state, $color, $icon) {
   @if ($state and $icon) {
     --si-feedback-icon: #{$icon};
-    // TODO: remove with v50
-    // DEPRECATED: use --si-feedback-icon-size instead
-    --si-feedback-icon-offset: 1.5rem;
     --si-feedback-icon-size: #{si-vars.$si-icon-font-size};
   }
 

package/src/styles/bootstrap/mixins/_form-layout.scss

@@ -0,0 +1,60 @@
+@use 'sass:map';
+@use '../../variables/spacers';
+@use '../variables';
+
+$form-col-layout-label-width: 16ch !default;
+
+/* Turns every inner form-field into a column layout */
+@mixin form-col-layout {
+  .si-form-input:not(.form-check),
+  .si-form-input.form-check:not(.form-check-inline) {
+    display: flex;
+    flex-direction: row;
+    align-items: start;
+    column-gap: map.get(spacers.$spacers, 6);
+
+    > .form-label {
+      flex: 0 0 var(--si-form-label-width, #{$form-col-layout-label-width});
+      max-inline-size: var(--si-form-label-width, #{$form-col-layout-label-width});
+      align-self: start;
+      padding-block: variables.$input-padding-y + variables.$input-border-width;
+      line-height: variables.$input-line-height;
+
+      &:empty {
+        display: block;
+      }
+    }
+
+    > :not(.form-label) {
+      flex: 1 1 auto;
+      min-inline-size: 0;
+    }
+  }
+
+  .si-form-input.form-check:not(.form-check-inline) {
+    padding-inline-start: 0;
+
+    .form-check-input {
+      margin-inline-start: 0;
+      margin-inline-end: map.get(spacers.$spacers, 4);
+    }
+  }
+
+  si-form-fieldset.si-form-input {
+    align-items: start;
+
+    > .form-label {
+      align-self: start;
+      padding-block: map.get(spacers.$spacers, 1) 0 !important; // stylelint-disable-line declaration-no-important
+    }
+  }
+}
+
+/* Turns every inner form-field into a column layout above a min-width. */
+@mixin responsive-form-col-layout($min-width) {
+  container-type: inline-size;
+
+  @container (min-width: #{$min-width}) {
+    @include form-col-layout;
+  }
+}

package/src/styles/components/_datatable.scss

@@ -10,7 +10,7 @@
 @use 'sass:map';
 
 $datatable-header-border-color: variables.$table-border-color !default;
-$datatable-header-background-color: transparent !default;
+$datatable-header-background-color: variables.$table-bg !default;
 $datatable-header-color: semantic-tokens.$element-text-primary !default;
 $datatable-footer-background-color: transparent !default;
 
@@ -46,6 +46,11 @@ $datatable-ghost-cell-strip-radius: 0 !default;
   background-color: variables.$table-bg;
   border-radius: semantic-tokens.$element-radius-2;
 
+  // Compat for v26. This element hos no class.
+  [role='table'] {
+    flex: 1;
+  }
+
   &.table-custom {
     --si-datatable-row-min-height: 24px;
   }
@@ -202,13 +207,10 @@ $datatable-ghost-cell-strip-radius: 0 !default;
   // Header Styles
   .datatable-header {
     padding: 0;
-    display: flex;
-    align-items: center;
     border-block-end: 4px solid $datatable-header-border-color;
     background-color: $datatable-header-background-color;
     color: $datatable-header-color;
     block-size: $datatable-header-height;
-    vertical-align: baseline;
     font-size: typography.$si-font-size-h5;
     font-weight: typography.$si-font-weight-h5;
     line-height: typography.$si-line-height-h5;
@@ -251,7 +253,7 @@ $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;
+    font-weight: typography.$si-font-weight-h5;
   }
 
   // Body Styles
@@ -312,17 +314,12 @@ $datatable-ghost-cell-strip-radius: 0 !default;
         }
       }
     }
-
-    .datatable-body-row:has(.datatable-row-group) {
-      min-inline-size: fit-content;
-    }
   }
 
   // Footer Styles
   .datatable-footer {
     display: flex;
     align-items: flex-end;
-    flex: 1;
     align-content: flex-end;
     background-color: $datatable-footer-background-color;
     color: semantic-tokens.$element-text-secondary;

package/src/styles/components/_list-item.scss

@@ -13,13 +13,13 @@ ol:has(.list-item) {
 
 .list-item {
   display: grid;
-  grid-template-columns: 1fr auto;
+  grid-template-columns: auto 1fr auto;
   grid-template-areas:
-    'timestamp timestamp'
-    'title action'
-    'description description'
-    'metadata metadata'
-    'quick-actions quick-actions';
+    '.         timestamp     timestamp'
+    'indicator title         action'
+    '.         description   description'
+    '.         metadata      metadata'
+    '.         quick-actions quick-actions';
   padding-block: map.get(variables.$spacers, 4);
   padding-inline: map.get(variables.$spacers, 6);
 
@@ -30,7 +30,21 @@ ol:has(.list-item) {
   );
 
   > * {
-    grid-column: 1 / -1;
+    grid-column: 2 / -1;
+  }
+
+  .list-item-indicator {
+    grid-area: indicator;
+    display: flex;
+    align-self: center;
+    align-items: center;
+    // This restricts the height on purpose.
+    // Content taller than the title remains centered and overflows on both sides.
+    max-block-size: calc(
+      #{typography.$si-line-height-h5 * typography.$si-font-size-h5} +
+        #{map.get(variables.$spacers, 4) * 2}
+    );
+    margin-inline-end: map.get(variables.$spacers, 4);
   }
 
   .list-item-timestamp {

package/src/styles/variables/_typography.scss

@@ -86,63 +86,3 @@ $si-font-weight-display-bold: $si-font-weight-bold;
 $si-font-size-display: px-to-rem(40px);
 $si-line-height-display: px-to-ratio($si-font-size-display, 52px);
 $si-font-weight-display: $si-font-weight-normal;
-
-// @deprecated Will be removed in a future major version, use `$si-*-h1-bold` instead.
-$si-font-size-h1-black: $si-font-size-h1-bold;
-$si-line-height-h1-black: $si-line-height-h1-bold;
-$si-font-weight-h1-black: $si-font-weight-h1-bold;
-
-// @deprecated Will be removed in a future major version, use `$si-*-h4-bold` instead.
-$si-font-size-title-1-bold: $si-font-size-h4-bold;
-$si-line-height-title-1-bold: $si-line-height-h4-bold;
-$si-font-weight-title-1-bold: $si-font-weight-h4-bold;
-
-// @deprecated Will be removed in a future major version, use `$si-*-h4` instead.
-$si-font-size-title-1: $si-font-size-h4;
-$si-line-height-title-1: $si-line-height-h4;
-$si-font-weight-title-1: $si-font-weight-h4;
-
-// @deprecated Will be removed in a future major version, use `$si-*-h5-bold` instead.
-$si-font-size-title-2-bold: $si-font-size-h5-bold;
-$si-line-height-title-2-bold: $si-line-height-h5-bold;
-$si-font-weight-title-2-bold: $si-font-weight-h5-bold;
-
-// @deprecated Will be removed in a future major version, use `$si-*-h5` instead.
-$si-font-size-title-2: $si-font-size-h5;
-$si-line-height-title-2: $si-line-height-h5;
-$si-font-weight-title-2: $si-font-weight-h5;
-
-// @deprecated Will be removed in a future major version, use `$si-*-body-lg` instead.
-$si-font-size-body-1: $si-font-size-body-lg;
-$si-line-height-body-1: $si-line-height-body-lg;
-$si-font-weight-body-1: $si-font-weight-body-lg;
-
-// @deprecated Will be removed in a future major version, use `$si-*-body` instead.
-$si-font-size-body-2: $si-font-size-body;
-$si-line-height-body-2: $si-line-height-body;
-$si-font-weight-body-2: $si-font-weight-body;
-
-// @deprecated Will be removed in a future major version, use `$si-*-caption` instead.
-$si-font-size-caption-1: $si-font-size-caption;
-$si-line-height-caption-1: $si-line-height-caption;
-$si-font-weight-caption-1: $si-font-weight-caption;
-
-// @deprecated Will be removed in a future major version, use `$si-*-display-xl` instead.
-$si-font-size-display-1: $si-font-size-display-xl;
-$si-line-height-display-1: $si-line-height-display-xl;
-$si-font-weight-display-1: $si-font-weight-display-xl;
-
-// @deprecated Will be removed in a future major version, use `$si-*-display-lg` instead.
-$si-font-size-display-2: $si-font-size-display-lg;
-$si-line-height-display-2: $si-line-height-display-lg;
-$si-font-weight-display-2: $si-font-weight-display-lg;
-
-// @deprecated Will be removed in a future major version, use `$si-*-display-bold` instead.
-$si-font-size-display-3: $si-font-size-display-bold;
-$si-line-height-display-3: $si-line-height-display-bold;
-$si-font-weight-display-3: $si-font-weight-display-bold;
-
-// @deprecated Will be removed in a future major version, use `$si-*-display` instead.
-$si-font-size-display-4: $si-font-size-display;
-$si-line-height-display-4: $si-line-height-display;
-$si-font-weight-display-4: $si-font-weight-display;