@ebay/skin 16.7.0 → 16.8.0-0

package/dist/avatar/avatar.css

@@ -4,8 +4,8 @@
   border-radius: 50%;
   color: var(--color-marketing-teal-foreground-5);
   display: inline-flex;
-  font-size: 1.5rem;
-  font-weight: 700;
+  font-size: var(--font-size-large-2);
+  font-weight: var(--font-weight-bold);
   height: 48px;
   justify-content: center;
   line-height: 48px;
@@ -51,49 +51,49 @@
 }
 .avatar--32,
 .avatar--32 > img {
-  font-size: 1rem;
+  font-size: var(--font-size-medium);
   height: 32px;
   line-height: 32px;
   width: 32px;
 }
 .avatar--40,
 .avatar--40 > img {
-  font-size: 1.25rem;
+  font-size: var(--font-size-large-1);
   height: 40px;
   line-height: 40px;
   width: 40px;
 }
 .avatar--48,
 .avatar--48 > img {
-  font-size: 1.5rem;
+  font-size: var(--font-size-large-2);
   height: 48px;
   line-height: 48px;
   width: 48px;
 }
 .avatar--56,
 .avatar--56 > img {
-  font-size: 1.875rem;
+  font-size: var(--font-size-giant-1);
   height: 56px;
   line-height: 56px;
   width: 56px;
 }
 .avatar--64,
 .avatar--64 > img {
-  font-size: 2.25rem;
+  font-size: var(--font-size-giant-2);
   height: 64px;
   line-height: 64px;
   width: 64px;
 }
 .avatar--96,
 .avatar--96 > img {
-  font-size: 2.875rem;
+  font-size: var(--font-size-giant-3);
   height: 96px;
   line-height: 96px;
   width: 96px;
 }
 .avatar--128,
 .avatar--128 > img {
-  font-size: 4rem;
+  font-size: var(--font-size-giant-4);
   height: 128px;
   line-height: 128px;
   width: 128px;

package/dist/breadcrumbs/breadcrumbs.css

@@ -1,6 +1,6 @@
 nav.breadcrumbs {
   color: var(--breadcrumbs-item-foreground-color, var(--color-foreground-secondary));
-  font-size: 0.75rem;
+  font-size: var(--font-size-small);
   height: -webkit-fit-content;
   height: fit-content;
   margin: 8px 0;
@@ -73,11 +73,11 @@ nav.breadcrumbs.breadcrumb--overflow {
 nav.breadcrumbs .fake-menu-button__button,
 nav.breadcrumbs .menu-button__button {
   background-color: var(--icon-button-background-color, var(--color-background-secondary));
-  height: 24px;
-  min-height: 24px;
-  min-width: 24px;
+  height: var(--spacing-300);
+  min-height: var(--spacing-300);
+  min-width: var(--spacing-300);
   outline-offset: 1px;
-  width: 24px;
+  width: var(--spacing-300);
 }
 nav.breadcrumbs .fake-menu-button__button svg.icon,
 nav.breadcrumbs .menu-button__button svg.icon {
@@ -85,7 +85,7 @@ nav.breadcrumbs .menu-button__button svg.icon {
 }
 nav.breadcrumbs .fake-menu-button__menu,
 nav.breadcrumbs .menu-button__menu {
-  font-size: 0.875rem;
+  font-size: var(--font-size-default);
 }
 [dir="rtl"] nav.breadcrumbs svg.icon--chevron-right-12 {
   transform: rotate(180deg);

package/dist/button/button.css

@@ -11,7 +11,7 @@ a.fake-btn {
   border-radius: var(--btn-border-radius, calc(40px / 2));
   color: inherit;
   display: inline-block;
-  font-size: 0.875rem;
+  font-size: var(--font-size-default);
   min-height: 40px;
   min-width: 88px;
   padding: 9.5px 20px;
@@ -71,8 +71,8 @@ button.btn--slim,
 a.fake-btn--slim {
   height: 40px;
   min-width: auto;
-  padding-left: 8px;
-  padding-right: 8px;
+  padding-left: var(--spacing-100);
+  padding-right: var(--spacing-100);
 }
 a.fake-btn:visited {
   color: inherit;
@@ -118,11 +118,13 @@ a.fake-btn svg.icon {
 }
 button.btn svg.icon:first-child,
 a.fake-btn svg.icon:first-child {
-  margin-right: 8px;
+  -webkit-margin-end: 8px;
+          margin-inline-end: 8px;
 }
 button.btn svg.icon:last-child,
 a.fake-btn svg.icon:last-child {
-  margin-left: 8px;
+  -webkit-margin-start: 8px;
+          margin-inline-start: 8px;
 }
 button.btn svg.icon:only-child,
 a.fake-btn svg.icon:only-child {
@@ -334,14 +336,14 @@ button.btn--tertiary.btn--destructive .progress-spinner {
 button.btn--large,
 a.fake-btn--large {
   border-radius: var(--btn-border-radius, calc(48px / 2));
-  font-size: 1rem;
+  font-size: var(--font-size-medium);
   min-height: 48px;
   padding: 13px 20px;
 }
 button.btn--small,
 a.fake-btn--small {
   border-radius: var(--btn-border-radius, calc(32px / 2));
-  font-size: 0.875rem;
+  font-size: var(--font-size-default);
   min-height: 32px;
   padding: 6px 16px;
 }
@@ -398,7 +400,7 @@ a.fake-btn--truncated span {
 }
 button.btn--large-truncated,
 a.fake-btn--large-truncated {
-  font-size: 1rem;
+  font-size: var(--font-size-medium);
   height: 48px;
   min-height: 48px;
   padding: 13px 20px;
@@ -471,21 +473,6 @@ button.btn--floating-label .btn__floating-label--inline {
   position: unset;
   transform: translate(0, -6px);
 }
-[dir="rtl"] button.btn svg.icon--chevron-down-12:first-child,
-[dir="rtl"] a.fake-btn svg.icon--chevron-down-12:first-child {
-  margin-left: 8px;
-  margin-right: 0;
-}
-[dir="rtl"] button.btn svg.icon--chevron-down-12:last-child,
-[dir="rtl"] a.fake-btn svg.icon--chevron-down-12:last-child {
-  margin-left: 0;
-  margin-right: 8px;
-}
-[dir="rtl"] button.btn svg.icon--chevron-down-12:only-child,
-[dir="rtl"] a.fake-btn svg.icon--chevron-down-12:only-child {
-  margin-left: 0;
-  margin-right: 0;
-}
 [dir="rtl"] button.btn--split-start,
 [dir="rtl"] a.fake-btn--split-start {
   border-radius: 0 24px 24px 0;
@@ -512,8 +499,3 @@ button.btn--floating-label .btn__floating-label--inline {
   border-left-color: var(--btn-primary-border-color, var(--color-stroke-accent));
   border-right-color: var(--primary-border-split-color, var(--color-stroke-subtle));
 }
-[dir="rtl"] button.btn svg.icon,
-[dir="rtl"] a.fake-btn svg.icon {
-  margin-left: 8px;
-  margin-right: 0;
-}

package/dist/calendar/calendar.css

@@ -29,7 +29,7 @@
   margin: 0;
 }
 .calendar__header .icon-btn svg {
-  width: 16px;
+  width: var(--spacing-200);
 }
 /************
  *** BODY ***
@@ -43,7 +43,7 @@
   width: var(--calendar-month-width, 100vw);
 }
 .calendar__month + .calendar__month {
-  padding-left: 16px;
+  padding-left: var(--spacing-200);
 }
 /************
  ** MONTHS **
@@ -55,13 +55,13 @@
   display: none;
 }
 .calendar__month > table {
-  border-spacing: 0 12px;
+  border-spacing: 0 var(--spacing-150);
   width: 100%;
 }
 .calendar__month th {
   color: var(--calendar-day-label-color, var(--color-foreground-secondary));
   font-weight: normal;
-  line-height: 10px;
+  line-height: var(--spacing-125);
 }
 .calendar__month td {
   padding: 0;
@@ -71,15 +71,15 @@
   align-items: center;
   background: none;
   border: 1px solid transparent;
-  border-radius: 16px;
+  border-radius: var(--spacing-200);
   border-style: none;
   box-sizing: border-box;
   color: inherit;
   display: inline-flex;
   font: inherit;
-  height: 32px;
+  height: var(--spacing-400);
   justify-content: center;
-  width: 32px;
+  width: var(--spacing-400);
 }
 /************
  *** DAYS ***

package/dist/carousel/carousel.css

@@ -59,6 +59,7 @@
   content: "";
   display: block;
   left: 0;
+  pointer-events: none;
   position: absolute;
   right: 0;
   top: 0;
@@ -83,6 +84,7 @@
   content: "";
   display: block;
   left: 0;
+  pointer-events: none;
   position: absolute;
   right: 0;
   top: 0;
@@ -117,22 +119,18 @@ div.carousel {
   z-index: 1;
 }
 .carousel__control--prev {
-  left: -16px;
+  left: calc(var(--spacing-200) * -1);
 }
 .carousel__control--next {
-  right: -16px;
-}
-.carousel__control .icon--chevron-right-24 {
-  margin-left: 2px;
-}
-.carousel__control .icon--chevron-left-24 {
-  margin-left: -2px;
+  right: calc(var(--spacing-200) * -1);
 }
 .carousel__control .icon--chevron-right-12 {
-  margin-left: 1px;
+  -webkit-margin-start: 1px;
+          margin-inline-start: 1px;
 }
 .carousel__control .icon--chevron-left-12 {
-  margin-left: -1px;
+  -webkit-margin-end: 1px;
+          margin-inline-end: 1px;
 }
 .carousel__control svg {
   color: var(--carousel-paddle-foreground-color, var(--color-foreground-primary));
@@ -187,26 +185,12 @@ span.carousel__container {
 }
 [dir="rtl"] .carousel__control--prev {
   left: unset;
-  right: -16px;
-}
-[dir="rtl"] .carousel__control .icon--chevron-left-24 {
-  margin-left: 2px;
-}
-[dir="rtl"] .carousel__control .icon--chevron-left-12 {
-  margin-left: 1px;
+  right: calc(var(--spacing-200) * -1);
 }
 [dir="rtl"] .carousel__control--next {
-  left: -16px;
+  left: calc(var(--spacing-200) * -1);
   right: unset;
 }
-[dir="rtl"] .carousel__control .icon--chevron-right-24 {
-  margin-left: -2px;
-}
-[dir="rtl"] .carousel__control .icon--chevron-right-12 {
-  margin-left: -1px;
-}
-[dir="rtl"] .carousel__control .icon--chevron-left-24,
-[dir="rtl"] .carousel__control .icon--chevron-right-24,
 [dir="rtl"] .carousel__control .icon--chevron-left-12,
 [dir="rtl"] .carousel__control .icon--chevron-right-12 {
   transform: rotate(180deg);

package/dist/chip/chip.css

@@ -1,20 +1,20 @@
 .chip {
   align-items: center;
   background-color: var(--color-background-tertiary);
-  border-radius: 32px;
+  border-radius: var(--spacing-400);
   color: var(--color-foreground-primary);
   display: inline-flex;
-  font-size: 0.875rem;
+  font-size: var(--font-size-default);
   gap: 2px;
   justify-content: space-between;
   max-width: 296px;
-  min-height: 20px;
+  min-height: var(--spacing-250);
   min-width: 32px;
-  padding: 0 12px;
+  padding: 0 var(--spacing-150);
 }
 .chip__text {
   overflow: hidden;
-  padding: 6px 0;
+  padding: var(--spacing-75) 0;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -24,12 +24,12 @@ button.chip__button {
   border-radius: 50px;
   box-sizing: border-box;
   flex-shrink: 0;
-  height: 24px;
+  height: var(--spacing-300);
   line-height: 0;
   -webkit-margin-end: -8px;
           margin-inline-end: -8px;
   padding: 0;
-  width: 24px;
+  width: var(--spacing-300);
 }
 button.chip__button:focus-visible {
   background-color: var(--state-layer-focus);

package/dist/combobox/combobox.css

@@ -46,6 +46,11 @@ span.combobox {
   left: 0;
   right: unset;
 }
+.combobox__control > svg.icon,
+.combobox__control > button {
+  -webkit-margin-start: 8px;
+          margin-inline-start: 8px;
+}
 .combobox__option[role^="option"] {
   background-color: transparent;
   border-style: solid;
@@ -132,7 +137,6 @@ span.combobox {
 }
 .combobox__control > svg.icon--chevron-down-12 {
   color: var(--combobox-textbox-icon-color, var(--color-foreground-primary));
-  margin-left: 8px;
   pointer-events: none;
   position: absolute;
   right: 17px;
@@ -206,7 +210,7 @@ span.combobox {
   width: 100%;
 }
 .combobox--large .combobox__control > input {
-  font-size: 1.125rem;
+  font-size: var(--font-size-18);
   height: 48px;
 }
 .combobox__control > input[disabled] {
@@ -227,8 +231,6 @@ span.combobox {
 }
 [dir="rtl"] .combobox__control > svg.icon,
 [dir="rtl"] .combobox__control > button {
-  margin-left: 0;
-  margin-right: 8px;
   right: unset;
 }
 [dir="rtl"] .combobox__control > svg.icon {

package/dist/confirm-dialog/confirm-dialog.css

@@ -32,20 +32,20 @@
   max-height: 90%;
   max-width: calc(100% - 32px);
   min-width: 208px;
-  margin-left: 16px;
-  margin-right: 16px;
-  padding: 16px;
+  margin-left: var(--spacing-200);
+  margin-right: var(--spacing-200);
+  padding: var(--spacing-200);
   text-align: center;
 }
 .confirm-dialog__title {
-  font-size: 1.25rem;
-  font-weight: 700;
+  font-size: var(--font-size-large-1);
+  font-weight: var(--font-weight-bold);
   line-height: 28px;
   margin: 0;
 }
 .confirm-dialog__main {
-  margin: 16px 0;
-  min-height: 16px;
+  margin: var(--spacing-200) 0;
+  min-height: var(--spacing-200);
 }
 .confirm-dialog__main > :first-child {
   margin-top: 0;
@@ -55,7 +55,7 @@
 }
 a.confirm-dialog__confirm,
 button.confirm-dialog__confirm {
-  margin-left: 8px;
+  margin-left: var(--spacing-100);
 }
 .confirm-dialog--show.confirm-dialog--mask-fade,
 .confirm-dialog--hide.confirm-dialog--mask-fade {
@@ -103,7 +103,7 @@ button.confirm-dialog__confirm {
 }
 @media (min-width: 768px) {
   .confirm-dialog__window {
-    max-width: calc(88% - 32px);
+    max-width: calc(88% - var(--spacing-400));
   }
 }
 @media (min-width: 1024px) {

package/dist/cta-button/cta-button.css

@@ -11,7 +11,7 @@ a.cta-btn {
   border-radius: var(--cta-btn-border-radius, calc(40px / 2));
   color: var(--cta-btn-foreground-color, var(--color-foreground-primary));
   display: inline-block;
-  font-size: 0.875rem;
+  font-size: var(--font-size-default);
   max-width: 100%;
   padding: 9.5px 20px;
 }
@@ -76,10 +76,12 @@ a.cta-btn svg.icon {
   width: 10px;
 }
 a.cta-btn svg.icon:first-child {
-  margin-right: 8px;
+  -webkit-margin-end: 8px;
+          margin-inline-end: 8px;
 }
 a.cta-btn svg.icon:last-child {
-  margin-left: 8px;
+  -webkit-margin-start: 8px;
+          margin-inline-start: 8px;
 }
 a.cta-btn svg.icon:only-child {
   margin: 0;
@@ -100,13 +102,13 @@ a.cta-btn--truncated span {
 a.cta-btn--large {
   border-radius: 24px;
   display: inline-flex;
-  font-size: 1rem;
+  font-size: var(--font-size-medium);
   min-height: 48px;
 }
 a.cta-btn--large-truncated {
   border-radius: 24px;
   display: inline-flex;
-  font-size: 1rem;
+  font-size: var(--font-size-medium);
   height: 48px;
 }
 a.cta-btn--large-truncated,
@@ -119,7 +121,7 @@ a.cta-btn--large-truncated span {
 a.cta-btn--large-fixed-height {
   border-radius: 24px;
   display: inline-flex;
-  font-size: 1rem;
+  font-size: var(--font-size-medium);
   height: 48px;
 }
 [dir="rtl"] a.cta-btn svg.icon--arrow-right-24 {

package/dist/date-textbox/date-textbox.css

@@ -5,14 +5,14 @@
   --calendar-month-width: 311px;
 }
 .date-textbox > .textbox + .textbox {
-  margin-left: 8px;
+  margin-left: var(--spacing-100);
 }
 .date-textbox__popover {
   background-color: var(--calendar-background-color, var(--color-background-primary));
-  border-radius: 16px;
+  border-radius: var(--spacing-200);
   filter: var(--bubble-filter);
-  margin-left: -8px;
-  padding: 16px;
+  margin-left: calc(var(--spacing-100) * -1);
+  padding: var(--spacing-200);
   position: absolute;
   z-index: 1;
 }

package/dist/details/details.css

@@ -24,19 +24,16 @@ summary.details__summary--center {
   text-align: center;
 }
 summary.details__summary--small {
-  font-size: 0.75rem;
+  font-size: var(--font-size-small);
   padding: 4px 8px;
 }
 span.details__icon {
-  margin-left: 8px;
+  -webkit-margin-start: 8px;
+          margin-inline-start: 8px;
 }
 span.details__icon[hidden] {
   display: inline-block;
 }
-[dir="rtl"] span.details__icon {
-  margin-left: 0;
-  margin-right: 8px;
-}
 details.details[open] span.details__icon {
   transform: rotate(180deg);
 }

package/dist/drawer-dialog/drawer-dialog.css

@@ -25,7 +25,7 @@
 .drawer-dialog__header {
   display: flex;
   flex-shrink: 0;
-  margin: 20px 16px 0;
+  margin: var(--spacing-250) var(--spacing-200) 0;
   position: relative;
 }
 .drawer-dialog__header h1,
@@ -42,7 +42,8 @@
   white-space: nowrap;
 }
 .drawer-dialog__header > :last-child:not(:only-child) {
-  margin-left: 16px;
+  -webkit-margin-start: var(--spacing-200);
+          margin-inline-start: var(--spacing-200);
 }
 .drawer-dialog__header .fake-link {
   text-decoration: none;
@@ -69,7 +70,7 @@
 .drawer-dialog__main {
   box-sizing: border-box;
   flex: 1 1 auto;
-  padding: 16px;
+  padding: var(--spacing-200);
   position: relative;
   min-height: auto;
   overflow: auto;

package/dist/field/field.css

@@ -25,7 +25,8 @@ div.field--table {
   justify-content: flex-end;
 }
 .field__description--group > :last-child {
-  margin-left: 5px;
+  -webkit-margin-start: 5px;
+          margin-inline-start: 5px;
   text-align: right;
 }
 .field__description--group > :first-child {
@@ -36,9 +37,9 @@ div.field--table {
 }
 .field__description {
   color: var(--field-description-color, var(--color-foreground-secondary));
-  font-size: 0.75rem;
-  line-height: 16px;
-  margin-top: 4px;
+  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));
@@ -115,6 +116,5 @@ div.field__description {
   margin-top: 16px;
 }
 [dir="rtl"] .field__description--group > :last-child {
-  margin-right: 5px;
   text-align: left;
 }

package/dist/filter-button/filter-button.css

@@ -13,13 +13,13 @@ a.filter-link {
   flex: 0 1 auto;
   flex-direction: column;
   font-family: inherit;
-  font-size: 0.875rem;
+  font-size: var(--font-size-default);
   height: 32px;
   justify-content: center;
   margin: 0;
   max-width: 280px;
   min-width: 56px;
-  padding: 0 16px;
+  padding: 0 var(--spacing-200);
   text-align: center;
   text-decoration: none;
   vertical-align: bottom;

package/dist/filter-menu/filter-menu.css

@@ -52,7 +52,7 @@ span.filter-menu-form__item {
   box-sizing: border-box;
   color: var(--filter-menu-item-foreground-color, var(--color-foreground-primary));
   display: flex;
-  font-size: 0.875rem;
+  font-size: var(--font-size-default);
   justify-content: space-between;
   line-height: 1.4em;
   margin: 0;
@@ -91,7 +91,7 @@ button.filter-menu-form__footer[type="submit"] {
   box-sizing: border-box;
   color: var(--filter-menu-item-foreground-color, var(--color-foreground-primary));
   display: flex;
-  font-size: 0.875rem;
+  font-size: var(--font-size-default);
   justify-content: space-between;
   line-height: 1.4em;
   margin: 0;

package/dist/filter-menu-button/filter-menu-button.css

@@ -19,13 +19,13 @@ button.filter-menu-button__button {
   flex: 0 1 auto;
   flex-direction: column;
   font-family: inherit;
-  font-size: 0.875rem;
+  font-size: var(--font-size-default);
   height: 32px;
   justify-content: center;
   margin: 0;
   max-width: 280px;
   min-width: 56px;
-  padding: 0 16px;
+  padding: 0 var(--spacing-200);
   text-align: center;
   text-decoration: none;
   vertical-align: bottom;
@@ -46,7 +46,8 @@ button.filter-menu-button__button:active {
 .filter-menu-button__button-cell svg.icon--chevron-down-12 {
   align-self: center;
   color: var(--filter-menu-button-icon-color, var(--color-foreground-primary));
-  margin-left: 8px;
+  -webkit-margin-start: 8px;
+          margin-inline-start: 8px;
 }
 .filter-menu-button__button-text {
   display: inline-block;
@@ -156,7 +157,7 @@ span.filter-menu-button__radio svg.icon--radio-checked-18 {
   box-sizing: border-box;
   color: var(--filter-menu-item-foreground-color, var(--color-foreground-primary));
   display: flex;
-  font-size: 0.875rem;
+  font-size: var(--font-size-default);
   justify-content: space-between;
   line-height: 1.4em;
   margin: 0;
@@ -212,7 +213,7 @@ button.filter-menu-button__footer {
   box-sizing: border-box;
   color: var(--filter-menu-item-foreground-color, var(--color-foreground-primary));
   display: flex;
-  font-size: 0.875rem;
+  font-size: var(--font-size-default);
   justify-content: space-between;
   line-height: 1.4em;
   margin: 0;
@@ -264,10 +265,6 @@ button.filter-menu-button__footer:hover {
 div.filter-menu-button__item[role^="menuitem"]:focus:not(:focus-visible) {
   outline: none;
 }
-[dir="rtl"] .filter-menu-button__button-cell .icon--chevron-down-12 {
-  margin-left: 0;
-  margin-right: 8px;
-}
 [dir="rtl"] .filter-menu-button__checkbox {
   margin-left: 8px;
 }

package/dist/floating-label/floating-label.css

@@ -39,7 +39,7 @@ label.floating-label__label--focus {
   transform: scale(0.75, 0.75) translate(0, 3px);
 }
 label.floating-label__label--inline {
-  font-size: 0.875rem;
+  font-size: var(--font-size-default);
   transform: translate(0, 12px);
 }
 .floating-label--large label.floating-label__label--inline {