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

package/dist/typography/typography.css

@@ -1,103 +1,130 @@
 .giant-text-3 {
-  font-size: var(--font-size-giant-3);
-  font-weight: var(--font-weight-bold);
-  line-height: 52px;
+    font-size: var(--font-size-giant-3);
+    line-height: 52px;
 }
+
+.giant-text-2,
+.giant-text-3 {
+    font-weight: var(--font-weight-bold);
+}
+
 .giant-text-2 {
-  font-size: var(--font-size-giant-2);
-  font-weight: var(--font-weight-bold);
-  line-height: 46px;
+    font-size: var(--font-size-giant-2);
+    line-height: 46px;
 }
+
 .giant-text-1 {
-  font-size: var(--font-size-giant-1);
-  font-weight: var(--font-weight-bold);
-  line-height: 40px;
+    font-size: var(--font-size-giant-1);
+    line-height: 40px;
 }
+
+.giant-text-1,
 .large-text-2 {
-  font-size: var(--font-size-large-2);
-  font-weight: var(--font-weight-bold);
-  line-height: 32px;
+    font-weight: var(--font-weight-bold);
 }
+
+.large-text-2 {
+    font-size: var(--font-size-large-2);
+    line-height: 32px;
+}
+
 .large-text-1 {
-  font-size: var(--font-size-large-1);
-  font-weight: var(--font-weight-bold);
-  line-height: 28px;
+    font-size: var(--font-size-large-1);
+    font-weight: var(--font-weight-bold);
+    line-height: 28px;
 }
+
 .medium-text {
-  font-size: var(--font-size-medium);
-  line-height: 24px;
+    font-size: var(--font-size-medium);
+    line-height: 24px;
 }
+
 .regular-text {
-  font-size: var(--font-size-default);
-  line-height: 20px;
+    font-size: var(--font-size-default);
+    line-height: 20px;
 }
+
 .small-text {
-  font-size: var(--font-size-small);
-  line-height: 16px;
+    font-size: var(--font-size-small);
+    line-height: 16px;
 }
+
 .bold-text {
-  font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
 }
+
 .secondary-text {
-  color: var(--typography-secondary-text-color, var(--color-foreground-secondary));
-}
-.emphasis-text {
-  color: var(--color-foreground-attention);
+    color: var(
+        --typography-secondary-text-color,
+        var(--color-foreground-secondary)
+    );
 }
+
+.emphasis-text,
 .negative-text {
-  color: var(--color-foreground-attention);
+    color: var(--color-foreground-attention);
 }
+
 .positive-text {
-  color: var(--color-foreground-confirmation);
+    color: var(--color-foreground-confirmation);
 }
+
 .disabled-text {
-  color: var(--color-foreground-disabled);
+    color: var(--color-foreground-disabled);
 }
+
 .giant-product-title,
 .giant-section-title {
-  font-size: var(--font-size-large-2);
-  line-height: 30px;
+    font-size: var(--font-size-large-2);
+    line-height: 30px;
 }
+
 .large-product-title,
 .large-section-title {
-  font-size: var(--font-size-large-1);
-  line-height: 24px;
+    font-size: var(--font-size-large-1);
+    line-height: 24px;
 }
+
 .medium-product-title,
 .medium-section-title {
-  font-size: var(--font-size-medium);
-  line-height: 20px;
+    font-size: var(--font-size-medium);
+    line-height: 20px;
 }
+
 .small-product-title,
 .small-section-title {
-  font-size: var(--font-size-default);
-  line-height: 16px;
+    font-size: var(--font-size-default);
+    line-height: 16px;
 }
+
 .giant-section-title,
 .large-section-title,
 .medium-section-title,
 .small-section-title {
-  font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
 }
+
 @media (min-width: 512px) {
-  .giant-product-title,
-  .giant-section-title {
-    font-size: var(--font-size-giant-1);
-    line-height: 36px;
-  }
-  .large-product-title,
-  .large-section-title {
-    font-size: var(--font-size-large-2);
-    line-height: 30px;
-  }
-  .medium-product-title,
-  .medium-section-title {
-    font-size: var(--font-size-large-1);
-    line-height: 24px;
-  }
-  .small-product-title,
-  .small-section-title {
-    font-size: var(--font-size-medium);
-    line-height: 20px;
-  }
-}
+    .giant-product-title,
+    .giant-section-title {
+        font-size: var(--font-size-giant-1);
+        line-height: 36px;
+    }
+    .large-product-title,
+    .large-section-title {
+        font-size: var(--font-size-large-2);
+        line-height: 30px;
+    }
+    .medium-product-title,
+    .medium-section-title {
+        font-size: var(--font-size-large-1);
+        line-height: 24px;
+    }
+    .small-product-title,
+    .small-section-title {
+        font-size: var(--font-size-medium);
+        line-height: 20px;
+    }
+}
+
+/*# sourceMappingURL=typography.css.map */

package/dist/typography/typography.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/sass/typography/typography.scss","../../src/sass/mixins/public/_typography-mixins.scss","typography.css","../../src/sass/mixins/private/_token-mixins.scss"],"names":[],"mappings":"AAIA;ECHI,kCAAA;EAEA,gBAAA;ACUJ;;AFLA;ECNI,mCAAA;ACiBJ;;AFXA;ECDI,kCAAA;EAEA,gBAAA;ACUJ;;AFPA;ECCI,kCAAA;EAEA,gBAAA;ACUJ;;AFTA;ECFI,mCAAA;ACiBJ;;AFfA;ECGI,kCAAA;EAEA,gBAAA;ACUJ;;AFXA;ECWI,kCAAA;EACA,mCAAA;EACA,gBAAA;ACIJ;;AFbA;ECmBI,iCAAA;EACA,gBAAA;ACFJ;;AFdA;ECgCI,kCAAA;EACA,gBAAA;ACdJ;;AFfA;EC6CI,gCAAA;EACA,gBAAA;AC1BJ;;AFhBA;EACI,mCAAA;AEmBJ;;AFhBA;EGtCQ,+EAAA;AD0DR;;AFTA;EACI,uCAAA;AEgBJ;;AFbA;EACI,0CAAA;AEgBJ;;AFbA;EACI,sCAAA;AEgBJ;;AFbA;ECuDI,kCAAA;EACA,gBAAA;ACrCJ;;AFdA;ECuDI,kCAAA;EACA,gBAAA;ACpCJ;;AFfA;ECuDI,iCAAA;EACA,gBAAA;ACnCJ;;AFhBA;ECuDI,kCAAA;EACA,gBAAA;AClCJ;;AFjBA;EAII,mCAAA;AEoBJ;;AFjBA;EACI;ICKA,kCAAA;IACA,gBAAA;ECiBF;EFlBE;ICKA,kCAAA;IACA,gBAAA;ECiBF;EFlBE;ICKA,kCAAA;IACA,gBAAA;ECiBF;EFlBE;ICKA,iCAAA;IACA,gBAAA;ECiBF;AACF","file":"typography.css"}

package/dist/utility/utility.css

@@ -1,98 +1,101 @@
-.clearfix::before,
-.clearfix::after {
-  content: " ";
-  display: table;
-  line-height: 0;
+.clearfix:after,
+.clearfix:before {
+    content: " ";
+    display: table;
+    line-height: 0;
 }
-.clearfix::after {
-  clear: both;
+.clearfix:after {
+    clear: both;
 }
 .clipped {
-  border: 0;
-  clip: rect(1px, 1px, 1px, 1px);
-  height: 1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
+    border: 0;
+    clip: rect(1px, 1px, 1px, 1px);
+    height: 1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
 }
 .clipped--stealth:focus {
-  clip: auto;
-  height: auto;
-  overflow: visible;
-  white-space: normal;
-  width: auto;
+    clip: auto;
+    height: auto;
+    overflow: visible;
+    white-space: normal;
+    width: auto;
 }
 .image-stretch {
-  height: auto;
-  width: 100%;
+    height: auto;
+    width: 100%;
 }
 .image-scale {
-  height: auto;
-  max-width: 100%;
+    height: auto;
+    max-width: 100%;
 }
 .image-center {
-  display: table-cell;
-  text-align: center;
-  vertical-align: middle;
+    display: table-cell;
+    text-align: center;
+    vertical-align: middle;
 }
 .image-center img {
-  max-height: 100%;
-  max-width: 100%;
+    max-height: 100%;
+    max-width: 100%;
 }
 .image-treatment {
-  align-items: center;
-  border-radius: 8px;
-  display: flex;
-  justify-content: center;
-  overflow: hidden;
-  position: relative;
+    align-items: center;
+    border-radius: 8px;
+    display: flex;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
 }
-.image-treatment::after {
-  background: rgba(0, 0, 0, 0.05);
-  bottom: 0;
-  content: "";
-  display: block;
-  left: 0;
-  pointer-events: none;
-  position: absolute;
-  right: 0;
-  top: 0;
+.image-treatment:after {
+    background: rgba(0, 0, 0, 0.05);
+    bottom: 0;
+    content: "";
+    display: block;
+    left: 0;
+    pointer-events: none;
+    position: absolute;
+    right: 0;
+    top: 0;
 }
 .image-treatment > img {
-  display: inline-block;
-  max-height: 100%;
-  max-width: 100%;
-  object-fit: contain;
+    display: inline-block;
+    max-height: 100%;
+    max-width: 100%;
+    object-fit: contain;
 }
 .image-treatment-large {
-  align-items: center;
-  border-radius: 16px;
-  display: flex;
-  justify-content: center;
-  overflow: hidden;
-  position: relative;
+    align-items: center;
+    border-radius: 16px;
+    display: flex;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
 }
-.image-treatment-large::after {
-  background: rgba(0, 0, 0, 0.05);
-  bottom: 0;
-  content: "";
-  display: block;
-  left: 0;
-  pointer-events: none;
-  position: absolute;
-  right: 0;
-  top: 0;
+.image-treatment-large:after {
+    background: rgba(0, 0, 0, 0.05);
+    bottom: 0;
+    content: "";
+    display: block;
+    left: 0;
+    pointer-events: none;
+    position: absolute;
+    right: 0;
+    top: 0;
 }
 .image-treatment-large > img {
-  display: inline-block;
-  max-height: 100%;
-  max-width: 100%;
-  object-fit: contain;
+    display: inline-block;
+    max-height: 100%;
+    max-width: 100%;
+    object-fit: contain;
 }
+
 .text-truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
+
+/*# sourceMappingURL=utility.css.map */

package/dist/utility/utility.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/sass/utility/utility.scss","utility.css","../../src/sass/mixins/public/_utility-mixins.scss"],"names":[],"mappings":"AAMI;EAEI,WAAA;EACA,aAAA;EACA,aAAA;ACER;ADCI;EACI,UAAA;ACCR;ADIA;EACI,QAAA;EACA,6BAAA;EACA,UAAA;EACA,eAAA;EACA,SAAA;EACA,iBAAA;EACA,kBAAA;EACA,SAAA;ACAJ;ADIA;EACI,SAAA;EACA,WAAA;EACA,gBAAA;EACA,kBAAA;EACA,UAAA;ACAJ;ADIA;EACI,WAAA;EACA,UAAA;ACAJ;ADIA;EACI,WAAA;EACA,cAAA;ACAJ;ADIA;EACI,kBAAA;EACA,iBAAA;EACA,qBAAA;ACAJ;ADEI;EACI,eAAA;EACA,cAAA;ACAR;ADKA;EEtCI,kBAAA;EACA,iBAFmC;EAGnC,YAAA;EACA,sBAAA;EACA,eAAA;EACA,iBAAA;ADsCJ;ACpCI;EACI,6BAAA;EACA,QAAA;EACA,UAAA;EACA,aAAA;EACA,MAAA;EACA,mBAAA;EACA,iBAAA;EACA,OAAA;EACA,KAAA;ADsCR;ACnCI;EACI,oBAAA;EACA,eAAA;EACA,cAAA;EACA,kBAAA;ADqCR;ADjBA;EE3CI,kBAAA;EACA,kBF2CyB;EE1CzB,YAAA;EACA,sBAAA;EACA,eAAA;EACA,iBAAA;ADiEJ;AC/DI;EACI,6BAAA;EACA,QAAA;EACA,UAAA;EACA,aAAA;EACA,MAAA;EACA,mBAAA;EACA,iBAAA;EACA,OAAA;EACA,KAAA;ADiER;AC9DI;EACI,oBAAA;EACA,eAAA;EACA,cAAA;EACA,kBAAA;ADgER;;ADxCA;EACI,eAAA;EACA,sBAAA;EACA,kBAAA;AC2CJ","file":"utility.css"}

package/dist/variables/_variables.scss

@@ -0,0 +1,64 @@
+/* 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-100: 8px;
+$spacing-25: $spacing-100 * 0.25;
+$spacing-50: $spacing-100 * 0.5;
+$spacing-75: $spacing-100 * 0.75;
+$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/dist/video/video.css

@@ -1,57 +1,69 @@
 .video-player {
-  position: relative;
+    position: relative;
 }
+
 .video-player video {
-  height: 100%;
-  width: 100%;
+    height: 100%;
+    width: 100%;
 }
+
 .video-player__overlay {
-  align-items: center;
-  background-color: rgba(0, 0, 0, 0.6);
-  bottom: 0;
-  color: var(--color-neutral-0);
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  left: 0;
-  position: absolute;
-  right: 0;
-  text-align: center;
-  top: 0;
+    align-items: center;
+    background-color: rgba(0, 0, 0, 0.6);
+    bottom: 0;
+    color: var(--color-neutral-100);
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    left: 0;
+    position: absolute;
+    right: 0;
+    text-align: center;
+    top: 0;
 }
+
 .video-player__overlay-text {
-  margin: 20px 20px 0;
+    margin: 20px 20px 0;
 }
+
 .video-player__overlay--hidden {
-  display: none;
+    display: none;
 }
+
 .video-player__report-button > svg {
-  -webkit-margin-end: var(--spacing-50);
-          margin-inline-end: var(--spacing-50);
+    -webkit-margin-end: var(--spacing-50);
+    margin-inline-end: var(--spacing-50);
 }
+
 .video-player .shaka-overflow-menu svg {
-  height: 24px;
-  margin-left: 10px;
-  margin-right: 10px;
-  width: 24px;
+    height: 24px;
+    margin-left: 10px;
+    margin-right: 10px;
+    width: 24px;
 }
+
 .video-player .shaka-play-button {
-  background: none;
-  box-shadow: none;
-  height: auto;
-  padding: 0;
-  width: auto;
+    background: none;
+    box-shadow: none;
+    height: auto;
+    padding: 0;
+    width: auto;
 }
+
 .video-player .icon--video-play,
 .video-player .shaka-play-button svg {
-  height: 48px;
-  width: 48px;
+    height: 48px;
+    width: 48px;
 }
+
 .video-player .shaka-controls-button-panel {
-  background-color: rgba(0, 0, 0, 0.7);
-  border-radius: 8px;
+    background-color: rgba(0, 0, 0, 0.7);
+    border-radius: 8px;
 }
+
 .video-player--poster .shaka-scrim-container {
-  visibility: hidden;
+    visibility: hidden;
 }
+
+/*# sourceMappingURL=video.css.map */

package/dist/video/video.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/sass/video/video.scss","video.css"],"names":[],"mappings":"AAGA;EACI,iBAAA;ACKJ;;ADFA;EACI,WAAA;EACA,UAAA;ACKJ;;ADFA;EACI,kBAAA;EACA,kCAAA;EACA,QAAA;EACA,8BAAA;EACA,cAAA;EACA,YAAA;EACA,qBAAA;EACA,sBAAA;EACA,MAAA;EACA,iBAAA;EACA,OAAA;EACA,iBAAA;EACA,KAAA;ACKJ;;ADFA;EACI,kBAAA;ACKJ;;ADFA;EACI,YAAA;ACKJ;;ADFA;EACI,oCAAA;UAAA,mCAAA;ACKJ;;ADFA;EACI,WAAA;EACA,gBAAA;EACA,iBAAA;EACA,UAAA;ACKJ;;ADFA;EACI,eAAA;EACA,eAAA;EACA,WAAA;EACA,SAAA;EACA,UAAA;ACKJ;;ADFA;EAEI,WAAA;EACA,UAAA;ACKJ;;ADFA;EACI,kCAAA;EACA,iBAAA;ACKJ;;ADFA;EACI,iBAAA;ACKJ","file":"video.css"}

package/donut-chart.browser.json

@@ -0,0 +1 @@
+{ "dependencies": ["require: ./donut-chart.js"] }

package/donut-chart.css

@@ -0,0 +1 @@
+@import "./dist/donut-chart/donut-chart.css";

package/donut-chart.js

@@ -0,0 +1 @@
+require('./dist/donut-chart/donut-chart.css');

package/donut-chart.mjs

@@ -0,0 +1 @@
+import './dist/donut-chart/donut-chart.css';

package/gh.browser.json

@@ -1,8 +1,8 @@
 {
     "dependencies": [
-        "less-import: ./src/less/mixins/public/utility-mixins.less",
-        "less-import: ./src/less/mixins/private/icon-mixins.less",
-        "less-import: ./src/less/mixins/public/typography-mixins.less",
-        "less-import: ./src/less/gh/gh-mixins.less"
+        "less-import: ./src/sass/mixins/public/utility-mixins.less",
+        "less-import: ./src/sass/mixins/private/icon-mixins.less",
+        "less-import: ./src/sass/mixins/public/typography-mixins.less",
+        "less-import: ./src/sass/gh/gh-mixins.less"
     ]
 }

package/index.browser.json

@@ -4,9 +4,11 @@
     "require: ./avatar.js",
     "require: ./badge.js",
     "require: ./breadcrumbs.js",
+    "require: ./bundles.js",
     "require: ./button.js",
     "require: ./calendar.js",
     "require: ./carousel.js",
+    "require: ./chart-legend.js",
     "require: ./checkbox.js",
     "require: ./chip.js",
     "require: ./chips-combobox.js",
@@ -15,6 +17,7 @@
     "require: ./cta-button.js",
     "require: ./date-textbox.js",
     "require: ./details.js",
+    "require: ./donut-chart.js",
     "require: ./drawer-dialog.js",
     "require: ./education-notice.js",
     "require: ./eek.js",

package/index.css

@@ -2,9 +2,11 @@
 @import "./avatar.css";
 @import "./badge.css";
 @import "./breadcrumbs.css";
+@import "./bundles.css";
 @import "./button.css";
 @import "./calendar.css";
 @import "./carousel.css";
+@import "./chart-legend.css";
 @import "./checkbox.css";
 @import "./chip.css";
 @import "./chips-combobox.css";
@@ -13,6 +15,7 @@
 @import "./cta-button.css";
 @import "./date-textbox.css";
 @import "./details.css";
+@import "./donut-chart.css";
 @import "./drawer-dialog.css";
 @import "./education-notice.css";
 @import "./eek.css";

package/index.js

@@ -2,9 +2,11 @@ require('./alert-dialog.js');
 require('./avatar.js');
 require('./badge.js');
 require('./breadcrumbs.js');
+require('./bundles.js');
 require('./button.js');
 require('./calendar.js');
 require('./carousel.js');
+require('./chart-legend.js');
 require('./checkbox.js');
 require('./chip.js');
 require('./chips-combobox.js');
@@ -13,6 +15,7 @@ require('./confirm-dialog.js');
 require('./cta-button.js');
 require('./date-textbox.js');
 require('./details.js');
+require('./donut-chart.js');
 require('./drawer-dialog.js');
 require('./education-notice.js');
 require('./eek.js');

package/index.mjs

@@ -2,9 +2,11 @@ import './alert-dialog.css';
 import './avatar.css';
 import './badge.css';
 import './breadcrumbs.css';
+import './bundles.css';
 import './button.css';
 import './calendar.css';
 import './carousel.css';
+import './chart-legend.css';
 import './checkbox.css';
 import './chip.css';
 import './chips-combobox.css';
@@ -13,6 +15,7 @@ import './confirm-dialog.css';
 import './cta-button.css';
 import './date-textbox.css';
 import './details.css';
+import './donut-chart.css';
 import './drawer-dialog.css';
 import './education-notice.css';
 import './eek.css';