@siemens/element-theme 49.14.0 → 49.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/package.json +1 -1
  2. package/src/styles/_accessibility.scss +4 -2
  3. package/src/styles/_reboot-shadow-dom.scss +5 -0
  4. package/src/styles/_root-font-size.scss +31 -0
  5. package/src/styles/_selectors.scss +3 -0
  6. package/src/styles/_themes.scss +15 -3
  7. package/src/styles/bootstrap/_buttons.scss +15 -15
  8. package/src/styles/bootstrap/_reboot.scss +3 -6
  9. package/src/styles/bootstrap/_root.scss +2 -6
  10. package/src/styles/bootstrap/_tables.scss +2 -2
  11. package/src/styles/bootstrap/_variables.scss +2 -2
  12. package/src/styles/components/_application-header.scss +6 -6
  13. package/src/styles/components/_datatable.scss +1 -1
  14. package/src/styles/components/_drag_drop.scss +2 -1
  15. package/src/styles/components/_scrollbar.scss +2 -1
  16. package/src/theme-shadow-dom.scss +17 -0
  17. package/src/theme.scss +18 -10
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@siemens/element-theme",
3
- "version": "49.14.0",
3
+ "version": "49.16.0",
4
4
  "description": "Element CSS theme.",
5
5
  "license": "MIT",
6
6
  "repository": {
package/src/styles/_accessibility.scss CHANGED
@@ -1,4 +1,6 @@
1
- :root {
1
+ @use 'selectors';
2
+
3
+ #{selectors.$root} {
2
4
  --element-animations-enabled: 1;
3
5
  }
4
6
 
@@ -7,7 +9,7 @@
7
9
  }
8
10
 
9
11
  @media (prefers-reduced-motion) {
10
- :root {
12
+ #{selectors.$root} {
11
13
  --element-animations-enabled: 0;
12
14
  }
13
15
  }
package/src/styles/_reboot-shadow-dom.scss ADDED
@@ -0,0 +1,5 @@
1
+ // by default shadow dom inherits certain browser styles from parent DOM.
2
+ // To avoid this, we reset all styles to initial values. This is a reboot for shadow dom.
3
+ :host {
4
+ all: initial;
5
+ }
package/src/styles/_root-font-size.scss ADDED
@@ -0,0 +1,31 @@
1
+ @use 'selectors';
2
+
3
+ $element-root-font-size: initial !default;
4
+
5
+ #{selectors.$document} {
6
+ // defines the default with low specificity, i.e. easy overridable with :root
7
+ --element-root-font-size: #{$element-root-font-size};
8
+ }
9
+
10
+ #{selectors.$root} {
11
+ font-size: var(--element-root-font-size);
12
+ }
13
+
14
+ // pre-defined root font size helper classes that can be applied to <html> tag
15
+
16
+ // use browser-defined root font size
17
+ .rfs-none {
18
+ --element-root-font-size: initial;
19
+ }
20
+
21
+ .rfs-16 {
22
+ --element-root-font-size: 16px;
23
+ }
24
+
25
+ .rfs-20 {
26
+ --element-root-font-size: 20px;
27
+ }
28
+
29
+ .rfs-24 {
30
+ --element-root-font-size: 24px;
31
+ }
package/src/styles/_selectors.scss ADDED
@@ -0,0 +1,3 @@
1
+ $root: ':root' !default;
2
+ $document: 'html' !default;
3
+ $body: 'body' !default;
package/src/styles/_themes.scss CHANGED
@@ -2,8 +2,9 @@
2
2
 
3
3
  $_theme-default: 'element';
4
4
  $_themes: () !default;
5
+ $_root-selector: ':root';
5
6
 
6
- @mixin configure($defaultTheme: null, $themes: ()) {
7
+ @mixin configure($defaultTheme: null, $themes: (), $rootSelector: null) {
7
8
  @if $defaultTheme {
8
9
  $_theme-default: $defaultTheme !global;
9
10
  }
@@ -11,11 +12,17 @@ $_themes: () !default;
11
12
  @if $themes {
12
13
  $_themes: $themes !global;
13
14
  }
15
+
16
+ @if $rootSelector {
17
+ $_root-selector: $rootSelector !global;
18
+ }
14
19
  }
15
20
 
16
- @mixin make-theme($vars, $name, $dark: false, $force-generate: false) {
21
+ @mixin make-theme($vars, $name, $dark: false, $force-generate: false, $root-selector: null) {
17
22
  $theme-name: '';
18
23
  $mode: '';
24
+ $actual-root-selector: $root-selector or $_root-selector;
25
+ $selector: '';
19
26
 
20
27
  @if list.index($_themes, $name) or $name == $_theme-default or $force-generate {
21
28
  @if $name != $_theme-default {
@@ -26,7 +33,12 @@ $_themes: () !default;
26
33
  $mode: '.app--dark';
27
34
  }
28
35
 
29
- :root#{$theme-name}#{$mode} {
36
+ $selector: '#{$actual-root-selector}#{$theme-name}#{$mode}';
37
+ @if $actual-root-selector == ':host' and ($theme-name != '' or $mode != '') {
38
+ $selector: ':host(#{$theme-name}#{$mode})';
39
+ }
40
+
41
+ #{$selector} {
30
42
  @each $token, $val in $vars {
31
43
  --#{$token}: #{$val};
32
44
  }
package/src/styles/bootstrap/_buttons.scss CHANGED
@@ -149,8 +149,8 @@ button {
149
149
  --btn-color-hover: #{semantic-tokens.$element-action-warning-text};
150
150
  --btn-color-active: #{semantic-tokens.$element-action-warning-text};
151
151
  --btn-border-color: #{semantic-tokens.$element-action-secondary-warning};
152
- --btn-border-color-hover: #{semantic-tokens.$element-action-warning-hover};
153
- --btn-border-color-active: #{semantic-tokens.$element-action-warning-active};
152
+ --btn-border-color-hover: transparent;
153
+ --btn-border-color-active: transparent;
154
154
  }
155
155
 
156
156
  .btn-secondary-danger,
@@ -161,8 +161,8 @@ button {
161
161
  --btn-color-hover: #{semantic-tokens.$element-action-danger-text};
162
162
  --btn-color-active: #{semantic-tokens.$element-action-danger-text};
163
163
  --btn-border-color: #{semantic-tokens.$element-action-secondary-danger};
164
- --btn-border-color-hover: #{semantic-tokens.$element-action-danger-hover};
165
- --btn-border-color-active: #{semantic-tokens.$element-action-danger-active};
164
+ --btn-border-color-hover: transparent;
165
+ --btn-border-color-active: transparent;
166
166
  }
167
167
 
168
168
  .btn-secondary-ghost,
@@ -263,29 +263,29 @@ button {
263
263
  --btn-color: #{bootstrap-variables.$input-color};
264
264
  --btn-color-hover: #{bootstrap-variables.$input-color};
265
265
  --btn-color-active: #{bootstrap-variables.$input-color};
266
- --btn-border-width: 1px;
267
- --btn-border-color: #{semantic-tokens.$element-ui-2};
268
- --btn-border-color-hover: #{semantic-tokens.$element-ui-1};
269
- --btn-border-color-active: #{semantic-tokens.$element-ui-1};
266
+ --btn-border-width: #{bootstrap-variables.$input-border-width};
267
+ --btn-border-color: #{bootstrap-variables.$input-border-color};
268
+ --btn-border-color-hover: #{bootstrap-variables.$input-focus-border-color};
269
+ --btn-border-color-active: #{bootstrap-variables.$input-focus-border-color};
270
270
 
271
271
  @include typography.si-font(
272
- typography.$si-font-size-body,
273
- typography.$si-line-height-body,
274
- typography.$si-font-weight-body
272
+ bootstrap-variables.$input-font-size,
273
+ bootstrap-variables.$input-line-height,
274
+ bootstrap-variables.$input-font-weight
275
275
  );
276
276
  padding-block: bootstrap-variables.$input-padding-y;
277
- padding-inline: bootstrap-variables.$btn-padding-x - bootstrap-variables.$input-border-width;
277
+ padding-inline: bootstrap-variables.$input-padding-x;
278
278
 
279
279
  border-radius: bootstrap-variables.$input-border-radius;
280
280
  justify-content: flex-start;
281
281
 
282
282
  &:is(:disabled, .disabled) {
283
- --btn-border-color: #{semantic-tokens.$element-ui-3};
284
- --btn-color: #{semantic-tokens.$element-text-disabled};
283
+ --btn-border-color: #{bootstrap-variables.$input-disabled-border-color};
284
+ --btn-color: #{bootstrap-variables.$input-disabled-color};
285
285
  opacity: unset;
286
286
  }
287
287
 
288
288
  &:focus {
289
- --btn-border-color: #{semantic-tokens.$element-ui-1};
289
+ --btn-border-color: #{bootstrap-variables.$input-focus-border-color};
290
290
  }
291
291
  }
package/src/styles/bootstrap/_reboot.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use '../variables/typography';
2
+ @use '../selectors';
2
3
  @use './variables';
3
4
 
4
5
  // stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
@@ -25,11 +26,7 @@
25
26
  // Ability to the value of the root font sizes, affecting the value of `rem`.
26
27
  // null by default, thus nothing is generated.
27
28
 
28
- :root {
29
- @if variables.$font-size-root != null {
30
- font-size: var(--#{variables.$variable-prefix}root-font-size);
31
- }
32
-
29
+ #{selectors.$root} {
33
30
  @if variables.$enable-smooth-scroll {
34
31
  @media (prefers-reduced-motion: no-preference) {
35
32
  scroll-behavior: smooth;
@@ -45,7 +42,7 @@
45
42
  // 4. Change the default tap highlight to be completely transparent in iOS.
46
43
 
47
44
  // scss-docs-start reboot-body-rules
48
- body {
45
+ #{selectors.$body} {
49
46
  margin: 0; // 1
50
47
  font-family: var(--#{variables.$variable-prefix}body-font-family);
51
48
  font-size: var(--#{variables.$variable-prefix}body-font-size);
package/src/styles/bootstrap/_root.scss CHANGED
@@ -1,18 +1,14 @@
1
1
  @use './variables';
2
+ @use '../selectors';
2
3
 
3
4
  @use 'sass:meta';
4
5
 
5
6
  // this is _root.scss without the automatic `to-rgb` brain damage
6
- :root {
7
+ #{selectors.$root} {
7
8
  // Note: Use `inspect` for lists so that quoted items keep the quotes.
8
9
  // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
9
10
  --#{variables.$variable-prefix}font-sans-serif: #{meta.inspect(variables.$font-family-sans-serif)};
10
11
  --#{variables.$variable-prefix}font-monospace: #{meta.inspect(variables.$font-family-monospace)};
11
-
12
- // Root and body
13
- @if variables.$font-size-root != null {
14
- --#{variables.$variable-prefix}root-font-size: #{variables.$font-size-root};
15
- }
16
12
  --#{variables.$variable-prefix}body-font-family: #{meta.inspect(variables.$font-family-base)};
17
13
  --#{variables.$variable-prefix}body-font-size: #{variables.$font-size-base};
18
14
  --#{variables.$variable-prefix}body-font-weight: #{variables.$font-weight-base};
package/src/styles/bootstrap/_tables.scss CHANGED
@@ -96,7 +96,7 @@
96
96
  }
97
97
 
98
98
  :is(th, td) {
99
- block-size: 64px;
99
+ block-size: calc(2lh + 2 * map.get(spacers.$spacers, 2) + 2 * map.get(spacers.$spacers, 5));
100
100
  }
101
101
  }
102
102
  }
@@ -118,7 +118,7 @@
118
118
 
119
119
  tbody {
120
120
  :is(th, td) {
121
- block-size: 48px;
121
+ block-size: calc(2lh + 2 * map.get(spacers.$spacers, 4));
122
122
  }
123
123
  }
124
124
  }
package/src/styles/bootstrap/_variables.scss CHANGED
@@ -160,9 +160,7 @@ $font-family-monospace:
160
160
  $font-family-base: $font-family-sans-serif !default;
161
161
  $font-family-code: $font-family-monospace !default;
162
162
 
163
- // $font-size-root effects the value of `rem`, which is used for as well font sizes, paddings and margins
164
163
  // $font-size-base effects the font size of the body text
165
- $font-size-root: null !default;
166
164
  $font-size-base: typography.$si-font-size-body !default;
167
165
  $font-size-lg: typography.$si-font-size-body-lg !default;
168
166
  $font-size-sm: typography.$si-font-size-caption !default;
@@ -337,10 +335,12 @@ $input-line-height: typography.$si-line-height-body-rem !default;
337
335
 
338
336
  $input-bg: semantic-tokens.$element-base-1 !default;
339
337
  $input-disabled-bg: semantic-tokens.$element-base-1 !default;
338
+ $input-disabled-color: semantic-tokens.$element-text-disabled !default;
340
339
  $input-disabled-border-color: semantic-tokens.$element-ui-4 !default;
341
340
 
342
341
  $input-color: semantic-tokens.$element-text-primary !default;
343
342
  $input-border-color: semantic-tokens.$element-ui-2 !default;
343
+ $input-focus-border-color: semantic-tokens.$element-ui-1 !default;
344
344
  $input-border-width: $border-width !default;
345
345
  $input-box-shadow: $box-shadow-inset !default;
346
346
 
package/src/styles/components/_application-header.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  @use '../bootstrap/mixins/breakpoints';
2
2
  @use '../bootstrap/variables' as bootstrap-variables;
3
- @use '../variables';
3
+ @use '../variables/si-vars';
4
4
  @use '../variables/elevation';
5
5
  @use '../variables/semantic-tokens';
6
6
  @use '../variables/spacers';
@@ -12,8 +12,8 @@
12
12
  .has-application-header,
13
13
  .has-navbar-fixed-top {
14
14
  padding-block-start: calc(
15
- variables.$si-application-header-height + variables.$si-titlebar-spacing +
16
- variables.$si-system-banner-spacing
15
+ si-vars.$si-application-header-height + si-vars.$si-titlebar-spacing +
16
+ si-vars.$si-system-banner-spacing
17
17
  );
18
18
  }
19
19
 
@@ -27,7 +27,7 @@
27
27
  );
28
28
  z-index: zindex.$zindex-application-header;
29
29
  background: semantic-tokens.$element-base-1;
30
- min-block-size: variables.$si-application-header-height;
30
+ min-block-size: si-vars.$si-application-header-height;
31
31
  align-items: stretch;
32
32
  border-block-end: 1px solid semantic-tokens.$element-ui-4;
33
33
 
@@ -152,7 +152,7 @@
152
152
  font-size: typography.$si-font-size-h4;
153
153
  line-height: typography.$si-line-height-h4;
154
154
  font-weight: typography.$si-font-weight-h4;
155
- padding-block: 13px;
155
+ padding-block: map.get(spacers.$spacers, 5);
156
156
  padding-inline: map.get(spacers.$spacers, 5);
157
157
  background: none;
158
158
  box-shadow: none;
@@ -160,7 +160,7 @@
160
160
  white-space: nowrap;
161
161
 
162
162
  .icon-lg {
163
- margin-block: -3px;
163
+ margin-block: -0.125rem;
164
164
 
165
165
  ~ .item-title {
166
166
  padding-inline-start: map.get(spacers.$spacers, 5);
package/src/styles/components/_datatable.scss CHANGED
@@ -244,7 +244,7 @@ $datatable-ghost-cell-strip-radius: 0 !default;
244
244
  }
245
245
 
246
246
  .datatable-header-cell:focus-visible {
247
- @include focus.make-outline-focus();
247
+ @include focus.make-outline-focus-inside();
248
248
  }
249
249
  }
250
250
 
package/src/styles/components/_drag_drop.scss CHANGED
@@ -1,8 +1,9 @@
1
1
  @use '../variables';
2
+ @use '../selectors';
2
3
 
3
4
  /* stylelint-disable declaration-no-important */
4
5
 
5
- body:has(.cdk-drag-preview, .ui-draggable-dragging) {
6
+ #{selectors.$body}:has(.cdk-drag-preview, .ui-draggable-dragging) {
6
7
  cursor: grabbing !important;
7
8
 
8
9
  .cdk-drop-list:not(.cdk-drop-list-dragging) {
package/src/styles/components/_scrollbar.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  @use '../variables/semantic-tokens';
2
+ @use '../selectors';
2
3
 
3
- html {
4
+ #{selectors.$document} {
4
5
  scrollbar-color: color-mix(
5
6
  in srgb,
6
7
  semantic-tokens.$element-ui-2 60%,
package/src/theme-shadow-dom.scss ADDED
@@ -0,0 +1,17 @@
1
+ /**
2
+ * Uses :host selector to apply styles to the shadow DOM root element.
3
+ *
4
+ * @see https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM
5
+ **/
6
+ $element-theme-default: null !default;
7
+ $element-themes: null !default;
8
+
9
+ @use 'styles/reboot-shadow-dom';
10
+
11
+ @use 'theme' with (
12
+ $element-theme-default: $element-theme-default,
13
+ $element-themes: $element-themes,
14
+ $element-theme-root-selector: ':host',
15
+ $element-theme-document-selector: ':host',
16
+ $element-theme-body-selector: ':host'
17
+ );
package/src/theme.scss CHANGED
@@ -1,9 +1,24 @@
1
1
  $element-theme-default: null !default;
2
2
  $element-themes: null !default;
3
+ $element-theme-root-selector: ':root' !default;
4
+ $element-theme-document-selector: 'html' !default;
5
+ $element-theme-body-selector: 'body' !default;
6
+
7
+ // Defines the default root font size. Change to 'none' at some point.
8
+ $element-root-font-size: 16px !default;
3
9
 
4
10
  $_theme-default: 'element';
5
11
  $_themes: () !default;
6
12
 
13
+ @use 'styles/selectors' with (
14
+ $root: $element-theme-root-selector,
15
+ $document: $element-theme-document-selector,
16
+ $body: $element-theme-body-selector
17
+ );
18
+ @use 'styles/root-font-size' with (
19
+ $element-root-font-size: $element-root-font-size
20
+ );
21
+
7
22
  // Load Bootstrap
8
23
  @use 'styles/bootstrap';
9
24
 
@@ -33,18 +48,11 @@ $_themes: () !default;
33
48
  @use 'styles/themes';
34
49
  @use 'theme/theme-element';
35
50
 
36
- @include themes.configure($element-theme-default, $element-themes);
51
+ @include themes.configure($element-theme-default, $element-themes, $element-theme-root-selector);
37
52
  @include themes.make-theme(theme-element.$theme-element-light, 'element');
38
53
  @include themes.make-theme(theme-element.$theme-element-dark, 'element', true);
39
54
 
40
- html,
41
- body {
55
+ #{selectors.$document},
56
+ #{selectors.$body} {
42
57
  block-size: 100%;
43
58
  }
44
-
45
- // Define what 1rem actually means. Everything here assumes 16px.
46
- // When the whole thing is properly done, carefully mixing (r)em and px values,
47
- // this can be removed to allow the user's setting.
48
- html {
49
- font-size: 16px;
50
- }