@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.
- package/package.json +1 -1
- package/src/styles/_accessibility.scss +4 -2
- package/src/styles/_reboot-shadow-dom.scss +5 -0
- package/src/styles/_root-font-size.scss +31 -0
- package/src/styles/_selectors.scss +3 -0
- package/src/styles/_themes.scss +15 -3
- package/src/styles/bootstrap/_buttons.scss +15 -15
- package/src/styles/bootstrap/_reboot.scss +3 -6
- package/src/styles/bootstrap/_root.scss +2 -6
- package/src/styles/bootstrap/_tables.scss +2 -2
- package/src/styles/bootstrap/_variables.scss +2 -2
- package/src/styles/components/_application-header.scss +6 -6
- package/src/styles/components/_datatable.scss +1 -1
- package/src/styles/components/_drag_drop.scss +2 -1
- package/src/styles/components/_scrollbar.scss +2 -1
- package/src/theme-shadow-dom.scss +17 -0
- package/src/theme.scss +18 -10
package/package.json
CHANGED
|
@@ -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/_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
|
}
|
|
@@ -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:
|
|
153
|
-
--btn-border-color-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:
|
|
165
|
-
--btn-border-color-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:
|
|
267
|
-
--btn-border-color: #{
|
|
268
|
-
--btn-border-color-hover: #{
|
|
269
|
-
--btn-border-color-active: #{
|
|
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
|
-
|
|
273
|
-
|
|
274
|
-
|
|
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.$
|
|
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: #{
|
|
284
|
-
--btn-color: #{
|
|
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: #{
|
|
289
|
+
--btn-border-color: #{bootstrap-variables.$input-focus-border-color};
|
|
290
290
|
}
|
|
291
291
|
}
|
|
@@ -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
|
-
|
|
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);
|
|
@@ -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
|
-
|
|
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};
|
|
@@ -96,7 +96,7 @@
|
|
|
96
96
|
}
|
|
97
97
|
|
|
98
98
|
:is(th, td) {
|
|
99
|
-
block-size:
|
|
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:
|
|
121
|
+
block-size: calc(2lh + 2 * map.get(spacers.$spacers, 4));
|
|
122
122
|
}
|
|
123
123
|
}
|
|
124
124
|
}
|
|
@@ -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
|
|
|
@@ -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
|
-
|
|
16
|
-
|
|
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:
|
|
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:
|
|
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: -
|
|
163
|
+
margin-block: -0.125rem;
|
|
164
164
|
|
|
165
165
|
~ .item-title {
|
|
166
166
|
padding-inline-start: map.get(spacers.$spacers, 5);
|
|
@@ -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) {
|
|
@@ -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
|
-
|
|
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
|
-
}
|