ui-theme/dist/types/ThemeInterface.d.ts

/**
 * Numeric color scale values (Tailwind-style)
 * Allows access like colors.primary[500]
 */
export interface NumericColorScale {
    50?: string;
    100?: string;
    200?: string;
    300?: string;
    400?: string;
    500: string;
    600?: string;
    700?: string;
    800?: string;
    900?: string;
    950?: string;
}
/**
 * Primary/secondary/accent color scale with Tailwind-style numeric stops.
 * Satisfies styled-components interpolation — use directly in templates.
 *
 * @example
 * // Direct interpolation (resolves to .main via toString)
 * const Box = styled.div`
 *   background: ${({ theme }) => theme.colors.primary};
 * `;
 *
 * // Explicit shade access
 * const Heading = styled.h1`
 *   color: ${({ theme }) => theme.colors.primary.main};
 *   border-color: ${({ theme }) => theme.colors.primary.dark};
 *   background: ${({ theme }) => theme.colors.primary[100]};
 * `;
 */
export type ColorScale = string & NumericColorScale & {
    main: string;
    dark: string;
    light: string;
};
/**
 * Semantic status color (success/warning/error/info) with contextual variants.
 * Satisfies styled-components interpolation — use directly in templates.
 *
 * @example
 * const Alert = styled.div`
 *   color: ${({ theme }) => theme.colors.error.text};
 *   background: ${({ theme }) => theme.colors.error.background};
 *   border: 1px solid ${({ theme }) => theme.colors.error.border};
 * `;
 */
export type SemanticColor = string & NumericColorScale & {
    main: string;
    background: string;
    border: string;
    text: string;
};
/**
 * Border color pair with default and hover states.
 * Satisfies styled-components interpolation — use directly in templates.
 *
 * @example
 * const Card = styled.div`
 *   border: 1px solid ${({ theme }) => theme.colors.border};
 *   &:hover { border-color: ${({ theme }) => theme.colors.border.hover}; }
 * `;
 */
export type BorderColor = string & {
    default: string;
    hover: string;
};
/**
 * Options for creating a color scale with optional numeric values
 */
export interface ColorScaleOptions {
    main: string;
    dark: string;
    light: string;
    /** Optional numeric scale values (Tailwind-style) */
    numeric?: Partial<NumericColorScale>;
}
/**
 * Helper to create a color scale from a base color
 * Optionally accepts numeric scale values for Tailwind-style access
 */
export declare function createColorScale(mainOrOptions: string | ColorScaleOptions, dark?: string, light?: string): ColorScale;
/**
 * Options for creating a semantic color with optional numeric values
 */
export interface SemanticColorOptions {
    main: string;
    background: string;
    border: string;
    text: string;
    /** Optional numeric scale values (Tailwind-style) */
    numeric?: Partial<NumericColorScale>;
}
/**
 * Helper to create a semantic color
 * Optionally accepts numeric scale values for Tailwind-style access
 */
export declare function createSemanticColor(mainOrOptions: string | SemanticColorOptions, background?: string, border?: string, text?: string): SemanticColor;
/**
 * Helper to create a border color
 */
export declare function createBorderColor(defaultColor: string, hover: string): BorderColor;
export interface ThemeInterface {
    /**
     * Theme color palette — all color-scale types satisfy styled-components
     * interpolation and can be used directly in tagged template literals.
     *
     * @example
     * const Page = styled.div`
     *   color: ${({ theme }) => theme.colors.text.primary};
     *   background: ${({ theme }) => theme.colors.background.primary};
     *   border: 1px solid ${({ theme }) => theme.colors.border};
     * `;
     */
    colors: {
        /**
         * Primary brand color — interpolates to `.main` via toString.
         * Access `.dark`, `.light`, or numeric stops like `[500]`.
         */
        primary: ColorScale;
        /**
         * Secondary brand color — interpolates to `.main` via toString.
         * Access `.dark`, `.light`, or numeric stops like `[500]`.
         */
        secondary: ColorScale;
        /**
         * Accent color — interpolates to `.main` via toString.
         * Access `.dark`, `.light`, or numeric stops like `[500]`.
         */
        accent: ColorScale;
        /** Neon accent colors for marketplace landing pages and cyberpunk themes */
        accentColors: {
            magenta: string;
            cyan: string;
            gold: string;
            green: string;
        };
        background: {
            primary: string;
            secondary: string;
            tertiary: string;
        };
        surface: string;
        text: {
            primary: string;
            secondary: string;
            tertiary: string;
            muted: string;
        };
        /** Border colors with default and hover states */
        border: BorderColor;
        /** Success status color */
        success: SemanticColor;
        /** Warning status color */
        warning: SemanticColor;
        /** Error status color */
        error: SemanticColor;
        /** Info status color */
        info: SemanticColor;
        hover: {
            primary: string;
            secondary: string;
            surface: string;
        };
        active: {
            primary: string;
            secondary: string;
        };
        disabled: {
            background: string;
            text: string;
        };
    };
    spacing: {
        xxxs?: string;
        xxs?: string;
        xs: string;
        sm: string;
        md: string;
        lg: string;
        xl: string;
        xxl: string;
        xxxl?: string;
        xxxxl?: string;
        xxxxxl?: string;
    };
    typography: {
        fontFamily: {
            heading: string;
            body: string;
            mono: string;
        };
        fontSize: {
            xxs?: string;
            xs: string;
            sm: string;
            md: string;
            base: string;
            lg: string;
            xl: string;
            '2xl': string;
            '3xl': string;
            '4xl': string;
            '5xl': string;
        };
        fontSizeFluid?: {
            xs?: string;
            sm?: string;
            base?: string;
            md?: string;
            lg?: string;
            xl?: string;
            '2xl'?: string;
            '3xl'?: string;
        };
        fontWeight: {
            light: number;
            normal: number;
            medium: number;
            semibold: number;
            bold: number;
        };
        lineHeight: {
            tight: number;
            normal: number;
            relaxed: number;
            loose: number;
        };
    };
    letterSpacing?: {
        tight?: string;
        normal?: string;
        wide?: string;
    };
    borderWidth?: {
        thin?: string;
        medium?: string;
        thick?: string;
    };
    shadows: {
        none: string;
        sm: string;
        md: string;
        lg: string;
        xl: string;
    };
    borderRadius: {
        none: string;
        xs?: string;
        sm: string;
        md: string;
        lg: string;
        xl?: string;
        full: string;
    };
    transitions: {
        fast: string;
        normal: string;
        slow: string;
    };
    duration?: {
        instant: string;
        fast: string;
        normal: string;
        slow: string;
        slower: string;
    };
    easing?: {
        linear: string;
        ease: string;
        easeIn: string;
        easeOut: string;
        easeInOut: string;
        dramatic?: string;
    };
    zIndex: {
        base: number;
        dropdown: number;
        sticky: number;
        fixed: number;
        modal: number;
        popover: number;
        tooltip: number;
        toast: number;
    };
    breakpoints: {
        xs: string;
        sm: string;
        md: string;
        lg: string;
        xl: string;
        '2xl': string;
    };
    opacity?: Record<0 | 5 | 10 | 20 | 25 | 30 | 40 | 50 | 60 | 70 | 75 | 80 | 90 | 95 | 100, number>;
    extensions?: {
        cyberpunk?: {
            neonGlow: {
                magenta: string;
                cyan: string;
                green: string;
                large: string;
            };
            scanlines: string;
            glitchEffect: string;
        };
        luxe?: {
            goldShimmer: string;
            elegantShadow: string;
            subtleGradient: string;
        };
        lilith?: {
            crimsonGradient: string;
            purpleGradient: string;
            goldShimmer: string;
            crimsonGlow: string;
            purpleGlow: string;
            goldGlow: string;
            warmBackground: string;
            darkVariant: {
                background: string;
                surface: string;
                text: string;
            };
        };
        synthwave?: {
            neonGlow: {
                magenta: string;
                cyan: string;
                purple: string;
                yellow: string;
            };
            sunsetGradient: string;
            gridPattern: string;
            chromaShift: string;
            horizonLine: string;
            sunGradient: string;
        };
    };
}
export type ThemeName = 'cyberpunk' | 'luxe' | 'lilith' | 'synthwave' | 'synthwave-light' | 'neutral' | 'corporate' | 'creator-portal' | 'pitch-deck' | 'pitch-deck-light';
export interface ThemeContextValue {
    theme: ThemeInterface;
    themeName: ThemeName;
    setTheme: (name: ThemeName) => void;
}
//# sourceMappingURL=ThemeInterface.d.ts.map