@transferwise/components 0.0.0-experimental-38d88a1 → 0.0.0-experimental-e327d1d

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 +4 -4
  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 +116 -114
  14. package/src/sentimentSurface/SentimentSurface.tests.story.tsx +88 -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
  .np-theme-personal .wds-sentiment-surface-negative-base,
2
5
  .np-theme-personal--bright-green .wds-sentiment-surface-negative-base {
3
6
  --color-sentiment-content-primary: #CB272F;
@@ -32,7 +35,7 @@
32
35
  --color-sentiment-interactive-secondary-active: #A72027;
33
36
  --color-sentiment-interactive-secondary-neutral: #9B141B;
34
37
  --color-sentiment-interactive-secondary-neutral-hover: #831116;
35
- --color-sentiment-interactive-secondary-neutral-active: #6D0E13;
38
+ --color-sentiment-interactive-secondary-neutral-active: #6D0e13;
36
39
  --color-sentiment-interactive-control: #CB272F;
37
40
  --color-sentiment-interactive-control-hover: #B8232B;
38
41
  --color-sentiment-interactive-control-active: #A72027;
@@ -1180,12 +1183,12 @@
1180
1183
  pointer-events: auto;
1181
1184
  }
1182
1185
  .wds-Button {
1183
- --Button-background: var(--color-interactive-accent);
1184
- --Button-background-hover: var(--color-interactive-accent-hover);
1185
- --Button-background-active: var(--color-interactive-accent-active);
1186
- --Button-color: var(--color-interactive-control);
1187
- --Button-color-hover: var(--color-interactive-control-hover);
1188
- --Button-color-active: var(--color-interactive-control-active);
1186
+ --Button-background: var(--color-sentiment-interactive-primary, var(--color-interactive-accent));
1187
+ --Button-background-hover: var(--color-sentiment-interactive-primary-hover, var(--color-interactive-accent-hover));
1188
+ --Button-background-active: var(--color-sentiment-interactive-primary-active, var(--color-interactive-accent-active));
1189
+ --Button-color: var(--color-sentiment-interactive-control, var(--color-interactive-control));
1190
+ --Button-color-hover: var(--color-sentiment-interactive-control-hover, var(--color-interactive-control-hover));
1191
+ --Button-color-active: var(--color-sentiment-interactive-control-active, var(--color-interactive-control-active));
1189
1192
  --Button-border-radius: var(--radius-full);
1190
1193
  --Button-label-gap: var(--size-4);
1191
1194
  --Button-large-padding: var(--size-12) var(--size-16);
@@ -1194,16 +1197,16 @@
1194
1197
  --Button-avatar-border-color: var(--color-border-neutral);
1195
1198
  --Button-transition-duration: 150ms;
1196
1199
  --Button-transition-easing: ease-in-out;
1197
- --Button-secondary-background: var(--color-interactive-neutral);
1198
- --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
1199
- --Button-secondary-background-active: var(--color-interactive-neutral-active);
1200
- --Button-secondary-color: var(--color-interactive-primary);
1201
- --Button-secondary-color-hover: var(--color-interactive-primary-hover);
1202
- --Button-secondary-color-active: var(--color-interactive-primary-active);
1203
- --Button-secondary-neutral-background: var(--color-background-neutral);
1204
- --Button-secondary-neutral-background-hover: var(--color-background-neutral-hover);
1205
- --Button-secondary-neutral-background-active: var(--color-background-neutral-active);
1206
- --Button-secondary-neutral-color: var(--color-content-primary);
1200
+ --Button-secondary-background: var(--color-sentiment-interactive-secondary-neutral, var(--color-interactive-neutral));
1201
+ --Button-secondary-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-interactive-neutral-hover));
1202
+ --Button-secondary-background-active: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-interactive-neutral-active));
1203
+ --Button-secondary-color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
1204
+ --Button-secondary-color-hover: var(--color-sentiment-content-primary-hover, var(--color-interactive-primary-hover));
1205
+ --Button-secondary-color-active: var(--color-sentiment-content-primary-active, var(--color-interactive-primary-active));
1206
+ --Button-secondary-neutral-background: var(--color-sentiment-interactive-secondary-neutral, var(--color-background-neutral));
1207
+ --Button-secondary-neutral-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-background-neutral-hover));
1208
+ --Button-secondary-neutral-background-active: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-background-neutral-active));
1209
+ --Button-secondary-neutral-color: var(--color-sentiment-content-primary, var(--color-content-primary));
1207
1210
  --Button-tertiary-background: transparent;
1208
1211
  --Button-tertiary-background-hover: var(--color-background-screen-hover);
1209
1212
  --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
  .np-theme-personal .wds-sentiment-surface-negative-base,
2
5
  .np-theme-personal--bright-green .wds-sentiment-surface-negative-base {
3
6
  --color-sentiment-content-primary: #CB272F;
@@ -32,7 +35,7 @@
32
35
  --color-sentiment-interactive-secondary-active: #A72027;
33
36
  --color-sentiment-interactive-secondary-neutral: #9B141B;
34
37
  --color-sentiment-interactive-secondary-neutral-hover: #831116;
35
- --color-sentiment-interactive-secondary-neutral-active: #6D0E13;
38
+ --color-sentiment-interactive-secondary-neutral-active: #6D0e13;
36
39
  --color-sentiment-interactive-control: #CB272F;
37
40
  --color-sentiment-interactive-control-hover: #B8232B;
38
41
  --color-sentiment-interactive-control-active: #A72027;
@@ -1180,12 +1183,12 @@
1180
1183
  pointer-events: auto;
1181
1184
  }
1182
1185
  .wds-Button {
1183
- --Button-background: var(--color-interactive-accent);
1184
- --Button-background-hover: var(--color-interactive-accent-hover);
1185
- --Button-background-active: var(--color-interactive-accent-active);
1186
- --Button-color: var(--color-interactive-control);
1187
- --Button-color-hover: var(--color-interactive-control-hover);
1188
- --Button-color-active: var(--color-interactive-control-active);
1186
+ --Button-background: var(--color-sentiment-interactive-primary, var(--color-interactive-accent));
1187
+ --Button-background-hover: var(--color-sentiment-interactive-primary-hover, var(--color-interactive-accent-hover));
1188
+ --Button-background-active: var(--color-sentiment-interactive-primary-active, var(--color-interactive-accent-active));
1189
+ --Button-color: var(--color-sentiment-interactive-control, var(--color-interactive-control));
1190
+ --Button-color-hover: var(--color-sentiment-interactive-control-hover, var(--color-interactive-control-hover));
1191
+ --Button-color-active: var(--color-sentiment-interactive-control-active, var(--color-interactive-control-active));
1189
1192
  --Button-border-radius: var(--radius-full);
1190
1193
  --Button-label-gap: var(--size-4);
1191
1194
  --Button-large-padding: var(--size-12) var(--size-16);
@@ -1194,16 +1197,16 @@
1194
1197
  --Button-avatar-border-color: var(--color-border-neutral);
1195
1198
  --Button-transition-duration: 150ms;
1196
1199
  --Button-transition-easing: ease-in-out;
1197
- --Button-secondary-background: var(--color-interactive-neutral);
1198
- --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
1199
- --Button-secondary-background-active: var(--color-interactive-neutral-active);
1200
- --Button-secondary-color: var(--color-interactive-primary);
1201
- --Button-secondary-color-hover: var(--color-interactive-primary-hover);
1202
- --Button-secondary-color-active: var(--color-interactive-primary-active);
1203
- --Button-secondary-neutral-background: var(--color-background-neutral);
1204
- --Button-secondary-neutral-background-hover: var(--color-background-neutral-hover);
1205
- --Button-secondary-neutral-background-active: var(--color-background-neutral-active);
1206
- --Button-secondary-neutral-color: var(--color-content-primary);
1200
+ --Button-secondary-background: var(--color-sentiment-interactive-secondary-neutral, var(--color-interactive-neutral));
1201
+ --Button-secondary-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-interactive-neutral-hover));
1202
+ --Button-secondary-background-active: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-interactive-neutral-active));
1203
+ --Button-secondary-color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
1204
+ --Button-secondary-color-hover: var(--color-sentiment-content-primary-hover, var(--color-interactive-primary-hover));
1205
+ --Button-secondary-color-active: var(--color-sentiment-content-primary-active, var(--color-interactive-primary-active));
1206
+ --Button-secondary-neutral-background: var(--color-sentiment-interactive-secondary-neutral, var(--color-background-neutral));
1207
+ --Button-secondary-neutral-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-background-neutral-hover));
1208
+ --Button-secondary-neutral-background-active: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-background-neutral-active));
1209
+ --Button-secondary-neutral-color: var(--color-sentiment-content-primary, var(--color-content-primary));
1207
1210
  --Button-tertiary-background: transparent;
1208
1211
  --Button-tertiary-background-hover: var(--color-background-screen-hover);
1209
1212
  --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
  .np-theme-personal .wds-sentiment-surface-negative-base,
2
5
  .np-theme-personal--bright-green .wds-sentiment-surface-negative-base {
3
6
  --color-sentiment-content-primary: #CB272F;
@@ -32,7 +35,7 @@
32
35
  --color-sentiment-interactive-secondary-active: #A72027;
33
36
  --color-sentiment-interactive-secondary-neutral: #9B141B;
34
37
  --color-sentiment-interactive-secondary-neutral-hover: #831116;
35
- --color-sentiment-interactive-secondary-neutral-active: #6D0E13;
38
+ --color-sentiment-interactive-secondary-neutral-active: #6D0e13;
36
39
  --color-sentiment-interactive-control: #CB272F;
37
40
  --color-sentiment-interactive-control-hover: #B8232B;
38
41
  --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-38d88a1",
3
+ "version": "0.0.0-experimental-e327d1d",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -81,12 +81,12 @@
81
81
  "rollup": "^4.47.1",
82
82
  "rollup-preserve-directives": "^1.1.3",
83
83
  "storybook": "^9.1.3",
84
- "storybook-addon-tag-badges": "^3.0.4",
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": "14.25.2",
88
87
  "@wise/components-theming": "1.9.1",
89
- "@wise/wds-configs": "0.0.0"
88
+ "@wise/wds-configs": "0.0.0",
89
+ "@transferwise/neptune-css": "14.25.2"
90
90
  },
91
91
  "peerDependencies": {
92
92
  "@transferwise/icons": "^3 || ^4",
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
  .np-theme-personal .wds-sentiment-surface-negative-base,
2
5
  .np-theme-personal--bright-green .wds-sentiment-surface-negative-base {
3
6
  --color-sentiment-content-primary: #CB272F;
@@ -32,7 +35,7 @@
32
35
  --color-sentiment-interactive-secondary-active: #A72027;
33
36
  --color-sentiment-interactive-secondary-neutral: #9B141B;
34
37
  --color-sentiment-interactive-secondary-neutral-hover: #831116;
35
- --color-sentiment-interactive-secondary-neutral-active: #6D0E13;
38
+ --color-sentiment-interactive-secondary-neutral-active: #6D0e13;
36
39
  --color-sentiment-interactive-control: #CB272F;
37
40
  --color-sentiment-interactive-control-hover: #B8232B;
38
41
  --color-sentiment-interactive-control-active: #A72027;
@@ -1180,12 +1183,12 @@
1180
1183
  pointer-events: auto;
1181
1184
  }
1182
1185
  .wds-Button {
1183
- --Button-background: var(--color-interactive-accent);
1184
- --Button-background-hover: var(--color-interactive-accent-hover);
1185
- --Button-background-active: var(--color-interactive-accent-active);
1186
- --Button-color: var(--color-interactive-control);
1187
- --Button-color-hover: var(--color-interactive-control-hover);
1188
- --Button-color-active: var(--color-interactive-control-active);
1186
+ --Button-background: var(--color-sentiment-interactive-primary, var(--color-interactive-accent));
1187
+ --Button-background-hover: var(--color-sentiment-interactive-primary-hover, var(--color-interactive-accent-hover));
1188
+ --Button-background-active: var(--color-sentiment-interactive-primary-active, var(--color-interactive-accent-active));
1189
+ --Button-color: var(--color-sentiment-interactive-control, var(--color-interactive-control));
1190
+ --Button-color-hover: var(--color-sentiment-interactive-control-hover, var(--color-interactive-control-hover));
1191
+ --Button-color-active: var(--color-sentiment-interactive-control-active, var(--color-interactive-control-active));
1189
1192
  --Button-border-radius: var(--radius-full);
1190
1193
  --Button-label-gap: var(--size-4);
1191
1194
  --Button-large-padding: var(--size-12) var(--size-16);
@@ -1194,16 +1197,16 @@
1194
1197
  --Button-avatar-border-color: var(--color-border-neutral);
1195
1198
  --Button-transition-duration: 150ms;
1196
1199
  --Button-transition-easing: ease-in-out;
1197
- --Button-secondary-background: var(--color-interactive-neutral);
1198
- --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
1199
- --Button-secondary-background-active: var(--color-interactive-neutral-active);
1200
- --Button-secondary-color: var(--color-interactive-primary);
1201
- --Button-secondary-color-hover: var(--color-interactive-primary-hover);
1202
- --Button-secondary-color-active: var(--color-interactive-primary-active);
1203
- --Button-secondary-neutral-background: var(--color-background-neutral);
1204
- --Button-secondary-neutral-background-hover: var(--color-background-neutral-hover);
1205
- --Button-secondary-neutral-background-active: var(--color-background-neutral-active);
1206
- --Button-secondary-neutral-color: var(--color-content-primary);
1200
+ --Button-secondary-background: var(--color-sentiment-interactive-secondary-neutral, var(--color-interactive-neutral));
1201
+ --Button-secondary-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-interactive-neutral-hover));
1202
+ --Button-secondary-background-active: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-interactive-neutral-active));
1203
+ --Button-secondary-color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
1204
+ --Button-secondary-color-hover: var(--color-sentiment-content-primary-hover, var(--color-interactive-primary-hover));
1205
+ --Button-secondary-color-active: var(--color-sentiment-content-primary-active, var(--color-interactive-primary-active));
1206
+ --Button-secondary-neutral-background: var(--color-sentiment-interactive-secondary-neutral, var(--color-background-neutral));
1207
+ --Button-secondary-neutral-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-background-neutral-hover));
1208
+ --Button-secondary-neutral-background-active: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-background-neutral-active));
1209
+ --Button-secondary-neutral-color: var(--color-sentiment-content-primary, var(--color-content-primary));
1207
1210
  --Button-tertiary-background: transparent;
1208
1211
  --Button-tertiary-background-hover: var(--color-background-screen-hover);
1209
1212
  --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
  .np-theme-personal .wds-sentiment-surface-negative-base,
2
5
  .np-theme-personal--bright-green .wds-sentiment-surface-negative-base {
3
6
  --color-sentiment-content-primary: #CB272F;
@@ -32,7 +35,7 @@
32
35
  --color-sentiment-interactive-secondary-active: #A72027;
33
36
  --color-sentiment-interactive-secondary-neutral: #9B141B;
34
37
  --color-sentiment-interactive-secondary-neutral-hover: #831116;
35
- --color-sentiment-interactive-secondary-neutral-active: #6D0E13;
38
+ --color-sentiment-interactive-secondary-neutral-active: #6D0e13;
36
39
  --color-sentiment-interactive-control: #CB272F;
37
40
  --color-sentiment-interactive-control-hover: #B8232B;
38
41
  --color-sentiment-interactive-control-active: #A72027;
package/src/sentimentSurface/SentimentSurface.less CHANGED
@@ -1,9 +1,9 @@
1
1
  .wds-sentiment-surface {
2
- &-negative {
3
- .np-theme-personal &,
4
- .np-theme-personal--bright-green & {
5
- &-base {
6
- .sentiment-surface-tokens(
2
+ &-negative {
3
+ .np-theme-personal &,
4
+ .np-theme-personal--bright-green & {
5
+ &-base {
6
+ .sentiment-surface-tokens(
7
7
  #CB272F, #B8232B, #A72027,
8
8
  #CB272F, #B8232B, #A72027,
9
9
  #FBEAEA, #F9E1E1, #F8D8D8,
@@ -11,23 +11,23 @@
11
11
  #FBEAEA, #F9E1E1, #F8D8D8,
12
12
  #FBEAEA, #F9E1E1, #F8D8D8
13
13
  );
14
- }
15
- &-elevated {
16
- .sentiment-surface-tokens(
14
+ }
15
+ &-elevated {
16
+ .sentiment-surface-tokens(
17
17
  #FFFFFF, #F5CCCC, #F1B7B7,
18
18
  #FBEAEA, #F5CCCC, #F1B7B7,
19
19
  #CB272F, #B8232B, #A72027,
20
- #9B141B, #831116, #6D0E13,
20
+ #9B141B, #831116, #6D0e13,
21
21
  #CB272F, #B8232B, #A72027,
22
22
  #90000D, #B8232B, #A72027
23
23
  );
24
- }
25
- }
24
+ }
25
+ }
26
26
 
27
- .np-theme-personal--dark &,
28
- .np-theme-personal--forest-green & {
29
- &-base {
30
- .sentiment-surface-tokens(
27
+ .np-theme-personal--dark &,
28
+ .np-theme-personal--forest-green & {
29
+ &-base {
30
+ .sentiment-surface-tokens(
31
31
  #FFA8AD, #FFBDC0, #FFD1D3,
32
32
  #FFA8AD, #FFBDC0, #FFD1D3,
33
33
  #410B0D, #641115, #761418,
@@ -35,9 +35,9 @@
35
35
  #410B0D, #641115, #761418,
36
36
  #410B0D, #641115, #761418
37
37
  );
38
- }
39
- &-elevated {
40
- .sentiment-surface-tokens(
38
+ }
39
+ &-elevated {
40
+ .sentiment-surface-tokens(
41
41
  #410B0D, #641115, #761418,
42
42
  #410B0D, #641115, #761418,
43
43
  #FFA8AD, #FFBDC0, #FFD1D3,
@@ -45,15 +45,15 @@
45
45
  #FFA8AD, #FFBDC0, #FFD1D3,
46
46
  #FFA8AD, #FFBDC0, #FFD1D3
47
47
  );
48
- }
49
- }
48
+ }
50
49
  }
50
+ }
51
51
 
52
- &-warning {
53
- .np-theme-personal &,
54
- .np-theme-personal--bright-green & {
55
- &-base {
56
- .sentiment-surface-tokens(
52
+ &-warning {
53
+ .np-theme-personal &,
54
+ .np-theme-personal--bright-green & {
55
+ &-base {
56
+ .sentiment-surface-tokens(
57
57
  #4A3B1C, #302612, #2C2311, // content-primary (default, hover, active)
58
58
  #FFD11A, #FFBF0F, #FFBB00, // interactive-primary
59
59
  #FFF7D7, #FFF0B2, #FFE98F, // interactive-secondary
@@ -61,9 +61,9 @@
61
61
  #4A3B1C, #302612, #2C2311, // interactive-control
62
62
  #FFF7D7, #FFF0B2, #FFE98F // background-surface
63
63
  );
64
- }
65
- &-elevated {
66
- .sentiment-surface-tokens(
64
+ }
65
+ &-elevated {
66
+ .sentiment-surface-tokens(
67
67
  #4A3B1C, #302612, #2C2311, // content-primary
68
68
  #4A3B1C, #302612, #2C2311, // interactive-primary
69
69
  #FFD11A, #FFBF0F, #FFBB00, // interactive-secondary
@@ -71,13 +71,13 @@
71
71
  #FFD11A, #FFBF0F, #FFBB00, // interactive-control
72
72
  #FFD11A, #FFBF0F, #FFBB00 // background-surface
73
73
  );
74
- }
75
- }
74
+ }
75
+ }
76
76
 
77
- .np-theme-personal--dark &,
78
- .np-theme-personal--forest-green & {
79
- &-base {
80
- .sentiment-surface-tokens(
77
+ .np-theme-personal--dark &,
78
+ .np-theme-personal--forest-green & {
79
+ &-base {
80
+ .sentiment-surface-tokens(
81
81
  #FADC65, #F9D648, #F8CD20, // content-primary
82
82
  #FADC65, #F9D648, #F8CD20, // interactive-primary
83
83
  #3A3523, #504930, #665D3D, // interactive-secondary
@@ -85,9 +85,9 @@
85
85
  #3A3523, #504930, #665D3D, // interactive-control
86
86
  #3A3523, #504930, #665D3D // background-surface
87
87
  );
88
- }
89
- &-elevated {
90
- .sentiment-surface-tokens(
88
+ }
89
+ &-elevated {
90
+ .sentiment-surface-tokens(
91
91
  #3A3523, #504930, #665D3D, // content-primary
92
92
  #3A3523, #504930, #665D3D, // interactive-primary
93
93
  #FADC65, #F9D648, #F8CD20, // interactive-secondary
@@ -95,14 +95,14 @@
95
95
  #FADC65, #F9D648, #F8CD20, // interactive-control
96
96
  #FADC65, #F9D648, #F8CD20 // background-surface
97
97
  );
98
- }
99
- }
98
+ }
100
99
  }
101
- &-success {
102
- .np-theme-personal &,
103
- .np-theme-personal--bright-green & {
104
- &-base {
105
- .sentiment-surface-tokens(
100
+ }
101
+ &-success {
102
+ .np-theme-personal &,
103
+ .np-theme-personal--bright-green & {
104
+ &-base {
105
+ .sentiment-surface-tokens(
106
106
  #054D28, #043A1E, #022614, // content-primary (default, hover, active)
107
107
  #054D28, #043A1E, #022614, // interactive-primary
108
108
  #E2F6D5, #D3F2C0, #C5EDAB, // interactive-secondary
@@ -110,9 +110,9 @@
110
110
  #E2F6D5, #D3F2C0, #C5EDAB, // interactive-control
111
111
  #E2F6D5, #D3F2C0, #C5EDAB // background-surface
112
112
  );
113
- }
114
- &-elevated {
115
- .sentiment-surface-tokens(
113
+ }
114
+ &-elevated {
115
+ .sentiment-surface-tokens(
116
116
  #E2F6D5, #D3F2C0, #C5EDAB, // content-primary
117
117
  #E2F6D5, #D3F2C0, #C5EDAB, // interactive-primary
118
118
  #054D28, #043A1E, #022614, // interactive-secondary
@@ -120,13 +120,13 @@
120
120
  #054D28, #043A1E, #022614, // interactive-control
121
121
  #054D28, #043A1E, #022614 // background-surface
122
122
  );
123
- }
124
- }
123
+ }
124
+ }
125
125
 
126
- .np-theme-personal--dark &,
127
- .np-theme-personal--forest-green & {
128
- &-base {
129
- .sentiment-surface-tokens(
126
+ .np-theme-personal--dark &,
127
+ .np-theme-personal--forest-green & {
128
+ &-base {
129
+ .sentiment-surface-tokens(
130
130
  #BAE5A0, #C8EAB3, #D6F0C7, // content-primary
131
131
  #BAE5A0, #C8EAB3, #D6F0C7, // interactive-primary
132
132
  #252C20, #323B2B, #3E4A36, // interactive-secondary
@@ -134,9 +134,9 @@
134
134
  #252C20, #323B2B, #3E4A36, // interactive-control
135
135
  #252C20, #323B2B, #3E4A36 // background-surface
136
136
  );
137
- }
138
- &-elevated {
139
- .sentiment-surface-tokens(
137
+ }
138
+ &-elevated {
139
+ .sentiment-surface-tokens(
140
140
  #252C20, #323B2B, #3E4A36, // content-primary
141
141
  #252C20, #323B2B, #3E4A36, // interactive-primary
142
142
  #BAE5A0, #C8EAB3, #D6F0C7, // interactive-secondary
@@ -144,14 +144,14 @@
144
144
  #BAE5A0, #C8EAB3, #D6F0C7, // interactive-control
145
145
  #BAE5A0, #C8EAB3, #D6F0C7 // background-surface
146
146
  );
147
- }
148
- }
147
+ }
149
148
  }
150
- &-neutral {
151
- .np-theme-personal &,
152
- .np-theme-personal--bright-green & {
153
- &-base {
154
- .sentiment-surface-tokens(
149
+ }
150
+ &-neutral {
151
+ .np-theme-personal &,
152
+ .np-theme-personal--bright-green & {
153
+ &-base {
154
+ .sentiment-surface-tokens(
155
155
  #454745, #353635, #232423, // content-primary (default, hover, active)
156
156
  #454745, #353635, #232423, // interactive-primary
157
157
  #F1F1ED, #E7E7E1, #DFDED5, // interactive-secondary
@@ -159,9 +159,9 @@
159
159
  #F1F1ED, #E7E7E1, #DFDED5, // interactive-control
160
160
  #F1F1ED, #E7E7E1, #DFDED5 // background-surface
161
161
  );
162
- }
163
- &-elevated {
164
- .sentiment-surface-tokens(
162
+ }
163
+ &-elevated {
164
+ .sentiment-surface-tokens(
165
165
  #F1F1ED, #E7E7E1, #DFDED5, // content-primary
166
166
  #F1F1ED, #E7E7E1, #DFDED5, // interactive-primary
167
167
  #454745, #353635, #232423, // interactive-secondary
@@ -169,13 +169,13 @@
169
169
  #454745, #353635, #232423, // interactive-control
170
170
  #454745, #353635, #232423 // background-surface
171
171
  );
172
- }
173
- }
172
+ }
173
+ }
174
174
 
175
- .np-theme-personal--dark &,
176
- .np-theme-personal--forest-green & {
177
- &-base {
178
- .sentiment-surface-tokens(
175
+ .np-theme-personal--dark &,
176
+ .np-theme-personal--forest-green & {
177
+ &-base {
178
+ .sentiment-surface-tokens(
179
179
  #F1F1ED, #E7E7E1, #DFDED5, // content-primary
180
180
  #F1F1ED, #E7E7E1, #DFDED5, // interactive-primary
181
181
  #2A2C29, #414441, #595B58, // interactive-secondary
@@ -183,9 +183,9 @@
183
183
  #2A2C29, #414441, #595B58, // interactive-control
184
184
  #2A2C29, #414441, #595B58 // background-surface
185
185
  );
186
- }
187
- &-elevated {
188
- .sentiment-surface-tokens(
186
+ }
187
+ &-elevated {
188
+ .sentiment-surface-tokens(
189
189
  #2A2C29, #414441, #595B58, // content-primary
190
190
  #2A2C29, #414441, #595B58, // interactive-primary
191
191
  #F1F1ED, #E7E7E1, #DFDED5, // interactive-secondary
@@ -193,14 +193,14 @@
193
193
  #F1F1ED, #E7E7E1, #DFDED5, // interactive-control
194
194
  #F1F1ED, #E7E7E1, #DFDED5 // background-surface
195
195
  );
196
- }
197
- }
196
+ }
198
197
  }
199
- &-proposition {
200
- .np-theme-personal &,
201
- .np-theme-personal--bright-green & {
202
- &-base {
203
- .sentiment-surface-tokens(
198
+ }
199
+ &-proposition {
200
+ .np-theme-personal &,
201
+ .np-theme-personal--bright-green & {
202
+ &-base {
203
+ .sentiment-surface-tokens(
204
204
  #0E0F0C, #0A2826, #074140, // content-primary (default, hover, active)
205
205
  #054D4D, #043A3A, #022626, // interactive-primary
206
206
  #E0F7F7, #CAF1F1, #B6ECEC, // interactive-secondary
@@ -208,9 +208,9 @@
208
208
  #E0F7F7, #CAF1F1, #B6ECEC, // interactive-control
209
209
  #E0F7F7, #CAF1F1, #B6ECEC // background-surface
210
210
  );
211
- }
212
- &-elevated {
213
- .sentiment-surface-tokens(
211
+ }
212
+ &-elevated {
213
+ .sentiment-surface-tokens(
214
214
  #FFFFFF, #EAF9F9, #D5F4F4, // content-primary
215
215
  #E0F7F7, #CAF1F1, #B6ECEC, // interactive-primary
216
216
  #054D4D, #043A3A, #022626, // interactive-secondary
@@ -218,13 +218,13 @@
218
218
  #054D4D, #043A3A, #022626, // interactive-control
219
219
  #054D4D, #043A3A, #022626 // background-surface
220
220
  );
221
- }
222
- }
221
+ }
222
+ }
223
223
 
224
- .np-theme-personal--dark &,
225
- .np-theme-personal--forest-green & {
226
- &-base {
227
- .sentiment-surface-tokens(
224
+ .np-theme-personal--dark &,
225
+ .np-theme-personal--forest-green & {
226
+ &-base {
227
+ .sentiment-surface-tokens(
228
228
  #FFFFFF, #EAF9F9, #D5F4F4, // content-primary
229
229
  #E0F7F7, #CAF1F1, #B6ECEC, // interactive-primary
230
230
  #0B312F, #124F4C, #176460, // interactive-secondary
@@ -232,9 +232,9 @@
232
232
  #0B312F, #124F4C, #176460, // interactive-control
233
233
  #0B312F, #124F4C, #176460 // background-surface
234
234
  );
235
- }
236
- &-elevated {
237
- .sentiment-surface-tokens(
235
+ }
236
+ &-elevated {
237
+ .sentiment-surface-tokens(
238
238
  #0E0F0C, #0A2826, #074140, // content-primary
239
239
  #0B312F, #104744, #16605C, // interactive-primary
240
240
  #E0F7F7, #CAF1F1, #B6ECEC, // interactive-secondary
@@ -242,9 +242,11 @@
242
242
  #E0F7F7, #CAF1F1, #B6ECEC, // interactive-control
243
243
  #E0F7F7, #CAF1F1, #B6ECEC // background-surface
244
244
  );
245
- }
246
- }
245
+ }
247
246
  }
247
+ }
248
+
249
+ --ring-outline-color: var(--color-sentiment-content-primary, var(--color-content-primary));
248
250
  }
249
251
 
250
252
  .sentiment-surface-tokens(
@@ -267,27 +269,27 @@
267
269
  @background-surface-hover,
268
270
  @background-surface-active
269
271
  ) {
270
- --color-sentiment-content-primary: @content-primary;
271
- --color-sentiment-content-primary-hover: @content-primary-hover;
272
- --color-sentiment-content-primary-active: @content-primary-active;
272
+ --color-sentiment-content-primary: @content-primary;
273
+ --color-sentiment-content-primary-hover: @content-primary-hover;
274
+ --color-sentiment-content-primary-active: @content-primary-active;
273
275
 
274
- --color-sentiment-interactive-primary: @interactive-primary;
275
- --color-sentiment-interactive-primary-hover: @interactive-primary-hover;
276
- --color-sentiment-interactive-primary-active: @interactive-primary-active;
276
+ --color-sentiment-interactive-primary: @interactive-primary;
277
+ --color-sentiment-interactive-primary-hover: @interactive-primary-hover;
278
+ --color-sentiment-interactive-primary-active: @interactive-primary-active;
277
279
 
278
- --color-sentiment-interactive-secondary: @interactive-secondary;
279
- --color-sentiment-interactive-secondary-hover: @interactive-secondary-hover;
280
- --color-sentiment-interactive-secondary-active: @interactive-secondary-active;
280
+ --color-sentiment-interactive-secondary: @interactive-secondary;
281
+ --color-sentiment-interactive-secondary-hover: @interactive-secondary-hover;
282
+ --color-sentiment-interactive-secondary-active: @interactive-secondary-active;
281
283
 
282
- --color-sentiment-interactive-secondary-neutral: @interactive-secondary-neutral;
283
- --color-sentiment-interactive-secondary-neutral-hover: @interactive-secondary-neutral-hover;
284
- --color-sentiment-interactive-secondary-neutral-active: @interactive-secondary-neutral-active;
284
+ --color-sentiment-interactive-secondary-neutral: @interactive-secondary-neutral;
285
+ --color-sentiment-interactive-secondary-neutral-hover: @interactive-secondary-neutral-hover;
286
+ --color-sentiment-interactive-secondary-neutral-active: @interactive-secondary-neutral-active;
285
287
 
286
- --color-sentiment-interactive-control: @interactive-control;
287
- --color-sentiment-interactive-control-hover: @interactive-control-hover;
288
- --color-sentiment-interactive-control-active: @interactive-control-active;
288
+ --color-sentiment-interactive-control: @interactive-control;
289
+ --color-sentiment-interactive-control-hover: @interactive-control-hover;
290
+ --color-sentiment-interactive-control-active: @interactive-control-active;
289
291
 
290
- --color-sentiment-background-surface: @background-surface;
291
- --color-sentiment-background-surface-hover: @background-surface-hover;
292
- --color-sentiment-background-surface-active: @background-surface-active;
292
+ --color-sentiment-background-surface: @background-surface;
293
+ --color-sentiment-background-surface-hover: @background-surface-hover;
294
+ --color-sentiment-background-surface-active: @background-surface-active;
293
295
  }
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,
@@ -71,3 +89,73 @@ export const NestedSentiments: Story = {
71
89
  </div>
72
90
  ),
73
91
  };
92
+
93
+ const ButtonsGrid = () => (
94
+ <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
95
+ {emphasisLevels.map((emphasis) =>
96
+ sentiments.map((sentiment) => (
97
+ <SentimentSurface
98
+ key={`${sentiment}-${emphasis}`}
99
+ sentiment={sentiment}
100
+ emphasis={emphasis}
101
+ style={{
102
+ backgroundColor: 'var(--color-sentiment-background-surface)',
103
+ color: 'var(--color-sentiment-content-primary)',
104
+ padding: '16px',
105
+ }}
106
+ >
107
+ <span
108
+ style={{
109
+ marginRight: '16px',
110
+ textTransform: 'capitalize',
111
+ minWidth: '150px',
112
+ display: 'inline-block',
113
+ }}
114
+ >
115
+ {sentiment} ({emphasis})
116
+ </span>
117
+ <Button v2>Primary</Button>
118
+ <Button v2 priority="secondary" style={{ marginLeft: '8px' }}>
119
+ Secondary
120
+ </Button>
121
+ <Button v2 priority="secondary-neutral" style={{ marginLeft: '8px' }}>
122
+ Secondary Neutral
123
+ </Button>
124
+ </SentimentSurface>
125
+ )),
126
+ )}
127
+ </div>
128
+ );
129
+
130
+ export const ButtonsInSentimentContext: Story = {
131
+ render: () => <ButtonsGrid />,
132
+ };
133
+
134
+ export const ButtonsAcrossThemes: Story = {
135
+ render: () => (
136
+ <div style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>
137
+ {/* Themes with light/dark screen modes */}
138
+ {themesWithScreenModes.map((theme) =>
139
+ screenModes.map((screenMode) => (
140
+ <ThemeProvider key={`${theme}-${screenMode}`} theme={theme} screenMode={screenMode}>
141
+ <div style={{ padding: '16px' }}>
142
+ <h3 style={{ margin: '0 0 16px 0', textTransform: 'capitalize' }}>
143
+ {theme} - {screenMode}
144
+ </h3>
145
+ <ButtonsGrid />
146
+ </div>
147
+ </ThemeProvider>
148
+ )),
149
+ )}
150
+ {/* Themes without light/dark variants */}
151
+ {themesWithoutScreenModes.map((theme) => (
152
+ <ThemeProvider key={theme} theme={theme}>
153
+ <div style={{ padding: '16px' }}>
154
+ <h3 style={{ margin: '0 0 16px 0', textTransform: 'capitalize' }}>{theme}</h3>
155
+ <ButtonsGrid />
156
+ </div>
157
+ </ThemeProvider>
158
+ ))}
159
+ </div>
160
+ ),
161
+ };