Rebass Emotion with Theming support

emotion.d.ts

declare module 'rebass/emotion' {
  import * as Rebass from 'rebass';
  import { ComponentClass } from 'react';
  import { ThemeProviderProps } from 'emotion-theming';

  // Styled System Types
  export type NumberOrString = Rebass.NumberOrString;
  export type Responsive = Rebass.Responsive;

  export interface Space extends Rebass.Space {}

  export interface Width extends Rebass.Width {}

  export interface FontSize extends Rebass.FontSize {}

  export interface TextColor extends Rebass.TextColor {}

  export interface BackgroundColor extends Rebass.BackgroundColor {}

  export type Color = TextColor & BackgroundColor;

  export interface FontFamily extends Rebass.FontFamily {}
  export interface TextAlign extends Rebass.TextAlign {}
  export interface LineHeight extends Rebass.LineHeight {}

  export interface FontWeight extends Rebass.FontWeight {}

  export interface LetterSpacing extends Rebass.LetterSpacing {}

  // Layout
  export interface Display extends Rebass.Display {}

  export interface MaxWidth extends Rebass.MaxWidth {}

  export interface MinWidth extends Rebass.MinWidth {}

  export interface Height extends Rebass.Height {}

  export interface MaxHeight extends Rebass.MaxHeight {}

  export interface MinHeight extends Rebass.MinHeight {}

  export interface SizeWidth extends Rebass.SizeWidth {}

  export interface SizeHeight extends Rebass.SizeHeight {}

  export type Size = SizeWidth & SizeHeight;

  export interface Ratio extends Rebass.Ratio {}

  // Flexbox
  export interface AlignItems extends Rebass.AlignItems {}
  export interface AlignContent extends Rebass.AlignContent {}

  export interface JustifyContent extends Rebass.JustifyContent {}

  export interface FlexWrap extends Rebass.FlexWrap {}
  export interface FlexBasis extends Rebass.FlexBasis {}

  export interface FlexDirection extends Rebass.FlexDirection {}

  export interface Flex extends Rebass.Flex {}

  export interface JustifySelf extends Rebass.JustifySelf {}

  export interface AlignSelf extends Rebass.AlignSelf {}

  export interface Order extends Rebass.Order {}

  // Grid
  export interface GridGap extends Rebass.GridGap {}

  export interface GridColumnGap extends Rebass.GridColumnGap {}

  export interface GridRowGap extends Rebass.GridRowGap {}

  export interface GridColumn extends Rebass.GridColumn {}

  export interface GridRow extends Rebass.GridRow {}

  export interface GridAutoFlow extends Rebass.GridAutoFlow {}

  export interface GridAutoColumns extends Rebass.GridAutoColumns {}

  export interface GridAutoRows extends Rebass.GridAutoRows {}

  export interface GridTemplateColumns extends Rebass.GridTemplateColumns {}

  export interface GridTemplateRows extends Rebass.GridTemplateRows {}

  // Borders
  export interface Border extends Rebass.Border {}

  export interface BorderTop extends Rebass.BorderTop {}

  export interface BorderRight extends Rebass.BorderRight {}

  export interface BorderBottom extends Rebass.BorderBottom {}

  export interface BorderLeft extends Rebass.BorderLeft {}

  export type Borders = Rebass.Borders;

  export interface BorderColor extends Rebass.BorderColor {}

  export interface BorderRadius extends Rebass.BorderRadius {}

  export interface BoxShadow extends Rebass.BoxShadow {}

  // Backgrounds
  export interface Background extends Rebass.Background {}

  export interface BackgroundImage extends Rebass.BackgroundImage {}
  export interface BackgroundSize extends Rebass.BackgroundSize {}
  export interface BackgroundPosition extends Rebass.BackgroundPosition {}
  export interface BackgroundRepeat extends Rebass.BackgroundRepeat {}
  // Position
  export interface Position extends Rebass.Position {}

  export interface zIndex extends Rebass.zIndex {}

  export interface Top extends Rebass.Top {}

  export interface Right extends Rebass.Right {}

  export interface Bottom extends Rebass.Bottom {}

  export interface Left extends Rebass.Left {}

  export interface Pseudo extends Rebass.Pseudo {}

  export interface Focus extends Rebass.Focus {}

  export interface Active extends Rebass.Active {}

  export interface Disabled extends Rebass.Disabled {}

  export interface TextStyle extends Rebass.TextStyle {}

  export interface ColorStyle extends Rebass.ColorStyle {}

  export interface ButtonStyle extends Rebass.ButtonStyle {}

  export interface BorderWidth extends Rebass.BorderWidth {}

  export interface Theme extends Rebass.Theme {}

  export const Flex = Rebass.Flex;

  export const Box = Rebass.Box;

  export const Base = Rebass.Base;

  export const CSS = Rebass.CSS;

  export const Root = Rebass.Root;

  export const Provider = Rebass.Provider;

  export const Button = Rebass.Button;
  export const ButtonCircle = Rebass.ButtonCircle;
  export const ButtonOutline = Rebass.ButtonOutline;
  export const ButtonTransparent = Rebass.ButtonTransparent;

  export const Link = Rebass.Link;

  export const NavLink = Rebass.NavLink;

  export const BlockLink = Rebass.BlockLink;

  export const Close = Rebass.Close;
  export interface TextProps extends Rebass.TextProps {}

  export const Text = Rebass.Text;
  export const Heading = Rebass.Heading;
  export const Subhead = Rebass.Subhead;
  export const Small = Rebass.Small;
  export const Lead = Rebass.Lead;
  export const Truncate = Rebass.Truncate;

  export const Caps = Rebass.Caps;

  export const Blockquote = Rebass.Blockquote;

  export const Divider = Rebass.Divider;

  export const Pre = Rebass.Pre;

  export const Code = Rebass.Code;

  export const Samp = Rebass.Samp;

  export const Measure = Rebass.Measure;

  export const Label = Rebass.Label;

  export const Input = Rebass.Input;

  export const Select = Rebass.Select;

  export const Textarea = Rebass.Textarea;

  export const Radio = Rebass.Radio;

  export const Checkbox = Rebass.Checkbox;

  export const Slider = Rebass.Slider;

  export const Switch = Rebass.Switch;

  export const Image = Rebass.Image;

  export const BackgroundImage = Rebass.BackgroundImage;

  export const Avatar = Rebass.Avatar;

  export const Embed = Rebass.Embed;

  export const Container = Rebass.Container;

  export const Group = Rebass.Group;

  export const Row = Rebass.Row;

  export const Column = Rebass.Column;

  export const Border = Rebass.Border;

  export const Card = Rebass.Card;

  export const Panel = Rebass.Panel;

  export const Progress = Rebass.Progress;

  export const Banner = Rebass.Banner;

  export const Message = Rebass.Message;

  export const Toolbar = Rebass.Toolbar;

  export const Tabs = Rebass.Tabs;

  export const Tab = Rebass.Tab;

  export const Badge = Rebass.Badge;

  export const Circle = Rebass.Circle;

  export const Dot = Rebass.Dot;

  export const Arrow = Rebass.Arrow;

  export const Donut = Rebass.Donut;

  export const Position = Rebass.Position;

  export const Relative = Rebass.Relative;

  export const Absolute = Rebass.Absolute;

  export const Fixed = Rebass.Fixed;

  export const Sticky = Rebass.Sticky;

  export const Modal = Rebass.Modal;

  export const Overlay = Rebass.Overlay;

  export const Drawer = Rebass.Drawer;

  export const Carousel = Rebass.Carousel;

  export const Tooltip = Rebass.Tooltip;

  // Extended ThemeProviderClass

  type ThemeProviderClass<Theme> = ComponentClass<ThemeProviderProps<Theme>>;
  export const Provider: ThemeProviderClass;
}

index.d.ts

declare module 'rebass' {
  import * as React from 'react';

  // Styled System Types
  export type NumberOrString = number | string | null;
  export type Responsive = NumberOrString | NumberOrString[];

  // i think all of these should extend the basic HTML Element interface, but
  // not sure how to do that yet so will just include props i use
  interface UniversalProps {
    style?: React.CSSProperties;
    className?: string;
    id?: string;
  }

  export interface Space {
    m?: Responsive;
    mt?: Responsive;
    mr?: Responsive;
    mb?: Responsive;
    ml?: Responsive;
    mx?: Responsive;
    my?: Responsive;
    p?: Responsive;
    pt?: Responsive;
    pr?: Responsive;
    pb?: Responsive;
    pl?: Responsive;
    px?: Responsive;
    py?: Responsive;
  }

  export interface Width {
    width?: Responsive;
    w?: Responsive;
  }

  export interface FontSize {
    fontSize?: Responsive;
    // f?: Responsive; i don't think this is supported anymore in 2.0
  }

  export interface TextColor {
    color?: Responsive;
  }

  export interface BackgroundColor {
    bg?: Responsive;
  }

  export type Color = TextColor & BackgroundColor;

  export interface FontFamily {
    fontFamily?: string;
    font?: string;
  }

  export interface TextAlign {
    textAlign?: Responsive;
    align?: Responsive;
  }

  export interface LineHeight {
    lineHeight?: NumberOrString;
  }

  export interface FontWeight {
    fontWeight?: NumberOrString;
  }

  export interface LetterSpacing {
    letterSpacing: NumberOrString;
  }

  // Layout
  export interface Display {
    display?: Responsive;
  }

  export interface MaxWidth {
    maxWidth?: Responsive;
  }

  export interface MinWidth {
    minWidth?: Responsive;
  }

  export interface Height {
    height?: Responsive;
  }

  export interface MaxHeight {
    maxHeight?: Responsive;
  }

  export interface MinHeight {
    minHeight?: Responsive;
  }

  export interface SizeWidth {
    size?: Responsive;
  }

  export interface SizeHeight {
    size?: Responsive;
  }

  export type Size = SizeWidth & SizeHeight;

  export interface Ratio {
    ratio?: NumberOrString;
  }

  // Flexbox
  export interface AlignItems {
    alignItems?: Responsive;
    align?: Responsive;
  }

  export interface AlignContent {
    alignContent?: Responsive;
  }

  export interface JustifyContent {
    justifyContent?: Responsive;
  }

  export interface FlexWrap {
    flexWrap?: Responsive;
    wrap?: Responsive;
  }

  export interface FlexBasis {
    flexBasis?: Responsive;
  }

  export interface FlexDirection {
    flexDirection?: Responsive;
  }

  export interface Flex {
    flex?: Responsive;
  }

  export interface JustifySelf {
    justifySelf?: Responsive;
  }

  export interface AlignSelf {
    alignSelf?: Responsive;
  }

  export interface Order {
    order?: Responsive;
  }

  // Grid
  export interface GridGap {
    gridGap?: Responsive;
  }

  export interface GridColumnGap {
    gridColumnGap?: Responsive;
  }

  export interface GridRowGap {
    gridRowGap?: Responsive;
  }

  export interface GridColumn {
    gridColumn?: Responsive;
  }

  export interface GridRow {
    gridRow?: Responsive;
  }

  export interface GridAutoFlow {
    gridAutoFlow?: NumberOrString;
  }

  export interface GridAutoColumns {
    gridAutoColumns?: NumberOrString;
  }

  export interface GridAutoRows {
    gridAutoRows?: NumberOrString;
  }

  export interface GridTemplateColumns {
    gridTemplateColumns?: Responsive;
  }

  export interface GridTemplateRows {
    gridTemplateRows?: Responsive;
  }

  // Borders
  export interface Border {
    border?: Responsive;
  }

  export interface BorderTop {
    borderTop?: Responsive;
  }

  export interface BorderRight {
    borderRight?: Responsive;
  }

  export interface BorderBottom {
    borderBottom?: Responsive;
  }

  export interface BorderLeft {
    borderLeft?: Responsive;
  }

  export type Borders = Border &
    BorderTop &
    BorderRight &
    BorderBottom &
    BorderLeft;

  export interface BorderColor {
    borderColor?: NumberOrString;
  }

  export interface BorderRadius {
    borderRadius?: NumberOrString;
  }

  export interface BoxShadow {
    boxShadow?: NumberOrString;
  }

  // Backgrounds
  export interface Background {
    background?: NumberOrString;
  }

  export interface BackgroundImage {
    backgroundImage?: NumberOrString;
    bgImage?: NumberOrString;
  }

  export interface BackgroundSize {
    backgroundSize?: NumberOrString;
    bgSize?: NumberOrString;
  }

  export interface BackgroundPosition {
    backgroundPosition?: NumberOrString;
    bgPosition?: NumberOrString;
  }

  export interface BackgroundRepeat {
    backgroundRepeat?: NumberOrString;
    bgRepeat?: NumberOrString;
  }

  // Position
  export interface Position {
    position?: Responsive;
  }

  export interface zIndex {
    zIndex?: NumberOrString;
  }

  export interface Top {
    top?: Responsive;
  }

  export interface Right {
    right?: Responsive;
  }

  export interface Bottom {
    bottom?: Responsive;
  }

  export interface Left {
    left?: Responsive;
  }

  export interface Pseudo {
    hover?: Color & BorderColor & BoxShadow;
  }

  export interface Focus {
    focus?: Color & BorderColor & BoxShadow;
  }

  export interface Active {
    active?: Color & BorderColor & BoxShadow;
  }

  export interface Disabled {
    disabled?: Color & BorderColor & BoxShadow;
  }

  export interface TextStyle {
    textStyle?: string;
  }

  export interface ColorStyle {
    colorStyle?: string;
  }

  export interface ButtonStyle {
    buttonStyle?: string;
  }

  export interface BorderWidth {
    borderWidth: NumberOrString;
  }

  // TODaO
  interface FlexProps
    extends FlexWrap,
      FlexDirection,
      AlignItems,
      Space,
      Color,
      Width,
      UniversalProps,
      JustifyContent {}
  type FlexClass = React.StatelessComponent<FlexProps>;
  export const Flex: FlexClass;

  interface BoxProps extends Width, Space, Color, UniversalProps, Flex, Order {}
  type BoxClass = React.StatelessComponent<BoxProps>;
  export const Box: BoxClass;

  export interface Theme {
    breakpoints?: Responsive;
    space?: Responsive;
    fonts?: {
      sans?: string;
      mono?: string;
    };
    fontSizes?: Responsive;
    weights?: {
      normal?: NumberOrString;
      bold?: NumberOrString;
    };
    colors?: {
      [name: string]: string;
    };
    radii?: Responsive;
  }

  interface BaseProps extends UniversalProps, Space, Color, FontSize {}
  type BaseClass = React.StatelessComponent<BaseProps>;
  export const Base: BaseClass;

  interface CSSProps {
    css: string;
  }
  type CSSClass = React.StatelessComponent<CSSProps>;
  export const CSS: CSSClass;

  interface RootProps extends UniversalProps, FontFamily, Space, Color {}
  type RootClass = React.StatelessComponent<RootProps>;
  export const Root: RootClass;

  interface ProviderProps {
    theme: Theme;
  }
  type ProviderClass = React.StatelessComponent<ProviderProps>;
  export const Provider: ProviderClass;

  interface ButtonProps
    extends FontSize,
      FontWeight,
      LineHeight,
      Space,
      Color,
      BorderRadius,
      UniversalProps,
      Border {
    onClick?: () => void;
    disabled?: boolean;
  }
  type ButtonClass = React.StatelessComponent<ButtonProps>;
  export const Button: ButtonClass;
  export const ButtonCircle: ButtonClass;
  export const ButtonOutline: ButtonClass;
  export const ButtonTransparent: ButtonClass;

  interface LinkProps extends Color, Space {
    href?: string;
  }
  type LinkClass = React.StatelessComponent<LinkProps>;
  export const Link: LinkClass;

  interface NavLinkProps extends Color, FontSize, FontWeight, Space, Width {}
  type NavLinkClass = React.StatelessComponent<NavLinkProps>;
  export const NavLink: NavLinkClass;

  interface BlockLinkProps extends ButtonProps, LineHeight {
    children?: React.ReactNode;
  }
  type BlockLinkClass = React.StatelessComponent<BlockLinkProps>;
  export const BlockLink: BlockLinkClass;

  export const Close: ButtonClass;

  export interface TextProps
    extends Space,
      Color,
      FontSize,
      FontWeight,
      TextAlign,
      UniversalProps,
      LineHeight {}
  type TextClass = React.StatelessComponent<TextProps>;
  export const Text: TextClass;
  export const Heading: TextClass;
  export const Subhead: TextClass;
  export const Small: TextClass;
  export const Lead: TextClass;
  export const Truncate: TextClass;

  type CapsClass = React.StatelessComponent<TextProps & LetterSpacing>;
  export const Caps: CapsClass;

  type BlockquoteClass = React.StatelessComponent<TextProps>;
  export const Blockquote: BlockquoteClass;

  interface DividerProps
    extends Space,
      Border,
      BorderBottom,
      UniversalProps,
      BorderColor,
      Color {}
  type DividerClass = React.StatelessComponent<DividerProps>;
  export const Divider: DividerClass;

  interface PreProps extends FontSize, FontFamily, Space, Color {}
  type PreClass = React.StatelessComponent<PreProps>;
  export const Pre: PreClass;

  interface CodeProps extends FontSize, FontFamily, Space, Color {}
  type CodeClass = React.StatelessComponent<PreProps>;
  export const Code: CodeClass;

  export const Samp: CodeClass;

  interface MeasureProps extends TextProps, MaxWidth {}
  type MeasureClass = React.StatelessComponent<MeasureProps>;
  export const Measure: MeasureClass;

  interface LabelProps
    extends FontSize,
      Space,
      UniversalProps,
      AlignItems,
      Color {}
  type LabelClass = React.StatelessComponent<LabelProps>;
  export const Label: LabelClass;

  interface InputProps
    extends FontSize,
      LineHeight,
      Space,
      Width,
      Border,
      BorderColor,
      BoxShadow,
      BorderRadius,
      Color,
      BackgroundColor {}
  type InputClass = React.StatelessComponent<InputProps>;
  export const Input: InputClass;

  interface SelectProps
    extends Space,
      Width,
      Border,
      BorderColor,
      BoxShadow,
      BorderRadius,
      Color,
      BackgroundColor {}
  type SelectClass = React.StatelessComponent<SelectProps>;
  export const Select: SelectClass;

  interface TextareaProps
    extends Space,
      Width,
      FontSize,
      Color,
      Border,
      BorderColor,
      BoxShadow,
      BorderRadius {}
  type TextareaClass = React.StatelessComponent<TextareaProps>;
  export const Textarea: TextareaClass;

  interface RadioProps extends Space, Color {}
  type RadioClass = React.StatelessComponent<RadioProps>;
  export const Radio: RadioClass;

  interface CheckboxProps extends Space, Color {}
  type CheckboxClass = React.StatelessComponent<CheckboxProps>;
  export const Checkbox: CheckboxClass;

  interface SliderProps extends Width, Space, Color, BorderRadius {}
  type SliderClass = React.StatelessComponent<SliderProps>;
  export const Slider: SliderClass;

  interface SwitchProps extends Color, BorderRadius, Space {}
  type SwitchClass = React.StatelessComponent<SwitchProps>;
  export const Switch: SwitchClass;

  interface ImageProps
    extends Display,
      MaxWidth,
      Height,
      Space,
      UniversalProps,
      Width,
      Color {
    src: string;
    alt?: string; // really this should be required for accessibility, but that's more of a linting issue than a type checker concern
  }
  type ImageClass = React.StatelessComponent<ImageProps>;
  export const Image: ImageClass;

  interface BGImage {
    image?: string;
    src?: string;
  }
  interface BackgroundImageProps
    extends Width,
      Ratio,
      BackgroundSize,
      BackgroundPosition,
      Space,
      Color,
      BGImage {}
  type BackgroundImageClass = React.StatelessComponent<BackgroundImageProps>;
  export const BackgroundImage: BackgroundImageClass;

  interface AvatarProps extends Size, BorderRadius, Space, Color {}
  type AvatarClass = React.StatelessComponent<AvatarProps>;
  export const Avatar: AvatarClass;

  interface EmbedProps extends Ratio, Space, Color {}
  type EmbedClass = React.StatelessComponent<EmbedProps>;
  export const Embed: EmbedClass;

  interface ContainerProps extends BoxProps, Space, MaxWidth {}
  type ContainerClass = React.StatelessComponent<ContainerProps>;
  export const Container: ContainerClass;

  interface GroupProps extends FlexProps {}
  type GroupClass = React.StatelessComponent<GroupProps>;
  export const Group: GroupClass;

  interface RowProps extends Space {}
  type RowClass = React.StatelessComponent<RowProps>;
  export const Row: RowClass;

  interface ColumnProps extends Space, Flex {}
  type ColumnClass = React.StatelessComponent<ColumnProps>;
  export const Column: ColumnClass;

  interface BorderProps
    extends Border,
      BorderColor,
      UniversalProps,
      Space,
      Width,
      Color {}
  type BorderClass = React.StatelessComponent<BorderProps>;
  export const Border: BorderClass;

  interface CardProps
    extends Space,
      Color,
      UniversalProps,
      BorderRadius,
      BoxShadow {}
  type CardClass = React.StatelessComponent<CardProps>;
  export const Card: CardClass;

  interface PanelProps
    extends BackgroundColor,
      BorderRadius,
      Border,
      BorderColor,
      Space {}
  type PanelClass = React.StatelessComponent<PanelProps>;
  export const Panel: PanelClass;

  interface ProgressProps extends Width, Space, Color, BorderRadius {}
  type ProgressClass = React.StatelessComponent<ProgressProps>;
  export const Progress: ProgressClass;

  interface BannerProps
    extends FlexProps,
      Space,
      FlexDirection,
      AlignItems,
      JustifyContent,
      BackgroundSize,
      BackgroundImage,
      BackgroundPosition,
      MinHeight,
      Color {}
  type BannerClass = React.StatelessComponent<BannerProps>;
  export const Banner: BannerClass;

  interface MessageProps
    extends FlexProps,
      Space,
      FontWeight,
      Color,
      AlignItems,
      MinHeight {}
  type MessageClass = React.StatelessComponent<MessageProps>;

  export const Message: MessageClass;

  interface ToolbarProps extends Space, Color, AlignItems, MinHeight {}
  type ToolbarClass = React.StatelessComponent<ToolbarProps>;
  export const Toolbar: ToolbarClass;

  interface TabsProps extends FlexProps, BorderBottom, BorderColor {}
  type TabsClass = React.StatelessComponent<TabsProps>;
  export const Tabs: TabsClass;

  interface TabProps
    extends FontSize,
      FontWeight,
      Space,
      Color,
      BorderBottom,
      BorderColor {}
  type TabClass = React.StatelessComponent<TabProps>;
  export const Tab: TabClass;

  interface BadgeProps
    extends FontSize,
      Space,
      Color,
      FontWeight,
      BorderRadius {}
  type BadgeClass = React.StatelessComponent<BadgeProps>;
  export const Badge: BadgeClass;

  interface CircleProps
    extends Size,
      AlignItems,
      BorderRadius,
      TextAlign,
      Size {}
  type CircleClass = React.StatelessComponent<CircleProps>;
  export const Circle: CircleClass;

  interface DotProps
    extends Space,
      Size,
      Color,
      BorderRadius,
      Border,
      BorderColor {}
  type DotClass = React.StatelessComponent<DotProps>;
  export const Dot: DotClass;

  interface ArrowProps extends Space, Color {
    direction?: 'up' | 'down';
  }
  type ArrowClass = React.StatelessComponent<ArrowProps>;
  export const Arrow: ArrowClass;

  interface DonutProps extends Color, Space {
    strokeWidth?: number;
    size?: number;
    value?: any;
  }
  type DonutClass = React.StatelessComponent<DonutProps>;
  export const Donut: DonutClass;

  interface PositionProps
    extends Space,
      Color,
      zIndex,
      Top,
      Right,
      Bottom,
      UniversalProps,
      Left {}
  type PositionClass = React.StatelessComponent<PositionProps>;
  export const Position: PositionClass;

  export const Relative: PositionClass;
  export const Absolute: PositionClass;
  export const Fixed: PositionClass;
  export const Sticky: PositionClass;

  interface ModalProps
    extends PositionClass,
      BorderRadius,
      MaxWidth,
      MaxHeight {}
  type ModalClass = React.StatelessComponent<ModalProps>;
  export const Modal: ModalClass;
  export const Overlay: ModalClass;

  interface DrawerProps extends Position, Space, UniversalProps, Color, zIndex {
    open?: boolean;
    position?: 'top' | 'right' | 'bottom' | 'left';
    size?: number;
  }
  type DrawerClass = React.StatelessComponent<DrawerProps>;
  export const Drawer: DrawerClass;

  interface CarouselProps extends FlexProps, Width, Space, Color {
    index?: number;
  }
  type CarouselClass = React.StatelessComponent<CarouselProps>;
  export const Carousel: CarouselClass;

  interface TooltipProps extends Color {
    text?: string;
  }
  type TooltipClass = React.StatelessComponent<TooltipProps>;
  export const Tooltip: TooltipClass;
}

styledTheme.ts

import * as emotionTheming from 'emotion-theming';
import styled, { CreateStyled } from 'react-emotion';
import { EmotionThemingModule, ThemeProviderComponent } from 'emotion-theming';
import { Provider } from 'rebass/emotion';

import { Theme } from './theme';

const { withTheme: withEmotionTheme } = emotionTheming as EmotionThemingModule<
  Theme
>;

export const ThemeProvider: ThemeProviderComponent<Theme> = Provider;
export const withTheme = withEmotionTheme;

export default styled as CreateStyled<Theme>;

theme.ts

import { Theme as RebassTheme } from 'rebass';

export interface Theme extends RebassTheme {
  colors?: Colors;
  shadows?: string[];
}

// This currently doesn't have RebassColors interface, but could be used
// to extend Rebass base theming.
export interface Colors {
  [name: string]: string;

  primary: string;
  primaryLighten: string;
  danger: string;
  warning: string;
  positive: string;
  positiveDarken: string;
  positiveLighten: string;
}

export const colors = {
  black: '#000',
  white: '#fff',
  darken: 'rgba(0, 0, 0, 0.25)',
  lightGray: '#f4f4f4',
  gray: '#eee',
  blue: '#0067ee',
  indigo: '#1000ee',
  violet: '#8700ee',
  fuchsia: '#ee00de',
  pink: '#ee0067',
  red: '#ee1000',
  orange: '#ee8700',
  yellow: '#deee00',
  lime: '#67ee00',
  green: '#00ee10',
  teal: '#00ee87',
  cyan: '#00deee',

  primary: '#0ea3c3',
  primaryLighten: '#1fb4d4',
  danger: '#e95151',
  warning: '#f5a523',
  positive: '#53ca30',
  get positiveDarken() {
    return shade(50, this.positive);
  },
  positiveLighten: '#d1ebc8',
};

export const shadows = [
  'none',
  `inset 0 0 0 1px ${colors.gray}`,
  `inset 0 0 0 1px ${colors.gray}, 0 0 4px ${colors.gray}`,
];

To use the above typings, first copy them into the following places:

src/
  typings/
    rebass/
      index.d.ts
      emotion.d.ts

Where typings folder is your custom typings, that you can setup typeRoots in tsconfig.json:

{
  "typeRoots": [
    "./node_modules/@types",
    "./src/typings"
  ],
}

To setup theming support, simply create a theme.ts file in the root of your React app:

import { Theme as RebassTheme } from 'rebass';

export interface Theme extends RebassTheme {}

You can extend the RebassTheme interface to define your custom theme properties. These will provide autocompletion for props within styled components:

export interface Theme extends RebassTheme {
  shadows?: string[];
}

export const shadows = [
  'none',
  `inset 0 0 0 1px ${colors.gray}`,
  `inset 0 0 0 1px ${colors.gray}, 0 0 4px ${colors.gray}`,
];

Note: You'll need to define your properties as optional for now. This may change in the future.

You can use theming by importing the styled theme:

import styled from './styledTheme';

export default styled.div`
  padding: ${props => props.theme.spacing![0]}px;
  box-shadow: ${props => props.theme.shadows![1]}
`;

This allows props to autocomplete theme properties.

I case you don't want to keep the interface and implementation separate, you can use TypeScript's typeof keyword to extend your theme.

Create a default-theme.ts file, where you export your theme properties.

export const colors = {
  primary: '#c0ffee',
  secondary: '#bada55'
};

export const spacing = [0, 8, 16, 24, 32, 48, 64];

Then import it in theme.ts, like so:

import { Theme as RebassTheme } from 'rebass';
import * as defaultTheme from './default-theme.ts';

export type Theme = RebassTheme & typeof defaultTheme;

This way the Theme type will always stay consistent with your properties.