@ebay/skin 16.7.0 → 16.8.0-0

package/src/less/segmented-buttons/segmented-buttons.less

@@ -1,8 +1,6 @@
 @import "../variables/variables.less";
 @import "../mixins/private/button-mixins.less";
 
-@segmented-buttons-padding: @spacing-50;
-
 .segmented-buttons {
     border: 1px solid var(--color-stroke-default);
     border-radius: var(
@@ -11,7 +9,7 @@
     );
     max-width: 720px;
     min-width: 215px;
-    padding: @segmented-buttons-padding;
+    padding: var(--spacing-50);
 }
 
 .segmented-buttons > ul {
@@ -27,7 +25,7 @@
 }
 
 .segmented-buttons > ul > li:not(:first-child) {
-    margin-left: @spacing-100;
+    margin-inline-start: var(--spacing-100);
 }
 
 .segmented-buttons__button {
@@ -35,14 +33,14 @@
     border: none;
     border-radius: var(--btn-border-radius, calc(@button-height-regular / 2));
     color: var(--color-foreground-on-primary);
-    font-size: @font-size-regular;
-    min-height: @button-height-regular - (@segmented-buttons-padding * 2);
-    padding: @spacing-100 @spacing-200;
+    font-size: var(--font-size-default);
+    min-height: calc(@button-height-regular - (var(--spacing-50) * 2));
+    padding: var(--spacing-100) var(--spacing-200);
     width: 100%;
 }
 
 .segmented-buttons--large .segmented-buttons__button {
-    min-height: @button-height-large - (@segmented-buttons-padding * 2);
+    min-height: calc(@button-height-large - (var(--spacing-50) * 2));
 }
 
 .segmented-buttons__button-cell {
@@ -70,10 +68,3 @@
         background-color: var(--color-state-primary-hover);
     }
 }
-
-[dir="rtl"] {
-    .segmented-buttons > ul > li:not(:first-child) {
-        margin-left: 0;
-        margin-right: @spacing-100;
-    }
-}

package/src/less/select/select.less

@@ -3,7 +3,7 @@
 
 .select {
     .color-token(select-foreground-color, color-foreground-primary);
-    font-size: @font-size-regular;
+    font-size: var(--font-size-default);
     position: relative;
 }
 
@@ -22,7 +22,7 @@ span.select {
     font-family: inherit;
     font-size: 1em;
     height: 40px;
-    padding: 0 @spacing-400 0 @spacing-200;
+    padding: 0 var(--spacing-400) 0 var(--spacing-200);
     vertical-align: middle;
 }
 
@@ -35,7 +35,7 @@ span.select {
 }
 
 .select--large select {
-    font-size: @font-size-18;
+    font-size: var(--font-size-18);
     height: 48px;
 }
 
@@ -105,7 +105,7 @@ span.select {
 [dir="rtl"] {
     .select > select {
         padding-left: 30px;
-        padding-right: @spacing-200;
+        padding-right: var(--spacing-200);
     }
 
     .select svg {

package/src/less/signal/signal.less

@@ -6,10 +6,10 @@
     border-radius: var(--border-radius-100);
     box-sizing: border-box;
     display: inline-block;
-    font-size: @font-size-small;
+    font-size: var(--font-size-small);
     font-weight: bold;
     letter-spacing: 0.5px;
-    margin: @spacing-100 0;
+    margin: var(--spacing-100) 0;
     padding: 2px 12px 1px;
     text-align: center;
     text-transform: uppercase;

package/src/less/snackbar-dialog/snackbar-dialog.less

@@ -8,12 +8,12 @@
     bottom: 40px;
     box-shadow: 0 0 3px rgba(0, 0, 0, 0.28);
     .color-token(snackbar-dialog-foreground-color, color-foreground-on-inverse);
-    left: @spacing-100;
+    left: var(--spacing-100);
     margin: auto;
     max-height: 40vh;
     max-width: 448px;
     position: fixed;
-    right: @spacing-100;
+    right: var(--spacing-100);
     // Setting translateY to 0 to fix a bug in safari which does a double transform
     transform: translateY(0);
     will-change: opacity, transform;
@@ -42,7 +42,7 @@
 
 .snackbar-dialog__window {
     display: flex;
-    margin: @spacing-200 @spacing-300;
+    margin: var(--spacing-200) var(--spacing-300);
 }
 
 .snackbar-dialog__window--column {
@@ -50,7 +50,7 @@
 }
 
 .snackbar-dialog__main {
-    margin-right: @spacing-400;
+    margin-inline-end: var(--spacing-400);
 }
 
 .snackbar-dialog__main p {
@@ -58,11 +58,11 @@
 }
 
 .snackbar-dialog__actions {
-    margin-left: auto;
+    margin-inline-start: auto;
 }
 
 .snackbar-dialog__window--column .snackbar-dialog__actions {
-    margin-top: @spacing-200;
+    margin-top: var(--spacing-200);
 }
 
 .snackbar-dialog__actions .fake-link {
@@ -91,14 +91,4 @@
         left: auto;
         right: 0;
     }
-
-    .snackbar-dialog__main {
-        margin-left: @spacing-400;
-        margin-right: 0;
-    }
-
-    .snackbar-dialog__actions {
-        margin-left: 0;
-        margin-right: auto;
-    }
 }

package/src/less/tabs/tabs.less

@@ -3,7 +3,7 @@
 
 .tabs,
 .fake-tabs {
-    margin-top: @spacing-200;
+    margin-top: var(--spacing-200);
 }
 
 span.tabs,
@@ -13,7 +13,7 @@ span.fake-tabs {
 
 div.tabs__items[role="tablist"],
 ul.fake-tabs__items {
-    font-size: @font-size-regular;
+    font-size: var(--font-size-default);
 }
 
 ul.fake-tabs__items {
@@ -34,7 +34,7 @@ li.fake-tabs__item {
     -webkit-tap-highlight-color: var(--color-background-secondary);
 
     &:not(:last-child) {
-        margin-right: 36px;
+        margin-inline-end: var(--spacing-450);
     }
 }
 
@@ -58,7 +58,7 @@ li.fake-tabs__item > a {
         content: "";
         display: block;
         height: 2px;
-        margin-top: @spacing-50;
+        margin-top: var(--spacing-50);
         position: absolute; // required to avoid focus outline issues
         width: 100%;
     }
@@ -94,15 +94,5 @@ li.fake-tabs__item > a:not([aria-current]):hover {
 
 .tabs__cell,
 .fake-tabs__cell {
-    margin: @spacing-200 0;
-}
-
-[dir="rtl"] .tabs {
-    div.tabs__item[role="tab"],
-    li.fake-tabs__item {
-        &:not(:last-child) {
-            margin-left: 40px;
-            margin-right: 0;
-        }
-    }
+    margin: var(--spacing-200) 0;
 }

package/src/less/textbox/stories/rtl/textbox.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Skin/Textbox/RTL" };
+export default { title: "Skin/Textbox/RTL/Base" };
 
 export const singleLine = () => `
 <div dir="rtl">

package/src/less/textbox/stories/textbox.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Skin/Textbox" };
+export default { title: "Skin/Textbox/Base" };
 
 export const singleLine = () => `
 <span class="textbox">

package/src/less/textbox/textbox.less

@@ -3,7 +3,8 @@
 
 .textbox {
     .color-token(textbox-foreground-color, color-background-secondary);
-    font-size: @font-size-regular; // to align with buttons and select, it needs same font-size
+    font-size: var(--font-size-default);
+    /* to align with buttons and select, it needs same font-size */
     position: relative;
 
     button.icon-btn {
@@ -26,7 +27,7 @@ textarea.textbox__control {
     font-family: inherit;
     min-height: 200px;
     overflow: auto;
-    padding: @spacing-200;
+    padding: var(--spacing-200);
     /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
     resize: vertical;
     vertical-align: middle;
@@ -34,7 +35,7 @@ textarea.textbox__control {
 
 input.textbox__control {
     font-family: inherit;
-    padding: 0 @spacing-200;
+    padding: 0 var(--spacing-200);
     vertical-align: middle;
 }
 
@@ -121,11 +122,11 @@ input.textbox__control--large {
 .textbox--icon-end {
     input.textbox__control,
     textarea.textbox__control {
-        padding-right: 40px;
+        padding-inline-end: 40px;
     }
 
     > svg:last-child {
-        right: @spacing-200;
+        right: var(--spacing-200);
     }
 }
 
@@ -142,11 +143,11 @@ textarea.textbox__control[readonly]:focus {
 }
 
 .textbox > svg:first-child {
-    left: @spacing-200;
+    left: var(--spacing-200);
 
     + input.textbox__control,
     + textarea.textbox__control {
-        padding-left: 40px;
+        padding-inline-start: 40px;
     }
 }
 
@@ -157,27 +158,22 @@ textarea.textbox__control[readonly]:focus {
 // stylelint-disable no-descending-specificity
 [dir="rtl"] {
     .textbox > svg:first-child {
-        right: @spacing-200;
+        right: var(--spacing-200);
 
-        & + input.textbox__control,
-        & + textarea.textbox__control {
-            padding-right: 40px;
-        }
+        // & + input.textbox__control,
+        // & + textarea.textbox__control {
+        //     padding-right: 40px;
+        // }
     }
 
     .textbox--icon-end {
-        input.textbox__control,
-        textarea.textbox__control {
-            padding-left: 40px;
-        }
-
         button.icon-btn {
             left: 0;
             right: auto;
         }
 
         > svg:last-child {
-            left: @spacing-200;
+            left: var(--spacing-200);
             right: auto;
         }
     }

package/src/less/toast-dialog/toast-dialog.less

@@ -49,7 +49,7 @@
 }
 
 .toast-dialog__window {
-    margin: @spacing-100 @spacing-200 @spacing-200;
+    margin: var(--spacing-100) var(--spacing-200) var(--spacing-200);
 }
 
 .toast-dialog__header {
@@ -68,8 +68,9 @@ button.toast-dialog__close {
     align-self: center;
     border: 0;
     .color-token(toast-dialog-foreground-color, color-foreground-on-information);
-    margin: 0 0 0 auto;
-    outline-offset: -@spacing-100;
+    // margin: 0 0 0 auto;
+    margin-inline-start: auto;
+    outline-offset: calc(var(--spacing-100) * -1);
     padding: 0;
 
     &:focus {
@@ -111,7 +112,7 @@ button.toast-dialog__close > svg {
         background-color: transparent;
         .color-token(toast-dialog-foreground-color, color-background-primary);
         font-weight: 700;
-        margin-right: @spacing-100;
+        margin-inline-end: var(--spacing-100);
     }
 
     button.btn--primary:focus,
@@ -150,19 +151,13 @@ button.toast-dialog__close > svg {
 @media (min-width: @_screen-size-SM) {
     .toast-dialog {
         .border-radius-token(toast-dialog-border-radius, border-radius-100);
-        bottom: @spacing-200;
-        left: @spacing-200;
+        bottom: var(--spacing-200);
+        left: var(--spacing-200);
         max-width: 480px;
         width: auto;
     }
 
     .toast-dialog__window {
-        margin: @spacing-200 @spacing-300 @spacing-300;
-    }
-}
-
-[dir="rtl"] {
-    .toast-dialog__footer .btn--primary {
-        margin-right: 7px;
+        margin: var(--spacing-200) var(--spacing-300) var(--spacing-300);
     }
 }

package/src/less/toggle-button/toggle-button.less

@@ -13,18 +13,18 @@
 .toggle-button {
     background-color: var(--color-background-primary);
     border: 1px solid var(--color-stroke-default);
-    border-radius: @spacing-100;
+    border-radius: var(--spacing-100);
     box-shadow: 0 0 0 1px transparent;
     color: var(--color-foreground-primary);
     display: inline-flex;
-    font-size: @font-size-14;
+    font-size: var(--font-size-default);
     justify-content: center;
-    margin-right: @spacing-100;
+    margin-right: var(--spacing-100);
     margin-top: auto;
     max-width: var(--toggle-button-width-max);
     min-height: var(--toggle-button-height-min);
     min-width: var(--toggle-button-width-min);
-    padding: 0 @spacing-200;
+    padding: 0 var(--spacing-200);
     vertical-align: top;
 
     &:focus-visible {
@@ -53,16 +53,16 @@
 }
 
 .toggle-button__icon {
-    margin-bottom: @spacing-200;
-    margin-right: @spacing-200;
-    margin-top: @spacing-200;
+    margin-bottom: var(--spacing-200);
+    margin-right: var(--spacing-200);
+    margin-top: var(--spacing-200);
 }
 
 .toggle-button__image-container {
     align-self: center;
-    margin-bottom: @spacing-200;
-    margin-right: @spacing-200;
-    margin-top: @spacing-200;
+    margin-bottom: var(--spacing-200);
+    margin-right: var(--spacing-200);
+    margin-top: var(--spacing-200);
 }
 
 .toggle-button__image-container svg.icon {
@@ -82,15 +82,15 @@
 }
 
 .toggle-button__title {
-    font-size: @font-size-16;
+    font-size: var(--font-size-medium);
     font-weight: bold;
-    line-height: @font-size-24;
-    margin-bottom: @spacing-50;
-    margin-top: @spacing-200;
+    line-height: var(--font-size-large-2);
+    margin-bottom: var(--spacing-50);
+    margin-top: var(--spacing-200);
 }
 
 .toggle-button__title:only-child {
-    margin-bottom: @spacing-200;
+    margin-bottom: var(--spacing-200);
 }
 
 .toggle-button
@@ -111,8 +111,8 @@
 
 .toggle-button__subtitle {
     color: var(--color-foreground-secondary);
-    line-height: @font-size-20;
-    margin-bottom: @spacing-200;
+    line-height: var(--font-size-large-1);
+    margin-bottom: var(--spacing-200);
 }
 
 .toggle-button__subtitle p {

package/src/less/toggle-button-group/toggle-button-group.less

@@ -10,10 +10,10 @@
 
 .toggle-button-group li {
     display: inline-table;
-    margin-bottom: @spacing-50;
-    margin-left: @spacing-50;
-    margin-right: @spacing-50;
-    margin-top: @spacing-50;
+    margin-bottom: var(--spacing-50);
+    margin-left: var(--spacing-50);
+    margin-right: var(--spacing-50);
+    margin-top: var(--spacing-50);
     max-width: var(--toggle-button-width-max);
     min-height: var(--toggle-button-height-min);
     min-width: var(--toggle-button-width-min);

package/src/less/tooltip/tooltip.less

@@ -15,7 +15,7 @@ span.tooltip {
 
     display: none;
     left: 0 - 10px;
-    margin-top: @spacing-200;
+    margin-top: var(--spacing-200);
     position: absolute;
 }
 

package/src/less/tourtip/tourtip.less

@@ -28,7 +28,7 @@ span.tourtip__mask {
 }
 
 .tourtip__cell {
-    .bubble-cell(@tourtip-spacing: @spacing-200);
+    .bubble-cell(@tourtip-spacing: var(--spacing-200));
 
     flex-wrap: wrap;
 
@@ -114,9 +114,9 @@ button.tourtip__close > svg {
 }
 
 .tourtip__heading {
-    font-size: @font-size-20;
+    font-size: var(--font-size-large-1);
     font-weight: bold;
-    margin: 0 0 @spacing-100;
+    margin: 0 0 var(--spacing-100);
 }
 
 span.tourtip__heading {

package/src/less/typography/typography.less

@@ -35,7 +35,7 @@
 }
 
 .bold-text {
-    font-weight: @font-weight-bold;
+    font-weight: var(--font-weight-bold);
 }
 
 .secondary-text {
@@ -82,7 +82,7 @@
 .large-section-title,
 .medium-section-title,
 .small-section-title {
-    font-weight: @font-weight-bold;
+    font-weight: var(--font-weight-bold);
 }
 
 @media (min-width: @_screen-size-SM) {

package/src/less/variables/variables.less

@@ -19,10 +19,10 @@
 @_page-grid-outside-margins-small: 16px;
 @_page-grid-outside-margins-large: 32px;
 @_page-grid-outside-margins-max: 48px;
-@_page-grid-column-gaps-small: @spacing-100;
-@_page-grid-column-gaps-large: @spacing-200;
-@_page-grid-row-gaps-small: @spacing-100;
-@_page-grid-row-gaps-large: @spacing-200;
+@_page-grid-column-gaps-small: var(--spacing-100);
+@_page-grid-column-gaps-large: var(--spacing-200);
+@_page-grid-row-gaps-small: var(--spacing-100);
+@_page-grid-row-gaps-large: var(--spacing-200);
 
 @marketsans-url: "https://ir.ebaystatic.com/cr/v/c1/market-sans/v1.0/";
 @marketsans-fontname: "Market Sans";
@@ -30,7 +30,7 @@
 @marketsans-filename-bold: "MarketSans-SemiBold-WebS";
 
 @font-family-default: @marketsans-fontname, Arial, sans-serif;
-
+// TODO: remove these in next major version
 @font-weight-regular: 500;
 @font-weight-bold: 700;
 
@@ -55,6 +55,7 @@
 @spacing-250: @spacing-100 * 2.5;
 @spacing-300: @spacing-100 * 3;
 @spacing-400: @spacing-100 * 4;
+@spacing-450: @spacing-100 * 4.5;
 @spacing-600: @spacing-100 * 6;
 @spacing-800: @spacing-100 * 8;
 

package/src/less/video/video.less

@@ -35,7 +35,7 @@
 }
 
 .video-player__report-button > svg {
-    margin-right: @spacing-50;
+    margin-inline-end: var(--spacing-50);
 }
 
 .video-player .shaka-overflow-menu svg {
@@ -67,10 +67,3 @@
 .video-player--poster .shaka-scrim-container {
     visibility: hidden;
 }
-
-[dir="rtl"] {
-    .video-player__report-button > svg {
-        margin-left: @spacing-50;
-        margin-right: 0;
-    }
-}

package/src/svg/icon/icon-ai-spectrum-16-colored.svg

@@ -0,0 +1,24 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M6.682 4.104a3.358 3.358 0 0 1-2.578 2.578l-2.467.53c-.85.182-.85 1.394 0 1.576l2.467.53a3.358 3.358 0 0 1 2.578 2.578l.53 2.467c.182.85 1.394.85 1.576 0l.53-2.467a3.358 3.358 0 0 1 2.578-2.578l2.467-.53c.85-.182.85-1.394 0-1.576l-2.467-.53a3.358 3.358 0 0 1-2.578-2.578l-.53-2.467c-.182-.85-1.394-.85-1.576 0l-.53 2.467ZM8 6.145A5.364 5.364 0 0 1 6.145 8 5.364 5.364 0 0 1 8 9.855 5.364 5.364 0 0 1 9.855 8 5.364 5.364 0 0 1 8 6.145Z"
+    fill="url(#ref-ai-spectrum-16-colored)"
+  />
+  <defs>
+    <linearGradient
+      id="ref-ai-spectrum-16-colored"
+      x1="21.21"
+      y1="11.161"
+      x2="11.274"
+      y2="21.774"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop offset=".098" stop-color="#FFD80E" />
+      <stop offset=".267" stop-color="#FF4242" />
+      <stop offset=".418" stop-color="#993EE0" />
+      <stop offset=".562" stop-color="#0968F6" />
+      <stop offset=".785" stop-color="#4EE04B" />
+    </linearGradient>
+  </defs>
+</svg>

package/src/svg/icon/icon-ai-spectrum-20-colored.svg

@@ -0,0 +1,24 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M10 6.303A6.32 6.32 0 0 1 6.303 10 6.32 6.32 0 0 1 10 13.697 6.32 6.32 0 0 1 13.697 10 6.32 6.32 0 0 1 10 6.303Zm1.013-4.484c-.234-1.092-1.792-1.092-2.026 0L8.306 4.99A4.317 4.317 0 0 1 4.99 8.306l-3.172.681c-1.092.234-1.092 1.792 0 2.026l3.172.681a4.317 4.317 0 0 1 3.315 3.315l.681 3.172c.234 1.092 1.792 1.092 2.026 0l.681-3.172a4.317 4.317 0 0 1 3.315-3.315l3.172-.681c1.092-.234 1.092-1.792 0-2.026l-3.172-.681a4.317 4.317 0 0 1-3.315-3.315l-.681-3.172Z"
+    fill="url(#ref-ai-spectrum-20-colored)"
+  />
+  <defs>
+    <linearGradient
+      id="ref-ai-spectrum-20-colored"
+      x1="26.984"
+      y1="14.065"
+      x2="14.21"
+      y2="27.71"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop offset=".098" stop-color="#FFD80E" />
+      <stop offset=".267" stop-color="#FF4242" />
+      <stop offset=".418" stop-color="#993EE0" />
+      <stop offset=".562" stop-color="#0968F6" />
+      <stop offset=".785" stop-color="#4EE04B" />
+    </linearGradient>
+  </defs>
+</svg>

package/src/svg/icon/icon-ai-spectrum-24-colored.svg

@@ -0,0 +1,24 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="m12 5.76-.115.538a7.276 7.276 0 0 1-5.587 5.587L5.76 12l.537.115a7.276 7.276 0 0 1 5.587 5.587l.115.537.115-.537a7.276 7.276 0 0 1 5.587-5.587L18.24 12l-.537-.115a7.276 7.276 0 0 1-5.587-5.587L12 5.76ZM13.238 2c-.286-1.334-2.19-1.333-2.476 0l-.833 3.878a5.277 5.277 0 0 1-4.051 4.051L2 10.762c-1.335.286-1.334 2.19 0 2.476l3.877.833a5.277 5.277 0 0 1 4.051 4.051L10.762 22c.286 1.334 2.19 1.334 2.476 0l.833-3.878a5.277 5.277 0 0 1 4.051-4.051L22 13.238c1.334-.286 1.334-2.19 0-2.476l-3.878-.833a5.277 5.277 0 0 1-4.051-4.051L13.238 2Z"
+    fill="url(#ref-ai-spectrum-24-colored)"
+  />
+  <defs>
+    <linearGradient
+      id="ref-ai-spectrum-24-colored"
+      x1="32.758"
+      y1="16.968"
+      x2="17.145"
+      y2="33.645"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop offset=".098" stop-color="#FFD80E" />
+      <stop offset=".267" stop-color="#FF4242" />
+      <stop offset=".418" stop-color="#993EE0" />
+      <stop offset=".562" stop-color="#0968F6" />
+      <stop offset=".785" stop-color="#4EE04B" />
+    </linearGradient>
+  </defs>
+</svg>

package/src/svg/icon/icon-ai-spectrum-filled-16-colored.svg

@@ -0,0 +1,22 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M8.788 1.637c-.182-.85-1.394-.85-1.576 0l-.53 2.467a3.358 3.358 0 0 1-2.578 2.578l-2.467.53c-.85.182-.85 1.394 0 1.576l2.467.53a3.358 3.358 0 0 1 2.578 2.578l.53 2.467c.182.85 1.394.85 1.576 0l.53-2.467a3.358 3.358 0 0 1 2.578-2.578l2.467-.53c.85-.182.85-1.394 0-1.576l-2.467-.53a3.358 3.358 0 0 1-2.578-2.578l-.53-2.467Z"
+    fill="url(#ref-ai-spectrum-filled-16-colored)"
+  />
+  <defs>
+    <linearGradient
+      id="ref-ai-spectrum-filled-16-colored"
+      x1="21.21"
+      y1="11.161"
+      x2="11.274"
+      y2="21.774"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop offset=".098" stop-color="#FFD80E" />
+      <stop offset=".267" stop-color="#FF4242" />
+      <stop offset=".418" stop-color="#993EE0" />
+      <stop offset=".562" stop-color="#0968F6" />
+      <stop offset=".785" stop-color="#4EE04B" />
+    </linearGradient>
+  </defs>
+</svg>