@ebay/skin 14.1.3 → 14.2.0-0

package/src/less/carousel/stories/carousel.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Carousel/Carousel' };
+export default { title: 'Carousel' };
 
 export const continuous = () => `
 <div class="carousel">

package/src/less/checkbox/stories/checked.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Checkbox/Checkbox/Checked' };
+export default { title: 'Checkbox/Checked' };
 
 export const base = () => `
 <span class="checkbox">

package/src/less/checkbox/stories/mixed.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Checkbox/Checkbox/Mixed' };
+export default { title: 'Checkbox/Mixed' };
 
 export const base = () => `
 <span class="checkbox">

package/src/less/checkbox/stories/unchecked.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Checkbox/Checkbox/Unchecked' };
+export default { title: 'Checkbox/Unchecked' };
 
 export const base = () => `
 <span class="checkbox">

package/src/less/combobox/stories/combobox.stories.js

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

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

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

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

@@ -1,4 +1,4 @@
-export default { title: 'CTA Button/CTA Button/Cascade' };
+export default { title: 'CTA Button/Cascade' };
 
 export const color = () => `
 <a class="cta-btn" href="http://www.ebay.com" style="color: red">

package/src/less/cta-button/stories/cta-button.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'CTA Button/CTA Button' };
+export default { title: 'CTA Button' };
 
 export const base = () => `
 <a class="cta-btn" href="http://www.ebay.com">

package/src/less/details/stories/cascade.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Details/Details/Cascade' };
+export default { title: 'Details/Cascade' };
 
 export const RTL = () => `
 <div dir="rtl">

package/src/less/details/stories/details.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Details/Details' };
+export default { title: 'Details' };
 
 export const closed = () => `
 <details class="details">

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

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

package/src/less/field/stories/stacked.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Field/Field/Stacked' };
+export default { title: 'Field/Stacked' };
 
 export const group = () => `
 <fieldset>

package/src/less/field/stories/unstacked.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Field/Field/Unstacked' };
+export default { title: 'Field/Unstacked' };
 
 export const inlineLevel = () => `
 <span class="field">

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

@@ -18,7 +18,7 @@ a.filter-link {
     &:focus,
     &:hover,
     &:active {
-        background-color: var(--color-state-secondary-hover);
+        .background-color-token(filter-button-background-color, color-state-secondary-hover);
     }
 }
 
@@ -38,19 +38,12 @@ a.filter-link:visited {
 
 button.filter-button[aria-pressed="true"],
 a.filter-link--selected {
-    .background-color-token(filter-button-selected-background-color, color-background-inverse);
-    .color-token(filter-button-selected-foreground-color, color-foreground-on-inverse);
+    .border-color-token(filter-button-selected-border-color, color-foreground-primary);
     font-weight: bold;
-
-    &:focus,
-    &:hover,
-    &:active {
-        background-color: var(--color-state-inverse-hover);
-    }
 }
 
 a.filter-link--selected:visited {
-    .color-token(filter-button-selected-foreground-color, color-foreground-on-inverse);
+    .border-color-token(filter-button-selected-border-color, color-foreground-primary);
 }
 
 button.filter-button[disabled],
@@ -68,7 +61,7 @@ a.filter-link--selected[aria-disabled="true"] {
     &:hover,
     &:focus {
         .background-color-token(filter-button-background-color, color-background-secondary);
-        .color-token(filter-button-disabled-foreground-color, color-background-disabled);
+        .color-token(filter-button-disabled-foreground-color, color-foreground-disabled);
     }
 }
 
@@ -76,7 +69,7 @@ button.filter-button[aria-pressed="true"][disabled]:hover,
 button.filter-button[aria-pressed="true"][aria-disabled="true"]:hover,
 a.filter-link--selected:not([href]):hover,
 a.filter-link--selected[aria-disabled="true"]:hover {
-    .background-color-token(filter-button-selected-background-color, color-background-disabled);
+    .background-color-token(filter-button-selected-background-color, color-state-secondary-hover);
 }
 
 // https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/

package/src/less/filter-button/stories/button.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Filter/Filter/Button' };
+export default { title: 'Filter/Button' };
 
 export const base = () => `
 <button type="button" class="filter-button">

package/src/less/filter-button/stories/group.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Filter/Filter/Button/Group' };
+export default { title: 'Filter/Button/Group' };
 
 export const group = () => `
 <div class="filter-group">

package/src/less/filter-button/stories/link.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Filter/Filter/Button/Link' };
+export default { title: 'Filter/Button/Link' };
 
 export const base = () => `
 <a href="http://www.ebay.com" class="filter-link">

package/src/less/filter-menu/stories/filter-menu.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Filter/Filter/Menu' };
+export default { title: 'Filter/Menu' };
 
 export const base = () => `
 <span class="filter-menu">

package/src/less/filter-menu-button/filter-menu-button.less

@@ -27,7 +27,7 @@ button.filter-menu-button__button {
     &:focus,
     &:hover,
     &:active {
-        background-color: var(--color-state-secondary-hover);
+        .background-color-token(filter-button-background-color, color-state-secondary-hover);
     }
 }
 
@@ -56,19 +56,8 @@ button.filter-menu-button__button {
 }
 
 button.filter-menu-button__button[aria-pressed="true"] {
-    .background-color-token(filter-button-selected-background-color, color-background-inverse);
-    .color-token(filter-button-selected-foreground-color, color-foreground-on-inverse);
+    .border-color-token(filter-button-foreground-color, color-foreground-primary);
     font-weight: bold;
-
-    svg.icon {
-        .color-token(filter-button-selected-foreground-color, color-foreground-on-inverse);
-    }
-
-    &:focus,
-    &:hover,
-    &:active {
-        background-color: var(--color-state-inverse-hover);
-    }
 }
 
 button.filter-menu-button__button[disabled],
@@ -82,7 +71,7 @@ button.filter-menu-button__button[aria-pressed="true"][aria-disabled="true"] {
     &:hover,
     &:focus {
         .background-color-token(filter-button-background-color, color-background-secondary);
-        .color-token(filter-button-disabled-foreground-color, color-foreground-disabled);
+        .color-token(filter-button-disabled-foreground-color, color-background-disabled);
     }
 
     & .filter-menu-button__button-cell > svg.icon {
@@ -93,11 +82,11 @@ button.filter-menu-button__button[aria-pressed="true"][aria-disabled="true"] {
 // todo: we can elimate the need for these overrides by using :not([disabled]) in place where defining hover states
 button.filter-menu-button__button[aria-pressed="true"][disabled]:hover,
 button.filter-menu-button__button[aria-pressed="true"][aria-disabled="true"]:hover {
-    .background-color-token(filter-button-selected-background-color, color-foreground-disabled);
+    .background-color-token(filter-button-selected-background-color, color-background-secondary);
 }
 
 .filter-menu-button__menu {
-    .background-color-token(filter-menu-item-background-color, color-background-primary);
+    .background-color-token(filter-menu-item-background-color, color-background-secondary);
     border: none;
     border-radius: 16px;
     box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);

package/src/less/filter-menu-button/stories/filter-menu-button.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Filter/Filter/Menu Button' };
+export default { title: 'Filter/Menu Button' };
 
 export const collapsed = () => `
 <span class="filter-menu-button">

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

@@ -1,4 +1,4 @@
-export default { title: 'Floating Label/Floating Label' };
+export default { title: 'Floating Label' };
 
 export const base = () => `
 <span class="floating-label">

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

@@ -1,4 +1,4 @@
-export default { title: 'Fullscreen Dialog/Fullscreen Dialog' };
+export default { title: 'Fullscreen Dialog' };
 
 export const closeButton = () => `
 <div aria-labelledby="fullscreen-dialog-title" aria-modal="true" class="fullscreen-dialog" role="dialog">

package/src/less/global/stories/global.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Global/Global' };
+export default { title: 'Global' };
 
 export const headings = () => `
     <h1>This is a level 1 heading</h1>