@ebay/skin 19.8.0 → 19.9.0

package/dist/bundles/skin-full.css

@@ -1,9 +1,9 @@
 @charset "UTF-8";
 /*!
-Skin
-Copyright 2017 eBay! Inc. All rights reserved.
-Licensed under the BSD License.
-https://github.com/eBay/skin/blob/master/LICENSE.txt
+evo-web/skin
+Copyright 2018 eBay! Inc. All rights reserved.
+Licensed under the MIT License.
+https://github.com/eBay/evo-web/blob/master/LICENSE
 */
 :root{
   --border-radius-50:8px;
@@ -64,10 +64,10 @@ https://github.com/eBay/skin/blob/master/LICENSE.txt
   --color-indigo-800:#01193d;
   --color-blue-100:#f5f9ff;
   --color-blue-200:#d4e5fe;
-  --color-blue-300:#93c9ff;
-  --color-blue-400:#659eff;
-  --color-blue-500:#3665f3;
-  --color-blue-600:#382aef;
+  --color-blue-300:#84b4fb;
+  --color-blue-400:#4d93fc;
+  --color-blue-500:#0968f6;
+  --color-blue-600:#0049b8;
   --color-blue-650:#003aa5;
   --color-blue-700:#002a69;
   --color-blue-800:#19133a;
@@ -95,11 +95,11 @@ https://github.com/eBay/skin/blob/master/LICENSE.txt
   --color-green-600:#507d17;
   --color-green-700:#345110;
   --color-green-800:#1c2d06;
-  --color-jade-100:#f7fdfd;
+  --color-jade-100:#f7fdfb;
   --color-jade-200:#d8f8ee;
   --color-jade-300:#8feace;
   --color-jade-400:#1ed49e;
-  --color-jade-500:#1ed49e;
+  --color-jade-500:#17c28f;
   --color-jade-600:#0f805e;
   --color-jade-700:#055743;
   --color-jade-800:#002b20;
@@ -637,16 +637,14 @@ https://github.com/eBay/skin/blob/master/LICENSE.txt
   font-family:Market Sans;
   font-style:normal;
   font-weight:400;
-  src:url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v2.0/MarketSans-Regular-WebS.eot);
-  src:url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v2.0/MarketSans-Regular-WebS.eot?#iefix) format("embedded-opentype"), url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v2.0/MarketSans-Regular-WebS.woff2) format("woff2"), url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v2.0/MarketSans-Regular-WebS.woff) format("woff"), url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v2.0/MarketSans-Regular-WebS.ttf) format("truetype"), url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v2.0/MarketSans-Regular-WebS.svg#MarketSans-Regular-WebS) format("svg");
+  src:url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v2.0/MarketSans-Regular-WebS.woff2) format("woff2");
 }
 @font-face{
   font-display:swap;
   font-family:Market Sans;
   font-style:normal;
   font-weight:700;
-  src:url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v2.0/MarketSans-Bold-WebS.eot);
-  src:url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v2.0/MarketSans-Bold-WebS.eot?#iefix) format("embedded-opentype"), url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v2.0/MarketSans-Bold-WebS.woff2) format("woff2"), url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v2.0/MarketSans-Bold-WebS.woff) format("woff"), url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v2.0/MarketSans-Bold-WebS.ttf) format("truetype"), url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v2.0/MarketSans-Bold-WebS.svg#MarketSans-Bold-WebS) format("svg");
+  src:url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v2.0/MarketSans-Bold-WebS.woff2) format("woff2");
 }
 body{
   background-color:var(--color-background-primary);
@@ -812,28 +810,6 @@ a:not([href]),a[aria-disabled=true]{
   border-right-style:inset;
   box-shadow:none;
 }
-@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);
-  }
-}
 ul.accordion{
   margin:0;
   padding:0;
@@ -2370,17 +2346,20 @@ input.checkbox__control[type=checkbox]:focus:not(:focus-visible)+span.checkbox__
 }
 .chip{
   align-items:center;
-  background-color:var(--color-background-tertiary);
-  border-radius:var(--spacing-400);
-  color:var(--color-foreground-primary);
+  background-color:var(--color-background-strong);
+  border-radius:var(--border-radius-50);
+  box-sizing:border-box;
+  color:var(--color-foreground-on-strong);
   display:inline-flex;
   font-size:var(--font-size-default);
-  gap:2px;
+  gap:var(--spacing-75);
+  height:var(--spacing-400);
   justify-content:space-between;
   max-width:296px;
-  min-height:var(--spacing-250);
   min-width:32px;
   padding:0 var(--spacing-150);
+  text-decoration:none;
+  vertical-align:bottom;
 }
 
 .chip__text{
@@ -2390,34 +2369,34 @@ input.checkbox__control[type=checkbox]:focus:not(:focus-visible)+span.checkbox__
   white-space:nowrap;
 }
 
-button.chip__button{
+.chip button.chip__button{
+  align-items:center;
   background-color:initial;
   border:none;
   border-radius:50px;
   box-sizing:border-box;
+  color:var(--color-foreground-on-strong);
+  display:flex;
   flex-shrink:0;
   height:var(--spacing-300);
+  justify-content:center;
   line-height:0;
   margin-inline-end:-8px;
   padding:0;
   width:var(--spacing-300);
 }
 
-button.chip__button:focus-visible{
+.chip button.chip__button:focus-visible{
   background-color:var(--state-layer-focus);
-  outline-color:var(--color-state-focus-stroke);
+  outline-color:var(--color-foreground-on-strong);
   outline-offset:-2px;
   outline-style:solid;
   outline-width:2px;
 }
 
-button.chip__button:hover{
+.chip button.chip__button:hover{
   background-color:var(--state-layer-hover);
 }
-
-button.chip__button>svg{
-  fill:var(--color-foreground-on-primary);
-}
 .chips-combobox{
   background-color:var(--color-background-secondary);
   border:1px solid var(--color-stroke-default);
@@ -4120,6 +4099,128 @@ a.filter-link--selected:not([href]):hover,a.filter-link--selected[aria-disabled=
 a.filter-link:focus:not(:focus-visible),button.filter-button:focus:not(:focus-visible){
   outline:none;
 }
+@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(.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, .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;
+}
 
 .filter-input{
   display:inline-block;
@@ -7654,7 +7755,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);
@@ -7684,7 +7785,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;
@@ -7693,6 +7794,11 @@ 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);
+  }
+}
 a.nav-link,a.standalone-link{
   color:var(--nav-link-foreground-color, var(--color-foreground-link-primary));
   text-decoration:none;
@@ -9279,10 +9385,10 @@ button.icon-btn.panel-dialog__prev{
   }
 }
 :root{
-  --progress-bar-expressive-color-1:#e53238;
-  --progress-bar-expressive-color-2:#0064d2;
-  --progress-bar-expressive-color-3:#f5af02;
-  --progress-bar-expressive-color-4:#86b817;
+  --progress-bar-expressive-color-1:var(--color-red-500);
+  --progress-bar-expressive-color-2:var(--color-blue-500);
+  --progress-bar-expressive-color-3:var(--color-yellow-400);
+  --progress-bar-expressive-color-4:var(--color-green-500);
   --progress-bar-expressive-line-border-radius:2px;
   --progress-bar-expressive-line-count:12;
   --progress-bar-expressive-line-gap:var(--spacing-50);
@@ -9304,14 +9410,6 @@ button.icon-btn.panel-dialog__prev{
   --progress-bar-expressive-message-animatein-duration:833ms;
   --progress-bar-expressive-message-animateout-duration:400ms;
 }
-@media (prefers-color-scheme:dark){
-  :root{
-    --progress-bar-expressive-color-1:#f0343b;
-    --progress-bar-expressive-color-2:#0078fc;
-    --progress-bar-expressive-color-3:#e8a502;
-    --progress-bar-expressive-color-4:#86b817;
-  }
-}
 
 .progress-bar-expressive{
   align-items:stretch;
@@ -10251,6 +10349,74 @@ span.select{
   left:0;
   right:auto;
 }
+@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(.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;
+}
 @keyframes skeleton-fade-out{
   0%{
     opacity:1;