import { AddBehavior } from '@microsoft/fast-element';
import { Color as Color_2 } from 'culori/fn';
import { ComposableStyles } from '@microsoft/fast-element';
import { CSSDesignToken } from '@microsoft/fast-foundation';
import { CSSDirective } from '@microsoft/fast-element';
import { DesignToken } from '@microsoft/fast-foundation';
import { DesignTokenResolver } from '@microsoft/fast-foundation';
import { DesignTokenValue } from '@microsoft/fast-foundation/design-token-core.js';
import { ElementStyles } from '@microsoft/fast-element';
import { Rgb } from 'culori/fn';
import { TypedCSSDesignToken as TypedCSSDesignToken_2 } from '../adaptive-design-tokens.js';
import { ValuesOf } from '@microsoft/fast-foundation';

/**
 * A base {@link Palette} with a common implementation of the interface. Use PaletteRGB for an implementation
 * of a palette generation algorithm that is ready to be used directly, or extend this class to generate custom swatches.
 *
 * @public
 */
export declare class BasePalette<T extends Color = Color> implements Palette<T> {
    /**
     * {@inheritdoc Palette.source}
     */
    readonly source: Color;
    /**
     * {@inheritdoc Palette.swatches}
     */
    readonly swatches: ReadonlyArray<T>;
    /**
     * An index pointer to the end of the palette.
     */
    readonly lastIndex: number;
    /**
     * A copy of the swatches in reverse order, used for optimized searching.
     */
    readonly reversedSwatches: ReadonlyArray<T>;
    /**
     * Cache from `relativeLuminance` to swatch index in the `Palette`.
     */
    readonly closestIndexCache: Map<number, number>;
    /**
     * Creates a new Palette.
     *
     * @param source - The source color for the Palette
     * @param swatches - All swatches in the Palette
     */
    constructor(source: Color, swatches: ReadonlyArray<T>);
    /**
     * {@inheritdoc Palette.colorContrast}
     */
    colorContrast(reference: RelativeLuminance, contrastTarget: number, initialSearchIndex?: number, direction?: PaletteDirection): T;
    /**
     * {@inheritdoc Palette.delta}
     */
    delta(reference: RelativeLuminance, delta: number, direction: PaletteDirection): T;
    /**
     * {@inheritdoc Palette.closestIndexOf}
     */
    closestIndexOf(reference: RelativeLuminance): number;
    /**
     * Ensures that an input number does not exceed a max value and is not less than a min value.
     *
     * @param i - the number to clamp
     * @param min - the maximum (inclusive) value
     * @param max - the minimum (inclusive) value
     */
    private clamp;
    /**
     * {@inheritdoc Palette.get}
     */
    get(index: number): T;
}

/**
 * A {@link Color} convenience for black.
 *
 * @internal
 */
export declare const _black: Color;

/**
 * Gets a black or white Color based on the reference color and minimum contrast.
 *
 * @remarks
 * If neither black nor white meet the requested contrast the highest contrasting color is returned.
 *
 * @param reference - The reference color
 * @param minContrast - The minimum contrast required for black or white from `reference`
 * @param defaultBlack - True to default to black if both black and white meet contrast
 * @returns A black or white Color
 *
 * @public
 */
export declare function blackOrWhiteByContrast(reference: Paint, minContrast: number, defaultBlack: boolean): Color;

/**
 * Gets an interactive set of black or white Colors based on the reference color for each state and minimum contrast.
 *
 * This is commonly used for something like foreground color on an accent-filled Button.
 *
 * This algorithm ignores the contrast check for active state if rest and hover produce the same color, and uses that
 * color directly. This is because many times something like a Button has slight luminance variation between rest, hover,
 * and active states, but generally flipping the text color produces a flash and is more unexpected.
 *
 * @param restReference - The rest state reference color
 * @param hoverReference - The hover state reference color
 * @param activeReference - The active state reference color
 * @param focusReference - The focus state reference color
 * @param minContrast - The minimum contrast required for black or white from each reference color
 * @param defaultBlack - True to default to black if both black or white meet contrast
 * @returns The interactive set of black or white Colors.
 *
 * @public
 */
export declare function blackOrWhiteByContrastSet(set: InteractivePaintSet, minContrast: number, defaultBlack: boolean): InteractiveColorSet;

/**
 * The selector for a true/false condition.
 *
 * @public
 */
export declare type BooleanCondition = string;

/**
 * @public
 * @deprecated Use StylePropertyShorthand instead
 */
export declare const BorderFill: {
    all: (value: StyleValue) => StyleProperties;
};

/**
 * @public
 * @deprecated Use StylePropertyShorthand instead
 */
export declare const BorderStyle: {
    all: (value: StyleValue) => StyleProperties;
};

/**
 * @public
 * @deprecated Use StylePropertyShorthand instead
 */
export declare const BorderThickness: {
    all: (value: StyleValue) => StyleProperties;
};

/**
 * Calculate an overlay color that uses rgba (rgb + alpha) that matches the appearance of a given solid color
 * when placed on the same background.
 *
 * @param match - The solid color the overlay should match in appearance when placed over the rgbBackground
 * @param background - The background on which the overlay rests
 * @returns The rgba (rgb + alpha) color of the overlay
 *
 * @public
 */
export declare function calculateOverlayColor(match: Color_2, background: Color_2): Rgb;

/**
 * Represents a color.
 *
 * @public
 */
export declare class Color extends PaintBase {
    /**
     * The underlying Color value.
     */
    readonly color: Color_2;
    /**
     * The opaque value this Color represents if opacity is used.
     */
    protected readonly _intendedColor?: Color;
    /**
     * Creates a new Color.
     *
     * @param color - The underlying color value.
     * @param intendedColor - If `color.alpha` &lt; 1 this tracks the intended opaque color value for dependent calculations.
     */
    constructor(color: Color_2, intendedColor?: Color);
    /**
     * Gets this color value as a string.
     *
     * @returns The color value in string format
     */
    toString(): string;
    /**
     * {@inheritdoc Color.toString}
     *
     * @deprecated Use toString
     */
    toColorString: () => string;
    /**
     * Gets this color value as a string for use in css.
     *
     * @returns The color value in a valid css string format
     */
    createCSS: () => string;
    /**
     * Creates a new Color from an object with R, G, and B values expressed as a number between 0 to 1.
     *
     * @param obj - An object with `r`, `g`, and `b`, and optional `alpha` values expressed as a number between 0 and 1.
     * @returns A new Color
     */
    static from(obj: {
        r: number;
        g: number;
        b: number;
        alpha?: number;
    }): Color;
    /**
     * Creates a new Color from R, G, and B values expressed as a number between 0 to 1.
     *
     * @param r - Red channel expressed as a number between 0 and 1.
     * @param g - Green channel expressed as a number between 0 and 1.
     * @param b - Blue channel expressed as a number between 0 and 1.
     * @param alpha - Alpha channel expressed as a number between 0 and 1.
     * @returns A new Color
     */
    static fromRgb(r: number, g: number, b: number, alpha?: number): Color;
    /**
     * Creates a new Color from a parsable string.
     *
     * @param color - A string representation of the Color.
     * @returns The Color object or undefined.
     */
    static parse(color: string): Color | undefined;
    /**
     * A Color representing the full transparent.
     */
    static transparent: Color;
    /**
     * Checks if a color is transparent.
     *
     * @param color - The color to check.
     * @returns True if the color is transparent, false otherwise.
     */
    static isTransparent(color: Color_2): boolean;
    /**
     * Creates a new Color as an overlay representation of the `intendedColor` over `reference`.
     *
     * Currently the overlay will only be black or white, so this works best with a plain grey neutral palette.
     * Otherwise it will attempt to match the luminance value of the Color, so it will likely be close, but not an
     * exact match to the color from another palette.
     *
     * @param intendedColor - The Color the overlay should look like over the `reference` Color.
     * @param reference - The Color under the overlay color.
     * @returns A semitransparent Color that represents the `intendedColor` over the `reference` Color.
     */
    static asOverlay(intendedColor: Color, reference: Color): Color;
    /**
     * Creates a new Color from another Color and the target opacity.
     *
     * @remarks It's "unsafe" because it can't be used for contrast calculations.
     *
     * @param color - A Color object without opacity.
     * @param alpha - The opacity expressed as a number between 0 and 1.
     * @returns A new Color
     */
    static unsafeOpacity(color: Color, alpha: number): Color;
}

/**
 * A recipe that evaluates based on {@link ColorRecipeParams}.
 *
 * @public
 */
export declare type ColorRecipe<T = Color> = RecipeOptional<ColorRecipeParams, T>;

/**
 * A recipe that evaluates based on an interactive set of color values.
 *
 * @remarks
 * This offers more control than {@link ColorRecipe} for cases where the recipe needs to take the full set into consideration.
 *
 * @public
 */
export declare type ColorRecipeBySet<T = Color> = Recipe<InteractivePaintSet, T>;

/**
 * The type of the `evaluate` function for {@link ColorRecipeBySet}.
 *
 * @public
 */
export declare type ColorRecipeBySetEvaluate<T = Color> = RecipeEvaluate<InteractivePaintSet, T>;

/**
 * The type of the `evaluate` function for {@link ColorRecipe}.
 *
 * @public
 */
export declare type ColorRecipeEvaluate<T = Color> = RecipeEvaluateOptional<ColorRecipeParams, T>;

/**
 * A recipe that evaluates based on {@link ColorRecipePaletteParams}.
 *
 * @public
 */
export declare type ColorRecipePalette<T = Color> = Recipe<ColorRecipePaletteParams, T>;

/**
 * The type of the `evaluate` function for {@link ColorRecipePalette}.
 *
 * @public
 */
export declare type ColorRecipePaletteEvaluate<T = Color> = RecipeEvaluate<ColorRecipePaletteParams, T>;

/**
 * Parameters provided to {@link ColorRecipePalette}.
 * @public
 */
export declare type ColorRecipePaletteParams = ColorRecipeParams & {
    /**
     * The Palette to provide to the recipe.
     */
    palette: Palette;
};

/**
 * Parameters provided to {@link ColorRecipe}.
 *
 * @public
 */
export declare type ColorRecipeParams = {
    /**
     * The reference color, implementation defaults to `colorContext`, but allows for overriding for nested color recipes.
     */
    reference: Paint | null;
};

/**
 * Structure describing component anatomy for modular styling.
 *
 * @public
 */
export declare interface ComponentAnatomy<TConditions extends ComponentConditions, TParts extends ComponentParts> {
    /**
     * The name of the component.
     */
    name?: string;
    /**
     * The context element selector. Implementation defaults to `:host` if not provided.
     */
    context?: string;
    /**
     * List of conditions a component supports, like being selected or changing orientation.
     */
    conditions: TConditions;
    /**
     * List of parts exposed by the component.
     */
    parts: TParts;
    /**
     * Description of the conditions for when the component is interactive or not.
     */
    interactivity?: InteractivityDefinition;
    /**
     * Description of the focus structure of the component.
     */
    focus?: FocusDefinition<TParts>;
}

/**
 * Type of the `conditions` for component {@link ComponentAnatomy}.
 *
 * @public
 */
export declare type ComponentConditions = Record<string, Condition>;

/**
 * Type of the `parts` for component {@link ComponentAnatomy}.
 *
 * @public
 */
export declare type ComponentParts = Record<string, string>;

/**
 * A condition associated with a component.
 *
 * @public
 */
export declare type Condition = BooleanCondition | StringCondition;

/**
 * Represents a conic gradient.
 *
 * @public
 */
export declare class ConicGradient extends Gradient {
    readonly type: GradientType;
    /**
     * The angle of the gradient in degrees.
     */
    readonly angle: number;
    /**
     *
     */
    constructor(stops: GradientStop[], angle?: number);
    toString(): string;
}

/**
 * Gets the contrast ratio between two colors expressed as relative luminance values.
 *
 * For example, the contrast between #FFFFFF and #767676 is 4.5:1
 *
 * @param a - One color relative luminance, for example, 1 for white
 * @param b - Another color relative luminance, for example, 0.18116 for #767676
 * @returns The contrast between the two luminance values, for example, 4.54
 *
 * @public
 */
export declare function contrast(a: RelativeLuminance, b: RelativeLuminance): number;

/**
 * Gets an interactive set of {@link Color}s using contrast from the reference color, then deltas for each state.
 *
 * Since this is based on contrast it tries to do the right thing for accessibility. Ideally the `restDelta`
 * and `hoverDelta` should be greater than or equal to zero, because that will ensure those colors meet or
 * exceed the `minContrast`.
 *
 * This algorithm will maintain the difference between the rest and hover deltas, but may slide them on the Palette
 * to maintain accessibility.
 *
 * @param palette - The Palette used to find the Colors
 * @param reference - The reference color
 * @param minContrast - The desired minimum contrast from `reference`, which determines the base color
 * @param restDelta - The rest state offset from the base color
 * @param hoverDelta - The hover state offset from the base color
 * @param activeDelta - The active state offset from the base color
 * @param focusDelta - The focus state offset from the base color
 * @param disabledDelta - The disabled state offset from the base color
 * @param disabledPalette - The Palette for the disabled color
 * @param direction - The direction the deltas move on the `palette`, defaults to {@link directionByIsDark} based on `reference`
 * @param zeroAsTransparent - Treat a zero offset as transparent, defaults to true
 * @returns The interactive set of Colors
 *
 * @public
 */
export declare function contrastAndDeltaSwatchSet(palette: Palette, reference: Paint, minContrast: number, restDelta: number, hoverDelta: number, activeDelta: number, focusDelta: number, disabledDelta: number, disabledPalette?: Palette, direction?: PaletteDirection, zeroAsTransparent?: boolean): InteractiveColorSet;

/**
 * Gets a Color meeting the minimum contrast from the reference color.
 *
 * @param palette - The Palette used to find the Color
 * @param reference - The reference color
 * @param minContrast - The desired minimum contrast
 * @param direction - The direction the delta moves on the `palette`, defaults to {@link directionByIsDark} based on `reference`
 * @returns The Color
 *
 * @public
 */
export declare function contrastSwatch(palette: Palette, reference: Paint, minContrast: number, direction?: PaletteDirection): Color;

/**
 * Converts `Styles` to focus-only state. This allows styles to be constructed as usual, using interactive sets
 * or simple values, but convert the styles specifically to focus state to the necessary structure.
 *
 * @param styles - The input `Styles` to convert to focus-only styles.
 * @returns Converted `Styles`.
 *
 * @public
 */
export declare const convertStylesToFocusState: (styles: Styles) => Styles;

/**
 * @public
 * @deprecated Use StylePropertyShorthand instead
 */
export declare const CornerRadius: {
    all: (value: StyleValue) => StyleProperties;
};

/** @internal @deprecated Use one of the typed `createTokenX` functions instead */
export declare const create: typeof DesignToken.create;

/**
 * Creates an {@link InteractiveTokenGroup} from the `rest` state of the foreground set
 * to be applied over the interactive background tokens.
 *
 * @param foregroundRecipe - The recipe for the foreground.
 * @param background - The interactive token group for the background.
 *
 * @public
 */
export declare function createForegroundSet(foregroundRecipe: TypedDesignToken<InteractiveColorRecipe>, background: InteractiveTokenGroup<Paint>): InteractiveTokenGroup<Paint>;

/**
 * Creates a TokenGroup of a set of interactive foreground tokens to be applied over the interactive background tokens.
 *
 * @param foregroundRecipe - The recipe for the foreground.
 * @param background - The interactive token group for the background.
 *
 * @public
 */
export declare function createForegroundSetBySet(foregroundRecipe: TypedDesignToken<InteractiveColorRecipeBySet>, background: InteractiveTokenGroup<Paint>): InteractiveTokenGroup<Paint>;

/** @internal @deprecated Use `createTokenNonCss` instead */
export declare function createNonCss<T>(name: string): DesignToken<T>;

/**
 * Creates a DesignToken that can be used for color value.
 *
 * @param name - The token name in `dotted.camelCase` casing.
 * @param intendedFor - The style properties where this token is intended to be used.
 *
 * @public
 */
export declare function createTokenColor(name: string, intendedFor?: StyleProperty | StyleProperty[]): TypedCSSDesignToken<Color>;

/**
 * Creates a DesignToken that can be used for a color recipe, optionally referencing a context color.
 *
 * @param baseName - The base token name in `dotted.camelCase` casing.
 * @param intendedFor - The style properties where this token is intended to be used.
 * @param evaluate - The function to call when the derived token needs to be evaluated.
 *
 * @public
 */
export declare function createTokenColorRecipe<T = Paint>(baseName: string, intendedFor: StyleProperty | StyleProperty[], evaluate: ColorRecipeEvaluate<T>): TypedDesignToken<ColorRecipe<T>>;

/**
 * Creates a DesignToken that can be used for a color recipe, referencing an interactive color set for context.
 *
 * @param baseName - The base token name in `dotted.camelCase` casing.
 * @param intendedFor - The style properties where this token is intended to be used.
 * @param evaluate - The function to call when the derived token needs to be evaluated.
 *
 * @public
 */
export declare function createTokenColorRecipeBySet<T = Paint>(baseName: string, intendedFor: StyleProperty | StyleProperty[], evaluate: ColorRecipeBySetEvaluate<T>): TypedDesignToken<ColorRecipeBySet<T>>;

/**
 * Creates a DesignToken that can be used for a color recipe that works with different {@link Palette}s.
 * Use in conjunction with {@link createTokenColorRecipeWithPalette}.
 *
 * @param baseName - The base token name in `dotted.camelCase` casing.
 * @param intendedFor - The style properties where this token is intended to be used.
 * @param evaluate - The function to call when the derived token needs to be evaluated.
 *
 * @public
 */
export declare function createTokenColorRecipeForPalette<T = Paint>(baseName: string, intendedFor: StyleProperty | StyleProperty[], evaluate: ColorRecipePaletteEvaluate<T>): TypedDesignToken<ColorRecipePalette<T>>;

/**
 * Creates a DesignToken that can be used for the resulting color value from a recipe in styles.
 *
 * @param recipeToken - The color recipe token.
 *
 * @public
 */
export declare function createTokenColorRecipeValue(recipeToken: TypedDesignToken<ColorRecipe<Paint>>): TypedCSSDesignToken<Paint>;

/**
 * Creates a DesignToken that can be used for a specific {@link Palette} configuration of a shared color recipe.
 *
 * @param recipeToken - The shared token, typically from {@link createTokenColorRecipeForPalette}.
 * @param paletteToken - The {@link Palette} token.
 *
 * @public
 */
export declare function createTokenColorRecipeWithPalette<T = Paint>(recipeToken: TypedDesignToken<Recipe<ColorRecipePaletteParams, T>>, paletteToken: DesignToken<Palette>): TypedDesignToken<RecipeOptional<ColorRecipeParams, T>>;

/**
 * Creates a TokenGroup that can be used for the evaluated value of an interactive color recipe.
 *
 * @param recipeToken - The interactive color recipe token.
 *
 * @public
 */
export declare function createTokenColorSet(recipeToken: TypedDesignToken<InteractiveColorRecipe>): InteractiveTokenGroup<Paint>;

/**
 * Creates a DesignToken that can be used for interactive color recipe deltas.
 *
 * @param baseName - The base token name in `dotted.camelCase` casing.
 * @param state - The state for the recipe delta value, or a custom identifier in camelCase.
 * @param value - The value for the recipe delta.
 *
 * @public
 */
export declare function createTokenDelta(baseName: string, state: InteractiveState | string, value: number | DesignToken<number>): TypedDesignToken<number>;

/**
 * Creates a DesignToken that can be used for thickness, sizes, and other dimension values in styles.
 *
 * @param name - The token name in `dotted.camelCase` casing.
 * @param intendedFor - The style properties where this token is intended to be used.
 *
 * @public
 */
export declare function createTokenDimension(name: string, intendedFor?: StyleProperty | StyleProperty[]): TypedCSSDesignToken<string>;

/**
 * Creates a DesignToken that can be used for typography font family in styles.
 *
 * @param name - The token name in `dotted.camelCase` casing.
 *
 * @public
 */
export declare function createTokenFontFamily(name: string): TypedCSSDesignToken<string>;

/**
 * Creates a DesignToken that can be used for typography font size in styles.
 *
 * @param name - The token name in `dotted.camelCase` casing.
 *
 * @public
 */
export declare function createTokenFontSize(name: string): TypedCSSDesignToken<string>;

/**
 * Creates a DesignToken that can be used for typography font style (normal, italic) in styles.
 *
 * @param name - The token name in `dotted.camelCase` casing.
 *
 * @public
 */
export declare function createTokenFontStyle(name: string): TypedCSSDesignToken<string>;

/**
 * Creates a DesignToken that can be used for typography font variations in styles.
 *
 * @param name - The token name in `dotted.camelCase` casing.
 *
 * @public
 */
export declare function createTokenFontVariations(name: string): TypedCSSDesignToken<string>;

/**
 * Creates a DesignToken that can be used for typography font weight in styles.
 *
 * @param name - The token name in `dotted.camelCase` casing.
 *
 * @public
 */
export declare function createTokenFontWeight(name: string): TypedCSSDesignToken<number>;

/**
 * Creates a DesignToken that can be used for typography line height in styles.
 *
 * @param name - The token name in `dotted.camelCase` casing.
 *
 * @public
 */
export declare function createTokenLineHeight(name: string): TypedCSSDesignToken<string>;

/**
 * Creates a DesignToken that can be used for color recipe minimum contrast.
 *
 * @param baseName - The base token name in `dotted.camelCase` casing.
 * @param value - The value for the recipe minimum contrast.
 *
 * @public
 */
export declare function createTokenMinContrast(baseName: string, value: number | DesignToken<number>): TypedDesignToken<number>;

/**
 * Creates a DesignToken that can be used by other DesignTokens, but not directly in styles.
 *
 * @param name - The token name in `dotted.camelCase` casing.
 * @param type - The allowed types for the token value.
 *
 * @public
 */
export declare function createTokenNonCss<T>(name: string, type: DesignTokenType, intendedFor?: StyleProperty | StyleProperty[]): TypedDesignToken<T>;

/**
 * Creates a DesignToken that can be used for number value.
 *
 * @param name - The token name in `dotted.camelCase` casing.
 * @param intendedFor - The style properties where this token is intended to be used.
 *
 * @public
 */
export declare function createTokenNumber(name: string, intendedFor?: StyleProperty | StyleProperty[]): TypedCSSDesignToken<number>;

/**
 * Creates a DesignToken for number values that can be used by other DesignTokens, but not directly in styles.
 *
 * @param name - The token name in `dotted.camelCase` casing.
 * @param intendedFor - The style properties where this token is intended to be used.
 *
 * @public
 */
export declare function createTokenNumberNonStyling(name: string, intendedFor?: StyleProperty | StyleProperty[]): TypedDesignToken<number>;

/**
 * Creates a DesignToken that can be used as a paint treatment (background, foreground, border, etc.) in styles.
 *
 * @param name - The token name in `dotted.camelCase` casing.
 * @param intendedFor - The style properties where this token is intended to be used.
 *
 * @remarks
 * This is a token type allowing either `color` or `gradient` values.
 *
 * @public
 */
export declare function createTokenPaint(name: string, intendedFor?: StyleProperty | StyleProperty[]): TypedCSSDesignToken<Paint>;

/**
 * Creates a DesignToken that can be used for a recipe.
 *
 * @param baseName - The base token name in `dotted.camelCase` casing.
 * @param intendedFor - The style properties where this token is intended to be used.
 * @param evaluate - The function to call when the derived token needs to be evaluated.
 *
 * @public
 */
export declare function createTokenRecipe<TParam, TResult>(baseName: string, intendedFor: StyleProperty | StyleProperty[], evaluate: RecipeEvaluate<TParam, TResult>): TypedDesignToken<Recipe<TParam, TResult>>;

/**
 * Creates a DesignToken that can be used for Shadow value.
 *
 * @param name - The token name in `dotted.camelCase` casing.
 *
 * @public
 */
export declare const createTokenShadow: (name: string) => TypedCSSDesignToken_2<ShadowValue>;

/**
 * Creates a DesignToken that can be used as a color in styles.
 *
 * @param name - The token name in `dotted.camelCase` casing.
 * @param intendedFor - The style properties where this token is intended to be used.
 *
 * @public
 * @deprecated Use createTokenColor or createTokenPaint
 */
export declare function createTokenSwatch(name: string, intendedFor?: StyleProperty | StyleProperty[]): TypedCSSDesignToken<Swatch>;

/**
 * Creates a typed design token of a custom type. Use one of `createTokenX` if exists instead.
 *
 * @public
 */
export declare const createTyped: typeof TypedCSSDesignToken.createTyped;

/**
 * Color algorithm to get the Color a specified position away from the reference color.
 *
 * @param palette - The Palette used to find the Color
 * @param reference - The reference color
 * @param delta - The offset from the `reference`
 * @param direction - The direction the delta moves on the `palette`, defaults to {@link directionByIsDark} based on `reference`
 * @returns The Color
 *
 * @public
 */
export declare function deltaSwatch(palette: Palette, reference: Paint, delta: number, direction?: PaletteDirection): Color;

/**
 * Gets an interactive set of Colors the specified positions away from the reference color.
 *
 * @param palette - The Palette used to find the Colors
 * @param reference - The reference color
 * @param restDelta - The rest state offset from `reference`
 * @param hoverDelta - The hover state offset from `reference`
 * @param activeDelta - The active state offset from `reference`
 * @param focusDelta - The focus state offset from `reference`
 * @param disabledDelta - The disabled state offset from the base color
 * @param disabledPalette - The Palette for the disabled color
 * @param direction - The direction the deltas move on the `palette`, defaults to {@link directionByIsDark} based on `reference`
 * @param zeroAsTransparent - Treat a zero offset as transparent, defaults to true
 * @returns The interactive set of Colors
 *
 * @public
 */
export declare function deltaSwatchSet(palette: Palette, reference: Paint, restDelta: number, hoverDelta: number, activeDelta: number, focusDelta: number, disabledDelta?: number, disabledPalette?: Palette, direction?: PaletteDirection, zeroAsTransparent?: boolean): InteractiveColorSet;

/**
 * The adjustment (plus or minus) to density unit values.
 *
 * @remarks
 * Ex: `-1` to reduce all density values.
 * Positive or negative values, may be fractional.
 * Note that _this_ value is additive, not a multiplier, thus `0` has no effect, while `1` adds a unit.
 *
 * @defaultValue 0
 *
 * @public
 */
export declare const densityAdjustmentUnits: TypedDesignToken<number>;

/**
 * A model for defining component density using padding (spaced around the inside of the component bounds)
 * and gap (space between elements within a component).
 *
 * @public
 */
export declare class DensityPaddingAndGapTokenGroup implements TokenGroup {
    readonly name: string;
    /**
     * The design unit multiplier for control density horizontal padding.
     *
     * @remarks
     * Ex: `3` to set the padding to 3 units.
     * Positive values, may be fractional.
     *
     * @public
     */
    readonly horizontalPaddingUnits: TypedDesignToken<number>;
    /**
     * The calculated measurement for control horizontal padding, adjusted for border thickness.
     *
     * @remarks
     * Calculated from `horizontalPaddingUnits`, `designUnit`, and `strokeThickness`.
     *
     * @public
     */
    readonly horizontalPadding: TypedCSSDesignToken<string>;
    /**
     * The design unit multiplier for control density horizontal gap between elements.
     *
     * @remarks
     * Ex: `2` to set the gap to 2 units.
     * May be fractional.
     *
     * @public
     */
    readonly horizontalGapUnits: TypedDesignToken<number>;
    /**
     * The calculated measurement for the horizontal gap between elements within a control.
     *
     * @remarks
     * This is useful as a `gap` for `flex` layouts or as a `margin` on elements next to other elements.
     *
     * @public
     */
    readonly horizontalGap: TypedCSSDesignToken<string>;
    /**
     * The design unit multiplier for control density vertical padding.
     *
     * @remarks
     * Ex: `2` to set the padding to 2 units.
     * May be fractional.
     *
     * @public
     */
    readonly verticalPaddingUnits: TypedDesignToken<number>;
    /**
     * The calculated measurement for control vertical padding, adjusted for border thickness.
     *
     * @remarks
     * Calculated from `verticalPaddingUnits`, `designUnit`, and `strokeThickness`.
     *
     * @public
     */
    readonly verticalPadding: TypedCSSDesignToken<string>;
    /**
     * The design unit multiplier for control density vertical gap between elements.
     *
     * @remarks
     * Ex: `2` to set the gap to 2 units.
     * May be fractional.
     *
     * @public
     */
    readonly verticalGapUnits: TypedDesignToken<number>;
    /**
     * The calculated measurement for the vertical gap between elements within a control.
     *
     * @remarks
     * This is useful as a `gap` for `flex` layouts or as a `margin` on elements next to other elements.
     *
     * @public
     */
    readonly verticalGap: TypedCSSDesignToken<string>;
    /**
     * The dimension of a design unit for density calculation.
     *
     * @public
     */
    readonly designUnit: TypedCSSDesignToken<string>;
    /**
     * The dimension of the border for density calculation.
     *
     * @public
     */
    readonly borderThickness: TypedCSSDesignToken<string>;
    /**
     * Creates a new token group with the specified unit values and default calculations.
     *
     * @param name - The base name of the token group.
     * @param horizontalPaddingUnits - The initial value, ex: `3`.
     * @param horizontalGapUnits - The initial value, ex: `1`.
     * @param verticalPaddingUnits - The initial value, ex: `2`.
     * @param verticalGapUnits - The initial value, ex: `1`.
     */
    constructor(name: string, horizontalPaddingUnits: number, horizontalGapUnits: number, verticalPaddingUnits: number, verticalGapUnits: number, designUnit: string | DesignToken<string>, borderThickness: string | DesignToken<string>);
    /**
     * Convenience accessor for vertical and horizontal padding, adjusted for border thickness.
     *
     * @remarks
     * Convenience combination of `verticalPadding` and `horizontalPadding`.
     *
     * @public
     */
    get padding(): CSSDirective;
}

/**
 * Metadata describing the value type and intended styling uses of a DesignToken.
 *
 * @public
 */
export declare type DesignTokenMetadata = {
    readonly type: DesignTokenType;
    readonly intendedFor?: StyleProperty[];
};

/**
 * A design token value for css properties which can have multiple values, like `box-shadow`.
 *
 * @public
 */
export declare class DesignTokenMultiValue<T extends CSSDirective | string> extends Array<T> implements CSSDirective {
    /**
     * {@inheritdoc @microsoft/fast-element#CSSDirective.createCSS}
     */
    createCSS(): string;
}

/**
 * A design token value for paint purposes which can have multiple values, like `background`.
 *
 * @public
 */
export declare class DesignTokenMultiValuePaint extends DesignTokenMultiValue<PaintBase> implements RelativeLuminance {
    /**
     * {@inheritdoc RelativeLuminance.relativeLuminance}
     */
    get relativeLuminance(): number;
    /**
     * {@inheritdoc RelativeLuminance.contrast}
     */
    contrast(b: RelativeLuminance): number;
}

/**
 * A global registry for looking up Design Tokens by ID.
 *
 * @public
 */
export declare abstract class DesignTokenRegistry {
    /**
     * The shared Design Token registry.
     */
    static Shared: Map<string, DesignToken<any>>;
    /**
     * The Design Token Group registry.
     *
     * @remarks
     * Currently only Interactive Token Groups are meaningful and supported.
     */
    static Groups: Map<string, InteractiveTokenGroup<any>>;
}

/**
 * Standard design token types from the community group and new types defined in Adaptive UI.
 *
 * @public
 */
export declare const DesignTokenType: {
    readonly color: "color";
    readonly dimension: "dimension";
    readonly fontFamily: "fontFamily";
    readonly fontWeight: "fontWeight";
    readonly duration: "duration";
    readonly cubicBezier: "cubicBezier";
    readonly number: "number";
    readonly strokeStyle: "strokeStyle";
    readonly border: "border";
    readonly transition: "transition";
    readonly shadow: "shadow";
    readonly gradient: "gradient";
    readonly typography: "typography";
    readonly boolean: "boolean";
    readonly fontStyle: "fontStyle";
    readonly fontVariations: "fontVariations";
    readonly palette: "palette";
    readonly recipe: "recipe";
    readonly paint: "paint";
    readonly string: "string";
};

/**
 * A design token data type, either from the community group, Adaptive UI, or custom.
 *
 * @public
 */
export declare type DesignTokenType = ValuesOf<typeof DesignTokenType> | string;

/**
 * Gets an inverse directional multiplier based on whether the `color` is dark or light.
 *
 * @param color - The color to check
 * @returns `darker` if the `color` is light, `lighter` if the `color` is dark
 *
 * @public
 */
export declare function directionByIsDark(color: RelativeLuminance): PaletteDirectionValue;

/**
 * A `Map` of style definitions, where the key is a string and the value is the token or final value.
 *
 * @public
 */
export declare type EffectiveStylePropertiesMap = Map<string, StyleValue>;

/**
 * Renders Adaptive UI Styles as ElementStyles.
 *
 * @public
 */
export declare class ElementStylesRenderer {
    private readonly _evaluateFunctions;
    /**
     * The rules produced by evaluating the provided `Styles`.
     */
    private readonly _rules;
    /**
     * Creates a new ElementStylesRenderer.
     *
     * @param styles - A collection of individual styling properties.
     */
    constructor(styles: Styles);
    private static declaration;
    private static propertySingle;
    private static propertyInteractive;
    private createStyleModules;
    private appendRule;
    /**
     * Convert style definitions to `ElementStyles`.
     *
     * @param target - Parameters for creating the selectors for component states.
     * @param interactivity - The interactivity configuration for the component.
     * @returns The rendered `ElementStyles`.
     */
    render(target: StyleModuleTarget, interactivity?: InteractivityDefinition): ElementStyles;
    /**
     * Styles to merge in for any `ComponentAnatomy` which defines a `disabled` state.
     */
    static disabledStyles: Styles;
    private static _focusStateStyles;
    private static _focusStateStylesAdjusted;
    /**
     * Styles to merge in for any `ComponentAnatomy` which defines a `focus` state.
     */
    static get focusStateStyles(): Styles;
    static set focusStateStyles(styles: Styles);
    private static _focusResetStyles;
    private static _focusResetStylesAdjusted;
    /**
     * Styles to merge in for any `ComponentAnatomy` which defines a `focus` reset target.
     */
    static get focusResetStyles(): Styles;
    static set focusResetStyles(styles: Styles);
    /**
     * Convert style rule definitions to `ElementStyles`.
     *
     * @param baseStyles - Any base styles to append style rules to.
     * @param styleRules - Adaptive UI style rules.
     * @param anatomy - Optional component anatomy for features including interactivity and focus definition.
     * @returns The rendered `ElementStyles`.
     */
    static renderStyleRules(baseStyles: ComposableStyles[] | undefined, styleRules: StyleRules, anatomy?: ComponentAnatomy<any, any>): ElementStyles;
}

/**
 * A recipe that evaluates to an elevation treatment, commonly, but not limited to, a box shadow.
 *
 * @public
 */
export declare type ElevationRecipe = Recipe<number, string>;

/**
 * The type of the `evaluate` function for {@link ElevationRecipe}.
 *
 * @public
 */
export declare type ElevationRecipeEvaluate = RecipeEvaluate<number, string>;

/**
 * @public
 */
export declare const Fill: {
    backgroundAndForeground: (background: InteractiveTokenGroup<Paint>, foregroundRecipe: TypedDesignToken<InteractiveColorRecipe>) => StyleProperties;
    backgroundAndForegroundBySet: (background: InteractiveTokenGroup<Paint>, foregroundRecipe: TypedDesignToken<InteractiveColorRecipeBySet>) => StyleProperties;
    backgroundNonInteractive: (background: TypedCSSDesignToken<Paint>, disabled?: TypedCSSDesignToken<Paint>) => StyleProperties;
    foregroundNonInteractive: (foreground: TypedCSSDesignToken<Paint>, disabled?: TypedCSSDesignToken<Paint>) => StyleProperties;
};

/**
 * Common patterns for {@link FocusDefinition}.
 *
 * @public
 */
export declare const Focus: {
    /**
     * The simple case of the context element accepting and indicating focus.
     */
    readonly contextFocused: () => FocusDefinition<any>;
    /**
     * The context element has focus, but a child element is the indicator.
     *
     * @param indicatorPart - The part name of where to indicate focus.
     */
    readonly contextChildFocused: <TParts>(indicatorPart: keyof TParts & string) => FocusDefinition<TParts>;
    /**
     * A child element is focusable and will indicate focus itself.
     *
     * @param part - The part name of the focusable part.
     */
    readonly partFocused: <TParts_1>(part: keyof TParts_1 & string) => FocusDefinition<TParts_1>;
    /**
     * A child element is focusable, but an ancestor will display the indicator.
     *
     * @param indicatorPart - The part name of the wrapper of the focusable element.
     * @param focusablePart - The element that accepts focus.
     */
    readonly partWithin: <TParts_2>(indicatorPart: keyof TParts_2 & string, focusablePart: keyof TParts_2 & string) => FocusDefinition<TParts_2>;
};

/**
 * Defines the focus indicator structure for the component, including which part will naturally receive focus
 * and which part should indicate it.
 *
 * @public
 */
export declare interface FocusDefinition<TParts> {
    /**
     * The focus indication element.
     */
    focusTarget: StyleModuleTarget;
    /**
     * The focusable element to reset browser default styles, for instance, a native input element or an element with a `tabindex`.
     */
    resetTarget?: StyleModuleTarget;
}

/**
 * Represents a gradient.
 *
 * @public
 */
export declare abstract class Gradient extends PaintBase {
    /**
     * The type of gradient.
     */
    abstract readonly type: GradientType;
    /**
     * The stops on the gradient.
     */
    readonly stops: GradientStop[];
    /**
     * Creates a new Gradient.
     */
    constructor(stops: GradientStop[]);
    protected get stopsListCSS(): string;
    /**
     * Gets this gradient value as a string.
     *
     * @returns The gradient value in string format
     */
    abstract toString(): string;
    /**
     * Gets this gradient value as a string for use in css.
     *
     * @returns The gradient value in a valid css string format
     */
    createCSS: () => string;
}

/**
 * Represents a single {@link Color} stop on a {@link Gradient}.
 *
 * @public
 */
export declare type GradientStop = {
    /**
     * The {@link Color} at this gradient stop.
     */
    color: Color;
    /**
     * The position of the start of the gradient stop.
     */
    position: GradientStopPosition;
    /**
     * The position of the end of the gradient stop.
     */
    endPosition?: GradientStopPosition;
};

/**
 * Represents the position of a single {@link GradientStop}.
 *
 * @public
 */
export declare type GradientStopPosition = {
    /**
     * The value of the gradient stop position.
     */
    value: number;
    /**
     * The unit of the gradient stop position.
     *
     * @remarks
     * Percentage values are represented as a decimal value between 0 and 1.
     * "deg" is valid for conic gradient stops only.
     */
    unit: "%" | "px" | "deg";
};

/**
 * Supported gradient types.
 *
 * @public
 */
export declare type GradientType = "conic" | "linear" | "radial";

/**
 * Color algorithm for a gradient with the source palette in the middle and the hue shifted for the start and end.
 *
 * @param palette - The Palette used for the base of the hue shift
 * @param reference - The reference color
 * @param delta - The offset from the `reference`
 * @param angle - The angle of the gradient
 * @param startShift - The amount and direction of the hue shift at the start
 * @param endShift - The amount and direction of the hue shift at the end
 * @param direction - The direction the delta moves on the palettes, defaults to {@link directionByIsDark} based on `reference`
 * @returns The Gradient
 *
 * @beta
 */
export declare function hueShiftGradient(palette: Palette, reference: Paint, delta: number, angle?: number, startShift?: number, endShift?: number, direction?: PaletteDirection): Gradient;

/**
 * Gets an interactive set of {@link Color}s using contrast from the reference color. If the ideal color meets contrast it
 * is used for the base color, if not it's adjusted until contrast is met. Then deltas from that color are used for each state.
 *
 * This algorithm is similar to {@link contrastAndDeltaSwatchSet}, with the addition of `idealColor`. This is often preferable
 * for brand colors, like for an accent-filled Button.
 *
 * Since this is based on contrast it tries to do the right thing for accessibility. Ideally the `restDelta`
 * and `hoverDelta` should be greater than or equal to zero, because that will ensure those colors meet or
 * exceed the `minContrast`.
 *
 * This algorithm will maintain the difference between the rest and hover deltas, but may slide them on the Palette
 * to maintain accessibility.
 *
 * @param palette - The Palette used to find the Colors
 * @param reference - The reference color
 * @param idealColor - The color to use as the base color if it meets `minContrast` from `reference`
 * @param minContrast - The desired minimum contrast from `reference`, which determines the base color
 * @param restDelta - The rest state offset from the base color
 * @param hoverDelta - The hover state offset from the base color
 * @param activeDelta - The active state offset from the base color
 * @param focusDelta - The focus state offset from the base color
 * @param disabledDelta - The disabled state offset from the base color
 * @param disabledPalette - The Palette for the disabled color
 * @param direction - The direction the deltas move on the `palette`, defaults to {@link directionByIsDark} based on `reference`
 * @returns The interactive set of Colors
 *
 * @public
 */
export declare function idealColorDeltaSwatchSet(palette: Palette, reference: Paint, minContrast: number, idealColor: Color, restDelta: number, hoverDelta: number, activeDelta: number, focusDelta: number, disabledDelta: number, disabledPalette?: Palette, direction?: PaletteDirection): InteractiveColorSet;

/**
 * A recipe that evaluates a color value for rest, hover, active, and focus states.
 *
 * @public
 */
export declare type InteractiveColorRecipe = ColorRecipe<InteractivePaintSet>;

/**
 * A recipe that evaluates a color value for rest, hover, active, and focus states.
 *
 * @public
 */
export declare type InteractiveColorRecipeBySet = ColorRecipeBySet<InteractivePaintSet>;

/**
 * The type of the `evaluate` function for {@link InteractiveColorRecipeBySet}.
 *
 * @public
 */
export declare type InteractiveColorRecipeBySetEvaluate = ColorRecipeBySetEvaluate<InteractivePaintSet>;

/**
 * The type of the `evaluate` function for {@link InteractiveColorRecipe}.
 *
 * @public
 */
export declare type InteractiveColorRecipeEvaluate = ColorRecipeEvaluate<InteractivePaintSet>;

/**
 * A recipe that evaluates a color value for rest, hover, active, and focus states using the provided Palette.
 *
 * @public
 */
export declare type InteractiveColorRecipePalette = ColorRecipePalette<InteractivePaintSet>;

/**
 * The type of the `evaluate` function for {@link InteractiveColorRecipePalette}.
 *
 * @public
 */
export declare type InteractiveColorRecipePaletteEvaluate = ColorRecipePaletteEvaluate<InteractivePaintSet>;

/**
 * A set of {@link Color}s to use for an interactive control's states.
 *
 * @public
 */
export declare interface InteractiveColorSet extends InteractiveValues<Color | null> {
}

/**
 * A set of {@link Paint}s to use for an interactive control's states.
 *
 * @public
 */
export declare interface InteractivePaintSet extends InteractiveValues<Paint | null> {
}

/**
 * An interactive element's states.
 *
 * @public
 */
export declare enum InteractiveState {
    /**
     * The rest state.
     */
    rest = "rest",
    /**
     * The hover state.
     */
    hover = "hover",
    /**
     * The active state.
     */
    active = "active",
    /**
     * The focus state.
     */
    focus = "focus",
    /**
     * The disabled state.
     */
    disabled = "disabled"
}

/**
 * Returns an interactive set of opaque {@link Color}s or {@link Color}s with opacity relative to the reference color.
 *
 * @param set - The swatch set for which to make overlay.
 * @param reference - The reference color for a semitransparent swatch.
 * @param asOverlay - True to return a semitransparent representation of `swatch` relative to `reference`.
 * @returns The requested representation of a `swatch` set.
 *
 * @public
 */
export declare function interactiveSwatchSetAsOverlay(set: InteractiveColorSet, reference: Color, asOverlay: boolean): InteractiveColorSet;

/**
 * A group of tokens to use for an interactive element's states.
 *
 * @public
 */
export declare interface InteractiveTokenGroup<T> extends MakePropertyRequired<TokenGroup, "type">, InteractiveValues<TypedCSSDesignToken<T>> {
}

/**
 * Values for an interactive element's states.
 *
 * @public
 */
export declare type InteractiveValues<T> = {
    [key in InteractiveState]: T;
};

/**
 * Common patterns for {@link InteractivityDefinition}.
 *
 * @public
 */
export declare const Interactivity: {
    /**
     * Has interactive or disabled states based on the `disabled` attribute.
     *
     * For instance, a form control.
     */
    readonly disabledAttribute: InteractivityDefinition;
    /**
     * Has interactive or disabled states based on a `disabled` class.
     *
     * For instance, a form control.
     */
    readonly disabledClass: InteractivityDefinition;
    /**
     * Has interactive states based on the `href` attribute, but never a disabled state.
     *
     * For instance, an `<a>` should style as plain text when it doesn't have an `href` attribute.
     */
    readonly hrefAttribute: InteractivityDefinition;
    /**
     * Is always interactive and never has a disabled state.
     *
     * For instance, cards or list items that are not able to be disabled.
     */
    readonly always: InteractivityDefinition;
    /**
     * Is never interactive or disabled, that is, a plain static element.
     *
     * For instance, body text, headings, illustrations, etc.
     *
     * @remarks
     * This is an explicit value representing the default case.
     */
    readonly never: InteractivityDefinition;
};

/**
 * Conditions supported by a component to inform the style rules of its interactivity configuration.
 *
 * @public
 */
export declare type InteractivityDefinition = {
    [key in InteractiveState]?: string;
} & {
    /**
     * The selector indicating the component or element is interactive, like `:not([disabled])`.
     *
     * @remarks
     * This is combined with the `hover`, `active`, and `focus` selectors to only apply those styles
     * when the component or element is interactive.
     */
    interactive?: string;
};

/**
 * Determines if a `color` is dark according to relative luminance. That is, from a contrast perspective,
 * whether it has more contrast against white than black. In grey, dark is #757575 and darker.
 *
 * @param color - The color to check
 * @returns True when the `color` is dark
 *
 * @public
 */
export declare function isDark(color: RelativeLuminance): boolean;

/**
 * Represents a linear gradient.
 *
 * @public
 */
export declare class LinearGradient extends Gradient {
    readonly type: GradientType;
    /**
     * The angle of the gradient in degrees.
     */
    readonly angle: number;
    /**
     *
     */
    constructor(stops: GradientStop[], angle?: number);
    /**
     * Gets this gradient value as a string.
     *
     * @returns The gradient value in string format
     */
    toString(): string;
}

/**
 * Create a grey {@link Color} for the specified `luminance`. Note this is absolute luminance not 'relative' luminance.
 *
 * @param luminance - A value between 0 and 1 representing the desired luminance, for example, 0.5 for middle grey, 0 = black, 1 = white
 * @returns A swatch for the specified grey value
 *
 * @public
 */
export declare function luminanceSwatch(luminance: number): Color;

/**
 * @public
 */
export declare type MakePropertyOptional<T, K extends keyof T> = Omit<T, K> & {
    [P in K]?: T[P];
};

/**
 * @public
 */
export declare type MakePropertyRequired<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>;

/**
 * Creates a single css selector for the provided `params` and `state`.
 *
 * @param params - Parameters for the selector.
 * @param state - The interactive state.
 * @returns A css selector string.
 *
 * @public
 */
export declare function makeSelector(params: StyleModuleEvaluateParameters, state: InteractiveState): string;

/**
 * @public
 * @deprecated Use StylePropertyShorthand instead
 */
export declare const Padding: {
    all: (value: StyleValue) => StyleProperties;
    verticalHorizontal: (valueVertical: StyleValue, valueHorizontal: StyleValue) => StyleProperties;
};

/**
 * The type of a Paint token value.
 *
 * @public
 */
export declare type Paint = PaintBase | DesignTokenMultiValuePaint;

/**
 * Abstract representation of a value which can be used to paint a style like a fill or border.
 *
 * See {@link Color} of {@link Gradient} for concrete implementations.
 *
 * @public
 */
export declare abstract class PaintBase implements RelativeLuminance, CSSDirective {
    #private;
    /**
     * Creates a new Color.
     *
     * @param color - The underlying Color value
     */
    protected constructor(relativeLuminance: number);
    /**
     * Creates a CSS fragment to interpolate into the CSS document.
     *
     * @returns - the string to interpolate into CSS
     */
    createCSS(add: AddBehavior): ComposableStyles;
    /**
     * {@inheritdoc RelativeLuminance.relativeLuminance}
     */
    get relativeLuminance(): number;
    /**
     * {@inheritdoc RelativeLuminance.contrast}
     */
    contrast(b: RelativeLuminance): number;
}

/**
 * A collection of {@link Color}s that form a luminance gradient from light (index 0) to dark.
 *
 * @public
 */
export declare interface Palette<T extends Color = Color> {
    /**
     * The Color used to create the full palette.
     */
    readonly source: Color;
    /**
     * The array of all Colors from light to dark.
     */
    readonly swatches: ReadonlyArray<T>;
    /**
     * Returns a Color from the Palette that most closely meets
     * the `minContrast` ratio for to the `reference`.
     *
     * @param reference - The relative luminance of the reference
     * @param minContrast - The minimum amount of contrast from the `reference`
     * @param initialIndex - Optional starting point for the search
     * @param direction - Optional control for the direction of the search
     * @returns The Color that meets the provided contrast
     */
    colorContrast(reference: RelativeLuminance, minContrast: number, initialIndex?: number, direction?: PaletteDirection): T;
    /**
     * Returns a Color from the Palette that's the specified position and direction away from the `reference`.
     *
     * @param reference - The relative luminance of the reference
     * @param delta - The number of swatches away from `reference`
     * @param direction - The direction to go from `reference`, 1 goes darker, -1 goes lighter
     */
    delta(reference: RelativeLuminance, delta: number, direction: PaletteDirection): T;
    /**
     * Returns the index of the Palette that most closely matches
     * the provided relative luminance.
     *
     * @param reference - The relative luminance of the reference
     * @returns The index
     */
    closestIndexOf(reference: RelativeLuminance): number;
    /**
     * Gets a Color by index. Index is clamped to the limits
     * of the Palette so a Color will always be returned.
     *
     * @param index - The index
     * @returns The Color
     */
    get(index: number): T;
}

/**
 * Convenience type to allow a fixed {@link (PaletteDirectionValue:variable)} or a function that resolves to one.
 *
 * @public
 */
export declare type PaletteDirection = PaletteDirectionValue | (() => PaletteDirectionValue);

/**
 * Directional values for navigating swatches in {@link Palette}.
 *
 * @public
 */
export declare const PaletteDirectionValue: Readonly<{
    /**
     * Move darker, or up the Palette.
     */
    readonly darker: 1;
    /**
     * Move lighter, or down the Palette.
     */
    readonly lighter: -1;
}>;

/**
 * Directional values for navigating swatches in {@link Palette}.
 *
 * @public
 */
export declare type PaletteDirectionValue = typeof PaletteDirectionValue[keyof typeof PaletteDirectionValue];

/**
 * An implementation of a {@link Palette} that uses the okhsl color model.
 * This is useful for UI as it means the difference between swatches is perceptually equal.
 *
 * @public
 */
export declare class PaletteOkhsl extends BasePalette {
    static from(source: Color | string, options?: Partial<PaletteOkhslOptions>): PaletteOkhsl;
}

/**
 * Options to tailor the generation of PaletteOkhsl.
 *
 * @public
 */
export declare interface PaletteOkhslOptions {
    /**
     * The number of steps in the generated palette.
     *
     * @defaultValue 66
     */
    stepCount: number;
    /**
     * The saturation of the color at the light end of the palette.
     *
     * @remarks Decimal value between 0 and 1; 0 means no change.
     *
     * @defaultValue 0
     */
    lightEndSaturation: number;
    /**
     * The saturation of the color at the dark end of the palette.
     *
     * @remarks Decimal value between 0 and 1; 0 means no change.
     *
     * @defaultValue 0
     */
    darkEndSaturation: number;
}

/**
 * An implementation of a {@link Palette} that has a consistent minimum contrast value between swatches.
 * This is useful for UI as it means the perception of the difference between colors the same distance
 * apart in the Palette will be consistent whether the colors are light yellow or dark red.
 * It generates its curve using the LAB color space and maintains the saturation of the source color throughout.
 *
 * @public
 */
export declare class PaletteRGB extends BasePalette {
    /**
     * Adjust one end of the contrast-based palette so it doesn't abruptly fall to black (or white).
     *
     * @param swatchContrast - Function to get the target contrast for the next swatch
     * @param referencePalette - The high resolution palette
     * @param targetPalette - The contrast-based palette to adjust
     * @param direction - The end to adjust
     */
    private static adjustEnd;
    /**
     * Generate a Palette with consistent minimum contrast between swatches.
     *
     * @param source - The source color
     * @param options - Palette generation options
     * @returns A Palette meeting the requested contrast between swatches.
     */
    private static createColorPaletteByContrast;
    /**
     * Creates a PaletteRGB from a source Color with options.
     *
     * @param source - The source Color to create a Palette from
     * @param options - Options to specify details of palette generation
     * @returns The PaletteRGB with swatches based on `source`
     */
    static from(source: Color | string, options?: Partial<PaletteRGBOptions>): PaletteRGB;
}

/**
 * Options to tailor the generation of PaletteRGB.
 *
 * @public
 */
export declare interface PaletteRGBOptions {
    /**
     * The minimum amount of contrast between steps in the palette.
     * - Default 1.05
     * - Greater than 1
     * - Recommended increments by hundredths
     */
    stepContrast: number;
    /**
     * Multiplier for increasing step contrast as the swatches darken.
     * - Default 0.
     * - Greater than or equal to 0
     * - Recommended increments by hundredths
     */
    stepContrastRamp: number;
    /**
     * Whether to keep the exact source color in the target palette.
     * - Default false
     *
     * Only recommended when the exact color is required and used in stateful interaction recipes like hover.
     *
     * Note that custom recipes can still access the source color even if it's not in the ramp,
     * but turning this on will potentially increase the contrast between steps toward the ends of the palette.
     */
    preserveSource: boolean;
}

/**
 * Represents a radial gradient.
 *
 * @public
 */
export declare class RadialGradient extends Gradient {
    readonly type: GradientType;
    /**
     *
     */
    constructor(stops: GradientStop[]);
    /**
     * Gets this gradient value as a string.
     *
     * @returns The gradient value in string format
     */
    toString(): string;
}

/**
 * A `Recipe` is a derived `DesignToken` value that enables reusable _and_ customizable design logic.
 *
 * @public
 */
export declare interface Recipe<TParam, TResult> {
    /**
     * Evaluate a recipe.
     *
     * @param resolver - A function that resolves design tokens.
     * @param params - Any params that are needed to evaluate.
     */
    evaluate: RecipeEvaluate<TParam, TResult>;
}

/**
 * @public
 */
export declare type RecipeEvaluate<TParam, TResult> = (resolver: DesignTokenResolver, params: TParam) => TResult;

/**
 * @public
 */
export declare type RecipeEvaluateOptional<TParam, TResult> = (resolver: DesignTokenResolver, params?: TParam) => TResult;

/**
 * A `Recipe` is a derived `DesignToken` value that enables reusable _and_ customizable design logic.
 *
 * @public
 */
export declare interface RecipeOptional<TParam, TResult> {
    /**
     * Evaluate a recipe.
     *
     * @param resolver - A function that resolves design tokens.
     * @param params - Any params that are optional for evaluation.
     */
    evaluate: RecipeEvaluateOptional<TParam, TResult>;
}

/**
 * An interface for storing the relative luminance value of a color to aid in contrast calculations.
 *
 * @public
 */
export declare interface RelativeLuminance {
    /**
     * A number between 0 and 1, calculated by {@link https://www.w3.org/WAI/GL/wiki/Relative_luminance}
     */
    readonly relativeLuminance: number;
    /**
     * Gets the contrast between this relative luminance and another.
     *
     * @returns The contrast between the two luminance values, for example, 4.54
     */
    contrast: (a: RelativeLuminance) => number;
}

/**
 * Gets a fixed {@link (PaletteDirectionValue:variable)} from {@link PaletteDirection} which may be a function that needs to be resolved.
 *
 * @param direction - A fixed palette direction value or a function that resolves to one
 * @returns A fixed palette direction value
 *
 * @public
 */
export declare function resolvePaletteDirection(direction: PaletteDirection): PaletteDirectionValue;

/**
 * @beta
 */
export declare interface SerializableAnatomy {
    name: string;
    context: string;
    conditions: Record<string, SerializableCondition>;
    parts: Record<string, string>;
    interactivity?: InteractivityDefinition;
    focus?: FocusDefinition<any>;
    styleRules: SerializableStyleRule[];
}

/**
 * @beta
 */
export declare interface SerializableAnatomyWithImports extends SerializableAnatomy {
    imports?: string[];
}

/**
 * @beta
 */
export declare type SerializableBooleanCondition = string;

/**
 * @beta
 */
export declare type SerializableCondition = SerializableBooleanCondition | SerializableStringCondition;

/**
 * @beta
 */
export declare type SerializableStringCondition = Record<string, string>;

/**
 * @beta
 */
export declare interface SerializableStyleRule {
    stateOnContext?: boolean;
    contextCondition?: Record<string, string | boolean>;
    part?: string;
    styles?: string[];
    properties?: Record<string, string>;
}

/**
 * The definition of a shadow for `box-shadow`, `text-shadow`, or `drop-shadow` values.
 *
 * @public
 */
export declare class Shadow implements CSSDirective {
    color: Color;
    xOffset: number;
    yOffset: number;
    blurRadius?: number | undefined;
    spread?: number | undefined;
    /**
     * Creates a new Shadow.
     *
     * @param color - The color of the shadow.
     * @param xOffset - The x offset in `px`.
     * @param yOffset - The y offset in `px`.
     * @param blurRadius - The blur radius in `px`.
     * @param spread - The spread in `px`. This is not supported in all potential uses of Shadow (text or drop).
     */
    constructor(color: Color, xOffset: number, yOffset: number, blurRadius?: number | undefined, spread?: number | undefined);
    /**
     * {@inheritdoc @microsoft/fast-element#CSSDirective.createCSS}
     */
    createCSS(): string;
}

/**
 * The type of a Shadow token value.
 *
 * @public
 */
export declare type ShadowValue = Shadow | DesignTokenMultiValue<Shadow> | string;

/**
 * The state and selector for a multiple value condition.
 *
 * @public
 */
export declare type StringCondition = Record<string, string>;

/**
 * The properties and values for a {@link StyleRule} definition.
 *
 * A declaration should have `styles` and/or `properties` - `styles` are applied before `properties`.
 *
 * @public
 */
export declare type StyleDeclaration = {
    /**
     * The {@link Styles} for this rule.
     *
     * @remarks
     * Optional. If not applicable, provide `properties`.
     */
    styles?: Styles | Iterable<Styles>;
    /**
     * A collection of properties to define a new {@link Styles} or augment those provided as `styles`.
     *
     * @remarks
     * Optional. If not applicable, provide `styles`.
     */
    properties?: StyleProperties;
};

/**
 * Key for a style property, a {@link (StyleProperty:type)}, {@link (StylePropertyShorthand:type)}, or a string for any other CSS property.
 *
 * @public
 */
export declare type StyleKey = StyleProperty | StylePropertyShorthand | (string & Record<never, never>);

/**
 * Parameters used to evaluate style modules for a component.
 *
 * @public
 */
export declare type StyleModuleEvaluateParameters = StyleModuleTarget & InteractivityDefinition;

/**
 * Parameters used to apply style modules to components.
 *
 * @public
 */
export declare interface StyleModuleTarget {
    /**
     * The selector for the context element. Implementation defaults to `:host` if not provided.
     */
    context?: string;
    /**
     * The condition to match on the context element.
     */
    contextCondition?: string;
    /**
     * Normally the state applies to the context element, or if specified, the part. This option forces the state to the
     * apply to the context element, useful for styling the context element state in only a portion of the child elements.
     */
    stateOnContext?: boolean;
    /**
     * The component part name to apply this style module.
     */
    part?: string;
    /**
     * The condition to match on the part element.
     */
    partCondition?: string;
    /**
     * Informs the style generator to ignore the interactivity configuration of the component.
     *
     * @remarks
     * The `StyleModuleTarget` and `InteractivityDefinition` together makeup the evaluation parameters for
     * generating the styles. In some edge case scenarios the default behavior of considering both of these
     * together is not desireable (ex: Menu items which should show focus when disabled). This is an
     * exploration into a way to describe this, but perhaps there's a more extensible pattern.
     *
     * @beta
     */
    ignoreInteractivity?: boolean;
}

/**
 * An object of style definitions, where the key is the {@link (StyleKey:type)} and the value is the token or final value.
 *
 * @remarks
 * The `Record` format is a convenience for manual authoring of style modules (instead of a `Map`).
 *
 * @public
 */
export declare type StyleProperties = Partial<Record<StyleKey, StyleValue>>;

/**
 * A `Map` of style definitions, where the key is the {@link (StyleKey:type)} and the value is the token or final value.
 *
 * @public
 */
export declare type StylePropertiesMap = Map<StyleKey, StyleValue>;

/**
 * Supported style properties for design-to-code with Adaptive UI.
 *
 * Generalizes CSS properties which are also commonly supported in design tools (Figma) so the recipes can
 * be applied in tooling or in the browser.
 *
 * @public
 */
export declare const StyleProperty: {
    readonly backgroundFill: "backgroundFill";
    readonly foregroundFill: "foregroundFill";
    readonly borderFillTop: "borderFillTop";
    readonly borderFillRight: "borderFillRight";
    readonly borderFillBottom: "borderFillBottom";
    readonly borderFillLeft: "borderFillLeft";
    readonly borderThicknessTop: "borderThicknessTop";
    readonly borderThicknessRight: "borderThicknessRight";
    readonly borderThicknessBottom: "borderThicknessBottom";
    readonly borderThicknessLeft: "borderThicknessLeft";
    readonly borderStyleTop: "borderStyleTop";
    readonly borderStyleRight: "borderStyleRight";
    readonly borderStyleBottom: "borderStyleBottom";
    readonly borderStyleLeft: "borderStyleLeft";
    readonly cornerRadiusTopLeft: "cornerRadiusTopLeft";
    readonly cornerRadiusTopRight: "cornerRadiusTopRight";
    readonly cornerRadiusBottomRight: "cornerRadiusBottomRight";
    readonly cornerRadiusBottomLeft: "cornerRadiusBottomLeft";
    readonly fontFamily: "fontFamily";
    readonly fontSize: "fontSize";
    readonly fontWeight: "fontWeight";
    readonly fontStyle: "fontStyle";
    readonly fontVariationSettings: "fontVariationSettings";
    readonly letterSpacing: "letterSpacing";
    readonly lineHeight: "lineHeight";
    readonly marginTop: "marginTop";
    readonly marginRight: "marginRight";
    readonly marginBottom: "marginBottom";
    readonly marginLeft: "marginLeft";
    readonly paddingTop: "paddingTop";
    readonly paddingRight: "paddingRight";
    readonly paddingBottom: "paddingBottom";
    readonly paddingLeft: "paddingLeft";
    readonly gap: "gap";
    readonly height: "height";
    readonly minHeight: "minHeight";
    readonly maxHeight: "maxHeight";
    readonly width: "width";
    readonly minWidth: "minWidth";
    readonly maxWidth: "maxWidth";
    readonly layoutInner: "layoutInner";
    readonly layoutDirection: "layoutDirection";
    readonly layoutMainAxisAlignItems: "layoutMainAxisAlignItems";
    readonly layoutCrossAxisAlignItems: "layoutCrossAxisAlignItems";
    readonly layoutWrap: "layoutWrap";
    readonly opacity: "opacity";
    readonly cursor: "cursor";
    readonly outlineColor: "outlineColor";
    readonly outlineOffset: "outlineOffset";
    readonly outlineStyle: "outlineStyle";
    readonly outlineThickness: "outlineThickness";
    /** @deprecated Use outlineThickness */
    readonly outlineWidth: "outlineWidth";
    readonly shadow: "shadow";
};

/**
 * Supported style properties for design-to-code with Adaptive UI.
 *
 * Generalizes CSS properties which are also commonly supported in design tools (Figma) so the recipes can
 * be applied in tooling or in the browser.
 *
 * @public
 */
export declare type StyleProperty = ValuesOf<typeof StyleProperty>;

/**
 * A convenience shorthand for all border fill {@link (StyleProperty:type)} values.
 *
 * @public
 * @deprecated Use StylePropertyShorthand instead
 */
export declare const stylePropertyBorderFillAll: ("borderFillTop" | "borderFillRight" | "borderFillBottom" | "borderFillLeft")[];

/**
 * A convenience shorthand for all border style {@link (StyleProperty:type)} values.
 *
 * @public
 * @deprecated Use StylePropertyShorthand instead
 */
export declare const stylePropertyBorderStyleAll: ("borderStyleTop" | "borderStyleRight" | "borderStyleBottom" | "borderStyleLeft")[];

/**
 * A convenience shorthand for all border thickness {@link (StyleProperty:type)} values.
 *
 * @public
 * @deprecated Use StylePropertyShorthand instead
 */
export declare const stylePropertyBorderThicknessAll: ("borderThicknessTop" | "borderThicknessRight" | "borderThicknessBottom" | "borderThicknessLeft")[];

/**
 * A convenience shorthand for all corner radius {@link (StyleProperty:type)} values.
 *
 * @public
 * @deprecated Use StylePropertyShorthand instead
 */
export declare const stylePropertyCornerRadiusAll: ("cornerRadiusTopLeft" | "cornerRadiusTopRight" | "cornerRadiusBottomRight" | "cornerRadiusBottomLeft")[];

/**
 * Any style property, either an {@link (StyleProperty:type)} or a string for any other CSS property.
 *
 * @public
 * @deprecated Use StyleKey instead
 */
export declare type StylePropertyCss = StyleProperty | (string & Record<never, never>);

/**
 * A convenience shorthand for all padding {@link (StyleProperty:type)} values.
 *
 * @public
 * @deprecated Use StylePropertyShorthand instead
 */
export declare const stylePropertyPaddingAll: ("paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft")[];

/**
 * @public
 */
export declare const StylePropertyShorthand: {
    borderFill: ("borderFillTop" | "borderFillRight" | "borderFillBottom" | "borderFillLeft")[];
    borderThickness: ("borderThicknessTop" | "borderThicknessRight" | "borderThicknessBottom" | "borderThicknessLeft")[];
    borderStyle: ("borderStyleTop" | "borderStyleRight" | "borderStyleBottom" | "borderStyleLeft")[];
    cornerRadius: ("cornerRadiusTopLeft" | "cornerRadiusTopRight" | "cornerRadiusBottomRight" | "cornerRadiusBottomLeft")[];
    margin: ("marginTop" | "marginRight" | "marginBottom" | "marginLeft")[];
    marginHorizontal: ("marginRight" | "marginLeft")[];
    marginVertical: ("marginTop" | "marginBottom")[];
    padding: ("paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft")[];
    paddingHorizontal: ("paddingRight" | "paddingLeft")[];
    paddingVertical: ("paddingTop" | "paddingBottom")[];
};

/**
 * Supported style property shorthands for design-to-code with Adaptive UI.
 *
 * @public
 */
export declare type StylePropertyShorthand = keyof typeof StylePropertyShorthand;

/**
 * Definition for a single Adaptive UI style rule, which maps to a rule in a normal CSS style sheet.
 *
 * @public
 */
export declare type StyleRule = {
    /**
     * The target for the style rule, used to build the CSS selector.
     *
     * @remarks
     * Optional. If not supplied defaults to the host element for web components.
     */
    target?: StyleModuleTarget;
} & StyleDeclaration;

/**
 * A list of {@link StyleRule}s in the context of a component.
 *
 * @public
 */
export declare type StyleRules = Array<StyleRule>;

/**
 * A composable definition of style properties, either an alias to another style or a collection of style properties.
 *
 * @public
 */
export declare class Styles {
    /**
     * The style module name.
     */
    readonly name: string | undefined;
    private _composed?;
    private _properties?;
    private _effectiveProperties;
    private constructor();
    /**
     * Gets the array of composed styles.
     */
    get composed(): Styles[] | undefined;
    /**
     * Clears the array of composed styles.
     */
    clearComposed(): void;
    appendComposed(styles: Styles): void;
    /**
     * The local properties or composition overrides.
     */
    get properties(): Readonly<StylePropertiesMap> | undefined;
    set properties(properties: StylePropertiesMap | undefined);
    /**
     * Gets the full effective set of properties, from composed styles and local properties as applicable.
     */
    get effectiveProperties(): EffectiveStylePropertiesMap;
    /**
     * Gets the set of effective properties that support Adaptive UI design-to-code.
     */
    get effectiveAdaptiveProperties(): Map<StyleProperty, StyleValue>;
    private createEffectiveProperties;
    static Shared: Map<string, Styles>;
    /**
     * Creates a new Styles object for the composed styles.
     *
     * @param styles - An array of styles to compose.
     * @param properties - Individual properties to append to the styles.
     * @param name - A name for the styles used for lookup.
     * @returns A new Styles object representing the composed styles.
     */
    static compose(styles: Styles[], properties?: StyleProperties, name?: string): Styles;
    /**
     * Creates a new Styles object for the individual properties.
     *
     * @param properties - Individual properties for the new style module.
     * @param name - A name for the styles used for lookup.
     * @returns A new Styles object representing the properties.
     */
    static fromProperties(properties: StyleProperties, name?: string): Styles;
    /**
     * Creates a new Styles object for the declared styles.
     *
     * @param declaration - The style declaration
     * @param name - A name for the styles used for lookup.
     * @returns A new Styles object representing the declared styles.
     */
    static fromDeclaration(declaration: StyleDeclaration, name?: string): Styles;
}

/**
 * Supported values for a style property.
 *
 * @public
 */
export declare type StyleValue = CSSDesignToken<any> | InteractiveValues<any | null> | CSSDirective | string | number;

/**
 * Legacy equivalent of Color.
 *
 * @public
 * @deprecated Use {@link Color}.
 */
export declare class Swatch extends Color {
    /**
     * Gets this color with transparency.
     *
     * @returns The color with full transparency
     * @deprecated Use Color.unsafeOpacity
     */
    toTransparent(alpha?: number): Swatch;
    /**
     * Creates a new Swatch from and object with R, G, and B values expressed as a number between 0 to 1.
     *
     * @param obj - An object with `r`, `g`, and `b`, and optional `alpha` values expressed as a number between 0 and 1.
     * @returns A new Swatch
     */
    static from(obj: {
        r: number;
        g: number;
        b: number;
        alpha?: number;
    }): Swatch;
    /**
     * Creates a new Swatch from R, G, and B values expressed as a number between 0 to 1.
     *
     * @param r - Red channel expressed as a number between 0 and 1.
     * @param g - Green channel expressed as a number between 0 and 1.
     * @param b - Blue channel expressed as a number between 0 and 1.
     * @param alpha - Alpha channel expressed as a number between 0 and 1.
     * @returns A new Swatch
     */
    static fromRgb(r: number, g: number, b: number, alpha?: number): Swatch;
    /**
     * Creates a new Swatch from a Color.
     *
     * @param color - A Color
     * @returns A new Swatch
     */
    static fromColor(color: Color): Swatch;
    /**
     * Creates a new Swatch from a parsable string.
     *
     * @param color - A string representation of the Swatch.
     * @returns The Swatch object or undefined.
     */
    static parse(color: string): Swatch | undefined;
    /**
     * Creates a new Swatch as an overlay representation of the `intendedColor` over `reference`.
     *
     * Currently the overlay will only be black or white, so this works best with a plain grey neutral palette.
     * Otherwise it will attempt to match the luminance value of the Swatch, so it will likely be close, but not an
     * exact match to the color from another palette.
     *
     * @param intendedColor - The Swatch the overlay should look like over the `reference` Swatch.
     * @param reference - The Swatch under the overlay color.
     * @returns A semitransparent Swatch that represents the `intendedColor` over the `reference` Swatch.
     */
    static asOverlay(intendedColor: Swatch, reference: Swatch): Swatch;
}

/**
 * Returns an opaque {@link Color} or a {@link Color} with opacity relative to the reference color.
 *
 * @param color - The opaque intended swatch color.
 * @param reference - The reference color for a semitransparent swatch.
 * @param asOverlay - True to return a semitransparent representation of `swatch` relative to `reference`.
 * @returns The requested representation of `swatch`.
 *
 * @public
 */
export declare function swatchAsOverlay(color: Color | null, reference: Color, asOverlay: boolean): Color | null;

/**
 * A group of tokens.
 *
 * @public
 */
export declare interface TokenGroup extends MakePropertyOptional<DesignTokenMetadata, "type"> {
    /**
     * The name of the token group. Contained tokens should extend this name like `groupName` -\> `groupName.child`.
     */
    name: string;
    /**
     * The default type for any tokens within this group.
     */
    type?: DesignTokenType;
    /**
     * The style properties where tokens within this group are intended to be used.
     */
    intendedFor?: StyleProperty[];
}

/**
 * Color algorithm for a gradient between two colors.
 *
 * @param startPalette - The Palette used for the start of the gradient
 * @param endPalette - The Palette used for the end of the gradient
 * @param reference - The reference color
 * @param delta - The offset from the `reference`
 * @param angle - The angle of the gradient
 * @param direction - The direction the delta moves on the palettes, defaults to {@link directionByIsDark} based on `reference`
 * @returns The Gradient
 *
 * @beta
 */
export declare function twoPaletteGradient(startPalette: Palette, endPalette: Palette, reference: Paint, delta: number, angle?: number, direction?: PaletteDirection): Gradient;

/**
 * A CSSDesignToken with value type and intended styling uses.
 *
 * @public
 */
export declare class TypedCSSDesignToken<T> extends CSSDesignToken<T> implements DesignTokenMetadata {
    constructor(name: string, type: DesignTokenType, intendedFor?: StyleProperty | StyleProperty[]);
    /**
     * Factory to create a DesignToken with value type and intended styling uses.
     */
    static createTyped<T>(name: string, type: DesignTokenType, intendedFor?: StyleProperty | StyleProperty[]): TypedCSSDesignToken<T>;
}

/**
 * @internal
 */
export declare interface TypedCSSDesignToken<T> extends DesignTokenMetadata {
}

/**
 * A DesignToken with value type and intended styling uses.
 *
 * @public
 */
export declare class TypedDesignToken<T> extends DesignToken<T> implements DesignTokenMetadata {
    constructor(name: string, type: DesignTokenType, intendedFor?: StyleProperty | StyleProperty[]);
    /**
     * Factory to create a DesignToken with value type and intended styling uses.
     */
    static createTyped<T>(name: string, type: DesignTokenType, intendedFor?: StyleProperty | StyleProperty[]): TypedDesignToken<T>;
}

/**
 * @internal
 */
export declare interface TypedDesignToken<T> extends DesignTokenMetadata {
}

/**
 * Represents a single position on the type ramp with font size, line height, and font variations.
 *
 * @public
 */
export declare class TypeRampPosition {
    /**
     * The font size for this type ramp position.
     *
     * @public
     */
    readonly fontSize: TypedCSSDesignToken<string>;
    /**
     * The line height for this type ramp position (optimized for single-line UI elements).
     *
     * @public
     */
    readonly lineHeight: TypedCSSDesignToken<string>;
    /**
     * The line height for multiline text that wraps (optimized for readability).
     *
     * @public
     */
    readonly lineHeightMultiline: TypedCSSDesignToken<string>;
    /**
     * The font variations for this type ramp position.
     *
     * @public
     */
    readonly fontVariations: TypedCSSDesignToken<string>;
    /**
     * Creates a new type ramp position.
     *
     * @param baseName - The base name of the type ramp.
     * @param position - The position on the type ramp.
     * @param config - The configuration for this type ramp position.
     */
    constructor(baseName: string, position: string, config: TypeRampPositionConfig);
}

/**
 * Configuration for a single position on the type ramp.
 *
 * @public
 */
export declare interface TypeRampPositionConfig {
    /**
     * The font size for this position.
     */
    fontSize: DesignTokenValue<string>;
    /**
     * The line height for single-line UI elements.
     */
    lineHeight: DesignTokenValue<string>;
    /**
     * The line height for multiline text.
     */
    lineHeightMultiline: DesignTokenValue<string>;
}

/**
 * A complete type ramp with all positions from minus2 to plus6.
 *
 * @public
 */
export declare class TypeRampTokenGroup implements TokenGroup {
    readonly name: string;
    /**
     * The minus2 position on the type ramp.
     *
     * @public
     */
    readonly minus2: TypeRampPosition;
    /**
     * The minus1 position on the type ramp.
     *
     * @public
     */
    readonly minus1: TypeRampPosition;
    /**
     * The base position on the type ramp.
     *
     * @public
     */
    readonly base: TypeRampPosition;
    /**
     * The plus1 position on the type ramp.
     *
     * @public
     */
    readonly plus1: TypeRampPosition;
    /**
     * The plus2 position on the type ramp.
     *
     * @public
     */
    readonly plus2: TypeRampPosition;
    /**
     * The plus3 position on the type ramp.
     *
     * @public
     */
    readonly plus3: TypeRampPosition;
    /**
     * The plus4 position on the type ramp.
     *
     * @public
     */
    readonly plus4: TypeRampPosition;
    /**
     * The plus5 position on the type ramp.
     *
     * @public
     */
    readonly plus5: TypeRampPosition;
    /**
     * The plus6 position on the type ramp.
     *
     * @public
     */
    readonly plus6: TypeRampPosition;
    /**
     * Creates a new type ramp token group with all positions.
     *
     * @param name - The base name of the token group (e.g., "typography.ramp").
     * @param minus2 - Configuration for the minus2 position.
     * @param minus1 - Configuration for the minus1 position.
     * @param base - Configuration for the base position.
     * @param plus1 - Configuration for the plus1 position.
     * @param plus2 - Configuration for the plus2 position.
     * @param plus3 - Configuration for the plus3 position.
     * @param plus4 - Configuration for the plus4 position.
     * @param plus5 - Configuration for the plus5 position.
     * @param plus6 - Configuration for the plus6 position.
     */
    constructor(name: string, minus2: TypeRampPositionConfig, minus1: TypeRampPositionConfig, base: TypeRampPositionConfig, plus1: TypeRampPositionConfig, plus2: TypeRampPositionConfig, plus3: TypeRampPositionConfig, plus4: TypeRampPositionConfig, plus5: TypeRampPositionConfig, plus6: TypeRampPositionConfig);
}

/**
 * A type ramp generated from a base size and multiplier (type scale).
 *
 * In this model, the base.fontSize is the primary token that should be edited,
 * and all other positions are derived from it using calc() expressions with the multiplier.
 *
 * @public
 */
export declare class TypeScaleTokenGroup extends TypeRampTokenGroup {
    /**
     * The multiplier token for the type scale.
     *
     * @public
     */
    readonly multiplier: TypedDesignToken<number>;
    /**
     * The line height ratio token for the type scale (for single-line UI).
     *
     * @public
     */
    readonly lineHeightRatio: TypedDesignToken<number>;
    /**
     * The line height ratio token for multiline text (for better readability).
     *
     * @public
     */
    readonly lineHeightMultilineRatio: TypedDesignToken<number>;
    /**
     * The line height snap token for rounding line heights.
     *
     * @public
     */
    readonly lineHeightSnap: TypedCSSDesignToken<string>;
    /**
     * Creates a new type scale token group.
     *
     * @param name - The base name of the token group (e.g., "typography.ramp.scale").
     * @param baseSize - The base font size as a string value (e.g., "16px").
     * @param multiplier - The multiplier for the type scale (e.g., 1.25).
     * @param lineHeightRatio - The line height ratio for single-line UI (default: 1.4).
     * @param lineHeightSnap - The line height snap value for rounding line heights (default: "2px").
     * @param lineHeightMultilineRatio - The line height ratio for multiline text (default: 1.5).
     */
    constructor(name: string, baseSize: string, multiplier: number, lineHeightRatio?: number, lineHeightMultilineRatio?: number, lineHeightSnap?: string);
}

/**
 * A {@link Color} convenience for white.
 *
 * @internal
 */
export declare const _white: Color;

export { }