// tslint:disable no-empty-interface interface-name max-union-size
import * as SC from '@emotion/styled/macro';
import * as CSS from 'csstype';
import * as Dayzed from 'dayzed';
import * as H from 'history';
import * as PopperJS from 'popper.js';
import * as React from 'react';
import * as ReactModal from 'react-modal';
import * as SS from 'styled-system';

declare module 'roo-ui' {
  export interface KeyValue<Value> {
    [key: string]: Value;
  }

  export interface NestedKeyValue<Value> {
    [key: string]: Value | NestedKeyValue<Value>;
  }

  export const ThemeProvider: SC.ThemeProviderComponent<any>;

  export const theme: Theme;

  export interface Theme {
    borders: string[];
    breakpoints: string[];
    fontFamily: string;
    fontSizes: KeyValue<string>;
    fontWeights: KeyValue<number>;
    gutters: KeyValue<number>;
    letterSpacings: KeyValue<string>;
    lineHeights: KeyValue<number>;
    maxWidths: KeyValue<string>;
    mediaCounter: KeyValue<{
      color: string;
      backgroundColor: string;
      opacity: number;
      textTransform: string;
      letterSpacing: string;
    }>;
    mediaQueries: string[];
    opacity: KeyValue<number>;
    radii: KeyValue<string>;
    shadows: KeyValue<string>;
    space: string[];
    transitions: KeyValue<string>;
    icons: KeyValue<{ category: string; path: string } | Function>;
    alertStyles: KeyValue<{
      bg: string;
      icon?: {
        name: string;
        color: string;
      };
    }>;
    inputStyles: KeyValue<{
      borderColor: string;
    }>;
    buttons: KeyValue<{
      color: string;
      backgroundColor: string;
    }>;
    buttonGroup: KeyValue<{
      color: string;
      borderColor: string;
    }>;
    errorMessage: KeyValue<{
      backgroundColor: string;
    }>;
    colors: KeyValue<string> & {
      brand: KeyValue<string>;
      greys: KeyValue<string>;
      ui: KeyValue<string>;
    };
    textStyles: KeyValue<NestedKeyValue<string>>;
    dividers: KeyValue<{
      display?: string;
      verticalAlign?: string;
      width?: string;
      height: string;
      backgroundColor: string;
    }>;
    calendarDay: {
      selectedColor: string;
      highlightedColor: string;
      hoverColor: string;
    };
    radio: {
      checkedBorderColor: string;
      checkedColor: string;
    };
    tooltip: KeyValue<{
      color: string;
      backgroundColor: string;
    }>;
  }
}