@ebay/skin 19.15.0 → 19.16.0

package/dist/accordion/accordion.css

@@ -28,11 +28,9 @@ ul.accordion {
 ul.accordion ::marker {
     font-size: 0;
 }
-
 ul.accordion > li:not(:last-child) {
-    border-bottom: 1px solid var(--color-stroke-subtle);
+    border-bottom: 1px solid var(--color-border-subtle);
 }
-
 ul.accordion summary.details__summary {
     border-radius: 0;
     display: flex;
@@ -41,16 +39,13 @@ ul.accordion summary.details__summary {
     min-height: 48px;
     padding: 12px 16px;
 }
-
 ul.accordion details {
     overflow: hidden;
 }
-
 ul.accordion details .details__content {
     margin: 0 16px 6px;
     overflow: hidden;
 }
-
 ul.accordion summary.details__summary span.details__icon svg {
     animation: chevron-bounce-close var(--motion-duration-medium-1)
         var(--motion-easing-standard);
@@ -59,7 +54,6 @@ ul.accordion summary.details__summary span.details__icon svg {
         var(--color-foreground-secondary)
     );
 }
-
 ul.accordion details[open] summary.details__summary span.details__icon svg {
     animation: chevron-bounce-open var(--motion-duration-medium-1)
         var(--motion-easing-standard) var(--motion-duration-short-1);
@@ -68,17 +62,14 @@ ul.accordion details svg.details__expand,
 ul.accordion details[open] svg.details__collapse {
     display: inline-block;
 }
-
 ul.accordion details svg.details__collapse,
 ul.accordion details[open] svg.details__expand {
     display: none;
 }
-
 ul.accordion--large summary.details__summary {
     font-size: var(--font-size-large-1);
     min-height: 52px;
 }
-
 @supports selector(::details-content) and (interpolate-size: allow-keywords) and
     (transition: allow-discrete) {
     :root {

package/dist/alert-dialog/alert-dialog.css

@@ -19,7 +19,6 @@
 .alert-dialog[role="alertdialog"]:not([hidden]) {
     display: flex;
 }
-
 .alert-dialog__window {
     background-color: var(
         --dialog-window-background-color,
@@ -39,18 +38,15 @@
     padding: var(--spacing-200);
     will-change: opacity, transform;
 }
-
 .alert-dialog__title {
     font-size: var(--font-size-large-1);
-    font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-600);
     line-height: 28px;
     margin: 0;
 }
-
 .alert-dialog__footer {
     text-align: right;
 }
-
 .alert-dialog__main {
     margin: var(--spacing-200) 0;
     min-height: var(--spacing-200);
@@ -61,7 +57,6 @@
 .alert-dialog__main > :last-child {
     margin-bottom: 0;
 }
-
 .alert-dialog--hide.alert-dialog--mask-fade,
 .alert-dialog--show.alert-dialog--mask-fade {
     transition: background-color 0.16s ease-out;
@@ -110,7 +105,6 @@
     transition: opacity var(--motion-duration-medium-2)
         var(--motion-easing-continuous) var(--motion-duration-short-3);
 }
-
 .alert-dialog--hide.alert-dialog--hide,
 .alert-dialog--hide.alert-dialog--show-init,
 .alert-dialog--show-init.alert-dialog--hide,
@@ -131,7 +125,6 @@
 .alert-dialog--show-init .alert-dialog__window--fade {
     opacity: 0;
 }
-
 .alert-dialog--hide-init.alert-dialog--hide-init,
 .alert-dialog--hide-init.alert-dialog--show,
 .alert-dialog--show.alert-dialog--hide-init,
@@ -152,7 +145,6 @@
 .alert-dialog--show .alert-dialog__window--fade {
     opacity: 1;
 }
-
 @media (prefers-reduced-motion) {
     .alert-dialog--hide.alert-dialog--mask-fade,
     .alert-dialog--hide.alert-dialog--mask-fade-slow {
@@ -187,12 +179,10 @@
 .alert-dialog--show .alert-dialog__window--animate {
     transform: scale(1);
 }
-
 .alert-dialog--hide .alert-dialog__window--animate,
 .alert-dialog--show-init .alert-dialog__window--animate {
     transform: scale(0.75);
 }
-
 @media (prefers-reduced-motion) {
     .alert-dialog--hide .alert-dialog__window--animate,
     .alert-dialog--hide-init .alert-dialog__window--animate,

package/dist/avatar/avatar.css

@@ -3,7 +3,7 @@
     border-radius: 50%;
     display: inline-flex;
     font-size: var(--font-size-large-2);
-    font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-600);
     height: 48px;
     justify-content: center;
     line-height: 48px;
@@ -28,62 +28,50 @@
     max-width: 100%;
     object-fit: contain;
 }
-
 .avatar > svg {
     height: 100%;
     width: 100%;
 }
-
 .avatar > img {
     height: 48px;
     object-fit: cover;
     width: 48px;
 }
-
 .avatar--fit > img {
     object-fit: contain;
 }
-
 .avatar--teal {
     background-color: #84b4fb;
     color: #002a69;
 }
-
 .avatar--light-teal {
     background-color: #44ccd5;
     color: #07465a;
 }
-
 .avatar--green {
     background-color: #4ce160;
     color: #1b561a;
 }
-
 .avatar--lime {
     background-color: #c1d737;
     color: #4e4e0c;
 }
-
 .avatar--yellow {
     background-color: #ffbd14;
     color: #553b06;
 }
-
 .avatar--orange {
     background-color: #ff8806;
     color: #562501;
 }
-
 .avatar--magenta {
     background-color: #cc9ef0;
     color: #3e135f;
 }
-
 .avatar--pink {
     background-color: #f79cc8;
     color: #4b112d;
 }
-
 .avatar--32,
 .avatar--32 > img {
     font-size: var(--font-size-medium);
@@ -91,7 +79,6 @@
     line-height: 32px;
     width: 32px;
 }
-
 .avatar--40,
 .avatar--40 > img {
     font-size: var(--font-size-large-1);
@@ -99,7 +86,6 @@
     line-height: 40px;
     width: 40px;
 }
-
 .avatar--48,
 .avatar--48 > img {
     font-size: var(--font-size-large-2);
@@ -107,7 +93,6 @@
     line-height: 48px;
     width: 48px;
 }
-
 .avatar--56,
 .avatar--56 > img {
     font-size: var(--font-size-giant-1);
@@ -115,7 +100,6 @@
     line-height: 56px;
     width: 56px;
 }
-
 .avatar--64,
 .avatar--64 > img {
     font-size: var(--font-size-giant-2);
@@ -123,7 +107,6 @@
     line-height: 64px;
     width: 64px;
 }
-
 .avatar--96,
 .avatar--96 > img {
     font-size: var(--font-size-giant-3);
@@ -131,7 +114,6 @@
     line-height: 96px;
     width: 96px;
 }
-
 .avatar--128,
 .avatar--128 > img {
     font-size: var(--font-size-giant-4);

package/dist/badge/badge.css

@@ -4,7 +4,7 @@
         --badge-background-color,
         var(--color-background-attention)
     );
-    border: 2px solid var(--color-stroke-on-attention);
+    border: 2px solid var(--color-border-on-attention);
     border-radius: 16px;
     color: var(--badge-foreground-color, var(--color-foreground-on-attention));
     display: inline-flex;

package/dist/breadcrumbs/breadcrumbs.css

@@ -12,7 +12,6 @@ nav.breadcrumbs {
     scrollbar-width: none;
     white-space: nowrap;
 }
-
 nav.breadcrumbs > ul {
     display: inline-block;
     margin: 0;
@@ -25,25 +24,20 @@ nav.breadcrumbs > ul > li {
     display: inline-flex;
     vertical-align: middle;
 }
-
 nav.breadcrumbs > ul > li[hidden] {
     display: none;
 }
-
 nav.breadcrumbs > ul > li svg {
     margin-left: 3px;
     margin-right: 3px;
 }
-
 nav.breadcrumbs > ul > li svg.icon--12 {
     margin-left: var(--spacing-75);
     margin-right: var(--spacing-75);
 }
-
 nav.breadcrumbs > ul > li > a {
     text-decoration: none;
 }
-
 nav.breadcrumbs > ul > li > button {
     background: none;
     border: none;
@@ -52,7 +46,6 @@ nav.breadcrumbs > ul > li > button {
     margin: 0;
     padding: 0;
 }
-
 nav.breadcrumbs > ul > li > a,
 nav.breadcrumbs > ul > li > button {
     color: inherit;
@@ -75,7 +68,6 @@ nav.breadcrumbs > ul > li > button[aria-current] {
     );
     text-decoration: none;
 }
-
 nav.breadcrumbs > ul > li > a:focus:not(:focus-visible),
 nav.breadcrumbs > ul > li > button:focus:not(:focus-visible) {
     outline: none;
@@ -87,7 +79,6 @@ nav.breadcrumbs.breadcrumb--overflow {
     overflow-x: unset;
     scrollbar-width: unset;
 }
-
 nav.breadcrumbs .fake-menu-button__button,
 nav.breadcrumbs .menu-button__button {
     background-color: var(
@@ -100,7 +91,6 @@ nav.breadcrumbs .menu-button__button {
     outline-offset: 1px;
     width: var(--spacing-300);
 }
-
 nav.breadcrumbs .fake-menu-button__button svg.icon,
 nav.breadcrumbs .menu-button__button svg.icon {
     fill: var(
@@ -108,16 +98,13 @@ nav.breadcrumbs .menu-button__button svg.icon {
         var(--color-foreground-secondary)
     );
 }
-
 nav.breadcrumbs .fake-menu-button__menu,
 nav.breadcrumbs .menu-button__menu {
-    font-size: var(--font-size-default);
+    font-size: var(--font-size-body);
 }
-
 [dir="rtl"] nav.breadcrumbs svg.icon--12 {
     transform: rotate(180deg);
 }
-
 @media (min-width: 512px) {
     nav.breadcrumbs {
         margin: 16px 0;