@siemens/element-theme 50.0.0-rc.1 → 51.0.0-rc.10

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": "50.0.0-rc.1",
+  "version": "51.0.0-rc.10",
   "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

@@ -1,9 +1,15 @@
-:root {
+@use 'selectors';
+
+#{selectors.$root} {
   --element-animations-enabled: 1;
 }
 
+.disable-animations {
+  --element-animations-enabled: 0;
+}
+
 @media (prefers-reduced-motion) {
-  :root {
+  #{selectors.$root} {
     --element-animations-enabled: 0;
   }
 }

package/src/styles/_density.scss

@@ -0,0 +1,144 @@
+@use 'selectors';
+@use 'variables/typography';
+
+@mixin define-spacer($spacer, $block-size, $inline-size) {
+  --si-sys-sizing-spacing-y-#{$spacer}: #{$block-size};
+  --si-sys-sizing-spacing-x-#{$spacer}: #{$inline-size};
+}
+
+@mixin define-font($name, $font-size, $line-height) {
+  --si-sys-typography-font-size-#{$name}: #{typography.px-to-rem($font-size)};
+  --si-sys-typography-line-height-#{$name}: #{typography.px-to-ratio($font-size, $line-height)};
+}
+
+@mixin define-sizing($name, $size) {
+  --si-sys-sizing-sizing-#{$name}: #{$size};
+}
+
+@mixin define-icon-size($name, $size) {
+  --si-sys-sizing-icon-#{$name}: #{typography.px-to-rem($size)};
+}
+
+#{selectors.$root} {
+  @include define-spacer(10, 2px, 2px);
+  @include define-spacer(20, 4px, 4px);
+  @include define-spacer(30, 6px, 6px);
+  @include define-spacer(40, 8px, 8px);
+  @include define-spacer(50, 12px, 12px);
+  @include define-spacer(60, 16px, 16px);
+  @include define-spacer(70, 20px, 20px);
+  @include define-spacer(80, 24px, 24px);
+  @include define-spacer(90, 32px, 32px);
+  @include define-spacer(100, 40px, 40px);
+  @include define-spacer(110, 48px, 48px);
+  @include define-spacer(120, 56px, 56px);
+  @include define-spacer(130, 64px, 64px);
+  @include define-spacer(140, 96px, 96px);
+
+  @include define-font(body-sm, 12px, 16px);
+  @include define-font(body, 14px, 16px);
+  @include define-font(body-lg, 16px, 20px);
+  @include define-font(body-paragraph, 14px, 20px);
+  @include define-font(h1, 28px, 36px);
+  @include define-font(h2, 24px, 32px);
+  @include define-font(h3, 20px, 24px);
+  @include define-font(h4, 16px, 20px);
+  @include define-font(h5, 14px, 20px);
+  @include define-font(h6, 12px, 16px);
+  @include define-font(display, 32px, 40px);
+  @include define-font(display-lg, 40px, 52px);
+  @include define-font(display-xl, 48px, 64px);
+  @include define-font(display-xxl, 58px, 72px);
+  @include define-font(code-sm, 12px, 16px);
+  @include define-font(code, 14px, 20px);
+  @include define-font(code-lg, 16px, 20px);
+
+  @include define-sizing(10, 2px);
+  @include define-sizing(20, 4px);
+  @include define-sizing(30, 8px);
+  @include define-sizing(40, 12px);
+  @include define-sizing(50, 16px);
+  @include define-sizing(60, 20px);
+  @include define-sizing(70, 24px);
+  @include define-sizing(80, 32px);
+  @include define-sizing(90, 40px);
+  @include define-sizing(100, 48px);
+  @include define-sizing(110, 64px);
+  @include define-sizing(120, 80px);
+  @include define-sizing(130, 96px);
+  @include define-sizing(140, 120px);
+  @include define-sizing(150, 160px);
+  @include define-sizing(160, 240px);
+  @include define-sizing(170, 320px);
+  @include define-sizing(180, 480px);
+  @include define-sizing(190, 600px);
+  @include define-sizing(200, 720px);
+
+  @include define-icon-size(sm, 16px);
+  @include define-icon-size(md, 20px);
+  @include define-icon-size(lg, 24px);
+  @include define-icon-size(xl, 32px);
+  @include define-icon-size(xxl, 48px);
+}
+
+.density-compact {
+  @include define-spacer(10, 2px, 2px);
+  @include define-spacer(20, 2px, 2px);
+  @include define-spacer(30, 4px, 4px);
+  @include define-spacer(40, 6px, 6px);
+  @include define-spacer(50, 8px, 8px);
+  @include define-spacer(60, 12px, 12px);
+  @include define-spacer(70, 16px, 16px);
+  @include define-spacer(80, 20px, 20px);
+  @include define-spacer(90, 24px, 24px);
+  @include define-spacer(100, 32px, 32px);
+  @include define-spacer(110, 40px, 40px);
+  @include define-spacer(120, 48px, 48px);
+  @include define-spacer(130, 64px, 64px);
+  @include define-spacer(140, 80px, 80px);
+
+  @include define-font(body-sm, 10px, 12px);
+  @include define-font(body, 12px, 14px);
+  @include define-font(body-lg, 14px, 16px);
+  @include define-font(body-paragraph, 12px, 16px);
+  @include define-font(h1, 24px, 28px);
+  @include define-font(h2, 20px, 24px);
+  @include define-font(h3, 16px, 18px);
+  @include define-font(h4, 14px, 16px);
+  @include define-font(h5, 14px, 16px);
+  @include define-font(h6, 12px, 16px);
+  @include define-font(display, 28px, 32px);
+  @include define-font(display-lg, 32px, 40px);
+  @include define-font(display-xl, 40px, 48px);
+  @include define-font(display-xxl, 48px, 56px);
+  @include define-font(code-sm, 12px, 16px);
+  @include define-font(code, 14px, 20px);
+  @include define-font(code-lg, 16px, 20px);
+
+  @include define-sizing(10, 2px);
+  @include define-sizing(20, 2px);
+  @include define-sizing(30, 4px);
+  @include define-sizing(40, 8px);
+  @include define-sizing(50, 12px);
+  @include define-sizing(60, 16px);
+  @include define-sizing(70, 20px);
+  @include define-sizing(80, 24px);
+  @include define-sizing(90, 32px);
+  @include define-sizing(100, 40px);
+  @include define-sizing(110, 48px);
+  @include define-sizing(120, 64px);
+  @include define-sizing(130, 80px);
+  @include define-sizing(140, 96px);
+  @include define-sizing(150, 120px);
+  @include define-sizing(160, 160px);
+  @include define-sizing(170, 240px);
+  @include define-sizing(180, 320px);
+  @include define-sizing(190, 480px);
+  @include define-sizing(200, 600px);
+
+  @include define-icon-size(sm, 12px);
+  @include define-icon-size(md, 16px);
+  @include define-icon-size(lg, 20px);
+  @include define-icon-size(xl, 24px);
+  @include define-icon-size(xxl, 32px);
+}

package/src/styles/_reboot-shadow-dom.scss

@@ -0,0 +1,5 @@
+// by default shadow dom inherits certain browser styles from parent DOM.
+// To avoid this, we reset all styles to initial values. This is a reboot for shadow dom.
+:host {
+  all: initial;
+}

package/src/styles/_root-font-size.scss

@@ -1,11 +1,13 @@
+@use 'selectors';
+
 $element-root-font-size: initial !default;
 
-html {
+#{selectors.$document} {
   // defines the default with low specificity, i.e. easy overridable with :root
   --element-root-font-size: #{$element-root-font-size};
 }
 
-:root {
+#{selectors.$root} {
   font-size: var(--element-root-font-size);
 }
 

package/src/styles/_selectors.scss

@@ -0,0 +1,3 @@
+$root: ':root' !default;
+$document: 'html' !default;
+$body: 'body' !default;

package/src/styles/_themes.scss

@@ -2,8 +2,9 @@
 
 $_theme-default: 'element';
 $_themes: () !default;
+$_root-selector: ':root';
 
-@mixin configure($defaultTheme: null, $themes: ()) {
+@mixin configure($defaultTheme: null, $themes: (), $rootSelector: null) {
   @if $defaultTheme {
     $_theme-default: $defaultTheme !global;
   }
@@ -11,11 +12,17 @@ $_themes: () !default;
   @if $themes {
     $_themes: $themes !global;
   }
+
+  @if $rootSelector {
+    $_root-selector: $rootSelector !global;
+  }
 }
 
-@mixin make-theme($vars, $name, $dark: false, $force-generate: false) {
+@mixin make-theme($vars, $name, $dark: false, $force-generate: false, $root-selector: null) {
   $theme-name: '';
   $mode: '';
+  $actual-root-selector: $root-selector or $_root-selector;
+  $selector: '';
 
   @if list.index($_themes, $name) or $name == $_theme-default or $force-generate {
     @if $name != $_theme-default {
@@ -26,7 +33,12 @@ $_themes: () !default;
       $mode: '.app--dark';
     }
 
-    :root#{$theme-name}#{$mode} {
+    $selector: '#{$actual-root-selector}#{$theme-name}#{$mode}';
+    @if $actual-root-selector == ':host' and ($theme-name != '' or $mode != '') {
+      $selector: ':host(#{$theme-name}#{$mode})';
+    }
+
+    #{$selector} {
       @each $token, $val in $vars {
         --#{$token}: #{$val};
       }

package/src/styles/_utilities.scss

@@ -0,0 +1,5 @@
+@use 'mixins/utilities';
+
+@include utilities.background-utilities();
+@include utilities.text-utilities();
+@include utilities.border-utilities();

package/src/styles/_variables.scss

@@ -1,10 +1,12 @@
 // the minimal set of variables w/o all the heavy bootstrap stuff
 @forward './variables/animations';
 @forward './variables/semantic-tokens';
+@forward './variables/system-tokens';
 @forward './variables/typography';
 @forward './variables/elevation';
 @forward './variables/focus';
 @forward './variables/spacers';
+@forward './variables/sizing';
 @forward './variables/zindex';
 @forward './variables/layout';
 @forward './variables/si-vars';

package/src/styles/bootstrap/_alert.scss

@@ -1,4 +1,4 @@
-@use '../variables/semantic-tokens';
+@use '../variables/system-tokens';
 @use '../variables/typography';
 @use 'variables';
 
@@ -36,37 +36,37 @@
 }
 
 .alert-success {
-  --color-bar: #{semantic-tokens.$element-status-success};
-  color: semantic-tokens.$element-text-success;
-  background: semantic-tokens.$element-base-success;
+  --color-bar: #{system-tokens.$si-sys-border-success};
+  color: system-tokens.$si-sys-text-success;
+  background: system-tokens.$si-sys-background-success-subtle;
 }
 
 .alert-warning {
-  --color-bar: #{semantic-tokens.$element-status-warning};
-  color: semantic-tokens.$element-text-warning;
-  background: semantic-tokens.$element-base-warning;
+  --color-bar: #{system-tokens.$si-sys-border-warning};
+  color: system-tokens.$si-sys-text-warning;
+  background: system-tokens.$si-sys-background-warning-subtle;
 }
 
 .alert-caution {
-  --color-bar: #{semantic-tokens.$element-status-caution};
-  color: semantic-tokens.$element-text-caution;
-  background: semantic-tokens.$element-base-caution;
+  --color-bar: #{system-tokens.$si-sys-border-caution};
+  color: system-tokens.$si-sys-text-caution;
+  background: system-tokens.$si-sys-background-caution-subtle;
 }
 
 .alert-danger {
-  --color-bar: #{semantic-tokens.$element-status-danger};
-  color: semantic-tokens.$element-text-danger;
-  background: semantic-tokens.$element-base-danger;
+  --color-bar: #{system-tokens.$si-sys-border-danger};
+  color: system-tokens.$si-sys-text-danger;
+  background: system-tokens.$si-sys-background-danger-subtle;
 }
 
 .alert-critical {
-  --color-bar: #{semantic-tokens.$element-status-critical};
-  color: semantic-tokens.$element-text-critical;
-  background: semantic-tokens.$element-base-critical;
+  --color-bar: #{system-tokens.$si-sys-border-critical};
+  color: system-tokens.$si-sys-text-critical;
+  background: system-tokens.$si-sys-background-critical-subtle;
 }
 
 .alert-info {
-  --color-bar: #{semantic-tokens.$element-status-information};
-  color: semantic-tokens.$element-text-information;
-  background: semantic-tokens.$element-base-information;
+  --color-bar: #{system-tokens.$si-sys-border-information};
+  color: system-tokens.$si-sys-text-information;
+  background: system-tokens.$si-sys-background-information-subtle;
 }

package/src/styles/bootstrap/_badges.scss

@@ -1,4 +1,4 @@
-@use '../variables/semantic-tokens';
+@use '../variables/system-tokens';
 @use '../variables/spacers';
 @use '../variables/typography';
 @use './mixins/badge-text';
@@ -15,11 +15,11 @@
 
 .badge {
   display: inline-block;
-  color: semantic-tokens.$element-text-primary;
+  color: system-tokens.$si-sys-text-primary;
   padding-block: variables.$badge-padding-y;
   padding-inline: variables.$badge-padding-x;
   margin-block: 0;
-  margin-inline: map.get(spacers.$spacers, 4);
+  margin-inline: map.get(spacers.$spacers-inline, 4);
   line-height: variables.$badge-line-height;
   flex-shrink: 0;
   font-size: typography.$si-font-size-body;
@@ -41,97 +41,97 @@
   }
 
   &.bg-default {
-    background-color: semantic-tokens.$element-base-0 !important;
-    color: semantic-tokens.$element-text-primary;
-    outline: 1px solid semantic-tokens.$element-ui-4;
+    background-color: system-tokens.$si-sys-background-0 !important;
+    color: system-tokens.$si-sys-text-primary;
+    outline: 1px solid system-tokens.$si-sys-border-4;
   }
 
   &.bg-primary {
-    background-color: semantic-tokens.$element-ui-0 !important;
-    color: semantic-tokens.$element-text-inverse;
+    background-color: system-tokens.$si-sys-background-accent !important;
+    color: system-tokens.$si-sys-text-on-accent;
   }
 
   &.bg-secondary {
-    background-color: semantic-tokens.$element-ui-4 !important;
-    color: semantic-tokens.$element-text-primary;
+    background-color: system-tokens.$si-sys-background-neutral !important;
+    color: system-tokens.$si-sys-text-on-neutral;
   }
 
   &.bg-info {
-    background-color: semantic-tokens.$element-base-information !important;
-    color: semantic-tokens.$element-text-information;
+    background-color: system-tokens.$si-sys-background-information-subtle !important;
+    color: system-tokens.$si-sys-text-information;
   }
 
   &.bg-success {
-    background-color: semantic-tokens.$element-base-success !important;
-    color: semantic-tokens.$element-text-success;
+    background-color: system-tokens.$si-sys-background-success-subtle !important;
+    color: system-tokens.$si-sys-text-success;
   }
 
   &.bg-caution {
-    background-color: semantic-tokens.$element-base-caution !important;
-    color: semantic-tokens.$element-text-caution;
+    background-color: system-tokens.$si-sys-background-caution-subtle !important;
+    color: system-tokens.$si-sys-text-caution;
   }
 
   &.bg-warning {
-    background-color: semantic-tokens.$element-base-warning !important;
-    color: semantic-tokens.$element-text-warning;
+    background-color: system-tokens.$si-sys-background-warning-subtle !important;
+    color: system-tokens.$si-sys-text-warning;
   }
 
   &.bg-danger {
-    background-color: semantic-tokens.$element-base-danger !important;
-    color: semantic-tokens.$element-text-danger;
+    background-color: system-tokens.$si-sys-background-danger-subtle !important;
+    color: system-tokens.$si-sys-text-danger;
   }
 
   &.bg-critical {
-    background-color: semantic-tokens.$element-base-critical !important;
-    color: semantic-tokens.$element-text-critical;
+    background-color: system-tokens.$si-sys-background-critical-subtle !important;
+    color: system-tokens.$si-sys-text-critical;
   }
 
   &.bg-inverse {
-    background-color: semantic-tokens.$element-ui-1 !important;
-    color: semantic-tokens.$element-text-inverse;
+    background-color: system-tokens.$si-sys-background-inverse !important;
+    color: system-tokens.$si-sys-text-inverse;
   }
 
   &.bg-info-emphasis {
-    background: semantic-tokens.$element-status-information;
-    color: semantic-tokens.$element-status-information-contrast;
+    background: system-tokens.$si-sys-background-information;
+    color: system-tokens.$si-sys-text-on-information;
     @extend %badge-text-emphasis;
   }
 
   &.bg-success-emphasis {
-    background: semantic-tokens.$element-status-success;
-    color: semantic-tokens.$element-status-success-contrast;
+    background: system-tokens.$si-sys-background-success;
+    color: system-tokens.$si-sys-text-on-success;
     @extend %badge-text-emphasis;
   }
 
   &.bg-warning-emphasis {
-    background: semantic-tokens.$element-status-warning;
-    color: semantic-tokens.$element-status-warning-contrast;
+    background: system-tokens.$si-sys-background-warning;
+    color: system-tokens.$si-sys-text-on-warning;
     @extend %badge-text-emphasis;
   }
 
   &.bg-danger-emphasis {
-    background: semantic-tokens.$element-status-danger;
-    color: semantic-tokens.$element-status-danger-contrast;
+    background: system-tokens.$si-sys-background-danger;
+    color: system-tokens.$si-sys-text-on-danger;
     @extend %badge-text-emphasis;
   }
 
   &.bg-critical-emphasis {
-    background: semantic-tokens.$element-status-critical;
-    color: semantic-tokens.$element-status-critical-contrast;
+    background: system-tokens.$si-sys-background-critical;
+    color: system-tokens.$si-sys-text-on-critical;
     @extend %badge-text-emphasis;
   }
 
   &.bg-caution-emphasis {
-    background: semantic-tokens.$element-status-caution;
-    color: semantic-tokens.$element-status-caution-contrast;
+    background: system-tokens.$si-sys-background-caution;
+    color: system-tokens.$si-sys-text-on-caution;
     @extend %badge-text-emphasis;
   }
 
   &: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;
+    gap: map.get(spacers.$spacers-block, 1) map.get(spacers.$spacers-inline, 1);
+    padding-inline: map.get(spacers.$spacers-inline, 2) variables.$badge-padding-x;
   }
 }
 
@@ -146,14 +146,14 @@
     position: absolute;
     inset-block-start: 0;
     inset-inline-end: 0;
-    background-color: semantic-tokens.$element-status-danger;
+    background-color: system-tokens.$si-sys-background-danger;
   }
 }
 
 .badge-text {
   @include badge-text.badge-text();
-  background-color: semantic-tokens.$element-action-danger;
-  color: semantic-tokens.$element-action-danger-text;
+  background-color: system-tokens.$si-sys-background-danger;
+  color: system-tokens.$si-sys-text-on-danger;
   position: relative;
 }
 

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

@@ -1,6 +1,7 @@
 @use '../variables/focus';
 @use '../variables/semantic-tokens';
 @use '../variables/spacers';
+@use '../variables/system-tokens';
 @use '../variables/typography';
 @use './variables';
 
@@ -68,7 +69,7 @@
   .btn.dropdown-toggle {
     aspect-ratio: 0;
     padding-block: 0;
-    padding-inline: calc(map.get(spacers.$spacers, 1) - var(--btn-border-width, 0px));
+    padding-inline: calc(map.get(spacers.$spacers-inline, 1) - var(--btn-border-width, 0px));
     border-start-start-radius: 0;
     border-end-start-radius: 0;
 
@@ -87,23 +88,23 @@
   .btn-check + .btn,
   label.btn:has(.btn-check) {
     --btn-border-width: 1px;
-    --btn-border-color: #{semantic-tokens.$element-ui-4};
-    --btn-border-color-hover: #{semantic-tokens.$element-ui-4};
+    --btn-border-color: #{system-tokens.$si-sys-border-4};
+    --btn-border-color-hover: #{system-tokens.$si-sys-border-4};
     cursor: pointer;
     background: transparent;
-    color: semantic-tokens.$element-text-primary;
+    color: system-tokens.$si-sys-text-primary;
     transition: none;
 
     &.btn-icon {
       inline-size: auto;
-      padding-inline: map.get(spacers.$spacers, 5) - 1px;
+      padding-inline: calc(map.get(spacers.$spacers-inline, 5) - 1px);
     }
 
     // @deprecated Will be removed in a future major version, use .btn-icon instead.
     &.icon-only {
       inline-size: auto;
       min-inline-size: unset;
-      padding-inline: map.get(spacers.$spacers, 5) - 1px;
+      padding-inline: calc(map.get(spacers.$spacers-inline, 5) - 1px);
 
       .icon {
         margin-inline: 0;
@@ -113,20 +114,20 @@
 
   .btn-check + .btn:hover,
   label:has(.btn-check:not(:checked)):hover > * {
-    color: semantic-tokens.$element-ui-0-hover;
+    color: system-tokens.$si-sys-text-accent-hover;
   }
 
   .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;
+      background: system-tokens.$si-sys-background-accent-secondary-active;
+      border-color: system-tokens.$si-sys-border-accent-active;
+      color: system-tokens.$si-sys-text-accent-active;
       z-index: 2;
     }
 
     + .btn:hover,
     &:hover + .btn {
-      color: semantic-tokens.$element-text-primary;
+      color: system-tokens.$si-sys-text-primary;
     }
   }