@reusable-ui/themable/dist/themable.d.ts

Color options of UI.

import { Factory, CssRule, CssStyleCollection, CssSelector, CssClassName, CssVars } from '@cssfn/core';
import { themes } from '@reusable-ui/colors';
export type ThemeName = (keyof typeof themes) | (string & {});
export interface ThemableVars {
    /**
     * themed background color.
     */
    backg: any;
    /**
     * themed foreground color.
     */
    foreg: any;
    /**
     * themed border color.
     */
    border: any;
    /**
     * themed alternate background color.
     */
    altBackg: any;
    /**
     * themed alternate foreground color.
     */
    altForeg: any;
    /**
     * themed foreground color - at outlined variant.
     */
    foregOutlined: any;
    /**
     * themed alternate background color - at outlined variant.
     */
    altBackgOutlined: any;
    /**
     * themed alternate foreground color - at outlined variant.
     */
    altForegOutlined: any;
    /**
     * themed background color - at mild variant.
     */
    backgMild: any;
    /**
     * themed foreground color - at mild variant.
     */
    foregMild: any;
    /**
     * themed alternate background color - at mild variant.
     */
    altBackgMild: any;
    /**
     * themed alternate foreground color - at mild variant.
     */
    altForegMild: any;
    /**
     * themed ring color.
     */
    ring: any;
    /**
     * conditional background color.
     */
    backgCond: any;
    /**
     * conditional foreground color.
     */
    foregCond: any;
    /**
     * conditional border color.
     */
    borderCond: any;
    /**
     * conditional alternate background color.
     */
    altBackgCond: any;
    /**
     * conditional alternate foreground color.
     */
    altForegCond: any;
    /**
     * conditional foreground color - at outlined variant.
     */
    foregOutlinedCond: any;
    /**
     * conditional alternate background color - at outlined variant.
     */
    altBackgOutlinedCond: any;
    /**
     * conditional alternate foreground color - at outlined variant.
     */
    altForegOutlinedCond: any;
    /**
     * conditional background color - at mild variant.
     */
    backgMildCond: any;
    /**
     * conditional foreground color - at mild variant.
     */
    foregMildCond: any;
    /**
     * conditional alternate background color - at mild variant.
     */
    altBackgMildCond: any;
    /**
     * conditional alternate foreground color - at mild variant.
     */
    altForegMildCond: any;
    /**
     * conditional ring color.
     */
    ringCond: any;
}
export declare const createThemeClass: (themeName: ThemeName) => CssClassName | null;
export declare const createThemeSelector: (themeName: ThemeName) => CssSelector | null;
export declare const ifTheme: (themeName: ThemeName, styles: CssStyleCollection) => CssRule;
export declare const ifHasTheme: (styles: CssStyleCollection) => CssRule;
export declare const ifNoTheme: (styles: CssStyleCollection) => CssRule;
export interface ThemableStuff {
    themableRule: Factory<CssRule>;
    themableVars: CssVars<ThemableVars>;
}
/**
 * Uses theme (color) options.
 * For example: `primary`, `success`, `danger`.
 * @param themeDefinition A callback to create a theme rules for each theme color in `options`.
 * @param options Defines all available theme color options.
 * @returns A `ThemableStuff` represents the theme rules for each theme color in `options`.
 */
export declare const usesThemable: (themeDefinition?: (themeName: ThemeName) => CssStyleCollection, options?: ThemeName[]) => ThemableStuff;
/**
 * Defines a theme rules for the given `themeName`.
 * @param themeName The theme name.
 * @returns A `CssRule` represents a theme rules for the given `themeName`.
 */
export declare const defineThemeRule: (themeName: ThemeName) => CssRule;
/**
 * Gets all available theme color options.
 * @returns A `ThemeName[]` represents all available theme color options.
 */
export declare const themeOptions: () => ThemeName[];
/**
 * Creates an conditional theme color rules for the given `themeName`.
 * @param themeName The theme name as the conditional theme color -or- `null` for undefining the conditional.
 * @returns A `CssRule` represents an conditional theme color rules for the given `themeName`.
 */
export declare const usesThemeConditional: (themeName: ThemeName | null) => CssRule;
export interface ThemableProps {
    theme?: ThemeName | 'inherit';
}
export declare const useThemable: ({ theme }: ThemableProps) => {
    class: CssClassName | null;
};