@siemens/element-theme 47.2.0 → 47.4.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 (7) hide show
  1. package/package.json +1 -1
  2. package/src/styles/bootstrap/_alert.scss +12 -0
  3. package/src/styles/bootstrap/_badges.scss +42 -0
  4. package/src/styles/bootstrap/_card.scss +4 -0
  5. package/src/styles/bootstrap/_utilities.scss +1 -0
  6. package/src/styles/variables/_semantic-tokens.scss +5 -0
  7. package/src/theme/_theme-element.scss +10 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@siemens/element-theme",
3
- "version": "47.2.0",
3
+ "version": "47.4.0",
4
4
  "description": "Element CSS theme.",
5
5
  "license": "MIT",
6
6
  "repository": {
package/src/styles/bootstrap/_alert.scss CHANGED
@@ -47,12 +47,24 @@
47
47
  background: semantic-tokens.$element-base-warning;
48
48
  }
49
49
 
50
+ .alert-caution {
51
+ --color-bar: #{semantic-tokens.$element-status-caution};
52
+ color: semantic-tokens.$element-text-caution;
53
+ background: semantic-tokens.$element-base-caution;
54
+ }
55
+
50
56
  .alert-danger {
51
57
  --color-bar: #{semantic-tokens.$element-status-danger};
52
58
  color: semantic-tokens.$element-text-danger;
53
59
  background: semantic-tokens.$element-base-danger;
54
60
  }
55
61
 
62
+ .alert-critical {
63
+ --color-bar: #{semantic-tokens.$element-status-critical};
64
+ color: semantic-tokens.$element-text-critical;
65
+ background: semantic-tokens.$element-base-critical;
66
+ }
67
+
56
68
  .alert-info {
57
69
  --color-bar: #{semantic-tokens.$element-status-information};
58
70
  color: semantic-tokens.$element-text-information;
package/src/styles/bootstrap/_badges.scss CHANGED
@@ -35,6 +35,7 @@
35
35
  &.bg-default {
36
36
  background-color: semantic-tokens.$element-base-0 !important;
37
37
  color: semantic-tokens.$element-text-primary;
38
+ outline: 1px solid semantic-tokens.$element-ui-4;
38
39
  }
39
40
 
40
41
  &.bg-primary {
@@ -72,10 +73,51 @@
72
73
  color: semantic-tokens.$element-text-danger;
73
74
  }
74
75
 
76
+ &.bg-critical {
77
+ background-color: semantic-tokens.$element-base-critical !important;
78
+ color: semantic-tokens.$element-text-critical;
79
+ }
80
+
75
81
  &.bg-inverse {
76
82
  background-color: semantic-tokens.$element-ui-1 !important;
77
83
  color: semantic-tokens.$element-text-inverse;
78
84
  }
85
+
86
+ &.bg-info-emphasis {
87
+ background: semantic-tokens.$element-status-information;
88
+ color: semantic-tokens.$element-status-information-contrast;
89
+ }
90
+
91
+ &.bg-success-emphasis {
92
+ background: semantic-tokens.$element-status-success;
93
+ color: semantic-tokens.$element-status-success-contrast;
94
+ }
95
+
96
+ &.bg-warning-emphasis {
97
+ background: semantic-tokens.$element-status-warning;
98
+ color: semantic-tokens.$element-status-warning-contrast;
99
+ }
100
+
101
+ &.bg-danger-emphasis {
102
+ background: semantic-tokens.$element-status-danger;
103
+ color: semantic-tokens.$element-status-danger-contrast;
104
+ }
105
+
106
+ &.bg-critical-emphasis {
107
+ background: semantic-tokens.$element-status-critical;
108
+ color: semantic-tokens.$element-status-critical-contrast;
109
+ }
110
+
111
+ &.bg-caution-emphasis {
112
+ background: semantic-tokens.$element-status-caution;
113
+ color: semantic-tokens.$element-status-caution-contrast;
114
+ }
115
+
116
+ .icon {
117
+ font-size: 20px;
118
+ margin-inline-start: -4px;
119
+ margin-block-start: -2px;
120
+ }
79
121
  }
80
122
 
81
123
  .badge-dot {
package/src/styles/bootstrap/_card.scss CHANGED
@@ -70,6 +70,10 @@
70
70
  &.accent-danger {
71
71
  border-inline-start: map.get(spacers.$spacers, 4) solid semantic-tokens.$element-status-danger;
72
72
  }
73
+
74
+ &.accent-critical {
75
+ border-inline-start: map.get(spacers.$spacers, 4) solid semantic-tokens.$element-status-critical;
76
+ }
73
77
  }
74
78
 
75
79
  .card-header {
package/src/styles/bootstrap/_utilities.scss CHANGED
@@ -72,6 +72,7 @@ $background-colors: (
72
72
  'base-caution': semantic-tokens.$element-base-caution,
73
73
  'base-warning': semantic-tokens.$element-base-warning,
74
74
  'base-danger': semantic-tokens.$element-base-danger,
75
+ 'base-critical': semantic-tokens.$element-base-critical,
75
76
  'base-translucent-1': semantic-tokens.$element-base-translucent-1,
76
77
  'base-translucent-2': semantic-tokens.$element-base-translucent-2
77
78
  ) !default;
package/src/styles/variables/_semantic-tokens.scss CHANGED
@@ -20,6 +20,7 @@ $element-base-success: var(--element-base-success);
20
20
  $element-base-caution: var(--element-base-caution);
21
21
  $element-base-warning: var(--element-base-warning);
22
22
  $element-base-danger: var(--element-base-danger);
23
+ $element-base-critical: var(--element-base-critical);
23
24
  $element-base-translucent-1: var(--element-base-translucent-1);
24
25
  $element-base-translucent-2: var(--element-base-translucent-2);
25
26
 
@@ -57,6 +58,7 @@ $element-text-success: var(--element-text-success);
57
58
  $element-text-caution: var(--element-text-caution);
58
59
  $element-text-warning: var(--element-text-warning);
59
60
  $element-text-danger: var(--element-text-danger);
61
+ $element-text-critical: var(--element-text-critical);
60
62
 
61
63
  $element-status-information: var(--element-status-information);
62
64
  $element-status-information-contrast: var(--element-status-information-contrast);
@@ -176,3 +178,6 @@ $element-data-sand-4: var(--element-data-sand-4);
176
178
  $element-feedback-icon-invalid: var(--element-feedback-icon-invalid);
177
179
  $element-feedback-icon-warning: var(--element-feedback-icon-warning);
178
180
  $element-feedback-icon-valid: var(--element-feedback-icon-valid);
181
+
182
+ $element-launchpad-app-background: var(--element-launchpad-app-background);
183
+ $element-launchpad-app-color: var(--element-launchpad-app-color);
package/src/theme/_theme-element.scss CHANGED
@@ -39,6 +39,7 @@ $theme-element-light: (
39
39
  base-caution: base.$color-yellow-100,
40
40
  base-warning: base.$color-orange-100,
41
41
  base-danger: base.$color-red-100,
42
+ base-critical: base.$color-red-100,
42
43
  base-translucent-1: rgba(base.$color-black, 0.3),
43
44
  base-translucent-2: rgba(base.$color-deep-blue-900, 0.88),
44
45
  action-primary: base.$color-interactive-blue-500,
@@ -70,6 +71,7 @@ $theme-element-light: (
70
71
  text-caution: base.$color-yellow-900,
71
72
  text-warning: base.$color-orange-900,
72
73
  text-danger: base.$color-red-700,
74
+ text-critical: base.$color-red-700,
73
75
 
74
76
  status-information: base.$color-blue-500,
75
77
  status-information-contrast: base.$color-white,
@@ -193,7 +195,9 @@ $theme-element-light: (
193
195
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23c75300' viewBox='0 0 512 512'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bstroke-width:0%7D%3C/style%3E%3C/defs%3E%3Cpath d='M256 279.12c-11.05 0-20-8.95-20-20v-79.14c0-11.05 8.95-20 20-20s20 8.95 20 20v79.14c0 11.05-8.95 20-20 20ZM256.17 359.03h-.34c-13.16 0-23.83-10.75-23.83-24s10.67-24 23.83-24h.34c13.16 0 23.83 10.75 23.83 24s-10.67 24-23.83 24Z'/%3E%3Cpath d='M441.77 338.25c-.03-.06-.06-.11-.1-.17L295.72 94.42c-13.28-21.9-41.91-28.91-63.81-15.63a46.637 46.637 0 0 0-15.63 15.63l-.03.06-145.92 243.6c-.03.05-.07.11-.1.17-12.81 22.18-5.18 50.65 17 63.46 6.9 3.98 14.75 6.13 22.72 6.22H402.05c12.41-.14 24.02-5.1 32.7-13.97 8.68-8.87 13.38-20.59 13.24-33a46.602 46.602 0 0 0-6.22-22.72Zm-32.76 30.54c-1.96 2.01-4.48 3.09-7.28 3.14H110.26c-1.77-.03-3.51-.52-5.03-1.4-2.44-1.41-4.12-3.61-4.85-6.36-.72-2.7-.4-5.39.95-7.79L247.1 113.02c.86-1.4 2.06-2.59 3.47-3.44 1.63-.99 3.47-1.51 5.35-1.51 3.79 0 7.08 1.83 9.02 5.02l145.74 243.3c.84 1.51 1.3 3.22 1.32 4.97.03 2.83-1 5.4-2.98 7.43Z'/%3E%3C/svg%3E"),
194
196
  // original icon: element-validation-success
195
197
  feedback-icon-valid:
196
- url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%231c703f' viewBox='0 0 512 512'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bstroke-width:0%7D%3C/style%3E%3C/defs%3E%3Cpath d='M222.25 345.88c-5.12 0-10.24-1.95-14.14-5.86l-56.25-56.25c-7.81-7.81-7.81-20.47 0-28.28s20.47-7.81 28.28 0l42.11 42.11 109.61-109.61c7.81-7.81 20.47-7.81 28.28 0s7.81 20.47 0 28.28L236.39 340.02a19.92 19.92 0 0 1-14.14 5.86Z'/%3E%3Cpath d='M256 448c-105.87 0-192-86.13-192-192S150.13 64 256 64s192 86.13 192 192-86.13 192-192 192Zm0-348c-86.02 0-156 69.98-156 156s69.98 156 156 156 156-69.98 156-156-69.98-156-156-156Z'/%3E%3C/svg%3E")
198
+ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%231c703f' viewBox='0 0 512 512'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bstroke-width:0%7D%3C/style%3E%3C/defs%3E%3Cpath d='M222.25 345.88c-5.12 0-10.24-1.95-14.14-5.86l-56.25-56.25c-7.81-7.81-7.81-20.47 0-28.28s20.47-7.81 28.28 0l42.11 42.11 109.61-109.61c7.81-7.81 20.47-7.81 28.28 0s7.81 20.47 0 28.28L236.39 340.02a19.92 19.92 0 0 1-14.14 5.86Z'/%3E%3Cpath d='M256 448c-105.87 0-192-86.13-192-192S150.13 64 256 64s192 86.13 192 192-86.13 192-192 192Zm0-348c-86.02 0-156 69.98-156 156s69.98 156 156 156 156-69.98 156-156-69.98-156-156-156Z'/%3E%3C/svg%3E"),
199
+ launchpad-app-background: base.$color-blue-300,
200
+ launchpad-app-color: base.$color-black
197
201
  );
198
202
 
199
203
  $theme-element-dark: (
@@ -220,6 +224,7 @@ $theme-element-dark: (
220
224
  base-caution: base.$color-yellow-900,
221
225
  base-warning: base.$color-orange-900,
222
226
  base-danger: base.$color-red-900,
227
+ base-critical: base.$color-red-900,
223
228
  base-translucent-1: rgba(base.$color-black, 0.7),
224
229
  base-translucent-2: rgba(base.$color-white, 0.88),
225
230
  action-primary: base.$color-interactive-coral,
@@ -251,6 +256,7 @@ $theme-element-dark: (
251
256
  text-caution: base.$color-yellow-100,
252
257
  text-warning: base.$color-orange-100,
253
258
  text-danger: base.$color-red-100,
259
+ text-critical: base.$color-red-100,
254
260
 
255
261
  status-information: base.$color-blue-500,
256
262
  status-information-contrast: base.$color-white,
@@ -335,5 +341,7 @@ $theme-element-dark: (
335
341
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff9000' viewBox='0 0 512 512'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bstroke-width:0%7D%3C/style%3E%3C/defs%3E%3Cpath d='M256 279.12c-11.05 0-20-8.95-20-20v-79.14c0-11.05 8.95-20 20-20s20 8.95 20 20v79.14c0 11.05-8.95 20-20 20ZM256.17 359.03h-.34c-13.16 0-23.83-10.75-23.83-24s10.67-24 23.83-24h.34c13.16 0 23.83 10.75 23.83 24s-10.67 24-23.83 24Z'/%3E%3Cpath d='M441.77 338.25c-.03-.06-.06-.11-.1-.17L295.72 94.42c-13.28-21.9-41.91-28.91-63.81-15.63a46.637 46.637 0 0 0-15.63 15.63l-.03.06-145.92 243.6c-.03.05-.07.11-.1.17-12.81 22.18-5.18 50.65 17 63.46 6.9 3.98 14.75 6.13 22.72 6.22H402.05c12.41-.14 24.02-5.1 32.7-13.97 8.68-8.87 13.38-20.59 13.24-33a46.602 46.602 0 0 0-6.22-22.72Zm-32.76 30.54c-1.96 2.01-4.48 3.09-7.28 3.14H110.26c-1.77-.03-3.51-.52-5.03-1.4-2.44-1.41-4.12-3.61-4.85-6.36-.72-2.7-.4-5.39.95-7.79L247.1 113.02c.86-1.4 2.06-2.59 3.47-3.44 1.63-.99 3.47-1.51 5.35-1.51 3.79 0 7.08 1.83 9.02 5.02l145.74 243.3c.84 1.51 1.3 3.22 1.32 4.97.03 2.83-1 5.4-2.98 7.43Z'/%3E%3C/svg%3E"),
336
342
  // original icon: element-validation-success
337
343
  feedback-icon-valid:
338
- url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2328bf66' viewBox='0 0 512 512'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bstroke-width:0%7D%3C/style%3E%3C/defs%3E%3Cpath d='M222.25 345.88c-5.12 0-10.24-1.95-14.14-5.86l-56.25-56.25c-7.81-7.81-7.81-20.47 0-28.28s20.47-7.81 28.28 0l42.11 42.11 109.61-109.61c7.81-7.81 20.47-7.81 28.28 0s7.81 20.47 0 28.28L236.39 340.02a19.92 19.92 0 0 1-14.14 5.86Z'/%3E%3Cpath d='M256 448c-105.87 0-192-86.13-192-192S150.13 64 256 64s192 86.13 192 192-86.13 192-192 192Zm0-348c-86.02 0-156 69.98-156 156s69.98 156 156 156 156-69.98 156-156-69.98-156-156-156Z'/%3E%3C/svg%3E")
344
+ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2328bf66' viewBox='0 0 512 512'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bstroke-width:0%7D%3C/style%3E%3C/defs%3E%3Cpath d='M222.25 345.88c-5.12 0-10.24-1.95-14.14-5.86l-56.25-56.25c-7.81-7.81-7.81-20.47 0-28.28s20.47-7.81 28.28 0l42.11 42.11 109.61-109.61c7.81-7.81 20.47-7.81 28.28 0s7.81 20.47 0 28.28L236.39 340.02a19.92 19.92 0 0 1-14.14 5.86Z'/%3E%3Cpath d='M256 448c-105.87 0-192-86.13-192-192S150.13 64 256 64s192 86.13 192 192-86.13 192-192 192Zm0-348c-86.02 0-156 69.98-156 156s69.98 156 156 156 156-69.98 156-156-69.98-156-156-156Z'/%3E%3C/svg%3E"),
345
+ launchpad-app-background: base.$color-blue-300,
346
+ launchpad-app-color: base.$color-black
339
347
  );