@siemens/element-theme 47.3.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 (6) hide show
  1. package/package.json +1 -1
  2. package/src/styles/bootstrap/_alert.scss +12 -0
  3. package/src/styles/bootstrap/_badges.scss +10 -0
  4. package/src/styles/bootstrap/_card.scss +4 -0
  5. package/src/styles/variables/_semantic-tokens.scss +1 -0
  6. package/src/theme/_theme-element.scss +2 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@siemens/element-theme",
3
- "version": "47.3.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
@@ -73,6 +73,11 @@
73
73
  color: semantic-tokens.$element-text-danger;
74
74
  }
75
75
 
76
+ &.bg-critical {
77
+ background-color: semantic-tokens.$element-base-critical !important;
78
+ color: semantic-tokens.$element-text-critical;
79
+ }
80
+
76
81
  &.bg-inverse {
77
82
  background-color: semantic-tokens.$element-ui-1 !important;
78
83
  color: semantic-tokens.$element-text-inverse;
@@ -98,6 +103,11 @@
98
103
  color: semantic-tokens.$element-status-danger-contrast;
99
104
  }
100
105
 
106
+ &.bg-critical-emphasis {
107
+ background: semantic-tokens.$element-status-critical;
108
+ color: semantic-tokens.$element-status-critical-contrast;
109
+ }
110
+
101
111
  &.bg-caution-emphasis {
102
112
  background: semantic-tokens.$element-status-caution;
103
113
  color: semantic-tokens.$element-status-caution-contrast;
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/variables/_semantic-tokens.scss CHANGED
@@ -58,6 +58,7 @@ $element-text-success: var(--element-text-success);
58
58
  $element-text-caution: var(--element-text-caution);
59
59
  $element-text-warning: var(--element-text-warning);
60
60
  $element-text-danger: var(--element-text-danger);
61
+ $element-text-critical: var(--element-text-critical);
61
62
 
62
63
  $element-status-information: var(--element-status-information);
63
64
  $element-status-information-contrast: var(--element-status-information-contrast);
package/src/theme/_theme-element.scss CHANGED
@@ -71,6 +71,7 @@ $theme-element-light: (
71
71
  text-caution: base.$color-yellow-900,
72
72
  text-warning: base.$color-orange-900,
73
73
  text-danger: base.$color-red-700,
74
+ text-critical: base.$color-red-700,
74
75
 
75
76
  status-information: base.$color-blue-500,
76
77
  status-information-contrast: base.$color-white,
@@ -255,6 +256,7 @@ $theme-element-dark: (
255
256
  text-caution: base.$color-yellow-100,
256
257
  text-warning: base.$color-orange-100,
257
258
  text-danger: base.$color-red-100,
259
+ text-critical: base.$color-red-100,
258
260
 
259
261
  status-information: base.$color-blue-500,
260
262
  status-information-contrast: base.$color-white,