@ebay/skin 17.5.0 → 18.0.0-next.0

package/src/less/icon/icon.less

@@ -1,62 +0,0 @@
-@import "./generated/icon.less";
-@import "../mixins/private/icon-mixins.less";
-@import "../mixins/private/token-mixins.less";
-
-svg {
-    &.icon {
-        .icon-base-mixin();
-    }
-    &.icon--disabled {
-        filter: var(--color-icon-disabled-filter);
-    }
-    &.icon--attention-filled-16,
-    &.icon--attention-filled-24 {
-        .color-token(color-foreground-attention);
-    }
-    &.icon--confirmation-filled-16,
-    &.icon--confirmation-filled-24 {
-        .color-token(color-foreground-confirmation);
-    }
-    &.icon--information-filled-16,
-    &.icon--information-filled-24 {
-        .color-token(color-foreground-information);
-    }
-    &.icon--star-empty {
-        .color-token(color-foreground-disabled);
-    }
-
-    &.icon--star-empty-small {
-        .color-token(color-foreground-disabled);
-    }
-    // todo: these should be .color-token(icon-foreground-color, color-foreground-primary) ?
-    &.icon--social-link-24 {
-        .color-token(color-social-icons-background);
-    }
-    &.icon--social-discord-24 {
-        .color-token(color-social-icons-background);
-    }
-    &.icon--social-facebook-24 {
-        .color-token(color-social-icons-background);
-    }
-    &.icon--social-messenger-24 {
-        .color-token(color-social-icons-background);
-    }
-    &.icon--social-pinterest-24 {
-        .color-token(color-social-icons-background);
-    }
-    &.icon--social-reddit-24 {
-        .color-token(color-social-icons-background);
-    }
-    &.icon--social-twitter-24 {
-        .color-token(color-social-icons-background);
-    }
-    &.icon--social-whatsapp-24 {
-        .color-token(color-social-icons-background);
-    }
-    &.icon--social-linkedin-24 {
-        .color-token(color-social-icons-background);
-    }
-    &.icon--spinner-30 {
-        .icon-image-mixin("spinner-large");
-    }
-}

package/src/less/icon-button/stories/alignment.stories.js

@@ -1,28 +0,0 @@
-export default { title: "Skin/Icon Button/Alignment" };
-
-export const menu = () => `
-<button aria-label="menu" type="button" class="icon-btn">
-    <svg class="icon icon--menu-20" aria-hidden="true" width="16" height="16"><use href="#icon-menu-20"></use></svg>
-</button>
-<a aria-label="menu" class="icon-link" href="http://www.ebay.com">
-     <svg class="icon icon--menu-20" aria-hidden="true" width="16" height="16"><use href="#icon-menu-20"></use></svg>
-</a>
-`;
-
-export const settings = () => `
-<button aria-label="settings" type="button" class="icon-btn">
-    <svg class="icon icon--settings-24" aria-hidden="true" width="16" height="16"><use href="#icon-settings-24"></use></svg>
-</button>
-<a aria-label="settings" class="icon-link" href="http://www.ebay.com">
-     <svg class="icon icon--settings-24" aria-hidden="true" width="16" height="16"><use href="#icon-settings-24"></use></svg>
-</a>
-`;
-
-export const close = () => `
-<button aria-label="close" type="button" class="icon-btn">
-    <svg class="icon icon--close-16" aria-hidden="true" width="16" height="16"><use href="#icon-close-16"></use></svg>
-</button>
-<a aria-label="close" class="icon-link" href="http://www.ebay.com">
-     <svg class="icon icon--close-16" aria-hidden="true" width="16" height="16"><use href="#icon-close-16"></use></svg>
-</a>
-`;

package/src/less/image-placeholder/image-placeholder.less

@@ -1,9 +0,0 @@
-@import "../variables/variables.less";
-@import "../mixins/private/token-mixins.less";
-
-svg.image-placeholder {
-    .color-token(color-foreground-primary);
-    fill: currentColor;
-    height: inherit;
-    width: inherit;
-}

package/src/less/infotip/infotip.less

@@ -1,126 +0,0 @@
-@import "../variables/variables.less";
-@import "../mixins/private/bubble-mixins.less";
-@import "../mixins/private/token-mixins.less";
-
-.infotip {
-    position: relative;
-}
-
-span.infotip {
-    display: inline-block;
-}
-
-.infotip__overlay {
-    .bubble();
-    .background-color-token(infotip-background-color, color-background-elevated);
-    .color-token(infotip-foreground-color, color-foreground-primary);
-    display: none;
-}
-
-.infotip__mask {
-    .bubble-mask();
-    .background-color-token(infotip-background-color, color-background-elevated);
-    .color-token(infotip-foreground-color, color-foreground-primary);
-}
-
-span.infotip__mask {
-    display: block;
-}
-
-.infotip__cell {
-    .bubble-cell();
-}
-
-.infotip__content {
-    .bubble-content();
-}
-
-.infotip__pointer {
-    .background-color-token(infotip-background-color, color-background-elevated);
-
-    .pointer-base();
-}
-
-.infotip__pointer--top-left {
-    .pointer-top-left();
-}
-
-.infotip__pointer--top {
-    .pointer-top-center();
-}
-
-.infotip__pointer--top-right {
-    .pointer-top-right();
-}
-
-.infotip__pointer--bottom-left {
-    .pointer-bottom-left();
-}
-
-.infotip__pointer--bottom {
-    .pointer-bottom-center();
-}
-
-.infotip__pointer--bottom-right {
-    .pointer-bottom-right();
-}
-
-.infotip__pointer--left {
-    .pointer-left();
-}
-
-.infotip__pointer--left-bottom {
-    .pointer-left-bottom();
-}
-
-.infotip__pointer--left-top {
-    .pointer-left-top();
-}
-
-.infotip__pointer--right {
-    .pointer-right();
-}
-
-.infotip__pointer--right-bottom {
-    .pointer-right-bottom();
-}
-
-.infotip__pointer--right-top {
-    .pointer-right-top();
-}
-
-.infotip__heading {
-    font-size: 1em;
-    font-weight: bold;
-    margin: 0 0 var(--spacing-50);
-}
-
-span.infotip__heading {
-    display: block;
-}
-
-.infotip__host[aria-expanded="true"] ~ .infotip__overlay {
-    display: block;
-}
-
-// todo: refactor out this dependency. Use a mixin instead
-.infotip .icon-btn {
-    display: inline-flex;
-    flex-shrink: 0; // todo: Should move to icon-btn in next major
-    height: 20px;
-    min-width: 20px;
-    outline-offset: 2px;
-    overflow: visible;
-    width: 20px;
-}
-
-button.infotip__close,
-.infotip__close {
-    margin-left: var(--spacing-200);
-}
-
-@media (min-width: @_screen-size-SM) {
-    .infotip__overlay {
-        .bubble-large-screen();
-    }
-}

package/src/less/link/link.less

@@ -1,44 +0,0 @@
-@import "../variables/variables.less";
-@import "../mixins/private/token-mixins.less";
-
-a.nav-link,
-a.standalone-link {
-    .color-token(nav-link-foreground-color, color-foreground-primary);
-    text-decoration: none;
-
-    &:visited {
-        .color-token(link-foreground-color-default, color-foreground-primary);
-    }
-
-    &:hover {
-        .color-token(nav-link-foreground-hover-color, color-foreground-secondary);
-
-        text-decoration: underline;
-    }
-
-    &:not([href]),
-    &[aria-disabled="true"] {
-        .color-token(link-forground-color-disabled, color-foreground-disabled);
-
-        text-decoration: none;
-    }
-}
-
-button.fake-link {
-    background-color: transparent;
-    border: 0;
-    .color-token(fake-link-foreground-color, color-foreground-primary);
-    font-family: inherit;
-    font-size: inherit;
-    padding: 0;
-    text-decoration: underline;
-
-    &:hover {
-        .color-token(fake-link-foreground-color-hover, color-foreground-secondary);
-    }
-
-    &[disabled],
-    &[aria-disabled="true"] {
-        .color-token(fake-link-foreground-disabled-color, color-foreground-disabled);
-    }
-}

package/src/less/listbox-button/listbox-button.less

@@ -1,184 +0,0 @@
-@import "../variables/variables.less";
-@import "../mixins/private/dropdown-mixins.less";
-@import "../mixins/private/listbox-mixins.less";
-@import "../mixins/private/token-mixins.less";
-@import "../mixins/public/utility-mixins.less";
-
-.listbox-button {
-    line-height: normal;
-    position: relative;
-    vertical-align: bottom;
-}
-
-span.listbox-button {
-    display: inline-block;
-}
-
-.listbox-button .btn {
-    // these values are used elsewhere in listbox
-    // in a non-standard manner and don't have variables
-    // this shares the same value with the horizontal
-    // padding in .selection-list-item-base() to align left
-    padding-left: 15px;
-    padding-right: 15px;
-}
-
-span.listbox-button--fluid,
-span.listbox-button--fluid .expand-btn,
-span.listbox-button--fluid .btn {
-    width: 100%;
-}
-
-div.listbox-button__listbox {
-    .dropdown-base(listbox-button-listbox);
-}
-
-button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox,
-.listbox-button button.btn[aria-expanded="true"] ~ div.listbox-button__listbox {
-    display: block;
-}
-
-.listbox-button button[aria-invalid="true"] {
-    .border-color-token(listbox-button-invalid-border-color, color-stroke-attention);
-}
-
-.listbox-button:not(.listbox-button--error)
-    button:not(
-        [disabled],
-        [aria-disabled="true"],
-        [aria-invalid="true"]
-    ).btn--form {
-    .border-color-token(listbox-button-border-color, color-stroke-default);
-
-    &:hover,
-    &:focus,
-    &:active {
-        border-color: inherit;
-    }
-}
-
-.listbox-button button.expand-btn--borderless,
-.listbox-button button.btn--borderless {
-    background-color: transparent;
-    border-color: transparent;
-    padding-left: 0;
-    vertical-align: initial;
-
-    &:focus {
-        outline: none;
-        text-decoration: underline;
-    }
-
-    &[aria-expanded="true"] ~ .listbox-button__listbox {
-        top: 41px; // button height plus one px, to meet design guidelines
-    }
-}
-
-.listbox-button.listbox-button--form button {
-    .background-color-token(listbox-button-background-color, color-background-secondary);
-    .border-color-token(listbox-button-border-color, color-stroke-default);
-    .color-token(listbox-button-foreground-color, color-foreground-primary);
-}
-
-.listbox-button.listbox-button--form button[disabled],
-.listbox-button.listbox-button--form button[aria-disabled="true"] {
-    .border-color-token(listbox-button-disabled-border-color, color-background-disabled);
-    .color-token(listbox-button-disabled-foreground-color, color-foreground-disabled);
-}
-
-.listbox-button.listbox-button--form button:focus {
-    .background-color-token(combobox-textbox-focus-background-color, color-background-primary);
-}
-
-.listbox-button.listbox-button--form button[aria-invalid="true"] {
-    .border-color-token(listbox-button-invalid-border-color, color-stroke-attention);
-}
-
-.listbox-button.listbox-button--error button:not(.btn--borderless) {
-    .background-color-token(listbox-button-background-color, color-background-secondary);
-    .border-color-token(listbox-button-border-color, color-stroke-attention);
-}
-
-.listbox-button .btn__label {
-    .color-token(listbox-button-label-color, color-foreground-secondary);
-    margin-right: 3px;
-}
-
-.listbox-button--expanded .btn__label {
-    .color-token(listbox-button-label-color, color-foreground-primary);
-}
-
-.listbox-button.listbox-button--error button .btn__label,
-.listbox-button.listbox-button--error button .btn__floating-label {
-    .color-token(listbox-button-label-color, color-foreground-attention);
-}
-
-.listbox-button .btn__text {
-    font-weight: bold;
-    margin-right: auto;
-}
-
-.listbox-button__options {
-    .border-radius-token(listbox-button-border-radius, border-radius-50);
-}
-
-.listbox-button__options[role="listbox"]:focus
-    .listbox-button__option--active[role="option"] {
-    background-color: var(--color-state-primary-hover);
-}
-
-.listbox-button__option svg.icon {
-    .listbox-option-status();
-
-    margin-inline-start: var(--spacing-100);
-}
-
-div.listbox-button__option[role="option"][aria-selected="true"] svg.icon {
-    opacity: 1;
-}
-
-.listbox-button__description {
-    .color-token(listbox-button-subtitle-color, color-foreground-secondary);
-
-    font-size: var(--font-size-small);
-    font-weight: normal;
-    grid-column: 1 2;
-    grid-row: 2;
-}
-
-div.listbox-button__option[role="option"] {
-    .listbox-option-base();
-    .dropdown-item-border-radius(listbox-button-listbox);
-
-    cursor: default; // needed to override text cursor
-
-    &:disabled .listbox-button__description,
-    &[aria-disabled="true"] .listbox-button__description {
-        .listbox-disabled();
-    }
-}
-
-div.listbox-button__option--active[role="option"] {
-    font-weight: bold;
-}
-
-span.listbox-button__value {
-    flex: 1 0 auto;
-
-    white-space: nowrap;
-}
-
-// https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
-.listbox-button__options:focus:not(:focus-visible) {
-    outline: none;
-}
-
-// stylelint-disable no-descending-specificity
-[dir="rtl"] {
-    .listbox-button .btn__label {
-        .color-token(listbox-button-label-color, color-foreground-secondary);
-        margin-left: 3px;
-        margin-right: 0;
-    }
-}
-// stylelint-enable no-descending-specificity

package/src/less/marketsans/marketsans.less

@@ -1,45 +0,0 @@
-@import "../variables/variables.less";
-
-// eot: IE9 Compat Modes
-// eot?#iefix: IE6-IE8
-// woff2: Super Modern Browsers
-// woff: Pretty Modern Browsers
-// truetypeL Safari, Android, iOS
-// svg: Legacy iOS
-
-@font-face {
-    font-display: swap;
-    font-family: @marketsans-fontname;
-    font-style: normal;
-    font-weight: normal;
-    src: url("@{marketsans-url}@{marketsans-filename-regular}.eot");
-    src:
-        url("@{marketsans-url}@{marketsans-filename-regular}.eot?#iefix")
-            format("embedded-opentype"),
-        url("@{marketsans-url}@{marketsans-filename-regular}.woff2")
-            format("woff2"),
-        url("@{marketsans-url}@{marketsans-filename-regular}.woff")
-            format("woff"),
-        url("@{marketsans-url}@{marketsans-filename-regular}.ttf")
-            format("truetype"),
-        url("@{marketsans-url}@{marketsans-filename-regular}.svg#@{marketsans-filename-regular}")
-            format("svg");
-}
-
-@font-face {
-    font-display: swap;
-    font-family: @marketsans-fontname;
-    font-style: normal;
-    font-weight: bold;
-    src: url("@{marketsans-url}@{marketsans-filename-bold}.eot");
-    src:
-        url("@{marketsans-url}@{marketsans-filename-bold}.eot?#iefix")
-            format("embedded-opentype"),
-        url("@{marketsans-url}@{marketsans-filename-bold}.woff2")
-            format("woff2"),
-        url("@{marketsans-url}@{marketsans-filename-bold}.woff") format("woff"),
-        url("@{marketsans-url}@{marketsans-filename-bold}.ttf")
-            format("truetype"),
-        url("@{marketsans-url}@{marketsans-filename-bold}.svg#@{marketsans-filename-bold}")
-            format("svg");
-}

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

@@ -1,166 +0,0 @@
-// this mixin is used by infotip, tooltip, tourtip, date-textbox
-
-:root {
-    // Do NOT use filter: drop-shadow() as Safari cannot do
-    //   drop-shadows outside an element with overflow.
-    //   Since box-shadow more widely supports various use cases,
-    //   it's a more robust solution.
-    --bubble-shadow: 0 2px 7px rgba(0, 0, 0, 0.15),
-        0 5px 17px rgba(0, 0, 0, 0.2);
-}
-
-.bubble(@border-radius-value: border-radius-50) {
-    .border-radius-token(bubble-border-radius, @border-radius-value);
-
-    box-shadow: var(--bubble-shadow);
-    display: none;
-    font-size: 14px;
-    left: 0;
-    max-width: 344px;
-    position: absolute;
-    top: 0;
-    // kick in hardware acceleration for GPU processing - fixes issues with filter/display reflow/repaint
-    transform: scale3d(1, 1, 1);
-    width: max-content;
-    z-index: 1;
-}
-
-.bubble-mask(@border-radius-value: border-radius-50) {
-    .border-radius-token(bubble-border-radius, @border-radius-value);
-    position: relative;
-    z-index: 1;
-}
-
-.bubble-large-screen() {
-    max-width: 400px;
-}
-
-// creates basic layout
-.bubble-cell(@tourtip-spacing: var(--spacing-100) var(--spacing-200)) {
-    display: flex;
-    padding: @tourtip-spacing;
-    word-break: break-word;
-}
-
-.bubble-content() {
-    flex-grow: 1;
-
-    p {
-        margin: 0;
-    }
-
-    p:not(:first-of-type) {
-        margin-top: var(--spacing-50);
-    }
-}
-
-.bubble-close() {
-    align-self: flex-start;
-    background: none;
-    border: 0;
-    flex-shrink: 0;
-    height: var(--spacing-400);
-    margin: calc(var(--spacing-100) * -1) calc(var(--spacing-100) * -1) 0
-        var(--spacing-100);
-    padding: 0;
-    white-space: nowrap;
-    width: 32px;
-}
-
-// styles common to all pointers
-.pointer-base() {
-    height: 8px;
-    position: absolute;
-    transform: rotate(45deg);
-    width: 8px;
-    z-index: 0;
-}
-
-.pointer-bottom() {
-    bottom: -4px;
-    top: auto;
-}
-
-.pointer-side-middle() {
-    top: calc(50% - 4px);
-}
-
-.pointer-top() {
-    top: -4px;
-}
-
-.pointer-center() {
-    left: calc(50% - 4px);
-}
-
-.pointer-top-center() {
-    .pointer-top();
-    .pointer-center();
-}
-
-.pointer-top-left() {
-    .pointer-top();
-
-    left: 12px;
-}
-
-.pointer-top-right() {
-    .pointer-top();
-
-    left: auto;
-    right: 12px;
-}
-
-.pointer-bottom-center() {
-    .pointer-bottom();
-    .pointer-center();
-}
-
-.pointer-bottom-left() {
-    .pointer-bottom();
-
-    left: 12px;
-}
-
-.pointer-bottom-right() {
-    .pointer-bottom();
-
-    left: auto;
-    right: 12px;
-}
-
-.pointer-left() {
-    .pointer-side-middle();
-
-    left: -4px;
-}
-
-.pointer-left-top() {
-    left: -4px;
-    top: 12px;
-}
-
-.pointer-left-bottom() {
-    bottom: 12px;
-    left: -4px;
-    top: auto;
-}
-
-.pointer-right() {
-    .pointer-side-middle();
-    left: auto;
-    right: -4px;
-}
-
-.pointer-right-top() {
-    left: auto;
-    right: -4px;
-    top: 12px;
-}
-
-.pointer-right-bottom() {
-    bottom: 12px;
-    left: auto;
-    right: -4px;
-    top: auto;
-}