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

package/src/{less/floating-label/floating-label.less → sass/floating-label/floating-label.scss}

@@ -1,5 +1,5 @@
-@import "../variables/variables.less";
-@import "../mixins/private/token-mixins.less";
+@import "../variables/variables";
+@import "../mixins/private/token-mixins";
 
 .floating-label {
     position: relative;
@@ -14,7 +14,7 @@ div.floating-label {
 }
 
 label.floating-label__label {
-    .color-token(floating-label-color, color-foreground-primary);
+    @include color-token(floating-label-color, color-foreground-primary);
 
     background-color: transparent;
     display: inline-block;
@@ -32,7 +32,11 @@ label.floating-label__label {
 }
 
 .floating-label--opaque label.floating-label__label {
-    .background-color-token(floating-label-background-color, color-background-secondary);
+    @include background-color-token(
+        floating-label-background-color,
+        color-background-secondary
+    );
+
     padding-top: 3px;
     top: -3px;
     width: calc(100% - 40px);
@@ -43,7 +47,10 @@ label.floating-label__label--focus {
 }
 
 .floating-label--opaque label.floating-label__label--focus {
-    .background-color-token(floating-label-focus-background-color, color-background-primary);
+    @include background-color-token(
+        floating-label-focus-background-color,
+        color-background-primary
+    );
 }
 
 .floating-label--large label.floating-label__label {
@@ -66,34 +73,43 @@ label.floating-label__label--animate {
 }
 
 label.floating-label__label--disabled {
-    .color-token(floating-label-disabled-color, color-foreground-disabled);
+    @include color-token(
+        floating-label-disabled-color,
+        color-foreground-disabled
+    );
 }
 
 .floating-label--opaque label.floating-label__label--disabled {
-    .background-color-token(floating-label-disabled-background-color, color-background-secondary);
+    @include background-color-token(
+        floating-label-disabled-background-color,
+        color-background-secondary
+    );
 }
 
 label.floating-label__label--invalid {
-    .color-token(floating-label-invalid-color, color-foreground-attention);
+    @include color-token(
+        floating-label-invalid-color,
+        color-foreground-attention
+    );
 }
 
 .floating-label .textbox__control,
 .floating-label .combobox__control > input {
-    // Move input near the bottom
+    /* Move input near the bottom */
     padding-bottom: 2px;
     padding-top: 18px;
 }
 
 .floating-label--large .textbox__control,
 .floating-label--large .combobox__control > input {
-    // Move input near the bottom
+    /* Move input near the bottom */
     padding-bottom: 5px;
     padding-top: 23px;
 }
 
-// We are setting line-height to important because WCAG specs allow setting 1.5 times the line height
-// If we do not set it to important, the line height will be overridden causing text-overlap
-// See https://github.com/eBay/skin/issues/2253
+/* We are setting line-height to important because WCAG specs allow setting 1.5 times the line height */
+/* If we do not set it to important, the line height will be overridden causing text-overlap */
+/* See https://github.com/eBay/skin/issues/2253 */
 .floating-label .select select {
     line-height: 52px !important;
 }
@@ -102,7 +118,7 @@ label.floating-label__label--invalid {
     line-height: 60px !important;
 }
 
-// RTL
+/* RTL */
 [dir="rtl"] {
     label.floating-label__label {
         left: initial;
@@ -111,7 +127,7 @@ label.floating-label__label--invalid {
     }
 }
 
-// Autofill
+/* Autofill */
 
 label.floating-label__label.floating-label__label--inline:has(
         + .textbox > :autofill

package/src/{less → sass}/floating-label/stories/floating-label.stories.js

@@ -41,7 +41,7 @@ export const placeholder = () => `
 export const disabledTextbox = () => `
 <span class="floating-label">
     <label class="floating-label__label floating-label__label--disabled" for="firstName">First Name</label>
-    <span class="textbox">
+    <span class="textbox textbox--disabled">
         <input class="textbox__control" id="firstName02" type="text" disabled />
     </span>
 </span>
@@ -50,7 +50,7 @@ export const disabledTextbox = () => `
 export const invalidTextbox = () => `
 <span class="floating-label">
     <label class="floating-label__label floating-label__label--inline floating-label__label--invalid" for="firstName">First Name</label>
-    <span class="textbox">
+    <span class="textbox textbox--invalid">
         <input class="textbox__control" id="firstName03" type="text" aria-invalid="true" />
     </span>
 </span>
@@ -59,7 +59,7 @@ export const invalidTextbox = () => `
 export const invalidTextboxWithValue = () => `
 <span class="floating-label">
     <label class="floating-label__label floating-label__label--invalid" for="firstName">First Name</label>
-    <span class="textbox">
+    <span class="textbox textbox--invalid">
         <input class="textbox__control" id="firstName03" type="text" aria-invalid="true" value="value" />
     </span>
 </span>
@@ -68,7 +68,7 @@ export const invalidTextboxWithValue = () => `
 export const invalidTextboxWithPlaceholder = () => `
 <span class="floating-label">
     <label class="floating-label__label floating-label__label--invalid" for="firstName">First Name</label>
-    <span class="textbox">
+    <span class="textbox textbox--invalid">
         <input class="textbox__control" id="firstName03" type="text" aria-invalid="true" placeholder="placeholder" />
     </span>
 </span>
@@ -102,7 +102,7 @@ export const select = () => `
             <option value="item2">Pick Option 2</option>
             <option value="item3">Pick Option 3</option>
         </select>
-        <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+        <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
             <use href="#icon-chevron-down-12"></use>
         </svg>
     </span>
@@ -119,7 +119,7 @@ export const selectInline = () => `
             <option value="item2">Pick Option 2</option>
             <option value="item3">Pick Option 3</option>
         </select>
-        <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+        <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
             <use href="#icon-chevron-down-12"></use>
         </svg>
     </span>
@@ -136,7 +136,7 @@ export const selectInlineDoubled = () => `
             <option value="item2">Pick Option 2</option>
             <option value="item3">Pick Option 3</option>
         </select>
-        <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+        <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
             <use href="#icon-chevron-down-12"></use>
         </svg>
     </span>
@@ -150,7 +150,7 @@ export const selectInlineDoubled = () => `
             <option value="item2">Pick Option 2</option>
             <option value="item3">Pick Option 3</option>
         </select>
-        <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+        <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
             <use href="#icon-chevron-down-12"></use>
         </svg>
     </span>
@@ -169,7 +169,7 @@ export const RTLSelectInline = () => `
                 <option value="item2">Pick Option 2</option>
                 <option value="item3">Pick Option 3</option>
             </select>
-            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
@@ -206,7 +206,7 @@ export const phoneInput = () => `
             <use href="#flag-us"></use>
             </svg>
         </span>
-        <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+        <svg class="icon icon--12" focusable="false" height="10" width="14" aria-hidden="true">
             <use href="#icon-chevron-down-12"></use>
         </svg>
         </span>
@@ -221,7 +221,7 @@ export const phoneInput = () => `
             <span>Albania</span>
             <span>(+355)</span>
             </span>
-            <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
+            <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
             <use href="#icon-tick-16"></use>
             </svg>
         </div>
@@ -233,7 +233,7 @@ export const phoneInput = () => `
             <span>India</span>
             <span>(+91)</span>
             </span>
-            <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
+            <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
             <use href="#icon-tick-16"></use>
             </svg>
         </div>
@@ -245,7 +245,7 @@ export const phoneInput = () => `
             <span>Saint Helena, Ascension and Tristan da Cunha</span>
             <span>(+290)</span>
             </span>
-            <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
+            <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
             <use href="#icon-tick-16"></use>
             </svg>
         </div>
@@ -257,7 +257,7 @@ export const phoneInput = () => `
             <span>United Kingdom</span>
             <span>(+44)</span>
             </span>
-            <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
+            <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
             <use href="#icon-tick-16"></use>
             </svg>
         </div>
@@ -269,7 +269,7 @@ export const phoneInput = () => `
             <span>United States of America</span>
             <span>(+1)</span>
             </span>
-            <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
+            <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
             <use href="#icon-tick-16"></use>
             </svg>
         </div>

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

@@ -1,9 +1,11 @@
-@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";
+
+// DEPRECATED (whole component needs to be removed)
 
 .fullscreen-dialog[role="dialog"] {
-    .dialog-base();
+    @include dialog-base();
 }
 
 .fullscreen-dialog--no-mask[role="dialog"] {
@@ -11,7 +13,7 @@
 }
 
 .fullscreen-dialog__window {
-    .dialog-window();
+    @include dialog-window();
 
     -webkit-overflow-scrolling: touch;
     overflow-y: auto;
@@ -19,7 +21,7 @@
 }
 
 .fullscreen-dialog__header {
-    .dialog-header-content();
+    @include dialog-header-content();
 }
 
 .fullscreen-dialog__header .fake-link {
@@ -29,13 +31,13 @@
 }
 
 .fullscreen-dialog__main {
-    .dialog-body-content();
+    @include dialog-body-content();
 
     min-height: auto;
 }
 
 .fullscreen-dialog__footer {
-    .dialog-footer-content();
+    @include dialog-footer-content();
 }
 
 button.icon-btn.fullscreen-dialog__close {
@@ -44,7 +46,7 @@ button.icon-btn.fullscreen-dialog__close {
     width: 32px;
 }
 
-// inherits from .icon-btn
+/* inherits from .icon-btn */
 button.fullscreen-dialog__close,
 button.fullscreen-dialog__back {
     align-self: flex-start;
@@ -76,7 +78,8 @@ button.fullscreen-dialog__back {
 
 .fullscreen-dialog--hide,
 .fullscreen-dialog--show-init {
-    && {
+    &.fullscreen-dialog--hide,
+    &.fullscreen-dialog--show-init {
         display: flex;
     }
 
@@ -100,7 +103,8 @@ button.fullscreen-dialog__back {
 
 .fullscreen-dialog--show,
 .fullscreen-dialog--hide-init {
-    && {
+    &.fullscreen-dialog--show,
+    &.fullscreen-dialog--hide-init {
         display: flex;
     }
 

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

@@ -6,7 +6,7 @@ export const closeButton = () => `
         <div class="fullscreen-dialog__header">
             <h2 id="fullscreen-dialog-title">Dialog Full</h2>
             <button class="icon-btn fullscreen-dialog__close" type="button" aria-label="Close Dialog">
-                <svg class="icon icon--close-16" aria-hidden="true">
+                <svg class="icon icon--16" aria-hidden="true">
                     <use href="#icon-close-16"></use>
                 </svg>
             </button>
@@ -29,7 +29,7 @@ export const withFooter = () => `
         <div class="fullscreen-dialog__header">
             <h2 id="fullscreen-dialog-title">Dialog Full</h2>
             <button class="icon-btn fullscreen-dialog__close" type="button" aria-label="Close Dialog">
-                <svg class="icon icon--close-16" aria-hidden="true">
+                <svg class="icon icon--16" aria-hidden="true">
                     <use href="#icon-close-16"></use>
                 </svg>
             </button>
@@ -57,7 +57,7 @@ export const RTL = () => `
             <div class="fullscreen-dialog__header">
                 <h2 id="fullscreen-dialog-title">Dialog Full</h2>
                 <button class="icon-btn fullscreen-dialog__close" type="button" aria-label="Close Dialog">
-                    <svg class="icon icon--close-16" aria-hidden="true">
+                    <svg class="icon icon--16" aria-hidden="true">
                         <use href="#icon-close-16"></use>
                     </svg>
                 </button>
@@ -123,7 +123,7 @@ export const textSpacing = () => `
         <div class="fullscreen-dialog__header">
             <h2 id="fullscreen-dialog-title">Dialog Full</h2>
             <button class="icon-btn fullscreen-dialog__close" type="button" aria-label="Close Dialog">
-                <svg class="icon icon--close-16" aria-hidden="true">
+                <svg class="icon icon--16" aria-hidden="true">
                     <use href="#icon-close-16"></use>
                 </svg>
             </button>

package/src/sass/gh/_gh-mixins.scss

@@ -0,0 +1,197 @@
+/* stylelint-disable no-invalid-position-at-import-rule */
+
+@mixin alert-dialog-mixin() {
+    @import "../../../dist/alert-dialog/alert-dialog.css";
+}
+
+@mixin badge-mixin() {
+    @import "../../../dist/badge/badge.css";
+}
+
+@mixin breadcrumbs-mixin() {
+    @import "../../../dist/breadcrumbs/breadcrumbs.css";
+}
+
+@mixin button-mixin() {
+    @import "../../../dist/button/button.css";
+}
+
+@mixin carousel-mixin() {
+    @import "../../../dist/carousel/carousel.css";
+}
+
+@mixin checkbox-mixin() {
+    @import "../../../dist/checkbox/checkbox.css";
+}
+
+@mixin combobox-mixin() {
+    @import "../../../dist/combobox/combobox.css";
+}
+
+@mixin confirm-dialog-mixin() {
+    @import "../../../dist/confirm-dialog/confirm-dialog.css";
+}
+
+@mixin cta-button-mixin() {
+    @import "../../../dist/cta-button/cta-button.css";
+}
+
+@mixin drawer-dialog-mixin() {
+    @import "../../../dist/drawer-dialog/drawer-dialog.css";
+}
+
+@mixin eek-mixin() {
+    @import "../../../dist/eek/eek.css";
+}
+
+@mixin field-mixin() {
+    @import "../../../dist/field/field.css";
+}
+
+@mixin filter-button-mixin() {
+    @import "../../../dist/filter-button/filter-button.css";
+}
+
+@mixin filter-menu-mixin() {
+    @import "../../../dist/filter-menu/filter-menu.css";
+}
+
+@mixin filter-menu-button-mixin() {
+    @import "../../../dist/filter-menu-button/filter-menu-button.css";
+}
+
+@mixin floating-label-mixin() {
+    @import "../../../dist/floating-label/floating-label.css";
+}
+
+@mixin fullscreen-dialog-mixin() {
+    @import "../../../dist/fullscreen-dialog/fullscreen-dialog.css";
+}
+
+@mixin global-mixin() {
+    @import "../../../dist/global/global.css";
+}
+
+@mixin icon-mixin() {
+    @import "../../../dist/icon/icon.css";
+}
+
+@mixin icon-button-mixin() {
+    @import "../../../dist/icon-button/icon-button.css";
+}
+
+@mixin infotip-mixin() {
+    @import "../../../dist/infotip/infotip.css";
+}
+
+@mixin inline-notice-mixin() {
+    @import "../../../dist/inline-notice/inline-notice.css";
+}
+
+@mixin lightbox-dialog-mixin() {
+    @import "../../../dist/lightbox-dialog/lightbox-dialog.css";
+}
+
+@mixin link-mixin() {
+    @import "../../../dist/link/link.css";
+}
+
+@mixin listbox-mixin() {
+    @import "../../../dist/listbox/listbox.css";
+}
+
+@mixin listbox-button-mixin() {
+    @import "../../../dist/listbox-button/listbox-button.css";
+}
+
+@mixin menu-mixin() {
+    @import "../../../dist/menu/menu.css";
+}
+
+@mixin menu-button-mixin() {
+    @import "../../../dist/menu-button/menu-button.css";
+}
+
+@mixin page-grid-mixin() {
+    @import "../../../dist/page-grid/page-grid.css";
+}
+
+@mixin page-notice-mixin() {
+    @import "../../../dist/page-notice/page-notice.css";
+}
+
+@mixin pagination-mixin() {
+    @import "../../../dist/pagination/pagination.css";
+}
+
+@mixin panel-dialog-mixin() {
+    @import "../../../dist/panel-dialog/panel-dialog.css";
+}
+
+@mixin progress-bar-mixin() {
+    @import "../../../dist/progress-bar/progress-bar.css";
+}
+
+@mixin progress-spinner-mixin() {
+    @import "../../../dist/progress-spinner/progress-spinner.css";
+}
+
+@mixin progress-stepper-mixin() {
+    @import "../../../dist/progress-stepper/progress-stepper.css";
+}
+
+@mixin radio-mixin() {
+    @import "../../../dist/radio/radio.css";
+}
+
+@mixin section-notice-mixin() {
+    @import "../../../dist/section-notice/section-notice.css";
+}
+
+@mixin section-title-mixin() {
+    @import "../../../dist/section-title/section-title.css";
+}
+
+@mixin select-mixin() {
+    @import "../../../dist/select/select.css";
+}
+
+@mixin signal-mixin() {
+    @import "../../../dist/signal/signal.css";
+}
+
+@mixin snackbar-dialog-mixin() {
+    @import "../../../dist/snackbar-dialog/snackbar-dialog.css";
+}
+
+@mixin switch-mixin() {
+    @import "../../../dist/switch/switch.css";
+}
+
+@mixin tabs-mixin() {
+    @import "../../../dist/tabs/tabs.css";
+}
+
+@mixin textbox-mixin() {
+    @import "../../../dist/textbox/textbox.css";
+}
+
+@mixin toast-dialog-mixin() {
+    @import "../../../dist/toast-dialog/toast-dialog.css";
+}
+
+@mixin tooltip-mixin() {
+    @import "../../../dist/tooltip/tooltip.css";
+}
+
+@mixin tourtip-mixin() {
+    @import "../../../dist/tourtip/tourtip.css";
+}
+
+@mixin typography-mixin() {
+    @import "../../../dist/typography/typography.css";
+}
+
+@mixin utility-mixin() {
+    @import "../../../dist/utility/utility.css";
+}

package/src/sass/global/global.scss

@@ -0,0 +1,50 @@
+@import "../variables/variables";
+@import "../mixins/private/token-mixins";
+
+body {
+    @include background-color-token(color-background-primary);
+    @include color-token(color-foreground-primary);
+
+    font-family: $font-family-default;
+    font-size: var(--font-size-default);
+    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+    -webkit-text-size-adjust: 100%;
+}
+
+fieldset {
+    border: 0;
+    padding: 0;
+}
+
+legend {
+    margin-bottom: var(--spacing-100);
+}
+
+a {
+    @include color-token(
+        link-foreground-color-default,
+        color-foreground-primary
+    );
+
+    &:visited {
+        @include color-token(
+            link-foreground-color-visited,
+            color-foreground-visited
+        );
+    }
+
+    &:hover {
+        @include color-token(
+            link-foreground-color-hover,
+            color-foreground-secondary
+        );
+    }
+
+    &:not([href]),
+    &[aria-disabled="true"] {
+        @include color-token(
+            link-forground-color-disabled,
+            color-foreground-disabled
+        );
+    }
+}