@ebay/skin 19.12.0 → 19.13.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/dist/alert-dialog/alert-dialog.css +0 -1
- package/dist/bundles/skin-default.css +91 -26
- package/dist/bundles/skin-full.css +104 -40
- package/dist/bundles/skin-headless.css +78 -12
- package/dist/confirm-dialog/confirm-dialog.css +0 -1
- package/dist/drawer-dialog/drawer-dialog.css +0 -1
- package/dist/filter-chip/filter-chip.css +65 -0
- package/dist/fullscreen-dialog/fullscreen-dialog.css +0 -1
- package/dist/lightbox-dialog/lightbox-dialog.css +0 -1
- package/dist/panel-dialog/panel-dialog.css +0 -1
- package/dist/selection-chip/selection-chip.css +51 -0
- package/dist/svg/icon/icon-afterpay-logo-24-colored.svg +13 -0
- package/dist/svg/icon/icon-ai-search-16.svg +5 -0
- package/dist/svg/icon/icon-ai-search-20.svg +5 -0
- package/dist/svg/icon/icon-ai-search-24.svg +5 -0
- package/dist/svg/icon/icon-ai-shirt-16.svg +5 -0
- package/dist/svg/icon/icon-ai-shirt-20.svg +5 -0
- package/dist/svg/icon/icon-ai-shirt-24.svg +5 -0
- package/dist/svg/icon/icon-bank-group-logo-24-colored.svg +67 -0
- package/dist/svg/icon/icon-credit-card-20.svg +5 -0
- package/dist/svg/icon/icon-credit-card-24.svg +1 -3
- package/dist/svg/icon/icon-credit-card-cvv-back-20.svg +5 -0
- package/dist/svg/icon/icon-credit-card-cvv-back-24.svg +5 -0
- package/dist/svg/icon/icon-credit-card-cvv-front-20.svg +5 -0
- package/dist/svg/icon/icon-credit-card-cvv-front-24.svg +5 -0
- package/dist/svg/icon/icon-density-row-compact-16.svg +5 -0
- package/dist/svg/icon/icon-density-row-compact-24.svg +5 -0
- package/dist/svg/icon/icon-density-row-relaxed-16.svg +5 -0
- package/dist/svg/icon/icon-density-row-relaxed-24.svg +5 -0
- package/dist/svg/icon/icon-information-20.svg +5 -0
- package/dist/svg/icon/icon-information-filled-20.svg +5 -0
- package/dist/svg/icon/icon-note-16.svg +5 -0
- package/dist/svg/icon/icon-note-24.svg +5 -0
- package/dist/svg/icon/icon-notification-filled-16.svg +5 -0
- package/dist/svg/icon/icon-notification-filled-20.svg +5 -0
- package/dist/svg/icon/icon-pay-by-bank-12-colored.svg +7 -0
- package/dist/svg/icon/icon-pay-by-bank-18-colored.svg +7 -0
- package/dist/svg/icon/icon-pay-by-bank-24-colored.svg +7 -0
- package/dist/svg/icon/icon-pay-by-bank-32-colored.svg +7 -0
- package/dist/svg/icon/icon-payout-16.svg +5 -0
- package/dist/svg/icon/icon-payout-24.svg +5 -0
- package/dist/svg/icon/icon-secure-purchase-16.svg +5 -0
- package/dist/svg/icon/icon-secure-purchase-24.svg +5 -0
- package/dist/svg/icon/icon-shopping-event-16.svg +5 -0
- package/dist/svg/icon/icon-shopping-event-24.svg +5 -0
- package/dist/svg/icon/icon-wallet-16.svg +5 -0
- package/dist/svg/icon/icon-zip-pay-12-colored.svg +12 -0
- package/dist/svg/icon/icon-zip-pay-18-colored.svg +12 -0
- package/dist/svg/icon/icon-zip-pay-24-colored.svg +12 -0
- package/dist/svg/icon/icon-zip-pay-32-colored.svg +15 -0
- package/dist/svg/icons.svg +303 -3
- package/dist/toast-dialog/toast-dialog.css +7 -7
- package/dist/tokens/evo-dark.css +13 -14
- package/dist/tokens/evo-light.css +14 -14
- package/package.json +1 -1
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
.toast-dialog__window {
|
|
64
|
-
|
|
64
|
+
padding: var(--spacing-100) var(--spacing-200) var(--spacing-200);
|
|
65
65
|
}
|
|
66
66
|
|
|
67
67
|
.toast-dialog__header {
|
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
.toast-dialog__title {
|
|
73
73
|
margin: 0;
|
|
74
74
|
}
|
|
75
|
-
button.toast-dialog__close {
|
|
75
|
+
button.icon-btn.toast-dialog__close {
|
|
76
76
|
align-self: flex-start;
|
|
77
77
|
border: 0;
|
|
78
78
|
color: var(
|
|
@@ -83,15 +83,15 @@ button.toast-dialog__close {
|
|
|
83
83
|
margin-inline-start: auto;
|
|
84
84
|
padding: 0;
|
|
85
85
|
}
|
|
86
|
-
button.toast-dialog__close:focus {
|
|
86
|
+
button.icon-btn.toast-dialog__close:focus {
|
|
87
87
|
outline: 2px solid var(--color-foreground-on-information);
|
|
88
88
|
}
|
|
89
|
-
button.toast-dialog__close:focus,
|
|
90
|
-
button.toast-dialog__close:hover {
|
|
89
|
+
button.icon-btn.toast-dialog__close:focus,
|
|
90
|
+
button.icon-btn.toast-dialog__close:hover {
|
|
91
91
|
color: var(--color-state-primary-hover);
|
|
92
92
|
}
|
|
93
93
|
|
|
94
|
-
button.toast-dialog__close > svg {
|
|
94
|
+
button.icon-btn.toast-dialog__close > svg {
|
|
95
95
|
fill: currentColor;
|
|
96
96
|
}
|
|
97
97
|
|
|
@@ -175,6 +175,6 @@ button.toast-dialog__close > svg {
|
|
|
175
175
|
width: auto;
|
|
176
176
|
}
|
|
177
177
|
.toast-dialog__window {
|
|
178
|
-
|
|
178
|
+
padding: var(--spacing-200) var(--spacing-300) var(--spacing-300);
|
|
179
179
|
}
|
|
180
180
|
}
|
package/dist/tokens/evo-dark.css
CHANGED
|
@@ -90,6 +90,7 @@
|
|
|
90
90
|
--color-scrim-image: rgba(255, 255, 255, 0.12);
|
|
91
91
|
--color-scrim-background: rgba(0, 0, 0, 0.64);
|
|
92
92
|
--state-layer-neutral: rgb(var(--color-neutral-100-rgb), 0);
|
|
93
|
+
--state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);
|
|
93
94
|
--state-layer-focus: rgb(
|
|
94
95
|
var(--color-neutral-100-rgb),
|
|
95
96
|
var(--opacity-50)
|
|
@@ -102,6 +103,12 @@
|
|
|
102
103
|
var(--color-neutral-100-rgb),
|
|
103
104
|
var(--opacity-100)
|
|
104
105
|
);
|
|
106
|
+
--state-layer-focus-on-strong: rgb(var(--color-neutral-900-rgb), var(--opacity-100));
|
|
107
|
+
--state-layer-hover-on-strong: rgb(var(--color-neutral-900-rgb), var(--opacity-100));
|
|
108
|
+
--state-layer-pressed-on-strong: rgb(
|
|
109
|
+
var(--color-neutral-900-rgb),
|
|
110
|
+
var(--opacity-150)
|
|
111
|
+
);
|
|
105
112
|
--state-layer-drag: rgb(
|
|
106
113
|
var(--color-neutral-100-rgb),
|
|
107
114
|
var(--opacity-150)
|
|
@@ -144,7 +151,7 @@
|
|
|
144
151
|
--color-ai-gradient-blue-subtle: linear-gradient(
|
|
145
152
|
270deg,
|
|
146
153
|
var(--color-ai-solid-green-subtle) -36%,
|
|
147
|
-
var(--color-ai-solid-blue-subtle)
|
|
154
|
+
var(--color-ai-solid-blue-subtle) 38.5%,
|
|
148
155
|
var(--color-ai-solid-purple-subtle) 113%
|
|
149
156
|
);
|
|
150
157
|
--color-ai-gradient-green-subtle: linear-gradient(
|
|
@@ -180,27 +187,19 @@
|
|
|
180
187
|
);
|
|
181
188
|
--color-loading-ai-gradient-purple-subtle: linear-gradient(
|
|
182
189
|
270deg,
|
|
183
|
-
var(--color-ai-solid-
|
|
184
|
-
var(--color-ai-solid-red-subtle-dark) 34%,
|
|
185
|
-
var(--color-ai-solid-purple-subtle-dark) 50%,
|
|
186
|
-
var(--color-ai-solid-red-subtle-dark) 66%,
|
|
190
|
+
var(--color-ai-solid-purple-subtle-dark) 0%,
|
|
187
191
|
var(--color-ai-solid-red-subtle-dark) 100%
|
|
188
192
|
);
|
|
189
193
|
--color-loading-ai-gradient-blue-subtle: linear-gradient(
|
|
190
194
|
270deg,
|
|
191
|
-
var(--color-ai-solid-
|
|
192
|
-
var(--color-ai-solid-blue-subtle-dark)
|
|
193
|
-
var(--color-ai-solid-purple-subtle-dark)
|
|
194
|
-
var(--color-ai-solid-blue-subtle-dark) 66%,
|
|
195
|
-
var(--color-ai-solid-blue-subtle-dark) 100%
|
|
195
|
+
var(--color-ai-solid-green-subtle-dark) -36%,
|
|
196
|
+
var(--color-ai-solid-blue-subtle-dark) 38.5%,
|
|
197
|
+
var(--color-ai-solid-purple-subtle-dark) 113%
|
|
196
198
|
);
|
|
197
199
|
--color-loading-ai-gradient-green-subtle: linear-gradient(
|
|
198
200
|
270deg,
|
|
199
201
|
var(--color-ai-solid-green-subtle-dark) 0%,
|
|
200
|
-
var(--color-ai-solid-
|
|
201
|
-
var(--color-ai-solid-blue-subtle-dark) 50%,
|
|
202
|
-
var(--color-ai-solid-green-subtle-dark) 66%,
|
|
203
|
-
var(--color-ai-solid-green-subtle-dark) 100%
|
|
202
|
+
var(--color-ai-solid-blue-subtle-dark) 154.5%
|
|
204
203
|
);
|
|
205
204
|
}
|
|
206
205
|
}
|
|
@@ -104,12 +104,20 @@
|
|
|
104
104
|
--color-marketing-magenta-foreground-4: var(--color-neutral-100);
|
|
105
105
|
--color-marketing-magenta-background-4: var(--color-pink-400);
|
|
106
106
|
--state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);
|
|
107
|
+
--state-layer-neutral-on-strong: rgb(var(--color-neutral-100-rgb), 0);
|
|
107
108
|
--state-layer-focus: rgb(var(--color-neutral-900-rgb), var(--opacity-50));
|
|
108
109
|
--state-layer-hover: rgb(var(--color-neutral-900-rgb), var(--opacity-50));
|
|
109
110
|
--state-layer-pressed: rgb(
|
|
110
111
|
var(--color-neutral-900-rgb),
|
|
111
112
|
var(--opacity-100)
|
|
112
113
|
);
|
|
114
|
+
--state-layer-focus-on-strong: rgb(var(--color-neutral-100-rgb), var(--opacity-150));
|
|
115
|
+
--state-layer-hover-on-strong: rgb(var(--color-neutral-100-rgb), var(--opacity-150));
|
|
116
|
+
--state-layer-pressed-on-strong: rgb(
|
|
117
|
+
var(--color-neutral-100-rgb),
|
|
118
|
+
var(--opacity-200)
|
|
119
|
+
);
|
|
120
|
+
|
|
113
121
|
--state-layer-drag: rgb(var(--color-neutral-900-rgb), var(--opacity-150));
|
|
114
122
|
--color-ai-gradient-full-spectrum: linear-gradient(
|
|
115
123
|
223deg,
|
|
@@ -145,7 +153,7 @@
|
|
|
145
153
|
--color-ai-gradient-blue-subtle: linear-gradient(
|
|
146
154
|
270deg,
|
|
147
155
|
var(--color-ai-solid-green-subtle) -36%,
|
|
148
|
-
var(--color-ai-solid-blue-subtle)
|
|
156
|
+
var(--color-ai-solid-blue-subtle) 38.5%,
|
|
149
157
|
var(--color-ai-solid-purple-subtle) 113%
|
|
150
158
|
);
|
|
151
159
|
--color-ai-gradient-green-subtle: linear-gradient(
|
|
@@ -185,27 +193,19 @@
|
|
|
185
193
|
);
|
|
186
194
|
--color-loading-ai-gradient-purple-subtle: linear-gradient(
|
|
187
195
|
270deg,
|
|
188
|
-
var(--color-ai-solid-
|
|
189
|
-
var(--color-ai-solid-red-subtle) 34%,
|
|
190
|
-
var(--color-ai-solid-purple-subtle) 50%,
|
|
191
|
-
var(--color-ai-solid-red-subtle) 66%,
|
|
196
|
+
var(--color-ai-solid-purple-subtle) 0%,
|
|
192
197
|
var(--color-ai-solid-red-subtle) 100%
|
|
193
198
|
);
|
|
194
199
|
--color-loading-ai-gradient-blue-subtle: linear-gradient(
|
|
195
200
|
270deg,
|
|
196
|
-
var(--color-ai-solid-
|
|
197
|
-
var(--color-ai-solid-blue-subtle)
|
|
198
|
-
var(--color-ai-solid-purple-subtle)
|
|
199
|
-
var(--color-ai-solid-blue-subtle) 66%,
|
|
200
|
-
var(--color-ai-solid-blue-subtle) 100%
|
|
201
|
+
var(--color-ai-solid-green-subtle) -36%,
|
|
202
|
+
var(--color-ai-solid-blue-subtle) 38.5%,
|
|
203
|
+
var(--color-ai-solid-purple-subtle) 113%
|
|
201
204
|
);
|
|
202
205
|
--color-loading-ai-gradient-green-subtle: linear-gradient(
|
|
203
206
|
270deg,
|
|
204
207
|
var(--color-ai-solid-green-subtle) 0%,
|
|
205
|
-
var(--color-ai-solid-
|
|
206
|
-
var(--color-ai-solid-blue-subtle) 50%,
|
|
207
|
-
var(--color-ai-solid-green-subtle) 66%,
|
|
208
|
-
var(--color-ai-solid-green-subtle) 100%
|
|
208
|
+
var(--color-ai-solid-blue-subtle) 154.5%
|
|
209
209
|
);
|
|
210
210
|
--color-media-disabled-filter: grayscale(1) opacity(0.25);
|
|
211
211
|
/* Motion Functions */
|