@transferwise/components 46.115.1 → 46.116.1

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