const { assign } = Object; const A11Y_BABU = '#00A699'; const AXIS_LINE_GRAY = '#484848'; // Colors const colors = [ '#ffffff', '#f0f0f0', '#d9d9d9', '#bdbdbd', '#969696', '#737373', '#525252', '#252525', '#000000', ]; const charcoal = '#484848'; // Typography const sansSerif = '"Roboto", sans-serif'; const letterSpacing = 'normal'; const fontSize = 8; // Layout const baseProps = { width: 450, height: 300, padding: 50, colorScale: colors, }; // Labels const baseLabelStyles = { fontFamily: sansSerif, fontSize, letterSpacing, padding: 10, fill: charcoal, stroke: 'transparent', }; // Strokes const strokeLinecap = 'round'; const strokeLinejoin = 'round'; // Create the theme const theme = { area: assign({ style: { data: { fill: charcoal, }, labels: baseLabelStyles, }, }, baseProps), axis: assign({ style: { axis: { fill: 'none', stroke: AXIS_LINE_GRAY, strokeWidth: 1, strokeLinecap, strokeLinejoin, }, axisLabel: assign({}, baseLabelStyles, { padding: 25, }), grid: { fill: 'none', stroke: 'transparent', }, ticks: { fill: 'none', padding: 10, size: 1, stroke: 'transparent', }, tickLabels: baseLabelStyles, }, }, baseProps), bar: assign({ style: { data: { fill: A11Y_BABU, padding: 10, stroke: 'transparent', strokeWidth: 0, width: 8, }, labels: baseLabelStyles, }, }, baseProps), candlestick: assign({ style: { data: { stroke: A11Y_BABU, strokeWidth: 1, }, labels: assign({}, baseLabelStyles, { padding: 25, textAnchor: 'end', }), }, candleColors: { positive: '#ffffff', negative: charcoal, }, }, baseProps), chart: baseProps, errorbar: assign({ style: { data: { fill: 'none', stroke: charcoal, strokeWidth: 2, }, labels: assign({}, baseLabelStyles, { textAnchor: 'start', }), }, }, baseProps), group: assign({ colorScale: colors, }, baseProps), line: assign({ style: { data: { fill: 'none', stroke: A11Y_BABU, strokeWidth: 2, }, labels: assign({}, baseLabelStyles, { textAnchor: 'start', }), }, }, baseProps), pie: { style: { data: { padding: 10, stroke: 'none', strokeWidth: 1, }, labels: assign({}, baseLabelStyles, { padding: 200, textAnchor: 'middle', }), }, colorScale: colors, width: 400, height: 400, padding: 50, }, scatter: assign({ style: { data: { fill: charcoal, stroke: 'transparent', strokeWidth: 0, }, labels: assign({}, baseLabelStyles, { textAnchor: 'middle', }), }, }, baseProps), stack: assign({ colorScale: colors, }, baseProps), }; export default theme;