Added draft theme for the Los Angeles Times

README.md

@@ -66,6 +66,12 @@ vega.themes.<b>dark</b>
 
 A dark theme.
 
+<a name="latimes" href="#latimes">#</a>
+vega.themes.<b>latimes</b>
+[<>](https://github.com/vega/vega-themes/blob/master/src/theme-latimes.js "Source")
+
+Chart theme modeled after the Los Angeles Times.
+
 ## Instructions for Developers
 
 To view and test different themes, follow these steps:

src/index.ts

@@ -4,3 +4,4 @@ export { default as quartz } from './theme-quartz';
 export { default as vox } from './theme-vox';
 export { default as dark } from './theme-dark';
 export { default as fivethirtyeight } from './theme-fivethirtyeight';
+export { default as latimes } from './theme-latimes';

src/theme-latimes.ts

@@ -0,0 +1,115 @@
+import { Config } from './config';
+
+const headlineFontSize = 22;
+const headlineFontWeight = 'normal';
+const labelFont = 'Benton Gothic, sans';
+const labelFontSize = 11.5;
+const labelFontWeight = 'normal';
+const markColor = '#82c6df';
+const markHighlight = '#006d8f';
+const markDemocrat = '#5789b8';
+const markRepublican = '#d94f54';
+const titleFont = 'Benton Gothic Bold, sans';
+const titleFontWeight = 'normal';
+const titleFontSize = 13;
+const colorSchemes = {
+  'category-6': [
+    '#ec8431',
+    '#829eb1',
+    '#c89d29',
+    '#3580b1',
+    '#adc839',
+    '#ab7fb4',
+  ],
+  'fire-7': [
+    '#fbf2c7',
+    '#f9e39c',
+    '#f8d36e',
+    '#f4bb6a',
+    '#e68a4f',
+    '#d15a40',
+    '#ab4232',
+  ],
+  'fireandice-6': [
+    '#e68a4f',
+    '#f4bb6a',
+    '#f9e39c',
+    '#dadfe2',
+    '#a6b7c6',
+    '#849eae',
+  ],
+  'ice-7': [
+    '#edefee',
+    '#dadfe2',
+    '#c4ccd2',
+    '#a6b7c6',
+    '#849eae',
+    '#607785',
+    '#47525d',
+  ],
+};
+
+const latimesTheme: Config = {
+  background: '#ffffff',
+
+  title: {
+    anchor: 'start',
+    font: titleFont,
+    fontColor: '#000000',
+    fontSize: headlineFontSize,
+    fontWeight: headlineFontWeight,
+  },
+
+  arc: { fill: markColor },
+  area: { fill: markColor },
+  line: { stroke: markColor, strokeWidth: 2 },
+  path: { stroke: markColor },
+  rect: { fill: markColor },
+  shape: { stroke: markColor },
+  symbol: { fill: markColor, size: 30 },
+
+  axis: {
+    labelFont,
+    labelFontSize,
+    labelFontWeight,
+    titleFont,
+    titleFontSize,
+    titleFontWeight,
+  },
+
+  axisX: {
+    labelAngle: 0,
+    labelPadding: 4,
+    tickSize: 3,
+  },
+
+  axisY: {
+    labelBaseline: 'middle',
+    maxExtent: 45,
+    minExtent: 45,
+    tickSize: 2,
+    titleAlign: 'left',
+    titleAngle: 0,
+    titleX: -45,
+    titleY: -11,
+  },
+
+  legend: {
+    labelFont,
+    labelFontSize,
+    symbolType: 'square',
+    titleFont,
+    titleFontSize,
+    titleFontWeight,
+  },
+
+  range: {
+    category: colorSchemes['category-6'],
+    diverging: colorSchemes['fireandice-6'],
+    heatmap: colorSchemes['fire-7'],
+    ordinal: colorSchemes['fire-7'],
+    ramp: colorSchemes['fire-7'],
+  },
+};
+
+export default latimesTheme;

test/index.html

@@ -37,6 +37,7 @@
         <option value="vox">vox</option>
         <option value="dark">dark</option>
         <option value="fivethirtyeight">fivethirtyeight</option>
+        <option value="latimes">latimes</option>
       </select> &nbsp;
       Renderer:
       <select id="render">