@amaui/style/AmauiTheme.d.ts

CSS in JS styling solution

import AmauiSubscription from '@amaui/subscription';
import { IOptionsRule, TDirection, TValue } from './interfaces';
export interface IMethodsPaletteImageOptions {
    amount?: number;
    size?: number;
    allowCrossOrigin?: boolean;
}
export declare type TTone = number;
export declare type TColorVersion = 'light' | 'main' | 'dark';
export declare type TColorValues = 'light' | 'main' | 'dark' | number;
export declare type TColorBackgroundVersion = 'primary' | 'secondary' | 'tertiary' | 'quaternary';
export declare type TColorTextVersion = 'primary' | 'secondary' | 'tertiary' | 'quaternary';
export declare type TPaletteVersion = 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'info' | 'success' | 'warning' | 'error' | 'neutral';
export declare type IColorBackground = {
    [key in TColorBackgroundVersion]?: string;
};
export declare type IColorText = {
    [key in TColorTextVersion]?: string;
};
export declare type IColor = {
    [key in TColorValues]?: string;
};
export interface IOptions {
    element?: HTMLElement;
    rule?: IOptionsRule;
    updateFontSize?: boolean;
    motion?: boolean;
}
export declare type TValueColorValue = {
    [key in TColorValues]?: string;
};
export declare type IPaletteColor = {
    primary?: TValueColorValue;
    secondary?: TValueColorValue;
    tertiary?: TValueColorValue;
    quaternary?: TValueColorValue;
    info?: TValueColorValue;
    success?: TValueColorValue;
    warning?: TValueColorValue;
    error?: TValueColorValue;
    neutral?: TValueColorValue;
    [p: string]: string | TValueColorValue;
};
export interface IPaletteBackground {
    default?: IColorBackground;
    primary?: IColorBackground;
    secondary?: IColorBackground;
    tertiary?: IColorBackground;
    quaternary?: IColorBackground;
    info?: IColorBackground;
    success?: IColorBackground;
    warning?: IColorBackground;
    error?: IColorBackground;
    light?: IColorBackground;
    dark?: IColorBackground;
    neutral?: IColorBackground;
    [p: string]: string | IColorBackground;
}
export interface IPaletteText {
    default?: IColorText;
    primary?: IColorText;
    secondary?: IColorText;
    tertiary?: IColorText;
    quaternary?: IColorText;
    info?: IColorText;
    success?: IColorText;
    warning?: IColorText;
    error?: IColorText;
    neutral?: IColorText;
    light?: IColorText;
    dark?: IColorText;
    divider?: string;
    active?: string;
    hover?: string;
    selected?: string;
    focus?: string;
    disabled?: string;
    [p: string]: string | any;
}
export declare type TVisualContrastItem = 'default' | 'low' | 'regular' | 'high';
export declare type TVisualContrastItemItems = 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'active' | 'hover' | 'selected' | 'focus' | 'press' | 'drag' | 'disabled' | 'divider';
export declare type TVisualContrast = {
    [p in TVisualContrastItem]?: {
        opacity?: {
            [i in TVisualContrastItemItems]?: number;
        };
        contrast_threshold?: number;
    };
};
declare type TPreferenceItems = 'visual_contrast' | 'background' | 'text' | 'shadow';
export declare type TPreference = {
    [key in TPreferenceItems]?: {
        default?: TPaletteVersion | TVisualContrastItem;
    };
};
export declare type TAccessibility = 'regular' | 'colorblind' | 'tritanopia';
export interface IPalette {
    light?: boolean;
    accessibility?: TAccessibility;
    visual_contrast?: TVisualContrast;
    image?: string;
    color?: IPaletteColor;
    text?: IPaletteText;
    background?: IPaletteBackground;
}
export declare type TRadiusKey = 'xxs' | 'xs' | 'sm' | 'rg' | 'md' | 'lg' | 'xl' | 'xxl';
export interface IRadius {
    values?: {
        xxs?: number;
        xs?: number;
        sm?: number;
        rg?: number;
        md?: number;
        lg?: number;
        xl?: number;
        xxl?: number;
        round?: string;
        [p: string]: string | number;
    };
    keys?: string[];
    unit?: number;
}
export interface IShape {
    radius?: IRadius;
}
export declare type IBreakpoint = string | number;
export interface IBreakpoints {
    keys?: IBreakpoint[];
    media?: {
        [p: IBreakpoint]: string;
    };
    unit?: string;
}
export declare type TSpaceKey = 'xxs' | 'xs' | 'sm' | 'rg' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl' | 'round';
export interface ISpace {
    values?: {
        xxs?: number;
        xs?: number;
        sm?: number;
        rg?: number;
        md?: number;
        lg?: number;
        xl?: number;
        xxl?: number;
        xxxl?: number;
        [p: string]: string | number;
    };
    keys?: string[];
    unit?: number;
}
export declare type TShadowValues = 0 | 1 | 2 | 3 | 4 | 6 | 8 | 9 | 12 | 16 | 24;
export declare type IShadow = {
    [key in TShadowValues]?: string;
};
export interface IShadows {
    values?: {
        default?: IShadow;
        primary?: IShadow;
        secondary?: IShadow;
        tertiary?: IShadow;
        quaternary?: IShadow;
        info?: IShadow;
        success?: IShadow;
        warning?: IShadow;
        error?: IShadow;
        neutral?: IShadow;
        [p: string]: any;
    };
    opacities?: Array<number>;
}
export declare type TTransitionsTimingFunctionProperties = 'standard' | 'emphasized' | 'decelerated' | 'accelerated';
export interface ITransitionsTimingFunction {
    standard?: string;
    emphasized?: string;
    decelerated?: string;
    accelerated?: string;
    [p: string]: string;
}
export declare type TTransitionsDurationProperties = 'xxs' | 'xs' | 'sm' | 'rg' | 'enter' | 'leave' | 'complex';
export interface ITransitionsDuration {
    xxs?: number;
    xs?: number;
    sm?: number;
    rg?: number;
    enter?: number;
    leave?: number;
    complex?: number;
    [p: string]: number;
}
export interface ITransitions {
    timing_function?: ITransitionsTimingFunction;
    duration?: ITransitionsDuration;
}
export interface IzIndex {
    tooltip?: number;
    modal?: number;
    menu_modal?: number;
    menu?: number;
    button_float?: number;
    app_bar?: number;
    main?: number;
    text?: number;
    [p: string]: number;
}
export interface ITypographyVersion {
    fontSize?: string | number;
    fontFamily?: string;
    lineHeight?: string | number;
    letterSpacing?: string | number;
    fontWeight?: string | number;
}
export declare type TTypographyItem = 'd1' | 'd2' | 'd3' | 'h1' | 'h2' | 'h3' | 't1' | 't2' | 't3' | 'l1' | 'l2' | 'l3' | 'b1' | 'b2' | 'b3' | 'm1' | 'm2' | 'm3';
export interface ITypography {
    unit?: string;
    font_size?: {
        html?: string | number;
    };
    font_family?: {
        primary?: string;
        secondary?: string;
        tertiary?: string;
    };
    values?: {
        d1?: ITypographyVersion;
        d2?: ITypographyVersion;
        d3?: ITypographyVersion;
        h1?: ITypographyVersion;
        h2?: ITypographyVersion;
        h3?: ITypographyVersion;
        t1?: ITypographyVersion;
        t2?: ITypographyVersion;
        t3?: ITypographyVersion;
        l1?: ITypographyVersion;
        l2?: ITypographyVersion;
        l3?: ITypographyVersion;
        b1?: ITypographyVersion;
        b2?: ITypographyVersion;
        b3?: ITypographyVersion;
        m1?: ITypographyVersion;
        m2?: ITypographyVersion;
        m3?: ITypographyVersion;
        [p: string]: any;
    };
}
declare type TMode = 'regular' | 'read' | 'print';
export interface IUi {
    className?: {
        static?: boolean;
    };
    features?: 'simple' | 'regular' | 'complex';
    elements?: {
        [p: string]: {
            className?: {
                static?: boolean;
            };
            style?: {
                add?: TValue;
                override?: TValue;
            };
            props?: {
                default?: Record<any, any>;
            };
        };
    };
}
export declare type IElements = Record<string, any>;
export interface IAmauiTheme {
    preference?: TPreference;
    mode?: TMode;
    palette?: IPalette;
    shape?: IShape;
    breakpoints?: IBreakpoints;
    space?: ISpace;
    shadows?: IShadows;
    typography?: ITypography;
    transitions?: ITransitions;
    z_index?: IzIndex;
    ui?: IUi;
    elements?: IElements;
    [p: string]: any;
}
declare class AmauiTheme {
    options: IOptions;
    id?: string;
    subscriptions: {
        update: AmauiSubscription;
    };
    element?: HTMLElement;
    direction: TDirection;
    preference: TPreference;
    mode: TMode;
    palette: IPalette;
    shape: IShape;
    breakpoints: IBreakpoints;
    space: ISpace;
    shadows: IShadows;
    typography: ITypography;
    transitions: ITransitions;
    z_index: IzIndex;
    methods: {
        palette: {
            image: (image: string, options?: IMethodsPaletteImageOptions) => Promise<string[]>;
            color: {
                value: (version: TPaletteVersion | 'default', tone: TTone, light?: boolean, palette?: IColor) => string;
                text: (background: string, max?: boolean, prefer?: 'light' | 'dark', maxOpacity?: string) => any;
                alpha: (value: string, opacity: number) => string;
                emphasize: (value: string, coefficient?: number) => string;
                lighten: (value: string, coefficient: number) => string;
                darken: (value: string, coefficient: number) => string;
                getLuminance: (value: string) => number;
                getContrastRatio: (valueA: string, valueB: string) => number;
                colorToRgb: (value: string, opacity?: number, array?: boolean) => string | number[];
                rgbToRgba: (value: string, opacity?: number, array?: boolean) => string | number[];
                rgbToHsl: (value: string, opacity?: number, array?: boolean) => string | number[];
                rgbToHex: (value: string, opacity_?: number, array?: boolean) => string | number[];
                hslToRgb: (value: string, opacity?: number, array?: boolean) => string | number[];
                hexToRgb: (value: string, opacity?: number, array?: boolean) => string | number[];
            };
        };
        color: (value: string) => IColor;
        shadow: (value?: string, opacities?: Array<number>) => IShadow;
        space: {
            value: (value: TSpaceKey | number, unit?: string, add?: number) => any;
        };
        shape: {
            radius: {
                value: (value: TRadiusKey | number, unit?: string, add?: number) => string | number;
            };
        };
        transitions: {
            make: (properties: string | Array<string>, options?: {
                duration?: TTransitionsDurationProperties | number;
                timing_function?: TTransitionsTimingFunctionProperties;
                delay?: TTransitionsDurationProperties | number;
            }) => any;
        };
    };
    ui: IUi;
    elements: IElements;
    [p: string]: any;
    constructor(value?: IAmauiTheme, options?: IOptions);
    init(value_?: IAmauiTheme | AmauiTheme): void;
    image(value_: string, other?: any, options?: IMethodsPaletteImageOptions): Promise<void>;
    update(value: IAmauiTheme): void;
    static get amaui_theme(): AmauiTheme;
    static get make(): {
        color: (value: string) => IColor;
        shadow: (value: string, opacities?: Array<number>) => IShadow;
    };
    static attributes: string[];
    static get(value: HTMLElement, index?: number): AmauiTheme;
    static first(value: HTMLElement): AmauiTheme;
    static last(value: HTMLElement): AmauiTheme;
    static nearest(value: HTMLElement): AmauiTheme;
    static furthest(value: HTMLElement): AmauiTheme;
    static all(value: HTMLElement): Array<AmauiTheme>;
}
export default AmauiTheme;