@ebay/skin 19.15.0 → 19.17.0

package/dist/filter-button/filter-button.css

@@ -1,8 +1,11 @@
+:root {
+    --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);
+    --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);
+}
 div.filter-group {
     display: flex;
     flex-wrap: wrap;
 }
-
 a.filter-link,
 button.filter-button {
     align-items: center;
@@ -15,7 +18,7 @@ button.filter-button {
     flex: 0 1 auto;
     flex-direction: column;
     font-family: inherit;
-    font-size: var(--font-size-default);
+    font-size: var(--font-size-body);
     height: 32px;
     justify-content: center;
     margin: 0;
@@ -32,18 +35,40 @@ button.filter-button + a.filter-link,
 button.filter-button + button.filter-button {
     margin-left: 8px;
 }
-a.filter-link:active,
-a.filter-link:focus,
-a.filter-link:hover,
-button.filter-button:active,
-button.filter-button:focus,
-button.filter-button:hover {
-    background-color: var(
-        --filter-button-background-color,
-        var(--color-state-secondary-hover)
-    );
+a.filter-link,
+button.filter-button {
+    overflow: hidden;
+    position: relative;
+}
+a.filter-link:after,
+button.filter-button:after {
+    background-color: var(--color-state-layer-neutral);
+    content: "";
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
+}
+a.filter-link:not([disabled], [aria-disabled="true"]):hover:after,
+a.filter-link[href]:hover:after,
+button.filter-button:not([disabled], [aria-disabled="true"]):hover:after,
+button.filter-button[href]:hover:after {
+    background-color: var(--color-state-layer-hover);
+}
+a.filter-link:not([disabled], [aria-disabled="true"]):focus-visible:after,
+a.filter-link[href]:focus-visible:after,
+button.filter-button:not(
+        [disabled],
+        [aria-disabled="true"]
+    ):focus-visible:after,
+button.filter-button[href]:focus-visible:after {
+    background-color: var(--color-state-layer-focus);
+}
+a.filter-link:not([disabled], [aria-disabled="true"]):active:after,
+a.filter-link[href]:active:after,
+button.filter-button:not([disabled], [aria-disabled="true"]):active:after,
+button.filter-button[href]:active:after {
+    background-color: var(--color-state-layer-pressed);
 }
-
 a.filter-link .filter-link__cell,
 button.filter-button .filter-button__cell {
     display: inline-block;
@@ -53,28 +78,24 @@ button.filter-button .filter-button__cell {
     text-overflow: ellipsis;
     white-space: nowrap;
 }
-
 a.filter-link:visited {
     color: var(
         --filter-button-foreground-color,
         var(--color-foreground-primary)
     );
 }
-
 a.filter-link--selected,
 button.filter-button[aria-pressed="true"] {
     font-weight: 700;
 }
-
 a.filter-link--selected,
 a.filter-link--selected:visited,
 button.filter-button[aria-pressed="true"] {
     border-color: var(
         --filter-button-selected-border-color,
-        var(--color-stroke-strong)
+        var(--color-border-strong)
     );
 }
-
 a.filter-link--selected:not([href]),
 a.filter-link--selected[aria-disabled="true"],
 a.filter-link:not([href]),
@@ -89,41 +110,6 @@ button.filter-button[disabled] {
     );
     font-weight: 400;
 }
-a.filter-link--selected:not([href]):focus,
-a.filter-link--selected:not([href]):hover,
-a.filter-link--selected[aria-disabled="true"]:focus,
-a.filter-link--selected[aria-disabled="true"]:hover,
-a.filter-link:not([href]):focus,
-a.filter-link:not([href]):hover,
-a.filter-link[aria-disabled="true"]:focus,
-a.filter-link[aria-disabled="true"]:hover,
-button.filter-button[aria-disabled="true"]:focus,
-button.filter-button[aria-disabled="true"]:hover,
-button.filter-button[aria-pressed="true"][aria-disabled="true"]:focus,
-button.filter-button[aria-pressed="true"][aria-disabled="true"]:hover,
-button.filter-button[aria-pressed="true"][disabled]:focus,
-button.filter-button[aria-pressed="true"][disabled]:hover,
-button.filter-button[disabled]:focus,
-button.filter-button[disabled]:hover {
-    background-color: var(
-        --filter-button-background-color,
-        var(--color-background-secondary)
-    );
-    color: var(
-        --filter-button-disabled-foreground-color,
-        var(--color-foreground-disabled)
-    );
-}
-
-a.filter-link--selected:not([href]):hover,
-a.filter-link--selected[aria-disabled="true"]:hover,
-button.filter-button[aria-pressed="true"][aria-disabled="true"]:hover,
-button.filter-button[aria-pressed="true"][disabled]:hover {
-    background-color: var(
-        --filter-button-selected-background-color,
-        var(--color-state-secondary-hover)
-    );
-}
 a.filter-link:focus:not(:focus-visible),
 button.filter-button:focus:not(:focus-visible) {
     outline: none;

package/dist/filter-chip/filter-chip.css

@@ -1,3 +1,8 @@
+:root {
+    --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);
+    --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);
+}
+
 @keyframes fill-horizontal-background {
     0% {
         background-size: 0 100%;
@@ -10,6 +15,7 @@
         background-size: 100% 100%;
     }
 }
+
 @keyframes chevron-bounce-open {
     0% {
         transform: translateY(0);
@@ -21,6 +27,7 @@
         transform: translateY(0);
     }
 }
+
 @keyframes chevron-bounce-close {
     0% {
         transform: translateY(0);
@@ -32,6 +39,7 @@
         transform: translateY(0);
     }
 }
+
 a.filter-chip,
 button.filter-chip {
     align-items: center;
@@ -39,13 +47,13 @@ button.filter-chip {
     background-position: 50%;
     background-repeat: no-repeat;
     background-size: 0 100%;
-    border: 1px solid var(--color-stroke-default);
+    border: 1px solid var(--color-border-medium);
     border-radius: var(--border-radius-100);
     box-shadow: none;
     box-sizing: border-box;
     color: var(--color-foreground-primary);
     display: inline-flex;
-    font-size: var(--font-size-default);
+    font-size: var(--font-size-body);
     gap: var(--spacing-75);
     height: var(--spacing-400);
     justify-content: space-between;
@@ -57,40 +65,46 @@ button.filter-chip {
         var(--motion-easing-quick-enter);
     vertical-align: bottom;
 }
+
 a.filter-chip:active,
 button.filter-chip:active {
     transform: scale(0.97);
 }
+
 a.filter-chip,
 button.filter-chip {
     overflow: hidden;
     position: relative;
 }
+
 a.filter-chip:after,
 button.filter-chip:after {
-    background-color: var(--state-layer-neutral);
+    background-color: var(--color-state-layer-neutral);
     content: "";
     inset: 0;
     pointer-events: none;
     position: absolute;
 }
+
 a.filter-chip:not([disabled], [aria-disabled="true"]):hover:after,
 a.filter-chip[href]:hover:after,
 button.filter-chip:not([disabled], [aria-disabled="true"]):hover:after,
 button.filter-chip[href]:hover:after {
-    background-color: var(--state-layer-hover);
+    background-color: var(--color-state-layer-hover);
 }
-a.filter-chip:not([disabled], [aria-disabled="true"]):focus:after,
-a.filter-chip[href]:focus:after,
-button.filter-chip:not([disabled], [aria-disabled="true"]):focus:after,
-button.filter-chip[href]:focus:after {
-    background-color: var(--state-layer-focus);
+
+a.filter-chip:not([disabled], [aria-disabled="true"]):focus-visible:after,
+a.filter-chip[href]:focus-visible:after,
+button.filter-chip:not([disabled], [aria-disabled="true"]):focus-visible:after,
+button.filter-chip[href]:focus-visible:after {
+    background-color: var(--color-state-layer-focus);
 }
+
 a.filter-chip:not([disabled], [aria-disabled="true"]):active:after,
 a.filter-chip[href]:active:after,
 button.filter-chip:not([disabled], [aria-disabled="true"]):active:after,
 button.filter-chip[href]:active:after {
-    background-color: var(--state-layer-pressed);
+    background-color: var(--color-state-layer-pressed);
 }
 
 a.filter-chip--expressive,
@@ -109,6 +123,7 @@ button.filter-chip--expressive {
     overflow: hidden;
     position: relative;
 }
+
 .filter-chip__media:after {
     background: rgba(0, 0, 0, 0.05);
     bottom: 0;
@@ -120,6 +135,7 @@ button.filter-chip--expressive {
     right: 0;
     top: 0;
 }
+
 .filter-chip__media > img {
     display: inline-block;
     height: var(--spacing-400);
@@ -143,14 +159,16 @@ button.filter-chip[aria-pressed="true"] {
     overflow: hidden;
     position: relative;
 }
+
 a.filter-chip--selected:after,
 button.filter-chip[aria-pressed="true"]:after {
-    background-color: var(--state-layer-neutral-on-strong);
+    background-color: var(--color-state-layer-neutral-on-strong);
     content: "";
     inset: 0;
     pointer-events: none;
     position: absolute;
 }
+
 a.filter-chip--selected:not([disabled], [aria-disabled="true"]):hover:after,
 a.filter-chip--selected[href]:hover:after,
 button.filter-chip[aria-pressed="true"]:not(
@@ -158,17 +176,22 @@ button.filter-chip[aria-pressed="true"]:not(
         [aria-disabled="true"]
     ):hover:after,
 button.filter-chip[aria-pressed="true"][href]:hover:after {
-    background-color: var(--state-layer-hover-on-strong);
+    background-color: var(--color-state-layer-hover-on-strong);
 }
-a.filter-chip--selected:not([disabled], [aria-disabled="true"]):focus:after,
-a.filter-chip--selected[href]:focus:after,
+
+a.filter-chip--selected:not(
+        [disabled],
+        [aria-disabled="true"]
+    ):focus-visible:after,
+a.filter-chip--selected[href]:focus-visible:after,
 button.filter-chip[aria-pressed="true"]:not(
         [disabled],
         [aria-disabled="true"]
-    ):focus:after,
-button.filter-chip[aria-pressed="true"][href]:focus:after {
-    background-color: var(--state-layer-focus-on-strong);
+    ):focus-visible:after,
+button.filter-chip[aria-pressed="true"][href]:focus-visible:after {
+    background-color: var(--color-state-layer-focus-on-strong);
 }
+
 a.filter-chip--selected:not([disabled], [aria-disabled="true"]):active:after,
 a.filter-chip--selected[href]:active:after,
 button.filter-chip[aria-pressed="true"]:not(
@@ -176,7 +199,7 @@ button.filter-chip[aria-pressed="true"]:not(
         [aria-disabled="true"]
     ):active:after,
 button.filter-chip[aria-pressed="true"][href]:active:after {
-    background-color: var(--state-layer-pressed-on-strong);
+    background-color: var(--color-state-layer-pressed-on-strong);
 }
 
 button.filter-chip--animated[aria-pressed="true"] {

package/dist/filter-menu/filter-menu.css

@@ -1,3 +1,7 @@
+:root {
+    --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);
+    --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);
+}
 .filter-menu,
 .filter-menu-form {
     background-color: var(
@@ -6,24 +10,20 @@
     );
     min-width: 144px;
 }
-
 span.filter-menu,
 span.filter-menu-form {
     display: inline-block;
 }
-
 .filter-menu-form__items,
 .filter-menu__items {
     margin-top: 8px;
     min-width: 100%;
     position: relative;
 }
-
 span.filter-menu-form__items,
 span.filter-menu__items[role="menu"] {
     display: inline-block;
 }
-
 span.filter-menu__checkbox,
 span.filter-menu__radio {
     display: block;
@@ -38,7 +38,6 @@ span.filter-menu__radio svg {
     height: 18px;
     width: 18px;
 }
-
 .filter-menu-form__item span.checkbox,
 .filter-menu-form__item span.radio {
     align-items: flex-start;
@@ -53,55 +52,75 @@ span.filter-menu__radio svg {
         var(--color-foreground-primary)
     );
 }
-
 span.filter-menu-form__item,
 span.filter-menu__item[role^="menuitem"] {
     display: block;
 }
-
 .filter-menu-form__item,
 .filter-menu__item[role^="menuitem"] {
-    background-color: var(
-        --filter-menu-item-background-color,
-        var(--color-background-elevated)
-    );
+    overflow: hidden;
+    padding: 8px 16px;
+    position: relative;
+}
+.filter-menu-form__item:after,
+.filter-menu__item[role^="menuitem"]:after {
+    background-color: var(--color-state-layer-neutral);
+    content: "";
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
+}
+.filter-menu-form__item:not([disabled], [aria-disabled="true"]):hover:after,
+.filter-menu-form__item[href]:hover:after,
+.filter-menu__item[role^="menuitem"]:not(
+        [disabled],
+        [aria-disabled="true"]
+    ):hover:after,
+.filter-menu__item[role^="menuitem"][href]:hover:after {
+    background-color: var(--color-state-layer-hover);
+}
+.filter-menu-form__item:not(
+        [disabled],
+        [aria-disabled="true"]
+    ):focus-visible:after,
+.filter-menu-form__item[href]:focus-visible:after,
+.filter-menu__item[role^="menuitem"]:not(
+        [disabled],
+        [aria-disabled="true"]
+    ):focus-visible:after,
+.filter-menu__item[role^="menuitem"][href]:focus-visible:after {
+    background-color: var(--color-state-layer-focus);
+}
+.filter-menu-form__item:not([disabled], [aria-disabled="true"]):active:after,
+.filter-menu-form__item[href]:active:after,
+.filter-menu__item[role^="menuitem"]:not(
+        [disabled],
+        [aria-disabled="true"]
+    ):active:after,
+.filter-menu__item[role^="menuitem"][href]:active:after {
+    background-color: var(--color-state-layer-pressed);
+}
+.filter-menu-form__item,
+.filter-menu__item[role^="menuitem"] {
+    background-color: var(--color-background-elevated);
     box-sizing: border-box;
-    color: var(
-        --filter-menu-item-foreground-color,
-        var(--color-foreground-primary)
-    );
+    color: var(--color-foreground-primary);
     display: flex;
-    font-size: var(--font-size-default);
+    font-size: var(--font-size-body);
     justify-content: space-between;
     line-height: 1.4em;
     margin: 0;
-    padding: 8px 16px;
     width: 100%;
 }
-.filter-menu-form__item:hover,
-.filter-menu__item[role^="menuitem"]:hover {
-    background-color: var(
-        --color-state-primary-hover,
-        color-state-primary-hover
-    );
-}
 .filter-menu-form__item:disabled,
-.filter-menu-form__item[aria-disabled="true"],
-.filter-menu__item[role^="menuitem"]:disabled,
-.filter-menu__item[role^="menuitem"][aria-disabled="true"] {
-    color: var(
-        --filter-menu-item-foreground-color-disabled,
-        var(--color-foreground-disabled)
-    );
-}
 .filter-menu-form__item:disabled span > svg,
+.filter-menu-form__item[aria-disabled="true"],
 .filter-menu-form__item[aria-disabled="true"] span > svg,
+.filter-menu__item[role^="menuitem"]:disabled,
 .filter-menu__item[role^="menuitem"]:disabled span > svg,
+.filter-menu__item[role^="menuitem"][aria-disabled="true"],
 .filter-menu__item[role^="menuitem"][aria-disabled="true"] span > svg {
-    color: var(
-        --filter-menu-item-icon-color-disabled,
-        var(--color-foreground-disabled)
-    );
+    color: var(--color-foreground-disabled);
 }
 .filter-menu-form__item:disabled:hover,
 .filter-menu-form__item[aria-disabled="true"]:hover,
@@ -113,7 +132,6 @@ span.filter-menu__item[role^="menuitem"] {
 .filter-menu__item[role^="menuitem"]:last-child {
     margin-bottom: 8px;
 }
-
 .filter-menu__header {
     align-items: center;
     background-color: var(--color-background-secondary);
@@ -121,19 +139,16 @@ span.filter-menu__item[role^="menuitem"] {
     gap: var(--spacing-100);
     padding: 14px var(--spacing-200);
 }
-
 .filter-menu__header svg {
     color: var(--color-foreground-secondary);
 }
-
 .filter-menu__header input {
     background-color: inherit;
     border: none;
     color: var(--color-foreground-primary);
     flex-grow: 1;
-    font-size: var(--font-size-default);
+    font-size: var(--font-size-body);
 }
-
 .filter-menu__header button.btn {
     border: none;
     min-height: var(--spacing-250);
@@ -141,58 +156,78 @@ span.filter-menu__item[role^="menuitem"] {
     padding: 0;
     width: var(--spacing-250);
 }
-
 .filter-menu__header button:focus-visible {
     outline-style: solid;
 }
-
 button.filter-menu-form__footer[type="submit"],
 button.filter-menu__footer {
-    background-color: var(
-        --filter-menu-item-background-color,
-        var(--color-background-elevated)
-    );
     border: none;
     border-top: 1px solid;
-    border-color: var(--filter-menu-border-color, var(--color-stroke-subtle));
+    border-color: var(--filter-menu-border-color, var(--color-border-subtle));
     bottom: 0;
+    overflow: hidden;
+    padding: 16px;
+    position: relative;
+}
+button.filter-menu-form__footer[type="submit"]:after,
+button.filter-menu__footer:after {
+    background-color: var(--color-state-layer-neutral);
+    content: "";
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
+}
+button.filter-menu-form__footer[type="submit"]:not(
+        [disabled],
+        [aria-disabled="true"]
+    ):hover:after,
+button.filter-menu-form__footer[type="submit"][href]:hover:after,
+button.filter-menu__footer:not([disabled], [aria-disabled="true"]):hover:after,
+button.filter-menu__footer[href]:hover:after {
+    background-color: var(--color-state-layer-hover);
+}
+button.filter-menu-form__footer[type="submit"]:not(
+        [disabled],
+        [aria-disabled="true"]
+    ):focus-visible:after,
+button.filter-menu-form__footer[type="submit"][href]:focus-visible:after,
+button.filter-menu__footer:not(
+        [disabled],
+        [aria-disabled="true"]
+    ):focus-visible:after,
+button.filter-menu__footer[href]:focus-visible:after {
+    background-color: var(--color-state-layer-focus);
+}
+button.filter-menu-form__footer[type="submit"]:not(
+        [disabled],
+        [aria-disabled="true"]
+    ):active:after,
+button.filter-menu-form__footer[type="submit"][href]:active:after,
+button.filter-menu__footer:not([disabled], [aria-disabled="true"]):active:after,
+button.filter-menu__footer[href]:active:after {
+    background-color: var(--color-state-layer-pressed);
+}
+button.filter-menu-form__footer[type="submit"],
+button.filter-menu__footer {
+    background-color: var(--color-background-elevated);
     box-sizing: border-box;
-    color: var(
-        --filter-menu-item-foreground-color,
-        var(--color-foreground-primary)
-    );
+    color: var(--color-foreground-primary);
     display: flex;
-    font-size: var(--font-size-default);
+    font-size: var(--font-size-body);
     justify-content: space-between;
     line-height: 1.4em;
     margin: 0;
-    padding: 16px;
     width: 100%;
 }
-button.filter-menu-form__footer[type="submit"]:hover,
-button.filter-menu__footer:hover {
-    background-color: var(
-        --color-state-primary-hover,
-        color-state-primary-hover
-    );
-}
 button.filter-menu-form__footer[type="submit"]:disabled,
-button.filter-menu-form__footer[type="submit"][aria-disabled="true"],
-button.filter-menu__footer:disabled,
-button.filter-menu__footer[aria-disabled="true"] {
-    color: var(
-        --filter-menu-item-foreground-color-disabled,
-        var(--color-foreground-disabled)
-    );
-}
 button.filter-menu-form__footer[type="submit"]:disabled span > svg,
+button.filter-menu-form__footer[type="submit"][aria-disabled="true"],
 button.filter-menu-form__footer[type="submit"][aria-disabled="true"] span > svg,
+button.filter-menu__footer:disabled,
 button.filter-menu__footer:disabled span > svg,
+button.filter-menu__footer[aria-disabled="true"],
 button.filter-menu__footer[aria-disabled="true"] span > svg {
-    color: var(
-        --filter-menu-item-icon-color-disabled,
-        var(--color-foreground-disabled)
-    );
+    color: var(--color-foreground-disabled);
 }
 button.filter-menu-form__footer[type="submit"]:disabled:hover,
 button.filter-menu-form__footer[type="submit"][aria-disabled="true"]:hover,
@@ -200,34 +235,25 @@ button.filter-menu__footer:disabled:hover,
 button.filter-menu__footer[aria-disabled="true"]:hover {
     background-color: inherit;
 }
-button.filter-menu-form__footer[type="submit"]:hover,
-button.filter-menu__footer:hover {
-    background-color: var(--color-state-primary-hover);
-}
-
 .filter-menu-form__text,
 .filter-menu__text {
     flex-grow: 1;
     margin-inline-start: 8px;
 }
-
 .filter-menu__item[role="menuitemcheckbox"] svg.icon--checked,
 .filter-menu__item[role="menuitemradio"] svg.icon--checked {
     display: none;
 }
-
 .filter-menu__item[role="menuitemcheckbox"] svg.icon--unchecked,
 .filter-menu__item[role="menuitemradio"] svg.icon--unchecked {
     display: block;
 }
-
 .filter-menu__item[role="menuitemcheckbox"][aria-checked="true"]
     svg.icon--unchecked,
 .filter-menu__item[role="menuitemradio"][aria-checked="true"]
     svg.icon--unchecked {
     display: none;
 }
-
 .filter-menu__item[role="menuitemcheckbox"][aria-checked="true"]
     svg.icon--checked,
 .filter-menu__item[role="menuitemradio"][aria-checked="true"]