@ebay/skin 15.4.0 → 15.5.0

package/dist/textbox/textbox.css

@@ -73,22 +73,11 @@ input.textbox__control[aria-invalid="true"],
 textarea.textbox__control[aria-invalid="true"] {
   border-color: var(--textbox-invalid-foreground-color, var(--color-stroke-attention));
 }
-input.textbox__control::-webkit-input-placeholder,
-textarea.textbox__control::-webkit-input-placeholder {
-  color: var(--textbox-placeholder-color, var(--color-foreground-on-secondary));
-  font-weight: 200;
-}
 input.textbox__control:-ms-input-placeholder,
 textarea.textbox__control:-ms-input-placeholder {
   color: var(--textbox-placeholder-color, var(--color-foreground-on-secondary));
   font-weight: 200;
 }
-input.textbox__control::-ms-input-placeholder,
-textarea.textbox__control::-ms-input-placeholder {
-  color: var(--textbox-placeholder-color, var(--color-foreground-secondary));
-  font-weight: 200;
-  opacity: 1;
-}
 input.textbox__control::placeholder,
 textarea.textbox__control::placeholder {
   color: var(--textbox-placeholder-color, var(--color-foreground-secondary));

package/dist/tokens/evo-dark.css

@@ -41,9 +41,13 @@
         --color-state-inverse-hover: #f7f7f7;
         --color-state-inverse-active: #f8f8f8;
         --color-state-accent-hover: #6ba2ff;
+        --color-state-hover-foreground-on-secondary: #6ba2ff;
         --color-state-accent-active: #71a6ff;
+        --color-state-active-foreground-on-secondary: #6ba2ff;
         --color-state-attention-hover: #ff6988;
         --color-state-attention-active: #ff6383;
+        --color-state-hover-foreground-on-secondary-desctructive: #ff6988;
+        --color-state-active-foreground-on-secondary-desctructive: #ff6383;
         --color-data-viz-grid: var(--color-neutral-3);
         --color-data-viz-labels: var(--color-neutral-4);
         --color-data-viz-legend: var(--color-neutral-2);

package/dist/tokens/evo-light.css

@@ -40,9 +40,13 @@
     --color-state-inverse-hover: #343434;
     --color-state-inverse-active: #323232;
     --color-state-accent-hover: #2854d9;
+    --color-state-hover-foreground-on-secondary: #3461e9;
     --color-state-accent-active: #254fd2;
+    --color-state-active-foreground-on-secondary: #3461e9;
     --color-state-attention-hover: #d70f38;
     --color-state-attention-active: #d70f38;
+    --color-state-hover-foreground-on-secondary-desctructive: #d70f38;
+    --color-state-active-foreground-on-secondary-desctructive: #d70f38;
     --color-data-viz-grid: var(--color-neutral-2);
     --color-data-viz-labels: var(--color-neutral-7);
     --color-data-viz-legend: var(--color-neutral-5);

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@ebay/skin",
     "description": "Skin - CSS modules that represent the brand eBay",
-    "version": "15.4.0",
+    "version": "15.5.0",
     "license": "MIT",
     "main": "./index.js",
     "maintainers": [
@@ -58,22 +58,22 @@
         "storybook": "npm run copy:assetsToStorybook && cross-env STORYBOOK_DS=6 start-storybook -s ."
     },
     "devDependencies": {
-        "@babel/cli": "^7.18.10",
-        "@babel/core": "^7.20.2",
+        "@babel/cli": "^7.20.7",
+        "@babel/core": "^7.20.12",
         "@babel/preset-env": "^7.20.2",
-        "@commitlint/cli": "^17.2.0",
-        "@commitlint/config-conventional": "^17.2.0",
+        "@commitlint/cli": "^17.4.2",
+        "@commitlint/config-conventional": "^17.4.2",
         "@ebay/browserslist-config": "^2.4.1",
-        "@percy/cli": "^1.14.0",
+        "@percy/cli": "^1.17.0",
         "@percy/storybook": "^4.3.4",
-        "@storybook/builder-webpack5": "^6.5.13",
-        "@storybook/html": "^6.5.13",
-        "@storybook/manager-webpack5": "^6.5.13",
-        "babel-loader": "^9.1.0",
+        "@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",
         "btoa": "^1",
         "cross-env": "^7",
-        "eslint": "^8.27.0",
+        "eslint": "^8.33.0",
         "eslint-config-ebay": "^1",
         "eslint-config-prettier": "^8",
         "eslint-plugin-prettier": "^4",
@@ -82,9 +82,9 @@
         "gulp-clean-css": "^4",
         "gulp-less": "^5",
         "gulp-rename": "^2",
-        "husky": "^8.0.2",
+        "husky": "^8.0.3",
         "jekyll": "^3.0.0-beta1",
-        "jsdom": "^20.0.1",
+        "jsdom": "^21.1.0",
         "less-loader": "^11.1.0",
         "less-plugin-autoprefix": "^2",
         "less-plugin-clean-css": "^1.5.1",
@@ -112,19 +112,18 @@
         "makeup-snackbar-dialog": "0.1.0",
         "makeup-switch": "~0.2.0",
         "makeup-toast-dialog": "0.1.0",
-        "mkdirp": "^1",
+        "mkdirp": "^2",
         "ncp": "^2",
         "npm-run-all": "^4",
         "postcss-less": "^6.0.0",
         "postcss-loader": "^7.0.0",
-        "prettier": "^2.7.1",
-        "rimraf": "^3",
-        "stylelint": "^14.15.0",
-        "stylelint-config-prettier": "^9",
-        "stylelint-config-standard": "^29",
+        "prettier": "^2.8.3",
+        "rimraf": "^4",
+        "stylelint": "^15.0.1",
+        "stylelint-config-standard": "^30",
         "stylelint-no-unsupported-browser-features": "^6.0.1",
-        "stylelint-order": "^5",
-        "stylelint-prettier": "^2",
+        "stylelint-order": "^6",
+        "stylelint-prettier": "^3",
         "svgo": "^3.0.1",
         "webpack": "^5.75.0",
         "webpack-cli": "^5.0.1",

package/scripts/README.md

@@ -36,6 +36,9 @@ In order to view all the avaialbe options and subcommands you can run `scripts b
 ## gen
 
 Generates top level improts. See `generate-imports/README.md`
+This creates multiple files. We create a `{module}.browser.json` a `{module}.js` a `{module}.css` and a `{module}.mjs` file, where the module is each skin module.
+These are easy improts to all dist files, which include all of each of the modules dependencies.
+A js file is included as a way to import in any bundler (`lasso`, `wepack`, or `vite`). This allows a common way for bundlers to import the modules and not duplicate any imports. However, CSS and MJS files are also available if needed for different bundlers or imports directly form less files or module imports.
 
 ## clean
 

package/scripts/generate-images.js

@@ -26,6 +26,49 @@ async function getFiles(dir) {
     return Array.prototype.concat(...files);
 }
 
+/**
+ * Processes missing icon file prefixing
+ * @param {string} dir
+ * @returns promise
+ */
+async function processFilePrefixing(dir) {
+    const aFiles = await getFiles(dir);
+    const prefixedFiles = await normalizeFiles(aFiles);
+
+    // return prefixedFiles;
+    return await getFiles(dir);
+}
+
+async function prefixIcon(fileDir, fileBase) {
+    const renameFrom = fileDir + '/' + fileBase;
+    const renameTo = fileDir + '/' + config.icons.prefix + '-' + fileBase;
+
+    await fs.rename(renameFrom, renameTo, (error) => {
+        if (error) return console.log(error);
+
+        console.log('Prefixed Icon: ' + fileBase + ' > ' + config.icons.prefix + '-' + fileBase);
+    });
+}
+
+async function normalizeFiles(svgs) {
+    const svgFiles = svgs.filter((f) => f.endsWith('.svg') && f !== 'icons.svg');
+
+    svgFiles.map(async (filePath) => {
+        const fileDir = path.parse(filePath).dir;
+        const fileBase = path.parse(filePath).base;
+
+        if (
+            !fileBase.startsWith('icon-') &&
+            !fileBase.startsWith('star-rating-') &&
+            !fileBase.startsWith('program-badge-')
+        ) {
+            await prefixIcon(fileDir, fileBase);
+        }
+    });
+
+    return svgFiles;
+}
+
 function sortMethod({ id: a }, { id: b }) {
     if (a < b) {
         return -1;
@@ -146,6 +189,8 @@ function stripName(name, mappedPrefix, mappedPostfix) {
 }
 
 async function runGenerate() {
+    await processFilePrefixing(svgIconDir);
+
     const files = await getFiles(svgIconDir);
     const masterIconFile = await fs.promises.readFile(masterIconPath);
 

package/src/less/button/button.less

@@ -212,11 +212,15 @@ button.btn--secondary:not([disabled], [aria-disabled="true"]),
 a.fake-btn--secondary[href] {
     &:active {
         background-color: var(--color-state-primary-active);
+        border-color: var(--color-state-active-foreground-on-secondary);
+        color: var(--color-state-active-foreground-on-secondary);
     }
 
     &:hover,
     &:focus {
         background-color: var(--color-state-primary-hover);
+        border-color: var(--color-state-hover-foreground-on-secondary);
+        color: var(--color-state-hover-foreground-on-secondary);
     }
 }
 
@@ -232,10 +236,14 @@ a.fake-btn--secondary.fake-btn--destructive[href] {
     &:hover,
     &:focus {
         background-color: var(--color-state-primary-hover);
+        border-color: var(--color-state-hover-foreground-on-secondary-desctructive);
+        color: var(--color-state-hover-foreground-on-secondary-desctructive);
     }
 
     &:active {
         background-color: var(--color-state-primary-active);
+        border-color: var(--color-state-active-foreground-on-secondary-desctructive);
+        color: var(--color-state-active-foreground-on-secondary-desctructive);
     }
 }