@ebay/skin 14.1.3 → 14.2.1

package/dist/tooltip/tooltip.css

@@ -4,6 +4,7 @@
   --bubble-right-box-shadow: 0 0 3px rgba(17, 24, 32, 0.499);
   --bubble-bottom-box-shadow: 0 0 3px rgba(17, 24, 32, 0.499);
   --bubble-top-box-shadow: 0 0 3px rgba(17, 24, 32, 0.499);
+  --bubble-filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.15)) drop-shadow(0 5px 17px rgba(0, 0, 0, 0.2));
 }
 .tooltip {
   position: relative;
@@ -13,9 +14,10 @@ span.tooltip {
 }
 .tooltip__overlay {
   border-radius: var(--bubble-border-radius, var(--border-radius-50));
-  box-shadow: var(--bubble-base-box-shadow);
+  filter: var(--bubble-filter);
   font-size: 14px;
   max-width: 344px;
+  transform: scale3d(1, 1, 1);
   width: -webkit-max-content;
   width: max-content;
   z-index: 1;
@@ -28,19 +30,19 @@ span.tooltip {
   border-radius: var(--bubble-border-radius, var(--border-radius-50));
   position: relative;
   z-index: 1;
-  background-color: var(--tooltip-background-color, var(--color-background-information));
-  color: var(--tooltip-foreground-color, var(--color-foreground-on-information));
+  background-color: var(--tooltip-background-color, var(--color-background-primary));
+  color: var(--tooltip-foreground-color, var(--color-foreground-primary));
 }
 span.tooltip__mask {
   display: block;
 }
 .tooltip__cell {
   display: flex;
-  padding: 16px;
+  padding: 8px 16px;
   word-break: break-word;
 }
 .tooltip__cell a {
-  color: var(--tooltip-foreground-color, var(--color-foreground-on-information));
+  color: var(--tooltip-foreground-color, var(--color-foreground-primary));
 }
 .tooltip__cell a:focus {
   outline: 1px dashed currentColor;
@@ -66,83 +68,71 @@ button.tooltip__close {
   width: 32px;
 }
 .tooltip__pointer {
-  height: 16px;
+  height: 8px;
   position: absolute;
   transform: rotate(45deg);
-  width: 16px;
+  width: 8px;
   z-index: 0;
-  box-shadow: var(--bubble-top-box-shadow);
-  top: -7px;
-  left: calc(50% - 8px);
-  background-color: var(--tooltip-background-color, var(--color-background-information));
+  top: -4px;
+  left: calc(50% - 4px);
+  background-color: var(--tooltip-background-color, var(--color-background-primary));
 }
 .tooltip__pointer--top-left {
-  box-shadow: var(--bubble-top-box-shadow);
-  top: -7px;
+  top: -4px;
   left: 12px;
 }
 .tooltip__pointer--top {
-  box-shadow: var(--bubble-top-box-shadow);
-  top: -7px;
-  left: calc(50% - 8px);
+  top: -4px;
+  left: calc(50% - 4px);
 }
 .tooltip__pointer--top-right {
-  box-shadow: var(--bubble-top-box-shadow);
-  top: -7px;
+  top: -4px;
   left: auto;
   right: 12px;
 }
 .tooltip__pointer--bottom-left {
-  bottom: -7px;
-  box-shadow: var(--bubble-bottom-box-shadow);
+  bottom: -4px;
   top: auto;
   left: 12px;
 }
 .tooltip__pointer--bottom {
-  bottom: -7px;
-  box-shadow: var(--bubble-bottom-box-shadow);
+  bottom: -4px;
   top: auto;
-  left: calc(50% - 8px);
+  left: calc(50% - 4px);
 }
 .tooltip__pointer--bottom-right {
-  bottom: -7px;
-  box-shadow: var(--bubble-bottom-box-shadow);
+  bottom: -4px;
   top: auto;
   left: auto;
   right: 12px;
 }
 .tooltip__pointer--left {
-  top: calc(50% - 8px);
-  left: -7px;
+  top: calc(50% - 4px);
+  left: -4px;
 }
 .tooltip__pointer--left-bottom {
   bottom: 12px;
-  box-shadow: var(--bubble-left-box-shadow);
-  left: -7px;
+  left: -4px;
   top: auto;
 }
 .tooltip__pointer--left-top {
-  box-shadow: var(--bubble-left-box-shadow);
-  left: -7px;
+  left: -4px;
   top: 12px;
 }
 .tooltip__pointer--right {
-  top: calc(50% - 8px);
-  box-shadow: var(--bubble-right-box-shadow);
+  top: calc(50% - 4px);
   left: auto;
-  right: -7px;
+  right: -4px;
 }
 .tooltip__pointer--right-bottom {
   bottom: 12px;
-  box-shadow: var(--bubble-right-box-shadow);
   left: auto;
-  right: -7px;
+  right: -4px;
   top: auto;
 }
 .tooltip__pointer--right-top {
-  box-shadow: var(--bubble-right-box-shadow);
   left: auto;
-  right: -7px;
+  right: -4px;
   top: 12px;
 }
 .tooltip--expanded .tooltip__overlay,

package/dist/tourtip/tourtip.css

@@ -4,6 +4,7 @@
   --bubble-right-box-shadow: 0 0 3px rgba(17, 24, 32, 0.499);
   --bubble-bottom-box-shadow: 0 0 3px rgba(17, 24, 32, 0.499);
   --bubble-top-box-shadow: 0 0 3px rgba(17, 24, 32, 0.499);
+  --bubble-filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.15)) drop-shadow(0 5px 17px rgba(0, 0, 0, 0.2));
 }
 .tourtip {
   position: relative;
@@ -13,9 +14,10 @@ span.tourtip {
 }
 .tourtip__overlay {
   border-radius: var(--bubble-border-radius, var(--border-radius-50));
-  box-shadow: var(--bubble-base-box-shadow);
+  filter: var(--bubble-filter);
   font-size: 14px;
   max-width: 344px;
+  transform: scale3d(1, 1, 1);
   width: -webkit-max-content;
   width: max-content;
   z-index: 1;
@@ -26,19 +28,19 @@ span.tourtip {
   border-radius: var(--bubble-border-radius, var(--border-radius-50));
   position: relative;
   z-index: 1;
-  background-color: var(--tourtip-background-color, var(--color-background-information));
-  color: var(--tourtip-foreground-color, var(--color-foreground-on-information));
+  background-color: var(--tourtip-background-color, var(--color-background-primary));
+  color: var(--tourtip-foreground-color, var(--color-foreground-primary));
 }
 span.tourtip__mask {
   display: block;
 }
 .tourtip__cell {
   display: flex;
-  padding: 16px;
+  padding: 8px 16px;
   word-break: break-word;
 }
 .tourtip__cell a {
-  color: var(--tourtip-foreground-color, var(--color-foreground-on-information));
+  color: var(--tourtip-foreground-color, var(--color-foreground-primary));
 }
 .tourtip__cell a:focus {
   outline: 1px dashed currentColor;
@@ -62,98 +64,77 @@ button.tourtip__close {
   padding: 0;
   white-space: nowrap;
   width: 32px;
-  color: var(--tourtip-foreground-color, var(--color-foreground-on-information));
-}
-button.tourtip__close:focus,
-button.tourtip__close:hover {
-  color: var(--color-state-primary-hover);
-}
-button.tourtip__close:focus {
-  outline: 1px dashed currentColor;
 }
 button.tourtip__close > svg {
   fill: currentColor;
-  height: 14px;
   width: 14px;
 }
 .tourtip__pointer {
-  height: 16px;
+  height: 8px;
   position: absolute;
   transform: rotate(45deg);
-  width: 16px;
+  width: 8px;
   z-index: 0;
-  box-shadow: var(--bubble-top-box-shadow);
-  top: -7px;
-  left: calc(50% - 8px);
-  background-color: var(--tourtip-background-color, var(--color-background-information));
+  top: -4px;
+  left: calc(50% - 4px);
+  background-color: var(--tourtip-background-color, var(--color-background-primary));
 }
 .tourtip__pointer--top-left {
-  box-shadow: var(--bubble-top-box-shadow);
-  top: -7px;
+  top: -4px;
   left: 12px;
 }
 .tourtip__pointer--top {
-  box-shadow: var(--bubble-top-box-shadow);
-  top: -7px;
-  left: calc(50% - 8px);
+  top: -4px;
+  left: calc(50% - 4px);
 }
 .tourtip__pointer--top-right {
-  box-shadow: var(--bubble-top-box-shadow);
-  top: -7px;
+  top: -4px;
   left: auto;
   right: 12px;
 }
 .tourtip__pointer--bottom-left {
-  bottom: -7px;
-  box-shadow: var(--bubble-bottom-box-shadow);
+  bottom: -4px;
   top: auto;
   left: 12px;
 }
 .tourtip__pointer--bottom {
-  bottom: -7px;
-  box-shadow: var(--bubble-bottom-box-shadow);
+  bottom: -4px;
   top: auto;
-  left: calc(50% - 8px);
+  left: calc(50% - 4px);
 }
 .tourtip__pointer--bottom-right {
-  bottom: -7px;
-  box-shadow: var(--bubble-bottom-box-shadow);
+  bottom: -4px;
   top: auto;
   left: auto;
   right: 12px;
 }
 .tourtip__pointer--left {
-  top: calc(50% - 8px);
-  left: -7px;
+  top: calc(50% - 4px);
+  left: -4px;
 }
 .tourtip__pointer--left-bottom {
   bottom: 12px;
-  box-shadow: var(--bubble-left-box-shadow);
-  left: -7px;
+  left: -4px;
   top: auto;
 }
 .tourtip__pointer--left-top {
-  box-shadow: var(--bubble-left-box-shadow);
-  left: -7px;
+  left: -4px;
   top: 12px;
 }
 .tourtip__pointer--right {
-  top: calc(50% - 8px);
-  box-shadow: var(--bubble-right-box-shadow);
+  top: calc(50% - 4px);
   left: auto;
-  right: -7px;
+  right: -4px;
 }
 .tourtip__pointer--right-bottom {
   bottom: 12px;
-  box-shadow: var(--bubble-right-box-shadow);
   left: auto;
-  right: -7px;
+  right: -4px;
   top: auto;
 }
 .tourtip__pointer--right-top {
-  box-shadow: var(--bubble-right-box-shadow);
   left: auto;
-  right: -7px;
+  right: -4px;
   top: 12px;
 }
 .tourtip__heading {

package/dist/variables/variables.less

@@ -33,6 +33,7 @@
 @spacing-25: @spacing-100 * 0.25;
 @spacing-50: @spacing-100 * 0.5;
 @spacing-100: 8px;
+@spacing-150: @spacing-100 * 1.5;
 @spacing-200: @spacing-100 * 2;
 @spacing-300: @spacing-100 * 3;
 @spacing-400: @spacing-100 * 4;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@ebay/skin",
     "description": "Skin - CSS modules that represent the brand eBay",
-    "version": "14.1.3",
+    "version": "14.2.1",
     "license": "MIT",
     "main": "./index.js",
     "maintainers": [
@@ -57,22 +57,22 @@
         "storybook": "npm run copy:assetsToStorybook && cross-env STORYBOOK_DS=6 start-storybook -s ."
     },
     "devDependencies": {
-        "@babel/cli": "^7.17.10",
-        "@babel/core": "^7.18.5",
-        "@babel/preset-env": "^7.18.2",
+        "@babel/cli": "^7.18.10",
+        "@babel/core": "^7.18.13",
+        "@babel/preset-env": "^7.18.10",
         "@commitlint/cli": "^17.0.2",
         "@commitlint/config-conventional": "^17.0.2",
         "@ebay/browserslist-config": "^2.2.0",
-        "@percy/cli": "^1.3.1",
-        "@percy/storybook": "^4.2.1",
-        "@storybook/builder-webpack5": "^6.5.9",
-        "@storybook/html": "^6.5.9",
-        "@storybook/manager-webpack5": "^6.5.9",
+        "@percy/cli": "^1.10.0",
+        "@percy/storybook": "^4.3.1",
+        "@storybook/builder-webpack5": "^6.5.10",
+        "@storybook/html": "^6.5.10",
+        "@storybook/manager-webpack5": "^6.5.10",
         "babel-loader": "^8.2.5",
         "browser-sync": "^2.27.10",
         "btoa": "^1",
         "cross-env": "^7",
-        "eslint": "^8.18.0",
+        "eslint": "^8.22.0",
         "eslint-config-ebay": "^1",
         "eslint-config-prettier": "^8",
         "eslint-plugin-prettier": "^4",
@@ -96,7 +96,7 @@
         "makeup-dialog-button": "~0.3.0",
         "makeup-drawer-dialog": "0.1.0",
         "makeup-expander": "~0.10.0",
-        "makeup-floating-label": "~0.3.0",
+        "makeup-floating-label": "~0.3.1",
         "makeup-fullscreen-dialog": "0.1.0",
         "makeup-input-dialog": "0.1.0",
         "makeup-key-emitter": "~0.3.0",
@@ -121,14 +121,14 @@
         "postcss-loader": "^7.0.0",
         "prettier": "^2.7.1",
         "rimraf": "^3",
-        "stylelint": "^14.9.1",
+        "stylelint": "^14.11.0",
         "stylelint-config-prettier": "^9",
-        "stylelint-config-standard": "^26",
+        "stylelint-config-standard": "^28",
         "stylelint-no-unsupported-browser-features": "^5.0.1",
         "stylelint-order": "^5",
         "stylelint-prettier": "^2",
         "svgo": "^2.7.0",
-        "webpack": "^5.73.0",
+        "webpack": "^5.74.0",
         "webpack-cli": "^4.10.0",
         "winston": "^3.7.2",
         "xmlserializer": "^0.6.1",

package/scripts/generate-images.js

@@ -3,6 +3,7 @@ const fs = require('fs');
 const path = require('path');
 const currentDir = path.dirname(__dirname);
 const svgDir = path.resolve(currentDir, 'src', 'svg');
+const svgIconDir = path.resolve(currentDir, 'src', 'svg', 'icon');
 const masterIconPath = path.resolve(svgDir, 'icons.svg');
 const jsdom = require('jsdom');
 const prettier = require('prettier');
@@ -27,39 +28,44 @@ async function getFiles(dir) {
 
 class GenerateImages {
     constructor(files, masterIconFile) {
-        this.imageList = {};
+        this.imageList = [];
         this.svgs = files.filter((f) => f.endsWith('.svg') && f !== 'icons.svg');
         this.masterIconSymbols = new JSDOM(masterIconFile);
         this.masterDocument = this.masterIconSymbols.window.document;
         this.masterList = [];
     }
 
-    appendImages(filename, nameObj) {
-        this.imageList[filename].push(nameObj.fullName);
+    processSymbolToSVG(symbol, name) {
+        const newSVGCode = symbol.outerHTML.replace('<svg', '<symbol').replace('</svg', '</symbol');
+
+        const svgJsDom = new JSDOM(newSVGCode, { contentType: 'text/xml' });
+        const svgFragment = svgJsDom.window.document.querySelector('symbol');
+        svgFragment.setAttribute('id', name);
+        svgFragment.removeAttribute('xmlns');
+        return svgFragment;
     }
 
-    async processSvg(filePath, mappedName, filename) {
+    async processSvg(filePath, filename, lessFile) {
         const data = await fs.promises.readFile(filePath, 'utf8');
         const symbols = JSDOM.fragment(data);
+        const symbol = symbols.querySelector('svg');
 
-        const lessFile = [`/* ${genText} */`];
-        symbols.querySelectorAll('symbol').forEach((symbol) => {
-            const nameObj = stripName(symbol.id, mappedName.prefix, mappedName.postfix);
-            this.appendImages(filename, nameObj);
-
-            this.masterList.push(symbol);
+        const nameObj = stripName(filename);
+        if (config.skipDocs.indexOf(nameObj.simpleName) === -1) {
+            this.imageList.push(nameObj.fullName);
+        }
 
-            if (config.skip.indexOf(symbol.id) > -1) {
-                return;
-            }
-            const sizes = symbol.getAttribute('viewBox');
-            const [, , width, height] = sizes.split(' ');
-            lessFile.push(
-                `svg.${nameObj.prefix}-${nameObj.name}${nameObj.postfix} { height: ${height}px; width: ${width}px; }`
-            );
-        });
+        // Need to parse it before pushing
+        this.masterList.push(this.processSymbolToSVG(symbol, filename));
 
-        return lessFile;
+        if (config.skip.indexOf(filename) > -1) {
+            return;
+        }
+        const sizes = symbol.getAttribute('viewBox');
+        const [, , width, height] = sizes.split(' ');
+        lessFile.push(
+            `svg.${nameObj.prefix}-${nameObj.fullName} { height: ${height}px; width: ${width}px; }`
+        );
     }
 
     async run() {
@@ -69,37 +75,23 @@ class GenerateImages {
             masterSvg.removeChild(masterSvg.lastChild);
         }
 
+        const lessFile = [`/* ${genText} */`];
+
         await Promise.all(
             this.svgs.map(async (filePath) => {
-                let filename = path.parse(filePath).name;
-                const writeFilename = filename;
-                if (filename === 'icons') {
-                    return;
-                }
-                let mappedName = config[filename];
-                if (config.icons.file.indexOf(filename) > -1) {
-                    mappedName = config.icons;
-                    filename = 'icons';
-                }
-                if (!mappedName) {
-                    return;
-                }
-
-                this.imageList[filename] = this.imageList[filename] || [];
-
-                const lessFile = await this.processSvg(filePath, mappedName, filename);
-
-                // this.imageList[filename].sort();
-                await fs.promises.writeFile(
-                    `src/less/icon/generated/${writeFilename}.less`,
-                    prettier.format(lessFile.join('\n'), { parser: 'less', tabWidth: 4 })
-                );
+                const filename = path.parse(filePath).name;
+                await this.processSvg(filePath, filename, lessFile);
             })
         );
-        Object.keys(config).forEach((key) => {
-            (this.imageList[key] || []).sort();
-            config[key].list = this.imageList[key] || [];
-        });
+
+        await fs.promises.writeFile(
+            `src/less/icon/generated/icon.less`,
+            prettier.format(lessFile.join('\n'), { parser: 'less', tabWidth: 4 })
+        );
+
+        this.imageList.sort();
+        config.icons.list = this.imageList;
+
         await fs.promises.writeFile(configFilePath, YAML.stringify(config));
 
         this.masterList.sort((a, b) => {
@@ -120,17 +112,17 @@ class GenerateImages {
 }
 
 function stripName(name, mappedPrefix, mappedPostfix) {
-    const matcher = new RegExp(
-        `^((?:${mappedPrefix}-|icon-))([\\w-]+?)((?:${mappedPostfix || ''}|-small))$`
-    );
+    const matcher = new RegExp(`^((?:icon-|program-badge-|star-rating-)?)([\\w-]+?)((?:|-small))$`);
     const nameMatch = name.match(matcher);
     if (nameMatch) {
         const [, prefix, newName, postfix] = nameMatch;
+        const fullName = `${newName}${postfix}`;
         return {
             prefix,
             name: newName,
             postfix,
-            fullName: `${newName}${postfix}`,
+            simpleName: prefix === 'icon-' ? fullName : `${prefix}${fullName}`,
+            fullName,
         };
     }
     return {
@@ -139,7 +131,7 @@ function stripName(name, mappedPrefix, mappedPostfix) {
 }
 
 async function runGenerate() {
-    const files = await getFiles(svgDir);
+    const files = await getFiles(svgIconDir);
     const masterIconFile = await fs.promises.readFile(masterIconPath);
 
     const gen = new GenerateImages(files, masterIconFile);

package/scripts/index.js

@@ -4,9 +4,28 @@ const { runImport } = require('./import-svgs');
 const { verifyBuild } = require('./verify-build');
 const { generateTopLevel, cleanTopLevel } = require('./generate-imports');
 const { copySVGIcons, copyCustomStyles } = require('./storybook/copy');
+const { splitter } = require('./split-icon');
 
 require('yargs') // eslint-disable-line
     .usage('Usage: $0 <command> [options]')
+    .command(
+        'split <file>',
+        'generates less files with styles from svg icons',
+        (yargs) => {
+            yargs.positional('svg', {
+                describe: 'SVG file',
+                demand: true,
+                default: '',
+            });
+        },
+        async (argv) => {
+            try {
+                await splitter(argv.file, argv);
+            } catch (e) {
+                console.log(e);
+            }
+        }
+    )
     .command(
         'genSVG',
         'generates less files with styles from svg icons',
@@ -19,6 +38,7 @@ require('yargs') // eslint-disable-line
             }
         }
     )
+
     .command(
         'importSVG <svg> <name> <file>',
         'imports given svg into an icon pack or updates if it exists',

package/scripts/split-icon.js

@@ -0,0 +1,31 @@
+#!/usr/bin/env node
+/* eslint-disable no-console */
+'use strict';
+const fs = require('fs');
+const path = require('path');
+const currentDir = path.dirname(__dirname);
+const svgDir = path.resolve(currentDir, 'src', 'svg');
+const { optimize } = require('svgo');
+const jsdom = require('jsdom');
+const { JSDOM } = jsdom;
+const svgConfig = require('./svgo.config');
+const { html2xhtml2 } = require('./util');
+
+async function splitter(file, argv) {
+    const skinFile = await fs.promises.readFile(path.resolve(svgDir, `${file}.svg`), 'utf8');
+
+    const symbols = JSDOM.fragment(skinFile);
+
+    for (const symbol of symbols.querySelectorAll('symbol')) {
+        const symbolId = symbol.getAttribute('id');
+        symbol.removeAttribute('id');
+        symbol.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+
+        await fs.promises.writeFile(
+            path.resolve(svgDir, 'icon', `${symbolId}.svg`),
+            html2xhtml2(symbol).replace('<symbol', '<svg').replace('</symbol>', '</svg>')
+        );
+    }
+}
+
+module.exports = { splitter };

package/scripts/util.js

@@ -18,6 +18,13 @@ function html2xhtml(html) {
     return prettier.format(parsedString, { parser: 'html' });
 }
 
+function html2xhtml2(html) {
+    const bodyHtml = html.outerHTML;
+    const dom = parse(bodyHtml);
+    const parsedString = `${serializeToString(dom.childNodes[0].childNodes[1].childNodes[0])}\n`;
+    return prettier.format(parsedString, { parser: 'html' });
+}
+
 function rawSvgToHtml(data) {
     return data
         .replace(/<svg.*>/, '<div hidden>\n<svg>')
@@ -35,6 +42,7 @@ async function removeFile(file) {
 
 module.exports = {
     html2xhtml,
+    html2xhtml2,
     rawSvgToHtml,
     removeFile,
 };

package/src/fonts/marketsans/MarketSans-Regular-WebS.css

@@ -7,7 +7,8 @@
         /* Pretty Modern Browsers */ url("MarketSans-Regular-WebS.ttf") format("truetype"),
         /* Safari, Android, iOS */ url("MarketSans-Regular-WebS.svg#MarketSans-Regular-WebS")
             format("svg"); /* Legacy iOS */
+
     font-weight: normal;
     font-style: normal;
-    font-display: optional;
+    font-display: swap;
 }

package/src/fonts/marketsans/MarketSans-SemiBold-WebS.css

@@ -7,7 +7,8 @@
         /* Pretty Modern Browsers */ url("MarketSans-SemiBold-WebS.ttf") format("truetype"),
         /* Safari, Android, iOS */ url("MarketSans-SemiBold-WebS.svg#MarketSans-SemiBold-WebS")
             format("svg"); /* Legacy iOS */
+
     font-weight: bold;
     font-style: normal;
-    font-display: optional;
+    font-display: swap;
 }

package/src/less/alert-dialog/stories/alert-dialog.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Alert Dialog/Alert Dialog' };
+export default { title: 'Alert Dialog' };
 
 export const base = () => `
 <div aria-labelledby="alert-dialog-title" aria-modal="true" class="alert-dialog alert-dialog--mask-fade" role="alertdialog">

package/src/less/badge/stories/badge.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Badge/Badge' };
+export default { title: 'Badge' };
 
 export const oneDigit = () => `
 <span class="badge">1</span>

package/src/less/breadcrumbs/stories/button-cascade.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Breadcrumbs/Breadcrumbs/Buttons/Cascade' };
+export default { title: 'Breadcrumbs/Buttons/Cascade' };
 
 export const color = () => `
 <nav aria-labelledby="breadcrumbs-heading" class="breadcrumbs" role="navigation" style="color: green">