import { Direction } from "@microsoft/fast-web-utilities"; import { Palette } from "../utilities/color/palette"; import { FontWeight } from "../utilities/fonts"; import designSystemSchema from "./design-system.schema"; export declare const defaultFontWeights: FontWeight; export { designSystemSchema }; export declare type DensityOffset = -3 | -2 | -1 | 0 | 1 | 2 | 3; export interface DesignSystem { /** * The background color of the current context. * May be used to draw an actual background or not. Color recipes evaluated within this context will use this as their basis. */ backgroundColor: string; /** * The accent color, which the accent palette is based on. * Keep this value in sync with accentPalette. */ accentBaseColor: string; /** * An array of colors in a ramp from light to dark, used to look up values for neutral color recipes. * Generate by calling createColorPalette. */ neutralPalette: Palette; /** * An array of colors in a ramp from light to dark, used to lookup values for accent color recipes. * Keep this value in sync with accentBaseColor. * Generate by calling createColorPalette. */ accentPalette: Palette; /** * A number between 0 and 100 that represents the contrast scale value. */ contrast: number; /** * The density offset, used with designUnit to calculate height and spacing. */ density: DensityOffset; /** * The grid-unit that UI dimensions are derived from in pixels. */ designUnit: number; /** * The number of designUnits used for component height at the base density. */ baseHeightMultiplier: number; /** * The number of designUnits used for horizontal spacing at the base density. */ baseHorizontalSpacingMultiplier: number; /** * The primary direction of the view. */ direction: Direction; /** * An object representing the supported font weights. */ fontWeight?: FontWeight; /** * The corner radius applied to controls. */ cornerRadius?: number; /** * The corner radius applied to elevated surfaces or controls. */ elevatedCornerRadius?: number; /** * The width of the outline applied to outline components in pixels. */ outlineWidth?: number; /** * The width of the outline for focus state in pixels. */ focusOutlineWidth: number; /** * The opacity to use for disabled component state. */ disabledOpacity: number; /** * Color swatch deltas for the accent-fill recipe. */ accentFillRestDelta: number; accentFillHoverDelta: number; accentFillActiveDelta: number; accentFillFocusDelta: number; accentFillSelectedDelta: number; /** * Color swatch deltas for the accent-foreground recipe. */ accentForegroundRestDelta: number; accentForegroundHoverDelta: number; accentForegroundActiveDelta: number; accentForegroundFocusDelta: number; neutralFillRestDelta: number; neutralFillHoverDelta: number; neutralFillActiveDelta: number; neutralFillFocusDelta: number; neutralFillSelectedDelta: number; /** * Color swatch deltas for the neutral-fill-input recipe. */ neutralFillInputRestDelta: number; neutralFillInputHoverDelta: number; neutralFillInputActiveDelta: number; neutralFillInputFocusDelta: number; neutralFillInputSelectedDelta: number; /** * Color swatch deltas for the neutral-fill-stealth recipe. */ neutralFillStealthRestDelta: number; neutralFillStealthHoverDelta: number; neutralFillStealthActiveDelta: number; neutralFillStealthFocusDelta: number; neutralFillStealthSelectedDelta: number; /** * Configuration for the neutral-fill-toggle recipe. */ neutralFillToggleHoverDelta: number; neutralFillToggleActiveDelta: number; neutralFillToggleFocusDelta: number; /** * The luminance value to base layer recipes on. * Sets the luminance value for the L1 layer recipe in a manner that can adjust to variable contrast. * * Currently defaults to -1 to turn the feature off and use backgroundColor for layer colors instead. */ baseLayerLuminance: number; /** * Color swatch deltas for the neutral-fill-card recipe. */ neutralFillCardDelta: number; /** * Color swatch deltas for the neutral-foreground recipe. */ /** * @deprecated Neutral foreground is now based on contrast and this is no longer used. */ neutralForegroundDarkIndex: number; /** * @deprecated Neutral foreground is now based on contrast and this is no longer used. */ neutralForegroundLightIndex: number; neutralForegroundHoverDelta: number; neutralForegroundActiveDelta: number; neutralForegroundFocusDelta: number; /** * Color swatch delta for the neutral-divider recipe. */ neutralDividerRestDelta: number; /** * Color swatch deltas for the neutral-outline recipe. */ neutralOutlineRestDelta: number; neutralOutlineHoverDelta: number; neutralOutlineActiveDelta: number; neutralOutlineFocusDelta: number; } declare const designSystemDefaults: DesignSystem; /** * Ensure that all properties of the DesignSystem are assigned. */ export declare const withDesignSystemDefaults: (config: Partial) => DesignSystem; /** * Safely retrieves a single property from a DesignSystem. * @deprecated Use getDesignSystemValue instead. */ export declare function getDesignSystemProperty(key: string): DesignSystemResolver; /** * Returns the argument if basic, otherwise calls the DesignSystemResolver function. * * @param arg A value or a DesignSystemResolver function * @param designSystem The design system config. */ export declare function checkDesignSystemResolver(arg: T | DesignSystemResolver, designSystem: DesignSystem): T; /** * Returns a function that calls the callback with designSystemDefaults ensured. * @deprecated - use design system property accessor functions instead */ export declare function ensureDesignSystemDefaults(callback: (designSystem: DesignSystem) => T): (designSystem: DesignSystem) => T; /** * A function that accepts a DesignSystem and returns a generic type. */ export declare type DesignSystemResolver = (designSystem: DesignSystem) => T; export default designSystemDefaults;