@ebay/skin 17.5.0 → 18.0.0

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

@@ -7,7 +7,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>
@@ -36,7 +36,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>
@@ -66,7 +66,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>
@@ -76,7 +76,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>
@@ -86,7 +86,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>
@@ -96,7 +96,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>
@@ -126,7 +126,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>
@@ -136,7 +136,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>
@@ -146,7 +146,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>
@@ -156,7 +156,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>
@@ -166,7 +166,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>
@@ -176,7 +176,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>
@@ -186,7 +186,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>
@@ -196,7 +196,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>
@@ -206,7 +206,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>
@@ -216,7 +216,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>
@@ -226,7 +226,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>
@@ -236,7 +236,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>
@@ -246,7 +246,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>
@@ -256,7 +256,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>
@@ -266,7 +266,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>
@@ -276,7 +276,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>
@@ -306,7 +306,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>
@@ -316,7 +316,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>
@@ -326,7 +326,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>
@@ -336,7 +336,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>
@@ -366,7 +366,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>
@@ -376,7 +376,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>
@@ -386,7 +386,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>
@@ -396,7 +396,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>
@@ -426,7 +426,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>
@@ -436,7 +436,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>
@@ -446,7 +446,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>
@@ -456,7 +456,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>

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

@@ -1,10 +1,10 @@
-@import "../variables/variables.less";
-@import "../mixins/private/dropdown-mixins.less";
-@import "../mixins/private/listbox-mixins.less";
-@import "../mixins/private/token-mixins.less";
-@import "../mixins/public/utility-mixins.less";
+@import "../variables/variables";
+@import "../mixins/private/dropdown-mixins";
+@import "../mixins/private/listbox-mixins";
+@import "../mixins/private/token-mixins";
+@import "../mixins/public/utility-mixins";
 
-@height-textbox: 40px;
+$height-textbox: 40px;
 
 .combobox {
     box-sizing: border-box;
@@ -18,7 +18,7 @@ span.combobox {
 }
 
 .combobox__value {
-    .truncate();
+    @include truncate();
 
     flex: 1 0 auto;
 }
@@ -28,11 +28,11 @@ span.combobox {
 }
 
 .combobox__listbox {
-    .dropdown-base(combobox-listbox);
+    @include dropdown-base(combobox-listbox);
 }
 
 .combobox__listbox--reverse {
-    .dropdown-reverse();
+    @include dropdown-reverse();
 }
 
 .combobox__control > svg.icon,
@@ -41,11 +41,11 @@ span.combobox {
 }
 
 .combobox__option[role^="option"] {
-    .listbox-option-base();
-    .dropdown-item-border-radius(combobox-listbox);
+    @include listbox-option-base();
+    @include dropdown-item-border-radius(combobox-listbox);
 
-    cursor: default; // needed to override text cursor
-    position: relative; // needed for icon to show properly
+    cursor: default; /* needed to override text cursor */
+    position: relative; /* needed for icon to show properly */
 
     &:not(:last-child) {
         margin-bottom: 1px;
@@ -56,7 +56,7 @@ span.combobox {
     }
 
     svg.icon {
-        .listbox-option-status();
+        @include listbox-option-status();
     }
 }
 
@@ -87,22 +87,30 @@ span.combobox {
     display: block;
 }
 
-.combobox--expanded svg.icon--chevron-down-12 {
+.combobox--expanded svg.icon--12 {
     transform: rotate(180deg);
 }
 
-.combobox__control > svg.icon--chevron-down-12 {
-    .color-token(combobox-textbox-icon-color, color-foreground-primary);
+.combobox__control > svg.icon--12 {
+    @include color-token(combobox-textbox-icon-color, color-foreground-primary);
+
     pointer-events: none;
     position: absolute;
-    right: 17px; // +1 px for the border on the input box
-    top: calc(50% - 8px); // 8px is half the height of dropdown icon size
+    right: 17px; /* +1 px for the border on the input box */
+    top: calc(50% - 8px); /* 8px is half the height of dropdown icon size */
 }
 
 .combobox__control > input {
     appearance: none;
-    .background-color-token(combobox-textbox-background-color, color-background-secondary);
-    .border-color-token(combobox-textbox-border-color, color-stroke-default);
+    @include background-color-token(
+        combobox-textbox-background-color,
+        color-background-secondary
+    );
+    @include border-color-token(
+        combobox-textbox-border-color,
+        color-stroke-default
+    );
+
     border-radius: var(
         --combobox-textbox-border-radius,
         var(--border-radius-50)
@@ -110,32 +118,49 @@ span.combobox {
     border-style: solid;
     border-width: 1px;
     box-sizing: border-box;
-    .color-token(combobox-textbox-foreground-color, color-foreground-on-secondary);
+    @include color-token(
+        combobox-textbox-foreground-color,
+        color-foreground-on-secondary
+    );
+
     font-family: inherit;
     font-size: inherit;
-    height: @height-textbox;
+    height: $height-textbox;
     margin-left: 0;
     margin-right: 0;
     padding: 0 32px 0 16px;
 
     &[readonly] {
-        .color-token(combobox-textbox-foreground-color, color-foreground-primary);
-        // fixes the cursor in firefox (1 of 2)
+        @include color-token(
+            combobox-textbox-foreground-color,
+            color-foreground-primary
+        );
+        /* fixes the cursor in firefox (1 of 2) */
         cursor: default;
-        // fixes the cursor in firefox (2 of 2)
+        /* fixes the cursor in firefox (2 of 2) */
         text-shadow: 0 0 0 inherit;
-        -webkit-user-select: none; // Fix to get rid of unintended cursor in iOS mobile
+
+        --webkit-user-select: none; /* Fix to get rid of unintended cursor in iOS mobile */
 
         &::-moz-selection,
         &::selection {
-            .background-color-token(combobox-textbox-readonly-selection-background, color-background-primary);
+            @include background-color-token(
+                combobox-textbox-readonly-selection-background,
+                color-background-primary
+            );
         }
     }
 
     &[disabled],
     &[aria-disabled="true"] {
-        .border-color-token(combobox-textbox-disabled-border-color, color-background-disabled);
-        .color-token(combobox-textbox-disabled-foreground-color, color-foreground-disabled);
+        @include border-color-token(
+            combobox-textbox-disabled-border-color,
+            color-background-disabled
+        );
+        @include color-token(
+            combobox-textbox-disabled-foreground-color,
+            color-foreground-disabled
+        );
 
         &[readonly] {
             text-shadow: 0 0 0 var(--color-foreground-disabled);
@@ -147,7 +172,10 @@ span.combobox {
     }
 
     &[aria-invalid="true"] {
-        .border-color-token(combobox-textbox-invalid-foreground-color, color-stroke-attention);
+        @include border-color-token(
+            combobox-textbox-invalid-foreground-color,
+            color-stroke-attention
+        );
     }
 
     &::-ms-clear {
@@ -162,8 +190,14 @@ span.combobox {
 }
 
 .combobox__control > input:focus {
-    .background-color-token(combobox-textbox-focus-background-color, color-background-primary);
-    .border-color-token(combobox-textbox-focus-border-color, color-foreground-primary);
+    @include background-color-token(
+        combobox-textbox-focus-background-color,
+        color-background-primary
+    );
+    @include border-color-token(
+        combobox-textbox-focus-border-color,
+        color-foreground-primary
+    );
 }
 
 .combobox__control--borderless > input:focus {
@@ -181,15 +215,22 @@ span.combobox {
 
 .combobox--large .combobox__control > input {
     font-size: var(--font-size-medium);
-    height: @height-textbox + 8px;
+    height: $height-textbox + 8px;
 }
 
 .combobox__control > input[disabled] {
-    .background-color-token(combobox-textbox-disabled-background-color, color-background-secondary);
+    @include background-color-token(
+        combobox-textbox-disabled-background-color,
+        color-background-secondary
+    );
 }
 
 .combobox__option--active[role="option"] {
-    .color-token(combobox-listbox-option-hover-foreground-color, color-foreground-primary);
+    @include color-token(
+        combobox-listbox-option-hover-foreground-color,
+        color-foreground-primary
+    );
+
     font-weight: bold;
 }
 
@@ -200,7 +241,7 @@ span.combobox {
     }
 }
 
-// RTL
+/* RTL */
 [dir="rtl"] {
     .combobox__control > input {
         padding: 0 16px 0 32px;

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

@@ -4,7 +4,7 @@ export const collapsed = () => `
 <span class="combobox">
     <span class="combobox__control">
         <input name="combobox-default" placeholder="Combobox" role="combobox" type="text" aria-expanded="false" aria-haspopup="listbox" />
-        <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+        <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
             <use href="#icon-chevron-down-12"></use>
         </svg>
     </span>
@@ -25,7 +25,7 @@ export const expanded = () => `
 <span class="combobox combobox--expanded">
     <span class="combobox__control">
         <input name="combobox-default" placeholder="Combobox" role="combobox" type="text" aria-expanded="true" aria-haspopup="listbox" />
-        <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+        <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
             <use href="#icon-chevron-down-12"></use>
         </svg>
     </span>
@@ -46,7 +46,7 @@ export const textSpacing = () => `
 <span class="combobox combobox--expanded demo-a11y-text-spacing">
     <span class="combobox__control">
         <input name="combobox-default" placeholder="Combobox" role="combobox" type="text" aria-expanded="true" aria-haspopup="listbox" />
-        <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+        <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
             <use href="#icon-chevron-down-12"></use>
         </svg>
     </span>
@@ -67,7 +67,7 @@ export const disabled = () => `
 <span class="combobox">
     <span class="combobox__control">
         <input name="combobox-default" placeholder="Combobox" role="combobox" type="text" aria-expanded="false" aria-haspopup="listbox" disabled />
-        <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+        <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
             <use href="#icon-chevron-down-12"></use>
         </svg>
     </span>
@@ -88,7 +88,7 @@ export const large = () => `
 <span class="combobox combobox--large combobox--expanded">
     <span class="combobox__control">
         <input name="combobox-default" placeholder="Combobox" role="combobox" type="text" aria-expanded="true" aria-haspopup="listbox" />
-        <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+        <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
             <use href="#icon-chevron-down-12"></use>
         </svg>
     </span>
@@ -109,7 +109,7 @@ export const longOptions = () => `
 <span class="combobox combobox--expanded">
     <span class="combobox__control">
         <input name="combobox-default" placeholder="Combobox" role="combobox" type="text" aria-expanded="true" aria-haspopup="listbox" />
-        <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+        <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
             <use href="#icon-chevron-down-12"></use>
         </svg>
     </span>
@@ -131,7 +131,7 @@ export const actionable = () => `
     <span class="combobox__control">
         <input placeholder="Combobox" role="combobox" type="text" aria-haspopup="listbox" aria-owns="listbox1" />
         <button class="icon-btn icon-btn--actionable" type="button" aria-label="Expand Suggestions">
-            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
@@ -157,7 +157,7 @@ export const RTL = () => `
     <span class="combobox combobox--expanded">
         <span class="combobox__control">
             <input class="pink-placeholder-text" name="combobox-default" placeholder="Combobox" role="combobox" type="text" aria-expanded="true" aria-haspopup="listbox" />
-            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
@@ -181,7 +181,7 @@ export const actionableRTL = () => `
         <span class="combobox__control combobox__control--actionable">
             <input placeholder="Combobox" role="combobox" type="text" aria-haspopup="listbox" aria-owns="listbox5" />
             <button class="icon-btn" type="button" aria-label="Expand Suggestions">
-                <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+                <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                     <use href="#icon-chevron-down-12"></use>
                 </svg>
             </button>
@@ -208,7 +208,7 @@ export const inheritColour = () => `
     <span class="combobox combobox--expanded">
         <span class="combobox__control">
             <input class="pink-placeholder-text" name="combobox-default" placeholder="Combobox" role="combobox" type="text" aria-expanded="true" aria-haspopup="listbox" />
-            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
@@ -231,7 +231,7 @@ export const inheritFontSize = () => `
     <span class="combobox combobox--expanded">
         <span class="combobox__control">
             <input name="combobox-default" placeholder="Combobox" role="combobox" type="text" aria-expanded="true" aria-haspopup="listbox" />
-            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>