@transferwise/components 46.115.0 → 46.116.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 (65) hide show
  1. package/build/criticalBanner/CriticalCommsBanner.js +1 -0
  2. package/build/criticalBanner/CriticalCommsBanner.js.map +1 -1
  3. package/build/criticalBanner/CriticalCommsBanner.mjs +1 -0
  4. package/build/criticalBanner/CriticalCommsBanner.mjs.map +1 -1
  5. package/build/main.css +428 -36
  6. package/build/mocks.js +7 -0
  7. package/build/mocks.js.map +1 -1
  8. package/build/mocks.mjs +7 -1
  9. package/build/mocks.mjs.map +1 -1
  10. package/build/sentimentSurface/SentimentSurface.js +43 -0
  11. package/build/sentimentSurface/SentimentSurface.js.map +1 -0
  12. package/build/sentimentSurface/SentimentSurface.mjs +39 -0
  13. package/build/sentimentSurface/SentimentSurface.mjs.map +1 -0
  14. package/build/sentimentSurface/classMap.js +17 -0
  15. package/build/sentimentSurface/classMap.js.map +1 -0
  16. package/build/sentimentSurface/classMap.mjs +14 -0
  17. package/build/sentimentSurface/classMap.mjs.map +1 -0
  18. package/build/statusIcon/StatusIcon.js +10 -1
  19. package/build/statusIcon/StatusIcon.js.map +1 -1
  20. package/build/statusIcon/StatusIcon.mjs +10 -1
  21. package/build/statusIcon/StatusIcon.mjs.map +1 -1
  22. package/build/styles/main.css +428 -36
  23. package/build/styles/sentimentSurface/SentimentSurface.css +424 -0
  24. package/build/styles/statusIcon/StatusIcon.css +4 -36
  25. package/build/types/criticalBanner/CriticalCommsBanner.d.ts +2 -1
  26. package/build/types/criticalBanner/CriticalCommsBanner.d.ts.map +1 -1
  27. package/build/types/mocks.d.ts +1 -0
  28. package/build/types/mocks.d.ts.map +1 -1
  29. package/build/types/sentimentSurface/SentimentSurface.d.ts +30 -0
  30. package/build/types/sentimentSurface/SentimentSurface.d.ts.map +1 -0
  31. package/build/types/sentimentSurface/SentimentSurface.types.d.ts +80 -0
  32. package/build/types/sentimentSurface/SentimentSurface.types.d.ts.map +1 -0
  33. package/build/types/sentimentSurface/classMap.d.ts +4 -0
  34. package/build/types/sentimentSurface/classMap.d.ts.map +1 -0
  35. package/build/types/sentimentSurface/index.d.ts +3 -0
  36. package/build/types/sentimentSurface/index.d.ts.map +1 -0
  37. package/build/types/statusIcon/StatusIcon.d.ts.map +1 -1
  38. package/build/types/test-utils/window-mock.d.ts +1 -0
  39. package/build/types/test-utils/window-mock.d.ts.map +1 -1
  40. package/package.json +3 -8
  41. package/src/criticalBanner/CriticalCommsBanner.tsx +3 -2
  42. package/src/expressiveMoneyInput/ExpressiveMoneyInput.spec.tsx +229 -0
  43. package/src/expressiveMoneyInput/amountInput/AmountInput.spec.tsx +282 -0
  44. package/src/expressiveMoneyInput/currencySelector/CurrencySelector.spec.tsx +160 -0
  45. package/src/inputs/SelectInput.spec.tsx +7 -1
  46. package/src/main.css +428 -36
  47. package/src/main.less +2 -0
  48. package/src/mocks.ts +7 -0
  49. package/src/moneyInput/MoneyInput.spec.tsx +9 -1
  50. package/src/provider/theme/ThemeProvider.story.tsx +78 -11
  51. package/src/sentimentSurface/SentimentSurface.css +424 -0
  52. package/src/sentimentSurface/SentimentSurface.docs.mdx +527 -0
  53. package/src/sentimentSurface/SentimentSurface.less +296 -0
  54. package/src/sentimentSurface/SentimentSurface.spec.tsx +140 -0
  55. package/src/sentimentSurface/SentimentSurface.story.tsx +340 -0
  56. package/src/sentimentSurface/SentimentSurface.tests.story.tsx +123 -0
  57. package/src/sentimentSurface/SentimentSurface.tsx +72 -0
  58. package/src/sentimentSurface/SentimentSurface.types.ts +104 -0
  59. package/src/sentimentSurface/classMap.ts +15 -0
  60. package/src/sentimentSurface/index.ts +8 -0
  61. package/src/statusIcon/StatusIcon.css +4 -36
  62. package/src/statusIcon/StatusIcon.less +3 -41
  63. package/src/statusIcon/StatusIcon.tsx +14 -1
  64. package/src/test-utils/jest.setup.ts +0 -5
  65. package/src/test-utils/window-mock.ts +5 -0
package/build/styles/main.css CHANGED
@@ -1,3 +1,427 @@
1
+ .wds-sentiment-surface {
2
+ background-color: var(--color-sentiment-background-surface);
3
+ color: var(--color-sentiment-content-primary);
4
+ }
5
+ .np-theme-personal .wds-sentiment-surface-negative-base,
6
+ .np-theme-personal--bright-green .wds-sentiment-surface-negative-base {
7
+ --color-sentiment-content-primary: #CB272F;
8
+ --color-sentiment-content-primary-hover: #B8232B;
9
+ --color-sentiment-content-primary-active: #A72027;
10
+ --color-sentiment-interactive-primary: #CB272F;
11
+ --color-sentiment-interactive-primary-hover: #B8232B;
12
+ --color-sentiment-interactive-primary-active: #A72027;
13
+ --color-sentiment-interactive-secondary: #FBEAEA;
14
+ --color-sentiment-interactive-secondary-hover: #F9E1E1;
15
+ --color-sentiment-interactive-secondary-active: #F8D8D8;
16
+ --color-sentiment-interactive-secondary-neutral: #F5D3D4;
17
+ --color-sentiment-interactive-secondary-neutral-hover: #F0BDBE;
18
+ --color-sentiment-interactive-secondary-neutral-active: #ECACAD;
19
+ --color-sentiment-interactive-control: #FBEAEA;
20
+ --color-sentiment-interactive-control-hover: #F9E1E1;
21
+ --color-sentiment-interactive-control-active: #F8D8D8;
22
+ --color-sentiment-background-surface: #FBEAEA;
23
+ --color-sentiment-background-surface-hover: #F9E1E1;
24
+ --color-sentiment-background-surface-active: #F8D8D8;
25
+ }
26
+ .np-theme-personal .wds-sentiment-surface-negative-elevated,
27
+ .np-theme-personal--bright-green .wds-sentiment-surface-negative-elevated {
28
+ --color-sentiment-content-primary: #FFFFFF;
29
+ --color-sentiment-content-primary-hover: #F5CCCC;
30
+ --color-sentiment-content-primary-active: #F1B7B7;
31
+ --color-sentiment-interactive-primary: #FBEAEA;
32
+ --color-sentiment-interactive-primary-hover: #F5CCCC;
33
+ --color-sentiment-interactive-primary-active: #F1B7B7;
34
+ --color-sentiment-interactive-secondary: #CB272F;
35
+ --color-sentiment-interactive-secondary-hover: #B8232B;
36
+ --color-sentiment-interactive-secondary-active: #A72027;
37
+ --color-sentiment-interactive-secondary-neutral: #9B141B;
38
+ --color-sentiment-interactive-secondary-neutral-hover: #831116;
39
+ --color-sentiment-interactive-secondary-neutral-active: #6D0E13;
40
+ --color-sentiment-interactive-control: #CB272F;
41
+ --color-sentiment-interactive-control-hover: #B8232B;
42
+ --color-sentiment-interactive-control-active: #A72027;
43
+ --color-sentiment-background-surface: #90000D;
44
+ --color-sentiment-background-surface-hover: #B8232B;
45
+ --color-sentiment-background-surface-active: #A72027;
46
+ }
47
+ .np-theme-personal--dark .wds-sentiment-surface-negative-base,
48
+ .np-theme-personal--forest-green .wds-sentiment-surface-negative-base {
49
+ --color-sentiment-content-primary: #FFA8AD;
50
+ --color-sentiment-content-primary-hover: #FFBDC0;
51
+ --color-sentiment-content-primary-active: #FFD1D3;
52
+ --color-sentiment-interactive-primary: #FFA8AD;
53
+ --color-sentiment-interactive-primary-hover: #FFBDC0;
54
+ --color-sentiment-interactive-primary-active: #FFD1D3;
55
+ --color-sentiment-interactive-secondary: #410B0D;
56
+ --color-sentiment-interactive-secondary-hover: #641115;
57
+ --color-sentiment-interactive-secondary-active: #761418;
58
+ --color-sentiment-interactive-secondary-neutral: #601013;
59
+ --color-sentiment-interactive-secondary-neutral-hover: #7A1519;
60
+ --color-sentiment-interactive-secondary-neutral-active: #90181D;
61
+ --color-sentiment-interactive-control: #410B0D;
62
+ --color-sentiment-interactive-control-hover: #641115;
63
+ --color-sentiment-interactive-control-active: #761418;
64
+ --color-sentiment-background-surface: #410B0D;
65
+ --color-sentiment-background-surface-hover: #641115;
66
+ --color-sentiment-background-surface-active: #761418;
67
+ }
68
+ .np-theme-personal--dark .wds-sentiment-surface-negative-elevated,
69
+ .np-theme-personal--forest-green .wds-sentiment-surface-negative-elevated {
70
+ --color-sentiment-content-primary: #410B0D;
71
+ --color-sentiment-content-primary-hover: #641115;
72
+ --color-sentiment-content-primary-active: #761418;
73
+ --color-sentiment-interactive-primary: #410B0D;
74
+ --color-sentiment-interactive-primary-hover: #641115;
75
+ --color-sentiment-interactive-primary-active: #761418;
76
+ --color-sentiment-interactive-secondary: #FFA8AD;
77
+ --color-sentiment-interactive-secondary-hover: #FFBDC0;
78
+ --color-sentiment-interactive-secondary-active: #FFD1D3;
79
+ --color-sentiment-interactive-secondary-neutral: #D9898D;
80
+ --color-sentiment-interactive-secondary-neutral-hover: #D68084;
81
+ --color-sentiment-interactive-secondary-neutral-active: #D06C71;
82
+ --color-sentiment-interactive-control: #FFA8AD;
83
+ --color-sentiment-interactive-control-hover: #FFBDC0;
84
+ --color-sentiment-interactive-control-active: #FFD1D3;
85
+ --color-sentiment-background-surface: #FFA8AD;
86
+ --color-sentiment-background-surface-hover: #FFBDC0;
87
+ --color-sentiment-background-surface-active: #FFD1D3;
88
+ }
89
+ .np-theme-personal .wds-sentiment-surface-warning-base,
90
+ .np-theme-personal--bright-green .wds-sentiment-surface-warning-base {
91
+ --color-sentiment-content-primary: #4A3B1C;
92
+ --color-sentiment-content-primary-hover: #302612;
93
+ --color-sentiment-content-primary-active: #2C2311;
94
+ --color-sentiment-interactive-primary: #FFD11A;
95
+ --color-sentiment-interactive-primary-hover: #FFBF0F;
96
+ --color-sentiment-interactive-primary-active: #FFBB00;
97
+ --color-sentiment-interactive-secondary: #FFF7D7;
98
+ --color-sentiment-interactive-secondary-hover: #FFF0B2;
99
+ --color-sentiment-interactive-secondary-active: #FFE98F;
100
+ --color-sentiment-interactive-secondary-neutral: #FFEC9E;
101
+ --color-sentiment-interactive-secondary-neutral-hover: #FFE187;
102
+ --color-sentiment-interactive-secondary-neutral-active: #FFD55F;
103
+ --color-sentiment-interactive-control: #4A3B1C;
104
+ --color-sentiment-interactive-control-hover: #302612;
105
+ --color-sentiment-interactive-control-active: #2C2311;
106
+ --color-sentiment-background-surface: #FFF7D7;
107
+ --color-sentiment-background-surface-hover: #FFF0B2;
108
+ --color-sentiment-background-surface-active: #FFE98F;
109
+ }
110
+ .np-theme-personal .wds-sentiment-surface-warning-elevated,
111
+ .np-theme-personal--bright-green .wds-sentiment-surface-warning-elevated {
112
+ --color-sentiment-content-primary: #4A3B1C;
113
+ --color-sentiment-content-primary-hover: #302612;
114
+ --color-sentiment-content-primary-active: #2C2311;
115
+ --color-sentiment-interactive-primary: #4A3B1C;
116
+ --color-sentiment-interactive-primary-hover: #302612;
117
+ --color-sentiment-interactive-primary-active: #2C2311;
118
+ --color-sentiment-interactive-secondary: #FFD11A;
119
+ --color-sentiment-interactive-secondary-hover: #FFBF0F;
120
+ --color-sentiment-interactive-secondary-active: #FFBB00;
121
+ --color-sentiment-interactive-secondary-neutral: #FFEC9E;
122
+ --color-sentiment-interactive-secondary-neutral-hover: #FFEDB8;
123
+ --color-sentiment-interactive-secondary-neutral-active: #FFF2CC;
124
+ --color-sentiment-interactive-control: #FFD11A;
125
+ --color-sentiment-interactive-control-hover: #FFBF0F;
126
+ --color-sentiment-interactive-control-active: #FFBB00;
127
+ --color-sentiment-background-surface: #FFD11A;
128
+ --color-sentiment-background-surface-hover: #FFBF0F;
129
+ --color-sentiment-background-surface-active: #FFBB00;
130
+ }
131
+ .np-theme-personal--dark .wds-sentiment-surface-warning-base,
132
+ .np-theme-personal--forest-green .wds-sentiment-surface-warning-base {
133
+ --color-sentiment-content-primary: #FADC65;
134
+ --color-sentiment-content-primary-hover: #F9D648;
135
+ --color-sentiment-content-primary-active: #F8CD20;
136
+ --color-sentiment-interactive-primary: #FADC65;
137
+ --color-sentiment-interactive-primary-hover: #F9D648;
138
+ --color-sentiment-interactive-primary-active: #F8CD20;
139
+ --color-sentiment-interactive-secondary: #3A3523;
140
+ --color-sentiment-interactive-secondary-hover: #504930;
141
+ --color-sentiment-interactive-secondary-active: #665D3D;
142
+ --color-sentiment-interactive-secondary-neutral: #4D462A;
143
+ --color-sentiment-interactive-secondary-neutral-hover: #5D532F;
144
+ --color-sentiment-interactive-secondary-neutral-active: #685D33;
145
+ --color-sentiment-interactive-control: #3A3523;
146
+ --color-sentiment-interactive-control-hover: #504930;
147
+ --color-sentiment-interactive-control-active: #665D3D;
148
+ --color-sentiment-background-surface: #3A3523;
149
+ --color-sentiment-background-surface-hover: #504930;
150
+ --color-sentiment-background-surface-active: #665D3D;
151
+ }
152
+ .np-theme-personal--dark .wds-sentiment-surface-warning-elevated,
153
+ .np-theme-personal--forest-green .wds-sentiment-surface-warning-elevated {
154
+ --color-sentiment-content-primary: #3A3523;
155
+ --color-sentiment-content-primary-hover: #504930;
156
+ --color-sentiment-content-primary-active: #665D3D;
157
+ --color-sentiment-interactive-primary: #3A3523;
158
+ --color-sentiment-interactive-primary-hover: #504930;
159
+ --color-sentiment-interactive-primary-active: #665D3D;
160
+ --color-sentiment-interactive-secondary: #FADC65;
161
+ --color-sentiment-interactive-secondary-hover: #F9D648;
162
+ --color-sentiment-interactive-secondary-active: #F8CD20;
163
+ --color-sentiment-interactive-secondary-neutral: #E3C85D;
164
+ --color-sentiment-interactive-secondary-neutral-hover: #DFC044;
165
+ --color-sentiment-interactive-secondary-neutral-active: #D9B526;
166
+ --color-sentiment-interactive-control: #FADC65;
167
+ --color-sentiment-interactive-control-hover: #F9D648;
168
+ --color-sentiment-interactive-control-active: #F8CD20;
169
+ --color-sentiment-background-surface: #FADC65;
170
+ --color-sentiment-background-surface-hover: #F9D648;
171
+ --color-sentiment-background-surface-active: #F8CD20;
172
+ }
173
+ .np-theme-personal .wds-sentiment-surface-success-base,
174
+ .np-theme-personal--bright-green .wds-sentiment-surface-success-base {
175
+ --color-sentiment-content-primary: #054D28;
176
+ --color-sentiment-content-primary-hover: #043A1E;
177
+ --color-sentiment-content-primary-active: #022614;
178
+ --color-sentiment-interactive-primary: #054D28;
179
+ --color-sentiment-interactive-primary-hover: #043A1E;
180
+ --color-sentiment-interactive-primary-active: #022614;
181
+ --color-sentiment-interactive-secondary: #E2F6D5;
182
+ --color-sentiment-interactive-secondary-hover: #D3F2C0;
183
+ --color-sentiment-interactive-secondary-active: #C5EDAB;
184
+ --color-sentiment-interactive-secondary-neutral: #BCD9B8;
185
+ --color-sentiment-interactive-secondary-neutral-hover: #AACFA5;
186
+ --color-sentiment-interactive-secondary-neutral-active: #94C38E;
187
+ --color-sentiment-interactive-control: #E2F6D5;
188
+ --color-sentiment-interactive-control-hover: #D3F2C0;
189
+ --color-sentiment-interactive-control-active: #C5EDAB;
190
+ --color-sentiment-background-surface: #E2F6D5;
191
+ --color-sentiment-background-surface-hover: #D3F2C0;
192
+ --color-sentiment-background-surface-active: #C5EDAB;
193
+ }
194
+ .np-theme-personal .wds-sentiment-surface-success-elevated,
195
+ .np-theme-personal--bright-green .wds-sentiment-surface-success-elevated {
196
+ --color-sentiment-content-primary: #E2F6D5;
197
+ --color-sentiment-content-primary-hover: #D3F2C0;
198
+ --color-sentiment-content-primary-active: #C5EDAB;
199
+ --color-sentiment-interactive-primary: #E2F6D5;
200
+ --color-sentiment-interactive-primary-hover: #D3F2C0;
201
+ --color-sentiment-interactive-primary-active: #C5EDAB;
202
+ --color-sentiment-interactive-secondary: #054D28;
203
+ --color-sentiment-interactive-secondary-hover: #043A1E;
204
+ --color-sentiment-interactive-secondary-active: #022614;
205
+ --color-sentiment-interactive-secondary-neutral: #256A43;
206
+ --color-sentiment-interactive-secondary-neutral-hover: #2A794C;
207
+ --color-sentiment-interactive-secondary-neutral-active: #329057;
208
+ --color-sentiment-interactive-control: #054D28;
209
+ --color-sentiment-interactive-control-hover: #043A1E;
210
+ --color-sentiment-interactive-control-active: #022614;
211
+ --color-sentiment-background-surface: #054D28;
212
+ --color-sentiment-background-surface-hover: #043A1E;
213
+ --color-sentiment-background-surface-active: #022614;
214
+ }
215
+ .np-theme-personal--dark .wds-sentiment-surface-success-base,
216
+ .np-theme-personal--forest-green .wds-sentiment-surface-success-base {
217
+ --color-sentiment-content-primary: #BAE5A0;
218
+ --color-sentiment-content-primary-hover: #C8EAB3;
219
+ --color-sentiment-content-primary-active: #D6F0C7;
220
+ --color-sentiment-interactive-primary: #BAE5A0;
221
+ --color-sentiment-interactive-primary-hover: #C8EAB3;
222
+ --color-sentiment-interactive-primary-active: #D6F0C7;
223
+ --color-sentiment-interactive-secondary: #252C20;
224
+ --color-sentiment-interactive-secondary-hover: #323B2B;
225
+ --color-sentiment-interactive-secondary-active: #3E4A36;
226
+ --color-sentiment-interactive-secondary-neutral: #37422F;
227
+ --color-sentiment-interactive-secondary-neutral-hover: #46533B;
228
+ --color-sentiment-interactive-secondary-neutral-active: #546548;
229
+ --color-sentiment-interactive-control: #252C20;
230
+ --color-sentiment-interactive-control-hover: #323B2B;
231
+ --color-sentiment-interactive-control-active: #3E4A36;
232
+ --color-sentiment-background-surface: #252C20;
233
+ --color-sentiment-background-surface-hover: #323B2B;
234
+ --color-sentiment-background-surface-active: #3E4A36;
235
+ }
236
+ .np-theme-personal--dark .wds-sentiment-surface-success-elevated,
237
+ .np-theme-personal--forest-green .wds-sentiment-surface-success-elevated {
238
+ --color-sentiment-content-primary: #252C20;
239
+ --color-sentiment-content-primary-hover: #323B2B;
240
+ --color-sentiment-content-primary-active: #3E4A36;
241
+ --color-sentiment-interactive-primary: #252C20;
242
+ --color-sentiment-interactive-primary-hover: #323B2B;
243
+ --color-sentiment-interactive-primary-active: #3E4A36;
244
+ --color-sentiment-interactive-secondary: #BAE5A0;
245
+ --color-sentiment-interactive-secondary-hover: #C8EAB3;
246
+ --color-sentiment-interactive-secondary-active: #D6F0C7;
247
+ --color-sentiment-interactive-secondary-neutral: #A8CF91;
248
+ --color-sentiment-interactive-secondary-neutral-hover: #94C478;
249
+ --color-sentiment-interactive-secondary-neutral-active: #83BB63;
250
+ --color-sentiment-interactive-control: #BAE5A0;
251
+ --color-sentiment-interactive-control-hover: #C8EAB3;
252
+ --color-sentiment-interactive-control-active: #D6F0C7;
253
+ --color-sentiment-background-surface: #BAE5A0;
254
+ --color-sentiment-background-surface-hover: #C8EAB3;
255
+ --color-sentiment-background-surface-active: #D6F0C7;
256
+ }
257
+ .np-theme-personal .wds-sentiment-surface-neutral-base,
258
+ .np-theme-personal--bright-green .wds-sentiment-surface-neutral-base {
259
+ --color-sentiment-content-primary: #454745;
260
+ --color-sentiment-content-primary-hover: #353635;
261
+ --color-sentiment-content-primary-active: #232423;
262
+ --color-sentiment-interactive-primary: #454745;
263
+ --color-sentiment-interactive-primary-hover: #353635;
264
+ --color-sentiment-interactive-primary-active: #232423;
265
+ --color-sentiment-interactive-secondary: #F1F1ED;
266
+ --color-sentiment-interactive-secondary-hover: #E7E7E1;
267
+ --color-sentiment-interactive-secondary-active: #DFDED5;
268
+ --color-sentiment-interactive-secondary-neutral: #E4E4DC;
269
+ --color-sentiment-interactive-secondary-neutral-hover: #DCDCD2;
270
+ --color-sentiment-interactive-secondary-neutral-active: #D3D2C6;
271
+ --color-sentiment-interactive-control: #F1F1ED;
272
+ --color-sentiment-interactive-control-hover: #E7E7E1;
273
+ --color-sentiment-interactive-control-active: #DFDED5;
274
+ --color-sentiment-background-surface: #F1F1ED;
275
+ --color-sentiment-background-surface-hover: #E7E7E1;
276
+ --color-sentiment-background-surface-active: #DFDED5;
277
+ }
278
+ .np-theme-personal .wds-sentiment-surface-neutral-elevated,
279
+ .np-theme-personal--bright-green .wds-sentiment-surface-neutral-elevated {
280
+ --color-sentiment-content-primary: #F1F1ED;
281
+ --color-sentiment-content-primary-hover: #E7E7E1;
282
+ --color-sentiment-content-primary-active: #DFDED5;
283
+ --color-sentiment-interactive-primary: #F1F1ED;
284
+ --color-sentiment-interactive-primary-hover: #E7E7E1;
285
+ --color-sentiment-interactive-primary-active: #DFDED5;
286
+ --color-sentiment-interactive-secondary: #454745;
287
+ --color-sentiment-interactive-secondary-hover: #353635;
288
+ --color-sentiment-interactive-secondary-active: #232423;
289
+ --color-sentiment-interactive-secondary-neutral: #5A5C5A;
290
+ --color-sentiment-interactive-secondary-neutral-hover: #6D6F6D;
291
+ --color-sentiment-interactive-secondary-neutral-active: #727472;
292
+ --color-sentiment-interactive-control: #454745;
293
+ --color-sentiment-interactive-control-hover: #353635;
294
+ --color-sentiment-interactive-control-active: #232423;
295
+ --color-sentiment-background-surface: #454745;
296
+ --color-sentiment-background-surface-hover: #353635;
297
+ --color-sentiment-background-surface-active: #232423;
298
+ }
299
+ .np-theme-personal--dark .wds-sentiment-surface-neutral-base,
300
+ .np-theme-personal--forest-green .wds-sentiment-surface-neutral-base {
301
+ --color-sentiment-content-primary: #F1F1ED;
302
+ --color-sentiment-content-primary-hover: #E7E7E1;
303
+ --color-sentiment-content-primary-active: #DFDED5;
304
+ --color-sentiment-interactive-primary: #F1F1ED;
305
+ --color-sentiment-interactive-primary-hover: #E7E7E1;
306
+ --color-sentiment-interactive-primary-active: #DFDED5;
307
+ --color-sentiment-interactive-secondary: #2A2C29;
308
+ --color-sentiment-interactive-secondary-hover: #414441;
309
+ --color-sentiment-interactive-secondary-active: #595B58;
310
+ --color-sentiment-interactive-secondary-neutral: #424441;
311
+ --color-sentiment-interactive-secondary-neutral-hover: #4C4E4B;
312
+ --color-sentiment-interactive-secondary-neutral-active: #565955;
313
+ --color-sentiment-interactive-control: #2A2C29;
314
+ --color-sentiment-interactive-control-hover: #414441;
315
+ --color-sentiment-interactive-control-active: #595B58;
316
+ --color-sentiment-background-surface: #2A2C29;
317
+ --color-sentiment-background-surface-hover: #414441;
318
+ --color-sentiment-background-surface-active: #595B58;
319
+ }
320
+ .np-theme-personal--dark .wds-sentiment-surface-neutral-elevated,
321
+ .np-theme-personal--forest-green .wds-sentiment-surface-neutral-elevated {
322
+ --color-sentiment-content-primary: #2A2C29;
323
+ --color-sentiment-content-primary-hover: #414441;
324
+ --color-sentiment-content-primary-active: #595B58;
325
+ --color-sentiment-interactive-primary: #2A2C29;
326
+ --color-sentiment-interactive-primary-hover: #414441;
327
+ --color-sentiment-interactive-primary-active: #595B58;
328
+ --color-sentiment-interactive-secondary: #F1F1ED;
329
+ --color-sentiment-interactive-secondary-hover: #E7E7E1;
330
+ --color-sentiment-interactive-secondary-active: #DFDED5;
331
+ --color-sentiment-interactive-secondary-neutral: #E4E4DC;
332
+ --color-sentiment-interactive-secondary-neutral-hover: #DCDCD2;
333
+ --color-sentiment-interactive-secondary-neutral-active: #D3D2C6;
334
+ --color-sentiment-interactive-control: #F1F1ED;
335
+ --color-sentiment-interactive-control-hover: #E7E7E1;
336
+ --color-sentiment-interactive-control-active: #DFDED5;
337
+ --color-sentiment-background-surface: #F1F1ED;
338
+ --color-sentiment-background-surface-hover: #E7E7E1;
339
+ --color-sentiment-background-surface-active: #DFDED5;
340
+ }
341
+ .np-theme-personal .wds-sentiment-surface-proposition-base,
342
+ .np-theme-personal--bright-green .wds-sentiment-surface-proposition-base {
343
+ --color-sentiment-content-primary: #0E0F0C;
344
+ --color-sentiment-content-primary-hover: #0A2826;
345
+ --color-sentiment-content-primary-active: #074140;
346
+ --color-sentiment-interactive-primary: #054D4D;
347
+ --color-sentiment-interactive-primary-hover: #043A3A;
348
+ --color-sentiment-interactive-primary-active: #022626;
349
+ --color-sentiment-interactive-secondary: #E0F7F7;
350
+ --color-sentiment-interactive-secondary-hover: #CAF1F1;
351
+ --color-sentiment-interactive-secondary-active: #B6ECEC;
352
+ --color-sentiment-interactive-secondary-neutral: #B4D5D5;
353
+ --color-sentiment-interactive-secondary-neutral-hover: #A3CCCC;
354
+ --color-sentiment-interactive-secondary-neutral-active: #9AC6C6;
355
+ --color-sentiment-interactive-control: #E0F7F7;
356
+ --color-sentiment-interactive-control-hover: #CAF1F1;
357
+ --color-sentiment-interactive-control-active: #B6ECEC;
358
+ --color-sentiment-background-surface: #E0F7F7;
359
+ --color-sentiment-background-surface-hover: #CAF1F1;
360
+ --color-sentiment-background-surface-active: #B6ECEC;
361
+ }
362
+ .np-theme-personal .wds-sentiment-surface-proposition-elevated,
363
+ .np-theme-personal--bright-green .wds-sentiment-surface-proposition-elevated {
364
+ --color-sentiment-content-primary: #FFFFFF;
365
+ --color-sentiment-content-primary-hover: #EAF9F9;
366
+ --color-sentiment-content-primary-active: #D5F4F4;
367
+ --color-sentiment-interactive-primary: #E0F7F7;
368
+ --color-sentiment-interactive-primary-hover: #CAF1F1;
369
+ --color-sentiment-interactive-primary-active: #B6ECEC;
370
+ --color-sentiment-interactive-secondary: #054D4D;
371
+ --color-sentiment-interactive-secondary-hover: #043A3A;
372
+ --color-sentiment-interactive-secondary-active: #022626;
373
+ --color-sentiment-interactive-secondary-neutral: #1F6161;
374
+ --color-sentiment-interactive-secondary-neutral-hover: #247070;
375
+ --color-sentiment-interactive-secondary-neutral-active: #298080;
376
+ --color-sentiment-interactive-control: #054D4D;
377
+ --color-sentiment-interactive-control-hover: #043A3A;
378
+ --color-sentiment-interactive-control-active: #022626;
379
+ --color-sentiment-background-surface: #054D4D;
380
+ --color-sentiment-background-surface-hover: #043A3A;
381
+ --color-sentiment-background-surface-active: #022626;
382
+ }
383
+ .np-theme-personal--dark .wds-sentiment-surface-proposition-base,
384
+ .np-theme-personal--forest-green .wds-sentiment-surface-proposition-base {
385
+ --color-sentiment-content-primary: #FFFFFF;
386
+ --color-sentiment-content-primary-hover: #EAF9F9;
387
+ --color-sentiment-content-primary-active: #D5F4F4;
388
+ --color-sentiment-interactive-primary: #E0F7F7;
389
+ --color-sentiment-interactive-primary-hover: #CAF1F1;
390
+ --color-sentiment-interactive-primary-active: #B6ECEC;
391
+ --color-sentiment-interactive-secondary: #0B312F;
392
+ --color-sentiment-interactive-secondary-hover: #124F4C;
393
+ --color-sentiment-interactive-secondary-active: #176460;
394
+ --color-sentiment-interactive-secondary-neutral: #174E4D;
395
+ --color-sentiment-interactive-secondary-neutral-hover: #1D6261;
396
+ --color-sentiment-interactive-secondary-neutral-active: #237675;
397
+ --color-sentiment-interactive-control: #0B312F;
398
+ --color-sentiment-interactive-control-hover: #124F4C;
399
+ --color-sentiment-interactive-control-active: #176460;
400
+ --color-sentiment-background-surface: #0B312F;
401
+ --color-sentiment-background-surface-hover: #124F4C;
402
+ --color-sentiment-background-surface-active: #176460;
403
+ }
404
+ .np-theme-personal--dark .wds-sentiment-surface-proposition-elevated,
405
+ .np-theme-personal--forest-green .wds-sentiment-surface-proposition-elevated {
406
+ --color-sentiment-content-primary: #0E0F0C;
407
+ --color-sentiment-content-primary-hover: #0A2826;
408
+ --color-sentiment-content-primary-active: #074140;
409
+ --color-sentiment-interactive-primary: #0B312F;
410
+ --color-sentiment-interactive-primary-hover: #104744;
411
+ --color-sentiment-interactive-primary-active: #16605C;
412
+ --color-sentiment-interactive-secondary: #E0F7F7;
413
+ --color-sentiment-interactive-secondary-hover: #CAF1F1;
414
+ --color-sentiment-interactive-secondary-active: #B6ECEC;
415
+ --color-sentiment-interactive-secondary-neutral: #B4D5D5;
416
+ --color-sentiment-interactive-secondary-neutral-hover: #A3CCCC;
417
+ --color-sentiment-interactive-secondary-neutral-active: #9AC6C6;
418
+ --color-sentiment-interactive-control: #E0F7F7;
419
+ --color-sentiment-interactive-control-hover: #CAF1F1;
420
+ --color-sentiment-interactive-control-active: #B6ECEC;
421
+ --color-sentiment-background-surface: #E0F7F7;
422
+ --color-sentiment-background-surface-hover: #CAF1F1;
423
+ --color-sentiment-background-surface-active: #B6ECEC;
424
+ }
1
425
  .np-theme-personal .critical-comms .alert-warning {
2
426
  color: var(--color-contrast-overlay);
3
427
  background-color: var(--color-sentiment-negative);
@@ -5197,43 +5621,11 @@ html:not([dir="rtl"]) .np-navigation-option {
5197
5621
  transform: translateY(-24px);
5198
5622
  }
5199
5623
  }
5200
- .status-circle .light {
5201
- color: var(--color-contrast-overlay);
5202
- }
5203
- .np-theme-personal--bright-green .status-circle .light {
5204
- color: var(--color-white);
5205
- }
5206
- .status-circle .dark {
5207
- color: #37517e;
5208
- color: var(--color-content-primary);
5209
- }
5210
- .status-circle.warning,
5211
- .status-circle.pending {
5212
- background-color: var(--color-sentiment-warning);
5213
- }
5214
- .np-theme-personal .status-circle.warning .status-icon,
5215
- .np-theme-personal .status-circle.pending .status-icon {
5216
- color: var(--color-dark);
5217
- }
5218
- .status-circle.negative,
5219
- .status-circle.error {
5220
- background-color: var(--color-sentiment-negative);
5221
- }
5222
- .status-circle.negative .status-icon,
5223
- .status-circle.error .status-icon {
5224
- color: var(--color-sentiment-negative-secondary);
5225
- }
5226
- .status-circle.neutral {
5227
- background-color: #5d7079;
5228
- background-color: var(--color-content-secondary);
5229
- }
5230
- .status-circle.positive,
5231
- .status-circle.success {
5232
- background-color: var(--color-sentiment-positive);
5624
+ .wds-sentiment-surface.status-circle {
5625
+ background-color: var(--color-sentiment-interactive-primary);
5233
5626
  }
5234
- .status-circle.positive .status-icon,
5235
- .status-circle.success .status-icon {
5236
- color: var(--color-sentiment-positive-secondary);
5627
+ .wds-sentiment-surface.status-circle .status-icon {
5628
+ color: var(--color-sentiment-interactive-control);
5237
5629
  }
5238
5630
  .tw-stepper {
5239
5631
  padding-bottom: 24px;