@ebay/skin 19.0.0 → 19.1.1

package/dist/link/link.css

@@ -1,13 +1,16 @@
 a.nav-link,
 a.standalone-link {
-    color: var(--nav-link-foreground-color, var(--color-foreground-primary));
+    color: var(
+        --nav-link-foreground-color,
+        var(--color-foreground-link-primary)
+    );
     text-decoration: none;
 }
 a.nav-link:visited,
 a.standalone-link:visited {
     color: var(
         --link-foreground-color-default,
-        var(--color-foreground-primary)
+        var(--color-foreground-link-primary)
     );
 }
 a.nav-link:hover,
@@ -32,7 +35,10 @@ a.standalone-link[aria-disabled="true"] {
 button.fake-link {
     background-color: initial;
     border: 0;
-    color: var(--fake-link-foreground-color, var(--color-foreground-primary));
+    color: var(
+        --fake-link-foreground-color,
+        var(--color-foreground-link-primary)
+    );
     font-family: inherit;
     font-size: inherit;
     padding: 0;
@@ -51,3 +57,19 @@ button.fake-link[disabled] {
         var(--color-foreground-disabled)
     );
 }
+
+a.legal-link,
+button.legal-link {
+    text-decoration: underline;
+}
+a.legal-link,
+a.legal-link:hover,
+a.legal-link:visited,
+button.legal-link,
+button.legal-link:hover,
+button.legal-link:visited {
+    color: var(
+        --legal-link-foreground-color,
+        var(--color-foreground-link-legal)
+    );
+}

package/dist/list/list.css

@@ -4,11 +4,15 @@
 
 .list ol,
 .list ul {
-    list-style: none;
     margin: 0;
     padding: 0;
 }
 
+.list li::marker {
+    content: "";
+    font-size: 0;
+}
+
 .list fieldset > *,
 .list li > * {
     align-items: center;

package/dist/listbox/listbox.css

@@ -1,6 +1,6 @@
 :root {
-    --bubble-shadow: 0 2px 7px rgba(0, 0, 0, 0.15),
-        0 5px 17px rgba(0, 0, 0, 0.2);
+    --bubble-shadow:
+        0 2px 7px rgba(0, 0, 0, 0.15), 0 5px 17px rgba(0, 0, 0, 0.2);
 }
 div.listbox {
     margin: var(--spacing-200) 0;

package/dist/listbox-button/listbox-button.css

@@ -1,6 +1,6 @@
 :root {
-    --bubble-shadow: 0 2px 7px rgba(0, 0, 0, 0.15),
-        0 5px 17px rgba(0, 0, 0, 0.2);
+    --bubble-shadow:
+        0 2px 7px rgba(0, 0, 0, 0.15), 0 5px 17px rgba(0, 0, 0, 0.2);
 }
 .listbox-button {
     line-height: normal;
@@ -49,6 +49,9 @@ div.listbox-button__listbox--set-position {
     top: calc(100% + 4px);
     width: auto;
 }
+div.listbox-button__listbox--fixed {
+    position: fixed;
+}
 [dir="rtl"] div.listbox-button__listbox {
     left: unset;
     right: 0;

package/dist/marketsans/marketsans.css

@@ -3,17 +3,17 @@
     font-family: Market Sans;
     font-style: normal;
     font-weight: 400;
-    src: url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v1.0/MarketSans-Regular-WebS.eot);
+    src: url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v2.0/MarketSans-Regular-WebS.eot);
     src:
-        url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v1.0/MarketSans-Regular-WebS.eot?#iefix)
+        url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v2.0/MarketSans-Regular-WebS.eot?#iefix)
             format("embedded-opentype"),
-        url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v1.0/MarketSans-Regular-WebS.woff2)
+        url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v2.0/MarketSans-Regular-WebS.woff2)
             format("woff2"),
-        url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v1.0/MarketSans-Regular-WebS.woff)
+        url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v2.0/MarketSans-Regular-WebS.woff)
             format("woff"),
-        url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v1.0/MarketSans-Regular-WebS.ttf)
+        url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v2.0/MarketSans-Regular-WebS.ttf)
             format("truetype"),
-        url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v1.0/MarketSans-Regular-WebS.svg#MarketSans-Regular-WebS)
+        url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v2.0/MarketSans-Regular-WebS.svg#MarketSans-Regular-WebS)
             format("svg");
 }
 @font-face {
@@ -21,16 +21,16 @@
     font-family: Market Sans;
     font-style: normal;
     font-weight: 700;
-    src: url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v1.0/MarketSans-SemiBold-WebS.eot);
+    src: url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v2.0/MarketSans-Bold-WebS.eot);
     src:
-        url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v1.0/MarketSans-SemiBold-WebS.eot?#iefix)
+        url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v2.0/MarketSans-Bold-WebS.eot?#iefix)
             format("embedded-opentype"),
-        url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v1.0/MarketSans-SemiBold-WebS.woff2)
+        url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v2.0/MarketSans-Bold-WebS.woff2)
             format("woff2"),
-        url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v1.0/MarketSans-SemiBold-WebS.woff)
+        url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v2.0/MarketSans-Bold-WebS.woff)
             format("woff"),
-        url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v1.0/MarketSans-SemiBold-WebS.ttf)
+        url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v2.0/MarketSans-Bold-WebS.ttf)
             format("truetype"),
-        url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v1.0/MarketSans-SemiBold-WebS.svg#MarketSans-SemiBold-WebS)
+        url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v2.0/MarketSans-Bold-WebS.svg#MarketSans-Bold-WebS)
             format("svg");
 }

package/dist/menu/menu.css

@@ -1,6 +1,6 @@
 :root {
-    --bubble-shadow: 0 2px 7px rgba(0, 0, 0, 0.15),
-        0 5px 17px rgba(0, 0, 0, 0.2);
+    --bubble-shadow:
+        0 2px 7px rgba(0, 0, 0, 0.15), 0 5px 17px rgba(0, 0, 0, 0.2);
 }
 .fake-menu__items,
 .menu__items {

package/dist/menu-button/menu-button.css

@@ -1,6 +1,6 @@
 :root {
-    --bubble-shadow: 0 2px 7px rgba(0, 0, 0, 0.15),
-        0 5px 17px rgba(0, 0, 0, 0.2);
+    --bubble-shadow:
+        0 2px 7px rgba(0, 0, 0, 0.15), 0 5px 17px rgba(0, 0, 0, 0.2);
 }
 .fake-menu-button,
 .menu-button {
@@ -37,6 +37,10 @@
     top: calc(100% + 4px);
     width: auto;
 }
+.fake-menu-button__menu--fixed,
+.menu-button__menu--fixed {
+    position: fixed;
+}
 [dir="rtl"] .fake-menu-button__menu,
 [dir="rtl"] .menu-button__menu {
     left: unset;

package/dist/mixins/_utility-mixins.scss

@@ -23,10 +23,10 @@
     white-space: nowrap;
 }
 
-@mixin image-treatment($border-radius: 8px) {
+@mixin image-treatment($border-radius: 8px, $display: flex) {
     align-items: center;
     border-radius: $border-radius;
-    display: flex;
+    display: $display;
     justify-content: center;
     overflow: hidden;
     position: relative;

package/dist/tokens/evo-dark.css

@@ -32,14 +32,22 @@
         --color-foreground-on-confirmation: var(--color-neutral-800);
         --color-foreground-on-information: var(--color-neutral-800);
         --color-foreground-on-strong: var(--color-neutral-800);
+        --color-foreground-link-visited: var(--color-pink-400);
+        --color-foreground-link-legal: var(--color-foreground-accent);
+        --color-foreground-link-primary: var(--color-foreground-primary);
         --color-stroke-default: var(--color-neutral-600);
         --color-stroke-accent: var(--color-blue-400);
+        --color-stroke-on-accent: var(--color-neutral-800);
         --color-stroke-attention: var(--color-red-400);
+        --color-stroke-on-attention: var(--color-neutral-800);
         --color-stroke-confirmation: var(--color-kiwi-600);
+        --color-stroke-on-confirmation: var(--color-neutral-800);
         --color-stroke-information: var(--color-blue-400);
         --color-stroke-disabled: var(--color-neutral-500);
+        --color-stroke-on-disabled: var(--color-neutral-800);
         --color-stroke-strong: var(--color-neutral-100);
         --color-stroke-subtle: var(--color-neutral-600);
+        --color-stroke-inverse: var(--color-neutral-800);
         --color-state-visited: var(--color-magenta-3);
         --color-state-primary-hover: #17212c;
         --color-state-primary-active: #1e2a38;

package/dist/tokens/evo-light.css

@@ -31,13 +31,21 @@
     --color-foreground-on-confirmation: var(--color-neutral-100);
     --color-foreground-on-information: var(--color-neutral-100);
     --color-foreground-on-strong: var(--color-neutral-100);
+    --color-foreground-link-visited: var(--color-pink-600);
+    --color-foreground-link-legal: var(--color-foreground-accent);
+    --color-foreground-link-primary: var(--color-foreground-primary);
     --color-stroke-default: var(--color-neutral-500);
     --color-stroke-accent: var(--color-blue-500);
-    --color-stroke-attention: var(--color-red-500);
+    --color-stroke-on-accent: var(--color-neutral-100);
+    --color-stroke-attention: var(--color-red-600);
+    --color-stroke-on-attention: var(--color-neutral-100);
     --color-stroke-confirmation: var(--color-kiwi-600);
+    --color-stroke-on-confirmation: var(--color-neutral-100);
     --color-stroke-information: var(--color-blue-500);
     --color-stroke-disabled: var(--color-neutral-400);
+    --color-stroke-on-disabled: var(--color-neutral-100);
     --color-stroke-strong: var(--color-neutral-800);
+    --color-stroke-inverse: var(--color-neutral-100);
     --color-stroke-subtle: var(--color-neutral-300);
     --color-state-visited: var(--color-pink-600);
     --color-state-focus-stroke: #005fcc;
@@ -191,4 +199,24 @@
         var(--color-ai-solid-green-subtle) 100%
     );
     --color-media-disabled-filter: grayscale(1) opacity(0.25);
+    /* Motion Functions */
+    --motion-easing-standard: cubic-bezier(0.3, 0, 0, 1);
+    --motion-easing-quick-enter: cubic-bezier(0, 0, 0, 1);
+    --motion-easing-quick-exit: cubic-bezier(1, 0, 0, 1);
+    --motion-easing-soft-enter: cubic-bezier(0, 0, 0.7, 1);
+    --motion-easing-soft-exit: cubic-bezier(0.3, 0, 1, 1);
+    --motion-easing-continuous: cubic-bezier(0.3, 0, 0.7, 1);
+    --motion-easing-bounce: cubic-bezier(0.3, 0, 0, 1.5);
+    --motion-easing-linear: cubic-bezier(0, 0, 1, 1);
+    /* Motion Timings */
+    --motion-duration-instant: 17ms;
+    --motion-duration-short-1: 50ms;
+    --motion-duration-short-2: 83ms;
+    --motion-duration-short-3: 167ms;
+    --motion-duration-medium-1: 250ms;
+    --motion-duration-medium-2: 333ms;
+    --motion-duration-medium-3: 500ms;
+    --motion-duration-long-1: 667ms;
+    --motion-duration-long-2: 883ms;
+    --motion-duration-long-3: 1000ms;
 }

package/dist/tooltip/tooltip.css

@@ -1,6 +1,6 @@
 :root {
-    --bubble-shadow: 0 2px 7px rgba(0, 0, 0, 0.15),
-        0 5px 17px rgba(0, 0, 0, 0.2);
+    --bubble-shadow:
+        0 2px 7px rgba(0, 0, 0, 0.15), 0 5px 17px rgba(0, 0, 0, 0.2);
 }
 .tooltip {
     position: relative;
@@ -31,9 +31,9 @@ span.tooltip {
 .tooltip__mask {
     background-color: var(
         --tooltip-background-color,
-        var(--color-background-elevated)
+        var(--color-background-inverse)
     );
-    color: var(--tooltip-foreground-color, var(--color-foreground-primary));
+    color: var(--tooltip-foreground-color, var(--color-foreground-on-inverse));
     position: relative;
 }
 
@@ -48,7 +48,7 @@ span.tooltip__mask {
     word-break: normal;
 }
 .tooltip__cell a {
-    color: var(--tooltip-foreground-color, var(--color-foreground-primary));
+    color: var(--tooltip-foreground-color, var(--color-foreground-on-inverse));
 }
 .tooltip__cell a:focus {
     outline: 1px dashed currentColor;
@@ -80,7 +80,7 @@ button.tooltip__close {
 .tooltip__pointer {
     background-color: var(
         --tooltip-background-color,
-        var(--color-background-elevated)
+        var(--color-background-inverse)
     );
     height: 8px;
     position: absolute;

package/dist/tourtip/tourtip.css

@@ -1,6 +1,6 @@
 :root {
-    --bubble-shadow: 0 2px 7px rgba(0, 0, 0, 0.15),
-        0 5px 17px rgba(0, 0, 0, 0.2);
+    --bubble-shadow:
+        0 2px 7px rgba(0, 0, 0, 0.15), 0 5px 17px rgba(0, 0, 0, 0.2);
 }
 .tourtip {
     position: relative;

package/dist/variables/_variables.scss

@@ -22,10 +22,10 @@ $_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-url: "https://ir.ebaystatic.com/cr/v/c1/market-sans/v2.0/";
 $marketsans-fontname: "Market Sans";
 $marketsans-filename-regular: "MarketSans-Regular-WebS";
-$marketsans-filename-bold: "MarketSans-SemiBold-WebS";
+$marketsans-filename-bold: "MarketSans-Bold-WebS";
 $font-family-default: $marketsans-fontname, Arial, sans-serif;
 /* TODO: remove these in next major version */
 $font-weight-regular: 500;

package/dist/variables/variables.less

@@ -24,10 +24,10 @@
 @_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-url: "https://ir.ebaystatic.com/cr/v/c1/market-sans/v2.0/";
 @marketsans-fontname: "Market Sans";
 @marketsans-filename-regular: "MarketSans-Regular-WebS";
-@marketsans-filename-bold: "MarketSans-SemiBold-WebS";
+@marketsans-filename-bold: "MarketSans-Bold-WebS";
 
 @font-family-default: @marketsans-fontname, Arial, sans-serif;
 // TODO: remove these in next major version

package/index.browser.json

@@ -38,6 +38,7 @@
     "require: ./image-placeholder.js",
     "require: ./infotip.js",
     "require: ./inline-notice.js",
+    "require: ./layout-grid.js",
     "require: ./lightbox-dialog.js",
     "require: ./link.js",
     "require: ./list.js",

package/index.css

@@ -36,6 +36,7 @@
 @import "./image-placeholder.css";
 @import "./infotip.css";
 @import "./inline-notice.css";
+@import "./layout-grid.css";
 @import "./lightbox-dialog.css";
 @import "./link.css";
 @import "./list.css";

package/index.js

@@ -36,6 +36,7 @@ require('./icon-button.js');
 require('./image-placeholder.js');
 require('./infotip.js');
 require('./inline-notice.js');
+require('./layout-grid.js');
 require('./lightbox-dialog.js');
 require('./link.js');
 require('./list.js');

package/index.mjs

@@ -36,6 +36,7 @@ import './icon-button.css';
 import './image-placeholder.css';
 import './infotip.css';
 import './inline-notice.css';
+import './layout-grid.css';
 import './lightbox-dialog.css';
 import './link.css';
 import './list.css';

package/layout-grid.browser.json

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

package/layout-grid.css

@@ -0,0 +1 @@
+@import "./dist/layout-grid/layout-grid.css";

package/layout-grid.js

@@ -0,0 +1 @@
+require('./dist/layout-grid/layout-grid.css');

package/layout-grid.mjs

@@ -0,0 +1 @@
+import './dist/layout-grid/layout-grid.css';

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@ebay/skin",
     "description": "Skin - CSS modules that represent the brand eBay",
-    "version": "19.0.0",
+    "version": "19.1.1",
     "license": "MIT",
     "main": "./index.js",
     "maintainers": [
@@ -69,28 +69,28 @@
     },
     "devDependencies": {
         "@babel/cli": "^7.26.4",
-        "@babel/core": "^7.26.0",
-        "@babel/preset-env": "^7.26.0",
-        "@changesets/changelog-github": "^0.5.0",
-        "@changesets/cli": "^2.27.11",
-        "@commitlint/cli": "^19.6.1",
-        "@commitlint/config-conventional": "^19.6.0",
-        "@docsearch/js": "^3.8.3",
+        "@babel/core": "^7.26.9",
+        "@babel/preset-env": "^7.26.9",
+        "@changesets/changelog-github": "^0.5.1",
+        "@changesets/cli": "^2.28.1",
+        "@commitlint/cli": "^19.7.1",
+        "@commitlint/config-conventional": "^19.7.1",
+        "@docsearch/js": "^3.9.0",
         "@ebay/browserslist-config": "^2.10.0",
         "@floating-ui/dom": "^1.6.13",
-        "@marko/run": "^0.5.15",
+        "@marko/run": "^0.5.16",
         "@marko/run-adapter-static": "^0.2.1",
-        "@percy/cli": "^1.30.6",
+        "@percy/cli": "^1.30.7",
         "@percy/storybook": "^6.0.3",
-        "@storybook/html": "^8.5.0",
-        "@storybook/html-webpack5": "^8.5.0",
+        "@storybook/html": "^8.5.8",
+        "@storybook/html-webpack5": "^8.5.8",
         "autoprefixer": "^10.4.20",
         "babel-loader": "^9.2.1",
         "btoa": "^1",
         "clean-css": "^5",
         "cross-env": "^7",
         "cssnano": "^7.0.6",
-        "eslint": "^9.18.0",
+        "eslint": "^9.21.0",
         "eslint-config-ebay": "^1",
         "eslint-config-prettier": "^10",
         "eslint-plugin-prettier": "^5",
@@ -98,23 +98,23 @@
         "gulp": "^5",
         "husky": "^9.1.7",
         "jsdom": "^26.0.0",
-        "lint-staged": "^15.4.1",
+        "lint-staged": "^15.4.3",
         "makeup-alert-dialog": "~0.3.4",
-        "makeup-combobox": "~0.4.6",
+        "makeup-combobox": "~0.4.8",
         "makeup-confirm-dialog": "~0.3.4",
         "makeup-dialog": "~0.5.4",
         "makeup-dialog-button": "~0.4.4",
         "makeup-drawer-dialog": "0.2.4",
-        "makeup-expander": "~0.11.4",
+        "makeup-expander": "~0.11.5",
         "makeup-floating-label": "~0.4.5",
         "makeup-fullscreen-dialog": "0.2.4",
         "makeup-input-dialog": "0.2.4",
         "makeup-key-emitter": "~0.4.3",
         "makeup-lightbox-dialog": "0.2.4",
-        "makeup-listbox": "~0.4.4",
-        "makeup-listbox-button": "~0.5.5",
+        "makeup-listbox": "~0.4.5",
+        "makeup-listbox-button": "~0.5.7",
         "makeup-menu": "~0.4.4",
-        "makeup-menu-button": "~0.4.5",
+        "makeup-menu-button": "~0.4.6",
         "makeup-modal": "~0.5.4",
         "makeup-panel-dialog": "0.2.4",
         "makeup-prevent-scroll-keys": "~0.3.3",
@@ -122,11 +122,11 @@
         "makeup-snackbar-dialog": "0.2.4",
         "makeup-switch": "~0.3.3",
         "makeup-toast-dialog": "0.2.4",
-        "marko": "^5.37.11",
+        "marko": "^5.37.16",
         "mkdirp": "^3",
         "ncp": "^2",
         "npm-run-all": "^4",
-        "postcss": "^8.5.1",
+        "postcss": "^8.5.3",
         "postcss-cli": "^11.0.0",
         "postcss-comment": "^2.0.0",
         "postcss-import": "^16.1.0",
@@ -134,13 +134,13 @@
         "postcss-mixins": "^11.0.3",
         "postcss-nested": "^7.0.2",
         "postcss-simple-vars": "^7.0.1",
-        "prettier": "^3.4.2",
+        "prettier": "^3.5.2",
         "prismjs": "^1.29.0",
         "rimraf": "^6",
-        "sass": "^1.83.4",
-        "sass-loader": "^16.0.4",
-        "storybook": "^8.5.0",
-        "stylelint": "^16.13.2",
+        "sass": "^1.85.0",
+        "sass-loader": "^16.0.5",
+        "storybook": "^8.5.8",
+        "stylelint": "^16.14.1",
         "stylelint-config-prettier-scss": "^1.0.0",
         "stylelint-config-standard": "^37",
         "stylelint-config-standard-scss": "^14.0.0",
@@ -148,7 +148,7 @@
         "stylelint-order": "^6",
         "stylelint-prettier": "^5",
         "svgo": "^3.3.2",
-        "webpack": "^5.97.1",
+        "webpack": "^5.98.0",
         "webpack-cli": "^6.0.1",
         "winston": "^3.17.0",
         "xmlserializer": "^0.6.1",