@ebay/skin 14.1.0-0 → 14.1.2

package/dist/textbox/textbox.css

@@ -4,6 +4,7 @@
   position: relative;
 }
 .textbox button.icon-btn {
+  background-color: transparent;
   display: inline-flex;
   height: 100%;
   justify-content: center;
@@ -46,7 +47,6 @@ textarea.textbox__control {
 }
 input.textbox__control[disabled],
 textarea.textbox__control[disabled] {
-  background-color: var(--textbox-disabled-background-color, var(--color-background-secondary));
   border-color: var(--textbox-disabled-border-color, var(--color-background-disabled));
   color: var(--textbox-disabled-foreground-color, var(--color-foreground-disabled));
 }
@@ -64,20 +64,15 @@ textarea.textbox__control[disabled]:-ms-input-placeholder {
 }
 input.textbox__control[readonly],
 textarea.textbox__control[readonly] {
-  color: var(--textbox-readonly-color, var(--color-foreground-on-secondary));
+  background-color: transparent;
+  border: none;
+  padding-left: 0;
+  padding-right: 0;
 }
 input.textbox__control[aria-invalid="true"],
 textarea.textbox__control[aria-invalid="true"] {
-  background-color: var(--color-red-1);
   border-color: var(--textbox-invalid-foreground-color, var(--color-stroke-attention));
 }
-input.textbox__control:focus,
-textarea.textbox__control:focus {
-  border-color: var(--textbox-focus-border-color, var(--color-stroke-default));
-  background-color: var(--textbox-focus-background-color, var(--color-background-primary));
-  color: var(--textbox-focus-foreground-color, var(--color-foreground-on-secondary));
-  outline: 0;
-}
 input.textbox__control::-webkit-input-placeholder,
 textarea.textbox__control::-webkit-input-placeholder {
   color: var(--textbox-placeholder-color, var(--color-foreground-on-secondary));
@@ -121,6 +116,17 @@ input.textbox__control--large {
 .textbox--icon-end > svg:last-child {
   right: 16px;
 }
+input.textbox__control:not(:read-only):focus,
+textarea.textbox__control:not(:read-only):focus {
+  border-color: var(--textbox-focus-border-color, var(--color-stroke-default));
+  background-color: var(--textbox-focus-background-color, var(--color-background-primary));
+  outline: 0;
+}
+input.textbox__control[readonly]:focus,
+textarea.textbox__control[readonly]:focus {
+  outline: 0;
+  text-decoration: underline;
+}
 .textbox > svg:first-child {
   left: 16px;
 }

package/dist/tokens/evo-dark.css

@@ -2,7 +2,7 @@
     :root {
         --color-background-primary: var(--color-neutral-7);
         --color-background-secondary: var(--color-neutral-6);
-        --color-background-disabled: var(--color-neutral-4);
+        --color-background-disabled: var(--color-neutral-5);
         --color-background-inverse: var(--color-neutral-1);
         --color-background-attention: var(--color-red-3);
         --color-background-confirmation: var(--color-green-4);

package/dist/tokens/evo-light.css

@@ -4,7 +4,7 @@
     --color-background-disabled: var(--color-neutral-3);
     --color-background-inverse: var(--color-neutral-6);
     --color-background-attention: var(--color-red-4);
-    --color-background-confirmation: var(--color-green-4);
+    --color-background-confirmation: var(--color-green-6);
     --color-background-information: var(--color-blue-4);
     --color-background-accent: var(--color-blue-4);
     --color-background-invalid: var(--color-red-1);

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@ebay/skin",
     "description": "Skin - CSS modules that represent the brand eBay",
-    "version": "14.1.0-0",
+    "version": "14.1.2",
     "license": "MIT",
     "main": "./index.js",
     "maintainers": [

package/scripts/generate-bundle.js

@@ -14,16 +14,22 @@ const cleanCSSInstance = new CleanCSS({
 const currentDir = path.dirname(__dirname);
 const { exec } = require('child_process');
 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 dsList = ['ds4', 'ds6'];
+const tokensList = [
+    ['evo-core', 'evo-light'],
+    ['ds4-core', 'ds4-light'],
+];
+const tokensDirList = ['evo', 'ds4'];
 
 /**
  * Main Processing class. Holds info about args passed and ds version
  */
 class CssProcesser {
-    constructor(dsVersion, args) {
-        this.dsVersion = dsVersion;
+    constructor(tokensFile, tokensDir, args) {
+        this.tokensFile = tokensFile;
+        this.tokensDir = tokensDir;
         this.args = args;
         this.processed = [];
         this.skipped = [];
@@ -52,10 +58,11 @@ class CssProcesser {
 
     getDistCss() {
         return new Promise((resolve, reject) => {
-            glob(`${currentDir}/dist/**/${this.dsVersion}/**/*.css`, (err, files) => {
+            glob(`${currentDir}/dist/**/*.css`, (err, files) => {
                 if (err) {
                     return reject(err);
                 }
+                console.log(files);
                 resolve(files);
             });
         });
@@ -80,6 +87,18 @@ class CssProcesser {
         return this.wrap(cssContents);
     }
 
+    rewrapRoot(cssContents) {
+        const root = rootMatch.exec(cssContents);
+        if (root && root[1]) {
+            // Add newroot
+            const newContents = cssContents.replace(rootMatch, '');
+            return `${this.classDef} ${root[1]}
+      ${this.wrap(newContents)}
+     `;
+        }
+        return this.wrap(cssContents);
+    }
+
     /**
      * Generates a raw less file for given css file
      * @param {*} file
@@ -87,8 +106,10 @@ class CssProcesser {
     generateRawLess(file) {
         const fileName = path.basename(file, '.css');
         if (this.args.modules.length > 0 && this.args.modules.indexOf(fileName) === -1) {
-            this.skipped.push(fileName);
-            return '';
+            if (this.tokensFile.indexOf(fileName) === -1) {
+                this.skipped.push(fileName);
+                return '';
+            }
         }
         this.processed.push(fileName);
 
@@ -99,6 +120,9 @@ class CssProcesser {
             if (fileName === 'global') {
                 return this.rewrapBody(cssContents);
             }
+            if (this.tokensFile.indexOf(fileName) > -1) {
+                return this.rewrapRoot(cssContents);
+            }
             return this.wrap(cssContents);
         }
         return `@import (inline) "${file}";`;
@@ -109,23 +133,23 @@ class CssProcesser {
             const compiled = files.map((file) => this.generateRawLess(file)).join('\n');
             const processed = this.processed;
             const skipped = this.skipped;
-            const dsVersion = this.dsVersion;
+            const tokensFile = this.tokensFile;
 
             if (this.args.modules.length > 0 || this.args.verbose) {
-                console.log(`Processed ${processed.length} modules for ${dsVersion}`);
+                console.log(`Processed ${processed.length} modules for ${tokensFile}`);
             }
             if (this.args.verbose) {
-                console.log(`Modules processed: ${processed.join(',')} for ${dsVersion}`);
+                console.log(`Modules processed: ${processed.join(',')} for ${tokensFile}`);
 
-                console.log(`Skipped ${skipped.length} modules for ${dsVersion}`);
-                console.log(`Modules skipped: ${skipped.join(',')} for ${dsVersion}`);
+                console.log(`Skipped ${skipped.length} modules for ${tokensFile}`);
+                console.log(`Modules skipped: ${skipped.join(',')} for ${tokensFile}`);
             }
             resolve(compiled);
         });
     }
 
     generateLESS() {
-        return this.getDistCss(this.dsVersion).then((files) => this.processFiles(files));
+        return this.getDistCss(this.tokensFile).then((files) => this.processFiles(files));
     }
 
     compileLess(raw) {
@@ -133,24 +157,24 @@ class CssProcesser {
     }
 
     writeAllFiles(raw) {
-        const cdnPath = getCDNPath(this.args.name, this.dsVersion);
+        const cdnPath = getCDNPath(this.args.name);
         rimraf.sync(cdnPath);
         return makeDir(cdnPath).then(() =>
             writeFile(
-                `${cdnPath}/skin.${this.minify ? 'min.' : ''}css`,
+                `${cdnPath}/skin-${this.tokensDir}.${this.minify ? 'min.' : ''}css`,
                 `/* autoprefixer: off */\n${raw}\n/* autoprefixer: on */`
             )
         );
     }
 }
 
-function getCDNPath(bundle, dsVersion) {
-    return `${currentDir}/_cdn/${bundle}/v${pkg.version}/${dsVersion}`;
+function getCDNPath(bundle) {
+    return `${currentDir}/_cdn/${bundle}/v${pkg.version}`;
 }
 
 /**
  * Runs the compilation of less
- * @param {*} res The response with dsVersion and raw css/less
+ * @param {*} res The response with tokensFile and raw css/less
  * @param {*} plugin The given plugin to run the render with
  */
 /**
@@ -200,8 +224,8 @@ function runCSSBuild(name, args) {
     prebuild()
         .then(() =>
             Promise.all(
-                dsList.map((ds) => {
-                    const cssProcesser = new CssProcesser(ds, args);
+                tokensList.map((token, index) => {
+                    const cssProcesser = new CssProcesser(token, tokensDirList[index], args);
                     return cssProcesser.run();
                 })
             )
@@ -218,11 +242,11 @@ Please upload the ./_cdn/${args.name}/v${pkg.version} directory to CDN
 
 async function listBundles(argv) {
     await prebuild();
-    dsList.forEach((dsVersion) => {
-        const cssProcesser = new CssProcesser(dsVersion, argv);
+    tokensList.forEach((tokensFile) => {
+        const cssProcesser = new CssProcesser(tokensFile, argv);
         cssProcesser.getDistCss().then((files) => {
             console.log(`======================`);
-            console.log(`${dsVersion} - modules avaiable`);
+            console.log(`${tokensFile} - modules avaiable`);
             console.log(`======================`);
             files.forEach((file) => {
                 console.log(path.basename(file, '.css'));

package/src/less/floating-label/floating-label.less

@@ -14,16 +14,16 @@ div.floating-label {
 }
 
 label.floating-label__label {
-    .background-color-token(floating-label-background-color, color-background-secondary);
     .color-token(floating-label-color, color-foreground-primary);
+
+    background-color: transparent;
     display: inline-block;
     left: 16px;
     overflow: hidden;
-    padding-top: 3px;
     pointer-events: none;
     position: absolute;
     text-overflow: ellipsis;
-    top: -3px;
+    top: 0;
     transform: scale(0.75, 0.75) translate(0, 2px);
     transform-origin: left;
     white-space: nowrap;
@@ -32,7 +32,6 @@ label.floating-label__label {
 }
 
 label.floating-label__label--focus {
-    .background-color-token(floating-label-focus-background-color, color-background-primary);
     color: var(--color-background-inverse);
 }
 
@@ -55,14 +54,11 @@ label.floating-label__label--animate {
 }
 
 label.floating-label__label--disabled {
-    .background-color-token(floating-label-disabled-background-color, color-background-secondary);
     .color-token(floating-label-disabled-color, color-foreground-disabled);
 }
 
 label.floating-label__label--invalid {
     .color-token(floating-label-invalid-color, color-foreground-attention);
-
-    background-color: var(--color-red-1);
 }
 
 .floating-label .textbox__control,

package/src/less/floating-label/stories/floating-label.stories.js

@@ -49,13 +49,31 @@ export const disabledTextbox = () => `
 
 export const invalidTextbox = () => `
 <span class="floating-label">
-    <label class="floating-label__label" for="firstName">First Name</label>
+    <label class="floating-label__label floating-label__label--inline floating-label__label--invalid" for="firstName">First Name</label>
     <span class="textbox">
         <input class="textbox__control" id="firstName03" type="text" aria-invalid="true" />
     </span>
 </span>
 `;
 
+export const invalidTextboxWithValue = () => `
+<span class="floating-label">
+    <label class="floating-label__label floating-label__label--invalid" for="firstName">First Name</label>
+    <span class="textbox">
+        <input class="textbox__control" id="firstName03" type="text" aria-invalid="true" value="value" />
+    </span>
+</span>
+`;
+
+export const invalidTextboxWithPlaceholder = () => `
+<span class="floating-label">
+    <label class="floating-label__label floating-label__label--invalid" for="firstName">First Name</label>
+    <span class="textbox">
+        <input class="textbox__control" id="firstName03" type="text" aria-invalid="true" placeholder="placeholder" />
+    </span>
+</span>
+`;
+
 export const longText = () => `
 <span class="floating-label">
     <label class="floating-label__label" for="firstName">Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch</label>

package/src/less/mixins/private/filter-button-mixins.less

@@ -7,6 +7,7 @@
     display: inline-flex;
     flex: 0 1 auto;
     flex-direction: column;
+    font-family: inherit;
     font-size: @font-size-14;
     height: 32px;
     justify-content: center;

package/src/less/select/select.less

@@ -14,7 +14,7 @@ span.select {
 .select select {
     appearance: none;
     .background-color-token(select-background-color, color-background-secondary);
-    .border-color-token(select-border-color, color-foreground-secondary);
+    .border-color-token(select-border-color, color-stroke-default);
     border-radius: var(--select-border-radius, var(--border-radius-50));
     border-style: solid;
     border-width: 1px;
@@ -54,13 +54,18 @@ span.select {
     width: auto;
 
     &:focus {
+        background-color: transparent;
         text-decoration: underline;
     }
 }
 
 .select select:focus {
     .background-color-token(select-focus-background-color, color-background-primary);
-    .border-color-token(select-focus-border-color, color-foreground-primary);
+}
+
+.select select:focus:not(:read-only) {
+    .background-color-token(select-focus-background-color, color-background-primary);
+    .border-color-token(select-focus-border-color, color-stroke-default);
     outline: 0;
     text-decoration: underline;
 }
@@ -71,8 +76,8 @@ span.select {
 }
 
 .select select[disabled] {
-    .background-color-token(select-disabled-background-color, color-background-disabled);
-    .color-token(select-disabled-foregound-color, color-foreground-on-disabled);
+    .border-color-token(textbox-disabled-border-color, color-background-disabled);
+    .color-token(select-disabled-foregound-color, color-foreground-disabled);
     opacity: 1;
 }
 
@@ -81,20 +86,14 @@ span.select {
 }
 
 .select select[readonly] {
-    .background-color-token(select-disabled-background-color, color-background-disabled);
-    .color-token(select-disabled-foregound-color, color-foreground-on-disabled);
-}
-
-.select select[readonly] + svg {
-    .color-token(select-disabled-foregound-color, color-foreground-on-disabled);
+    background-color: transparent;
+    border: none;
 }
 
 .select select[aria-invalid="true"] {
-    .background-color-token(select-invalid-background-color, color-red-1);
     .border-color-token(select-invalid-border-color, color-stroke-attention);
     border-style: solid;
     border-width: 1px;
-    .color-token(select-invalid-foreground-color, color-foreground-primary);
 
     &:focus {
         .background-color-token(select-focus-background-color, color-background-primary);
@@ -102,10 +101,6 @@ span.select {
     }
 }
 
-.select select[aria-invalid="true"] + svg {
-    .color-token(select-invalid-foreground-color, color-foreground-primary);
-}
-
 // stylelint-disable no-descending-specificity
 [dir="rtl"] {
     .select > select {

package/src/less/select/stories/floating-label.stories.js

@@ -0,0 +1,66 @@
+export default { title: 'Select/Select/Floating Label' };
+
+export const defaultLabel = () => `
+<span class="floating-label">
+    <label class="floating-label__label" for="select-01">Choose Option</label>
+    <span class="select">
+        <select id="select-01">
+            <option value="1">Option 1 with long text</option>
+            <option value="2">Option 2</option>
+            <option value="3">Option 3</option>
+        </select>
+        <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
+            <use xlink:href="#icon-dropdown"></use>
+        </svg>
+    </span>
+</span>
+`;
+
+export const selectedOption = () => `
+<span class="floating-label">
+    <label class="floating-label__label floating-label__label--inline" for="select-01">Here are your options</label>
+    <span class="select">
+        <select id="select-01">
+            <option value=""></option>
+            <option value="1">Option 1 with long text</option>
+            <option value="2">Option 2</option>
+            <option value="3">Option 3</option>
+        </select>
+        <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
+            <use xlink:href="#icon-dropdown"></use>
+        </svg>
+    </span>
+</span>
+`;
+
+export const errorState = () => `
+<span class="floating-label">
+    <label class="floating-label__label floating-label__label--invalid" for="select-03">Choose Option</label>
+    <span class="select">
+        <select id="select-03" aria-invalid="true">
+            <option value="1">Option 1 with long text</option>
+            <option value="2">Option 2</option>
+            <option value="3">Option 3</option>
+        </select>
+        <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
+            <use xlink:href="#icon-dropdown"></use>
+        </svg>
+    </span>
+</span>
+`;
+
+export const disabled = () => `
+<span class="floating-label">
+    <label class="floating-label__label" for="select-03">Choose Option</label>
+    <span class="select">
+        <select disabled>
+            <option value="1">Option 1</option>
+            <option value="2">Option 2 can't pick</option>
+            <option value="3">Option 3</option>
+        </select>
+        <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
+            <use xlink:href="#icon-dropdown"></use>
+        </svg>
+    </span>
+</span>
+`;

package/src/less/textbox/stories/textbox.stories.js

@@ -46,6 +46,18 @@ export const inheritColor = () => `
 </div>
 `;
 
+export const error = () => `
+<span class="textbox">
+    <input class="textbox__control" type="text"  aria-invalid="true" placeholder="placeholder text" />
+</span>
+`;
+
+export const errorWithValue = () => `
+<span class="textbox">
+    <input class="textbox__control" type="text" placeholder="placeholder text" aria-invalid="true" value="value" />
+</span>
+`;
+
 export const fluid = () => `
 <div class="textbox">
     <input class="textbox__control textbox__control--fluid" type="text" placeholder="placeholder text" />

package/src/less/textbox/textbox.less

@@ -7,6 +7,7 @@
     position: relative;
 
     button.icon-btn {
+        background-color: transparent;
         display: inline-flex;
         height: 100%;
         justify-content: center;
@@ -51,7 +52,6 @@ textarea.textbox__control {
     margin: 0; // Remove the margin in Firefox and Safari.
 
     &[disabled] {
-        .background-color-token(textbox-disabled-background-color, color-background-secondary);
         .border-color-token(textbox-disabled-border-color, color-background-disabled);
         .color-token(textbox-disabled-foreground-color, color-foreground-disabled);
 
@@ -69,21 +69,16 @@ textarea.textbox__control {
     }
 
     &[readonly] {
-        .color-token(textbox-readonly-color, color-foreground-on-secondary);
+        background-color: transparent;
+        border: none;
+        padding-left: 0;
+        padding-right: 0;
     }
 
     &[aria-invalid="true"] {
-        background-color: var(--color-red-1);
         .border-color-token(textbox-invalid-foreground-color, color-stroke-attention);
     }
 
-    &:focus {
-        .border-color-token(textbox-focus-border-color, color-stroke-default);
-        .background-color-token(textbox-focus-background-color, color-background-primary);
-        .color-token(textbox-focus-foreground-color, color-foreground-on-secondary);
-        outline: 0;
-    }
-
     &::-webkit-input-placeholder {
         .color-token(textbox-placeholder-color, color-foreground-on-secondary);
         font-weight: 200;
@@ -133,6 +128,19 @@ input.textbox__control--large {
     }
 }
 
+input.textbox__control:not(:read-only):focus,
+textarea.textbox__control:not(:read-only):focus {
+    .border-color-token(textbox-focus-border-color, color-stroke-default);
+    .background-color-token(textbox-focus-background-color, color-background-primary);
+    outline: 0;
+}
+
+input.textbox__control[readonly]:focus,
+textarea.textbox__control[readonly]:focus {
+    outline: 0;
+    text-decoration: underline;
+}
+
 .textbox > svg:first-child {
     left: @spacing-200;
 

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

@@ -5,9 +5,9 @@ export const primaryAction = () => `
     <div class="toast-dialog__window">
         <div class="toast-dialog__header">
             <h2>User Privacy Preferences</h2>
-            <button class="icon-btn toast-dialog__close" type="button" aria-label="Close notification dialog">
-                <svg class="icon icon--close" focusable="false" height="24" width="24">
-                    <use xlink:href="#icon-close"></use>
+            <button class="icon-btn icon-btn--transparent toast-dialog__close" type="button" aria-label="Close notification dialog">
+                <svg class="icon icon--close icon--close-small" focusable="false">
+                    <use href="#icon-close-small"></use>
                 </svg>
             </button>
         </div>
@@ -27,9 +27,9 @@ export const secondaryAction = () => `
     <div class="toast-dialog__window">
         <div class="toast-dialog__header">
             <h2>User Privacy Preferences</h2>
-            <button class="icon-btn toast-dialog__close" type="button" aria-label="Close notification dialog">
-                <svg class="icon icon--close" focusable="false" height="24" width="24">
-                    <use xlink:href="#icon-close"></use>
+            <button class="icon-btn icon-btn--transparent toast-dialog__close" type="button" aria-label="Close notification dialog">
+                <svg class="icon icon--close icon--close-small" focusable="false">
+                    <use href="#icon-close-small"></use>
                 </svg>
             </button>
         </div>
@@ -51,9 +51,9 @@ export const RTL = () => `
         <div class="toast-dialog__window">
             <div class="toast-dialog__header">
                 <h2>User Privacy Preferences</h2>
-                <button style="margin-right: 140px;" class="icon-btn toast-dialog__close" type="button" aria-label="Close notification dialog">
-                    <svg class="icon icon--close" focusable="false" height="24" width="24">
-                        <use xlink:href="#icon-close"></use>
+                <button class="icon-btn icon-btn--transparent toast-dialog__close" type="button" aria-label="Close notification dialog">
+                    <svg class="icon icon--close icon--close-small" focusable="false">
+                        <use href="#icon-close-small"></use>
                     </svg>
                 </button>
             </div>

package/src/tokens/evo-dark.css

@@ -2,7 +2,7 @@
     :root {
         --color-background-primary: var(--color-neutral-7);
         --color-background-secondary: var(--color-neutral-6);
-        --color-background-disabled: var(--color-neutral-4);
+        --color-background-disabled: var(--color-neutral-5);
         --color-background-inverse: var(--color-neutral-1);
         --color-background-attention: var(--color-red-3);
         --color-background-confirmation: var(--color-green-4);

package/src/tokens/evo-light.css

@@ -4,7 +4,7 @@
     --color-background-disabled: var(--color-neutral-3);
     --color-background-inverse: var(--color-neutral-6);
     --color-background-attention: var(--color-red-4);
-    --color-background-confirmation: var(--color-green-4);
+    --color-background-confirmation: var(--color-green-6);
     --color-background-information: var(--color-blue-4);
     --color-background-accent: var(--color-blue-4);
     --color-background-invalid: var(--color-red-1);