@spark-web/theme
Version:
--- title: Theme isExperimentalPackage: true ---
388 lines (387 loc) • 12.3 kB
TypeScript
import type { FontMetrics } from '@capsizecss/core';
import type { BrighteTokens, TextDefinition } from './tokens';
export declare type BrighteTextDefinition = ReturnType<typeof fontSizeToCapHeight>;
/**
* 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: FontMetrics): {
fontSize: string;
lineHeight: string;
capHeight: string;
trims: {
capHeightTrim: string;
baselineTrim: string;
};
};
export declare function makeBrighteTheme(tokens: BrighteTokens): {
backgroundLightness: {
infoLight: "light" | "dark";
criticalLight: "light" | "dark";
positiveLight: "light" | "dark";
cautionLight: "light" | "dark";
muted: "light" | "dark";
disabled: "light" | "dark";
backdrop: "light" | "dark";
body: "light" | "dark";
surface: "light" | "dark";
surfaceMuted: "light" | "dark";
surfacePressed: "light" | "dark";
fieldAccent: "light" | "dark";
input: "light" | "dark";
inputPressed: "light" | "dark";
inputDisabled: "light" | "dark";
accent: "light" | "dark";
accentMuted: "light" | "dark";
neutral: "light" | "dark";
neutralLow: "light" | "dark";
primary: "light" | "dark";
primaryLow: "light" | "dark";
primaryMuted: "light" | "dark";
secondary: "light" | "dark";
secondaryLow: "light" | "dark";
secondaryMuted: "light" | "dark";
caution: "light" | "dark";
cautionLow: "light" | "dark";
cautionMuted: "light" | "dark";
critical: "light" | "dark";
criticalLow: "light" | "dark";
criticalMuted: "light" | "dark";
info: "light" | "dark";
infoLow: "light" | "dark";
infoMuted: "light" | "dark";
positive: "light" | "dark";
positiveLow: "light" | "dark";
positiveMuted: "light" | "dark";
};
utils: {
mapResponsiveProp: <Value>(value?: import("./theme-utils").ResponsiveProp<Value> | undefined) => Value | (NonNullable<Value> | null)[] | undefined;
/**
* Calculate leading and trim styles using
* [Capsize](https://seek-oss.github.io/capsize/) to ensure vertical spacing
* around text elements behaves as expected.
*/
mapResponsiveScale: <KeyOrBreakpointMap extends keyof ScaleDefinition, ScaleDefinition>(value: import("./theme-utils").ResponsiveProp<KeyOrBreakpointMap> | undefined, scaleDefinition: ScaleDefinition) => ScaleDefinition[KeyOrBreakpointMap] | (ScaleDefinition[KeyOrBreakpointMap] | null)[] | undefined;
optimizeResponsiveArray: <Value_1 extends string | number>(value: readonly (Value_1 | null)[] & {
length: 4 | 2 | 3;
} & {
0: Value_1 | null;
}) => readonly (Value_1 | null)[] & {
length: 4 | 2 | 3;
} & {
0: Value_1 | null;
};
responsiveRange: (props: import("./theme-utils").ResponsiveRangeProps) => [boolean, boolean, boolean, boolean];
responsiveStyles: ({ mobile, tablet, desktop, wide, }: import("./theme-utils").ResponsiveStyle) => import("@emotion/serialize").CSSObject | undefined;
resolveResponsiveProps: import("facepaint").DynamicStyleFunction;
};
name: string;
backgroundInteractions: {
none: string;
primaryActive: string;
primaryHover: string;
primaryLowHover: string;
primaryLowActive: string;
secondaryActive: string;
secondaryHover: string;
secondaryLowHover: string;
secondaryLowActive: string;
neutralHover: string;
neutralActive: string;
neutralLowHover: string;
neutralLowActive: string;
cautionLowHover: string;
cautionLowActive: string;
criticalActive: string;
criticalHover: string;
criticalLowHover: string;
criticalLowActive: string;
infoLowHover: string;
infoLowActive: string;
positiveHover: string;
positiveActive: string;
positiveLowHover: string;
positiveLowActive: string;
};
contentWidth: {
xsmall: number;
small: number;
medium: number;
large: number;
xlarge: number;
};
elevation: {
dropdownBlanket: number;
dropdown: number;
sticky: number;
modalBlanket: number;
modal: number;
notification: number;
};
shadow: {
small: string;
medium: string;
large: string;
};
animation: {
standard: {
duration: number;
easing: string;
};
};
breakpoint: {
readonly mobile: 0;
readonly tablet: 740;
readonly desktop: 992;
readonly wide: 1200;
};
border: {
radius: {
full: 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;
};
};
color: {
background: {
infoLight: string;
criticalLight: string;
positiveLight: string;
cautionLight: string;
muted: string;
disabled: string;
backdrop: string;
body: string;
surface: string;
surfaceMuted: string;
surfacePressed: string;
fieldAccent: string;
input: string;
inputPressed: string;
inputDisabled: string;
accent: string;
accentMuted: string;
neutral: string;
neutralLow: string;
primary: string;
primaryLow: string;
primaryMuted: string;
secondary: string;
secondaryLow: string;
secondaryMuted: string;
caution: string;
cautionLow: string;
cautionMuted: string;
critical: string;
criticalLow: string;
criticalMuted: string;
info: string;
infoLow: string;
infoMuted: string;
positive: string;
positiveLow: string;
positiveMuted: string;
};
foreground: {
neutral: string;
neutralInverted: string;
muted: string;
mutedInverted: string;
link: string;
disabled: string;
fieldAccent: string;
placeholder: string;
accent: string;
primary: string;
primaryHover: string;
primaryActive: string;
secondary: string;
secondaryHover: string;
secondaryActive: string;
caution: string;
critical: string;
info: string;
positive: string;
};
status: {
accent: string;
caution: string;
critical: string;
info: string;
neutral: string;
positive: string;
};
};
spacing: {
none: number;
xxsmall: number;
xsmall: number;
small: number;
medium: number;
large: number;
xlarge: number;
xxlarge: number;
};
sizing: {
none: number;
full: string;
xxsmall: number;
xsmall: number;
small: number;
medium: number;
large: number;
};
typography: {
heading: {
level: Record<"1" | "2" | "3" | "4", {
mobile: {
fontSize: string;
lineHeight: string;
capHeight: string;
trims: {
capHeightTrim: string;
baselineTrim: string;
};
};
tablet: {
fontSize: string;
lineHeight: string;
capHeight: string;
trims: {
capHeightTrim: string;
baselineTrim: string;
};
};
}>;
};
text: {
xsmall: {
mobile: {
fontSize: string;
lineHeight: string;
capHeight: string;
trims: {
capHeightTrim: string;
baselineTrim: string;
};
};
tablet: {
fontSize: string;
lineHeight: string;
capHeight: string;
trims: {
capHeightTrim: string;
baselineTrim: string;
};
};
};
small: {
mobile: {
fontSize: string;
lineHeight: string;
capHeight: string;
trims: {
capHeightTrim: string;
baselineTrim: string;
};
};
tablet: {
fontSize: string;
lineHeight: string;
capHeight: string;
trims: {
capHeightTrim: string;
baselineTrim: string;
};
};
};
standard: {
mobile: {
fontSize: string;
lineHeight: string;
capHeight: string;
trims: {
capHeightTrim: string;
baselineTrim: string;
};
};
tablet: {
fontSize: string;
lineHeight: string;
capHeight: string;
trims: {
capHeightTrim: string;
baselineTrim: string;
};
};
};
large: {
mobile: {
fontSize: string;
lineHeight: string;
capHeight: string;
trims: {
capHeightTrim: string;
baselineTrim: string;
};
};
tablet: {
fontSize: string;
lineHeight: string;
capHeight: string;
trims: {
capHeightTrim: string;
baselineTrim: string;
};
};
};
};
fontFamily: {
sans: {
fontMetrics: FontMetrics;
name: string;
};
display: {
fontMetrics: FontMetrics;
name: string;
};
};
fontWeight: {
regular: number;
semibold: number;
};
};
};
export declare type BrighteTheme = ReturnType<typeof makeBrighteTheme>;
export {};