Themes

.changeset/dull-spoons-poke.md

@@ -0,0 +1,6 @@
+---
+'@evidence-dev/evidence': patch
+---
+
+Add evidenceThemes() plugin for \$evidence/themes virtual module
+Add CSS for Leaflet dark mode

.changeset/fluffy-islands-pretend.md

@@ -0,0 +1,5 @@
+---
+'@evidence-dev/core-components': patch
+---
+
+Use theme tokens in JS

.changeset/fluffy-jeans-design.md

@@ -0,0 +1,6 @@
+---
+'@evidence-dev/tailwind': patch
+---
+
+Add Vite plugin for $evidence/themes virtual module
+Add secondary and accent colors to defaultThemes

.changeset/lemon-boxes-listen.md

@@ -0,0 +1,6 @@
+---
+'@evidence-dev/core-components': patch
+'@evidence-dev/tailwind': patch
+---
+
+Theming for page background, page text, page header, evidence logo, markdown elements, Alert, Button, Accordion, BigLink, Delta, BigValue, ButtonGroup, Checkbox, and some of DataTable

.changeset/purple-pugs-approve.md

@@ -0,0 +1,5 @@
+---
+'@evidence-dev/component-utilities': patch
+---
+
+Switch between echarts light/dark theme depending on selected theme"

.changeset/three-lamps-grin.md

@@ -0,0 +1,5 @@
+---
+'@evidence-dev/sdk': patch
+---
+
+Dont throw error when evidence.plugins.yaml isnt found

.eslintignore

@@ -31,4 +31,6 @@ packages/evidence/scripts/svelte.config.js
 packages/ui/icons/src
 
 # Don't lint playwright reports
-**/playwright-report*
+**/playwright-report*
+
+storybook-static

e2e/themes/evidence.config.yaml

@@ -1,8 +1,8 @@
 themes:
   light:
-    mySemanticColor: "#ff0000"
+    primary: "#ff0000"
   dark:
-    mySemanticColor: "#00ff00"
+    primary: "#00ff00"
 
 plugins:
   components:

e2e/themes/package.json

@@ -2,11 +2,11 @@
   "name": "e2e-themes",
   "version": "0.0.9",
   "scripts": {
-    "build": "cross-env VITE_EVIDENCE_THEMES=true evidence build",
-    "build:strict": "cross-env VITE_EVIDENCE_THEMES=true evidence build:strict",
-    "dev": "cross-env VITE_EVIDENCE_THEMES=true evidence dev",
+    "build": "cross-env evidence build",
+    "build:strict": "cross-env evidence build:strict",
+    "dev": "cross-env evidence dev",
     "sources": "evidence sources",
-    "preview": "cross-env VITE_EVIDENCE_THEMES=true evidence preview",
+    "preview": "cross-env evidence preview",
     "test:preview": "playwright test",
     "test:dev": "cross-env DEV=true playwright test"
   },

e2e/themes/pages/index.md

@@ -1,2 +1,2 @@
-<div data-testid="div-with-background" class="w-20 h-20 bg-mySemanticColor">
+<div data-testid="div-with-background" class="w-20 h-20 bg-primary">
 </div>

packages/evidence/scripts/build-template.js

@@ -49,6 +49,7 @@ fsExtra.outputFileSync(
 	import { createLogger } from 'vite';
 	import { sourceQueryHmr } from '@evidence-dev/sdk/vite';
 	import { isDebug } from '@evidence-dev/sdk/utils';
+	import { evidenceThemes } from '@evidence-dev/tailwind';
 
 	const logger = createLogger();
 	const loggerWarn = logger.warn;
@@ -75,7 +76,7 @@ fsExtra.outputFileSync(
     /** @type {import('vite').UserConfig} */
      const config = 
     {
-        plugins: [sveltekit(), evidenceVitePlugin(), sourceQueryHmr()],
+        plugins: [sveltekit(), evidenceVitePlugin(), sourceQueryHmr(), evidenceThemes()],
         optimizeDeps: {
             include: ['echarts-stat', 'echarts', 'blueimp-md5', 'nanoid', '@uwdata/mosaic-sql',
 				// We need these to prevent HMR from doing a full page reload
@@ -93,7 +94,7 @@ fsExtra.outputFileSync(
 				])
 
 			],
-            exclude: ['svelte-icons', '@evidence-dev/universal-sql']
+            exclude: ['svelte-icons', '@evidence-dev/universal-sql', '$evidence/themes']
         },
         ssr: {
             external: ['@evidence-dev/telemetry', 'blueimp-md5', 'nanoid', '@uwdata/mosaic-sql', '@evidence-dev/plugin-connector']

packages/lib/component-utilities/src/echarts.js

@@ -1,39 +1,48 @@
 import { registerTheme, init, connect } from 'echarts';
-import { evidenceThemeLight } from './echartsThemes';
+import { evidenceThemeDark, evidenceThemeLight } from './echartsThemes';
 import debounce from 'debounce';
 import * as chartWindowDebug from './chartWindowDebug';
 
 /**
  * @typedef {import("echarts").EChartsOption & {
  * 		dispatch?: ReturnType<typeof import("svelte").createEventDispatcher>;
  * 		showAllXAxisLabels?: boolean;
+ *    theme: 'light' | 'dark';
  * 	}
- * } ActionParams
+ * } EChartsActionOptions
  */
 
 const ANIMATION_DURATION = 500;
 
-/** @type {import("svelte/action").Action<HTMLElement, ActionParams>} */
-export default (node, option) => {
+/** @param {HTMLElement} node */
+/** @param {EChartsActionOptions} options */
+const echartsAction = (node, options) => {
 	// https://github.com/evidence-dev/evidence/issues/1323
 	const useSvg =
 		['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(
 			navigator.platform
 			// ios breaks w/ canvas if the canvas is too large
 		) && node.clientWidth * 3 * node.clientHeight * 3 > 16777215;
 
-	registerTheme('evidence-light', evidenceThemeLight);
+	registerTheme('light', evidenceThemeLight);
+	registerTheme('dark', evidenceThemeDark);
 
-	const chart = init(node, 'evidence-light', {
-		renderer: useSvg ? 'svg' : (option.renderer ?? 'canvas')
-	});
+	let chart;
+
+	const initChart = () => {
+		chart = init(node, options.theme, {
+			renderer: useSvg ? 'svg' : (options.renderer ?? 'canvas')
+		});
+	};
+
+	initChart();
 
 	chartWindowDebug.set(chart.id, chart);
 
 	// If connectGroup supplied, connect chart to other charts matching that connectGroup
-	if (option.connectGroup) {
-		chart.group = option.connectGroup;
-		connect(option.connectGroup);
+	if (options.connectGroup) {
+		chart.group = options.connectGroup;
+		connect(options.connectGroup);
 	}
 
 	// This function applies overrides to the echarts config generated by our chart components.
@@ -44,19 +53,19 @@ export default (node, option) => {
 
 	// Series Color override
 	const applySeriesColors = () => {
-		if (option.seriesColors) {
+		if (options.seriesColors) {
 			/** @type {import("echarts").EChartsOption} */
 			const prevOption = chart.getOption();
 			if (!prevOption) return;
 			const newOption = { ...prevOption };
-			for (const seriesName of Object.keys(option.seriesColors)) {
+			for (const seriesName of Object.keys(options.seriesColors)) {
 				const matchingSeriesIndex = prevOption.series.findIndex((s) => s.name === seriesName);
 				if (matchingSeriesIndex !== -1) {
 					newOption.series[matchingSeriesIndex] = {
 						...newOption.series[matchingSeriesIndex],
 						itemStyle: {
 							...newOption.series[matchingSeriesIndex].itemStyle,
-							color: option.seriesColors[seriesName]
+							color: options.seriesColors[seriesName]
 						}
 					};
 				}
@@ -67,18 +76,18 @@ export default (node, option) => {
 
 	// Check if echartsOptions are provided and apply them
 	const applyEchartsOptions = () => {
-		if (option.echartsOptions) {
+		if (options.echartsOptions) {
 			chart.setOption({
-				...option.echartsOptions
+				...options.echartsOptions
 			});
 		}
 	};
 
 	// seriesOptions - loop through series and apply same changes to each
 	const applySeriesOptions = () => {
 		let tempSeries = [];
-		if (option.seriesOptions) {
-			const reference_index = option.config.series.reduce(
+		if (options.seriesOptions) {
+			const reference_index = options.config.series.reduce(
 				(acc, { evidenceSeriesType }, reference_index) => {
 					if (
 						evidenceSeriesType === 'reference_line' ||
@@ -92,11 +101,11 @@ export default (node, option) => {
 				[]
 			);
 
-			for (let i = 0; i < option.config.series.length; i++) {
+			for (let i = 0; i < options.config.series.length; i++) {
 				if (reference_index.includes(i)) {
 					tempSeries.push({});
 				} else {
-					tempSeries.push({ ...option.seriesOptions });
+					tempSeries.push({ ...options.seriesOptions });
 				}
 			}
 			chart.setOption({ series: tempSeries });
@@ -105,7 +114,7 @@ export default (node, option) => {
 
 	// Initial options set:
 	chart.setOption({
-		...option.config,
+		...options.config,
 		animationDuration: ANIMATION_DURATION,
 		animationDurationUpdate: ANIMATION_DURATION
 	});
@@ -115,7 +124,7 @@ export default (node, option) => {
 	applySeriesOptions();
 
 	// Click event handler:
-	const dispatch = option.dispatch;
+	const dispatch = options.dispatch;
 	chart.on('click', function (params) {
 		dispatch('click', params);
 	});
@@ -144,7 +153,7 @@ export default (node, option) => {
 
 	// Label width setting:
 	const updateLabelWidths = () => {
-		if (option.showAllXAxisLabels) {
+		if (options.showAllXAxisLabels) {
 			// Make sure we operate on an up-to-date options object
 			/** @type {import("echarts").EChartsOption} */
 			const prevOption = chart.getOption();
@@ -160,7 +169,7 @@ export default (node, option) => {
 			// We disable this behavior because it doesn't make sense on horizontal bar charts
 			// Category labels will grow to be visible
 			// Value labels are interpolatable anyway
-			if (!option.swapXY) {
+			if (!options.swapXY) {
 				/** @type {import("echarts").EChartsOption} */
 				const newOption = {
 					xAxis: {
@@ -176,11 +185,17 @@ export default (node, option) => {
 		}
 	};
 
-	const updateChart = (newOption) => {
-		option = newOption;
+	/** @param {EChartsActionOptions} newOptions */
+	const updateChart = (newOptions) => {
+		if (newOptions.theme !== options.theme) {
+			chart.dispose();
+			initChart();
+		}
+
+		options = newOptions;
 		chart.setOption(
 			{
-				...option.config,
+				...options.config,
 				animationDuration: ANIMATION_DURATION,
 				animationDurationUpdate: ANIMATION_DURATION
 			},
@@ -202,9 +217,9 @@ export default (node, option) => {
 	window[Symbol.for('chart renders')] ??= 0;
 	window[Symbol.for('chart renders')]++;
 	return {
-		update(option) {
+		update(options) {
 			window[Symbol.for('chart renders')]++;
-			updateChart(option);
+			updateChart(options);
 		},
 		destroy() {
 			if (resizeObserver) {
@@ -219,3 +234,5 @@ export default (node, option) => {
 		}
 	};
 };
+
+export default echartsAction;

packages/lib/component-utilities/src/echartsThemes.js

@@ -511,8 +511,9 @@ export const evidenceThemeDark = {
 	},
 	boxplot: {
 		itemStyle: {
-			borderWidth: 0,
-			borderColor: '#cccccc'
+			borderWidth: 1.5,
+			borderColor: '#cccccc',
+			color: '#0a0a0a'
 		}
 	},
 	parallel: {

packages/lib/component-utilities/src/stores.js

@@ -71,15 +71,21 @@ const getStoreVal = (store) => {
 	return v;
 };
 
+/** @template T @typedef {{ serialize: (value: T) => string; deserialize: (raw: string) => T }} SerializeAndDeserialize */
+
 /**
  * Implementation of a writable store that also saves it's values to localStorage
  * @template T
  * @param {string} key localStorage key
  * @param {T} init
+ * @param {SerializeAndDeserialize<T>} [serializeAndDeserialize]
  * @returns {Writable<T>}
  */
-export const localStorageStore = (key, init) => {
-	const store = writable(browser ? (JSON.parse(localStorage.getItem(key)) ?? init) : init);
+export const localStorageStore = (key, init, serializeAndDeserialize) => {
+	const serialize = serializeAndDeserialize?.serialize ?? JSON.stringify;
+	const deserialize = serializeAndDeserialize?.deserialize ?? JSON.parse;
+
+	const store = writable(browser ? (deserialize(localStorage.getItem(key)) ?? init) : init);
 	const { subscribe, set } = store;
 
 	/** @type {(v: T) => void} */
@@ -88,7 +94,7 @@ export const localStorageStore = (key, init) => {
 			if (typeof v === 'undefined' || v === null) {
 				localStorage.removeItem(key);
 			} else {
-				localStorage.setItem(key, JSON.stringify(v));
+				localStorage.setItem(key, serialize(v));
 			}
 		}
 	};

packages/lib/preprocess/src/extract-queries/get-query-ids.fixture.cjs

@@ -108,7 +108,7 @@ z = x + y
 \`\`\`css
 pre {
     overflow: scroll;
-    background: var(--grey-800);
+    background: var(--neutral);
     border-radius: 3px;
     display: flex;
     flex-direction: row;

packages/lib/sdk/src/build-dev/svelte/processors/transformQueries/transformQueries.js

@@ -34,7 +34,7 @@ export const transformQueries = {
 
 			target.classList.add('text-xs');
 			target.classList.add('leading-tight');
-			target.classList.add('bg-gray-200');
+			target.classList.add('bg-base-300');
 			target.classList.add('p-2');
 			target.classList.add('w-fit');
 			target.classList.add('min-w-[60ch]');

packages/ui/core-components/.storybook/main.js

@@ -1,10 +1,12 @@
 import { mergeConfig } from 'vite';
+import { evidenceThemes } from '@evidence-dev/tailwind';
 
 /** @type { import('@storybook/sveltekit').StorybookConfig } */
 const config = {
 	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
 	addons: [
 		'@storybook/addon-essentials',
+		'@storybook/addon-themes',
 		'@storybook/addon-interactions',
 		'@storybook/addon-svelte-csf',
 		'@chromatic-com/storybook'
@@ -14,6 +16,7 @@ const config = {
 	},
 	async viteFinal(config) {
 		return mergeConfig(config, {
+			plugins: [evidenceThemes()],
 			server: {
 				fs: {
 					strict: false