@transferwise/components 0.0.0-experimental-3cfaec8 → 0.0.0-experimental-ea557c7

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 (25) hide show
  1. package/build/main.css +558 -503
  2. package/build/sentimentSurface/SentimentSurface.js +2 -9
  3. package/build/sentimentSurface/SentimentSurface.js.map +1 -1
  4. package/build/sentimentSurface/SentimentSurface.mjs +2 -9
  5. package/build/sentimentSurface/SentimentSurface.mjs.map +1 -1
  6. package/build/styles/css/neptune.css +11 -11
  7. package/build/styles/less/legacy-variables.less +1 -1
  8. package/build/styles/less/neptune-tokens.less +2 -2
  9. package/build/styles/main.css +558 -503
  10. package/build/styles/props/custom-media.css +1 -1
  11. package/build/styles/props/neptune-tokens.css +1 -1
  12. package/build/styles/sentimentSurface/SentimentSurface.css +337 -325
  13. package/build/styles/styles/less/neptune.css +11 -11
  14. package/build/types/sentimentSurface/SentimentSurface.d.ts.map +1 -1
  15. package/package.json +2 -2
  16. package/src/criticalBanner/CriticalCommsBanner.test.tsx +1 -1
  17. package/src/main.css +558 -503
  18. package/src/sentimentSurface/SentimentSurface.css +337 -325
  19. package/src/sentimentSurface/SentimentSurface.docs.mdx +0 -2
  20. package/src/sentimentSurface/SentimentSurface.less +322 -2
  21. package/src/sentimentSurface/SentimentSurface.story.tsx +0 -4
  22. package/src/sentimentSurface/SentimentSurface.test.story.tsx +5 -1
  23. package/src/sentimentSurface/SentimentSurface.test.tsx +3 -84
  24. package/src/sentimentSurface/SentimentSurface.tsx +2 -10
  25. package/src/styles/less/neptune.css +11 -11
package/build/styles/sentimentSurface/SentimentSurface.css CHANGED
@@ -1,10 +1,15 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- * Generated on Fri, 22 May 2026 17:00:36 GMT
4
- */
5
-
6
-
7
- .wds-sentiment-negative-light-base {
1
+ .wds-sentiment-surface {
2
+ --ring-outline-color: var(--color-sentiment-content-primary, var(--color-content-primary));
3
+ }
4
+ .wds-sentiment-surface--hasBaseStyles {
5
+ background-color: var(--color-sentiment-background-surface);
6
+ color: var(--color-sentiment-content-primary);
7
+ }
8
+ .np-theme-personal.wds-sentiment-surface-negative-base,
9
+ .np-theme-business.wds-sentiment-surface-negative-base,
10
+ .np-theme-platform.wds-sentiment-surface-negative-base,
11
+ .np-theme-personal--bright-green.wds-sentiment-surface-negative-base,
12
+ .np-theme-business--bright-green.wds-sentiment-surface-negative-base {
8
13
  --color-sentiment-content-primary: #CB272F;
9
14
  --color-sentiment-content-primary-hover: #B8232B;
10
15
  --color-sentiment-content-primary-active: #A72027;
@@ -23,11 +28,12 @@
23
28
  --color-sentiment-background-surface: #FBEAEA;
24
29
  --color-sentiment-background-surface-hover: #F9E1E1;
25
30
  --color-sentiment-background-surface-active: #F8D8D8;
26
- --color-sentiment-border-overlay: rgba(203,39,47,0.30196);
27
31
  }
28
-
29
-
30
- .wds-sentiment-negative-light-elevated {
32
+ .np-theme-personal.wds-sentiment-surface-negative-elevated,
33
+ .np-theme-business.wds-sentiment-surface-negative-elevated,
34
+ .np-theme-platform.wds-sentiment-surface-negative-elevated,
35
+ .np-theme-personal--bright-green.wds-sentiment-surface-negative-elevated,
36
+ .np-theme-business--bright-green.wds-sentiment-surface-negative-elevated {
31
37
  --color-sentiment-content-primary: #FFFFFF;
32
38
  --color-sentiment-content-primary-hover: #F5CCCC;
33
39
  --color-sentiment-content-primary-active: #F1B7B7;
@@ -39,110 +45,163 @@
39
45
  --color-sentiment-interactive-secondary-active: #A72027;
40
46
  --color-sentiment-interactive-secondary-neutral: #9B141B;
41
47
  --color-sentiment-interactive-secondary-neutral-hover: #831116;
42
- --color-sentiment-interactive-secondary-neutral-active: #6D0E13;
48
+ --color-sentiment-interactive-secondary-neutral-active: #6D0e13;
43
49
  --color-sentiment-interactive-control: #CB272F;
44
50
  --color-sentiment-interactive-control-hover: #B8232B;
45
51
  --color-sentiment-interactive-control-active: #A72027;
46
52
  --color-sentiment-background-surface: #CB272F;
47
53
  --color-sentiment-background-surface-hover: #B8232B;
48
54
  --color-sentiment-background-surface-active: #A72027;
49
- --color-sentiment-border-overlay: rgba(255,255,255,0.30196);
50
55
  }
51
-
52
-
53
- .wds-sentiment-neutral-light-base {
54
- --color-sentiment-content-primary: #454745;
55
- --color-sentiment-content-primary-hover: #353635;
56
- --color-sentiment-content-primary-active: #232423;
57
- --color-sentiment-interactive-primary: #454745;
58
- --color-sentiment-interactive-primary-hover: #353635;
59
- --color-sentiment-interactive-primary-active: #232423;
60
- --color-sentiment-interactive-secondary: rgba(62,59,7,0.07059);
61
- --color-sentiment-interactive-secondary-hover: rgba(62,59,7,0.12157);
62
- --color-sentiment-interactive-secondary-active: rgba(62,59,7,0.16863);
63
- --color-sentiment-interactive-secondary-neutral: rgba(62,59,7,0.07059);
64
- --color-sentiment-interactive-secondary-neutral-hover: rgba(62,59,7,0.12157);
65
- --color-sentiment-interactive-secondary-neutral-active: rgba(62,59,7,0.16863);
66
- --color-sentiment-interactive-control: #F1F1ED;
67
- --color-sentiment-interactive-control-hover: #E7E7E1;
68
- --color-sentiment-interactive-control-active: #DFDED5;
69
- --color-sentiment-background-surface: rgba(62,59,7,0.07059);
70
- --color-sentiment-background-surface-hover: rgba(62,59,7,0.12157);
71
- --color-sentiment-background-surface-active: rgba(62,59,7,0.16863);
72
- --color-sentiment-border-overlay: rgba(69,71,69,0.30196);
56
+ .np-theme-personal--dark.wds-sentiment-surface-negative-base,
57
+ .np-theme-business--dark.wds-sentiment-surface-negative-base,
58
+ .np-theme-personal--forest-green.wds-sentiment-surface-negative-base,
59
+ .np-theme-business--forest-green.wds-sentiment-surface-negative-base,
60
+ .np-theme-platform--forest-green.wds-sentiment-surface-negative-base {
61
+ --color-sentiment-content-primary: #FFA8AD;
62
+ --color-sentiment-content-primary-hover: #FFBDC0;
63
+ --color-sentiment-content-primary-active: #FFD1D3;
64
+ --color-sentiment-interactive-primary: #FFA8AD;
65
+ --color-sentiment-interactive-primary-hover: #FFBDC0;
66
+ --color-sentiment-interactive-primary-active: #FFD1D3;
67
+ --color-sentiment-interactive-secondary: #410B0D;
68
+ --color-sentiment-interactive-secondary-hover: #641115;
69
+ --color-sentiment-interactive-secondary-active: #761418;
70
+ --color-sentiment-interactive-secondary-neutral: #601013;
71
+ --color-sentiment-interactive-secondary-neutral-hover: #7A1519;
72
+ --color-sentiment-interactive-secondary-neutral-active: #90181D;
73
+ --color-sentiment-interactive-control: #410B0D;
74
+ --color-sentiment-interactive-control-hover: #641115;
75
+ --color-sentiment-interactive-control-active: #761418;
76
+ --color-sentiment-background-surface: #410B0D;
77
+ --color-sentiment-background-surface-hover: #641115;
78
+ --color-sentiment-background-surface-active: #761418;
73
79
  }
74
-
75
-
76
- .wds-sentiment-neutral-light-elevated {
77
- --color-sentiment-content-primary: #F1F1ED;
78
- --color-sentiment-content-primary-hover: #E7E7E1;
79
- --color-sentiment-content-primary-active: #DFDED5;
80
- --color-sentiment-interactive-primary: #F1F1ED;
81
- --color-sentiment-interactive-primary-hover: #E7E7E1;
82
- --color-sentiment-interactive-primary-active: #DFDED5;
83
- --color-sentiment-interactive-secondary: #454745;
84
- --color-sentiment-interactive-secondary-hover: #353635;
85
- --color-sentiment-interactive-secondary-active: #232423;
86
- --color-sentiment-interactive-secondary-neutral: #585958;
87
- --color-sentiment-interactive-secondary-neutral-hover: #6A6C6A;
88
- --color-sentiment-interactive-secondary-neutral-active: #7D7E7D;
89
- --color-sentiment-interactive-control: #454745;
90
- --color-sentiment-interactive-control-hover: #353635;
91
- --color-sentiment-interactive-control-active: #232423;
92
- --color-sentiment-background-surface: #454745;
93
- --color-sentiment-background-surface-hover: #353635;
94
- --color-sentiment-background-surface-active: #232423;
95
- --color-sentiment-border-overlay: rgba(241,241,237,0.30196);
80
+ .np-theme-personal--dark.wds-sentiment-surface-negative-elevated,
81
+ .np-theme-business--dark.wds-sentiment-surface-negative-elevated,
82
+ .np-theme-personal--forest-green.wds-sentiment-surface-negative-elevated,
83
+ .np-theme-business--forest-green.wds-sentiment-surface-negative-elevated,
84
+ .np-theme-platform--forest-green.wds-sentiment-surface-negative-elevated {
85
+ --color-sentiment-content-primary: #410B0D;
86
+ --color-sentiment-content-primary-hover: #641115;
87
+ --color-sentiment-content-primary-active: #761418;
88
+ --color-sentiment-interactive-primary: #410B0D;
89
+ --color-sentiment-interactive-primary-hover: #641115;
90
+ --color-sentiment-interactive-primary-active: #761418;
91
+ --color-sentiment-interactive-secondary: #FFA8AD;
92
+ --color-sentiment-interactive-secondary-hover: #FFBDC0;
93
+ --color-sentiment-interactive-secondary-active: #FFD1D3;
94
+ --color-sentiment-interactive-secondary-neutral: #D9898D;
95
+ --color-sentiment-interactive-secondary-neutral-hover: #D68084;
96
+ --color-sentiment-interactive-secondary-neutral-active: #D06C71;
97
+ --color-sentiment-interactive-control: #FFA8AD;
98
+ --color-sentiment-interactive-control-hover: #FFBDC0;
99
+ --color-sentiment-interactive-control-active: #FFD1D3;
100
+ --color-sentiment-background-surface: #FFA8AD;
101
+ --color-sentiment-background-surface-hover: #FFBDC0;
102
+ --color-sentiment-background-surface-active: #FFD1D3;
96
103
  }
97
-
98
-
99
- .wds-sentiment-proposition-light-base {
100
- --color-sentiment-content-primary: #0E0F0C;
101
- --color-sentiment-content-primary-hover: #0A2826;
102
- --color-sentiment-content-primary-active: #074140;
103
- --color-sentiment-interactive-primary: #054D4D;
104
- --color-sentiment-interactive-primary-hover: #043A3A;
105
- --color-sentiment-interactive-primary-active: #022626;
106
- --color-sentiment-interactive-secondary: #E0F7F7;
107
- --color-sentiment-interactive-secondary-hover: #CAF1F1;
108
- --color-sentiment-interactive-secondary-active: #B6ECEC;
109
- --color-sentiment-interactive-secondary-neutral: #B4D5D5;
110
- --color-sentiment-interactive-secondary-neutral-hover: #A3CCCC;
111
- --color-sentiment-interactive-secondary-neutral-active: #9AC6C6;
112
- --color-sentiment-interactive-control: #E0F7F7;
113
- --color-sentiment-interactive-control-hover: #CAF1F1;
114
- --color-sentiment-interactive-control-active: #B6ECEC;
115
- --color-sentiment-background-surface: #E0F7F7;
116
- --color-sentiment-background-surface-hover: #CAF1F1;
117
- --color-sentiment-background-surface-active: #B6ECEC;
118
- --color-sentiment-border-overlay: rgba(14,15,12,0.30196);
104
+ .np-theme-personal.wds-sentiment-surface-warning-base,
105
+ .np-theme-business.wds-sentiment-surface-warning-base,
106
+ .np-theme-platform.wds-sentiment-surface-warning-base,
107
+ .np-theme-personal--bright-green.wds-sentiment-surface-warning-base,
108
+ .np-theme-business--bright-green.wds-sentiment-surface-warning-base {
109
+ --color-sentiment-content-primary: #4A3B1C;
110
+ --color-sentiment-content-primary-hover: #302612;
111
+ --color-sentiment-content-primary-active: #2C2311;
112
+ --color-sentiment-interactive-primary: #FFD11A;
113
+ --color-sentiment-interactive-primary-hover: #FFBF0F;
114
+ --color-sentiment-interactive-primary-active: #FFBB00;
115
+ --color-sentiment-interactive-secondary: #FFF7D7;
116
+ --color-sentiment-interactive-secondary-hover: #FFF0B2;
117
+ --color-sentiment-interactive-secondary-active: #FFE98F;
118
+ --color-sentiment-interactive-secondary-neutral: #FFEC9E;
119
+ --color-sentiment-interactive-secondary-neutral-hover: #FFE187;
120
+ --color-sentiment-interactive-secondary-neutral-active: #FFD55F;
121
+ --color-sentiment-interactive-control: #4A3B1C;
122
+ --color-sentiment-interactive-control-hover: #302612;
123
+ --color-sentiment-interactive-control-active: #2C2311;
124
+ --color-sentiment-background-surface: #FFF7D7;
125
+ --color-sentiment-background-surface-hover: #FFF0B2;
126
+ --color-sentiment-background-surface-active: #FFE98F;
119
127
  }
120
-
121
-
122
- .wds-sentiment-proposition-light-elevated {
123
- --color-sentiment-content-primary: #FFFFFF;
124
- --color-sentiment-content-primary-hover: #EAF9F9;
125
- --color-sentiment-content-primary-active: #D5F4F4;
126
- --color-sentiment-interactive-primary: #E0F7F7;
127
- --color-sentiment-interactive-primary-hover: #CAF1F1;
128
- --color-sentiment-interactive-primary-active: #B6ECEC;
129
- --color-sentiment-interactive-secondary: #054D4D;
130
- --color-sentiment-interactive-secondary-hover: #043A3A;
131
- --color-sentiment-interactive-secondary-active: #022626;
132
- --color-sentiment-interactive-secondary-neutral: #1F6161;
133
- --color-sentiment-interactive-secondary-neutral-hover: #247070;
134
- --color-sentiment-interactive-secondary-neutral-active: #298080;
135
- --color-sentiment-interactive-control: #054D4D;
136
- --color-sentiment-interactive-control-hover: #043A3A;
137
- --color-sentiment-interactive-control-active: #022626;
138
- --color-sentiment-background-surface: #054D4D;
139
- --color-sentiment-background-surface-hover: #043A3A;
140
- --color-sentiment-background-surface-active: #022626;
141
- --color-sentiment-border-overlay: rgba(255,255,255,0.30196);
128
+ .np-theme-personal.wds-sentiment-surface-warning-elevated,
129
+ .np-theme-business.wds-sentiment-surface-warning-elevated,
130
+ .np-theme-platform.wds-sentiment-surface-warning-elevated,
131
+ .np-theme-personal--bright-green.wds-sentiment-surface-warning-elevated,
132
+ .np-theme-business--bright-green.wds-sentiment-surface-warning-elevated {
133
+ --color-sentiment-content-primary: #4A3B1C;
134
+ --color-sentiment-content-primary-hover: #302612;
135
+ --color-sentiment-content-primary-active: #2C2311;
136
+ --color-sentiment-interactive-primary: #4A3B1C;
137
+ --color-sentiment-interactive-primary-hover: #302612;
138
+ --color-sentiment-interactive-primary-active: #2C2311;
139
+ --color-sentiment-interactive-secondary: #FFD11A;
140
+ --color-sentiment-interactive-secondary-hover: #FFBF0F;
141
+ --color-sentiment-interactive-secondary-active: #FFBB00;
142
+ --color-sentiment-interactive-secondary-neutral: #FFEC9E;
143
+ --color-sentiment-interactive-secondary-neutral-hover: #FFEDB8;
144
+ --color-sentiment-interactive-secondary-neutral-active: #FFF2CC;
145
+ --color-sentiment-interactive-control: #FFD11A;
146
+ --color-sentiment-interactive-control-hover: #FFBF0F;
147
+ --color-sentiment-interactive-control-active: #FFBB00;
148
+ --color-sentiment-background-surface: #FFD11A;
149
+ --color-sentiment-background-surface-hover: #FFBF0F;
150
+ --color-sentiment-background-surface-active: #FFBB00;
142
151
  }
143
-
144
-
145
- .wds-sentiment-success-light-base {
152
+ .np-theme-personal--dark.wds-sentiment-surface-warning-base,
153
+ .np-theme-business--dark.wds-sentiment-surface-warning-base,
154
+ .np-theme-personal--forest-green.wds-sentiment-surface-warning-base,
155
+ .np-theme-business--forest-green.wds-sentiment-surface-warning-base,
156
+ .np-theme-platform--forest-green.wds-sentiment-surface-warning-base {
157
+ --color-sentiment-content-primary: #FADC65;
158
+ --color-sentiment-content-primary-hover: #F9D648;
159
+ --color-sentiment-content-primary-active: #F8CD20;
160
+ --color-sentiment-interactive-primary: #FADC65;
161
+ --color-sentiment-interactive-primary-hover: #F9D648;
162
+ --color-sentiment-interactive-primary-active: #F8CD20;
163
+ --color-sentiment-interactive-secondary: #3A3523;
164
+ --color-sentiment-interactive-secondary-hover: #504930;
165
+ --color-sentiment-interactive-secondary-active: #665D3D;
166
+ --color-sentiment-interactive-secondary-neutral: #4D462A;
167
+ --color-sentiment-interactive-secondary-neutral-hover: #5D532F;
168
+ --color-sentiment-interactive-secondary-neutral-active: #685D33;
169
+ --color-sentiment-interactive-control: #3A3523;
170
+ --color-sentiment-interactive-control-hover: #504930;
171
+ --color-sentiment-interactive-control-active: #665D3D;
172
+ --color-sentiment-background-surface: #3A3523;
173
+ --color-sentiment-background-surface-hover: #504930;
174
+ --color-sentiment-background-surface-active: #665D3D;
175
+ }
176
+ .np-theme-personal--dark.wds-sentiment-surface-warning-elevated,
177
+ .np-theme-business--dark.wds-sentiment-surface-warning-elevated,
178
+ .np-theme-personal--forest-green.wds-sentiment-surface-warning-elevated,
179
+ .np-theme-business--forest-green.wds-sentiment-surface-warning-elevated,
180
+ .np-theme-platform--forest-green.wds-sentiment-surface-warning-elevated {
181
+ --color-sentiment-content-primary: #3A3523;
182
+ --color-sentiment-content-primary-hover: #504930;
183
+ --color-sentiment-content-primary-active: #665D3D;
184
+ --color-sentiment-interactive-primary: #3A3523;
185
+ --color-sentiment-interactive-primary-hover: #504930;
186
+ --color-sentiment-interactive-primary-active: #665D3D;
187
+ --color-sentiment-interactive-secondary: #FADC65;
188
+ --color-sentiment-interactive-secondary-hover: #F9D648;
189
+ --color-sentiment-interactive-secondary-active: #F8CD20;
190
+ --color-sentiment-interactive-secondary-neutral: #E3C85D;
191
+ --color-sentiment-interactive-secondary-neutral-hover: #DFC044;
192
+ --color-sentiment-interactive-secondary-neutral-active: #D9B526;
193
+ --color-sentiment-interactive-control: #FADC65;
194
+ --color-sentiment-interactive-control-hover: #F9D648;
195
+ --color-sentiment-interactive-control-active: #F8CD20;
196
+ --color-sentiment-background-surface: #FADC65;
197
+ --color-sentiment-background-surface-hover: #F9D648;
198
+ --color-sentiment-background-surface-active: #F8CD20;
199
+ }
200
+ .np-theme-personal.wds-sentiment-surface-success-base,
201
+ .np-theme-business.wds-sentiment-surface-success-base,
202
+ .np-theme-platform.wds-sentiment-surface-success-base,
203
+ .np-theme-personal--bright-green.wds-sentiment-surface-success-base,
204
+ .np-theme-business--bright-green.wds-sentiment-surface-success-base {
146
205
  --color-sentiment-content-primary: #054D28;
147
206
  --color-sentiment-content-primary-hover: #043A1E;
148
207
  --color-sentiment-content-primary-active: #022614;
@@ -161,11 +220,12 @@
161
220
  --color-sentiment-background-surface: #E2F6D5;
162
221
  --color-sentiment-background-surface-hover: #D3F2C0;
163
222
  --color-sentiment-background-surface-active: #C5EDAB;
164
- --color-sentiment-border-overlay: rgba(5,77,40,0.30196);
165
223
  }
166
-
167
-
168
- .wds-sentiment-success-light-elevated {
224
+ .np-theme-personal.wds-sentiment-surface-success-elevated,
225
+ .np-theme-business.wds-sentiment-surface-success-elevated,
226
+ .np-theme-platform.wds-sentiment-surface-success-elevated,
227
+ .np-theme-personal--bright-green.wds-sentiment-surface-success-elevated,
228
+ .np-theme-business--bright-green.wds-sentiment-surface-success-elevated {
169
229
  --color-sentiment-content-primary: #CEF1B8;
170
230
  --color-sentiment-content-primary-hover: #E0FFCC;
171
231
  --color-sentiment-content-primary-active: #E1F4D4;
@@ -184,126 +244,132 @@
184
244
  --color-sentiment-background-surface: #054D28;
185
245
  --color-sentiment-background-surface-hover: #043A1E;
186
246
  --color-sentiment-background-surface-active: #022614;
187
- --color-sentiment-border-overlay: rgba(206,241,184,0.30196);
188
247
  }
189
-
190
-
191
- .wds-sentiment-warning-light-base {
192
- --color-sentiment-content-primary: #4A3B1C;
193
- --color-sentiment-content-primary-hover: #302612;
194
- --color-sentiment-content-primary-active: #2C2311;
195
- --color-sentiment-interactive-primary: #FFD11A;
196
- --color-sentiment-interactive-primary-hover: #FFBF0F;
197
- --color-sentiment-interactive-primary-active: #FFBB00;
198
- --color-sentiment-interactive-secondary: #FFF7D7;
199
- --color-sentiment-interactive-secondary-hover: #FFF0B2;
200
- --color-sentiment-interactive-secondary-active: #FFE98F;
201
- --color-sentiment-interactive-secondary-neutral: #FFEC9E;
202
- --color-sentiment-interactive-secondary-neutral-hover: #FFE187;
203
- --color-sentiment-interactive-secondary-neutral-active: #FFD55F;
204
- --color-sentiment-interactive-control: #4A3B1C;
205
- --color-sentiment-interactive-control-hover: #302612;
206
- --color-sentiment-interactive-control-active: #2C2311;
207
- --color-sentiment-background-surface: #FFF7D7;
208
- --color-sentiment-background-surface-hover: #FFF0B2;
209
- --color-sentiment-background-surface-active: #FFE98F;
210
- --color-sentiment-border-overlay: rgba(74,59,28,0.30196);
248
+ .np-theme-personal--dark.wds-sentiment-surface-success-base,
249
+ .np-theme-business--dark.wds-sentiment-surface-success-base,
250
+ .np-theme-personal--forest-green.wds-sentiment-surface-success-base,
251
+ .np-theme-business--forest-green.wds-sentiment-surface-success-base,
252
+ .np-theme-platform--forest-green.wds-sentiment-surface-success-base {
253
+ --color-sentiment-content-primary: #CEF1B8;
254
+ --color-sentiment-content-primary-hover: #E0FFCC;
255
+ --color-sentiment-content-primary-active: #E1F4D4;
256
+ --color-sentiment-interactive-primary: #CEF1B8;
257
+ --color-sentiment-interactive-primary-hover: #E0FFCC;
258
+ --color-sentiment-interactive-primary-active: #E1F4D4;
259
+ --color-sentiment-interactive-secondary: #054D28;
260
+ --color-sentiment-interactive-secondary-hover: #043A1E;
261
+ --color-sentiment-interactive-secondary-active: #022614;
262
+ --color-sentiment-interactive-secondary-neutral: #256A43;
263
+ --color-sentiment-interactive-secondary-neutral-hover: #2A794C;
264
+ --color-sentiment-interactive-secondary-neutral-active: #329057;
265
+ --color-sentiment-interactive-control: #054D28;
266
+ --color-sentiment-interactive-control-hover: #043A1E;
267
+ --color-sentiment-interactive-control-active: #022614;
268
+ --color-sentiment-background-surface: #054D28;
269
+ --color-sentiment-background-surface-hover: #043A1E;
270
+ --color-sentiment-background-surface-active: #022614;
211
271
  }
212
-
213
-
214
- .wds-sentiment-warning-light-elevated {
215
- --color-sentiment-content-primary: #4A3B1C;
216
- --color-sentiment-content-primary-hover: #302612;
217
- --color-sentiment-content-primary-active: #2C2311;
218
- --color-sentiment-interactive-primary: #4A3B1C;
219
- --color-sentiment-interactive-primary-hover: #302612;
220
- --color-sentiment-interactive-primary-active: #2C2311;
221
- --color-sentiment-interactive-secondary: #FFD11A;
222
- --color-sentiment-interactive-secondary-hover: #FFBF0F;
223
- --color-sentiment-interactive-secondary-active: #FFBB00;
224
- --color-sentiment-interactive-secondary-neutral: #FFEC9E;
225
- --color-sentiment-interactive-secondary-neutral-hover: #FFEDB8;
226
- --color-sentiment-interactive-secondary-neutral-active: #FFF2CC;
227
- --color-sentiment-interactive-control: #FFD11A;
228
- --color-sentiment-interactive-control-hover: #FFBF0F;
229
- --color-sentiment-interactive-control-active: #FFBB00;
230
- --color-sentiment-background-surface: #FFD11A;
231
- --color-sentiment-background-surface-hover: #FFBF0F;
232
- --color-sentiment-background-surface-active: #FFBB00;
233
- --color-sentiment-border-overlay: rgba(74,59,28,0.30196);
272
+ .np-theme-personal--dark.wds-sentiment-surface-success-elevated,
273
+ .np-theme-business--dark.wds-sentiment-surface-success-elevated,
274
+ .np-theme-personal--forest-green.wds-sentiment-surface-success-elevated,
275
+ .np-theme-business--forest-green.wds-sentiment-surface-success-elevated,
276
+ .np-theme-platform--forest-green.wds-sentiment-surface-success-elevated {
277
+ --color-sentiment-content-primary: #252C20;
278
+ --color-sentiment-content-primary-hover: #323B2B;
279
+ --color-sentiment-content-primary-active: #3E4A36;
280
+ --color-sentiment-interactive-primary: #252C20;
281
+ --color-sentiment-interactive-primary-hover: #323B2B;
282
+ --color-sentiment-interactive-primary-active: #3E4A36;
283
+ --color-sentiment-interactive-secondary: #BAE5A0;
284
+ --color-sentiment-interactive-secondary-hover: #C8EAB3;
285
+ --color-sentiment-interactive-secondary-active: #D6F0C7;
286
+ --color-sentiment-interactive-secondary-neutral: #A8CF91;
287
+ --color-sentiment-interactive-secondary-neutral-hover: #94C478;
288
+ --color-sentiment-interactive-secondary-neutral-active: #83BB63;
289
+ --color-sentiment-interactive-control: #BAE5A0;
290
+ --color-sentiment-interactive-control-hover: #C8EAB3;
291
+ --color-sentiment-interactive-control-active: #D6F0C7;
292
+ --color-sentiment-background-surface: #BAE5A0;
293
+ --color-sentiment-background-surface-hover: #C8EAB3;
294
+ --color-sentiment-background-surface-active: #D6F0C7;
234
295
  }
235
-
236
-
237
- .wds-sentiment-negative-dark-base {
238
- --color-sentiment-content-primary: #FFA8AD;
239
- --color-sentiment-content-primary-hover: #FFBDC0;
240
- --color-sentiment-content-primary-active: #FFD1D3;
241
- --color-sentiment-interactive-primary: #FFA8AD;
242
- --color-sentiment-interactive-primary-hover: #FFBDC0;
243
- --color-sentiment-interactive-primary-active: #FFD1D3;
244
- --color-sentiment-interactive-secondary: #410B0D;
245
- --color-sentiment-interactive-secondary-hover: #641115;
246
- --color-sentiment-interactive-secondary-active: #761418;
247
- --color-sentiment-interactive-secondary-neutral: #601013;
248
- --color-sentiment-interactive-secondary-neutral-hover: #7A1519;
249
- --color-sentiment-interactive-secondary-neutral-active: #90181D;
250
- --color-sentiment-interactive-control: #410B0D;
251
- --color-sentiment-interactive-control-hover: #641115;
252
- --color-sentiment-interactive-control-active: #761418;
253
- --color-sentiment-background-surface: #410B0D;
254
- --color-sentiment-background-surface-hover: #641115;
255
- --color-sentiment-background-surface-active: #761418;
256
- --color-sentiment-border-overlay: rgba(255,168,173,0.30196);
296
+ .np-theme-personal.wds-sentiment-surface-neutral-base,
297
+ .np-theme-business.wds-sentiment-surface-neutral-base,
298
+ .np-theme-platform.wds-sentiment-surface-neutral-base,
299
+ .np-theme-personal--bright-green.wds-sentiment-surface-neutral-base,
300
+ .np-theme-business--bright-green.wds-sentiment-surface-neutral-base {
301
+ --color-sentiment-content-primary: #454745;
302
+ --color-sentiment-content-primary-hover: #353635;
303
+ --color-sentiment-content-primary-active: #232423;
304
+ --color-sentiment-interactive-primary: #454745;
305
+ --color-sentiment-interactive-primary-hover: #353635;
306
+ --color-sentiment-interactive-primary-active: #232423;
307
+ --color-sentiment-interactive-secondary: rgba(62, 59, 7, 0.07);
308
+ --color-sentiment-interactive-secondary-hover: rgba(62, 59, 7, 0.12);
309
+ --color-sentiment-interactive-secondary-active: rgba(62, 59, 7, 0.17);
310
+ --color-sentiment-interactive-secondary-neutral: rgba(62, 59, 7, 0.07);
311
+ --color-sentiment-interactive-secondary-neutral-hover: rgba(62, 59, 7, 0.12);
312
+ --color-sentiment-interactive-secondary-neutral-active: rgba(62, 59, 7, 0.17);
313
+ --color-sentiment-interactive-control: #F1F1ED;
314
+ --color-sentiment-interactive-control-hover: #E7E7E1;
315
+ --color-sentiment-interactive-control-active: #DFDED5;
316
+ --color-sentiment-background-surface: rgba(62, 59, 7, 0.07);
317
+ --color-sentiment-background-surface-hover: rgba(62, 59, 7, 0.12);
318
+ --color-sentiment-background-surface-active: rgba(62, 59, 7, 0.17);
257
319
  }
258
-
259
-
260
- .wds-sentiment-negative-dark-elevated {
261
- --color-sentiment-content-primary: #410B0D;
262
- --color-sentiment-content-primary-hover: #641115;
263
- --color-sentiment-content-primary-active: #761418;
264
- --color-sentiment-interactive-primary: #410B0D;
265
- --color-sentiment-interactive-primary-hover: #641115;
266
- --color-sentiment-interactive-primary-active: #761418;
267
- --color-sentiment-interactive-secondary: #FFA8AD;
268
- --color-sentiment-interactive-secondary-hover: #FFBDC0;
269
- --color-sentiment-interactive-secondary-active: #FFD1D3;
270
- --color-sentiment-interactive-secondary-neutral: #D9898D;
271
- --color-sentiment-interactive-secondary-neutral-hover: #D68084;
272
- --color-sentiment-interactive-secondary-neutral-active: #D06C71;
273
- --color-sentiment-interactive-control: #FFA8AD;
274
- --color-sentiment-interactive-control-hover: #FFBDC0;
275
- --color-sentiment-interactive-control-active: #FFD1D3;
276
- --color-sentiment-background-surface: #FFA8AD;
277
- --color-sentiment-background-surface-hover: #FFBDC0;
278
- --color-sentiment-background-surface-active: #FFD1D3;
279
- --color-sentiment-border-overlay: rgba(65,11,13,0.30196);
320
+ .np-theme-personal.wds-sentiment-surface-neutral-elevated,
321
+ .np-theme-business.wds-sentiment-surface-neutral-elevated,
322
+ .np-theme-platform.wds-sentiment-surface-neutral-elevated,
323
+ .np-theme-personal--bright-green.wds-sentiment-surface-neutral-elevated,
324
+ .np-theme-business--bright-green.wds-sentiment-surface-neutral-elevated {
325
+ --color-sentiment-content-primary: #F1F1ED;
326
+ --color-sentiment-content-primary-hover: #E7E7E1;
327
+ --color-sentiment-content-primary-active: #DFDED5;
328
+ --color-sentiment-interactive-primary: #F1F1ED;
329
+ --color-sentiment-interactive-primary-hover: #E7E7E1;
330
+ --color-sentiment-interactive-primary-active: #DFDED5;
331
+ --color-sentiment-interactive-secondary: #454745;
332
+ --color-sentiment-interactive-secondary-hover: #353635;
333
+ --color-sentiment-interactive-secondary-active: #232423;
334
+ --color-sentiment-interactive-secondary-neutral: #585958;
335
+ --color-sentiment-interactive-secondary-neutral-hover: #6A6C6A;
336
+ --color-sentiment-interactive-secondary-neutral-active: #7D7E7D;
337
+ --color-sentiment-interactive-control: #454745;
338
+ --color-sentiment-interactive-control-hover: #353635;
339
+ --color-sentiment-interactive-control-active: #232423;
340
+ --color-sentiment-background-surface: #454745;
341
+ --color-sentiment-background-surface-hover: #353635;
342
+ --color-sentiment-background-surface-active: #232423;
280
343
  }
281
-
282
-
283
- .wds-sentiment-neutral-dark-base {
344
+ .np-theme-personal--dark.wds-sentiment-surface-neutral-base,
345
+ .np-theme-business--dark.wds-sentiment-surface-neutral-base,
346
+ .np-theme-personal--forest-green.wds-sentiment-surface-neutral-base,
347
+ .np-theme-business--forest-green.wds-sentiment-surface-neutral-base,
348
+ .np-theme-platform--forest-green.wds-sentiment-surface-neutral-base {
284
349
  --color-sentiment-content-primary: #F1F1ED;
285
350
  --color-sentiment-content-primary-hover: #E7E7E1;
286
351
  --color-sentiment-content-primary-active: #DFDED5;
287
352
  --color-sentiment-interactive-primary: #F1F1ED;
288
353
  --color-sentiment-interactive-primary-hover: #E7E7E1;
289
354
  --color-sentiment-interactive-primary-active: #DFDED5;
290
- --color-sentiment-interactive-secondary: rgba(255,255,255,0.10196);
291
- --color-sentiment-interactive-secondary-hover: rgba(255,255,255,0.2);
292
- --color-sentiment-interactive-secondary-active: rgba(255,255,255,0.30196);
293
- --color-sentiment-interactive-secondary-neutral: rgba(255,255,255,0.10196);
294
- --color-sentiment-interactive-secondary-neutral-hover: rgba(255,255,255,0.2);
295
- --color-sentiment-interactive-secondary-neutral-active: rgba(255,255,255,0.30196);
355
+ --color-sentiment-interactive-secondary: rgba(255, 255, 255, 0.1);
356
+ --color-sentiment-interactive-secondary-hover: rgba(255, 255, 255, 0.2);
357
+ --color-sentiment-interactive-secondary-active: rgba(255, 255, 255, 0.3);
358
+ --color-sentiment-interactive-secondary-neutral: rgba(255, 255, 255, 0.1);
359
+ --color-sentiment-interactive-secondary-neutral-hover: rgba(255, 255, 255, 0.2);
360
+ --color-sentiment-interactive-secondary-neutral-active: rgba(255, 255, 255, 0.3);
296
361
  --color-sentiment-interactive-control: #2A2C29;
297
362
  --color-sentiment-interactive-control-hover: #414441;
298
363
  --color-sentiment-interactive-control-active: #595B58;
299
- --color-sentiment-background-surface: rgba(255,255,255,0.10196);
300
- --color-sentiment-background-surface-hover: rgba(255,255,255,0.2);
301
- --color-sentiment-background-surface-active: rgba(255,255,255,0.30196);
302
- --color-sentiment-border-overlay: rgba(241,241,237,0.30196);
364
+ --color-sentiment-background-surface: rgba(255, 255, 255, 0.1);
365
+ --color-sentiment-background-surface-hover: rgba(255, 255, 255, 0.2);
366
+ --color-sentiment-background-surface-active: rgba(255, 255, 255, 0.3);
303
367
  }
304
-
305
-
306
- .wds-sentiment-neutral-dark-elevated {
368
+ .np-theme-personal--dark.wds-sentiment-surface-neutral-elevated,
369
+ .np-theme-business--dark.wds-sentiment-surface-neutral-elevated,
370
+ .np-theme-personal--forest-green.wds-sentiment-surface-neutral-elevated,
371
+ .np-theme-business--forest-green.wds-sentiment-surface-neutral-elevated,
372
+ .np-theme-platform--forest-green.wds-sentiment-surface-neutral-elevated {
307
373
  --color-sentiment-content-primary: #2A2C29;
308
374
  --color-sentiment-content-primary-hover: #414441;
309
375
  --color-sentiment-content-primary-active: #595B58;
@@ -322,11 +388,60 @@
322
388
  --color-sentiment-background-surface: #F1F1ED;
323
389
  --color-sentiment-background-surface-hover: #E7E7E1;
324
390
  --color-sentiment-background-surface-active: #DFDED5;
325
- --color-sentiment-border-overlay: rgba(42,44,41,0.30196);
326
391
  }
327
-
328
-
329
- .wds-sentiment-proposition-dark-base {
392
+ .np-theme-personal.wds-sentiment-surface-proposition-base,
393
+ .np-theme-business.wds-sentiment-surface-proposition-base,
394
+ .np-theme-platform.wds-sentiment-surface-proposition-base,
395
+ .np-theme-personal--bright-green.wds-sentiment-surface-proposition-base,
396
+ .np-theme-business--bright-green.wds-sentiment-surface-proposition-base {
397
+ --color-sentiment-content-primary: #0E0F0C;
398
+ --color-sentiment-content-primary-hover: #0A2826;
399
+ --color-sentiment-content-primary-active: #074140;
400
+ --color-sentiment-interactive-primary: #054D4D;
401
+ --color-sentiment-interactive-primary-hover: #043A3A;
402
+ --color-sentiment-interactive-primary-active: #022626;
403
+ --color-sentiment-interactive-secondary: #E0F7F7;
404
+ --color-sentiment-interactive-secondary-hover: #CAF1F1;
405
+ --color-sentiment-interactive-secondary-active: #B6ECEC;
406
+ --color-sentiment-interactive-secondary-neutral: #B4D5D5;
407
+ --color-sentiment-interactive-secondary-neutral-hover: #A3CCCC;
408
+ --color-sentiment-interactive-secondary-neutral-active: #9AC6C6;
409
+ --color-sentiment-interactive-control: #E0F7F7;
410
+ --color-sentiment-interactive-control-hover: #CAF1F1;
411
+ --color-sentiment-interactive-control-active: #B6ECEC;
412
+ --color-sentiment-background-surface: #E0F7F7;
413
+ --color-sentiment-background-surface-hover: #CAF1F1;
414
+ --color-sentiment-background-surface-active: #B6ECEC;
415
+ }
416
+ .np-theme-personal.wds-sentiment-surface-proposition-elevated,
417
+ .np-theme-business.wds-sentiment-surface-proposition-elevated,
418
+ .np-theme-platform.wds-sentiment-surface-proposition-elevated,
419
+ .np-theme-personal--bright-green.wds-sentiment-surface-proposition-elevated,
420
+ .np-theme-business--bright-green.wds-sentiment-surface-proposition-elevated {
421
+ --color-sentiment-content-primary: #FFFFFF;
422
+ --color-sentiment-content-primary-hover: #EAF9F9;
423
+ --color-sentiment-content-primary-active: #D5F4F4;
424
+ --color-sentiment-interactive-primary: #E0F7F7;
425
+ --color-sentiment-interactive-primary-hover: #CAF1F1;
426
+ --color-sentiment-interactive-primary-active: #B6ECEC;
427
+ --color-sentiment-interactive-secondary: #054D4D;
428
+ --color-sentiment-interactive-secondary-hover: #043A3A;
429
+ --color-sentiment-interactive-secondary-active: #022626;
430
+ --color-sentiment-interactive-secondary-neutral: #1F6161;
431
+ --color-sentiment-interactive-secondary-neutral-hover: #247070;
432
+ --color-sentiment-interactive-secondary-neutral-active: #298080;
433
+ --color-sentiment-interactive-control: #054D4D;
434
+ --color-sentiment-interactive-control-hover: #043A3A;
435
+ --color-sentiment-interactive-control-active: #022626;
436
+ --color-sentiment-background-surface: #054D4D;
437
+ --color-sentiment-background-surface-hover: #043A3A;
438
+ --color-sentiment-background-surface-active: #022626;
439
+ }
440
+ .np-theme-personal--dark.wds-sentiment-surface-proposition-base,
441
+ .np-theme-business--dark.wds-sentiment-surface-proposition-base,
442
+ .np-theme-personal--forest-green.wds-sentiment-surface-proposition-base,
443
+ .np-theme-business--forest-green.wds-sentiment-surface-proposition-base,
444
+ .np-theme-platform--forest-green.wds-sentiment-surface-proposition-base {
330
445
  --color-sentiment-content-primary: #FFFFFF;
331
446
  --color-sentiment-content-primary-hover: #EAF9F9;
332
447
  --color-sentiment-content-primary-active: #D5F4F4;
@@ -345,11 +460,12 @@
345
460
  --color-sentiment-background-surface: #054D4D;
346
461
  --color-sentiment-background-surface-hover: #043A3A;
347
462
  --color-sentiment-background-surface-active: #022626;
348
- --color-sentiment-border-overlay: rgba(255,255,255,0.30196);
349
463
  }
350
-
351
-
352
- .wds-sentiment-proposition-dark-elevated {
464
+ .np-theme-personal--dark.wds-sentiment-surface-proposition-elevated,
465
+ .np-theme-business--dark.wds-sentiment-surface-proposition-elevated,
466
+ .np-theme-personal--forest-green.wds-sentiment-surface-proposition-elevated,
467
+ .np-theme-business--forest-green.wds-sentiment-surface-proposition-elevated,
468
+ .np-theme-platform--forest-green.wds-sentiment-surface-proposition-elevated {
353
469
  --color-sentiment-content-primary: #0E0F0C;
354
470
  --color-sentiment-content-primary-hover: #0A2826;
355
471
  --color-sentiment-content-primary-active: #074140;
@@ -368,108 +484,4 @@
368
484
  --color-sentiment-background-surface: #E0F7F7;
369
485
  --color-sentiment-background-surface-hover: #CAF1F1;
370
486
  --color-sentiment-background-surface-active: #B6ECEC;
371
- --color-sentiment-border-overlay: rgba(14,15,12,0.30196);
372
- }
373
-
374
-
375
- .wds-sentiment-success-dark-base {
376
- --color-sentiment-content-primary: #CEF1B8;
377
- --color-sentiment-content-primary-hover: #E0FFCC;
378
- --color-sentiment-content-primary-active: #E1F4D4;
379
- --color-sentiment-interactive-primary: #CEF1B8;
380
- --color-sentiment-interactive-primary-hover: #E0FFCC;
381
- --color-sentiment-interactive-primary-active: #E1F4D4;
382
- --color-sentiment-interactive-secondary: #054D28;
383
- --color-sentiment-interactive-secondary-hover: #043A1E;
384
- --color-sentiment-interactive-secondary-active: #022614;
385
- --color-sentiment-interactive-secondary-neutral: #256A43;
386
- --color-sentiment-interactive-secondary-neutral-hover: #2A794C;
387
- --color-sentiment-interactive-secondary-neutral-active: #329057;
388
- --color-sentiment-interactive-control: #054D28;
389
- --color-sentiment-interactive-control-hover: #043A1E;
390
- --color-sentiment-interactive-control-active: #022614;
391
- --color-sentiment-background-surface: #054D28;
392
- --color-sentiment-background-surface-hover: #043A1E;
393
- --color-sentiment-background-surface-active: #022614;
394
- --color-sentiment-border-overlay: rgba(206,241,184,0.30196);
395
- }
396
-
397
-
398
- .wds-sentiment-success-dark-elevated {
399
- --color-sentiment-content-primary: #252C20;
400
- --color-sentiment-content-primary-hover: #323B2B;
401
- --color-sentiment-content-primary-active: #3E4A36;
402
- --color-sentiment-interactive-primary: #252C20;
403
- --color-sentiment-interactive-primary-hover: #323B2B;
404
- --color-sentiment-interactive-primary-active: #3E4A36;
405
- --color-sentiment-interactive-secondary: #BAE5A0;
406
- --color-sentiment-interactive-secondary-hover: #C8EAB3;
407
- --color-sentiment-interactive-secondary-active: #D6F0C7;
408
- --color-sentiment-interactive-secondary-neutral: #A8CF91;
409
- --color-sentiment-interactive-secondary-neutral-hover: #94C478;
410
- --color-sentiment-interactive-secondary-neutral-active: #83BB63;
411
- --color-sentiment-interactive-control: #BAE5A0;
412
- --color-sentiment-interactive-control-hover: #C8EAB3;
413
- --color-sentiment-interactive-control-active: #D6F0C7;
414
- --color-sentiment-background-surface: #BAE5A0;
415
- --color-sentiment-background-surface-hover: #C8EAB3;
416
- --color-sentiment-background-surface-active: #D6F0C7;
417
- --color-sentiment-border-overlay: rgba(37,44,32,0.30196);
418
- }
419
-
420
-
421
- .wds-sentiment-warning-dark-base {
422
- --color-sentiment-content-primary: #FADC65;
423
- --color-sentiment-content-primary-hover: #F9D648;
424
- --color-sentiment-content-primary-active: #F8CD20;
425
- --color-sentiment-interactive-primary: #FADC65;
426
- --color-sentiment-interactive-primary-hover: #F9D648;
427
- --color-sentiment-interactive-primary-active: #F8CD20;
428
- --color-sentiment-interactive-secondary: #3A3523;
429
- --color-sentiment-interactive-secondary-hover: #504930;
430
- --color-sentiment-interactive-secondary-active: #665D3D;
431
- --color-sentiment-interactive-secondary-neutral: #4D462A;
432
- --color-sentiment-interactive-secondary-neutral-hover: #5D532F;
433
- --color-sentiment-interactive-secondary-neutral-active: #685D33;
434
- --color-sentiment-interactive-control: #3A3523;
435
- --color-sentiment-interactive-control-hover: #504930;
436
- --color-sentiment-interactive-control-active: #665D3D;
437
- --color-sentiment-background-surface: #3A3523;
438
- --color-sentiment-background-surface-hover: #504930;
439
- --color-sentiment-background-surface-active: #665D3D;
440
- --color-sentiment-border-overlay: rgba(250,220,101,0.30196);
441
- }
442
-
443
-
444
- .wds-sentiment-warning-dark-elevated {
445
- --color-sentiment-content-primary: #3A3523;
446
- --color-sentiment-content-primary-hover: #504930;
447
- --color-sentiment-content-primary-active: #665D3D;
448
- --color-sentiment-interactive-primary: #3A3523;
449
- --color-sentiment-interactive-primary-hover: #504930;
450
- --color-sentiment-interactive-primary-active: #665D3D;
451
- --color-sentiment-interactive-secondary: #FADC65;
452
- --color-sentiment-interactive-secondary-hover: #F9D648;
453
- --color-sentiment-interactive-secondary-active: #F8CD20;
454
- --color-sentiment-interactive-secondary-neutral: #E3C85D;
455
- --color-sentiment-interactive-secondary-neutral-hover: #DFC044;
456
- --color-sentiment-interactive-secondary-neutral-active: #D9B526;
457
- --color-sentiment-interactive-control: #FADC65;
458
- --color-sentiment-interactive-control-hover: #F9D648;
459
- --color-sentiment-interactive-control-active: #F8CD20;
460
- --color-sentiment-background-surface: #FADC65;
461
- --color-sentiment-background-surface-hover: #F9D648;
462
- --color-sentiment-background-surface-active: #F8CD20;
463
- --color-sentiment-border-overlay: rgba(58,53,35,0.30196);
464
- }
465
-
466
-
467
- .wds-sentiment-surface {
468
- --ring-outline-color: var(--color-sentiment-content-primary, var(--color-content-primary));
469
- }
470
-
471
-
472
- .wds-sentiment-surface--hasBaseStyles {
473
- background-color: var(--color-sentiment-background-surface);
474
- color: var(--color-sentiment-content-primary);
475
487
  }