@ebay/skin 17.3.0 → 17.4.0-next.0

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

@@ -441,6 +441,244 @@ export const overflow = () => `
 </span>
 `;
 
+export const textSpacing = () => `
+<span class="filter-menu-button demo-a11y-text-spacing">
+    <button type="button" class="filter-menu-button__button" aria-expanded="true">
+        <span class="filter-menu-button__button-cell">
+            <span class="filter-menu-button__button-text">Filter Menu Button</span>
+            <svg class="icon icon--chevron-down-12" height="12" width="12">
+                <use href="#icon-chevron-down-12"></use>
+            </svg>
+        </span>
+    </button>
+    <div class="filter-menu-button__menu">
+        <div class="filter-menu-button__items" role="menu">
+            <div class="filter-menu-button__item" role="menuitemcheckbox" tabindex="0" aria-checked="false">
+                <span class="filter-menu-button__checkbox">
+                    <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
+                        <use href="#icon-checkbox-unchecked-18"></use>
+                    </svg>
+                    <svg class="icon icon--checkbox-checked-18" height="18" width="18">
+                        <use href="#icon-checkbox-checked-18"></use>
+                    </svg>
+                </span>
+                <span class="filter-menu-button__text">Item 1</span>
+            </div>
+            <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
+                <span class="filter-menu-button__checkbox">
+                    <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
+                        <use href="#icon-checkbox-unchecked-18"></use>
+                    </svg>
+                    <svg class="icon icon--checkbox-checked-18" height="18" width="18">
+                        <use href="#icon-checkbox-checked-18"></use>
+                    </svg>
+                </span>
+                <span class="filter-menu-button__text">Item 2</span>
+            </div>
+            <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
+                <span class="filter-menu-button__checkbox">
+                    <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
+                        <use href="#icon-checkbox-unchecked-18"></use>
+                    </svg>
+                    <svg class="icon icon--checkbox-checked-18" height="18" width="18">
+                        <use href="#icon-checkbox-checked-18"></use>
+                    </svg>
+                </span>
+                <span class="filter-menu-button__text">Item 3</span>
+            </div>
+            <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
+                <span class="filter-menu-button__checkbox">
+                    <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
+                        <use href="#icon-checkbox-unchecked-18"></use>
+                    </svg>
+                    <svg class="icon icon--checkbox-checked-18" height="18" width="18">
+                        <use href="#icon-checkbox-checked-18"></use>
+                    </svg>
+                </span>
+                <span class="filter-menu-button__text">Item 4</span>
+            </div>
+            <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
+                <span class="filter-menu-button__checkbox">
+                    <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
+                        <use href="#icon-checkbox-unchecked-18"></use>
+                    </svg>
+                    <svg class="icon icon--checkbox-checked-18" height="18" width="18">
+                        <use href="#icon-checkbox-checked-18"></use>
+                    </svg>
+                </span>
+                <span class="filter-menu-button__text">Item 5</span>
+            </div>
+            <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
+                <span class="filter-menu-button__checkbox">
+                    <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
+                        <use href="#icon-checkbox-unchecked-18"></use>
+                    </svg>
+                    <svg class="icon icon--checkbox-checked-18" height="18" width="18">
+                        <use href="#icon-checkbox-checked-18"></use>
+                    </svg>
+                </span>
+                <span class="filter-menu-button__text">Item 6</span>
+            </div>
+            <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
+                <span class="filter-menu-button__checkbox">
+                    <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
+                        <use href="#icon-checkbox-unchecked-18"></use>
+                    </svg>
+                    <svg class="icon icon--checkbox-checked-18" height="18" width="18">
+                        <use href="#icon-checkbox-checked-18"></use>
+                    </svg>
+                </span>
+                <span class="filter-menu-button__text">Item 7</span>
+            </div>
+            <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
+                <span class="filter-menu-button__checkbox">
+                    <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
+                        <use href="#icon-checkbox-unchecked-18"></use>
+                    </svg>
+                    <svg class="icon icon--checkbox-checked-18" height="18" width="18">
+                        <use href="#icon-checkbox-checked-18"></use>
+                    </svg>
+                </span>
+                <span class="filter-menu-button__text">Item 8</span>
+            </div>
+            <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
+                <span class="filter-menu-button__checkbox">
+                    <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
+                        <use href="#icon-checkbox-unchecked-18"></use>
+                    </svg>
+                    <svg class="icon icon--checkbox-checked-18" height="18" width="18">
+                        <use href="#icon-checkbox-checked-18"></use>
+                    </svg>
+                </span>
+                <span class="filter-menu-button__text">Item 9</span>
+            </div>
+            <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
+                <span class="filter-menu-button__checkbox">
+                    <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
+                        <use href="#icon-checkbox-unchecked-18"></use>
+                    </svg>
+                    <svg class="icon icon--checkbox-checked-18" height="18" width="18">
+                        <use href="#icon-checkbox-checked-18"></use>
+                    </svg>
+                </span>
+                <span class="filter-menu-button__text">Item 10</span>
+            </div>
+            <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
+                <span class="filter-menu-button__checkbox">
+                    <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
+                        <use href="#icon-checkbox-unchecked-18"></use>
+                    </svg>
+                    <svg class="icon icon--checkbox-checked-18" height="18" width="18">
+                        <use href="#icon-checkbox-checked-18"></use>
+                    </svg>
+                </span>
+                <span class="filter-menu-button__text">Item 11</span>
+            </div>
+            <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
+                <span class="filter-menu-button__checkbox">
+                    <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
+                        <use href="#icon-checkbox-unchecked-18"></use>
+                    </svg>
+                    <svg class="icon icon--checkbox-checked-18" height="18" width="18">
+                        <use href="#icon-checkbox-checked-18"></use>
+                    </svg>
+                </span>
+                <span class="filter-menu-button__text">Item 12</span>
+            </div>
+            <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
+                <span class="filter-menu-button__checkbox">
+                    <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
+                        <use href="#icon-checkbox-unchecked-18"></use>
+                    </svg>
+                    <svg class="icon icon--checkbox-checked-18" height="18" width="18">
+                        <use href="#icon-checkbox-checked-18"></use>
+                    </svg>
+                </span>
+                <span class="filter-menu-button__text">Item 13</span>
+            </div>
+            <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
+                <span class="filter-menu-button__checkbox">
+                    <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
+                        <use href="#icon-checkbox-unchecked-18"></use>
+                    </svg>
+                    <svg class="icon icon--checkbox-checked-18" height="18" width="18">
+                        <use href="#icon-checkbox-checked-18"></use>
+                    </svg>
+                </span>
+                <span class="filter-menu-button__text">Item 14</span>
+            </div>
+            <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
+                <span class="filter-menu-button__checkbox">
+                    <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
+                        <use href="#icon-checkbox-unchecked-18"></use>
+                    </svg>
+                    <svg class="icon icon--checkbox-checked-18" height="18" width="18">
+                        <use href="#icon-checkbox-checked-18"></use>
+                    </svg>
+                </span>
+                <span class="filter-menu-button__text">Item 15</span>
+            </div>
+            <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
+                <span class="filter-menu-button__checkbox">
+                    <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
+                        <use href="#icon-checkbox-unchecked-18"></use>
+                    </svg>
+                    <svg class="icon icon--checkbox-checked-18" height="18" width="18">
+                        <use href="#icon-checkbox-checked-18"></use>
+                    </svg>
+                </span>
+                <span class="filter-menu-button__text">Item 16</span>
+            </div>
+            <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
+                <span class="filter-menu-button__checkbox">
+                    <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
+                        <use href="#icon-checkbox-unchecked-18"></use>
+                    </svg>
+                    <svg class="icon icon--checkbox-checked-18" height="18" width="18">
+                        <use href="#icon-checkbox-checked-18"></use>
+                    </svg>
+                </span>
+                <span class="filter-menu-button__text">Item 17</span>
+            </div>
+            <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
+                <span class="filter-menu-button__checkbox">
+                    <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
+                        <use href="#icon-checkbox-unchecked-18"></use>
+                    </svg>
+                    <svg class="icon icon--checkbox-checked-18" height="18" width="18">
+                        <use href="#icon-checkbox-checked-18"></use>
+                    </svg>
+                </span>
+                <span class="filter-menu-button__text">Item 18</span>
+            </div>
+            <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
+                <span class="filter-menu-button__checkbox">
+                    <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
+                        <use href="#icon-checkbox-unchecked-18"></use>
+                    </svg>
+                    <svg class="icon icon--checkbox-checked-18" height="18" width="18">
+                        <use href="#icon-checkbox-checked-18"></use>
+                    </svg>
+                </span>
+                <span class="filter-menu-button__text">Item 19</span>
+            </div>
+            <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
+                <span class="filter-menu-button__checkbox">
+                    <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
+                        <use href="#icon-checkbox-unchecked-18"></use>
+                    </svg>
+                    <svg class="icon icon--checkbox-checked-18" height="18" width="18">
+                        <use href="#icon-checkbox-checked-18"></use>
+                    </svg>
+                </span>
+                <span class="filter-menu-button__text">Item 20</span>
+            </div>
+        </div>
+        <button type="button" class="filter-menu__footer">Apply</button>
+    </div>
+</span>
+`;
+
 export const truncated = () => `
 <span class="filter-menu-button">
     <button aria-expanded="true" type="button" class="filter-menu-button__button">

package/src/less/flag/stories/flag.stories.js

@@ -46,3 +46,12 @@ export const beforeLink = () => `
     <span style="vertical-align: middle;">United States of America</span>
 </a>
 `;
+
+export const textSpacing = () => `
+<p class="demo-a11y-text-spacing">
+    <svg class="flag flag--us">
+        <use href="#flag-us"></use>
+    </svg>
+    <span style="vertical-align: middle;">United States of America</span>
+</p>
+`;

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

@@ -185,3 +185,105 @@ export const TextArea = () => `
     </span>
 </span>
 `;
+
+export const textSpacing = () => `
+<span class="floating-label demo-a11y-text-spacing">
+    <label class="floating-label__label" for="firstName">First Name</label>
+    <span class="textbox">
+        <input class="textbox__control" id="firstName" type="text" />
+    </span>
+</span>
+`;
+
+export const phoneInput = () => `
+<span class="phone-input">
+    <span class="listbox-button listbox-button--form">
+    <button class="btn btn--form btn--split-start" aria-expanded="false" aria-haspopup="listbox" type="button"
+        data-listbox-button-prefix="Country: " aria-label="Country: United States of America (+1)">
+        <span class="btn__cell">
+        <span class="btn__text">
+            <svg class="flag flag--us" focusable="false" height="18" width="24" aria-hidden="true" data-country-code="1">
+            <use href="#flag-us"></use>
+            </svg>
+        </span>
+        <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+            <use href="#icon-chevron-down-12"></use>
+        </svg>
+        </span>
+    </button>
+    <div class="listbox-button__listbox">
+        <div class="listbox-button__options" role="listbox">
+        <div class="listbox-button__option" role="option">
+            <span class="listbox-button__value">
+            <svg class="flag flag--al" focusable="false" height="18" width="24" aria-hidden="true" data-country-code="355">
+                <use href="#flag-al"></use>
+            </svg>
+            <span>Albania</span>
+            <span>(+355)</span>
+            </span>
+            <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
+            <use href="#icon-tick-16"></use>
+            </svg>
+        </div>
+        <div class="listbox-button__option" role="option">
+            <span class="listbox-button__value">
+            <svg class="flag flag--in" focusable="false" height="18" width="24" aria-hidden="true" data-country-code="91">
+                <use href="#flag-in"></use>
+            </svg>
+            <span>India</span>
+            <span>(+91)</span>
+            </span>
+            <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
+            <use href="#icon-tick-16"></use>
+            </svg>
+        </div>
+        <div class="listbox-button__option" role="option">
+            <span class="listbox-button__value">
+            <svg class="flag flag--sh" focusable="false" height="18" width="24" aria-hidden="true" data-country-code="290">
+                <use href="#flag-sh"></use>
+            </svg>
+            <span>Saint Helena, Ascension and Tristan da Cunha</span>
+            <span>(+290)</span>
+            </span>
+            <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
+            <use href="#icon-tick-16"></use>
+            </svg>
+        </div>
+        <div class="listbox-button__option" role="option">
+            <span class="listbox-button__value">
+            <svg class="flag flag--gb" focusable="false" height="18" width="24" aria-hidden="true" data-country-code="44">
+                <use href="#flag-gb"></use>
+            </svg>
+            <span>United Kingdom</span>
+            <span>(+44)</span>
+            </span>
+            <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
+            <use href="#icon-tick-16"></use>
+            </svg>
+        </div>
+        <div class="listbox-button__option" role="option" aria-selected="true">
+            <span class="listbox-button__value">
+            <svg class="flag flag--us" focusable="false" height="18" width="24" aria-hidden="true" data-country-code="1">
+                <use href="#flag-us"></use>
+            </svg>
+            <span>United States of America</span>
+            <span>(+1)</span>
+            </span>
+            <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
+            <use href="#icon-tick-16"></use>
+            </svg>
+        </div>
+        </div>
+    </div>
+    </span>
+    <span class="field floating-label">
+    <label class="floating-label__label" for="field1"><span class="clipped">Area code + </span>Phone
+        Number</label>
+        <span class="textbox">
+        <span id="floating-phone-prefix-0">+1</span>
+        <input class="textbox__control" type="tel" aria-label="area code + phone number"
+            autocomplete="tel-national" aria-describedby="floating-phone-prefix-0"/>
+        </span>
+    </span>
+</span>
+`;

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

@@ -116,3 +116,30 @@ export const secondaryButton = () => `
     </div>
 </div>
 `;
+
+export const textSpacing = () => `
+<div aria-labelledby="fullscreen-dialog-title" aria-modal="true" class="fullscreen-dialog demo-a11y-text-spacing" role="dialog">
+    <div class="fullscreen-dialog__window">
+        <div class="fullscreen-dialog__header">
+            <h2 id="fullscreen-dialog-title">Dialog Full</h2>
+            <button class="icon-btn fullscreen-dialog__close" type="button" aria-label="Close Dialog">
+                <svg class="icon icon--close-16" aria-hidden="true">
+                    <use href="#icon-close-16"></use>
+                </svg>
+            </button>
+        </div>
+        <div class="fullscreen-dialog__main">
+            <h3>Heading</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <h3>Heading</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+        </div>
+        <div class="fullscreen-dialog__footer">
+            <button class="btn btn--primary">Submit</button>
+            <button class="btn">Cancel</button>
+        </div>
+    </div>
+</div>
+`;

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

@@ -14,6 +14,22 @@ export const headings = () => `
     <h6>This is a level 6 heading</h6>
 `;
 
+export const headingsTextSpacing = () => `
+<div class="demo-a11y-text-spacing">
+    <h1>This is a level 1 heading</h1>
+    <hr/>
+    <h2>This is a level 2 heading</h2>
+    <hr/>
+    <h3>This is a level 3 heading</h3>
+    <hr/>
+    <h4>This is a level 4 heading</h4>
+    <hr/>
+    <h5>This is a level 5 heading</h5>
+    <hr/>
+    <h6>This is a level 6 heading</h6>
+</div>
+`;
+
 export const RTLHeadings = () => `
 <div dir="rtl">
     <h1>This is a level 1 heading</h1>

package/src/less/icon/generated/icon.less

@@ -295,6 +295,14 @@ svg.icon--bookmark-24 {
     height: 24px;
     width: 24px;
 }
+svg.icon--bookmark-filled-16 {
+    height: 16px;
+    width: 16px;
+}
+svg.icon--bookmark-filled-24 {
+    height: 24px;
+    width: 24px;
+}
 svg.icon--brand-authorized-seller-16 {
     height: 16px;
     width: 16px;
@@ -887,6 +895,14 @@ svg.icon--euro-24 {
     height: 24px;
     width: 24px;
 }
+svg.icon--exclude-16 {
+    height: 16px;
+    width: 16px;
+}
+svg.icon--exclude-24 {
+    height: 24px;
+    width: 24px;
+}
 svg.icon--expand-16 {
     height: 16px;
     width: 16px;
@@ -1287,6 +1303,10 @@ svg.icon--inspect-24 {
     height: 24px;
     width: 24px;
 }
+svg.icon--inspect-64 {
+    height: 64px;
+    width: 64px;
+}
 svg.icon--instagram-24 {
     height: 24px;
     width: 24px;

package/src/less/icon-button/icon-button.less

@@ -18,6 +18,7 @@ a.icon-link {
     box-sizing: border-box;
     font-family: inherit;
     height: 40px;
+    justify-content: center;
     margin: 0;
     padding: 0;
     vertical-align: text-bottom;
@@ -43,6 +44,29 @@ a.icon-link {
     }
 }
 
+button.icon-btn.icon-btn--primary,
+a.icon-link.icon-link--primary {
+    .background-color-token(btn-primary-background-color, color-background-accent);
+    .border-color-token(btn-primary-border-color, color-stroke-accent);
+    .color-token(btn-primary-foreground-color, color-foreground-on-accent);
+}
+
+button.icon-btn.icon-btn--primary > svg,
+a.icon-link.icon-link--primary > svg {
+    .fill-token(icon-button-icon-foreground-color, color-foreground-on-accent);
+}
+
+button.icon-btn.icon-btn--secondary > svg,
+a.icon-link.icon-link--secondary > svg {
+    .fill-token(icon-button-icon-foreground-color, color-foreground-accent);
+}
+
+button.icon-btn.icon-btn--small .progress-spinner,
+a.icon-link.icon-link--small .progress-spinner {
+    height: 20px;
+    width: 20px;
+}
+
 button.icon-btn.icon-btn--transparent > svg,
 a.icon-link.icon-link--transparent > svg {
     max-width: 100%;
@@ -142,3 +166,112 @@ a.icon-link > svg.icon--information-filled-16 {
         .fill-token(color-foreground-information);
     }
 }
+
+button.icon-btn.icon-btn--primary,
+a.icon-link.icon-link--primary,
+button.icon-btn.icon-btn--secondary,
+a.icon-link.icon-link--secondary,
+button.icon-btn.icon-btn--tertiary,
+a.icon-link.icon-link--tertiary {
+    border-width: 1px;
+}
+
+button[disabled].icon-btn.icon-btn--primary,
+button[aria-disabled="true"].icon-btn.icon-btn--primary,
+a:not([href]).icon-link.icon-link--primary,
+a[aria-disabled="true"].icon-link.icon-link--primary {
+    .background-color-token(icon-button-disabled-background-color, color-background-disabled);
+    .border-color-token(btn-primary-disabled-border-color, color-stroke-disabled);
+}
+
+button[disabled].icon-btn.icon-btn--primary > svg,
+button[aria-disabled="true"].icon-btn.icon-btn--primary > svg,
+a:not([href]).icon-link.icon-link--primary > svg,
+a[aria-disabled="true"].icon-link.icon-link--primary > svg {
+    .fill-token(icon-button-icon-foreground-color, color-foreground-on-accent);
+}
+
+button.icon-btn.icon-btn--primary .progress-spinner,
+a.icon-link.icon-link--primary .progress-spinner {
+    --color-spinner-icon-background: var(--color-background-primary);
+    --color-spinner-icon-foreground: #8fa3f8; // 40% of white on top of --color-foreground-on-accent
+}
+
+button.icon-btn.icon-btn--secondary,
+a.icon-link.icon-link--secondary {
+    background-color: transparent;
+    .border-color-token(btn-secondary-border-color, color-stroke-accent);
+    .color-token(btn-secondary-foreground-color, color-foreground-accent);
+}
+
+button.icon-btn.icon-btn--primary:not([disabled], [aria-disabled="true"]),
+a.icon-link.icon-link--primary:not([disabled], [aria-disabled="true"]) {
+    &:hover,
+    &:focus {
+        background-blend-mode: multiply;
+        filter: brightness(96%);
+    }
+
+    &:active {
+        filter: brightness(92%);
+    }
+}
+
+button.icon-btn.icon-btn--secondary .progress-spinner,
+a.icon-link.icon-link--secondary .progress-spinner,
+button.icon-btn.icon-btn--tertiary .progress-spinner,
+a.icon-link.icon-link--tertiary .progress-spinner {
+    --color-spinner-icon-foreground: #3665f366; // 40% of #3665f3
+}
+
+button[disabled].icon-btn.icon-btn--secondary,
+button[aria-disabled="true"].icon-btn.icon-btn--secondary,
+a:not([href]).icon-link.icon-link--secondary,
+a[aria-disabled="true"].icon-link.icon-link--secondary {
+    .border-color-token(btn-secondary-disabled-border-color, color-stroke-disabled);
+}
+
+button[disabled].icon-btn.icon-btn--secondary > svg,
+button[aria-disabled="true"].icon-btn.icon-btn--secondary > svg,
+a:not([href]).icon-link.icon-blinktn--secondary > svg,
+a[aria-disabled="true"].icon-link.icon-link--secondary > svg {
+    .fill-token(icon-button-icon-foreground-color, color-foreground-disabled);
+}
+
+button.icon-btn.icon-btn--secondary:not([disabled], [aria-disabled="true"]),
+a.icon-link.icon-link--secondary:not([disabled], [aria-disabled="true"]) {
+    &:hover,
+    &:focus {
+        background-color: var(--color-state-secondary-hover);
+    }
+
+    &:active {
+        background-color: var(--color-state-secondary-active);
+    }
+}
+
+button.icon-btn.icon-btn--tertiary,
+a.icon-link.icon-link--tertiary {
+    background-color: transparent;
+    .border-color-token(btn-primary-border-color, color-stroke-default);
+    .color-token(btn-primary-foreground-color, color-foreground-accent);
+}
+
+button[disabled].icon-btn.icon-btn--tertiary,
+button[aria-disabled="true"].icon-btn.icon-btn--tertiary,
+a:not([href]).icon-link.icon-link--tertiary,
+a[aria-disabled="true"].icon-link.icon-link--tertiary {
+    .border-color-token(btn-tertiary-disabled-border-color, color-stroke-disabled);
+}
+
+button.icon-btn.icon-btn--tertiary:not([disabled], [aria-disabled="true"]),
+a.icon-link.icon-link--tertiary:not([disabled], [aria-disabled="true"]) {
+    &:hover,
+    &:focus {
+        background-color: var(--color-state-secondary-hover);
+    }
+
+    &:active {
+        background-color: var(--color-state-secondary-active);
+    }
+}