@xypnox/themescura/dist/cjs/types/theme.d.ts

A design system and theme engine toolkit

/**
 * Input a nested object and prefix
 * Returns a new object with the keys replaced with css variables made from the prefix and the keys
 */
export declare const convertToVar: (theme: any, prefix?: string) => any;
/**
 * Flatten a nested object to a flat object,
 * The keys are replaced and joined with the newKey function
 * that gives a key starting with -- and joined with -
 */
export declare const flattenCss: (theme: any) => {
    [key: string]: any;
};
export interface Palette<BasePalette, ModePalette> {
    id: string;
    name: string;
    base: BasePalette;
    vars: {
        light: ModePalette;
        dark: ModePalette;
    };
}
export interface Theme<BaseVars, ModeVars> {
    id: string;
    name: string;
    base: BaseVars;
    vars: {
        light: ModeVars;
        dark: ModeVars;
    };
}
export type Fn = (...args: any) => any;
export type ThemeFn<BFn extends Fn, MFn extends Fn> = Theme<ReturnType<BFn>, ReturnType<MFn>>;
export type PaletteFn<BFn extends Fn, MFn extends Fn> = Palette<Parameters<BFn>[0], Parameters<MFn>[0]>;
export type BaseTheme<T extends Theme<any, any>> = T['base'];
/**
 * Generate a theme from a palette
 * @param palette
 * @param baseFn
 * @param modeFn
 * The baseFn and modeFn are functions convert their respective parts of the palette
 */
/**
 * Generate a theme from a palette
 * @param palette
 * @param baseFn
 * @param modeFn
 * The baseFn and modeFn are functions convert their respective parts of the palette
 */
export declare const generateTheme: <BFn extends Fn, MFn extends Fn, T extends ThemeFn<BFn, MFn>>(palette: PaletteFn<BFn, MFn>, baseFn: BFn, modeFn: MFn) => T;
/**
 * Final css should be
 * :root { // Base vars }
 * @media (prefers-color-scheme: dark) {
 *   :root { // Dark mode vars }
 * }
 * @media (prefers-color-scheme: light) {
 *   :root { // Light mode vars }
 * }
 * .dark-mode {  // This is added to the body tag }
 * .light-mode {  // This is added to the body tag }
 * The class is selected last to override preference
 * when it is set specifically by user
 */
export declare const cssConverter: <M extends Record<string, any>, P extends Record<string, any>, T extends Theme<M, P>>(theme: T) => string;