@fluentui/web-components 2.5.6 → 2.5.8

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

@@ -1,9 +1,10 @@
 import { css } from '@microsoft/fast-element';
 import { DesignToken, disabledCursor, } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
-import { accentFillRest, controlCornerRadius, disabledOpacity, focusStrokeWidth, neutralFillInputFocus, neutralFillInputHover, neutralFillInputRecipe, neutralFillInputRest, neutralFillSecondaryHover, neutralFillSecondaryRecipe, neutralFillSecondaryRest, neutralForegroundHintRecipe, neutralForegroundRest, neutralStrokeInputHover, neutralStrokeInputRest, neutralStrokeRest, strokeWidth, } from '../../design-tokens';
+import { accentFillRest, controlCornerRadius, disabledOpacity, focusStrokeWidth, neutralFillInputFocus, neutralFillInputHover, neutralFillInputRecipe, neutralFillInputRest, neutralFillSecondaryFocus, neutralFillSecondaryHover, neutralFillSecondaryRecipe, neutralFillSecondaryRest, neutralForegroundHintRecipe, neutralForegroundRest, neutralStrokeInputHover, neutralStrokeInputRest, neutralStrokeRest, strokeWidth, } from '../../design-tokens';
 import { typeRampBase } from '../patterns/type-ramp';
 import { heightNumber } from '../size';
+import { focusTreatmentBase } from '../focus';
 const placeholderRest = DesignToken.create('input-placeholder-rest').withDefault((target) => {
     const baseRecipe = neutralFillInputRecipe.getValueFor(target);
     const hintRecipe = neutralForegroundHintRecipe.getValueFor(target);
@@ -25,9 +26,11 @@ const filledPlaceholderHover = DesignToken.create('input-filled-placeholder-hove
     return hintRecipe.evaluate(target, baseRecipe.evaluate(target).hover);
 });
 /**
+ * The base styles for input controls, without `appearance` visual differences.
+ *
  * @internal
  */
-export const inputStyles = (context, definition, rootSelector) => css `
+export const baseInputStyles = (context, definition, logicalControlSelector) => css `
   :host {
     ${typeRampBase}
     color: ${neutralForegroundRest};
@@ -36,12 +39,10 @@ export const inputStyles = (context, definition, rootSelector) => css `
     position: relative;
   }
 
-  ${rootSelector} {
+  ${logicalControlSelector} {
     box-sizing: border-box;
     position: relative;
     color: inherit;
-    background: padding-box linear-gradient(${neutralFillInputRest}, ${neutralFillInputRest}),
-      border-box ${neutralStrokeInputRest};
     border: calc(${strokeWidth} * 1px) solid transparent;
     border-radius: calc(${controlCornerRadius} * 1px);
     height: calc(${heightNumber} * 1px);
@@ -68,25 +69,9 @@ export const inputStyles = (context, definition, rootSelector) => css `
     visibility: hidden;
   }
 
-  :host(:hover:not([disabled]):not(:focus-within)) ${rootSelector} {
-    background: padding-box linear-gradient(${neutralFillInputHover}, ${neutralFillInputHover}),
-      border-box ${neutralStrokeInputHover};
-  }
-
-  :host(:not([disabled]):focus-within) ${rootSelector} {
-    background: padding-box linear-gradient(${neutralFillInputFocus}, ${neutralFillInputFocus}),
-      border-box ${neutralStrokeInputRest};
-  }
-
-  .control::placeholder {
-    color: ${placeholderRest};
-  }
-
-  :host(:hover:not([disabled]):not(:focus-within)) .control::placeholder {
-    color: ${placeholderHover};
-  }
-
-  :host([disabled]) ${rootSelector}, :host([readonly]) ${rootSelector}, :host([disabled]) .label,
+  :host([disabled]) ${logicalControlSelector},
+  :host([readonly]) ${logicalControlSelector},
+  :host([disabled]) .label,
   :host([readonly]) .label,
   :host([disabled]) .control,
   :host([readonly]) .control {
@@ -96,113 +81,147 @@ export const inputStyles = (context, definition, rootSelector) => css `
   :host([disabled]) {
     opacity: ${disabledOpacity};
   }
-
-  :host([disabled]) ${rootSelector} {
-    background: padding-box linear-gradient(${neutralFillInputRest}, ${neutralFillInputRest}),
-      border-box ${neutralStrokeRest};
+`;
+/**
+ * The styles for active and focus interactions for input controls.
+ *
+ * @internal
+ */
+export const inputStateStyles = (context, definition, logicalControlSelector) => css `
+  @media (forced-colors: none) {
+    :host(:not([disabled]):active)::after {
+      left: 50%;
+      width: 40%;
+      transform: translateX(-50%);
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    :host(:not([disabled]):focus-within)::after {
+      left: 0;
+      width: 100%;
+      transform: none;
+    }
+
+    :host(:not([disabled]):active)::after,
+    :host(:not([disabled]):focus-within:not(:active))::after {
+      content: '';
+      position: absolute;
+      height: calc(${focusStrokeWidth} * 1px);
+      bottom: 0;
+      border-bottom: calc(${focusStrokeWidth} * 1px) solid ${accentFillRest};
+      border-bottom-left-radius: calc(${controlCornerRadius} * 1px);
+      border-bottom-right-radius: calc(${controlCornerRadius} * 1px);
+      z-index: 2;
+      transition: all 300ms cubic-bezier(0.1, 0.9, 0.2, 1);
+    }
   }
 `;
 /**
+ * The visual styles for inputs with `appearance='outline'`.
+ *
  * @internal
  */
-export const inputStateStyles = (context, definition, rootSelector) => css `
-  :host(:not([disabled]):active)::after {
-    left: 50%;
-    width: 40%;
-    transform: translateX(-50%);
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
+export const inputOutlineStyles = (context, definition, logicalControlSelector, interactivitySelector = ':not([disabled]):not(:focus-within)') => css `
+  ${logicalControlSelector} {
+    background: padding-box linear-gradient(${neutralFillInputRest}, ${neutralFillInputRest}),
+      border-box ${neutralStrokeInputRest};
   }
 
-  :host(:not([disabled]):focus-within)::after {
-    left: 0;
-    width: 100%;
-    transform: none;
+  :host(${interactivitySelector}:hover) ${logicalControlSelector} {
+    background: padding-box linear-gradient(${neutralFillInputHover}, ${neutralFillInputHover}),
+      border-box ${neutralStrokeInputHover};
   }
 
-  :host(:not([disabled]):active)::after,
-  :host(:not([disabled]):focus-within:not(:active))::after {
-    content: '';
-    position: absolute;
-    height: calc(${focusStrokeWidth} * 1px);
-    bottom: 0;
-    border-bottom: calc(${focusStrokeWidth} * 1px) solid ${accentFillRest};
-    border-bottom-left-radius: calc(${controlCornerRadius} * 1px);
-    border-bottom-right-radius: calc(${controlCornerRadius} * 1px);
-    z-index: 2;
-    transition: all 300ms cubic-bezier(0.1, 0.9, 0.2, 1);
+  :host(:not([disabled]):focus-within) ${logicalControlSelector} {
+    background: padding-box linear-gradient(${neutralFillInputFocus}, ${neutralFillInputFocus}),
+      border-box ${neutralStrokeInputRest};
+  }
+  
+  :host([disabled]) ${logicalControlSelector} {
+    background: padding-box linear-gradient(${neutralFillInputRest}, ${neutralFillInputRest}),
+      border-box ${neutralStrokeRest};
+  }
+
+  .control::placeholder {
+    color: ${placeholderRest};
+  }
+
+  :host(${interactivitySelector}:hover) .control::placeholder {
+    color: ${placeholderHover};
   }
 `;
 /**
+ * The visual styles for inputs with `appearance='filled'`.
+ *
  * @internal
  */
-export const inputFilledStyles = (context, definition, rootSelector) => css `
-  :host ${rootSelector} {
+export const inputFilledStyles = (context, definition, logicalControlSelector, interactivitySelector = ':not([disabled]):not(:focus-within)') => css `
+  ${logicalControlSelector} {
     background: ${neutralFillSecondaryRest};
-    border-color: transparent;
   }
 
-  :host(:hover:not([disabled]):not(:focus-within)) ${rootSelector} {
+  :host(${interactivitySelector}:hover) ${logicalControlSelector} {
     background: ${neutralFillSecondaryHover};
-    border-color: transparent;
+  }
+
+  :host(:not([disabled]):focus-within) ${logicalControlSelector} {
+    background: ${neutralFillSecondaryFocus};
+  }
+
+  :host([disabled]) ${logicalControlSelector} {
+    background: ${neutralFillSecondaryRest};
   }
 
   .control::placeholder {
     color: ${filledPlaceholderRest};
   }
 
-  :host(:hover:not([disabled]):not(:focus-within)) .control::placeholder {
+  :host(${interactivitySelector}:hover) .control::placeholder {
     color: ${filledPlaceholderHover};
   }
-
-  :host(:focus-within:not([disabled])) ${rootSelector} {
-    border-color: transparent;
-  }
 `;
 /**
  * @internal
  */
-export const inputForcedColorStyles = (context, definition, rootSelector) => css `
-  :host ${rootSelector} {
-    background: ${SystemColors.Field};
-    border-color: ${SystemColors.FieldText};
+export const inputForcedColorStyles = (context, definition, logicalControlSelector, interactivitySelector = ':not([disabled]):not(:focus-within)') => css `
+  :host {
+    color: ${SystemColors.ButtonText};
   }
-  :host(:hover:not([disabled]):not(:focus-within)) ${rootSelector} {
+
+  ${logicalControlSelector} {
+    background: ${SystemColors.ButtonFace};
+    border-color: ${SystemColors.ButtonText};
+  }
+
+  :host(${interactivitySelector}:hover) ${logicalControlSelector},
+  :host(:not([disabled]):focus-within) ${logicalControlSelector} {
     border-color: ${SystemColors.Highlight};
   }
-  :host(:not([disabled]):active)::after,
-  :host(:not([disabled]):focus-within:not(:active))::after {
-    border-bottom-color: ${SystemColors.Highlight};
+
+  :host([disabled]) ${logicalControlSelector} {
+    opacity: 1;
+    background: ${SystemColors.ButtonFace};
+    border-color: ${SystemColors.GrayText};
+  }
+
+  .control::placeholder,
+  :host(${interactivitySelector}:hover) .control::placeholder {
+    color: ${SystemColors.CanvasText};
+  }
+
+  :host(:not([disabled]):focus) ${logicalControlSelector} {
+    ${focusTreatmentBase}
+    outline-color: ${SystemColors.Highlight};
   }
+
   :host([disabled]) {
     opacity: 1;
+    color: ${SystemColors.GrayText};
   }
-  :host([disabled]) ${rootSelector} {
-    border-color: ${SystemColors.GrayText};
-  }
+
   :host([disabled]) ::placeholder,
-  :host([disabled]) ::-webkit-input-placeholder,
-  :host([disabled]) .label {
+  :host([disabled]) ::-webkit-input-placeholder {
     color: ${SystemColors.GrayText};
-    fill: currentcolor;
-  }
-`;
-/**
- * @internal
- */
-export const inputFilledForcedColorStyles = (context, definition, rootSelector) => css `
-  :host ${rootSelector},
-  :host(:hover:not([disabled])) ${rootSelector},
-  :host(:active:not([disabled])) ${rootSelector},
-  :host(:focus-within:not([disabled])) ${rootSelector} {
-    background: ${SystemColors.Field};
-    border-color: ${SystemColors.FieldText};
-  }
-  :host(:not([disabled]):active)::after,
-  :host(:not([disabled]):focus-within:not(:active))::after {
-    border-bottom-color: ${SystemColors.Highlight};
-  }
-  :host([disabled]) ${rootSelector} {
-    border-color: ${SystemColors.GrayText};
   }
 `;

package/dist/esm/text-area/text-area.styles.js

@@ -1,19 +1,15 @@
 import { css } from '@microsoft/fast-element';
 import { display, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
-import { heightNumber, inputFilledForcedColorStyles, inputFilledStyles, inputForcedColorStyles, inputStateStyles, inputStyles, } from '../styles';
+import { baseInputStyles, heightNumber, inputFilledStyles, inputForcedColorStyles, inputOutlineStyles, inputStateStyles, } from '../styles';
 import { appearanceBehavior } from '../utilities/behaviors';
 import { designUnit } from '../design-tokens';
-export const textAreaFilledStyles = (context, definition) => css `
-    ${inputFilledStyles(context, definition, '.control')}
-  `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        ${inputFilledForcedColorStyles(context, definition, '.control')}
-      `));
+const logicalControlSelector = '.control';
 export const textAreaStyles = (context, definition) => css `
     ${display('inline-flex')}
 
-    ${inputStyles(context, definition, '.control')}
+    ${baseInputStyles(context, definition, logicalControlSelector)}
 
-    ${inputStateStyles(context, definition, '.control')}
+    ${inputStateStyles(context, definition, logicalControlSelector)}
 
     :host {
       flex-direction: column;
@@ -40,6 +36,4 @@ export const textAreaStyles = (context, definition) => css `
     :host(.resize-vertical) .control {
       resize: vertical;
     }
-  `.withBehaviors(appearanceBehavior('filled', textAreaFilledStyles(context, definition)), forcedColorsStylesheetBehavior(css `
-        ${inputForcedColorStyles(context, definition, '.control')}
-      `));
+  `.withBehaviors(appearanceBehavior('outline', inputOutlineStyles(context, definition, logicalControlSelector)), appearanceBehavior('filled', inputFilledStyles(context, definition, logicalControlSelector)), forcedColorsStylesheetBehavior(inputForcedColorStyles(context, definition, logicalControlSelector)));

package/dist/esm/text-field/text-field.styles.js

@@ -1,19 +1,15 @@
 import { css } from '@microsoft/fast-element';
 import { display, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
-import { inputFilledForcedColorStyles, inputFilledStyles, inputForcedColorStyles, inputStateStyles, inputStyles, } from '../styles';
+import { baseInputStyles, inputFilledStyles, inputForcedColorStyles, inputOutlineStyles, inputStateStyles, } from '../styles';
 import { appearanceBehavior } from '../utilities/behaviors';
 import { designUnit } from '../design-tokens';
-export const textFieldFilledStyles = (context, definition) => css `
-    ${inputFilledStyles(context, definition, '.root')}
-  `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        ${inputFilledForcedColorStyles(context, definition, '.root')}
-      `));
+const logicalControlSelector = '.root';
 export const textFieldStyles = (context, definition) => css `
     ${display('inline-block')}
 
-    ${inputStyles(context, definition, '.root')}
+    ${baseInputStyles(context, definition, logicalControlSelector)}
 
-    ${inputStateStyles(context, definition, '.root')}
+    ${inputStateStyles(context, definition, logicalControlSelector)}
 
     .root {
       display: flex;
@@ -49,6 +45,4 @@ export const textFieldStyles = (context, definition) => css `
       display: flex;
       margin-inline-end: 11px;
     }
-  `.withBehaviors(appearanceBehavior('filled', textFieldFilledStyles(context, definition)), forcedColorsStylesheetBehavior(css `
-        ${inputForcedColorStyles(context, definition, '.root')}
-      `));
+  `.withBehaviors(appearanceBehavior('outline', inputOutlineStyles(context, definition, logicalControlSelector)), appearanceBehavior('filled', inputFilledStyles(context, definition, logicalControlSelector)), forcedColorsStylesheetBehavior(inputForcedColorStyles(context, definition, logicalControlSelector)));