@veritone-ce/design-system 2.9.0-next.2 → 2.9.0-next.3

package/dist/esm/bundled_modules/vega-themes/build/index.js

@@ -0,0 +1,837 @@
+var version$1 = "3.0.0";
+var pkg = {
+	version: version$1};
+
+const lightColor = '#fff';
+const medColor = '#888';
+const darkTheme = {
+    background: '#333',
+    view: {
+        stroke: medColor,
+    },
+    title: {
+        color: lightColor,
+        subtitleColor: lightColor,
+    },
+    style: {
+        'guide-label': {
+            fill: lightColor,
+        },
+        'guide-title': {
+            fill: lightColor,
+        },
+    },
+    axis: {
+        domainColor: lightColor,
+        gridColor: medColor,
+        tickColor: lightColor,
+    },
+};
+
+const markColor$7 = '#4572a7';
+const excelTheme = {
+    background: '#fff',
+    arc: { fill: markColor$7 },
+    area: { fill: markColor$7 },
+    line: { stroke: markColor$7, strokeWidth: 2 },
+    path: { stroke: markColor$7 },
+    rect: { fill: markColor$7 },
+    shape: { stroke: markColor$7 },
+    symbol: { fill: markColor$7, strokeWidth: 1.5, size: 50 },
+    axis: {
+        bandPosition: 0.5,
+        grid: true,
+        gridColor: '#000000',
+        gridOpacity: 1,
+        gridWidth: 0.5,
+        labelPadding: 10,
+        tickSize: 5,
+        tickWidth: 0.5,
+    },
+    axisBand: {
+        grid: false,
+        tickExtra: true,
+    },
+    legend: {
+        labelBaseline: 'middle',
+        labelFontSize: 11,
+        symbolSize: 50,
+        symbolType: 'square',
+    },
+    range: {
+        category: [
+            '#4572a7',
+            '#aa4643',
+            '#8aa453',
+            '#71598e',
+            '#4598ae',
+            '#d98445',
+            '#94aace',
+            '#d09393',
+            '#b9cc98',
+            '#a99cbc',
+        ],
+    },
+};
+
+const markColor$6 = '#30a2da';
+const axisColor$2 = '#cbcbcb';
+const guideLabelColor = '#999';
+const guideTitleColor = '#333';
+const backgroundColor$2 = '#f0f0f0';
+const blackTitle = '#333';
+const fiveThirtyEightTheme = {
+    arc: { fill: markColor$6 },
+    area: { fill: markColor$6 },
+    axis: {
+        domainColor: axisColor$2,
+        grid: true,
+        gridColor: axisColor$2,
+        gridWidth: 1,
+        labelColor: guideLabelColor,
+        labelFontSize: 10,
+        titleColor: guideTitleColor,
+        tickColor: axisColor$2,
+        tickSize: 10,
+        titleFontSize: 14,
+        titlePadding: 10,
+        labelPadding: 4,
+    },
+    axisBand: {
+        grid: false,
+    },
+    background: backgroundColor$2,
+    group: {
+        fill: backgroundColor$2,
+    },
+    legend: {
+        labelColor: blackTitle,
+        labelFontSize: 11,
+        padding: 1,
+        symbolSize: 30,
+        symbolType: 'square',
+        titleColor: blackTitle,
+        titleFontSize: 14,
+        titlePadding: 10,
+    },
+    line: {
+        stroke: markColor$6,
+        strokeWidth: 2,
+    },
+    path: { stroke: markColor$6, strokeWidth: 0.5 },
+    rect: { fill: markColor$6 },
+    range: {
+        category: [
+            '#30a2da',
+            '#fc4f30',
+            '#e5ae38',
+            '#6d904f',
+            '#8b8b8b',
+            '#b96db8',
+            '#ff9e27',
+            '#56cc60',
+            '#52d2ca',
+            '#52689e',
+            '#545454',
+            '#9fe4f8',
+        ],
+        diverging: ['#cc0020', '#e77866', '#f6e7e1', '#d6e8ed', '#91bfd9', '#1d78b5'],
+        heatmap: ['#d6e8ed', '#cee0e5', '#91bfd9', '#549cc6', '#1d78b5'],
+    },
+    point: {
+        filled: true,
+        shape: 'circle',
+    },
+    shape: { stroke: markColor$6 },
+    bar: {
+        binSpacing: 2,
+        fill: markColor$6,
+        stroke: null,
+    },
+    title: {
+        anchor: 'start',
+        fontSize: 24,
+        fontWeight: 600,
+        offset: 20,
+    },
+};
+
+const markColor$5 = '#000';
+const ggplot2Theme = {
+    group: {
+        fill: '#e5e5e5',
+    },
+    arc: { fill: markColor$5 },
+    area: { fill: markColor$5 },
+    line: { stroke: markColor$5 },
+    path: { stroke: markColor$5 },
+    rect: { fill: markColor$5 },
+    shape: { stroke: markColor$5 },
+    symbol: { fill: markColor$5, size: 40 },
+    axis: {
+        domain: false,
+        grid: true,
+        gridColor: '#FFFFFF',
+        gridOpacity: 1,
+        labelColor: '#7F7F7F',
+        labelPadding: 4,
+        tickColor: '#7F7F7F',
+        tickSize: 5.67,
+        titleFontSize: 16,
+        titleFontWeight: 'normal',
+    },
+    legend: {
+        labelBaseline: 'middle',
+        labelFontSize: 11,
+        symbolSize: 40,
+    },
+    range: {
+        category: [
+            '#000000',
+            '#7F7F7F',
+            '#1A1A1A',
+            '#999999',
+            '#333333',
+            '#B0B0B0',
+            '#4D4D4D',
+            '#C9C9C9',
+            '#666666',
+            '#DCDCDC',
+        ],
+    },
+};
+
+const headlineFontSize = 22;
+const headlineFontWeight = 'normal';
+const labelFont$1 = 'Benton Gothic, sans-serif';
+const labelFontSize = 11.5;
+const labelFontWeight = 'normal';
+const markColor$4 = '#82c6df';
+// const markHighlight = '#006d8f';
+// const markDemocrat = '#5789b8';
+// const markRepublican = '#d94f54';
+const titleFont = 'Benton Gothic Bold, sans-serif';
+const titleFontWeight = 'normal';
+const titleFontSize$1 = 13;
+const colorSchemes$1 = {
+    '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']};
+const latimesTheme = {
+    background: '#ffffff',
+    title: {
+        anchor: 'start',
+        color: '#000000',
+        font: titleFont,
+        fontSize: headlineFontSize,
+        fontWeight: headlineFontWeight,
+    },
+    arc: { fill: markColor$4 },
+    area: { fill: markColor$4 },
+    line: { stroke: markColor$4, strokeWidth: 2 },
+    path: { stroke: markColor$4 },
+    rect: { fill: markColor$4 },
+    shape: { stroke: markColor$4 },
+    symbol: { fill: markColor$4, size: 30 },
+    axis: {
+        labelFont: labelFont$1,
+        labelFontSize,
+        labelFontWeight,
+        titleFont,
+        titleFontSize: titleFontSize$1,
+        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: labelFont$1,
+        labelFontSize,
+        symbolType: 'square',
+        titleFont,
+        titleFontSize: titleFontSize$1,
+        titleFontWeight,
+    },
+    range: {
+        category: colorSchemes$1['category-6'],
+        diverging: colorSchemes$1['fireandice-6'],
+        heatmap: colorSchemes$1['fire-7'],
+        ordinal: colorSchemes$1['fire-7'],
+        ramp: colorSchemes$1['fire-7'],
+    },
+};
+
+const markColor$3 = '#ab5787';
+const axisColor$1 = '#979797';
+const quartzTheme = {
+    background: '#f9f9f9',
+    arc: { fill: markColor$3 },
+    area: { fill: markColor$3 },
+    line: { stroke: markColor$3 },
+    path: { stroke: markColor$3 },
+    rect: { fill: markColor$3 },
+    shape: { stroke: markColor$3 },
+    symbol: { fill: markColor$3, size: 30 },
+    axis: {
+        domainColor: axisColor$1,
+        domainWidth: 0.5,
+        gridWidth: 0.2,
+        labelColor: axisColor$1,
+        tickColor: axisColor$1,
+        tickWidth: 0.2,
+        titleColor: axisColor$1,
+    },
+    axisBand: {
+        grid: false,
+    },
+    axisX: {
+        grid: true,
+        tickSize: 10,
+    },
+    axisY: {
+        domain: false,
+        grid: true,
+        tickSize: 0,
+    },
+    legend: {
+        labelFontSize: 11,
+        padding: 1,
+        symbolSize: 30,
+        symbolType: 'square',
+    },
+    range: {
+        category: [
+            '#ab5787',
+            '#51b2e5',
+            '#703c5c',
+            '#168dd9',
+            '#d190b6',
+            '#00609f',
+            '#d365ba',
+            '#154866',
+            '#666666',
+            '#c4c4c4',
+        ],
+    },
+};
+
+const markColor$2 = '#3e5c69';
+const voxTheme = {
+    background: '#fff',
+    arc: { fill: markColor$2 },
+    area: { fill: markColor$2 },
+    line: { stroke: markColor$2 },
+    path: { stroke: markColor$2 },
+    rect: { fill: markColor$2 },
+    shape: { stroke: markColor$2 },
+    symbol: { fill: markColor$2 },
+    axis: {
+        domainWidth: 0.5,
+        grid: true,
+        labelPadding: 2,
+        tickSize: 5,
+        tickWidth: 0.5,
+        titleFontWeight: 'normal',
+    },
+    axisBand: {
+        grid: false,
+    },
+    axisX: {
+        gridWidth: 0.2,
+    },
+    axisY: {
+        gridDash: [3],
+        gridWidth: 0.4,
+    },
+    legend: {
+        labelFontSize: 11,
+        padding: 1,
+        symbolType: 'square',
+    },
+    range: {
+        category: ['#3e5c69', '#6793a6', '#182429', '#0570b0', '#3690c0', '#74a9cf', '#a6bddb', '#e2ddf2'],
+    },
+};
+
+const markColor$1 = '#1696d2';
+const axisColor = '#000000';
+const backgroundColor$1 = '#FFFFFF';
+const font = 'Lato';
+const labelFont = 'Lato';
+const sourceFont = 'Lato';
+const gridColor$1 = '#DEDDDD';
+const titleFontSize = 18;
+const colorSchemes = {
+    'shades-blue': ['#CFE8F3', '#A2D4EC', '#73BFE2', '#46ABDB', '#1696D2', '#12719E', '#0A4C6A', '#062635'],
+    'six-groups-cat-1': ['#1696d2', '#ec008b', '#fdbf11', '#000000', '#d2d2d2', '#55b748'],
+    'six-groups-seq': ['#cfe8f3', '#a2d4ec', '#73bfe2', '#46abdb', '#1696d2', '#12719e'],
+    'diverging-colors': ['#ca5800', '#fdbf11', '#fdd870', '#fff2cf', '#cfe8f3', '#73bfe2', '#1696d2', '#0a4c6a'],
+};
+const urbanInstituteTheme = {
+    background: backgroundColor$1,
+    title: {
+        anchor: 'start',
+        fontSize: titleFontSize,
+        font: font,
+    },
+    axisX: {
+        domain: true,
+        domainColor: axisColor,
+        domainWidth: 1,
+        grid: false,
+        labelFontSize: 12,
+        labelFont: labelFont,
+        labelAngle: 0,
+        tickColor: axisColor,
+        tickSize: 5,
+        titleFontSize: 12,
+        titlePadding: 10,
+        titleFont: font,
+    },
+    axisY: {
+        domain: false,
+        domainWidth: 1,
+        grid: true,
+        gridColor: gridColor$1,
+        gridWidth: 1,
+        labelFontSize: 12,
+        labelFont: labelFont,
+        labelPadding: 8,
+        ticks: false,
+        titleFontSize: 12,
+        titlePadding: 10,
+        titleFont: font,
+        titleAngle: 0,
+        titleY: -10,
+        titleX: 18,
+    },
+    legend: {
+        labelFontSize: 12,
+        labelFont: labelFont,
+        symbolSize: 100,
+        titleFontSize: 12,
+        titlePadding: 10,
+        titleFont: font,
+        orient: 'right',
+        offset: 10,
+    },
+    view: {
+        stroke: 'transparent',
+    },
+    range: {
+        category: colorSchemes['six-groups-cat-1'],
+        diverging: colorSchemes['diverging-colors'],
+        heatmap: colorSchemes['diverging-colors'],
+        ordinal: colorSchemes['six-groups-seq'],
+        ramp: colorSchemes['shades-blue'],
+    },
+    area: {
+        fill: markColor$1,
+    },
+    rect: {
+        fill: markColor$1,
+    },
+    line: {
+        color: markColor$1,
+        stroke: markColor$1,
+        strokeWidth: 5,
+    },
+    trail: {
+        color: markColor$1,
+        stroke: markColor$1,
+        strokeWidth: 0,
+        size: 1,
+    },
+    path: {
+        stroke: markColor$1,
+        strokeWidth: 0.5,
+    },
+    point: {
+        filled: true,
+    },
+    text: {
+        font: sourceFont,
+        color: markColor$1,
+        fontSize: 11,
+        align: 'center',
+        fontWeight: 400,
+        size: 11,
+    },
+    style: {
+        bar: {
+            fill: markColor$1,
+            stroke: null,
+        },
+    },
+    arc: { fill: markColor$1 },
+    shape: { stroke: markColor$1 },
+    symbol: { fill: markColor$1, size: 30 },
+};
+
+/**
+ * Copyright 2020 Google LLC.
+ *
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file or at
+ * https://developers.google.com/open-source/licenses/bsd
+ */
+const markColor = '#3366CC';
+const gridColor = '#ccc';
+const defaultFont$1 = 'Arial, sans-serif';
+const googlechartsTheme = {
+    arc: { fill: markColor },
+    area: { fill: markColor },
+    path: { stroke: markColor },
+    rect: { fill: markColor },
+    shape: { stroke: markColor },
+    symbol: { stroke: markColor },
+    circle: { fill: markColor },
+    background: '#fff',
+    padding: {
+        top: 10,
+        right: 10,
+        bottom: 10,
+        left: 10,
+    },
+    style: {
+        'guide-label': {
+            font: defaultFont$1,
+            fontSize: 12,
+        },
+        'guide-title': {
+            font: defaultFont$1,
+            fontSize: 12,
+        },
+        'group-title': {
+            font: defaultFont$1,
+            fontSize: 12,
+        },
+    },
+    title: {
+        font: defaultFont$1,
+        fontSize: 14,
+        fontWeight: 'bold',
+        dy: -3,
+        anchor: 'start',
+    },
+    axis: {
+        gridColor: gridColor,
+        tickColor: gridColor,
+        domain: false,
+        grid: true,
+    },
+    range: {
+        category: [
+            '#4285F4',
+            '#DB4437',
+            '#F4B400',
+            '#0F9D58',
+            '#AB47BC',
+            '#00ACC1',
+            '#FF7043',
+            '#9E9D24',
+            '#5C6BC0',
+            '#F06292',
+            '#00796B',
+            '#C2185B',
+        ],
+        heatmap: ['#c6dafc', '#5e97f6', '#2a56c6'],
+    },
+};
+
+const ptToPx = (value) => value * (1 / 3 + 1);
+const fontSmallPx = ptToPx(9);
+const legendFontPx = ptToPx(10);
+const fontLargePx = ptToPx(12);
+const fontStandard = 'Segoe UI';
+const fontTitle = 'wf_standard-font, helvetica, arial, sans-serif';
+const firstLevelElementColor = '#252423';
+const secondLevelElementColor = '#605E5C';
+const backgroundColor = 'transparent';
+const backgroundSecondaryColor = '#C8C6C4';
+const paletteColor1 = '#118DFF';
+const paletteColor2 = '#12239E';
+const paletteColor3 = '#E66C37';
+const paletteColor4 = '#6B007B';
+const paletteColor5 = '#E044A7';
+const paletteColor6 = '#744EC2';
+const paletteColor7 = '#D9B300';
+const paletteColor8 = '#D64550';
+const divergentColorMax = paletteColor1;
+const divergentColorMin = '#DEEFFF';
+const divergentPalette = [divergentColorMin, divergentColorMax];
+const ordinalPalette = [
+    divergentColorMin,
+    '#c7e4ff',
+    '#b0d9ff',
+    '#9aceff',
+    '#83c3ff',
+    '#6cb9ff',
+    '#55aeff',
+    '#3fa3ff',
+    '#2898ff',
+    divergentColorMax,
+];
+const powerbiTheme = {
+    view: { stroke: backgroundColor },
+    background: backgroundColor,
+    font: fontStandard,
+    header: {
+        titleFont: fontTitle,
+        titleFontSize: fontLargePx,
+        titleColor: firstLevelElementColor,
+        labelFont: fontStandard,
+        labelFontSize: legendFontPx,
+        labelColor: secondLevelElementColor,
+    },
+    axis: {
+        ticks: false,
+        grid: false,
+        domain: false,
+        labelColor: secondLevelElementColor,
+        labelFontSize: fontSmallPx,
+        titleFont: fontTitle,
+        titleColor: firstLevelElementColor,
+        titleFontSize: fontLargePx,
+        titleFontWeight: 'normal',
+    },
+    axisQuantitative: {
+        tickCount: 3,
+        grid: true,
+        gridColor: backgroundSecondaryColor,
+        gridDash: [1, 5],
+        labelFlush: false,
+    },
+    axisBand: { tickExtra: true },
+    axisX: { labelPadding: 5 },
+    axisY: { labelPadding: 10 },
+    bar: { fill: paletteColor1 },
+    line: {
+        stroke: paletteColor1,
+        strokeWidth: 3,
+        strokeCap: 'round',
+        strokeJoin: 'round',
+    },
+    text: { font: fontStandard, fontSize: fontSmallPx, fill: secondLevelElementColor },
+    arc: { fill: paletteColor1 },
+    area: { fill: paletteColor1, line: true, opacity: 0.6 },
+    path: { stroke: paletteColor1 },
+    rect: { fill: paletteColor1 },
+    point: { fill: paletteColor1, filled: true, size: 75 },
+    shape: { stroke: paletteColor1 },
+    symbol: { fill: paletteColor1, strokeWidth: 1.5, size: 50 },
+    legend: {
+        titleFont: fontStandard,
+        titleFontWeight: 'bold',
+        titleColor: secondLevelElementColor,
+        labelFont: fontStandard,
+        labelFontSize: legendFontPx,
+        labelColor: secondLevelElementColor,
+        symbolType: 'circle',
+        symbolSize: 75,
+    },
+    range: {
+        category: [
+            paletteColor1,
+            paletteColor2,
+            paletteColor3,
+            paletteColor4,
+            paletteColor5,
+            paletteColor6,
+            paletteColor7,
+            paletteColor8,
+        ],
+        diverging: divergentPalette,
+        heatmap: divergentPalette,
+        ordinal: ordinalPalette,
+    },
+};
+
+const defaultFont = 'IBM Plex Sans,system-ui,-apple-system,BlinkMacSystemFont,".sfnstext-regular",sans-serif';
+const condensedFont = 'IBM Plex Sans Condensed, system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular", sans-serif';
+const fontWeight = 400;
+const TOKENS = {
+    textPrimary: { g90: '#f4f4f4', g100: '#f4f4f4', white: '#161616', g10: '#161616' },
+    textSecondary: { g90: '#c6c6c6', g100: '#c6c6c6', white: '#525252', g10: '#525252' },
+    // layer
+    layerAccent01: {
+        white: '#e0e0e0',
+        g10: '#e0e0e0',
+        g90: '#525252',
+        g100: '#393939',
+    },
+    // grid
+    gridBg: {
+        white: '#ffffff',
+        g10: '#ffffff',
+        g90: '#161616',
+        g100: '#161616',
+    },
+};
+const darkCategories = [
+    '#8a3ffc',
+    '#33b1ff',
+    '#007d79',
+    '#ff7eb6',
+    '#fa4d56',
+    '#fff1f1',
+    '#6fdc8c',
+    '#4589ff',
+    '#d12771',
+    '#d2a106',
+    '#08bdba',
+    '#bae6ff',
+    '#ba4e00',
+    '#d4bbff',
+];
+const lightCategories = [
+    '#6929c4',
+    '#1192e8',
+    '#005d5d',
+    '#9f1853',
+    '#fa4d56',
+    '#570408',
+    '#198038',
+    '#002d9c',
+    '#ee538b',
+    '#b28600',
+    '#009d9a',
+    '#012749',
+    '#8a3800',
+    '#a56eff',
+];
+function genCarbonConfig({ theme, background }) {
+    const type = ['white', 'g10'].includes(theme) ? 'light' : 'dark';
+    const viewbg = TOKENS.gridBg[theme];
+    const titleColor = TOKENS.textPrimary[theme];
+    const textColor = TOKENS.textSecondary[theme];
+    const category = type === 'dark' ? darkCategories : lightCategories;
+    const markColor = type === 'dark' ? '#d4bbff' : '#6929c4';
+    return {
+        background,
+        arc: { fill: markColor },
+        area: { fill: markColor },
+        path: { stroke: markColor },
+        rect: { fill: markColor },
+        shape: { stroke: markColor },
+        symbol: { stroke: markColor },
+        circle: { fill: markColor },
+        view: {
+            fill: viewbg,
+            stroke: viewbg,
+        },
+        group: {
+            fill: viewbg,
+        },
+        title: {
+            color: titleColor,
+            anchor: 'start',
+            dy: -15,
+            fontSize: 16,
+            font: defaultFont,
+            fontWeight: 600,
+        },
+        axis: {
+            // Axis labels
+            labelColor: textColor,
+            labelFontSize: 12,
+            labelFont: condensedFont,
+            labelFontWeight: fontWeight,
+            // Axis titles
+            titleColor: titleColor,
+            titleFontWeight: 600,
+            titleFontSize: 12,
+            // MISC
+            grid: true,
+            gridColor: TOKENS.layerAccent01[theme],
+            labelAngle: 0,
+        },
+        axisX: {
+            titlePadding: 10,
+        },
+        axisY: {
+            titlePadding: 2.5,
+        },
+        style: {
+            'guide-label': {
+                font: defaultFont,
+                fill: textColor,
+                fontWeight: fontWeight,
+            },
+            'guide-title': {
+                font: defaultFont,
+                fill: textColor,
+                fontWeight: fontWeight,
+            },
+        },
+        range: {
+            category,
+            diverging: [
+                '#750e13',
+                '#a2191f',
+                '#da1e28',
+                '#fa4d56',
+                '#ff8389',
+                '#ffb3b8',
+                '#ffd7d9',
+                '#fff1f1',
+                '#e5f6ff',
+                '#bae6ff',
+                '#82cfff',
+                '#33b1ff',
+                '#1192e8',
+                '#0072c3',
+                '#00539a',
+                '#003a6d',
+            ],
+            heatmap: [
+                '#f6f2ff',
+                '#e8daff',
+                '#d4bbff',
+                '#be95ff',
+                '#a56eff',
+                '#8a3ffc',
+                '#6929c4',
+                '#491d8b',
+                '#31135e',
+                '#1c0f30',
+            ],
+        },
+    };
+}
+
+const carbonwhite = genCarbonConfig({
+    theme: 'white',
+    background: '#ffffff',
+});
+
+const carbong10 = genCarbonConfig({
+    theme: 'g10',
+    background: '#f4f4f4',
+});
+
+const carbong90 = genCarbonConfig({
+    theme: 'g90',
+    background: '#262626',
+});
+
+const carbong100 = genCarbonConfig({
+    theme: 'g100',
+    background: '#161616',
+});
+
+const version = pkg.version;
+
+export { carbong10, carbong100, carbong90, carbonwhite, darkTheme as dark, excelTheme as excel, fiveThirtyEightTheme as fivethirtyeight, ggplot2Theme as ggplot2, googlechartsTheme as googlecharts, latimesTheme as latimes, powerbiTheme as powerbi, quartzTheme as quartz, urbanInstituteTheme as urbaninstitute, version, voxTheme as vox };