@ebay/skin 17.5.0 → 18.0.0-next.0

package/src/{less/tourtip/tourtip.less → sass/tourtip/tourtip.scss}

@@ -1,6 +1,6 @@
-@import "../variables/variables.less";
-@import "../mixins/private/bubble-mixins.less";
-@import "../mixins/private/token-mixins.less";
+@import "../variables/variables";
+@import "../mixins/private/bubble-mixins";
+@import "../mixins/private/token-mixins";
 
 .tourtip {
     position: relative;
@@ -11,13 +11,16 @@ span.tourtip {
 }
 
 .tourtip__overlay {
-    .bubble(@border-radius-value: border-radius-100);
+    @include bubble(border-radius-100);
 }
 
 .tourtip__mask {
-    .bubble-mask(@border-radius-value: border-radius-100);
-    .background-color-token(tourtip-background-color, color-background-elevated);
-    .color-token(tourtip-foreground-color, color-foreground-primary);
+    @include bubble-mask(border-radius-100);
+    @include background-color-token(
+        tourtip-background-color,
+        color-background-elevated
+    );
+    @include color-token(tourtip-foreground-color, color-foreground-primary);
 }
 
 span.tourtip__mask {
@@ -25,12 +28,15 @@ span.tourtip__mask {
 }
 
 .tourtip__cell {
-    .bubble-cell(@tourtip-spacing: var(--spacing-200));
+    @include bubble-cell(var(--spacing-200));
 
     flex-wrap: wrap;
 
     a {
-        .color-token(tourtip-foreground-color, color-foreground-primary);
+        @include color-token(
+            tourtip-foreground-color,
+            color-foreground-primary
+        );
 
         &:focus {
             outline: 1px dashed currentColor;
@@ -39,68 +45,71 @@ span.tourtip__mask {
 }
 
 .tourtip__content {
-    .bubble-content();
+    @include bubble-content();
 
     flex-basis: 0;
 }
 
 button.tourtip__close {
-    .bubble-close();
+    @include bubble-close();
 
     outline-offset: -2px;
 }
 
 .tourtip__pointer {
-    .pointer-base();
-    .background-color-token(tourtip-background-color, color-background-elevated);
+    @include pointer-base();
+    @include background-color-token(
+        tourtip-background-color,
+        color-background-elevated
+    );
 }
 
 .tourtip__pointer--top-left {
-    .pointer-top-left();
+    @include pointer-top-left();
 }
 
 .tourtip__pointer--top {
-    .pointer-top-center();
+    @include pointer-top-center();
 }
 
 .tourtip__pointer--top-right {
-    .pointer-top-right();
+    @include pointer-top-right();
 }
 
 .tourtip__pointer--bottom-left {
-    .pointer-bottom-left();
+    @include pointer-bottom-left();
 }
 
 .tourtip__pointer--bottom {
-    .pointer-bottom-center();
+    @include pointer-bottom-center();
 }
 
 .tourtip__pointer--bottom-right {
-    .pointer-bottom-right();
+    @include pointer-bottom-right();
 }
 
 .tourtip__pointer--left {
-    .pointer-left();
+    @include pointer-left();
 }
 
 .tourtip__pointer--left-bottom {
-    .pointer-left-bottom();
+    @include pointer-left-bottom();
 }
 
 .tourtip__pointer--left-top {
-    .pointer-left-top();
+    @include pointer-left-top();
 }
 
 .tourtip__pointer--right {
-    .pointer-right();
+    @include pointer-right();
 }
 
 .tourtip__pointer--right-bottom {
-    .pointer-right-bottom();
+    @include pointer-right-bottom();
 }
 
 .tourtip__pointer--right-top {
-    .pointer-right-top();
+    @include pointer-right-top();
 }
 
 .tourtip__heading {
@@ -130,29 +139,28 @@ span.tourtip__heading {
     margin-right: 8px;
 }
 
-// stylelint-disable no-descending-specificity
-// TODO need to remove this once we update fake-links/links to allow no underline and black text
+/* stylelint-disable no-descending-specificity */
+/* TODO need to remove this once we update fake-links/links to allow no underline and black text */
 .tourtip__footer > .fake-link,
 .tourtip__footer > a {
     color: var(--color-foreground-primary);
-
     text-decoration: none;
 
     &:hover:not(:disabled) {
         color: var(--color-foreground-primary);
-
         text-decoration: underline;
     }
 }
-// stylelint-enable no-descending-specificity
+/* stylelint-enable no-descending-specificity */
 
 .tourtip__index {
-    .color-token(tourtip-index-color, color-foreground-secondary);
+    @include color-token(tourtip-index-color, color-foreground-secondary);
+
     flex: 1;
 }
 
-@media (min-width: @_screen-size-SM) {
+@media (min-width: $_screen-size-SM) {
     .tourtip__overlay {
-        .bubble-large-screen();
+        @include bubble-large-screen();
     }
 }

package/src/{less/typography/typography.less → sass/typography/typography.scss}

@@ -1,37 +1,37 @@
-@import "../variables/variables.less";
-@import "../mixins/public/typography-mixins.less";
-@import "../mixins/private/token-mixins.less";
+@import "../variables/variables";
+@import "../mixins/public/typography-mixins";
+@import "../mixins/private/token-mixins";
 
 .giant-text-3 {
-    .typography-giant-3();
+    @include typography-giant-3();
 }
 
 .giant-text-2 {
-    .typography-giant-2();
+    @include typography-giant-2();
 }
 
 .giant-text-1 {
-    .typography-giant-1();
+    @include typography-giant-1();
 }
 
 .large-text-2 {
-    .typography-large-2();
+    @include typography-large-2();
 }
 
 .large-text-1 {
-    .typography-large-1();
+    @include typography-large-1();
 }
 
 .medium-text {
-    .typography-medium();
+    @include typography-medium();
 }
 
 .regular-text {
-    .typography-regular();
+    @include typography-regular();
 }
 
 .small-text {
-    .typography-small();
+    @include typography-small();
 }
 
 .bold-text {
@@ -39,7 +39,10 @@
 }
 
 .secondary-text {
-    .color-token(typography-secondary-text-color, color-foreground-secondary);
+    @include color-token(
+        typography-secondary-text-color,
+        color-foreground-secondary
+    );
 }
 
 .emphasis-text {
@@ -60,22 +63,22 @@
 
 .giant-product-title,
 .giant-section-title {
-    .title-giant-screen-small();
+    @include title-giant-screen-small();
 }
 
 .large-product-title,
 .large-section-title {
-    .title-large-screen-small();
+    @include title-large-screen-small();
 }
 
 .medium-product-title,
 .medium-section-title {
-    .title-medium-screen-small();
+    @include title-medium-screen-small();
 }
 
 .small-product-title,
 .small-section-title {
-    .title-small-screen-small();
+    @include title-small-screen-small();
 }
 
 .giant-section-title,
@@ -85,24 +88,24 @@
     font-weight: var(--font-weight-bold);
 }
 
-@media (min-width: @_screen-size-SM) {
+@media (min-width: $_screen-size-SM) {
     .giant-product-title,
     .giant-section-title {
-        .title-giant-screen-large();
+        @include title-giant-screen-large();
     }
 
     .large-product-title,
     .large-section-title {
-        .title-large-screen-large();
+        @include title-large-screen-large();
     }
 
     .medium-product-title,
     .medium-section-title {
-        .title-medium-screen-large();
+        @include title-medium-screen-large();
     }
 
     .small-product-title,
     .small-section-title {
-        .title-small-screen-large();
+        @include title-small-screen-large();
     }
 }

package/src/{less/utility/utility.less → sass/utility/utility.scss}

@@ -1,8 +1,8 @@
-@import "../variables/variables.less";
-@import "../mixins/private/token-mixins.less";
-@import "../mixins/public/utility-mixins.less";
+@import "../variables/variables";
+@import "../mixins/private/token-mixins";
+@import "../mixins/public/utility-mixins";
 
-// clear floated elements
+/* clear floated elements */
 .clearfix {
     &::before,
     &::after {
@@ -16,7 +16,7 @@
     }
 }
 
-// visibly hidden
+/* visibly hidden */
 .clipped {
     border: 0;
     clip: rect(1px, 1px, 1px, 1px);
@@ -28,7 +28,7 @@
     width: 1px;
 }
 
-// visibly unhidden on focus
+/* visibly unhidden on focus */
 .clipped--stealth:focus {
     clip: auto;
     height: auto;
@@ -37,19 +37,19 @@
     width: auto;
 }
 
-// Image will stretch up and down
+/* Image will stretch up and down */
 .image-stretch {
     height: auto;
     width: 100%;
 }
 
-// Image will scale up and down
+/* Image will scale up and down */
 .image-scale {
     height: auto;
     max-width: 100%;
 }
 
-// Vertically and horizontally center an image
+/* Vertically and horizontally center an image */
 .image-center {
     display: table-cell;
     text-align: center;
@@ -61,14 +61,14 @@
     }
 }
 
-//greys out space in the li not taken by the img, in order to match height to other img
+/* greys out space in the li not taken by the img, in order to match height to other img */
 .image-treatment {
-    .imageTreatment();
+    @include image-treatment();
 }
 
-// Image will have border-radius of 16px; this should be applied to images larger than 40px
+/* Image will have border-radius of 16px; this should be applied to images larger than 40px */
 .image-treatment-large {
-    .imageTreatment(16px);
+    @include image-treatment(16px);
 }
 
 .text-truncate {

package/src/sass/variables/_variables.scss

@@ -0,0 +1,64 @@
+/* Responsive Breakpoints */
+/* The first breakpoint simply indicates minimum support level. It should not be used with media queries. */
+/* Mobile-first means the default layout applies to mobile and there should be no mimimums even though */
+/* most mobile devices would be higher in screen width than the smallest viewport width. */
+
+/* The variables with underscores are to be considered constants. They can be read, but should not be modified. */
+$_screen-size-XS: 320px;
+$_screen-size-SM: 512px;
+$_screen-size-MD: 768px;
+$_screen-size-LG: 1024px;
+$_screen-size-XL: 1280px;
+$_screen-size-XL2: 1440px;
+$_screen-size-XL3: 1680px;
+$_screen-size-XL4: 1920px;
+$_page-grid-max-width: 1584px;
+$_page-grid-number-cols-small: 8;
+$_page-grid-number-cols-large: 16;
+$_page-grid-outside-margins-small: 16px;
+$_page-grid-outside-margins-large: 32px;
+$_page-grid-outside-margins-max: 48px;
+$_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";
+$marketsans-filename-regular: "MarketSans-Regular-WebS";
+$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;
+$font-size-12: 0.75rem;
+$font-size-14: 0.875rem;
+$font-size-16: 1rem;
+$font-size-18: 1.125rem; /* secret size */
+$font-size-20: 1.25rem;
+$font-size-24: 1.5rem;
+$font-size-30: 1.875rem;
+$font-size-36: 2.25rem;
+$font-size-46: 2.875rem;
+$font-size-64: 4rem;
+$spacing-100: 8px;
+$spacing-25: $spacing-100 * 0.25;
+$spacing-50: $spacing-100 * 0.5;
+$spacing-75: $spacing-100 * 0.75;
+$spacing-125: $spacing-100 * 1.25;
+$spacing-150: $spacing-100 * 1.5;
+$spacing-200: $spacing-100 * 2;
+$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-700: $spacing-100 * 7;
+$spacing-800: $spacing-100 * 8;
+$font-size-giant-3: $font-size-46;
+$font-size-giant-2: $font-size-36;
+$font-size-giant-1: $font-size-30;
+$font-size-large-2: $font-size-24;
+$font-size-large-1: $font-size-20;
+$font-size-medium: $font-size-16;
+$font-size-regular: $font-size-14;
+$font-size-small: $font-size-12;

package/src/{less/video/video.less → sass/video/video.scss}

@@ -1,5 +1,5 @@
-@import "../variables/variables.less";
-@import "../mixins/private/token-mixins.less";
+@import "../variables/variables";
+@import "../mixins/private/token-mixins";
 
 .video-player {
     position: relative;
@@ -14,7 +14,7 @@
     align-items: center;
     background-color: rgba(0, 0, 0, 0.6);
     bottom: 0;
-    color: var(--color-neutral-0);
+    color: var(--color-neutral-100);
     cursor: pointer;
     display: flex;
     flex-direction: column;

package/src/svg/icons.svg

@@ -16,11 +16,11 @@
       <stop offset=".785" stop-color="#4EE04B" />
     </linearGradient>
     <linearGradient
-      id="ref-ai-spectrum-20-colored"
-      x1="26.984"
-      y1="14.065"
-      x2="14.21"
-      y2="27.71"
+      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" />
@@ -44,7 +44,21 @@
       <stop offset=".785" stop-color="#4EE04B" />
     </linearGradient>
     <linearGradient
-      id="ref-ai-spectrum-filled-16-colored"
+      id="ref-ai-spectrum-filled-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>
+    <linearGradient
+      id="ref-ai-spectrum-thin-16-colored"
       x1="21.21"
       y1="11.161"
       x2="11.274"
@@ -72,7 +86,7 @@
       <stop offset=".785" stop-color="#4EE04B" />
     </linearGradient>
     <linearGradient
-      id="ref-ai-spectrum-filled-20-colored"
+      id="ref-ai-spectrum-20-colored"
       x1="26.984"
       y1="14.065"
       x2="14.21"
@@ -85,20 +99,6 @@
       <stop offset=".562" stop-color="#0968F6" />
       <stop offset=".785" stop-color="#4EE04B" />
     </linearGradient>
-    <linearGradient
-      id="ref-ai-spectrum-thin-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>
   <symbol viewBox="0 0 16 16" id="icon-add-16">
     <path