@transferwise/components 0.0.0-experimental-75fc27b → 0.0.0-experimental-8a932bb

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 (155) hide show
  1. package/build/avatarLayout/AvatarLayout.js +10 -2
  2. package/build/avatarLayout/AvatarLayout.js.map +1 -1
  3. package/build/avatarLayout/AvatarLayout.mjs +10 -2
  4. package/build/avatarLayout/AvatarLayout.mjs.map +1 -1
  5. package/build/button/Button/src/Button.js +93 -0
  6. package/build/button/Button/src/Button.js.map +1 -0
  7. package/build/button/Button/src/Button.mjs +91 -0
  8. package/build/button/Button/src/Button.mjs.map +1 -0
  9. package/build/button/{Button.js → LegacyButton/Button.js} +25 -24
  10. package/build/button/LegacyButton/Button.js.map +1 -0
  11. package/build/button/{Button.mjs → LegacyButton/Button.mjs} +25 -24
  12. package/build/button/LegacyButton/Button.mjs.map +1 -0
  13. package/build/button/LegacyButton/classMap.js +42 -0
  14. package/build/button/LegacyButton/classMap.js.map +1 -0
  15. package/build/button/LegacyButton/classMap.mjs +39 -0
  16. package/build/button/LegacyButton/classMap.mjs.map +1 -0
  17. package/build/button/{legacyUtils → LegacyButton/legacyUtils}/legacyUtils.js +21 -21
  18. package/build/button/LegacyButton/legacyUtils/legacyUtils.js.map +1 -0
  19. package/build/button/{legacyUtils → LegacyButton/legacyUtils}/legacyUtils.mjs +21 -21
  20. package/build/button/LegacyButton/legacyUtils/legacyUtils.mjs.map +1 -0
  21. package/build/button/src/Button.js +76 -0
  22. package/build/button/src/Button.js.map +1 -0
  23. package/build/button/src/Button.mjs +74 -0
  24. package/build/button/src/Button.mjs.map +1 -0
  25. package/build/circularButton/CircularButton.js +1 -1
  26. package/build/circularButton/CircularButton.js.map +1 -1
  27. package/build/circularButton/CircularButton.mjs +1 -1
  28. package/build/circularButton/CircularButton.mjs.map +1 -1
  29. package/build/common/action/Action.js +1 -1
  30. package/build/common/action/Action.js.map +1 -1
  31. package/build/common/action/Action.mjs +1 -1
  32. package/build/common/action/Action.mjs.map +1 -1
  33. package/build/criticalBanner/CriticalCommsBanner.js +1 -1
  34. package/build/criticalBanner/CriticalCommsBanner.mjs +1 -1
  35. package/build/header/Header.js +1 -1
  36. package/build/header/Header.mjs +1 -1
  37. package/build/index.js +1 -1
  38. package/build/index.mjs +1 -1
  39. package/build/link/Link.js +8 -3
  40. package/build/link/Link.js.map +1 -1
  41. package/build/link/Link.mjs +8 -3
  42. package/build/link/Link.mjs.map +1 -1
  43. package/build/main.css +288 -29
  44. package/build/nudge/Nudge.js +1 -1
  45. package/build/nudge/Nudge.js.map +1 -1
  46. package/build/nudge/Nudge.mjs +1 -1
  47. package/build/nudge/Nudge.mjs.map +1 -1
  48. package/build/select/Select.js +4 -2
  49. package/build/select/Select.js.map +1 -1
  50. package/build/select/Select.mjs +4 -2
  51. package/build/select/Select.mjs.map +1 -1
  52. package/build/styles/avatarLayout/AvatarLayout.css +11 -0
  53. package/build/styles/button/Button/less/Button.css +253 -0
  54. package/build/styles/button/Button/less/Button.vars.css +57 -0
  55. package/build/styles/iconButton/IconButton.css +24 -29
  56. package/build/styles/main.css +288 -29
  57. package/build/types/avatarLayout/AvatarLayout.d.ts +1 -2
  58. package/build/types/avatarLayout/AvatarLayout.d.ts.map +1 -1
  59. package/build/types/avatarLayout/index.d.ts +1 -0
  60. package/build/types/avatarLayout/index.d.ts.map +1 -1
  61. package/build/types/button/Button/index.d.ts +3 -0
  62. package/build/types/button/Button/index.d.ts.map +1 -0
  63. package/build/types/button/Button/src/Button.d.ts +4 -0
  64. package/build/types/button/Button/src/Button.d.ts.map +1 -0
  65. package/build/types/button/Button/src/Button.types.d.ts +50 -0
  66. package/build/types/button/Button/src/Button.types.d.ts.map +1 -0
  67. package/build/types/button/Button/src/index.d.ts +2 -0
  68. package/build/types/button/Button/src/index.d.ts.map +1 -0
  69. package/build/types/button/{Button.d.ts → LegacyButton/Button.d.ts} +6 -4
  70. package/build/types/button/LegacyButton/Button.d.ts.map +1 -0
  71. package/build/types/button/LegacyButton/classMap.d.ts.map +1 -0
  72. package/build/types/button/LegacyButton/index.d.ts +3 -0
  73. package/build/types/button/LegacyButton/index.d.ts.map +1 -0
  74. package/build/types/button/LegacyButton/legacyUtils/index.d.ts.map +1 -0
  75. package/build/types/button/{legacyUtils → LegacyButton/legacyUtils}/legacyUtils.d.ts +1 -1
  76. package/build/types/button/LegacyButton/legacyUtils/legacyUtils.d.ts.map +1 -0
  77. package/build/types/button/index.d.ts +2 -2
  78. package/build/types/button/index.d.ts.map +1 -1
  79. package/build/types/button/src/Button.d.ts +30 -0
  80. package/build/types/button/src/Button.d.ts.map +1 -0
  81. package/build/types/button/src/index.d.ts +3 -0
  82. package/build/types/button/src/index.d.ts.map +1 -0
  83. package/build/types/link/Link.d.ts +2 -2
  84. package/build/types/link/Link.d.ts.map +1 -1
  85. package/build/types/select/Select.d.ts.map +1 -1
  86. package/build/types/test-utils/index.d.ts.map +1 -1
  87. package/build/upload/steps/completeStep/completeStep.js +1 -1
  88. package/build/upload/steps/completeStep/completeStep.mjs +1 -1
  89. package/build/upload/steps/processingStep/processingStep.js +1 -1
  90. package/build/upload/steps/processingStep/processingStep.mjs +1 -1
  91. package/build/uploadInput/UploadInput.js +1 -1
  92. package/build/uploadInput/UploadInput.mjs +1 -1
  93. package/package.json +5 -5
  94. package/src/avatarLayout/AvatarLayout.css +11 -0
  95. package/src/avatarLayout/AvatarLayout.less +18 -1
  96. package/src/avatarLayout/AvatarLayout.story.tsx +2 -0
  97. package/src/avatarLayout/AvatarLayout.tsx +14 -4
  98. package/src/avatarLayout/index.ts +1 -0
  99. package/src/avatarWrapper/AvatarWrapper.story.tsx +2 -0
  100. package/src/button/Button/index.ts +2 -0
  101. package/src/button/Button/less/Button.css +253 -0
  102. package/src/button/Button/less/Button.less +221 -0
  103. package/src/button/Button/less/Button.vars.css +57 -0
  104. package/src/button/Button/less/Button.vars.less +65 -0
  105. package/src/button/Button/src/Button.tsx +116 -0
  106. package/src/button/Button/src/Button.types.ts +70 -0
  107. package/src/button/Button/src/index.ts +1 -0
  108. package/src/button/Button/stories/Button.story.tsx +314 -0
  109. package/src/button/Button/stories/Button.tests.story.tsx +288 -0
  110. package/src/button/Button/test/Button.spec.tsx +328 -0
  111. package/src/button/{Button.less → LegacyButton/Button.less} +1 -1
  112. package/src/button/{Button.spec.tsx → LegacyButton/Button.spec.tsx} +3 -3
  113. package/src/button/LegacyButton/Button.story.tsx +224 -0
  114. package/src/button/{Button.tsx → LegacyButton/Button.tsx} +12 -8
  115. package/src/button/{classMap.ts → LegacyButton/classMap.ts} +1 -1
  116. package/src/button/LegacyButton/index.ts +3 -0
  117. package/src/button/{legacyUtils → LegacyButton/legacyUtils}/legacyUtils.spec.tsx +2 -2
  118. package/src/button/{legacyUtils → LegacyButton/legacyUtils}/legacyUtils.ts +2 -2
  119. package/src/button/index.ts +2 -3
  120. package/src/button/src/Button.tsx +118 -0
  121. package/src/button/src/index.ts +2 -0
  122. package/src/button/test/Button.spec.tsx +66 -0
  123. package/src/circularButton/CircularButton.tsx +1 -1
  124. package/src/common/action/Action.tsx +1 -1
  125. package/src/iconButton/IconButton.css +24 -29
  126. package/src/iconButton/IconButton.less +4 -4
  127. package/src/link/Link.tsx +15 -6
  128. package/src/main.css +288 -29
  129. package/src/main.less +2 -1
  130. package/src/nudge/Nudge.tsx +1 -1
  131. package/src/primitives/PrimitiveAnchor/stories/PrimitiveAnchor.story.tsx +1 -1
  132. package/src/primitives/PrimitiveAnchor/test/PrimitiveAnchor.spec.tsx +1 -1
  133. package/src/primitives/PrimitiveButton/stories/PrimitiveButton.story.tsx +1 -1
  134. package/src/primitives/PrimitiveButton/test/PrimitiveButton.spec.tsx +2 -3
  135. package/src/select/Select.tsx +1 -0
  136. package/src/test-utils/index.tsx +0 -1
  137. package/build/button/Button.js.map +0 -1
  138. package/build/button/Button.mjs.map +0 -1
  139. package/build/button/classMap.js +0 -42
  140. package/build/button/classMap.js.map +0 -1
  141. package/build/button/classMap.mjs +0 -39
  142. package/build/button/classMap.mjs.map +0 -1
  143. package/build/button/legacyUtils/legacyUtils.js.map +0 -1
  144. package/build/button/legacyUtils/legacyUtils.mjs.map +0 -1
  145. package/build/types/button/Button.d.ts.map +0 -1
  146. package/build/types/button/classMap.d.ts.map +0 -1
  147. package/build/types/button/legacyUtils/index.d.ts.map +0 -1
  148. package/build/types/button/legacyUtils/legacyUtils.d.ts.map +0 -1
  149. package/src/button/Button.story.tsx +0 -163
  150. /package/build/styles/button/{Button.css → LegacyButton/Button.css} +0 -0
  151. /package/build/types/button/{classMap.d.ts → LegacyButton/classMap.d.ts} +0 -0
  152. /package/build/types/button/{legacyUtils → LegacyButton/legacyUtils}/index.d.ts +0 -0
  153. /package/src/button/{Button.css → LegacyButton/Button.css} +0 -0
  154. /package/src/button/{__snapshots__ → LegacyButton/__snapshots__}/Button.spec.tsx.snap +0 -0
  155. /package/src/button/{legacyUtils → LegacyButton/legacyUtils}/index.ts +0 -0
package/build/styles/button/Button/less/Button.css ADDED
@@ -0,0 +1,253 @@
1
+ :root {
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-padding: var(--size-8) var(--size-12);
7
+ --Button-border-radius: var(--radius-full);
8
+ --Button-font-size: var(--font-size-16);
9
+ --Button-line-height: var(--size-24);
10
+ --Button-font-weight: var(--font-weight-semi-bold);
11
+ --Button-letter-spacing: -0.011em;
12
+ --Button-size-small-padding: 5px var(--size-12);
13
+ --Button-size-medium-padding: var(--size-8) var(--size-12);
14
+ --Button-size-large-padding: var(--size-12) var(--size-16);
15
+ --Button-avatar-border-color: var(--color-border-neutral);
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-tertiary-background: var(--color-background-neutral);
21
+ --Button-tertiary-background-hover: var(--color-background-neutral-hover);
22
+ --Button-tertiary-background-active: var(--color-background-neutral-active);
23
+ --Button-tertiary-color: var(--color-content-primary);
24
+ --Button-minimal-background: transparent;
25
+ --Button-minimal-background-hover: var(--color-background-screen-hover);
26
+ --Button-minimal-background-active: var(--color-background-screen-active);
27
+ --Button-minimal-color: var(--color-interactive-primary);
28
+ --Button-primary-negative-background: var(--color-sentiment-negative-primary);
29
+ --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
30
+ --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
31
+ --Button-primary-negative-color: var(--color-contrast);
32
+ --Button-primary-netative-avatar-border-color: rgba(255,255,255,0.2);
33
+ --Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
34
+ --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
35
+ --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
36
+ --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
37
+ --Button-secondary-netative-avatar-border-color: rgba(168,32,13,0.12157);
38
+ }
39
+ .np-theme-personal--dark {
40
+ --Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
41
+ }
42
+ .np-theme-personal--forest-green {
43
+ --color-interactive-neutral: rgba(159,232,112,0.2);
44
+ --color-interactive-neutral-hover: rgba(205,255,173,0.2);
45
+ --color-interactive-neutral-active: rgba(236,255,224,0.2);
46
+ --color-sentiment-negative-secondary: rgba(255,196,194,0.2);
47
+ --color-sentiment-negative-secondary-hover: rgba(255,220,219,0.2);
48
+ --color-sentiment-negative-secondary-active: rgba(255,235,235,0.2);
49
+ --Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
50
+ --Button-secondary-netative-avatar-border-color: rgba(14,15,12,0.12157);
51
+ }
52
+ .np-theme-personal--bright-green {
53
+ --color-contrast: #FFFFFF;
54
+ --Button-secondary-color: var(--color-interactive-control);
55
+ --Button-secondary-negative-color: var(--color-contrast);
56
+ --Button-secondary-netative-avatar-border-color: var(--Button-primary-netative-avatar-border-color);
57
+ }
58
+ /* Button Styles */
59
+ .wds-Button {
60
+ display: inline-flex;
61
+ flex: none;
62
+ width: auto;
63
+ align-items: center;
64
+ justify-content: center;
65
+ vertical-align: middle;
66
+ font-weight: 600;
67
+ font-weight: var(--Button-font-weight);
68
+ font-size: 1rem;
69
+ font-size: var(--Button-font-size);
70
+ letter-spacing: -0.011em;
71
+ letter-spacing: var(--Button-letter-spacing);
72
+ line-height: 24px;
73
+ line-height: var(--Button-line-height);
74
+ text-align: center;
75
+ -webkit-text-decoration: none;
76
+ text-decoration: none;
77
+ white-space: nowrap;
78
+ word-wrap: break-word;
79
+ -webkit-appearance: none;
80
+ -moz-appearance: none;
81
+ appearance: none;
82
+ background-color: #00a2dd;
83
+ background-color: var(--Button-background);
84
+ border: none;
85
+ border-radius: 9999px;
86
+ border-radius: var(--Button-border-radius);
87
+ color: var(--Button-color);
88
+ cursor: pointer;
89
+ padding: 8px 12px;
90
+ padding: var(--Button-padding);
91
+ }
92
+ .wds-Button:focus {
93
+ -webkit-text-decoration: none;
94
+ text-decoration: none;
95
+ }
96
+ .wds-Button:hover {
97
+ background-color: #008fc9;
98
+ background-color: var(--Button-background-hover);
99
+ -webkit-text-decoration: none;
100
+ text-decoration: none;
101
+ }
102
+ .wds-Button:active {
103
+ background-color: #0081ba;
104
+ background-color: var(--Button-background-active);
105
+ -webkit-text-decoration: none;
106
+ text-decoration: none;
107
+ }
108
+ .wds-Button:disabled {
109
+ mix-blend-mode: luminosity;
110
+ opacity: 0.45;
111
+ cursor: not-allowed;
112
+ }
113
+ .wds-Button:disabled:hover,
114
+ .wds-Button:disabled:active {
115
+ background-color: #00a2dd;
116
+ background-color: var(--Button-background);
117
+ }
118
+ .wds-Button--secondary {
119
+ --Button-background: var(--Button-secondary-background);
120
+ --Button-background-hover: var(--Button-secondary-hover-background);
121
+ --Button-background-active: var(--Button-secondary-active-background);
122
+ --Button-color: var(--Button-secondary-color);
123
+ }
124
+ .wds-Button--tertiary {
125
+ --Button-background: var(--Button-tertiary-background);
126
+ --Button-background-hover: var(--Button-tertiary-hover-background);
127
+ --Button-background-active: var(--Button-tertiary-active-background);
128
+ --Button-color: var(--Button-tertiary-color);
129
+ }
130
+ .wds-Button--tertiary .wds-Button-icon--right {
131
+ color: var(--color-interactive-primary);
132
+ }
133
+ .wds-Button--minimal {
134
+ --Button-background: var(--Button-minimal-background);
135
+ --Button-background-hover: var(--Button-minimal-hover-background);
136
+ --Button-background-active: var(--Button-minimal-active-background);
137
+ --Button-color: var(--Button-minimal-color);
138
+ -webkit-text-decoration: underline;
139
+ text-decoration: underline;
140
+ }
141
+ .wds-Button--minimal:hover,
142
+ .wds-Button--minimal:hover:active {
143
+ -webkit-text-decoration: underline;
144
+ text-decoration: underline;
145
+ }
146
+ .wds-Button--negative.wds-Button--primary {
147
+ --Button-background: var(--Button-primary-negative-background);
148
+ --Button-background-hover: var(--Button-primary-negative-hover-background);
149
+ --Button-background-active: var(--Button-primary-negative-active-background);
150
+ --Button-color: var(--Button-primary-negative-color);
151
+ --Button-avatar-border-color: var(--Button-primary-netative-avatar-border-color);
152
+ }
153
+ .wds-Button--negative.wds-Button--secondary {
154
+ --Button-background: var(--Button-secondary-negative-background);
155
+ --Button-background-hover: var(--Button-secondary-negative-hover-background);
156
+ --Button-background-active: var(--Button-secondary-negative-active-background);
157
+ --Button-color: var(--Button-secondary-negative-color);
158
+ --Button-avatar-border-color: var(--Button-secondary-netative-avatar-border-color);
159
+ }
160
+ .wds-Button--small {
161
+ --Button-padding: var(--Button-size-small-padding);
162
+ --Button-line-height: 22px;
163
+ --Button-font-size: var(--font-size-14);
164
+ --Button-letter-spacing: -0.006em;
165
+ }
166
+ .wds-Button--small .wds-Button-icon--left {
167
+ margin-right: 4px;
168
+ margin-right: var(--size-4);
169
+ }
170
+ [dir="rtl"] .wds-Button--small .wds-Button-icon--left {
171
+ margin-right: 0;
172
+ margin-left: 4px;
173
+ margin-left: var(--size-4);
174
+ }
175
+ .wds-Button--medium {
176
+ --Button-padding: var(--Button-size-medium-padding);
177
+ }
178
+ .wds-Button--large {
179
+ --Button-padding: var(--Button-size-large-padding);
180
+ }
181
+ .wds-Button--block {
182
+ width: 100%;
183
+ }
184
+ .wds-Button-avatars {
185
+ display: inline-flex;
186
+ margin-right: 5px;
187
+ margin-left: calc(4px * -1);
188
+ margin-left: calc(var(--size-4) * -1);
189
+ }
190
+ [dir="rtl"] .wds-Button-avatars {
191
+ margin-right: 0;
192
+ margin-left: 5px;
193
+ }
194
+ .wds-Button-avatars .np-circle {
195
+ --circle-border-color: var(--Button-avatar-border-color);
196
+ }
197
+ .wds-Button-avatars .np-avatar-view .np-avatar-view-content {
198
+ color: var(--Button-color);
199
+ }
200
+ .wds-Button-icon {
201
+ display: inline-block;
202
+ }
203
+ .wds-Button-icon--left {
204
+ margin-right: 8px;
205
+ margin-right: var(--size-8);
206
+ }
207
+ [dir="rtl"] .wds-Button-icon--left {
208
+ margin-right: 0;
209
+ margin-left: 8px;
210
+ margin-left: var(--size-8);
211
+ }
212
+ .wds-Button-icon--right {
213
+ margin-left: 4px;
214
+ margin-left: var(--size-4);
215
+ }
216
+ [dir="rtl"] .wds-Button-icon--right {
217
+ margin-left: 0;
218
+ margin-right: 4px;
219
+ margin-right: var(--size-4);
220
+ }
221
+ .wds-Button-content {
222
+ position: relative;
223
+ }
224
+ .wds-Button-content--loading .wds-Button-label,
225
+ .wds-Button-content--loading .wds-Button-media,
226
+ .wds-Button-content--loading .wds-Button-icon {
227
+ visibility: hidden;
228
+ opacity: 0;
229
+ }
230
+ .wds-Button-label {
231
+ display: flex;
232
+ justify-content: center;
233
+ align-items: center;
234
+ position: relative;
235
+ }
236
+ .wds-Button-loader {
237
+ position: absolute;
238
+ display: flex;
239
+ justify-content: center;
240
+ align-items: center;
241
+ width: 100%;
242
+ height: 100%;
243
+ }
244
+ .wds-Button-loader .process-circle {
245
+ stroke: var(--Button-color);
246
+ }
247
+ /* RTL Styles */
248
+ [dir="rtl"] .wds-Button .tw-icon-chevron-right,[dir="rtl"] .wds-Button .tw-icon-arrow-right {
249
+ transform: rotate(180deg);
250
+ }
251
+ [dir="rtl"] .wds-Button .tw-icon-chevron-left,[dir="rtl"] .wds-Button .tw-icon-arrow-left {
252
+ transform: rotate(180deg);
253
+ }
package/build/styles/button/Button/less/Button.vars.css ADDED
@@ -0,0 +1,57 @@
1
+ :root {
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-padding: var(--size-8) var(--size-12);
7
+ --Button-border-radius: var(--radius-full);
8
+ --Button-font-size: var(--font-size-16);
9
+ --Button-line-height: var(--size-24);
10
+ --Button-font-weight: var(--font-weight-semi-bold);
11
+ --Button-letter-spacing: -0.011em;
12
+ --Button-size-small-padding: 5px var(--size-12);
13
+ --Button-size-medium-padding: var(--size-8) var(--size-12);
14
+ --Button-size-large-padding: var(--size-12) var(--size-16);
15
+ --Button-avatar-border-color: var(--color-border-neutral);
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-tertiary-background: var(--color-background-neutral);
21
+ --Button-tertiary-background-hover: var(--color-background-neutral-hover);
22
+ --Button-tertiary-background-active: var(--color-background-neutral-active);
23
+ --Button-tertiary-color: var(--color-content-primary);
24
+ --Button-minimal-background: transparent;
25
+ --Button-minimal-background-hover: var(--color-background-screen-hover);
26
+ --Button-minimal-background-active: var(--color-background-screen-active);
27
+ --Button-minimal-color: var(--color-interactive-primary);
28
+ --Button-primary-negative-background: var(--color-sentiment-negative-primary);
29
+ --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
30
+ --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
31
+ --Button-primary-negative-color: var(--color-contrast);
32
+ --Button-primary-netative-avatar-border-color: rgba(255,255,255,0.2);
33
+ --Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
34
+ --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
35
+ --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
36
+ --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
37
+ --Button-secondary-netative-avatar-border-color: rgba(168,32,13,0.12157);
38
+ }
39
+ .np-theme-personal--dark {
40
+ --Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
41
+ }
42
+ .np-theme-personal--forest-green {
43
+ --color-interactive-neutral: rgba(159,232,112,0.2);
44
+ --color-interactive-neutral-hover: rgba(205,255,173,0.2);
45
+ --color-interactive-neutral-active: rgba(236,255,224,0.2);
46
+ --color-sentiment-negative-secondary: rgba(255,196,194,0.2);
47
+ --color-sentiment-negative-secondary-hover: rgba(255,220,219,0.2);
48
+ --color-sentiment-negative-secondary-active: rgba(255,235,235,0.2);
49
+ --Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
50
+ --Button-secondary-netative-avatar-border-color: rgba(14,15,12,0.12157);
51
+ }
52
+ .np-theme-personal--bright-green {
53
+ --color-contrast: #FFFFFF;
54
+ --Button-secondary-color: var(--color-interactive-control);
55
+ --Button-secondary-negative-color: var(--color-contrast);
56
+ --Button-secondary-netative-avatar-border-color: var(--Button-primary-netative-avatar-border-color);
57
+ }
package/build/styles/iconButton/IconButton.css CHANGED
@@ -2,77 +2,72 @@
2
2
  border: none;
3
3
  }
4
4
  .np-icon-button-tertiary-default {
5
- color: var(--color-interactive-primary);
6
- background-color: rgba(134,167,189,0.10196);
7
- background-color: var(--color-background-neutral);
5
+ --Button-color: var(--color-interactive-primary);
6
+ --Button-background: var(--color-background-neutral);
8
7
  }
9
8
  .np-icon-button-tertiary-default:not(.disabled):not(:disabled):hover {
10
- background-color: var(--color-background-neutral-hover);
9
+ --Button-background-hover: var(--color-background-neutral-hover);
11
10
  }
12
11
  .np-icon-button-tertiary-default:not(.disabled):not(:disabled):active {
13
- background-color: var(--color-background-neutral-active);
12
+ --Button-background-active: var(--color-background-neutral-active);
14
13
  }
15
14
  .np-icon-button-primary-default {
16
- color: var(--color-interactive-control);
17
- background-color: #00a2dd;
18
- background-color: var(--color-interactive-accent);
15
+ --Button-color: var(--color-interactive-control);
16
+ --Button-background: var(--color-interactive-accent);
19
17
  }
20
18
  .np-icon-button-primary-default:not(.disabled):not(:disabled):hover {
21
- background-color: #008fc9;
22
- background-color: var(--color-interactive-accent-hover);
19
+ --Button-background-hover: var(--color-interactive-accent-hover);
23
20
  }
24
21
  .np-icon-button-primary-default:not(.disabled):not(:disabled):active {
25
- background-color: #0081ba;
26
- background-color: var(--color-interactive-accent-active);
22
+ --Button-background-active: var(--color-interactive-accent-active);
27
23
  }
28
24
  .np-icon-button-primary-negative {
29
- color: var(--color-contrast-overlay);
30
- background-color: var(--color-sentiment-negative-primary);
25
+ --Button-color: var(--color-contrast-overlay);
26
+ --Button-background: var(--color-sentiment-negative-primary);
31
27
  }
32
28
  .np-icon-button-primary-negative:not(.disabled):not(:disabled):hover {
33
- background-color: var(--color-sentiment-negative-primary-hover);
29
+ --Button-background-hover: var(--color-sentiment-negative-primary-hover);
34
30
  }
35
31
  .np-icon-button-primary-negative:not(.disabled):not(:disabled):active {
36
- background-color: var(--color-sentiment-negative-primary-active);
32
+ --Button-background-active: var(--color-sentiment-negative-primary-active);
37
33
  }
38
34
  .np-theme-personal--bright-green .np-icon-button-primary-negative {
39
35
  color: var(--color-white);
40
36
  }
41
37
  .np-icon-button-minimal-default {
42
- color: var(--color-interactive-primary);
43
- background-color: #ffffff;
44
- background-color: var(--color-background-screen);
38
+ --Button-color: var(--color-interactive-primary);
39
+ --Button-background: var(--color-background-screen);
45
40
  background-color: transparent;
46
41
  }
47
42
  .np-icon-button-minimal-default:not(.disabled):not(:disabled):hover {
48
- background-color: var(--color-background-screen-hover);
43
+ --Button-background-hover: var(--color-background-screen-hover);
49
44
  }
50
45
  .np-icon-button-minimal-default:not(.disabled):not(:disabled):active {
51
- background-color: var(--color-background-screen-active);
46
+ --Button-background-active: var(--color-background-screen-active);
52
47
  }
53
48
  .np-icon-button-secondary-default {
54
- color: var(--color-interactive-primary);
55
- background-color: var(--color-interactive-neutral);
49
+ --Button-color: var(--color-interactive-primary);
50
+ --Button-background: var(--color-interactive-neutral);
56
51
  }
57
52
  .np-icon-button-secondary-default:not(.disabled):not(:disabled):hover {
58
- background-color: var(--color-interactive-neutral-hover);
53
+ --Button-background-hover: var(--color-interactive-neutral-hover);
59
54
  }
60
55
  .np-icon-button-secondary-default:not(.disabled):not(:disabled):active {
61
- background-color: var(--color-interactive-neutral-active);
56
+ --Button-background-active: var(--color-interactive-neutral-active);
62
57
  }
63
58
  .np-theme-personal--bright-green .np-icon-button-secondary-default,
64
59
  .np-theme-personal--forest-green .np-icon-button-secondary-default {
65
60
  color: var(--color-interactive-control);
66
61
  }
67
62
  .np-icon-button-secondary-negative {
68
- color: var(--color-sentiment-negative-primary);
69
- background-color: var(--color-sentiment-negative-secondary);
63
+ --Button-color: var(--color-sentiment-negative-primary);
64
+ --Button-background: var(--color-sentiment-negative-secondary);
70
65
  }
71
66
  .np-icon-button-secondary-negative:not(.disabled):not(:disabled):hover {
72
- background-color: var(--color-sentiment-negative-secondary-hover);
67
+ --Button-background-hover: var(--color-sentiment-negative-secondary-hover);
73
68
  }
74
69
  .np-icon-button-secondary-negative:not(.disabled):not(:disabled):active {
75
- background-color: var(--color-sentiment-negative-secondary-active);
70
+ --Button-background-active: var(--color-sentiment-negative-secondary-active);
76
71
  }
77
72
  .np-theme-personal--bright-green .np-icon-button-secondary-negative {
78
73
  color: var(--color-white);