@ebay/skin 19.8.1 → 19.10.0

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

@@ -0,0 +1,147 @@
+@keyframes fill-horizontal-background {
+    0% {
+        background-size: 0 100%;
+    }
+    99% {
+        background-color: var(--color-background-primary);
+    }
+    to {
+        background-color: var(--color-background-strong);
+        background-size: 100% 100%;
+    }
+}
+@keyframes chevron-bounce-open {
+    0% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-7px);
+    }
+    to {
+        transform: translateY(0);
+    }
+}
+@keyframes chevron-bounce-close {
+    0% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(7px);
+    }
+    to {
+        transform: translateY(0);
+    }
+}
+a.filter-chip,
+button.filter-chip {
+    align-items: center;
+    background-color: var(--color-background-primary);
+    background-position: 50%;
+    background-repeat: no-repeat;
+    background-size: 0 100%;
+    border: 1px solid var(--color-stroke-default);
+    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);
+    gap: var(--spacing-75);
+    height: var(--spacing-400);
+    justify-content: space-between;
+    max-width: 296px;
+    min-width: 32px;
+    padding: 0 var(--spacing-150);
+    text-decoration: none;
+    transition: all var(--motion-duration-short-3)
+        var(--motion-easing-quick-enter);
+    vertical-align: bottom;
+}
+a.filter-chip:active,
+button.filter-chip:active {
+    transform: scale(0.97);
+}
+
+a.filter-chip--expressive,
+button.filter-chip--expressive {
+    border-radius: var(--border-radius-150);
+    height: 40px;
+}
+
+.filter-chip__media {
+    align-items: center;
+    border-radius: 8px;
+    border-radius: var(--spacing-400);
+    display: flex;
+    justify-content: center;
+    margin-inline-start: -8px;
+    overflow: hidden;
+    position: relative;
+}
+.filter-chip__media:after {
+    background: rgba(0, 0, 0, 0.05);
+    bottom: 0;
+    content: "";
+    display: block;
+    left: 0;
+    pointer-events: none;
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+.filter-chip__media > img {
+    display: inline-block;
+    height: var(--spacing-400);
+    max-height: 100%;
+    max-width: 100%;
+    object-fit: contain;
+    object-fit: cover;
+    width: var(--spacing-400);
+}
+
+a.filter-chip--selected,
+button.filter-chip[aria-pressed="true"] {
+    animation: fill-horizontal-background 0s var(--motion-easing-quick-enter)
+        forwards;
+    background-image: linear-gradient(
+        to right,
+        var(--color-background-strong) 0,
+        var(--color-background-strong) 100%
+    );
+    color: var(--color-foreground-on-strong);
+}
+
+button.filter-chip--animated[aria-pressed="true"] {
+    animation-duration: var(--motion-duration-medium-2);
+    transition: color var(--motion-duration-instant)
+        var(--motion-easing-standard);
+}
+
+button.filter-chip[aria-expanded="false"]:active .filter-chip__trailing {
+    animation: chevron-bounce-close var(--motion-duration-medium-1)
+        var(--motion-easing-standard);
+    rotate: 180deg;
+}
+
+button.filter-chip[aria-expanded="false"] .filter-chip__trailing {
+    rotate: 0deg;
+    transition: none;
+}
+
+button.filter-chip[aria-expanded="true"]:active .filter-chip__trailing {
+    animation: chevron-bounce-open var(--motion-duration-medium-1)
+        var(--motion-easing-standard) var(--motion-duration-short-1);
+    rotate: 0deg;
+}
+
+button.filter-chip[aria-expanded="true"] .filter-chip__trailing {
+    rotate: 180deg;
+    transition: none;
+}
+
+.filter-chip__text {
+    overflow: hidden;
+    padding: var(--spacing-75) 0;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}

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

@@ -306,7 +306,7 @@ button.icon-btn.lightbox-dialog__prev {
     .lightbox-dialog__window {
         border-radius: var(--lightbox-border-radius, var(--border-radius-100));
         margin: auto;
-        max-width: calc(88% - var(--spacing-400));
+        max-width: 88%;
     }
     .lightbox-dialog--narrow .lightbox-dialog__window {
         max-width: var(--dialog-lightbox-narrow-max-width);
@@ -341,7 +341,7 @@ button.icon-btn.lightbox-dialog__prev {
         max-width: var(--dialog-lightbox-max-width);
     }
     .lightbox-dialog--wide .lightbox-dialog__window {
-        max-width: var(--dialog-lightbox-wide-max-width);
+        max-width: 88%;
     }
     .lightbox-dialog--wide .lightbox-dialog__image {
         height: 256px;
@@ -352,3 +352,8 @@ button.icon-btn.lightbox-dialog__prev {
         margin-top: 256px;
     }
 }
+@media (min-width: 1024px) {
+    .lightbox-dialog--wide .lightbox-dialog__window {
+        max-width: var(--dialog-lightbox-wide-max-width);
+    }
+}

package/dist/mixins/_animation-mixins.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/selection-chip/selection-chip.css

@@ -0,0 +1,76 @@
+@keyframes fill-horizontal-background {
+    0% {
+        background-size: 0 100%;
+    }
+    99% {
+        background-color: var(--color-background-primary);
+    }
+    to {
+        background-color: var(--color-background-strong);
+        background-size: 100% 100%;
+    }
+}
+.selection-chip {
+    align-items: center;
+    background-color: var(--color-background-primary);
+    background-position: 50%;
+    background-repeat: no-repeat;
+    background-size: 0 100%;
+    border: 1px solid var(--color-stroke-default);
+    border-radius: var(--border-radius-50);
+    box-shadow: none;
+    box-sizing: border-box;
+    color: var(--color-foreground-primary);
+    display: inline-flex;
+    font-size: var(--font-size-default);
+    gap: var(--spacing-75);
+    height: var(--spacing-400);
+    justify-content: space-between;
+    max-width: 296px;
+    min-width: 32px;
+    padding: 0 var(--spacing-150);
+    text-decoration: none;
+    transition: all var(--motion-duration-short-3)
+        var(--motion-easing-quick-enter);
+    vertical-align: bottom;
+}
+.selection-chip:active {
+    transform: scale(0.97);
+}
+
+.selection-chip--animated .selection-chip__trailing {
+    transition: rotate var(--motion-duration-medium-3)
+        var(--motion-easing-standard);
+}
+
+.selection-chip__trailing {
+    rotate: -225deg;
+}
+
+.selection-chip[aria-pressed="true"] {
+    animation: fill-horizontal-background 0s var(--motion-easing-quick-enter)
+        forwards;
+    background-image: linear-gradient(
+        to right,
+        var(--color-background-strong) 0,
+        var(--color-background-strong) 100%
+    );
+    color: var(--color-foreground-on-strong);
+}
+
+.selection-chip--animated[aria-pressed="true"] {
+    animation-duration: var(--motion-duration-medium-2);
+    transition: color var(--motion-duration-instant)
+        var(--motion-easing-standard);
+}
+
+.selection-chip[aria-pressed="true"] .selection-chip__trailing {
+    rotate: 0deg;
+}
+
+.selection-chip__text {
+    overflow: hidden;
+    padding: var(--spacing-75) 0;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}

package/dist/svg/icon/icon-ebay-balance-12-colored.svg

@@ -7,6 +7,7 @@
     rx="1.5"
     fill="#fff"
     stroke="#191919"
+    stroke-width="1"
   />
   <path
     fill-rule="evenodd"

package/dist/svg/icon/icon-ebay-balance-18-colored.svg

@@ -7,6 +7,7 @@
     rx="1.5"
     fill="#fff"
     stroke="#191919"
+    stroke-width="1"
   />
   <path
     fill-rule="evenodd"

package/dist/svg/icon/icon-ebay-balance-24-colored.svg

@@ -7,6 +7,7 @@
     rx="1.5"
     fill="#fff"
     stroke="#191919"
+    stroke-width="1"
   />
   <path
     fill-rule="evenodd"

package/dist/svg/icon/icon-ebay-balance-32-colored.svg

@@ -7,6 +7,7 @@
     rx="1.5"
     fill="#fff"
     stroke="#191919"
+    stroke-width="1"
   />
   <path
     fill-rule="evenodd"

package/dist/svg/icons.svg

@@ -3081,6 +3081,7 @@
       rx="1.5"
       fill="#fff"
       stroke="#191919"
+      stroke-width="1"
     />
     <path
       fill-rule="evenodd"
@@ -3116,6 +3117,7 @@
       rx="1.5"
       fill="#fff"
       stroke="#191919"
+      stroke-width="1"
     />
     <path
       fill-rule="evenodd"
@@ -3151,6 +3153,7 @@
       rx="1.5"
       fill="#fff"
       stroke="#191919"
+      stroke-width="1"
     />
     <path
       fill-rule="evenodd"
@@ -3186,6 +3189,7 @@
       rx="1.5"
       fill="#fff"
       stroke="#191919"
+      stroke-width="1"
     />
     <path
       fill-rule="evenodd"

package/filter-chip.browser.json

@@ -0,0 +1 @@
+{ "dependencies": ["require: ./filter-chip.js"] }

package/filter-chip.css

@@ -0,0 +1 @@
+@import "./dist/filter-chip/filter-chip.css";

package/filter-chip.js

@@ -0,0 +1 @@
+require('./dist/filter-chip/filter-chip.css');

package/filter-chip.mjs

@@ -0,0 +1 @@
+import './dist/filter-chip/filter-chip.css';

package/index.browser.json

@@ -7,6 +7,7 @@
     "require: ./breadcrumbs.js",
     "require: ./button.js",
     "require: ./calendar.js",
+    "require: ./card.js",
     "require: ./carousel.js",
     "require: ./ccd.js",
     "require: ./chart-legend.js",
@@ -27,6 +28,7 @@
     "require: ./file-preview-card.js",
     "require: ./file-preview-card-group.js",
     "require: ./filter-button.js",
+    "require: ./filter-chip.js",
     "require: ./filter-input.js",
     "require: ./filter-menu.js",
     "require: ./filter-menu-button.js",
@@ -65,6 +67,7 @@
     "require: ./section-title.js",
     "require: ./segmented-buttons.js",
     "require: ./select.js",
+    "require: ./selection-chip.js",
     "require: ./signal.js",
     "require: ./skeleton.js",
     "require: ./snackbar-dialog.js",

package/index.css

@@ -5,6 +5,7 @@
 @import "./breadcrumbs.css";
 @import "./button.css";
 @import "./calendar.css";
+@import "./card.css";
 @import "./carousel.css";
 @import "./ccd.css";
 @import "./chart-legend.css";
@@ -25,6 +26,7 @@
 @import "./file-preview-card.css";
 @import "./file-preview-card-group.css";
 @import "./filter-button.css";
+@import "./filter-chip.css";
 @import "./filter-input.css";
 @import "./filter-menu.css";
 @import "./filter-menu-button.css";
@@ -63,6 +65,7 @@
 @import "./section-title.css";
 @import "./segmented-buttons.css";
 @import "./select.css";
+@import "./selection-chip.css";
 @import "./signal.css";
 @import "./skeleton.css";
 @import "./snackbar-dialog.css";

package/index.js

@@ -5,6 +5,7 @@ require('./badge.js');
 require('./breadcrumbs.js');
 require('./button.js');
 require('./calendar.js');
+require('./card.js');
 require('./carousel.js');
 require('./ccd.js');
 require('./chart-legend.js');
@@ -25,6 +26,7 @@ require('./file-input.js');
 require('./file-preview-card.js');
 require('./file-preview-card-group.js');
 require('./filter-button.js');
+require('./filter-chip.js');
 require('./filter-input.js');
 require('./filter-menu.js');
 require('./filter-menu-button.js');
@@ -63,6 +65,7 @@ require('./section-notice.js');
 require('./section-title.js');
 require('./segmented-buttons.js');
 require('./select.js');
+require('./selection-chip.js');
 require('./signal.js');
 require('./skeleton.js');
 require('./snackbar-dialog.js');

package/index.mjs

@@ -5,6 +5,7 @@ import './dist/badge/badge.css';
 import './dist/breadcrumbs/breadcrumbs.css';
 import './dist/button/button.css';
 import './dist/calendar/calendar.css';
+import './dist/card/card.css';
 import './dist/carousel/carousel.css';
 import './dist/ccd/ccd.css';
 import './dist/chart-legend/chart-legend.css';
@@ -25,6 +26,7 @@ import './dist/file-input/file-input.css';
 import './dist/file-preview-card/file-preview-card.css';
 import './dist/file-preview-card-group/file-preview-card-group.css';
 import './dist/filter-button/filter-button.css';
+import './dist/filter-chip/filter-chip.css';
 import './dist/filter-input/filter-input.css';
 import './dist/filter-menu/filter-menu.css';
 import './dist/filter-menu-button/filter-menu-button.css';
@@ -63,6 +65,7 @@ import './dist/section-notice/section-notice.css';
 import './dist/section-title/section-title.css';
 import './dist/segmented-buttons/segmented-buttons.css';
 import './dist/select/select.css';
+import './dist/selection-chip/selection-chip.css';
 import './dist/signal/signal.css';
 import './dist/skeleton/skeleton.css';
 import './dist/snackbar-dialog/snackbar-dialog.css';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ebay/skin",
-    "version": "19.8.1",
+    "version": "19.10.0",
     "description": "Skin - CSS modules that represent the brand eBay",
     "keywords": [
         "eBay",

package/selection-chip.browser.json

@@ -0,0 +1 @@
+{ "dependencies": ["require: ./selection-chip.js"] }

package/selection-chip.css

@@ -0,0 +1 @@
+@import "./dist/selection-chip/selection-chip.css";

package/selection-chip.js

@@ -0,0 +1 @@
+require('./dist/selection-chip/selection-chip.css');

package/selection-chip.mjs

@@ -0,0 +1 @@
+import './dist/selection-chip/selection-chip.css';