nve-designsystem 3.9.6 → 3.9.7

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/components/nve-alert/nve-alert.styles.js +42 -24
  2. package/components/nve-badge/nve-badge.styles.js +30 -28
  3. package/components/nve-checkbox/nve-checkbox.styles.js +2 -2
  4. package/components/nve-message-card/nve-message-card.styles.js +22 -25
  5. package/components/nve-stepper/nve-step/nve-step.styles.js +4 -4
  6. package/components/nve-tag/nve-tag.styles.js +17 -16
  7. package/package.json +1 -1
package/components/nve-alert/nve-alert.styles.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { i as r } from "../../chunks/lit-element.js";
2
- const a = r`
2
+ const o = r`
3
3
  :host {
4
4
  --left-stroke-width: 6px;
5
5
  }
@@ -10,7 +10,6 @@ const a = r`
10
10
  padding: var(--spacing-medium) var(--spacing-large) var(--spacing-medium)
11
11
  calc(var(--spacing-large) - var(--left-stroke-width));
12
12
  border-radius: var(--border-radius-small);
13
- color: var(--color-feedback-foreground-default-info);
14
13
  font: var(--typography-body-medium);
15
14
  border-left: var(--left-stroke-width) solid transparent;
16
15
  }
@@ -27,7 +26,9 @@ const a = r`
27
26
  border: none;
28
27
  cursor: pointer;
29
28
  margin-left: var(--spacing-x-small);
30
- transition: background 0.3s ease;
29
+ transition:
30
+ background-color 0.3s ease,
31
+ color 0.3s ease;
31
32
  nve-icon {
32
33
  --icon-size: var(--font-size-large);
33
34
  }
@@ -56,18 +57,23 @@ const a = r`
56
57
  /*variants */
57
58
  .alert--primary {
58
59
  background-color: var(--color-feedback-background-default-info);
60
+ color: var(--color-feedback-foreground-on-bg-subtle-info, #142843);
59
61
  .alert__button:hover {
60
62
  background: var(--color-feedback-background-subtle-info);
61
63
  }
62
64
  }
63
65
  .alert--danger {
64
66
  background-color: var(--color-feedback-background-default-error);
67
+ color: var(--color-feedback-foreground-on-bg-subtle-error, #581d1d);
68
+
65
69
  .alert__button:hover {
66
70
  background: var(--color-feedback-background-subtle-error);
67
71
  }
68
72
  }
69
73
  .alert--success {
70
74
  background-color: var(--color-feedback-background-default-success);
75
+ color: var(--color-feedback-foreground-on-bg-subtle-success, #122b21);
76
+
71
77
  .alert__button:hover {
72
78
  background: var(--color-feedback-background-subtle-success);
73
79
  }
@@ -75,12 +81,15 @@ const a = r`
75
81
 
76
82
  .alert--neutral {
77
83
  background-color: var(--color-feedback-background-default-neutral);
84
+ color: var(--color-feedback-foreground-on-bg-subtle-neutral, #0d0d0e);
78
85
  .alert__button:hover {
79
86
  background: var(--color-feedback-background-subtle-neutral);
80
87
  }
81
88
  }
82
89
  .alert--warning {
83
90
  background-color: var(--color-feedback-background-default-warning);
91
+ color: var(--color-feedback-foreground-on-bg-subtle-warning, #54301c);
92
+
84
93
  .alert__button:hover {
85
94
  background: var(--color-feedback-background-subtle-warning);
86
95
  }
@@ -88,40 +97,45 @@ const a = r`
88
97
 
89
98
  /* Styling for høyere metningsgrad */
90
99
 
91
- .alert--emphasized {
92
- color: var(--color-feedback-foreground-emphasized-neutral);
93
- }
94
-
95
100
  .alert--emphasized.alert--primary {
96
101
  background-color: var(--color-feedback-background-emphasized-info);
102
+ color: var(--color-feedback-foreground-on-bg-emphasized-info, #fff);
103
+
97
104
  .alert__button:hover {
98
105
  background: var(--color-feedback-background-subtle-info);
99
- color: var(--color-feedback-background-emphasized-info);
106
+ color: var(--color-feedback-foreground-on-bg-subtle-info);
100
107
  }
101
108
  }
102
109
  .alert--emphasized.alert--danger {
103
110
  background-color: var(--color-feedback-background-emphasized-error);
111
+ color: var(--color-feedback-foreground-on-bg-emphasized-error, #fff);
112
+
104
113
  .alert__button:hover {
105
114
  background: var(--color-feedback-background-subtle-error);
106
- color: var(--color-feedback-background-emphasized-error);
115
+ color: var(--color-feedback-foreground-on-bg-subtle-error);
107
116
  }
108
117
  }
109
118
  .alert--emphasized.alert--success {
110
119
  background-color: var(--color-feedback-background-emphasized-success);
120
+ color: var(--color-feedback-foreground-on-bg-emphasized-success, #fff);
121
+
111
122
  .alert__button:hover {
112
- background: var(--color-feedback-background-subtle-success);
113
- color: var(--color-feedback-background-emphasized-success);
123
+ background: var(--color-feedback-background-default-success);
124
+ color: var(--color-feedback-foreground-on-bg-subtle-success,);
114
125
  }
115
126
  }
116
127
  .alert--emphasized.alert--neutral {
117
128
  background-color: var(--color-feedback-background-emphasized-neutral);
129
+ color: var(--color-feedback-foreground-on-bg-emphasized-neutral, #fff);
130
+
118
131
  .alert__button:hover {
119
132
  background: var(--color-feedback-background-subtle-neutral);
120
- color: var(--color-feedback-background-emphasized-neutral);
133
+ color: var(--color-feedback-foreground-on-bg-subtle-neutral);
121
134
  }
122
135
  }
123
136
  .alert--emphasized.alert--warning {
124
- color: var(--color-feedback-foreground-emphasized-warning);
137
+ color: var(--color-feedback-foreground-on-bg-emphasized-warning, #0d0d0e);
138
+
125
139
  background-color: var(--color-feedback-background-emphasized-warning);
126
140
  .alert__icon {
127
141
  color: var(--color-feedback-foreground-emphasized-warning) !important;
@@ -129,6 +143,10 @@ const a = r`
129
143
  .alert__button {
130
144
  stroke: var(--color-feedback-foreground-emphasized-warning) !important;
131
145
  }
146
+ .alert__button:hover {
147
+ background: var(--color-feedback-background-subtle-warning);
148
+ color: var(--color-feedback-foreground-on-bg-subtle-warning);
149
+ }
132
150
  }
133
151
 
134
152
  /* leftStroke */
@@ -136,38 +154,38 @@ const a = r`
136
154
  border-left: 6px solid;
137
155
  }
138
156
  .alert--left-stroke.alert--primary {
139
- border-color: var(--color-feedback-background-emphasized-info);
157
+ border-color: var(--color-feedback-border-emphasized-info);
140
158
  }
141
159
  .alert--left-stroke.alert--danger {
142
- border-color: var(--color-feedback-background-emphasized-error);
160
+ border-color: var(--color-feedback-border-emphasized-error);
143
161
  }
144
162
  .alert--left-stroke.alert--success {
145
- border-color: var(--color-feedback-background-emphasized-success);
163
+ border-color: var(--color-feedback-border-emphasized-succ);
146
164
  }
147
165
  .alert--left-stroke.alert--neutral {
148
- border-color: var(--color-feedback-foreground-default-neutral);
166
+ border-color: var(--color-feedback-border-emphasized-neutral);
149
167
  }
150
168
  .alert--left-stroke.alert--warning {
151
- border-color: var(--color-feedback-background-emphasized-warning);
169
+ border-color: var(--color-feedback-border-emphasized-warning);
152
170
  }
153
171
 
154
172
  /* leftStroke and emphasized */
155
173
  .alert--left-stroke.alert--emphasized.alert--primary {
156
- border-color: var(--color-feedback-background-default-info);
174
+ border-color: var(--color-feedback-border-subtle-info);
157
175
  }
158
176
  .alert--left-stroke.alert--emphasized.alert--danger {
159
- border-color: var(--color-feedback-background-default-error);
177
+ border-color: var(--color-feedback-border-subtle-error);
160
178
  }
161
179
  .alert--left-stroke.alert--emphasized.alert--success {
162
- border-color: var(--color-feedback-background-subtle-success);
180
+ border-color: var(--color-feedback-border-subtle-success);
163
181
  }
164
182
  .alert--left-stroke.alert--emphasized.alert--neutral {
165
- border-color: var(--color-feedback-background-default-neutral);
183
+ border-color: var(--color-feedback-border-subtle-neutral);
166
184
  }
167
185
  .alert--left-stroke.alert--emphasized.alert--warning {
168
- border-color: var(--color-feedback-background-default-warning);
186
+ border-color: var(--color-feedback-border-subtle-warning);
169
187
  }
170
188
  `;
171
189
  export {
172
- a as default
190
+ o as default
173
191
  };
package/components/nve-badge/nve-badge.styles.js CHANGED
@@ -1,5 +1,5 @@
1
- import { i as a } from "../../chunks/lit-element.js";
2
- const o = a`
1
+ import { i as r } from "../../chunks/lit-element.js";
2
+ const a = r`
3
3
  :host {
4
4
  display: inline-flex;
5
5
  }
@@ -15,59 +15,61 @@ const o = a`
15
15
 
16
16
  /* Variant modifiers */
17
17
  .badge--brand {
18
- background-color: var(--color-brand-background-primary);
19
- color: var(--color-interactive-primary-foreground-default);
18
+ background-color: var(--color-brand-background-secondary);
19
+ color: var(--color-brand-foreground-primary-on-bg);
20
20
  }
21
21
 
22
22
  .badge--neutral {
23
- background-color: var(--color-feedback-background-default-neutral, #e4e5e7);
24
- color: var(--color-feedback-foreground-default-neutral, #00131c);
23
+ background-color: var(--color-feedback-background-emphasized-neutral);
24
+ color: var(--color-feedback-foreground-on-bg-emphasized-neutral);
25
25
  }
26
26
 
27
27
  .badge--primary {
28
- background-color: var(--color-feedback-background-emphasized-info, #1e6fdc);
29
- color: var(--color-feedback-foreground-emphasized-info, #fff);
28
+ background-color: var(--color-feedback-background-emphasized-info);
29
+ color: var(--color-feedback-foreground-on-bg-emphasized-info);
30
30
  }
31
31
 
32
32
  .badge--success {
33
- background-color: var(--color-feedback-background-emphasized-success, #00814b);
34
- color: var(--color-feedback-foreground-emphasized-success, #fff);
35
- }
36
- .badge--warning {
37
- background-color: var(--color-feedback-background-emphasized-warning, #ffd046);
38
- color: var(--color-feedback-foreground-emphasized-warning, #0d0d0e);
33
+ background-color: var(--color-feedback-background-emphasized-success);
34
+ color: var(--color-feedback-foreground-on-bg-emphasized-success);
39
35
  }
40
36
 
41
37
  .badge--danger {
42
- background-color: var(--color-feedback-background-emphasized-error, #c00);
43
- color: var(--color-feedback-foreground-emphasized-error, #fff);
38
+ background-color: var(--color-feedback-background-emphasized-error);
39
+ color: var(--color-feedback-foreground-on-bg-emphasized-error);
44
40
  }
45
-
46
- /* Lav metningsgrad */
47
- .saturation--subtle {
48
- color: var(--color-neutrals-foreground-primary, #00131c);
41
+ .badge--warning {
42
+ background-color: var(--color-feedback-background-emphasized-warning);
43
+ color: var(--color-feedback-foreground-on-bg-emphasized-warning);
49
44
  }
50
45
 
46
+ /* Lav metningsgrad */
51
47
  .badge--brand.saturation--subtle {
52
48
  background-color: var(--color-brand-background-tertiary);
49
+ color: var(--color-brand-foreground-secondary-on-bg);
53
50
  }
54
51
 
55
52
  .badge--neutral.saturation--subtle {
56
- background-color: var(--color-feedback-background-subtle-neutral, #f7f7f8);
53
+ background-color: var(--color-feedback-background-default-neutral);
54
+ color: var(--color-feedback-foreground-on-bg-subtle-neutral);
57
55
  }
58
56
 
59
57
  .badge--primary.saturation--subtle {
60
- background-color: var(--color-feedback-background-default-info, #ceeaff);
58
+ background-color: var(--color-feedback-background-default-info);
59
+ color: var(--color-feedback-foreground-on-bg-subtle-info);
61
60
  }
62
61
 
63
62
  .badge--success.saturation--subtle {
64
- background-color: var(--color-feedback-background-default-success, #cbf9cb);
65
- }
66
- .badge--warning.saturation--subtle {
67
- background-color: var(--color-feedback-background-default-warning, #ffe8a5);
63
+ background-color: var(--color-feedback-background-default-success);
64
+ color: var(--color-feedback-foreground-on-bg-subtle-success);
68
65
  }
69
66
  .badge--danger.saturation--subtle {
70
- background-color: var(--color-feedback-background-default-error, #ffd8de);
67
+ background-color: var(--color-feedback-background-default-error);
68
+ color: var(--color-feedback-foreground-on-bg-subtle-error);
69
+ }
70
+ .badge--warning.saturation--subtle {
71
+ background-color: var(--color-feedback-background-default-warning);
72
+ color: var(--color-feedback-foreground-on-bg-subtle-warning);
71
73
  }
72
74
 
73
75
  /* Sizing modifiers */
@@ -92,5 +94,5 @@ const o = a`
92
94
  }
93
95
  `;
94
96
  export {
95
- o as default
97
+ a as default
96
98
  };
package/components/nve-checkbox/nve-checkbox.styles.js CHANGED
@@ -23,7 +23,7 @@ const a = r`
23
23
  }
24
24
 
25
25
  :host([data-invalid])::part(control) {
26
- border-color: var(--color-feedback-background-emphasized-error);
26
+ border-color: var(--color-feedback-border-emphasized-error);
27
27
  }
28
28
  :host([data-invalid])::part(control control--checked),
29
29
  :host([data-user-invalid])::part(control control--indeterminate) {
@@ -31,7 +31,7 @@ const a = r`
31
31
  }
32
32
 
33
33
  :host(:not([disabled]):hover)::part(control) {
34
- border-color: var(--color-neutrals-foreground-subtle, #006b99) !important;
34
+ border-color: var(--color-neutrals-foreground-subtle) !important;
35
35
  }
36
36
 
37
37
  sl-icon {
package/components/nve-message-card/nve-message-card.styles.js CHANGED
@@ -1,5 +1,5 @@
1
- import { i as e } from "../../chunks/lit-element.js";
2
- const r = e`
1
+ import { i as r } from "../../chunks/lit-element.js";
2
+ const a = r`
3
3
  :host {
4
4
  --button-hover: rgba(0, 0, 0, 0.1);
5
5
  }
@@ -12,7 +12,6 @@ const r = e`
12
12
  padding: var(--spacing-large);
13
13
  gap: var(--spacing-small);
14
14
  align-self: stretch;
15
- color: var(--color-neutrals-foreground-primary, #0d0d0e);
16
15
  opacity: 1;
17
16
  transition: opacity 0.3s 0s;
18
17
  }
@@ -54,7 +53,7 @@ const r = e`
54
53
  justify-content: center;
55
54
  align-items: center;
56
55
  border: none;
57
- background: none;
56
+ background-color: none;
58
57
  width: 28px;
59
58
  height: 28px;
60
59
  font-size: unset;
@@ -69,44 +68,42 @@ const r = e`
69
68
  opacity: 0;
70
69
  }
71
70
 
72
- nve-icon::part(icon) {
73
- display: unset;
74
- font-size: var(--font-size-medium);
75
- line-height: 1;
76
- }
77
-
78
71
  /** Varianter */
79
72
 
80
73
  .message-card--neutral {
81
- background: var(--color-neutrals-background-primary, #fff);
74
+ background-color: var(--color-neutrals-background-primary);
75
+ color: var(--color-neutrals-foreground-primary);
82
76
  .message-card__close-btn:hover {
83
77
  background-color: var(--button-hover);
84
78
  }
85
79
  }
86
80
 
87
81
  .message-card--danger {
88
- background: var(--color-feedback-background-default-error);
82
+ background-color: var(--color-feedback-background-default-error);
83
+ color: var(--color-feedback-foreground-on-bg-subtle-error);
89
84
  .message-card__close-btn:hover {
90
85
  background-color: var(--button-hover);
91
86
  }
92
87
  }
93
88
 
94
89
  .message-card--warning {
95
- background: var(--color-feedback-background-default-warning);
90
+ background-color: var(--color-feedback-background-default-warning);
91
+ color: var(--color-feedback-foreground-on-bg-subtle-warning);
96
92
  .message-card__close-btn:hover {
97
93
  background-color: var(--button-hover);
98
94
  }
99
95
  }
100
96
 
101
97
  .message-card--success {
102
- background: var(--color-feedback-background-default-success);
98
+ background-color: var(--color-feedback-background-default-success);
99
+ color: var(--color-feedback-foreground-on-bg-subtle-success);
103
100
  .message-card__close-btn:hover {
104
101
  background-color: var(--button-hover);
105
102
  }
106
103
  }
107
104
 
108
105
  .message-card--primary {
109
- background: var(--color-feedback-background-subtle-info);
106
+ background-color: var(--color-feedback-background-subtle-info);
110
107
  .message-card__close-btn:hover {
111
108
  background-color: var(--button-hover);
112
109
  }
@@ -115,15 +112,15 @@ const r = e`
115
112
  /** Sterkere farger */
116
113
 
117
114
  :host([saturation='emphasized']) .message-card--neutral {
118
- background: var(--color-neutrals-background-secondary);
115
+ background-color: var(--color-neutrals-background-secondary);
119
116
  .message-card__close-btn:hover {
120
117
  background-color: var(--button-hover);
121
118
  }
122
119
  }
123
120
 
124
121
  :host([saturation='emphasized']) .message-card--danger {
125
- color: var(--color-feedback-foreground-emphasized-error);
126
- background: var(--color-feedback-background-emphasized-error);
122
+ color: var(--color-feedback-foreground-on-bg-emphasized-error);
123
+ background-color: var(--color-feedback-background-emphasized-error);
127
124
  .message-card__close-btn:hover {
128
125
  background-color: var(--color-feedback-background-default-error);
129
126
  color: var(--color-neutrals-foreground-primary);
@@ -131,16 +128,16 @@ const r = e`
131
128
  }
132
129
 
133
130
  :host([saturation='emphasized']) .message-card--warning {
134
- color: var(--color-feedback-foreground-emphasized-warning);
135
- background: var(--color-feedback-background-emphasized-warning);
131
+ color: var(--color-feedback-foreground-on-bg-emphasized-warning);
132
+ background-color: var(--color-feedback-background-emphasized-warning);
136
133
  .message-card__close-btn:hover {
137
134
  background-color: var(--color-feedback-background-default-warning);
138
135
  }
139
136
  }
140
137
 
141
138
  :host([saturation='emphasized']) .message-card--success {
142
- color: var(--color-feedback-foreground-emphasized-success);
143
- background: var(--color-feedback-background-emphasized-success);
139
+ color: var(--color-feedback-foreground-on-bg-emphasized-success);
140
+ background-color: var(--color-feedback-background-emphasized-success);
144
141
  .message-card__close-btn:hover {
145
142
  background-color: var(--color-feedback-background-default-success);
146
143
  color: var(--color-neutrals-foreground-primary);
@@ -148,8 +145,8 @@ const r = e`
148
145
  }
149
146
 
150
147
  :host([saturation='emphasized']) .message-card--primary {
151
- color: var(--color-feedback-foreground-emphasized-info);
152
- background: var(--color-feedback-background-emphasized-info);
148
+ color: var(--color-feedback-foreground-on-bg-emphasized-info);
149
+ background-color: var(--color-feedback-background-emphasized-info);
153
150
  .message-card__close-btn:hover {
154
151
  background-color: var(--button-hover);
155
152
  }
@@ -181,5 +178,5 @@ const r = e`
181
178
  }
182
179
  `;
183
180
  export {
184
- r as default
181
+ a as default
185
182
  };
package/components/nve-stepper/nve-step/nve-step.styles.js CHANGED
@@ -104,19 +104,19 @@ const r = e`
104
104
  }
105
105
 
106
106
  .state-not-started-color {
107
- color: var(--color-neutrals-foreground-subtle, #60656c);
107
+ color: var(--color-neutrals-foreground-subtle);
108
108
  }
109
109
 
110
110
  .state-started-color {
111
- color: var(--color-feedback-background-emphasized-info, #1e6fdc);
111
+ color: var(--color-feedback-foreground-info);
112
112
  }
113
113
 
114
114
  .state-done-color {
115
- color: var(--color-feeedback-foreground-emphasized-success, #00814b);
115
+ color: var(--color-feedback-foreground-success);
116
116
  }
117
117
 
118
118
  .state-error-color {
119
- color: var(--color-feedback-background-emphasized-error, #cc0000);
119
+ color: var(--color-feedback-foreground-error);
120
120
  }
121
121
 
122
122
  .vertical-container {
package/components/nve-tag/nve-tag.styles.js CHANGED
@@ -15,104 +15,105 @@ const e = o`
15
15
 
16
16
  :host([variant='neutral'][saturation='emphasized']) {
17
17
  --_bg-color: var(--color-feedback-background-emphasized-neutral);
18
- --_text-color: var(--color-feedback-foreground-emphasized-neutral);
18
+ --_text-color: var(--color-feedback-foreground-on-bg-emphasized-neutral,);
19
19
  --_hover-bg-color: var(--color-feedback-background-default-neutral);
20
20
  --_hover-text-color: var(--color-feedback-foreground-default-neutral);
21
21
  }
22
22
 
23
23
  :host([variant='neutral'][saturation='default']) {
24
24
  --_bg-color: var(--color-feedback-background-default-neutral);
25
- --_text-color: var(--color-feedback-foreground-default-neutral);
25
+ --_text-color: var(--color-feedback-foreground-on-bg-subtle-neutral);
26
26
  --_hover-bg-color: var(--color-feedback-background-subtle-neutral);
27
27
  --_hover-text-color: var(--color-feedback-foreground-subtle-neutral);
28
28
  }
29
- color- :host([variant='neutral'][saturation='subtle']) {
29
+
30
+ :host([variant='neutral'][saturation='subtle']) {
30
31
  --_bg-color: var(--color-feedback-background-subtle-neutral);
31
- --_text-color: var(--color-feedback-foreground-subtle-neutral);
32
+ --_text-color: var(--color-feedback-foreground-on-bg-subtle-neutral);
32
33
  --_hover-bg-color: var(--color-feedback-background-default-neutral);
33
34
  --_hover-text-color: var(--color-feedback-foreground-default-neutral);
34
35
  }
35
36
 
36
37
  :host([variant='success'][saturation='emphasized']) {
37
38
  --_bg-color: var(--color-feedback-background-emphasized-success);
38
- --_text-color: var(--color-feedback-foreground-emphasized-success);
39
+ --_text-color: var(--color-feedback-foreground-on-bg-emphasized-success);
39
40
  --_hover-bg-color: var(--color-feedback-background-default-success);
40
41
  --_hover-text-color: var(--color-feedback-foreground-default-success);
41
42
  }
42
43
 
43
44
  :host([variant='success'][saturation='default']) {
44
45
  --_bg-color: var(--color-feedback-background-default-success);
45
- --_text-color: var(--color-feedback-foreground-default-success);
46
+ --_text-color: var(--color-feedback-foreground-on-bg-subtle-success);
46
47
  --_hover-bg-color: var(--color-feedback-background-subtle-success);
47
48
  --_hover-text-color: var(--color-feedback-foreground-subtle-success);
48
49
  }
49
50
 
50
51
  :host([variant='success'][saturation='subtle']) {
51
52
  --_bg-color: var(--color-feedback-background-subtle-success);
52
- --_text-color: var(--color-feedback-foreground-subtle-success);
53
+ --_text-color: var(--color-feedback-foreground-on-bg-subtle-success);
53
54
  --_hover-bg-color: var(--color-feedback-background-default-success);
54
55
  --_hover-text-color: var(--color-feedback-foreground-default-success);
55
56
  }
56
57
 
57
58
  :host([variant='info'][saturation='emphasized']) {
58
59
  --_bg-color: var(--color-feedback-background-emphasized-info);
59
- --_text-color: var(--color-feedback-foreground-emphasized-info);
60
+ --_text-color: var(--color-feedback-foreground-on-bg-emphasized-info);
60
61
  --_hover-bg-color: var(--color-feedback-background-default-info);
61
62
  --_hover-text-color: var(--color-feedback-foreground-default-info);
62
63
  }
63
64
 
64
65
  :host([variant='info'][saturation='default']) {
65
66
  --_bg-color: var(--color-feedback-background-default-info);
66
- --_text-color: var(--color-feedback-foreground-default-info);
67
+ --_text-color: var(--color-feedback-foreground-on-bg-subtle-info);
67
68
  --_hover-bg-color: var(--color-feedback-background-subtle-info);
68
69
  --_hover-text-color: var(--color-feedback-foreground-subtle-info);
69
70
  }
70
71
 
71
72
  :host([variant='info'][saturation='subtle']) {
72
73
  --_bg-color: var(--color-feedback-background-subtle-info);
73
- --_text-color: var(--color-feedback-foreground-subtle-info);
74
+ --_text-color: var(--color-feedback-foreground-on-bg-subtle-info);
74
75
  --_hover-bg-color: var(--color-feedback-background-default-info);
75
76
  --_hover-text-color: var(--color-feedback-foreground-default-info);
76
77
  }
77
78
 
78
79
  :host([variant='warning'][saturation='emphasized']) {
79
80
  --_bg-color: var(--color-feedback-background-emphasized-warning);
80
- --_text-color: var(--color-feedback-foreground-emphasized-warning);
81
+ --_text-color: var(--color-feedback-foreground-on-bg-emphasized-warning);
81
82
  --_hover-bg-color: var(--color-feedback-background-default-warning);
82
83
  --_hover-text-color: var(--color-feedback-foreground-default-warning);
83
84
  }
84
85
 
85
86
  :host([variant='warning'][saturation='default']) {
86
87
  --_bg-color: var(--color-feedback-background-default-warning);
87
- --_text-color: var(--color-feedback-foreground-default-warning);
88
+ --_text-color: var(--color-feedback-foreground-on-bg-subtle-warning);
88
89
  --_hover-bg-color: var(--color-feedback-background-subtle-warning);
89
90
  --_hover-text-color: var(--color-feedback-foreground-subtle-warning);
90
91
  }
91
92
 
92
93
  :host([variant='warning'][saturation='subtle']) {
93
94
  --_bg-color: var(--color-feedback-background-subtle-warning);
94
- --_text-color: var(--color-feedback-foreground-subtle-warning);
95
+ --_text-color: var(--color-feedback-foreground-on-bg-subtle-warning);
95
96
  --_hover-bg-color: var(--color-feedback-background-default-warning);
96
97
  --_hover-text-color: var(--color-feedback-foreground-default-warning);
97
98
  }
98
99
 
99
100
  :host([variant='error'][saturation='emphasized']) {
100
101
  --_bg-color: var(--color-feedback-background-emphasized-error);
101
- --_text-color: var(--color-feedback-foreground-emphasized-error);
102
+ --_text-color: var(--color-feedback-foreground-on-bg-emphasized-error);
102
103
  --_hover-bg-color: var(--color-feedback-background-default-error);
103
104
  --_hover-text-color: var(--color-feedback-foreground-default-error);
104
105
  }
105
106
 
106
107
  :host([variant='error'][saturation='default']) {
107
108
  --_bg-color: var(--color-feedback-background-default-error);
108
- --_text-color: var(--color-feedback-foreground-default-error);
109
+ --_text-color: var(--color-feedback-foreground-on-bg-subtle-error);
109
110
  --_hover-bg-color: var(--color-feedback-background-subtle-error);
110
111
  --_hover-text-color: var(--color-feedback-foreground-subtle-error);
111
112
  }
112
113
 
113
114
  :host([variant='error'][saturation='subtle']) {
114
115
  --_bg-color: var(--color-feedback-background-subtle-error);
115
- --_text-color: var(--color-feedback-foreground-subtle-error);
116
+ --_text-color: var(--color-feedback-foreground-on-bg-subtle-error);
116
117
  --_hover-bg-color: var(--color-feedback-background-default-error);
117
118
  --_hover-text-color: var(--color-feedback-foreground-default-error);
118
119
  }
package/package.json CHANGED
@@ -11,7 +11,7 @@
11
11
  },
12
12
  "license": "MIT",
13
13
  "homepage": "https://github.com/NVE/Designsystem/",
14
- "version": "3.9.6",
14
+ "version": "3.9.7",
15
15
  "customElements": "custom-elements.json",
16
16
  "exports": {
17
17
  ".": {