@spark-web/theme
Version:
--- title: Theme isExperimentalPackage: true ---
286 lines (285 loc) • 10.3 kB
TypeScript
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> | undefined) => 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_1 extends string | number>(value: readonly (Value_1 | null)[] & {
length: 2 | 4 | 3;
} & {
0: Value_1 | null;
}) => readonly (Value_1 | null)[] & {
length: 2 | 4 | 3;
} & {
0: Value_1 | 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: {
foreground: {
[key: string]: string;
};
background: {
[key: string]: string;
};
status: {
[key: string]: string;
};
} & {
background: {
[key: string]: string;
} & {
infoLight: string;
criticalLight: string;
positiveLight: string;
cautionLight: string;
};
};
name: string;
border: {
radius: {
none: number;
small: number;
medium: number;
large: number;
};
width: {
standard: number;
large: number;
};
color: {
neutral: string;
standard: string;
standardInverted: string;
field: string;
fieldHover: string;
fieldAccent: string;
fieldDisabled: string;
primary: string;
primaryHover: string;
primaryActive: string;
secondary: string;
secondaryHover: string;
secondaryActive: string;
accent: string;
accentMuted: string;
caution: string;
cautionMuted: string;
critical: string;
criticalMuted: string;
info: string;
infoMuted: string;
positive: string;
positiveMuted: string;
dark: string;
darkHover: string;
darkActive: string;
};
} & {
radius: {
none: number;
small: number;
medium: number;
large: number;
} & {
full: number;
};
};
backgroundInteractions: {
[key: string]: string;
};
contentWidth: Record<"small" | "xsmall" | "medium" | "large" | "xlarge", number>;
contentHeight: Record<"medium" | "large" | "full", number>;
elevation: {
dropdownBlanket: number;
dropdown: number;
sticky: number;
modalBlanket: number;
modal: number;
notification: number;
};
spacing: Record<import("./themes/_types/sizing.js").Sizing, number> & {
none: number;
};
sizing: Record<"small" | "xxsmall" | "xsmall" | "medium" | "large" | "xlarge" | "xxlarge", number> & {
none: number;
full: string;
};
shadow: Record<"small" | "medium" | "large", string>;
animation: {
standard: {
duration: number;
easing: 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;
};
breakpoint: {
readonly mobile: 0;
readonly tablet: 740;
readonly desktop: 992;
readonly wide: 1200;
};
typography: import("./themes/_types/index.js").DecoratedTypography;
};
export declare const GlobalThemeContext: import("react").Context<"brighte" | "pantheon">;
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> | undefined) => 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_1 extends string | number>(value: readonly (Value_1 | null)[] & {
length: 2 | 4 | 3;
} & {
0: Value_1 | null;
}) => readonly (Value_1 | null)[] & {
length: 2 | 4 | 3;
} & {
0: Value_1 | 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: {
foreground: {
[key: string]: string;
};
background: {
[key: string]: string;
};
status: {
[key: string]: string;
};
} & {
background: {
[key: string]: string;
} & {
infoLight: string;
criticalLight: string;
positiveLight: string;
cautionLight: string;
};
};
name: string;
border: {
radius: {
none: number;
small: number;
medium: number;
large: number;
};
width: {
standard: number;
large: number;
};
color: {
neutral: string;
standard: string;
standardInverted: string;
field: string;
fieldHover: string;
fieldAccent: string;
fieldDisabled: string;
primary: string;
primaryHover: string;
primaryActive: string;
secondary: string;
secondaryHover: string;
secondaryActive: string;
accent: string;
accentMuted: string;
caution: string;
cautionMuted: string;
critical: string;
criticalMuted: string;
info: string;
infoMuted: string;
positive: string;
positiveMuted: string;
dark: string;
darkHover: string;
darkActive: string;
};
} & {
radius: {
none: number;
small: number;
medium: number;
large: number;
} & {
full: number;
};
};
backgroundInteractions: {
[key: string]: string;
};
contentWidth: Record<"small" | "xsmall" | "medium" | "large" | "xlarge", number>;
contentHeight: Record<"medium" | "large" | "full", number>;
elevation: {
dropdownBlanket: number;
dropdown: number;
sticky: number;
modalBlanket: number;
modal: number;
notification: number;
};
spacing: Record<import("./themes/_types/sizing.js").Sizing, number> & {
none: number;
};
sizing: Record<"small" | "xxsmall" | "xsmall" | "medium" | "large" | "xlarge" | "xxlarge", number> & {
none: number;
full: string;
};
shadow: Record<"small" | "medium" | "large", string>;
animation: {
standard: {
duration: number;
easing: 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;
};
breakpoint: {
readonly mobile: 0;
readonly tablet: 740;
readonly desktop: 992;
readonly wide: 1200;
};
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">;
declare type ThemeProviderProps = PropsWithChildren & {
theme?: SparkThemeName;
};
export declare const ThemeProvider: ({ children, theme: themeName, }: ThemeProviderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
export {};