@ebay/skin 18.6.0 → 19.1.0

package/dist/table/table.css

@@ -106,13 +106,7 @@
     text-align: left;
 }
 
-.table-cell--numeric {
-    text-align: right;
-}
-.table__cell {
-    text-align: left;
-}
-
+.table-cell--numeric,
 .table__cell--numeric {
     text-align: right;
 }

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;
 }
 
@@ -43,11 +43,12 @@ span.tooltip__mask {
 
 .tooltip__cell {
     display: flex;
+    overflow-wrap: anywhere;
     padding: var(--spacing-100) var(--spacing-200);
-    word-break: break-word;
+    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;
@@ -79,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;
@@ -44,8 +44,9 @@ span.tourtip__mask {
 .tourtip__cell {
     display: flex;
     flex-wrap: wrap;
+    overflow-wrap: anywhere;
     padding: var(--spacing-200);
-    word-break: break-word;
+    word-break: normal;
 }
 .tourtip__cell a {
     color: var(--tourtip-foreground-color, var(--color-foreground-on-inverse));

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": "18.6.0",
+    "version": "19.1.0",
     "license": "MIT",
     "main": "./index.js",
     "maintainers": [
@@ -29,14 +29,14 @@
         "preview": "marko-run preview",
         "start": "marko-run",
         "test": "npm run build:css",
-        "deploy": "node scripts/jekyll-config && BASE_URL=/skin/ marko-run build -o ./_site && npm run build:storybook && ncp docs/archive _site/archive && touch _site/.nojekyll",
-        "deploy:only": "node scripts/jekyll-config && marko-run build -o ./_site && npm run build:storybook && ncp docs/archive _site/archive && touch _site/.nojekyll",
+        "deploy": "node scripts/jekyll-config && BASE_URL=/skin/ marko-run build -o ./_site && npm run build:storybook && ncp docs/archive _site/public/archive && touch _site/public/.nojekyll",
+        "deploy:only": "node scripts/jekyll-config && marko-run build -o ./_site && npm run build:storybook && ncp docs/archive _site/public/archive && touch _site/public/.nojekyll",
         "prebuild": "npm run clean",
         "prepublishOnly": "node scripts gen",
         "postpublish": "node scripts clean",
         "build": "npm run build:css && npm run lint:js && npm run copy",
         "build:css": "npm run lint:sass && rimraf dist && npm run bundle && npm run postcss && node scripts/add-y-comments.js && prettier dist --write && npm run lint:css",
-        "build:storybook": "npm run copy:assetsToStorybook && storybook build -o ./_site/storybook",
+        "build:storybook": "npm run copy:assetsToStorybook && storybook build -o ./_site/public/storybook",
         "clean": "rimraf _cdn _site .cache .tmp .jekyll npm-debug.log.* .DS_Store",
         "bundle": "sass src/sass:dist --no-source-map",
         "postcss": "postcss dist/**/*.css -r ",
@@ -69,51 +69,52 @@
     },
     "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",
+        "@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.12",
-        "@marko/run": "^0.5.11",
+        "@floating-ui/dom": "^1.6.13",
+        "@marko/run": "^0.5.16",
         "@marko/run-adapter-static": "^0.2.1",
-        "@percy/cli": "^1.30.5",
+        "@percy/cli": "^1.30.7",
         "@percy/storybook": "^6.0.3",
-        "@storybook/html": "^8.4.7",
-        "@storybook/html-webpack5": "^8.4.7",
+        "@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.17.0",
+        "eslint": "^9.21.0",
         "eslint-config-ebay": "^1",
-        "eslint-config-prettier": "^9",
+        "eslint-config-prettier": "^10",
         "eslint-plugin-prettier": "^5",
-        "gh-pages": "^6.2.0",
+        "gh-pages": "^6.3.0",
         "gulp": "^5",
         "husky": "^9.1.7",
-        "jsdom": "^25.0.1",
-        "lint-staged": "^15.2.11",
+        "jsdom": "^26.0.0",
+        "lint-staged": "^15.4.3",
         "makeup-alert-dialog": "~0.3.4",
-        "makeup-combobox": "~0.4.5",
+        "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",
@@ -121,34 +122,34 @@
         "makeup-snackbar-dialog": "0.2.4",
         "makeup-switch": "~0.3.3",
         "makeup-toast-dialog": "0.2.4",
-        "marko": "^5.37.7",
+        "marko": "^5.37.16",
         "mkdirp": "^3",
         "ncp": "^2",
         "npm-run-all": "^4",
-        "postcss": "^8.4.49",
-        "postcss-mixins": "^10.0.1",
-        "postcss-nested": "^6.2.0",
-        "postcss-simple-vars": "^7.0.1",
+        "postcss": "^8.5.3",
         "postcss-cli": "^11.0.0",
         "postcss-comment": "^2.0.0",
         "postcss-import": "^16.1.0",
         "postcss-loader": "^8.1.1",
-        "prettier": "^3.4.2",
+        "postcss-mixins": "^11.0.3",
+        "postcss-nested": "^7.0.2",
+        "postcss-simple-vars": "^7.0.1",
+        "prettier": "^3.5.2",
         "prismjs": "^1.29.0",
         "rimraf": "^6",
-        "sass": "^1.83.0",
-        "sass-loader": "^16.0.4",
-        "storybook": "^8.4.7",
-        "stylelint": "^16.12.0",
+        "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": "^36",
-        "stylelint-config-standard-scss": "^13.1.0",
+        "stylelint-config-standard": "^37",
+        "stylelint-config-standard-scss": "^14.0.0",
         "stylelint-no-unsupported-browser-features": "^8",
         "stylelint-order": "^6",
         "stylelint-prettier": "^5",
         "svgo": "^3.3.2",
-        "webpack": "^5.97.1",
-        "webpack-cli": "^5.1.4",
+        "webpack": "^5.98.0",
+        "webpack-cli": "^6.0.1",
         "winston": "^3.17.0",
         "xmlserializer": "^0.6.1",
         "yargs": "^17.7.2"