@ebay/skin 19.14.3 → 19.16.0

package/dist/segmented-buttons/segmented-buttons.css

@@ -1,50 +1,47 @@
+:root {
+    --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);
+    --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);
+}
 .segmented-buttons {
-    border: 1px solid var(--color-stroke-default);
+    border: 1px solid var(--color-border-medium);
     border-radius: var(--segmented-button-border-radius, 24px);
     max-width: 720px;
     min-width: 215px;
     padding: var(--spacing-50);
 }
-
 .segmented-buttons > ul {
     display: flex;
     list-style: none;
     margin: 0;
     padding: 0;
 }
-
 .segmented-buttons > ul > li {
     display: flex;
     flex: 1;
 }
-
 .segmented-buttons > ul > li:not(:first-child) {
     margin-inline-start: var(--spacing-100);
 }
-
 .segmented-buttons__button {
     background-color: initial;
     border: none;
     border-radius: var(--btn-border-radius, 20px);
-    color: var(--color-foreground-on-primary);
+    color: var(--color-foreground-primary);
     font-family: inherit;
-    font-size: var(--font-size-default);
+    font-size: var(--font-size-body);
     min-height: calc(40px - var(--spacing-50) * 2);
     padding: var(--spacing-100) var(--spacing-200);
     width: 100%;
 }
-
 .segmented-buttons--large .segmented-buttons__button {
     min-height: calc(48px - var(--spacing-50) * 2);
 }
-
 .segmented-buttons__button-cell {
     align-items: center;
     display: flex;
     justify-content: center;
     width: 100%;
 }
-
 .segmented-buttons__button svg.icon {
     align-self: center;
 }
@@ -57,16 +54,39 @@
 .segmented-buttons__button svg.icon:only-child {
     margin: 0;
 }
-
 .segmented-buttons__button[aria-current] {
     background-color: var(--color-foreground-primary);
     color: var(--color-foreground-on-inverse);
 }
-
-.segmented-buttons__button:not([aria-current]):active {
-    background-color: var(--color-state-primary-active);
+.segmented-buttons__button:not([aria-current]) {
+    overflow: hidden;
+    position: relative;
+}
+.segmented-buttons__button:not([aria-current]):after {
+    background-color: var(--color-state-layer-neutral);
+    content: "";
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
+}
+.segmented-buttons__button:not([aria-current]):not(
+        [disabled],
+        [aria-disabled="true"]
+    ):hover:after,
+.segmented-buttons__button:not([aria-current])[href]:hover:after {
+    background-color: var(--color-state-layer-hover);
+}
+.segmented-buttons__button:not([aria-current]):not(
+        [disabled],
+        [aria-disabled="true"]
+    ):focus-visible:after,
+.segmented-buttons__button:not([aria-current])[href]:focus-visible:after {
+    background-color: var(--color-state-layer-focus);
 }
-.segmented-buttons__button:not([aria-current]):focus,
-.segmented-buttons__button:not([aria-current]):hover {
-    background-color: var(--color-state-primary-hover);
+.segmented-buttons__button:not([aria-current]):not(
+        [disabled],
+        [aria-disabled="true"]
+    ):active:after,
+.segmented-buttons__button:not([aria-current])[href]:active:after {
+    background-color: var(--color-state-layer-pressed);
 }

package/dist/select/select.css

@@ -1,13 +1,11 @@
 .select {
     color: var(--select-foreground-color, var(--color-foreground-primary));
-    font-size: var(--font-size-default);
+    font-size: var(--font-size-body);
     position: relative;
 }
-
 span.select {
     display: inline-block;
 }
-
 .select select {
     -webkit-appearance: none;
     appearance: none;
@@ -15,7 +13,7 @@ span.select {
         --select-background-color,
         var(--color-background-secondary)
     );
-    border-color: var(--select-border-color, var(--color-stroke-default));
+    border-color: var(--select-border-color, var(--color-border-medium));
     border-radius: var(--select-border-radius, var(--border-radius-50));
     border-style: solid;
     border-width: 1px;
@@ -26,7 +24,6 @@ span.select {
     padding: 0 var(--spacing-400) 0 var(--spacing-200);
     vertical-align: middle;
 }
-
 .select svg.icon--12 {
     height: 100%;
     pointer-events: none;
@@ -34,17 +31,14 @@ span.select {
     right: 16px;
     top: 0;
 }
-
 .select--large select {
     font-size: var(--font-size-medium);
     height: 48px;
 }
-
 .select--fluid,
 .select--fluid select {
     width: 100%;
 }
-
 .select--borderless select {
     background-color: initial;
     border: 0;
@@ -55,27 +49,24 @@ span.select {
     background-color: initial;
     text-decoration: underline;
 }
-
 .select select:focus {
     background-color: var(
         --select-focus-background-color,
         var(--color-background-primary)
     );
 }
-
 .select select:focus:not(:read-only) {
     background-color: var(
         --select-focus-background-color,
         var(--color-background-primary)
     );
-    border-color: var(--select-focus-border-color, var(--color-stroke-default));
+    border-color: var(--select-focus-border-color, var(--color-border-medium));
     outline: 0;
     text-decoration: underline;
 }
 .select select::-ms-expand {
     display: none;
 }
-
 .select select[disabled] {
     border-color: var(
         --textbox-disabled-border-color,
@@ -87,23 +78,20 @@ span.select {
     );
     opacity: 1;
 }
-
 .select select[disabled] + svg {
     color: var(
         --select-disabled-foregound-color,
         var(--color-foreground-on-disabled)
     );
 }
-
 .select select[readonly] {
     background-color: initial;
     border: none;
 }
-
 .select select[aria-invalid="true"] {
     border-color: var(
         --select-invalid-border-color,
-        var(--color-stroke-attention)
+        var(--color-border-attention)
     );
     border-style: solid;
     border-width: 1px;
@@ -113,7 +101,7 @@ span.select {
         --select-focus-background-color,
         var(--color-background-primary)
     );
-    border-color: var(--select-focus-border-color, var(--color-stroke-default));
+    border-color: var(--select-focus-border-color, var(--color-border-medium));
 }
 [dir="rtl"] .select > select {
     padding-left: 30px;

package/dist/selection-chip/selection-chip.css

@@ -1,3 +1,8 @@
+:root {
+    --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);
+    --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);
+}
+
 @keyframes fill-horizontal-background {
     0% {
         background-size: 0 100%;
@@ -10,19 +15,20 @@
         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: 1px solid var(--color-border-medium);
     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);
+    font-size: var(--font-size-body);
     gap: var(--spacing-75);
     height: var(--spacing-400);
     justify-content: space-between;
@@ -34,31 +40,37 @@
         var(--motion-easing-quick-enter);
     vertical-align: bottom;
 }
+
 .selection-chip:active {
     transform: scale(0.97);
 }
+
 .selection-chip {
     overflow: hidden;
     position: relative;
 }
+
 .selection-chip:after {
-    background-color: var(--state-layer-neutral);
+    background-color: var(--color-state-layer-neutral);
     content: "";
     inset: 0;
     pointer-events: none;
     position: absolute;
 }
+
 .selection-chip:not([disabled], [aria-disabled="true"]):hover:after,
 .selection-chip[href]:hover:after {
-    background-color: var(--state-layer-hover);
+    background-color: var(--color-state-layer-hover);
 }
-.selection-chip:not([disabled], [aria-disabled="true"]):focus:after,
-.selection-chip[href]:focus:after {
-    background-color: var(--state-layer-focus);
+
+.selection-chip:not([disabled], [aria-disabled="true"]):focus-visible:after,
+.selection-chip[href]:focus-visible:after {
+    background-color: var(--color-state-layer-focus);
 }
+
 .selection-chip:not([disabled], [aria-disabled="true"]):active:after,
 .selection-chip[href]:active:after {
-    background-color: var(--state-layer-pressed);
+    background-color: var(--color-state-layer-pressed);
 }
 
 .selection-chip--animated .selection-chip__trailing {
@@ -82,33 +94,37 @@
     overflow: hidden;
     position: relative;
 }
+
 .selection-chip[aria-pressed="true"]:after {
-    background-color: var(--state-layer-neutral-on-strong);
+    background-color: var(--color-state-layer-neutral-on-strong);
     content: "";
     inset: 0;
     pointer-events: none;
     position: absolute;
 }
+
 .selection-chip[aria-pressed="true"]:not(
         [disabled],
         [aria-disabled="true"]
     ):hover:after,
 .selection-chip[aria-pressed="true"][href]:hover:after {
-    background-color: var(--state-layer-hover-on-strong);
+    background-color: var(--color-state-layer-hover-on-strong);
 }
+
 .selection-chip[aria-pressed="true"]:not(
         [disabled],
         [aria-disabled="true"]
-    ):focus:after,
-.selection-chip[aria-pressed="true"][href]:focus:after {
-    background-color: var(--state-layer-focus-on-strong);
+    ):focus-visible:after,
+.selection-chip[aria-pressed="true"][href]:focus-visible:after {
+    background-color: var(--color-state-layer-focus-on-strong);
 }
+
 .selection-chip[aria-pressed="true"]:not(
         [disabled],
         [aria-disabled="true"]
     ):active:after,
 .selection-chip[aria-pressed="true"][href]:active:after {
-    background-color: var(--state-layer-pressed-on-strong);
+    background-color: var(--color-state-layer-pressed-on-strong);
 }
 
 .selection-chip--animated[aria-pressed="true"] {

package/dist/signal/signal.css

@@ -18,7 +18,7 @@
 }
 
 .signal--recent {
-    color: var(--signal-recent-color, var(--color-foreground-confirmation));
+    color: var(--signal-recent-color, var(--color-foreground-success));
 }
 
 .signal--time-sensitive {

package/dist/skeleton/skeleton.css

@@ -18,19 +18,16 @@
     animation: skeleton-fade-in var(--motion-duration-medium-2)
         var(--motion-easing-continuous);
 }
-
 ::view-transition-old(skeleton-transition-*) {
     animation: skeleton-fade-out var(--motion-duration-short-3)
         var(--motion-easing-continuous);
 }
-
 .skeleton {
     container-name: skeleton-container;
     container-type: inline-size;
     cursor: progress;
     width: 100%;
 }
-
 .skeleton__avatar,
 .skeleton__button,
 .skeleton__image,
@@ -44,64 +41,52 @@
     height: 48px;
     width: 48px;
 }
-
 .skeleton__button {
     border-radius: var(--btn-border-radius, 20px);
     height: 40px;
 }
-
 .skeleton__button--small {
     border-radius: var(--btn-border-radius, 16px);
     height: 32px;
 }
-
 .skeleton__button--large {
     border-radius: var(--btn-border-radius, 24px);
     height: 48px;
 }
-
 .skeleton__text {
     border-radius: var(--text-border-radius, 3px);
     height: 16px;
     width: calc(100% - var(--spacing-300));
 }
-
 .skeleton__text:after {
     height: 16px;
     margin-top: calc(16px + var(--spacing-100));
 }
-
 .skeleton__text--large {
     height: 24px;
 }
-
 .skeleton__text--large:after {
     height: 24px;
     margin-top: calc(24px + var(--spacing-100));
 }
-
 .skeleton__text--multiline {
     margin-bottom: var(--spacing-300);
     position: relative;
     width: calc(100% - var(--spacing-300));
 }
-
 .skeleton__text--multiline:after {
     background: inherit;
     content: "";
     position: absolute;
     width: calc(100% - var(--spacing-700));
 }
-
 .skeleton__text--large.skeleton__text--multiline {
     margin-bottom: var(--spacing-400);
 }
-
 .skeleton__textbox {
     border-radius: var(--textbox-border-radius, var(--border-radius-50));
     height: 48px;
 }
-
 .skeleton__image {
     border-radius: var(--image-border-radius, var(--border-radius-50));
     height: 100%;
@@ -116,7 +101,6 @@
     top: 0;
     width: 100%;
 }
-
 span.skeleton__avatar,
 span.skeleton__button,
 span.skeleton__image,
@@ -124,7 +108,6 @@ span.skeleton__text,
 span.skeleton__textbox {
     display: inline-block;
 }
-
 span.skeleton__avatar:not(:last-child),
 span.skeleton__button:not(:last-child),
 span.skeleton__image:not(:last-child),
@@ -132,7 +115,6 @@ span.skeleton__text:not(:last-child),
 span.skeleton__textbox:not(:last-child) {
     margin-inline-end: var(--spacing-100);
 }
-
 div.skeleton__avatar:not(:last-child),
 div.skeleton__button:not(:last-child),
 div.skeleton__image:not(:last-child),
@@ -140,23 +122,18 @@ div.skeleton__text:not(:last-child),
 div.skeleton__textbox:not(:last-child) {
     margin-block-end: var(--spacing-150);
 }
-
 .skeleton--on-secondary {
     --skeleton-background: var(--color-loading-fill-on-secondary);
 }
-
 .skeleton--purple {
-    --skeleton-background: var(--color-loading-ai-gradient-purple-subtle);
+    --skeleton-background: var(--color-gradient-ai-purple-subtle);
 }
-
 .skeleton--green {
-    --skeleton-background: var(--color-loading-ai-gradient-green-subtle);
+    --skeleton-background: var(--color-gradient-ai-green-subtle);
 }
-
 .skeleton--blue {
-    --skeleton-background: var(--color-loading-ai-gradient-blue-subtle);
+    --skeleton-background: var(--color-gradient-ai-blue-subtle);
 }
-
 @media (prefers-reduced-motion: no-preference) {
     @keyframes on-primary {
         0% {

package/dist/snackbar-dialog/snackbar-dialog.css

@@ -28,52 +28,42 @@
     will-change: opacity, transform;
     z-index: 2;
 }
-
 .snackbar-dialog--transition {
     transition:
         opacity 0.2s cubic-bezier(0.21, 0.31, 1, 1.22) 0s,
         transform 0.2s cubic-bezier(0.21, 0.31, 1, 1.22) 0s;
 }
-
 .snackbar-dialog--hide-init,
 .snackbar-dialog--show {
     display: block;
     opacity: 1;
     transform: translateY(0);
 }
-
 .snackbar-dialog--hide,
 .snackbar-dialog--show-init {
     display: block;
     opacity: 0;
     transform: translateY(110%);
 }
-
 .snackbar-dialog__window {
     display: flex;
     margin: var(--spacing-200) var(--spacing-300);
 }
-
 .snackbar-dialog__window--column {
     flex-direction: column;
 }
-
 .snackbar-dialog__main {
     margin-inline-end: var(--spacing-400);
 }
-
 .snackbar-dialog__main p {
     margin: 0;
 }
-
 .snackbar-dialog__actions {
     margin-inline-start: auto;
 }
-
 .snackbar-dialog__window--column .snackbar-dialog__actions {
     margin-top: var(--spacing-200);
 }
-
 .snackbar-dialog__actions .fake-link {
     color: var(
         --snackbar-dialog-foreground-color,
@@ -91,7 +81,6 @@
     );
     text-decoration: underline;
 }
-
 @media (min-width: 512px) {
     .snackbar-dialog {
         bottom: 20px;

package/dist/star-rating/star-rating.css

@@ -8,12 +8,10 @@ svg.star-rating {
     vertical-align: middle;
     width: 84px;
 }
-
 svg.star-rating__icon {
     height: 16px;
     width: 16px;
 }
-
 div.star-rating[data-stars^="1"] svg:nth-child(-n + 1),
 div.star-rating[data-stars^="2"] svg:nth-child(-n + 2),
 div.star-rating[data-stars^="3"] svg:nth-child(-n + 3),

package/dist/star-rating-select/star-rating-select.css

@@ -2,13 +2,11 @@ div.star-rating-select {
     cursor: pointer;
     display: inline-block;
 }
-
 span.star-rating-select__radio {
     display: inline-flex;
     position: relative;
     vertical-align: text-top;
 }
-
 span.star-rating-select__radio svg {
     display: inline-block;
     fill: currentColor;
@@ -17,17 +15,14 @@ span.star-rating-select__radio svg {
     stroke-width: 0;
     vertical-align: middle;
 }
-
 span.star-rating-select__radio-icon {
     display: inline-flex;
     outline-offset: 1px;
 }
-
 span.star-rating-select__radio-icon svg {
     height: 16px;
     width: 16px;
 }
-
 span.star-rating-select__radio input.star-rating-select__control[type="radio"] {
     cursor: pointer;
     font-size: 100%;
@@ -52,11 +47,9 @@ span.star-rating-select__radio
     + span.star-rating-select__radio-icon {
     outline: none;
 }
-
 div.star-rating-select span.star-rating-select__radio-icon svg {
     --color-star-rating-full: var(--color-star-rating-unfilled, transparent);
 }
-
 div.star-rating-select
     input.star-rating-select__control--filled
     + span.star-rating-select__radio-icon

package/dist/svg/icon/icon-stepper-confirmation-24.svg

@@ -1,6 +1,6 @@
 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
   <path
     d="M0 12C0 5.373 5.373 0 12 0c3.183 0 6.235 1.264 8.485 3.515A11.996 11.996 0 0124 12c0 6.627-5.373 12-12 12S0 18.627 0 12zm10.71 4.71l8-8h-.01a1 1 0 00-1.41-1.41L10 14.59 6.71 11.3a1 1 0 00-1.41 1.41l4 4a1 1 0 001.41 0z"
-    fill="var(--progress-stepper-confirmation-icon, var(--color-background-information))"
+    fill="var(--progress-stepper-confirmation-icon, var(--color-background-accent))"
   />
 </svg>

package/dist/svg/icon/icon-stepper-current-24.svg

@@ -3,6 +3,6 @@
     fill-rule="evenodd"
     d="M2 12C2 6.476 6.478 2 12 2s10 4.476 10 10c0 5.522-4.478 10-10 10S2 17.522 2 12ZM12 0C5.373 0 0 5.372 0 12c0 6.627 5.373 12 12 12s12-5.373 12-12c0-6.628-5.373-12-12-12Zm0 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z"
     clip-rule="evenodd"
-    fill="var(--progress-stepper-current-icon, var(--color-background-information))"
+    fill="var(--progress-stepper-current-icon, var(--color-background-accent))"
   />
 </svg>

package/dist/svg/icon/icon-stepper-upcoming-24.svg

@@ -3,6 +3,6 @@
     fill-rule="evenodd"
     clip-rule="evenodd"
     d="M12 2.5C6.47759 2.5 2 6.97649 2 12.5C2 18.0223 6.47775 22.5 12 22.5C17.5223 22.5 22 18.0223 22 12.5C22 6.97649 17.5224 2.5 12 2.5ZM0 12.5C0 5.87176 5.37318 0.5 12 0.5C18.6268 0.5 24 5.87176 24 12.5C24 19.1268 18.6268 24.5 12 24.5C5.37318 24.5 0 19.1268 0 12.5Z"
-    fill="var(--progress-stepper-upcoming-icon, var(--color-stroke-default))"
+    fill="var(--progress-stepper-upcoming-icon, var(--color-border-medium))"
   />
 </svg>

package/dist/svg/icons.svg

@@ -10382,7 +10382,7 @@
   <symbol viewBox="0 0 24 24" id="icon-stepper-confirmation-24">
     <path
       d="M0 12C0 5.373 5.373 0 12 0c3.183 0 6.235 1.264 8.485 3.515A11.996 11.996 0 0124 12c0 6.627-5.373 12-12 12S0 18.627 0 12zm10.71 4.71l8-8h-.01a1 1 0 00-1.41-1.41L10 14.59 6.71 11.3a1 1 0 00-1.41 1.41l4 4a1 1 0 001.41 0z"
-      fill="var(--progress-stepper-confirmation-icon, var(--color-background-information))"
+      fill="var(--progress-stepper-confirmation-icon, var(--color-background-accent))"
     />
   </symbol>
   <symbol viewBox="0 0 24 24" id="icon-stepper-current-24">
@@ -10390,7 +10390,7 @@
       fill-rule="evenodd"
       d="M2 12C2 6.476 6.478 2 12 2s10 4.476 10 10c0 5.522-4.478 10-10 10S2 17.522 2 12ZM12 0C5.373 0 0 5.372 0 12c0 6.627 5.373 12 12 12s12-5.373 12-12c0-6.628-5.373-12-12-12Zm0 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z"
       clip-rule="evenodd"
-      fill="var(--progress-stepper-current-icon, var(--color-background-information))"
+      fill="var(--progress-stepper-current-icon, var(--color-background-accent))"
     />
   </symbol>
   <symbol viewBox="0 0 24 25" fill="none" id="icon-stepper-upcoming-24">
@@ -10398,7 +10398,7 @@
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M12 2.5C6.47759 2.5 2 6.97649 2 12.5C2 18.0223 6.47775 22.5 12 22.5C17.5223 22.5 22 18.0223 22 12.5C22 6.97649 17.5224 2.5 12 2.5ZM0 12.5C0 5.87176 5.37318 0.5 12 0.5C18.6268 0.5 24 5.87176 24 12.5C24 19.1268 18.6268 24.5 12 24.5C5.37318 24.5 0 19.1268 0 12.5Z"
-      fill="var(--progress-stepper-upcoming-icon, var(--color-stroke-default))"
+      fill="var(--progress-stepper-upcoming-icon, var(--color-border-medium))"
     />
   </symbol>
   <symbol viewBox="0 0 16 16" id="icon-store-16">