@transferwise/components 46.117.0 → 46.117.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 (25) hide show
  1. package/build/main.css +85 -25
  2. package/build/styles/button/Button.css +5 -5
  3. package/build/styles/button/Button.vars.css +5 -5
  4. package/build/styles/main.css +85 -25
  5. package/build/styles/sentimentSurface/SentimentSurface.css +80 -20
  6. package/build/types/button/_stories/helpers.d.ts +11 -0
  7. package/build/types/button/_stories/helpers.d.ts.map +1 -0
  8. package/build/types/test-utils/story-config.d.ts +1 -1
  9. package/build/types/test-utils/story-config.d.ts.map +1 -1
  10. package/package.json +3 -3
  11. package/src/button/Button.css +5 -5
  12. package/src/button/Button.vars.css +5 -5
  13. package/src/button/Button.vars.less +5 -5
  14. package/src/button/{Button.accessibility.docs.mdx → _stories/Button.accessibility.docs.mdx} +1 -1
  15. package/src/button/_stories/Button.brightGreen.tests.story.tsx +31 -0
  16. package/src/button/_stories/Button.dark.tests.story.tsx +25 -0
  17. package/src/button/_stories/Button.default.tests.story.tsx +25 -0
  18. package/src/button/_stories/Button.forestGreen.tests.story.tsx +28 -0
  19. package/src/button/{Button.story.tsx → _stories/Button.story.tsx} +6 -6
  20. package/src/button/{Button.tests.story.tsx → _stories/Button.tests.story.tsx} +5 -82
  21. package/src/button/_stories/helpers.tsx +118 -0
  22. package/src/main.css +85 -25
  23. package/src/sentimentSurface/SentimentSurface.css +80 -20
  24. package/src/sentimentSurface/SentimentSurface.less +40 -10
  25. package/src/test-utils/story-config.ts +5 -0
package/build/main.css CHANGED
@@ -6,7 +6,10 @@
6
6
  color: var(--color-sentiment-content-primary);
7
7
  }
8
8
  .np-theme-personal .wds-sentiment-surface-negative-base,
9
- .np-theme-personal--bright-green .wds-sentiment-surface-negative-base {
9
+ .np-theme-business .wds-sentiment-surface-negative-base,
10
+ .np-theme-platform .wds-sentiment-surface-negative-base,
11
+ .np-theme-personal--bright-green .wds-sentiment-surface-negative-base,
12
+ .np-theme-business--bright-green .wds-sentiment-surface-negative-base {
10
13
  --color-sentiment-content-primary: #CB272F;
11
14
  --color-sentiment-content-primary-hover: #B8232B;
12
15
  --color-sentiment-content-primary-active: #A72027;
@@ -27,7 +30,10 @@
27
30
  --color-sentiment-background-surface-active: #F8D8D8;
28
31
  }
29
32
  .np-theme-personal .wds-sentiment-surface-negative-elevated,
30
- .np-theme-personal--bright-green .wds-sentiment-surface-negative-elevated {
33
+ .np-theme-business .wds-sentiment-surface-negative-elevated,
34
+ .np-theme-platform .wds-sentiment-surface-negative-elevated,
35
+ .np-theme-personal--bright-green .wds-sentiment-surface-negative-elevated,
36
+ .np-theme-business--bright-green .wds-sentiment-surface-negative-elevated {
31
37
  --color-sentiment-content-primary: #FFFFFF;
32
38
  --color-sentiment-content-primary-hover: #F5CCCC;
33
39
  --color-sentiment-content-primary-active: #F1B7B7;
@@ -48,7 +54,10 @@
48
54
  --color-sentiment-background-surface-active: #A72027;
49
55
  }
50
56
  .np-theme-personal--dark .wds-sentiment-surface-negative-base,
51
- .np-theme-personal--forest-green .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 {
52
61
  --color-sentiment-content-primary: #FFA8AD;
53
62
  --color-sentiment-content-primary-hover: #FFBDC0;
54
63
  --color-sentiment-content-primary-active: #FFD1D3;
@@ -69,7 +78,10 @@
69
78
  --color-sentiment-background-surface-active: #761418;
70
79
  }
71
80
  .np-theme-personal--dark .wds-sentiment-surface-negative-elevated,
72
- .np-theme-personal--forest-green .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 {
73
85
  --color-sentiment-content-primary: #410B0D;
74
86
  --color-sentiment-content-primary-hover: #641115;
75
87
  --color-sentiment-content-primary-active: #761418;
@@ -90,7 +102,10 @@
90
102
  --color-sentiment-background-surface-active: #FFD1D3;
91
103
  }
92
104
  .np-theme-personal .wds-sentiment-surface-warning-base,
93
- .np-theme-personal--bright-green .wds-sentiment-surface-warning-base {
105
+ .np-theme-business .wds-sentiment-surface-warning-base,
106
+ .np-theme-platform .wds-sentiment-surface-warning-base,
107
+ .np-theme-personal--bright-green .wds-sentiment-surface-warning-base,
108
+ .np-theme-business--bright-green .wds-sentiment-surface-warning-base {
94
109
  --color-sentiment-content-primary: #4A3B1C;
95
110
  --color-sentiment-content-primary-hover: #302612;
96
111
  --color-sentiment-content-primary-active: #2C2311;
@@ -111,7 +126,10 @@
111
126
  --color-sentiment-background-surface-active: #FFE98F;
112
127
  }
113
128
  .np-theme-personal .wds-sentiment-surface-warning-elevated,
114
- .np-theme-personal--bright-green .wds-sentiment-surface-warning-elevated {
129
+ .np-theme-business .wds-sentiment-surface-warning-elevated,
130
+ .np-theme-platform .wds-sentiment-surface-warning-elevated,
131
+ .np-theme-personal--bright-green .wds-sentiment-surface-warning-elevated,
132
+ .np-theme-business--bright-green .wds-sentiment-surface-warning-elevated {
115
133
  --color-sentiment-content-primary: #4A3B1C;
116
134
  --color-sentiment-content-primary-hover: #302612;
117
135
  --color-sentiment-content-primary-active: #2C2311;
@@ -132,7 +150,10 @@
132
150
  --color-sentiment-background-surface-active: #FFBB00;
133
151
  }
134
152
  .np-theme-personal--dark .wds-sentiment-surface-warning-base,
135
- .np-theme-personal--forest-green .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 {
136
157
  --color-sentiment-content-primary: #FADC65;
137
158
  --color-sentiment-content-primary-hover: #F9D648;
138
159
  --color-sentiment-content-primary-active: #F8CD20;
@@ -153,7 +174,10 @@
153
174
  --color-sentiment-background-surface-active: #665D3D;
154
175
  }
155
176
  .np-theme-personal--dark .wds-sentiment-surface-warning-elevated,
156
- .np-theme-personal--forest-green .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 {
157
181
  --color-sentiment-content-primary: #3A3523;
158
182
  --color-sentiment-content-primary-hover: #504930;
159
183
  --color-sentiment-content-primary-active: #665D3D;
@@ -174,7 +198,10 @@
174
198
  --color-sentiment-background-surface-active: #F8CD20;
175
199
  }
176
200
  .np-theme-personal .wds-sentiment-surface-success-base,
177
- .np-theme-personal--bright-green .wds-sentiment-surface-success-base {
201
+ .np-theme-business .wds-sentiment-surface-success-base,
202
+ .np-theme-platform .wds-sentiment-surface-success-base,
203
+ .np-theme-personal--bright-green .wds-sentiment-surface-success-base,
204
+ .np-theme-business--bright-green .wds-sentiment-surface-success-base {
178
205
  --color-sentiment-content-primary: #054D28;
179
206
  --color-sentiment-content-primary-hover: #043A1E;
180
207
  --color-sentiment-content-primary-active: #022614;
@@ -195,7 +222,10 @@
195
222
  --color-sentiment-background-surface-active: #C5EDAB;
196
223
  }
197
224
  .np-theme-personal .wds-sentiment-surface-success-elevated,
198
- .np-theme-personal--bright-green .wds-sentiment-surface-success-elevated {
225
+ .np-theme-business .wds-sentiment-surface-success-elevated,
226
+ .np-theme-platform .wds-sentiment-surface-success-elevated,
227
+ .np-theme-personal--bright-green .wds-sentiment-surface-success-elevated,
228
+ .np-theme-business--bright-green .wds-sentiment-surface-success-elevated {
199
229
  --color-sentiment-content-primary: #E2F6D5;
200
230
  --color-sentiment-content-primary-hover: #D3F2C0;
201
231
  --color-sentiment-content-primary-active: #C5EDAB;
@@ -216,7 +246,10 @@
216
246
  --color-sentiment-background-surface-active: #022614;
217
247
  }
218
248
  .np-theme-personal--dark .wds-sentiment-surface-success-base,
219
- .np-theme-personal--forest-green .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 {
220
253
  --color-sentiment-content-primary: #BAE5A0;
221
254
  --color-sentiment-content-primary-hover: #C8EAB3;
222
255
  --color-sentiment-content-primary-active: #D6F0C7;
@@ -237,7 +270,10 @@
237
270
  --color-sentiment-background-surface-active: #3E4A36;
238
271
  }
239
272
  .np-theme-personal--dark .wds-sentiment-surface-success-elevated,
240
- .np-theme-personal--forest-green .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 {
241
277
  --color-sentiment-content-primary: #252C20;
242
278
  --color-sentiment-content-primary-hover: #323B2B;
243
279
  --color-sentiment-content-primary-active: #3E4A36;
@@ -258,7 +294,10 @@
258
294
  --color-sentiment-background-surface-active: #D6F0C7;
259
295
  }
260
296
  .np-theme-personal .wds-sentiment-surface-neutral-base,
261
- .np-theme-personal--bright-green .wds-sentiment-surface-neutral-base {
297
+ .np-theme-business .wds-sentiment-surface-neutral-base,
298
+ .np-theme-platform .wds-sentiment-surface-neutral-base,
299
+ .np-theme-personal--bright-green .wds-sentiment-surface-neutral-base,
300
+ .np-theme-business--bright-green .wds-sentiment-surface-neutral-base {
262
301
  --color-sentiment-content-primary: #454745;
263
302
  --color-sentiment-content-primary-hover: #353635;
264
303
  --color-sentiment-content-primary-active: #232423;
@@ -279,7 +318,10 @@
279
318
  --color-sentiment-background-surface-active: #DFDED5;
280
319
  }
281
320
  .np-theme-personal .wds-sentiment-surface-neutral-elevated,
282
- .np-theme-personal--bright-green .wds-sentiment-surface-neutral-elevated {
321
+ .np-theme-business .wds-sentiment-surface-neutral-elevated,
322
+ .np-theme-platform .wds-sentiment-surface-neutral-elevated,
323
+ .np-theme-personal--bright-green .wds-sentiment-surface-neutral-elevated,
324
+ .np-theme-business--bright-green .wds-sentiment-surface-neutral-elevated {
283
325
  --color-sentiment-content-primary: #F1F1ED;
284
326
  --color-sentiment-content-primary-hover: #E7E7E1;
285
327
  --color-sentiment-content-primary-active: #DFDED5;
@@ -300,7 +342,10 @@
300
342
  --color-sentiment-background-surface-active: #232423;
301
343
  }
302
344
  .np-theme-personal--dark .wds-sentiment-surface-neutral-base,
303
- .np-theme-personal--forest-green .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 {
304
349
  --color-sentiment-content-primary: #F1F1ED;
305
350
  --color-sentiment-content-primary-hover: #E7E7E1;
306
351
  --color-sentiment-content-primary-active: #DFDED5;
@@ -321,7 +366,10 @@
321
366
  --color-sentiment-background-surface-active: #595B58;
322
367
  }
323
368
  .np-theme-personal--dark .wds-sentiment-surface-neutral-elevated,
324
- .np-theme-personal--forest-green .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 {
325
373
  --color-sentiment-content-primary: #2A2C29;
326
374
  --color-sentiment-content-primary-hover: #414441;
327
375
  --color-sentiment-content-primary-active: #595B58;
@@ -342,7 +390,10 @@
342
390
  --color-sentiment-background-surface-active: #DFDED5;
343
391
  }
344
392
  .np-theme-personal .wds-sentiment-surface-proposition-base,
345
- .np-theme-personal--bright-green .wds-sentiment-surface-proposition-base {
393
+ .np-theme-business .wds-sentiment-surface-proposition-base,
394
+ .np-theme-platform .wds-sentiment-surface-proposition-base,
395
+ .np-theme-personal--bright-green .wds-sentiment-surface-proposition-base,
396
+ .np-theme-business--bright-green .wds-sentiment-surface-proposition-base {
346
397
  --color-sentiment-content-primary: #0E0F0C;
347
398
  --color-sentiment-content-primary-hover: #0A2826;
348
399
  --color-sentiment-content-primary-active: #074140;
@@ -363,7 +414,10 @@
363
414
  --color-sentiment-background-surface-active: #B6ECEC;
364
415
  }
365
416
  .np-theme-personal .wds-sentiment-surface-proposition-elevated,
366
- .np-theme-personal--bright-green .wds-sentiment-surface-proposition-elevated {
417
+ .np-theme-business .wds-sentiment-surface-proposition-elevated,
418
+ .np-theme-platform .wds-sentiment-surface-proposition-elevated,
419
+ .np-theme-personal--bright-green .wds-sentiment-surface-proposition-elevated,
420
+ .np-theme-business--bright-green .wds-sentiment-surface-proposition-elevated {
367
421
  --color-sentiment-content-primary: #FFFFFF;
368
422
  --color-sentiment-content-primary-hover: #EAF9F9;
369
423
  --color-sentiment-content-primary-active: #D5F4F4;
@@ -384,7 +438,10 @@
384
438
  --color-sentiment-background-surface-active: #022626;
385
439
  }
386
440
  .np-theme-personal--dark .wds-sentiment-surface-proposition-base,
387
- .np-theme-personal--forest-green .wds-sentiment-surface-proposition-base {
441
+ .np-theme-business--dark .wds-sentiment-surface-proposition-base,
442
+ .np-theme-personal--forest-green .wds-sentiment-surface-proposition-base,
443
+ .np-theme-business--forest-green .wds-sentiment-surface-proposition-base,
444
+ .np-theme-platform--forest-green .wds-sentiment-surface-proposition-base {
388
445
  --color-sentiment-content-primary: #FFFFFF;
389
446
  --color-sentiment-content-primary-hover: #EAF9F9;
390
447
  --color-sentiment-content-primary-active: #D5F4F4;
@@ -405,7 +462,10 @@
405
462
  --color-sentiment-background-surface-active: #176460;
406
463
  }
407
464
  .np-theme-personal--dark .wds-sentiment-surface-proposition-elevated,
408
- .np-theme-personal--forest-green .wds-sentiment-surface-proposition-elevated {
465
+ .np-theme-business--dark .wds-sentiment-surface-proposition-elevated,
466
+ .np-theme-personal--forest-green .wds-sentiment-surface-proposition-elevated,
467
+ .np-theme-business--forest-green .wds-sentiment-surface-proposition-elevated,
468
+ .np-theme-platform--forest-green .wds-sentiment-surface-proposition-elevated {
409
469
  --color-sentiment-content-primary: #0E0F0C;
410
470
  --color-sentiment-content-primary-hover: #0A2826;
411
471
  --color-sentiment-content-primary-active: #074140;
@@ -1219,11 +1279,11 @@
1219
1279
  --Button-secondary-neutral-background-active: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-background-neutral-active));
1220
1280
  --Button-secondary-neutral-color: var(--color-sentiment-content-primary, var(--color-content-primary));
1221
1281
  --Button-tertiary-background: transparent;
1222
- --Button-tertiary-background-hover: var(--color-background-screen-hover);
1223
- --Button-tertiary-background-active: var(--color-background-screen-active);
1224
- --Button-tertiary-color: var(--color-interactive-primary);
1225
- --Button-tertiary-color-hover: var(--color-interactive-primary-hover);
1226
- --Button-tertiary-color-active: var(--color-interactive-primary-active);
1282
+ --Button-tertiary-background-hover: var(--color-sentiment-interactive-secondary-neutral, var(--color-background-screen-hover));
1283
+ --Button-tertiary-background-active: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-background-screen-active));
1284
+ --Button-tertiary-color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
1285
+ --Button-tertiary-color-hover: var(--color-sentiment-content-primary-hover, var(--color-interactive-primary-hover));
1286
+ --Button-tertiary-color-active: var(--color-sentiment-content-primary-active, var(--color-interactive-primary-active));
1227
1287
  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
1228
1288
  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
1229
1289
  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
package/build/styles/button/Button.css CHANGED
@@ -24,11 +24,11 @@
24
24
  --Button-secondary-neutral-background-active: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-background-neutral-active));
25
25
  --Button-secondary-neutral-color: var(--color-sentiment-content-primary, var(--color-content-primary));
26
26
  --Button-tertiary-background: transparent;
27
- --Button-tertiary-background-hover: var(--color-background-screen-hover);
28
- --Button-tertiary-background-active: var(--color-background-screen-active);
29
- --Button-tertiary-color: var(--color-interactive-primary);
30
- --Button-tertiary-color-hover: var(--color-interactive-primary-hover);
31
- --Button-tertiary-color-active: var(--color-interactive-primary-active);
27
+ --Button-tertiary-background-hover: var(--color-sentiment-interactive-secondary-neutral, var(--color-background-screen-hover));
28
+ --Button-tertiary-background-active: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-background-screen-active));
29
+ --Button-tertiary-color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
30
+ --Button-tertiary-color-hover: var(--color-sentiment-content-primary-hover, var(--color-interactive-primary-hover));
31
+ --Button-tertiary-color-active: var(--color-sentiment-content-primary-active, var(--color-interactive-primary-active));
32
32
  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
33
33
  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
34
34
  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
package/build/styles/button/Button.vars.css CHANGED
@@ -24,11 +24,11 @@
24
24
  --Button-secondary-neutral-background-active: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-background-neutral-active));
25
25
  --Button-secondary-neutral-color: var(--color-sentiment-content-primary, var(--color-content-primary));
26
26
  --Button-tertiary-background: transparent;
27
- --Button-tertiary-background-hover: var(--color-background-screen-hover);
28
- --Button-tertiary-background-active: var(--color-background-screen-active);
29
- --Button-tertiary-color: var(--color-interactive-primary);
30
- --Button-tertiary-color-hover: var(--color-interactive-primary-hover);
31
- --Button-tertiary-color-active: var(--color-interactive-primary-active);
27
+ --Button-tertiary-background-hover: var(--color-sentiment-interactive-secondary-neutral, var(--color-background-screen-hover));
28
+ --Button-tertiary-background-active: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-background-screen-active));
29
+ --Button-tertiary-color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
30
+ --Button-tertiary-color-hover: var(--color-sentiment-content-primary-hover, var(--color-interactive-primary-hover));
31
+ --Button-tertiary-color-active: var(--color-sentiment-content-primary-active, var(--color-interactive-primary-active));
32
32
  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
33
33
  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
34
34
  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
package/build/styles/main.css CHANGED
@@ -6,7 +6,10 @@
6
6
  color: var(--color-sentiment-content-primary);
7
7
  }
8
8
  .np-theme-personal .wds-sentiment-surface-negative-base,
9
- .np-theme-personal--bright-green .wds-sentiment-surface-negative-base {
9
+ .np-theme-business .wds-sentiment-surface-negative-base,
10
+ .np-theme-platform .wds-sentiment-surface-negative-base,
11
+ .np-theme-personal--bright-green .wds-sentiment-surface-negative-base,
12
+ .np-theme-business--bright-green .wds-sentiment-surface-negative-base {
10
13
  --color-sentiment-content-primary: #CB272F;
11
14
  --color-sentiment-content-primary-hover: #B8232B;
12
15
  --color-sentiment-content-primary-active: #A72027;
@@ -27,7 +30,10 @@
27
30
  --color-sentiment-background-surface-active: #F8D8D8;
28
31
  }
29
32
  .np-theme-personal .wds-sentiment-surface-negative-elevated,
30
- .np-theme-personal--bright-green .wds-sentiment-surface-negative-elevated {
33
+ .np-theme-business .wds-sentiment-surface-negative-elevated,
34
+ .np-theme-platform .wds-sentiment-surface-negative-elevated,
35
+ .np-theme-personal--bright-green .wds-sentiment-surface-negative-elevated,
36
+ .np-theme-business--bright-green .wds-sentiment-surface-negative-elevated {
31
37
  --color-sentiment-content-primary: #FFFFFF;
32
38
  --color-sentiment-content-primary-hover: #F5CCCC;
33
39
  --color-sentiment-content-primary-active: #F1B7B7;
@@ -48,7 +54,10 @@
48
54
  --color-sentiment-background-surface-active: #A72027;
49
55
  }
50
56
  .np-theme-personal--dark .wds-sentiment-surface-negative-base,
51
- .np-theme-personal--forest-green .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 {
52
61
  --color-sentiment-content-primary: #FFA8AD;
53
62
  --color-sentiment-content-primary-hover: #FFBDC0;
54
63
  --color-sentiment-content-primary-active: #FFD1D3;
@@ -69,7 +78,10 @@
69
78
  --color-sentiment-background-surface-active: #761418;
70
79
  }
71
80
  .np-theme-personal--dark .wds-sentiment-surface-negative-elevated,
72
- .np-theme-personal--forest-green .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 {
73
85
  --color-sentiment-content-primary: #410B0D;
74
86
  --color-sentiment-content-primary-hover: #641115;
75
87
  --color-sentiment-content-primary-active: #761418;
@@ -90,7 +102,10 @@
90
102
  --color-sentiment-background-surface-active: #FFD1D3;
91
103
  }
92
104
  .np-theme-personal .wds-sentiment-surface-warning-base,
93
- .np-theme-personal--bright-green .wds-sentiment-surface-warning-base {
105
+ .np-theme-business .wds-sentiment-surface-warning-base,
106
+ .np-theme-platform .wds-sentiment-surface-warning-base,
107
+ .np-theme-personal--bright-green .wds-sentiment-surface-warning-base,
108
+ .np-theme-business--bright-green .wds-sentiment-surface-warning-base {
94
109
  --color-sentiment-content-primary: #4A3B1C;
95
110
  --color-sentiment-content-primary-hover: #302612;
96
111
  --color-sentiment-content-primary-active: #2C2311;
@@ -111,7 +126,10 @@
111
126
  --color-sentiment-background-surface-active: #FFE98F;
112
127
  }
113
128
  .np-theme-personal .wds-sentiment-surface-warning-elevated,
114
- .np-theme-personal--bright-green .wds-sentiment-surface-warning-elevated {
129
+ .np-theme-business .wds-sentiment-surface-warning-elevated,
130
+ .np-theme-platform .wds-sentiment-surface-warning-elevated,
131
+ .np-theme-personal--bright-green .wds-sentiment-surface-warning-elevated,
132
+ .np-theme-business--bright-green .wds-sentiment-surface-warning-elevated {
115
133
  --color-sentiment-content-primary: #4A3B1C;
116
134
  --color-sentiment-content-primary-hover: #302612;
117
135
  --color-sentiment-content-primary-active: #2C2311;
@@ -132,7 +150,10 @@
132
150
  --color-sentiment-background-surface-active: #FFBB00;
133
151
  }
134
152
  .np-theme-personal--dark .wds-sentiment-surface-warning-base,
135
- .np-theme-personal--forest-green .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 {
136
157
  --color-sentiment-content-primary: #FADC65;
137
158
  --color-sentiment-content-primary-hover: #F9D648;
138
159
  --color-sentiment-content-primary-active: #F8CD20;
@@ -153,7 +174,10 @@
153
174
  --color-sentiment-background-surface-active: #665D3D;
154
175
  }
155
176
  .np-theme-personal--dark .wds-sentiment-surface-warning-elevated,
156
- .np-theme-personal--forest-green .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 {
157
181
  --color-sentiment-content-primary: #3A3523;
158
182
  --color-sentiment-content-primary-hover: #504930;
159
183
  --color-sentiment-content-primary-active: #665D3D;
@@ -174,7 +198,10 @@
174
198
  --color-sentiment-background-surface-active: #F8CD20;
175
199
  }
176
200
  .np-theme-personal .wds-sentiment-surface-success-base,
177
- .np-theme-personal--bright-green .wds-sentiment-surface-success-base {
201
+ .np-theme-business .wds-sentiment-surface-success-base,
202
+ .np-theme-platform .wds-sentiment-surface-success-base,
203
+ .np-theme-personal--bright-green .wds-sentiment-surface-success-base,
204
+ .np-theme-business--bright-green .wds-sentiment-surface-success-base {
178
205
  --color-sentiment-content-primary: #054D28;
179
206
  --color-sentiment-content-primary-hover: #043A1E;
180
207
  --color-sentiment-content-primary-active: #022614;
@@ -195,7 +222,10 @@
195
222
  --color-sentiment-background-surface-active: #C5EDAB;
196
223
  }
197
224
  .np-theme-personal .wds-sentiment-surface-success-elevated,
198
- .np-theme-personal--bright-green .wds-sentiment-surface-success-elevated {
225
+ .np-theme-business .wds-sentiment-surface-success-elevated,
226
+ .np-theme-platform .wds-sentiment-surface-success-elevated,
227
+ .np-theme-personal--bright-green .wds-sentiment-surface-success-elevated,
228
+ .np-theme-business--bright-green .wds-sentiment-surface-success-elevated {
199
229
  --color-sentiment-content-primary: #E2F6D5;
200
230
  --color-sentiment-content-primary-hover: #D3F2C0;
201
231
  --color-sentiment-content-primary-active: #C5EDAB;
@@ -216,7 +246,10 @@
216
246
  --color-sentiment-background-surface-active: #022614;
217
247
  }
218
248
  .np-theme-personal--dark .wds-sentiment-surface-success-base,
219
- .np-theme-personal--forest-green .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 {
220
253
  --color-sentiment-content-primary: #BAE5A0;
221
254
  --color-sentiment-content-primary-hover: #C8EAB3;
222
255
  --color-sentiment-content-primary-active: #D6F0C7;
@@ -237,7 +270,10 @@
237
270
  --color-sentiment-background-surface-active: #3E4A36;
238
271
  }
239
272
  .np-theme-personal--dark .wds-sentiment-surface-success-elevated,
240
- .np-theme-personal--forest-green .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 {
241
277
  --color-sentiment-content-primary: #252C20;
242
278
  --color-sentiment-content-primary-hover: #323B2B;
243
279
  --color-sentiment-content-primary-active: #3E4A36;
@@ -258,7 +294,10 @@
258
294
  --color-sentiment-background-surface-active: #D6F0C7;
259
295
  }
260
296
  .np-theme-personal .wds-sentiment-surface-neutral-base,
261
- .np-theme-personal--bright-green .wds-sentiment-surface-neutral-base {
297
+ .np-theme-business .wds-sentiment-surface-neutral-base,
298
+ .np-theme-platform .wds-sentiment-surface-neutral-base,
299
+ .np-theme-personal--bright-green .wds-sentiment-surface-neutral-base,
300
+ .np-theme-business--bright-green .wds-sentiment-surface-neutral-base {
262
301
  --color-sentiment-content-primary: #454745;
263
302
  --color-sentiment-content-primary-hover: #353635;
264
303
  --color-sentiment-content-primary-active: #232423;
@@ -279,7 +318,10 @@
279
318
  --color-sentiment-background-surface-active: #DFDED5;
280
319
  }
281
320
  .np-theme-personal .wds-sentiment-surface-neutral-elevated,
282
- .np-theme-personal--bright-green .wds-sentiment-surface-neutral-elevated {
321
+ .np-theme-business .wds-sentiment-surface-neutral-elevated,
322
+ .np-theme-platform .wds-sentiment-surface-neutral-elevated,
323
+ .np-theme-personal--bright-green .wds-sentiment-surface-neutral-elevated,
324
+ .np-theme-business--bright-green .wds-sentiment-surface-neutral-elevated {
283
325
  --color-sentiment-content-primary: #F1F1ED;
284
326
  --color-sentiment-content-primary-hover: #E7E7E1;
285
327
  --color-sentiment-content-primary-active: #DFDED5;
@@ -300,7 +342,10 @@
300
342
  --color-sentiment-background-surface-active: #232423;
301
343
  }
302
344
  .np-theme-personal--dark .wds-sentiment-surface-neutral-base,
303
- .np-theme-personal--forest-green .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 {
304
349
  --color-sentiment-content-primary: #F1F1ED;
305
350
  --color-sentiment-content-primary-hover: #E7E7E1;
306
351
  --color-sentiment-content-primary-active: #DFDED5;
@@ -321,7 +366,10 @@
321
366
  --color-sentiment-background-surface-active: #595B58;
322
367
  }
323
368
  .np-theme-personal--dark .wds-sentiment-surface-neutral-elevated,
324
- .np-theme-personal--forest-green .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 {
325
373
  --color-sentiment-content-primary: #2A2C29;
326
374
  --color-sentiment-content-primary-hover: #414441;
327
375
  --color-sentiment-content-primary-active: #595B58;
@@ -342,7 +390,10 @@
342
390
  --color-sentiment-background-surface-active: #DFDED5;
343
391
  }
344
392
  .np-theme-personal .wds-sentiment-surface-proposition-base,
345
- .np-theme-personal--bright-green .wds-sentiment-surface-proposition-base {
393
+ .np-theme-business .wds-sentiment-surface-proposition-base,
394
+ .np-theme-platform .wds-sentiment-surface-proposition-base,
395
+ .np-theme-personal--bright-green .wds-sentiment-surface-proposition-base,
396
+ .np-theme-business--bright-green .wds-sentiment-surface-proposition-base {
346
397
  --color-sentiment-content-primary: #0E0F0C;
347
398
  --color-sentiment-content-primary-hover: #0A2826;
348
399
  --color-sentiment-content-primary-active: #074140;
@@ -363,7 +414,10 @@
363
414
  --color-sentiment-background-surface-active: #B6ECEC;
364
415
  }
365
416
  .np-theme-personal .wds-sentiment-surface-proposition-elevated,
366
- .np-theme-personal--bright-green .wds-sentiment-surface-proposition-elevated {
417
+ .np-theme-business .wds-sentiment-surface-proposition-elevated,
418
+ .np-theme-platform .wds-sentiment-surface-proposition-elevated,
419
+ .np-theme-personal--bright-green .wds-sentiment-surface-proposition-elevated,
420
+ .np-theme-business--bright-green .wds-sentiment-surface-proposition-elevated {
367
421
  --color-sentiment-content-primary: #FFFFFF;
368
422
  --color-sentiment-content-primary-hover: #EAF9F9;
369
423
  --color-sentiment-content-primary-active: #D5F4F4;
@@ -384,7 +438,10 @@
384
438
  --color-sentiment-background-surface-active: #022626;
385
439
  }
386
440
  .np-theme-personal--dark .wds-sentiment-surface-proposition-base,
387
- .np-theme-personal--forest-green .wds-sentiment-surface-proposition-base {
441
+ .np-theme-business--dark .wds-sentiment-surface-proposition-base,
442
+ .np-theme-personal--forest-green .wds-sentiment-surface-proposition-base,
443
+ .np-theme-business--forest-green .wds-sentiment-surface-proposition-base,
444
+ .np-theme-platform--forest-green .wds-sentiment-surface-proposition-base {
388
445
  --color-sentiment-content-primary: #FFFFFF;
389
446
  --color-sentiment-content-primary-hover: #EAF9F9;
390
447
  --color-sentiment-content-primary-active: #D5F4F4;
@@ -405,7 +462,10 @@
405
462
  --color-sentiment-background-surface-active: #176460;
406
463
  }
407
464
  .np-theme-personal--dark .wds-sentiment-surface-proposition-elevated,
408
- .np-theme-personal--forest-green .wds-sentiment-surface-proposition-elevated {
465
+ .np-theme-business--dark .wds-sentiment-surface-proposition-elevated,
466
+ .np-theme-personal--forest-green .wds-sentiment-surface-proposition-elevated,
467
+ .np-theme-business--forest-green .wds-sentiment-surface-proposition-elevated,
468
+ .np-theme-platform--forest-green .wds-sentiment-surface-proposition-elevated {
409
469
  --color-sentiment-content-primary: #0E0F0C;
410
470
  --color-sentiment-content-primary-hover: #0A2826;
411
471
  --color-sentiment-content-primary-active: #074140;
@@ -1219,11 +1279,11 @@
1219
1279
  --Button-secondary-neutral-background-active: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-background-neutral-active));
1220
1280
  --Button-secondary-neutral-color: var(--color-sentiment-content-primary, var(--color-content-primary));
1221
1281
  --Button-tertiary-background: transparent;
1222
- --Button-tertiary-background-hover: var(--color-background-screen-hover);
1223
- --Button-tertiary-background-active: var(--color-background-screen-active);
1224
- --Button-tertiary-color: var(--color-interactive-primary);
1225
- --Button-tertiary-color-hover: var(--color-interactive-primary-hover);
1226
- --Button-tertiary-color-active: var(--color-interactive-primary-active);
1282
+ --Button-tertiary-background-hover: var(--color-sentiment-interactive-secondary-neutral, var(--color-background-screen-hover));
1283
+ --Button-tertiary-background-active: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-background-screen-active));
1284
+ --Button-tertiary-color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
1285
+ --Button-tertiary-color-hover: var(--color-sentiment-content-primary-hover, var(--color-interactive-primary-hover));
1286
+ --Button-tertiary-color-active: var(--color-sentiment-content-primary-active, var(--color-interactive-primary-active));
1227
1287
  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
1228
1288
  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
1229
1289
  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);