@fluentui/web-components 2.5.5 → 2.5.7

package/dist/esm/select/select.styles.js

@@ -4,72 +4,34 @@ import { SystemColors } from '@microsoft/fast-web-utilities';
 import { elevationShadowFlyout } from '../styles/elevation';
 import { heightNumber } from '../styles/size';
 import { appearanceBehavior } from '../utilities/behaviors';
-import { bodyFont, controlCornerRadius, designUnit, disabledOpacity, fillColor, focusStrokeOuter, layerCornerRadius, neutralFillActive, neutralFillHover, neutralFillRest, neutralFillSecondaryActive, neutralFillSecondaryHover, neutralFillSecondaryRest, neutralFillStealthActive, neutralFillStealthHover, neutralFillStealthRest, neutralForegroundRest, neutralStrokeControlActive, neutralStrokeControlHover, neutralStrokeControlRest, strokeWidth, } from '../design-tokens';
+import { bodyFont, controlCornerRadius, designUnit, disabledOpacity, fillColor, layerCornerRadius, neutralForegroundRest, strokeWidth, } from '../design-tokens';
 import { typeRampBase } from '../styles/patterns/type-ramp';
-export const selectFilledStyles = (context, definition) => css `
-  :host {
-    background: ${neutralFillSecondaryRest};
-    border-color: transparent;
-  }
-
-  :host(:not([disabled]):not([open]):hover) {
-    background: ${neutralFillSecondaryHover};
-    border-color: transparent;
-  }
-
-  :host(:not([disabled]):not([open]):active) {
-    background: ${neutralFillSecondaryActive};
-    border-color: transparent;
-  }
-`.withBehaviors(forcedColorsStylesheetBehavior(css `
-      :host(:not([disabled]):not([open]):hover) {
-        background: transparent;
-      }
-      :host(:not([disabled]):not([open]):hover),
-      :host(:not([disabled]):not([open]):active) {
-        border-color: ${SystemColors.Highlight};
-      }
-      :host(:${focusVisible}) {
-        forced-color-adjust: none;
-        background: transparent;
-        border-color: ${SystemColors.Highlight};
-        box-shadow: 0 0 0 1px inset ${SystemColors.Highlight};
-      }
-    `));
-export const selectStealthStyles = (context, definition) => css `
-  :host {
-    background: ${neutralFillStealthRest};
-    border-color: transparent;
-  }
-
-  :host(:not([disabled]):not([open]):hover) {
-    background: ${neutralFillStealthHover};
-    border-color: transparent;
-  }
-
-  :host(:not([disabled]):not([open]):active) {
-    background: ${neutralFillStealthActive};
-    border-color: transparent;
-  }
-`;
-export const selectStyles = (context, definition) => css `
-    ${display('inline-flex')} :host {
-      background: padding-box linear-gradient(${neutralFillRest}, ${neutralFillRest}),
-        border-box ${neutralStrokeControlRest};
-      border: calc(${strokeWidth} * 1px) solid transparent;
+import { focusTreatmentBase } from '../styles/focus';
+import { inputFilledStyles, inputForcedColorStyles, NeutralButtonStyles, StealthButtonStyles } from '../styles';
+const logicalControlSelector = '.control';
+const interactivitySelector = ':not([disabled]):not([open])';
+const nonInteractivitySelector = '[disabled]';
+/**
+ * The base styles for a select and combobox, without `appearance` visual differences.
+ *
+ * @internal
+ */
+export const baseSelectStyles = (context, definition) => css `
+    ${display('inline-flex')}
+    
+    :host {
       border-radius: calc(${controlCornerRadius} * 1px);
       box-sizing: border-box;
       color: ${neutralForegroundRest};
       fill: currentcolor;
       font-family: ${bodyFont};
-      height: calc(${heightNumber} * 1px);
       position: relative;
       user-select: none;
       min-width: 250px;
       vertical-align: top;
     }
 
-    :host .listbox {
+    .listbox {
       box-shadow: ${elevationShadowFlyout};
       background: ${fillColor};
       border-radius: calc(${layerCornerRadius} * 1px);
@@ -78,7 +40,7 @@ export const selectStyles = (context, definition) => css `
       flex-direction: column;
       left: 0;
       max-height: calc(var(--max-height) - (${heightNumber} * 1px));
-      padding: calc((${designUnit} - ${strokeWidth} ) * 1px) 0;
+      padding: calc((${designUnit} - ${strokeWidth} ) * 1px);
       overflow-y: auto;
       position: absolute;
       width: 100%;
@@ -87,11 +49,14 @@ export const selectStyles = (context, definition) => css `
       border: calc(${strokeWidth} * 1px) solid transparent;
     }
 
-    :host .listbox[hidden] {
+    .listbox[hidden] {
       display: none;
     }
 
-    :host .control {
+    .control {
+      border: calc(${strokeWidth} * 1px) solid transparent;
+      border-radius: calc(${controlCornerRadius} * 1px);
+      height: calc(${heightNumber} * 1px);
       align-items: center;
       box-sizing: border-box;
       cursor: pointer;
@@ -102,29 +67,13 @@ export const selectStyles = (context, definition) => css `
       width: 100%;
     }
 
-    :host(:not([disabled]):not([open]):hover) {
-      background: padding-box linear-gradient(${neutralFillHover}, ${neutralFillHover}),
-        border-box ${neutralStrokeControlHover};
-    }
-
-    :host(:not([disabled]):not([open]):active) {
-      background: padding-box linear-gradient(${neutralFillActive}, ${neutralFillActive}),
-        border-box ${neutralStrokeControlActive};
-    }
-
     :host(:${focusVisible}) {
-      border-color: ${focusStrokeOuter};
-      outline: none;
-      box-shadow: 0 0 0 1px inset ${focusStrokeOuter};
-    }
-
-    :host([disabled]) {
-      cursor: ${disabledCursor};
-      opacity: ${disabledOpacity};
+      ${focusTreatmentBase}
     }
 
     :host([disabled]) .control {
       cursor: ${disabledCursor};
+      opacity: ${disabledOpacity};
       user-select: none;
     }
 
@@ -175,38 +124,16 @@ export const selectStyles = (context, definition) => css `
     ::slotted([role='option']) {
       flex: 0 0 auto;
     }
-  `.withBehaviors(appearanceBehavior('filled', selectFilledStyles(context, definition)), appearanceBehavior('stealth', selectStealthStyles(context, definition)), forcedColorsStylesheetBehavior(css `
-      :host {
-        background: ${SystemColors.ButtonFace};
-        color: ${SystemColors.ButtonText};
-      }
-      :host(:not([disabled]):not([open]):hover) {
-        background: transparent;
-      }
-      :host(:not([disabled]):hover) {
-        border-color: ${SystemColors.Highlight};
-      }
-      :host(:${focusVisible}) {
-        forced-color-adjust: none;
-        border-color: ${SystemColors.Highlight};
-        box-shadow: 0 0 0 1px inset ${SystemColors.Highlight};
-      }
-      :host([open]) .listbox {
-        background: ${SystemColors.ButtonFace};
-        border-color: ${SystemColors.CanvasText};
-      }
-      .start, .end, .indicator, ::slotted(svg) {
-        fill: ${SystemColors.FieldText};
-      }
-      :host([disabled]) {
-        border-color: ${SystemColors.GrayText};
-        color: ${SystemColors.GrayText};
-        opacity: 1;
-      }
-      :host([disabled]) .start,
-      :host([disabled]) .end,
-      :host([disabled]) .indicator,
-      :host([disabled]) ::slotted(svg) {
-        fill: ${SystemColors.GrayText};
-      }
-    `));
+  `;
+/**
+ * @internal
+ */
+export const baseSelectForcedColorStyles = (context, definition) => css `
+    :host([open]) .listbox {
+      background: ${SystemColors.ButtonFace};
+      border-color: ${SystemColors.CanvasText};
+    }
+  `;
+export const selectStyles = (context, definition) => baseSelectStyles(context, definition)
+    .withBehaviors(appearanceBehavior('outline', NeutralButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)), appearanceBehavior('filled', inputFilledStyles(context, definition, logicalControlSelector, interactivitySelector)
+    .withBehaviors(forcedColorsStylesheetBehavior(inputForcedColorStyles(context, definition, logicalControlSelector, interactivitySelector)))), appearanceBehavior('stealth', StealthButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)), forcedColorsStylesheetBehavior(baseSelectForcedColorStyles(context, definition)));

package/dist/esm/styles/focus.js

@@ -0,0 +1,21 @@
+import { cssPartial } from '@microsoft/fast-element';
+import { focusStrokeOuter, focusStrokeWidth, strokeWidth } from '../design-tokens';
+/**
+ * Partial CSS for the focus treatment for most typical sized components like Button, Menu Item, etc.
+ *
+ * @public
+ */
+export const focusTreatmentBase = cssPartial `
+  outline: calc(${focusStrokeWidth} * 1px) solid ${focusStrokeOuter};
+  outline-offset: calc(${focusStrokeWidth} * -1px);
+`;
+/**
+ * Partial CSS for the focus treatment for tighter components with spacing constraints, like Checkbox
+ * and Radio, or plain text like Hypertext appearance Anchor or Breadcrumb Item.
+ *
+ * @public
+ */
+export const focusTreatmentTight = cssPartial `
+  outline: calc(${focusStrokeWidth} * 1px) solid ${focusStrokeOuter};
+  outline-offset: calc(${strokeWidth} * 1px);
+`;

package/dist/esm/styles/index.js

@@ -1,4 +1,5 @@
 export * from './direction';
 export * from './elevation';
+export * from './focus';
 export * from './patterns/';
 export * from './size';