@ebay/skin 17.5.0 → 18.0.0

package/src/less/mixins/private/listbox-mixins.less

@@ -1,35 +0,0 @@
-@import "./selection-list-mixins.less";
-
-.listbox-option-base() {
-    .selection-list-item-base();
-    .border-color-token(listbox-option-border-color, color-background-primary);
-    .color-token(listbox-option-foreground-color, color-foreground-primary);
-
-    &[hidden] {
-        display: none; // https://css-tricks.com/the-hidden-attribute-is-visibly-weak/
-    }
-
-    &:hover {
-        background-color: var(--color-state-primary-hover);
-        .color-token(listbox-option-hover-foreground-color, color-foreground-primary);
-    }
-
-    &:active {
-        font-weight: bold;
-    }
-
-    &:disabled,
-    &[aria-disabled="true"] {
-        .listbox-disabled();
-    }
-}
-
-.listbox-disabled() {
-    .color-token(listbox-option-disabled-foreground-color, color-foreground-disabled);
-    background-color: unset;
-    font-weight: unset;
-}
-
-.listbox-option-status() {
-    .selection-list-item-status();
-}

package/src/less/mixins/private/menu-mixins.less

@@ -1,21 +0,0 @@
-@import "./selection-list-mixins.less";
-
-.menu-menuitem-base(@component) {
-    .selection-list-item-base();
-
-    .border-color-token(~"@{component}-menuitem-border-color", color-background-primary);
-    .color-token(~"@{component}-menuitem-foreground-color", color-foreground-primary);
-
-    &:hover {
-        background-color: var(--color-state-primary-hover);
-        .color-token(~"@{component}-menuitem-hover-foreground-color", color-foreground-primary);
-    }
-
-    &:active {
-        font-weight: bold;
-    }
-}
-
-.menu-menuitem-status() {
-    .selection-list-item-status();
-}

package/src/less/mixins/private/token-mixins.less

@@ -1,100 +0,0 @@
-.customPropertyToken(@property, @token) {
-    @{property}: var(~"--@{token}");
-}
-
-.customPropertyToken(@property, @component-token, @product-token) {
-    @{property}: var(~"--@{component-token}", var(~"--@{product-token}"));
-}
-
-.background-token(@token) {
-    .customPropertyToken(background-color, @token);
-}
-
-.background-token(@component-token, @product-token) {
-    .customPropertyToken(background, @component-token, @product-token);
-}
-
-.background-color-token(@token) {
-    .customPropertyToken(background-color, @token);
-}
-
-.background-color-token(@component-token, @product-token) {
-    .customPropertyToken(background-color, @component-token, @product-token);
-}
-
-.background-image-token(@token) {
-    .customPropertyToken(background-image, @token);
-}
-
-.background-image-token(@component-token, @product-token) {
-    .customPropertyToken(background-image, @component-token, @product-token);
-}
-
-.border-bottom-left-radius-token(@component-token, @product-token) {
-    .customPropertyToken(border-bottom-left-radius, @component-token, @product-token);
-}
-
-.border-bottom-right-radius-token(@component-token, @product-token) {
-    .customPropertyToken(border-bottom-right-radius, @component-token, @product-token);
-}
-
-.border-top-left-radius-token(@component-token, @product-token) {
-    .customPropertyToken(border-top-left-radius, @component-token, @product-token);
-}
-
-.border-top-right-radius-token(@component-token, @product-token) {
-    .customPropertyToken(border-top-right-radius, @component-token, @product-token);
-}
-
-.border-radius-token(@token) {
-    .customPropertyToken(border-radius, @token);
-}
-
-.border-radius-token(@component-token, @product-token) {
-    .customPropertyToken(border-radius, @component-token, @product-token);
-}
-
-.box-shadow-token(@component-token, @product-token) {
-    .customPropertyToken(box-shadow, @component-token, @product-token);
-}
-
-.border-color-token(@component-token, @product-token) {
-    .customPropertyToken(border-color, @component-token, @product-token);
-}
-
-.border-left-color-token(@component-token, @product-token) {
-    .customPropertyToken(border-left-color, @component-token, @product-token);
-}
-
-.border-right-color-token(@component-token, @product-token) {
-    .customPropertyToken(border-right-color, @component-token, @product-token);
-}
-
-.box-shadow-token(@token) {
-    .customPropertyToken(box-shadow, @token);
-}
-
-.color-token(@token) {
-    .customPropertyToken(color, @token);
-}
-
-.color-token(@component-token, @product-token) {
-    .customPropertyToken(color, @component-token, @product-token);
-}
-
-.fill-token(@token) {
-    .customPropertyToken(fill, @token);
-}
-
-.fill-token(@component-token, @product-token) {
-    .customPropertyToken(fill, @component-token, @product-token);
-}
-
-.outline-color-token(@component-token, @product-token) {
-    .customPropertyToken(outline-color, @component-token, @product-token);
-}
-
-.outline-token(@width, @style, @component-token, @product-token) {
-    outline: @width @style
-        var(~"--@{component-token}", var(~"--@{product-token}"));
-}

package/src/less/progress-bar/progress-bar.less

@@ -1,35 +0,0 @@
-@import "../variables/variables.less";
-@import "../mixins/private/token-mixins.less";
-
-.progress-bar {
-    border: none;
-    .color-token(progress-bar-foreground-color, color-foreground-accent);
-    height: 4px;
-    margin: var(--spacing-100) 0;
-}
-
-.progress-bar::-webkit-progress-bar {
-    .background-color-token(progress-bar-background-color, color-stroke-subtle);
-    border-radius: 8px;
-}
-
-.progress-bar::-webkit-progress-value {
-    .background-color-token(progress-bar-foreground-color, color-background-accent);
-    border-radius: 8px;
-    transition: width 0.45s ease-in-out;
-}
-
-.progress-bar::-moz-progress-bar {
-    .background-color-token(progress-bar-foreground-color, color-background-accent);
-    border-radius: 8px;
-}
-
-.progress-bar--fluid {
-    width: 100%;
-}
-
-@media (min-width: @_screen-size-SM) {
-    .progress-bar {
-        margin: var(--spacing-200) 0;
-    }
-}

package/src/less/textbox/stories/rtl/textbox.stories.js

@@ -1,17 +0,0 @@
-export default { title: "Skin/Textbox/RTL/Base" };
-
-export const singleLine = () => `
-<div dir="rtl">
-    <span class="textbox">
-        <input aria-label="Email Address" class="textbox__control" type="text" placeholder="placeholder text" />
-    </span>
- </div>
-`;
-
-export const multiLine = () => `
-<div dir="rtl">
-    <span class="textbox">
-        <textarea aria-label="Description" class="textbox__control" placeholder="placeholder text"></textarea>
-    </span>
-</div>
-`;

package/src/less/textbox/textbox.less

@@ -1,181 +0,0 @@
-@import "../variables/variables.less";
-@import "../mixins/private/token-mixins.less";
-
-.textbox {
-    .color-token(textbox-foreground-color, color-background-secondary);
-    font-size: var(--font-size-default);
-    /* to align with buttons and select, it needs same font-size */
-    position: relative;
-
-    button.icon-btn {
-        background-color: transparent;
-        display: inline-flex;
-        height: 100%;
-        justify-content: center;
-        padding: 0;
-        position: absolute;
-        right: 0;
-        top: 0;
-    }
-}
-
-span.textbox {
-    display: inline-block;
-}
-
-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;
-    padding: 0 var(--spacing-200);
-    vertical-align: middle;
-}
-
-input.textbox__control,
-textarea.textbox__control {
-    appearance: none;
-    .background-color-token(textbox-background-color, color-background-secondary);
-    .border-color-token(textbox-border-color, color-stroke-default);
-    .border-radius-token(textbox-border-radius, border-radius-50);
-    border-style: solid;
-    border-width: 1px;
-    box-sizing: border-box;
-    .color-token(textbox-foreground-color, color-foreground-on-secondary);
-    font-size: 1em;
-    height: 40px;
-    margin: 0; // Remove the margin in Firefox and Safari.
-
-    &[disabled] {
-        .border-color-token(textbox-disabled-border-color, color-background-disabled);
-        .color-token(textbox-disabled-foreground-color, color-foreground-disabled);
-
-        &::-webkit-input-placeholder {
-            .color-token(textbox-disabled-placeholder-color, color-foreground-ghost);
-        }
-
-        &::-moz-placeholder {
-            .color-token(textbox-disabled-placeholder-color, color-foreground-ghost);
-        }
-
-        &:-ms-input-placeholder {
-            .color-token(textbox-disabled-placeholder-color, color-foreground-ghost);
-        }
-    }
-
-    &[readonly] {
-        background-color: transparent;
-        border: none;
-        padding-left: 0;
-        padding-right: 0;
-    }
-
-    &[aria-invalid="true"] {
-        .border-color-token(textbox-invalid-foreground-color, color-stroke-attention);
-    }
-
-    &::-webkit-input-placeholder {
-        .color-token(textbox-placeholder-color, color-foreground-on-secondary);
-        font-weight: 200;
-    }
-
-    &::-moz-placeholder {
-        .color-token(textbox-placeholder-color, color-foreground-on-secondary);
-        font-weight: 200;
-    }
-
-    &:-ms-input-placeholder {
-        .color-token(textbox-placeholder-color, color-foreground-on-secondary);
-        font-weight: 200;
-    }
-
-    &::placeholder {
-        .color-token(textbox-placeholder-color, color-foreground-secondary);
-        font-weight: 200;
-        opacity: 1;
-    }
-}
-
-input.textbox__control--large {
-    height: 48px;
-}
-
-.textbox > svg,
-.textbox .icon-btn > svg {
-    .color-token(textbox-icon-color, color-foreground-secondary);
-    display: inline-flex;
-    .fill-token(textbox-icon-color, color-foreground-secondary);
-    height: 100%;
-    pointer-events: none;
-    position: absolute;
-    top: 0;
-    width: 14px;
-}
-
-.textbox--icon-end {
-    input.textbox__control,
-    textarea.textbox__control {
-        padding-inline-end: 40px;
-    }
-
-    > svg:last-child {
-        right: var(--spacing-200);
-    }
-}
-
-input.textbox__control:not(:read-only):focus,
-textarea.textbox__control:not(:read-only):focus {
-    .border-color-token(textbox-focus-border-color, color-stroke-strong);
-    .background-color-token(textbox-focus-background-color, color-background-primary);
-}
-
-input.textbox__control[readonly]:focus,
-textarea.textbox__control[readonly]:focus {
-    outline: 0;
-    text-decoration: underline;
-}
-
-.textbox > svg:first-child {
-    left: var(--spacing-200);
-
-    + input.textbox__control,
-    + textarea.textbox__control {
-        padding-inline-start: 40px;
-    }
-}
-
-.textbox__control--fluid {
-    width: 100%;
-}
-
-// stylelint-disable no-descending-specificity
-[dir="rtl"] {
-    .textbox > svg:first-child {
-        right: var(--spacing-200);
-
-        // & + input.textbox__control,
-        // & + textarea.textbox__control {
-        //     padding-right: 40px;
-        // }
-    }
-
-    .textbox--icon-end {
-        button.icon-btn {
-            left: 0;
-            right: auto;
-        }
-
-        > svg:last-child {
-            left: var(--spacing-200);
-            right: auto;
-        }
-    }
-}
-// stylelint-enable no-descending-specificity