@fluentui/web-components 2.5.5 → 2.5.7

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

@@ -2,28 +2,29 @@ import { css } from '@microsoft/fast-element';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
 import { heightNumber } from '../size';
-import { accentFillActive, accentFillHover, accentFillRest, accentForegroundActive, accentForegroundHover, accentForegroundRest, accentStrokeControlActive, accentStrokeControlHover, accentStrokeControlRest, controlCornerRadius, density, designUnit, focusStrokeInner, focusStrokeOuter, focusStrokeWidth, foregroundOnAccentActive, foregroundOnAccentHover, foregroundOnAccentRest, neutralFillActive, neutralFillHover, neutralFillRest, neutralFillStealthActive, neutralFillStealthHover, neutralFillStealthRest, neutralForegroundRest, neutralStrokeActive, neutralStrokeControlActive, neutralStrokeControlHover, neutralStrokeControlRest, neutralStrokeHover, neutralStrokeRest, strokeWidth, } from '../../design-tokens';
+import { accentFillActive, accentFillHover, accentFillRest, accentForegroundActive, accentForegroundHover, accentForegroundRest, accentStrokeControlActive, accentStrokeControlHover, accentStrokeControlRest, controlCornerRadius, density, designUnit, focusStrokeInner, focusStrokeWidth, foregroundOnAccentActive, foregroundOnAccentHover, foregroundOnAccentRest, neutralFillActive, neutralFillHover, neutralFillRest, neutralFillStealthActive, neutralFillStealthHover, neutralFillStealthRest, neutralForegroundRest, neutralStrokeActive, neutralStrokeControlActive, neutralStrokeControlHover, neutralStrokeControlRest, neutralStrokeHover, neutralStrokeRest, strokeWidth, } from '../../design-tokens';
 import { typeRampBase } from '../../styles/patterns/type-ramp';
+import { focusTreatmentBase, focusTreatmentTight } from '../focus';
 /**
+ * The base styles for button controls, without `appearance` visual differences.
+ *
  * @internal
  */
-export const baseButtonStyles = (context, definition, interactivitySelector = '', nonInteractivitySelector = '') => css `
-    ${display('inline-flex')} :host {
+export const baseButtonStyles = (context, definition, interactivitySelector, nonInteractivitySelector = '[disabled]') => css `
+    ${display('inline-flex')}
+    
+    :host {
       position: relative;
       box-sizing: border-box;
-      outline: none;
       ${typeRampBase}
       height: calc(${heightNumber} * 1px);
       min-width: calc(${heightNumber} * 1px);
       color: ${neutralForegroundRest};
       border-radius: calc(${controlCornerRadius} * 1px);
       fill: currentcolor;
-      cursor: pointer;
     }
 
-    :host .control {
-      background: padding-box linear-gradient(${neutralFillRest}, ${neutralFillRest}),
-        border-box ${neutralStrokeControlRest};
+    .control {
       border: calc(${strokeWidth} * 1px) solid transparent;
       flex-grow: 1;
       box-sizing: border-box;
@@ -37,7 +38,6 @@ export const baseButtonStyles = (context, definition, interactivitySelector = ''
       color: inherit;
       border-radius: inherit;
       fill: inherit;
-      cursor: inherit;
       font-family: inherit;
     }
 
@@ -52,23 +52,8 @@ export const baseButtonStyles = (context, definition, interactivitySelector = ''
       line-height: 0;
     }
 
-    :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 .control:${focusVisible} {
-      border-color: ${focusStrokeOuter} !important;
-      box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter} inset !important;
-    }
-
-    :host .control${nonInteractivitySelector} {
-      background: padding-box linear-gradient(${neutralFillRest}, ${neutralFillRest}), border-box ${neutralStrokeRest};
+    .control:${focusVisible} {
+      ${focusTreatmentBase}
     }
 
     .control::-moz-focus-inner {
@@ -92,117 +77,138 @@ export const baseButtonStyles = (context, definition, interactivitySelector = ''
     .end {
       margin-inline-start: 11px;
     }
+  `;
+/**
+ * @internal
+ */
+export const NeutralButtonStyles = (context, definition, interactivitySelector, nonInteractivitySelector = '[disabled]') => css `
+    .control {
+      background: padding-box linear-gradient(${neutralFillRest}, ${neutralFillRest}),
+        border-box ${neutralStrokeControlRest};
+    }
+
+    :host(${interactivitySelector}:hover) .control {
+      background: padding-box linear-gradient(${neutralFillHover}, ${neutralFillHover}),
+        border-box ${neutralStrokeControlHover};
+    }
+
+    :host(${interactivitySelector}:active) .control {
+      background: padding-box linear-gradient(${neutralFillActive}, ${neutralFillActive}),
+        border-box ${neutralStrokeControlActive};
+    }
+
+    :host(${nonInteractivitySelector}) .control {
+      background: padding-box linear-gradient(${neutralFillRest}, ${neutralFillRest}),
+        border-box ${neutralStrokeRest};
+    }
   `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        :host .control {
+        .control {
           background: ${SystemColors.ButtonFace};
           border-color: ${SystemColors.ButtonText};
           color: ${SystemColors.ButtonText};
-          fill: currentcolor;
         }
-        :host(:not([disabled])) .control:hover,
-        :host .control${interactivitySelector}:hover,
-        .control${interactivitySelector}:hover {
+
+        :host(${interactivitySelector}:hover) .control,
+        :host(${interactivitySelector}:active) .control {
           forced-color-adjust: none;
-          background: ${SystemColors.Highlight};
-          color: ${SystemColors.HighlightText};
+          background: ${SystemColors.HighlightText};
+          border-color: ${SystemColors.Highlight};
+          color: ${SystemColors.Highlight};
         }
-        .control:${focusVisible},
-        :host .control:${focusVisible},
-        :host(:${focusVisible}) .control {
-          forced-color-adjust: none;
-          background: ${SystemColors.ButtonFace};
-          border-color: ${SystemColors.Highlight} !important;
-          box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${SystemColors.Highlight} !important;
+
+        :host(${nonInteractivitySelector}) .control {
+          background: transparent;
+          border-color: ${SystemColors.GrayText};
+          color: ${SystemColors.GrayText};
+        }
+
+        .control:${focusVisible} {
+          outline-color: ${SystemColors.CanvasText};
         }
+
         :host([href]) .control {
-          background: ${SystemColors.ButtonFace};
+          background: transparent;
           border-color: ${SystemColors.LinkText};
           color: ${SystemColors.LinkText};
-          fill: currentcolor;
-        }
-        :host([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;
+
+        :host([href]:hover) .control,
+        :host([href]:active) .control {
+          background: transparent;
+          border-color: ${SystemColors.CanvasText};
+          color: ${SystemColors.CanvasText};
         }
     `));
 /**
  * @internal
  */
-export const AccentButtonStyles = (context, definition, interactivitySelector = '', nonInteractivitySelector = '') => css `
-    :host .control {
+export const AccentButtonStyles = (context, definition, interactivitySelector, nonInteractivitySelector = '[disabled]') => css `
+    .control {
       background: padding-box linear-gradient(${accentFillRest}, ${accentFillRest}),
         border-box ${accentStrokeControlRest};
       color: ${foregroundOnAccentRest};
     }
 
-    :host .control${interactivitySelector}:hover {
+    :host(${interactivitySelector}:hover) .control {
       background: padding-box linear-gradient(${accentFillHover}, ${accentFillHover}),
         border-box ${accentStrokeControlHover};
       color: ${foregroundOnAccentHover};
     }
 
-    :host .control${interactivitySelector}:active {
+    :host(${interactivitySelector}:active) .control {
       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(${nonInteractivitySelector}) .control {
+      background: ${accentFillRest};
     }
 
-    :host .control${nonInteractivitySelector} {
-      background: ${accentFillRest};
+    .control:${focusVisible} {
+      box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) ${focusStrokeInner} inset !important;
     }
   `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        :host .control {
+        .control {
           forced-color-adjust: none;
           background: ${SystemColors.Highlight};
           color: ${SystemColors.HighlightText};
         }
-        :host .control${interactivitySelector}:hover,
-        :host .control${interactivitySelector}:active {
+
+        :host(${interactivitySelector}:hover) .control,
+        :host(${interactivitySelector}:active) .control {
           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(${nonInteractivitySelector}) .control {
+          background: transparent;
+          border-color: ${SystemColors.GrayText};
+          color: ${SystemColors.GrayText};
+        }
+
+        .control:${focusVisible} {
+          outline-color: ${SystemColors.CanvasText};
+          box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) ${SystemColors.HighlightText} inset !important;
         }
+
         :host([href]) .control {
           background: ${SystemColors.LinkText};
           color: ${SystemColors.HighlightText};
         }
-        :host([href]) .control:hover {
+
+        :host([href]:hover) .control,
+        :host([href]:active) .control {
           background: ${SystemColors.ButtonFace};
           border-color: ${SystemColors.LinkText};
-          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 HypertextStyles = (context, definition, interactivitySelector = '', nonInteractivitySelector = '') => css `
+export const HypertextStyles = (context, definition, interactivitySelector, nonInteractivitySelector = '[disabled]') => css `
     :host {
       height: auto;
       font-family: inherit;
@@ -211,184 +217,211 @@ export const HypertextStyles = (context, definition, interactivitySelector = '',
       min-width: 0;
     }
 
-    :host .control {
+    .control {
       display: inline;
       padding: 0;
-      background: transparent;
       border: none;
       box-shadow: none;
       line-height: 1;
-      text-decoration: underline 1px;
-    }
-
-    :host .control:not([href]) {
-      background: transparent;
     }
 
-    :host .control${interactivitySelector} {
-      background: transparent;
+    :host(${interactivitySelector}) .control {
       color: ${accentForegroundRest};
+      text-decoration: underline 1px;
     }
 
-    :host .control${interactivitySelector}:hover {
-      background: transparent;
+    :host(${interactivitySelector}:hover) .control {
       color: ${accentForegroundHover};
       text-decoration: none;
     }
 
-    :host .control${interactivitySelector}:active {
-      background: transparent;
+    :host(${interactivitySelector}:active) .control {
       color: ${accentForegroundActive};
       text-decoration: none;
     }
 
-    :host .control:${focusVisible} {
-      box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) ${focusStrokeOuter} !important;
-    }
-
-    :host .control${nonInteractivitySelector} {
-      background: transparent;
+    .control:${focusVisible} {
+      ${focusTreatmentTight}
     }
   `.withBehaviors(forcedColorsStylesheetBehavior(css `
-      :host .control${interactivitySelector}:hover {
-        color: ${SystemColors.Highlight};
-        fill: currentcolor;
-      }
-      :host .control:${focusVisible} {
-        color: ${SystemColors.LinkText};
-      }
+        :host(${interactivitySelector}) .control {
+          color: ${SystemColors.LinkText};
+        }
+
+        :host(${interactivitySelector}:hover) .control,
+        :host(${interactivitySelector}:active) .control {
+          color: ${SystemColors.CanvasText};
+        }
+
+        .control:${focusVisible} {
+          outline-color: ${SystemColors.CanvasText};
+        }
       `));
 /**
  * @internal
  */
-export const LightweightButtonStyles = (context, definition, interactivitySelector = '', nonInteractivitySelector = '') => css `
+export const LightweightButtonStyles = (context, definition, interactivitySelector, nonInteractivitySelector = '[disabled]') => css `
     :host {
       color: ${accentForegroundRest};
     }
 
-    :host .control {
+    .control {
       background: ${neutralFillStealthRest};
     }
 
-    :host .control${interactivitySelector}:hover {
+    :host(${interactivitySelector}:hover) .control {
       background: ${neutralFillStealthHover};
       color: ${accentForegroundHover};
     }
 
-    :host .control${interactivitySelector}:active {
+    :host(${interactivitySelector}:active) .control {
       background: ${neutralFillStealthActive};
       color: ${accentForegroundActive};
     }
 
-    :host .control${nonInteractivitySelector} {
+    :host(${nonInteractivitySelector}) .control {
       background: ${neutralFillStealthRest};
     }
   `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        :host .control {
-          border-color: ${SystemColors.ButtonFace};
+        :host {
           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};
+
+        .control {
+          forced-color-adjust: none;
+          background: transparent;
+        }
+
+        :host(${interactivitySelector}:hover) .control,
+        :host(${interactivitySelector}:active) .control {
+          background: transparent;
+          border-color: ${SystemColors.ButtonText};
+          color: ${SystemColors.ButtonText};
         }
+
+        :host(${nonInteractivitySelector}) .control {
+          background: transparent;
+          color: ${SystemColors.GrayText};
+        }
+
+        .control:${focusVisible} {
+          outline-color: ${SystemColors.CanvasText};
+        }
+
         :host([href]) .control {
-          border-color: ${SystemColors.ButtonFace};
           color: ${SystemColors.LinkText};
         }
-        :host([href]) .control:hover,
-        :host([href]) .control:${focusVisible} {
-          background: ${SystemColors.ButtonFace};
-          box-shadow: none;
+
+        :host([href]:hover) .control,
+        :host([href]:active) .control {
+          border-color: ${SystemColors.LinkText};
           color: ${SystemColors.LinkText};
         }
       `));
 /**
  * @internal
  */
-export const OutlineButtonStyles = (context, definition, interactivitySelector = '', nonInteractivitySelector = '') => css `
-    :host .control {
+export const OutlineButtonStyles = (context, definition, interactivitySelector, nonInteractivitySelector = '[disabled]') => css `
+    .control {
       background: transparent !important;
       border-color: ${neutralStrokeRest};
     }
 
-    :host .control${interactivitySelector}:hover {
+    :host(${interactivitySelector}:hover) .control {
       border-color: ${neutralStrokeHover};
     }
 
-    :host .control${interactivitySelector}:active {
+    :host(${interactivitySelector}:active) .control {
       border-color: ${neutralStrokeActive};
     }
 
-    :host .control${nonInteractivitySelector} {
+    :host(${nonInteractivitySelector}) .control {
       background: transparent !important;
       border-color: ${neutralStrokeRest};
     }
   `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        :host .control${nonInteractivitySelector} {
+        .control {
           border-color: ${SystemColors.ButtonText};
+          color: ${SystemColors.ButtonText};
         }
-        :host .control${interactivitySelector}:hover {
+
+        :host(${interactivitySelector}:hover) .control,
+        :host(${interactivitySelector}:active) .control {
+          background: ${SystemColors.HighlightText};
           border-color: ${SystemColors.Highlight};
-          color: ${SystemColors.ButtonText};
+          color: ${SystemColors.Highlight};
         }
-        :host([href]) {
-          border-color: ${SystemColors.LinkText};
+
+        :host(${nonInteractivitySelector}) .control {
+          border-color: ${SystemColors.GrayText};
+          color: ${SystemColors.GrayText};
         }
-        :host([href]) .control:hover {
-          box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${SystemColors.LinkText};
+
+        .control:${focusVisible} {
+          outline-color: ${SystemColors.CanvasText};
+        }
+
+        :host([href]) .control {
+          border-color: ${SystemColors.LinkText};
           color: ${SystemColors.LinkText};
         }
+
+        :host([href]:hover) .control,
+        :host([href]:active) .control {
+          border-color: ${SystemColors.CanvasText};
+          color: ${SystemColors.CanvasText};
+        }
       `));
 /**
  * @internal
  */
-export const StealthButtonStyles = (context, definition, interactivitySelector = '', nonInteractivitySelector = '') => css `
-    :host .control {
+export const StealthButtonStyles = (context, definition, interactivitySelector, nonInteractivitySelector = '[disabled]') => css `
+    .control {
       background: ${neutralFillStealthRest};
     }
 
-    :host .control${interactivitySelector}:hover {
+    :host(${interactivitySelector}:hover) .control {
       background: ${neutralFillStealthHover};
     }
 
-    :host .control${interactivitySelector}:active {
+    :host(${interactivitySelector}:active) .control {
       background: ${neutralFillStealthActive};
     }
 
-    :host .control${nonInteractivitySelector} {
+    :host(${nonInteractivitySelector}) .control {
       background: ${neutralFillStealthRest};
     }
   `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        :host .control {
-          background: ${SystemColors.ButtonFace};
-          border-color: ${SystemColors.ButtonFace};
+        .control {
+          forced-color-adjust: none;
+          background: transparent;
           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(${interactivitySelector}:hover) .control,
+        :host(${interactivitySelector}:active) .control {
+          background: transparent;
+          border-color: ${SystemColors.ButtonText};
+          color: ${SystemColors.ButtonText};
         }
+
+        :host(${nonInteractivitySelector}) .control {
+          background: transparent;
+          color: ${SystemColors.GrayText};
+        }
+        
+        .control:${focusVisible} {
+          outline-color: ${SystemColors.CanvasText};
+        }
+
         :host([href]) .control {
-          border-color: ${SystemColors.ButtonFace};
           color: ${SystemColors.LinkText};
         }
-        :host([href]) .control:hover,
-        :host([href]) .control:${focusVisible} {
-          background: ${SystemColors.LinkText};
+
+        :host([href]:hover) .control,
+        :host([href]:active) .control {
+          background: transparent;
           border-color: ${SystemColors.LinkText};
-          box-shadow: none !important;
-          color: ${SystemColors.HighlightText};
-          fill: currentcolor;
+          color: ${SystemColors.LinkText};
         }
       `));