@spark-web/theme
Version:
--- title: Theme isExperimentalPackage: true ---
63 lines (62 loc) • 3.42 kB
TypeScript
import type { CSSObject } from '@emotion/react';
import facepaint from 'facepaint';
import type { Breakpoint } from "./themes/default/breakpoints.js";
declare type ResponsiveObject<T> = Partial<Record<Breakpoint, T>>;
export declare type ResponsiveProp<T> = T | ResponsiveObject<T>;
/**
* Utilities related to responsive props. Emotion's
* [facepaint](https://github.com/emotion-js/facepaint) ultimately generates
* media queries for the resolved styles.
*/
export declare const makeThemeUtils: () => {
mapResponsiveProp: <Value>(value?: ResponsiveProp<Value> | undefined) => Value | (NonNullable<Value> | null)[] | undefined;
mapResponsiveScale: <KeyOrBreakpointMap extends keyof ScaleDefinition, ScaleDefinition>(value: ResponsiveProp<KeyOrBreakpointMap> | undefined, scaleDefinition: ScaleDefinition) => ScaleDefinition[KeyOrBreakpointMap] | (ScaleDefinition[KeyOrBreakpointMap] | null)[] | undefined;
optimizeResponsiveArray: <Value_1 extends string | number>(value: ResponsiveArray<Value_1>) => ResponsiveArray<Value_1>;
responsiveRange: (props: ResponsiveRangeProps) => [boolean, boolean, boolean, boolean];
responsiveStyles: ({ mobile, tablet, desktop, wide, }: ResponsiveStyle) => CSSObject | undefined;
resolveResponsiveProps: facepaint.DynamicStyleFunction;
};
/**
* Helper for mapping keys/breakpoint map to a theme scale e.g.
*
* @example
* mapResponsiveProp('small', { small: 8, large: 16 }) // 8
* mapResponsiveProp(
* { mobile:'small', tablet:'large' },
* { small: 8, large: 16 }
* ) // [8,16]
*/
export declare const mapResponsiveScale: <KeyOrBreakpointMap extends keyof ScaleDefinition, ScaleDefinition>(value: ResponsiveProp<KeyOrBreakpointMap> | undefined, scaleDefinition: ScaleDefinition) => ScaleDefinition[KeyOrBreakpointMap] | (ScaleDefinition[KeyOrBreakpointMap] | null)[] | undefined;
export declare const mapResponsiveProp: <Value>(value?: ResponsiveProp<Value> | undefined) => Value | (NonNullable<Value> | null)[] | undefined;
export declare function createResponsiveMapFn<Keys extends keyof LookupMap, LookupMap>(lookupMap: LookupMap): (prop?: ResponsiveProp<Keys>) => LookupMap[Keys] | {
mobile: LookupMap[Keys] | undefined;
tablet: LookupMap[Keys] | undefined;
desktop: LookupMap[Keys] | undefined;
wide: LookupMap[Keys] | undefined;
} | undefined;
export declare type ResponsiveRangeProps = {
/** Sets the screen width floor breakpoint the elements should be hidden. */
above?: Exclude<Breakpoint, 'wide'>;
/** Sets the screen width ceiling breakpoint the elements should be hidden. */
below?: Exclude<Breakpoint, 'mobile'>;
};
export declare const responsiveRange: (props: ResponsiveRangeProps) => [boolean, boolean, boolean, boolean];
declare type ResponsiveArray<Value extends string | number> = ReadonlyArray<Value | null> & {
length: 2 | 3 | 4;
} & {
0: Value | null;
};
export declare const optimizeResponsiveArray: <Value extends string | number>(value: ResponsiveArray<Value>) => ResponsiveArray<Value>;
export declare const breakpointQuery: {
readonly tablet: string;
readonly desktop: string;
readonly wide: string;
};
export interface ResponsiveStyle {
mobile?: CSSObject;
tablet?: CSSObject;
desktop?: CSSObject;
wide?: CSSObject;
}
export declare const responsiveStyles: ({ mobile, tablet, desktop, wide, }: ResponsiveStyle) => CSSObject | undefined;
export {};