@siemens/element-theme 47.7.0 → 48.0.0-next.1

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 (11) hide show
  1. package/package.json +4 -1
  2. package/src/styles/bootstrap/_badges.scss +13 -2
  3. package/src/styles/bootstrap/_card.scss +3 -2
  4. package/src/styles/bootstrap/_nav.scss +1 -3
  5. package/src/styles/bootstrap/_utilities.scss +1 -0
  6. package/src/styles/bootstrap/forms/_form-check.scss +12 -2
  7. package/src/styles/components/_datatable.scss +12 -3
  8. package/src/styles/components/_switch.scss +5 -5
  9. package/src/styles/variables/_utilities.scss +1 -1
  10. package/src/theme/_base-colors.scss +2 -0
  11. package/src/theme/_theme-element.scss +10 -6
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@siemens/element-theme",
3
- "version": "47.7.0",
3
+ "version": "48.0.0-next.1",
4
4
  "description": "Element CSS theme.",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -16,6 +16,9 @@
16
16
  "publishConfig": {
17
17
  "access": "public"
18
18
  },
19
+ "scripts": {
20
+ "postversion": "node ../../postversion.js"
21
+ },
19
22
  "keywords": [
20
23
  "siemens",
21
24
  "theme",
package/src/styles/bootstrap/_badges.scss CHANGED
@@ -7,6 +7,11 @@
7
7
 
8
8
  // stylelint-disable declaration-no-important
9
9
 
10
+ %badge-text-emphasis {
11
+ font-size: typography.$si-font-size-title-2;
12
+ font-weight: typography.$si-font-weight-title-2;
13
+ }
14
+
10
15
  .badge {
11
16
  display: inline-block;
12
17
  color: semantic-tokens.$element-text-primary;
@@ -17,8 +22,8 @@
17
22
  block-size: map.get(spacers.$spacers, 8);
18
23
  line-height: map.get(spacers.$spacers, 8);
19
24
  flex-shrink: 0;
20
- font-size: typography.$si-font-size-title-2;
21
- font-weight: typography.$si-font-weight-title-2;
25
+ font-size: typography.$si-font-size-body-2;
26
+ font-weight: typography.$si-font-weight-body-2;
22
27
  max-inline-size: 196px;
23
28
  min-inline-size: map.get(spacers.$spacers, 8);
24
29
  text-overflow: ellipsis;
@@ -86,31 +91,37 @@
86
91
  &.bg-info-emphasis {
87
92
  background: semantic-tokens.$element-status-information;
88
93
  color: semantic-tokens.$element-status-information-contrast;
94
+ @extend %badge-text-emphasis;
89
95
  }
90
96
 
91
97
  &.bg-success-emphasis {
92
98
  background: semantic-tokens.$element-status-success;
93
99
  color: semantic-tokens.$element-status-success-contrast;
100
+ @extend %badge-text-emphasis;
94
101
  }
95
102
 
96
103
  &.bg-warning-emphasis {
97
104
  background: semantic-tokens.$element-status-warning;
98
105
  color: semantic-tokens.$element-status-warning-contrast;
106
+ @extend %badge-text-emphasis;
99
107
  }
100
108
 
101
109
  &.bg-danger-emphasis {
102
110
  background: semantic-tokens.$element-status-danger;
103
111
  color: semantic-tokens.$element-status-danger-contrast;
112
+ @extend %badge-text-emphasis;
104
113
  }
105
114
 
106
115
  &.bg-critical-emphasis {
107
116
  background: semantic-tokens.$element-status-critical;
108
117
  color: semantic-tokens.$element-status-critical-contrast;
118
+ @extend %badge-text-emphasis;
109
119
  }
110
120
 
111
121
  &.bg-caution-emphasis {
112
122
  background: semantic-tokens.$element-status-caution;
113
123
  color: semantic-tokens.$element-status-caution-contrast;
124
+ @extend %badge-text-emphasis;
114
125
  }
115
126
 
116
127
  .icon {
package/src/styles/bootstrap/_card.scss CHANGED
@@ -88,10 +88,11 @@
88
88
  margin-block-end: 0; // Removes the default margin-bottom of <hN>
89
89
  color: variables.$card-cap-color;
90
90
  background-color: variables.$card-cap-bg;
91
+ line-height: typography.$si-font-size-title-2;
91
92
 
92
- &,
93
93
  .icon {
94
- line-height: typography.$si-font-size-title-2;
94
+ // The icon would be 8px too high without this.
95
+ margin-block: - map.get(spacers.$spacers, 2);
95
96
  }
96
97
 
97
98
  + .card-body {
package/src/styles/bootstrap/_nav.scss CHANGED
@@ -81,9 +81,7 @@ $nav-tabs-min-width: 100px;
81
81
  cursor: pointer;
82
82
 
83
83
  .badge {
84
- margin-inline-start: map.get(spacers.$spacers, 1);
85
- margin-block-start: -7px;
86
- flex-shrink: 0;
84
+ margin-inline-end: 0;
87
85
  }
88
86
 
89
87
  &.active {
package/src/styles/bootstrap/_utilities.scss CHANGED
@@ -67,6 +67,7 @@ $background-colors: (
67
67
  'base-1': semantic-tokens.$element-base-1,
68
68
  'base-2': semantic-tokens.$element-base-2,
69
69
  'base-3': semantic-tokens.$element-base-3,
70
+ 'base-4': semantic-tokens.$element-base-4,
70
71
  'base-success': semantic-tokens.$element-base-success,
71
72
  'base-info': semantic-tokens.$element-base-information,
72
73
  'base-caution': semantic-tokens.$element-base-caution,
package/src/styles/bootstrap/forms/_form-check.scss CHANGED
@@ -16,17 +16,27 @@ $form-check-padding-x: map.get(spacers.$spacers, 2);
16
16
 
17
17
  $form-check-label-start: $form-check-size + map.get(spacers.$spacers, 4);
18
18
 
19
+ %form-check-spacing {
20
+ .form-check-input {
21
+ margin-inline-start: -1 * $form-check-label-start;
22
+ }
23
+ }
24
+
19
25
  .form-check {
20
26
  padding-block: map.get(spacers.$spacers, 1);
27
+ padding-inline-start: map.get(spacers.$spacers, 8);
28
+
29
+ @extend %form-check-spacing;
21
30
 
22
31
  :is(.valid-feedback, .invalid-feedback) {
23
- margin-inline-start: $form-check-label-start;
32
+ margin-inline-start: 0;
24
33
  }
25
34
  }
26
35
 
27
36
  .form-check-inline {
28
37
  display: inline-block;
29
38
  margin-inline-end: variables.$form-check-inline-margin-end;
39
+ @extend %form-check-spacing;
30
40
  }
31
41
 
32
42
  %form-check-base {
@@ -162,7 +172,7 @@ $form-check-label-start: $form-check-size + map.get(spacers.$spacers, 4);
162
172
  %form-check-label {
163
173
  display: inline-block;
164
174
  position: relative;
165
- padding-inline: map.get(spacers.$spacers, 4) $form-check-padding-x;
175
+ padding-inline-end: $form-check-padding-x;
166
176
  color: semantic-tokens.$element-text-primary;
167
177
  }
168
178
 
package/src/styles/components/_datatable.scss CHANGED
@@ -57,7 +57,7 @@ $datatable-ghost-cell-strip-radius: 0 !default;
57
57
  .checkbox-selection
58
58
  ) {
59
59
  .datatable-row-wrapper {
60
- &:hover {
60
+ .datatable-body-row:hover {
61
61
  background-color: variables.$table-hover-bg;
62
62
  }
63
63
  }
@@ -232,7 +232,8 @@ $datatable-ghost-cell-strip-radius: 0 !default;
232
232
  inline-size: 100%;
233
233
  }
234
234
 
235
- .datatable-body-row {
235
+ .datatable-body-row,
236
+ .datatable-group-header {
236
237
  border-block-end: 1px solid $datatable-header-border-color;
237
238
  inline-size: 100% !important; // stylelint-disable-line declaration-no-important
238
239
  min-inline-size: fit-content;
@@ -243,7 +244,7 @@ $datatable-ghost-cell-strip-radius: 0 !default;
243
244
  inline-size: 100%;
244
245
  }
245
246
 
246
- &:hover:not(.active) {
247
+ &.datatable-body-row:hover:not(.active) {
247
248
  background-color: variables.$table-hover-bg;
248
249
 
249
250
  :is(.datatable-row-left, .datatable-row-right) {
@@ -256,6 +257,14 @@ $datatable-ghost-cell-strip-radius: 0 !default;
256
257
  }
257
258
  }
258
259
 
260
+ .datatable-group-header {
261
+ .datatable-group-cell {
262
+ display: flex;
263
+ align-items: center;
264
+ padding-inline-start: map.get(spacers.$spacers, 6);
265
+ }
266
+ }
267
+
259
268
  .datatable-body-cell,
260
269
  .datatable-body-row {
261
270
  &:focus-visible {
package/src/styles/components/_switch.scss CHANGED
@@ -3,6 +3,8 @@
3
3
  @use 'sass:map';
4
4
 
5
5
  $si-switch-size: 20px !default;
6
+ $si-switch-inline-size: calc(2 * #{$si-switch-size});
7
+ $si-switch-inline-spacing: calc($si-switch-inline-size + map.get(variables.$spacers, 4));
6
8
  $si-switch-background-off-color: variables.$element-ui-4 !default;
7
9
  $si-switch-background-on-color: variables.$element-ui-0 !default;
8
10
  $si-switch-background-disabled-color: variables.$element-ui-3 !default;
@@ -15,16 +17,14 @@ $si-switch-knob-size: calc(#{$si-switch-size} - 2 * #{$si-switch-slider-margin})
15
17
 
16
18
  .form-switch {
17
19
  padding-block: map.get(variables.$spacers, 1);
20
+ padding-inline-start: $si-switch-inline-spacing;
18
21
 
19
22
  .form-check-input {
20
23
  cursor: pointer;
21
- position: relative;
22
24
  inset: 0;
23
- margin-inline: 0 map.get(variables.$spacers, 3);
24
25
  margin-block: - map.get(variables.$spacers, 1);
25
- inline-size: calc(
26
- 2 * #{$si-switch-size}
27
- ) !important; // stylelint-disable-line declaration-no-important
26
+ margin-inline-start: calc(-1 * $si-switch-inline-spacing);
27
+ inline-size: $si-switch-inline-size !important; // stylelint-disable-line declaration-no-important
28
28
  block-size: #{$si-switch-size} !important; // stylelint-disable-line declaration-no-important
29
29
  background-color: $si-switch-background-off-color;
30
30
  transition: $si-switch-transition-length;
package/src/styles/variables/_utilities.scss CHANGED
@@ -557,7 +557,7 @@ $utilities: (
557
557
  )
558
558
  ),
559
559
  'rounded-end': (
560
- property: border-end-start-radius border-end-end-radius,
560
+ property: border-start-end-radius border-end-end-radius,
561
561
  class: rounded-end,
562
562
  values: (
563
563
  null: variables.$border-radius
package/src/theme/_base-colors.scss CHANGED
@@ -6,6 +6,7 @@ $color-interactive-blue-500: #7353e5;
6
6
  $color-interactive-blue-700: #4c3fbf;
7
7
  $color-interactive-blue-900: #553ba3;
8
8
 
9
+ $color-experimental-deep-blue-25: #f7f7f7; // EXPERIMENTAL: Do not use
9
10
  $color-deep-blue-50: #eeeeee;
10
11
  $color-deep-blue-100: #e9e9e9;
11
12
  $color-deep-blue-200: #d4d4d4;
@@ -15,6 +16,7 @@ $color-deep-blue-500: #999999;
15
16
  $color-deep-blue-600: #4e4e4e;
16
17
  $color-deep-blue-700: #383838;
17
18
  $color-deep-blue-800: #1a1a1a;
19
+ $color-experimental-deep-blue-850: #3a3a3a; // EXPERIMENTAL: Do not use
18
20
  $color-deep-blue-900: #000000;
19
21
 
20
22
  $color-white: #ffffff;
package/src/theme/_theme-element.scss CHANGED
@@ -40,9 +40,11 @@ $theme-element-light: (
40
40
  base-caution: base.$color-yellow-100,
41
41
  base-warning: base.$color-orange-100,
42
42
  base-danger: base.$color-red-100,
43
- base-critical: base.$color-red-100,
43
+ base-critical: data.$color-data-orchid-100,
44
44
  base-translucent-1: rgba(base.$color-black, 0.3),
45
45
  base-translucent-2: rgba(base.$color-deep-blue-900, 0.88),
46
+ // EXPERIMENTAL: Do not use
47
+ base-input-experimental: base.$color-experimental-deep-blue-25,
46
48
  action-primary: base.$color-interactive-blue-500,
47
49
  action-primary-hover: base.$color-teal,
48
50
  action-primary-text: base.$color-white,
@@ -72,7 +74,7 @@ $theme-element-light: (
72
74
  text-caution: base.$color-yellow-900,
73
75
  text-warning: base.$color-orange-900,
74
76
  text-danger: base.$color-red-700,
75
- text-critical: base.$color-red-700,
77
+ text-critical: data.$color-data-orchid-700,
76
78
 
77
79
  status-information: base.$color-blue-500,
78
80
  status-information-contrast: base.$color-white,
@@ -84,7 +86,7 @@ $theme-element-light: (
84
86
  status-warning-contrast: base.$color-white,
85
87
  status-danger: base.$color-red-500,
86
88
  status-danger-contrast: base.$color-white,
87
- status-critical: base.$color-red-900,
89
+ status-critical: data.$color-data-orchid-500,
88
90
  status-critical-contrast: base.$color-white,
89
91
 
90
92
  focus-default: base.$color-focus,
@@ -226,9 +228,11 @@ $theme-element-dark: (
226
228
  base-caution: base.$color-yellow-900,
227
229
  base-warning: base.$color-orange-900,
228
230
  base-danger: base.$color-red-900,
229
- base-critical: base.$color-red-900,
231
+ base-critical: data.$color-data-orchid-700,
230
232
  base-translucent-1: rgba(base.$color-black, 0.7),
231
233
  base-translucent-2: rgba(base.$color-white, 0.88),
234
+ // EXPERIMENTAL: Do not use
235
+ base-input-experimental: base.$color-experimental-deep-blue-850,
232
236
  action-primary: base.$color-interactive-coral,
233
237
  action-primary-hover: base.$color-bold-green,
234
238
  action-primary-text: base.$color-deep-blue-900,
@@ -258,7 +262,7 @@ $theme-element-dark: (
258
262
  text-caution: base.$color-yellow-100,
259
263
  text-warning: base.$color-orange-100,
260
264
  text-danger: base.$color-red-100,
261
- text-critical: base.$color-red-100,
265
+ text-critical: data.$color-data-orchid-100,
262
266
 
263
267
  status-information: base.$color-blue-500,
264
268
  status-information-contrast: base.$color-white,
@@ -270,7 +274,7 @@ $theme-element-dark: (
270
274
  status-warning-contrast: base.$color-deep-blue-900,
271
275
  status-danger: base.$color-red-500,
272
276
  status-danger-contrast: base.$color-white,
273
- status-critical: base.$color-red-700,
277
+ status-critical: data.$color-data-orchid-500,
274
278
  status-critical-contrast: base.$color-white,
275
279
 
276
280
  focus-default: base.$color-focus,