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

package/src/sass/textbox/textbox.scss

@@ -0,0 +1,238 @@
+@import "../variables/variables";
+@import "../mixins/private/token-mixins";
+
+.textbox {
+    @include color-token(
+        textbox-foreground-color,
+        color-foreground-on-secondary
+    );
+    @include background-color-token(
+        textbox-background-color,
+        color-background-secondary
+    );
+    @include border-color-token(textbox-border-color, color-stroke-default);
+    @include border-radius-token(textbox-border-radius, border-radius-50);
+
+    align-items: center;
+    border-style: solid;
+    border-width: 1px;
+    box-sizing: border-box;
+    display: inline-flex;
+
+    /* to align with buttons and select, it needs same font-size */
+    font-size: var(--font-size-default);
+    position: relative;
+    width: fit-content;
+    gap: var(--spacing-100);
+
+    button.icon-btn {
+        background-color: transparent;
+        padding: 0;
+    }
+}
+
+/* `.textbox--focus` should be removed after full browser support for `:has` */
+.textbox--focus,
+.textbox:has(> .textbox__control:focus):not(
+        .textbox--readonly,
+        :has(> .textbox__control[readonly])
+    ) {
+    box-shadow: 0 0 0 1px var(--color-stroke-strong);
+    @include border-color-token(
+        textbox-focus-border-color,
+        color-stroke-strong
+    );
+    @include background-color-token(
+        textbox-focus-background-color,
+        color-background-primary
+    );
+}
+
+/* `.textbox--readonly` should be removed after full browser support for `:has` */
+.textbox--readonly,
+.textbox:has(> .textbox__control[readonly]) {
+    background-color: transparent;
+    border: none;
+}
+
+/* `.textbox--disabled` should be removed after full browser support for `:has` */
+.textbox--disabled,
+.textbox:has(> .textbox__control[disabled]) {
+    @include border-color-token(
+        textbox-disabled-border-color,
+        color-background-disabled
+    );
+    @include color-token(
+        textbox-disabled-foreground-color,
+        color-foreground-disabled
+    );
+}
+
+/* `.textbox--invalid` should be removed after full browser support for `:has` */
+.textbox--invalid,
+.textbox:has(> .textbox__control[aria-invalid="true"]) {
+    @include border-color-token(
+        textbox-invalid-border-color,
+        color-stroke-attention
+    );
+}
+
+.textbox__control {
+    background-color: transparent;
+    border: none;
+    color: inherit;
+    box-sizing: border-box;
+}
+
+textarea.textbox__control {
+    font-family: inherit;
+    min-height: 200px;
+    overflow: auto;
+    padding: var(--spacing-200);
+    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+    resize: vertical;
+    vertical-align: middle;
+}
+
+input.textbox__control {
+    font-family: inherit;
+    vertical-align: middle;
+    padding: 0;
+}
+
+input.textbox__control:first-child:not([readonly]) {
+    padding-inline-start: var(--spacing-200);
+}
+
+input.textbox__control:last-child:not([readonly]) {
+    padding-inline-end: var(--spacing-200);
+}
+
+input.textbox__control,
+textarea.textbox__control {
+    appearance: none;
+    flex-grow: 1;
+    font-size: 1em;
+    outline: none;
+    height: 40px;
+    margin: 0; /* Remove the margin in Firefox and Safari. */
+
+    &[disabled] {
+        @include border-color-token(
+            textbox-disabled-border-color,
+            color-background-disabled
+        );
+        @include color-token(
+            textbox-disabled-foreground-color,
+            color-foreground-disabled
+        );
+
+        &::-webkit-input-placeholder {
+            @include color-token(
+                textbox-disabled-placeholder-color,
+                color-foreground-ghost
+            );
+        }
+
+        &::-moz-placeholder {
+            @include color-token(
+                textbox-disabled-placeholder-color,
+                color-foreground-ghost
+            );
+        }
+
+        &:-ms-input-placeholder {
+            @include color-token(
+                textbox-disabled-placeholder-color,
+                color-foreground-ghost
+            );
+        }
+    }
+
+    &[aria-invalid="true"] {
+        @include border-color-token(
+            textbox-invalid-foreground-color,
+            color-stroke-attention
+        );
+    }
+
+    &::-webkit-input-placeholder {
+        @include color-token(
+            textbox-placeholder-color,
+            color-foreground-on-secondary
+        );
+
+        font-weight: 200;
+    }
+
+    &::-moz-placeholder {
+        @include color-token(
+            textbox-placeholder-color,
+            color-foreground-on-secondary
+        );
+
+        font-weight: 200;
+    }
+
+    &:-ms-input-placeholder {
+        @include color-token(
+            textbox-placeholder-color,
+            color-foreground-on-secondary
+        );
+
+        font-weight: 200;
+    }
+
+    &::placeholder {
+        @include color-token(
+            textbox-placeholder-color,
+            color-foreground-secondary
+        );
+
+        font-weight: 200;
+        opacity: 1;
+    }
+}
+
+.textbox--large > input.textbox__control {
+    height: 48px;
+}
+
+.textbox > svg,
+.textbox .icon-btn > svg {
+    @include color-token(textbox-icon-color, color-foreground-secondary);
+
+    display: inline-flex;
+    @include fill-token(textbox-icon-color, color-foreground-secondary);
+
+    pointer-events: none;
+    width: 14px;
+    height: 1lh;
+}
+
+.textbox > svg:first-child,
+.textbox > span:first-child {
+    margin-inline-start: var(--spacing-200);
+}
+
+.textbox > svg:last-child,
+.textbox > span:last-child {
+    margin-inline-end: var(--spacing-200);
+}
+
+.textbox .icon-btn:last-child {
+    margin-inline-start: calc(var(--spacing-100) * -1);
+}
+
+.textbox .icon-btn:first-child {
+    margin-inline-end: calc(var(--spacing-100) * -1);
+}
+
+input.textbox__control[readonly]:focus,
+textarea.textbox__control[readonly]:focus {
+    text-decoration: underline;
+}
+
+.textbox--fluid {
+    width: 100%;
+}

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

@@ -1,19 +1,33 @@
-@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";
 
 .toast-dialog {
-    .background-color-token(toast-dialog-background-color, color-background-information);
-    .border-top-left-radius-token(toast-dialog-border-radius, border-radius-100);
-    .border-top-right-radius-token(toast-dialog-border-radius, border-radius-100);
+    @include background-color-token(
+        toast-dialog-background-color,
+        color-background-information
+    );
+    @include border-top-left-radius-token(
+        toast-dialog-border-radius,
+        border-radius-100
+    );
+    @include border-top-right-radius-token(
+        toast-dialog-border-radius,
+        border-radius-100
+    );
+
     bottom: 0;
     box-shadow: 0 0 3px rgba(0, 0, 0, 0.28);
-    .color-token(toast-dialog-foreground-color, color-foreground-on-information);
+    @include color-token(
+        toast-dialog-foreground-color,
+        color-foreground-on-information
+    );
+
     left: 0;
     max-height: 40vh;
     min-width: 320px;
     position: fixed;
-    // 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);
     width: 100vw;
     will-change: opacity, transform;
@@ -21,7 +35,10 @@
 }
 
 .toast-dialog a {
-    .color-token(toast-dialog-foreground-color, color-foreground-on-information);
+    @include color-token(
+        toast-dialog-foreground-color,
+        color-foreground-on-information
+    );
 }
 
 .toast-dialog a:focus {
@@ -57,19 +74,22 @@
     display: flex;
 }
 
-// todo: can remove h2 selector after API change in ebayui
+/* todo: can remove h2 selector after API change in ebayui */
 .toast-dialog__header h2,
 .toast-dialog__title {
     margin: 0;
 }
 
-// inherits from .icon-btn
+/* inherits from .icon-btn */
 button.toast-dialog__close {
     align-self: flex-start;
     border: 0;
     flex-shrink: 0;
-    .color-token(toast-dialog-foreground-color, color-foreground-on-information);
-    // margin: 0 0 0 auto;
+    @include color-token(
+        toast-dialog-foreground-color,
+        color-foreground-on-information
+    );
+    /* margin: 0 0 0 auto; */
     margin-inline-start: auto;
     outline-offset: calc(var(--spacing-100) * -1);
     padding: 0;
@@ -98,20 +118,34 @@ button.toast-dialog__close > svg {
 
     button.btn--primary,
     button.btn--secondary {
-        .border-color-token(toast-dialog-foreground-color, color-foreground-on-accent);
+        @include border-color-token(
+            toast-dialog-foreground-color,
+            color-foreground-on-accent
+        );
+
         border-style: solid;
         border-width: 1px;
         outline-offset: 2px;
     }
 
     button.btn--primary {
-        .background-color-token(toast-dialog-foreground-color, color-background-primary);
-        .color-token(toast-dialog-background-color, color-foreground-accent);
+        @include background-color-token(
+            toast-dialog-foreground-color,
+            color-background-primary
+        );
+        @include color-token(
+            toast-dialog-background-color,
+            color-foreground-accent
+        );
     }
 
     button.btn--secondary {
         background-color: transparent;
-        .color-token(toast-dialog-foreground-color, color-background-primary);
+        @include color-token(
+            toast-dialog-foreground-color,
+            color-background-primary
+        );
+
         font-weight: 700;
         margin-inline-end: var(--spacing-100);
     }
@@ -136,22 +170,32 @@ button.toast-dialog__close > svg {
         &:focus,
         &:hover {
             background-color: var(--color-state-accent-hover);
-            .border-color-token(toast-dialog-foreground-color, color-foreground-on-accent);
-            .color-token(toast-dialog-foreground-color, color-background-primary);
+            @include border-color-token(
+                toast-dialog-foreground-color,
+                color-foreground-on-accent
+            );
+            @include color-token(
+                toast-dialog-foreground-color,
+                color-background-primary
+            );
         }
 
         /* prettier-ignore */
         &:active {
             background-color: var(--color-state-accent-active);
-            .border-color-token(toast-dialog-foreground-color, color-foreground-on-accent);
-            .color-token(toast-dialog-foreground-color, color-background-primary);
+            @include border-color-token(toast-dialog-foreground-color, color-foreground-on-accent);
+            @include color-token(toast-dialog-foreground-color, color-background-primary);
         }
     }
 }
 
-@media (min-width: @_screen-size-SM) {
+@media (min-width: $_screen-size-SM) {
     .toast-dialog {
-        .border-radius-token(toast-dialog-border-radius, border-radius-100);
+        @include border-radius-token(
+            toast-dialog-border-radius,
+            border-radius-100
+        );
+
         bottom: var(--spacing-200);
         left: var(--spacing-200);
         max-width: 480px;

package/src/{less → sass}/toggle-button/stories/gallery-layout.stories.js

@@ -3,7 +3,7 @@ export default { title: "Skin/Toggle Button/Gallery Layout" };
 export const iconTitleSubtitle = () => `
 <button type="button" class="toggle-button toggle-button--gallery-layout" aria-pressed="false">
     <span class="toggle-button__icon">
-        <svg aria-hidden="true" class="icon icon--on-the-way-16" height="64" width="64">
+        <svg aria-hidden="true" class="icon icon--16" height="64" width="64">
             <use href="#icon-on-the-way-16"></use>
         </svg>
     </span>
@@ -126,7 +126,7 @@ export const disabledImage = () => `
 export const disabledIcon = () => `
 <button type="button" class="toggle-button toggle-button--gallery-layout" aria-pressed="false" disabled>
     <span class="toggle-button__icon">
-        <svg aria-hidden="true" class="icon icon--on-the-way-16" height="64" width="64">
+        <svg aria-hidden="true" class="icon icon--16" height="64" width="64">
             <use href="#icon-on-the-way-16"></use>
         </svg>
     </span>
@@ -140,7 +140,7 @@ export const disabledIcon = () => `
 export const disabledIconColored = () => `
 <button type="button" class="toggle-button toggle-button--gallery-layout" aria-pressed="false" disabled>
     <span class="toggle-button__icon">
-        <svg aria-hidden="true" class="icon icon--mastercard-32-colored" height="64" width="64">
+        <svg aria-hidden="true" class="icon icon--32-colored" height="64" width="64">
             <use href="#icon-mastercard-32-colored"></use>
         </svg>
     </span>

package/src/{less → sass}/toggle-button/stories/list-layout.stories.js

@@ -32,7 +32,7 @@ export const titleMultilineSubtitle = () => `
 export const iconTitleSubtitle = () => `
 <button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false">
     <span class="toggle-button__icon">
-        <svg aria-hidden="true" class="icon icon--on-the-way-16" height="16" width="16">
+        <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
             <use href="#icon-on-the-way-16"></use>
         </svg>
     </span>
@@ -116,7 +116,7 @@ export const disabledImage = () => `
 export const disabledIcon = () => `
 <button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false" disabled>
     <span class="toggle-button__icon">
-        <svg aria-hidden="true" class="icon icon--on-the-way-16" height="16" width="16">
+        <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
             <use href="#icon-on-the-way-16"></use>
         </svg>
     </span>
@@ -130,7 +130,7 @@ export const disabledIcon = () => `
 export const disabledIconColored = () => `
 <button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false" disabled>
     <span class="toggle-button__icon">
-        <svg aria-hidden="true" class="icon icon--mastercard-32-colored" height="16" width="16">
+        <svg aria-hidden="true" class="icon icon--32-colored" height="16" width="16">
             <use href="#icon-mastercard-32-colored"></use>
         </svg>
     </span>

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

@@ -1,4 +1,4 @@
-@import "../variables/variables.less";
+@import "../variables/variables";
 
 :root {
     --toggle-button-height-min: 72px;
@@ -165,6 +165,11 @@
     min-width: var(--toggle-button-list-width-min);
 }
 
+.toggle-button--list-layout .toggle-button__image-container,
+.toggle-button--list-layout .toggle-button__content {
+    align-self: self-start;
+}
+
 .toggle-button--gallery-layout {
     flex-direction: column;
     justify-content: left;