@siemens/element-theme 49.15.0 → 49.16.1

package/package.json

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

package/src/styles/_accessibility.scss

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

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/bootstrap/_reboot.scss

@@ -1,4 +1,5 @@
 @use '../variables/typography';
+@use '../selectors';
 @use './variables';
 
 // stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
@@ -25,7 +26,7 @@
 // Ability to the value of the root font sizes, affecting the value of `rem`.
 // null by default, thus nothing is generated.
 
-:root {
+#{selectors.$root} {
   @if variables.$enable-smooth-scroll {
     @media (prefers-reduced-motion: no-preference) {
       scroll-behavior: smooth;
@@ -41,7 +42,7 @@
 // 4. Change the default tap highlight to be completely transparent in iOS.
 
 // scss-docs-start reboot-body-rules
-body {
+#{selectors.$body} {
   margin: 0; // 1
   font-family: var(--#{variables.$variable-prefix}body-font-family);
   font-size: var(--#{variables.$variable-prefix}body-font-size);

package/src/styles/bootstrap/_root.scss

@@ -1,9 +1,10 @@
 @use './variables';
+@use '../selectors';
 
 @use 'sass:meta';
 
 // this is _root.scss without the automatic `to-rgb` brain damage
-:root {
+#{selectors.$root} {
   // Note: Use `inspect` for lists so that quoted items keep the quotes.
   // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
   --#{variables.$variable-prefix}font-sans-serif: #{meta.inspect(variables.$font-family-sans-serif)};

package/src/styles/components/_drag_drop.scss

@@ -1,8 +1,9 @@
 @use '../variables';
+@use '../selectors';
 
 /* stylelint-disable declaration-no-important */
 
-body:has(.cdk-drag-preview, .ui-draggable-dragging) {
+#{selectors.$body}:has(.cdk-drag-preview, .ui-draggable-dragging) {
   cursor: grabbing !important;
 
   .cdk-drop-list:not(.cdk-drop-list-dragging) {

package/src/styles/components/_scrollbar.scss

@@ -1,6 +1,7 @@
 @use '../variables/semantic-tokens';
+@use '../selectors';
 
-html {
+#{selectors.$document} {
   scrollbar-color: color-mix(
       in srgb,
       semantic-tokens.$element-ui-2 60%,

package/src/theme-shadow-dom.scss

@@ -0,0 +1,17 @@
+/**
+  * Uses :host selector to apply styles to the shadow DOM root element.
+  *
+  * @see https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM
+**/
+$element-theme-default: null !default;
+$element-themes: null !default;
+
+@use 'styles/reboot-shadow-dom';
+
+@use 'theme' with (
+  $element-theme-default: $element-theme-default,
+  $element-themes: $element-themes,
+  $element-theme-root-selector: ':host',
+  $element-theme-document-selector: ':host',
+  $element-theme-body-selector: ':host'
+);

package/src/theme.scss

@@ -1,5 +1,8 @@
 $element-theme-default: null !default;
 $element-themes: null !default;
+$element-theme-root-selector: ':root' !default;
+$element-theme-document-selector: 'html' !default;
+$element-theme-body-selector: 'body' !default;
 
 // Defines the default root font size. Change to 'none' at some point.
 $element-root-font-size: 16px !default;
@@ -7,6 +10,11 @@ $element-root-font-size: 16px !default;
 $_theme-default: 'element';
 $_themes: () !default;
 
+@use 'styles/selectors' with (
+  $root: $element-theme-root-selector,
+  $document: $element-theme-document-selector,
+  $body: $element-theme-body-selector
+);
 @use 'styles/root-font-size' with (
   $element-root-font-size: $element-root-font-size
 );
@@ -40,11 +48,11 @@ $_themes: () !default;
 @use 'styles/themes';
 @use 'theme/theme-element';
 
-@include themes.configure($element-theme-default, $element-themes);
+@include themes.configure($element-theme-default, $element-themes, $element-theme-root-selector);
 @include themes.make-theme(theme-element.$theme-element-light, 'element');
 @include themes.make-theme(theme-element.$theme-element-dark, 'element', true);
 
-html,
-body {
+#{selectors.$document},
+#{selectors.$body} {
   block-size: 100%;
 }