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

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

import type { FontMetrics } from '@capsizecss/core';
import { breakpoints } from "./themes/default/breakpoints.js";
import type { DecoratedTypography, TextDefinition, Tokens } from "./themes/types.js";
export type SparkTextDefinition = ReturnType<typeof fontSizeToCapHeight>;
export type FontMetricsForTrim = Pick<FontMetrics, 'ascent' | 'descent' | 'capHeight' | 'lineGap' | 'unitsPerEm'>;
/**
 * Calculate leading and trim styles using
 * [Capsize](https://seek-oss.github.io/capsize/) to ensure vertical spacing
 * around text elements behaves as expected.
 */
declare function fontSizeToCapHeight(definition: TextDefinition, fontMetrics: FontMetricsForTrim): {
    fontSize: string;
    fontWeight: number;
    lineHeight: string;
    capHeight: string;
    trims: {
        capHeightTrim: string;
        baselineTrim: string;
    };
};
export declare function makeSparkTheme(tokens: Tokens): {
    backgroundLightness: {
        [x: string]: "light" | "dark";
        infoLight: "light" | "dark";
        criticalLight: "light" | "dark";
        positiveLight: "light" | "dark";
        cautionLight: "light" | "dark";
    };
    utils: {
        mapResponsiveProp: <Value>(value?: import("./theme-utils.js").ResponsiveProp<Value>) => Value | (NonNullable<Value> | null)[] | undefined;
        mapResponsiveScale: <KeyOrBreakpointMap extends keyof ScaleDefinition, ScaleDefinition>(value: import("./theme-utils.js").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("./theme-utils.js").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: Tokens["color"] & {
        background: Tokens["color"]["background"] & {
            infoLight: string;
            criticalLight: string;
            positiveLight: string;
            cautionLight: string;
        };
    };
    animation: {
        standard: {
            duration: number;
            easing: string;
        };
    };
    border: Tokens["border"] & {
        radius: 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: Tokens["spacing"] & {
        none: number;
    };
    sizing: 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 breakpoints;
    typography: DecoratedTypography;
};
export declare const globalTheme: {
    brighte: {
        backgroundLightness: {
            [x: string]: "light" | "dark";
            infoLight: "light" | "dark";
            criticalLight: "light" | "dark";
            positiveLight: "light" | "dark";
            cautionLight: "light" | "dark";
        };
        utils: {
            mapResponsiveProp: <Value>(value?: import("./theme-utils.js").ResponsiveProp<Value>) => Value | (NonNullable<Value> | null)[] | undefined;
            mapResponsiveScale: <KeyOrBreakpointMap extends keyof ScaleDefinition, ScaleDefinition>(value: import("./theme-utils.js").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("./theme-utils.js").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: Tokens["color"] & {
            background: Tokens["color"]["background"] & {
                infoLight: string;
                criticalLight: string;
                positiveLight: string;
                cautionLight: string;
            };
        };
        animation: {
            standard: {
                duration: number;
                easing: string;
            };
        };
        border: Tokens["border"] & {
            radius: 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: Tokens["spacing"] & {
            none: number;
        };
        sizing: 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 breakpoints;
        typography: DecoratedTypography;
    };
    pantheon: {
        backgroundLightness: {
            [x: string]: "light" | "dark";
            infoLight: "light" | "dark";
            criticalLight: "light" | "dark";
            positiveLight: "light" | "dark";
            cautionLight: "light" | "dark";
        };
        utils: {
            mapResponsiveProp: <Value>(value?: import("./theme-utils.js").ResponsiveProp<Value>) => Value | (NonNullable<Value> | null)[] | undefined;
            mapResponsiveScale: <KeyOrBreakpointMap extends keyof ScaleDefinition, ScaleDefinition>(value: import("./theme-utils.js").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("./theme-utils.js").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: Tokens["color"] & {
            background: Tokens["color"]["background"] & {
                infoLight: string;
                criticalLight: string;
                positiveLight: string;
                cautionLight: string;
            };
        };
        animation: {
            standard: {
                duration: number;
                easing: string;
            };
        };
        border: Tokens["border"] & {
            radius: 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: Tokens["spacing"] & {
            none: number;
        };
        sizing: 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 breakpoints;
        typography: DecoratedTypography;
    };
    bravo: {
        backgroundLightness: {
            [x: string]: "light" | "dark";
            infoLight: "light" | "dark";
            criticalLight: "light" | "dark";
            positiveLight: "light" | "dark";
            cautionLight: "light" | "dark";
        };
        utils: {
            mapResponsiveProp: <Value>(value?: import("./theme-utils.js").ResponsiveProp<Value>) => Value | (NonNullable<Value> | null)[] | undefined;
            mapResponsiveScale: <KeyOrBreakpointMap extends keyof ScaleDefinition, ScaleDefinition>(value: import("./theme-utils.js").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("./theme-utils.js").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: Tokens["color"] & {
            background: Tokens["color"]["background"] & {
                infoLight: string;
                criticalLight: string;
                positiveLight: string;
                cautionLight: string;
            };
        };
        animation: {
            standard: {
                duration: number;
                easing: string;
            };
        };
        border: Tokens["border"] & {
            radius: 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: Tokens["spacing"] & {
            none: number;
        };
        sizing: 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 breakpoints;
        typography: DecoratedTypography;
    };
};
export type SparkTheme = ReturnType<typeof makeSparkTheme>;
export type SparkThemeName = keyof typeof globalTheme;
export type SparkThemeSet = typeof globalTheme;
export {};