@transferwise/components 46.145.0 → 46.147.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 (36) hide show
  1. package/build/main.css +509 -551
  2. package/build/nudge/Nudge.js.map +1 -1
  3. package/build/nudge/Nudge.mjs.map +1 -1
  4. package/build/prompt/InfoPrompt/InfoPrompt.js +1 -1
  5. package/build/prompt/InfoPrompt/InfoPrompt.js.map +1 -1
  6. package/build/prompt/InfoPrompt/InfoPrompt.mjs +2 -2
  7. package/build/prompt/InfoPrompt/InfoPrompt.mjs.map +1 -1
  8. package/build/sentimentSurface/SentimentSurface.js +9 -2
  9. package/build/sentimentSurface/SentimentSurface.js.map +1 -1
  10. package/build/sentimentSurface/SentimentSurface.mjs +9 -2
  11. package/build/sentimentSurface/SentimentSurface.mjs.map +1 -1
  12. package/build/styles/main.css +509 -551
  13. package/build/styles/nudge/Nudge.css +11 -0
  14. package/build/styles/sentimentSurface/SentimentSurface.css +325 -337
  15. package/build/types/nudge/Nudge.d.ts +1 -1
  16. package/build/types/nudge/Nudge.d.ts.map +1 -1
  17. package/build/types/prompt/InfoPrompt/InfoPrompt.d.ts +3 -2
  18. package/build/types/prompt/InfoPrompt/InfoPrompt.d.ts.map +1 -1
  19. package/build/types/sentimentSurface/SentimentSurface.d.ts.map +1 -1
  20. package/package.json +24 -20
  21. package/src/criticalBanner/CriticalCommsBanner.test.tsx +1 -1
  22. package/src/main.css +509 -551
  23. package/src/nudge/Nudge.css +11 -0
  24. package/src/nudge/Nudge.less +4 -0
  25. package/src/nudge/Nudge.story.tsx +9 -0
  26. package/src/nudge/Nudge.tsx +2 -1
  27. package/src/prompt/InfoPrompt/InfoPrompt.story.tsx +42 -0
  28. package/src/prompt/InfoPrompt/InfoPrompt.test.tsx +65 -1
  29. package/src/prompt/InfoPrompt/InfoPrompt.tsx +15 -4
  30. package/src/sentimentSurface/SentimentSurface.css +325 -337
  31. package/src/sentimentSurface/SentimentSurface.docs.mdx +2 -0
  32. package/src/sentimentSurface/SentimentSurface.less +2 -322
  33. package/src/sentimentSurface/SentimentSurface.story.tsx +4 -0
  34. package/src/sentimentSurface/SentimentSurface.test.story.tsx +1 -5
  35. package/src/sentimentSurface/SentimentSurface.test.tsx +84 -3
  36. package/src/sentimentSurface/SentimentSurface.tsx +10 -2
package/src/sentimentSurface/SentimentSurface.css CHANGED
@@ -1,15 +1,10 @@
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 {
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ * Generated on Wed, 27 May 2026 15:50:11 GMT
4
+ */
5
+
6
+
7
+ .wds-sentiment-negative-light-base {
13
8
  --color-sentiment-content-primary: #CB272F;
14
9
  --color-sentiment-content-primary-hover: #B8232B;
15
10
  --color-sentiment-content-primary-active: #A72027;
@@ -28,12 +23,11 @@
28
23
  --color-sentiment-background-surface: #FBEAEA;
29
24
  --color-sentiment-background-surface-hover: #F9E1E1;
30
25
  --color-sentiment-background-surface-active: #F8D8D8;
26
+ --color-sentiment-border-overlay: rgba(203,39,47,0.30196);
31
27
  }
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 {
28
+
29
+
30
+ .wds-sentiment-negative-light-elevated {
37
31
  --color-sentiment-content-primary: #FFFFFF;
38
32
  --color-sentiment-content-primary-hover: #F5CCCC;
39
33
  --color-sentiment-content-primary-active: #F1B7B7;
@@ -45,163 +39,110 @@
45
39
  --color-sentiment-interactive-secondary-active: #A72027;
46
40
  --color-sentiment-interactive-secondary-neutral: #9B141B;
47
41
  --color-sentiment-interactive-secondary-neutral-hover: #831116;
48
- --color-sentiment-interactive-secondary-neutral-active: #6D0e13;
42
+ --color-sentiment-interactive-secondary-neutral-active: #6D0E13;
49
43
  --color-sentiment-interactive-control: #CB272F;
50
44
  --color-sentiment-interactive-control-hover: #B8232B;
51
45
  --color-sentiment-interactive-control-active: #A72027;
52
46
  --color-sentiment-background-surface: #CB272F;
53
47
  --color-sentiment-background-surface-hover: #B8232B;
54
48
  --color-sentiment-background-surface-active: #A72027;
49
+ --color-sentiment-border-overlay: rgba(255,255,255,0.30196);
55
50
  }
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;
79
- }
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;
103
- }
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;
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);
127
73
  }
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;
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);
151
96
  }
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;
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);
175
119
  }
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;
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);
199
142
  }
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 {
143
+
144
+
145
+ .wds-sentiment-success-light-base {
205
146
  --color-sentiment-content-primary: #054D28;
206
147
  --color-sentiment-content-primary-hover: #043A1E;
207
148
  --color-sentiment-content-primary-active: #022614;
@@ -220,12 +161,11 @@
220
161
  --color-sentiment-background-surface: #E2F6D5;
221
162
  --color-sentiment-background-surface-hover: #D3F2C0;
222
163
  --color-sentiment-background-surface-active: #C5EDAB;
164
+ --color-sentiment-border-overlay: rgba(5,77,40,0.30196);
223
165
  }
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 {
166
+
167
+
168
+ .wds-sentiment-success-light-elevated {
229
169
  --color-sentiment-content-primary: #CEF1B8;
230
170
  --color-sentiment-content-primary-hover: #E0FFCC;
231
171
  --color-sentiment-content-primary-active: #E1F4D4;
@@ -244,132 +184,126 @@
244
184
  --color-sentiment-background-surface: #054D28;
245
185
  --color-sentiment-background-surface-hover: #043A1E;
246
186
  --color-sentiment-background-surface-active: #022614;
187
+ --color-sentiment-border-overlay: rgba(206,241,184,0.30196);
247
188
  }
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;
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);
271
211
  }
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;
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);
295
234
  }
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);
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);
319
257
  }
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;
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);
343
280
  }
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 {
281
+
282
+
283
+ .wds-sentiment-neutral-dark-base {
349
284
  --color-sentiment-content-primary: #F1F1ED;
350
285
  --color-sentiment-content-primary-hover: #E7E7E1;
351
286
  --color-sentiment-content-primary-active: #DFDED5;
352
287
  --color-sentiment-interactive-primary: #F1F1ED;
353
288
  --color-sentiment-interactive-primary-hover: #E7E7E1;
354
289
  --color-sentiment-interactive-primary-active: #DFDED5;
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);
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);
361
296
  --color-sentiment-interactive-control: #2A2C29;
362
297
  --color-sentiment-interactive-control-hover: #414441;
363
298
  --color-sentiment-interactive-control-active: #595B58;
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);
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);
367
303
  }
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 {
304
+
305
+
306
+ .wds-sentiment-neutral-dark-elevated {
373
307
  --color-sentiment-content-primary: #2A2C29;
374
308
  --color-sentiment-content-primary-hover: #414441;
375
309
  --color-sentiment-content-primary-active: #595B58;
@@ -388,60 +322,11 @@
388
322
  --color-sentiment-background-surface: #F1F1ED;
389
323
  --color-sentiment-background-surface-hover: #E7E7E1;
390
324
  --color-sentiment-background-surface-active: #DFDED5;
325
+ --color-sentiment-border-overlay: rgba(42,44,41,0.30196);
391
326
  }
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 {
327
+
328
+
329
+ .wds-sentiment-proposition-dark-base {
445
330
  --color-sentiment-content-primary: #FFFFFF;
446
331
  --color-sentiment-content-primary-hover: #EAF9F9;
447
332
  --color-sentiment-content-primary-active: #D5F4F4;
@@ -460,12 +345,11 @@
460
345
  --color-sentiment-background-surface: #054D4D;
461
346
  --color-sentiment-background-surface-hover: #043A3A;
462
347
  --color-sentiment-background-surface-active: #022626;
348
+ --color-sentiment-border-overlay: rgba(255,255,255,0.30196);
463
349
  }
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 {
350
+
351
+
352
+ .wds-sentiment-proposition-dark-elevated {
469
353
  --color-sentiment-content-primary: #0E0F0C;
470
354
  --color-sentiment-content-primary-hover: #0A2826;
471
355
  --color-sentiment-content-primary-active: #074140;
@@ -484,4 +368,108 @@
484
368
  --color-sentiment-background-surface: #E0F7F7;
485
369
  --color-sentiment-background-surface-hover: #CAF1F1;
486
370
  --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);
487
475
  }