@ebay/skin 17.5.0 → 18.0.0-next.0

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

@@ -1,9 +1,9 @@
-@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";
 
 .drawer-dialog[role="dialog"] {
-    .dialog-base();
+    @include dialog-base();
 
     align-items: flex-end;
 }
@@ -13,7 +13,7 @@
 }
 
 .drawer-dialog__header {
-    .dialog-header-content(@top-margin: var(--spacing-250));
+    @include dialog-header-content(var(--spacing-250));
 }
 
 .drawer-dialog__header .fake-link {
@@ -33,9 +33,10 @@
     z-index: 2;
 }
 
-// Added :after class in order to increase parent hit box
+/* Added :after class in order to increase parent hit box */
 .drawer-dialog__handle::after {
-    .background-color-token(dialog-handle-color, color-stroke-default);
+    @include background-color-token(dialog-handle-color, color-stroke-default);
+
     border-radius: 3px;
     content: "";
     display: block;
@@ -44,7 +45,7 @@
 }
 
 .drawer-dialog__main {
-    .dialog-body-content();
+    @include dialog-body-content();
 
     min-height: auto;
     overflow: auto;
@@ -65,8 +66,8 @@
     }
 }
 
-// inherits from .icon-btn
-// Added icon button selector so it doesn't override fake-link
+/* inherits from .icon-btn */
+/* Added icon button selector so it doesn't override fake-link */
 button.icon-btn.drawer-dialog__close {
     align-self: flex-start;
     border: 0;
@@ -78,7 +79,7 @@ button.icon-btn.drawer-dialog__close {
 }
 
 .drawer-dialog__window {
-    .dialog-window();
+    @include dialog-window();
 
     border-radius: var(--border-radius-100) var(--border-radius-100) 0 0;
     max-height: 50%;
@@ -98,7 +99,7 @@ button.icon-btn.drawer-dialog__close {
 
 .drawer-dialog--show,
 .drawer-dialog--hide {
-    // Root animations.
+    /* Root animations. */
     &.drawer-dialog--mask-fade {
         transition: background-color 0.16s ease-out;
     }
@@ -107,7 +108,7 @@ button.icon-btn.drawer-dialog__close {
         transition: background-color 0.32s ease-out;
     }
 
-    // Child animations.
+    /* Child animations. */
     .drawer-dialog__window--fade {
         transition: opacity 0.16s ease-out;
     }
@@ -117,39 +118,41 @@ button.icon-btn.drawer-dialog__close {
     }
 }
 
-// Apply hide animation.
+/* Apply hide animation. */
 .drawer-dialog--hide,
 .drawer-dialog--show-init {
-    && {
+    &drawer-dialog--hide,
+    &.drawer-dialog--show-init {
         display: flex;
     }
 
-    // Root animations.
+    /* Root animations. */
     &.drawer-dialog--mask-fade,
     &.drawer-dialog--mask-fade-slow {
         background-color: var(--dialog-scrim-color-hide);
     }
 
-    // code smell, chained modifier
+    /* code smell, chained modifier */
     .drawer-dialog__window--slide {
         transform: translateY(100%);
     }
 }
 
-// Apply show animation.
+/* Apply show animation. */
 .drawer-dialog--show,
 .drawer-dialog--hide-init {
-    && {
+    &.drawer-dialog--show,
+    &.drawer-dialog--hide-init {
         display: flex;
     }
 
-    // Root animations.
+    /* Root animations. */
     &.drawer-dialog--mask-fade,
     &.drawer-dialog--mask-fade-slow {
         background-color: var(--dialog-scrim-color-show);
     }
 
-    // Child animations.
+    /* Child animations. */
     .drawer-dialog__window--fade {
         opacity: 1;
     }

package/src/{less → sass}/drawer-dialog/stories/drawer-dialog.stories.js

@@ -7,7 +7,7 @@ export const empty = () => `
         <div class="drawer-dialog__header">
             <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
             <button aria-label="Close dialog" class="icon-btn drawer-dialog__close" type="button">
-                <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
+                <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
                     <use href="#icon-close-16"></use>
                 </svg>
             </button>
@@ -25,7 +25,7 @@ export const partial = () => `
         <div class="drawer-dialog__header">
             <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
             <button aria-label="Close dialog" class="icon-btn drawer-dialog__close" type="button">
-                <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
+                <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
                     <use href="#icon-close-16"></use>
                 </svg>
             </button>
@@ -48,7 +48,7 @@ export const withFooter = () => `
         <div class="drawer-dialog__header">
             <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
             <button aria-label="Close dialog" class="icon-btn drawer-dialog__close" type="button">
-                <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
+                <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
                     <use href="#icon-close-16"></use>
                 </svg>
             </button>
@@ -75,7 +75,7 @@ export const textSpacing = () => `
         <div class="drawer-dialog__header">
             <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
             <button aria-label="Close dialog" class="icon-btn drawer-dialog__close" type="button">
-                <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
+                <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
                     <use href="#icon-close-16"></use>
                 </svg>
             </button>
@@ -103,7 +103,7 @@ export const RTL = () => `
             <div class="drawer-dialog__header">
                 <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
                 <button aria-label="Close dialog" class="icon-btn drawer-dialog__close" type="button">
-                    <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
+                    <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
                         <use href="#icon-close-16"></use>
                     </svg>
                 </button>
@@ -127,7 +127,7 @@ export const half = () => `
         <div class="drawer-dialog__header">
             <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
             <button aria-label="Close dialog" class="icon-btn drawer-dialog__close" type="button">
-                <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
+                <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
                     <use href="#icon-close-16"></use>
                 </svg>
             </button>
@@ -186,7 +186,7 @@ export const full = () => `
         <div class="drawer-dialog__header">
             <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
             <button aria-label="Close dialog" class="icon-btn drawer-dialog__close" type="button">
-                <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
+                <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
                     <use href="#icon-close-16"></use>
                 </svg>
             </button>

package/src/{less/education-notice/education-notice.less → sass/education-notice/education-notice.scss}

@@ -1,16 +1,26 @@
-@import "../variables/variables.less";
-@import "../mixins/private/token-mixins.less";
+@import "../variables/variables";
+@import "../mixins/private/token-mixins";
 
 .education-notice {
-    .background-color-token(education-notice-default-background-color, color-background-secondary);
-    .border-radius-token(education-notice-border-radius, border-radius-100);
+    @include background-color-token(
+        education-notice-default-background-color,
+        color-background-secondary
+    );
+    @include border-radius-token(
+        education-notice-border-radius,
+        border-radius-100
+    );
+
     color: var(--color-foreground-primary);
     font-size: var(--font-size-default);
     padding: var(--spacing-300);
 }
 
 .education-notice--prominent {
-    .background-color-token(education-notice-education-background-color, color-background-education);
+    @include background-color-token(
+        education-notice-education-background-color,
+        color-background-education
+    );
 }
 
 .education-notice__header {
@@ -44,10 +54,14 @@
 }
 
 .education-notice__footer a {
-    .color-token(education-notice-foreground-color, color-foreground-primary);
+    @include color-token(
+        education-notice-foreground-color,
+        color-foreground-primary
+    );
+
     font-size: var(--font-size-default);
     font-weight: 700;
-    white-space: nowrap; // force links with text having more than one word to remain on same line
+    white-space: nowrap; /* force links with text having more than one word to remain on same line */
 }
 
 .education-notice__footer button.fake-link {
@@ -66,7 +80,11 @@
 
 .education-notice__header button.fake-link,
 .education-notice__header button.fake-link:hover {
-    .color-token(education-notice-foreground-color, color-foreground-primary);
+    @include color-token(
+        education-notice-foreground-color,
+        color-foreground-primary
+    );
+
     font-size: var(--font-size-default);
     font-weight: bold;
     height: 24px;

package/src/{less → sass}/education-notice/stories/base.stories.js

@@ -3,7 +3,7 @@ export default { title: "Skin/Education Notice" };
 export const base = () => `
 <section class="education-notice" role="region" aria-label="Education" aria-roledescription="Notice">
     <div class="education-notice__header">
-        <svg class="icon icon--lightbulb-24" height="24" width="24" aria-label="Education">
+        <svg class="icon icon--24" height="24" width="24" aria-label="Education">
             <use href="#icon-lightbulb-24"></use>
         </svg>
         <h3 class="education-notice__title">Did you know?</h3>
@@ -17,7 +17,7 @@ export const base = () => `
 export const prominentIcon = () => `
 <section class="education-notice" role="region" aria-label="Education" aria-roledescription="Notice">
     <div class="education-notice__header">
-        <svg class="icon icon--lightbulb-24 icon--prominent" height="24" width="24" aria-label="Education">
+        <svg class="icon icon--24 icon--prominent" height="24" width="24" aria-label="Education">
             <use href="#icon-lightbulb-24"></use>
         </svg>
         <h3 class="education-notice__title">Did you know?</h3>
@@ -31,7 +31,7 @@ export const prominentIcon = () => `
 export const prominentNotice = () => `
 <section class="education-notice education-notice--prominent" role="region" aria-label="Education" aria-roledescription="Notice">
     <div class="education-notice__header">
-        <svg class="icon icon--authenticity-guarantee-24" height="24" width="24" aria-label="Education">
+        <svg class="icon icon--24" height="24" width="24" aria-label="Education">
             <use href="#icon-authenticity-guarantee-24"></use>
         </svg>
         <h3 class="education-notice__title">Authenticity Guaranteed</h3>
@@ -45,12 +45,12 @@ export const prominentNotice = () => `
 export const dismissable = () => `
 <section class="education-notice" role="region" aria-label="Education" aria-roledescription="Notice">
     <div class="education-notice__header">
-        <svg class="icon icon--lightbulb-24" height="24" width="24" aria-label="Education">
+        <svg class="icon icon--24" height="24" width="24" aria-label="Education">
             <use href="#icon-lightbulb-24"></use>
         </svg>
         <h3 class="education-notice__title">Did you know?</h3>
         <button aria-label="Close notice" type="button" class="icon-btn icon-btn--small education-notice__dismiss">
-            <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
+            <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
                 <use href="#icon-close-16"></use>
             </svg>
         </button>
@@ -64,12 +64,12 @@ export const dismissable = () => `
 export const actionableLink = () => `
 <section class="education-notice" role="region" aria-label="Education" aria-roledescription="Notice">
     <div class="education-notice__header">
-        <svg class="icon icon--the-ebay-vault-24" height="24" width="24" aria-label="Education">
+        <svg class="icon icon--24" height="24" width="24" aria-label="Education">
             <use href="#icon-the-ebay-vault-24"></use>
         </svg>
         <h3 class="education-notice__title">The Vault</h3>
         <button aria-label="Close notice" type="button" class="icon-btn icon-btn--small education-notice__dismiss">
-            <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
+            <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
                 <use href="#icon-close-16"></use>
             </svg>
         </button>
@@ -86,12 +86,12 @@ export const actionableLink = () => `
 export const actionableButton = () => `
 <section class="education-notice" role="region" aria-label="Education" aria-roledescription="Notice">
     <div class="education-notice__header">
-        <svg class="icon icon--the-ebay-vault-24" height="24" width="24" aria-label="Education">
+        <svg class="icon icon--24" height="24" width="24" aria-label="Education">
             <use href="#icon-the-ebay-vault-24"></use>
         </svg>
         <h3 class="education-notice__title">The Vault</h3>
         <button aria-label="Close notice" type="button" class="icon-btn icon-btn--small education-notice__dismiss">
-            <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
+            <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
                 <use href="#icon-close-16"></use>
             </svg>
         </button>
@@ -109,12 +109,12 @@ export const RTL = () => `
 <div dir="rtl">
     <section class="education-notice" role="region" aria-label="Education" aria-roledescription="Notice">
         <div class="education-notice__header">
-            <svg class="icon icon--the-ebay-vault-24" height="24" width="24" aria-label="Education">
+            <svg class="icon icon--24" height="24" width="24" aria-label="Education">
                 <use href="#icon-the-ebay-vault-24"></use>
             </svg>
             <h3 class="education-notice__title">The Vault</h3>
             <button aria-label="Close notice" type="button" class="icon-btn icon-btn--small education-notice__dismiss">
-                <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
+                <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
                     <use href="#icon-close-16"></use>
                 </svg>
             </button>
@@ -132,12 +132,12 @@ export const RTL = () => `
 export const textSpacing = () => `
 <section class="education-notice demo-a11y-text-spacing" role="region" aria-label="Education" aria-roledescription="Notice">
     <div class="education-notice__header">
-        <svg class="icon icon--the-ebay-vault-24" height="24" width="24" aria-label="Education">
+        <svg class="icon icon--24" height="24" width="24" aria-label="Education">
             <use href="#icon-the-ebay-vault-24"></use>
         </svg>
         <h3 class="education-notice__title">The Vault</h3>
         <button aria-label="Close notice" type="button" class="icon-btn icon-btn--small education-notice__dismiss">
-            <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
+            <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
                 <use href="#icon-close-16"></use>
             </svg>
         </button>

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

@@ -1,20 +1,21 @@
-@import "../variables/variables.less";
-
-// Calculate hypotenuse of a 28px square (for rotation).
-// Formula is: sqrt(pow(28px, 2) / 2)
-
-@eek-arrow-size: unit(sqrt(392), px);
-// These are custom colors not part of ebay palette
-@eek-rating-color-1: #00a650;
-@eek-rating-color-2: #4dbd38;
-@eek-rating-color-3: #b3db18;
-@eek-rating-color-4: #fff200;
-@eek-rating-color-5: #fab20b;
-@eek-rating-color-6: #f25c19;
-@eek-rating-color-7: #ed1c24;
-@eek-color: #000;
-@eek-background-color: #fff;
-@eek-border-color: @eek-color;
+@use "sass:math";
+@import "../variables/variables";
+
+/* Calculate hypotenuse of a 28px square (for rotation). */
+/* Formula is: sqrt(pow(28px, 2) / 2) */
+
+$eek-arrow-size: #{math.sqrt(392)}px;
+/* These are custom colors not part of ebay palette */
+$eek-rating-color-1: #00a650;
+$eek-rating-color-2: #4dbd38;
+$eek-rating-color-3: #b3db18;
+$eek-rating-color-4: #fff200;
+$eek-rating-color-5: #fab20b;
+$eek-rating-color-6: #f25c19;
+$eek-rating-color-7: #ed1c24;
+$eek-color: #000;
+$eek-background-color: #fff;
+$eek-border-color: $eek-color;
 
 .eek {
     align-items: stretch;
@@ -27,7 +28,7 @@
 
 .eek__container {
     align-items: center;
-    border: 1px solid @eek-color;
+    border: 1px solid $eek-color;
     border-radius: 2px 0 0 2px;
     border-right: none;
     display: inline-flex;
@@ -43,84 +44,84 @@
 }
 
 .eek__arrow::before {
-    border: 0.5px solid @eek-color;
+    border: 0.5px solid $eek-color;
     border-radius: 2px;
     content: "";
     display: block;
     /* stylelint-disable-next-line number-max-precision */
-    height: @eek-arrow-size;
+    height: $eek-arrow-size;
     margin-top: 2.3px;
     position: relative;
     right: 12px;
     transform: rotate(45deg);
     /* stylelint-disable-next-line number-max-precision */
-    width: @eek-arrow-size;
+    width: $eek-arrow-size;
 }
 
 .eek--rating-1 .eek__container {
-    background: @eek-rating-color-1;
+    background: $eek-rating-color-1;
 }
 .eek--rating-1 svg.icon--eek-arrow {
-    fill: @eek-rating-color-1;
+    fill: $eek-rating-color-1;
 }
 
 .eek--rating-2 .eek__container {
-    background: @eek-rating-color-2;
+    background: $eek-rating-color-2;
 }
 .eek--rating-2 svg.icon--eek-arrow {
-    fill: @eek-rating-color-2;
+    fill: $eek-rating-color-2;
 }
 
 .eek--rating-3 .eek__container {
-    background: @eek-rating-color-3;
+    background: $eek-rating-color-3;
 }
 .eek--rating-3 svg.icon--eek-arrow {
-    fill: @eek-rating-color-3;
+    fill: $eek-rating-color-3;
 }
 
 .eek--rating-4 .eek__container {
-    background: @eek-rating-color-4;
+    background: $eek-rating-color-4;
 }
 .eek--rating-4 svg.icon--eek-arrow {
-    fill: @eek-rating-color-4;
+    fill: $eek-rating-color-4;
 }
 
 .eek--rating-5 .eek__container {
-    background: @eek-rating-color-5;
+    background: $eek-rating-color-5;
 }
 .eek--rating-5 svg.icon--eek-arrow {
-    fill: @eek-rating-color-5;
+    fill: $eek-rating-color-5;
 }
 
 .eek--rating-6 .eek__container {
-    background: @eek-rating-color-6;
+    background: $eek-rating-color-6;
 }
 .eek--rating-6 svg.icon--eek-arrow {
-    fill: @eek-rating-color-6;
+    fill: $eek-rating-color-6;
 }
 
 .eek--rating-7 .eek__container {
-    background: @eek-rating-color-7;
+    background: $eek-rating-color-7;
 }
 .eek--rating-7 svg.icon--eek-arrow {
-    fill: @eek-rating-color-7;
+    fill: $eek-rating-color-7;
 }
 
 .eek__rating {
-    color: @eek-background-color;
+    color: $eek-background-color;
     display: inline-block;
     font-size: 18px;
     margin-left: 8px;
     text-shadow:
-        -0.5px 0.5px 0 @eek-color,
-        0.5px 0.5px 0 @eek-color,
-        0.5px -0.5px 0 @eek-color,
-        -0.5px -0.5px 0 @eek-color;
+        -0.5px 0.5px 0 $eek-color,
+        0.5px 0.5px 0 $eek-color,
+        0.5px -0.5px 0 $eek-color,
+        -0.5px -0.5px 0 $eek-color;
 }
 
 .eek__rating-range {
     align-items: center;
-    background-color: @eek-background-color;
+    background-color: $eek-background-color;
     border-radius: 1px 0 0 1px;
     display: inline-flex;
     flex-direction: column;
@@ -147,7 +148,7 @@ Changed a bit of styles there only in order to make it work
         .eek__rating {
             text-shadow: none;
             -webkit-text-stroke: 0.5px;
-            -webkit-text-stroke-color: @eek-color;
+            -webkit-text-stroke-color: $eek-color;
         }
     }
 }

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

@@ -1,7 +1,7 @@
-@import "../variables/variables.less";
-@import "../mixins/private/token-mixins.less";
+@import "../variables/variables";
+@import "../mixins/private/token-mixins";
 
-// BASE CLASS
+/* BASE CLASS */
 
 span.field {
     display: inline-block;
@@ -24,7 +24,7 @@ div.field {
     }
 }
 
-// BASE CLASS MODS
+/* BASE CLASS MODS */
 
 span.field--table {
     display: inline-table;
@@ -48,29 +48,39 @@ div.field--table {
     flex: 1;
 }
 
-// ELEMENT CLASSES
+/* ELEMENT CLASSES */
 
 .field__label {
     margin-right: 8px;
 }
 
 .field__description {
-    .color-token(field-description-color, color-foreground-secondary);
+    @include color-token(field-description-color, color-foreground-secondary);
+
     font-size: var(--font-size-small);
     line-height: var(--spacing-200);
     margin-top: var(--spacing-50);
 }
 
 .field__description--confirmation {
-    .color-token(field-description-confirmation-color, color-foreground-confirmation);
+    @include color-token(
+        field-description-confirmation-color,
+        color-foreground-confirmation
+    );
 }
 
 .field__description--information {
-    .color-token(field-description-information-color, color-foreground-information);
+    @include color-token(
+        field-description-information-color,
+        color-foreground-information
+    );
 }
 
 .field__description--attention {
-    .color-token(field-description-attention-color, color-foreground-attention);
+    @include color-token(
+        field-description-attention-color,
+        color-foreground-attention
+    );
 }
 
 .field__group > .field__description,
@@ -95,7 +105,7 @@ div.field__group {
     margin-right: var(--spacing-50);
 }
 
-// if using a div for description, it implies it's always at bottom of field
+/* if using a div for description, it implies it's always at bottom of field */
 div.field__description {
     margin: var(--spacing-100) 0 0;
 }
@@ -132,7 +142,7 @@ div.field__description {
     }
 }
 
-// ELEMENT CLASS MODS
+/* ELEMENT CLASS MODS */
 
 .field__label--end {
     margin-left: 4px;
@@ -145,7 +155,7 @@ div.field__description {
 }
 
 .field__label--disabled {
-    .color-token(field-label-color-disabled, color-foreground-disabled);
+    @include color-token(field-label-color-disabled, color-foreground-disabled);
 }
 
 .field--fluid,
@@ -154,7 +164,7 @@ div.field__description {
     width: 100%;
 }
 
-// textarea alignment
+/* textarea alignment */
 
 .field--align-top .field__label {
     display: inline-block;