@ebay/skin 19.11.0 → 19.12.0

package/dist/button/button.css

@@ -1,5 +1,7 @@
 a.fake-btn,
 button.btn {
+    align-content: center;
+    align-items: center;
     background-color: initial;
     border: 1px solid;
     border-radius: var(--btn-border-radius, 20px);
@@ -11,7 +13,7 @@ button.btn {
     margin: 0;
     min-height: 40px;
     min-width: 88px;
-    padding: 9.5px 20px;
+    padding: 0 20px;
     text-align: center;
     text-decoration: none;
     vertical-align: bottom;
@@ -171,6 +173,8 @@ button.btn--primary {
         var(--color-foreground-on-accent)
     );
     font-weight: 700;
+    overflow: hidden;
+    position: relative;
     transition: all var(--motion-duration-short-3)
         var(--motion-easing-quick-enter);
 }
@@ -178,6 +182,32 @@ a.fake-btn--primary:active,
 button.btn--primary:active {
     transform: scale(0.97);
 }
+a.fake-btn--primary:after,
+button.btn--primary:after {
+    background-color: var(--state-layer-neutral);
+    content: "";
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
+}
+a.fake-btn--primary:not([disabled], [aria-disabled="true"]):hover:after,
+a.fake-btn--primary[href]:hover:after,
+button.btn--primary:not([disabled], [aria-disabled="true"]):hover:after,
+button.btn--primary[href]:hover:after {
+    background-color: var(--state-layer-hover);
+}
+a.fake-btn--primary:not([disabled], [aria-disabled="true"]):focus:after,
+a.fake-btn--primary[href]:focus:after,
+button.btn--primary:not([disabled], [aria-disabled="true"]):focus:after,
+button.btn--primary[href]:focus:after {
+    background-color: var(--state-layer-focus);
+}
+a.fake-btn--primary:not([disabled], [aria-disabled="true"]):active:after,
+a.fake-btn--primary[href]:active:after,
+button.btn--primary:not([disabled], [aria-disabled="true"]):active:after,
+button.btn--primary[href]:active:after {
+    background-color: var(--state-layer-pressed);
+}
 
 a.fake-btn--primary {
     outline-color: var(--color-foreground-primary);
@@ -190,18 +220,6 @@ a.fake-btn--primary:visited {
     );
 }
 
-a.fake-btn--primary[href]:focus,
-a.fake-btn--primary[href]:hover,
-button.btn--primary:not([disabled], [aria-disabled="true"]):focus,
-button.btn--primary:not([disabled], [aria-disabled="true"]):hover {
-    background-blend-mode: multiply;
-    filter: brightness(96%);
-}
-a.fake-btn--primary[href]:active,
-button.btn--primary:not([disabled], [aria-disabled="true"]):active {
-    filter: brightness(92%);
-}
-
 a.fake-btn--primary.fake-btn--destructive,
 button.btn--primary.btn--destructive {
     background-color: var(
@@ -217,38 +235,64 @@ button.btn--primary.btn--destructive {
         var(--color-foreground-on-attention)
     );
     font-weight: 700;
+    overflow: hidden;
+    position: relative;
 }
-
-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)
-    );
+a.fake-btn--primary.fake-btn--destructive:after,
+button.btn--primary.btn--destructive:after {
+    background-color: var(--state-layer-neutral);
+    content: "";
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
 }
-
-a.fake-btn--primary.fake-btn--destructive[href]:focus,
-a.fake-btn--primary.fake-btn--destructive[href]:hover,
+a.fake-btn--primary.fake-btn--destructive:not(
+        [disabled],
+        [aria-disabled="true"]
+    ):hover:after,
+a.fake-btn--primary.fake-btn--destructive[href]:hover:after,
 button.btn--primary.btn--destructive:not(
         [disabled],
         [aria-disabled="true"]
-    ):focus,
+    ):hover:after,
+button.btn--primary.btn--destructive[href]:hover:after {
+    background-color: var(--state-layer-hover);
+}
+a.fake-btn--primary.fake-btn--destructive:not(
+        [disabled],
+        [aria-disabled="true"]
+    ):focus:after,
+a.fake-btn--primary.fake-btn--destructive[href]:focus:after,
 button.btn--primary.btn--destructive:not(
         [disabled],
         [aria-disabled="true"]
-    ):hover {
-    background-color: var(--color-state-attention-hover);
+    ):focus:after,
+button.btn--primary.btn--destructive[href]:focus:after {
+    background-color: var(--state-layer-focus);
 }
-a.fake-btn--primary.fake-btn--destructive[href]:active,
+a.fake-btn--primary.fake-btn--destructive:not(
+        [disabled],
+        [aria-disabled="true"]
+    ):active:after,
+a.fake-btn--primary.fake-btn--destructive[href]:active:after,
 button.btn--primary.btn--destructive:not(
         [disabled],
         [aria-disabled="true"]
-    ):active {
-    background-color: var(--color-state-attention-active);
+    ):active:after,
+button.btn--primary.btn--destructive[href]:active:after {
+    background-color: var(--state-layer-pressed);
+}
+
+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)
+    );
 }
 
 button.btn .progress-spinner {
@@ -279,12 +323,12 @@ button.btn[aria-expanded="true"] svg.icon--12 {
 
 a.fake-btn--large svg.icon,
 button.btn--large svg.icon {
-    max-height: 22px;
+    max-height: 48px;
 }
 
 a.fake-btn--small svg.icon,
 button.btn--small svg.icon {
-    max-height: 20px;
+    max-height: 32px;
 }
 
 button.btn--primary[aria-disabled="true"],
@@ -334,6 +378,8 @@ button.btn--secondary {
         --btn-secondary-foreground-color,
         var(--color-foreground-accent)
     );
+    overflow: hidden;
+    position: relative;
     transition: all var(--motion-duration-short-3)
         var(--motion-easing-quick-enter);
 }
@@ -341,6 +387,32 @@ a.fake-btn--secondary:active,
 button.btn--secondary:active {
     transform: scale(0.97);
 }
+a.fake-btn--secondary:after,
+button.btn--secondary:after {
+    background-color: var(--state-layer-neutral);
+    content: "";
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
+}
+a.fake-btn--secondary:not([disabled], [aria-disabled="true"]):hover:after,
+a.fake-btn--secondary[href]:hover:after,
+button.btn--secondary:not([disabled], [aria-disabled="true"]):hover:after,
+button.btn--secondary[href]:hover:after {
+    background-color: var(--state-layer-hover);
+}
+a.fake-btn--secondary:not([disabled], [aria-disabled="true"]):focus:after,
+a.fake-btn--secondary[href]:focus:after,
+button.btn--secondary:not([disabled], [aria-disabled="true"]):focus:after,
+button.btn--secondary[href]:focus:after {
+    background-color: var(--state-layer-focus);
+}
+a.fake-btn--secondary:not([disabled], [aria-disabled="true"]):active:after,
+a.fake-btn--secondary[href]:active:after,
+button.btn--secondary:not([disabled], [aria-disabled="true"]):active:after,
+button.btn--secondary[href]:active:after {
+    background-color: var(--state-layer-pressed);
+}
 
 a.fake-btn--secondary:visited {
     color: var(
@@ -349,21 +421,6 @@ a.fake-btn--secondary:visited {
     );
 }
 
-a.fake-btn--secondary[href]:active,
-button.btn--secondary:not([disabled], [aria-disabled="true"]):active {
-    background-color: var(--color-state-primary-active);
-    border-color: var(--color-state-active-foreground-on-secondary);
-    color: var(--color-state-active-foreground-on-secondary);
-}
-a.fake-btn--secondary[href]:focus,
-a.fake-btn--secondary[href]:hover,
-button.btn--secondary:not([disabled], [aria-disabled="true"]):focus,
-button.btn--secondary:not([disabled], [aria-disabled="true"]):hover {
-    background-color: var(--color-state-primary-hover);
-    border-color: var(--color-state-hover-foreground-on-secondary);
-    color: var(--color-state-hover-foreground-on-secondary);
-}
-
 a.fake-btn--secondary.fake-btn--destructive,
 button.btn--secondary.btn--destructive {
     background-color: var(
@@ -380,32 +437,6 @@ button.btn--secondary.btn--destructive {
     );
 }
 
-a.fake-btn--secondary.fake-btn--destructive[href]:focus,
-a.fake-btn--secondary.fake-btn--destructive[href]:hover,
-button.btn--secondary.btn--destructive:not(
-        [disabled],
-        [aria-disabled="true"]
-    ):focus,
-button.btn--secondary.btn--destructive:not(
-        [disabled],
-        [aria-disabled="true"]
-    ):hover {
-    background-color: var(--color-state-primary-hover);
-    border-color: var(--color-state-hover-foreground-on-secondary-desctructive);
-    color: var(--color-state-hover-foreground-on-secondary-desctructive);
-}
-a.fake-btn--secondary.fake-btn--destructive[href]:active,
-button.btn--secondary.btn--destructive:not(
-        [disabled],
-        [aria-disabled="true"]
-    ):active {
-    background-color: var(--color-state-primary-active);
-    border-color: var(
-        --color-state-active-foreground-on-secondary-desctructive
-    );
-    color: var(--color-state-active-foreground-on-secondary-desctructive);
-}
-
 button.btn--secondary.btn--destructive .progress-spinner {
     --color-spinner-icon-background: #f39fb0;
     --color-spinner-icon-foreground: #e0103a;
@@ -449,6 +480,8 @@ 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);
 }
@@ -456,16 +489,31 @@ a.fake-btn--tertiary:active,
 button.btn--tertiary:active {
     transform: scale(0.97);
 }
-
-a.fake-btn--tertiary[href]:focus,
-a.fake-btn--tertiary[href]:hover,
-button.btn--tertiary:not([disabled], [aria-disabled="true"]):focus,
-button.btn--tertiary:not([disabled], [aria-disabled="true"]):hover {
-    background-color: var(--color-state-secondary-hover);
+a.fake-btn--tertiary:after,
+button.btn--tertiary:after {
+    background-color: var(--state-layer-neutral);
+    content: "";
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
+}
+a.fake-btn--tertiary:not([disabled], [aria-disabled="true"]):hover:after,
+a.fake-btn--tertiary[href]:hover:after,
+button.btn--tertiary:not([disabled], [aria-disabled="true"]):hover:after,
+button.btn--tertiary[href]:hover:after {
+    background-color: var(--state-layer-hover);
+}
+a.fake-btn--tertiary:not([disabled], [aria-disabled="true"]):focus:after,
+a.fake-btn--tertiary[href]:focus:after,
+button.btn--tertiary:not([disabled], [aria-disabled="true"]):focus:after,
+button.btn--tertiary[href]:focus:after {
+    background-color: var(--state-layer-focus);
 }
-a.fake-btn--tertiary[href]:active,
-button.btn--tertiary:not([disabled], [aria-disabled="true"]):active {
-    background-color: var(--color-state-secondary-active);
+a.fake-btn--tertiary:not([disabled], [aria-disabled="true"]):active:after,
+a.fake-btn--tertiary[href]:active:after,
+button.btn--tertiary:not([disabled], [aria-disabled="true"]):active:after,
+button.btn--tertiary[href]:active:after {
+    background-color: var(--state-layer-pressed);
 }
 
 a.fake-btn--tertiary:not([href]),
@@ -492,26 +540,6 @@ button.btn--tertiary.btn--destructive {
     );
 }
 
-a.fake-btn--tertiary.fake-btn--destructive[href]:focus,
-a.fake-btn--tertiary.fake-btn--destructive[href]:hover,
-button.btn--tertiary.btn--destructive:not(
-        [disabled],
-        [aria-disabled="true"]
-    ):focus,
-button.btn--tertiary.btn--destructive:not(
-        [disabled],
-        [aria-disabled="true"]
-    ):hover {
-    background-color: var(--color-state-secondary-hover);
-}
-a.fake-btn--tertiary.fake-btn--destructive[href]:active,
-button.btn--tertiary.btn--destructive:not(
-        [disabled],
-        [aria-disabled="true"]
-    ):active {
-    background-color: var(--color-state-secondary-active);
-}
-
 button.btn--tertiary.btn--destructive[aria-disabled="true"],
 button.btn--tertiary.btn--destructive[disabled] {
     color: var(
@@ -530,7 +558,7 @@ button.btn--large {
     border-radius: var(--btn-border-radius, 24px);
     font-size: var(--font-size-medium);
     min-height: 48px;
-    padding: 13px 20px;
+    padding: 0 20px;
 }
 
 a.fake-btn--small,
@@ -538,7 +566,7 @@ button.btn--small {
     border-radius: var(--btn-border-radius, 16px);
     font-size: var(--font-size-default);
     min-height: 32px;
-    padding: 6px 16px;
+    padding: 0 16px;
 }
 
 a.fake-btn--form,
@@ -546,25 +574,42 @@ button.btn--form {
     border-color: inherit;
     border-radius: var(--expand-btn-border-radius, var(--border-radius-50));
     max-width: 100%;
+    overflow: hidden;
+    position: relative;
 }
-
-a.fake-btn--form:not([href]):focus,
-a.fake-btn--form:not([href]):hover,
-button.btn--form:not([disabled], [aria-disabled="true"]):focus,
-button.btn--form:not([disabled], [aria-disabled="true"]):hover {
-    background-color: var(--color-state-primary-hover);
+a.fake-btn--form:after,
+button.btn--form:after {
+    background-color: var(--state-layer-neutral);
+    content: "";
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
+}
+a.fake-btn--form:not([disabled], [aria-disabled="true"]):hover:after,
+a.fake-btn--form[href]:hover:after,
+button.btn--form:not([disabled], [aria-disabled="true"]):hover:after,
+button.btn--form[href]:hover:after {
+    background-color: var(--state-layer-hover);
+}
+a.fake-btn--form:not([disabled], [aria-disabled="true"]):focus:after,
+a.fake-btn--form[href]:focus:after,
+button.btn--form:not([disabled], [aria-disabled="true"]):focus:after,
+button.btn--form[href]:focus:after {
+    background-color: var(--state-layer-focus);
 }
-a.fake-btn--form:not([href]):active,
-button.btn--form:not([disabled], [aria-disabled="true"]):active {
-    background-color: var(--color-state-primary-active);
+a.fake-btn--form:not([disabled], [aria-disabled="true"]):active:after,
+a.fake-btn--form[href]:active:after,
+button.btn--form:not([disabled], [aria-disabled="true"]):active:after,
+button.btn--form[href]:active:after {
+    background-color: var(--state-layer-pressed);
 }
 
 button.btn--form.btn--large {
-    padding: 13px 20px;
+    padding: 0 20px;
 }
 
 button.btn--form.btn--small {
-    padding: 6px 16px;
+    padding: 0 16px;
 }
 a.fake-btn--transparent,
 a.fake-btn--transparent:focus,
@@ -575,16 +620,10 @@ button.btn--transparent:hover {
     background-color: initial;
 }
 
-a.fake-btn--fixed-height,
-button.btn--fixed-height {
-    padding-top: calc(21.5px - 0.75em);
-}
-
 a.fake-btn--large-fixed-height,
 button.btn--large-fixed-height {
     height: 48px;
     min-height: 48px;
-    padding-top: calc(27px - 0.75em);
 }
 
 a.fake-btn--truncated,
@@ -602,7 +641,7 @@ button.btn--large-truncated {
     font-size: var(--font-size-medium);
     height: 48px;
     min-height: 48px;
-    padding: 13px 20px;
+    padding: 0 20px;
 }
 a.fake-btn--large-truncated,
 a.fake-btn--large-truncated span,
@@ -627,11 +666,6 @@ button.btn--split-end {
     padding-left: 8px;
     padding-right: 8px;
 }
-
-a.fake-btn.fake-btn--tertiary.fake-btn--split-end,
-button.btn.btn--tertiary.btn--split-end {
-    margin-left: -2px;
-}
 a.fake-btn.fake-btn--primary.fake-btn--split-end,
 a.fake-btn.fake-btn--primary.fake-btn--split-end:focus,
 a.fake-btn.fake-btn--primary.fake-btn--split-end:hover,

package/dist/cta-button/cta-button.css

@@ -1,4 +1,6 @@
 a.cta-btn {
+    align-content: center;
+    align-items: center;
     background-color: var(
         --cta-btn-background-color,
         var(--color-background-primary)
@@ -12,7 +14,8 @@ a.cta-btn {
     font-size: var(--font-size-default);
     margin: 0;
     max-width: 100%;
-    padding: 9.5px 20px;
+    min-height: 40px;
+    padding: 0 20px;
     text-align: center;
     text-decoration: none;
     vertical-align: bottom;

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

@@ -1,4 +1,5 @@
 /*! DEPRECATED COMPONENT. Will be removed next major version */
+/*! DEPRECATED COMPONENT. Will be removed next major version */
 :root {
     --dialog-scrim-color-hide: rgb(17 24 32 / 0);
     --dialog-scrim-color-show: rgb(17 24 32 / 0.7);

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

@@ -1,4 +1,5 @@
 /*! DEPRECATED COMPONENT. Will be removed next major version */
+/*! DEPRECATED COMPONENT. Will be removed next major version */
 :root {
     --dialog-scrim-color-hide: rgb(17 24 32 / 0);
     --dialog-scrim-color-show: rgb(17 24 32 / 0.7);

package/dist/mixins/_animation-mixins.scss

@@ -1,41 +1,2 @@
-@mixin chevron-keyframes() {
-    @keyframes chevron-bounce-open {
-        0% {
-            transform: translateY(0);
-        }
-        50% {
-            transform: translateY(-7px);
-        }
-        100% {
-            transform: translateY(0);
-        }
-    }
-
-    @keyframes chevron-bounce-close {
-        0% {
-            transform: translateY(0);
-        }
-        50% {
-            transform: translateY(7px);
-        }
-        100% {
-            transform: translateY(0);
-        }
-    }
-}
-
-// This is used for when the animations are loading so that there are no animations happening on page load.
-@mixin loading() {
-    animation: none;
-    transition: none;
-}
-
-@mixin chevron-open() {
-    animation: chevron-bounce-open var(--motion-duration-medium-1)
-        var(--motion-easing-standard) var(--motion-duration-short-1);
-}
-
-@mixin chevron-close() {
-    animation: chevron-bounce-close var(--motion-duration-medium-1)
-        var(--motion-easing-standard);
-}
+// Deprecated, use animation instead
+@forward "./animation";

package/dist/mixins/_animation.scss

@@ -0,0 +1,41 @@
+@mixin chevron-keyframes() {
+    @keyframes chevron-bounce-open {
+        0% {
+            transform: translateY(0);
+        }
+        50% {
+            transform: translateY(-7px);
+        }
+        100% {
+            transform: translateY(0);
+        }
+    }
+
+    @keyframes chevron-bounce-close {
+        0% {
+            transform: translateY(0);
+        }
+        50% {
+            transform: translateY(7px);
+        }
+        100% {
+            transform: translateY(0);
+        }
+    }
+}
+
+// This is used for when the animations are loading so that there are no animations happening on page load.
+@mixin loading() {
+    animation: none;
+    transition: none;
+}
+
+@mixin chevron-open() {
+    animation: chevron-bounce-open var(--motion-duration-medium-1)
+        var(--motion-easing-standard) var(--motion-duration-short-1);
+}
+
+@mixin chevron-close() {
+    animation: chevron-bounce-close var(--motion-duration-medium-1)
+        var(--motion-easing-standard);
+}

package/dist/mixins/_title.scss

@@ -0,0 +1,42 @@
+/* large screen titles */
+@mixin giant-screen-large() {
+    font-size: var(--font-size-giant-1);
+    line-height: 36px;
+}
+
+@mixin large-screen-large() {
+    font-size: var(--font-size-large-2);
+    line-height: 30px;
+}
+
+@mixin medium-screen-large() {
+    font-size: var(--font-size-large-1);
+    line-height: 24px;
+}
+
+@mixin small-screen-large() {
+    font-size: var(--font-size-medium);
+    line-height: 20px;
+}
+
+/* small screen titles */
+
+@mixin giant-screen-small() {
+    font-size: var(--font-size-large-2);
+    line-height: 30px;
+}
+
+@mixin large-screen-small() {
+    font-size: var(--font-size-large-1);
+    line-height: 24px;
+}
+
+@mixin medium-screen-small() {
+    font-size: var(--font-size-medium);
+    line-height: 20px;
+}
+
+@mixin small-screen-small() {
+    font-size: var(--font-size-default);
+    line-height: 16px;
+}