@ebay/skin 15.2.2 → 15.3.0-0

package/dist/tokens/evo-dark.css

@@ -44,5 +44,27 @@
         --color-state-accent-active: #71a6ff;
         --color-state-attention-hover: #ff6988;
         --color-state-attention-active: #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);
+        --color-data-viz-legend-inactive: var(--color-neutral-4);
+        --color-data-viz-legend-hover: var(--color-neutral-0);
+        --color-data-viz-line-chart-primary: var(--color-blue-3);
+        --color-data-viz-line-chart-secondary: var(--color-blue-1);
+        --color-data-viz-line-chart-tertiary: var(--color-teal-3);
+        --color-data-viz-line-chart-queternary: var(--color-magenta-4);
+        --color-data-viz-line-chart-quinary: var(--color-magenta-2);
+        --color-data-viz-trend-positive: var(--color-green-4);
+        --color-data-viz-trend-negative: var(--color-red-3);
+        --color-data-viz-chart-primary: var(--color-blue-4);
+        --color-data-viz-chart-secondary: var(--color-blue-2);
+        --color-data-viz-chart-tertiary-background: var(--color-blue-6);
+        --color-data-viz-chart-tertiary-stroke: var(--color-blue-3);
+        --color-data-viz-chart-quaternary-background: var(--color-teal-5);
+        --color-data-viz-chart-quaternary-stroke: var(--color-teal-3);
+        --color-data-viz-chart-quinary-background: var(--color-teal-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;
     }
 }

package/dist/tokens/evo-light.css

@@ -43,4 +43,26 @@
     --color-state-accent-active: #254fd2;
     --color-state-attention-hover: #d70f38;
     --color-state-attention-active: #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);
+    --color-data-viz-legend-inactive: var(--color-neutral-3);
+    --color-data-viz-legend-hover: var(--color-neutral-7);
+    --color-data-viz-line-chart-primary: var(--color-blue-4);
+    --color-data-viz-line-chart-secondary: var(--color-blue-7);
+    --color-data-viz-line-chart-tertiary: var(--color-teal-5);
+    --color-data-viz-line-chart-queternary: var(--color-magenta-6);
+    --color-data-viz-line-chart-quinary: var(--color-magenta-3);
+    --color-data-viz-trend-positive: var(--color-green-6);
+    --color-data-viz-trend-negative: var(--color-red-4);
+    --color-data-viz-chart-primary: var(--color-blue-4);
+    --color-data-viz-chart-secondary: var(--color-blue-7);
+    --color-data-viz-chart-tertiary-background: var(--color-blue-1);
+    --color-data-viz-chart-tertiary-stroke: var(--color-blue-4);
+    --color-data-viz-chart-quaternary-background: var(--color-teal-2);
+    --color-data-viz-chart-quaternary-stroke: var(--color-teal-5);
+    --color-data-viz-chart-quinary-background: var(--color-teal-1);
+    --color-data-viz-chart-quinary-stroke: var(--color-teal-5);
+    --color-data-viz-tooltip-shadow-primary: #00000026;
+    --color-data-viz-tooltip-shadow-secondary: #0000002b;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@ebay/skin",
     "description": "Skin - CSS modules that represent the brand eBay",
-    "version": "15.2.2",
+    "version": "15.3.0-0",
     "license": "MIT",
     "main": "./index.js",
     "maintainers": [
@@ -89,28 +89,26 @@
         "less-plugin-autoprefix": "^2",
         "less-plugin-clean-css": "^1.5.1",
         "lint-staged": "^13.0.2",
-        "makeup-active-descendant": "~0.5.0",
         "makeup-alert-dialog": "~0.2.0",
-        "makeup-combobox": "~0.2.0",
+        "makeup-combobox": "~0.3.0",
         "makeup-confirm-dialog": "~0.2.0",
         "makeup-dialog": "~0.4.1",
         "makeup-dialog-button": "~0.3.0",
         "makeup-drawer-dialog": "0.1.0",
-        "makeup-expander": "~0.10.0",
-        "makeup-floating-label": "~0.3.1",
+        "makeup-expander": "~0.10.1",
+        "makeup-floating-label": "~0.3.2",
         "makeup-fullscreen-dialog": "0.1.0",
         "makeup-input-dialog": "0.1.0",
-        "makeup-key-emitter": "~0.3.0",
+        "makeup-key-emitter": "~0.3.1",
         "makeup-lightbox-dialog": "0.1.0",
-        "makeup-listbox": "~0.2.0",
-        "makeup-listbox-button": "~0.3.0",
-        "makeup-menu": "~0.2.0",
-        "makeup-menu-button": "~0.2.0",
+        "makeup-listbox": "~0.3.1",
+        "makeup-listbox-button": "~0.4.0",
+        "makeup-menu": "~0.3.0",
+        "makeup-menu-button": "~0.3.0",
         "makeup-modal": "~0.4.0",
-        "makeup-navigation-emitter": "~0.5.0",
         "makeup-panel-dialog": "0.1.0",
-        "makeup-prevent-scroll-keys": "~0.2.0",
-        "makeup-roving-tabindex": "~0.5.0",
+        "makeup-prevent-scroll-keys": "~0.2.1",
+        "makeup-roving-tabindex": "~0.6.0",
         "makeup-snackbar-dialog": "0.1.0",
         "makeup-switch": "~0.2.0",
         "makeup-toast-dialog": "0.1.0",

package/src/less/button/button.less

@@ -154,6 +154,11 @@ button.btn .progress-spinner {
     width: 24px;
 }
 
+button.btn--form .progress-spinner {
+    margin-left: auto;
+    margin-right: auto;
+}
+
 button.btn--primary.btn--destructive .progress-spinner {
     --color-spinner-icon-background: #ec7089;
     --color-spinner-icon-foreground: var(--color-foreground-on-accent);
@@ -386,6 +391,11 @@ a.fake-btn--split-end {
     padding-right: 8px;
 }
 
+button.btn.btn--tertiary.btn--split-end,
+a.fake-btn.fake-btn--tertiary.fake-btn--split-end {
+    margin-left: -2px;
+}
+
 button.btn.btn--primary.btn--split-end,
 a.fake-btn.fake-btn--primary.fake-btn--split-end {
     .border-left-color-token(btn-primary-border-split-color, color-background-primary);
@@ -395,11 +405,6 @@ a.fake-btn.fake-btn--primary.fake-btn--split-end {
     }
 }
 
-button.btn--tertiary.btn--split-end,
-a.fake-btn--tertiary.fake-btn--split-end {
-    .border-left-color-token(btn-tertiary-border-split-color, color-stroke-subtle);
-}
-
 button.btn--floating-label {
     padding-bottom: 0;
     padding-top: 0;
@@ -470,6 +475,11 @@ button.btn--floating-label .btn__floating-label--inline {
         margin-right: -1px;
     }
 
+    button.btn.btn--tertiary.btn--split-end,
+    a.fake-btn.fake-btn--tertiary.fake-btn--split-end {
+        margin-right: -2px;
+    }
+
     button.btn.btn--primary.btn--split-end,
     a.fake-btn.fake-btn--primary.fake-btn--split-end {
         .border-left-color-token(btn-primary-border-color, color-stroke-accent);
@@ -482,9 +492,9 @@ button.btn--floating-label .btn__floating-label--inline {
         }
     }
 
-    button.btn--tertiary.btn--split-end,
-    a.fake-btn--tertiary.fake-btn--split-end {
-        .border-left-color-token(btn-tertiary-border-color, color-background-secondary);
-        .border-right-color-token(tertiary-border-split-color, color-stroke-subtle);
+    button.btn svg.icon,
+    a.fake-btn svg.icon {
+        margin-left: 8px;
+        margin-right: 0;
     }
 }

package/src/less/button/stories/button/base.stories.js

@@ -37,6 +37,18 @@ export const busy = () => `
 </button>
 `;
 
+export const formBusy = () => `
+<button class="btn btn--form" aria-label="Busy">
+    <span class="btn__cell">
+        <span class="progress-spinner">
+            <svg class="icon icon--spinner" focusable="false" aria-hidden="true">
+                <use xlink:href="#icon-spinner"></use>
+            </svg>
+        </span>
+    </span>
+</button>
+`;
+
 export const submit = () => '<button type="submit" class="btn">Submit</button>';
 
 export const reset = () => '<button type="reset" class="btn">Reset</button>';

package/src/less/carousel/carousel.less

@@ -118,10 +118,8 @@
         margin: 0;
         padding: 0;
         position: relative;
-        transform: translate3d(0, 0, 0); // Same as above, but for backward compatibility to (ie10).
         transition: transform @ebay-carousel-transition-time @ebay-carousel-transition-function;
         width: 100%;
-        will-change: transform; // Ensures that the list is on a new layer for better scrolling perf.
 
         > li {
             display: inline-block;

package/src/less/combobox/combobox.less

@@ -63,18 +63,19 @@ span.combobox {
     }
 }
 
-.combobox__control {
-    button.icon-btn {
-        padding: 0;
-        position: absolute;
-        right: 0;
-
-        svg {
-            left: 0;
-            margin: 0;
-            right: 0;
-        }
-    }
+.combobox__control button.icon-btn {
+    height: 38px;
+    padding: 0;
+    position: absolute;
+    right: 1px;
+    top: 1px;
+    width: 38px;
+}
+
+.combobox__control button.icon-btn svg {
+    left: 0;
+    margin: 0;
+    right: 0;
 }
 
 .combobox--expanded .combobox__listbox {
@@ -214,4 +215,9 @@ span.combobox {
     .combobox__control > button {
         left: 0;
     }
+
+    .combobox__control button.icon-btn {
+        left: 1px;
+        right: inherit;
+    }
 }

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

@@ -97,3 +97,12 @@ label.floating-label__label--invalid {
 .floating-label .select--large select {
     line-height: 60px;
 }
+
+// RTL
+[dir="rtl"] {
+    label.floating-label__label {
+        left: initial;
+        right: 16px;
+        transform-origin: right;
+    }
+}

package/src/less/global/global.less

@@ -26,11 +26,6 @@ a {
     }
 
     &:hover {
-        .color-token(link-foreground-color-hover, color-foreground-secondary);
-    }
-
-    &:not([href]),
-    &[aria-disabled="true"] {
-        .color-token(link-forground-color-disabled, color-foreground-disabled);
+        .color-token(link-foreground-color-visited, color-foreground-visited);
     }
 }

package/src/less/link/link.less

@@ -7,21 +7,14 @@ a.standalone-link {
     text-decoration: none;
 
     &:visited {
-        .color-token(link-foreground-color-default, color-foreground-primary);
+        .color-token(nav-link-foreground-color, color-foreground-primary);
     }
 
     &:hover {
-        .color-token(nav-link-foreground-hover-color, color-foreground-secondary);
+        .color-token(nav-link-foreground-color-hover, color-foreground-primary);
 
         text-decoration: underline;
     }
-
-    &:not([href]),
-    &[aria-disabled="true"] {
-        .color-token(link-forground-color-disabled, color-foreground-disabled);
-
-        text-decoration: none;
-    }
 }
 
 button.fake-link {
@@ -33,12 +26,7 @@ button.fake-link {
     padding: 0;
     text-decoration: underline;
 
-    &:hover {
-        .color-token(fake-link-foreground-color-hover, color-foreground-secondary);
-    }
-
-    &[disabled],
-    &[aria-disabled="true"] {
+    &[disabled] {
         .color-token(fake-link-foreground-disabled-color, color-foreground-disabled);
     }
 }

package/src/less/star-rating/stories/star-rating.stories.js

@@ -0,0 +1,73 @@
+export default { title: 'Star Rating' };
+
+export const empty = () => `
+<div role="img" aria-label="Rating: 0/5" class="star-rating" data-stars="0">
+    <svg class="star-rating__icon" focusable="false" height="16" width="16" aria-hidden="true">
+        <use href="#icon-star-dynamic"></use>
+    </svg>
+
+    <svg class="star-rating__icon" focusable="false" height="16" width="16" aria-hidden="true">
+        <use href="#icon-star-dynamic"></use>
+    </svg>
+
+    <svg class="star-rating__icon" focusable="false" height="16" width="16" aria-hidden="true">
+        <use href="#icon-star-dynamic"></use>
+    </svg>
+
+    <svg class="star-rating__icon" focusable="false" height="16" width="16" aria-hidden="true">
+        <use href="#icon-star-dynamic"></use>
+    </svg>
+
+    <svg class="star-rating__icon" focusable="false" height="16" width="16" aria-hidden="true">
+        <use href="#icon-star-dynamic"></use>
+    </svg>
+</div>
+`;
+
+export const twoAndAHalfStars = () => `
+<div role="img" aria-label="Rating: 2.5/5" class="star-rating" data-stars="2-5">
+    <svg class="star-rating__icon" focusable="false" height="16" width="16" aria-hidden="true">
+        <use href="#icon-star-dynamic"></use>
+    </svg>
+
+    <svg class="star-rating__icon" focusable="false" height="16" width="16" aria-hidden="true">
+        <use href="#icon-star-dynamic"></use>
+    </svg>
+
+    <svg class="star-rating__icon" focusable="false" height="16" width="16" aria-hidden="true">
+        <use href="#icon-star-dynamic"></use>
+    </svg>
+
+    <svg class="star-rating__icon" focusable="false" height="16" width="16" aria-hidden="true">
+        <use href="#icon-star-dynamic"></use>
+    </svg>
+
+    <svg class="star-rating__icon" focusable="false" height="16" width="16" aria-hidden="true">
+        <use href="#icon-star-dynamic"></use>
+    </svg>
+</div>
+`;
+
+export const fourStars = () => `
+<div role="img" aria-label="Rating: 4/5" class="star-rating" data-stars="4">
+    <svg class="star-rating__icon" focusable="false" height="16" width="16" aria-hidden="true">
+        <use href="#icon-star-dynamic"></use>
+    </svg>
+
+    <svg class="star-rating__icon" focusable="false" height="16" width="16" aria-hidden="true">
+        <use href="#icon-star-dynamic"></use>
+    </svg>
+
+    <svg class="star-rating__icon" focusable="false" height="16" width="16" aria-hidden="true">
+        <use href="#icon-star-dynamic"></use>
+    </svg>
+
+    <svg class="star-rating__icon" focusable="false" height="16" width="16" aria-hidden="true">
+        <use href="#icon-star-dynamic"></use>
+    </svg>
+
+    <svg class="star-rating__icon" focusable="false" height="16" width="16" aria-hidden="true">
+        <use href="#icon-star-dynamic"></use>
+    </svg>
+</div>
+`;

package/src/less/star-rating-select/stories/star-rating-select.stories.js

@@ -1,12 +1,12 @@
 export default { title: 'Star Rating Select' };
 
-export const base = () => `
+export const empty = () => `
 <div role="radiogroup" aria-label="Rate this product" class="star-rating-select">
     <span class="star-rating-select__radio">
         <input class="star-rating-select__control" aria-label="1 Star" type="radio" name="radio-star-rating-select" value="1">
         <span class="star-rating-select__radio-icon">
-            <svg focusable="false" height="12" width="12" aria-hidden="true">
-                <use xlink:href="#icon-star-dynamic"></use>
+            <svg focusable="false" height="16" width="16" aria-hidden="true">
+                <use href="#icon-star-dynamic"></use>
             </svg>
         </span>
     </span>
@@ -14,8 +14,8 @@ export const base = () => `
     <span class="star-rating-select__radio">
         <input class="star-rating-select__control" aria-label="2 Stars" type="radio" name="radio-star-rating-select" value="2">
         <span class="star-rating-select__radio-icon">
-            <svg focusable="false" height="12" width="12" aria-hidden="true">
-                <use xlink:href="#icon-star-dynamic"></use>
+            <svg focusable="false" height="16" width="16" aria-hidden="true">
+                <use href="#icon-star-dynamic"></use>
             </svg>
         </span>
     </span>
@@ -23,8 +23,8 @@ export const base = () => `
     <span class="star-rating-select__radio">
         <input class="star-rating-select__control" aria-label="3 Stars" type="radio" name="radio-star-rating-select" value="3">
         <span class="star-rating-select__radio-icon">
-            <svg focusable="false" height="12" width="12" aria-hidden="true">
-                <use xlink:href="#icon-star-dynamic"></use>
+            <svg focusable="false" height="16" width="16" aria-hidden="true">
+                <use href="#icon-star-dynamic"></use>
             </svg>
         </span>
     </span>
@@ -32,8 +32,8 @@ export const base = () => `
     <span class="star-rating-select__radio">
         <input class="star-rating-select__control" aria-label="4 Stars" type="radio" name="radio-star-rating-select" value="4">
         <span class="star-rating-select__radio-icon">
-            <svg focusable="false" height="12" width="12" aria-hidden="true">
-                <use xlink:href="#icon-star-dynamic"></use>
+            <svg focusable="false" height="16" width="16" aria-hidden="true">
+                <use href="#icon-star-dynamic"></use>
             </svg>
         </span>
     </span>
@@ -41,8 +41,57 @@ export const base = () => `
     <span class="star-rating-select__radio">
         <input class="star-rating-select__control" aria-label="5 Stars" type="radio" name="radio-star-rating-select" value="5">
         <span class="star-rating-select__radio-icon">
-            <svg focusable="false" height="12" width="12" aria-hidden="true">
-                <use xlink:href="#icon-star-dynamic"></use>
+            <svg focusable="false" height="16" width="16" aria-hidden="true">
+                <use href="#icon-star-dynamic"></use>
+            </svg>
+        </span>
+    </span>
+</div>
+`;
+
+export const fourStars = () => `
+<div role="radiogroup" aria-label="Rate this product" class="star-rating-select">
+    <span class="star-rating-select__radio">
+        <input class="star-rating-select__control star-rating-select__control--filled" aria-label="1 Star" type="radio" name="radio-star-rating-select" value="1">
+        <span class="star-rating-select__radio-icon">
+            <svg focusable="false" height="16" width="16" aria-hidden="true">
+                <use href="#icon-star-dynamic"></use>
+            </svg>
+        </span>
+    </span>
+
+    <span class="star-rating-select__radio">
+        <input class="star-rating-select__control star-rating-select__control--filled" aria-label="2 Stars" type="radio" name="radio-star-rating-select" value="2">
+        <span class="star-rating-select__radio-icon">
+            <svg focusable="false" height="16" width="16" aria-hidden="true">
+                <use href="#icon-star-dynamic"></use>
+            </svg>
+        </span>
+    </span>
+
+    <span class="star-rating-select__radio">
+        <input class="star-rating-select__control star-rating-select__control--filled" aria-label="3 Stars" type="radio" name="radio-star-rating-select" value="3">
+        <span class="star-rating-select__radio-icon">
+            <svg focusable="false" height="16" width="16" aria-hidden="true">
+                <use href="#icon-star-dynamic"></use>
+            </svg>
+        </span>
+    </span>
+
+    <span class="star-rating-select__radio">
+        <input class="star-rating-select__control star-rating-select__control--filled" aria-label="4 Stars" type="radio" name="radio-star-rating-select" value="4">
+        <span class="star-rating-select__radio-icon">
+            <svg focusable="false" height="16" width="16" aria-hidden="true">
+                <use href="#icon-star-dynamic"></use>
+            </svg>
+        </span>
+    </span>
+
+    <span class="star-rating-select__radio">
+        <input class="star-rating-select__control" aria-label="5 Stars" type="radio" name="radio-star-rating-select" value="5">
+        <span class="star-rating-select__radio-icon">
+            <svg focusable="false" height="16" width="16" aria-hidden="true">
+                <use href="#icon-star-dynamic"></use>
             </svg>
         </span>
     </span>

package/src/tokens/evo-dark.css

@@ -44,5 +44,27 @@
         --color-state-accent-active: #71a6ff;
         --color-state-attention-hover: #ff6988;
         --color-state-attention-active: #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);
+        --color-data-viz-legend-inactive: var(--color-neutral-4);
+        --color-data-viz-legend-hover: var(--color-neutral-0);
+        --color-data-viz-line-chart-primary: var(--color-blue-3);
+        --color-data-viz-line-chart-secondary: var(--color-blue-1);
+        --color-data-viz-line-chart-tertiary: var(--color-teal-3);
+        --color-data-viz-line-chart-queternary: var(--color-magenta-4);
+        --color-data-viz-line-chart-quinary: var(--color-magenta-2);
+        --color-data-viz-trend-positive: var(--color-green-4);
+        --color-data-viz-trend-negative: var(--color-red-3);
+        --color-data-viz-chart-primary: var(--color-blue-4);
+        --color-data-viz-chart-secondary: var(--color-blue-2);
+        --color-data-viz-chart-tertiary-background: var(--color-blue-6);
+        --color-data-viz-chart-tertiary-stroke: var(--color-blue-3);
+        --color-data-viz-chart-quaternary-background: var(--color-teal-5);
+        --color-data-viz-chart-quaternary-stroke: var(--color-teal-3);
+        --color-data-viz-chart-quinary-background: var(--color-teal-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;
     }
 }

package/src/tokens/evo-light.css

@@ -43,4 +43,26 @@
     --color-state-accent-active: #254fd2;
     --color-state-attention-hover: #d70f38;
     --color-state-attention-active: #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);
+    --color-data-viz-legend-inactive: var(--color-neutral-3);
+    --color-data-viz-legend-hover: var(--color-neutral-7);
+    --color-data-viz-line-chart-primary: var(--color-blue-4);
+    --color-data-viz-line-chart-secondary: var(--color-blue-7);
+    --color-data-viz-line-chart-tertiary: var(--color-teal-5);
+    --color-data-viz-line-chart-queternary: var(--color-magenta-6);
+    --color-data-viz-line-chart-quinary: var(--color-magenta-3);
+    --color-data-viz-trend-positive: var(--color-green-6);
+    --color-data-viz-trend-negative: var(--color-red-4);
+    --color-data-viz-chart-primary: var(--color-blue-4);
+    --color-data-viz-chart-secondary: var(--color-blue-7);
+    --color-data-viz-chart-tertiary-background: var(--color-blue-1);
+    --color-data-viz-chart-tertiary-stroke: var(--color-blue-4);
+    --color-data-viz-chart-quaternary-background: var(--color-teal-2);
+    --color-data-viz-chart-quaternary-stroke: var(--color-teal-5);
+    --color-data-viz-chart-quinary-background: var(--color-teal-1);
+    --color-data-viz-chart-quinary-stroke: var(--color-teal-5);
+    --color-data-viz-tooltip-shadow-primary: #00000026;
+    --color-data-viz-tooltip-shadow-secondary: #0000002b;
 }