@ebay/skin 17.5.0-next.0 → 18.0.0-next.0

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

@@ -1,5 +1,5 @@
-@import "../variables/variables.less";
-@import "../mixins/private/token-mixins.less";
+@import "../variables/variables";
+@import "../mixins/private/token-mixins";
 
 .signal {
     border: 1px solid;
@@ -17,17 +17,20 @@
 }
 
 .signal--trustworthy {
-    .color-token(signal-trustworthy-color, color-foreground-accent);
+    @include color-token(signal-trustworthy-color, color-foreground-accent);
 }
 
 .signal--recent {
-    .color-token(signal-recent-color, color-foreground-confirmation);
+    @include color-token(signal-recent-color, color-foreground-confirmation);
 }
 
 .signal--time-sensitive {
-    .color-token(signal-time-sensitive-color, color-foreground-attention);
+    @include color-token(
+        signal-time-sensitive-color,
+        color-foreground-attention
+    );
 }
 
 .signal--neutral {
-    .color-token(signal-neutral-color, color-foreground-secondary);
+    @include color-token(signal-neutral-color, color-foreground-secondary);
 }

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

@@ -1,6 +1,6 @@
-@import "../variables/variables.less";
-@import "../mixins/private/button-mixins.less";
-@import "../mixins/private/token-mixins.less";
+@import "../variables/variables";
+@import "../mixins/private/button-mixins";
+@import "../mixins/private/token-mixins";
 
 .skeleton {
     container-name: skeleton-container;
@@ -14,11 +14,12 @@
 .skeleton__text,
 .skeleton__image,
 .skeleton__textbox {
-    .background-token(skeleton-background, color-loading-fill);
+    @include background-token(skeleton-background, color-loading-fill);
+
     width: 100%;
 }
 
-// TODO: Need to swap these with component css variables and expose it instead
+/* TODO: Need to swap these with component css variables and expose it instead */
 .skeleton__avatar {
     border-radius: var(--avatar-border-radius, 50%);
     height: 48px;
@@ -26,18 +27,18 @@
 }
 
 .skeleton__button {
-    border-radius: var(--btn-border-radius, calc(@button-height-regular / 2));
-    height: @button-height-regular;
+    border-radius: var(--btn-border-radius, calc($button-height-regular / 2));
+    height: $button-height-regular;
 }
 
 .skeleton__button--small {
-    border-radius: var(--btn-border-radius, calc(@button-height-small / 2));
-    height: @button-height-small;
+    border-radius: var(--btn-border-radius, calc($button-height-small / 2));
+    height: $button-height-small;
 }
 
 .skeleton__button--large {
-    border-radius: var(--btn-border-radius, calc(@button-height-large / 2));
-    height: @button-height-large;
+    border-radius: var(--btn-border-radius, calc($button-height-large / 2));
+    height: $button-height-large;
 }
 
 .skeleton__text {
@@ -78,18 +79,20 @@
 }
 
 .skeleton__textbox {
-    .border-radius-token(textbox-border-radius, border-radius-50);
+    @include border-radius-token(textbox-border-radius, border-radius-50);
+
     height: 48px;
 }
 
 .skeleton__image {
-    .border-radius-token(image-border-radius, border-radius-50);
+    @include border-radius-token(image-border-radius, border-radius-50);
+
     height: 100%;
     max-width: initial;
 }
 
-// TODO: Use aspect-ratio : 1 / 1 to set as square when we have browser support, till then
-// using pseudo element to set as square
+/* TODO: Use aspect-ratio : 1 / 1 to set as square when we have browser support, till then */
+/* using pseudo element to set as square */
 .skeleton__image::after {
     bottom: 0;
     height: 100%;
@@ -124,7 +127,7 @@ div.skeleton__textbox:not(:last-child) {
     margin-block-end: var(--spacing-150);
 }
 
-// Deprecated, remove next major
+/* Deprecated, remove next major */
 .skeleton--elevated {
     --skeleton-background: var(--color-loading-fill-elevated);
 }
@@ -133,12 +136,12 @@ div.skeleton__textbox:not(:last-child) {
     --skeleton-background: var(--color-loading-fill-on-secondary);
 }
 
-@media screen and (max-width: @_screen-size-SM) {
+@media screen and (max-width: $_screen-size-SM) {
     .skeleton {
         --skeleton-background: var(--color-loading-shimmer);
     }
 
-    // Deprecated, remove next major
+    /* Deprecated, remove next major */
     .skeleton--elevated {
         --skeleton-background: var(--color-loading-shimmer-elevated);
     }
@@ -197,10 +200,10 @@ div.skeleton__textbox:not(:last-child) {
     }
 }
 
-// A progressive enhancement to make the skeleton image rounded
+/* A progressive enhancement to make the skeleton image rounded */
 @container skeleton-container (width > 79px) {
     .skeleton__image {
-        .border-radius-token(image-border-radius, border-radius-100);
+        @include border-radius-token(image-border-radius, border-radius-100);
     }
 }
 

package/src/{less/snackbar-dialog/snackbar-dialog.less → sass/snackbar-dialog/snackbar-dialog.scss}

@@ -1,20 +1,31 @@
-@import "../variables/variables.less";
-@import "../mixins/private/dialog-mixins.less";
-@import "../mixins/private/token-mixins.less";
+@import "../variables/variables";
+@import "../mixins/private/dialog-mixins";
+@import "../mixins/private/token-mixins";
 
 .snackbar-dialog {
-    .background-color-token(snackbar-dialog-background-color, color-background-inverse);
-    .border-radius-token(snackbar-dialog-border-radius, border-radius-100);
+    @include background-color-token(
+        snackbar-dialog-background-color,
+        color-background-inverse
+    );
+    @include border-radius-token(
+        snackbar-dialog-border-radius,
+        border-radius-100
+    );
+
     bottom: 40px;
     box-shadow: 0 0 3px rgba(0, 0, 0, 0.28);
-    .color-token(snackbar-dialog-foreground-color, color-foreground-on-inverse);
+    @include color-token(
+        snackbar-dialog-foreground-color,
+        color-foreground-on-inverse
+    );
+
     left: var(--spacing-100);
     margin: auto;
     max-height: 40vh;
     max-width: 448px;
     position: fixed;
     right: var(--spacing-100);
-    // Setting translateY to 0 to fix a bug in safari which does a double transform
+    /* Setting translateY to 0 to fix a bug in safari which does a double transform */
     transform: translateY(0);
     will-change: opacity, transform;
     z-index: 2;
@@ -66,7 +77,11 @@
 }
 
 .snackbar-dialog__actions .fake-link {
-    .color-token(snackbar-dialog-foreground-color, color-foreground-on-inverse);
+    @include color-token(
+        snackbar-dialog-foreground-color,
+        color-foreground-on-inverse
+    );
+
     text-decoration: none;
 
     &::first-letter {
@@ -74,13 +89,17 @@
     }
 }
 
-// this needs to be super specific to override base fake-link
+/* this needs to be super specific to override base fake-link */
 .snackbar-dialog__actions button.fake-link:hover:not(:disabled) {
-    .color-token(snackbar-dialog-foreground-color, color-foreground-on-inverse);
+    @include color-token(
+        snackbar-dialog-foreground-color,
+        color-foreground-on-inverse
+    );
+
     text-decoration: underline;
 }
 
-@media (min-width: @_screen-size-SM) {
+@media (min-width: $_screen-size-SM) {
     .snackbar-dialog {
         bottom: 20px;
     }

package/src/{less/split-button/split-button.less → sass/split-button/split-button.scss}

@@ -1,4 +1,4 @@
-@import "../variables/variables.less";
+@import "../variables/variables";
 
 .split-button {
     display: inline-flex;

package/src/{less → sass}/split-button/stories/base.stories.js

@@ -8,7 +8,7 @@ export const primaryCollapsed = () => `
     </button>
     <span class="menu-button">
         <button class="btn btn--primary btn--split-end" aria-haspopup="true" type="button">
-            <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
+            <svg class="icon icon--12" height="10" width="14" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
@@ -38,7 +38,7 @@ export const primaryExpanded = () => `
     </button>
     <span class="menu-button">
         <button class="btn btn--primary btn--split-end" aria-haspopup="true" aria-expanded="true" type="button">
-            <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
+            <svg class="icon icon--12" height="10" width="14" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
@@ -68,7 +68,7 @@ export const secondaryCollapsed = () => `
     </button>
     <span class="menu-button">
         <button class="btn btn--secondary btn--split-end" aria-haspopup="true" type="button">
-            <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
+            <svg class="icon icon--12" height="10" width="14" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
@@ -98,7 +98,7 @@ export const secondaryExpanded = () => `
     </button>
     <span class="menu-button">
         <button class="btn btn--secondary btn--split-end" aria-expanded="true" aria-haspopup="true" type="button">
-            <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
+            <svg class="icon icon--12" height="10" width="14" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
@@ -128,7 +128,7 @@ export const tertiaryCollapsed = () => `
     </button>
     <span class="menu-button">
         <button class="btn btn--tertiary btn--split-end" aria-haspopup="true" type="button">
-            <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
+            <svg class="icon icon--12" height="10" width="14" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
@@ -158,7 +158,7 @@ export const tertiaryExpanded = () => `
     </button>
     <span class="menu-button">
         <button class="btn btn--tertiary btn--split-end" aria-expanded="true" aria-haspopup="true" type="button">
-            <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
+            <svg class="icon icon--12" height="10" width="14" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
@@ -186,7 +186,7 @@ export const fakePrimaryCollapsed = () => `
     </a>
     <span class="menu-button">
         <button class="btn btn--primary btn--split-end" aria-haspopup="true" type="button">
-            <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
+            <svg class="icon icon--12" height="10" width="14" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
@@ -214,7 +214,7 @@ export const fakePrimaryExpanded = () => `
     </a>
     <span class="menu-button">
         <button class="btn btn--primary btn--split-end" aria-haspopup="true" aria-expanded="true" type="button">
-            <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
+            <svg class="icon icon--12" height="10" width="14" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
@@ -242,7 +242,7 @@ export const fakeSecondaryCollapsed = () => `
     </a>
     <span class="menu-button">
         <button class="btn btn--secondary btn--split-end" aria-haspopup="true" type="button">
-            <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
+            <svg class="icon icon--12" height="10" width="14" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
@@ -270,7 +270,7 @@ export const fakeSecondaryExpanded = () => `
     </a>
     <span class="menu-button">
         <button class="btn btn--secondary btn--split-end" aria-expanded="true" aria-haspopup="true" type="button">
-            <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
+            <svg class="icon icon--12" height="10" width="14" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
@@ -298,7 +298,7 @@ export const fakeTertiaryCollapsed = () => `
     </a>
     <span class="menu-button">
         <button class="btn btn--tertiary btn--split-end" aria-haspopup="true" type="button">
-            <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
+            <svg class="icon icon--12" height="10" width="14" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
@@ -326,7 +326,7 @@ export const fakeTertiaryExpanded = () => `
     </a>
     <span class="menu-button">
         <button class="btn btn--tertiary btn--split-end" aria-expanded="true" aria-haspopup="true" type="button">
-            <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
+            <svg class="icon icon--12" height="10" width="14" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
@@ -356,7 +356,7 @@ export const textSpacing = () => `
     </button>
     <span class="menu-button">
         <button class="btn btn--primary btn--split-end" aria-haspopup="true" aria-expanded="true" type="button">
-            <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
+            <svg class="icon icon--12" height="10" width="14" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>

package/src/{less → sass}/split-button/stories/rtl.stories.js

@@ -10,7 +10,7 @@ export const primaryCollapsed = () => `
         </button>
         <span class="menu-button">
             <button class="btn btn--primary btn--split-end" aria-haspopup="true" type="button">
-                <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
+                <svg class="icon icon--12" height="10" width="14" aria-hidden="true">
                     <use href="#icon-chevron-down-12"></use>
                 </svg>
             </button>
@@ -42,7 +42,7 @@ export const primaryExpanded = () => `
         </button>
         <span class="menu-button">
             <button class="btn btn--primary btn--split-end" aria-haspopup="true" aria-expanded="true" type="button">
-                <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
+                <svg class="icon icon--12" height="10" width="14" aria-hidden="true">
                     <use href="#icon-chevron-down-12"></use>
                 </svg>
             </button>
@@ -74,7 +74,7 @@ export const secondaryCollapsed = () => `
         </button>
         <span class="menu-button">
             <button class="btn btn--secondary btn--split-end" aria-haspopup="true" type="button">
-                <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
+                <svg class="icon icon--12" height="10" width="14" aria-hidden="true">
                     <use href="#icon-chevron-down-12"></use>
                 </svg>
             </button>
@@ -106,7 +106,7 @@ export const secondaryExpanded = () => `
         </button>
         <span class="menu-button">
             <button class="btn btn--secondary btn--split-end" aria-expanded="true" aria-haspopup="true" type="button">
-                <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
+                <svg class="icon icon--12" height="10" width="14" aria-hidden="true">
                     <use href="#icon-chevron-down-12"></use>
                 </svg>
             </button>
@@ -138,7 +138,7 @@ export const tertiaryCollapsed = () => `
         </button>
         <span class="menu-button">
             <button class="btn btn--tertiary btn--split-end" aria-haspopup="true" type="button">
-                <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
+                <svg class="icon icon--12" height="10" width="14" aria-hidden="true">
                     <use href="#icon-chevron-down-12"></use>
                 </svg>
             </button>
@@ -170,7 +170,7 @@ export const tertiaryExpanded = () => `
         </button>
         <span class="menu-button">
             <button class="btn btn--tertiary btn--split-end" aria-expanded="true" aria-haspopup="true" type="button">
-                <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
+                <svg class="icon icon--12" height="10" width="14" aria-hidden="true">
                     <use href="#icon-chevron-down-12"></use>
                 </svg>
             </button>

package/src/{less → sass}/split-button/stories/size.stories.js

@@ -8,7 +8,7 @@ export const longTextCollapsed = () => `
     </button>
     <span class="menu-button">
         <button class="btn btn--primary btn--split-end" aria-haspopup="true" type="button">
-            <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
+            <svg class="icon icon--12" height="10" width="14" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
@@ -38,7 +38,7 @@ export const longTextExpanded = () => `
     </button>
     <span class="menu-button">
         <button class="btn btn--primary btn--split-end" aria-expanded="true" aria-haspopup="true" type="button">
-            <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
+            <svg class="icon icon--12" height="10" width="14" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>

package/src/{less/star-rating/star-rating.less → sass/star-rating/star-rating.scss}

@@ -1,12 +1,12 @@
-@import "../variables/variables.less";
-@import "../mixins/private/token-mixins.less";
+@import "../variables/variables";
+@import "../mixins/private/token-mixins";
 
-@color-star-rating-icon-unfilled-foreground: transparent;
-@color-star-rating-icon-filled-foreground: var(--color-foreground-primary);
+$color-star-rating-icon-unfilled-foreground: transparent;
+$color-star-rating-icon-filled-foreground: var(--color-foreground-primary);
 
-// we have to use core color here since dark mode and light mode have the same stroke
-@color-star-rating-icon-unfilled-stroke: var(--color-neutral-5);
-@color-star-rating-icon-filled-stroke: var(--color-foreground-primary);
+/* we have to use core color here since dark mode and light mode have the same stroke */
+$color-star-rating-icon-unfilled-stroke: var(--color-neutral-600);
+$color-star-rating-icon-filled-stroke: var(--color-foreground-primary);
 
 svg.star-rating {
     display: inline-block;
@@ -31,15 +31,15 @@ div.star-rating[data-stars^="4"] svg:nth-child(-n + 4),
 div.star-rating[data-stars^="5"] svg:nth-child(-n + 5) {
     --color-star-rating-full: var(
         --color-star-rating-filled,
-        @color-star-rating-icon-filled-foreground
+        $color-star-rating-icon-filled-foreground
     );
     --color-star-rating-full-stroke: var(
         --color-star-rating-filled-stroke,
-        @color-star-rating-icon-filled-stroke
+        $color-star-rating-icon-filled-stroke
     );
     --color-star-rating-half-stroke: var(
         --color-star-rating-filled-stroke,
-        @color-star-rating-icon-filled-stroke
+        $color-star-rating-icon-filled-stroke
     );
 }
 
@@ -51,18 +51,18 @@ div.star-rating[data-stars="3-5"] svg:nth-child(4),
 div.star-rating[data-stars="4-5"] svg:nth-child(5) {
     --color-star-rating-half: var(
         --color-star-rating-filled,
-        @color-star-rating-icon-filled-foreground
+        #{$color-star-rating-icon-filled-foreground}
     );
     --color-star-rating-full: var(
         --color-star-rating-unfilled,
-        @color-star-rating-icon-unfilled-foreground
+        #{$color-star-rating-icon-unfilled-foreground}
     );
     --color-star-rating-full-stroke: var(
         --color-star-rating-unfilled-stroke,
-        @color-star-rating-icon-unfilled-stroke
+        #{$color-star-rating-icon-unfilled-stroke}
     );
     --color-star-rating-half-stroke: var(
         --color-star-rating-filled-stroke,
-        @color-star-rating-icon-filled-stroke
+        #{$color-star-rating-icon-filled-stroke}
     );
 }

package/src/{less/star-rating-select/star-rating-select.less → sass/star-rating-select/star-rating-select.scss}

@@ -1,16 +1,16 @@
-@import "../variables/variables.less";
-@import "../mixins/private/icon-mixins.less";
-@import "../mixins/private/token-mixins.less";
+@import "../variables/variables";
+@import "../mixins/private/icon-mixins";
+@import "../mixins/private/token-mixins";
 
-@color-star-rating-icon-unfilled-foreground: transparent;
-@color-star-rating-icon-filled-foreground: var(--color-foreground-primary);
+$color-star-rating-icon-unfilled-foreground: transparent;
+$color-star-rating-icon-filled-foreground: var(--color-foreground-primary);
 
-// we have to use core color here since dark mode and light mode have the same stroke
-@color-star-rating-icon-unfilled-stroke: var(--color-neutral-5);
-@color-star-rating-icon-filled-stroke: var(--color-foreground-primary);
+/* we have to use core color here since dark mode and light mode have the same stroke */
+$color-star-rating-icon-unfilled-stroke: var(--color-neutral-600);
+$color-star-rating-icon-filled-stroke: var(--color-foreground-primary);
 
 div.star-rating-select {
-    cursor: pointer; // this ensures text selection cursor is not used between stars
+    cursor: pointer; /* this ensures text selection cursor is not used between stars */
     display: inline-block;
 }
 
@@ -21,7 +21,7 @@ span.star-rating-select__radio {
 }
 
 span.star-rating-select__radio svg {
-    .icon-base-mixin();
+    @include icon-base-mixin();
 }
 
 span.star-rating-select__radio-icon {
@@ -48,7 +48,8 @@ span.star-rating-select__radio input.star-rating-select__control[type="radio"] {
 
     &:focus + span.star-rating-select__radio-icon {
         outline: 1px auto;
-        .outline-color-token(radio-outline, color-foreground-secondary);
+        @include outline-color-token(radio-outline, color-foreground-secondary);
+
         outline-offset: 2px;
     }
 
@@ -60,7 +61,7 @@ span.star-rating-select__radio input.star-rating-select__control[type="radio"] {
 div.star-rating-select span.star-rating-select__radio-icon svg {
     --color-star-rating-full: var(
         --color-star-rating-unfilled,
-        @color-star-rating-icon-unfilled-foreground
+        #{$color-star-rating-icon-unfilled-foreground}
     );
 }
 
@@ -73,15 +74,15 @@ div.star-rating-select input {
         svg {
         --color-star-rating-full: var(
             --color-star-rating-filled,
-            @color-star-rating-icon-filled-foreground
+            #{$color-star-rating-icon-filled-foreground}
         );
         --color-star-rating-full-stroke: var(
             --color-star-rating-filled-stroke,
-            @color-star-rating-icon-filled-stroke
+            #{$color-star-rating-icon-filled-stroke}
         );
         --color-star-rating-half-stroke: var(
             --color-star-rating-filled-stroke,
-            @color-star-rating-icon-filled-stroke
+            #{$color-star-rating-icon-filled-stroke}
         );
     }
 }