@ebay/skin 19.15.0 → 19.16.0

package/dist/calendar/calendar.css

@@ -1,3 +1,7 @@
+:root {
+    --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);
+    --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);
+}
 .calendar {
     color: var(--calendar-color-token, var(--color-foreground-primary));
     display: table;
@@ -5,72 +9,59 @@
 .calendar__header {
     display: table-caption;
 }
-
 .calendar__header--inner {
     align-items: center;
     display: flex;
     justify-content: space-between;
 }
-
 .calendar__header h3 {
     flex-grow: 1;
     margin: 0;
     text-align: center;
     width: 0;
 }
-
 .calendar__header h3:nth-child(2) {
     margin-right: 40px;
 }
-
 .calendar__header h3:nth-last-child(2) {
     margin-left: 40px;
 }
-
 .calendar__header h3:nth-child(2):nth-last-child(2) {
     margin: 0;
 }
-
 .calendar__header .icon-btn svg {
     width: var(--spacing-200);
 }
 .calendar__body {
     display: table-row;
 }
-
 .calendar__month {
     box-sizing: initial;
     display: table-cell;
     width: var(--calendar-month-width, 100vw);
 }
-
 .calendar__month + .calendar__month {
     padding-left: var(--spacing-200);
 }
 .calendar__month > table > caption {
     text-align: left;
 }
-
 .calendar__header + .calendar__body > .calendar__month > table > caption {
     display: none;
 }
-
 .calendar__month > table {
     border-spacing: 0 var(--spacing-150);
     width: 100%;
 }
-
 .calendar__month th {
     color: var(--calendar-day-label-color, var(--color-foreground-secondary));
     font-weight: 400;
     line-height: var(--spacing-125);
 }
-
 .calendar__month td {
     padding: 0;
     text-align: center;
 }
-
 .calendar__month td > * {
     align-items: center;
     background: none;
@@ -96,27 +87,52 @@
     );
     border-style: solid;
 }
-
 .calendar__month td > .calendar__cell--disabled,
 .calendar__month td > :disabled {
     color: var(--calendar-day-disabled-color, var(--color-foreground-disabled));
 }
-
+.calendar__month td:not(.calendar__range, .calendar__cell--selected) > button {
+    overflow: hidden;
+    position: relative;
+}
 .calendar__month
     td:not(.calendar__range, .calendar__cell--selected)
-    > button:not(:disabled):hover {
-    background-color: var(
-        --calendar-day-hover-background-color,
-        var(--color-state-primary-hover)
-    );
+    > button:after {
+    background-color: var(--color-state-layer-neutral);
+    content: "";
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
+}
+.calendar__month
+    td:not(.calendar__range, .calendar__cell--selected)
+    > button:not([disabled], [aria-disabled="true"]):hover:after,
+.calendar__month
+    td:not(.calendar__range, .calendar__cell--selected)
+    > button[href]:hover:after {
+    background-color: var(--color-state-layer-hover);
+}
+.calendar__month
+    td:not(.calendar__range, .calendar__cell--selected)
+    > button:not([disabled], [aria-disabled="true"]):focus-visible:after,
+.calendar__month
+    td:not(.calendar__range, .calendar__cell--selected)
+    > button[href]:focus-visible:after {
+    background-color: var(--color-state-layer-focus);
+}
+.calendar__month
+    td:not(.calendar__range, .calendar__cell--selected)
+    > button:not([disabled], [aria-disabled="true"]):active:after,
+.calendar__month
+    td:not(.calendar__range, .calendar__cell--selected)
+    > button[href]:active:after {
+    background-color: var(--color-state-layer-pressed);
 }
-
 .calendar__month
     td:not(.calendar__range, .calendar__cell--selected)
     > button:not(:disabled):active {
     font-weight: 700;
 }
-
 .calendar__month td.calendar__cell--selected > * {
     background-color: var(
         --calendar-day-selected-background-color,
@@ -129,13 +145,9 @@
     font-weight: 700;
 }
 .calendar__range {
-    background-color: var(
-        --calendar-day-range-background-color,
-        var(--color-state-secondary-active)
-    );
+    background-color: var(--color-state-layer-pressed);
     position: relative;
 }
-
 .calendar__range:before {
     border: solid transparent;
     border-width: 1px 0;
@@ -147,41 +159,32 @@
     right: 0;
     top: 0;
 }
-
 .calendar__range--start:before {
     border-left-width: 1px;
 }
-
 .calendar__range--end:before {
     border-right-width: 1px;
 }
-
 .calendar__range--start {
     background: linear-gradient(
         to right,
         transparent 50%,
-        var(--color-state-secondary-active) 50%
+        var(--color-state-layer-pressed) 50%
     );
 }
-
 .calendar__range--end {
     background: linear-gradient(
         to left,
         transparent 50%,
-        var(--color-state-secondary-active) 50%
+        var(--color-state-layer-pressed) 50%
     );
 }
-
 .calendar__range--start.calendar__range--end {
     background: transparent;
 }
-
 .calendar__range--end:not(.calendar__cell--selected)
     > :not(:disabled, [aria-disabled="true"]),
 .calendar__range--start:not(.calendar__cell--selected)
     > :not(:disabled, [aria-disabled="true"]) {
-    background-color: var(
-        --calendar-day-range-end,
-        var(--color-state-secondary-active)
-    );
+    background-color: var(--color-state-layer-pressed);
 }

package/dist/card/card.css

@@ -14,7 +14,7 @@
 
 .card--outlined {
     background-color: inherit;
-    border: 1px solid var(--color-stroke-subtle);
+    border: 1px solid var(--color-border-subtle);
 }
 
 a.card {
@@ -151,12 +151,12 @@ button.card:hover {
 
 @keyframes card-focus-animation {
     0% {
-        outline-color: var(--color-stroke-accent);
+        outline-color: var(--color-border-accent);
         outline-offset: 4px;
         outline-width: 6px;
     }
     to {
-        outline-color: var(--color-stroke-accent);
+        outline-color: var(--color-border-accent);
         outline-offset: 0;
         outline-width: 2px;
     }

package/dist/carousel/carousel.css

@@ -1,3 +1,7 @@
+:root {
+    --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);
+    --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);
+}
 .carousel {
     position: relative;
 }
@@ -48,7 +52,6 @@
 .carousel__playback .icon--play {
     padding-left: 1px;
 }
-
 .carousel__list--image-treatment > li {
     align-items: center;
     border-radius: 8px;
@@ -74,7 +77,6 @@
     max-width: 100%;
     object-fit: contain;
 }
-
 .carousel__list--image-treatment-large > li {
     align-items: center;
     border-radius: 16px;
@@ -100,21 +102,42 @@
     max-width: 100%;
     object-fit: contain;
 }
-
 div.carousel {
     margin: 16px 0;
 }
-
 .carousel__control {
-    align-items: center;
     background-color: var(
         --carousel-paddle-background-color,
         var(--color-background-primary)
     );
+    overflow: hidden;
+    position: relative;
+}
+.carousel__control:after {
+    background-color: var(--color-state-layer-neutral);
+    content: "";
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
+}
+.carousel__control:not([disabled], [aria-disabled="true"]):hover:after,
+.carousel__control[href]:hover:after {
+    background-color: var(--color-state-layer-hover);
+}
+.carousel__control:not([disabled], [aria-disabled="true"]):focus-visible:after,
+.carousel__control[href]:focus-visible:after {
+    background-color: var(--color-state-layer-focus);
+}
+.carousel__control:not([disabled], [aria-disabled="true"]):active:after,
+.carousel__control[href]:active:after {
+    background-color: var(--color-state-layer-pressed);
+}
+.carousel__control {
+    align-items: center;
     border: 1px solid;
     border-color: var(
         --carousel-paddle-border-color,
-        var(--color-stroke-subtle)
+        var(--color-border-subtle)
     );
     border-radius: 16px;
     box-shadow:
@@ -142,10 +165,7 @@ div.carousel {
     right: calc(var(--spacing-200) * -1);
 }
 .carousel__control svg {
-    color: var(
-        --carousel-paddle-foreground-color,
-        var(--color-foreground-primary)
-    );
+    color: var(--color-foreground-primary);
 }
 .carousel__control:focus:not(:focus-visible) {
     outline: none;
@@ -174,29 +194,16 @@ div.carousel {
 .carousel__control:focus[aria-disabled="true"] {
     opacity: 0.3;
 }
-.carousel__control:hover {
-    background-color: var(--color-state-primary-hover);
-    border-color: var(--color-state-primary-hover);
-}
 .carousel__control:hover svg {
-    color: var(
-        --carousel-paddle-hover-foreground-color,
-        var(--color-foreground-primary)
-    );
-}
-.carousel__control:active {
-    background-color: var(--color-state-primary-active);
+    color: var(--color-foreground-primary);
 }
-
 .carousel__playback:focus:not(:focus-visible) {
     outline: none;
 }
-
 span.carousel,
 span.carousel__container {
     display: inline-block;
 }
-
 .carousel__viewport--mask {
     -webkit-mask-image: linear-gradient(
         to right,
@@ -209,7 +216,6 @@ span.carousel__container {
         rgba(0, 0, 0, 0) 100%
     );
 }
-
 [dir="rtl"] .carousel__control--prev {
     left: unset;
     right: calc(var(--spacing-200) * -1);
@@ -292,15 +298,12 @@ span.carousel__container {
 .carousel.carousel--hidden-scrollbar:not(.carousel__autoplay) {
     overflow: hidden;
 }
-
 .carousel--hidden-scrollbar .carousel__container {
     margin-bottom: -80px;
 }
-
 .carousel--hidden-scrollbar .carousel__container .carousel__control {
     margin-top: -40px;
 }
-
 .carousel--hidden-scrollbar .carousel__container .carousel__list {
     padding-bottom: 80px;
 }

package/dist/ccd/ccd.css

@@ -11,12 +11,10 @@
         sans-serif;
     gap: 8px;
 }
-
 .ccd__charger-icon {
     height: 57px;
     width: 42px;
 }
-
 .ccd__description-figure {
     align-items: center;
     display: flex;
@@ -24,12 +22,10 @@
     justify-content: center;
     width: 39px;
 }
-
 .ccd__top-icon {
     height: 18px;
     width: 27px;
 }
-
 .ccd__body {
     align-items: center;
     border: 1px solid var(--color-foreground-primary);
@@ -37,9 +33,10 @@
     display: flex;
     flex-direction: column;
     font-size: 0.4375rem;
-    font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-600);
     height: 37px;
     justify-content: center;
+    line-height: 10px;
     overflow: hidden;
     text-align: center;
     width: 39px;

package/dist/checkbox/checkbox.css

@@ -3,40 +3,33 @@
     position: relative;
     vertical-align: text-bottom;
 }
-
 .checkbox__control[type="checkbox"] {
     height: 18px;
     min-width: 18px;
     width: 18px;
 }
-
 .checkbox--large .checkbox__control[type="checkbox"] {
     height: 24px;
     min-width: 24px;
     width: 24px;
 }
-
 span.checkbox__icon {
     display: inline-flex;
     height: 18px;
     outline-offset: 1px;
 }
-
 .checkbox--large span.checkbox__icon {
     height: 24px;
 }
 span.checkbox__icon[hidden] {
     display: inline-flex;
 }
-
 svg.checkbox__checked {
     color: var(--checkbox-checked-color, var(--color-foreground-primary));
 }
-
 svg.checkbox__unchecked {
     color: var(--checkbox-unchecked-color, var(--color-foreground-primary));
 }
-
 input.checkbox__control[type="checkbox"] {
     font-size: 100%;
     margin: 0;
@@ -45,7 +38,6 @@ input.checkbox__control[type="checkbox"] {
     position: absolute;
     z-index: 1;
 }
-
 .checkbox svg {
     display: inline-block;
     fill: currentColor;
@@ -56,18 +48,15 @@ input.checkbox__control[type="checkbox"] {
     vertical-align: middle;
     width: 18px;
 }
-
 .checkbox--large svg {
     height: 24px;
     width: 24px;
 }
-
 input.checkbox__control[type="checkbox"]
     + span.checkbox__icon
     svg.checkbox__checked {
     display: none;
 }
-
 input.checkbox__control[type="checkbox"]
     + span.checkbox__icon
     svg.checkbox__unchecked,
@@ -76,13 +65,11 @@ input.checkbox__control[type="checkbox"]:checked
     svg.checkbox__checked {
     display: inline-block;
 }
-
 input.checkbox__control[type="checkbox"]:checked
     + span.checkbox__icon
     svg.checkbox__unchecked {
     display: none;
 }
-
 input.checkbox__control[type="checkbox"][disabled] + span.checkbox__icon {
     opacity: 1;
 }
@@ -94,7 +81,6 @@ input.checkbox__control[type="checkbox"]:focus + span.checkbox__icon {
     outline-color: var(--checkbox-outline, var(--color-foreground-secondary));
     outline-offset: 2px;
 }
-
 input.checkbox__control[type="checkbox"]:focus:not(:focus-visible)
     + span.checkbox__icon {
     outline: none;

package/dist/chip/chip.css

@@ -5,7 +5,7 @@
     box-sizing: border-box;
     color: var(--color-foreground-on-strong);
     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;
@@ -15,14 +15,12 @@
     text-decoration: none;
     vertical-align: bottom;
 }
-
 .chip__text {
     overflow: hidden;
     padding: var(--spacing-75) 0;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
-
 .chip button.chip__button {
     align-items: center;
     background-color: initial;
@@ -39,7 +37,6 @@
     padding: 0;
     width: var(--spacing-300);
 }
-
 .chip button.chip__button:focus-visible {
     background-color: var(--state-layer-focus);
     outline-color: var(--color-foreground-on-strong);
@@ -47,7 +44,6 @@
     outline-style: solid;
     outline-width: 2px;
 }
-
 .chip button.chip__button:hover {
     background-color: var(--state-layer-hover);
 }

package/dist/chips-combobox/chips-combobox.css

@@ -1,17 +1,15 @@
 .chips-combobox {
     background-color: var(--color-background-secondary);
-    border: 1px solid var(--color-stroke-default);
+    border: 1px solid var(--color-border-medium);
     border-radius: var(--border-radius-50);
     display: inline-block;
     padding-block: var(--spacing-100);
     padding-inline: var(--spacing-100) var(--spacing-200);
     position: relative;
 }
-
 .chips-combobox--fluid {
     display: block;
 }
-
 .chips-combobox__items {
     display: flex;
     flex-wrap: wrap;
@@ -21,15 +19,12 @@
     margin-bottom: var(--spacing-100);
     padding: 0;
 }
-
 .chips-combobox__items:empty {
     display: none;
 }
-
 .chips-combobox__items li {
     display: inline-block;
 }
-
 .chips-combobox .combobox__control > input {
     background-color: inherit;
     border: none;
@@ -39,16 +34,13 @@
     padding: var(--spacing-75) 0;
     width: calc(100% - var(--spacing-200));
 }
-
 .chips-combobox .combobox__control > input:focus {
     outline: none;
 }
-
 .chips-combobox .combobox {
     margin-inline-start: calc(var(--spacing-100) * -1);
     width: calc(100% + var(--spacing-300));
 }
-
 .chips-combobox .combobox svg.icon {
     pointer-events: none;
     position: absolute;
@@ -57,49 +49,40 @@
     transform: rotateX(0deg);
     transition: transform 0.2s linear;
 }
-
 .chips-combobox .combobox__listbox--set-position {
     top: calc(100% + var(--spacing-150));
 }
-
 .chips-combobox .combobox__option[role^="option"] {
     border-style: none;
 }
-
 .chips-combobox .combobox__option span {
     pointer-events: none;
 }
-
 .chips-combobox:focus-within {
     background-color: var(--color-background-primary);
-    border-color: var(--color-stroke-strong);
+    border-color: var(--color-border-strong);
 }
 .chips-combobox .combobox--expanded svg.icon {
     transform: rotateX(180deg);
 }
-
 .chips-combobox--error,
 .chips-combobox--error:focus-within {
-    border-color: var(--color-stroke-attention);
+    border-color: var(--color-border-attention);
 }
 .chips-combobox[aria-disabled] {
-    border-color: var(--color-stroke-disabled);
+    border-color: var(--color-border-disabled);
     pointer-events: none;
 }
-
 .chips-combobox[aria-disabled] .chip {
     color: var(--color-foreground-disabled);
 }
-
 .chips-combobox[aria-disabled] svg.icon {
     fill: var(--color-foreground-disabled);
 }
-
 .chips-combobox[aria-disabled] .combobox__control > input {
     border: none;
     color: var(--color-foreground-disabled);
 }
-
 .chips-combobox[aria-disabled] .combobox__control > input::placeholder {
     color: var(--color-foreground-disabled);
 }