@ebay/skin 19.15.0 → 19.17.0

package/dist/education-notice/education-notice.css

@@ -8,22 +8,19 @@
         var(--border-radius-100)
     );
     color: var(--color-foreground-primary);
-    font-size: var(--font-size-default);
+    font-size: var(--font-size-body);
     padding: var(--spacing-300);
 }
-
 .education-notice--prominent {
     background-color: var(
         --education-notice-education-background-color,
         var(--color-background-education)
     );
 }
-
 .education-notice__header {
     align-items: center;
     display: flex;
 }
-
 .education-notice__title {
     flex-grow: 1;
     font-size: var(--font-size-medium);
@@ -32,23 +29,18 @@
     margin: 0;
     margin-inline-start: var(--spacing-150);
 }
-
 .education-notice__main {
     margin-top: var(--spacing-200);
 }
-
 .education-notice__dismiss {
     margin-inline-start: var(--spacing-150);
 }
-
 .education-notice button.icon-btn {
     background-color: initial;
 }
-
 .education-notice__header .icon--prominent {
     color: var(--color-foreground-accent);
 }
-
 .education-notice__footer a {
     color: var(
         --education-notice-foreground-color,
@@ -56,29 +48,25 @@
     );
     white-space: nowrap;
 }
-
 .education-notice__footer a,
 .education-notice__footer button.fake-link {
-    font-size: var(--font-size-default);
+    font-size: var(--font-size-body);
     font-weight: 700;
 }
-
 .education-notice__main p {
-    font-size: var(--font-size-default);
+    font-size: var(--font-size-body);
     margin: 0;
 }
-
 .education-notice__footer {
     margin-top: var(--spacing-200);
 }
-
 .education-notice__header button.fake-link,
 .education-notice__header button.fake-link:hover {
     color: var(
         --education-notice-foreground-color,
         var(--color-foreground-primary)
     );
-    font-size: var(--font-size-default);
+    font-size: var(--font-size-body);
     font-weight: 700;
     height: 24px;
     width: 24px;

package/dist/eek/eek.css

@@ -7,11 +7,9 @@
     height: 24px;
     position: relative;
 }
-
 .eek--large {
     height: 32px;
 }
-
 .eek__container {
     align-items: center;
     border: 1px solid #000;
@@ -20,21 +18,17 @@
     display: inline-flex;
     flex-direction: row-reverse;
 }
-
 .eek .icon--eek-arrow {
     rotate: 180deg;
     width: 9px;
 }
-
 .eek--large .icon--eek-arrow {
     width: 12.5px;
 }
-
 .eek__arrow {
     overflow: hidden;
     width: 17px;
 }
-
 .eek__arrow:before {
     border: 0.5px solid #000;
     border-radius: 2px;
@@ -47,67 +41,53 @@
     transform: rotate(45deg);
     width: 19.7989898732px;
 }
-
 .eek--rating-1 .eek__container {
     background: #00a650;
 }
-
 .eek--rating-1 svg.icon--eek-arrow {
     fill: #00a650;
 }
-
 .eek--rating-2 .eek__container {
     background: #4dbd38;
 }
-
 .eek--rating-2 svg.icon--eek-arrow {
     fill: #4dbd38;
 }
-
 .eek--rating-3 .eek__container {
     background: #b3db18;
 }
-
 .eek--rating-3 svg.icon--eek-arrow {
     fill: #b3db18;
 }
-
 .eek--rating-4 .eek__container {
     background: #fff200;
 }
-
 .eek--rating-4 svg.icon--eek-arrow {
     fill: #fff200;
 }
-
 .eek--rating-5 .eek__container {
     background: #fab20b;
 }
-
 .eek--rating-5 svg.icon--eek-arrow {
     fill: #fab20b;
 }
-
 .eek--rating-6 .eek__container {
     background: #f25c19;
 }
-
 .eek--rating-6 svg.icon--eek-arrow {
     fill: #f25c19;
 }
-
 .eek--rating-7 .eek__container {
     background: #ed1c24;
 }
-
 .eek--rating-7 svg.icon--eek-arrow {
     fill: #ed1c24;
 }
-
 .eek__rating {
     color: #fff;
     display: inline-block;
     font-size: 18px;
+    line-height: 10px;
     margin-inline-end: 8px;
     text-shadow:
         -0.5px 0.5px 0 #000,
@@ -115,11 +95,9 @@
         0.5px -0.5px 0 #000,
         -0.5px -0.5px 0 #000;
 }
-
 .eek--large .eek__rating {
     font-size: 24px;
 }
-
 .eek__rating-range {
     align-items: center;
     background-color: #fff;
@@ -127,29 +105,25 @@
     display: inline-flex;
     flex-direction: column;
     height: 20px;
+    line-height: 10px;
     margin: 1px;
     padding: 0 1px;
 }
-
 .eek--large .eek__rating-range {
     height: 28px;
 }
-
 .eek__rating-range > .icon--eek-range-arrow {
     height: 6px;
     width: 5px;
 }
-
 .eek--large .eek__rating-range > .icon--eek-range-arrow {
     height: 7px;
     width: 6px;
 }
-
 .eek__rating-range > span {
     font-size: 8px;
     height: 8px;
 }
-
 .eek--large .eek__rating-range > span {
     font-size: 10px;
     height: 10px;

package/dist/field/field.css

@@ -1,16 +1,13 @@
 span.field {
     display: inline-block;
 }
-
 span.field + span.field {
     margin-left: 8px;
 }
-
 .field-group,
 div.field {
     margin: 16px 0;
 }
-
 .field-group {
     display: flex;
 }
@@ -20,73 +17,60 @@ div.field {
 span.field--table {
     display: inline-table;
 }
-
 div.field--table {
     display: table;
 }
-
 .field__description--group {
     display: flex;
     justify-content: flex-end;
 }
-
 .field__description--group > :last-child {
     margin-inline-start: 5px;
     text-align: right;
 }
-
 .field__description--group > :first-child {
     flex: 1;
 }
 .field__label {
     margin-right: 8px;
 }
-
 .field__description {
     color: var(--field-description-color, var(--color-foreground-secondary));
     font-size: var(--font-size-small);
     line-height: var(--spacing-200);
     margin-top: var(--spacing-50);
 }
-
 .field__description--confirmation {
     color: var(
         --field-description-confirmation-color,
-        var(--color-foreground-confirmation)
+        var(--color-foreground-success)
     );
 }
-
 .field__description--information {
     color: var(
         --field-description-information-color,
-        var(--color-foreground-information)
+        var(--color-foreground-accent)
     );
 }
-
 .field__description--attention {
     color: var(
         --field-description-attention-color,
         var(--color-foreground-attention)
     );
 }
-
 .field__group > .field__description,
 .field__group > .field__label {
     align-self: center;
 }
-
 span.field__group {
     display: inline-flex;
 }
-
 div.field__group {
     display: flex;
 }
-
 .field__control + span.field__description {
     margin-left: 8px;
 }
-
 .field__description .icon {
     display: inline-block;
     margin-right: var(--spacing-50);
@@ -94,7 +78,6 @@ div.field__group {
 div.field__description {
     margin: var(--spacing-100) 0 0;
 }
-
 .field__row {
     display: table-row;
 }
@@ -121,16 +104,13 @@ div.field__description {
     margin-left: 4px;
     margin-right: auto;
 }
-
 .field__label--stacked {
     display: block;
     margin-bottom: 8px;
 }
-
 .field__label--disabled {
     color: var(--field-label-color-disabled, var(--color-foreground-disabled));
 }
-
 .field--fluid,
 .field__control--fluid,
 .field__group--fluid {
@@ -140,16 +120,13 @@ div.field__description {
     display: inline-block;
     margin-top: 16px;
 }
-
 .field--align-top .textbox {
     vertical-align: top;
 }
-
 .field__group--align-top > .field__label {
     align-self: flex-start;
     margin-top: 16px;
 }
-
 [dir="rtl"] .field__description--group > :last-child {
     text-align: left;
 }

package/dist/file-input/file-input.css

@@ -4,13 +4,11 @@ div.file-input {
     grid-template-columns: 1fr;
     grid-template-rows: 1fr;
 }
-
 div.file-input__container,
 input.file-input__input[type="file"] {
     border-radius: var(--file-input-border-radius, var(--border-radius-100));
     grid-area: center;
 }
-
 div.file-input__container {
     background-color: var(
         --file-input-background-color,
@@ -25,14 +23,12 @@ div.file-input__container {
     pointer-events: none;
     z-index: 1;
 }
-
 div.file-input___container--dragged-over {
     background-color: var(
         --file-input-dragged-over-background-color,
         var(--color-background-tertiary)
     );
 }
-
 div.file-input__upload-icon {
     align-self: center;
     background-color: var(
@@ -42,13 +38,11 @@ div.file-input__upload-icon {
     border-radius: 99px;
     padding: var(--spacing-150);
 }
-
 div.file-input__upload-icon svg {
     fill: var(--file-input-upload-icon-fill, var(--color-foreground-primary));
     height: var(--spacing-300);
     width: var(--spacing-300);
 }
-
 div.file-input__content {
     align-items: start;
     display: flex;
@@ -56,33 +50,29 @@ div.file-input__content {
     flex-grow: 1;
     justify-content: center;
 }
-
 .file-input__content-header {
     color: var(
         --file-input-content-header-color,
         var(--color-foreground-primary)
     );
-    font-size: var(--font-size-14);
+    font-size: var(--font-size-body);
     font-weight: 700;
     line-height: var(--spacing-250);
     margin-block: 0 var(--spacing-50);
 }
-
 span.file-input__content-subheader {
     color: var(
         --file-input-content-subheader-color,
         var(--color-foreground-secondary)
     );
-    font-size: var(--font-size-12);
+    font-size: var(--font-size-small);
     font-weight: 400;
     line-height: var(--spacing-200);
     margin-block-end: var(--spacing-100);
 }
-
 span.file-input__content-cta {
     text-decoration-line: underline;
 }
-
 @media screen and (min-width: 768px) {
     div.file-input__container {
         gap: var(--spacing-300);
@@ -92,11 +82,11 @@ span.file-input__content-cta {
         padding: var(--spacing-300);
     }
     .file-input__content-header {
-        font-size: var(--font-size-16);
+        font-size: var(--font-size-medium);
         line-height: var(--spacing-300);
     }
     span.file-input__content-subheader {
-        font-size: var(--font-size-14);
+        font-size: var(--font-size-body);
         line-height: var(--spacing-250);
     }
 }

package/dist/file-preview-card/file-preview-card.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);
+}
+
 .file-preview-card {
     display: flex;
     flex-direction: column;
@@ -79,7 +84,7 @@ video.file-preview-card__asset {
     border-radius: 1em;
     bottom: var(--spacing-100);
     display: flex;
-    font-size: var(--font-size-12);
+    font-size: var(--font-size-small);
     font-weight: 400;
     gap: var(--spacing-50);
     left: var(--spacing-100);
@@ -98,23 +103,51 @@ video.file-preview-card__asset {
     width: var(--spacing-150);
 }
 
+.file-preview-card__see-more {
+    overflow: hidden;
+    position: relative;
+}
+
+.file-preview-card__see-more:after {
+    background-color: var(--color-state-layer-neutral);
+    content: "";
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
+}
+
+.file-preview-card__see-more:not(
+        [disabled],
+        [aria-disabled="true"]
+    ):hover:after,
+.file-preview-card__see-more[href]:hover:after {
+    background-color: var(--color-state-layer-hover);
+}
+
+.file-preview-card__see-more:not(
+        [disabled],
+        [aria-disabled="true"]
+    ):focus-visible:after,
+.file-preview-card__see-more[href]:focus-visible:after {
+    background-color: var(--color-state-layer-focus);
+}
+
+.file-preview-card__see-more:not(
+        [disabled],
+        [aria-disabled="true"]
+    ):active:after,
+.file-preview-card__see-more[href]:active:after {
+    background-color: var(--color-state-layer-pressed);
+}
+
 .file-preview-card__see-more {
     aspect-ratio: 1/1;
-    background-color: rgb(
-        var(
-            --file-preview-card-see-more-background-color-rgb,
-            var(--color-background-strong-rgb)
-        ),
-        0.5
-    );
+    background-color: var(--color-background-inverse);
     border: none;
     border-radius: 50%;
-    color: var(
-        --file-preview-card-see-more-color,
-        var(--color-foreground-on-strong)
-    );
+    color: var(--color-foreground-on-strong);
     font-family: inherit;
-    font-size: var(--font-size-14);
+    font-size: var(--font-size-body);
     font-weight: 700;
     left: 50%;
     line-height: var(--spacing-250);
@@ -125,36 +158,6 @@ video.file-preview-card__asset {
     z-index: 1;
 }
 
-.file-preview-card__see-more:active,
-.file-preview-card__see-more:focus-visible,
-.file-preview-card__see-more:hover {
-    color: var(
-        --file-preview-card-see-more-interactive-color,
-        var(--color-foreground-primary)
-    );
-}
-
-.file-preview-card__see-more:focus-visible,
-.file-preview-card__see-more:hover {
-    background-color: rgb(
-        var(
-            --file-preview-card-see-more-interactive-background-color-rgb,
-            var(--color-state-secondary-hover-rgb)
-        ),
-        0.5
-    );
-}
-
-.file-preview-card__see-more:active {
-    background-color: rgb(
-        var(
-            --file-preview-card-see-more-interactive-active-background-color-rgb,
-            var(--color-state-secondary-active-rgb)
-        ),
-        0.5
-    );
-}
-
 .file-preview-card__footer {
     display: grid;
 }

package/dist/file-preview-card-group/file-preview-card-group.css

@@ -1,7 +1,6 @@
 div.file-preview-card-group {
     container: file-preview-cards-container/inline-size;
 }
-
 div.file-preview-card-group ul {
     display: grid;
     gap: var(--spacing-100);
@@ -11,11 +10,9 @@ div.file-preview-card-group ul {
     padding: 0;
     width: 100%;
 }
-
 div.file-preview-card-group ul li {
     height: max-content;
 }
-
 @supports not (contain: inline-size) {
     @media (min-width: 512px) {
         div.file-preview-card-group ul {