@siemens/element-theme 47.1.0 → 47.3.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
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 {
|
|
@@ -76,6 +77,37 @@
|
|
|
76
77
|
background-color: semantic-tokens.$element-ui-1 !important;
|
|
77
78
|
color: semantic-tokens.$element-text-inverse;
|
|
78
79
|
}
|
|
80
|
+
|
|
81
|
+
&.bg-info-emphasis {
|
|
82
|
+
background: semantic-tokens.$element-status-information;
|
|
83
|
+
color: semantic-tokens.$element-status-information-contrast;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
&.bg-success-emphasis {
|
|
87
|
+
background: semantic-tokens.$element-status-success;
|
|
88
|
+
color: semantic-tokens.$element-status-success-contrast;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
&.bg-warning-emphasis {
|
|
92
|
+
background: semantic-tokens.$element-status-warning;
|
|
93
|
+
color: semantic-tokens.$element-status-warning-contrast;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
&.bg-danger-emphasis {
|
|
97
|
+
background: semantic-tokens.$element-status-danger;
|
|
98
|
+
color: semantic-tokens.$element-status-danger-contrast;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
&.bg-caution-emphasis {
|
|
102
|
+
background: semantic-tokens.$element-status-caution;
|
|
103
|
+
color: semantic-tokens.$element-status-caution-contrast;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.icon {
|
|
107
|
+
font-size: 20px;
|
|
108
|
+
margin-inline-start: -4px;
|
|
109
|
+
margin-block-start: -2px;
|
|
110
|
+
}
|
|
79
111
|
}
|
|
80
112
|
|
|
81
113
|
.badge-dot {
|
|
@@ -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;
|
|
@@ -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
|
|
|
@@ -176,3 +177,6 @@ $element-data-sand-4: var(--element-data-sand-4);
|
|
|
176
177
|
$element-feedback-icon-invalid: var(--element-feedback-icon-invalid);
|
|
177
178
|
$element-feedback-icon-warning: var(--element-feedback-icon-warning);
|
|
178
179
|
$element-feedback-icon-valid: var(--element-feedback-icon-valid);
|
|
180
|
+
|
|
181
|
+
$element-launchpad-app-background: var(--element-launchpad-app-background);
|
|
182
|
+
$element-launchpad-app-color: var(--element-launchpad-app-color);
|
|
@@ -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,
|
|
@@ -193,7 +194,9 @@ $theme-element-light: (
|
|
|
193
194
|
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
195
|
// original icon: element-validation-success
|
|
195
196
|
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")
|
|
197
|
+
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
|
+
launchpad-app-background: base.$color-blue-300,
|
|
199
|
+
launchpad-app-color: base.$color-black
|
|
197
200
|
);
|
|
198
201
|
|
|
199
202
|
$theme-element-dark: (
|
|
@@ -220,6 +223,7 @@ $theme-element-dark: (
|
|
|
220
223
|
base-caution: base.$color-yellow-900,
|
|
221
224
|
base-warning: base.$color-orange-900,
|
|
222
225
|
base-danger: base.$color-red-900,
|
|
226
|
+
base-critical: base.$color-red-900,
|
|
223
227
|
base-translucent-1: rgba(base.$color-black, 0.7),
|
|
224
228
|
base-translucent-2: rgba(base.$color-white, 0.88),
|
|
225
229
|
action-primary: base.$color-interactive-coral,
|
|
@@ -335,5 +339,7 @@ $theme-element-dark: (
|
|
|
335
339
|
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
340
|
// original icon: element-validation-success
|
|
337
341
|
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")
|
|
342
|
+
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"),
|
|
343
|
+
launchpad-app-background: base.$color-blue-300,
|
|
344
|
+
launchpad-app-color: base.$color-black
|
|
339
345
|
);
|