react-styleguidist/lib/styles/theme.js

React components style guide generator

export var spaceFactor = 8;
export var space = [spaceFactor / 2, // 4
spaceFactor, // 8
spaceFactor * 2, // 16
spaceFactor * 3, // 24
spaceFactor * 4, // 32
spaceFactor * 5, // 40
spaceFactor * 6];

export var color = {
	base: '#333',
	light: '#999',
	lightest: '#ccc',
	link: '#1978c8',
	linkHover: '#f28a25',
	border: '#e8e8e8',
	name: '#7f9a44',
	type: '#b77daa',
	error: '#fff',
	baseBackground: '#fff',
	errorBackground: '#c00',
	codeBackground: '#f5f5f5',
	sidebarBackground: '#f5f5f5'
};

export var fontFamily = {
	base: ['-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', '"Roboto"', '"Oxygen"', '"Ubuntu"', '"Cantarell"', '"Fira Sans"', '"Droid Sans"', '"Helvetica Neue"', 'sans-serif'],
	monospace: ['Consolas', '"Liberation Mono"', 'Menlo', 'monospace']
};

export var fontSize = {
	base: 15,
	text: 16,
	small: 13,
	h1: 48,
	h2: 36,
	h3: 24,
	h4: 18,
	h5: 16,
	h6: 16
};

export var mq = {
	small: '@media (max-width: 600px)'
};

export var borderRadius = 3;
export var maxWidth = 1000;
export var sidebarWidth = 200;