@siemens/element-theme 49.13.0 → 49.15.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 (12) hide show
  1. package/README.md +13 -0
  2. package/package.json +1 -1
  3. package/src/styles/_accessibility.scss +4 -0
  4. package/src/styles/_root-font-size.scss +29 -0
  5. package/src/styles/bootstrap/_buttons.scss +15 -15
  6. package/src/styles/bootstrap/_reboot.scss +0 -4
  7. package/src/styles/bootstrap/_root.scss +0 -5
  8. package/src/styles/bootstrap/_tables.scss +2 -2
  9. package/src/styles/bootstrap/_variables.scss +2 -2
  10. package/src/styles/components/_application-header.scss +6 -6
  11. package/src/styles/components/_datatable.scss +1 -1
  12. package/src/theme.scss +7 -7
package/README.md ADDED
@@ -0,0 +1,13 @@
1
+ <p align="center">
2
+ <a href="https://element.siemens.io" target="_blank">
3
+ <img src="https://raw.githubusercontent.com/siemens/element/refs/heads/main/element-logo.svg" alt="Siemens Element" height="132" width="132">
4
+ </a>
5
+ </p>
6
+
7
+ <h1 align="center">@siemens/element-theme</h1>
8
+
9
+ The Element theme provides the CSS and SCSS that implement the Siemens Design Language.
10
+ It includes design tokens, typography, and color schemes with light and dark theme support.
11
+ It is used by the Element Angular components.
12
+
13
+ **Get started, explore components and read the docs at [element.siemens.io](https://element.siemens.io).**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@siemens/element-theme",
3
- "version": "49.13.0",
3
+ "version": "49.15.0",
4
4
  "description": "Element CSS theme.",
5
5
  "license": "MIT",
6
6
  "repository": {
package/src/styles/_accessibility.scss CHANGED
@@ -2,6 +2,10 @@
2
2
  --element-animations-enabled: 1;
3
3
  }
4
4
 
5
+ .disable-animations {
6
+ --element-animations-enabled: 0;
7
+ }
8
+
5
9
  @media (prefers-reduced-motion) {
6
10
  :root {
7
11
  --element-animations-enabled: 0;
package/src/styles/_root-font-size.scss ADDED
@@ -0,0 +1,29 @@
1
+ $element-root-font-size: initial !default;
2
+
3
+ html {
4
+ // defines the default with low specificity, i.e. easy overridable with :root
5
+ --element-root-font-size: #{$element-root-font-size};
6
+ }
7
+
8
+ :root {
9
+ font-size: var(--element-root-font-size);
10
+ }
11
+
12
+ // pre-defined root font size helper classes that can be applied to <html> tag
13
+
14
+ // use browser-defined root font size
15
+ .rfs-none {
16
+ --element-root-font-size: initial;
17
+ }
18
+
19
+ .rfs-16 {
20
+ --element-root-font-size: 16px;
21
+ }
22
+
23
+ .rfs-20 {
24
+ --element-root-font-size: 20px;
25
+ }
26
+
27
+ .rfs-24 {
28
+ --element-root-font-size: 24px;
29
+ }
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
@@ -26,10 +26,6 @@
26
26
  // null by default, thus nothing is generated.
27
27
 
28
28
  :root {
29
- @if variables.$font-size-root != null {
30
- font-size: var(--#{variables.$variable-prefix}root-font-size);
31
- }
32
-
33
29
  @if variables.$enable-smooth-scroll {
34
30
  @media (prefers-reduced-motion: no-preference) {
35
31
  scroll-behavior: smooth;
package/src/styles/bootstrap/_root.scss CHANGED
@@ -8,11 +8,6 @@
8
8
  // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
9
9
  --#{variables.$variable-prefix}font-sans-serif: #{meta.inspect(variables.$font-family-sans-serif)};
10
10
  --#{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
11
  --#{variables.$variable-prefix}body-font-family: #{meta.inspect(variables.$font-family-base)};
17
12
  --#{variables.$variable-prefix}body-font-size: #{variables.$font-size-base};
18
13
  --#{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/theme.scss CHANGED
@@ -1,9 +1,16 @@
1
1
  $element-theme-default: null !default;
2
2
  $element-themes: null !default;
3
3
 
4
+ // Defines the default root font size. Change to 'none' at some point.
5
+ $element-root-font-size: 16px !default;
6
+
4
7
  $_theme-default: 'element';
5
8
  $_themes: () !default;
6
9
 
10
+ @use 'styles/root-font-size' with (
11
+ $element-root-font-size: $element-root-font-size
12
+ );
13
+
7
14
  // Load Bootstrap
8
15
  @use 'styles/bootstrap';
9
16
 
@@ -41,10 +48,3 @@ html,
41
48
  body {
42
49
  block-size: 100%;
43
50
  }
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
- }