@transferwise/components 0.0.0-experimental-d2bc8ee → 0.0.0-experimental-2b5b7ab

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 (211) hide show
  1. package/build/common/closeButton/CloseButton.messages.js +2 -2
  2. package/build/common/closeButton/CloseButton.messages.js.map +1 -1
  3. package/build/common/closeButton/CloseButton.messages.mjs +2 -2
  4. package/build/common/closeButton/CloseButton.messages.mjs.map +1 -1
  5. package/build/common/closeButton/CloseButton.mjs +2 -2
  6. package/build/common/closeButton/CloseButton.mjs.map +1 -1
  7. package/build/drawer/Drawer.js +18 -9
  8. package/build/drawer/Drawer.js.map +1 -1
  9. package/build/drawer/Drawer.mjs +18 -9
  10. package/build/drawer/Drawer.mjs.map +1 -1
  11. package/build/main.css +649 -510
  12. package/build/mocks.js +7 -0
  13. package/build/mocks.js.map +1 -1
  14. package/build/mocks.mjs +7 -1
  15. package/build/mocks.mjs.map +1 -1
  16. package/build/modal/Modal.js +20 -21
  17. package/build/modal/Modal.js.map +1 -1
  18. package/build/modal/Modal.mjs +20 -21
  19. package/build/modal/Modal.mjs.map +1 -1
  20. package/build/select/Select.js +2 -1
  21. package/build/select/Select.js.map +1 -1
  22. package/build/select/Select.mjs +2 -1
  23. package/build/select/Select.mjs.map +1 -1
  24. package/build/sentimentSurface/classMap.js +17 -0
  25. package/build/sentimentSurface/classMap.js.map +1 -0
  26. package/build/sentimentSurface/classMap.mjs +14 -0
  27. package/build/sentimentSurface/classMap.mjs.map +1 -0
  28. package/build/statusIcon/StatusIcon.js +4 -1
  29. package/build/statusIcon/StatusIcon.js.map +1 -1
  30. package/build/statusIcon/StatusIcon.mjs +4 -1
  31. package/build/statusIcon/StatusIcon.mjs.map +1 -1
  32. package/build/styles/accordion/Accordion.css +6 -2
  33. package/build/styles/actionButton/ActionButton.css +4 -12
  34. package/build/styles/avatar/Avatar.css +10 -13
  35. package/build/styles/avatarView/AvatarView.css +3 -5
  36. package/build/styles/avatarView/Dot.css +1 -2
  37. package/build/styles/button/Button.css +0 -1
  38. package/build/styles/card/Card.css +2 -2
  39. package/build/styles/carousel/Carousel.css +2 -5
  40. package/build/styles/checkboxButton/CheckboxButton.css +1 -0
  41. package/build/styles/chips/Chip.css +12 -31
  42. package/build/styles/circularButton/CircularButton.css +0 -6
  43. package/build/styles/common/Option/Option.css +2 -2
  44. package/build/styles/common/RadioButton/RadioButton.css +1 -1
  45. package/build/styles/common/bottomSheet/BottomSheet.css +1 -1
  46. package/build/styles/common/card/Card.css +1 -1
  47. package/build/styles/common/closeButton/CloseButton.css +2 -7
  48. package/build/styles/criticalBanner/CriticalCommsBanner.css +0 -4
  49. package/build/styles/dateLookup/DateLookup.css +3 -5
  50. package/build/styles/definitionList/DefinitionList.css +1 -1
  51. package/build/styles/divider/Divider.css +1 -1
  52. package/build/styles/drawer/Drawer.css +11 -58
  53. package/build/styles/emphasis/Emphasis.css +5 -4
  54. package/build/styles/expressiveMoneyInput/ExpressiveMoneyInput.css +0 -2
  55. package/build/styles/expressiveMoneyInput/amountInput/AmountInput.css +0 -1
  56. package/build/styles/expressiveMoneyInput/chevron/Chevron.css +0 -1
  57. package/build/styles/flowNavigation/FlowNavigation.css +1 -2
  58. package/build/styles/header/Header.css +2 -2
  59. package/build/styles/iconButton/IconButton.css +4 -27
  60. package/build/styles/inputs/Input.css +5 -5
  61. package/build/styles/inputs/InputGroup.css +2 -3
  62. package/build/styles/inputs/SelectInput.css +13 -14
  63. package/build/styles/inputs/TextArea.css +5 -5
  64. package/build/styles/instructionsList/InstructionsList.css +0 -2
  65. package/build/styles/listItem/ListItem.css +8 -22
  66. package/build/styles/logo/Logo.css +0 -2
  67. package/build/styles/main.css +649 -510
  68. package/build/styles/modal/Modal.css +6 -68
  69. package/build/styles/moneyInput/MoneyInput.css +2 -2
  70. package/build/styles/navigationOption/NavigationOption.css +3 -1
  71. package/build/styles/nudge/Nudge.css +1 -1
  72. package/build/styles/overlayHeader/OverlayHeader.css +1 -2
  73. package/build/styles/popover/Popover.css +2 -2
  74. package/build/styles/progress/Progress.css +3 -3
  75. package/build/styles/progressBar/ProgressBar.css +2 -2
  76. package/build/styles/promoCard/PromoCard.css +3 -3
  77. package/build/styles/prompt/InlinePrompt/InlinePrompt.css +3 -39
  78. package/build/styles/segmentedControl/SegmentedControl.css +2 -6
  79. package/build/styles/select/Select.css +41 -25
  80. package/build/styles/sentimentSurface/SentimentSurface.css +424 -0
  81. package/build/styles/slidingPanel/SlidingPanel.css +4 -4
  82. package/build/styles/snackbar/Snackbar.css +4 -4
  83. package/build/styles/statusIcon/StatusIcon.css +4 -44
  84. package/build/styles/stepper/Stepper.css +4 -4
  85. package/build/styles/summary/Summary.css +2 -5
  86. package/build/styles/switch/Switch.css +2 -3
  87. package/build/styles/table/Table.css +5 -13
  88. package/build/styles/tabs/Tabs.css +9 -10
  89. package/build/styles/tile/Tile.css +5 -8
  90. package/build/styles/typeahead/Typeahead.css +1 -2
  91. package/build/styles/typeahead/typeaheadOption/TypeaheadOption.css +4 -1
  92. package/build/styles/upload/Upload.css +1 -1
  93. package/build/styles/uploadInput/uploadButton/UploadButton.css +2 -4
  94. package/build/styles/uploadInput/uploadItem/UploadItem.css +4 -8
  95. package/build/types/drawer/Drawer.d.ts.map +1 -1
  96. package/build/types/mocks.d.ts +1 -0
  97. package/build/types/mocks.d.ts.map +1 -1
  98. package/build/types/modal/Modal.d.ts.map +1 -1
  99. package/build/types/select/Select.d.ts +1 -1
  100. package/build/types/select/Select.d.ts.map +1 -1
  101. package/build/types/sentimentSurface/SentimentSurface.d.ts +30 -0
  102. package/build/types/sentimentSurface/SentimentSurface.d.ts.map +1 -0
  103. package/build/types/sentimentSurface/SentimentSurface.types.d.ts +80 -0
  104. package/build/types/sentimentSurface/SentimentSurface.types.d.ts.map +1 -0
  105. package/build/types/sentimentSurface/classMap.d.ts +4 -0
  106. package/build/types/sentimentSurface/classMap.d.ts.map +1 -0
  107. package/build/types/sentimentSurface/index.d.ts +3 -0
  108. package/build/types/sentimentSurface/index.d.ts.map +1 -0
  109. package/build/types/statusIcon/StatusIcon.d.ts.map +1 -1
  110. package/build/types/test-utils/window-mock.d.ts +1 -0
  111. package/build/types/test-utils/window-mock.d.ts.map +1 -1
  112. package/package.json +5 -10
  113. package/src/accordion/Accordion.css +6 -2
  114. package/src/accordion/Accordion.less +7 -0
  115. package/src/accordion/Accordion.story.tsx +1 -1
  116. package/src/actionButton/ActionButton.css +4 -12
  117. package/src/avatar/Avatar.css +10 -13
  118. package/src/avatarLayout/AvatarLayout.story.tsx +1 -0
  119. package/src/avatarView/AvatarView.css +3 -5
  120. package/src/avatarView/AvatarView.story.tsx +1 -0
  121. package/src/avatarView/Dot.css +1 -2
  122. package/src/button/Button.css +0 -1
  123. package/src/card/Card.css +2 -2
  124. package/src/carousel/Carousel.css +2 -5
  125. package/src/checkboxButton/CheckboxButton.css +1 -0
  126. package/src/chips/Chip.css +12 -31
  127. package/src/circularButton/CircularButton.css +0 -6
  128. package/src/common/Option/Option.css +2 -2
  129. package/src/common/RadioButton/RadioButton.css +1 -1
  130. package/src/common/bottomSheet/BottomSheet.css +1 -1
  131. package/src/common/card/Card.css +1 -1
  132. package/src/common/closeButton/CloseButton.css +2 -7
  133. package/src/criticalBanner/CriticalCommsBanner.css +0 -4
  134. package/src/dateLookup/DateLookup.css +3 -5
  135. package/src/definitionList/DefinitionList.css +1 -1
  136. package/src/display/Display.story.tsx +1 -0
  137. package/src/divider/Divider.css +1 -1
  138. package/src/drawer/Drawer.css +11 -58
  139. package/src/drawer/Drawer.less +14 -70
  140. package/src/drawer/Drawer.story.tsx +158 -100
  141. package/src/drawer/Drawer.tsx +26 -7
  142. package/src/emphasis/Emphasis.css +5 -4
  143. package/src/expressiveMoneyInput/ExpressiveMoneyInput.css +0 -2
  144. package/src/expressiveMoneyInput/ExpressiveMoneyInput.spec.tsx +229 -0
  145. package/src/expressiveMoneyInput/amountInput/AmountInput.css +0 -1
  146. package/src/expressiveMoneyInput/amountInput/AmountInput.spec.tsx +282 -0
  147. package/src/expressiveMoneyInput/chevron/Chevron.css +0 -1
  148. package/src/expressiveMoneyInput/currencySelector/CurrencySelector.spec.tsx +160 -0
  149. package/src/flowNavigation/FlowNavigation.css +1 -2
  150. package/src/header/Header.css +2 -2
  151. package/src/iconButton/IconButton.css +4 -27
  152. package/src/iconButton/IconButton.story.tsx +1 -0
  153. package/src/inputs/Input.css +5 -5
  154. package/src/inputs/InputGroup.css +2 -3
  155. package/src/inputs/SelectInput.css +13 -14
  156. package/src/inputs/SelectInput.spec.tsx +7 -1
  157. package/src/inputs/TextArea.css +5 -5
  158. package/src/instructionsList/InstructionsList.css +0 -2
  159. package/src/listItem/ListItem.css +8 -22
  160. package/src/logo/Logo.css +0 -2
  161. package/src/main.css +649 -510
  162. package/src/main.less +2 -0
  163. package/src/mocks.ts +7 -0
  164. package/src/modal/Modal.css +6 -68
  165. package/src/modal/Modal.less +6 -76
  166. package/src/modal/Modal.tsx +23 -23
  167. package/src/moneyInput/MoneyInput.css +2 -2
  168. package/src/moneyInput/MoneyInput.spec.tsx +9 -1
  169. package/src/navigationOption/NavigationOption.css +3 -1
  170. package/src/nudge/Nudge.css +1 -1
  171. package/src/overlayHeader/OverlayHeader.css +1 -2
  172. package/src/popover/Popover.css +2 -2
  173. package/src/progress/Progress.css +3 -3
  174. package/src/progressBar/ProgressBar.css +2 -2
  175. package/src/promoCard/PromoCard.css +3 -3
  176. package/src/prompt/InlinePrompt/InlinePrompt.css +3 -39
  177. package/src/provider/theme/ThemeProvider.story.tsx +78 -11
  178. package/src/segmentedControl/SegmentedControl.css +2 -6
  179. package/src/select/Select.css +41 -25
  180. package/src/select/Select.less +25 -0
  181. package/src/select/Select.tsx +6 -1
  182. package/src/sentimentSurface/SentimentSurface.css +424 -0
  183. package/src/sentimentSurface/SentimentSurface.docs.mdx +527 -0
  184. package/src/sentimentSurface/SentimentSurface.less +296 -0
  185. package/src/sentimentSurface/SentimentSurface.spec.tsx +140 -0
  186. package/src/sentimentSurface/SentimentSurface.story.tsx +340 -0
  187. package/src/sentimentSurface/SentimentSurface.tests.story.tsx +123 -0
  188. package/src/sentimentSurface/SentimentSurface.tsx +72 -0
  189. package/src/sentimentSurface/SentimentSurface.types.ts +104 -0
  190. package/src/sentimentSurface/classMap.ts +15 -0
  191. package/src/sentimentSurface/index.ts +8 -0
  192. package/src/slidingPanel/SlidingPanel.css +4 -4
  193. package/src/snackbar/Snackbar.css +4 -4
  194. package/src/snackbar/Snackbar.less +4 -2
  195. package/src/statusIcon/StatusIcon.css +4 -44
  196. package/src/statusIcon/StatusIcon.less +2 -40
  197. package/src/statusIcon/StatusIcon.tsx +10 -1
  198. package/src/stepper/Stepper.css +4 -4
  199. package/src/summary/Summary.css +2 -5
  200. package/src/switch/Switch.css +2 -3
  201. package/src/table/Table.css +5 -13
  202. package/src/tabs/Tabs.css +9 -10
  203. package/src/test-utils/jest.setup.ts +0 -5
  204. package/src/test-utils/window-mock.ts +5 -0
  205. package/src/tile/Tile.css +5 -8
  206. package/src/typeahead/Typeahead.css +1 -2
  207. package/src/typeahead/typeaheadOption/TypeaheadOption.css +4 -1
  208. package/src/typeahead/typeaheadOption/TypeaheadOption.less +6 -0
  209. package/src/upload/Upload.css +1 -1
  210. package/src/uploadInput/uploadButton/UploadButton.css +2 -4
  211. package/src/uploadInput/uploadItem/UploadItem.css +4 -8
package/src/provider/theme/ThemeProvider.story.tsx CHANGED
@@ -1,11 +1,24 @@
1
1
  import { Meta, StoryObj } from '@storybook/react-webpack5';
2
- import { ThemeProvider } from '@wise/components-theming';
2
+ import {
3
+ ThemeProvider as ThemeProviderComp,
4
+ type ThemeProviderProps,
5
+ useTheme,
6
+ } from '@wise/components-theming';
3
7
 
4
8
  import Button from '../../button';
5
9
  import { lorem100 } from '../../test-utils';
6
10
  import Display from '../../display';
7
- import Logo from '../../logo';
8
11
  import Body from '../../body';
12
+ import FlowNavigation from '../../flowNavigation/FlowNavigation';
13
+ import AvatarView from '../../avatarView';
14
+ import SegmentedControl from '../../segmentedControl';
15
+ import Sticky from '../../sticky';
16
+ import { Field } from '../../field/Field';
17
+
18
+ // ThemeProvider external component, this mock makes Storybook generate Props Table
19
+ function ThemeProvider(props: ThemeProviderProps) {
20
+ return <ThemeProviderComp {...props} />;
21
+ }
9
22
 
10
23
  export default {
11
24
  component: ThemeProvider,
@@ -26,17 +39,71 @@ export const BusinessLandingPage: Story = {
26
39
  render: () => (
27
40
  <ThemeProvider theme="business">
28
41
  <Display type="display-large">Wise Business</Display>
29
- <Body type="body-large-bold">
30
- {lorem100}
31
- </Body>
42
+ <Body type="body-large-bold">{lorem100}</Body>
32
43
  <ThemeProvider theme="business--forest-green">
33
- <Body type="body-large">
34
- {lorem100}
35
- </Body>
44
+ <Body type="body-large">{lorem100}</Body>
36
45
  </ThemeProvider>
37
- <Body type="body-large">
38
- {lorem100}
39
- </Body>
46
+ <Body type="body-large">{lorem100}</Body>
40
47
  </ThemeProvider>
41
48
  ),
42
49
  };
50
+
51
+ /**
52
+ * Story demonstrating the theme switching functionality using the `useTheme` hook.
53
+ */
54
+ export const SetThemeHook: Story = {
55
+ name: 'setTheme',
56
+ tags: ['new'],
57
+ parameters: {
58
+ padding: '0',
59
+ },
60
+ render: () => {
61
+ const ThemeSwitcher = () => {
62
+ const { theme, setTheme } = useTheme();
63
+
64
+ return (
65
+ <>
66
+ <FlowNavigation
67
+ steps={[{ label: 'Step 1' }, { label: 'Step 2' }, { label: 'Step 3' }]}
68
+ activeStep={1}
69
+ avatar={<AvatarView profileName="Test Test" />}
70
+ />
71
+ <div className="row">
72
+ <div className="col-md-2" />
73
+ <div className="col-md-8 p-x-4">
74
+ <Display type="display-large" className="m-y-3">
75
+ Title
76
+ </Display>
77
+ <Body type="body-large">{lorem100}</Body>
78
+ <Body type="body-large">{lorem100}</Body>
79
+ <Body type="body-large">{lorem100}</Body>
80
+ </div>
81
+ <div className="col-md-2" />
82
+ </div>
83
+ <Sticky>
84
+ <div className="m-a-2">
85
+ <Field label="Example of Switcher">
86
+ <SegmentedControl
87
+ name="theme"
88
+ mode="input"
89
+ value={theme}
90
+ segments={[
91
+ { id: 'platform', label: 'Platform', value: 'platform' },
92
+ { id: 'forest-green', label: 'Forest Green', value: 'business--forest-green' },
93
+ ]}
94
+ onChange={(value) => setTheme(value as typeof theme)}
95
+ />
96
+ </Field>
97
+ </div>
98
+ </Sticky>
99
+ </>
100
+ );
101
+ };
102
+
103
+ return (
104
+ <ThemeProvider theme="platform">
105
+ <ThemeSwitcher />
106
+ </ThemeProvider>
107
+ );
108
+ },
109
+ };
package/src/segmentedControl/SegmentedControl.css CHANGED
@@ -11,7 +11,7 @@
11
11
  width: 100%;
12
12
  justify-content: center;
13
13
  align-items: center;
14
- background: rgba(22,51,0,0.07843);
14
+ background: rgba(134,167,189,0.10196);
15
15
  background: var(--color-background-neutral);
16
16
  border-radius: 24px;
17
17
  border-radius: var(--size-24);
@@ -19,7 +19,6 @@
19
19
  outline: 2px solid transparent;
20
20
  }
21
21
  .segmented-control--input:has(:focus-visible) > .segmented-control__segments::after {
22
- outline: 2px solid #163300;
23
22
  outline: 2px solid var(--color-interactive-primary);
24
23
  }
25
24
  .segmented-control__segments::after {
@@ -59,14 +58,13 @@
59
58
  z-index: 1;
60
59
  cursor: pointer;
61
60
  transition: background 300ms;
62
- color: #163300;
63
61
  color: var(--color-interactive-primary);
64
62
  }
65
63
  .segmented-control__segment:first-child {
66
64
  margin-left: 0;
67
65
  }
68
66
  .segmented-control__segment:hover {
69
- background: rgba(22,51,0,0.07843);
67
+ background: rgba(0,0,0,0.10196);
70
68
  background: var(--color-background-overlay);
71
69
  }
72
70
  .segmented-control__radio-input {
@@ -90,7 +88,6 @@
90
88
  outline-offset: 0px;
91
89
  }
92
90
  .segmented-control__button:focus-visible {
93
- outline-color: #163300;
94
91
  outline-color: var(--color-interactive-primary);
95
92
  }
96
93
  .segmented-control__selected-segment:hover {
@@ -99,7 +96,6 @@
99
96
  .segmented-control__text {
100
97
  word-wrap: break-word;
101
98
  word-break: break-word;
102
- color: #163300;
103
99
  color: var(--color-interactive-primary);
104
100
  transition: font-weight 300ms;
105
101
  }
package/src/select/Select.css CHANGED
@@ -1,11 +1,11 @@
1
1
  .np-select .np-dropdown-toggle {
2
2
  background-color: #ffffff;
3
3
  background-color: var(--color-background-screen);
4
- border: 1px solid #868685;
4
+ border: 1px solid #c9cbce;
5
5
  border: 1px solid var(--color-interactive-secondary);
6
6
  border-radius: 10px;
7
7
  border-radius: var(--radius-small);
8
- color: #0e0f0c;
8
+ color: #37517e;
9
9
  color: var(--color-content-primary);
10
10
  font-weight: 400;
11
11
  font-weight: var(--font-weight-regular);
@@ -27,8 +27,17 @@
27
27
  border-radius: var(--radius-small);
28
28
  }
29
29
  .has-error .np-select .np-dropdown-toggle {
30
+ border: 1px solid #e74848;
30
31
  border: 1px solid var(--color-interactive-negative);
31
32
  }
33
+ .np-select .np-dropdown-toggle-navy {
34
+ --color-content-accent: #00b9ff;
35
+ --color-content-primary: #ffffff;
36
+ --color-content-secondary: #c9cbce;
37
+ --color-background-screen: #2e4369;
38
+ --color-interactive-secondary: #2e4369;
39
+ --color-interactive-secondary-hover: #2e4369;
40
+ }
32
41
  .np-select .np-dropdown-toggle.np-btn-sm {
33
42
  padding-right: 32px;
34
43
  padding-right: var(--size-32);
@@ -92,19 +101,19 @@
92
101
  top: 27px;
93
102
  }
94
103
  .np-select .btn:not(.disabled):not(:disabled):not(.btn-loading) {
95
- color: #0e0f0c;
104
+ color: #37517e;
96
105
  color: var(--color-content-primary);
97
106
  }
98
107
  .np-select .btn:not(.disabled):not(:disabled):not(.btn-loading):hover {
99
- border-color: #6c6c6b;
108
+ border-color: #b5b7ba;
100
109
  border-color: var(--color-interactive-secondary-hover);
101
110
  }
102
111
  .np-select .btn:not(.disabled):not(:disabled):not(.btn-loading):focus {
103
- border-color: #9fe870;
112
+ border-color: #00a2dd;
104
113
  border-color: var(--color-interactive-accent);
105
114
  }
106
115
  .np-theme-personal .np-select .btn:not(.disabled):not(:disabled):not(.btn-loading):focus {
107
- border-color: #868685;
116
+ border-color: #c9cbce;
108
117
  border-color: var(--color-interactive-secondary);
109
118
  }
110
119
  .np-option-content {
@@ -155,7 +164,7 @@
155
164
  width: 420px;
156
165
  }
157
166
  .np-dropdown-menu .np-dropdown-item--focused {
158
- background-color: rgba(22,51,0,0.07843);
167
+ background-color: rgba(134,167,189,0.10196);
159
168
  background-color: var(--color-background-neutral);
160
169
  border-radius: 10px;
161
170
  border-radius: var(--radius-small);
@@ -174,7 +183,7 @@
174
183
  clear: both;
175
184
  border-radius: 10px;
176
185
  border-radius: var(--radius-small);
177
- color: #0e0f0c;
186
+ color: #37517e;
178
187
  color: var(--color-content-primary);
179
188
  font-size: 0.875rem;
180
189
  font-size: var(--font-size-14);
@@ -209,15 +218,32 @@
209
218
  }
210
219
  .np-dropdown-menu > li:not(.active):not(.selected):not(:has(input)) > a:not([disabled]):not(.disabled):hover,
211
220
  .np-dropdown-menu > li:not(.active):not(.selected):not(:has(input)) > a:not([disabled]):not(.disabled):focus {
212
- color: #0e0f0c;
221
+ color: #37517e;
213
222
  color: var(--color-content-primary);
214
- background-color: rgba(22,51,0,0.07843);
223
+ background-color: rgba(134,167,189,0.10196);
215
224
  background-color: var(--color-background-neutral);
216
225
  }
226
+ .np-dropdown-menu > li:not(.active):not(.selected):not(:has(input)) > a:not([disabled]):not(.disabled):active {
227
+ color: #ffffff;
228
+ background-color: #37517e;
229
+ }
230
+ .np-dropdown-menu > .active > a,
231
+ .np-dropdown-menu > .selected > a,
232
+ .np-dropdown-menu > .active > a:hover,
233
+ .np-dropdown-menu > .selected > a:hover,
234
+ .np-dropdown-menu > .active > a:focus,
235
+ .np-dropdown-menu > .selected > a:focus {
236
+ color: #ffffff;
237
+ background-color: #37517e;
238
+ }
217
239
  .np-dropdown-menu > .active > a strong,
218
240
  .np-dropdown-menu > .selected > a strong {
219
241
  color: inherit;
220
242
  }
243
+ .np-dropdown-menu > .active > a .np-text-body-default,
244
+ .np-dropdown-menu > .selected > a .np-text-body-default {
245
+ color: #c9cbce;
246
+ }
221
247
  .np-dropdown-menu .np-select-filter,
222
248
  .np-dropdown-menu .input-group-addon {
223
249
  border: 0;
@@ -226,13 +252,13 @@
226
252
  height: 1px;
227
253
  margin: 0;
228
254
  overflow: hidden;
229
- background-color: rgba(22,51,0,0.07843);
255
+ background-color: rgba(134,167,189,0.10196);
230
256
  background-color: var(--color-background-neutral);
231
257
  }
232
258
  .np-dropdown-menu .np-dropdown-header {
233
259
  padding: 8px 16px;
234
260
  padding: var(--size-8) var(--size-16);
235
- color: #454745;
261
+ color: #5d7079;
236
262
  color: var(--color-content-secondary);
237
263
  display: block;
238
264
  font-size: 0.875rem;
@@ -263,7 +289,7 @@
263
289
  }
264
290
  .np-select .np-text-body-default,
265
291
  .np-dropdown-menu .np-text-body-default {
266
- color: #454745;
292
+ color: #5d7079;
267
293
  color: var(--color-content-secondary);
268
294
  }
269
295
  .np-select .tw-icon-search,
@@ -279,28 +305,25 @@
279
305
  background-color: initial;
280
306
  transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
281
307
  border: none;
282
- box-shadow: inset 0 0 0 1px #868685;
308
+ box-shadow: inset 0 0 0 1px #c9cbce;
283
309
  box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
284
310
  }
285
311
  .np-theme-personal .np-select .np-dropdown-toggle:not(.disabled):not(:disabled):hover {
286
- box-shadow: inset 0 0 0 2px #6c6c6b;
312
+ box-shadow: inset 0 0 0 2px #b5b7ba;
287
313
  box-shadow: inset 0 0 0 2px var(--color-interactive-secondary-hover);
288
314
  }
289
315
  .np-theme-personal .np-select .np-dropdown-toggle:not(.disabled):not(:disabled):focus,
290
316
  .np-theme-personal .np-select .np-dropdown-toggle:not(.disabled):not(:disabled):focus-visible,
291
317
  .np-theme-personal .np-select .np-dropdown-toggle:not(.disabled):not(:disabled):focus-within {
292
- box-shadow: inset 0 0 0 3px #163300;
293
318
  box-shadow: inset 0 0 0 3px var(--color-interactive-primary);
294
319
  }
295
320
  .np-theme-personal .has-error .np-select .np-dropdown-toggle,
296
321
  .np-theme-personal .has-error .np-select .np-dropdown-toggle:not(.disabled):not(:disabled):hover {
297
- box-shadow: inset 0 0 0 2px #cb272f;
298
322
  box-shadow: inset 0 0 0 2px var(--color-sentiment-negative);
299
323
  }
300
324
  .np-theme-personal .has-error .np-select .np-dropdown-toggle:not(.disabled):not(:disabled):focus,
301
325
  .np-theme-personal .has-error .np-select .np-dropdown-toggle:not(.disabled):not(:disabled):focus-visible,
302
326
  .np-theme-personal .has-error .np-select .np-dropdown-toggle:not(.disabled):not(:disabled):focus-within {
303
- box-shadow: inset 0 0 0 3px #cb272f;
304
327
  box-shadow: inset 0 0 0 3px var(--color-sentiment-negative);
305
328
  }
306
329
  .np-theme-personal .np-dropdown-menu {
@@ -312,9 +335,7 @@
312
335
  .np-theme-personal .np-dropdown-menu .selected a:focus,
313
336
  .np-theme-personal .np-dropdown-menu .active a:hover,
314
337
  .np-theme-personal .np-dropdown-menu .selected a:hover {
315
- color: #163300;
316
338
  color: var(--color-interactive-primary);
317
- background-color: rgba(22,51,0,0.18039);
318
339
  background-color: var(--color-background-neutral-active);
319
340
  }
320
341
  .np-theme-personal .np-dropdown-menu .active a .body-2,
@@ -329,24 +350,19 @@
329
350
  .np-theme-personal .np-dropdown-menu .selected a:focus .np-text-body-default,
330
351
  .np-theme-personal .np-dropdown-menu .active a:hover .np-text-body-default,
331
352
  .np-theme-personal .np-dropdown-menu .selected a:hover .np-text-body-default {
332
- color: #163300;
333
353
  color: var(--color-interactive-primary);
334
354
  }
335
355
  .np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active {
336
- color: #163300 !important;
337
356
  color: var(--color-interactive-primary) !important;
338
- background-color: rgba(22,51,0,0.18039) !important;
339
357
  background-color: var(--color-background-neutral-active) !important;
340
358
  }
341
359
  .np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active .body-2,
342
360
  .np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active .np-text-body-default {
343
- color: #163300;
344
361
  color: var(--color-interactive-primary);
345
362
  }
346
363
  .np-theme-personal .np-dropdown-menu .np-dropdown-item {
347
364
  outline: none;
348
365
  }
349
366
  .np-theme-personal .np-dropdown-menu .np-dropdown-item--focused {
350
- box-shadow: inset 0 0 0 2px #163300;
351
367
  box-shadow: inset 0 0 0 2px var(--color-interactive-primary);
352
368
  }
package/src/select/Select.less CHANGED
@@ -1,3 +1,4 @@
1
+ @import (reference) "../../node_modules/@transferwise/neptune-css/dist/less/neptune-tokens.less";
1
2
  @import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
2
3
  @import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_border-radius.less";
3
4
  @import (reference) "../../node_modules/@transferwise/neptune-css/src/less/core/_typography.less";
@@ -37,6 +38,15 @@
37
38
  border: 1px solid var(--color-interactive-negative);
38
39
  }
39
40
 
41
+ &-navy {
42
+ --color-content-accent: @color-navy-content-accent;
43
+ --color-content-primary: @color-navy-content-primary;
44
+ --color-content-secondary: @color-navy-content-secondary;
45
+ --color-background-screen: @color-navy-background-screen;
46
+ --color-interactive-secondary: @color-navy-background-screen;
47
+ --color-interactive-secondary-hover: @color-navy-background-screen;
48
+ }
49
+
40
50
  &.np-btn-sm {
41
51
  .padding(right, var(--size-32));
42
52
  }
@@ -187,14 +197,29 @@
187
197
  color: var(--color-content-primary);
188
198
  background-color: var(--color-background-neutral);
189
199
  }
200
+
201
+ &:active {
202
+ color: @color-navy-content-primary;
203
+ background-color: @color-navy-background-elevated;
204
+ }
190
205
  }
191
206
 
192
207
  > .active > a,
193
208
  > .selected > a {
209
+ &,
210
+ &:hover,
211
+ &:focus {
212
+ color: @color-navy-content-primary;
213
+ background-color: @color-navy-background-elevated;
214
+ }
194
215
 
195
216
  strong {
196
217
  color: inherit;
197
218
  }
219
+
220
+ .np-text-body-default {
221
+ color: @color-navy-content-secondary;
222
+ }
198
223
  }
199
224
 
200
225
  .np-select-filter,
package/src/select/Select.tsx CHANGED
@@ -142,6 +142,7 @@ export default function Select({
142
142
  id,
143
143
  required,
144
144
  disabled,
145
+ inverse,
145
146
  dropdownWidth,
146
147
  size = 'md',
147
148
  block = true,
@@ -557,7 +558,11 @@ export default function Select({
557
558
  block={block}
558
559
  size={size}
559
560
  htmlType="button"
560
- className={clsx(s('np-dropdown-toggle'), s('np-text-body-large'))}
561
+ className={clsx(
562
+ s('np-dropdown-toggle'),
563
+ s('np-text-body-large'),
564
+ inverse ? s('np-dropdown-toggle-navy') : null,
565
+ )}
561
566
  // reset Button's styles
562
567
  type={null}
563
568
  priority={null}