@ebay/skin 16.7.0 → 16.8.0-0

package/dist/typography/typography.css

@@ -1,42 +1,42 @@
 .giant-text-3 {
-  font-size: 2.875rem;
-  font-weight: 700;
+  font-size: var(--font-size-giant-3);
+  font-weight: var(--font-weight-bold);
   line-height: 52px;
 }
 .giant-text-2 {
-  font-size: 2.25rem;
-  font-weight: 700;
+  font-size: var(--font-size-giant-2);
+  font-weight: var(--font-weight-bold);
   line-height: 46px;
 }
 .giant-text-1 {
-  font-size: 1.875rem;
-  font-weight: 700;
+  font-size: var(--font-size-giant-1);
+  font-weight: var(--font-weight-bold);
   line-height: 40px;
 }
 .large-text-2 {
-  font-size: 1.5rem;
-  font-weight: 700;
+  font-size: var(--font-size-large-2);
+  font-weight: var(--font-weight-bold);
   line-height: 32px;
 }
 .large-text-1 {
-  font-size: 1.25rem;
-  font-weight: 700;
+  font-size: var(--font-size-large-1);
+  font-weight: var(--font-weight-bold);
   line-height: 28px;
 }
 .medium-text {
-  font-size: 1rem;
+  font-size: var(--font-size-medium);
   line-height: 24px;
 }
 .regular-text {
-  font-size: 0.875rem;
+  font-size: var(--font-size-default);
   line-height: 20px;
 }
 .small-text {
-  font-size: 0.75rem;
+  font-size: var(--font-size-small);
   line-height: 16px;
 }
 .bold-text {
-  font-weight: 700;
+  font-weight: var(--font-weight-bold);
 }
 .secondary-text {
   color: var(--typography-secondary-text-color, var(--color-foreground-secondary));
@@ -55,49 +55,49 @@
 }
 .giant-product-title,
 .giant-section-title {
-  font-size: 1.5rem;
+  font-size: var(--font-size-large-2);
   line-height: 30px;
 }
 .large-product-title,
 .large-section-title {
-  font-size: 1.25rem;
+  font-size: var(--font-size-large-1);
   line-height: 24px;
 }
 .medium-product-title,
 .medium-section-title {
-  font-size: 1rem;
+  font-size: var(--font-size-medium);
   line-height: 20px;
 }
 .small-product-title,
 .small-section-title {
-  font-size: 0.875rem;
+  font-size: var(--font-size-default);
   line-height: 16px;
 }
 .giant-section-title,
 .large-section-title,
 .medium-section-title,
 .small-section-title {
-  font-weight: 700;
+  font-weight: var(--font-weight-bold);
 }
 @media (min-width: 512px) {
   .giant-product-title,
   .giant-section-title {
-    font-size: 1.875rem;
+    font-size: var(--font-size-giant-1);
     line-height: 36px;
   }
   .large-product-title,
   .large-section-title {
-    font-size: 1.5rem;
+    font-size: var(--font-size-large-2);
     line-height: 30px;
   }
   .medium-product-title,
   .medium-section-title {
-    font-size: 1.25rem;
+    font-size: var(--font-size-large-1);
     line-height: 24px;
   }
   .small-product-title,
   .small-section-title {
-    font-size: 1rem;
+    font-size: var(--font-size-medium);
     line-height: 20px;
   }
 }

package/dist/utility/utility.css

@@ -55,6 +55,7 @@
   content: "";
   display: block;
   left: 0;
+  pointer-events: none;
   position: absolute;
   right: 0;
   top: 0;
@@ -79,6 +80,7 @@
   content: "";
   display: block;
   left: 0;
+  pointer-events: none;
   position: absolute;
   right: 0;
   top: 0;

package/dist/variables/variables.less

@@ -19,10 +19,10 @@
 @_page-grid-outside-margins-small: 16px;
 @_page-grid-outside-margins-large: 32px;
 @_page-grid-outside-margins-max: 48px;
-@_page-grid-column-gaps-small: @spacing-100;
-@_page-grid-column-gaps-large: @spacing-200;
-@_page-grid-row-gaps-small: @spacing-100;
-@_page-grid-row-gaps-large: @spacing-200;
+@_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";
@@ -30,7 +30,7 @@
 @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;
 
@@ -55,6 +55,7 @@
 @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-800: @spacing-100 * 8;
 

package/dist/video/video.css

@@ -27,7 +27,8 @@
   display: none;
 }
 .video-player__report-button > svg {
-  margin-right: 4px;
+  -webkit-margin-end: var(--spacing-50);
+          margin-inline-end: var(--spacing-50);
 }
 .video-player .shaka-overflow-menu svg {
   height: 24px;
@@ -54,7 +55,3 @@
 .video-player--poster .shaka-scrim-container {
   visibility: hidden;
 }
-[dir="rtl"] .video-player__report-button > svg {
-  margin-left: 4px;
-  margin-right: 0;
-}

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@ebay/skin",
     "description": "Skin - CSS modules that represent the brand eBay",
-    "version": "16.7.0",
+    "version": "16.8.0-0",
     "license": "MIT",
     "main": "./index.js",
     "maintainers": [
@@ -59,21 +59,21 @@
         "storybook": "npm run copy:assetsToStorybook && cross-env STORYBOOK_DS=6 storybook dev -c .storybook"
     },
     "devDependencies": {
-        "@babel/cli": "^7.21.5",
-        "@babel/core": "^7.21.8",
-        "@babel/preset-env": "^7.21.5",
+        "@babel/cli": "^7.23.0",
+        "@babel/core": "^7.23.0",
+        "@babel/preset-env": "^7.22.20",
         "@commitlint/cli": "^17.6.3",
         "@commitlint/config-conventional": "^17.6.3",
         "@ebay/browserslist-config": "^2.6.0",
-        "@percy/cli": "^1.26.3",
+        "@percy/cli": "^1.27.2",
         "@percy/storybook": "^4.3.6",
-        "@storybook/html": "^7.0.12",
-        "@storybook/html-webpack5": "^7.0.12",
+        "@storybook/html": "^7.4.5",
+        "@storybook/html-webpack5": "^7.4.5",
         "babel-loader": "^9.1.2",
         "browser-sync": "^2.29.3",
         "btoa": "^1",
         "cross-env": "^7",
-        "eslint": "^8.40.0",
+        "eslint": "^8.50.0",
         "eslint-config-ebay": "^1",
         "eslint-config-prettier": "^9",
         "eslint-plugin-prettier": "^5",
@@ -117,7 +117,7 @@
         "npm-run-all": "^4",
         "postcss-less": "^6.0.0",
         "postcss-loader": "^7.3.0",
-        "prettier": "^3.0.2",
+        "prettier": "^3.0.3",
         "rimraf": "^5",
         "storybook": "~7.1.1",
         "stylelint": "^15.6.2",

package/scripts/generate-images.js

@@ -15,6 +15,7 @@ const config = YAML.parse(file);
 const { html2xhtml } = require("./util");
 const { query } = require("winston");
 const genText = "This is a generated file, DO NOT EDIT";
+const defsList = [];
 
 async function getFiles(dir) {
     const dirents = await fs.promises.readdir(dir, { withFileTypes: true });
@@ -120,7 +121,12 @@ class GenerateImages {
         svgFragment.setAttribute("id", name);
         svgFragment.removeAttribute("xmlns");
         svgFragment.removeAttribute("width");
-        svgFragment.removeAttribute("heightt");
+        svgFragment.removeAttribute("height");
+        const defs = svgFragment.querySelector("defs");
+        if (defs) {
+            defsList.push(defs);
+            defs.remove();
+        }
 
         return svgFragment;
     }
@@ -174,6 +180,17 @@ class GenerateImages {
                 await this.processSvg(filePath, filename, lessFile);
             }),
         );
+        if (defsList.length) {
+            const fragment = this.masterDocument.createDocumentFragment();
+            defsList.forEach((defs) => {
+                Array.from(defs.children).forEach((defChild) => {
+                    fragment.appendChild(defChild);
+                });
+            });
+            const defsEl = this.masterDocument.createElement("defs");
+            defsEl.appendChild(fragment);
+            masterSvg.appendChild(defsEl);
+        }
 
         lessFile.sort(sortMethod);
 

package/src/less/alert-dialog/alert-dialog.less

@@ -10,9 +10,9 @@
 .alert-dialog__window {
     .lightbox-dialog-window();
 
-    margin-left: @spacing-200;
-    margin-right: @spacing-200;
-    padding: @spacing-200;
+    margin-left: var(--spacing-200);
+    margin-right: var(--spacing-200);
+    padding: var(--spacing-200);
     text-align: center;
 }
 
@@ -23,8 +23,8 @@
 }
 
 .alert-dialog__main {
-    margin: @spacing-200 0;
-    min-height: @spacing-200;
+    margin: var(--spacing-200) 0;
+    min-height: var(--spacing-200);
 
     & > :first-child {
         margin-top: 0;
@@ -84,7 +84,7 @@
 
 @media (min-width: @_screen-size-MD) {
     .alert-dialog__window {
-        max-width: calc(88% - @spacing-400;);
+        max-width: calc(88% - var(--spacing-400));
     }
 }
 

package/src/less/avatar/avatar.less

@@ -6,8 +6,8 @@
     border-radius: 50%;
     color: var(--color-marketing-teal-foreground-5);
     display: inline-flex;
-    font-size: @font-size-large-2;
-    font-weight: @font-weight-bold;
+    font-size: var(--font-size-large-2);
+    font-weight: var(--font-weight-bold);
     height: 48px;
     justify-content: center;
     line-height: 48px;
@@ -62,49 +62,49 @@
 
 .avatar--32,
 .avatar--32 > img {
-    font-size: @font-size-medium;
+    font-size: var(--font-size-medium);
     height: 32px;
     line-height: 32px;
     width: 32px;
 }
 .avatar--40,
 .avatar--40 > img {
-    font-size: @font-size-large-1;
+    font-size: var(--font-size-large-1);
     height: 40px;
     line-height: 40px;
     width: 40px;
 }
 .avatar--48,
 .avatar--48 > img {
-    font-size: @font-size-large-2;
+    font-size: var(--font-size-large-2);
     height: 48px;
     line-height: 48px;
     width: 48px;
 }
 .avatar--56,
 .avatar--56 > img {
-    font-size: @font-size-giant-1;
+    font-size: var(--font-size-giant-1);
     height: 56px;
     line-height: 56px;
     width: 56px;
 }
 .avatar--64,
 .avatar--64 > img {
-    font-size: @font-size-giant-2;
+    font-size: var(--font-size-giant-2);
     height: 64px;
     line-height: 64px;
     width: 64px;
 }
 .avatar--96,
 .avatar--96 > img {
-    font-size: @font-size-giant-3;
+    font-size: var(--font-size-giant-3);
     height: 96px;
     line-height: 96px;
     width: 96px;
 }
 .avatar--128,
 .avatar--128 > img {
-    font-size: @font-size-64;
+    font-size: var(--font-size-giant-4);
     height: 128px;
     line-height: 128px;
     width: 128px;

package/src/less/breadcrumbs/breadcrumbs.less

@@ -3,7 +3,7 @@
 
 nav.breadcrumbs {
     .color-token(breadcrumbs-item-foreground-color, color-foreground-secondary);
-    font-size: @font-size-12;
+    font-size: var(--font-size-small);
     height: fit-content;
     margin: 8px 0;
     min-height: 16px;
@@ -92,11 +92,11 @@ nav.breadcrumbs .menu-button__button {
         --icon-button-background-color,
         var(--color-background-secondary)
     );
-    height: @spacing-300;
-    min-height: @spacing-300;
-    min-width: @spacing-300;
+    height: var(--spacing-300);
+    min-height: var(--spacing-300);
+    min-width: var(--spacing-300);
     outline-offset: 1px;
-    width: @spacing-300;
+    width: var(--spacing-300);
 }
 
 nav.breadcrumbs .fake-menu-button__button svg.icon,
@@ -106,7 +106,7 @@ nav.breadcrumbs .menu-button__button svg.icon {
 
 nav.breadcrumbs .fake-menu-button__menu,
 nav.breadcrumbs .menu-button__menu {
-    font-size: @font-size-14;
+    font-size: var(--font-size-default);
 }
 
 [dir="rtl"] nav.breadcrumbs svg.icon--chevron-right-12 {

package/src/less/button/button.less

@@ -10,7 +10,7 @@ a.fake-btn {
     border-radius: var(--btn-border-radius, calc(@button-height-regular / 2));
     color: inherit;
     display: inline-block;
-    font-size: @font-size-regular;
+    font-size: var(--font-size-default);
     min-height: @button-height-regular;
     min-width: 88px;
     padding: @button-padding-vertical @button-padding-horizontal;
@@ -53,8 +53,8 @@ button.btn--slim,
 a.fake-btn--slim {
     height: @button-height-regular;
     min-width: auto;
-    padding-left: @spacing-100;
-    padding-right: @spacing-100;
+    padding-left: var(--spacing-100);
+    padding-right: var(--spacing-100);
 }
 
 a.fake-btn:visited {
@@ -345,7 +345,7 @@ a.fake-btn--large {
 button.btn--small,
 a.fake-btn--small {
     border-radius: var(--btn-border-radius, calc(@button-height-xsmall / 2));
-    font-size: @font-size-regular;
+    font-size: var(--font-size-default);
     min-height: @button-height-xsmall;
     padding: @button-padding-vertical-small @button-padding-horizontal-small;
 }
@@ -405,7 +405,7 @@ button.btn--large-truncated,
 a.fake-btn--large-truncated {
     .btn-truncate();
 
-    font-size: @font-size-medium;
+    font-size: var(--font-size-medium);
     height: @button-height-large;
     min-height: @button-height-large;
     padding: @button-padding-vertical-large @button-padding-horizontal;
@@ -479,24 +479,6 @@ button.btn--floating-label .btn__floating-label--inline {
     transform: translate(0, -6px);
 }
 
-[dir="rtl"] button.btn svg.icon--chevron-down-12,
-[dir="rtl"] a.fake-btn svg.icon--chevron-down-12 {
-    &:first-child {
-        margin-left: 8px;
-        margin-right: 0;
-    }
-
-    &:last-child {
-        margin-left: 0;
-        margin-right: 8px;
-    }
-
-    &:only-child {
-        margin-left: 0;
-        margin-right: 0;
-    }
-}
-
 [dir="rtl"] {
     button.btn--split-start,
     a.fake-btn--split-start {
@@ -526,10 +508,4 @@ button.btn--floating-label .btn__floating-label--inline {
             .border-right-color-token(primary-border-split-color, color-stroke-subtle);
         }
     }
-
-    button.btn svg.icon,
-    a.fake-btn svg.icon {
-        margin-left: 8px;
-        margin-right: 0;
-    }
 }

package/src/less/calendar/calendar.less

@@ -40,7 +40,7 @@
 }
 
 .calendar__header .icon-btn svg {
-    width: @spacing-200;
+    width: var(--spacing-200);
 }
 
 /************
@@ -58,7 +58,7 @@
 }
 
 .calendar__month + .calendar__month {
-    padding-left: @spacing-200;
+    padding-left: var(--spacing-200);
 }
 
 /************
@@ -74,14 +74,14 @@
 }
 
 .calendar__month > table {
-    border-spacing: 0 @spacing-150;
+    border-spacing: 0 var(--spacing-150);
     width: 100%;
 }
 
 .calendar__month th {
     .color-token(calendar-day-label-color, color-foreground-secondary);
     font-weight: normal;
-    line-height: @spacing-125;
+    line-height: var(--spacing-125);
 }
 
 .calendar__month td {
@@ -93,15 +93,15 @@
     align-items: center;
     background: none;
     border: 1px solid transparent;
-    border-radius: @spacing-200;
+    border-radius: var(--spacing-200);
     border-style: none; // Only effects high contrast users
     box-sizing: border-box;
     color: inherit;
     display: inline-flex;
     font: inherit;
-    height: @spacing-400;
+    height: var(--spacing-400);
     justify-content: center;
-    width: @spacing-400;
+    width: var(--spacing-400);
 }
 
 /************

package/src/less/carousel/carousel.less

@@ -17,29 +17,19 @@
     .background-color-token(carousel-paddle-background-color, color-background-primary);
 
     &--prev {
-        left: -@spacing-200;
+        left: calc(var(--spacing-200) * -1);
     }
 
     &--next {
-        right: -@spacing-200;
-    }
-
-    // deprecated
-    .icon--chevron-right-24 {
-        margin-left: 2px;
-    }
-
-    // deprecated
-    .icon--chevron-left-24 {
-        margin-left: -2px;
+        right: calc(var(--spacing-200) * -1);
     }
 
     .icon--chevron-right-12 {
-        margin-left: 1px;
+        margin-inline-start: 1px;
     }
 
     .icon--chevron-left-12 {
-        margin-left: -1px;
+        margin-inline-end: 1px;
     }
 
     align-items: center;
@@ -205,35 +195,14 @@ span.carousel__container {
 [dir="rtl"] {
     .carousel__control--prev {
         left: unset;
-        right: -@spacing-200;
-    }
-
-    // deprecated
-    .carousel__control .icon--chevron-left-24 {
-        margin-left: 2px;
-    }
-
-    .carousel__control .icon--chevron-left-12 {
-        margin-left: 1px;
+        right: calc(var(--spacing-200) * -1);
     }
 
     .carousel__control--next {
-        left: -@spacing-200;
+        left: calc(var(--spacing-200) * -1);
         right: unset;
     }
 
-    // deprecated
-    .carousel__control .icon--chevron-right-24 {
-        margin-left: -2px;
-    }
-
-    .carousel__control .icon--chevron-right-12 {
-        margin-left: -1px;
-    }
-
-    // deprecated (first two selectors only)
-    .carousel__control .icon--chevron-left-24,
-    .carousel__control .icon--chevron-right-24,
     .carousel__control .icon--chevron-left-12,
     .carousel__control .icon--chevron-right-12 {
         transform: rotate(180deg);

package/src/less/chip/chip.less

@@ -3,21 +3,21 @@
 .chip {
     align-items: center;
     background-color: var(--color-background-tertiary);
-    border-radius: @spacing-400;
+    border-radius: var(--spacing-400);
     color: var(--color-foreground-primary);
     display: inline-flex;
-    font-size: @font-size-14;
+    font-size: var(--font-size-default);
     gap: 2px;
     justify-content: space-between;
     max-width: 296px;
-    min-height: @spacing-250;
+    min-height: var(--spacing-250);
     min-width: 32px;
-    padding: 0 @spacing-150;
+    padding: 0 var(--spacing-150);
 }
 
 .chip__text {
     overflow: hidden;
-    padding: @spacing-75 0;
+    padding: var(--spacing-75) 0;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
@@ -28,11 +28,11 @@ button.chip__button {
     border-radius: 50px;
     box-sizing: border-box;
     flex-shrink: 0;
-    height: @spacing-300;
+    height: var(--spacing-300);
     line-height: 0;
     margin-inline-end: -8px;
     padding: 0;
-    width: @spacing-300;
+    width: var(--spacing-300);
 }
 
 button.chip__button:focus-visible {

package/src/less/combobox/combobox.less

@@ -35,6 +35,11 @@ span.combobox {
     .dropdown-reverse();
 }
 
+.combobox__control > svg.icon,
+.combobox__control > button {
+    margin-inline-start: 8px;
+}
+
 .combobox__option[role^="option"] {
     .listbox-option-base();
     .dropdown-item-border-radius(combobox-listbox);
@@ -88,7 +93,6 @@ span.combobox {
 
 .combobox__control > svg.icon--chevron-down-12 {
     .color-token(combobox-textbox-icon-color, color-foreground-primary);
-    margin-left: 8px;
     pointer-events: none;
     position: absolute;
     right: 17px; // +1 px for the border on the input box
@@ -177,7 +181,7 @@ span.combobox {
 }
 
 .combobox--large .combobox__control > input {
-    font-size: @font-size-18;
+    font-size: var(--font-size-18);
     height: @height-textbox + 8px;
 }
 
@@ -205,8 +209,6 @@ span.combobox {
 
     .combobox__control > svg.icon,
     .combobox__control > button {
-        margin-left: 0;
-        margin-right: 8px;
         right: unset;
     }