@hakit/components
Version:
A series of components to work with @hakit/core
52 lines • 2.48 kB
TypeScript
import { CSSInterpolation } from '@emotion/serialize';
import { ThemeParams } from './theme';
import { BreakPoints } from '..';
import { SupportedComponentOverrides } from '@hakit/core';
import { Options } from '@emotion/cache';
import { ThemeStore } from './store';
type DeepPartial<T> = {
[K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
};
export type ThemeProviderProps<T extends object> = ThemeStore["theme"] & {
/** the theme properties */
theme?: DeepPartial<ThemeParams> & T;
/** Simple object to define some colors for for success, warning, info and error states, must be provided in [r,g,b] format [number, number, number] */
infoColors?: Partial<ThemeProviderInfoColors>;
/** any global style overrides */
globalStyles?: CSSInterpolation;
/** options to pass to the emotion cache provider, if an emotion cache is provided, or a different window context via HassConnect, you'll need to wrap your dashboard in the ThemeProvider
* otherwise the styles will not be applied correctly to child components.
* @example
* ```tsx
* <ThemeProvider emotionCache={{ key: "my-key", container: myContainer }}>
* <App />
* </ThemeProvider>
*/
emotionCache?: Options;
/** default breakpoint media query overrides @default {
* xxs: 600,
* xs: 900,
* sm: 1200,
* md: 1536,
* lg: 1700,
*/
breakpoints?: BreakPoints;
/** styles to provide for a specific component type to override every instance */
globalComponentStyles?: Partial<Record<SupportedComponentOverrides, CSSInterpolation>>;
/** children to render within the ThemeProvider */
children?: React.ReactNode;
};
export interface ThemeProviderInfoColors {
errorColor: [number, number, number];
warningColor: [number, number, number];
successColor: [number, number, number];
infoColor: [number, number, number];
}
/**
* A simple way of creating global styles and providing re-usable css variables to re-use across your application
*
* There's very little css shipped with this ThemeProvider, the main purpose of this provider is to create the css variables used for all components across @hakit/components, however it does ship with some base css to the body, html and scrollbars.
* */
export declare function ThemeProvider<T extends object>(props: ThemeProviderProps<T>): import("@emotion/react/jsx-runtime").JSX.Element;
export {};
//# sourceMappingURL=index.d.ts.map