import * as CSS from 'csstype';
import type { ThemeUIConfig } from "./options.js";
export type { CSSObject } from '@emotion/react';
type StandardCSSProperties = CSS.Properties<number | string>;
/**
 * Style properties with value of undefined, null or false are ignored.
 */
export type ThemeUIEmpty = undefined | null | false;
/**
 * The `css` function accepts arrays as values for mobile-first responsive styles.
 * Note that this extends to non-theme values also. For example `display=['none', 'block']`
 * will also works.
 *
 * For more information see: https://styled-system.com/responsive-styles
 */
export type ResponsiveStyleValue<T> = T | ThemeUIEmpty | Array<T | ThemeUIEmpty>;
/**
 * All non-vendor-prefixed CSS properties. (Allow `number` to support CSS-in-JS libs,
 * since they are converted to pixels)
 */
export interface CSSProperties extends CSS.StandardProperties<number | string>, CSS.SvgProperties<number | string>, CSS.VendorProperties<number | string> {
}
/**
 * Map of all CSS pseudo selectors (`:hover`, `:focus`, ...)
 */
export type CSSPseudoSelectorProps<TTheme> = {
    [K in CSS.Pseudos]?: ThemeUIStyleObject<TTheme>;
};
interface AliasesCSSProperties {
    /**
     * The **`background-color`** CSS property sets the background color of an element.
     *
     * **Initial value**: `transparent`
     *
     * | Chrome | Firefox | Safari |  Edge  |  IE   |
     * | :----: | :-----: | :----: | :----: | :---: |
     * | **1**  |  **1**  | **1**  | **12** | **4** |
     *
     * @see https://developer.mozilla.org/docs/Web/CSS/background-color
     */
    bg?: StandardCSSProperties['backgroundColor'];
    /**
     * The **`margin`** CSS property sets the margin area on all four sides of an element. It is a shorthand for `margin-top`, `margin-right`, `margin-bottom`, and `margin-left`.
     *
     * | Chrome | Firefox | Safari |  Edge  |  IE   |
     * | :----: | :-----: | :----: | :----: | :---: |
     * | **1**  |  **1**  | **1**  | **12** | **3** |
     *
     * @see https://developer.mozilla.org/docs/Web/CSS/margin
     */
    m?: StandardCSSProperties['margin'];
    /**
     * The **`margin-top`** CSS property sets the margin area on the top of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
     *
     * **Initial value**: `0`
     *
     * | Chrome | Firefox | Safari |  Edge  |  IE   |
     * | :----: | :-----: | :----: | :----: | :---: |
     * | **1**  |  **1**  | **1**  | **12** | **3** |
     *
     * @see https://developer.mozilla.org/docs/Web/CSS/margin-top
     */
    mt?: StandardCSSProperties['marginTop'];
    /**
     * The **`margin-right`** CSS property sets the margin area on the right side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
     *
     * **Initial value**: `0`
     *
     * | Chrome | Firefox | Safari |  Edge  |  IE   |
     * | :----: | :-----: | :----: | :----: | :---: |
     * | **1**  |  **1**  | **1**  | **12** | **3** |
     *
     * @see https://developer.mozilla.org/docs/Web/CSS/margin-right
     */
    mr?: StandardCSSProperties['marginRight'];
    /**
     * The **`margin-bottom`** CSS property sets the margin area on the bottom of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
     *
     * **Initial value**: `0`
     *
     * | Chrome | Firefox | Safari |  Edge  |  IE   |
     * | :----: | :-----: | :----: | :----: | :---: |
     * | **1**  |  **1**  | **1**  | **12** | **3** |
     *
     * @see https://developer.mozilla.org/docs/Web/CSS/margin-bottom
     */
    mb?: StandardCSSProperties['marginBottom'];
    /**
     * The **`margin-left`** CSS property sets the margin area on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
     *
     * **Initial value**: `0`
     *
     * | Chrome | Firefox | Safari |  Edge  |  IE   |
     * | :----: | :-----: | :----: | :----: | :---: |
     * | **1**  |  **1**  | **1**  | **12** | **3** |
     *
     * @see https://developer.mozilla.org/docs/Web/CSS/margin-left
     */
    ml?: StandardCSSProperties['marginLeft'];
    /**
     * The **`mx`** is shorthand for using both **`margin-left`** and **`margin-right`** CSS properties. They set the margin area on the left and right side of an element. A positive value placesit
     * farther from its neighbors, while a negative value places it closer.
     *
     * **Initial value**: `0`
     *
     * | Chrome | Firefox | Safari |  Edge  |  IE   |
     * | :----: | :-----: | :----: | :----: | :---: |
     * | **1**  |  **1**  | **1**  | **12** | **3** |
     *
     * @see https://styled-system.com/#margin-props
     * @see https://developer.mozilla.org/docs/Web/CSS/margin-left
     * @see https://developer.mozilla.org/docs/Web/CSS/margin-right
     */
    mx?: StandardCSSProperties['marginLeft'];
    /**
     * The **`marginX`** is shorthand for using both **`margin-left`** and **`margin-right`** CSS properties. They set the margin area on the left and right side of an element. A positive value
     * places it farther from its neighbors, while a negative value places it closer.
     *
     * **Initial value**: `0`
     *
     * | Chrome | Firefox | Safari |  Edge  |  IE   |
     * | :----: | :-----: | :----: | :----: | :---: |
     * | **1**  |  **1**  | **1**  | **12** | **3** |
     *
     * @see https://styled-system.com/#margin-props
     * @see https://developer.mozilla.org/docs/Web/CSS/margin-left
     * @see https://developer.mozilla.org/docs/Web/CSS/margin-right
     */
    marginX?: StandardCSSProperties['marginLeft'];
    /**
     * The **`my`** is shorthard for using both **`margin-top`** and **`margin-bottom`** CSS properties. They set the margin area on the top and bottom of an element. A positive value places it
     * farther from its neighbors, while a negative value places it closer.
     *
     * **Initial value**: `0`
     *
     * | Chrome | Firefox | Safari |  Edge  |  IE   |
     * | :----: | :-----: | :----: | :----: | :---: |
     * | **1**  |  **1**  | **1**  | **12** | **3** |
     *
     * @see https://styled-system.com/#margin-props
     * @see https://developer.mozilla.org/docs/Web/CSS/margin-top
     * @see https://developer.mozilla.org/docs/Web/CSS/margin-bottom
     */
    my?: StandardCSSProperties['marginTop'];
    /**
     * The **`marginY`** is shorthard for using both **`margin-top`** and **`margin-bottom`** CSS properties. They set the margin area on the top and bottom of an element. A positive value places
     * it farther from its neighbors, while a negative value places it closer.
     *
     * **Initial value**: `0`
     *
     * | Chrome | Firefox | Safari |  Edge  |  IE   |
     * | :----: | :-----: | :----: | :----: | :---: |
     * | **1**  |  **1**  | **1**  | **12** | **3** |
     *
     * @see https://styled-system.com/#margin-props
     * @see https://developer.mozilla.org/docs/Web/CSS/margin-top
     * @see https://developer.mozilla.org/docs/Web/CSS/margin-bottom
     */
    marginY?: StandardCSSProperties['marginTop'];
    /**
     * The **`padding`** CSS property sets the padding area on all four sides of an element. It is a shorthand for `padding-top`, `padding-right`, `padding-bottom`, and `padding-left`.
     *
     * | Chrome | Firefox | Safari |  Edge  |  IE   |
     * | :----: | :-----: | :----: | :----: | :---: |
     * | **1**  |  **1**  | **1**  | **12** | **4** |
     *
     * @see https://developer.mozilla.org/docs/Web/CSS/padding
     */
    p?: StandardCSSProperties['padding'];
    /**
     * The **`padding-top`** padding area on the top of an element.
     *
     * **Initial value**: `0`
     *
     * | Chrome | Firefox | Safari |  Edge  |  IE   |
     * | :----: | :-----: | :----: | :----: | :---: |
     * | **1**  |  **1**  | **1**  | **12** | **4** |
     *
     * @see https://developer.mozilla.org/docs/Web/CSS/padding-top
     */
    pt?: StandardCSSProperties['paddingTop'];
    /**
     * The **`padding-right`** CSS property sets the width of the padding area on the right side of an element.
     *
     * **Initial value**: `0`
     *
     * | Chrome | Firefox | Safari |  Edge  |  IE   |
     * | :----: | :-----: | :----: | :----: | :---: |
     * | **1**  |  **1**  | **1**  | **12** | **4** |
     *
     * @see https://developer.mozilla.org/docs/Web/CSS/padding-right
     */
    pr?: StandardCSSProperties['paddingRight'];
    /**
     * The **`padding-bottom`** CSS property sets the height of the padding area on the bottom of an element.
     *
     * **Initial value**: `0`
     *
     * | Chrome | Firefox | Safari |  Edge  |  IE   |
     * | :----: | :-----: | :----: | :----: | :---: |
     * | **1**  |  **1**  | **1**  | **12** | **4** |
     *
     * @see https://developer.mozilla.org/docs/Web/CSS/padding-bottom
     */
    pb?: StandardCSSProperties['paddingBottom'];
    /**
     * The **`padding-left`** CSS property sets the width of the padding area on the left side of an element.
     *
     * **Initial value**: `0`
     *
     * | Chrome | Firefox | Safari |  Edge  |  IE   |
     * | :----: | :-----: | :----: | :----: | :---: |
     * | **1**  |  **1**  | **1**  | **12** | **4** |
     *
     * @see https://developer.mozilla.org/docs/Web/CSS/padding-left
     */
    pl?: StandardCSSProperties['paddingLeft'];
    /**
     * The **`px`** is shorthand property for CSS properties **`padding-left`** and **`padding-right`**. They set the width of the padding area on the left and right side of an element.
     *
     * **Initial value**: `0`
     *
     * | Chrome | Firefox | Safari |  Edge  |  IE   |
     * | :----: | :-----: | :----: | :----: | :---: |
     * | **1**  |  **1**  | **1**  | **12** | **4** |
     *
     * @see https://styled-system.com/#padding-props
     * @see https://developer.mozilla.org/docs/Web/CSS/padding-left
     * @see https://developer.mozilla.org/docs/Web/CSS/padding-right
     */
    px?: StandardCSSProperties['paddingLeft'];
    /**
     * The **`paddingX`** is shorthand property for CSS properties **`padding-left`** and **`padding-right`**. They set the width of the padding area on the left and right side of an element.
     *
     * **Initial value**: `0`
     *
     * | Chrome | Firefox | Safari |  Edge  |  IE   |
     * | :----: | :-----: | :----: | :----: | :---: |
     * | **1**  |  **1**  | **1**  | **12** | **4** |
     *
     * @see https://styled-system.com/#padding-props
     * @see https://developer.mozilla.org/docs/Web/CSS/padding-left
     * @see https://developer.mozilla.org/docs/Web/CSS/padding-right
     */
    paddingX?: StandardCSSProperties['paddingLeft'];
    /**
     * The **`py`** is shorthand property for CSS properties **`padding-top`** and **`padding-bottom`**. They set the width of the padding area on the top and bottom of an element.
     *
     * **Initial value**: `0`
     *
     * | Chrome | Firefox | Safari |  Edge  |  IE   |
     * | :----: | :-----: | :----: | :----: | :---: |
     * | **1**  |  **1**  | **1**  | **12** | **4** |
     *
     * @see https://styled-system.com/#padding-props
     * @see https://developer.mozilla.org/docs/Web/CSS/padding-top
     * @see https://developer.mozilla.org/docs/Web/CSS/padding-bottom
     */
    py?: StandardCSSProperties['paddingTop'];
    /**
     * The **`paddingY`** is shorthand property for CSS properties **`padding-top`** and **`padding-bottom`**. They set the width of the padding area on the top and bottom of an element.
     *
     * **Initial value**: `0`
     *
     * | Chrome | Firefox | Safari |  Edge  |  IE   |
     * | :----: | :-----: | :----: | :----: | :---: |
     * | **1**  |  **1**  | **1**  | **12** | **4** |
     *
     * @see https://styled-system.com/#padding-props
     * @see https://developer.mozilla.org/docs/Web/CSS/padding-top
     * @see https://developer.mozilla.org/docs/Web/CSS/padding-bottom
     */
    paddingY?: StandardCSSProperties['paddingTop'];
    /**
     * The **`size`** is a shorthand property for CSS properties **`width`** and **`height`**.
     *
     * @see https://theme-ui.com/sx-prop#theme-aware-properties
     * @see https://developer.mozilla.org/docs/Web/CSS/width
     * @see https://developer.mozilla.org/docs/Web/CSS/height
     */
    /**
     * The **`scrollMarginX`** is shorthand property for CSS properties **`scroll-margin-left`** and **`scroll-margin-right`**. They set the margin of the scroll snap area that is used for snapping the element to the snapport.
     *
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-left
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-right
     */
    scrollMarginX?: StandardCSSProperties['scrollMarginLeft'];
    /**
     * The **`scrollMarginY`** is shorthand property for CSS properties **`scroll-margin-top`** and **`scroll-margin-bottom`**. They set the margin of the scroll snap area that is used for snapping the element to the snapport.
     *
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-top
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-bottom
     */
    scrollMarginY?: StandardCSSProperties['scrollMarginTop'];
    /**
     * The **`scrollPaddingX`** is shorthand property for CSS properties **`scroll-padding-left`** and **`scroll-padding-right`**. They set the width of the scroll padding area on the left and right side of an element.
     *
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-left
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-right
     */
    scrollPaddingX?: StandardCSSProperties['scrollPaddingLeft'];
    /**
     * The **`scrollPaddingY`** is shorthand property for CSS properties **`scroll-padding-top`** and **`scroll-padding-bottom`**. They set the width of the scroll padding area on the top and bottom side of an element.
     *
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-top
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-bottom
     */
    scrollPaddingY?: StandardCSSProperties['scrollPaddingTop'];
    size?: StandardCSSProperties['width'];
}
interface OverwriteCSSProperties {
    /**
     * The **`box-shadow`** CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the
     * element, blur and spread radii, and color.
     *
     * **Initial value**: `none`
     *
     * | Chrome  | Firefox | Safari  |  Edge  |  IE   |
     * | :-----: | :-----: | :-----: | :----: | :---: |
     * | **10**  |  **4**  | **5.1** | **12** | **9** |
     * | 1 _-x-_ |         | 3 _-x-_ |        |       |
     *
     * @see https://developer.mozilla.org/docs/Web/CSS/box-shadow
     */
    boxShadow?: CSS.Property.BoxShadow | number;
    /**
     * The **`font-weight`** CSS property specifies the weight (or boldness) of the font. The font weights available to you will depend on the `font-family` you are using. Some fonts are only
     * available in `normal` and `bold`.
     *
     * **Initial value**: `normal`
     *
     * | Chrome | Firefox | Safari |  Edge  |  IE   |
     * | :----: | :-----: | :----: | :----: | :---: |
     * | **2**  |  **1**  | **1**  | **12** | **3** |
     *
     * @see https://developer.mozilla.org/docs/Web/CSS/font-weight
     */
    fontWeight?: CSS.Property.FontWeight | string;
    /**
     * The **`border-top-style`** CSS property sets the line style of an element's top `border`.
     *
     * **Initial value**: `none`
     *
     * | Chrome | Firefox | Safari |  Edge  |   IE    |
     * | :----: | :-----: | :----: | :----: | :-----: |
     * | **1**  |  **1**  | **1**  | **12** | **5.5** |
     *
     * @see https://developer.mozilla.org/docs/Web/CSS/border-top-style
     */
    borderTopStyle?: CSS.Property.BorderTopStyle | string;
    /**
     * The **`border-bottom-style`** CSS property sets the line style of an element's bottom `border`.
     *
     * **Initial value**: `none`
     *
     * | Chrome | Firefox | Safari |  Edge  |   IE    |
     * | :----: | :-----: | :----: | :----: | :-----: |
     * | **1**  |  **1**  | **1**  | **12** | **5.5** |
     *
     * @see https://developer.mozilla.org/docs/Web/CSS/border-bottom-style
     */
    borderBottomStyle?: CSS.Property.BorderBottomStyle | string;
    /**
     * The **`border-right-style`** CSS property sets the line style of an element's right `border`.
     *
     * **Initial value**: `none`
     *
     * | Chrome | Firefox | Safari |  Edge  |   IE    |
     * | :----: | :-----: | :----: | :----: | :-----: |
     * | **1**  |  **1**  | **1**  | **12** | **5.5** |
     *
     * @see https://developer.mozilla.org/docs/Web/CSS/border-right-style
     */
    borderRightStyle?: CSS.Property.BorderRightStyle | string;
    /**
     * The **`border-left-style`** CSS property sets the line style of an element's left `border`.
     *
     * **Initial value**: `none`
     *
     * | Chrome | Firefox | Safari |  Edge  |   IE    |
     * | :----: | :-----: | :----: | :----: | :-----: |
     * | **1**  |  **1**  | **1**  | **12** | **5.5** |
     *
     * @see https://developer.mozilla.org/docs/Web/CSS/border-left-style
     */
    borderLeftStyle?: CSS.Property.BorderLeftStyle | string;
    /**
     * The **`border-radius`** CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.
     *
     * | Chrome  | Firefox | Safari  |  Edge  |  IE   |
     * | :-----: | :-----: | :-----: | :----: | :---: |
     * |  **4**  |  **4**  |  **5**  | **12** | **9** |
     * | 1 _-x-_ |         | 3 _-x-_ |        |       |
     *
     * @see https://developer.mozilla.org/docs/Web/CSS/border-radius
     */
    borderRadius?: CSS.Property.BorderRadius<string | number>;
    /**
     * The **`z-index`** CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.
     *
     * **Initial value**: `auto`
     *
     * | Chrome | Firefox | Safari |  Edge  |  IE   |
     * | :----: | :-----: | :----: | :----: | :---: |
     * | **1**  |  **1**  | **1**  | **12** | **4** |
     *
     * @see https://developer.mozilla.org/docs/Web/CSS/z-index
     */
    zIndex?: CSS.Property.ZIndex | string;
}
/**
 * Map of all available CSS properties (including aliases and overwrites)
 * and their raw value.
 */
export interface ThemeUIExtendedCSSProperties extends Omit<CSSProperties, keyof OverwriteCSSProperties>, AliasesCSSProperties, OverwriteCSSProperties {
}
type ThemeUIStyleValue<T> = ResponsiveStyleValue<T | ObjectWithDefault<T> | T[]>;
export type StylePropertyValue<T, TTheme extends Theme = Theme> = ThemeUIStyleValue<Exclude<T, undefined>> | ((theme: TTheme) => ThemeUIStyleValue<Exclude<T, undefined>> | undefined) | ThemeUIStyleObject<TTheme> | ThemeUIEmpty;
export type ThemeUICSSProperties = {
    [K in keyof ThemeUIExtendedCSSProperties]: StylePropertyValue<ThemeUIExtendedCSSProperties[K]>;
};
export interface VariantProperty {
    /**
     * **`Variants`** can be useful for applying complex styles to a component based on a single prop.
     *
     * @example
     * const theme = {
     *   buttons: {
     *     primary: {
     *       p: 3,
     *       fontWeight: 'bold',
     *       color: 'white',
     *       bg: 'primary',
     *       borderRadius: 2,
     *     },
     *   },
     * }
     * const result = css({
     *   variant: 'buttons.primary',
     * })(theme)
     *
     * @see https://styled-system.com/variants
     */
    variant?: string;
}
export interface ThemeDerivedStyles<TTheme = Theme> {
    (theme: TTheme): ThemeUICSSObject;
}
export interface Label {
    /**
     * String appended to generated class name.
     * @see https://emotion.sh/docs/labels
     *
     * You can style HTML <label> elements with `"& label": {}`.
     */
    label?: string;
}
export interface CSSOthersObject {
    [k: string]: StylePropertyValue<string | number>;
}
export interface ThemeUICSSObject extends ThemeUICSSProperties, CSSPseudoSelectorProps<Theme>, CSSOthersObject, VariantProperty, Label {
}
/**
 * The `ThemeUIStyleObject` extends [style props](https://emotion.sh/docs/object-styles)
 * such that properties that are part of the `Theme` will be transformed to
 * their corresponding values. Other valid CSS properties are also allowed.
 */
export type ThemeUIStyleObject<TTheme = Theme> = ThemeUICSSObject | ThemeDerivedStyles<TTheme>;
export type TLengthStyledSystem = string | 0 | number;
export interface ScaleDict<T> {
    [K: string]: T | T[] | NestedScaleDict<T> | undefined;
    [I: number]: T;
}
export interface ObjectWithDefault<T> {
    /**
     * Default value in nested scale.
     *
     * Given theme
     * ```
     * {
     *   colors: {
     *     primary: { __default: '#00f', light: '#33f' }
     *   }
     * }
     * ```
     * `sx={{ color: 'primary' }}` resolves to `color: #00f`.
     */
    __default?: T;
}
export interface NestedScaleDict<T> extends ScaleDict<T>, ObjectWithDefault<T> {
}
/**
 * An array or object (possibly nested) of related CSS properties
 * @see https://theme-ui.com/theme-spec#theme-scales
 */
export type Scale<T> = T[] | ScaleDict<T>;
export type NestedScale<T> = T[] | NestedScaleDict<T>;
export type ColorOrNestedColorScale = CSS.Property.Color | NestedScale<CSS.Property.Color>;
/**
 * Color modes can be used to create a user-configurable dark mode
 * or any number of other color modes.
 */
export interface ColorMode extends ScaleDict<CSS.Property.Color> {
    /**
     * Body background color
     */
    background?: ColorOrNestedColorScale;
    /**
     * Body foreground color
     */
    text?: ColorOrNestedColorScale;
    /**
     * Primary brand coloThr for links, buttons, etc.
     */
    primary?: ColorOrNestedColorScale;
    /**
     * A secondary brand color for alternative styling
     */
    secondary?: ColorOrNestedColorScale;
    /**
     * A contrast color for emphasizing UI
     */
    accent?: ColorOrNestedColorScale;
    /**
     * A background color for highlighting text
     */
    highlight?: ColorOrNestedColorScale;
    /**
     * A faint color for backgrounds, borders, and accents that do not require
     * high contrast with the background color
     */
    muted?: ColorOrNestedColorScale;
}
export type ColorModesScale = ColorMode & {
    /**
     * Nested color modes can provide overrides when used in conjunction with
     * `Theme.initialColorModeName` and `useColorMode()`
     */
    modes?: {
        [k: string]: ColorMode;
    };
};
export interface ThemeStyles<TTheme = Theme> {
    tr?: ThemeUIStyleObject<TTheme>;
    th?: ThemeUIStyleObject<TTheme>;
    td?: ThemeUIStyleObject<TTheme>;
    em?: ThemeUIStyleObject<TTheme>;
    strong?: ThemeUIStyleObject<TTheme>;
    div?: ThemeUIStyleObject<TTheme>;
    p?: ThemeUIStyleObject<TTheme>;
    b?: ThemeUIStyleObject<TTheme>;
    i?: ThemeUIStyleObject<TTheme>;
    a?: ThemeUIStyleObject<TTheme>;
    h1?: ThemeUIStyleObject<TTheme>;
    h2?: ThemeUIStyleObject<TTheme>;
    h3?: ThemeUIStyleObject<TTheme>;
    h4?: ThemeUIStyleObject<TTheme>;
    h5?: ThemeUIStyleObject<TTheme>;
    h6?: ThemeUIStyleObject<TTheme>;
    img?: ThemeUIStyleObject<TTheme>;
    pre?: ThemeUIStyleObject<TTheme>;
    code?: ThemeUIStyleObject<TTheme>;
    ol?: ThemeUIStyleObject<TTheme>;
    ul?: ThemeUIStyleObject<TTheme>;
    li?: ThemeUIStyleObject<TTheme>;
    blockquote?: ThemeUIStyleObject<TTheme>;
    hr?: ThemeUIStyleObject<TTheme>;
    table?: ThemeUIStyleObject<TTheme>;
    delete?: ThemeUIStyleObject<TTheme>;
    inlineCode?: ThemeUIStyleObject<TTheme>;
    thematicBreak?: ThemeUIStyleObject<TTheme>;
    root?: ThemeUIStyleObject<TTheme>;
    [key: string]: ThemeUIStyleObject<TTheme> | undefined;
}
export interface Theme<TTheme = {}> {
    breakpoints?: Array<string>;
    mediaQueries?: {
        [size: string]: string;
    };
    space?: Scale<CSS.Property.Margin<number | string>>;
    fontSizes?: Scale<CSS.Property.FontSize<number>>;
    fonts?: Scale<CSS.Property.FontFamily>;
    fontWeights?: Scale<CSS.Property.FontWeight>;
    lineHeights?: Scale<CSS.Property.LineHeight<TLengthStyledSystem>>;
    letterSpacings?: Scale<CSS.Property.LetterSpacing<TLengthStyledSystem>>;
    sizes?: Scale<CSS.Property.Height<{}> | CSS.Property.Width<{}>>;
    borders?: Scale<CSS.Property.Border<{}>>;
    borderStyles?: Scale<CSS.Property.Border<{}>>;
    borderWidths?: Scale<CSS.Property.BorderWidth<TLengthStyledSystem>>;
    radii?: Scale<CSS.Property.BorderRadius<TLengthStyledSystem>>;
    shadows?: Scale<CSS.Property.BoxShadow>;
    zIndices?: Scale<CSS.Property.ZIndex>;
    colorStyles?: Scale<ThemeUICSSProperties>;
    textStyles?: Scale<ThemeUICSSProperties>;
    opacities?: Scale<CSS.Property.Opacity>;
    transitions?: Scale<CSS.Property.Transition>;
    config?: ThemeUIConfig;
    /**
     * @deprecated Deprecated in favor of nesting inside `config`
     *
     * Enable/disable custom CSS properties/variables if lower browser
     * support is required (for eg. IE 11).
     *
     * References: https://theme-ui.com/color-modes/#turn-off-custom-properties
     */
    useCustomProperties?: boolean;
    /**
     * @deprecated Deprecated in favor of nesting inside `config`
     *
     * Provide a value here to enable color modes
     */
    initialColorModeName?: string;
    /**
     * @deprecated Deprecated in favor of nesting inside `config`
     *
     * Provide a value here to set a color mode for printing
     */
    printColorModeName?: string;
    /**
     * @deprecated Deprecated in favor of nesting inside `config`
     *
     * Adds styles defined in theme.styles.root to the <html> element along with color and background-color
     */
    useRootStyles?: boolean;
    /**
     * @deprecated Deprecated in favor of nesting inside `config`
     *
     * Initializes the color mode based on the prefers-color-scheme media query
     */
    useColorSchemeMediaQuery?: boolean;
    /**
     * @deprecated Deprecated in favor of nesting inside `config`
     *
     * Adds a global box-sizing: border-box style
     */
    useBorderBox?: boolean;
    /**
     * @deprecated Deprecated in favor of nesting inside `config`
     *
     * If false, does not save color mode as a localStorage value.
     */
    useLocalStorage?: boolean;
    /**
     * Define the colors that are available through this theme
     */
    colors?: ColorModesScale;
    /**
     * Colors are transformed into CSS custom properties.
     *
     * If you need to read their raw values to pass them somewhere where CSS
     * custom properties are not supported, use `rawColors`.
     *
     * Additionally, you can access all the color modes in this objects.
     */
    rawColors?: ColorModesScale;
    /**
     * Styles for elements rendered in MDX can be added to the theme.styles
     * object. This is the primary, low-level way to control typographic and
     * other styles in markdown content. Styles within this object are processed
     * with @styled-system/css and have access to base theme values like colors,
     * fonts, etc.
     */
    styles?: ThemeStyles;
    /**
     * You can define additional CSS grid layouts by adding variants to the
     * `theme.grids` object. These styles can be used to create a wide variety of
     * different reusable layouts.
     *
     * @see https://theme-ui.com/theme-spec#variants
     * @see https://theme-ui.com/components/variants
     * @see https://theme-ui.com/components/grid#variants
     */
    grids?: Record<string, ThemeUIStyleObject<TTheme>>;
    /**
     * Button variants can be defined in the `theme.buttons` object. The `Button`
     * component uses `theme.buttons.primary` as its default variant style.
     *
     * @see https://theme-ui.com/theme-spec#variants
     * @see https://theme-ui.com/components/variants
     * @see https://theme-ui.com/components/button#variants
     */
    buttons?: Record<string, ThemeUIStyleObject<TTheme>>;
    /**
     * Text style variants can be defined in the `theme.text` object. The `Text`
     * component uses `theme.text.default` as its default variant style.
     *
     * @see https://theme-ui.com/theme-spec#variants
     * @see https://theme-ui.com/components/variants
     * @see https://theme-ui.com/components/text#variants
     */
    text?: Record<string, ThemeUIStyleObject<TTheme>>;
    /**
     * Link variants can be defined in the `theme.links` object. By default the
     * `Link` component will use styles defined in `theme.styles.a`.
     *
     * @see https://theme-ui.com/theme-spec#variants
     * @see https://theme-ui.com/components/variants
     * @see https://theme-ui.com/components/link#variants
     */
    links?: Record<string, ThemeUIStyleObject<TTheme>>;
    /**
     * Image style variants can be defined in the `theme.images` object.
     *
     * @see https://theme-ui.com/theme-spec#variants
     * @see https://theme-ui.com/components/variants
     * @see https://theme-ui.com/components/image#variants
     */
    images?: Record<string, ThemeUIStyleObject<TTheme>>;
    /**
     * Card style variants can be defined in `the theme.cards` object. By default
     * the `Card` component uses the `theme.cards.primary` variant.
     *
     * @see https://theme-ui.com/theme-spec#variants
     * @see https://theme-ui.com/components/variants
     * @see https://theme-ui.com/components/card#variants
     */
    cards?: Record<string, ThemeUIStyleObject<TTheme>>;
    /**
     * Container variants can be defined in the `theme.layout` object. The
     * `Container` component uses `theme.layout.container` as its default variant
     * style.
     *
     * @see https://theme-ui.com/theme-spec#variants
     * @see https://theme-ui.com/components/variants
     * @see https://theme-ui.com/components/container#variants
     */
    layout?: Record<string, ThemeUIStyleObject<TTheme>>;
    /**
     * Label variants can be defined in `theme.forms` and the component uses the
     * `theme.forms.label` variant by default.
     *
     * Input variants can be defined in `theme.forms` and the component uses the
     * `theme.forms.input` variant by default.
     *
     * Select variants can be defined in `theme.forms` and the component uses the
     * `theme.forms.select` variant by default.
     *
     * Textarea variants can be defined in `theme.forms` and the component uses
     * the `theme.forms.textarea` variant by default.
     *
     * Radio variants can be defined in `theme.forms` and the component uses the
     * `theme.forms.radio` variant by default.
     *
     * Checkbox variants can be defined in `theme.forms` and the component uses
     * the `theme.forms.checkbox` variant by default.
     *
     * Slider variants can be defined in the `theme.forms` object. The `Slider`
     * component uses `theme.forms.slider` as its default variant style.
     *
     * @see https://theme-ui.com/theme-spec#variants
     * @see https://theme-ui.com/components/variants
     * @see https://theme-ui.com/components/label#variants
     * @see https://theme-ui.com/components/input#variants
     * @see https://theme-ui.com/components/select#variants
     * @see https://theme-ui.com/components/textarea#variants
     * @see https://theme-ui.com/components/radio#variants
     * @see https://theme-ui.com/components/checkbox#variants
     * @see https://theme-ui.com/components/slider#variants
     */
    forms?: Record<string, ThemeUIStyleObject<TTheme>>;
    /**
     * Badge variants can be defined in `theme.badges`. The `Badge` component uses
     * `theme.badges.primary` as its default variant.
     *
     * @see https://theme-ui.com/theme-spec#variants
     * @see https://theme-ui.com/components/variants
     * @see https://theme-ui.com/components/badge#variants
     */
    badges?: Record<string, ThemeUIStyleObject<TTheme>>;
    /**
     * Alert variants can be defined in `theme.alerts`. The `Alert` component uses
     * `theme.alerts.primary` as its default variant.
     *
     * @see https://theme-ui.com/theme-spec#variants
     * @see https://theme-ui.com/components/variants
     * @see https://theme-ui.com/components/alert#variants
     */
    alerts?: Record<string, ThemeUIStyleObject<TTheme>>;
    /**
     * Message variants can be defined in the `theme.messages` object.
     *
     * @see https://theme-ui.com/theme-spec#variants
     * @see https://theme-ui.com/components/variants
     * @see https://theme-ui.com/components/message#variants
     */
    messages?: Record<string, ThemeUIStyleObject<TTheme>>;
}