import type { DefaultTheme } from 'styled-components';
import { ExtendedColors } from '../../utils/getThemeWithColorsToken';
import colors, { Colors } from '../modules/colors';
import { SPACING } from './spacing';
import { FONT_FAMILIES, FONT_SIZES, FONT_WEIGHTS, LETTER_SPACINGS, LINE_HEIGHTS } from './typography';
export * from './spacing';
export interface Breakpoints {
    tablet: string;
    desktop: string;
    medium: string;
    wide: string;
    ultraWide: string;
}
export interface Typography {
    letterSpacings: typeof LETTER_SPACINGS;
    lineHeights: typeof LINE_HEIGHTS;
    fontWeights: typeof FONT_WEIGHTS;
    fonts: typeof FONT_FAMILIES;
    fontSizes: typeof FONT_SIZES;
}
export interface CapUITheme extends Typography {
    breakpoints: string[];
    space: typeof SPACING;
    sizes: typeof SPACING;
    mediaQueries: {
        tablet: string;
        desktop: string;
        medium: string;
        wide: string;
        ultraWide: string;
    };
    colors: typeof colors;
    radii: typeof RADII;
    shadows: typeof SHADOWS;
    borders: typeof BORDERS;
    zIndices: typeof ZINDEX;
}
export declare const theme: <Props extends {
    theme: CapUITheme;
}>(props: Props) => CapUITheme;
export declare const BR_TABLET = 767;
export declare const BR_DESKTOP = 1133;
export declare const BR_MEDIUM = 1280;
export declare const BR_WIDE = 1536;
export declare const BR_ULTRAWIDE = 1920;
export declare const breakpoints: Breakpoints;
export type ThemeSpacingValues = keyof typeof SPACING | (string & {}) | (number & {});
export declare const SHADOWS: {
    readonly small: "0 2px 8px rgba(0, 0, 0, 0.1)";
    readonly medium: "0 10px 50px rgba(0, 0, 0, 0.15)";
    readonly big: "0 10px 99px rgba(0, 0, 0, 0.302)";
};
export declare enum CapUIShadow {
    Small = "small",
    Medium = "medium",
    Big = "big"
}
export type ThemeShadowsValues = keyof typeof SHADOWS | (string & {});
export declare const RADII: {
    readonly normal: 4;
    readonly button: 4;
    readonly card: 4;
    readonly modal: 8;
    readonly tags: 4;
    readonly tooltip: 4;
    readonly toast: 4;
    readonly accordion: 8;
    readonly popover: 8;
    readonly poppin: 8;
    readonly px: string;
    readonly 0: number;
    readonly xxs: string;
    readonly xs: string;
    readonly sm: string;
    readonly md: string;
    readonly lg: string;
    readonly xl: string;
    readonly xxl: string;
    readonly xxxl: string;
    readonly '4xl': string;
    readonly '-sm': string;
};
export declare enum CapUIRadius {
    Normal = "normal",
    Button = "button",
    Card = "card",
    Modal = "modal",
    Tags = "tags",
    Tooltip = "tooltip",
    Notifications = "notifications",
    Toast = "toast",
    Accordion = "accordion",
    Popover = "popover",
    Poppin = "poppin"
}
export type ThemeRadiiValues = keyof typeof SPACING | keyof typeof RADII | (string & {}) | (number & {});
export declare const BORDERS: {
    readonly none: "none";
    readonly normal: "1px solid";
    readonly card: "1px solid";
    readonly button: "1px solid";
    readonly avatar: "2px solid";
};
export declare const ZINDEX: {
    readonly hide: -1;
    readonly auto: "auto";
    readonly base: 0;
    readonly dropdown: 1000;
    readonly overlay: 1300;
    readonly modal: 1400;
    readonly select: 1000;
    readonly selectPortal: 1500;
    readonly popover: 1000;
    readonly tooltip: 1800;
    readonly toast: 1800;
};
export type ThemeZIndicesValues = keyof typeof ZINDEX | (number & {});
export declare enum CapUIBorder {
    None = "none",
    Normal = "normal",
    Card = "card",
    Button = "button",
    Avatar = "avatar"
}
export type ThemeBordersValues = keyof typeof BORDERS | (string & {});
export declare const capuiTheme: Omit<DefaultTheme, 'colors'> & {
    colors: ExtendedColors & Colors;
};
export declare const extendTheme: <T extends Record<any, any>>(extendedTheme: T & Partial<Record<keyof CapUITheme, unknown>>) => CapUITheme & T;
export declare const generateShades: (hexColor: string) => {
    '100': string;
    '150': string;
    '200': string;
    '300': string;
    '400': string;
    '500': string;
    '600': string;
    '700': string;
    '800': string;
    '900': string;
};
export declare const generatePalette: (hexColor: string) => {
    background: string;
    lighter: string;
    light: string;
    base: string;
    dark: string;
    darker: string;
};