@ebay/skin 17.5.0-next.0 → 18.0.0-next.0

package/src/{less/breadcrumbs/breadcrumbs.less → sass/breadcrumbs/breadcrumbs.scss}

@@ -1,15 +1,19 @@
-@import "../variables/variables.less";
-@import "../mixins/private/token-mixins.less";
+@import "../variables/variables";
+@import "../mixins/private/token-mixins";
 
 nav.breadcrumbs {
-    .color-token(breadcrumbs-item-foreground-color, color-foreground-secondary);
+    @include color-token(
+        breadcrumbs-item-foreground-color,
+        color-foreground-secondary
+    );
+
     font-size: var(--font-size-small);
     height: fit-content;
     margin: 8px 0;
     min-height: 16px;
-    overflow-x: scroll; // Deprecated in 15.2.0; kept it in to support deprecated implementations; @TODO remove in 16.0.0
+    overflow-x: scroll; /* Deprecated in 15.2.0; kept it in to support deprecated implementations; @TODO remove in 16.0.0 */
     padding: 8px;
-    scrollbar-width: none; // Deprecated in 15.2.0; kept it in to support deprecated implementations; @TODO remove in 16.0.0
+    scrollbar-width: none; /* Deprecated in 15.2.0; kept it in to support deprecated implementations; @TODO remove in 16.0.0 */
     white-space: nowrap;
 }
 
@@ -21,8 +25,8 @@ nav.breadcrumbs > ul {
     right: 0;
 }
 
-// On certain pages spacing in each container can vary in size even if content is the same.
-// Force content to flex makes it all have the same size
+/* On certain pages spacing in each container can vary in size even if content is the same. */
+/* Force content to flex makes it all have the same size */
 nav.breadcrumbs > ul > li {
     align-items: center;
     display: inline-flex;
@@ -70,7 +74,11 @@ nav.breadcrumbs > ul > li > button {
     }
 
     &[aria-current] {
-        .color-token(breadcrumbs-item-current-foreground-color, color-foreground-primary);
+        @include color-token(
+            breadcrumbs-item-current-foreground-color,
+            color-foreground-primary
+        );
+
         text-decoration: none;
     }
 }
@@ -80,12 +88,12 @@ nav.breadcrumbs > ul > li > button:focus:not(:focus-visible) {
     outline: none;
 }
 
-// Deprecated in 15.2.0; kept it in to support deprecated implementations; @TODO remove in 16.0.0
+/* Deprecated in 15.2.0; kept it in to support deprecated implementations; @TODO remove in 16.0.0 */
 nav.breadcrumbs::-webkit-scrollbar {
     display: none;
 }
 
-// Introduced modifier in 15.2.0; supports new implementations; @TODO remove in 16.0.0 and remove modifier class from markup
+/* Introduced modifier in 15.2.0; supports new implementations; @TODO remove in 16.0.0 and remove modifier class from markup */
 nav.breadcrumbs.breadcrumb--overflow {
     overflow-x: unset;
     scrollbar-width: unset;
@@ -106,7 +114,10 @@ nav.breadcrumbs .menu-button__button {
 
 nav.breadcrumbs .fake-menu-button__button svg.icon,
 nav.breadcrumbs .menu-button__button svg.icon {
-    .fill-token(breadcrumbs-overflow-foreground-color, color-foreground-secondary);
+    @include fill-token(
+        breadcrumbs-overflow-foreground-color,
+        color-foreground-secondary
+    );
 }
 
 nav.breadcrumbs .fake-menu-button__menu,
@@ -118,7 +129,7 @@ nav.breadcrumbs .menu-button__menu {
     transform: rotate(180deg);
 }
 
-@media (min-width: @_screen-size-SM) {
+@media (min-width: $_screen-size-SM) {
     nav.breadcrumbs {
         margin: 16px 0;
     }

package/src/{less → sass}/breadcrumbs/stories/button-cascade.stories.js

@@ -6,19 +6,19 @@ export const color = () => `
     <ul>
         <li>
             <button>ebay</button>
-            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <button>Cell Phones, Smart Watches &amp; Accessories</button>
-            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <button>Smart Watch Accessories</button>
-            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
@@ -35,19 +35,19 @@ export const fontSize = () => `
     <ul>
         <li>
             <button>ebay</button>
-            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <button>Cell Phones, Smart Watches &amp; Accessories</button>
-            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <button>Smart Watch Accessories</button>
-            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
@@ -64,19 +64,19 @@ export const textSpacing = () => `
     <ul>
         <li>
             <button>ebay</button>
-            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <button>Cell Phones, Smart Watches &amp; Accessories</button>
-            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <button>Smart Watch Accessories</button>
-            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
@@ -94,19 +94,19 @@ export const RTL = () => `
         <ul>
             <li>
                 <button>ebay</button>
-                <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+                <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                     <use href="#icon-chevron-right-12"></use>
                 </svg>
             </li>
             <li>
                 <button>Cell Phones, Smart Watches &amp; Accessories</button>
-                <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+                <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                     <use href="#icon-chevron-right-12"></use>
                 </svg>
             </li>
             <li>
                 <button>Smart Watch Accessories</button>
-                <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+                <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                     <use href="#icon-chevron-right-12"></use>
                 </svg>
             </li>

package/src/{less → sass}/breadcrumbs/stories/button-overflow.stories.js

@@ -6,14 +6,14 @@ export const minimum = () => `
     <ul>
         <li>
             <button>ebay</button>
-            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <span class="fake-menu-button">
                 <button class="fake-menu-button__button icon-btn" aria-expanded="false" aria-haspopup="true" aria-label="eBay Menu"  type="button">
-                    <svg aria-hidden="true" class="icon icon--overflow-horizontal-16">
+                    <svg aria-hidden="true" class="icon icon--16">
                         <use href="#icon-overflow-horizontal-16"></use>
                     </svg>
                 </button>
@@ -31,7 +31,7 @@ export const minimum = () => `
                 </ul>
             </span>
 
-            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
@@ -48,14 +48,14 @@ export const collapsed = () => `
     <ul>
         <li>
             <button>ebay</button>
-            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <span class="fake-menu-button">
                 <button class="fake-menu-button__button icon-btn" aria-expanded="false" aria-haspopup="true" aria-label="eBay Menu"  type="button">
-                    <svg aria-hidden="true" class="icon icon--overflow-horizontal-16">
+                    <svg aria-hidden="true" class="icon icon--16">
                         <use href="#icon-overflow-horizontal-16"></use>
                     </svg>
                 </button>
@@ -73,13 +73,13 @@ export const collapsed = () => `
                 </ul>
             </span>
 
-            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <button>Smart Watch Band Long Band Text Type 2</button>
-            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
@@ -96,14 +96,14 @@ export const expanded = () => `
     <ul>
         <li>
             <button>ebay</button>
-            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <span class="fake-menu-button">
                 <button class="fake-menu-button__button icon-btn" aria-expanded="true" aria-haspopup="true" aria-label="eBay Menu"  type="button">
-                    <svg aria-hidden="true" class="icon icon--overflow-horizontal-16">
+                    <svg aria-hidden="true" class="icon icon--16">
                         <use href="#icon-overflow-horizontal-16"></use>
                     </svg>
                 </button>
@@ -120,13 +120,13 @@ export const expanded = () => `
                 </ul>
             </span>
 
-            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <button>Smart Watch Band Long Band Text Type 2</button>
-            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
@@ -143,14 +143,14 @@ export const textSpacing = () => `
     <ul>
         <li>
             <button>ebay</button>
-            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <span class="fake-menu-button">
                 <button class="fake-menu-button__button icon-btn" aria-expanded="false" aria-haspopup="true" aria-label="eBay Menu"  type="button">
-                    <svg aria-hidden="true" class="icon icon--overflow-horizontal-16">
+                    <svg aria-hidden="true" class="icon icon--16">
                         <use href="#icon-overflow-horizontal-16"></use>
                     </svg>
                 </button>
@@ -168,13 +168,13 @@ export const textSpacing = () => `
                 </ul>
             </span>
 
-            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <button>Smart Watch Band Long Band Text Type 2</button>
-            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>

package/src/{less → sass}/breadcrumbs/stories/buttons.stories.js

@@ -6,19 +6,19 @@ export const currentLocation = () => `
     <ul>
         <li>
             <button>ebay</button>
-            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <button>Cell Phones, Smart Watches &amp; Accessories</button>
-            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <button>Smart Watch Accessories</button>
-            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
@@ -35,13 +35,13 @@ export const noCurrentLocation = () => `
     <ul>
         <li>
             <button>ebay</button>
-            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <button>Cell Phones, Smart Watches &amp; Accessories</button>
-            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>

package/src/{less → sass}/breadcrumbs/stories/link-cascade.stories.js

@@ -6,19 +6,19 @@ export const color = () => `
     <ul>
         <li>
             <a href="https://www.ebay.com/">ebay</a>
-            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <a href="https://www.ebay.com/rpp/cell-phone-pda">Cell Phones, Smart Watches &amp; Accessories</a>
-            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <a href="https://www.ebay.com/b/Smart-Watch-Accessories/182064/bn_16565905">Smart Watch Accessories</a>
-            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
@@ -35,19 +35,19 @@ export const fontSize = () => `
     <ul>
         <li>
             <a href="https://www.ebay.com/">ebay</a>
-            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <a href="https://www.ebay.com/rpp/cell-phone-pda">Cell Phones, Smart Watches &amp; Accessories</a>
-            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <a href="https://www.ebay.com/b/Smart-Watch-Accessories/182064/bn_16565905">Smart Watch Accessories</a>
-            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
@@ -64,19 +64,19 @@ export const textSpacing = () => `
     <ul>
         <li>
             <a href="https://www.ebay.com/">ebay</a>
-            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <a href="https://www.ebay.com/rpp/cell-phone-pda">Cell Phones, Smart Watches &amp; Accessories</a>
-            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <a href="https://www.ebay.com/b/Smart-Watch-Accessories/182064/bn_16565905">Smart Watch Accessories</a>
-            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
@@ -94,19 +94,19 @@ export const RTL = () => `
         <ul>
             <li>
                 <a href="https://www.ebay.com/">ebay</a>
-                <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+                <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                     <use href="#icon-chevron-right-12"></use>
                 </svg>
             </li>
             <li>
                 <a href="https://www.ebay.com/rpp/cell-phone-pda">Cell Phones, Smart Watches &amp; Accessories</a>
-                <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+                <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                     <use href="#icon-chevron-right-12"></use>
                 </svg>
             </li>
             <li>
                 <a href="https://www.ebay.com/b/Smart-Watch-Accessories/182064/bn_16565905">Smart Watch Accessories</a>
-                <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+                <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                     <use href="#icon-chevron-right-12"></use>
                 </svg>
             </li>

package/src/{less → sass}/breadcrumbs/stories/link-overflow.stories.js

@@ -6,14 +6,14 @@ export const minimum = () => `
     <ul>
         <li>
             <a href="https://www.ebay.com/">ebay</a>
-            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <span class="fake-menu-button">
                 <button class="fake-menu-button__button icon-btn" aria-expanded="false" aria-haspopup="true" aria-label="eBay Menu"  type="button">
-                    <svg aria-hidden="true" class="icon icon--overflow-horizontal-16">
+                    <svg aria-hidden="true" class="icon icon--16">
                         <use href="#icon-overflow-horizontal-16"></use>
                     </svg>
                 </button>
@@ -34,7 +34,7 @@ export const minimum = () => `
                 </ul>
             </span>
 
-            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
@@ -51,14 +51,14 @@ export const collapsed = () => `
     <ul>
         <li>
             <a href="https://www.ebay.com/">ebay</a>
-            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <span class="fake-menu-button">
                 <button class="fake-menu-button__button icon-btn" aria-expanded="false" aria-haspopup="true" aria-label="eBay Menu"  type="button">
-                    <svg aria-hidden="true" class="icon icon--overflow-horizontal-16">
+                    <svg aria-hidden="true" class="icon icon--16">
                         <use href="#icon-overflow-horizontal-16"></use>
                     </svg>
                 </button>
@@ -79,13 +79,13 @@ export const collapsed = () => `
                 </ul>
             </span>
 
-            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <a href="https://www.ebay.com/b/Smart-Watch-Bands/182068/bn_16565906/Some-Random-Watch-Pand2">Smart Watch Band Long Band Text Type 2</a>
-            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
@@ -102,14 +102,14 @@ export const expanded = () => `
     <ul>
         <li>
             <a href="https://www.ebay.com/">ebay</a>
-            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <span class="fake-menu-button">
                 <button class="fake-menu-button__button icon-btn" aria-expanded="true" aria-haspopup="true" aria-label="eBay Menu"  type="button">
-                    <svg aria-hidden="true" class="icon icon--overflow-horizontal-16">
+                    <svg aria-hidden="true" class="icon icon--16">
                         <use href="#icon-overflow-horizontal-16"></use>
                     </svg>
                 </button>
@@ -127,13 +127,13 @@ export const expanded = () => `
                 </ul>
             </span>
 
-            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <a href="https://www.ebay.com/b/Smart-Watch-Bands/182068/bn_16565906/Some-Random-Watch-Pand1">Smart Watch Band Long Band Text Type 2</a>
-            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
@@ -150,14 +150,14 @@ export const textSpacing = () => `
     <ul>
         <li>
             <a href="https://www.ebay.com/">ebay</a>
-            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <span class="fake-menu-button">
                 <button class="fake-menu-button__button icon-btn" aria-expanded="false" aria-haspopup="true" aria-label="eBay Menu"  type="button">
-                    <svg aria-hidden="true" class="icon icon--overflow-horizontal-16">
+                    <svg aria-hidden="true" class="icon icon--16">
                         <use href="#icon-overflow-horizontal-16"></use>
                     </svg>
                 </button>
@@ -178,13 +178,13 @@ export const textSpacing = () => `
                 </ul>
             </span>
 
-            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <a href="https://www.ebay.com/b/Smart-Watch-Bands/182068/bn_16565906/Some-Random-Watch-Pand2">Smart Watch Band Long Band Text Type 2</a>
-            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>

package/src/{less → sass}/breadcrumbs/stories/links.stories.js

@@ -6,19 +6,19 @@ export const currentLocation = () => `
     <ul>
         <li>
             <a href="https://www.ebay.com/">ebay</a>
-            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <a href="https://www.ebay.com/rpp/cell-phone-pda">Cell Phones, Smart Watches &amp; Accessories</a>
-            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <a href="https://www.ebay.com/b/Smart-Watch-Accessories/182064/bn_16565905">Smart Watch Accessories</a>
-            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
@@ -35,13 +35,13 @@ export const noCurrentLocation = () => `
     <ul>
         <li>
             <a href="https://www.ebay.com/">ebay</a>
-            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <a href="https://www.ebay.com/rpp/cell-phone-pda">Cell Phones, Smart Watches &amp; Accessories</a>
-            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>

package/src/sass/bundles/skin-default.scss

@@ -0,0 +1,9 @@
+/*!
+Skin
+Copyright 2017 eBay! Inc. All rights reserved.
+Licensed under the BSD License.
+https://github.com/eBay/skin/blob/master/LICENSE.txt
+"*/
+@import "../../tokens/evo-core";
+@import "../../tokens/evo-light";
+@import "skin-headless";

package/src/sass/bundles/skin-full.scss

@@ -0,0 +1,10 @@
+/*!
+Skin
+Copyright 2017 eBay! Inc. All rights reserved.
+Licensed under the BSD License.
+https://github.com/eBay/skin/blob/master/LICENSE.txt
+*/
+@import "../../tokens/evo-core";
+@import "../../tokens/evo-light";
+@import "../../tokens/evo-dark";
+@import "skin-headless";