@fluent-windows/core/es/styles/createTheme.js

React components that inspired by Microsoft's Fluent Design System.

import { deepMerge } from '../utils';
import createColor from './createColor';
import createTransition from './createTransition';
import createSize from './createSize';
import shadows from './createShadow';
import createSpace, { defaultSpace } from './createSpace';
import createBreakpoint, { defaultBreakpoints } from './createBreakpoint';
import createTypographies from './createTypography';

function createTheme(theme) {
  const {
    colors: colorsInput = {},
    sizes: sizesInput = {},
    transitions: transitionsInput = {},
    shadows: shadowsInput,
    space: spaceInput = defaultSpace,
    breakpoints: breakpointsInput = defaultBreakpoints,
    typographies: typographiesInput = {}
  } = theme;
  const colors = createColor(colorsInput);
  const transitions = createTransition(transitionsInput);
  const sizes = createSize(sizesInput);
  const space = createSpace(spaceInput);
  const breakpoints = createBreakpoint(breakpointsInput);
  const typographies = createTypographies(typographiesInput);
  return {
    shadows: shadowsInput || shadows,
    ...deepMerge(theme, {
      colors,
      sizes,
      transitions,
      space,
      breakpoints,
      typographies
    })
  };
}

export default createTheme;