@ebay/skin 15.5.0 → 16.0.0-0

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

@@ -5,8 +5,8 @@ export const closed = () => `
     <summary class="details__summary">
         <span class="details__label">Details</span>
         <span class="details__icon" hidden>
-            <svg class="icon icon--dropdown" focusable="false" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
     </summary>
@@ -19,8 +19,8 @@ export const open = () => `
     <summary class="details__summary">
         <span class="details__label">Details</span>
         <span class="details__icon" hidden>
-            <svg class="icon icon--dropdown" focusable="false" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
     </summary>
@@ -33,8 +33,8 @@ export const centered = () => `
     <summary class="details__summary details__summary--center">
         <span class="details__label">Details</span>
         <span class="details__icon" hidden>
-            <svg class="icon icon--dropdown" focusable="false" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
     </summary>
@@ -47,8 +47,8 @@ export const small = () => `
     <summary class="details__summary details__summary--small">
         <span class="details__label">Details</span>
         <span class="details__icon" hidden>
-            <svg class="icon icon--dropdown" focusable="false" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
     </summary>

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

@@ -7,8 +7,8 @@ export const empty = () => `
         <div class="drawer-dialog__header">
             <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
             <button aria-label="Close dialog" class="icon-btn drawer-dialog__close" type="button">
-                <svg aria-hidden="true" class="icon icon--close" focusable="false" height="16" width="16">
-                    <use href="#icon-close"></use>
+                <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="16" width="16">
+                    <use href="#icon-close-16"></use>
                 </svg>
             </button>
         </div>
@@ -25,8 +25,8 @@ export const partial = () => `
         <div class="drawer-dialog__header">
             <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
             <button aria-label="Close dialog" class="icon-btn drawer-dialog__close" type="button">
-                <svg aria-hidden="true" class="icon icon--close" focusable="false" height="16" width="16">
-                    <use href="#icon-close"></use>
+                <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="16" width="16">
+                    <use href="#icon-close-16"></use>
                 </svg>
             </button>
         </div>
@@ -48,8 +48,8 @@ export const withFooter = () => `
         <div class="drawer-dialog__header">
             <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
             <button aria-label="Close dialog" class="icon-btn drawer-dialog__close" type="button">
-                <svg aria-hidden="true" class="icon icon--close" focusable="false" height="16" width="16">
-                    <use href="#icon-close"></use>
+                <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="16" width="16">
+                    <use href="#icon-close-16"></use>
                 </svg>
             </button>
         </div>
@@ -76,8 +76,8 @@ export const RTL = () => `
             <div class="drawer-dialog__header">
                 <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
                 <button aria-label="Close dialog" class="icon-btn drawer-dialog__close" type="button">
-                    <svg aria-hidden="true" class="icon icon--close" focusable="false" height="16" width="16">
-                        <use href="#icon-close"></use>
+                    <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="16" width="16">
+                        <use href="#icon-close-16"></use>
                     </svg>
                 </button>
             </div>
@@ -100,8 +100,8 @@ export const half = () => `
         <div class="drawer-dialog__header">
             <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
             <button aria-label="Close dialog" class="icon-btn drawer-dialog__close" type="button">
-                <svg aria-hidden="true" class="icon icon--close" focusable="false" height="16" width="16">
-                    <use href="#icon-close"></use>
+                <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="16" width="16">
+                    <use href="#icon-close-16"></use>
                 </svg>
             </button>
         </div>
@@ -159,8 +159,8 @@ export const full = () => `
         <div class="drawer-dialog__header">
             <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
             <button aria-label="Close dialog" class="icon-btn drawer-dialog__close" type="button">
-                <svg aria-hidden="true" class="icon icon--close" focusable="false" height="16" width="16">
-                    <use href="#icon-close"></use>
+                <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="16" width="16">
+                    <use href="#icon-close-16"></use>
                 </svg>
             </button>
         </div>

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

@@ -9,10 +9,10 @@ export const group = () => `
                 <input class="radio__control" id="paccount" type="radio" name="account"/>
                 <span class="radio__icon" hidden>
                     <svg class="radio__unchecked" focusable="false" height="18" width="18">
-                        <use href="#icon-radio-unchecked"></use>
+                        <use href="#icon-radio-unchecked-18"></use>
                     </svg>
                     <svg class="radio__checked" focusable="false" height="18" width="18">
-                        <use href="#icon-radio-checked"></use>
+                        <use href="#icon-radio-checked-18"></use>
                     </svg>
                 </span>
             </span>
@@ -23,10 +23,10 @@ export const group = () => `
                 <input class="radio__control" id="baccount" type="radio" name="account"/>
                 <span class="radio__icon" hidden>
                     <svg class="radio__unchecked" focusable="false" height="18" width="18">
-                        <use href="#icon-radio-unchecked"></use>
+                        <use href="#icon-radio-unchecked-18"></use>
                     </svg>
                     <svg class="radio__checked" focusable="false" height="18" width="18">
-                        <use href="#icon-radio-checked"></use>
+                        <use href="#icon-radio-checked-18"></use>
                     </svg>
                 </span>
             </span>
@@ -74,8 +74,8 @@ export const group = () => `
                 <option value="44">United Kingdom +44</option>
                 <option value="1">Canada +1</option>
             </select>
-            <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </div>
     </span>

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

@@ -15,8 +15,8 @@ export const inlineLevel = () => `
             <option value="item2">Option 2</option>
             <option value="item3">Option 3</option>
         </select>
-        <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-            <use href="#icon-dropdown"></use>
+        <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <use href="#icon-chevron-down-12"></use>
         </svg>
     </span>
 </span>
@@ -51,8 +51,8 @@ export const RTL = () => `
                 <option value="item2">Option 2</option>
                 <option value="item3">Option 3</option>
             </select>
-            <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
     </span>
@@ -87,8 +87,8 @@ export const blockLevel = () => `
             <option value="item2">Option 2</option>
             <option value="item3">Option 3</option>
         </select>
-        <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-            <use href="#icon-dropdown"></use>
+        <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <use href="#icon-chevron-down-12"></use>
         </svg>
     </span>
 </div>
@@ -122,8 +122,8 @@ export const disabled = () => `
             <option value="item2">Option 2</option>
             <option value="item3">Option 3</option>
         </select>
-        <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-            <use href="#icon-dropdown"></use>
+        <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <use href="#icon-chevron-down-12"></use>
         </svg>
     </span>
 </span>

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

@@ -14,6 +14,7 @@ a.filter-link {
     .filter-button-base();
 
     .background-color-token(filter-button-background-color, color-background-secondary);
+    .border-color-token(filter-button-selected-border-color, color-stroke-default);
 
     &:focus,
     &:hover,
@@ -38,12 +39,12 @@ a.filter-link:visited {
 
 button.filter-button[aria-pressed="true"],
 a.filter-link--selected {
-    .border-color-token(filter-button-selected-border-color, color-foreground-primary);
+    .border-color-token(filter-button-selected-border-color, color-stroke-strong);
     font-weight: bold;
 }
 
 a.filter-link--selected:visited {
-    .border-color-token(filter-button-selected-border-color, color-foreground-primary);
+    .border-color-token(filter-button-selected-border-color, color-stroke-strong);
 }
 
 button.filter-button[disabled],

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

@@ -90,23 +90,23 @@ button.filter-menu-form__footer[type="submit"] {
     margin-left: 8px;
 }
 
-.filter-menu__item[role="menuitemcheckbox"] svg.icon--checkbox-checked,
-.filter-menu__item[role="menuitemradio"] svg.icon--radio-checked {
+.filter-menu__item[role="menuitemcheckbox"] svg.icon--checkbox-checked-18,
+.filter-menu__item[role="menuitemradio"] svg.icon--radio-checked-18 {
     display: none;
 }
 
-.filter-menu__item[role="menuitemcheckbox"] svg.icon--checkbox-unchecked,
-.filter-menu__item[role="menuitemradio"] svg.icon--radio-unchecked {
+.filter-menu__item[role="menuitemcheckbox"] svg.icon--checkbox-unchecked-18,
+.filter-menu__item[role="menuitemradio"] svg.icon--radio-unchecked-18 {
     display: block;
 }
 
-.filter-menu__item[role="menuitemcheckbox"][aria-checked="true"] svg.icon--checkbox-unchecked,
-.filter-menu__item[role="menuitemradio"][aria-checked="true"] svg.icon--radio-unchecked {
+.filter-menu__item[role="menuitemcheckbox"][aria-checked="true"] svg.icon--checkbox-unchecked-18,
+.filter-menu__item[role="menuitemradio"][aria-checked="true"] svg.icon--radio-unchecked-18 {
     display: none;
 }
 
-.filter-menu__item[role="menuitemcheckbox"][aria-checked="true"] svg.icon--checkbox-checked,
-.filter-menu__item[role="menuitemradio"][aria-checked="true"] svg.icon--radio-checked {
+.filter-menu__item[role="menuitemcheckbox"][aria-checked="true"] svg.icon--checkbox-checked-18,
+.filter-menu__item[role="menuitemradio"][aria-checked="true"] svg.icon--radio-checked-18 {
     display: block;
 }
 

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

@@ -5,33 +5,33 @@ export const base = () => `
     <div class="filter-menu__items" role="menu">
         <div class="filter-menu__item" role="menuitemcheckbox" tabindex="0" aria-checked="false">
             <span class="filter-menu__checkbox">
-                <svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
-                    <use href="#icon-checkbox-unchecked"></use>
+                <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
+                    <use href="#icon-checkbox-unchecked-18"></use>
                 </svg>
-                <svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
-                    <use href="#icon-checkbox-checked"></use>
+                <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
+                    <use href="#icon-checkbox-checked-18"></use>
                 </svg>
             </span>
             <span class="filter-menu__text">Item 1 with a long string that will wrap to another line</span>
         </div>
         <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
             <span class="filter-menu__checkbox">
-                <svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
-                    <use href="#icon-checkbox-unchecked"></use>
+                <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
+                    <use href="#icon-checkbox-unchecked-18"></use>
                 </svg>
-                <svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
-                    <use href="#icon-checkbox-checked"></use>
+                <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
+                    <use href="#icon-checkbox-checked-18"></use>
                 </svg>
             </span>
             <span class="filter-menu__text">Item 2</span>
         </div>
         <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
             <span class="filter-menu__checkbox">
-                <svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
-                    <use href="#icon-checkbox-unchecked"></use>
+                <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
+                    <use href="#icon-checkbox-unchecked-18"></use>
                 </svg>
-                <svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
-                    <use href="#icon-checkbox-checked"></use>
+                <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
+                    <use href="#icon-checkbox-checked-18"></use>
                 </svg>
             </span>
             <span class="filter-menu__text">Item 3</span>
@@ -45,33 +45,33 @@ export const withDisabled = () => `
     <div class="filter-menu__items" role="menu">
         <div class="filter-menu__item" role="menuitemcheckbox" tabindex="0" aria-checked="false" aria-disabled="true">
             <span class="filter-menu__checkbox">
-                <svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
-                    <use href="#icon-checkbox-unchecked"></use>
+                <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
+                    <use href="#icon-checkbox-unchecked-18"></use>
                 </svg>
-                <svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
-                    <use href="#icon-checkbox-checked"></use>
+                <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
+                    <use href="#icon-checkbox-checked-18"></use>
                 </svg>
             </span>
             <span class="filter-menu__text">Item 1 with a long string that will wrap to another line</span>
         </div>
         <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
             <span class="filter-menu__checkbox">
-                <svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
-                    <use href="#icon-checkbox-unchecked"></use>
+                <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
+                    <use href="#icon-checkbox-unchecked-18"></use>
                 </svg>
-                <svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
-                    <use href="#icon-checkbox-checked"></use>
+                <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
+                    <use href="#icon-checkbox-checked-18"></use>
                 </svg>
             </span>
             <span class="filter-menu__text">Item 2</span>
         </div>
         <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="true" aria-disabled="true">
             <span class="filter-menu__checkbox">
-                <svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
-                    <use href="#icon-checkbox-unchecked"></use>
+                <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
+                    <use href="#icon-checkbox-unchecked-18"></use>
                 </svg>
-                <svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
-                    <use href="#icon-checkbox-checked"></use>
+                <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
+                    <use href="#icon-checkbox-checked-18"></use>
                 </svg>
             </span>
             <span class="filter-menu__text">Item 3</span>
@@ -85,33 +85,33 @@ export const withFooterButton = () => `
     <div class="filter-menu__items" role="menu">
         <div class="filter-menu__item" role="menuitemcheckbox" tabindex="0" aria-checked="false">
             <span class="filter-menu__checkbox">
-                <svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
-                    <use href="#icon-checkbox-unchecked"></use>
+                <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
+                    <use href="#icon-checkbox-unchecked-18"></use>
                 </svg>
-                <svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
-                    <use href="#icon-checkbox-checked"></use>
+                <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
+                    <use href="#icon-checkbox-checked-18"></use>
                 </svg>
             </span>
             <span class="filter-menu__text">Item 1 with a long string that will wrap to another line</span>
         </div>
         <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
             <span class="filter-menu__checkbox">
-                <svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
-                    <use href="#icon-checkbox-unchecked"></use>
+                <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
+                    <use href="#icon-checkbox-unchecked-18"></use>
                 </svg>
-                <svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
-                    <use href="#icon-checkbox-checked"></use>
+                <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
+                    <use href="#icon-checkbox-checked-18"></use>
                 </svg>
             </span>
             <span class="filter-menu__text">Item 2</span>
         </div>
         <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
             <span class="filter-menu__checkbox">
-                <svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
-                    <use href="#icon-checkbox-unchecked"></use>
+                <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
+                    <use href="#icon-checkbox-unchecked-18"></use>
                 </svg>
-                <svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
-                    <use href="#icon-checkbox-checked"></use>
+                <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
+                    <use href="#icon-checkbox-checked-18"></use>
                 </svg>
             </span>
             <span class="filter-menu__text">Item 3</span>
@@ -130,10 +130,10 @@ export const formVersion = () => `
                     <input aria-label="filter menu checkbox example option 1" class="checkbox__control" type="checkbox" name="filter-menu-form-checkbox-item-1" id="filter-menu-form-checkbox-item-1" />
                     <span class="checkbox__icon" hidden>
                         <svg class="checkbox__unchecked" focusable="false" height="18" width="18">
-                            <use href="#icon-checkbox-unchecked"></use>
+                            <use href="#icon-checkbox-unchecked-18"></use>
                         </svg>
                         <svg class="checkbox__checked" focusable="false" height="18" width="18">
-                            <use href="#icon-checkbox-checked"></use>
+                            <use href="#icon-checkbox-checked-18"></use>
                         </svg>
                     </span>
                 </span>
@@ -144,10 +144,10 @@ export const formVersion = () => `
                     <input aria-label="filter menu checkbox example option 2" class="checkbox__control" type="checkbox" name="filter-menu-form-checkbox-item-2" id="filter-menu-form-checkbox-item-2" />
                     <span class="checkbox__icon" hidden>
                         <svg class="checkbox__unchecked" focusable="false" height="18" width="18">
-                            <use href="#icon-checkbox-unchecked"></use>
+                            <use href="#icon-checkbox-unchecked-18"></use>
                         </svg>
                         <svg class="checkbox__checked" focusable="false" height="18" width="18">
-                            <use href="#icon-checkbox-checked"></use>
+                            <use href="#icon-checkbox-checked-18"></use>
                         </svg>
                     </span>
                 </span>
@@ -158,10 +158,10 @@ export const formVersion = () => `
                     <input aria-label="filter menu checkbox example option 3" class="checkbox__control" type="checkbox" name="filter-menu-form-checkbox-item-3" id="filter-menu-form-checkbox-item-3" />
                     <span class="checkbox__icon" hidden>
                         <svg class="checkbox__unchecked" focusable="false" height="18" width="18">
-                            <use href="#icon-checkbox-unchecked"></use>
+                            <use href="#icon-checkbox-unchecked-18"></use>
                         </svg>
                         <svg class="checkbox__checked" focusable="false" height="18" width="18">
-                            <use href="#icon-checkbox-checked"></use>
+                            <use href="#icon-checkbox-checked-18"></use>
                         </svg>
                     </span>
                 </span>
@@ -183,10 +183,10 @@ export const RTL = () => `
                         <input aria-label="filter menu checkbox example option 1" class="checkbox__control" type="checkbox" name="filter-menu-form-checkbox-item-1" id="filter-menu-form-checkbox-item-1" />
                         <span class="checkbox__icon" hidden>
                             <svg class="checkbox__unchecked" focusable="false" height="18" width="18">
-                                <use href="#icon-checkbox-unchecked"></use>
+                                <use href="#icon-checkbox-unchecked-18"></use>
                             </svg>
                             <svg class="checkbox__checked" focusable="false" height="18" width="18">
-                                <use href="#icon-checkbox-checked"></use>
+                                <use href="#icon-checkbox-checked-18"></use>
                             </svg>
                         </span>
                     </span>
@@ -197,10 +197,10 @@ export const RTL = () => `
                         <input aria-label="filter menu checkbox example option 2" class="checkbox__control" type="checkbox" name="filter-menu-form-checkbox-item-2" id="filter-menu-form-checkbox-item-2" />
                         <span class="checkbox__icon" hidden>
                             <svg class="checkbox__unchecked" focusable="false" height="18" width="18">
-                                <use href="#icon-checkbox-unchecked"></use>
+                                <use href="#icon-checkbox-unchecked-18"></use>
                             </svg>
                             <svg class="checkbox__checked" focusable="false" height="18" width="18">
-                                <use href="#icon-checkbox-checked"></use>
+                                <use href="#icon-checkbox-checked-18"></use>
                             </svg>
                         </span>
                     </span>
@@ -211,10 +211,10 @@ export const RTL = () => `
                         <input aria-label="filter menu checkbox example option 3" class="checkbox__control" type="checkbox" name="filter-menu-form-checkbox-item-3" id="filter-menu-form-checkbox-item-3" />
                         <span class="checkbox__icon" hidden>
                             <svg class="checkbox__unchecked" focusable="false" height="18" width="18">
-                                <use href="#icon-checkbox-unchecked"></use>
+                                <use href="#icon-checkbox-unchecked-18"></use>
                             </svg>
                             <svg class="checkbox__checked" focusable="false" height="18" width="18">
-                                <use href="#icon-checkbox-checked"></use>
+                                <use href="#icon-checkbox-checked-18"></use>
                             </svg>
                         </span>
                     </span>

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

@@ -23,6 +23,7 @@ span.filter-menu-button {
 button.filter-menu-button__button {
     .filter-button-base();
     .background-color-token(filter-button-background-color, color-background-secondary);
+    .border-color-token(filter-button-selected-border-color, color-stroke-default);
 
     &:focus,
     &:hover,
@@ -34,12 +35,10 @@ button.filter-menu-button__button {
 .filter-menu-button__button-cell {
     display: flex;
 
-    svg.icon {
+    svg.icon--chevron-down-12 {
         align-self: center;
         .color-token(filter-menu-button-icon-color, color-foreground-primary);
-        height: 7px;
         margin-left: 8px;
-        width: 12px;
     }
 }
 
@@ -56,7 +55,7 @@ button.filter-menu-button__button {
 }
 
 button.filter-menu-button__button[aria-pressed="true"] {
-    .border-color-token(filter-button-foreground-color, color-foreground-primary);
+    .border-color-token(filter-button-foreground-color, color-stroke-strong);
     font-weight: bold;
 }
 
@@ -129,14 +128,14 @@ span.filter-menu-button__radio {
 }
 
 span.filter-menu-button__checkbox {
-    svg.icon--checkbox-unchecked {
+    svg.icon--checkbox-unchecked-18 {
         .color-token(filter-menu-item-unchecked-color, color-foreground-secondary);
         display: block;
         height: 18px;
         width: 18px;
     }
 
-    svg.icon--checkbox-checked {
+    svg.icon--checkbox-checked-18 {
         .color-token(filter-menu-item-checked-color, color-foreground-primary);
         display: none;
         height: 18px;
@@ -145,14 +144,14 @@ span.filter-menu-button__checkbox {
 }
 
 span.filter-menu-button__radio {
-    svg.icon--radio-unchecked {
+    svg.icon--radio-unchecked-18 {
         .color-token(filter-menu-item-unchecked-color, color-foreground-primary);
         display: block;
         height: 18px;
         width: 18px;
     }
 
-    svg.icon--radio-checked {
+    svg.icon--radio-checked-18 {
         .color-token(filter-menu-item-checked-color, color-foreground-primary);
         display: none;
         height: 18px;
@@ -227,21 +226,21 @@ button.filter-menu-button__footer {
 }
 
 .filter-menu-button__item[role="menuitemcheckbox"][aria-checked="true"] {
-    svg.icon--checkbox-unchecked {
+    svg.icon--checkbox-unchecked-18 {
         display: none;
     }
 
-    svg.icon--checkbox-checked {
+    svg.icon--checkbox-checked-18 {
         display: block;
     }
 }
 
 .filter-menu-button__item[role="menuitemradio"][aria-checked="true"] {
-    svg.icon--radio-unchecked {
+    svg.icon--radio-unchecked-18 {
         display: none;
     }
 
-    svg.icon--radio-checked {
+    svg.icon--radio-checked-18 {
         display: block;
     }
 }
@@ -252,7 +251,7 @@ div.filter-menu-button__item[role^="menuitem"]:focus:not(:focus-visible) {
 }
 
 [dir="rtl"] {
-    .filter-menu-button__button-cell .icon--dropdown {
+    .filter-menu-button__button-cell .icon--chevron-down-12 {
         margin-left: 0;
         margin-right: 8px;
     }