import { PaletteRGB } from '@microsoft/fast-components';
import { ValueConverter } from '@microsoft/fast-element';
import { FoundationElement, FoundationElementDefinition, DesignToken } from '@microsoft/fast-foundation';
import { CustomTokensConfig, DesignTokensConfig, TokenValue } from './types';
/**
 * Observable class for design tokens config that components can subscribe to.
 * @public
 */
export declare class DesignTokensObservable {
    value: DesignTokensConfig | null;
}
export declare const provideTokens: (tokens: any, values: any, element?: HTMLElement) => void;
export declare function designToken<T>(token: DesignToken<T>): (source: FoundationElement, key: string) => void;
export declare const swatchConverter: ValueConverter;
export declare const paletteFromHex: (hexColor: string) => PaletteRGB;
/**
 * Converts custom tokens to CSS custom properties and sets them on the provider element.
 * Supports nested token groups which are flattened into kebab-case CSS variable names.
 *
 * Example:
 *   Input: { spacing: { padding: { small: { $value: "8px" } } } }
 *   Output: --spacing-padding-small: 8px
 *
 * @param provider - The HTML element to set CSS variables on
 * @param customTokens - The custom tokens object to process
 * @param prefix - Internal prefix for nested keys (used during recursion)
 */
export declare const applyCustomTokens: (provider: HTMLElement, customTokens: CustomTokensConfig, prefix?: string) => void;
export declare const getDefaultConfig: (definition: Partial<FoundationElementDefinition>, exclusions?: string[]) => {};
export declare const getExports: (registrationFunction: any) => {
    shadowOptions: any;
    styles: any;
    template: any;
    defaultConfig: {};
};
export declare const getTypeRampValue: (baseTypeRamp: string, value: number) => string;
/**
 * Returns an observable object that components can subscribe to for design tokens config updates.
 * @remarks
 * Components can access the `value` property of the returned object, and FAST will automatically
 * track changes. When `configureDesignSystem()` sets the design tokens, all subscribed components
 * will be notified automatically.
 *
 * The `value` property will be `null` initially, then set to the actual config when
 * `configureDesignSystem()` is called with a design tokens config.
 *
 * @returns An observable object with a `value` property containing the design tokens config (or null)
 * @public
 */
export declare const designTokensMap: () => DesignTokensObservable;
/**
 * Selects a custom token value from the custom tokens configuration using a path selector.
 *
 * Navigates through nested token groups using the provided path segments to retrieve
 * a specific token's value. Returns the token object with its `$value` and optional `$type`,
 * or `null` if the path doesn't exist or the custom tokens haven't been configured.
 *
 * @param path - Variable number of string arguments representing the path to the token.
 *   Each argument represents a level in the nested token structure.
 * @returns The token object containing `$value` and optional `$type`, or `null` if:
 *   - The design tokens config hasn't been configured (designTokensObservable.value is null)
 *   - The customTokens property doesn't exist in the config
 *   - The path doesn't exist in the token structure
 *   - The path points to a token group without a `$value` property
 *
 * @example
 * ```json
 * // Example design-tokens.json structure:
 * {
 *   "design_tokens": { ... },
 *   "customTokens": {
 *     "spacing": {
 *       "padding": {
 *         "small": { "$value": "8px", "$type": "dimension" },
 *         "medium": { "$value": "16px", "$type": "dimension" },
 *         "large": { "$value": "24px", "$type": "dimension" }
 *       },
 *       "margin": {
 *         "small": { "$value": "4px", "$type": "dimension" },
 *         "medium": { "$value": "12px", "$type": "dimension" }
 *       }
 *     },
 *     "elevation": {
 *       "low": { "$value": "0 2px 4px rgba(0,0,0,0.1)", "$type": "shadow" },
 *       "medium": { "$value": "0 4px 8px rgba(0,0,0,0.15)", "$type": "shadow" }
 *     }
 *   }
 * }
 * ```
 *
 * @example
 * ```ts
 * // Select a nested token: spacing.padding.small
 * const token = selectCustomToken("spacing", "padding", "small");
 * // Returns: { $value: "8px", $type: "dimension" }
 * ```
 *
 * @example
 * ```ts
 * // Select a single-level token: elevation.low
 * const token = selectCustomToken("elevation", "low");
 * // Returns: { $value: "0 2px 4px rgba(0,0,0,0.1)", $type: "shadow" }
 * ```
 *
 * @example
 * ```ts
 * // Non-existent path returns null
 * const token = selectCustomToken("spacing", "padding", "xlarge");
 * // Returns: null
 * ```
 *
 * @example
 * ```ts
 * // Returns null when design tokens config hasn't been configured
 * // (before configureDesignSystem is called)
 * const token = selectCustomToken("spacing", "padding", "small");
 * // Returns: null
 * ```
 * @public
 */
export declare const selectCustomToken: (...path: string[]) => {
    $value: TokenValue;
    $type?: string;
};
export declare const configureDesignSystem: (provider: HTMLElement, config: Partial<DesignTokensConfig> | DesignTokensConfig) => void;
//# sourceMappingURL=design-system-provider.utils.d.ts.map