@transferwise/components 45.25.2 → 45.26.0
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.
- package/build/main.css +1 -1
- package/build/styles/chips/Chip.css +1 -1
- package/build/styles/main.css +1 -1
- package/package.json +2 -2
- package/src/chips/Chip.css +1 -1
- package/src/chips/Chip.less +9 -21
- package/src/main.css +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "45.
|
|
3
|
+
"version": "45.26.0",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
"@testing-library/react-hooks": "^8.0.0",
|
|
54
54
|
"@testing-library/user-event": "^13.2.1",
|
|
55
55
|
"@transferwise/icons": "^3.7.0",
|
|
56
|
-
"@transferwise/neptune-tokens": "^8.
|
|
56
|
+
"@transferwise/neptune-tokens": "^8.8.0",
|
|
57
57
|
"@tsconfig/recommended": "^1.0.2",
|
|
58
58
|
"@types/babel__core": "^7.20.1",
|
|
59
59
|
"@types/jest": "^26.0.20",
|
package/src/chips/Chip.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.np-chip{background-color:transparent;border:1px solid #0000001a;border:1px solid var(--color-border-neutral);border-radius:16px;border-radius:var(--size-16);color:#5d7079;color:var(--color-content-secondary);height:32px;height:var(--size-32);margin-right:8px;margin-right:var(--size-8);padding:0 12px;padding:0 var(--size-12);transition:color .15s ease-in-out,border-color .15s ease-in-out,background-color .15s ease-in-out}@media (max-width:320px){.np-chip{height:40px;height:var(--size-40)}}.np-chip:hover{cursor:pointer}.np-chip .np-chip-label{padding-top:2px}.np-chip .np-close-button{
|
|
1
|
+
.np-chip{background-color:transparent;border:1px solid #0000001a;border:1px solid var(--color-border-neutral);border-radius:16px;border-radius:var(--size-16);color:#5d7079;color:var(--color-content-secondary);height:32px;height:var(--size-32);margin-right:8px;margin-right:var(--size-8);padding:0 12px;padding:0 var(--size-12);transition:color .15s ease-in-out,border-color .15s ease-in-out,background-color .15s ease-in-out}@media (max-width:320px){.np-chip{height:40px;height:var(--size-40)}}.np-chip:hover{cursor:pointer}.np-chip .np-chip-label{padding-top:2px}.np-chip .np-close-button{pointer-events:auto}.np-chip:last-child{margin-right:0}[dir=rtl] .np-chip:last-child{margin-left:0;margin-right:0}.np-chip:active{background-color:#0081ba;background-color:var(--color-interactive-accent-active);border-color:#0081ba;border-color:var(--color-interactive-accent-active);color:#fff}.np-chip--selected{background-color:#00a2dd;background-color:var(--color-interactive-accent);border-color:#00a2dd;border-color:var(--color-interactive-accent);color:#fff;pointer-events:none}.np-chip--selected:active,.np-chip--selected:hover{background-color:#008fc9;background-color:var(--color-interactive-accent-hover);border-color:#008fc9;border-color:var(--color-interactive-accent-hover);color:#fff}.np-chip--selected .np-close-button{color:#fff}.np-chip.has-error{background:#e74848;background:var(--color-interactive-negative);color:#fff}.np-chip.has-error .np-close-button{color:#fff}.np-theme-personal .np-chip.has-error{background:var(--color-sentiment-negative)}.np-theme-personal .np-chip.has-error,.np-theme-personal .np-chip.has-error:not(.disabled,:disabled):active,.np-theme-personal .np-chip.has-error:not(.disabled,:disabled):hover{color:var(--color-contrast)}.np-theme-personal .np-chip.has-error:not(.disabled,:disabled):hover{background:var(--color-sentiment-negative-hover);border-color:var(--color-sentiment-negative-hover)!important}.np-theme-personal .np-chip.has-error:not(.disabled,:disabled):active{background:var(--color-sentiment-negative-active);border-color:var(--color-sentiment-negative-active)!important}.np-theme-personal .np-chip{border-color:#c9cbce;border-color:var(--color-interactive-secondary);color:var(--color-interactive-primary);font-weight:600;font-weight:var(--font-weight-semi-bold);padding:0 16px;padding:0 var(--size-16)}.np-theme-personal .np-chip:not(.disabled,:disabled):hover{background-color:var(--color-background-screen-hover);border-color:#b5b7ba;border-color:var(--color-interactive-secondary-hover);color:var(--color-interactive-primary-hover)}.np-theme-personal .np-chip:not(.disabled,:disabled):active{background-color:var(--color-background-screen-active);border-color:#a7a9ab;border-color:var(--color-interactive-secondary-active);color:var(--color-interactive-primary-active)}.np-theme-personal .np-chip .np-close-button{border-radius:inherit;margin-right:-8px;margin-right:calc(var(--size-8)*-1)}.np-theme-personal .np-chip .np-close-button,.np-theme-personal .np-chip .np-close-button:hover,.np-theme-personal .np-chip .np-close-button:not(.disabled,:disabled):active,.np-theme-personal .np-chip .np-close-button:not(.disabled,:disabled):hover{background-color:transparent!important;color:inherit!important}.np-theme-personal .np-chip:not(.disabled,:disabled):focus-visible,.np-theme-personal .np-chip:not(.disabled,:disabled):has(:focus-visible){outline:var(--ring-outline-color) solid var(--ring-outline-width);outline-offset:var(--ring-outline-offset)}.np-theme-personal .np-chip:not(.disabled,:disabled):focus-visible .np-close-button,.np-theme-personal .np-chip:not(.disabled,:disabled):has(:focus-visible) .np-close-button{background:transparent;outline:none}.np-theme-personal .np-chip:not(.disabled,:disabled):focus-visible .np-close-button:hover,.np-theme-personal .np-chip:not(.disabled,:disabled):has(:focus-visible) .np-close-button:hover{color:inherit!important}.np-theme-personal .np-chip.np-chip--removable{position:relative}.np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold{padding-right:24px;padding-right:var(--size-24)}@media (max-width:320px){.np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold{padding-right:48px;padding-right:var(--size-48)}}.np-theme-personal .np-chip.np-chip--removable .np-close-button{height:100%;justify-content:flex-end;left:0;padding-right:8px;padding-right:var(--size-8);position:absolute;top:0;width:100%}.np-theme-personal .np-chip:has(.disabled,:disabled):focus-visible{outline:none}.np-theme-personal .np-chip--selected,.np-theme-personal .np-chip--valid{background-color:var(--color-interactive-primary);border-color:var(--color-interactive-primary);color:var(--color-interactive-contrast)}.np-theme-personal .np-chip--selected:not(.disabled,:disabled):hover,.np-theme-personal .np-chip--valid:not(.disabled,:disabled):hover{background-color:var(--color-interactive-primary-hover);border-color:var(--color-interactive-primary-hover);color:var(--color-interactive-contrast-hover)}.np-theme-personal .np-chip--selected:not(.disabled,:disabled):active,.np-theme-personal .np-chip--valid:not(.disabled,:disabled):active{background-color:var(--color-interactive-primary-active);border-color:var(--color-interactive-primary-active);color:var(--color-interactive-contrast-active)}.np-theme-personal .np-chip--selected .np-close-button,.np-theme-personal .np-chip--valid .np-close-button{color:inherit}.np-theme-personal .np-chip--selected .np-close-button:focus,.np-theme-personal .np-chip--selected .np-close-button:focus-within,.np-theme-personal .np-chip--valid .np-close-button:focus,.np-theme-personal .np-chip--valid .np-close-button:focus-within{outline:none}
|
package/src/chips/Chip.less
CHANGED
|
@@ -25,16 +25,7 @@
|
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
.np-close-button {
|
|
28
|
-
opacity: 1;
|
|
29
|
-
transition: opacity 0.15s ease-in-out;
|
|
30
28
|
pointer-events: auto;
|
|
31
|
-
color: var(--color-content-secondary);
|
|
32
|
-
|
|
33
|
-
&:hover,
|
|
34
|
-
&:focus {
|
|
35
|
-
color: #fff;
|
|
36
|
-
opacity: 0.85;
|
|
37
|
-
}
|
|
38
29
|
}
|
|
39
30
|
|
|
40
31
|
&:last-child {
|
|
@@ -169,23 +160,20 @@
|
|
|
169
160
|
|
|
170
161
|
&--selected,
|
|
171
162
|
&--valid {
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
&,
|
|
176
|
-
&:not(.disabled, :disabled):hover,
|
|
177
|
-
&:not(.disabled, :disabled):active {
|
|
178
|
-
color: var(--color-interactive-control);
|
|
179
|
-
}
|
|
163
|
+
color: var(--color-interactive-contrast);
|
|
164
|
+
background-color: var(--color-interactive-primary);
|
|
165
|
+
border-color: var(--color-interactive-primary);
|
|
180
166
|
|
|
181
167
|
&:not(.disabled, :disabled):hover {
|
|
182
|
-
|
|
183
|
-
|
|
168
|
+
color: var(--color-interactive-contrast-hover);
|
|
169
|
+
background-color: var(--color-interactive-primary-hover);
|
|
170
|
+
border-color: var(--color-interactive-primary-hover);
|
|
184
171
|
}
|
|
185
172
|
|
|
186
173
|
&:not(.disabled, :disabled):active {
|
|
187
|
-
|
|
188
|
-
|
|
174
|
+
color: var(--color-interactive-contrast-active);
|
|
175
|
+
background-color: var(--color-interactive-primary-active);
|
|
176
|
+
border-color: var(--color-interactive-primary-active);
|
|
189
177
|
}
|
|
190
178
|
|
|
191
179
|
.np-close-button {
|