@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/src/button/_stories/helpers.tsx ADDED
@@ -0,0 +1,118 @@
1
+ import { ThemeProvider, type ThemeProviderProps } from '@wise/components-theming';
2
+ import { ChevronRight, Freeze } from '@transferwise/icons';
3
+ import { Flag } from '@wise/art';
4
+ import SentimentSurface from '../../sentimentSurface';
5
+ import Header from '../../header';
6
+ import Button from '../Button';
7
+
8
+ interface GenerateSurfaceVariantProps {
9
+ theme?: 'forest-green' | 'bright-green' | 'dark';
10
+ sentiment: 'success' | 'warning' | 'negative' | 'neutral' | 'proposition';
11
+ }
12
+ export const generateSurfaceVariant = ({ theme, sentiment }: GenerateSurfaceVariantProps) => ({
13
+ storyName: '',
14
+ render: () => {
15
+ const PERMUTATIONS = {
16
+ emphasis: ['base', 'elevated'] as const,
17
+ disabled: [false, true] as const,
18
+ others: [
19
+ {
20
+ addonStart: { type: 'avatar' as const, value: [{ asset: <Freeze /> }] },
21
+ addonEnd: { type: 'icon' as const, value: <ChevronRight /> },
22
+ },
23
+ {
24
+ addonStart: { type: 'avatar' as const, value: [{ profileName: 'John Doe' }] },
25
+ },
26
+ {
27
+ addonStart: {
28
+ type: 'avatar' as const,
29
+ value: [
30
+ {
31
+ asset: <Flag code="gb" />,
32
+ },
33
+ { asset: <Freeze /> },
34
+ ],
35
+ },
36
+ },
37
+ {
38
+ loading: true,
39
+ },
40
+ ],
41
+ priority: ['primary', 'secondary', 'secondary-neutral', 'tertiary'] as const,
42
+ };
43
+
44
+ const story = PERMUTATIONS.emphasis.map((emphasis) => (
45
+ <SentimentSurface
46
+ key={`${emphasis}-${sentiment}`}
47
+ sentiment={sentiment}
48
+ emphasis={emphasis}
49
+ style={{
50
+ padding: 'var(--size-8)',
51
+ display: 'grid',
52
+ gridTemplateColumns: 'repeat(1, min-content)',
53
+ gap: 'var(--size-8)',
54
+ }}
55
+ >
56
+ {PERMUTATIONS.disabled.map((disabled) =>
57
+ PERMUTATIONS.others.map((media, mediaVariant) =>
58
+ PERMUTATIONS.priority.map((priority) => (
59
+ <div key={`${emphasis}-${sentiment}-${disabled}-${priority}-${mediaVariant}`}>
60
+ <Button v2 size="md" disabled={disabled} priority={priority} {...media}>
61
+ {priority}
62
+ </Button>
63
+ </div>
64
+ )),
65
+ ),
66
+ )}
67
+ </SentimentSurface>
68
+ ));
69
+
70
+ if (theme === 'dark') {
71
+ return (
72
+ <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, min-content)' }}>
73
+ <ThemeProvider theme="personal" screenMode="dark" className="p-a-2 p-l-4">
74
+ <Header title="Personal brand" />
75
+ {story}
76
+ </ThemeProvider>
77
+ <ThemeProvider theme="business" screenMode="dark" className="p-a-2 p-r-4">
78
+ <Header title="Business brand" />
79
+ {story}
80
+ </ThemeProvider>
81
+ </div>
82
+ );
83
+ }
84
+
85
+ const personalVariant = (theme || 'personal') as ThemeProviderProps['theme'];
86
+ const businessVariant = (
87
+ theme ? (`business--${theme}` as const) : 'business'
88
+ ) as ThemeProviderProps['theme'];
89
+ const platformVariant = (
90
+ theme ? (`platform--${theme}` as const) : 'platform'
91
+ ) as ThemeProviderProps['theme'];
92
+ return (
93
+ <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, min-content)' }}>
94
+ <ThemeProvider theme={personalVariant} screenMode="light" className="p-a-2 p-l-4">
95
+ <Header title="Personal brand" />
96
+ {story}
97
+ </ThemeProvider>
98
+ <ThemeProvider theme={businessVariant} screenMode="light" className="p-a-2">
99
+ <Header title="Business brand" />
100
+ {story}
101
+ </ThemeProvider>
102
+ {theme === 'bright-green' ? null : (
103
+ <ThemeProvider theme={platformVariant} screenMode="light" className="p-a-2 p-r-4">
104
+ <Header title="Platform brand" />
105
+ {story}
106
+ </ThemeProvider>
107
+ )}
108
+ </div>
109
+ );
110
+ },
111
+ decorators: [
112
+ (Story: React.ComponentType) => (
113
+ <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
114
+ <Story />
115
+ </div>
116
+ ),
117
+ ],
118
+ });
package/src/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/src/sentimentSurface/SentimentSurface.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;