import { ValuesOf } from "@microsoft/fast-foundation"; import { Styles } from "../core/modules/styles.js"; /** * Style module for the shape of a control. * * By default, sets the border radius, useful for buttons, inputs, list items, etc. * * @public */ export declare const controlShapeStyles: Styles; /** * Style module for the shape of a layer. * * By default, sets the border radius, useful for card, panes, etc. * * @public */ export declare const layerShapeStyles: Styles; /** * Style module for the shape of a rounded control (pill shape). * * By default, sets the border radius, useful for badge, radio, etc. * * @public */ export declare const roundShapeStyles: Styles; /** * Style module for the density and spacing of plain text. * * By default, sets the padding and gap, useful for label and value pairs or stacked lines of text. * * @public */ export declare const textDensityStyles: Styles; /** * Style module for the density and spacing of a control. * * By default, sets the padding and gap, useful for buttons, list items, etc. * * See {@link autofillOuterDensityStyles} or {@link itemContainerDensityStyles}. * * @public */ export declare const controlDensityStyles: Styles; /** * Style module for the density and spacing of a *square* control. * * By default, sets the padding and gap, useful for icon-only buttons or other elements which should be square based on vertical size. * * See {@link autofillOuterDensityStyles} or {@link itemContainerDensityStyles}. * * @public */ export declare const controlSquareDensityStyles: Styles; /** * Style module pair (outer portion) for input controls that support autofill to allow for better handling of platform styling. * * By default, sets the horizontal padding and gap, useful for the container of wrapped inputs like text field. * * See {@link autofillInnerDensityStyles}. * * @public */ export declare const autofillOuterDensityStyles: Styles; /** * Style module pair (inner portion) for input controls that support autofill to allow for better handling of platform styling. * * By default, sets the vertical padding, useful for wrapped inputs like text field. * * See {@link autofillOuterDensityStyles}. * * @public */ export declare const autofillInnerDensityStyles: Styles; /** * Style module for the density and spacing of a list of controls. * * By default, sets the padding and gap, useful for menus, lists of buttons, etc. * * @public */ export declare const controlListDensityStyles: Styles; /** * Style module for the density and spacing of an item container. * * By default, sets the padding and gap, useful for buttons, list items, etc. * * @public * @deprecated Use controlListDensityStyles */ export declare const itemContainerDensityStyles: Styles; /** * Style module for the density and spacing of a layer. * * By default, sets the padding and gap, useful for cards, dialogs, etc. * * @public */ export declare const layerDensityStyles: Styles; /** * Convenience style module for an accent-filled stealth control (interactive). * * By default, only the foreground color meets accessibility, useful for a button or similar: * - accent stealth background * - accent readable foreground (a11y) * - accent safety border * * @public */ export declare const accentFillStealthControlStyles: Styles; /** * Convenience style module for an accent-filled subtle control (interactive). * * By default, only the foreground color meets accessibility, useful for a button or similar: * - accent subtle background * - accent readable foreground (a11y) * - accent safety border * * @public */ export declare const accentFillSubtleControlStyles: Styles; /** * Convenience style module for an accent-filled subtle inverse control (interactive). * * By default, only the foreground color meets accessibility, useful for a button or similar: * - accent subtle inverse background * - accent readable foreground (a11y) * - accent safety border * * @public */ export declare const accentFillSubtleInverseControlStyles: Styles; /** * Convenience style module for an accent-filled ideal control (interactive). * * By default, the background meets a non-WCAG contrast that minimally stands out, useful for a filled button: * - accent ideal background * - black or white foreground (a11y) * - no border * * @public */ export declare const accentFillIdealControlStyles: Styles; /** * Convenience style module for an accent-filled discernible control (interactive). * * By default, the background meets accessibility for non-text elements, useful for a checked checkbox: * - accent discernible background (a11y) * - black or white foreground (a11y) * - no border * * @public */ export declare const accentFillDiscernibleControlStyles: Styles; /** * Convenience style module for an accent-filled readable control (interactive). * * By default, the fill meets accessibility for text elements, producing an inverted foreground, useful for a button or similar: * - accent readable background * - black or white foreground (a11y) * - no border * * @public */ export declare const accentFillReadableControlStyles: Styles; /** * Convenience style module for an accent-outlined discernible control (interactive). * * By default, the outline meets accessibility for non-text elements, useful for an unchecked checkbox: * - fill color background * - accent readable foreground * - accent discernible border * * @public */ export declare const accentOutlineDiscernibleControlStyles: Styles; /** * Convenience style module for an accent-colored text or icon control (interactive). * * By default, the foreground color meets accessibility, useful for a link, or similar: * - no background * - accent readable foreground (a11y) * - no border * * @public */ export declare const accentForegroundReadableControlStyles: Styles; /** * Convenience style module for an highlight-filled stealth control (interactive). * * By default, only the foreground color meets accessibility, useful for a button or similar: * - highlight stealth background * - highlight readable foreground (a11y) * - highlight safety border * * @public */ export declare const highlightFillStealthControlStyles: Styles; /** * Convenience style module for an highlight-filled subtle control (interactive). * * By default, only the foreground color meets accessibility, useful for a button or similar: * - highlight subtle background * - highlight readable foreground (a11y) * - highlight safety border * * @public */ export declare const highlightFillSubtleControlStyles: Styles; /** * Convenience style module for an highlight-filled subtle inverse control (interactive). * * By default, only the foreground color meets accessibility, useful for a button or similar: * - highlight subtle inverse background * - highlight readable foreground (a11y) * - highlight safety border * * @public */ export declare const highlightFillSubtleInverseControlStyles: Styles; /** * Convenience style module for an highlight-filled ideal control (interactive). * * By default, the background meets a non-WCAG contrast that minimally stands out, useful for a filled button: * - highlight ideal background * - black or white foreground (a11y) * - no border * * @public */ export declare const highlightFillIdealControlStyles: Styles; /** * Convenience style module for an highlight-filled discernible control (interactive). * * By default, the background meets accessibility for non-text elements, useful for a checked checkbox: * - highlight discernible background (a11y) * - black or white foreground (a11y) * - no border * * @public */ export declare const highlightFillDiscernibleControlStyles: Styles; /** * Convenience style module for an highlight-filled readable control (interactive). * * By default, the fill meets accessibility for text elements, producing an inverted foreground, useful for a button or similar: * - highlight readable background * - black or white foreground (a11y) * - no border * * @public */ export declare const highlightFillReadableControlStyles: Styles; /** * Convenience style module for an highlight-outlined discernible control (interactive). * * By default, the outline meets accessibility for non-text elements, useful for an unchecked checkbox: * - fill color background * - highlight readable foreground * - highlight discernible border * * @public */ export declare const highlightOutlineDiscernibleControlStyles: Styles; /** * Convenience style module for an highlight-colored text or icon control (interactive). * * By default, the foreground color meets accessibility, useful for a link, or similar: * - no background * - highlight readable foreground (a11y) * - no border * * @public */ export declare const highlightForegroundReadableControlStyles: Styles; /** * Convenience style module for an info-filled stealth control (interactive). * * By default, only the foreground color meets accessibility, useful for a button or similar: * - info stealth background * - info readable foreground (a11y) * - info safety border * * @public */ export declare const infoFillStealthControlStyles: Styles; /** * Convenience style module for an info-filled subtle control (interactive). * * By default, only the foreground color meets accessibility, useful for a button or similar: * - info subtle background * - info readable foreground (a11y) * - info safety border * * @public */ export declare const infoFillSubtleControlStyles: Styles; /** * Convenience style module for an info-filled subtle inverse control (interactive). * * By default, only the foreground color meets accessibility, useful for a button or similar: * - info subtle inverse background * - info readable foreground (a11y) * - info safety border * * @public */ export declare const infoFillSubtleInverseControlStyles: Styles; /** * Convenience style module for an info-filled ideal control (interactive). * * By default, the background meets a non-WCAG contrast that minimally stands out, useful for a filled button: * - info ideal background * - black or white foreground (a11y) * - no border * * @public */ export declare const infoFillIdealControlStyles: Styles; /** * Convenience style module for an info-filled discernible control (interactive). * * By default, the background meets accessibility for non-text elements, useful for a checked checkbox: * - info discernible background (a11y) * - black or white foreground (a11y) * - no border * * @public */ export declare const infoFillDiscernibleControlStyles: Styles; /** * Convenience style module for an info-filled readable control (interactive). * * By default, the fill meets accessibility for text elements, producing an inverted foreground, useful for a button or similar: * - info readable background * - black or white foreground (a11y) * - no border * * @public */ export declare const infoFillReadableControlStyles: Styles; /** * Convenience style module for an info-outlined discernible control (interactive). * * By default, the outline meets accessibility for non-text elements, useful for an unchecked checkbox: * - fill color background * - info readable foreground * - info discernible border * * @public */ export declare const infoOutlineDiscernibleControlStyles: Styles; /** * Convenience style module for an info-colored text or icon control (interactive). * * By default, the foreground color meets accessibility, useful for a link, or similar: * - no background * - info readable foreground (a11y) * - no border * * @public */ export declare const infoForegroundReadableControlStyles: Styles; /** * Convenience style module for an success-filled stealth control (interactive). * * By default, only the foreground color meets accessibility, useful for a button or similar: * - success stealth background * - success readable foreground (a11y) * - success safety border * * @public */ export declare const successFillStealthControlStyles: Styles; /** * Convenience style module for an success-filled subtle control (interactive). * * By default, only the foreground color meets accessibility, useful for a button or similar: * - success subtle background * - success readable foreground (a11y) * - success safety border * * @public */ export declare const successFillSubtleControlStyles: Styles; /** * Convenience style module for an success-filled subtle inverse control (interactive). * * By default, only the foreground color meets accessibility, useful for a button or similar: * - success subtle inverse background * - success readable foreground (a11y) * - success safety border * * @public */ export declare const successFillSubtleInverseControlStyles: Styles; /** * Convenience style module for an success-filled ideal control (interactive). * * By default, the background meets a non-WCAG contrast that minimally stands out, useful for a filled button: * - success ideal background * - black or white foreground (a11y) * - no border * * @public */ export declare const successFillIdealControlStyles: Styles; /** * Convenience style module for an success-filled discernible control (interactive). * * By default, the background meets accessibility for non-text elements, useful for a checked checkbox: * - success discernible background (a11y) * - black or white foreground (a11y) * - no border * * @public */ export declare const successFillDiscernibleControlStyles: Styles; /** * Convenience style module for an success-filled readable control (interactive). * * By default, the fill meets accessibility for text elements, producing an inverted foreground, useful for a button or similar: * - success readable background * - black or white foreground (a11y) * - no border * * @public */ export declare const successFillReadableControlStyles: Styles; /** * Convenience style module for an success-outlined discernible control (interactive). * * By default, the outline meets accessibility for non-text elements, useful for an unchecked checkbox: * - fill color background * - success readable foreground * - success discernible border * * @public */ export declare const successOutlineDiscernibleControlStyles: Styles; /** * Convenience style module for an success-colored text or icon control (interactive). * * By default, the foreground color meets accessibility, useful for a link, or similar: * - no background * - success readable foreground (a11y) * - no border * * @public */ export declare const successForegroundReadableControlStyles: Styles; /** * Convenience style module for an warning-filled stealth control (interactive). * * By default, only the foreground color meets accessibility, useful for a button or similar: * - warning stealth background * - warning readable foreground (a11y) * - warning safety border * * @public */ export declare const warningFillStealthControlStyles: Styles; /** * Convenience style module for an warning-filled subtle control (interactive). * * By default, only the foreground color meets accessibility, useful for a button or similar: * - warning subtle background * - warning readable foreground (a11y) * - warning safety border * * @public */ export declare const warningFillSubtleControlStyles: Styles; /** * Convenience style module for an warning-filled subtle inverse control (interactive). * * By default, only the foreground color meets accessibility, useful for a button or similar: * - warning subtle inverse background * - warning readable foreground (a11y) * - warning safety border * * @public */ export declare const warningFillSubtleInverseControlStyles: Styles; /** * Convenience style module for an warning-filled ideal control (interactive). * * By default, the background meets a non-WCAG contrast that minimally stands out, useful for a filled button: * - warning ideal background * - black or white foreground (a11y) * - no border * * @public */ export declare const warningFillIdealControlStyles: Styles; /** * Convenience style module for an warning-filled discernible control (interactive). * * By default, the background meets accessibility for non-text elements, useful for a checked checkbox: * - warning discernible background (a11y) * - black or white foreground (a11y) * - no border * * @public */ export declare const warningFillDiscernibleControlStyles: Styles; /** * Convenience style module for an warning-filled readable control (interactive). * * By default, the fill meets accessibility for text elements, producing an inverted foreground, useful for a button or similar: * - warning readable background * - black or white foreground (a11y) * - no border * * @public */ export declare const warningFillReadableControlStyles: Styles; /** * Convenience style module for an warning-outlined discernible control (interactive). * * By default, the outline meets accessibility for non-text elements, useful for an unchecked checkbox: * - fill color background * - warning readable foreground * - warning discernible border * * @public */ export declare const warningOutlineDiscernibleControlStyles: Styles; /** * Convenience style module for an warning-colored text or icon control (interactive). * * By default, the foreground color meets accessibility, useful for a link, or similar: * - no background * - warning readable foreground (a11y) * - no border * * @public */ export declare const warningForegroundReadableControlStyles: Styles; /** * Convenience style module for an critical-filled stealth control (interactive). * * By default, only the foreground color meets accessibility, useful for a button or similar: * - critical stealth background * - critical readable foreground (a11y) * - critical safety border * * @public */ export declare const criticalFillStealthControlStyles: Styles; /** * Convenience style module for an critical-filled subtle control (interactive). * * By default, only the foreground color meets accessibility, useful for a button or similar: * - critical subtle background * - critical readable foreground (a11y) * - critical safety border * * @public */ export declare const criticalFillSubtleControlStyles: Styles; /** * Convenience style module for an critical-filled subtle inverse control (interactive). * * By default, only the foreground color meets accessibility, useful for a button or similar: * - critical subtle inverse background * - critical readable foreground (a11y) * - critical safety border * * @public */ export declare const criticalFillSubtleInverseControlStyles: Styles; /** * Convenience style module for an critical-filled ideal control (interactive). * * By default, the background meets a non-WCAG contrast that minimally stands out, useful for a filled button: * - critical ideal background * - black or white foreground (a11y) * - no border * * @public */ export declare const criticalFillIdealControlStyles: Styles; /** * Convenience style module for an critical-filled discernible control (interactive). * * By default, the background meets accessibility for non-text elements, useful for a checked checkbox: * - critical discernible background (a11y) * - black or white foreground (a11y) * - no border * * @public */ export declare const criticalFillDiscernibleControlStyles: Styles; /** * Convenience style module for an critical-filled readable control (interactive). * * By default, the fill meets accessibility for text elements, producing an inverted foreground, useful for a button or similar: * - critical readable background * - black or white foreground (a11y) * - no border * * @public */ export declare const criticalFillReadableControlStyles: Styles; /** * Convenience style module for an critical-outlined discernible control (interactive). * * By default, the outline meets accessibility for non-text elements, useful for an unchecked checkbox: * - fill color background * - critical readable foreground * - critical discernible border * * @public */ export declare const criticalOutlineDiscernibleControlStyles: Styles; /** * Convenience style module for an critical-colored text or icon control (interactive). * * By default, the foreground color meets accessibility, useful for a link, or similar: * - no background * - critical readable foreground (a11y) * - no border * * @public */ export declare const criticalForegroundReadableControlStyles: Styles; /** * Convenience style module for a neutral-filled stealth control (interactive). * * By default, only the foreground color meets accessibility, useful for a button or similar: * - neutral stealth background * - neutral strong foreground (a11y) * - neutral safety border * * @public */ export declare const neutralFillStealthControlStyles: Styles; /** * Convenience style module for a neutral-filled subtle control (interactive). * * By default, only the foreground color meets accessibility, useful for a button or similar: * - neutral subtle background * - neutral strong foreground (a11y) * - neutral safety border * * @public */ export declare const neutralFillSubtleControlStyles: Styles; /** * Convenience style module for a neutral-filled subtle inverse control (interactive). * * By default, only the foreground color meets accessibility, useful for a button or similar: * - neutral subtle inverse background * - neutral strong foreground (a11y) * - neutral safety border * * @public */ export declare const neutralFillSubtleInverseControlStyles: Styles; /** * Convenience style module for an neutral-filled ideal control (interactive). * * By default, the background meets a non-WCAG contrast that minimally stands out, useful for a filled button: * - neutral ideal background * - black or white foreground (a11y) * - no border * * @public */ export declare const neutralFillIdealControlStyles: Styles; /** * Convenience style module for a neutral-filled discernible control (interactive). * * By default, the background meets accessibility for non-text elements, useful for a checked checkbox: * - neutral discernible background (a11y) * - black or white foreground (a11y) * - no border * * @public */ export declare const neutralFillDiscernibleControlStyles: Styles; /** * Convenience style module for a neutral-filled readable control (interactive). * * By default, the fill meets accessibility for text elements, producing an inverted foreground, useful for a button or similar: * - neutral readable background * - neutral strong foreground (a11y) * - no border * * @public */ export declare const neutralFillReadableControlStyles: Styles; /** * Convenience style module for a neutral-outlined discernible control (interactive). * * By default, the outline meets accessibility for non-text elements, useful for an unchecked checkbox: * - fill color background * - neutral strong foreground * - neutral discernible border * * @public */ export declare const neutralOutlineDiscernibleControlStyles: Styles; /** * Convenience style module for neutral-colored hint or placeholder text or icons (not interactive). * * By default, the foreground color meets accessibility, useful for hint, placeholder, or secondary text: * - no background * - neutral readable foreground (a11y) * - no border * * @public */ export declare const neutralForegroundReadableElementStyles: Styles; /** * Convenience style module for neutral-colored regular text or icons (not interactive). * * By default, the foreground color meets accessibility, useful for regular text: * - no background * - neutral strong foreground (a11y) * - no border * * @public */ export declare const neutralForegroundStrongElementStyles: Styles; /** * Convenience style module for neutral-colored divider for presentation role. * * By default, the foreground color does not meet accessibility, useful for presentation only: * - no background * - neutral subtle foreground * - no border * * @public */ export declare const neutralDividerSubtleElementStyles: Styles; /** * Convenience style module for neutral-colored divider for separator role. * * By default, the foreground color meets accessibility, useful for semantic separation: * - no background * - neutral discernible foreground (a11y) * - no border * * @public */ export declare const neutralDividerDiscernibleElementStyles: Styles; /** * Convenience style module combining all font values for the `base` type ramp. * * @public */ export declare const typeRampBaseStyles: Styles; /** * Convenience style module combining all font values for the `minus 1` type ramp. * * @public */ export declare const typeRampMinus1Styles: Styles; /** * Convenience style module combining all font values for the `minus 2` type ramp. * * @public */ export declare const typeRampMinus2Styles: Styles; /** * Convenience style module combining all font values for the `plus 1` type ramp. * * @public */ export declare const typeRampPlus1Styles: Styles; /** * Convenience style module combining all font values for the `plus 2` type ramp. * * @public */ export declare const typeRampPlus2Styles: Styles; /** * Convenience style module combining all font values for the `plus 3` type ramp. * * @public */ export declare const typeRampPlus3Styles: Styles; /** * Convenience style module combining all font values for the `plus 4` type ramp. * * @public */ export declare const typeRampPlus4Styles: Styles; /** * Convenience style module combining all font values for the `plus 5` type ramp. * * @public */ export declare const typeRampPlus5Styles: Styles; /** * Convenience style module combining all font values for the `plus 6` type ramp. * * @public */ export declare const typeRampPlus6Styles: Styles; /** * @public */ export declare const shadowCardStyles: Styles; /** * @public */ export declare const shadowCardInteractiveStyles: Styles; /** * @public */ export declare const shadowTooltipStyles: Styles; /** * @public */ export declare const shadowFlyoutStyles: Styles; /** * @public */ export declare const shadowDialogStyles: Styles; /** * @public */ export declare const actionStyles: Styles; /** * @public */ export declare const inputBaseStyles: Styles; /** * @public */ export declare const inputStyles: Styles; /** * @public */ export declare const inputAutofillStyles: Styles; /** * @public */ export declare const selectableSelectedStyles: Styles; /** * @public */ export declare const selectableUnselectedStyles: Styles; /** * @public */ export declare const itemStyles: Styles; /** * @public */ export declare const plainTextStyles: Styles; /** * @public */ export declare const plainTextMultilineStyles: Styles; /** * @public */ export declare const labelTextStyles: Styles; /** * @public */ export declare const flyoutStyles: Styles; /** * Style module for the disabled state. * * By default, sets the cursor to "not-allowed". * * @public */ export declare const disabledStyles: Styles; /** * @public */ export declare const focusIndicatorStyles: Styles; /** * @public */ export declare const focusResetStyles: Styles; /** * A mapping of reference style names to variable names. * * HACK: The full realization of design-to-code relies on generation of the styles _and_ the application to component parts. * This is a temporary backfill because the current variable names are not predictable, but this is cleaner in the generated * code than looking them up based by name. * * @beta */ export declare const StyleNameMapping: { "shape.control": string; "shape.layer": string; "shape.round": string; "density.control": string; "density.control-square": string; "density.autofill-outer": string; "density.autofill-inner": string; "density.item-container": string; "density.layer": string; "color.accent-fill-stealth-control": string; "color.accent-fill-subtle-control": string; "color.accent-fill-subtle-inverse-control": string; "color.accent-fill-ideal-control": string; "color.accent-fill-discernible-control": string; "color.accent-fill-readable-control": string; "color.accent-outline-discernible-control": string; "color.accent-foreground-readable-control": string; "color.highlight-fill-stealth-control": string; "color.highlight-fill-subtle-control": string; "color.highlight-fill-subtle-inverse-control": string; "color.highlight-fill-ideal-control": string; "color.highlight-fill-discernible-control": string; "color.highlight-fill-readable-control": string; "color.highlight-outline-discernible-control": string; "color.highlight-foreground-readable-control": string; "color.info-fill-stealth-control": string; "color.info-fill-subtle-control": string; "color.info-fill-subtle-inverse-control": string; "color.info-fill-ideal-control": string; "color.info-fill-discernible-control": string; "color.info-fill-readable-control": string; "color.info-outline-discernible-control": string; "color.info-foreground-readable-control": string; "color.success-fill-stealth-control": string; "color.success-fill-subtle-control": string; "color.success-fill-subtle-inverse-control": string; "color.success-fill-ideal-control": string; "color.success-fill-discernible-control": string; "color.success-fill-readable-control": string; "color.success-outline-discernible-control": string; "color.success-foreground-readable-control": string; "color.warning-fill-stealth-control": string; "color.warning-fill-subtle-control": string; "color.warning-fill-subtle-inverse-control": string; "color.warning-fill-ideal-control": string; "color.warning-fill-discernible-control": string; "color.warning-fill-readable-control": string; "color.warning-outline-discernible-control": string; "color.warning-foreground-readable-control": string; "color.critical-fill-stealth-control": string; "color.critical-fill-subtle-control": string; "color.critical-fill-subtle-inverse-control": string; "color.critical-fill-ideal-control": string; "color.critical-fill-discernible-control": string; "color.critical-fill-readable-control": string; "color.critical-outline-discernible-control": string; "color.critical-foreground-readable-control": string; "color.neutral-fill-stealth-control": string; "color.neutral-fill-subtle-control": string; "color.neutral-fill-subtle-inverse-control": string; "color.neutral-fill-ideal-control": string; "color.neutral-fill-discernible-control": string; "color.neutral-fill-readable-control": string; "color.neutral-outline-discernible-control": string; "color.neutral-foreground-readable-element": string; "color.neutral-foreground-strong-element": string; "color.neutral-divider-subtle-element": string; "color.neutral-divider-discernible-element": string; "text.type-ramp-base": string; "text.type-ramp-minus-1": string; "text.type-ramp-minus-2": string; "text.type-ramp-plus-1": string; "text.type-ramp-plus-2": string; "text.type-ramp-plus-3": string; "text.type-ramp-plus-4": string; "text.type-ramp-plus-5": string; "text.type-ramp-plus-6": string; "shadow.card": string; "shadow.card-interactive": string; "shadow.tooltip": string; "shadow.flyout": string; "shadow.dialog": string; "styles.action-control": string; "styles.input-base": string; "styles.input-control": string; "styles.input-autofill-control": string; "styles.selectable-control-selected": string; "styles.selectable-control-unselected": string; "styles.item-control": string; "styles.text-plain": string; "styles.text-label": string; "styles.flyout": string; "styles.disabled": string; "styles.focus-indicator": string; "styles.focus-reset": string; }; export type StyleNameMapping = ValuesOf;