@ebay/skin 16.7.1 → 16.8.0

package/dist/fullscreen-dialog/fullscreen-dialog.css

@@ -35,7 +35,7 @@
 .fullscreen-dialog__header {
   display: flex;
   flex-shrink: 0;
-  margin: 16px 16px 0;
+  margin: var(--spacing-200) var(--spacing-200) 0;
   position: relative;
 }
 .fullscreen-dialog__header h1,
@@ -52,7 +52,8 @@
   white-space: nowrap;
 }
 .fullscreen-dialog__header > :last-child:not(:only-child) {
-  margin-left: 16px;
+  -webkit-margin-start: var(--spacing-200);
+          margin-inline-start: var(--spacing-200);
 }
 .fullscreen-dialog__header .fake-link {
   outline-offset: 4px;
@@ -61,7 +62,7 @@
 .fullscreen-dialog__main {
   box-sizing: border-box;
   flex: 1 1 auto;
-  padding: 16px;
+  padding: var(--spacing-200);
   position: relative;
   min-height: auto;
 }
@@ -75,11 +76,11 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding: 16px;
+  padding: var(--spacing-200);
   position: relative;
 }
 .fullscreen-dialog__footer > :not(:first-child) {
-  margin-top: 16px;
+  margin-top: var(--spacing-200);
 }
 button.icon-btn.fullscreen-dialog__close {
   height: 32px;

package/dist/global/global.css

@@ -2,7 +2,7 @@ body {
   background-color: var(--color-background-primary);
   color: var(--color-foreground-primary);
   font-family: "Market Sans", Arial, sans-serif;
-  font-size: 0.875rem;
+  font-size: var(--font-size-default);
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   -webkit-text-size-adjust: 100%;
 }
@@ -11,7 +11,7 @@ fieldset {
   padding: 0;
 }
 legend {
-  margin-bottom: 8px;
+  margin-bottom: var(--spacing-100);
 }
 a {
   color: var(--link-foreground-color-default, var(--color-foreground-primary));

package/dist/icon/icon.css

@@ -51,6 +51,34 @@ svg.icon--ai-filled-24 {
   height: 24px;
   width: 24px;
 }
+svg.icon--ai-spectrum-16-colored {
+  height: 16px;
+  width: 16px;
+}
+svg.icon--ai-spectrum-20-colored {
+  height: 20px;
+  width: 20px;
+}
+svg.icon--ai-spectrum-24-colored {
+  height: 24px;
+  width: 24px;
+}
+svg.icon--ai-spectrum-filled-16-colored {
+  height: 16px;
+  width: 16px;
+}
+svg.icon--ai-spectrum-filled-20-colored {
+  height: 20px;
+  width: 20px;
+}
+svg.icon--ai-spectrum-filled-24-colored {
+  height: 24px;
+  width: 24px;
+}
+svg.icon--ai-spectrum-thin-16-colored {
+  height: 16px;
+  width: 16px;
+}
 svg.icon--ai-thin-16 {
   height: 16px;
   width: 16px;

package/dist/infotip/infotip.css

@@ -20,7 +20,7 @@ span.infotip {
   color: var(--infotip-foreground-color, var(--color-foreground-primary));
   display: none;
   left: -6px;
-  margin-top: 16px;
+  margin-top: var(--spacing-200);
   position: absolute;
 }
 .infotip__mask {
@@ -35,7 +35,7 @@ span.infotip__mask {
 }
 .infotip__cell {
   display: flex;
-  padding: 8px 16px;
+  padding: var(--spacing-100) var(--spacing-200);
   word-break: break-word;
 }
 .infotip__content {
@@ -45,7 +45,7 @@ span.infotip__mask {
   margin: 0;
 }
 .infotip__content p:not(:first-of-type) {
-  margin-top: 4px;
+  margin-top: var(--spacing-50);
 }
 .infotip__pointer {
   background-color: var(--infotip-background-color, var(--color-background-primary));
@@ -118,7 +118,7 @@ span.infotip__mask {
 .infotip__heading {
   font-size: 1em;
   font-weight: bold;
-  margin: 0 0 4px;
+  margin: 0 0 var(--spacing-50);
 }
 span.infotip__heading {
   display: block;
@@ -137,7 +137,7 @@ span.infotip__heading {
 }
 button.infotip__close,
 .infotip__close {
-  margin-left: 16px;
+  margin-left: var(--spacing-200);
 }
 @media (min-width: 512px) {
   .infotip__overlay {

package/dist/inline-notice/inline-notice.css

@@ -1,5 +1,5 @@
 .inline-notice {
-  margin: 8px 0;
+  margin: var(--spacing-100) 0;
 }
 div.inline-notice {
   display: flex;
@@ -9,8 +9,9 @@ span.inline-notice {
 }
 .inline-notice__header {
   display: flex;
-  margin-right: 8px;
-  margin-top: 4px;
+  -webkit-margin-end: var(--spacing-100);
+          margin-inline-end: var(--spacing-100);
+  margin-top: var(--spacing-50);
 }
 .inline-notice p {
   margin: 3px 0;
@@ -19,6 +20,3 @@ span.inline-notice {
 .inline-notice button.fake-link {
   color: var(--color-foreground-primary);
 }
-[dir="rtl"] .inline-notice__header .icon.icon--confirmation-filled-16 {
-  margin-left: 8px;
-}

package/dist/legacy-textbox/legacy-textbox.css

@@ -50,7 +50,7 @@ label.legacy-floating-label__label {
 }
 label.legacy-floating-label__label--inline {
   bottom: 0.4375rem;
-  font-size: 0.875rem;
+  font-size: var(--font-size-default);
   transform: none;
 }
 label.legacy-floating-label__label--animate {

package/dist/lightbox-dialog/lightbox-dialog.css

@@ -40,7 +40,7 @@
 .lightbox-dialog__header {
   display: flex;
   flex-shrink: 0;
-  margin: 16px 16px 0;
+  margin: var(--spacing-200) var(--spacing-200) 0;
   position: relative;
 }
 .lightbox-dialog__header h1,
@@ -57,12 +57,13 @@
   white-space: nowrap;
 }
 .lightbox-dialog__header > :last-child:not(:only-child) {
-  margin-left: 16px;
+  -webkit-margin-start: var(--spacing-200);
+          margin-inline-start: var(--spacing-200);
 }
 .lightbox-dialog__main {
   box-sizing: border-box;
   flex: 1 1 auto;
-  padding: 16px;
+  padding: var(--spacing-200);
   position: relative;
   min-height: 18px;
   overflow: auto;
@@ -77,11 +78,11 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding: 16px;
+  padding: var(--spacing-200);
   position: relative;
 }
 .lightbox-dialog__footer > :not(:first-child) {
-  margin-top: 16px;
+  margin-top: var(--spacing-200);
 }
 .lightbox-dialog__image {
   background-position: center;
@@ -93,17 +94,17 @@
   width: 100%;
 }
 .lightbox-dialog--expressive .lightbox-dialog__window {
-  padding-bottom: 8px;
+  padding-bottom: var(--spacing-100);
 }
 .lightbox-dialog--expressive .lightbox-dialog__header > * {
   margin-top: 218px;
 }
 .lightbox-dialog--expressive .lightbox-dialog__header {
-  margin: 24px 24px 0;
+  margin: var(--spacing-300) var(--spacing-300) 0;
 }
 .lightbox-dialog--expressive .lightbox-dialog__main,
 .lightbox-dialog--expressive .lightbox-dialog__footer {
-  padding: 16px 24px;
+  padding: var(--spacing-200) var(--spacing-300);
 }
 button.icon-btn.lightbox-dialog__prev,
 button.icon-btn.lightbox-dialog__close {
@@ -116,7 +117,8 @@ button.icon-btn.lightbox-dialog__close {
   z-index: 1;
 }
 button.icon-btn.lightbox-dialog__prev {
-  margin-right: 16px;
+  -webkit-margin-end: var(--spacing-200);
+          margin-inline-end: var(--spacing-200);
 }
 .lightbox-dialog--expressive button.icon-btn.lightbox-dialog__prev,
 .lightbox-dialog--expressive button.icon-btn.lightbox-dialog__close {
@@ -127,7 +129,7 @@ button.icon-btn.lightbox-dialog__prev {
   margin-left: -32px;
 }
 .lightbox-dialog__title:not(:first-child) {
-  margin-left: 16px;
+  margin-left: var(--spacing-200);
 }
 .lightbox-dialog__title--center {
   text-align: center;
@@ -213,10 +215,6 @@ button.icon-btn.lightbox-dialog__prev {
   height: 95%;
   max-height: 95%;
 }
-[dir="rtl"] button.icon-btn.lightbox-dialog__prev {
-  margin-left: 16px;
-  margin-right: 0;
-}
 [dir="rtl"] button.icon-btn.lightbox-dialog__prev .icon--chevron-left-16 {
   transform: rotate(180deg);
 }
@@ -224,7 +222,7 @@ button.icon-btn.lightbox-dialog__prev {
   .lightbox-dialog__window {
     margin: auto;
     border-radius: var(--lightbox-border-radius, var(--border-radius-100));
-    max-width: calc(88% - 32px);
+    max-width: calc(88% - var(--spacing-400));
   }
   .lightbox-dialog__handle {
     display: none;
@@ -235,10 +233,10 @@ button.icon-btn.lightbox-dialog__prev {
   .lightbox-dialog__window .lightbox-dialog__footer {
     flex-direction: row;
     justify-content: flex-end;
-    padding: 0 16px 16px;
+    padding: 0 var(--spacing-200) var(--spacing-200);
   }
   .lightbox-dialog__window .lightbox-dialog__footer > :not(:first-child) {
-    margin-left: 8px;
+    margin-left: var(--spacing-100);
     margin-top: initial;
   }
   .lightbox-dialog--show .lightbox-dialog__window--animate,

package/dist/listbox/listbox.css

@@ -1,5 +1,5 @@
 div.listbox {
-  margin: 16px 0;
+  margin: var(--spacing-200) 0;
 }
 span.listbox {
   display: inline-block;
@@ -66,11 +66,8 @@ div.listbox__option svg.icon {
   opacity: 0;
   stroke: currentColor;
   stroke-width: 0;
-  margin-left: 8px;
-}
-[dir="rtl"] div.listbox__option svg.icon {
-  margin-left: 0;
-  margin-right: 8px;
+  -webkit-margin-start: var(--spacing-100);
+          margin-inline-start: var(--spacing-100);
 }
 div.listbox__options[role="listbox"]:focus .listbox__option--active[role="option"] {
   background-color: var(--color-state-primary-hover);

package/dist/listbox-button/listbox-button.css

@@ -96,7 +96,8 @@ button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox,
   opacity: 0;
   stroke: currentColor;
   stroke-width: 0;
-  margin-left: 8px;
+  -webkit-margin-start: var(--spacing-100);
+          margin-inline-start: var(--spacing-100);
 }
 div.listbox-button__option[role="option"][aria-selected="true"] svg.icon {
   opacity: 1;
@@ -157,10 +158,6 @@ span.listbox-button__value {
 .listbox-button__options:focus:not(:focus-visible) {
   outline: none;
 }
-[dir="rtl"] .listbox-button__option svg.icon {
-  margin-left: 0;
-  margin-right: 8px;
-}
 [dir="rtl"] .listbox-button .btn__label {
   color: var(--listbox-button-label-color, var(--color-foreground-secondary));
   margin-left: 3px;

package/dist/menu/menu.css

@@ -29,8 +29,8 @@ span.fake-menu__items {
 .menu__item > svg.icon--tick-16:last-child,
 .fake-menu__item > svg.icon--tick-16:last-child,
 .menu__item .badge {
-  margin-left: 8px;
-  margin-right: 8px;
+  margin-left: var(--spacing-100);
+  margin-right: var(--spacing-100);
 }
 a.fake-menu__item {
   color: var(--menu-anchor-color, var(--color-foreground-primary));

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

@@ -86,7 +86,7 @@ div.menu-button__item[role^="menuitem"]:last-child {
 }
 .menu-button__item svg.icon--tick-16:last-child,
 .fake-menu-button__item svg.icon--tick-16:last-child {
-  margin-left: 8px;
+  margin-left: var(--spacing-100);
 }
 a.fake-menu-button__item {
   color: var(--menu-button-anchor-color, var(--color-foreground-primary));
@@ -183,7 +183,7 @@ div.menu-button__item--badged[role^="menuitem"] {
 a.fake-menu-button__item--badged .badge,
 button.fake-menu-button__item--badged .badge,
 div.menu-button__item--badged[role^="menuitem"] .badge {
-  margin-left: 4px;
+  margin-left: var(--spacing-50);
   position: absolute;
   top: 6px;
   z-index: 1;

package/dist/mixins/typography-mixins.less

@@ -1,24 +1,24 @@
 .typography-giant-3() {
-    font-size: @font-size-giant-3;
-    font-weight: @font-weight-bold;
+    font-size: var(--font-size-giant-3);
+    font-weight: var(--font-weight-bold);
     line-height: 52px;
 }
 
 .typography-giant-2() {
-    font-size: @font-size-giant-2;
-    font-weight: @font-weight-bold;
+    font-size: var(--font-size-giant-2);
+    font-weight: var(--font-weight-bold);
     line-height: 46px;
 }
 
 .typography-giant-1() {
-    font-size: @font-size-giant-1;
-    font-weight: @font-weight-bold;
+    font-size: var(--font-size-giant-1);
+    font-weight: var(--font-weight-bold);
     line-height: 40px;
 }
 
 .typography-large-2() {
-    font-size: @font-size-large-2;
-    font-weight: @font-weight-bold;
+    font-size: var(--font-size-large-2);
+    font-weight: var(--font-weight-bold);
     line-height: 32px;
 }
 
@@ -29,8 +29,8 @@
 }
 
 .typography-large-1() {
-    font-size: @font-size-large-1;
-    font-weight: @font-weight-bold;
+    font-size: var(--font-size-large-1);
+    font-weight: var(--font-weight-bold);
     line-height: 28px;
 }
 
@@ -41,14 +41,14 @@
 }
 
 .typography-medium() {
-    font-size: @font-size-medium;
+    font-size: var(--font-size-medium);
     line-height: 24px;
 }
 
 .typography-medium-bold() {
     .typography-medium();
 
-    font-weight: @font-weight-bold;
+    font-weight: var(--font-weight-bold);
 }
 
 .typography-medium-secondary() {
@@ -58,14 +58,14 @@
 }
 
 .typography-regular() {
-    font-size: @font-size-regular;
+    font-size: var(--font-size-default);
     line-height: 20px;
 }
 
 .typography-regular-bold() {
     .typography-regular();
 
-    font-weight: @font-weight-bold;
+    font-weight: var(--font-weight-bold);
 }
 
 .typography-regular-secondary() {
@@ -75,14 +75,14 @@
 }
 
 .typography-small() {
-    font-size: @font-size-small;
+    font-size: var(--font-size-small);
     line-height: 16px;
 }
 
 .typography-small-bold() {
     .typography-small();
 
-    font-weight: @font-weight-bold;
+    font-weight: var(--font-weight-bold);
 }
 
 .typography-small-secondary() {
@@ -94,43 +94,43 @@
 // large screen titles
 
 .title-giant-screen-large() {
-    font-size: @font-size-30;
+    font-size: var(--font-size-giant-1);
     line-height: 36px;
 }
 
 .title-large-screen-large() {
-    font-size: @font-size-24;
+    font-size: var(--font-size-large-2);
     line-height: 30px;
 }
 
 .title-medium-screen-large() {
-    font-size: @font-size-20;
+    font-size: var(--font-size-large-1);
     line-height: 24px;
 }
 
 .title-small-screen-large() {
-    font-size: @font-size-16;
+    font-size: var(--font-size-medium);
     line-height: 20px;
 }
 
 // small screen titles
 
 .title-giant-screen-small() {
-    font-size: @font-size-24;
+    font-size: var(--font-size-large-2);
     line-height: 30px;
 }
 
 .title-large-screen-small() {
-    font-size: @font-size-20;
+    font-size: var(--font-size-large-1);
     line-height: 24px;
 }
 
 .title-medium-screen-small() {
-    font-size: @font-size-16;
+    font-size: var(--font-size-medium);
     line-height: 20px;
 }
 
 .title-small-screen-small() {
-    font-size: @font-size-14;
+    font-size: var(--font-size-default);
     line-height: 16px;
 }

package/dist/mixins/utility-mixins.less

@@ -37,6 +37,7 @@
         content: "";
         display: block;
         left: 0;
+        pointer-events: none;
         position: absolute;
         right: 0;
         top: 0;

package/dist/page-grid/page-grid.css

@@ -1,17 +1,17 @@
 :root {
   --page-grid-number-cols: 8;
   --page-grid-outside-margins: 16px;
-  --page-grid-column-gaps: 8px;
-  --page-grid-row-gaps: 16px;
-  --page-grid-column-widths: calc((100% / 8) - 8px + 1px);
+  --page-grid-column-gaps: var(--spacing-100);
+  --page-grid-row-gaps: var(--spacing-200);
+  --page-grid-column-widths: calc((100% / 8) - var(--spacing-100) + 1px);
   --page-grid-max-width: 1584px;
   --page-grid-total-max-width: calc(var(--page-grid-max-width) + (var(--page-grid-outside-margins) * 2));
 }
 @media screen and (min-width: 512px) {
   :root {
     --page-grid-number-cols: 16;
-    --page-grid-column-gaps: 16px;
-    --page-grid-column-widths: calc((100% / 16) - 16px + 1px);
+    --page-grid-column-gaps: var(--spacing-200);
+    --page-grid-column-widths: calc((100% / 16) - var(--spacing-200) + 1px);
     --page-grid-outside-margins: 32px;
   }
 }

package/dist/page-notice/page-notice.css

@@ -4,9 +4,9 @@
   border-style: solid;
   border-width: 1px;
   color: var(--page-notice-color, var(--color-foreground-on-inverse));
-  font-size: 0.875rem;
-  margin: 8px 0;
-  padding: 16px;
+  font-size: var(--font-size-default);
+  margin: var(--spacing-100) 0;
+  padding: var(--spacing-200);
 }
 div[role="region"].page-notice,
 section.page-notice {
@@ -17,7 +17,7 @@ span[role="region"].page-notice {
   display: grid;
 }
 .page-notice__title {
-  font-size: 0.875rem;
+  font-size: var(--font-size-default);
   font-weight: normal;
   margin: 1px 0 0;
 }
@@ -27,7 +27,7 @@ span[role="region"].page-notice {
 }
 .page-notice a {
   color: var(--page-notice-color, var(--color-foreground-on-inverse));
-  font-size: 0.875rem;
+  font-size: var(--font-size-default);
   font-weight: bold;
 }
 .page-notice__cta a {
@@ -41,7 +41,7 @@ span[role="region"].page-notice {
 }
 .page-notice button.fake-link {
   color: var(--page-notice-color, var(--color-foreground-on-inverse));
-  font-size: 0.875rem;
+  font-size: var(--font-size-default);
   font-weight: bold;
 }
 .page-notice button.fake-link:hover {
@@ -79,12 +79,14 @@ span[role="region"].page-notice {
 .page-notice__header {
   grid-column: 1;
   grid-row: 1;
-  padding-right: 16px;
+  -webkit-margin-end: var(--spacing-200);
+          margin-inline-end: var(--spacing-200);
 }
 .page-notice__main {
   grid-column: 1 / 3;
   grid-row: 1;
-  padding-right: 16px;
+  -webkit-margin-end: var(--spacing-200);
+          margin-inline-end: var(--spacing-200);
 }
 .page-notice__header + .page-notice__main {
   grid-column: 2;
@@ -95,25 +97,25 @@ span[role="region"].page-notice {
   text-align: right;
 }
 .page-notice__main p {
-  font-size: 0.875rem;
+  font-size: var(--font-size-default);
   margin: 2px 0 0;
 }
 /* support legacy 6.5 notice with heading + paragaphs */
 .page-notice__main .page-notice__title ~ p {
-  margin: 4px 0 0;
+  margin: var(--spacing-50) 0 0;
 }
 p.page-notice__cta {
   grid-column: 2;
   grid-row: 2;
   justify-self: flex-start;
   margin-bottom: 0;
-  margin-right: 16px;
-  margin-top: 16px;
+  margin-right: var(--spacing-200);
+  margin-top: var(--spacing-200);
 }
 @media (min-width: 512px) {
   section.page-notice,
   div[role="region"].page-notice {
-    margin: 16px 0;
+    margin: var(--spacing-200) 0;
   }
   .page-notice__title {
     margin-bottom: 2px;
@@ -123,20 +125,13 @@ p.page-notice__cta {
     grid-row: 1;
     justify-self: flex-end;
     margin-top: 1px;
-    padding-right: 16px;
+    padding-right: var(--spacing-200);
   }
   .page-notice__footer {
     justify-self: flex-end;
     margin-top: 0;
   }
 }
-[dir="rtl"] .page-notice__header {
-  padding-left: 16px;
-  padding-right: 0;
-}
-[dir="rtl"] .page-notice__main {
-  padding-right: 0;
-}
 [dir="rtl"] .page-notice__footer {
   margin-left: initial;
   margin-right: auto;