@ebay/skin 19.12.1 → 19.14.0

package/dist/button/button.css

@@ -163,18 +163,10 @@ button.btn__cell--fixed-height svg.icon {
 
 a.fake-btn--primary,
 button.btn--primary {
-    background-color: var(
-        --btn-primary-background-color,
-        var(--color-background-accent)
-    );
-    border-color: var(--btn-primary-border-color, var(--color-stroke-accent));
-    color: var(
-        --btn-primary-foreground-color,
-        var(--color-foreground-on-accent)
-    );
+    background-color: var(--color-background-accent);
+    border-color: var(--color-stroke-accent);
+    color: var(--color-foreground-on-accent);
     font-weight: 700;
-    overflow: hidden;
-    position: relative;
     transition: all var(--motion-duration-short-3)
         var(--motion-easing-quick-enter);
 }
@@ -182,6 +174,11 @@ a.fake-btn--primary:active,
 button.btn--primary:active {
     transform: scale(0.97);
 }
+a.fake-btn--primary,
+button.btn--primary {
+    overflow: hidden;
+    position: relative;
+}
 a.fake-btn--primary:after,
 button.btn--primary:after {
     background-color: var(--state-layer-neutral);
@@ -214,26 +211,14 @@ a.fake-btn--primary {
 }
 
 a.fake-btn--primary:visited {
-    color: var(
-        --btn-primary-foreground-color,
-        var(--color-foreground-on-accent)
-    );
+    color: var(--color-foreground-on-accent);
 }
 
 a.fake-btn--primary.fake-btn--destructive,
 button.btn--primary.btn--destructive {
-    background-color: var(
-        --btn-primary-destructive-background-color,
-        var(--color-background-attention)
-    );
-    border-color: var(
-        --btn-primary-destructive-border-color,
-        var(--color-stroke-attention)
-    );
-    color: var(
-        --btn-primary-destructive-foreground-color,
-        var(--color-foreground-on-attention)
-    );
+    background-color: var(--color-background-attention);
+    border-color: var(--color-stroke-attention);
+    color: var(--color-foreground-on-attention);
     font-weight: 700;
     overflow: hidden;
     position: relative;
@@ -285,14 +270,8 @@ button.btn--primary.btn--destructive[href]:active:after {
 
 button.btn--primary.btn--destructive[aria-disabled="true"],
 button.btn--primary.btn--destructive[disabled] {
-    background-color: var(
-        --btn-primary-destructive-disabled-background,
-        var(--color-background-disabled)
-    );
-    border-color: var(
-        --btn-primary-destructive-disabled-border,
-        var(--color-stroke-disabled)
-    );
+    background-color: var(--color-background-disabled);
+    border-color: var(--color-stroke-disabled);
 }
 
 button.btn .progress-spinner {
@@ -373,13 +352,8 @@ a.fake-btn--primary[aria-disabled="true"] {
 a.fake-btn--secondary,
 button.btn--secondary {
     background-color: var(--btn-secondary-background-color, transparent);
-    border-color: var(--btn-secondary-border-color, var(--color-stroke-accent));
-    color: var(
-        --btn-secondary-foreground-color,
-        var(--color-foreground-accent)
-    );
-    overflow: hidden;
-    position: relative;
+    border-color: var(--color-stroke-accent);
+    color: var(--color-foreground-accent);
     transition: all var(--motion-duration-short-3)
         var(--motion-easing-quick-enter);
 }
@@ -387,6 +361,11 @@ a.fake-btn--secondary:active,
 button.btn--secondary:active {
     transform: scale(0.97);
 }
+a.fake-btn--secondary,
+button.btn--secondary {
+    overflow: hidden;
+    position: relative;
+}
 a.fake-btn--secondary:after,
 button.btn--secondary:after {
     background-color: var(--state-layer-neutral);
@@ -480,8 +459,6 @@ a.fake-btn--secondary[aria-disabled="true"] {
 a.fake-btn--tertiary,
 button.btn--tertiary {
     border-color: var(--btn-tertiary-border-color, var(--color-stroke-default));
-    overflow: hidden;
-    position: relative;
     transition: all var(--motion-duration-short-3)
         var(--motion-easing-quick-enter);
 }
@@ -489,6 +466,11 @@ a.fake-btn--tertiary:active,
 button.btn--tertiary:active {
     transform: scale(0.97);
 }
+a.fake-btn--tertiary,
+button.btn--tertiary {
+    overflow: hidden;
+    position: relative;
+}
 a.fake-btn--tertiary:after,
 button.btn--tertiary:after {
     background-color: var(--state-layer-neutral);

package/dist/combobox/combobox.css

@@ -24,14 +24,8 @@ span.combobox {
 }
 
 .combobox__listbox {
-    background-color: var(
-        --combobox-listbox-background-color,
-        var(--color-background-elevated)
-    );
-    border-radius: var(
-        --combobox-listbox-border-radius,
-        var(--border-radius-50)
-    );
+    background-color: var(--color-background-elevated);
+    border-radius: var(--border-radius-50);
     box-shadow: var(--bubble-shadow);
     box-sizing: border-box;
     display: none;
@@ -70,17 +64,11 @@ span.combobox {
 
 .combobox__option[role^="option"] {
     background-color: initial;
-    border-color: var(
-        --listbox-option-border-color,
-        var(--color-background-primary)
-    );
+    border-color: var(--color-background-primary);
     border-style: solid;
     border-width: 1px;
     box-sizing: border-box;
-    color: var(
-        --listbox-option-foreground-color,
-        var(--color-foreground-primary)
-    );
+    color: var(--color-foreground-primary);
     cursor: default;
     display: inline-grid;
     font-family: inherit;
@@ -97,10 +85,7 @@ span.combobox {
     display: none;
 }
 .combobox__option[role^="option"]:hover {
-    color: var(
-        --listbox-option-hover-foreground-color,
-        var(--color-foreground-primary)
-    );
+    color: var(--color-foreground-primary);
 }
 .combobox__option[role^="option"]:active {
     font-weight: 700;

package/dist/confirm-dialog/confirm-dialog.css

@@ -4,13 +4,12 @@
     --dialog-lightbox-max-width: 616px;
 }
 .confirm-dialog[role="dialog"] {
+    align-items: flex-start;
     background-color: var(--dialog-scrim-color-show);
     bottom: 0;
+    justify-content: center;
     left: 0;
     -webkit-overflow-scrolling: touch;
-    align-items: flex-start;
-    justify-content: center;
-    overflow-y: auto;
     position: fixed;
     right: 0;
     top: 0;

package/dist/drawer-dialog/drawer-dialog.css

@@ -6,13 +6,12 @@
     --dialog-lightbox-max-width: 616px;
 }
 .drawer-dialog[role="dialog"] {
+    align-items: flex-end;
     background-color: var(--dialog-scrim-color-show);
     bottom: 0;
     left: 0;
-    -webkit-overflow-scrolling: touch;
-    align-items: flex-end;
-    overflow-y: auto;
     overflow: hidden;
+    -webkit-overflow-scrolling: touch;
     position: fixed;
     right: 0;
     top: 0;

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

@@ -6,21 +6,11 @@ div.filter-group {
 a.filter-link,
 button.filter-button {
     align-items: center;
-    background-color: var(
-        --filter-button-background-color,
-        var(--color-background-secondary)
-    );
+    background-color: var(--color-background-secondary);
     border: 1px solid transparent;
-    border-color: var(
-        --filter-button-selected-border-color,
-        var(--color-stroke-default)
-    );
     border-radius: 16px;
     box-sizing: border-box;
-    color: var(
-        --filter-button-foreground-color,
-        var(--color-foreground-primary)
-    );
+    color: var(--color-foreground-primary);
     display: inline-flex;
     flex: 0 1 auto;
     flex-direction: column;

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

@@ -61,6 +61,37 @@ 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);
+    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);
+}
+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"]):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);
+}
 
 a.filter-chip--expressive,
 button.filter-chip--expressive {
@@ -70,8 +101,8 @@ button.filter-chip--expressive {
 
 .filter-chip__media {
     align-items: center;
-    border-radius: 8px;
     border-radius: var(--spacing-400);
+    border-radius: 8px;
     display: flex;
     justify-content: center;
     margin-inline-start: -8px;
@@ -109,6 +140,43 @@ button.filter-chip[aria-pressed="true"] {
         var(--color-background-strong) 100%
     );
     color: var(--color-foreground-on-strong);
+    overflow: hidden;
+    position: relative;
+}
+a.filter-chip--selected:after,
+button.filter-chip[aria-pressed="true"]:after {
+    background-color: var(--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(
+        [disabled],
+        [aria-disabled="true"]
+    ):hover:after,
+button.filter-chip[aria-pressed="true"][href]:hover:after {
+    background-color: var(--state-layer-hover-on-strong);
+}
+a.filter-chip--selected:not([disabled], [aria-disabled="true"]):focus:after,
+a.filter-chip--selected[href]:focus: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);
+}
+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(
+        [disabled],
+        [aria-disabled="true"]
+    ):active:after,
+button.filter-chip[aria-pressed="true"][href]:active:after {
+    background-color: var(--state-layer-pressed-on-strong);
 }
 
 button.filter-chip--animated[aria-pressed="true"] {

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

@@ -16,21 +16,11 @@ span.filter-menu-button + span.filter-menu-button {
 
 button.filter-menu-button__button {
     align-items: center;
-    background-color: var(
-        --filter-button-background-color,
-        var(--color-background-secondary)
-    );
+    background-color: var(--color-background-secondary);
     border: 1px solid transparent;
-    border-color: var(
-        --filter-button-selected-border-color,
-        var(--color-stroke-default)
-    );
     border-radius: 16px;
     box-sizing: border-box;
-    color: var(
-        --filter-button-foreground-color,
-        var(--color-foreground-primary)
-    );
+    color: var(--color-foreground-primary);
     display: inline-flex;
     flex: 0 1 auto;
     flex-direction: column;
@@ -52,10 +42,7 @@ button.filter-menu-button__button + button.filter-menu-button__button {
 button.filter-menu-button__button:active,
 button.filter-menu-button__button:focus,
 button.filter-menu-button__button:hover {
-    background-color: var(
-        --filter-button-background-color,
-        var(--color-state-secondary-hover)
-    );
+    background-color: var(--color-state-secondary-hover);
 }
 
 .filter-menu-button__button-cell {
@@ -243,8 +230,6 @@ span.filter-menu-button__radio svg.icon--checked {
     justify-content: space-between;
     line-height: 1.4em;
     margin: 0;
-    outline-offset: -4px;
-    padding: 8px 16px;
     width: 100%;
 }
 .filter-menu-button__item:hover {
@@ -271,6 +256,10 @@ span.filter-menu-button__radio svg.icon--checked {
 .filter-menu-button__item[aria-disabled="true"]:hover {
     background-color: inherit;
 }
+.filter-menu-button__item {
+    outline-offset: -4px;
+    padding: 8px 16px;
+}
 .filter-menu-button__item:hover {
     background-color: var(--color-state-primary-hover);
 }
@@ -319,8 +308,9 @@ button.filter-menu-button__footer {
         var(--color-background-elevated)
     );
     border: none;
-    border-top: 1px solid;
-    border-color: var(--filter-menu-border-color, var(--color-stroke-subtle));
+    border-color: var(--color-stroke-subtle);
+    border-top-style: solid;
+    border-top-width: 1px;
     bottom: 0;
     box-sizing: border-box;
     color: var(

package/dist/fullscreen-dialog/fullscreen-dialog.css

@@ -10,7 +10,6 @@
     bottom: 0;
     left: 0;
     -webkit-overflow-scrolling: touch;
-    overflow-y: auto;
     position: fixed;
     right: 0;
     top: 0;

package/dist/icon-button/icon-button.css

@@ -8,13 +8,12 @@ a.icon-link > svg {
 
 a.icon-link,
 button.icon-btn {
-    background-color: var(
-        --icon-button-background-color,
-        var(--color-background-secondary)
-    );
+    align-items: center;
+    background-color: var(--color-background-secondary);
     border: 2px solid transparent;
     border-radius: 50px;
     box-sizing: border-box;
+    display: inline-flex;
     font-family: inherit;
     height: 40px;
     justify-content: center;
@@ -25,10 +24,7 @@ button.icon-btn {
 }
 a.icon-link > svg,
 button.icon-btn > svg {
-    fill: var(
-        --icon-button-icon-foreground-color,
-        var(--color-foreground-primary)
-    );
+    fill: var(--color-foreground-primary);
     max-width: 75%;
     position: relative;
 }
@@ -49,31 +45,19 @@ button.icon-btn:not(:focus-visible) {
 
 a.icon-link.icon-link--primary,
 button.icon-btn.icon-btn--primary {
-    background-color: var(
-        --btn-primary-background-color,
-        var(--color-background-accent)
-    );
-    border-color: var(--btn-primary-border-color, var(--color-stroke-accent));
-    color: var(
-        --btn-primary-foreground-color,
-        var(--color-foreground-on-accent)
-    );
+    background-color: var(--color-background-accent);
+    border-color: var(--color-stroke-accent);
+    color: var(--color-foreground-on-accent);
 }
 
 a.icon-link.icon-link--primary > svg,
 button.icon-btn.icon-btn--primary > svg {
-    fill: var(
-        --icon-button-icon-foreground-color,
-        var(--color-foreground-on-accent)
-    );
+    fill: var(--color-foreground-on-accent);
 }
 
 a.icon-link.icon-link--secondary > svg,
 button.icon-btn.icon-btn--secondary > svg {
-    fill: var(
-        --icon-button-icon-foreground-color,
-        var(--color-foreground-accent)
-    );
+    fill: var(--color-foreground-accent);
 }
 
 a.icon-link.icon-link--small .progress-spinner,
@@ -110,10 +94,7 @@ button.icon-btn--transparent:hover {
 }
 
 a.icon-link:visited > svg {
-    fill: var(
-        --icon-button-icon-foreground-color,
-        var(--color-foreground-primary)
-    );
+    fill: var(--color-foreground-primary);
 }
 
 a:not([href]).icon-link > svg,
@@ -136,17 +117,11 @@ button[disabled].icon-btn:hover > svg {
 
 a.icon-link:visited:focus > svg,
 a.icon-link:visited:hover > svg {
-    fill: var(
-        --icon-button-icon-hover-foreground-color,
-        var(--color-foreground-primary)
-    );
+    fill: var(--color-foreground-primary);
 }
 
 a.icon-link.icon-link--primary:visited > svg {
-    fill: var(
-        --icon-button-icon-foreground-color,
-        var(--color-foreground-on-accent)
-    );
+    fill: var(--color-foreground-on-accent);
 }
 
 a.icon-link--badged,
@@ -206,24 +181,15 @@ a:not([href]).icon-link.icon-link--primary,
 a[aria-disabled="true"].icon-link.icon-link--primary,
 button[aria-disabled="true"].icon-btn.icon-btn--primary,
 button[disabled].icon-btn.icon-btn--primary {
-    background-color: var(
-        --icon-button-disabled-background-color,
-        var(--color-background-disabled)
-    );
-    border-color: var(
-        --btn-primary-disabled-border-color,
-        var(--color-stroke-disabled)
-    );
+    background-color: var(--color-background-disabled);
+    border-color: var(--color-stroke-disabled);
 }
 
 a:not([href]).icon-link.icon-link--primary > svg,
 a[aria-disabled="true"].icon-link.icon-link--primary > svg,
 button[aria-disabled="true"].icon-btn.icon-btn--primary > svg,
 button[disabled].icon-btn.icon-btn--primary > svg {
-    fill: var(
-        --icon-button-icon-foreground-color,
-        var(--color-foreground-on-accent)
-    );
+    fill: var(--color-foreground-on-accent);
 }
 
 a.icon-link.icon-link--primary .progress-spinner,
@@ -235,11 +201,8 @@ button.icon-btn.icon-btn--primary .progress-spinner {
 a.icon-link.icon-link--secondary,
 button.icon-btn.icon-btn--secondary {
     background-color: initial;
-    border-color: var(--btn-secondary-border-color, var(--color-stroke-accent));
-    color: var(
-        --btn-secondary-foreground-color,
-        var(--color-foreground-accent)
-    );
+    border-color: var(--color-stroke-accent);
+    color: var(--color-foreground-accent);
 }
 
 a.icon-link.icon-link--primary:not([disabled], [aria-disabled="true"]):focus,
@@ -271,20 +234,14 @@ a:not([href]).icon-link.icon-link--secondary,
 a[aria-disabled="true"].icon-link.icon-link--secondary,
 button[aria-disabled="true"].icon-btn.icon-btn--secondary,
 button[disabled].icon-btn.icon-btn--secondary {
-    border-color: var(
-        --btn-secondary-disabled-border-color,
-        var(--color-stroke-disabled)
-    );
+    border-color: var(--color-stroke-disabled);
 }
 
 a:not([href]).icon-link.icon-blinktn--secondary > svg,
 a[aria-disabled="true"].icon-link.icon-link--secondary > svg,
 button[aria-disabled="true"].icon-btn.icon-btn--secondary > svg,
 button[disabled].icon-btn.icon-btn--secondary > svg {
-    fill: var(
-        --icon-button-icon-foreground-color,
-        var(--color-foreground-disabled)
-    );
+    fill: var(--color-foreground-disabled);
 }
 
 a.icon-link.icon-link--secondary:not([disabled], [aria-disabled="true"]):focus,
@@ -310,18 +267,15 @@ button.icon-btn.icon-btn--secondary:not(
 a.icon-link.icon-link--tertiary,
 button.icon-btn.icon-btn--tertiary {
     background-color: initial;
-    border-color: var(--btn-primary-border-color, var(--color-stroke-default));
-    color: var(--btn-primary-foreground-color, var(--color-foreground-accent));
+    border-color: var(--color-stroke-default);
+    color: var(--color-foreground-accent);
 }
 
 a:not([href]).icon-link.icon-link--tertiary,
 a[aria-disabled="true"].icon-link.icon-link--tertiary,
 button[aria-disabled="true"].icon-btn.icon-btn--tertiary,
 button[disabled].icon-btn.icon-btn--tertiary {
-    border-color: var(
-        --btn-tertiary-disabled-border-color,
-        var(--color-stroke-disabled)
-    );
+    border-color: var(--color-stroke-disabled);
 }
 
 a.icon-link.icon-link--tertiary:not([disabled], [aria-disabled="true"]):focus,

package/dist/lightbox-dialog/lightbox-dialog.css

@@ -7,13 +7,12 @@
 }
 
 .lightbox-dialog[role="dialog"] {
+    align-items: flex-start;
     background-color: var(--dialog-scrim-color-show);
     bottom: 0;
+    justify-content: center;
     left: 0;
     -webkit-overflow-scrolling: touch;
-    align-items: flex-start;
-    justify-content: center;
-    overflow-y: auto;
     position: fixed;
     right: 0;
     top: 0;

package/dist/listbox/listbox.css

@@ -43,17 +43,11 @@ div.listbox__options--reverse[role="listbox"] {
 
 div.listbox__option[role="option"] {
     background-color: initial;
-    border-color: var(
-        --listbox-option-border-color,
-        var(--color-background-primary)
-    );
+    border-color: var(--color-background-primary);
     border-style: solid;
     border-width: 1px;
     box-sizing: border-box;
-    color: var(
-        --listbox-option-foreground-color,
-        var(--color-foreground-primary)
-    );
+    color: var(--color-foreground-primary);
     display: inline-grid;
     font-family: inherit;
     grid-template-columns: auto auto;
@@ -72,10 +66,7 @@ div.listbox__option[role="option"][hidden] {
 }
 div.listbox__option[role="option"]:hover {
     background-color: var(--color-state-primary-hover);
-    color: var(
-        --listbox-option-hover-foreground-color,
-        var(--color-foreground-primary)
-    );
+    color: var(--color-foreground-primary);
 }
 div.listbox__option[role="option"]:active {
     font-weight: 700;
@@ -99,12 +90,12 @@ span.listbox__value {
 
 div.listbox__option svg.icon {
     align-self: center;
+    margin-inline-start: var(--spacing-100);
     fill: currentColor;
     margin: 0 auto;
     opacity: 0;
     stroke: currentColor;
     stroke-width: 0;
-    margin-inline-start: var(--spacing-100);
 }
 
 div.listbox__options[role="listbox"]:focus