@spark-web/theme/dist/declarations/src/context.d.ts

--- title: Theme isExperimentalPackage: true ---

import type { PropsWithChildren } from 'react';
import type { SparkTheme, SparkThemeName } from "./make-theme.js";
export declare const defaultTheme: {
    backgroundLightness: {
        [x: string]: "light" | "dark";
        infoLight: "light" | "dark";
        criticalLight: "light" | "dark";
        positiveLight: "light" | "dark";
        cautionLight: "light" | "dark";
    };
    utils: {
        mapResponsiveProp: <Value>(value?: import("@spark-web/design-system").ResponsiveProp<Value>) => Value | (NonNullable<Value> | null)[] | undefined;
        mapResponsiveScale: <KeyOrBreakpointMap extends keyof ScaleDefinition, ScaleDefinition>(value: import("@spark-web/design-system").ResponsiveProp<KeyOrBreakpointMap> | undefined, scaleDefinition: ScaleDefinition) => ScaleDefinition[KeyOrBreakpointMap] | (ScaleDefinition[KeyOrBreakpointMap] | null)[] | undefined;
        optimizeResponsiveArray: <Value extends string | number>(value: readonly (Value | null)[] & {
            length: 2 | 3 | 4;
        } & {
            0: Value | null;
        }) => readonly (Value | null)[] & {
            length: 2 | 3 | 4;
        } & {
            0: Value | null;
        };
        responsiveRange: (props: import("@spark-web/design-system").ResponsiveRangeProps) => [boolean, boolean, boolean, boolean];
        responsiveStyles: ({ mobile, tablet, desktop, wide, }: import("./theme-utils.js").ResponsiveStyle) => import("@emotion/serialize").CSSObject | undefined;
        resolveResponsiveProps: import("facepaint").DynamicStyleFunction;
    };
    color: import("./themes/_types/index.js").Tokens["color"] & {
        background: import("./themes/_types/index.js").Tokens["color"]["background"] & {
            infoLight: string;
            criticalLight: string;
            positiveLight: string;
            cautionLight: string;
        };
    };
    animation: {
        standard: {
            duration: number;
            easing: string;
        };
    };
    border: import("./themes/_types/index.js").Tokens["border"] & {
        radius: import("./themes/_types/index.js").Tokens["border"]["radius"] & {
            full: number;
        };
    };
    name: string;
    backgroundInteractions: {
        [key: string]: string;
    };
    contentWidth: Record<Exclude<import("./themes/_types/sizing.js").Sizing, "xxsmall" | "xxlarge" | "xxxlarge">, number>;
    contentHeight: Record<Extract<import("./themes/_types/sizing.js").Sizing, "medium" | "large"> | "full", number>;
    elevation: {
        dropdownBlanket: number;
        dropdown: number;
        sticky: number;
        modalBlanket: number;
        modal: number;
        notification: number;
    };
    spacing: import("./themes/_types/index.js").Tokens["spacing"] & {
        none: number;
    };
    sizing: import("./themes/_types/index.js").Tokens["sizing"] & {
        none: number;
        full: string;
    };
    shadow: Record<Extract<import("./themes/_types/sizing.js").Sizing, "small" | "medium" | "large">, string>;
    components: {
        buttons: import("./themes/_types/components/button.js").ButtonTokens;
        checkbox?: import("./themes/_types/components/checkbox.js").CheckboxTokens;
        contentDialog?: import("./themes/_types/components/content-dialog.js").ContentDialogTokens;
        radio?: import("./themes/_types/components/radio.js").RadioTokens;
        textInput?: import("./themes/_types/components/text-input.js").TextInputTokens;
        textLink?: import("./themes/_types/components/text-link.js").TextLinkTokens;
        tabs?: import("./themes/_types/components/tabs.js").TabsToken;
    };
    breakpoint: typeof import("./themes/default/breakpoints.js").breakpoints;
    typography: import("./themes/_types/index.js").DecoratedTypography;
};
export declare const GlobalThemeContext: import("react").Context<"brighte" | "pantheon" | "bravo">;
export declare const ThemeContext: import("react").Context<{
    backgroundLightness: {
        [x: string]: "light" | "dark";
        infoLight: "light" | "dark";
        criticalLight: "light" | "dark";
        positiveLight: "light" | "dark";
        cautionLight: "light" | "dark";
    };
    utils: {
        mapResponsiveProp: <Value>(value?: import("@spark-web/design-system").ResponsiveProp<Value>) => Value | (NonNullable<Value> | null)[] | undefined;
        mapResponsiveScale: <KeyOrBreakpointMap extends keyof ScaleDefinition, ScaleDefinition>(value: import("@spark-web/design-system").ResponsiveProp<KeyOrBreakpointMap> | undefined, scaleDefinition: ScaleDefinition) => ScaleDefinition[KeyOrBreakpointMap] | (ScaleDefinition[KeyOrBreakpointMap] | null)[] | undefined;
        optimizeResponsiveArray: <Value extends string | number>(value: readonly (Value | null)[] & {
            length: 2 | 3 | 4;
        } & {
            0: Value | null;
        }) => readonly (Value | null)[] & {
            length: 2 | 3 | 4;
        } & {
            0: Value | null;
        };
        responsiveRange: (props: import("@spark-web/design-system").ResponsiveRangeProps) => [boolean, boolean, boolean, boolean];
        responsiveStyles: ({ mobile, tablet, desktop, wide, }: import("./theme-utils.js").ResponsiveStyle) => import("@emotion/serialize").CSSObject | undefined;
        resolveResponsiveProps: import("facepaint").DynamicStyleFunction;
    };
    color: import("./themes/_types/index.js").Tokens["color"] & {
        background: import("./themes/_types/index.js").Tokens["color"]["background"] & {
            infoLight: string;
            criticalLight: string;
            positiveLight: string;
            cautionLight: string;
        };
    };
    animation: {
        standard: {
            duration: number;
            easing: string;
        };
    };
    border: import("./themes/_types/index.js").Tokens["border"] & {
        radius: import("./themes/_types/index.js").Tokens["border"]["radius"] & {
            full: number;
        };
    };
    name: string;
    backgroundInteractions: {
        [key: string]: string;
    };
    contentWidth: Record<Exclude<import("./themes/_types/sizing.js").Sizing, "xxsmall" | "xxlarge" | "xxxlarge">, number>;
    contentHeight: Record<Extract<import("./themes/_types/sizing.js").Sizing, "medium" | "large"> | "full", number>;
    elevation: {
        dropdownBlanket: number;
        dropdown: number;
        sticky: number;
        modalBlanket: number;
        modal: number;
        notification: number;
    };
    spacing: import("./themes/_types/index.js").Tokens["spacing"] & {
        none: number;
    };
    sizing: import("./themes/_types/index.js").Tokens["sizing"] & {
        none: number;
        full: string;
    };
    shadow: Record<Extract<import("./themes/_types/sizing.js").Sizing, "small" | "medium" | "large">, string>;
    components: {
        buttons: import("./themes/_types/components/button.js").ButtonTokens;
        checkbox?: import("./themes/_types/components/checkbox.js").CheckboxTokens;
        contentDialog?: import("./themes/_types/components/content-dialog.js").ContentDialogTokens;
        radio?: import("./themes/_types/components/radio.js").RadioTokens;
        textInput?: import("./themes/_types/components/text-input.js").TextInputTokens;
        textLink?: import("./themes/_types/components/text-link.js").TextLinkTokens;
        tabs?: import("./themes/_types/components/tabs.js").TabsToken;
    };
    breakpoint: typeof import("./themes/default/breakpoints.js").breakpoints;
    typography: import("./themes/_types/index.js").DecoratedTypography;
}>;
export declare const useGlobalTheme: () => SparkThemeName;
export declare const useTheme: () => SparkTheme;
export declare const GlobalThemeProvider: import("react").Provider<"brighte" | "pantheon" | "bravo">;
type ThemeProviderProps = PropsWithChildren & {
    theme?: SparkThemeName;
};
export declare const ThemeProvider: ({ children, theme: themeName, }: ThemeProviderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
export {};