@ebay/skin 16.9.2 → 17.0.0

package/dist/tokens/evo-core.css

@@ -121,5 +121,6 @@
     --spacing-400: 32px;
     --spacing-450: 36px;
     --spacing-600: 48px;
+    --spacing-700: 56px;
     --spacing-800: 64px;
 }

package/dist/tokens/evo-dark.css

@@ -136,5 +136,47 @@
             var(--color-ai-solid-green-subtle) 0%,
             var(--color-ai-solid-blue-subtle) 154.5%
         );
+        --color-loading-fill: #1b1b1b;
+        --color-loading-shimmer: linear-gradient(
+            270deg,
+            var(--color-loading-fill) 0%,
+            var(--color-loading-fill) 34%,
+            #0e0e0e 50%,
+            var(--color-loading-fill) 66%,
+            var(--color-loading-fill) 100%
+        );
+        --color-loading-fill-elevated: #222;
+        --color-loading-shimmer-elevated: linear-gradient(
+            270deg,
+            var(--color-loading-fill-elevated) 0%,
+            var(--color-loading-fill-elevated) 34%,
+            #1c1c1c 50%,
+            var(--color-loading-fill-elevated) 66%,
+            var(--color-loading-fill-elevated) 100%
+        );
+        --color-loading-ai-gradient-purple-subtle: linear-gradient(
+            270deg,
+            var(--color-ai-solid-red-subtle-dark) 0%,
+            var(--color-ai-solid-red-subtle-dark) 34%,
+            var(--color-ai-solid-purple-subtle-dark) 50%,
+            var(--color-ai-solid-red-subtle-dark) 66%,
+            var(--color-ai-solid-red-subtle-dark) 100%
+        );
+        --color-loading-ai-gradient-blue-subtle: linear-gradient(
+            270deg,
+            var(--color-ai-solid-blue-subtle-dark) 0%,
+            var(--color-ai-solid-blue-subtle-dark) 34%,
+            var(--color-ai-solid-purple-subtle-dark) 50%,
+            var(--color-ai-solid-blue-subtle-dark) 66%,
+            var(--color-ai-solid-blue-subtle-dark) 100%
+        );
+        --color-loading-ai-gradient-green-subtle: linear-gradient(
+            270deg,
+            var(--color-ai-solid-green-subtle-dark) 0%,
+            var(--color-ai-solid-green-subtle-dark) 34%,
+            var(--color-ai-solid-blue-subtle-dark) 50%,
+            var(--color-ai-solid-green-subtle-dark) 66%,
+            var(--color-ai-solid-green-subtle-dark) 100%
+        );
     }
 }

package/dist/tokens/evo-light.css

@@ -134,4 +134,42 @@
         var(--color-ai-solid-green-subtle) 0%,
         var(--color-ai-solid-blue-subtle) 154.5%
     );
+    --shadow-subtle: 0px 4px 12px 0px rgba(0, 0, 0, 0.07);
+    --shadow-strong: 0px 5px 17px 0px rgba(0, 0, 0, 0.2),
+        0px 2px 7px 0px rgba(0, 0, 0, 0.15);
+    --color-loading-fill: #f2f2f2;
+    --color-loading-shimmer: linear-gradient(
+        270deg,
+        var(--color-loading-fill) 0%,
+        var(--color-loading-fill) 34%,
+        #f8f8f8 50%,
+        var(--color-loading-fill) 66%,
+        var(--color-loading-fill) 100%
+    );
+    --color-loading-fill-elevated: var(--color-loading-fill);
+    --color-loading-shimmer-elevated: var(--color-loading-shimmer);
+    --color-loading-ai-gradient-purple-subtle: linear-gradient(
+        270deg,
+        var(--color-ai-solid-red-subtle) 0%,
+        var(--color-ai-solid-red-subtle) 34%,
+        var(--color-ai-solid-purple-subtle) 50%,
+        var(--color-ai-solid-red-subtle) 66%,
+        var(--color-ai-solid-red-subtle) 100%
+    );
+    --color-loading-ai-gradient-blue-subtle: linear-gradient(
+        270deg,
+        var(--color-ai-solid-blue-subtle) 0%,
+        var(--color-ai-solid-blue-subtle) 34%,
+        var(--color-ai-solid-purple-subtle) 50%,
+        var(--color-ai-solid-blue-subtle) 66%,
+        var(--color-ai-solid-blue-subtle) 100%
+    );
+    --color-loading-ai-gradient-green-subtle: linear-gradient(
+        270deg,
+        var(--color-ai-solid-green-subtle) 0%,
+        var(--color-ai-solid-green-subtle) 34%,
+        var(--color-ai-solid-blue-subtle) 50%,
+        var(--color-ai-solid-green-subtle) 66%,
+        var(--color-ai-solid-green-subtle) 100%
+    );
 }

package/dist/tooltip/tooltip.css

@@ -9,17 +9,17 @@ span.tooltip {
 }
 .tooltip__overlay {
   border-radius: var(--bubble-border-radius, var(--border-radius-50));
+  display: none;
   filter: var(--bubble-filter);
   font-size: 14px;
+  left: 0;
   max-width: 344px;
+  position: absolute;
+  top: 0;
   transform: scale3d(1, 1, 1);
   width: -webkit-max-content;
   width: max-content;
   z-index: 1;
-  display: none;
-  left: -10px;
-  margin-top: var(--spacing-200);
-  position: absolute;
 }
 .tooltip__mask {
   border-radius: var(--bubble-border-radius, var(--border-radius-50));
@@ -68,8 +68,6 @@ button.tooltip__close {
   transform: rotate(45deg);
   width: 8px;
   z-index: 0;
-  top: -4px;
-  left: calc(50% - 4px);
   background-color: var(--tooltip-background-color, var(--color-background-primary));
 }
 .tooltip__pointer--top-left {

package/dist/tourtip/tourtip.css

@@ -9,15 +9,17 @@ span.tourtip {
 }
 .tourtip__overlay {
   border-radius: var(--bubble-border-radius, var(--border-radius-100));
+  display: none;
   filter: var(--bubble-filter);
   font-size: 14px;
+  left: 0;
   max-width: 344px;
+  position: absolute;
+  top: 0;
   transform: scale3d(1, 1, 1);
   width: -webkit-max-content;
   width: max-content;
   z-index: 1;
-  display: none;
-  position: absolute;
 }
 .tourtip__mask {
   border-radius: var(--bubble-border-radius, var(--border-radius-100));
@@ -73,8 +75,6 @@ button.tourtip__close > svg {
   transform: rotate(45deg);
   width: 8px;
   z-index: 0;
-  top: -4px;
-  left: calc(50% - 4px);
   background-color: var(--tourtip-background-color, var(--color-background-primary));
 }
 .tourtip__pointer--top-left {

package/dist/variables/variables.less

@@ -57,6 +57,7 @@
 @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;

package/index.browser.json

@@ -9,6 +9,7 @@
     "require: ./carousel.js",
     "require: ./checkbox.js",
     "require: ./chip.js",
+    "require: ./chips-combobox.js",
     "require: ./combobox.js",
     "require: ./confirm-dialog.js",
     "require: ./cta-button.js",
@@ -49,6 +50,7 @@
     "require: ./segmented-buttons.js",
     "require: ./select.js",
     "require: ./signal.js",
+    "require: ./skeleton.js",
     "require: ./snackbar-dialog.js",
     "require: ./split-button.js",
     "require: ./star-rating.js",

package/index.css

@@ -7,6 +7,7 @@
 @import "./carousel.css";
 @import "./checkbox.css";
 @import "./chip.css";
+@import "./chips-combobox.css";
 @import "./combobox.css";
 @import "./confirm-dialog.css";
 @import "./cta-button.css";
@@ -47,6 +48,7 @@
 @import "./segmented-buttons.css";
 @import "./select.css";
 @import "./signal.css";
+@import "./skeleton.css";
 @import "./snackbar-dialog.css";
 @import "./split-button.css";
 @import "./star-rating.css";

package/index.js

@@ -7,6 +7,7 @@ require('./calendar.js');
 require('./carousel.js');
 require('./checkbox.js');
 require('./chip.js');
+require('./chips-combobox.js');
 require('./combobox.js');
 require('./confirm-dialog.js');
 require('./cta-button.js');
@@ -47,6 +48,7 @@ require('./section-title.js');
 require('./segmented-buttons.js');
 require('./select.js');
 require('./signal.js');
+require('./skeleton.js');
 require('./snackbar-dialog.js');
 require('./split-button.js');
 require('./star-rating.js');

package/index.mjs

@@ -7,6 +7,7 @@ import './calendar.css';
 import './carousel.css';
 import './checkbox.css';
 import './chip.css';
+import './chips-combobox.css';
 import './combobox.css';
 import './confirm-dialog.css';
 import './cta-button.css';
@@ -47,6 +48,7 @@ import './section-title.css';
 import './segmented-buttons.css';
 import './select.css';
 import './signal.css';
+import './skeleton.css';
 import './snackbar-dialog.css';
 import './split-button.css';
 import './star-rating.css';

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@ebay/skin",
     "description": "Skin - CSS modules that represent the brand eBay",
-    "version": "16.9.2",
+    "version": "17.0.0",
     "license": "MIT",
     "main": "./index.js",
     "maintainers": [
@@ -26,9 +26,7 @@
         "build:ci": "npm run build:css && npm run lint:js && npm run bundle && npm run copy",
         "build:jekyll": "bundler exec jekyll build --incremental --config docs/_config.yml,docs/_config.localhost.yml",
         "build:site": "npm run copy:svgToDocs && npm run build:jekyll",
-        "build:storybook": "npm run copy:assetsToStorybook && npm run build:storybook:ds6",
-        "build:storybook:ds4": "cross-env STORYBOOK_DS=4 storybook build -o ./docs/ds4/storybook",
-        "build:storybook:ds6": "cross-env STORYBOOK_DS=6 storybook build -o ./docs/storybook",
+        "build:storybook": "npm run copy:assetsToStorybook && storybook build -o ./docs/storybook",
         "clean": "rimraf _cdn _site .cache .tmp .jekyll npm-debug.log.* .DS_Store",
         "compileModule": "npx gulp compileModule --name $NAME",
         "bundle": "npm run bundle:js && npm run bundle:css",
@@ -43,20 +41,20 @@
         "copy:lessToDist": "mkdirp dist/variables && ncp src/less/variables dist/variables && mkdirp dist/mixins && ncp src/less/mixins/public dist/mixins",
         "copy:assetsToStorybook": "node scripts storybook-copy",
         "copy:svgToDist": "mkdirp dist/svg && ncp src/svg dist/svg",
-        "copy:svgToDocs": "ncp src/svg docs/static",
-        "copy:tokensToDocs": "ncp src/tokens docs/static && ncp src/legacy-tokens docs/static",
-        "copy:tokensToDist": "ncp src/tokens dist/tokens && ncp src/legacy-tokens dist/legacy-tokens && ncp src/tokens/evo-light.css dist/legacy-tokens/ds4-light.css",
+        "copy:svgToDocs": "ncp src/svg docs/static && ncp src/svg/icons.svg docs/_includes/master-icons.html",
+        "copy:tokensToDocs": "ncp src/tokens docs/static",
+        "copy:tokensToDist": "ncp src/tokens dist/tokens",
         "verify": "node scripts verify",
         "version": "node scripts/jekyll-config && npm run build:storybook && npm run build && git add -A dist docs",
         "transpile": "babel docs/src/js --out-dir docs/_babel",
-        "build:snapshots": "npm run copy:assetsToStorybook && cross-env STORYBOOK_DS=6 storybook build -o ./.storybook-percy",
+        "build:snapshots": "npm run copy:assetsToStorybook && storybook build -o ./.storybook-percy",
         "snapshots": "npm run build:snapshots && npx gulp runSnapshots --stories $STORIES",
         "snapshots:dry": "npm run build:snapshots && npx gulp runSnapshots --dry yes --stories $STORIES",
         "snapshots:execute": "npm run build:snapshots && percy storybook ./.storybook-percy --include",
         "snapshots:execute:dry": "percy storybook ./.storybook-percy --dry-run --include",
         "snapshots:all": "npm run build:snapshots && percy storybook ./.storybook-percy --include '.*'",
         "snapshots:all:dry": "npm run build:snapshots && percy storybook --dry-run ./.storybook-percy --include '.*'",
-        "storybook": "npm run copy:assetsToStorybook && cross-env STORYBOOK_DS=6 storybook dev -c .storybook"
+        "storybook": "npm run copy:assetsToStorybook && storybook dev -c .storybook"
     },
     "devDependencies": {
         "@babel/cli": "^7.23.4",
@@ -65,8 +63,9 @@
         "@commitlint/cli": "^18.4.3",
         "@commitlint/config-conventional": "^18.4.3",
         "@ebay/browserslist-config": "^2.6.0",
+        "@floating-ui/dom": "^1.5.3",
         "@percy/cli": "^1.27.4",
-        "@percy/storybook": "^4.3.6",
+        "@percy/storybook": "^5.0.0",
         "@storybook/html": "^7.5.3",
         "@storybook/html-webpack5": "^7.5.3",
         "babel-loader": "^9.1.2",
@@ -84,7 +83,7 @@
         "gulp-rename": "^2",
         "husky": "^8.0.3",
         "jekyll": "^3.0.0-beta1",
-        "jsdom": "^22.0.0",
+        "jsdom": "^23.0.0",
         "less-loader": "^11.1.0",
         "less-plugin-autoprefix": "^2",
         "less-plugin-clean-css": "^1.5.1",

package/scripts/generate-bundle.js

@@ -17,11 +17,8 @@ const bodyMatch = new RegExp("body ?({(?:.|\\s|\\S)*?})", "m");
 const rootMatch = new RegExp(":root ?({(?:.|\\s|\\S)*?})", "m");
 
 // The list of directories in the dist to pull
-const tokensList = [
-    ["evo-core", "evo-light"],
-    ["ds4-core", "ds4-light"],
-];
-const tokensDirList = ["evo", "ds4"];
+const tokensList = [["evo-core", "evo-light"]];
+const tokensDirList = ["evo"];
 
 /**
  * Main Processing class. Holds info about args passed and ds version

package/scripts/generate-images.js

@@ -135,12 +135,13 @@ class GenerateImages {
         const data = await fs.promises.readFile(filePath, "utf8");
         const symbols = JSDOM.fragment(data);
         const symbol = symbols.querySelector("svg");
-
         const nameObj = stripName(filename);
-        if (
+        const isAllowedInDocs =
             config.skipDocs.indexOf(nameObj.simpleName) === -1 &&
-            config.deprecated.indexOf(nameObj.simpleName) === -1
-        ) {
+            (config.deprecated === null ||
+                config.deprecated.indexOf(nameObj.simpleName) === -1);
+
+        if (isAllowedInDocs) {
             this.imageList.push(nameObj.fullName);
         }
         console.log("Processing SVG:", symbol, filename);
@@ -177,6 +178,7 @@ class GenerateImages {
         await Promise.all(
             this.svgs.map(async (filePath) => {
                 const filename = path.parse(filePath).name;
+                // console.log(filename);
                 await this.processSvg(filePath, filename, lessFile);
             }),
         );

package/scripts/generate-imports/README.md

@@ -18,10 +18,6 @@ By default, the script scans all files in the `dist` folder and for each folder
 | modules      | object | The list of additional modules to generate. The value for each of these are arrays with a list of modules to import. These are used to create custom groups usually or to offer backwards support for renames. |
 | skip         | array  | A list of modules in `dist` folder to skip and not create files for                                                                                                                                            |
 | skipIndex    | array  | A list of modules that should not go into `index.css` and `index.js` by default                                                                                                                                |
-| dsVersions   | array  | A list of supported DS versions. These should correspond with `dist/[module]/{dsVersion}`. Will create files based on this as well.                                                                            |
-| defaultDS    | string | The default DS, will create the base files without `[ds-v]` for this value. Should match one of the values in dsVersions                                                                                       |
-| dsSkip       | object | Each object key will be a value corresponding with dsVersions, each value will be an array. These are modules which should be skipped for that given DS Version.                                               |
-| dsPathSkip   | array  | A list of modules which do not have a ds in their `dist` path. (IE `dist/[module]/[module].css` instead of `dist/[module]/ds6/[module].css`)                                                                   |
 | overrideFile | object | Each key will be a module, with each value will be a custom filename. By default the lookup will be `[module].css` files in dist. This will override in case another filetype should be looked up.             |
 | addModules   | object | Each key will be a module name, while each value will be an array. These will be additional requires that each module will need                                                                                |
 
@@ -91,14 +87,14 @@ Output:
 
 ```
 require('./icon-button');
-require('./dist/infotip/ds6/infotip.css');
+require('./dist/infotip/infotip.css');
 ```
 
 `infotip.css`
 
 ```
 @import './icon-button';
-@import './dist/infotip/ds6/infotip.css';
+@import './dist/infotip/infotip.css';
 ```
 
 `infotip.browser.json`
@@ -112,43 +108,15 @@ require('./dist/infotip/ds6/infotip.css');
 }
 ```
 
-### dsVersions
-
-```
-{
-    "dsVersions": [
-        "6",
-        "4"
-    ],
-    "defaultDS": "6"
-}
-```
-
 Output:
 `radio.css`
 
 ```
-@import './dist/radio/ds6/radio.css';
-```
-
-`cat radio[ds-4].css`
-
-```
-@import './dist/radio/ds4/radio.css';
+@import './dist/radio/radio.css';
 ```
 
 `radio.js`
 
-```
-require('./dist/radio/ds6/radio.css');
-```
-
-`radio[ds-4].css`
-
-```
-@import './dist/radio/ds4/radio.css';
-```
-
 `radio.browser.json`
 
 ```

package/scripts/generate-imports/config.json

@@ -12,28 +12,8 @@
             "textbox"
         ]
     },
-    "skip": [
-        "mixins",
-        "legacy-tokens",
-        "tokens",
-        "svg",
-        "icon-large",
-        "variables"
-    ],
-    "skipIndex": [
-        "dark-mode",
-        "legacy-textbox",
-        "legacy-theme",
-        "legacy-tokens",
-        "rounded-off",
-        "square-corner-theme",
-        "variables"
-    ],
-    "dsVersions": ["6", "4"],
-    "defaultDS": "6",
-    "dsSkip": {
-        "4": ["marketsans", "form", "core"]
-    },
+    "skip": ["mixins", "tokens", "svg", "icon-large", "variables"],
+    "skipIndex": ["dark-mode", "rounded-off", "variables"],
     "overrideFile": {},
     "addModules": {
         "calendar": ["icon-button"],
@@ -57,13 +37,6 @@
         "tokens": {
             "index": ["evo-core", "evo-light"],
             "tokens": ["tokens/evo-core", "tokens/evo-light"]
-        },
-        "legacy-tokens": {
-            "index": ["ds4-core", "ds4-light"],
-            "legacy-tokens": [
-                "legacy-tokens/ds4-core",
-                "legacy-tokens/ds4-light"
-            ]
         }
     }
 }

package/skeleton.browser.json

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

package/skeleton.css

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

package/skeleton.js

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

package/skeleton.mjs

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