Recommended css-in-js pattern

Button.tsx

// src/components/Button/Button.tsx
import React, { SFC } from "react";
import styles from '../styles';

export type Props = {
  buttonType: 'primary' | 'secondary'
  className?: string;
  style?: React.CSSProperties;
} & React.HTMLProps<HTMLButtonElement>;

export const Button: SFC<Props> ({ buttonType, className, style, ..props }) => {
  const buttonStyles = styles[buttonType];
  
  return (
    <button className={buttonStyles} {...props}  />
  );
};
  
Button.defaultProps: Props = {
  buttonType: 'primary'
}

colors.ts

// src/styles/theme/colors.ts
const red = '#B6174B';
const green = '#C3EB78';
const grey = '#ccc';

export const colors = {
  red,
  green,
  grey,
  error: red,
  success: green
};

index.ts

//  src/styles/theme/index.ts
export { typography } from './typography';
export { colors } from './colors';
export { metrics, marginBase, gridBase } from './metrics';
export { disabled } from './ui';

metrics.ts

// src/styles/theme/metrics.ts
export const gridBase = 12;
export const marginBase = 20;

export const metrics = {
  gridBase: `#{gridBase}px`,
  doubleGridBase: `#{gridBase * 2}px`,
  halfGridBase: `#{gridBase / 2}px`,
  marginBase: `#{marginBase}px`,
  doubleMargin: `#{marginBase * 2}px`,
  halfMargin: `#{marginBase / 2}px`
};

styles.ts

// src/components/Button/styles.ts
import { css } from 'emotion';
import { colors, metrics, typography, disabled } from '../../styles/theme'

const base = css`
  #{...typography.fontSizeNormal};
  padding: #{metrics.gridBase};
  background: #{colors.grey};
`;

export const styles = {
  primary: css`
    #{base};
    background: #{colors.success}
  `,
  secondary: css`
    #{base};
  `,
  disabled: css`
    #{base};
    #{disabled};
  `
};

typography.ts

// src/styles/theme/typography.ts
import { css, injectGlobal } from 'emotion';

const Regular = require('../fonts/Inter-UI-Regular.woff');
const RegularWoff2 = require('../fonts/Inter-UI-Regular.woff2');
const Medium = require('../fonts/Inter-UI-Medium.woff2');
const MediumWoff2 = require('../fonts/Inter-UI-Medium.woff2');

injectGlobal`
  @font-face {
    font-family: 'Inter UI';
    font-weight: normal;
    font-weight: 400;
    src: url('${RegularWoff2}') format('woff2'),
      url('${Regular}') format('woff');
  }
  @font-face {
    font-family: 'Inter UI';
    font-weight: 500;
    src: url('${MediumWoff2}') format('woff2'),
      url('${Medium}') format('woff');
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: 500;
  }
`;

export const typography = {
  fontWeightNormal: css`
    font-weight: 400;
  `,
  fontWeightBold: css`
    font-weight: 500;
  `,
  fontSizeSmall: css`
    font-size: 11px;
    line-height: 16px;
  `,
  fontSizeNormal: css`
    font-size: 13px;
  `,
  fontSizeBig: css`
    font-size: 15px;
    line-height: 24px;
  `,
  fontSizeBiggest: css`
    font-size: 19px;
    line-height: 24px;
  `,
};

ui.ts

// src/styles/theme/ui.ts
import { css } from 'emotion';
import { colors } from './colors';

export const disabled = css`
  pointer: none;
  opacity: 0.3;
  background: #{colors.grey};
`;