@transferwise/components 0.0.0-experimental-b447014 → 0.0.0-experimental-1d87337

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 (14) hide show
  1. package/build/main.css +20 -17
  2. package/build/styles/button/Button.css +16 -16
  3. package/build/styles/button/Button.vars.css +16 -16
  4. package/build/styles/main.css +20 -17
  5. package/build/styles/sentimentSurface/SentimentSurface.css +4 -1
  6. package/package.json +3 -3
  7. package/src/button/Button.css +16 -16
  8. package/src/button/Button.story.tsx +44 -0
  9. package/src/button/Button.vars.css +16 -16
  10. package/src/button/Button.vars.less +58 -18
  11. package/src/main.css +20 -17
  12. package/src/sentimentSurface/SentimentSurface.css +4 -1
  13. package/src/sentimentSurface/SentimentSurface.less +120 -118
  14. package/src/sentimentSurface/SentimentSurface.tests.story.tsx +84 -0
package/build/main.css CHANGED
@@ -1,3 +1,6 @@
1
+ .wds-sentiment-surface {
2
+ --ring-outline-color: var(--color-sentiment-content-primary, var(--color-content-primary));
3
+ }
1
4
  .wds-sentiment-surface--hasBaseStyles {
2
5
  background-color: var(--color-sentiment-background-surface);
3
6
  color: var(--color-sentiment-content-primary);
@@ -36,7 +39,7 @@
36
39
  --color-sentiment-interactive-secondary-active: #A72027;
37
40
  --color-sentiment-interactive-secondary-neutral: #9B141B;
38
41
  --color-sentiment-interactive-secondary-neutral-hover: #831116;
39
- --color-sentiment-interactive-secondary-neutral-active: #6D0E13;
42
+ --color-sentiment-interactive-secondary-neutral-active: #6D0e13;
40
43
  --color-sentiment-interactive-control: #CB272F;
41
44
  --color-sentiment-interactive-control-hover: #B8232B;
42
45
  --color-sentiment-interactive-control-active: #A72027;
@@ -1182,12 +1185,12 @@
1182
1185
  pointer-events: auto;
1183
1186
  }
1184
1187
  .wds-Button {
1185
- --Button-background: var(--color-interactive-accent);
1186
- --Button-background-hover: var(--color-interactive-accent-hover);
1187
- --Button-background-active: var(--color-interactive-accent-active);
1188
- --Button-color: var(--color-interactive-control);
1189
- --Button-color-hover: var(--color-interactive-control-hover);
1190
- --Button-color-active: var(--color-interactive-control-active);
1188
+ --Button-background: var(--color-sentiment-interactive-primary, var(--color-interactive-accent));
1189
+ --Button-background-hover: var(--color-sentiment-interactive-primary-hover, var(--color-interactive-accent-hover));
1190
+ --Button-background-active: var(--color-sentiment-interactive-primary-active, var(--color-interactive-accent-active));
1191
+ --Button-color: var(--color-sentiment-interactive-control, var(--color-interactive-control));
1192
+ --Button-color-hover: var(--color-sentiment-interactive-control-hover, var(--color-interactive-control-hover));
1193
+ --Button-color-active: var(--color-sentiment-interactive-control-active, var(--color-interactive-control-active));
1191
1194
  --Button-border-radius: var(--radius-full);
1192
1195
  --Button-label-gap: var(--size-4);
1193
1196
  --Button-large-padding: var(--size-12) var(--size-16);
@@ -1196,16 +1199,16 @@
1196
1199
  --Button-avatar-border-color: var(--color-border-neutral);
1197
1200
  --Button-transition-duration: 150ms;
1198
1201
  --Button-transition-easing: ease-in-out;
1199
- --Button-secondary-background: var(--color-interactive-neutral);
1200
- --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
1201
- --Button-secondary-background-active: var(--color-interactive-neutral-active);
1202
- --Button-secondary-color: var(--color-interactive-primary);
1203
- --Button-secondary-color-hover: var(--color-interactive-primary-hover);
1204
- --Button-secondary-color-active: var(--color-interactive-primary-active);
1205
- --Button-secondary-neutral-background: var(--color-background-neutral);
1206
- --Button-secondary-neutral-background-hover: var(--color-background-neutral-hover);
1207
- --Button-secondary-neutral-background-active: var(--color-background-neutral-active);
1208
- --Button-secondary-neutral-color: var(--color-content-primary);
1202
+ --Button-secondary-background: var(--color-sentiment-interactive-secondary-neutral, var(--color-interactive-neutral));
1203
+ --Button-secondary-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-interactive-neutral-hover));
1204
+ --Button-secondary-background-active: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-interactive-neutral-active));
1205
+ --Button-secondary-color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
1206
+ --Button-secondary-color-hover: var(--color-sentiment-content-primary-hover, var(--color-interactive-primary-hover));
1207
+ --Button-secondary-color-active: var(--color-sentiment-content-primary-active, var(--color-interactive-primary-active));
1208
+ --Button-secondary-neutral-background: var(--color-sentiment-interactive-secondary-neutral, var(--color-background-neutral));
1209
+ --Button-secondary-neutral-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-background-neutral-hover));
1210
+ --Button-secondary-neutral-background-active: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-background-neutral-active));
1211
+ --Button-secondary-neutral-color: var(--color-sentiment-content-primary, var(--color-content-primary));
1209
1212
  --Button-tertiary-background: transparent;
1210
1213
  --Button-tertiary-background-hover: var(--color-background-screen-hover);
1211
1214
  --Button-tertiary-background-active: var(--color-background-screen-active);
package/build/styles/button/Button.css CHANGED
@@ -1,10 +1,10 @@
1
1
  .wds-Button {
2
- --Button-background: var(--color-interactive-accent);
3
- --Button-background-hover: var(--color-interactive-accent-hover);
4
- --Button-background-active: var(--color-interactive-accent-active);
5
- --Button-color: var(--color-interactive-control);
6
- --Button-color-hover: var(--color-interactive-control-hover);
7
- --Button-color-active: var(--color-interactive-control-active);
2
+ --Button-background: var(--color-sentiment-interactive-primary, var(--color-interactive-accent));
3
+ --Button-background-hover: var(--color-sentiment-interactive-primary-hover, var(--color-interactive-accent-hover));
4
+ --Button-background-active: var(--color-sentiment-interactive-primary-active, var(--color-interactive-accent-active));
5
+ --Button-color: var(--color-sentiment-interactive-control, var(--color-interactive-control));
6
+ --Button-color-hover: var(--color-sentiment-interactive-control-hover, var(--color-interactive-control-hover));
7
+ --Button-color-active: var(--color-sentiment-interactive-control-active, var(--color-interactive-control-active));
8
8
  --Button-border-radius: var(--radius-full);
9
9
  --Button-label-gap: var(--size-4);
10
10
  --Button-large-padding: var(--size-12) var(--size-16);
@@ -13,16 +13,16 @@
13
13
  --Button-avatar-border-color: var(--color-border-neutral);
14
14
  --Button-transition-duration: 150ms;
15
15
  --Button-transition-easing: ease-in-out;
16
- --Button-secondary-background: var(--color-interactive-neutral);
17
- --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
18
- --Button-secondary-background-active: var(--color-interactive-neutral-active);
19
- --Button-secondary-color: var(--color-interactive-primary);
20
- --Button-secondary-color-hover: var(--color-interactive-primary-hover);
21
- --Button-secondary-color-active: var(--color-interactive-primary-active);
22
- --Button-secondary-neutral-background: var(--color-background-neutral);
23
- --Button-secondary-neutral-background-hover: var(--color-background-neutral-hover);
24
- --Button-secondary-neutral-background-active: var(--color-background-neutral-active);
25
- --Button-secondary-neutral-color: var(--color-content-primary);
16
+ --Button-secondary-background: var(--color-sentiment-interactive-secondary-neutral, var(--color-interactive-neutral));
17
+ --Button-secondary-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-interactive-neutral-hover));
18
+ --Button-secondary-background-active: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-interactive-neutral-active));
19
+ --Button-secondary-color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
20
+ --Button-secondary-color-hover: var(--color-sentiment-content-primary-hover, var(--color-interactive-primary-hover));
21
+ --Button-secondary-color-active: var(--color-sentiment-content-primary-active, var(--color-interactive-primary-active));
22
+ --Button-secondary-neutral-background: var(--color-sentiment-interactive-secondary-neutral, var(--color-background-neutral));
23
+ --Button-secondary-neutral-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-background-neutral-hover));
24
+ --Button-secondary-neutral-background-active: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-background-neutral-active));
25
+ --Button-secondary-neutral-color: var(--color-sentiment-content-primary, var(--color-content-primary));
26
26
  --Button-tertiary-background: transparent;
27
27
  --Button-tertiary-background-hover: var(--color-background-screen-hover);
28
28
  --Button-tertiary-background-active: var(--color-background-screen-active);
package/build/styles/button/Button.vars.css CHANGED
@@ -1,10 +1,10 @@
1
1
  .wds-Button {
2
- --Button-background: var(--color-interactive-accent);
3
- --Button-background-hover: var(--color-interactive-accent-hover);
4
- --Button-background-active: var(--color-interactive-accent-active);
5
- --Button-color: var(--color-interactive-control);
6
- --Button-color-hover: var(--color-interactive-control-hover);
7
- --Button-color-active: var(--color-interactive-control-active);
2
+ --Button-background: var(--color-sentiment-interactive-primary, var(--color-interactive-accent));
3
+ --Button-background-hover: var(--color-sentiment-interactive-primary-hover, var(--color-interactive-accent-hover));
4
+ --Button-background-active: var(--color-sentiment-interactive-primary-active, var(--color-interactive-accent-active));
5
+ --Button-color: var(--color-sentiment-interactive-control, var(--color-interactive-control));
6
+ --Button-color-hover: var(--color-sentiment-interactive-control-hover, var(--color-interactive-control-hover));
7
+ --Button-color-active: var(--color-sentiment-interactive-control-active, var(--color-interactive-control-active));
8
8
  --Button-border-radius: var(--radius-full);
9
9
  --Button-label-gap: var(--size-4);
10
10
  --Button-large-padding: var(--size-12) var(--size-16);
@@ -13,16 +13,16 @@
13
13
  --Button-avatar-border-color: var(--color-border-neutral);
14
14
  --Button-transition-duration: 150ms;
15
15
  --Button-transition-easing: ease-in-out;
16
- --Button-secondary-background: var(--color-interactive-neutral);
17
- --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
18
- --Button-secondary-background-active: var(--color-interactive-neutral-active);
19
- --Button-secondary-color: var(--color-interactive-primary);
20
- --Button-secondary-color-hover: var(--color-interactive-primary-hover);
21
- --Button-secondary-color-active: var(--color-interactive-primary-active);
22
- --Button-secondary-neutral-background: var(--color-background-neutral);
23
- --Button-secondary-neutral-background-hover: var(--color-background-neutral-hover);
24
- --Button-secondary-neutral-background-active: var(--color-background-neutral-active);
25
- --Button-secondary-neutral-color: var(--color-content-primary);
16
+ --Button-secondary-background: var(--color-sentiment-interactive-secondary-neutral, var(--color-interactive-neutral));
17
+ --Button-secondary-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-interactive-neutral-hover));
18
+ --Button-secondary-background-active: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-interactive-neutral-active));
19
+ --Button-secondary-color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
20
+ --Button-secondary-color-hover: var(--color-sentiment-content-primary-hover, var(--color-interactive-primary-hover));
21
+ --Button-secondary-color-active: var(--color-sentiment-content-primary-active, var(--color-interactive-primary-active));
22
+ --Button-secondary-neutral-background: var(--color-sentiment-interactive-secondary-neutral, var(--color-background-neutral));
23
+ --Button-secondary-neutral-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-background-neutral-hover));
24
+ --Button-secondary-neutral-background-active: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-background-neutral-active));
25
+ --Button-secondary-neutral-color: var(--color-sentiment-content-primary, var(--color-content-primary));
26
26
  --Button-tertiary-background: transparent;
27
27
  --Button-tertiary-background-hover: var(--color-background-screen-hover);
28
28
  --Button-tertiary-background-active: var(--color-background-screen-active);
package/build/styles/main.css CHANGED
@@ -1,3 +1,6 @@
1
+ .wds-sentiment-surface {
2
+ --ring-outline-color: var(--color-sentiment-content-primary, var(--color-content-primary));
3
+ }
1
4
  .wds-sentiment-surface--hasBaseStyles {
2
5
  background-color: var(--color-sentiment-background-surface);
3
6
  color: var(--color-sentiment-content-primary);
@@ -36,7 +39,7 @@
36
39
  --color-sentiment-interactive-secondary-active: #A72027;
37
40
  --color-sentiment-interactive-secondary-neutral: #9B141B;
38
41
  --color-sentiment-interactive-secondary-neutral-hover: #831116;
39
- --color-sentiment-interactive-secondary-neutral-active: #6D0E13;
42
+ --color-sentiment-interactive-secondary-neutral-active: #6D0e13;
40
43
  --color-sentiment-interactive-control: #CB272F;
41
44
  --color-sentiment-interactive-control-hover: #B8232B;
42
45
  --color-sentiment-interactive-control-active: #A72027;
@@ -1182,12 +1185,12 @@
1182
1185
  pointer-events: auto;
1183
1186
  }
1184
1187
  .wds-Button {
1185
- --Button-background: var(--color-interactive-accent);
1186
- --Button-background-hover: var(--color-interactive-accent-hover);
1187
- --Button-background-active: var(--color-interactive-accent-active);
1188
- --Button-color: var(--color-interactive-control);
1189
- --Button-color-hover: var(--color-interactive-control-hover);
1190
- --Button-color-active: var(--color-interactive-control-active);
1188
+ --Button-background: var(--color-sentiment-interactive-primary, var(--color-interactive-accent));
1189
+ --Button-background-hover: var(--color-sentiment-interactive-primary-hover, var(--color-interactive-accent-hover));
1190
+ --Button-background-active: var(--color-sentiment-interactive-primary-active, var(--color-interactive-accent-active));
1191
+ --Button-color: var(--color-sentiment-interactive-control, var(--color-interactive-control));
1192
+ --Button-color-hover: var(--color-sentiment-interactive-control-hover, var(--color-interactive-control-hover));
1193
+ --Button-color-active: var(--color-sentiment-interactive-control-active, var(--color-interactive-control-active));
1191
1194
  --Button-border-radius: var(--radius-full);
1192
1195
  --Button-label-gap: var(--size-4);
1193
1196
  --Button-large-padding: var(--size-12) var(--size-16);
@@ -1196,16 +1199,16 @@
1196
1199
  --Button-avatar-border-color: var(--color-border-neutral);
1197
1200
  --Button-transition-duration: 150ms;
1198
1201
  --Button-transition-easing: ease-in-out;
1199
- --Button-secondary-background: var(--color-interactive-neutral);
1200
- --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
1201
- --Button-secondary-background-active: var(--color-interactive-neutral-active);
1202
- --Button-secondary-color: var(--color-interactive-primary);
1203
- --Button-secondary-color-hover: var(--color-interactive-primary-hover);
1204
- --Button-secondary-color-active: var(--color-interactive-primary-active);
1205
- --Button-secondary-neutral-background: var(--color-background-neutral);
1206
- --Button-secondary-neutral-background-hover: var(--color-background-neutral-hover);
1207
- --Button-secondary-neutral-background-active: var(--color-background-neutral-active);
1208
- --Button-secondary-neutral-color: var(--color-content-primary);
1202
+ --Button-secondary-background: var(--color-sentiment-interactive-secondary-neutral, var(--color-interactive-neutral));
1203
+ --Button-secondary-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-interactive-neutral-hover));
1204
+ --Button-secondary-background-active: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-interactive-neutral-active));
1205
+ --Button-secondary-color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
1206
+ --Button-secondary-color-hover: var(--color-sentiment-content-primary-hover, var(--color-interactive-primary-hover));
1207
+ --Button-secondary-color-active: var(--color-sentiment-content-primary-active, var(--color-interactive-primary-active));
1208
+ --Button-secondary-neutral-background: var(--color-sentiment-interactive-secondary-neutral, var(--color-background-neutral));
1209
+ --Button-secondary-neutral-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-background-neutral-hover));
1210
+ --Button-secondary-neutral-background-active: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-background-neutral-active));
1211
+ --Button-secondary-neutral-color: var(--color-sentiment-content-primary, var(--color-content-primary));
1209
1212
  --Button-tertiary-background: transparent;
1210
1213
  --Button-tertiary-background-hover: var(--color-background-screen-hover);
1211
1214
  --Button-tertiary-background-active: var(--color-background-screen-active);
package/build/styles/sentimentSurface/SentimentSurface.css CHANGED
@@ -1,3 +1,6 @@
1
+ .wds-sentiment-surface {
2
+ --ring-outline-color: var(--color-sentiment-content-primary, var(--color-content-primary));
3
+ }
1
4
  .wds-sentiment-surface--hasBaseStyles {
2
5
  background-color: var(--color-sentiment-background-surface);
3
6
  color: var(--color-sentiment-content-primary);
@@ -36,7 +39,7 @@
36
39
  --color-sentiment-interactive-secondary-active: #A72027;
37
40
  --color-sentiment-interactive-secondary-neutral: #9B141B;
38
41
  --color-sentiment-interactive-secondary-neutral-hover: #831116;
39
- --color-sentiment-interactive-secondary-neutral-active: #6D0E13;
42
+ --color-sentiment-interactive-secondary-neutral-active: #6D0e13;
40
43
  --color-sentiment-interactive-control: #CB272F;
41
44
  --color-sentiment-interactive-control-hover: #B8232B;
42
45
  --color-sentiment-interactive-control-active: #A72027;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-b447014",
3
+ "version": "0.0.0-experimental-1d87337",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -84,13 +84,13 @@
84
84
  "storybook-addon-tag-badges": "^2.0.2",
85
85
  "storybook-addon-test-codegen": "^2.0.1",
86
86
  "@transferwise/less-config": "3.1.2",
87
- "@transferwise/neptune-css": "0.0.0-experimental-b447014",
87
+ "@transferwise/neptune-css": "0.0.0-experimental-1d87337",
88
88
  "@wise/components-theming": "1.9.1",
89
89
  "@wise/wds-configs": "0.0.0"
90
90
  },
91
91
  "peerDependencies": {
92
92
  "@transferwise/icons": "^3 || ^4",
93
- "@transferwise/neptune-css": "0.0.0-experimental-b447014",
93
+ "@transferwise/neptune-css": "0.0.0-experimental-1d87337",
94
94
  "@wise/art": "^2.24.4",
95
95
  "@wise/components-theming": "^1.6.2",
96
96
  "react": ">=18",
package/src/button/Button.css CHANGED
@@ -1,10 +1,10 @@
1
1
  .wds-Button {
2
- --Button-background: var(--color-interactive-accent);
3
- --Button-background-hover: var(--color-interactive-accent-hover);
4
- --Button-background-active: var(--color-interactive-accent-active);
5
- --Button-color: var(--color-interactive-control);
6
- --Button-color-hover: var(--color-interactive-control-hover);
7
- --Button-color-active: var(--color-interactive-control-active);
2
+ --Button-background: var(--color-sentiment-interactive-primary, var(--color-interactive-accent));
3
+ --Button-background-hover: var(--color-sentiment-interactive-primary-hover, var(--color-interactive-accent-hover));
4
+ --Button-background-active: var(--color-sentiment-interactive-primary-active, var(--color-interactive-accent-active));
5
+ --Button-color: var(--color-sentiment-interactive-control, var(--color-interactive-control));
6
+ --Button-color-hover: var(--color-sentiment-interactive-control-hover, var(--color-interactive-control-hover));
7
+ --Button-color-active: var(--color-sentiment-interactive-control-active, var(--color-interactive-control-active));
8
8
  --Button-border-radius: var(--radius-full);
9
9
  --Button-label-gap: var(--size-4);
10
10
  --Button-large-padding: var(--size-12) var(--size-16);
@@ -13,16 +13,16 @@
13
13
  --Button-avatar-border-color: var(--color-border-neutral);
14
14
  --Button-transition-duration: 150ms;
15
15
  --Button-transition-easing: ease-in-out;
16
- --Button-secondary-background: var(--color-interactive-neutral);
17
- --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
18
- --Button-secondary-background-active: var(--color-interactive-neutral-active);
19
- --Button-secondary-color: var(--color-interactive-primary);
20
- --Button-secondary-color-hover: var(--color-interactive-primary-hover);
21
- --Button-secondary-color-active: var(--color-interactive-primary-active);
22
- --Button-secondary-neutral-background: var(--color-background-neutral);
23
- --Button-secondary-neutral-background-hover: var(--color-background-neutral-hover);
24
- --Button-secondary-neutral-background-active: var(--color-background-neutral-active);
25
- --Button-secondary-neutral-color: var(--color-content-primary);
16
+ --Button-secondary-background: var(--color-sentiment-interactive-secondary-neutral, var(--color-interactive-neutral));
17
+ --Button-secondary-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-interactive-neutral-hover));
18
+ --Button-secondary-background-active: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-interactive-neutral-active));
19
+ --Button-secondary-color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
20
+ --Button-secondary-color-hover: var(--color-sentiment-content-primary-hover, var(--color-interactive-primary-hover));
21
+ --Button-secondary-color-active: var(--color-sentiment-content-primary-active, var(--color-interactive-primary-active));
22
+ --Button-secondary-neutral-background: var(--color-sentiment-interactive-secondary-neutral, var(--color-background-neutral));
23
+ --Button-secondary-neutral-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-background-neutral-hover));
24
+ --Button-secondary-neutral-background-active: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-background-neutral-active));
25
+ --Button-secondary-neutral-color: var(--color-sentiment-content-primary, var(--color-content-primary));
26
26
  --Button-tertiary-background: transparent;
27
27
  --Button-tertiary-background-hover: var(--color-background-screen-hover);
28
28
  --Button-tertiary-background-active: var(--color-background-screen-active);
package/src/button/Button.story.tsx CHANGED
@@ -5,6 +5,7 @@ import { Flag } from '@wise/art';
5
5
  import Button from './Button.resolver';
6
6
  import type { ButtonProps, ButtonPriority } from './Button.types';
7
7
  import { lorem10, lorem20, storyConfig } from '../test-utils';
8
+ import SentimentSurface from '../sentimentSurface';
8
9
 
9
10
  const withContainer = (Story: any) => (
10
11
  <div style={{ display: 'flex', justifyContent: 'center' }}>
@@ -908,3 +909,46 @@ export const AccessibilityAddons: Story = {
908
909
  },
909
910
  tags: ['!autodocs', '!dev'],
910
911
  };
912
+
913
+ /**
914
+ * `Button` is sentiment-aware and will automatically adjust its
915
+ * colours if wrapped inside the [SentimentSurface](/?path=/docs/content-sentimentsurface--docs) component
916
+ */
917
+ export const SentimentAwareness: Story = {
918
+ render: () => (
919
+ <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
920
+ {(['success', 'warning', 'negative', 'neutral', 'proposition'] as const).map((sentiment) => (
921
+ <SentimentSurface
922
+ key={sentiment}
923
+ sentiment={sentiment}
924
+ className="p-a-1"
925
+ style={{
926
+ color: 'var(--color-sentiment-content-primary)',
927
+ backgroundColor: 'var(--color-sentiment-background-surface)',
928
+ }}
929
+ >
930
+ <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
931
+ <Button v2>Primary</Button>
932
+ <Button v2 priority="secondary">
933
+ Secondary
934
+ </Button>
935
+ <Button v2 priority="secondary-neutral">
936
+ Secondary Neutral
937
+ </Button>
938
+ <Button v2 sentiment="negative">
939
+ Negative
940
+ </Button>
941
+ <Button v2 disabled>
942
+ Disabled
943
+ </Button>
944
+ </div>
945
+ </SentimentSurface>
946
+ ))}
947
+ </div>
948
+ ),
949
+ parameters: {
950
+ docs: {
951
+ source: { type: 'dynamic' },
952
+ },
953
+ },
954
+ };
package/src/button/Button.vars.css CHANGED
@@ -1,10 +1,10 @@
1
1
  .wds-Button {
2
- --Button-background: var(--color-interactive-accent);
3
- --Button-background-hover: var(--color-interactive-accent-hover);
4
- --Button-background-active: var(--color-interactive-accent-active);
5
- --Button-color: var(--color-interactive-control);
6
- --Button-color-hover: var(--color-interactive-control-hover);
7
- --Button-color-active: var(--color-interactive-control-active);
2
+ --Button-background: var(--color-sentiment-interactive-primary, var(--color-interactive-accent));
3
+ --Button-background-hover: var(--color-sentiment-interactive-primary-hover, var(--color-interactive-accent-hover));
4
+ --Button-background-active: var(--color-sentiment-interactive-primary-active, var(--color-interactive-accent-active));
5
+ --Button-color: var(--color-sentiment-interactive-control, var(--color-interactive-control));
6
+ --Button-color-hover: var(--color-sentiment-interactive-control-hover, var(--color-interactive-control-hover));
7
+ --Button-color-active: var(--color-sentiment-interactive-control-active, var(--color-interactive-control-active));
8
8
  --Button-border-radius: var(--radius-full);
9
9
  --Button-label-gap: var(--size-4);
10
10
  --Button-large-padding: var(--size-12) var(--size-16);
@@ -13,16 +13,16 @@
13
13
  --Button-avatar-border-color: var(--color-border-neutral);
14
14
  --Button-transition-duration: 150ms;
15
15
  --Button-transition-easing: ease-in-out;
16
- --Button-secondary-background: var(--color-interactive-neutral);
17
- --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
18
- --Button-secondary-background-active: var(--color-interactive-neutral-active);
19
- --Button-secondary-color: var(--color-interactive-primary);
20
- --Button-secondary-color-hover: var(--color-interactive-primary-hover);
21
- --Button-secondary-color-active: var(--color-interactive-primary-active);
22
- --Button-secondary-neutral-background: var(--color-background-neutral);
23
- --Button-secondary-neutral-background-hover: var(--color-background-neutral-hover);
24
- --Button-secondary-neutral-background-active: var(--color-background-neutral-active);
25
- --Button-secondary-neutral-color: var(--color-content-primary);
16
+ --Button-secondary-background: var(--color-sentiment-interactive-secondary-neutral, var(--color-interactive-neutral));
17
+ --Button-secondary-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-interactive-neutral-hover));
18
+ --Button-secondary-background-active: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-interactive-neutral-active));
19
+ --Button-secondary-color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
20
+ --Button-secondary-color-hover: var(--color-sentiment-content-primary-hover, var(--color-interactive-primary-hover));
21
+ --Button-secondary-color-active: var(--color-sentiment-content-primary-active, var(--color-interactive-primary-active));
22
+ --Button-secondary-neutral-background: var(--color-sentiment-interactive-secondary-neutral, var(--color-background-neutral));
23
+ --Button-secondary-neutral-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-background-neutral-hover));
24
+ --Button-secondary-neutral-background-active: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-background-neutral-active));
25
+ --Button-secondary-neutral-color: var(--color-sentiment-content-primary, var(--color-content-primary));
26
26
  --Button-tertiary-background: transparent;
27
27
  --Button-tertiary-background-hover: var(--color-background-screen-hover);
28
28
  --Button-tertiary-background-active: var(--color-background-screen-active);
package/src/button/Button.vars.less CHANGED
@@ -1,10 +1,22 @@
1
1
  .wds-Button {
2
- --Button-background: var(--color-interactive-accent);
3
- --Button-background-hover: var(--color-interactive-accent-hover);
4
- --Button-background-active: var(--color-interactive-accent-active);
5
- --Button-color: var(--color-interactive-control);
6
- --Button-color-hover: var(--color-interactive-control-hover);
7
- --Button-color-active: var(--color-interactive-control-active);
2
+ --Button-background: var(--color-sentiment-interactive-primary, var(--color-interactive-accent));
3
+ --Button-background-hover: var(
4
+ --color-sentiment-interactive-primary-hover,
5
+ var(--color-interactive-accent-hover)
6
+ );
7
+ --Button-background-active: var(
8
+ --color-sentiment-interactive-primary-active,
9
+ var(--color-interactive-accent-active)
10
+ );
11
+ --Button-color: var(--color-sentiment-interactive-control, var(--color-interactive-control));
12
+ --Button-color-hover: var(
13
+ --color-sentiment-interactive-control-hover,
14
+ var(--color-interactive-control-hover)
15
+ );
16
+ --Button-color-active: var(
17
+ --color-sentiment-interactive-control-active,
18
+ var(--color-interactive-control-active)
19
+ );
8
20
  --Button-border-radius: var(--radius-full);
9
21
  --Button-label-gap: var(--size-4);
10
22
 
@@ -16,17 +28,47 @@
16
28
  --Button-transition-duration: 150ms;
17
29
  --Button-transition-easing: ease-in-out;
18
30
 
19
- --Button-secondary-background: var(--color-interactive-neutral);
20
- --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
21
- --Button-secondary-background-active: var(--color-interactive-neutral-active);
22
- --Button-secondary-color: var(--color-interactive-primary);
23
- --Button-secondary-color-hover: var(--color-interactive-primary-hover);
24
- --Button-secondary-color-active: var(--color-interactive-primary-active);
31
+ --Button-secondary-background: var(
32
+ --color-sentiment-interactive-secondary-neutral,
33
+ var(--color-interactive-neutral)
34
+ );
35
+ --Button-secondary-background-hover: var(
36
+ --color-sentiment-interactive-secondary-neutral-hover,
37
+ var(--color-interactive-neutral-hover)
38
+ );
39
+ --Button-secondary-background-active: var(
40
+ --color-sentiment-interactive-secondary-neutral-active,
41
+ var(--color-interactive-neutral-active)
42
+ );
43
+ --Button-secondary-color: var(
44
+ --color-sentiment-content-primary,
45
+ var(--color-interactive-primary)
46
+ );
47
+ --Button-secondary-color-hover: var(
48
+ --color-sentiment-content-primary-hover,
49
+ var(--color-interactive-primary-hover)
50
+ );
51
+ --Button-secondary-color-active: var(
52
+ --color-sentiment-content-primary-active,
53
+ var(--color-interactive-primary-active)
54
+ );
25
55
 
26
- --Button-secondary-neutral-background: var(--color-background-neutral);
27
- --Button-secondary-neutral-background-hover: var(--color-background-neutral-hover);
28
- --Button-secondary-neutral-background-active: var(--color-background-neutral-active);
29
- --Button-secondary-neutral-color: var(--color-content-primary);
56
+ --Button-secondary-neutral-background: var(
57
+ --color-sentiment-interactive-secondary-neutral,
58
+ var(--color-background-neutral)
59
+ );
60
+ --Button-secondary-neutral-background-hover: var(
61
+ --color-sentiment-interactive-secondary-neutral-hover,
62
+ var(--color-background-neutral-hover)
63
+ );
64
+ --Button-secondary-neutral-background-active: var(
65
+ --color-sentiment-interactive-secondary-neutral-active,
66
+ var(--color-background-neutral-active)
67
+ );
68
+ --Button-secondary-neutral-color: var(
69
+ --color-sentiment-content-primary,
70
+ var(--color-content-primary)
71
+ );
30
72
 
31
73
  --Button-tertiary-background: transparent;
32
74
  --Button-tertiary-background-hover: var(--color-background-screen-hover);
@@ -52,5 +94,3 @@
52
94
  --Button-secondary-negative-color: var(--color-white);
53
95
  }
54
96
  }
55
-
56
-
package/src/main.css CHANGED
@@ -1,3 +1,6 @@
1
+ .wds-sentiment-surface {
2
+ --ring-outline-color: var(--color-sentiment-content-primary, var(--color-content-primary));
3
+ }
1
4
  .wds-sentiment-surface--hasBaseStyles {
2
5
  background-color: var(--color-sentiment-background-surface);
3
6
  color: var(--color-sentiment-content-primary);
@@ -36,7 +39,7 @@
36
39
  --color-sentiment-interactive-secondary-active: #A72027;
37
40
  --color-sentiment-interactive-secondary-neutral: #9B141B;
38
41
  --color-sentiment-interactive-secondary-neutral-hover: #831116;
39
- --color-sentiment-interactive-secondary-neutral-active: #6D0E13;
42
+ --color-sentiment-interactive-secondary-neutral-active: #6D0e13;
40
43
  --color-sentiment-interactive-control: #CB272F;
41
44
  --color-sentiment-interactive-control-hover: #B8232B;
42
45
  --color-sentiment-interactive-control-active: #A72027;
@@ -1182,12 +1185,12 @@
1182
1185
  pointer-events: auto;
1183
1186
  }
1184
1187
  .wds-Button {
1185
- --Button-background: var(--color-interactive-accent);
1186
- --Button-background-hover: var(--color-interactive-accent-hover);
1187
- --Button-background-active: var(--color-interactive-accent-active);
1188
- --Button-color: var(--color-interactive-control);
1189
- --Button-color-hover: var(--color-interactive-control-hover);
1190
- --Button-color-active: var(--color-interactive-control-active);
1188
+ --Button-background: var(--color-sentiment-interactive-primary, var(--color-interactive-accent));
1189
+ --Button-background-hover: var(--color-sentiment-interactive-primary-hover, var(--color-interactive-accent-hover));
1190
+ --Button-background-active: var(--color-sentiment-interactive-primary-active, var(--color-interactive-accent-active));
1191
+ --Button-color: var(--color-sentiment-interactive-control, var(--color-interactive-control));
1192
+ --Button-color-hover: var(--color-sentiment-interactive-control-hover, var(--color-interactive-control-hover));
1193
+ --Button-color-active: var(--color-sentiment-interactive-control-active, var(--color-interactive-control-active));
1191
1194
  --Button-border-radius: var(--radius-full);
1192
1195
  --Button-label-gap: var(--size-4);
1193
1196
  --Button-large-padding: var(--size-12) var(--size-16);
@@ -1196,16 +1199,16 @@
1196
1199
  --Button-avatar-border-color: var(--color-border-neutral);
1197
1200
  --Button-transition-duration: 150ms;
1198
1201
  --Button-transition-easing: ease-in-out;
1199
- --Button-secondary-background: var(--color-interactive-neutral);
1200
- --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
1201
- --Button-secondary-background-active: var(--color-interactive-neutral-active);
1202
- --Button-secondary-color: var(--color-interactive-primary);
1203
- --Button-secondary-color-hover: var(--color-interactive-primary-hover);
1204
- --Button-secondary-color-active: var(--color-interactive-primary-active);
1205
- --Button-secondary-neutral-background: var(--color-background-neutral);
1206
- --Button-secondary-neutral-background-hover: var(--color-background-neutral-hover);
1207
- --Button-secondary-neutral-background-active: var(--color-background-neutral-active);
1208
- --Button-secondary-neutral-color: var(--color-content-primary);
1202
+ --Button-secondary-background: var(--color-sentiment-interactive-secondary-neutral, var(--color-interactive-neutral));
1203
+ --Button-secondary-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-interactive-neutral-hover));
1204
+ --Button-secondary-background-active: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-interactive-neutral-active));
1205
+ --Button-secondary-color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
1206
+ --Button-secondary-color-hover: var(--color-sentiment-content-primary-hover, var(--color-interactive-primary-hover));
1207
+ --Button-secondary-color-active: var(--color-sentiment-content-primary-active, var(--color-interactive-primary-active));
1208
+ --Button-secondary-neutral-background: var(--color-sentiment-interactive-secondary-neutral, var(--color-background-neutral));
1209
+ --Button-secondary-neutral-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-background-neutral-hover));
1210
+ --Button-secondary-neutral-background-active: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-background-neutral-active));
1211
+ --Button-secondary-neutral-color: var(--color-sentiment-content-primary, var(--color-content-primary));
1209
1212
  --Button-tertiary-background: transparent;
1210
1213
  --Button-tertiary-background-hover: var(--color-background-screen-hover);
1211
1214
  --Button-tertiary-background-active: var(--color-background-screen-active);
package/src/sentimentSurface/SentimentSurface.css CHANGED
@@ -1,3 +1,6 @@
1
+ .wds-sentiment-surface {
2
+ --ring-outline-color: var(--color-sentiment-content-primary, var(--color-content-primary));
3
+ }
1
4
  .wds-sentiment-surface--hasBaseStyles {
2
5
  background-color: var(--color-sentiment-background-surface);
3
6
  color: var(--color-sentiment-content-primary);
@@ -36,7 +39,7 @@
36
39
  --color-sentiment-interactive-secondary-active: #A72027;
37
40
  --color-sentiment-interactive-secondary-neutral: #9B141B;
38
41
  --color-sentiment-interactive-secondary-neutral-hover: #831116;
39
- --color-sentiment-interactive-secondary-neutral-active: #6D0E13;
42
+ --color-sentiment-interactive-secondary-neutral-active: #6D0e13;
40
43
  --color-sentiment-interactive-control: #CB272F;
41
44
  --color-sentiment-interactive-control-hover: #B8232B;
42
45
  --color-sentiment-interactive-control-active: #A72027;
package/src/sentimentSurface/SentimentSurface.less CHANGED
@@ -1,14 +1,14 @@
1
1
  .wds-sentiment-surface {
2
- &--hasBaseStyles {
3
- background-color: var(--color-sentiment-background-surface);
4
- color: var(--color-sentiment-content-primary);
5
- }
2
+ &--hasBaseStyles {
3
+ background-color: var(--color-sentiment-background-surface);
4
+ color: var(--color-sentiment-content-primary);
5
+ }
6
6
 
7
- &-negative {
8
- .np-theme-personal &,
9
- .np-theme-personal--bright-green & {
10
- &-base {
11
- .sentiment-surface-tokens(
7
+ &-negative {
8
+ .np-theme-personal &,
9
+ .np-theme-personal--bright-green & {
10
+ &-base {
11
+ .sentiment-surface-tokens(
12
12
  #CB272F, #B8232B, #A72027,
13
13
  #CB272F, #B8232B, #A72027,
14
14
  #FBEAEA, #F9E1E1, #F8D8D8,
@@ -16,23 +16,23 @@
16
16
  #FBEAEA, #F9E1E1, #F8D8D8,
17
17
  #FBEAEA, #F9E1E1, #F8D8D8
18
18
  );
19
- }
20
- &-elevated {
21
- .sentiment-surface-tokens(
19
+ }
20
+ &-elevated {
21
+ .sentiment-surface-tokens(
22
22
  #FFFFFF, #F5CCCC, #F1B7B7,
23
23
  #FBEAEA, #F5CCCC, #F1B7B7,
24
24
  #CB272F, #B8232B, #A72027,
25
- #9B141B, #831116, #6D0E13,
25
+ #9B141B, #831116, #6D0e13,
26
26
  #CB272F, #B8232B, #A72027,
27
27
  #90000D, #B8232B, #A72027
28
28
  );
29
- }
30
- }
29
+ }
30
+ }
31
31
 
32
- .np-theme-personal--dark &,
33
- .np-theme-personal--forest-green & {
34
- &-base {
35
- .sentiment-surface-tokens(
32
+ .np-theme-personal--dark &,
33
+ .np-theme-personal--forest-green & {
34
+ &-base {
35
+ .sentiment-surface-tokens(
36
36
  #FFA8AD, #FFBDC0, #FFD1D3,
37
37
  #FFA8AD, #FFBDC0, #FFD1D3,
38
38
  #410B0D, #641115, #761418,
@@ -40,9 +40,9 @@
40
40
  #410B0D, #641115, #761418,
41
41
  #410B0D, #641115, #761418
42
42
  );
43
- }
44
- &-elevated {
45
- .sentiment-surface-tokens(
43
+ }
44
+ &-elevated {
45
+ .sentiment-surface-tokens(
46
46
  #410B0D, #641115, #761418,
47
47
  #410B0D, #641115, #761418,
48
48
  #FFA8AD, #FFBDC0, #FFD1D3,
@@ -50,15 +50,15 @@
50
50
  #FFA8AD, #FFBDC0, #FFD1D3,
51
51
  #FFA8AD, #FFBDC0, #FFD1D3
52
52
  );
53
- }
54
- }
53
+ }
55
54
  }
55
+ }
56
56
 
57
- &-warning {
58
- .np-theme-personal &,
59
- .np-theme-personal--bright-green & {
60
- &-base {
61
- .sentiment-surface-tokens(
57
+ &-warning {
58
+ .np-theme-personal &,
59
+ .np-theme-personal--bright-green & {
60
+ &-base {
61
+ .sentiment-surface-tokens(
62
62
  #4A3B1C, #302612, #2C2311, // content-primary (default, hover, active)
63
63
  #FFD11A, #FFBF0F, #FFBB00, // interactive-primary
64
64
  #FFF7D7, #FFF0B2, #FFE98F, // interactive-secondary
@@ -66,9 +66,9 @@
66
66
  #4A3B1C, #302612, #2C2311, // interactive-control
67
67
  #FFF7D7, #FFF0B2, #FFE98F // background-surface
68
68
  );
69
- }
70
- &-elevated {
71
- .sentiment-surface-tokens(
69
+ }
70
+ &-elevated {
71
+ .sentiment-surface-tokens(
72
72
  #4A3B1C, #302612, #2C2311, // content-primary
73
73
  #4A3B1C, #302612, #2C2311, // interactive-primary
74
74
  #FFD11A, #FFBF0F, #FFBB00, // interactive-secondary
@@ -76,13 +76,13 @@
76
76
  #FFD11A, #FFBF0F, #FFBB00, // interactive-control
77
77
  #FFD11A, #FFBF0F, #FFBB00 // background-surface
78
78
  );
79
- }
80
- }
79
+ }
80
+ }
81
81
 
82
- .np-theme-personal--dark &,
83
- .np-theme-personal--forest-green & {
84
- &-base {
85
- .sentiment-surface-tokens(
82
+ .np-theme-personal--dark &,
83
+ .np-theme-personal--forest-green & {
84
+ &-base {
85
+ .sentiment-surface-tokens(
86
86
  #FADC65, #F9D648, #F8CD20, // content-primary
87
87
  #FADC65, #F9D648, #F8CD20, // interactive-primary
88
88
  #3A3523, #504930, #665D3D, // interactive-secondary
@@ -90,9 +90,9 @@
90
90
  #3A3523, #504930, #665D3D, // interactive-control
91
91
  #3A3523, #504930, #665D3D // background-surface
92
92
  );
93
- }
94
- &-elevated {
95
- .sentiment-surface-tokens(
93
+ }
94
+ &-elevated {
95
+ .sentiment-surface-tokens(
96
96
  #3A3523, #504930, #665D3D, // content-primary
97
97
  #3A3523, #504930, #665D3D, // interactive-primary
98
98
  #FADC65, #F9D648, #F8CD20, // interactive-secondary
@@ -100,14 +100,14 @@
100
100
  #FADC65, #F9D648, #F8CD20, // interactive-control
101
101
  #FADC65, #F9D648, #F8CD20 // background-surface
102
102
  );
103
- }
104
- }
103
+ }
105
104
  }
106
- &-success {
107
- .np-theme-personal &,
108
- .np-theme-personal--bright-green & {
109
- &-base {
110
- .sentiment-surface-tokens(
105
+ }
106
+ &-success {
107
+ .np-theme-personal &,
108
+ .np-theme-personal--bright-green & {
109
+ &-base {
110
+ .sentiment-surface-tokens(
111
111
  #054D28, #043A1E, #022614, // content-primary (default, hover, active)
112
112
  #054D28, #043A1E, #022614, // interactive-primary
113
113
  #E2F6D5, #D3F2C0, #C5EDAB, // interactive-secondary
@@ -115,9 +115,9 @@
115
115
  #E2F6D5, #D3F2C0, #C5EDAB, // interactive-control
116
116
  #E2F6D5, #D3F2C0, #C5EDAB // background-surface
117
117
  );
118
- }
119
- &-elevated {
120
- .sentiment-surface-tokens(
118
+ }
119
+ &-elevated {
120
+ .sentiment-surface-tokens(
121
121
  #E2F6D5, #D3F2C0, #C5EDAB, // content-primary
122
122
  #E2F6D5, #D3F2C0, #C5EDAB, // interactive-primary
123
123
  #054D28, #043A1E, #022614, // interactive-secondary
@@ -125,13 +125,13 @@
125
125
  #054D28, #043A1E, #022614, // interactive-control
126
126
  #054D28, #043A1E, #022614 // background-surface
127
127
  );
128
- }
129
- }
128
+ }
129
+ }
130
130
 
131
- .np-theme-personal--dark &,
132
- .np-theme-personal--forest-green & {
133
- &-base {
134
- .sentiment-surface-tokens(
131
+ .np-theme-personal--dark &,
132
+ .np-theme-personal--forest-green & {
133
+ &-base {
134
+ .sentiment-surface-tokens(
135
135
  #BAE5A0, #C8EAB3, #D6F0C7, // content-primary
136
136
  #BAE5A0, #C8EAB3, #D6F0C7, // interactive-primary
137
137
  #252C20, #323B2B, #3E4A36, // interactive-secondary
@@ -139,9 +139,9 @@
139
139
  #252C20, #323B2B, #3E4A36, // interactive-control
140
140
  #252C20, #323B2B, #3E4A36 // background-surface
141
141
  );
142
- }
143
- &-elevated {
144
- .sentiment-surface-tokens(
142
+ }
143
+ &-elevated {
144
+ .sentiment-surface-tokens(
145
145
  #252C20, #323B2B, #3E4A36, // content-primary
146
146
  #252C20, #323B2B, #3E4A36, // interactive-primary
147
147
  #BAE5A0, #C8EAB3, #D6F0C7, // interactive-secondary
@@ -149,14 +149,14 @@
149
149
  #BAE5A0, #C8EAB3, #D6F0C7, // interactive-control
150
150
  #BAE5A0, #C8EAB3, #D6F0C7 // background-surface
151
151
  );
152
- }
153
- }
152
+ }
154
153
  }
155
- &-neutral {
156
- .np-theme-personal &,
157
- .np-theme-personal--bright-green & {
158
- &-base {
159
- .sentiment-surface-tokens(
154
+ }
155
+ &-neutral {
156
+ .np-theme-personal &,
157
+ .np-theme-personal--bright-green & {
158
+ &-base {
159
+ .sentiment-surface-tokens(
160
160
  #454745, #353635, #232423, // content-primary (default, hover, active)
161
161
  #454745, #353635, #232423, // interactive-primary
162
162
  #F1F1ED, #E7E7E1, #DFDED5, // interactive-secondary
@@ -164,9 +164,9 @@
164
164
  #F1F1ED, #E7E7E1, #DFDED5, // interactive-control
165
165
  #F1F1ED, #E7E7E1, #DFDED5 // background-surface
166
166
  );
167
- }
168
- &-elevated {
169
- .sentiment-surface-tokens(
167
+ }
168
+ &-elevated {
169
+ .sentiment-surface-tokens(
170
170
  #F1F1ED, #E7E7E1, #DFDED5, // content-primary
171
171
  #F1F1ED, #E7E7E1, #DFDED5, // interactive-primary
172
172
  #454745, #353635, #232423, // interactive-secondary
@@ -174,13 +174,13 @@
174
174
  #454745, #353635, #232423, // interactive-control
175
175
  #454745, #353635, #232423 // background-surface
176
176
  );
177
- }
178
- }
177
+ }
178
+ }
179
179
 
180
- .np-theme-personal--dark &,
181
- .np-theme-personal--forest-green & {
182
- &-base {
183
- .sentiment-surface-tokens(
180
+ .np-theme-personal--dark &,
181
+ .np-theme-personal--forest-green & {
182
+ &-base {
183
+ .sentiment-surface-tokens(
184
184
  #F1F1ED, #E7E7E1, #DFDED5, // content-primary
185
185
  #F1F1ED, #E7E7E1, #DFDED5, // interactive-primary
186
186
  #2A2C29, #414441, #595B58, // interactive-secondary
@@ -188,9 +188,9 @@
188
188
  #2A2C29, #414441, #595B58, // interactive-control
189
189
  #2A2C29, #414441, #595B58 // background-surface
190
190
  );
191
- }
192
- &-elevated {
193
- .sentiment-surface-tokens(
191
+ }
192
+ &-elevated {
193
+ .sentiment-surface-tokens(
194
194
  #2A2C29, #414441, #595B58, // content-primary
195
195
  #2A2C29, #414441, #595B58, // interactive-primary
196
196
  #F1F1ED, #E7E7E1, #DFDED5, // interactive-secondary
@@ -198,14 +198,14 @@
198
198
  #F1F1ED, #E7E7E1, #DFDED5, // interactive-control
199
199
  #F1F1ED, #E7E7E1, #DFDED5 // background-surface
200
200
  );
201
- }
202
- }
201
+ }
203
202
  }
204
- &-proposition {
205
- .np-theme-personal &,
206
- .np-theme-personal--bright-green & {
207
- &-base {
208
- .sentiment-surface-tokens(
203
+ }
204
+ &-proposition {
205
+ .np-theme-personal &,
206
+ .np-theme-personal--bright-green & {
207
+ &-base {
208
+ .sentiment-surface-tokens(
209
209
  #0E0F0C, #0A2826, #074140, // content-primary (default, hover, active)
210
210
  #054D4D, #043A3A, #022626, // interactive-primary
211
211
  #E0F7F7, #CAF1F1, #B6ECEC, // interactive-secondary
@@ -213,9 +213,9 @@
213
213
  #E0F7F7, #CAF1F1, #B6ECEC, // interactive-control
214
214
  #E0F7F7, #CAF1F1, #B6ECEC // background-surface
215
215
  );
216
- }
217
- &-elevated {
218
- .sentiment-surface-tokens(
216
+ }
217
+ &-elevated {
218
+ .sentiment-surface-tokens(
219
219
  #FFFFFF, #EAF9F9, #D5F4F4, // content-primary
220
220
  #E0F7F7, #CAF1F1, #B6ECEC, // interactive-primary
221
221
  #054D4D, #043A3A, #022626, // interactive-secondary
@@ -223,13 +223,13 @@
223
223
  #054D4D, #043A3A, #022626, // interactive-control
224
224
  #054D4D, #043A3A, #022626 // background-surface
225
225
  );
226
- }
227
- }
226
+ }
227
+ }
228
228
 
229
- .np-theme-personal--dark &,
230
- .np-theme-personal--forest-green & {
231
- &-base {
232
- .sentiment-surface-tokens(
229
+ .np-theme-personal--dark &,
230
+ .np-theme-personal--forest-green & {
231
+ &-base {
232
+ .sentiment-surface-tokens(
233
233
  #FFFFFF, #EAF9F9, #D5F4F4, // content-primary
234
234
  #E0F7F7, #CAF1F1, #B6ECEC, // interactive-primary
235
235
  #0B312F, #124F4C, #176460, // interactive-secondary
@@ -237,9 +237,9 @@
237
237
  #0B312F, #124F4C, #176460, // interactive-control
238
238
  #0B312F, #124F4C, #176460 // background-surface
239
239
  );
240
- }
241
- &-elevated {
242
- .sentiment-surface-tokens(
240
+ }
241
+ &-elevated {
242
+ .sentiment-surface-tokens(
243
243
  #0E0F0C, #0A2826, #074140, // content-primary
244
244
  #0B312F, #104744, #16605C, // interactive-primary
245
245
  #E0F7F7, #CAF1F1, #B6ECEC, // interactive-secondary
@@ -247,9 +247,11 @@
247
247
  #E0F7F7, #CAF1F1, #B6ECEC, // interactive-control
248
248
  #E0F7F7, #CAF1F1, #B6ECEC // background-surface
249
249
  );
250
- }
251
- }
250
+ }
252
251
  }
252
+ }
253
+
254
+ --ring-outline-color: var(--color-sentiment-content-primary, var(--color-content-primary));
253
255
  }
254
256
 
255
257
  .sentiment-surface-tokens(
@@ -272,27 +274,27 @@
272
274
  @background-surface-hover,
273
275
  @background-surface-active
274
276
  ) {
275
- --color-sentiment-content-primary: @content-primary;
276
- --color-sentiment-content-primary-hover: @content-primary-hover;
277
- --color-sentiment-content-primary-active: @content-primary-active;
277
+ --color-sentiment-content-primary: @content-primary;
278
+ --color-sentiment-content-primary-hover: @content-primary-hover;
279
+ --color-sentiment-content-primary-active: @content-primary-active;
278
280
 
279
- --color-sentiment-interactive-primary: @interactive-primary;
280
- --color-sentiment-interactive-primary-hover: @interactive-primary-hover;
281
- --color-sentiment-interactive-primary-active: @interactive-primary-active;
281
+ --color-sentiment-interactive-primary: @interactive-primary;
282
+ --color-sentiment-interactive-primary-hover: @interactive-primary-hover;
283
+ --color-sentiment-interactive-primary-active: @interactive-primary-active;
282
284
 
283
- --color-sentiment-interactive-secondary: @interactive-secondary;
284
- --color-sentiment-interactive-secondary-hover: @interactive-secondary-hover;
285
- --color-sentiment-interactive-secondary-active: @interactive-secondary-active;
285
+ --color-sentiment-interactive-secondary: @interactive-secondary;
286
+ --color-sentiment-interactive-secondary-hover: @interactive-secondary-hover;
287
+ --color-sentiment-interactive-secondary-active: @interactive-secondary-active;
286
288
 
287
- --color-sentiment-interactive-secondary-neutral: @interactive-secondary-neutral;
288
- --color-sentiment-interactive-secondary-neutral-hover: @interactive-secondary-neutral-hover;
289
- --color-sentiment-interactive-secondary-neutral-active: @interactive-secondary-neutral-active;
289
+ --color-sentiment-interactive-secondary-neutral: @interactive-secondary-neutral;
290
+ --color-sentiment-interactive-secondary-neutral-hover: @interactive-secondary-neutral-hover;
291
+ --color-sentiment-interactive-secondary-neutral-active: @interactive-secondary-neutral-active;
290
292
 
291
- --color-sentiment-interactive-control: @interactive-control;
292
- --color-sentiment-interactive-control-hover: @interactive-control-hover;
293
- --color-sentiment-interactive-control-active: @interactive-control-active;
293
+ --color-sentiment-interactive-control: @interactive-control;
294
+ --color-sentiment-interactive-control-hover: @interactive-control-hover;
295
+ --color-sentiment-interactive-control-active: @interactive-control-active;
294
296
 
295
- --color-sentiment-background-surface: @background-surface;
296
- --color-sentiment-background-surface-hover: @background-surface-hover;
297
- --color-sentiment-background-surface-active: @background-surface-active;
297
+ --color-sentiment-background-surface: @background-surface;
298
+ --color-sentiment-background-surface-hover: @background-surface-hover;
299
+ --color-sentiment-background-surface-active: @background-surface-active;
298
300
  }
package/src/sentimentSurface/SentimentSurface.tests.story.tsx CHANGED
@@ -1,5 +1,23 @@
1
1
  import { Meta, StoryObj } from '@storybook/react-webpack5';
2
+ import { ThemeProvider, type Theming } from '@wise/components-theming';
2
3
  import SentimentSurface from './SentimentSurface';
4
+ import Button from '../button';
5
+ import type { Sentiment, Emphasis } from './SentimentSurface.types';
6
+
7
+ const sentiments: Sentiment[] = ['negative', 'success', 'proposition', 'warning', 'neutral'];
8
+ const emphasisLevels: Emphasis[] = ['base', 'elevated'];
9
+
10
+ // Themes that support light/dark screen modes
11
+ const themesWithScreenModes: Theming['theme'][] = ['personal', 'business', 'platform'];
12
+ // Themes that don't have light/dark variants
13
+ const themesWithoutScreenModes: Theming['theme'][] = [
14
+ 'forest-green',
15
+ 'bright-green',
16
+ 'business--forest-green',
17
+ 'business--bright-green',
18
+ 'platform--forest-green',
19
+ ];
20
+ const screenModes: Theming['screenMode'][] = ['light', 'dark'];
3
21
 
4
22
  export default {
5
23
  component: SentimentSurface,
@@ -36,3 +54,69 @@ export const NestedSentiments: Story = {
36
54
  </div>
37
55
  ),
38
56
  };
57
+
58
+ const ButtonsGrid = () => (
59
+ <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
60
+ {emphasisLevels.map((emphasis) =>
61
+ sentiments.map((sentiment) => (
62
+ <SentimentSurface
63
+ key={`${sentiment}-${emphasis}`}
64
+ sentiment={sentiment}
65
+ emphasis={emphasis}
66
+ style={{
67
+ backgroundColor: 'var(--color-sentiment-background-surface)',
68
+ color: 'var(--color-sentiment-content-primary)',
69
+ padding: '16px',
70
+ }}
71
+ >
72
+ <span
73
+ style={{
74
+ marginRight: '16px',
75
+ textTransform: 'capitalize',
76
+ minWidth: '150px',
77
+ display: 'inline-block',
78
+ }}
79
+ >
80
+ {sentiment} ({emphasis})
81
+ </span>
82
+ <Button v2>Primary</Button>
83
+ <Button v2 priority="secondary" style={{ marginLeft: '8px' }}>
84
+ Secondary
85
+ </Button>
86
+ <Button v2 priority="secondary-neutral" style={{ marginLeft: '8px' }}>
87
+ Secondary Neutral
88
+ </Button>
89
+ </SentimentSurface>
90
+ )),
91
+ )}
92
+ </div>
93
+ );
94
+
95
+ export const ButtonsAcrossThemes: Story = {
96
+ render: () => (
97
+ <div style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>
98
+ {/* Themes with light/dark screen modes */}
99
+ {themesWithScreenModes.map((theme) =>
100
+ screenModes.map((screenMode) => (
101
+ <ThemeProvider key={`${theme}-${screenMode}`} theme={theme} screenMode={screenMode}>
102
+ <div style={{ padding: '16px' }}>
103
+ <h3 style={{ margin: '0 0 16px 0', textTransform: 'capitalize' }}>
104
+ {theme} - {screenMode}
105
+ </h3>
106
+ <ButtonsGrid />
107
+ </div>
108
+ </ThemeProvider>
109
+ )),
110
+ )}
111
+ {/* Themes without light/dark variants */}
112
+ {themesWithoutScreenModes.map((theme) => (
113
+ <ThemeProvider key={theme} theme={theme}>
114
+ <div style={{ padding: '16px' }}>
115
+ <h3 style={{ margin: '0 0 16px 0', textTransform: 'capitalize' }}>{theme}</h3>
116
+ <ButtonsGrid />
117
+ </div>
118
+ </ThemeProvider>
119
+ ))}
120
+ </div>
121
+ ),
122
+ };