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

package/src/{less/progress-bar-expressive/progress-bar-expressive.less → sass/progress-bar-expressive/progress-bar-expressive.scss}

@@ -1,4 +1,4 @@
-@import "../variables/variables.less";
+@import "../variables/variables";
 
 :root {
     --progress-bar-expressive-color-1: #e53238;
@@ -13,7 +13,7 @@
     --progress-bar-expressive-line-scroll-duration: 20s;
     /* Each line has a final width of 10% - 40% of the lines container.
        In each set of four lines, the widths add up to 100%.
-       These widths are defined in CSS variables so they can more 
+       These widths are defined in CSS variables so they can more
        easily be randomized in Javascript, if desired. */
     --progress-bar-expressive-line-width-a1: 25%;
     --progress-bar-expressive-line-width-a2: 15%;
@@ -57,7 +57,7 @@
     color: var(--color-foreground-primary);
     font-size: var(--font-size-large-1);
     font-weight: var(--font-weight-regular);
-    line-height: calc(var(--spacing-50) + var(--spacing-300)); // 26px
+    line-height: calc(var(--spacing-50) + var(--spacing-300)); /* 26px */
     margin: 0 var(--spacing-200);
     min-height: 3rem;
     position: relative;
@@ -77,12 +77,12 @@
     right: 0;
 }
 
-// current message
+/* current message */
 .progress-bar-expressive__message[role="status"] {
     opacity: 1;
 }
 
-// next message
+/* next message */
 .progress-bar-expressive__message[aria-hidden="true"] {
     opacity: 0;
 }
@@ -101,7 +101,6 @@
 
 .progress-bar-expressive__progress[role="progressbar"] {
     border-radius: var(--progress-bar-expressive-line-border-radius);
-
     margin: 0 var(--spacing-200);
     overflow: hidden;
 }
@@ -109,7 +108,7 @@
 .progress-bar-expressive__lines {
     display: flex;
     overflow: visible;
-    // Account for gaps between lines
+    /* Account for gaps between lines */
     width: calc(100% - (3 * var(--progress-bar-expressive-line-gap)));
 }
 
@@ -117,7 +116,7 @@
     /* Default animation behavior: Lines scroll and resize.
        Animate line's width from 0% to its pre-defined width.
        Simultaneously cycle the line's order in its flex container
-       to push its siblings forward and achieve an infinite loop. 
+       to push its siblings forward and achieve an infinite loop.
 
        Note that Safari < 14 does not support flex order animations.
        In these browsers, the lines do not appear to infinitely
@@ -136,7 +135,7 @@
     order: 1;
 }
 
-// Set line colors
+/* Set line colors */
 .progress-bar-expressive__line:nth-child(4n + 1) {
     background-color: var(--progress-bar-expressive-color-4);
 }
@@ -150,12 +149,12 @@
     background-color: var(--progress-bar-expressive-color-1);
 }
 
-// Set line widths and animation delays
+/* Set line widths and animation delays */
 .progress-bar-expressive__line:nth-child(1) {
     animation-delay: calc(
-        -1 * (var(--progress-bar-expressive-line-scale-duration) -
-                    var(--progress-bar-expressive-line-scale-duration) /
-                    var(--progress-bar-expressive-line-count))
+        -1 * (var(--progress-bar-expressive-line-scale-duration) - var(
+                        --progress-bar-expressive-line-scale-duration
+                    ) / var(--progress-bar-expressive-line-count))
     );
     width: var(--progress-bar-expressive-line-width-a1);
 }
@@ -317,7 +316,7 @@
 /* With reduced motion, there are no animated transitions
    between messages and the lines scroll but do not resize. */
 @media (prefers-reduced-motion) {
-    // Remove default message animation
+    /* Remove default message animation */
     .progress-bar-expressive__message--in,
     .progress-bar-expressive__message--out {
         animation: none;
@@ -327,7 +326,7 @@
         display: none;
     }
 
-    // Fade in first message
+    /* Fade in first message */
     .progress-bar-expressive__messages:not(
             .progress-bar-expressive__messages--medium
         )
@@ -337,21 +336,21 @@
             cubic-bezier(0.3, 0, 0, 1) both;
     }
 
-    // Scroll the entire line container
+    /* Scroll the entire line container */
     .progress-bar-expressive__lines {
         animation: progress-bar-expressive-reduced-motion-line-scroll
             var(--progress-bar-expressive-line-scroll-duration) linear infinite;
         overflow: visible;
     }
 
-    // Remove default line animation
+    /* Remove default line animation */
     .progress-bar-expressive__line {
         animation: none;
         animation-delay: none;
         margin-right: var(--progress-bar-expressive-line-gap);
     }
 
-    // Reset line colors
+    /* Reset line colors */
     .progress-bar-expressive__line:nth-child(4n + 1) {
         background-color: var(--progress-bar-expressive-color-1);
     }
@@ -365,8 +364,8 @@
         background-color: var(--progress-bar-expressive-color-4);
     }
 
-    // To achieve a seamless loop, the last set of line widths
-    // need to match the first set of line widths
+    /* To achieve a seamless loop, the last set of line widths */
+    /* need to match the first set of line widths */
     .progress-bar-expressive__line:nth-child(9) {
         width: var(--progress-bar-expressive-line-width-a1);
     }

package/src/{less/progress-spinner/progress-spinner.less → sass/progress-spinner/progress-spinner.scss}

@@ -1,5 +1,5 @@
-@import "../variables/variables.less";
-@import "../mixins/private/token-mixins.less";
+@import "../variables/variables";
+@import "../mixins/private/token-mixins";
 
 .progress-spinner {
     animation: spin 1.5s linear infinite;
@@ -19,7 +19,7 @@
     }
 }
 
-// fixes wobble
+/* fixes wobble */
 .progress-spinner > svg.icon.icon--spinner-20,
 .progress-spinner > svg.icon.icon--spinner-24,
 .progress-spinner > svg.icon.icon--spinner-30 {

package/src/{less → sass}/progress-spinner/stories/progress-spinner.stories.js

@@ -2,28 +2,28 @@ export default { title: "Skin/Progress Spinner" };
 
 export const base = () =>
     `<span class="progress-spinner" aria-label="Busy animation" role="img">
-        <svg class="icon icon--spinner-24" aria-hidden="true">
+        <svg class="icon icon--24" aria-hidden="true">
             <use href="#icon-spinner-24"></use>
         </svg>
     </span>`;
 
 export const RTL = () =>
     `<div dir="rtl"><span class="progress-spinner" aria-label="Busy animation" role="img">
-        <svg class="icon icon--spinner-24" aria-hidden="true">
+        <svg class="icon icon--24" aria-hidden="true">
             <use href="#icon-spinner-24"></use>
         </svg>
     </span></div>`;
 
 export const large = () =>
     `<span class="progress-spinner progress-spinner--large" aria-label="Busy" role="img">
-        <svg class="icon icon--spinner-30" aria-hidden="true">
+        <svg class="icon icon--30" aria-hidden="true">
             <use href="#icon-spinner-30"></use>
         </svg>
     </span>`;
 
 export const small = () =>
     `<span class="progress-spinner progress-spinner--small" aria-label="Busy" role="img">
-        <svg class="icon icon--spinner-20" aria-hidden="true">
+        <svg class="icon icon--20" aria-hidden="true">
             <use href="#icon-spinner-20"></use>
         </svg>
     </span>`;

package/src/{less/progress-stepper/progress-stepper.less → sass/progress-stepper/progress-stepper.scss}

@@ -1,15 +1,15 @@
-@import "../variables/variables.less";
-@import "../mixins/private/token-mixins.less";
+@import "../variables/variables";
+@import "../mixins/private/token-mixins";
 
-@progress-stepper-min-width: 80px;
-@progress-stepper-large-min-width: 120px;
-// Shortcut private variables
-@_progress-stepper-active-gradient: var(
+$progress-stepper-min-width: 80px;
+$progress-stepper-large-min-width: 120px;
+/* Shortcut private variables */
+$_progress-stepper-active-gradient: var(
         --progress-stepper-active-color,
         var(--color-background-information)
     )
     50%;
-@_progress-stepper-upcoming-gradient: var(
+$_progress-stepper-upcoming-gradient: var(
         --progress-stepper-upcoming-color,
         var(--color-background-disabled)
     )
@@ -28,13 +28,17 @@
 }
 
 hr.progress-stepper__separator {
-    .background-color-token(progress-stepper-active-color, color-background-information);
+    @include background-color-token(
+        progress-stepper-active-color,
+        color-background-information
+    );
+
     border: 0 none;
     border-radius: 2px;
     flex: 1;
     height: 4px;
     margin: 0;
-    min-width: @progress-stepper-min-width;
+    min-width: $progress-stepper-min-width;
     position: relative;
     top: 10px;
 }
@@ -44,7 +48,7 @@ hr.progress-stepper__separator {
     justify-self: center;
     margin-top: 8px;
     text-align: center;
-    width: @progress-stepper-min-width;
+    width: $progress-stepper-min-width;
 }
 
 .progress-stepper__text h2,
@@ -52,7 +56,7 @@ hr.progress-stepper__separator {
 .progress-stepper__text h4,
 .progress-stepper__text h5,
 .progress-stepper__text h6 {
-    .color-token(progress-stepper-text-color, color-foreground-primary);
+    @include color-token(progress-stepper-text-color, color-foreground-primary);
 
     font-size: var(--font-size-default);
     font-weight: normal;
@@ -63,7 +67,10 @@ hr.progress-stepper__separator {
 .progress-stepper__items--upcoming .progress-stepper__text h4,
 .progress-stepper__items--upcoming .progress-stepper__text h5,
 .progress-stepper__items--upcoming .progress-stepper__text h6 {
-    .color-token(progress-stepper-text-light-color, color-foreground-secondary);
+    @include color-token(
+        progress-stepper-text-light-color,
+        color-foreground-secondary
+    );
 }
 
 .progress-stepper__item[aria-current] .progress-stepper__text h2,
@@ -94,11 +101,17 @@ hr.progress-stepper__separator {
     ~ .progress-stepper__item
     .progress-stepper__text
     h6 {
-    .color-token(progress-stepper-text-light-color, color-foreground-secondary);
+    @include color-token(
+        progress-stepper-text-light-color,
+        color-foreground-secondary
+    );
 }
 
 .progress-stepper__text p {
-    .color-token(progress-stepper-text-light-color, color-foreground-secondary);
+    @include color-token(
+        progress-stepper-text-light-color,
+        color-foreground-secondary
+    );
 }
 
 .progress-stepper__icon {
@@ -109,7 +122,10 @@ hr.progress-stepper__separator {
 
 .progress-stepper__items--upcoming hr.progress-stepper__separator,
 .progress-stepper__item[aria-current] ~ hr.progress-stepper__separator {
-    .background-color-token(progress-stepper-upcoming-color, color-background-disabled);
+    @include background-color-token(
+        progress-stepper-upcoming-color,
+        color-background-disabled
+    );
 
     background-image: none;
 }
@@ -117,14 +133,17 @@ hr.progress-stepper__separator {
 .progress-stepper__item[aria-current] + hr.progress-stepper__separator {
     background-image: linear-gradient(
         90deg,
-        @_progress-stepper-active-gradient,
-        @_progress-stepper-upcoming-gradient
+        $_progress-stepper-active-gradient,
+        $_progress-stepper-upcoming-gradient
     );
 }
 
 .progress-stepper__item--attention[aria-current]
     ~ hr.progress-stepper__separator {
-    .background-color-token(progress-stepper-upcoming-color, color-background-disabled);
+    @include background-color-token(
+        progress-stepper-upcoming-color,
+        color-background-disabled
+    );
 
     background-image: none;
 }
@@ -162,15 +181,18 @@ hr.progress-stepper__separator {
     + hr.progress-stepper__separator {
     background: linear-gradient(
         180deg,
-        @_progress-stepper-active-gradient,
-        @_progress-stepper-upcoming-gradient
+        $_progress-stepper-active-gradient,
+        $_progress-stepper-upcoming-gradient
     );
 }
 
 .progress-stepper--vertical
     .progress-stepper__item--attention[aria-current]
     ~ hr.progress-stepper__separator {
-    .background-color-token(progress-stepper-upcoming-color, color-background-disabled);
+    @include background-color-token(
+        progress-stepper-upcoming-color,
+        color-background-disabled
+    );
 
     background-image: none;
 }
@@ -211,12 +233,12 @@ hr.progress-stepper__separator {
         text-align: right;
     }
 
-    // stylelint-disable no-descending-specificity
+    /* stylelint-disable no-descending-specificity */
     .progress-stepper__item[aria-current] + hr.progress-stepper__separator {
         background-image: linear-gradient(
             90deg,
-            @_progress-stepper-upcoming-gradient,
-            @_progress-stepper-active-gradient
+            $_progress-stepper-upcoming-gradient,
+            $_progress-stepper-active-gradient
         );
     }
 
@@ -225,8 +247,8 @@ hr.progress-stepper__separator {
         + hr.progress-stepper__separator {
         background: linear-gradient(
             180deg,
-            @_progress-stepper-active-gradient,
-            @_progress-stepper-upcoming-gradient
+            $_progress-stepper-active-gradient,
+            $_progress-stepper-upcoming-gradient
         );
     }
 
@@ -234,7 +256,10 @@ hr.progress-stepper__separator {
         .progress-stepper__items--current
         .progress-stepper__item[aria-current]
         ~ hr.progress-stepper__separator {
-        .background-color-token(progress-stepper-upcoming-color, color-background-disabled);
+        @include background-color-token(
+            progress-stepper-upcoming-color,
+            color-background-disabled
+        );
 
         background-image: none;
     }
@@ -255,12 +280,12 @@ hr.progress-stepper__separator {
     }
 }
 
-@media (min-width: @_screen-size-SM) {
+@media (min-width: $_screen-size-SM) {
     hr.progress-stepper__separator {
-        min-width: @progress-stepper-large-min-width;
+        min-width: $progress-stepper-large-min-width;
     }
 
     .progress-stepper__text {
-        width: @progress-stepper-large-min-width;
+        width: $progress-stepper-large-min-width;
     }
 }

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

@@ -1,9 +1,9 @@
-@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";
 
-@dimensions-radio: 18px;
-@dimensions-radio-large: 24px;
+$dimensions-radio: 18px;
+$dimensions-radio-large: 24px;
 
 .radio {
     display: inline-flex;
@@ -12,38 +12,38 @@
 }
 
 .radio__control[type="radio"] {
-    height: @dimensions-radio;
-    min-width: @dimensions-radio;
-    width: @dimensions-radio;
+    height: $dimensions-radio;
+    min-width: $dimensions-radio;
+    width: $dimensions-radio;
 }
 
 .radio--large .radio__control[type="radio"] {
-    height: @dimensions-radio-large;
-    min-width: @dimensions-radio-large;
-    width: @dimensions-radio-large;
+    height: $dimensions-radio-large;
+    min-width: $dimensions-radio-large;
+    width: $dimensions-radio-large;
 }
 
 span.radio__icon {
     display: inline-flex;
-    height: @dimensions-radio;
+    height: $dimensions-radio;
     outline-offset: 1px;
 }
 
 .radio--large span.radio__icon {
-    height: @dimensions-radio-large;
+    height: $dimensions-radio-large;
 }
 
-// progressive enhancement - override hidden SVG
+/* progressive enhancement - override hidden SVG */
 span.radio__icon[hidden] {
     display: inline-flex;
 }
 
 svg.radio__checked {
-    .color-token(radio-checked-color, color-foreground-primary);
+    @include color-token(radio-checked-color, color-foreground-primary);
 }
 
 svg.radio__unchecked {
-    .color-token(radio-unchecked-color, color-foreground-primary);
+    @include color-token(radio-unchecked-color, color-foreground-primary);
 }
 
 input.radio__control[type="radio"] {
@@ -56,15 +56,15 @@ input.radio__control[type="radio"] {
 }
 
 .radio svg {
-    .icon-base-mixin();
+    @include icon-base-mixin();
 
-    height: @dimensions-radio;
-    width: @dimensions-radio;
+    height: $dimensions-radio;
+    width: $dimensions-radio;
 }
 
 .radio--large svg {
-    height: @dimensions-radio-large;
-    width: @dimensions-radio-large;
+    height: $dimensions-radio-large;
+    width: $dimensions-radio-large;
 }
 
 input.radio__control[type="radio"] + span.radio__icon svg.radio__checked {
@@ -91,14 +91,15 @@ input.radio__control[type="radio"][disabled] + span.radio__icon {
     opacity: 1;
 
     svg {
-        .fill-token(radio-disabled-color, color-foreground-disabled);
+        @include fill-token(radio-disabled-color, color-foreground-disabled);
     }
 }
 
-// https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
+/* https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/ */
 input.radio__control[type="radio"]:focus + span.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;
 }
 

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

@@ -1,9 +1,16 @@
-@import "../variables/variables.less";
-@import "../mixins/private/token-mixins.less";
+@import "../variables/variables";
+@import "../mixins/private/token-mixins";
 
 .section-notice {
-    .background-color-token(section-notice-default-background-color, color-background-secondary);
-    .border-radius-token(section-notice-border-radius, border-radius-50);
+    @include background-color-token(
+        section-notice-default-background-color,
+        color-background-secondary
+    );
+    @include border-radius-token(
+        section-notice-border-radius,
+        border-radius-50
+    );
+
     font-size: var(--font-size-default);
     margin: 8px 0;
     padding: 16px;
@@ -12,13 +19,16 @@
 div[role="region"].section-notice,
 section.section-notice {
     display: grid;
-    // provide explicit structure up front, create loose markup model
+    /* provide explicit structure up front, create loose markup model */
     grid-template-columns: 32px auto auto auto;
 }
 
-// TODO: Remove in 18.0.0 since Education Notice is now its own module.
+/* TODO: Remove in 18.0.0 since Education Notice is now its own module. */
 .section-notice--education {
-    .background-color-token(section-notice-education-background-color, color-background-education);
+    @include background-color-token(
+        section-notice-education-background-color,
+        color-background-education
+    );
 }
 
 span[role="region"].section-notice {
@@ -31,34 +41,48 @@ span[role="region"].section-notice {
     margin: 0;
 }
 
-// force links with text having more than one word to remain on same line
+/* force links with text having more than one word to remain on same line */
 .section-notice__cta a {
     white-space: nowrap;
 }
 
-// legacy version with separate bold heading
+/* legacy version with separate bold heading */
 .section-notice__title:not(:only-child) {
     font-weight: bold;
 }
 
 .section-notice button.fake-link {
-    .color-token(section-notice-foreground-color, color-foreground-primary);
+    @include color-token(
+        section-notice-foreground-color,
+        color-foreground-primary
+    );
+
     font-size: var(--font-size-default);
     font-weight: bold;
 }
 
 .section-notice button.fake-link:hover {
-    .color-token(section-notice-foreground-color, color-foreground-primary);
+    @include color-token(
+        section-notice-foreground-color,
+        color-foreground-primary
+    );
 }
 
 .section-notice a {
-    .color-token(section-notice-foreground-color, color-foreground-primary);
+    @include color-token(
+        section-notice-foreground-color,
+        color-foreground-primary
+    );
+
     font-size: var(--font-size-default);
     font-weight: bold;
 }
 
 .section-notice a:hover {
-    .color-token(section-notice-foreground-color, color-foreground-primary);
+    @include color-token(
+        section-notice-foreground-color,
+        color-foreground-primary
+    );
 }
 
 .section-notice .icon {
@@ -103,14 +127,14 @@ p.section-notice__cta {
     margin-top: var(--spacing-200);
 }
 
-// support legacy 6.5 notice with heading + paragaphs
+/* support legacy 6.5 notice with heading + paragaphs */
 .section-notice__main .section-notice__title ~ p {
     margin: var(--spacing-50) 0 0;
 }
 
-// LARGE SCREEN ADJUSTMENTS
+/* LARGE SCREEN ADJUSTMENTS */
 
-@media (min-width: @_screen-size-SM) {
+@media (min-width: $_screen-size-SM) {
     section.section-notice,
     div[role="region"].section-notice {
         margin: var(--spacing-200) 0;
@@ -149,8 +173,8 @@ p.section-notice__cta {
     }
 }
 
-// progressive enhancement adjustment for larger 24x24 icon
-// browsers without :has support will have text top aligned like regular section-notice
+/* progressive enhancement adjustment for larger 24x24 icon */
+/* browsers without :has support will have text top aligned like regular section-notice */
 .section-notice__header:has(svg[class*="24"]) {
     height: var(--spacing-300);