@ebay/skin 17.5.0 → 18.0.0-next.0

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

@@ -1,9 +1,9 @@
-@import "../variables/variables.less";
-@import "../mixins/private/icon-mixins.less";
-@import "../mixins/private/token-mixins.less";
+@import "../variables/variables";
+@import "../mixins/private/icon-mixins";
+@import "../mixins/private/token-mixins";
 
-@dimensions-checkbox: 18px;
-@dimensions-checkbox-large: 24px;
+$dimensions-checkbox: 18px;
+$dimensions-checkbox-large: 24px;
 
 .checkbox {
     display: inline-flex;
@@ -12,38 +12,38 @@
 }
 
 .checkbox__control[type="checkbox"] {
-    height: @dimensions-checkbox;
-    min-width: @dimensions-checkbox;
-    width: @dimensions-checkbox;
+    height: $dimensions-checkbox;
+    min-width: $dimensions-checkbox;
+    width: $dimensions-checkbox;
 }
 
 .checkbox--large .checkbox__control[type="checkbox"] {
-    height: @dimensions-checkbox-large;
-    min-width: @dimensions-checkbox-large;
-    width: @dimensions-checkbox-large;
+    height: $dimensions-checkbox-large;
+    min-width: $dimensions-checkbox-large;
+    width: $dimensions-checkbox-large;
 }
 
 span.checkbox__icon {
     display: inline-flex;
-    height: @dimensions-checkbox;
+    height: $dimensions-checkbox;
     outline-offset: 1px;
 }
 
 .checkbox--large span.checkbox__icon {
-    height: @dimensions-checkbox-large;
+    height: $dimensions-checkbox-large;
 }
 
-// progressive enhancement - override hidden SVG
+/* progressive enhancement - override hidden SVG */
 span.checkbox__icon[hidden] {
     display: inline-flex;
 }
 
 svg.checkbox__checked {
-    .color-token(checkbox-checked-color, color-foreground-primary);
+    @include color-token(checkbox-checked-color, color-foreground-primary);
 }
 
 svg.checkbox__unchecked {
-    .color-token(checkbox-unchecked-color, color-foreground-primary);
+    @include color-token(checkbox-unchecked-color, color-foreground-primary);
 }
 
 input.checkbox__control[type="checkbox"] {
@@ -56,15 +56,15 @@ input.checkbox__control[type="checkbox"] {
 }
 
 .checkbox svg {
-    .icon-base-mixin();
+    @include icon-base-mixin();
 
-    height: @dimensions-checkbox;
-    width: @dimensions-checkbox;
+    height: $dimensions-checkbox;
+    width: $dimensions-checkbox;
 }
 
 .checkbox--large svg {
-    height: @dimensions-checkbox-large;
-    width: @dimensions-checkbox-large;
+    height: $dimensions-checkbox-large;
+    width: $dimensions-checkbox-large;
 }
 
 input.checkbox__control[type="checkbox"]
@@ -95,14 +95,15 @@ input.checkbox__control[type="checkbox"][disabled] + span.checkbox__icon {
     opacity: 1;
 
     svg {
-        .fill-token(checkbox-disabled-color, color-foreground-disabled);
+        @include fill-token(checkbox-disabled-color, color-foreground-disabled);
     }
 }
 
-// https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
+/* https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/ */
 input.checkbox__control[type="checkbox"]:focus + span.checkbox__icon {
     outline: 1px auto;
-    .outline-color-token(checkbox-outline, color-foreground-secondary);
+    @include outline-color-token(checkbox-outline, color-foreground-secondary);
+
     outline-offset: 2px;
 }
 

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

@@ -1,4 +1,4 @@
-@import "../variables/variables.less";
+@import "../variables/variables";
 
 .chip {
     align-items: center;

package/src/{less → sass}/chip/stories/interactive-chip.stories.js

@@ -4,7 +4,7 @@ export const typical = () => `
 <span class="chip">
     <span id="chip-interactive-1-text" class="chip__text">Football</span>
     <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-text">
-        <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
+        <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
             <use href="#icon-close-12"></use>
         </svg>
     </button>
@@ -15,7 +15,7 @@ export const leastContent = () => `
 <span class="chip">
     <span id="chip-interactive-1-text" class="chip__text">I</span>
     <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-text">
-        <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
+        <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
             <use href="#icon-close-12"></use>
         </svg>
     </button>
@@ -26,7 +26,7 @@ export const mostContent = () => `
 <span class="chip">
     <span id="chip-interactive-1-text" class="chip__text">Chip with the longest potentially possible content</span>
     <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-text">
-        <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
+        <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
             <use href="#icon-close-12"></use>
         </svg>
     </button>
@@ -37,7 +37,7 @@ export const set = () => `
 <span class="chip">
     <span id="chip-interactive-1-text" class="chip__text">Football</span>
     <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-text">
-        <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
+        <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
             <use href="#icon-close-12"></use>
         </svg>
     </button>
@@ -46,7 +46,7 @@ export const set = () => `
 <span class="chip">
     <span id="chip-interactive-2-text" class="chip__text">Basketball</span>
     <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-2-text">
-        <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
+        <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
             <use href="#icon-close-12"></use>
         </svg>
     </button>
@@ -55,7 +55,7 @@ export const set = () => `
 <span class="chip">
     <span id="chip-interactive-3-text" class="chip__text">Baseball</span>
     <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-3-text">
-        <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
+        <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
             <use href="#icon-close-12"></use>
         </svg>
     </button>
@@ -64,7 +64,7 @@ export const set = () => `
 <span class="chip">
     <span id="chip-interactive-4-text" class="chip__text">Hockey</span>
     <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-4-text">
-        <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
+        <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
             <use href="#icon-close-12"></use>
         </svg>
     </button>
@@ -73,7 +73,7 @@ export const set = () => `
 <span class="chip">
     <span id="chip-interactive-5-text" class="chip__text">Tennis</span>
     <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-5-text">
-        <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
+        <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
             <use href="#icon-close-12"></use>
         </svg>
     </button>
@@ -82,7 +82,7 @@ export const set = () => `
 <span class="chip">
     <span id="chip-interactive-6-text" class="chip__text">Golf</span>
     <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-6-text">
-        <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
+        <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
             <use href="#icon-close-12"></use>
         </svg>
     </button>
@@ -91,7 +91,7 @@ export const set = () => `
 <span class="chip">
     <span id="chip-interactive-7-text" class="chip__text">Gymnastics</span>
     <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-7-text">
-        <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
+        <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
             <use href="#icon-close-12"></use>
         </svg>
     </button>
@@ -100,7 +100,7 @@ export const set = () => `
 <span class="chip">
     <span id="chip-interactive-8-text" class="chip__text">Swimming</span>
     <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-8-text">
-        <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
+        <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
             <use href="#icon-close-12"></use>
         </svg>
     </button>
@@ -109,7 +109,7 @@ export const set = () => `
 <span class="chip">
     <span id="chip-interactive-9-text" class="chip__text">Cricket</span>
     <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-9-text">
-        <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
+        <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
             <use href="#icon-close-12"></use>
         </svg>
     </button>
@@ -118,7 +118,7 @@ export const set = () => `
 <span class="chip">
     <span id="chip-interactive-10-text" class="chip__text">Volleyball</span>
     <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-10-text">
-        <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
+        <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
             <use href="#icon-close-12"></use>
         </svg>
     </button>
@@ -127,7 +127,7 @@ export const set = () => `
 <span class="chip">
     <span id="chip-interactive-11-text" class="chip__text">Rugby</span>
     <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-11-text">
-        <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
+        <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
             <use href="#icon-close-12"></use>
         </svg>
     </button>
@@ -138,7 +138,7 @@ export const largeText = () => `
 <span class="chip" style="font-size: 200%;">
     <span id="chip-interactive-1-text" class="chip__text">Large Text</span>
     <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-text">
-        <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
+        <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
             <use href="#icon-close-12"></use>
         </svg>
     </button>
@@ -149,7 +149,7 @@ export const letterSpacing = () => `
 <span class="chip" style="letter-spacing: calc(14px * 0.12);">
     <span id="chip-interactive-1-text" class="chip__text">Letter Spacing</span>
     <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-text">
-        <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
+        <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
             <use href="#icon-close-12"></use>
         </svg>
     </button>
@@ -161,7 +161,7 @@ export const RTL = () => `
     <span class="chip">
         <span id="chip-interactive-1-text" class="chip__text">Football</span>
         <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-text">
-            <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
+            <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
                 <use href="#icon-close-12"></use>
             </svg>
         </button>

package/src/{less/chips-combobox/chips-combobox.less → sass/chips-combobox/chips-combobox.scss}

@@ -1,4 +1,4 @@
-@import "../variables/variables.less";
+@import "../variables/variables";
 
 .chips-combobox {
     background-color: var(--color-background-secondary);
@@ -79,8 +79,8 @@
     border-color: var(--color-stroke-strong);
 }
 
-// a custom chevron flip is needed since combobox
-// is too specific with its selector of the icons size
+/* a custom chevron flip is needed since combobox */
+/* is too specific with its selector of the icons size */
 .chips-combobox .combobox--expanded svg.icon {
     transform: rotateX(180deg);
 }
@@ -117,11 +117,11 @@
     color: var(--color-foreground-disabled);
 }
 
-// stylelint-disable no-descending-specificity
+/* stylelint-disable no-descending-specificity */
 
-// this is needed to fix the input padding in rtl
-// that combobox is setting for some reason
+/* this is needed to fix the input padding in rtl */
+/* that combobox is setting for some reason */
 [dir="rtl"] .chips-combobox .combobox__control > input {
     padding: var(--spacing-75) 0;
 }
-// stylelint-enable no-descending-specificity
+/* stylelint-enable no-descending-specificity */

package/src/{less → sass}/chips-combobox/stories/chips-combobox.stories.js

@@ -6,7 +6,7 @@ export const empty = () => `
     <span class="combobox combobox--js chips-combobox__combobox">
         <span class="combobox__control chips-combobox_combobox__control">
             <input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" />
-            <svg class="icon icon--chevron-down-16" height="16" width="16" aria-hidden="true">
+            <svg class="icon icon--16" height="16" width="16" aria-hidden="true">
                 <use href="#icon-chevron-down-16"></use>
             </svg>
         </span>
@@ -33,7 +33,7 @@ export const fluid = () => `
     <span class="combobox combobox--js chips-combobox__combobox">
         <span class="combobox__control chips-combobox_combobox__control">
             <input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" />
-            <svg class="icon icon--chevron-down-16" height="16" width="16" aria-hidden="true">
+            <svg class="icon icon--16" height="16" width="16" aria-hidden="true">
                 <use href="#icon-chevron-down-16"></use>
             </svg>
         </span>
@@ -61,7 +61,7 @@ export const prefilled = () => `
             <span class="chip">
                 <span id="chip-interactive-1-1-text" class="chip__text">Football</span>
                 <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
-                    <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
+                    <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
                         <use href="#icon-close-12"></use>
                     </svg>
                 </button>
@@ -71,7 +71,7 @@ export const prefilled = () => `
             <span class="chip">
                 <span id="chip-interactive-1-2-text" class="chip__text">Basketball</span>
                 <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-2-text">
-                    <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
+                    <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
                         <use href="#icon-close-12"></use>
                     </svg>
                 </button>
@@ -81,7 +81,7 @@ export const prefilled = () => `
             <span class="chip">
                 <span id="chip-interactive-1-3-text" class="chip__text">Baseball</span>
                 <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-3-text">
-                    <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
+                    <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
                         <use href="#icon-close-12"></use>
                     </svg>
                 </button>
@@ -91,7 +91,7 @@ export const prefilled = () => `
     <span class="combobox combobox--js chips-combobox__combobox">
         <span class="combobox__control chips-combobox_combobox__control">
             <input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" />
-            <svg class="icon icon--chevron-down-16" height="16" width="16" aria-hidden="true">
+            <svg class="icon icon--16" height="16" width="16" aria-hidden="true">
                 <use href="#icon-chevron-down-16"></use>
             </svg>
         </span>
@@ -119,7 +119,7 @@ export const manyChips = () => `
             <span class="chip">
                 <span id="chip-interactive-1-1-text" class="chip__text">Football</span>
                 <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
-                    <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
+                    <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
                         <use href="#icon-close-12"></use>
                     </svg>
                 </button>
@@ -129,7 +129,7 @@ export const manyChips = () => `
             <span class="chip">
                 <span id="chip-interactive-1-2-text" class="chip__text">Basketball</span>
                 <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-2-text">
-                    <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
+                    <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
                         <use href="#icon-close-12"></use>
                     </svg>
                 </button>
@@ -139,7 +139,7 @@ export const manyChips = () => `
             <span class="chip">
                 <span id="chip-interactive-1-3-text" class="chip__text">Baseball</span>
                 <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-3-text">
-                    <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
+                    <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
                         <use href="#icon-close-12"></use>
                     </svg>
                 </button>
@@ -149,7 +149,7 @@ export const manyChips = () => `
             <span class="chip">
                 <span id="chip-interactive-1-1-text" class="chip__text">Soccer</span>
                 <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
-                    <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
+                    <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
                         <use href="#icon-close-12"></use>
                     </svg>
                 </button>
@@ -159,7 +159,7 @@ export const manyChips = () => `
             <span class="chip">
                 <span id="chip-interactive-1-1-text" class="chip__text">Hockey</span>
                 <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
-                    <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
+                    <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
                         <use href="#icon-close-12"></use>
                     </svg>
                 </button>
@@ -169,7 +169,7 @@ export const manyChips = () => `
             <span class="chip">
                 <span id="chip-interactive-1-1-text" class="chip__text">Tennis</span>
                 <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
-                    <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
+                    <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
                         <use href="#icon-close-12"></use>
                     </svg>
                 </button>
@@ -179,7 +179,7 @@ export const manyChips = () => `
             <span class="chip">
                 <span id="chip-interactive-1-1-text" class="chip__text">Swimming</span>
                 <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
-                    <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
+                    <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
                         <use href="#icon-close-12"></use>
                     </svg>
                 </button>
@@ -189,7 +189,7 @@ export const manyChips = () => `
             <span class="chip">
                 <span id="chip-interactive-1-1-text" class="chip__text">Cricket</span>
                 <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
-                    <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
+                    <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
                         <use href="#icon-close-12"></use>
                     </svg>
                 </button>
@@ -199,7 +199,7 @@ export const manyChips = () => `
             <span class="chip">
                 <span id="chip-interactive-1-1-text" class="chip__text">Table Tennis</span>
                 <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
-                    <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
+                    <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
                         <use href="#icon-close-12"></use>
                     </svg>
                 </button>
@@ -209,7 +209,7 @@ export const manyChips = () => `
             <span class="chip">
                 <span id="chip-interactive-1-1-text" class="chip__text">Rugby</span>
                 <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
-                    <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
+                    <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
                         <use href="#icon-close-12"></use>
                     </svg>
                 </button>
@@ -219,7 +219,7 @@ export const manyChips = () => `
             <span class="chip">
                 <span id="chip-interactive-1-1-text" class="chip__text">Boxing</span>
                 <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
-                    <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
+                    <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
                         <use href="#icon-close-12"></use>
                     </svg>
                 </button>
@@ -229,7 +229,7 @@ export const manyChips = () => `
             <span class="chip">
                 <span id="chip-interactive-1-1-text" class="chip__text">Judo</span>
                 <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
-                    <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
+                    <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
                         <use href="#icon-close-12"></use>
                     </svg>
                 </button>
@@ -239,7 +239,7 @@ export const manyChips = () => `
             <span class="chip">
                 <span id="chip-interactive-1-1-text" class="chip__text">Fencing</span>
                 <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
-                    <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
+                    <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
                         <use href="#icon-close-12"></use>
                     </svg>
                 </button>
@@ -249,7 +249,7 @@ export const manyChips = () => `
             <span class="chip">
                 <span id="chip-interactive-1-1-text" class="chip__text">Volleyball</span>
                 <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
-                    <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
+                    <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
                         <use href="#icon-close-12"></use>
                     </svg>
                 </button>
@@ -259,7 +259,7 @@ export const manyChips = () => `
             <span class="chip">
                 <span id="chip-interactive-1-1-text" class="chip__text">Golf</span>
                 <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
-                    <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
+                    <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
                         <use href="#icon-close-12"></use>
                     </svg>
                 </button>
@@ -269,7 +269,7 @@ export const manyChips = () => `
     <span class="combobox combobox--js chips-combobox__combobox">
         <span class="combobox__control chips-combobox_combobox__control">
             <input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" />
-            <svg class="icon icon--chevron-down-16" height="16" width="16" aria-hidden="true">
+            <svg class="icon icon--16" height="16" width="16" aria-hidden="true">
                 <use href="#icon-chevron-down-16"></use>
             </svg>
         </span>
@@ -297,7 +297,7 @@ export const expanded = () => `
             <span class="chip">
                 <span id="chip-interactive-1-1-text" class="chip__text">Football</span>
                 <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
-                    <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
+                    <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
                         <use href="#icon-close-12"></use>
                     </svg>
                 </button>
@@ -307,7 +307,7 @@ export const expanded = () => `
             <span class="chip">
                 <span id="chip-interactive-1-2-text" class="chip__text">Basketball</span>
                 <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-2-text">
-                    <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
+                    <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
                         <use href="#icon-close-12"></use>
                     </svg>
                 </button>
@@ -317,7 +317,7 @@ export const expanded = () => `
             <span class="chip">
                 <span id="chip-interactive-1-3-text" class="chip__text">Baseball</span>
                 <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-3-text">
-                    <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
+                    <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
                         <use href="#icon-close-12"></use>
                     </svg>
                 </button>
@@ -327,7 +327,7 @@ export const expanded = () => `
     <span class="combobox combobox--js combobox--expanded chips-combobox__combobox">
         <span class="combobox__control chips-combobox_combobox__control">
             <input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" />
-            <svg class="icon icon--chevron-down-16" height="16" width="16" aria-hidden="true">
+            <svg class="icon icon--16" height="16" width="16" aria-hidden="true">
                 <use href="#icon-chevron-down-16"></use>
             </svg>
         </span>
@@ -355,7 +355,7 @@ export const textSpacing = () => `
             <span class="chip">
                 <span id="chip-interactive-1-1-text" class="chip__text">Football</span>
                 <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
-                    <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
+                    <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
                         <use href="#icon-close-12"></use>
                     </svg>
                 </button>
@@ -365,7 +365,7 @@ export const textSpacing = () => `
             <span class="chip">
                 <span id="chip-interactive-1-2-text" class="chip__text">Basketball</span>
                 <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-2-text">
-                    <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
+                    <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
                         <use href="#icon-close-12"></use>
                     </svg>
                 </button>
@@ -375,7 +375,7 @@ export const textSpacing = () => `
             <span class="chip">
                 <span id="chip-interactive-1-3-text" class="chip__text">Baseball</span>
                 <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-3-text">
-                    <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
+                    <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
                         <use href="#icon-close-12"></use>
                     </svg>
                 </button>
@@ -385,7 +385,7 @@ export const textSpacing = () => `
     <span class="combobox combobox--js combobox--expanded chips-combobox__combobox">
         <span class="combobox__control chips-combobox_combobox__control">
             <input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" />
-            <svg class="icon icon--chevron-down-16" height="16" width="16" aria-hidden="true">
+            <svg class="icon icon--16" height="16" width="16" aria-hidden="true">
                 <use href="#icon-chevron-down-16"></use>
             </svg>
         </span>
@@ -413,7 +413,7 @@ export const disabledState = () => `
             <span class="chip">
                 <span id="chip-interactive-1-1-text" class="chip__text">Football</span>
                 <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
-                    <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
+                    <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
                         <use href="#icon-close-12"></use>
                     </svg>
                 </button>
@@ -423,7 +423,7 @@ export const disabledState = () => `
             <span class="chip">
                 <span id="chip-interactive-1-2-text" class="chip__text">Basketball</span>
                 <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-2-text">
-                    <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
+                    <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
                         <use href="#icon-close-12"></use>
                     </svg>
                 </button>
@@ -433,7 +433,7 @@ export const disabledState = () => `
             <span class="chip">
                 <span id="chip-interactive-1-3-text" class="chip__text">Baseball</span>
                 <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-3-text">
-                    <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
+                    <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
                         <use href="#icon-close-12"></use>
                     </svg>
                 </button>
@@ -443,7 +443,7 @@ export const disabledState = () => `
     <span class="combobox combobox--js chips-combobox__combobox">
         <span class="combobox__control chips-combobox_combobox__control">
             <input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" disabled />
-            <svg class="icon icon--chevron-down-16" height="16" width="16" aria-hidden="true">
+            <svg class="icon icon--16" height="16" width="16" aria-hidden="true">
                 <use href="#icon-chevron-down-16"></use>
             </svg>
         </span>
@@ -471,7 +471,7 @@ export const errorState = () => `
             <span class="chip">
                 <span id="chip-interactive-1-1-text" class="chip__text">Football</span>
                 <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
-                    <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
+                    <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
                         <use href="#icon-close-12"></use>
                     </svg>
                 </button>
@@ -481,7 +481,7 @@ export const errorState = () => `
             <span class="chip">
                 <span id="chip-interactive-1-2-text" class="chip__text">Basketball</span>
                 <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-2-text">
-                    <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
+                    <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
                         <use href="#icon-close-12"></use>
                     </svg>
                 </button>
@@ -491,7 +491,7 @@ export const errorState = () => `
             <span class="chip">
                 <span id="chip-interactive-1-3-text" class="chip__text">Baseball</span>
                 <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-3-text">
-                    <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
+                    <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
                         <use href="#icon-close-12"></use>
                     </svg>
                 </button>
@@ -501,7 +501,7 @@ export const errorState = () => `
     <span class="combobox combobox--js chips-combobox__combobox">
         <span class="combobox__control chips-combobox_combobox__control">
             <input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" />
-            <svg class="icon icon--chevron-down-16" height="16" width="16" aria-hidden="true">
+            <svg class="icon icon--16" height="16" width="16" aria-hidden="true">
                 <use href="#icon-chevron-down-16"></use>
             </svg>
         </span>