@ebay/skin 17.5.0 → 18.0.0

package/dist/variables/variables.less

@@ -1,70 +0,0 @@
-// Responsive Breakpoints
-// The first breakpoint simply indicates minimum support level. It should not be used with media queries.
-// Mobile-first means the default layout applies to mobile and there should be no mimimums even though
-// most mobile devices would be higher in screen width than the smallest viewport width.
-
-// The variables with underscores are to be considered constants. They can be read, but should not be modified.
-@_screen-size-XS: 320px;
-@_screen-size-SM: 512px;
-@_screen-size-MD: 768px;
-@_screen-size-LG: 1024px;
-@_screen-size-XL: 1280px;
-@_screen-size-XL2: 1440px;
-@_screen-size-XL3: 1680px;
-@_screen-size-XL4: 1920px;
-
-@_page-grid-max-width: 1584px;
-@_page-grid-number-cols-small: 8;
-@_page-grid-number-cols-large: 16;
-@_page-grid-outside-margins-small: 16px;
-@_page-grid-outside-margins-large: 32px;
-@_page-grid-outside-margins-max: 48px;
-@_page-grid-column-gaps-small: var(--spacing-100);
-@_page-grid-column-gaps-large: var(--spacing-200);
-@_page-grid-row-gaps-small: var(--spacing-100);
-@_page-grid-row-gaps-large: var(--spacing-200);
-
-@marketsans-url: "https://ir.ebaystatic.com/cr/v/c1/market-sans/v1.0/";
-@marketsans-fontname: "Market Sans";
-@marketsans-filename-regular: "MarketSans-Regular-WebS";
-@marketsans-filename-bold: "MarketSans-SemiBold-WebS";
-
-@font-family-default: @marketsans-fontname, Arial, sans-serif;
-// TODO: remove these in next major version
-@font-weight-regular: 500;
-@font-weight-bold: 700;
-
-@font-size-12: 0.75rem;
-@font-size-14: 0.875rem;
-@font-size-16: 1rem;
-@font-size-18: 1.125rem; // secret size
-@font-size-20: 1.25rem;
-@font-size-24: 1.5rem;
-@font-size-30: 1.875rem;
-@font-size-36: 2.25rem;
-@font-size-46: 2.875rem;
-@font-size-64: 4rem;
-
-@spacing-25: @spacing-100 * 0.25;
-@spacing-50: @spacing-100 * 0.5;
-@spacing-75: @spacing-100 * 0.75;
-@spacing-100: 8px;
-@spacing-125: @spacing-100 * 1.25;
-@spacing-150: @spacing-100 * 1.5;
-@spacing-200: @spacing-100 * 2;
-@spacing-250: @spacing-100 * 2.5;
-@spacing-300: @spacing-100 * 3;
-@spacing-400: @spacing-100 * 4;
-@spacing-450: @spacing-100 * 4.5;
-@spacing-600: @spacing-100 * 6;
-@spacing-700: @spacing-100 * 7;
-@spacing-800: @spacing-100 * 8;
-
-@font-size-giant-3: @font-size-46;
-@font-size-giant-2: @font-size-36;
-@font-size-giant-1: @font-size-30;
-@font-size-large-2: @font-size-24;
-@font-size-large-1: @font-size-20;
-@font-size-medium: @font-size-16;
-@font-size-regular: @font-size-14;
-@font-size-small: @font-size-12;

package/less[ds-4].less

@@ -1,3 +0,0 @@
-@import "./dist/variables/variables.less";
-@import "./dist/mixins/utility-mixins.less";
-@import "./dist/mixins/typography-mixins.less";

package/src/less/avatar/avatar.less

@@ -1,134 +0,0 @@
-@import "../variables/variables.less";
-
-// These are temporary colors until we get the new palette
-@_avatar-teal-foreground-color: #002a69;
-@_avatar-teal-background-color: #84b4fb;
-@_avatar-light-teal-foreground-color: #07465a;
-@_avatar-light-teal-background-color: #44ccd5;
-@_avatar-green-foreground-color: #1b561a;
-@_avatar-green-background-color: #4ce160;
-@_avatar-lime-foreground-color: #4e4e0c;
-@_avatar-lime-background-color: #c1d737;
-@_avatar-yellow-foreground-color: #553b06;
-@_avatar-yellow-background-color: #ffbd14;
-@_avatar-orange-foreground-color: #562501;
-@_avatar-orange-background-color: #ff8806;
-@_avatar-pink-foreground-color: #4b112d;
-@_avatar-pink-background-color: #f79cc8;
-@_avatar-magenta-foreground-color: #3e135f;
-@_avatar-magenta-background-color: #cc9ef0;
-
-.avatar {
-    align-items: center;
-    background-color: @_avatar-teal-background-color;
-    border-radius: 50%;
-    color: @_avatar-teal-foreground-color;
-    display: inline-flex;
-    font-size: var(--font-size-large-2);
-    font-weight: var(--font-weight-bold);
-    height: 48px;
-    justify-content: center;
-    line-height: 48px;
-    overflow: hidden;
-    width: 48px;
-}
-.avatar > svg {
-    height: 100%;
-    width: 100%;
-}
-
-.avatar > img {
-    height: 48px;
-    object-fit: cover;
-    width: 48px;
-}
-
-.avatar--teal {
-    background-color: @_avatar-teal-background-color;
-    color: @_avatar-teal-foreground-color;
-}
-
-.avatar--light-teal {
-    background-color: @_avatar-light-teal-background-color;
-    color: @_avatar-light-teal-foreground-color;
-}
-
-.avatar--green {
-    background-color: @_avatar-green-background-color;
-    color: @_avatar-green-foreground-color;
-}
-
-.avatar--lime {
-    background-color: @_avatar-lime-background-color;
-    color: @_avatar-lime-foreground-color;
-}
-
-.avatar--yellow {
-    background-color: @_avatar-yellow-background-color;
-    color: @_avatar-yellow-foreground-color;
-}
-
-.avatar--orange {
-    background-color: @_avatar-orange-background-color;
-    color: @_avatar-orange-foreground-color;
-}
-
-.avatar--magenta {
-    background-color: @_avatar-magenta-background-color;
-    color: @_avatar-magenta-foreground-color;
-}
-
-.avatar--pink {
-    background-color: @_avatar-pink-background-color;
-    color: @_avatar-pink-foreground-color;
-}
-
-.avatar--32,
-.avatar--32 > img {
-    font-size: var(--font-size-medium);
-    height: 32px;
-    line-height: 32px;
-    width: 32px;
-}
-.avatar--40,
-.avatar--40 > img {
-    font-size: var(--font-size-large-1);
-    height: 40px;
-    line-height: 40px;
-    width: 40px;
-}
-.avatar--48,
-.avatar--48 > img {
-    font-size: var(--font-size-large-2);
-    height: 48px;
-    line-height: 48px;
-    width: 48px;
-}
-.avatar--56,
-.avatar--56 > img {
-    font-size: var(--font-size-giant-1);
-    height: 56px;
-    line-height: 56px;
-    width: 56px;
-}
-.avatar--64,
-.avatar--64 > img {
-    font-size: var(--font-size-giant-2);
-    height: 64px;
-    line-height: 64px;
-    width: 64px;
-}
-.avatar--96,
-.avatar--96 > img {
-    font-size: var(--font-size-giant-3);
-    height: 96px;
-    line-height: 96px;
-    width: 96px;
-}
-.avatar--128,
-.avatar--128 > img {
-    font-size: var(--font-size-giant-4);
-    height: 128px;
-    line-height: 128px;
-    width: 128px;
-}

package/src/less/badge/badge.less

@@ -1,16 +0,0 @@
-@import "../variables/variables.less";
-@import "../mixins/private/token-mixins.less";
-
-.badge {
-    align-items: center;
-    .background-color-token(badge-background-color, color-background-attention);
-    border-radius: 16px;
-    .color-token(badge-foreground-color, color-foreground-on-attention);
-    display: inline-flex;
-    font-size: 10px;
-    height: 16px;
-    justify-content: center;
-    min-width: 8px;
-    padding: 2px 6px;
-    white-space: nowrap;
-}

package/src/less/bundles/skin-default.less

@@ -1,3 +0,0 @@
-@import "../../tokens/evo-core.css";
-@import "../../tokens/evo-light.css";
-@import "skin-headless.less";

package/src/less/bundles/skin-full.less

@@ -1,4 +0,0 @@
-@import "../../tokens/evo-core.css";
-@import "../../tokens/evo-light.css";
-@import "../../tokens/evo-dark.css";
-@import "skin-headless.less";

package/src/less/bundles/skin-headless.less

@@ -1,70 +0,0 @@
-@import "../variables/variables.less";
-@import "../marketsans/marketsans.less";
-@import "../global/global.less";
-@import "../utility/utility.less";
-@import "../alert-dialog/alert-dialog.less";
-@import "../avatar/avatar.less";
-@import "../badge/badge.less";
-@import "../breadcrumbs/breadcrumbs.less";
-@import "../button/button.less";
-@import "../carousel/carousel.less";
-@import "../calendar/calendar.less";
-@import "../checkbox/checkbox.less";
-@import "../chip/chip.less";
-@import "../chips-combobox/chips-combobox.less";
-@import "../combobox/combobox.less";
-@import "../confirm-dialog/confirm-dialog.less";
-@import "../cta-button/cta-button.less";
-@import "../date-textbox/date-textbox.less";
-@import "../details/details.less";
-@import "../drawer-dialog/drawer-dialog.less";
-@import "../education-notice/education-notice.less";
-@import "../eek/eek.less";
-@import "../field/field.less";
-@import "../filter-button/filter-button.less";
-@import "../filter-menu/filter-menu.less";
-@import "../filter-menu-button/filter-menu-button.less";
-@import "../flag/flag.less";
-@import "../floating-label/floating-label.less";
-@import "../fullscreen-dialog/fullscreen-dialog.less";
-@import "../signal/signal.less";
-@import "../icon/icon.less";
-@import "../icon-button/icon-button.less";
-@import "../image-placeholder/image-placeholder.less";
-@import "../infotip/infotip.less";
-@import "../inline-notice/inline-notice.less";
-@import "../lightbox-dialog/lightbox-dialog.less";
-@import "../link/link.less";
-@import "../listbox/listbox.less";
-@import "../listbox-button/listbox-button.less";
-@import "../menu/menu.less";
-@import "../menu-button/menu-button.less";
-@import "../page-grid/page-grid.less";
-@import "../page-notice/page-notice.less";
-@import "../pagination/pagination.less";
-@import "../panel-dialog/panel-dialog.less";
-@import "../phone-input/phone-input.less";
-@import "../progress-bar/progress-bar.less";
-@import "../progress-bar-expressive/progress-bar-expressive.less";
-@import "../progress-spinner/progress-spinner.less";
-@import "../progress-stepper/progress-stepper.less";
-@import "../radio/radio.less";
-@import "../section-notice/section-notice.less";
-@import "../section-title/section-title.less";
-@import "../segmented-buttons/segmented-buttons.less";
-@import "../select/select.less";
-@import "../skeleton/skeleton.less";
-@import "../snackbar-dialog/snackbar-dialog.less";
-@import "../split-button/split-button.less";
-@import "../star-rating/star-rating.less";
-@import "../star-rating-select/star-rating-select.less";
-@import "../switch/switch.less";
-@import "../tabs/tabs.less";
-@import "../textbox/textbox.less";
-@import "../toast-dialog/toast-dialog.less";
-@import "../toggle-button/toggle-button.less";
-@import "../toggle-button-group/toggle-button-group.less";
-@import "../tooltip/tooltip.less";
-@import "../tourtip/tourtip.less";
-@import "../typography/typography.less";
-@import "../video/video.less";

package/src/less/cta-button/cta-button.less

@@ -1,79 +0,0 @@
-@import "../variables/variables.less";
-@import "../mixins/private/button-mixins.less";
-@import "../mixins/private/token-mixins.less";
-
-a.cta-btn {
-    .btn-base();
-
-    .background-color-token(cta-btn-background-color, color-background-primary);
-    border-color: currentColor;
-    border-radius: var(
-        --cta-btn-border-radius,
-        calc(@button-height-regular / 2)
-    );
-    .color-token(cta-btn-foreground-color, color-foreground-primary);
-    display: inline-block;
-    font-size: var(--font-size-default);
-    max-width: 100%;
-    padding: @button-padding-vertical 20px;
-}
-
-a.cta-btn:visited {
-    .color-token(cta-btn-visited-foreground-color, color-foreground-primary);
-}
-
-a.cta-btn:focus,
-a.cta-btn:hover {
-    .background-color-token(cta-btn-hover-background-color, color-foreground-primary);
-    .border-color-token(cta-btn-hover-border-color, color-foreground-primary);
-    .color-token(cta-btn-hover-foreground-color, color-background-primary);
-}
-
-a.cta-btn:not([href]),
-a.cta-btn[aria-disabled="true"] {
-    .background-color-token(cta-btn-disabled-background-color, color-background-primary);
-    .border-color-token(cta-btn-disabled-border-color, color-stroke-disabled);
-    .color-token(cta-btn-disabled-foreground-color, color-foreground-disabled);
-}
-
-a.cta-btn--fluid {
-    width: 100%;
-}
-
-span.cta-btn__cell {
-    .btn-cell-base();
-    .btn-cell-fixed-height();
-    .btn-cell-truncated();
-
-    justify-content: center;
-}
-
-a.cta-btn svg.icon {
-    .btn-icon-base();
-
-    flex-shrink: 0;
-    height: 10px;
-    width: 10px;
-}
-
-span.cta-btn__cell--fixed-height svg.icon {
-    align-self: center;
-    height: 1rem;
-    overflow: visible; // needed?
-    width: 1rem;
-}
-
-a.cta-btn--truncated {
-    .btn-truncate();
-}
-
-a.cta-btn--large {
-    border-radius: @button-border-radius-large;
-    display: inline-flex;
-    font-size: var(--font-size-medium);
-    min-height: @button-height-large;
-}
-
-[dir="rtl"] a.cta-btn svg.icon--arrow-right-24 {
-    transform: rotate(180deg);
-}

package/src/less/filter-button/filter-button.less

@@ -1,80 +0,0 @@
-@import "../variables/variables.less";
-@import "../mixins/private/filter-button-mixins.less";
-@import "../mixins/private/token-mixins.less";
-
-// .filter-group also exists in filter-menu-button
-// todo: move to utility/layout class and/or mixin
-div.filter-group {
-    display: flex;
-    flex-wrap: wrap;
-}
-
-button.filter-button,
-a.filter-link {
-    .filter-button-base();
-
-    .background-color-token(filter-button-background-color, color-background-secondary);
-    .border-color-token(filter-button-selected-border-color, color-stroke-default);
-
-    &:focus,
-    &:hover,
-    &:active {
-        .background-color-token(filter-button-background-color, color-state-secondary-hover);
-    }
-}
-
-button.filter-button .filter-button__cell,
-a.filter-link .filter-link__cell {
-    display: inline-block;
-    max-width: 258px;
-    overflow: hidden;
-    pointer-events: none;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-a.filter-link:visited {
-    .color-token(filter-button-foreground-color, color-foreground-primary);
-}
-
-button.filter-button[aria-pressed="true"],
-a.filter-link--selected {
-    .border-color-token(filter-button-selected-border-color, color-stroke-strong);
-    font-weight: bold;
-}
-
-a.filter-link--selected:visited {
-    .border-color-token(filter-button-selected-border-color, color-stroke-strong);
-}
-
-button.filter-button[disabled],
-button.filter-button[aria-disabled="true"],
-button.filter-button[aria-pressed="true"][disabled],
-button.filter-button[aria-pressed="true"][aria-disabled="true"],
-a.filter-link:not([href]),
-a.filter-link[aria-disabled="true"],
-a.filter-link--selected:not([href]),
-a.filter-link--selected[aria-disabled="true"] {
-    .color-token(filter-button-disabled-foreground-color, color-foreground-disabled);
-    font-weight: normal;
-
-    // todo: we can elimate the need for these overrides by using :not([disabled]) in place where defining hover states
-    &:hover,
-    &:focus {
-        .background-color-token(filter-button-background-color, color-background-secondary);
-        .color-token(filter-button-disabled-foreground-color, color-foreground-disabled);
-    }
-}
-
-button.filter-button[aria-pressed="true"][disabled]:hover,
-button.filter-button[aria-pressed="true"][aria-disabled="true"]:hover,
-a.filter-link--selected:not([href]):hover,
-a.filter-link--selected[aria-disabled="true"]:hover {
-    .background-color-token(filter-button-selected-background-color, color-state-secondary-hover);
-}
-
-// https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
-a.filter-link:focus:not(:focus-visible),
-button.filter-button:focus:not(:focus-visible) {
-    outline: none;
-}

package/src/less/global/global.less

@@ -1,37 +0,0 @@
-@import "../variables/variables.less";
-@import "../mixins/private/token-mixins.less";
-
-body {
-    .background-color-token(color-background-primary);
-    .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 {
-    .color-token(link-foreground-color-default, color-foreground-primary);
-
-    &:visited {
-        .color-token(link-foreground-color-visited, color-foreground-visited);
-    }
-
-    &:hover {
-        .color-token(link-foreground-color-hover, color-foreground-secondary);
-    }
-
-    &:not([href]),
-    &[aria-disabled="true"] {
-        .color-token(link-forground-color-disabled, color-foreground-disabled);
-    }
-}