@re-flex/styles/Types.d.ts

Core Style Util Package

import dayjs from "dayjs";
import { SxType } from "./sx";
export interface Breakpoints {
    values: {
        xs: number | string;
        sm: number | string;
        md: number | string;
        lg: number | string;
        xl: number | string;
    };
    up(breakPointType: BreakPointsKeys): string;
    down(breakPointType: BreakPointsKeys): string;
    has(key: BreakPointsKeys): boolean;
}
export declare type BreakPointsKeys = keyof Breakpoints["values"];
export interface Mixins {
    [key: string]: MixinsField;
}
export interface MixinsField {
    [key: string]: string | number | object;
}
export interface Overrides {
    [key: string]: object;
}
export interface SystemComponentSizeMultipler {
    xs: number;
    sm: number;
    md: number;
    lg: number;
    xl: number;
}
export declare type ComponentSizeMultipler = keyof SystemComponentSizeMultipler | number;
export declare type ComponentNames = "AppBar" | "Avatar" | "Backdrop" | "BackgroundImage" | "Banner" | "BaseLine" | "Navigation" | "Box" | "Button" | "ButtonBase" | "Card" | "Carousel" | "Chip" | "Collapse" | "DataTable" | "DatePicker" | "Dialog" | "Divider" | "FAB" | "FormField" | "Grid" | "Hidden" | "Icon" | "IconButton" | "ImageList" | "List" | "Menu" | "NavigationDrawer" | "NavigationRail" | "Popper" | "ProgressIndicator" | "Ripple" | "Select" | "SelectionControl" | "Sheet" | "Snackbar" | "Stepper" | "Styled" | "Tab" | "Table" | "TextField" | "TimePicker" | "Tooltip" | "Transition" | "Typography";
export interface ComponentClasses {
    root?: string;
}
export declare type RexComponentOverridesPrefix = `Rex${ComponentNames}`;
export interface ComponentOverridesContent {
    sx: SxType;
    className: string;
}
export declare type ComponentOverrides = {
    [key in RexComponentOverridesPrefix]: ComponentOverridesContent;
};
export interface Palette {
    common: Common;
    type: string;
    primary: ColorDepth;
    secondary: ColorDepth;
    error: ColorDepth;
    warning: ColorDepth;
    info: ColorDepth;
    success: ColorDepth;
    grey: Grey;
    contrastThreshold: number;
    tonalOffset: number;
    text: Text;
    divider: string;
    background: Background;
    action: Action;
}
export interface Action {
    active: string;
    hover: string;
    hoverOpacity: number;
    selected: string;
    selectedOpacity: number;
    disabled: string;
    disabledBackground: string;
    disabledOpacity: number;
    focus: string;
    focusOpacity: number;
    activatedOpacity: number;
}
export interface Background {
    paper: string;
    default: string;
    level1?: string;
    level2?: string;
    level3?: string;
}
export interface Common {
    black: string;
    white: string;
}
export interface ColorDepth {
    light: string;
    main: string;
    dark: string;
    contrastText: string;
}
export interface Grey {
    50: string;
    100: string;
    200: string;
    300: string;
    400: string;
    500: string;
    600: string;
    700: string;
    800: string;
    900: string;
    A100: string;
    A200: string;
    A400: string;
    A700: string;
}
export interface Text {
    primary: string;
    secondary: string;
    disabled: string;
    hint: string;
}
export interface Shape {
    borderRadius: number;
}
export interface Space {
    normal: number;
    dense: number;
    large: number;
}
export interface Transitions {
    easing: Easing;
    duration: Duration;
}
export interface Duration {
    shortest: number;
    shorter: number;
    short: number;
    standard: number;
    complex: number;
    enteringScreen: number;
    leavingScreen: number;
}
export interface Easing {
    easeInOut: string;
    easeOut: string;
    easeIn: string;
    sharp: string;
    linear: string;
}
export interface Typography {
    importFonts: string;
    htmlFontSize: number;
    fontFamily: string;
    fontSize: number | string;
    fontWeightLight: number;
    fontWeightRegular: number;
    fontWeightMedium: number;
    fontWeightBold: number;
    fontWeight: number;
    fontStyle: string;
    fontStretch: string;
    textTransform: string;
    opacity: number;
    letterSpacing: number;
    h1: TypographyTag;
    h2: TypographyTag;
    h3: TypographyTag;
    h4: TypographyTag;
    h5: TypographyTag;
    h6: H6;
    subtitle1: TypographyTag;
    subtitle2: TypographyTag;
    body1: TypographyTag;
    body2: TypographyTag;
    button: TypographyTag;
    caption: TypographyTag;
    overline: TypographyTag;
}
export interface TypographyTag {
    textTransform: TextTransform;
    fontSize: number | string;
    fontWeight: number;
    lineHeight?: number;
    letterSpacing: number;
    opacity?: number;
}
export declare type TextTransform = "capitalize" | "uppercase" | "lowercase";
export interface H6 {
    opacity: number;
    textTransform: TextTransform;
    fontSize: number | string;
    fontWeight: string;
    letterSpacing: number;
}
export interface ZIndex {
    mobileStepper: number;
    speedDial: number;
    appBar: number;
    drawer: number;
    modal: number;
    snackbar: number;
    tooltip: number;
}
export interface Theme {
    prefix: string;
    breakpoints: Breakpoints;
    spaceValues: Space;
    spaceTypes: "dense" | "normal" | "large";
    space: number;
    sizes: SystemComponentSizeMultipler;
    direction: string;
    mixins: Mixins;
    overrides: Overrides;
    palette: Palette;
    props: Overrides;
    shadows: string[];
    typography: Typography;
    shape: Shape;
    transitions: Transitions;
    zIndex: ZIndex;
    dayjs?: typeof dayjs;
}
declare type Primitive = string | number | bigint | boolean | undefined | symbol;
export declare type PropertyStringPath<T, Prefix = ""> = {
    [K in keyof T]: T[K] extends Primitive | Array<any> ? `${string & Prefix}${string & K}` : `${string & Prefix}${string & K}` | PropertyStringPath<T[K], `${string & Prefix}${string & K}.`>;
}[keyof T];
export declare type ColorStringPaths = PropertyStringPath<Palette>;
export default Theme;