@ebay/skin 19.14.3 → 19.16.0

package/dist/progress-bar-expressive/progress-bar-expressive.css

@@ -24,7 +24,6 @@
     --progress-bar-expressive-message-animatein-duration: 833ms;
     --progress-bar-expressive-message-animateout-duration: 400ms;
 }
-
 .progress-bar-expressive {
     align-items: stretch;
     display: grid;
@@ -35,28 +34,24 @@
     row-gap: var(--spacing-300);
     width: 100%;
 }
-
 .progress-bar-expressive--loaded {
     display: none;
 }
-
 .progress-bar-expressive__messages {
     color: var(--color-foreground-primary);
     font-size: var(--font-size-large-1);
-    font-weight: var(--font-weight-regular);
+    font-weight: var(--font-weight-400);
     line-height: calc(var(--spacing-50) + var(--spacing-300));
     margin: 0 var(--spacing-200);
     min-height: 3rem;
     position: relative;
     text-align: center;
 }
-
 .progress-bar-expressive__messages--medium {
     font-size: var(--font-size-medium);
-    font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-600);
     line-height: var(--spacing-300);
 }
-
 .progress-bar-expressive__message {
     bottom: 0;
     left: 0;
@@ -69,31 +64,26 @@
 .progress-bar-expressive__message[aria-hidden="true"] {
     opacity: 0;
 }
-
 .progress-bar-expressive__message--in {
     animation: progress-bar-expressive-message-animatein
         var(--progress-bar-expressive-message-animatein-duration)
         cubic-bezier(0.3, 0, 0, 1) both;
 }
-
 .progress-bar-expressive__message--out {
     animation: progress-bar-expressive-message-animateout
         var(--progress-bar-expressive-message-animateout-duration)
         cubic-bezier(0.3, 0, 0, 1) both;
 }
-
 .progress-bar-expressive__progress[role="progressbar"] {
     border-radius: var(--progress-bar-expressive-line-border-radius);
     margin: 0 var(--spacing-200);
     overflow: hidden;
 }
-
 .progress-bar-expressive__lines {
     display: flex;
     overflow: visible;
     width: calc(100% - var(--progress-bar-expressive-line-gap) * 3);
 }
-
 .progress-bar-expressive__line {
     animation:
         progress-bar-expressive-line-reorder
@@ -111,15 +101,12 @@
 .progress-bar-expressive__line:nth-child(4n + 1) {
     background-color: var(--progress-bar-expressive-color-4);
 }
-
 .progress-bar-expressive__line:nth-child(4n + 2) {
     background-color: var(--progress-bar-expressive-color-3);
 }
-
 .progress-bar-expressive__line:nth-child(4n + 3) {
     background-color: var(--progress-bar-expressive-color-2);
 }
-
 .progress-bar-expressive__line:nth-child(4n + 4) {
     background-color: var(--progress-bar-expressive-color-1);
 }
@@ -134,7 +121,6 @@
     );
     width: var(--progress-bar-expressive-line-width-a1);
 }
-
 .progress-bar-expressive__line:nth-child(2) {
     animation-delay: calc(
         (
@@ -146,7 +132,6 @@
     );
     width: var(--progress-bar-expressive-line-width-a2);
 }
-
 .progress-bar-expressive__line:nth-child(3) {
     animation-delay: calc(
         (
@@ -158,7 +143,6 @@
     );
     width: var(--progress-bar-expressive-line-width-a3);
 }
-
 .progress-bar-expressive__line:nth-child(4) {
     animation-delay: calc(
         (
@@ -170,7 +154,6 @@
     );
     width: var(--progress-bar-expressive-line-width-a4);
 }
-
 .progress-bar-expressive__line:nth-child(5) {
     animation-delay: calc(
         (
@@ -182,7 +165,6 @@
     );
     width: var(--progress-bar-expressive-line-width-b1);
 }
-
 .progress-bar-expressive__line:nth-child(6) {
     animation-delay: calc(
         (
@@ -194,7 +176,6 @@
     );
     width: var(--progress-bar-expressive-line-width-b2);
 }
-
 .progress-bar-expressive__line:nth-child(7) {
     animation-delay: calc(
         (
@@ -206,7 +187,6 @@
     );
     width: var(--progress-bar-expressive-line-width-b3);
 }
-
 .progress-bar-expressive__line:nth-child(8) {
     animation-delay: calc(
         (
@@ -218,7 +198,6 @@
     );
     width: var(--progress-bar-expressive-line-width-b4);
 }
-
 .progress-bar-expressive__line:nth-child(9) {
     animation-delay: calc(
         (
@@ -230,7 +209,6 @@
     );
     width: var(--progress-bar-expressive-line-width-c1);
 }
-
 .progress-bar-expressive__line:nth-child(10) {
     animation-delay: calc(
         (
@@ -242,7 +220,6 @@
     );
     width: var(--progress-bar-expressive-line-width-c2);
 }
-
 .progress-bar-expressive__line:nth-child(11) {
     animation-delay: calc(
         (
@@ -254,7 +231,6 @@
     );
     width: var(--progress-bar-expressive-line-width-c3);
 }
-
 .progress-bar-expressive__line:nth-child(12) {
     animation-delay: calc(
         (
@@ -324,13 +300,13 @@
     }
     to {
         opacity: 0;
-        transform: translateY(calc(var(--font-size-24) * -1));
+        transform: translateY(calc(var(--font-size-large-2) * -1));
     }
 }
 @keyframes progress-bar-expressive-message-animatein {
     0% {
         opacity: 0;
-        transform: translateY(var(--font-size-24));
+        transform: translateY(var(--font-size-large-2));
     }
     to {
         opacity: 1;

package/dist/progress-spinner/progress-spinner.css

@@ -22,12 +22,10 @@
     max-width: inherit;
     width: inherit;
 }
-
 .progress-spinner--small {
     height: 20px;
     width: 20px;
 }
-
 .progress-spinner--large {
     height: 30px;
     width: 30px;

package/dist/progress-stepper/progress-stepper.css

@@ -2,18 +2,16 @@
     align-items: flex-start;
     display: flex;
 }
-
 .progress-stepper__item {
     align-items: center;
     display: flex;
     flex-direction: column;
     width: 32px;
 }
-
 hr.progress-stepper__separator {
     background-color: var(
         --progress-stepper-active-color,
-        var(--color-background-information)
+        var(--color-background-accent)
     );
     border: 0;
     border-radius: 2px;
@@ -24,25 +22,22 @@ hr.progress-stepper__separator {
     position: relative;
     top: 10px;
 }
-
 .progress-stepper__text {
-    font-size: var(--font-size-default);
+    font-size: var(--font-size-body);
     justify-self: center;
     margin-top: 8px;
     text-align: center;
     width: 80px;
 }
-
 .progress-stepper__text h2,
 .progress-stepper__text h3,
 .progress-stepper__text h4,
 .progress-stepper__text h5,
 .progress-stepper__text h6 {
     color: var(--progress-stepper-text-color, var(--color-foreground-primary));
-    font-size: var(--font-size-default);
+    font-size: var(--font-size-body);
     font-weight: 400;
 }
-
 .progress-stepper__items--upcoming .progress-stepper__text h2,
 .progress-stepper__items--upcoming .progress-stepper__text h3,
 .progress-stepper__items--upcoming .progress-stepper__text h4,
@@ -53,7 +48,6 @@ hr.progress-stepper__separator {
         var(--color-foreground-secondary)
     );
 }
-
 .progress-stepper__item[aria-current] .progress-stepper__text h2,
 .progress-stepper__item[aria-current] .progress-stepper__text h3,
 .progress-stepper__item[aria-current] .progress-stepper__text h4,
@@ -61,7 +55,6 @@ hr.progress-stepper__separator {
 .progress-stepper__item[aria-current] .progress-stepper__text h6 {
     font-weight: 700;
 }
-
 .progress-stepper__item[aria-current]
     ~ .progress-stepper__item
     .progress-stepper__text
@@ -88,13 +81,11 @@ hr.progress-stepper__separator {
         var(--color-foreground-secondary)
     );
 }
-
 .progress-stepper__icon {
     height: 24px;
     margin: auto;
     width: 24px;
 }
-
 .progress-stepper__item[aria-current] ~ hr.progress-stepper__separator,
 .progress-stepper__items--upcoming hr.progress-stepper__separator {
     background-color: var(
@@ -103,20 +94,14 @@ hr.progress-stepper__separator {
     );
     background-image: none;
 }
-
 .progress-stepper__item[aria-current] + hr.progress-stepper__separator {
     background-image: linear-gradient(
         90deg,
-        var(
-                --progress-stepper-active-color,
-                var(--color-background-information)
-            )
-            50%,
+        var(--progress-stepper-active-color, var(--color-background-accent)) 50%,
         var(--progress-stepper-upcoming-color, var(--color-background-disabled))
             50%
     );
 }
-
 .progress-stepper__item--attention[aria-current]
     ~ hr.progress-stepper__separator {
     background-color: var(
@@ -125,50 +110,39 @@ hr.progress-stepper__separator {
     );
     background-image: none;
 }
-
 .progress-stepper__text > * {
     margin: 0;
 }
-
 .progress-stepper {
     overflow: auto;
     padding: var(--spacing-200) 0;
 }
-
 .progress-stepper__item:first-child .progress-stepper__text {
     align-self: flex-start;
     margin-inline-start: var(--spacing-50);
     text-align: left;
 }
-
 .progress-stepper__item:last-child .progress-stepper__text {
     align-self: flex-end;
     margin-inline-end: var(--spacing-50);
     text-align: right;
 }
-
 .progress-stepper--vertical .progress-stepper__item {
     align-items: flex-start;
     flex-direction: row;
     height: 24px;
     width: auto;
 }
-
 .progress-stepper--vertical
     .progress-stepper__item[aria-current]
     + hr.progress-stepper__separator {
     background: linear-gradient(
         180deg,
-        var(
-                --progress-stepper-active-color,
-                var(--color-background-information)
-            )
-            50%,
+        var(--progress-stepper-active-color, var(--color-background-accent)) 50%,
         var(--progress-stepper-upcoming-color, var(--color-background-disabled))
             50%
     );
 }
-
 .progress-stepper--vertical
     .progress-stepper__item--attention[aria-current]
     ~ hr.progress-stepper__separator {
@@ -178,11 +152,9 @@ hr.progress-stepper__separator {
     );
     background-image: none;
 }
-
 .progress-stepper--vertical .progress-stepper__items {
     display: block;
 }
-
 .progress-stepper--vertical .progress-stepper__item .progress-stepper__text {
     align-self: center;
     margin-inline-start: var(--spacing-200);
@@ -191,14 +163,12 @@ hr.progress-stepper__separator {
     white-space: nowrap;
     width: auto;
 }
-
 .progress-stepper--vertical .progress-stepper__icon {
     display: inline-block;
     height: 24px;
     margin: inherit;
     width: 24px;
 }
-
 .progress-stepper--vertical .progress-stepper__separator {
     display: inline-block;
     flex: inherit;
@@ -209,7 +179,6 @@ hr.progress-stepper__separator {
     min-width: inherit;
     width: 4px;
 }
-
 [dir="rtl"] .progress-stepper__item:first-child .progress-stepper__text {
     text-align: right;
 }
@@ -220,11 +189,7 @@ hr.progress-stepper__separator {
         90deg,
         var(--progress-stepper-upcoming-color, var(--color-background-disabled))
             50%,
-        var(
-                --progress-stepper-active-color,
-                var(--color-background-information)
-            )
-            50%
+        var(--progress-stepper-active-color, var(--color-background-accent)) 50%
     );
 }
 [dir="rtl"]
@@ -233,11 +198,7 @@ hr.progress-stepper__separator {
     + hr.progress-stepper__separator {
     background: linear-gradient(
         180deg,
-        var(
-                --progress-stepper-active-color,
-                var(--color-background-information)
-            )
-            50%,
+        var(--progress-stepper-active-color, var(--color-background-accent)) 50%,
         var(--progress-stepper-upcoming-color, var(--color-background-disabled))
             50%
     );
@@ -266,7 +227,6 @@ hr.progress-stepper__separator {
     margin-left: inherit;
     margin-right: 11px;
 }
-
 @media (min-width: 512px) {
     hr.progress-stepper__separator {
         min-width: 120px;

package/dist/radio/radio.css

@@ -3,40 +3,33 @@
     position: relative;
     vertical-align: text-bottom;
 }
-
 .radio__control[type="radio"] {
     height: 18px;
     min-width: 18px;
     width: 18px;
 }
-
 .radio--large .radio__control[type="radio"] {
     height: 24px;
     min-width: 24px;
     width: 24px;
 }
-
 span.radio__icon {
     display: inline-flex;
     height: 18px;
     outline-offset: 1px;
 }
-
 .radio--large span.radio__icon {
     height: 24px;
 }
 span.radio__icon[hidden] {
     display: inline-flex;
 }
-
 svg.radio__checked {
     color: var(--radio-checked-color, var(--color-foreground-primary));
 }
-
 svg.radio__unchecked {
     color: var(--radio-unchecked-color, var(--color-foreground-primary));
 }
-
 input.radio__control[type="radio"] {
     font-size: 100%;
     margin: 0;
@@ -45,7 +38,6 @@ input.radio__control[type="radio"] {
     position: absolute;
     z-index: 1;
 }
-
 .radio svg {
     display: inline-block;
     fill: currentColor;
@@ -56,29 +48,24 @@ input.radio__control[type="radio"] {
     vertical-align: middle;
     width: 18px;
 }
-
 .radio--large svg {
     height: 24px;
     width: 24px;
 }
-
 input.radio__control[type="radio"] + span.radio__icon svg.radio__checked {
     display: none;
 }
-
 input.radio__control[type="radio"] + span.radio__icon svg.radio__unchecked,
 input.radio__control[type="radio"]:checked
     + span.radio__icon
     svg.radio__checked {
     display: inline-block;
 }
-
 input.radio__control[type="radio"]:checked
     + span.radio__icon
     svg.radio__unchecked {
     display: none;
 }
-
 input.radio__control[type="radio"][disabled] + span.radio__icon {
     opacity: 1;
 }
@@ -90,7 +77,6 @@ input.radio__control[type="radio"]:focus + span.radio__icon {
     outline-color: var(--radio-outline, var(--color-foreground-secondary));
     outline-offset: 2px;
 }
-
 input.radio__control[type="radio"]:focus:not(:focus-visible)
     + span.radio__icon {
     outline: none;

package/dist/section-notice/section-notice.css

@@ -4,22 +4,19 @@
         var(--color-background-secondary)
     );
     border-radius: var(--section-notice-border-radius, var(--border-radius-50));
-    font-size: var(--font-size-default);
+    font-size: var(--font-size-body);
     margin: 8px 0;
     padding: 16px;
 }
-
 div[role="region"].section-notice,
 section.section-notice {
     display: grid;
     grid-template-columns: 32px auto auto;
 }
-
 div[role="region"].section-notice:has(.section-notice__cta),
 section.section-notice:has(.section-notice__cta) {
     grid-template-columns: 32px auto auto min-content;
 }
-
 div[role="region"].section-notice:has(.section-notice__cta)
     .section-notice__footer,
 section.section-notice:has(.section-notice__cta) .section-notice__footer {
@@ -31,13 +28,11 @@ section.section-notice:has(.section-notice__cta) .section-notice__footer {
         var(--color-background-education)
     );
 }
-
 span[role="region"].section-notice {
     display: grid;
 }
-
 .section-notice__title {
-    font-size: var(--font-size-default);
+    font-size: var(--font-size-body);
     font-weight: 400;
     margin: 0;
 }
@@ -47,12 +42,10 @@ span[role="region"].section-notice {
 .section-notice__title:not(:only-child) {
     font-weight: 700;
 }
-
 .section-notice button.fake-link {
-    font-size: var(--font-size-default);
+    font-size: var(--font-size-body);
     font-weight: 700;
 }
-
 .section-notice a,
 .section-notice button.fake-link,
 .section-notice button.fake-link:hover {
@@ -61,23 +54,19 @@ span[role="region"].section-notice {
         var(--color-foreground-primary)
     );
 }
-
 .section-notice a {
-    font-size: var(--font-size-default);
+    font-size: var(--font-size-body);
     font-weight: 700;
 }
-
 .section-notice a:hover {
     color: var(
         --section-notice-foreground-color,
         var(--color-foreground-primary)
     );
 }
-
 .section-notice .icon {
     vertical-align: top;
 }
-
 .section-notice__header {
     grid-column: 1;
     grid-row: 1;
@@ -85,30 +74,25 @@ span[role="region"].section-notice {
     margin-inline-end: var(--spacing-200);
     margin-top: 1px;
 }
-
 .section-notice__main {
     grid-column: 1 / 3;
     grid-row: 1;
     margin-inline-end: var(--spacing-200);
 }
-
 .section-notice__header + .section-notice__main,
 .section-notice__header ~ .section-notice__cta {
     grid-column: 2;
 }
-
 .section-notice__footer {
     grid-column: 3;
     grid-row: 1;
     justify-self: flex-end;
     margin-top: 2px;
 }
-
 .section-notice__main p {
-    font-size: var(--font-size-default);
+    font-size: var(--font-size-body);
     margin: 0;
 }
-
 p.section-notice__cta {
     grid-column: 1 / 3;
     grid-row: 2;

package/dist/section-title/section-title.css

@@ -3,44 +3,37 @@
     display: flex;
     margin: 30px 0 10px;
 }
-
 .section-title__title-container {
     max-width: 75%;
 }
-
 .section-title__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;
 }
-
 .section-title__subtitle {
     color: var(
         --section-title-subtitle-color,
         var(--color-foreground-secondary)
     );
-    font-size: var(--font-size-default);
+    font-size: var(--font-size-body);
     line-height: 20px;
 }
-
 .section-title__title svg.icon {
     background-color: var(--color-background-secondary);
     border-radius: 12px;
     margin-inline-start: var(--spacing-100);
     padding: 7px;
 }
-
 .section-title__info {
     bottom: -3px;
     margin: 0 var(--spacing-300) 0 var(--spacing-100);
     position: relative;
 }
-
 .section-title__overflow {
     margin: 0 var(--spacing-300) 0 auto;
 }
-
 .section-title__cta,
 .section-title__overflow {
     align-items: baseline;
@@ -49,21 +42,18 @@
     margin-left: auto;
     margin-right: 0;
 }
-
 .section-title button.icon-btn,
 .section-title__overflow button.icon-btn {
     height: var(--spacing-400);
     min-width: var(--spacing-400);
     width: var(--spacing-400);
 }
-
 .section-title__title-container + button.icon-btn {
     margin-left: var(--spacing-100);
 }
-
 .section-title--large .section-title__title {
     font-size: var(--font-size-large-1);
-    font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-600);
     line-height: 28px;
 }
 .section-title--large > .section-title__cta,
@@ -71,7 +61,6 @@
 .section-title--large > .section-title__overflow {
     height: var(--spacing-400);
 }
-
 [dir="rtl"] .section-title__title svg.icon {
     transform: rotate(180deg);
 }
@@ -83,11 +72,10 @@
 [dir="rtl"] .section-title__info {
     margin: 0 var(--spacing-100) 0 var(--spacing-300);
 }
-
 @media (min-width: 512px) {
     .section-title__title {
         font-size: var(--font-size-large-2);
-        font-weight: var(--font-weight-bold);
+        font-weight: var(--font-weight-600);
         line-height: 32px;
     }
     .section-title__subtitle {