@ebay/skin 16.0.0 → 16.1.0

package/dist/square-corner-theme/square-corner-theme.css

@@ -20,8 +20,8 @@ button.expand-btn {
 .tourtip,
 .infotip {
   --bubble-border-radius: 0;
-  --bubble-base-box-shadow: 0 -2px 2px rgba(199, 199, 199, 0.5), 2px 0 2px rgba(199, 199, 199, 0.5), 0 2px 2px rgba(199, 199, 199, 0.5),
-        -2px 0 2px rgba(199, 199, 199, 0.5);
+  --bubble-base-box-shadow: 0 -2px 2px rgba(199, 199, 199, 0.5), 2px 0 2px rgba(199, 199, 199, 0.5),
+        0 2px 2px rgba(199, 199, 199, 0.5), -2px 0 2px rgba(199, 199, 199, 0.5);
   --bubble-left-box-shadow: -2px 2px 2px rgba(199, 199, 199, 0.5);
   --bubble-right-box-shadow: 2px -2px 2px rgba(199, 199, 199, 0.5);
   --bubble-bottom-box-shadow: 2px 2px 2px rgba(199, 199, 199, 0.5);
@@ -62,7 +62,7 @@ button.expand-btn {
 .toast-dialog {
   --toast-dialog-border-radius: 0;
 }
-@media (min-width: 601px) {
+@media (min-width: 512px) {
   .toast-dialog {
     --toast-dialog-large-border-radius: 0;
   }

package/dist/svg/icon/icon-bookmark-16.svg

@@ -0,0 +1,7 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M5.5 3a.5.5 0 0 0-.5.5v8.086l2.293-2.293a1 1 0 0 1 1.414 0L11 11.586V3.5a.5.5 0 0 0-.5-.5h-5ZM3 3.5A2.5 2.5 0 0 1 5.5 1h5A2.5 2.5 0 0 1 13 3.5V14a1 1 0 0 1-1.707.707L8 11.414l-3.293 3.293A1 1 0 0 1 3 14V3.5Z"
+  />
+</svg>

package/dist/svg/icon/icon-bookmark-24.svg

@@ -0,0 +1,7 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M7 3a1 1 0 0 0-1 1v15.586l5.293-5.293a1 1 0 0 1 1.414 0L18 19.586V4a1 1 0 0 0-1-1H7ZM4 4a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v18a1 1 0 0 1-1.707.707L12 16.414l-6.293 6.293A1 1 0 0 1 4 22V4Z"
+  />
+</svg>

package/dist/svg/icon/icon-play-filled-16-colored.svg

@@ -0,0 +1,13 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16Z"
+    fill="#fff"
+    fill-opacity=".88"
+  />
+  <path
+    d="M11.514 8.857a1 1 0 0 0 0-1.714l-5-3A1 1 0 0 0 5 5v6a1 1 0 0 0 1.514.857l5-3Z"
+    fill="#191919"
+  />
+</svg>

package/dist/svg/icon/icon-play-filled-24-colored.svg

@@ -0,0 +1,11 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12Z"
+    fill="#fff"
+    fill-opacity=".88"
+  />
+  <path
+    d="m9.53 6.152 8 5a1 1 0 0 1 0 1.696l-8 5A1 1 0 0 1 8 17V7a1 1 0 0 1 1.53-.848Z"
+    fill="#191919"
+  />
+</svg>

package/dist/svg/icon/image-placeholder.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
+    <path d="M175.241 121.603a9.465 9.465 0 0 1-9.465 9.465 9.466 9.466 0 1 1 9.465-9.465Z"/><path fill-rule="evenodd" d="M211 192.068c0 10.456-8.476 18.931-18.931 18.931h-84.138c-10.456 0-18.931-8.475-18.931-18.931V107.93C89 97.475 97.475 89 107.93 89h84.138C202.524 89 211 97.474 211 107.93v84.138ZM107.931 99.516h84.138a8.413 8.413 0 0 1 8.414 8.414v66.184l-21.523-21.523a5.26 5.26 0 0 0-7.437 0l-14.777 14.777-21.571-26.964a5.255 5.255 0 0 0-8.106-.129L99.517 172.55v-64.62a8.414 8.414 0 0 1 8.414-8.414Zm-8.414 89.233 31.42-36.807 21.267 26.584a5.258 5.258 0 0 0 7.825.433l15.212-15.213 25.242 25.242v3.08a8.414 8.414 0 0 1-8.414 8.414h-84.138a8.414 8.414 0 0 1-8.414-8.414v-3.319Z" clip-rule="evenodd"/>
+</svg>

package/dist/svg/icons.svg

@@ -502,6 +502,20 @@
       clip-rule="evenodd"
     />
   </symbol>
+  <symbol viewBox="0 0 16 16" id="icon-bookmark-16">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M5.5 3a.5.5 0 0 0-.5.5v8.086l2.293-2.293a1 1 0 0 1 1.414 0L11 11.586V3.5a.5.5 0 0 0-.5-.5h-5ZM3 3.5A2.5 2.5 0 0 1 5.5 1h5A2.5 2.5 0 0 1 13 3.5V14a1 1 0 0 1-1.707.707L8 11.414l-3.293 3.293A1 1 0 0 1 3 14V3.5Z"
+    />
+  </symbol>
+  <symbol viewBox="0 0 24 24" id="icon-bookmark-24">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M7 3a1 1 0 0 0-1 1v15.586l5.293-5.293a1 1 0 0 1 1.414 0L18 19.586V4a1 1 0 0 0-1-1H7ZM4 4a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v18a1 1 0 0 1-1.707.707L12 16.414l-6.293 6.293A1 1 0 0 1 4 22V4Z"
+    />
+  </symbol>
   <symbol viewBox="0 0 10 16" id="icon-brand-authorized-seller-16-fit">
     <path d="M6 6.14a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z" />
     <path
@@ -3524,16 +3538,6 @@
       clip-rule="evenodd"
     />
   </symbol>
-  <symbol viewBox="0 0 300 300" id="icon-image-placeholder">
-    <path
-      d="M175.241 121.603a9.465 9.465 0 0 1-9.465 9.465 9.466 9.466 0 1 1 9.465-9.465Z"
-    />
-    <path
-      fill-rule="evenodd"
-      d="M211 192.068c0 10.456-8.476 18.931-18.931 18.931h-84.138c-10.456 0-18.931-8.475-18.931-18.931V107.93C89 97.475 97.475 89 107.93 89h84.138C202.524 89 211 97.474 211 107.93v84.138ZM107.931 99.516h84.138a8.413 8.413 0 0 1 8.414 8.414v66.184l-21.523-21.523a5.26 5.26 0 0 0-7.437 0l-14.777 14.777-21.571-26.964a5.255 5.255 0 0 0-8.106-.129L99.517 172.55v-64.62a8.414 8.414 0 0 1 8.414-8.414Zm-8.414 89.233 31.42-36.807 21.267 26.584a5.258 5.258 0 0 0 7.825.433l15.212-15.213 25.242 25.242v3.08a8.414 8.414 0 0 1-8.414 8.414h-84.138a8.414 8.414 0 0 1-8.414-8.414v-3.319Z"
-      clip-rule="evenodd"
-    />
-  </symbol>
   <symbol viewBox="0 0 16 16" id="icon-inbox-16">
     <path
       fill-rule="evenodd"
@@ -6105,11 +6109,35 @@
       clip-rule="evenodd"
     />
   </symbol>
+  <symbol viewBox="0 0 16 16" id="icon-play-filled-16-colored">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16Z"
+      fill="#fff"
+      fill-opacity=".88"
+    />
+    <path
+      d="M11.514 8.857a1 1 0 0 0 0-1.714l-5-3A1 1 0 0 0 5 5v6a1 1 0 0 0 1.514.857l5-3Z"
+      fill="#191919"
+    />
+  </symbol>
   <symbol viewBox="0 0 24 24" id="icon-play-filled-24">
     <path
       d="M24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12ZM9.53 6.152A1 1 0 0 0 8 7v10a1 1 0 0 0 1.53.848l8-5a1 1 0 0 0 0-1.696l-8-5Z"
     />
   </symbol>
+  <symbol viewBox="0 0 24 24" id="icon-play-filled-24-colored">
+    <path
+      d="M24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12Z"
+      fill="#fff"
+      fill-opacity=".88"
+    />
+    <path
+      d="m9.53 6.152 8 5a1 1 0 0 1 0 1.696l-8 5A1 1 0 0 1 8 17V7a1 1 0 0 1 1.53-.848Z"
+      fill="#191919"
+    />
+  </symbol>
   <symbol viewBox="0 0 20 12" id="icon-postepay-12-colored">
     <rect
       x=".5"
@@ -7467,7 +7495,7 @@
       clip-rule="evenodd"
     />
   </symbol>
-  <symbol viewBox="0 0 16 16" id="icon-zoom-In-16">
+  <symbol viewBox="0 0 16 16" id="icon-zoom-in-16">
     <path
       d="M7 4.5a.5.5 0 0 0-1 0V6H4.5a.5.5 0 0 0 0 1H6v1.5a.5.5 0 0 0 1 0V7h1.5a.5.5 0 0 0 0-1H7V4.5Z"
     />
@@ -7495,6 +7523,16 @@
       clip-rule="evenodd"
     />
   </symbol>
+  <symbol viewBox="0 0 300 300" id="image-placeholder">
+    <path
+      d="M175.241 121.603a9.465 9.465 0 0 1-9.465 9.465 9.466 9.466 0 1 1 9.465-9.465Z"
+    />
+    <path
+      fill-rule="evenodd"
+      d="M211 192.068c0 10.456-8.476 18.931-18.931 18.931h-84.138c-10.456 0-18.931-8.475-18.931-18.931V107.93C89 97.475 97.475 89 107.93 89h84.138C202.524 89 211 97.474 211 107.93v84.138ZM107.931 99.516h84.138a8.413 8.413 0 0 1 8.414 8.414v66.184l-21.523-21.523a5.26 5.26 0 0 0-7.437 0l-14.777 14.777-21.571-26.964a5.255 5.255 0 0 0-8.106-.129L99.517 172.55v-64.62a8.414 8.414 0 0 1 8.414-8.414Zm-8.414 89.233 31.42-36.807 21.267 26.584a5.258 5.258 0 0 0 7.825.433l15.212-15.213 25.242 25.242v3.08a8.414 8.414 0 0 1-8.414 8.414h-84.138a8.414 8.414 0 0 1-8.414-8.414v-3.319Z"
+      clip-rule="evenodd"
+    />
+  </symbol>
   <symbol viewBox="0 0 132 24" fill="none" id="star-rating-0">
     <path
       fill-rule="evenodd"

package/dist/toast-dialog/toast-dialog.css

@@ -1,3 +1,9 @@
+:root {
+  --dialog-scrim-color-hide: rgba(17, 24, 32, 0);
+  --dialog-scrim-color-show: rgba(17, 24, 32, 0.7);
+  --dialog-lightbox-max-width: 616px;
+  --dialog-lightbox-wide-max-width: 896px;
+}
 .toast-dialog {
   background-color: var(--toast-dialog-background-color, var(--color-background-information));
   border-top-left-radius: var(--toast-dialog-border-radius, var(--border-radius-100));
@@ -109,7 +115,7 @@ button.toast-dialog__close > svg {
 .toast-dialog__footer button.btn--secondary:not([disabled]):active {
   background-color: var(--color-state-information-active);
 }
-@media (min-width: 601px) {
+@media (min-width: 512px) {
   .toast-dialog {
     border-radius: var(--toast-dialog-border-radius, var(--border-radius-100));
     bottom: 16px;

package/dist/tokens/evo-dark.css

@@ -70,5 +70,7 @@
         --color-data-viz-chart-quinary-stroke: var(--color-teal-3);
         --color-data-viz-tooltip-shadow-primary: #ffffff26;
         --color-data-viz-tooltip-shadow-secondary: #ffffff2b;
+        --color-scrim-image: rgba(255, 255, 255, 0.12);
+        --color-scrim-background: rgba(0, 0, 0, 0.64);
     }
 }

package/dist/tokens/evo-light.css

@@ -69,4 +69,6 @@
     --color-data-viz-chart-quinary-stroke: var(--color-teal-5);
     --color-data-viz-tooltip-shadow-primary: #00000026;
     --color-data-viz-tooltip-shadow-secondary: #0000002b;
+    --color-scrim-image: rgba(0, 0, 0, 0.04);
+    --color-scrim-background: rgba(0, 0, 0, 0.32);
 }

package/dist/tooltip/tooltip.css

@@ -120,10 +120,7 @@ button.tooltip__close {
   right: -4px;
 }
 .tooltip__pointer--right-bottom {
-  bottom: 12px;
-  left: auto;
-  right: -4px;
-  top: auto;
+  inset: auto -4px 12px auto;
 }
 .tooltip__pointer--right-top {
   left: auto;
@@ -134,7 +131,7 @@ button.tooltip__close {
 .tooltip__host[aria-expanded="true"] ~ .tooltip__overlay {
   display: block;
 }
-@media (min-width: 601px) {
+@media (min-width: 512px) {
   .tooltip__overlay {
     max-width: 400px;
   }

package/dist/tourtip/tourtip.css

@@ -125,10 +125,7 @@ button.tourtip__close > svg {
   right: -4px;
 }
 .tourtip__pointer--right-bottom {
-  bottom: 12px;
-  left: auto;
-  right: -4px;
-  top: auto;
+  inset: auto -4px 12px auto;
 }
 .tourtip__pointer--right-top {
   left: auto;
@@ -171,7 +168,7 @@ span.tourtip__heading {
   color: var(--tourtip-index-color, var(--color-foreground-secondary));
   flex: 1;
 }
-@media (min-width: 601px) {
+@media (min-width: 512px) {
   .tourtip__overlay {
     max-width: 400px;
   }

package/dist/typography/typography.css

@@ -79,7 +79,7 @@
 .small-section-title {
   font-weight: 700;
 }
-@media (min-width: 601px) {
+@media (min-width: 512px) {
   .giant-product-title,
   .giant-section-title {
     font-size: 1.875rem;

package/dist/utility/utility.css

@@ -51,13 +51,10 @@
 }
 .image-treatment::after {
   background: rgba(0, 0, 0, 0.05);
-  bottom: 0;
   content: "";
   display: block;
-  left: 0;
+  inset: 0;
   position: absolute;
-  right: 0;
-  top: 0;
 }
 .image-treatment > img {
   display: inline-block;
@@ -75,13 +72,10 @@
 }
 .image-treatment-large::after {
   background: rgba(0, 0, 0, 0.05);
-  bottom: 0;
   content: "";
   display: block;
-  left: 0;
+  inset: 0;
   position: absolute;
-  right: 0;
-  top: 0;
 }
 .image-treatment-large > img {
   display: inline-block;

package/dist/video/video.css

@@ -8,17 +8,14 @@
 .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;
+  inset: 0;
   justify-content: center;
-  left: 0;
   position: absolute;
-  right: 0;
   text-align: center;
-  top: 0;
 }
 .video-player__overlay-text {
   margin: 20px 20px 0;

package/image-placeholder.browser.json

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

package/image-placeholder.css

@@ -0,0 +1 @@
+@import "./dist/image-placeholder/image-placeholder.css";

package/image-placeholder.js

@@ -0,0 +1 @@
+require('./dist/image-placeholder/image-placeholder.css');

package/image-placeholder.mjs

@@ -0,0 +1 @@
+import './dist/image-placeholder/image-placeholder.css';

package/index.browser.json

@@ -23,6 +23,7 @@
     "require: ./global.js",
     "require: ./icon.js",
     "require: ./icon-button.js",
+    "require: ./image-placeholder.js",
     "require: ./infotip.js",
     "require: ./inline-notice.js",
     "require: ./lightbox-dialog.js",

package/index.css

@@ -21,6 +21,7 @@
 @import "./global.css";
 @import "./icon.css";
 @import "./icon-button.css";
+@import "./image-placeholder.css";
 @import "./infotip.css";
 @import "./inline-notice.css";
 @import "./lightbox-dialog.css";

package/index.js

@@ -21,6 +21,7 @@ require('./fullscreen-dialog.js');
 require('./global.js');
 require('./icon.js');
 require('./icon-button.js');
+require('./image-placeholder.js');
 require('./infotip.js');
 require('./inline-notice.js');
 require('./lightbox-dialog.js');

package/index.mjs

@@ -21,6 +21,7 @@ import './fullscreen-dialog.css';
 import './global.css';
 import './icon.css';
 import './icon-button.css';
+import './image-placeholder.css';
 import './infotip.css';
 import './inline-notice.css';
 import './lightbox-dialog.css';

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@ebay/skin",
     "description": "Skin - CSS modules that represent the brand eBay",
-    "version": "16.0.0",
+    "version": "16.1.0",
     "license": "MIT",
     "main": "./index.js",
     "maintainers": [
@@ -60,21 +60,21 @@
     },
     "devDependencies": {
         "@babel/cli": "^7.20.7",
-        "@babel/core": "^7.20.12",
-        "@babel/preset-env": "^7.20.2",
-        "@commitlint/cli": "^17.4.2",
+        "@babel/core": "^7.21.4",
+        "@babel/preset-env": "^7.21.4",
+        "@commitlint/cli": "^17.5.1",
         "@commitlint/config-conventional": "^17.4.2",
         "@ebay/browserslist-config": "^2.4.1",
-        "@percy/cli": "^1.17.0",
+        "@percy/cli": "^1.21.0",
         "@percy/storybook": "^4.3.4",
         "@storybook/builder-webpack5": "^6.5.16",
         "@storybook/html": "^6.5.16",
         "@storybook/manager-webpack5": "^6.5.16",
         "babel-loader": "^9.1.2",
-        "browser-sync": "^2.27.10",
+        "browser-sync": "^2.29.1",
         "btoa": "^1",
         "cross-env": "^7",
-        "eslint": "^8.33.0",
+        "eslint": "^8.37.0",
         "eslint-config-ebay": "^1",
         "eslint-config-prettier": "^8",
         "eslint-plugin-prettier": "^4",
@@ -117,16 +117,16 @@
         "ncp": "^2",
         "npm-run-all": "^4",
         "postcss-less": "^6.0.0",
-        "postcss-loader": "^7.0.0",
-        "prettier": "^2.8.3",
+        "postcss-loader": "^7.0.2",
+        "prettier": "^2.8.7",
         "rimraf": "^4",
-        "stylelint": "^15.0.1",
-        "stylelint-config-standard": "^30",
+        "stylelint": "^15.4.0",
+        "stylelint-config-standard": "^32",
         "stylelint-no-unsupported-browser-features": "^6.0.1",
         "stylelint-order": "^6",
         "stylelint-prettier": "^3",
         "svgo": "^3.0.1",
-        "webpack": "^5.75.0",
+        "webpack": "^5.78.0",
         "webpack-cli": "^5.0.1",
         "winston": "^3.8.2",
         "xmlserializer": "^0.6.1",

package/scripts/develop-module_proper/code-generators/doc-generator.js

@@ -1,12 +1,15 @@
-const fs = require('fs');
-const path = require('path');
-const log = require('../../log');
-const writeLine = require('../util/line-writer');
-const BaseGenerator = require('./base-generator');
+const fs = require("fs");
+const path = require("path");
+const log = require("../../log");
+const writeLine = require("../util/line-writer");
+const BaseGenerator = require("./base-generator");
 
-const DS_VERSION = 'DS6.5.v1.01';
+const DS_VERSION = "DS6.5.v1.01";
 
-const getModuleDocContent = (moduleName, moduleId) => `<!-- Auto generated code -->
+const getModuleDocContent = (
+    moduleName,
+    moduleId
+) => `<!-- Auto generated code -->
 <div id="${moduleId}">
     {% include section-header.html name="${moduleId}" version=page.versions.${moduleId} %}
 
@@ -44,8 +47,8 @@ class DocumentationGenerator extends BaseGenerator {
      */
     constructor(moduleName, moduleId) {
         super(moduleName, moduleId);
-        this.docsFolder = path.join(__dirname, '..', '..', '..', 'docs');
-        this.docsCommonFolder = path.join(this.docsFolder, '_includes');
+        this.docsFolder = path.join(__dirname, "..", "..", "..", "docs");
+        this.docsCommonFolder = path.join(this.docsFolder, "_includes");
     }
 
     generate() {
@@ -54,22 +57,35 @@ class DocumentationGenerator extends BaseGenerator {
         this._addDocsMain();
         this._addDocsIndex();
 
-        log.info('Docs added! Make changes in %s file.', path.join(this.moduleDocFilePath));
+        log.info(
+            "Docs added! Make changes in %s file.",
+            path.join(this.moduleDocFilePath)
+        );
     }
 
     _addDocsModuleDoc() {
-        const moduleDocFilePath = path.join(this.docsCommonFolder, `${this.moduleId}.html`);
+        const moduleDocFilePath = path.join(
+            this.docsCommonFolder,
+            `${this.moduleId}.html`
+        );
         if (fs.existsSync(moduleDocFilePath)) {
-            log.warn('[DOC][%s] Module doc already exists!', moduleDocFilePath);
+            log.warn("[DOC][%s] Module doc already exists!", moduleDocFilePath);
             return;
         }
-        fs.writeFileSync(moduleDocFilePath, getModuleDocContent(this.moduleName, this.moduleId));
+        fs.writeFileSync(
+            moduleDocFilePath,
+            getModuleDocContent(this.moduleName, this.moduleId)
+        );
 
         this.moduleDocFilePath = moduleDocFilePath;
     }
 
     _addDocsModuleList() {
-        const filePathFromRoot = path.join('docs', '_includes', 'module-list.html');
+        const filePathFromRoot = path.join(
+            "docs",
+            "_includes",
+            "module-list.html"
+        );
         const newLineContent = `<li><a href="#${this.moduleId}">${this.moduleName}</a></li>`;
         writeLine({
             filePathFromRoot,
@@ -81,7 +97,7 @@ class DocumentationGenerator extends BaseGenerator {
     }
 
     _addDocsMain() {
-        const filePathFromRoot = path.join('docs', '_includes', 'main.html');
+        const filePathFromRoot = path.join("docs", "_includes", "main.html");
         const newLineContent = getMainContent(this.moduleId).trim();
         writeLine({
             filePathFromRoot,
@@ -94,7 +110,7 @@ class DocumentationGenerator extends BaseGenerator {
     }
 
     _addDocsIndex() {
-        const filePathFromRoot = path.join('docs', 'index.html');
+        const filePathFromRoot = path.join("docs", "index.html");
         const newLineContent = `    ${this.moduleId}: ${DS_VERSION}`;
         writeLine({
             filePathFromRoot,