42 lines
907 B
JavaScript
42 lines
907 B
JavaScript
// @flow
|
|
|
|
import theme from 'styled-theming';
|
|
|
|
import { DARK, LIGHT } from '../constants/themes';
|
|
import { typography } from './typography';
|
|
import { DARK_COLORS, LIGHT_COLORS } from './colors';
|
|
|
|
// Building color object from theme keys
|
|
// All themes must have the same variables as DARK_COLORS
|
|
const colorKeys = Object.keys(DARK_COLORS);
|
|
|
|
const colors: Object = {};
|
|
colorKeys.forEach((key: string) => {
|
|
colors[key] = theme('mode', {
|
|
[LIGHT]: LIGHT_COLORS[key],
|
|
[DARK]: DARK_COLORS[key],
|
|
});
|
|
});
|
|
|
|
export const appTheme: AppTheme = {
|
|
// General
|
|
mode: DARK,
|
|
|
|
// Typography
|
|
...typography,
|
|
|
|
// Sizes & Spacing
|
|
sidebarWidth: '180px',
|
|
headerHeight: '60px',
|
|
layoutPaddingLeft: '35px',
|
|
layoutPaddingRight: '35px',
|
|
layoutContentPaddingTop: '20px',
|
|
boxBorderRadius: '3px',
|
|
|
|
// Misc
|
|
transitionEase: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
|
|
|
|
// Colors
|
|
colors: { ...colors },
|
|
};
|