@transferwise/components 0.0.0-experimental-8b2286f → 0.0.0-experimental-c3b48d7

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 (26) hide show
  1. package/build/expressiveMoneyInput/amountInput/AmountInput.js +1 -1
  2. package/build/expressiveMoneyInput/amountInput/AmountInput.js.map +1 -1
  3. package/build/expressiveMoneyInput/amountInput/AmountInput.mjs +1 -1
  4. package/build/expressiveMoneyInput/amountInput/AmountInput.mjs.map +1 -1
  5. package/build/main.css +322 -238
  6. package/build/styles/css/neptune.css +12 -26
  7. package/build/styles/expressiveMoneyInput/ExpressiveMoneyInput.css +0 -2
  8. package/build/styles/expressiveMoneyInput/amountInput/AmountInput.css +0 -2
  9. package/build/styles/less/neptune-tokens.less +2 -2
  10. package/build/styles/main.css +322 -238
  11. package/build/styles/props/neptune-tokens.css +1 -1
  12. package/build/styles/sentimentSurface/SentimentSurface.css +302 -202
  13. package/build/styles/styles/less/neptune.css +12 -26
  14. package/package.json +2 -2
  15. package/src/expressiveMoneyInput/ExpressiveMoneyInput.css +0 -2
  16. package/src/expressiveMoneyInput/ExpressiveMoneyInput.test.story.tsx +0 -43
  17. package/src/expressiveMoneyInput/amountInput/AmountInput.css +0 -2
  18. package/src/expressiveMoneyInput/amountInput/AmountInput.less +0 -2
  19. package/src/expressiveMoneyInput/amountInput/AmountInput.tsx +1 -1
  20. package/src/main.css +322 -238
  21. package/src/sentimentSurface/SentimentSurface.css +302 -202
  22. package/src/sentimentSurface/SentimentSurface.docs.mdx +2 -0
  23. package/src/sentimentSurface/SentimentSurface.less +67 -315
  24. package/src/sentimentSurface/SentimentSurface.story.tsx +4 -0
  25. package/src/styles/less/core/_typography.less +6 -28
  26. package/src/styles/less/neptune.css +12 -26
@@ -10,6 +10,10 @@
10
10
  .np-theme-platform.wds-sentiment-surface-negative-base,
11
11
  .np-theme-personal--bright-green.wds-sentiment-surface-negative-base,
12
12
  .np-theme-business--bright-green.wds-sentiment-surface-negative-base {
13
+ /**
14
+ * Do not edit directly, this file was auto-generated.
15
+ * Generated on Mon, 18 May 2026 08:34:12 GMT
16
+ */
13
17
  --color-sentiment-content-primary: #CB272F;
14
18
  --color-sentiment-content-primary-hover: #B8232B;
15
19
  --color-sentiment-content-primary-active: #A72027;
@@ -28,12 +32,17 @@
28
32
  --color-sentiment-background-surface: #FBEAEA;
29
33
  --color-sentiment-background-surface-hover: #F9E1E1;
30
34
  --color-sentiment-background-surface-active: #F8D8D8;
35
+ --color-sentiment-border-overlay: rgba(203,39,47,0.30196);
31
36
  }
32
37
  .np-theme-personal.wds-sentiment-surface-negative-elevated,
33
38
  .np-theme-business.wds-sentiment-surface-negative-elevated,
34
39
  .np-theme-platform.wds-sentiment-surface-negative-elevated,
35
40
  .np-theme-personal--bright-green.wds-sentiment-surface-negative-elevated,
36
41
  .np-theme-business--bright-green.wds-sentiment-surface-negative-elevated {
42
+ /**
43
+ * Do not edit directly, this file was auto-generated.
44
+ * Generated on Mon, 18 May 2026 08:34:12 GMT
45
+ */
37
46
  --color-sentiment-content-primary: #FFFFFF;
38
47
  --color-sentiment-content-primary-hover: #F5CCCC;
39
48
  --color-sentiment-content-primary-active: #F1B7B7;
@@ -45,67 +54,24 @@
45
54
  --color-sentiment-interactive-secondary-active: #A72027;
46
55
  --color-sentiment-interactive-secondary-neutral: #9B141B;
47
56
  --color-sentiment-interactive-secondary-neutral-hover: #831116;
48
- --color-sentiment-interactive-secondary-neutral-active: #6D0e13;
57
+ --color-sentiment-interactive-secondary-neutral-active: #6D0E13;
49
58
  --color-sentiment-interactive-control: #CB272F;
50
59
  --color-sentiment-interactive-control-hover: #B8232B;
51
60
  --color-sentiment-interactive-control-active: #A72027;
52
61
  --color-sentiment-background-surface: #CB272F;
53
62
  --color-sentiment-background-surface-hover: #B8232B;
54
63
  --color-sentiment-background-surface-active: #A72027;
55
- }
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;
64
+ --color-sentiment-border-overlay: rgba(255,255,255,0.30196);
103
65
  }
104
66
  .np-theme-personal.wds-sentiment-surface-warning-base,
105
67
  .np-theme-business.wds-sentiment-surface-warning-base,
106
68
  .np-theme-platform.wds-sentiment-surface-warning-base,
107
69
  .np-theme-personal--bright-green.wds-sentiment-surface-warning-base,
108
70
  .np-theme-business--bright-green.wds-sentiment-surface-warning-base {
71
+ /**
72
+ * Do not edit directly, this file was auto-generated.
73
+ * Generated on Mon, 18 May 2026 08:34:12 GMT
74
+ */
109
75
  --color-sentiment-content-primary: #4A3B1C;
110
76
  --color-sentiment-content-primary-hover: #302612;
111
77
  --color-sentiment-content-primary-active: #2C2311;
@@ -124,12 +90,17 @@
124
90
  --color-sentiment-background-surface: #FFF7D7;
125
91
  --color-sentiment-background-surface-hover: #FFF0B2;
126
92
  --color-sentiment-background-surface-active: #FFE98F;
93
+ --color-sentiment-border-overlay: rgba(74,59,28,0.30196);
127
94
  }
128
95
  .np-theme-personal.wds-sentiment-surface-warning-elevated,
129
96
  .np-theme-business.wds-sentiment-surface-warning-elevated,
130
97
  .np-theme-platform.wds-sentiment-surface-warning-elevated,
131
98
  .np-theme-personal--bright-green.wds-sentiment-surface-warning-elevated,
132
99
  .np-theme-business--bright-green.wds-sentiment-surface-warning-elevated {
100
+ /**
101
+ * Do not edit directly, this file was auto-generated.
102
+ * Generated on Mon, 18 May 2026 08:34:12 GMT
103
+ */
133
104
  --color-sentiment-content-primary: #4A3B1C;
134
105
  --color-sentiment-content-primary-hover: #302612;
135
106
  --color-sentiment-content-primary-active: #2C2311;
@@ -148,60 +119,17 @@
148
119
  --color-sentiment-background-surface: #FFD11A;
149
120
  --color-sentiment-background-surface-hover: #FFBF0F;
150
121
  --color-sentiment-background-surface-active: #FFBB00;
151
- }
152
- .np-theme-personal--dark.wds-sentiment-surface-warning-base,
153
- .np-theme-business--dark.wds-sentiment-surface-warning-base,
154
- .np-theme-personal--forest-green.wds-sentiment-surface-warning-base,
155
- .np-theme-business--forest-green.wds-sentiment-surface-warning-base,
156
- .np-theme-platform--forest-green.wds-sentiment-surface-warning-base {
157
- --color-sentiment-content-primary: #FADC65;
158
- --color-sentiment-content-primary-hover: #F9D648;
159
- --color-sentiment-content-primary-active: #F8CD20;
160
- --color-sentiment-interactive-primary: #FADC65;
161
- --color-sentiment-interactive-primary-hover: #F9D648;
162
- --color-sentiment-interactive-primary-active: #F8CD20;
163
- --color-sentiment-interactive-secondary: #3A3523;
164
- --color-sentiment-interactive-secondary-hover: #504930;
165
- --color-sentiment-interactive-secondary-active: #665D3D;
166
- --color-sentiment-interactive-secondary-neutral: #4D462A;
167
- --color-sentiment-interactive-secondary-neutral-hover: #5D532F;
168
- --color-sentiment-interactive-secondary-neutral-active: #685D33;
169
- --color-sentiment-interactive-control: #3A3523;
170
- --color-sentiment-interactive-control-hover: #504930;
171
- --color-sentiment-interactive-control-active: #665D3D;
172
- --color-sentiment-background-surface: #3A3523;
173
- --color-sentiment-background-surface-hover: #504930;
174
- --color-sentiment-background-surface-active: #665D3D;
175
- }
176
- .np-theme-personal--dark.wds-sentiment-surface-warning-elevated,
177
- .np-theme-business--dark.wds-sentiment-surface-warning-elevated,
178
- .np-theme-personal--forest-green.wds-sentiment-surface-warning-elevated,
179
- .np-theme-business--forest-green.wds-sentiment-surface-warning-elevated,
180
- .np-theme-platform--forest-green.wds-sentiment-surface-warning-elevated {
181
- --color-sentiment-content-primary: #3A3523;
182
- --color-sentiment-content-primary-hover: #504930;
183
- --color-sentiment-content-primary-active: #665D3D;
184
- --color-sentiment-interactive-primary: #3A3523;
185
- --color-sentiment-interactive-primary-hover: #504930;
186
- --color-sentiment-interactive-primary-active: #665D3D;
187
- --color-sentiment-interactive-secondary: #FADC65;
188
- --color-sentiment-interactive-secondary-hover: #F9D648;
189
- --color-sentiment-interactive-secondary-active: #F8CD20;
190
- --color-sentiment-interactive-secondary-neutral: #E3C85D;
191
- --color-sentiment-interactive-secondary-neutral-hover: #DFC044;
192
- --color-sentiment-interactive-secondary-neutral-active: #D9B526;
193
- --color-sentiment-interactive-control: #FADC65;
194
- --color-sentiment-interactive-control-hover: #F9D648;
195
- --color-sentiment-interactive-control-active: #F8CD20;
196
- --color-sentiment-background-surface: #FADC65;
197
- --color-sentiment-background-surface-hover: #F9D648;
198
- --color-sentiment-background-surface-active: #F8CD20;
122
+ --color-sentiment-border-overlay: rgba(74,59,28,0.30196);
199
123
  }
200
124
  .np-theme-personal.wds-sentiment-surface-success-base,
201
125
  .np-theme-business.wds-sentiment-surface-success-base,
202
126
  .np-theme-platform.wds-sentiment-surface-success-base,
203
127
  .np-theme-personal--bright-green.wds-sentiment-surface-success-base,
204
128
  .np-theme-business--bright-green.wds-sentiment-surface-success-base {
129
+ /**
130
+ * Do not edit directly, this file was auto-generated.
131
+ * Generated on Mon, 18 May 2026 08:34:12 GMT
132
+ */
205
133
  --color-sentiment-content-primary: #054D28;
206
134
  --color-sentiment-content-primary-hover: #043A1E;
207
135
  --color-sentiment-content-primary-active: #022614;
@@ -220,12 +148,17 @@
220
148
  --color-sentiment-background-surface: #E2F6D5;
221
149
  --color-sentiment-background-surface-hover: #D3F2C0;
222
150
  --color-sentiment-background-surface-active: #C5EDAB;
151
+ --color-sentiment-border-overlay: rgba(5,77,40,0.30196);
223
152
  }
224
153
  .np-theme-personal.wds-sentiment-surface-success-elevated,
225
154
  .np-theme-business.wds-sentiment-surface-success-elevated,
226
155
  .np-theme-platform.wds-sentiment-surface-success-elevated,
227
156
  .np-theme-personal--bright-green.wds-sentiment-surface-success-elevated,
228
157
  .np-theme-business--bright-green.wds-sentiment-surface-success-elevated {
158
+ /**
159
+ * Do not edit directly, this file was auto-generated.
160
+ * Generated on Mon, 18 May 2026 08:34:12 GMT
161
+ */
229
162
  --color-sentiment-content-primary: #CEF1B8;
230
163
  --color-sentiment-content-primary-hover: #E0FFCC;
231
164
  --color-sentiment-content-primary-active: #E1F4D4;
@@ -244,84 +177,46 @@
244
177
  --color-sentiment-background-surface: #054D28;
245
178
  --color-sentiment-background-surface-hover: #043A1E;
246
179
  --color-sentiment-background-surface-active: #022614;
247
- }
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;
271
- }
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;
180
+ --color-sentiment-border-overlay: rgba(206,241,184,0.30196);
295
181
  }
296
182
  .np-theme-personal.wds-sentiment-surface-neutral-base,
297
183
  .np-theme-business.wds-sentiment-surface-neutral-base,
298
184
  .np-theme-platform.wds-sentiment-surface-neutral-base,
299
185
  .np-theme-personal--bright-green.wds-sentiment-surface-neutral-base,
300
186
  .np-theme-business--bright-green.wds-sentiment-surface-neutral-base {
187
+ /**
188
+ * Do not edit directly, this file was auto-generated.
189
+ * Generated on Mon, 18 May 2026 08:34:12 GMT
190
+ */
301
191
  --color-sentiment-content-primary: #454745;
302
192
  --color-sentiment-content-primary-hover: #353635;
303
193
  --color-sentiment-content-primary-active: #232423;
304
194
  --color-sentiment-interactive-primary: #454745;
305
195
  --color-sentiment-interactive-primary-hover: #353635;
306
196
  --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);
197
+ --color-sentiment-interactive-secondary: rgba(62,59,7,0.07059);
198
+ --color-sentiment-interactive-secondary-hover: rgba(62,59,7,0.12157);
199
+ --color-sentiment-interactive-secondary-active: rgba(62,59,7,0.16863);
200
+ --color-sentiment-interactive-secondary-neutral: rgba(62,59,7,0.07059);
201
+ --color-sentiment-interactive-secondary-neutral-hover: rgba(62,59,7,0.12157);
202
+ --color-sentiment-interactive-secondary-neutral-active: rgba(62,59,7,0.16863);
313
203
  --color-sentiment-interactive-control: #F1F1ED;
314
204
  --color-sentiment-interactive-control-hover: #E7E7E1;
315
205
  --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);
206
+ --color-sentiment-background-surface: rgba(62,59,7,0.07059);
207
+ --color-sentiment-background-surface-hover: rgba(62,59,7,0.12157);
208
+ --color-sentiment-background-surface-active: rgba(62,59,7,0.16863);
209
+ --color-sentiment-border-overlay: rgba(69,71,69,0.30196);
319
210
  }
320
211
  .np-theme-personal.wds-sentiment-surface-neutral-elevated,
321
212
  .np-theme-business.wds-sentiment-surface-neutral-elevated,
322
213
  .np-theme-platform.wds-sentiment-surface-neutral-elevated,
323
214
  .np-theme-personal--bright-green.wds-sentiment-surface-neutral-elevated,
324
215
  .np-theme-business--bright-green.wds-sentiment-surface-neutral-elevated {
216
+ /**
217
+ * Do not edit directly, this file was auto-generated.
218
+ * Generated on Mon, 18 May 2026 08:34:12 GMT
219
+ */
325
220
  --color-sentiment-content-primary: #F1F1ED;
326
221
  --color-sentiment-content-primary-hover: #E7E7E1;
327
222
  --color-sentiment-content-primary-active: #DFDED5;
@@ -340,60 +235,17 @@
340
235
  --color-sentiment-background-surface: #454745;
341
236
  --color-sentiment-background-surface-hover: #353635;
342
237
  --color-sentiment-background-surface-active: #232423;
343
- }
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 {
349
- --color-sentiment-content-primary: #F1F1ED;
350
- --color-sentiment-content-primary-hover: #E7E7E1;
351
- --color-sentiment-content-primary-active: #DFDED5;
352
- --color-sentiment-interactive-primary: #F1F1ED;
353
- --color-sentiment-interactive-primary-hover: #E7E7E1;
354
- --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);
361
- --color-sentiment-interactive-control: #2A2C29;
362
- --color-sentiment-interactive-control-hover: #414441;
363
- --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);
367
- }
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 {
373
- --color-sentiment-content-primary: #2A2C29;
374
- --color-sentiment-content-primary-hover: #414441;
375
- --color-sentiment-content-primary-active: #595B58;
376
- --color-sentiment-interactive-primary: #2A2C29;
377
- --color-sentiment-interactive-primary-hover: #414441;
378
- --color-sentiment-interactive-primary-active: #595B58;
379
- --color-sentiment-interactive-secondary: #F1F1ED;
380
- --color-sentiment-interactive-secondary-hover: #E7E7E1;
381
- --color-sentiment-interactive-secondary-active: #DFDED5;
382
- --color-sentiment-interactive-secondary-neutral: #E4E4DC;
383
- --color-sentiment-interactive-secondary-neutral-hover: #DCDCD2;
384
- --color-sentiment-interactive-secondary-neutral-active: #D3D2C6;
385
- --color-sentiment-interactive-control: #F1F1ED;
386
- --color-sentiment-interactive-control-hover: #E7E7E1;
387
- --color-sentiment-interactive-control-active: #DFDED5;
388
- --color-sentiment-background-surface: #F1F1ED;
389
- --color-sentiment-background-surface-hover: #E7E7E1;
390
- --color-sentiment-background-surface-active: #DFDED5;
238
+ --color-sentiment-border-overlay: rgba(241,241,237,0.30196);
391
239
  }
392
240
  .np-theme-personal.wds-sentiment-surface-proposition-base,
393
241
  .np-theme-business.wds-sentiment-surface-proposition-base,
394
242
  .np-theme-platform.wds-sentiment-surface-proposition-base,
395
243
  .np-theme-personal--bright-green.wds-sentiment-surface-proposition-base,
396
244
  .np-theme-business--bright-green.wds-sentiment-surface-proposition-base {
245
+ /**
246
+ * Do not edit directly, this file was auto-generated.
247
+ * Generated on Mon, 18 May 2026 08:34:12 GMT
248
+ */
397
249
  --color-sentiment-content-primary: #0E0F0C;
398
250
  --color-sentiment-content-primary-hover: #0A2826;
399
251
  --color-sentiment-content-primary-active: #074140;
@@ -412,12 +264,17 @@
412
264
  --color-sentiment-background-surface: #E0F7F7;
413
265
  --color-sentiment-background-surface-hover: #CAF1F1;
414
266
  --color-sentiment-background-surface-active: #B6ECEC;
267
+ --color-sentiment-border-overlay: rgba(14,15,12,0.30196);
415
268
  }
416
269
  .np-theme-personal.wds-sentiment-surface-proposition-elevated,
417
270
  .np-theme-business.wds-sentiment-surface-proposition-elevated,
418
271
  .np-theme-platform.wds-sentiment-surface-proposition-elevated,
419
272
  .np-theme-personal--bright-green.wds-sentiment-surface-proposition-elevated,
420
273
  .np-theme-business--bright-green.wds-sentiment-surface-proposition-elevated {
274
+ /**
275
+ * Do not edit directly, this file was auto-generated.
276
+ * Generated on Mon, 18 May 2026 08:34:12 GMT
277
+ */
421
278
  --color-sentiment-content-primary: #FFFFFF;
422
279
  --color-sentiment-content-primary-hover: #EAF9F9;
423
280
  --color-sentiment-content-primary-active: #D5F4F4;
@@ -436,12 +293,249 @@
436
293
  --color-sentiment-background-surface: #054D4D;
437
294
  --color-sentiment-background-surface-hover: #043A3A;
438
295
  --color-sentiment-background-surface-active: #022626;
296
+ --color-sentiment-border-overlay: rgba(255,255,255,0.30196);
297
+ }
298
+ .np-theme-personal--dark.wds-sentiment-surface-negative-base,
299
+ .np-theme-business--dark.wds-sentiment-surface-negative-base,
300
+ .np-theme-personal--forest-green.wds-sentiment-surface-negative-base,
301
+ .np-theme-business--forest-green.wds-sentiment-surface-negative-base,
302
+ .np-theme-platform--forest-green.wds-sentiment-surface-negative-base {
303
+ /**
304
+ * Do not edit directly, this file was auto-generated.
305
+ * Generated on Mon, 18 May 2026 08:34:12 GMT
306
+ */
307
+ --color-sentiment-content-primary: #FFA8AD;
308
+ --color-sentiment-content-primary-hover: #FFBDC0;
309
+ --color-sentiment-content-primary-active: #FFD1D3;
310
+ --color-sentiment-interactive-primary: #FFA8AD;
311
+ --color-sentiment-interactive-primary-hover: #FFBDC0;
312
+ --color-sentiment-interactive-primary-active: #FFD1D3;
313
+ --color-sentiment-interactive-secondary: #410B0D;
314
+ --color-sentiment-interactive-secondary-hover: #641115;
315
+ --color-sentiment-interactive-secondary-active: #761418;
316
+ --color-sentiment-interactive-secondary-neutral: #601013;
317
+ --color-sentiment-interactive-secondary-neutral-hover: #7A1519;
318
+ --color-sentiment-interactive-secondary-neutral-active: #90181D;
319
+ --color-sentiment-interactive-control: #410B0D;
320
+ --color-sentiment-interactive-control-hover: #641115;
321
+ --color-sentiment-interactive-control-active: #761418;
322
+ --color-sentiment-background-surface: #410B0D;
323
+ --color-sentiment-background-surface-hover: #641115;
324
+ --color-sentiment-background-surface-active: #761418;
325
+ --color-sentiment-border-overlay: rgba(255,168,173,0.30196);
326
+ }
327
+ .np-theme-personal--dark.wds-sentiment-surface-negative-elevated,
328
+ .np-theme-business--dark.wds-sentiment-surface-negative-elevated,
329
+ .np-theme-personal--forest-green.wds-sentiment-surface-negative-elevated,
330
+ .np-theme-business--forest-green.wds-sentiment-surface-negative-elevated,
331
+ .np-theme-platform--forest-green.wds-sentiment-surface-negative-elevated {
332
+ /**
333
+ * Do not edit directly, this file was auto-generated.
334
+ * Generated on Mon, 18 May 2026 08:34:12 GMT
335
+ */
336
+ --color-sentiment-content-primary: #410B0D;
337
+ --color-sentiment-content-primary-hover: #641115;
338
+ --color-sentiment-content-primary-active: #761418;
339
+ --color-sentiment-interactive-primary: #410B0D;
340
+ --color-sentiment-interactive-primary-hover: #641115;
341
+ --color-sentiment-interactive-primary-active: #761418;
342
+ --color-sentiment-interactive-secondary: #FFA8AD;
343
+ --color-sentiment-interactive-secondary-hover: #FFBDC0;
344
+ --color-sentiment-interactive-secondary-active: #FFD1D3;
345
+ --color-sentiment-interactive-secondary-neutral: #D9898D;
346
+ --color-sentiment-interactive-secondary-neutral-hover: #D68084;
347
+ --color-sentiment-interactive-secondary-neutral-active: #D06C71;
348
+ --color-sentiment-interactive-control: #FFA8AD;
349
+ --color-sentiment-interactive-control-hover: #FFBDC0;
350
+ --color-sentiment-interactive-control-active: #FFD1D3;
351
+ --color-sentiment-background-surface: #FFA8AD;
352
+ --color-sentiment-background-surface-hover: #FFBDC0;
353
+ --color-sentiment-background-surface-active: #FFD1D3;
354
+ --color-sentiment-border-overlay: rgba(65,11,13,0.30196);
355
+ }
356
+ .np-theme-personal--dark.wds-sentiment-surface-warning-base,
357
+ .np-theme-business--dark.wds-sentiment-surface-warning-base,
358
+ .np-theme-personal--forest-green.wds-sentiment-surface-warning-base,
359
+ .np-theme-business--forest-green.wds-sentiment-surface-warning-base,
360
+ .np-theme-platform--forest-green.wds-sentiment-surface-warning-base {
361
+ /**
362
+ * Do not edit directly, this file was auto-generated.
363
+ * Generated on Mon, 18 May 2026 08:34:12 GMT
364
+ */
365
+ --color-sentiment-content-primary: #FADC65;
366
+ --color-sentiment-content-primary-hover: #F9D648;
367
+ --color-sentiment-content-primary-active: #F8CD20;
368
+ --color-sentiment-interactive-primary: #FADC65;
369
+ --color-sentiment-interactive-primary-hover: #F9D648;
370
+ --color-sentiment-interactive-primary-active: #F8CD20;
371
+ --color-sentiment-interactive-secondary: #3A3523;
372
+ --color-sentiment-interactive-secondary-hover: #504930;
373
+ --color-sentiment-interactive-secondary-active: #665D3D;
374
+ --color-sentiment-interactive-secondary-neutral: #4D462A;
375
+ --color-sentiment-interactive-secondary-neutral-hover: #5D532F;
376
+ --color-sentiment-interactive-secondary-neutral-active: #685D33;
377
+ --color-sentiment-interactive-control: #3A3523;
378
+ --color-sentiment-interactive-control-hover: #504930;
379
+ --color-sentiment-interactive-control-active: #665D3D;
380
+ --color-sentiment-background-surface: #3A3523;
381
+ --color-sentiment-background-surface-hover: #504930;
382
+ --color-sentiment-background-surface-active: #665D3D;
383
+ --color-sentiment-border-overlay: rgba(250,220,101,0.30196);
384
+ }
385
+ .np-theme-personal--dark.wds-sentiment-surface-warning-elevated,
386
+ .np-theme-business--dark.wds-sentiment-surface-warning-elevated,
387
+ .np-theme-personal--forest-green.wds-sentiment-surface-warning-elevated,
388
+ .np-theme-business--forest-green.wds-sentiment-surface-warning-elevated,
389
+ .np-theme-platform--forest-green.wds-sentiment-surface-warning-elevated {
390
+ /**
391
+ * Do not edit directly, this file was auto-generated.
392
+ * Generated on Mon, 18 May 2026 08:34:12 GMT
393
+ */
394
+ --color-sentiment-content-primary: #3A3523;
395
+ --color-sentiment-content-primary-hover: #504930;
396
+ --color-sentiment-content-primary-active: #665D3D;
397
+ --color-sentiment-interactive-primary: #3A3523;
398
+ --color-sentiment-interactive-primary-hover: #504930;
399
+ --color-sentiment-interactive-primary-active: #665D3D;
400
+ --color-sentiment-interactive-secondary: #FADC65;
401
+ --color-sentiment-interactive-secondary-hover: #F9D648;
402
+ --color-sentiment-interactive-secondary-active: #F8CD20;
403
+ --color-sentiment-interactive-secondary-neutral: #E3C85D;
404
+ --color-sentiment-interactive-secondary-neutral-hover: #DFC044;
405
+ --color-sentiment-interactive-secondary-neutral-active: #D9B526;
406
+ --color-sentiment-interactive-control: #FADC65;
407
+ --color-sentiment-interactive-control-hover: #F9D648;
408
+ --color-sentiment-interactive-control-active: #F8CD20;
409
+ --color-sentiment-background-surface: #FADC65;
410
+ --color-sentiment-background-surface-hover: #F9D648;
411
+ --color-sentiment-background-surface-active: #F8CD20;
412
+ --color-sentiment-border-overlay: rgba(58,53,35,0.30196);
413
+ }
414
+ .np-theme-personal--dark.wds-sentiment-surface-success-base,
415
+ .np-theme-business--dark.wds-sentiment-surface-success-base,
416
+ .np-theme-personal--forest-green.wds-sentiment-surface-success-base,
417
+ .np-theme-business--forest-green.wds-sentiment-surface-success-base,
418
+ .np-theme-platform--forest-green.wds-sentiment-surface-success-base {
419
+ /**
420
+ * Do not edit directly, this file was auto-generated.
421
+ * Generated on Mon, 18 May 2026 08:34:12 GMT
422
+ */
423
+ --color-sentiment-content-primary: #CEF1B8;
424
+ --color-sentiment-content-primary-hover: #E0FFCC;
425
+ --color-sentiment-content-primary-active: #E1F4D4;
426
+ --color-sentiment-interactive-primary: #CEF1B8;
427
+ --color-sentiment-interactive-primary-hover: #E0FFCC;
428
+ --color-sentiment-interactive-primary-active: #E1F4D4;
429
+ --color-sentiment-interactive-secondary: #054D28;
430
+ --color-sentiment-interactive-secondary-hover: #043A1E;
431
+ --color-sentiment-interactive-secondary-active: #022614;
432
+ --color-sentiment-interactive-secondary-neutral: #256A43;
433
+ --color-sentiment-interactive-secondary-neutral-hover: #2A794C;
434
+ --color-sentiment-interactive-secondary-neutral-active: #329057;
435
+ --color-sentiment-interactive-control: #054D28;
436
+ --color-sentiment-interactive-control-hover: #043A1E;
437
+ --color-sentiment-interactive-control-active: #022614;
438
+ --color-sentiment-background-surface: #054D28;
439
+ --color-sentiment-background-surface-hover: #043A1E;
440
+ --color-sentiment-background-surface-active: #022614;
441
+ --color-sentiment-border-overlay: rgba(206,241,184,0.30196);
442
+ }
443
+ .np-theme-personal--dark.wds-sentiment-surface-success-elevated,
444
+ .np-theme-business--dark.wds-sentiment-surface-success-elevated,
445
+ .np-theme-personal--forest-green.wds-sentiment-surface-success-elevated,
446
+ .np-theme-business--forest-green.wds-sentiment-surface-success-elevated,
447
+ .np-theme-platform--forest-green.wds-sentiment-surface-success-elevated {
448
+ /**
449
+ * Do not edit directly, this file was auto-generated.
450
+ * Generated on Mon, 18 May 2026 08:34:12 GMT
451
+ */
452
+ --color-sentiment-content-primary: #252C20;
453
+ --color-sentiment-content-primary-hover: #323B2B;
454
+ --color-sentiment-content-primary-active: #3E4A36;
455
+ --color-sentiment-interactive-primary: #252C20;
456
+ --color-sentiment-interactive-primary-hover: #323B2B;
457
+ --color-sentiment-interactive-primary-active: #3E4A36;
458
+ --color-sentiment-interactive-secondary: #BAE5A0;
459
+ --color-sentiment-interactive-secondary-hover: #C8EAB3;
460
+ --color-sentiment-interactive-secondary-active: #D6F0C7;
461
+ --color-sentiment-interactive-secondary-neutral: #A8CF91;
462
+ --color-sentiment-interactive-secondary-neutral-hover: #94C478;
463
+ --color-sentiment-interactive-secondary-neutral-active: #83BB63;
464
+ --color-sentiment-interactive-control: #BAE5A0;
465
+ --color-sentiment-interactive-control-hover: #C8EAB3;
466
+ --color-sentiment-interactive-control-active: #D6F0C7;
467
+ --color-sentiment-background-surface: #BAE5A0;
468
+ --color-sentiment-background-surface-hover: #C8EAB3;
469
+ --color-sentiment-background-surface-active: #D6F0C7;
470
+ --color-sentiment-border-overlay: rgba(37,44,32,0.30196);
471
+ }
472
+ .np-theme-personal--dark.wds-sentiment-surface-neutral-base,
473
+ .np-theme-business--dark.wds-sentiment-surface-neutral-base,
474
+ .np-theme-personal--forest-green.wds-sentiment-surface-neutral-base,
475
+ .np-theme-business--forest-green.wds-sentiment-surface-neutral-base,
476
+ .np-theme-platform--forest-green.wds-sentiment-surface-neutral-base {
477
+ /**
478
+ * Do not edit directly, this file was auto-generated.
479
+ * Generated on Mon, 18 May 2026 08:34:12 GMT
480
+ */
481
+ --color-sentiment-content-primary: #F1F1ED;
482
+ --color-sentiment-content-primary-hover: #E7E7E1;
483
+ --color-sentiment-content-primary-active: #DFDED5;
484
+ --color-sentiment-interactive-primary: #F1F1ED;
485
+ --color-sentiment-interactive-primary-hover: #E7E7E1;
486
+ --color-sentiment-interactive-primary-active: #DFDED5;
487
+ --color-sentiment-interactive-secondary: rgba(255,255,255,0.10196);
488
+ --color-sentiment-interactive-secondary-hover: rgba(255,255,255,0.2);
489
+ --color-sentiment-interactive-secondary-active: rgba(255,255,255,0.30196);
490
+ --color-sentiment-interactive-secondary-neutral: rgba(255,255,255,0.10196);
491
+ --color-sentiment-interactive-secondary-neutral-hover: rgba(255,255,255,0.2);
492
+ --color-sentiment-interactive-secondary-neutral-active: rgba(255,255,255,0.30196);
493
+ --color-sentiment-interactive-control: #2A2C29;
494
+ --color-sentiment-interactive-control-hover: #414441;
495
+ --color-sentiment-interactive-control-active: #595B58;
496
+ --color-sentiment-background-surface: rgba(255,255,255,0.10196);
497
+ --color-sentiment-background-surface-hover: rgba(255,255,255,0.2);
498
+ --color-sentiment-background-surface-active: rgba(255,255,255,0.30196);
499
+ --color-sentiment-border-overlay: rgba(241,241,237,0.30196);
500
+ }
501
+ .np-theme-personal--dark.wds-sentiment-surface-neutral-elevated,
502
+ .np-theme-business--dark.wds-sentiment-surface-neutral-elevated,
503
+ .np-theme-personal--forest-green.wds-sentiment-surface-neutral-elevated,
504
+ .np-theme-business--forest-green.wds-sentiment-surface-neutral-elevated,
505
+ .np-theme-platform--forest-green.wds-sentiment-surface-neutral-elevated {
506
+ /**
507
+ * Do not edit directly, this file was auto-generated.
508
+ * Generated on Mon, 18 May 2026 08:34:12 GMT
509
+ */
510
+ --color-sentiment-content-primary: #2A2C29;
511
+ --color-sentiment-content-primary-hover: #414441;
512
+ --color-sentiment-content-primary-active: #595B58;
513
+ --color-sentiment-interactive-primary: #2A2C29;
514
+ --color-sentiment-interactive-primary-hover: #414441;
515
+ --color-sentiment-interactive-primary-active: #595B58;
516
+ --color-sentiment-interactive-secondary: #F1F1ED;
517
+ --color-sentiment-interactive-secondary-hover: #E7E7E1;
518
+ --color-sentiment-interactive-secondary-active: #DFDED5;
519
+ --color-sentiment-interactive-secondary-neutral: #E4E4DC;
520
+ --color-sentiment-interactive-secondary-neutral-hover: #DCDCD2;
521
+ --color-sentiment-interactive-secondary-neutral-active: #D3D2C6;
522
+ --color-sentiment-interactive-control: #F1F1ED;
523
+ --color-sentiment-interactive-control-hover: #E7E7E1;
524
+ --color-sentiment-interactive-control-active: #DFDED5;
525
+ --color-sentiment-background-surface: #F1F1ED;
526
+ --color-sentiment-background-surface-hover: #E7E7E1;
527
+ --color-sentiment-background-surface-active: #DFDED5;
528
+ --color-sentiment-border-overlay: rgba(42,44,41,0.30196);
439
529
  }
440
530
  .np-theme-personal--dark.wds-sentiment-surface-proposition-base,
441
531
  .np-theme-business--dark.wds-sentiment-surface-proposition-base,
442
532
  .np-theme-personal--forest-green.wds-sentiment-surface-proposition-base,
443
533
  .np-theme-business--forest-green.wds-sentiment-surface-proposition-base,
444
534
  .np-theme-platform--forest-green.wds-sentiment-surface-proposition-base {
535
+ /**
536
+ * Do not edit directly, this file was auto-generated.
537
+ * Generated on Mon, 18 May 2026 08:34:12 GMT
538
+ */
445
539
  --color-sentiment-content-primary: #FFFFFF;
446
540
  --color-sentiment-content-primary-hover: #EAF9F9;
447
541
  --color-sentiment-content-primary-active: #D5F4F4;
@@ -460,12 +554,17 @@
460
554
  --color-sentiment-background-surface: #054D4D;
461
555
  --color-sentiment-background-surface-hover: #043A3A;
462
556
  --color-sentiment-background-surface-active: #022626;
557
+ --color-sentiment-border-overlay: rgba(255,255,255,0.30196);
463
558
  }
464
559
  .np-theme-personal--dark.wds-sentiment-surface-proposition-elevated,
465
560
  .np-theme-business--dark.wds-sentiment-surface-proposition-elevated,
466
561
  .np-theme-personal--forest-green.wds-sentiment-surface-proposition-elevated,
467
562
  .np-theme-business--forest-green.wds-sentiment-surface-proposition-elevated,
468
563
  .np-theme-platform--forest-green.wds-sentiment-surface-proposition-elevated {
564
+ /**
565
+ * Do not edit directly, this file was auto-generated.
566
+ * Generated on Mon, 18 May 2026 08:34:12 GMT
567
+ */
469
568
  --color-sentiment-content-primary: #0E0F0C;
470
569
  --color-sentiment-content-primary-hover: #0A2826;
471
570
  --color-sentiment-content-primary-active: #074140;
@@ -484,4 +583,5 @@
484
583
  --color-sentiment-background-surface: #E0F7F7;
485
584
  --color-sentiment-background-surface-hover: #CAF1F1;
486
585
  --color-sentiment-background-surface-active: #B6ECEC;
586
+ --color-sentiment-border-overlay: rgba(14,15,12,0.30196);
487
587
  }
@@ -36,6 +36,8 @@ Each `SentimentSurface` sets tokens for content, interactive elements, and backg
36
36
  --color-sentiment-background-surface
37
37
  --color-sentiment-background-surface-hover
38
38
  --color-sentiment-background-surface-active
39
+
40
+ --color-sentiment-border-overlay
39
41
  `} />
40
42
 
41
43
  ## Using Tokens in Components