@fluentui/web-components 1.6.3 → 2.1.0

package/dist/esm/styles/patterns/button.styles.js

@@ -1,29 +1,31 @@
 import { css } from '@microsoft/fast-element';
 import { SystemColors } from '@microsoft/fast-web-utilities';
-import { display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
+import { display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
 import { heightNumber } from '../size';
-import { accentFillActive, accentFillHover, accentFillRest, accentForegroundActive, accentForegroundHover, accentForegroundRest, bodyFont, controlCornerRadius, density, designUnit, focusStrokeInner, focusStrokeOuter, focusStrokeWidth, foregroundOnAccentActive, foregroundOnAccentHover, foregroundOnAccentRest, neutralFillActive, neutralFillHover, neutralFillRest, neutralFillStealthActive, neutralFillStealthHover, neutralFillStealthRest, neutralForegroundRest, neutralStrokeActive, neutralStrokeHover, neutralStrokeRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../../design-tokens';
+import { accentFillActive, accentFillHover, accentFillRest, accentForegroundActive, accentForegroundHover, accentForegroundRest, accentStrokeControlActive, accentStrokeControlHover, accentStrokeControlRest, bodyFont, controlCornerRadius, density, designUnit, focusStrokeInner, focusStrokeOuter, focusStrokeWidth, foregroundOnAccentActive, foregroundOnAccentHover, foregroundOnAccentRest, neutralFillActive, neutralFillHover, neutralFillRest, neutralFillStealthActive, neutralFillStealthHover, neutralFillStealthRest, neutralForegroundRest, neutralStrokeActive, neutralStrokeControlActive, neutralStrokeControlHover, neutralStrokeControlRest, neutralStrokeHover, neutralStrokeRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../../design-tokens';
 /**
  * @internal
  */
-export const baseButtonStyles = (context, definition) => css `
+export const baseButtonStyles = (context, definition, interactivitySelector = '', nonInteractivitySelector = '') => css `
     ${display('inline-flex')} :host {
+      position: relative;
+      box-sizing: border-box;
       font-family: ${bodyFont};
       outline: none;
       font-size: ${typeRampBaseFontSize};
       line-height: ${typeRampBaseLineHeight};
       height: calc(${heightNumber} * 1px);
       min-width: calc(${heightNumber} * 1px);
-      background-color: ${neutralFillRest};
       color: ${neutralForegroundRest};
       border-radius: calc(${controlCornerRadius} * 1px);
       fill: currentcolor;
       cursor: pointer;
     }
 
-    .control {
-      background: transparent;
-      height: inherit;
+    :host .control {
+      background: padding-box linear-gradient(${neutralFillRest}, ${neutralFillRest}),
+        border-box ${neutralStrokeControlRest};
+      border: calc(${strokeWidth} * 1px) solid transparent;
       flex-grow: 1;
       box-sizing: border-box;
       display: inline-flex;
@@ -33,7 +35,6 @@ export const baseButtonStyles = (context, definition) => css `
       white-space: nowrap;
       outline: none;
       text-decoration: none;
-      border: calc(${strokeWidth} * 1px) solid transparent;
       color: inherit;
       border-radius: inherit;
       fill: inherit;
@@ -52,17 +53,23 @@ export const baseButtonStyles = (context, definition) => css `
       line-height: 0;
     }
 
-    :host(:hover) {
-      background-color: ${neutralFillHover};
+    :host .control${interactivitySelector}:hover {
+      background: padding-box linear-gradient(${neutralFillHover}, ${neutralFillHover}),
+        border-box ${neutralStrokeControlHover};
+    }
+
+    :host .control${interactivitySelector}:active {
+      background: padding-box linear-gradient(${neutralFillActive}, ${neutralFillActive}),
+        border-box ${neutralStrokeControlActive};
     }
 
-    :host(:active) {
-      background-color: ${neutralFillActive};
+    :host .control:${focusVisible} {
+      border-color: ${focusStrokeOuter} !important;
+      box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter} inset !important;
     }
 
-    .control:${focusVisible} {
-      border: calc(${strokeWidth} * 1px) solid ${focusStrokeOuter};
-      box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter};
+    :host .control${nonInteractivitySelector} {
+      background: padding-box linear-gradient(${neutralFillRest}, ${neutralFillRest}), border-box ${neutralStrokeRest};
     }
 
     .control::-moz-focus-inner {
@@ -79,14 +86,6 @@ export const baseButtonStyles = (context, definition) => css `
       pointer-events: none;
     }
 
-    ::slotted(svg) {
-      ${
-/* Glyph size and margin-left is temporary -
-    replace when adaptive typography is figured out */ ''} width: 16px;
-      height: 16px;
-      pointer-events: none;
-    }
-
     .start {
       margin-inline-end: 11px;
     }
@@ -95,321 +94,302 @@ export const baseButtonStyles = (context, definition) => css `
       margin-inline-start: 11px;
     }
   `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        :host,
-        :host([appearance="neutral"]) .control {
-          background-color: ${SystemColors.ButtonFace};
+        :host .control {
+          background: ${SystemColors.ButtonFace};
           border-color: ${SystemColors.ButtonText};
           color: ${SystemColors.ButtonText};
           fill: currentcolor;
         }
-
-        :host(:not([disabled][href]):hover),
-        :host([appearance="neutral"]:not([disabled]):hover) .control {
+        :host(:not([disabled])) .control:hover,
+        :host .control${interactivitySelector}:hover,
+        .control${interactivitySelector}:hover {
           forced-color-adjust: none;
-          background-color: ${SystemColors.Highlight};
+          background: ${SystemColors.Highlight};
           color: ${SystemColors.HighlightText};
         }
-
         .control:${focusVisible},
-        :host([appearance="outline"]) .control:${focusVisible},
-        :host([appearance="neutral"]:${focusVisible}) .control {
+        :host .control:${focusVisible},
+        :host(:${focusVisible}) .control {
           forced-color-adjust: none;
-          background-color: ${SystemColors.Highlight};
-          border-color: ${SystemColors.ButtonText};
-          box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${SystemColors.ButtonText};
-          color: ${SystemColors.HighlightText};
-        }
-
-        .control:not([disabled]):hover,
-        :host([appearance="outline"]) .control:hover {
-          border-color: ${SystemColors.ButtonText};
+          background: ${SystemColors.ButtonFace};
+          border-color: ${SystemColors.Highlight} !important;
+          box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${SystemColors.Highlight} !important;
         }
-
         :host([href]) .control {
+          background: ${SystemColors.ButtonFace};
           border-color: ${SystemColors.LinkText};
           color: ${SystemColors.LinkText};
+          fill: currentcolor;
         }
-
         :host([href]) .control:hover,
-        :host(.neutral[href]) .control:hover,
-        :host(.outline[href]) .control:hover,
+        :host(.neutral[href]) .control:hover {
+          background: ${SystemColors.LinkText};
+          border-color: ${SystemColors.LinkText} !important;
+          color: ${SystemColors.HighlightText};
+          fill: currentcolor;
+        }
         :host([href]) .control:${focusVisible}{
           forced-color-adjust: none;
+          border-color: ${SystemColors.LinkText} !important;
+          box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${SystemColors.LinkText} !important;
+        }
+    `));
+/**
+ * @internal
+ */
+export const AccentButtonStyles = (context, definition, interactivitySelector = '', nonInteractivitySelector = '') => css `
+    :host .control {
+      background: padding-box linear-gradient(${accentFillRest}, ${accentFillRest}),
+        border-box ${accentStrokeControlRest};
+      color: ${foregroundOnAccentRest};
+    }
+
+    :host .control${interactivitySelector}:hover {
+      background: padding-box linear-gradient(${accentFillHover}, ${accentFillHover}),
+        border-box ${accentStrokeControlHover};
+      color: ${foregroundOnAccentHover};
+    }
+
+    :host .control${interactivitySelector}:active {
+      background: padding-box linear-gradient(${accentFillActive}, ${accentFillActive}),
+        border-box ${accentStrokeControlActive};
+      color: ${foregroundOnAccentActive};
+    }
+
+    :host .control:${focusVisible} {
+      box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter} inset,
+        0 0 0 calc(((${focusStrokeWidth} + ${strokeWidth}) - ${strokeWidth}) * 1px) ${focusStrokeInner} inset !important;
+    }
+
+    :host .control${nonInteractivitySelector} {
+      background: ${accentFillRest};
+    }
+  `.withBehaviors(forcedColorsStylesheetBehavior(css `
+        :host .control {
+          forced-color-adjust: none;
+          background: ${SystemColors.Highlight};
+          color: ${SystemColors.HighlightText};
+        }
+        :host .control${interactivitySelector}:hover,
+        :host .control${interactivitySelector}:active {
+          background: ${SystemColors.HighlightText};
+          border-color: ${SystemColors.Highlight};
+          color: ${SystemColors.Highlight};
+        }
+        :host .control:${focusVisible} {
+          background: ${SystemColors.Highlight};
+          box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${SystemColors.Highlight} inset,
+            0 0 0 calc(((${focusStrokeWidth} + ${strokeWidth}) - ${strokeWidth}) * 1px) ${SystemColors.HighlightText} inset !important;
+        }
+        :host([href]) .control {
+          background: ${SystemColors.LinkText};
+          color: ${SystemColors.HighlightText};
+        }
+        :host([href]) .control:hover {
           background: ${SystemColors.ButtonFace};
           border-color: ${SystemColors.LinkText};
-          box-shadow: 0 0 0 1px ${SystemColors.LinkText} inset;
+          box-shadow: none;
           color: ${SystemColors.LinkText};
           fill: currentcolor;
         }
-    `));
+        :host([href]) .control:${focusVisible} {
+          background: ${SystemColors.LinkText};
+          box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${SystemColors.LinkText} inset,
+            0 0 0 calc(((${focusStrokeWidth} + ${strokeWidth}) - ${strokeWidth}) * 1px) ${SystemColors.HighlightText} inset !important;
+          color: ${SystemColors.HighlightText};
+          fill: currentcolor;
+        }
+      `));
 /**
  * @internal
  */
-export const AccentButtonStyles = css `
-  :host([appearance='accent']) {
-    background: ${accentFillRest};
-    color: ${foregroundOnAccentRest};
-  }
-
-  :host([appearance='accent']:hover) {
-    background: ${accentFillHover};
-    color: ${foregroundOnAccentHover};
-  }
-
-  :host([appearance='accent']:active) .control:active {
-    background: ${accentFillActive};
-    color: ${foregroundOnAccentActive};
-  }
-
-  :host([appearance="accent"]) .control:${focusVisible} {
-    box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) inset ${focusStrokeInner},
-      0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter};
-  }
-`.withBehaviors(forcedColorsStylesheetBehavior(css `
-      :host([appearance='accent']) .control {
-        forced-color-adjust: none;
-        background: ${SystemColors.Highlight};
-        color: ${SystemColors.HighlightText};
-      }
+export const HypertextStyles = (context, definition, interactivitySelector = '', nonInteractivitySelector = '') => css `
+    :host {
+      height: auto;
+      font-family: inherit;
+      font-size: inherit;
+      line-height: inherit;
+      min-width: 0;
+    }
 
-      :host([appearance='accent']) .control:hover,
-      :host([appearance='accent']:active) .control:active {
-        background: ${SystemColors.HighlightText};
-        border-color: ${SystemColors.Highlight};
-        color: ${SystemColors.Highlight};
-      }
+    :host .control {
+      display: inline;
+      padding: 0;
+      background: transparent;
+      border: none;
+      box-shadow: none;
+      line-height: 1;
+      text-decoration: underline 1px;
+    }
 
-      :host([appearance="accent"]) .control:${focusVisible} {
-        border-color: ${SystemColors.ButtonText};
-        box-shadow: 0 0 0 2px ${SystemColors.HighlightText} inset;
-      }
+    :host .control:not([href]) {
+      background: transparent;
+    }
 
-      :host([appearance='accent'][href]) .control {
-        background: ${SystemColors.LinkText};
-        color: ${SystemColors.HighlightText};
-      }
+    :host .control${interactivitySelector} {
+      background: transparent;
+      color: ${accentForegroundRest};
+    }
 
-      :host([appearance='accent'][href]) .control:hover {
-        background: ${SystemColors.ButtonFace};
-        border-color: ${SystemColors.LinkText};
-        box-shadow: none;
-        color: ${SystemColors.LinkText};
-        fill: currentcolor;
-      }
+    :host .control${interactivitySelector}:hover {
+      background: transparent;
+      color: ${accentForegroundHover};
+      text-decoration: none;
+    }
 
-      :host([appearance="accent"][href]) .control:${focusVisible} {
-        border-color: ${SystemColors.LinkText};
-        box-shadow: 0 0 0 2px ${SystemColors.HighlightText} inset;
+    :host .control${interactivitySelector}:active {
+      background: transparent;
+      color: ${accentForegroundActive};
+      text-decoration: none;
+    }
+
+    :host .control:${focusVisible} {
+      box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) ${focusStrokeOuter} !important;
+    }
+
+    :host .control${nonInteractivitySelector} {
+      background: transparent;
+    }
+  `.withBehaviors(forcedColorsStylesheetBehavior(css `
+      :host .control${interactivitySelector}:hover {
+        color: ${SystemColors.Highlight};
+        fill: currentcolor;
       }
-    `));
-/**
- * @internal
- */
-export const HypertextStyles = css `
-  :host([appearance='hypertext']) {
-    height: auto;
-    font-size: inherit;
-    line-height: inherit;
-    background: transparent;
-    min-width: 0;
-  }
-
-  :host([appearance='hypertext']) .control {
-    display: inline;
-    padding: 0;
-    border: none;
-    box-shadow: none;
-    border-radius: 0;
-    line-height: 1;
-  }
-  :host a.control:not(:link) {
-    background-color: transparent;
-    cursor: default;
-  }
-  :host([appearance='hypertext']) .control:link,
-  :host([appearance='hypertext']) .control:visited {
-    background: transparent;
-    color: ${accentForegroundRest};
-    border-bottom: calc(${strokeWidth} * 1px) solid ${accentForegroundRest};
-  }
-  :host([appearance='hypertext']) .control:hover {
-    border-bottom-color: ${accentForegroundHover};
-  }
-  :host([appearance='hypertext']) .control:active {
-    border-bottom-color: ${accentForegroundActive};
-  }
-  :host([appearance="hypertext"]) .control:${focusVisible} {
-    border-bottom: calc(${focusStrokeWidth} * 1px) solid ${focusStrokeOuter};
-    margin-bottom: calc(calc(${strokeWidth} - ${focusStrokeWidth}) * 1px);
-  }
-`.withBehaviors(forcedColorsStylesheetBehavior(css `
-      :host([appearance="hypertext"]) .control:${focusVisible} {
+      :host .control:${focusVisible} {
         color: ${SystemColors.LinkText};
-        border-bottom-color: ${SystemColors.LinkText};
       }
-    `));
+      `));
 /**
  * @internal
  */
-export const LightweightButtonStyles = css `
-  :host([appearance='lightweight']) {
-    background: transparent;
-    color: ${accentForegroundRest};
-  }
-
-  :host([appearance='lightweight']) .control {
-    padding: 0;
-    height: initial;
-    border: none;
-    box-shadow: none;
-    border-radius: 0;
-  }
-
-  :host([appearance='lightweight']:hover) {
-    color: ${accentForegroundHover};
-  }
-
-  :host([appearance='lightweight']:active) {
-    color: ${accentForegroundActive};
-  }
-
-  :host([appearance='lightweight']) .content {
-    position: relative;
-  }
-
-  :host([appearance='lightweight']) .content::before {
-    content: '';
-    display: block;
-    height: calc(${strokeWidth} * 1px);
-    position: absolute;
-    top: calc(1em + 3px);
-    width: 100%;
-  }
-
-  :host([appearance='lightweight']:hover) .content::before {
-    background: ${accentForegroundHover};
-  }
-
-  :host([appearance='lightweight']:active) .content::before {
-    background: ${accentForegroundActive};
-  }
-
-  :host([appearance="lightweight"]) .control:${focusVisible} .content::before {
-    background: ${neutralForegroundRest};
-    height: calc(${focusStrokeWidth} * 1px);
-  }
-`.withBehaviors(forcedColorsStylesheetBehavior(css `
-      :host([appearance='lightweight']) {
-        color: ${SystemColors.ButtonText};
-      }
-      :host([appearance="lightweight"]) .control:hover,
-        :host([appearance="lightweight"]) .control:${focusVisible} {
-        forced-color-adjust: none;
-        background: ${SystemColors.ButtonFace};
-        color: ${SystemColors.Highlight};
-      }
-      :host([appearance="lightweight"]) .control:hover .content::before,
-        :host([appearance="lightweight"]) .control:${focusVisible} .content::before {
-        background: ${SystemColors.Highlight};
-      }
+export const LightweightButtonStyles = (context, definition, interactivitySelector = '', nonInteractivitySelector = '') => css `
+    :host {
+      color: ${accentForegroundRest};
+    }
 
-      :host([appearance="lightweight"][href]) .control:hover,
-        :host([appearance="lightweight"][href]) .control:${focusVisible} {
-        background: ${SystemColors.ButtonFace};
-        box-shadow: none;
-        color: ${SystemColors.LinkText};
-      }
+    :host .control {
+      background: ${neutralFillStealthRest};
+    }
 
-      :host([appearance="lightweight"][href]) .control:hover .content::before,
-        :host([appearance="lightweight"][href]) .control:${focusVisible} .content::before {
-        background: ${SystemColors.LinkText};
-      }
-    `));
+    :host .control${interactivitySelector}:hover {
+      background: ${neutralFillStealthHover};
+      color: ${accentForegroundHover};
+    }
+
+    :host .control${interactivitySelector}:active {
+      background: ${neutralFillStealthActive};
+      color: ${accentForegroundActive};
+    }
+
+    :host .control${nonInteractivitySelector} {
+      background: ${neutralFillStealthRest};
+    }
+  `.withBehaviors(forcedColorsStylesheetBehavior(css `
+        :host .control {
+          border-color: ${SystemColors.ButtonFace};
+          color: ${SystemColors.ButtonText};
+        }
+        :host .control${interactivitySelector}:hover,
+        :host .control${interactivitySelector}:active,
+        :host .control:${focusVisible} {
+          border-color: ${SystemColors.Highlight};
+          background: ${SystemColors.Highlight};
+          box-shadow: none;
+          color: ${SystemColors.HighlightText};
+        }
+        :host([href]) .control {
+          border-color: ${SystemColors.ButtonFace};
+          color: ${SystemColors.LinkText};
+        }
+        :host([href]) .control:hover,
+        :host([href]) .control:${focusVisible} {
+          background: ${SystemColors.ButtonFace};
+          box-shadow: none;
+          color: ${SystemColors.LinkText};
+        }
+      `));
 /**
  * @internal
  */
-export const OutlineButtonStyles = css `
-  :host([appearance='outline']) {
-    background: transparent;
-    border-color: ${neutralStrokeRest};
-  }
-
-  :host([appearance='outline']:hover) {
-    border-color: ${neutralStrokeHover};
-  }
-
-  :host([appearance='outline']:active) {
-    border-color: ${neutralStrokeActive};
-  }
-
-  :host([appearance='outline']) .control {
-    border-color: inherit;
-  }
-
-  :host([appearance="outline"]) .control:${focusVisible} {
-    box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter};
-    border-color: ${focusStrokeOuter};
-  }
-`.withBehaviors(forcedColorsStylesheetBehavior(css `
-      :host([appearance='outline']) {
-        border-color: ${SystemColors.ButtonText};
-      }
-      :host([appearance='outline'][href]) {
-        border-color: ${SystemColors.LinkText};
-      }
-    `));
+export const OutlineButtonStyles = (context, definition, interactivitySelector = '', nonInteractivitySelector = '') => css `
+    :host .control {
+      background: transparent !important;
+      border-color: ${neutralStrokeRest};
+    }
+
+    :host .control${interactivitySelector}:hover {
+      border-color: ${neutralStrokeHover};
+    }
+
+    :host .control${interactivitySelector}:active {
+      border-color: ${neutralStrokeActive};
+    }
+
+    :host .control${nonInteractivitySelector} {
+      background: transparent !important;
+      border-color: ${neutralStrokeRest};
+    }
+  `.withBehaviors(forcedColorsStylesheetBehavior(css `
+        :host .control${nonInteractivitySelector} {
+          border-color: ${SystemColors.ButtonText};
+        }
+        :host .control${interactivitySelector}:hover {
+          border-color: ${SystemColors.Highlight};
+          color: ${SystemColors.ButtonText};
+        }
+        :host([href]) {
+          border-color: ${SystemColors.LinkText};
+        }
+        :host([href]) .control:hover {
+          box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${SystemColors.LinkText};
+          color: ${SystemColors.LinkText};
+        }
+      `));
 /**
  * @internal
  */
-export const StealthButtonStyles = css `
-  :host([appearance='stealth']) {
-    background: ${neutralFillStealthRest};
-  }
-
-  :host([appearance='stealth']:hover) {
-    background: ${neutralFillStealthHover};
-  }
-
-  :host([appearance='stealth']:active) {
-    background: ${neutralFillStealthActive};
-  }
-`.withBehaviors(forcedColorsStylesheetBehavior(css `
-      :host([appearance='stealth']),
-      :host([appearance='stealth']) .control {
-        forced-color-adjust: none;
-        background: ${SystemColors.ButtonFace};
-        border-color: transparent;
-        color: ${SystemColors.ButtonText};
-        fill: currentcolor;
-      }
-
-      :host([appearance='stealth']:hover) .control {
-        background: ${SystemColors.Highlight};
-        border-color: ${SystemColors.Highlight};
-        color: ${SystemColors.HighlightText};
-        fill: currentcolor;
-      }
-
-      :host([appearance="stealth"]:${focusVisible}) .control {
-        background: ${SystemColors.Highlight};
-        box-shadow: 0 0 0 1px ${SystemColors.Highlight};
-        color: ${SystemColors.HighlightText};
-        fill: currentcolor;
-      }
+export const StealthButtonStyles = (context, definition, interactivitySelector = '', nonInteractivitySelector = '') => css `
+    :host .control {
+      background: ${neutralFillStealthRest};
+    }
 
-      :host([appearance='stealth'][href]) .control {
-        color: ${SystemColors.LinkText};
-      }
+    :host .control${interactivitySelector}:hover {
+      background: ${neutralFillStealthHover};
+    }
 
-      :host([appearance="stealth"]:hover[href]) .control,
-        :host([appearance="stealth"]:${focusVisible}[href]) .control {
-        background: ${SystemColors.LinkText};
-        border-color: ${SystemColors.LinkText};
-        color: ${SystemColors.HighlightText};
-        fill: currentcolor;
-      }
+    :host .control${interactivitySelector}:active {
+      background: ${neutralFillStealthActive};
+    }
 
-      :host([appearance="stealth"]:${focusVisible}[href]) .control {
-        box-shadow: 0 0 0 1px ${SystemColors.LinkText};
-      }
-    `));
+    :host .control${nonInteractivitySelector} {
+      background: ${neutralFillStealthRest};
+    }
+  `.withBehaviors(forcedColorsStylesheetBehavior(css `
+        :host .control {
+          background: ${SystemColors.ButtonFace};
+          border-color: ${SystemColors.ButtonFace};
+          color: ${SystemColors.ButtonText};
+          fill: currentcolor;
+        }
+        :host .control${interactivitySelector}:hover,
+        :host .control${interactivitySelector}:active,
+        :host .control:${focusVisible} {
+          background: ${SystemColors.Highlight};
+          border-color: ${SystemColors.Highlight};
+          box-shadow: none !important;
+          color: ${SystemColors.HighlightText};
+          fill: currentcolor;
+        }
+        :host([href]) .control {
+          border-color: ${SystemColors.ButtonFace};
+          color: ${SystemColors.LinkText};
+        }
+        :host([href]) .control:hover,
+        :host([href]) .control:${focusVisible} {
+          background: ${SystemColors.LinkText};
+          border-color: ${SystemColors.LinkText};
+          box-shadow: none !important;
+          color: ${SystemColors.HighlightText};
+          fill: currentcolor;
+        }
+      `));

package/dist/esm/styles/patterns/index.js

@@ -1,2 +1,2 @@
 export * from './button.styles';
-export * from './input';
+export * from './input.styles';