Merge pull request #2729 from evidence-dev/feat/2499-theming_color-pa…

…lettes-and-scales [Themes] Implement `colorPalettes` and `colorScales` config
evidence-dev · Nov 7, 2024 · d9398d3 · d9398d3
2 parents 5bcd71a + 9bd8a8a
commit d9398d3
Show file tree

Hide file tree

Showing 22 changed files with 252 additions and 164 deletions.
diff --git a/packages/lib/component-utilities/src/colours.js b/packages/lib/component-utilities/src/colours.js
@@ -41,40 +41,3 @@ export const uiColours = {
 	yellow900: 'hsl(22, 82%, 39%, 1)',
 	yellow999: 'hsl(15, 86%, 30%, 1)'
 };
-
-export const chartColours = [
-	'hsla(207, 65%, 39%, 1)', // Navy
-	'hsla(195, 49%, 51%, 1)', // Teal
-	'hsla(207, 69%, 79%, 1)', // Light Blue
-	'hsla(202, 28%, 65%, 1)', // Grey
-	'hsla(179, 37%, 65%, 1)', // Light Green
-	'hsla(40, 30%, 75%, 1)', // Tan
-	'hsla(38, 89%, 62%, 1)', // Yellow
-	'hsla(342, 40%, 40%, 1)', // Maroon
-	'hsla(207, 86%, 70%, 1)', // Blue
-	'hsla(160, 40%, 46%, 1)', // Green
-	// Grey Scale
-	'#71777d',
-	'#7e848a',
-	'#8c9196',
-	'#9a9fa3',
-	'#a8acb0',
-	'#b7babd',
-	'#c5c8ca',
-	'#d4d6d7',
-	'#e3e4e5',
-	'#f3f3f3'
-];
-
-export const mapColours = [
-	'hsla(207, 65%, 39%, 1)', // Navy
-	'hsla(195, 49%, 51%, 1)', // Teal
-	'hsla(207, 69%, 79%, 1)', // Light Blue
-	'hsla(202, 28%, 65%, 1)', // Grey
-	'hsla(179, 37%, 65%, 1)', // Light Green
-	'hsla(40, 30%, 75%, 1)', // Tan
-	'hsla(38, 89%, 62%, 1)', // Yellow
-	'hsla(342, 40%, 40%, 1)', // Maroon
-	'hsla(207, 86%, 70%, 1)', // Blue
-	'hsla(160, 40%, 46%, 1)' // Green
-];
diff --git a/packages/lib/component-utilities/src/echartsThemes.js b/packages/lib/component-utilities/src/echartsThemes.js
@@ -1,4 +1,3 @@
-import { chartColours } from './colours';
 import { themes } from '$evidence/themes';
 
 /** @param {'light' | 'dark'} mode */
@@ -29,7 +28,7 @@ const createTheme = (mode) => {
 			top: '15%',
 			containLabel: true
 		},
-		color: chartColours,
+		color: themes[mode].colorPalettes.default,
 		title: {
 			padding: 0,
 			itemGap: 7,

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/core/_Chart.svelte b/packages/ui/core-components/src/lib/unsorted/viz/core/_Chart.svelte
@@ -25,7 +25,10 @@
 	} from '@evidence-dev/component-utilities/formatting';
 	import ErrorChart from './ErrorChart.svelte';
 	import checkInputs from '@evidence-dev/component-utilities/checkInputs';
-	import { chartColours, uiColours } from '@evidence-dev/component-utilities/colours';
+	import { uiColours } from '@evidence-dev/component-utilities/colours';
+	import { ensureThemeStores } from '../../../themes.js';
+
+	const { theme } = ensureThemeStores();
 
 	// ---------------------------------------------------------------------------------------
 	// Input Props
@@ -139,7 +142,9 @@
 	export let sizeFmt = undefined;
 
 	// Color palette:
-	export let colorPalette = undefined;
+	let userColorPalette;
+	export { userColorPalette as colorPalette };
+	$: colorPalette = userColorPalette ?? $theme.colorPalettes.default;
 
 	// Legend:
 	export let legend = undefined;
@@ -743,9 +748,7 @@
 						},
 						color: y2
 							? yAxisColor === 'true'
-								? colorPalette
-									? colorPalette[0]
-									: chartColours[0]
+								? colorPalette[0]
 								: yAxisColor !== 'false'
 									? yAxisColor
 									: undefined
@@ -759,9 +762,7 @@
 						padding: [0, 5, 0, 0],
 						color: y2
 							? yAxisColor === 'true'
-								? colorPalette
-									? colorPalette[0]
-									: chartColours[0]
+								? colorPalette[0]
 								: yAxisColor !== 'false'
 									? yAxisColor
 									: undefined
@@ -798,9 +799,7 @@
 						},
 						color:
 							y2AxisColor === 'true'
-								? colorPalette
-									? colorPalette[ySeriesCount]
-									: chartColours[ySeriesCount]
+								? colorPalette[ySeriesCount]
 								: y2AxisColor !== 'false'
 									? y2AxisColor
 									: undefined
@@ -813,9 +812,7 @@
 						padding: [0, 0, 0, 5],
 						color:
 							y2AxisColor === 'true'
-								? colorPalette
-									? colorPalette[ySeriesCount]
-									: chartColours[ySeriesCount]
+								? colorPalette[ySeriesCount]
 								: y2AxisColor !== 'false'
 									? y2AxisColor
 									: undefined

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/map/EvidenceMap.js b/packages/ui/core-components/src/lib/unsorted/viz/map/EvidenceMap.js
@@ -6,7 +6,6 @@ import { initSmoothZoom } from './LeafletSmoothZoom';
 import { writable, derived, readonly } from 'svelte/store';
 import chroma from 'chroma-js';
 import { uiColours } from '@evidence-dev/component-utilities/colours';
-import { mapColours } from '@evidence-dev/component-utilities/colours';
 
 /** @template T @typedef {import('svelte/store').Writable<T>} Writable<T> */
 /** @template T @typedef {import('svelte/store').Readable<T>} Readable<T> */
@@ -558,6 +557,10 @@ export class EvidenceMap {
 		return readonly(this.#legendData);
 	}
 
+	/**
+	 * @param {unknown} data
+	 * @param {{ theme: import('@evidence-dev/tailwind').Theme }} opts
+	 */
 	async initializeData(
 		data,
 		{
@@ -571,7 +574,8 @@ export class EvidenceMap {
 			valueFmt,
 			chartType,
 			legendId,
-			legend
+			legend,
+			theme
 		}
 	) {
 		await data.fetch();
@@ -586,7 +590,8 @@ export class EvidenceMap {
 		}
 
 		if (legendType && !colorPalette) {
-			colorPalette = legendType === 'categorical' ? mapColours : ['lightblue', 'darkblue'];
+			colorPalette =
+				legendType === 'categorical' ? theme.colorPalettes.default : theme.colorScales.default;
 			colorPalette = colorPalette.map((item) => chroma(item).hex());
 		}
 		colorScale = chroma.scale(colorPalette).domain([min ?? minValue, max ?? maxValue]);

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/map/components/Areas.svelte b/packages/ui/core-components/src/lib/unsorted/viz/map/components/Areas.svelte
@@ -202,9 +202,10 @@
 
 	/**
 	 * Initialize the component.
+	 * @param {import('@evidence-dev/tailwind').Theme} theme
 	 * @returns {Promise<void>}
 	 */
-	async function init() {
+	async function init(theme) {
 		let initDataOptions = {
 			corordinates: [areaCol],
 			value,
@@ -216,7 +217,8 @@
 			valueFmt,
 			chartType,
 			legendId,
-			legend
+			legend,
+			theme
 		};
 		await data.fetch();
 		if (!color) {
@@ -289,7 +291,7 @@
 
 <!-- Additional data.fetch() included in await to trigger reactivity. Should ideally be handled in init() in the future. -->
 {#await Promise.all([map.initPromise, data.fetch()]) then}
-	{#await init() then}
+	{#await init($theme) then}
 		{#each geoJson as feature (feature.properties[geoId])}
 			{@const item = $data.find((d) => d[areaCol].toString() === feature.properties[geoId])}
 			<MapArea

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/map/components/Points.svelte b/packages/ui/core-components/src/lib/unsorted/viz/map/components/Points.svelte
@@ -229,9 +229,10 @@
 
 	/**
 	 * Initialize the component.
+	 * @param {import('@evidence-dev/tailwind').Theme} theme
 	 * @returns {Promise<void>}
 	 */
-	async function init() {
+	async function init(theme) {
 		if (data) {
 			let initDataOptions = {
 				corordinates: [lat, long],
@@ -244,7 +245,8 @@
 				valueFmt,
 				chartType,
 				legendId,
-				legend
+				legend,
+				theme
 			};
 			({ values, colorPalette, colorScale } = await map.initializeData(data, initDataOptions));
 
@@ -306,7 +308,7 @@
 </script>
 
 <!-- Additional data.fetch() included in await to trigger reactivity. Should ideally be handled in init() in the future. -->
-{#await Promise.all([map.initPromise, data.fetch(), init()]) then}
+{#await Promise.all([map.initPromise, data.fetch(), init($theme)]) then}
 	{#each $data as item}
 		<Point
 			{map}

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/sankey/_SankeyDiagram.svelte b/packages/ui/core-components/src/lib/unsorted/viz/sankey/_SankeyDiagram.svelte
@@ -6,7 +6,6 @@
 	import { ECharts } from '@evidence-dev/core-components';
 	import { strictBuild } from '@evidence-dev/component-utilities/chartContext';
 
-	import { chartColours } from '@evidence-dev/component-utilities/colours';
 	import {
 		formatValue,
 		getFormatObjectFromString
@@ -15,6 +14,7 @@
 	import getColumnSummary from '@evidence-dev/component-utilities/getColumnSummary';
 	import { ErrorChart } from '@evidence-dev/core-components';
 	import checkInputs from '@evidence-dev/component-utilities/checkInputs';
+	import { ensureThemeStores } from '../../../themes.js';
 
 	export let echartsOptions = undefined;
 	export let printEchartsConfig = false;
@@ -55,7 +55,8 @@
 	let names = [];
 	let links;
 
-	let combinedPalette = [...(colorPalette ?? []), ...chartColours];
+	const { theme } = ensureThemeStores();
+	let combinedPalette = [...(colorPalette ?? []), ...$theme.colorPalettes.default];
 
 	// error handling
 	let error;

diff --git a/packages/ui/tailwind/src/themes/buildThemes.js b/packages/ui/tailwind/src/themes/buildThemes.js
@@ -1,14 +1,19 @@
 /**
- * @param {import('./types.js').ThemesConfig} themesConfig
- * @returns {import('./types.js').Themes}
+ * @param {import('./schemas/types.js').ThemesConfig} themesConfig
+ * @returns {import('./schemas/types.js').Themes}
  */
 export const buildThemes = (themesConfig) =>
-	Object.entries(themesConfig.themes.colors).reduce(
-		(acc, [name, values]) => {
-			if (!values) return acc;
-			acc.light.colors[name] = values.light;
-			acc.dark.colors[name] = values.dark;
+	/** @type {const} */ (['colors', 'colorPalettes', 'colorScales']).reduce(
+		(acc, key) => {
+			Object.entries(themesConfig.themes[key]).forEach(([name, values]) => {
+				if (!values) return;
+				acc.light[key][name] = values.light;
+				acc.dark[key][name] = values.dark;
+			});
 			return acc;
 		},
-		/** @type {import('./types.js').Themes} */ ({ light: { colors: {} }, dark: { colors: {} } })
+		/** @type {import('./schemas/types.js').Themes} */ ({
+			light: { colors: {}, colorPalettes: {}, colorScales: {} },
+			dark: { colors: {}, colorPalettes: {}, colorScales: {} }
+		})
 	);
diff --git a/packages/ui/tailwind/src/themes/buildThemes.spec.js b/packages/ui/tailwind/src/themes/buildThemes.spec.js
@@ -1,14 +1,16 @@
 // @ts-check
 import { describe, it, expect } from 'vitest';
 import { buildThemes } from './buildThemes.js';
-/** @typedef {import('tw-colors').TwcConfig} TwcConfig */
+/** @typedef {import('./types.js').Themes} Themes */
 /** @typedef {import('./types.js').ThemesConfig} ThemesConfig */
 
 describe('buildThemes', () => {
 	it('should collect correct colors for each theme', () => {
 		/** @type {ThemesConfig} */
 		const themesConfig = {
 			themes: {
+				defaultAppearance: 'light',
+				appearanceSwitcher: true,
 				colors: {
 					primary: {
 						light: 'primary_light',
@@ -94,13 +96,20 @@ describe('buildThemes', () => {
 						light: 'warning-content_light',
 						dark: 'warning-content_dark'
 					}
-				}
+				},
+				colorPalettes: {
+					default: {
+						light: ['default_light_1', 'default_light_2', 'default_light_3'],
+						dark: ['default_dark_1', 'default_dark_2', 'default_dark_3']
+					}
+				},
+				colorScales: {}
 			}
 		};
 
 		const actual = buildThemes(themesConfig);
 
-		/** @type {TwcConfig} */
+		/** @type {Themes} */
 		const expected = {
 			light: {
 				colors: {
@@ -125,7 +134,11 @@ describe('buildThemes', () => {
 					'negative-content': 'negative-content_light',
 					warning: 'warning_light',
 					'warning-content': 'warning-content_light'
-				}
+				},
+				colorPalettes: {
+					default: ['default_light_1', 'default_light_2', 'default_light_3']
+				},
+				colorScales: {}
 			},
 			dark: {
 				colors: {
@@ -150,7 +163,11 @@ describe('buildThemes', () => {
 					'negative-content': 'negative-content_dark',
 					warning: 'warning_dark',
 					'warning-content': 'warning-content_dark'
-				}
+				},
+				colorPalettes: {
+					default: ['default_dark_1', 'default_dark_2', 'default_dark_3']
+				},
+				colorScales: {}
 			}
 		};
 

diff --git a/packages/ui/tailwind/src/themes/defaultThemesConfig.js b/packages/ui/tailwind/src/themes/defaultThemesConfig.js
@@ -1,6 +1,6 @@
 import colors from 'tailwindcss/colors.js';
 
-/** @typedef {import('./types.js').ThemesConfig} ThemesConfig */
+/** @typedef {import('./schemas/types.js').ThemesConfig} ThemesConfig */
 
 /** @type {ThemesConfig} */
 export const defaultThemesConfig = {
@@ -92,6 +92,40 @@ export const defaultThemesConfig = {
 				light: colors.zinc[50],
 				dark: colors.zinc[950]
 			}
+		},
+		colorPalettes: {
+			default: {
+				light: [
+					'hsla(207, 65%, 39%, 1)', // Navy
+					'hsla(195, 49%, 51%, 1)', // Teal
+					'hsla(207, 69%, 79%, 1)', // Light Blue
+					'hsla(202, 28%, 65%, 1)', // Grey
+					'hsla(179, 37%, 65%, 1)', // Light Green
+					'hsla(40, 30%, 75%, 1)', // Tan
+					'hsla(38, 89%, 62%, 1)', // Yellow
+					'hsla(342, 40%, 40%, 1)', // Maroon
+					'hsla(207, 86%, 70%, 1)', // Blue
+					'hsla(160, 40%, 46%, 1)' // Green
+				],
+				dark: [
+					'hsla(207, 85%, 65%, 1)', // Navy -> Bright Blue
+					'hsla(195, 69%, 61%, 1)', // Teal -> Brighter Teal
+					'hsla(207, 89%, 89%, 1)', // Light Blue -> Nearly White Blue
+					'hsla(202, 38%, 75%, 1)', // Grey -> Lighter Grey
+					'hsla(179, 57%, 75%, 1)', // Light Green -> Brighter Mint
+					'hsla(40, 50%, 85%, 1)', // Tan -> Pale Gold
+					'hsla(38, 99%, 72%, 1)', // Yellow -> Vibrant Yellow
+					'hsla(342, 60%, 65%, 1)', // Maroon -> Bright Pink
+					'hsla(207, 96%, 80%, 1)', // Blue -> Vivid Sky Blue
+					'hsla(160, 60%, 56%, 1)' // Green -> Bright Mint
+				]
+			}
+		},
+		colorScales: {
+			default: {
+				light: ['lightblue', 'darkblue'],
+				dark: ['lightblue', 'darkblue']
+			}
 		}
 	}
 };