@spark-web/theme
Version:
--- title: Theme isExperimentalPackage: true ---
437 lines (436 loc) • 16.3 kB
TypeScript
import type { FontMetrics } from '@capsizecss/core';
import type { DecoratedTypography, TextDefinition, Tokens } from "./themes/types.js";
export declare type SparkTextDefinition = ReturnType<typeof fontSizeToCapHeight>;
export declare 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> | undefined) => 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_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("./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: {
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: 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> | undefined) => 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_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("./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: {
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: 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> | undefined) => 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_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("./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: {
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: DecoratedTypography;
};
};
export declare type SparkTheme = ReturnType<typeof makeSparkTheme>;
export declare type SparkThemeName = keyof typeof globalTheme;
export declare type SparkThemeSet = typeof globalTheme;
export {};