Merge pull request #2814 from evidence-dev/feat/2499-theming_remove-u…

…i-colours [Theming] Remove UI colours
evidence-dev · Nov 19, 2024 · 9a45c14 · 9a45c14
2 parents a70fd0c + b5b8626
commit 9a45c14
Show file tree

Hide file tree

Showing 11 changed files with 44 additions and 93 deletions.
diff --git a/packages/lib/component-utilities/src/colours.js b/packages/lib/component-utilities/src/colours.js
diff --git a/packages/ui/core-components/src/lib/unsorted/viz/core/Sparkline.stories.svelte b/packages/ui/core-components/src/lib/unsorted/viz/core/Sparkline.stories.svelte
@@ -17,5 +17,5 @@
 </script>
 
 <Story name="All" let:args>
-	<Sparkline {...args} {data} valueCol="fare" dateCol="departure_date" />
+	<Sparkline {...args} {data} valueCol="fare" dateCol="departure_date" type="area" />
 </Story>
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,10 +25,9 @@
 	} from '@evidence-dev/component-utilities/formatting';
 	import ErrorChart from './ErrorChart.svelte';
 	import checkInputs from '@evidence-dev/component-utilities/checkInputs';
-	import { uiColours } from '@evidence-dev/component-utilities/colours';
 	import { getThemeStores } from '../../../themes.js';
 
-	const { resolveColor, resolveColorsObject, resolveColorPalette } = getThemeStores();
+	const { theme, resolveColor, resolveColorsObject, resolveColorPalette } = getThemeStores();
 
 	// ---------------------------------------------------------------------------------------
 	// Input Props
@@ -913,7 +912,7 @@
 				style: {
 					text: horizAxisTitle,
 					textAlign: 'right',
-					fill: uiColours.grey500
+					fill: $theme.colors['base-content-muted']
 				},
 				cursor: 'auto',
 				// Positioning (if swapXY, top right; otherwise bottom right)

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/core/_Sparkline.svelte b/packages/ui/core-components/src/lib/unsorted/viz/core/_Sparkline.svelte
@@ -8,7 +8,7 @@
 	import { getColumnFormats, getSparklineConfig, validateSize } from './sparkline.js';
 	import { getThemeStores } from '../../../themes.js';
 
-	const { resolveColor } = getThemeStores();
+	const { theme, resolveColor } = getThemeStores();
 
 	export let config = {};
 	export let width = 50; // Default width for the sparkline, adjust as needed
@@ -119,7 +119,8 @@
 			value_format_object,
 			date_format_object,
 			height,
-			tooltipBackgroundColor
+			tooltipBackgroundColor,
+			$theme
 		);
 
 		if (!browser) {

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/core/sparkline.js b/packages/ui/core-components/src/lib/unsorted/viz/core/sparkline.js
@@ -1,5 +1,4 @@
 import getColumnSummary from '@evidence-dev/component-utilities/getColumnSummary';
-import { uiColours } from '@evidence-dev/component-utilities/colours';
 import {
 	formatValue,
 	getFormatObjectFromString
@@ -73,6 +72,7 @@ export function getColumnFormats(data, valueCol, dateCol, valueFmt, dateFmt) {
  * @param {*} sparklineData
  * @param {string} seriesType
  * @param {string} color
+ * @param {import('@evidence-dev/tailwind').Theme} theme
  * @returns {import("echarts").EChartsOption}
  */
 export function getSparklineConfig(
@@ -84,7 +84,8 @@ export function getSparklineConfig(
 	value_format_object,
 	date_format_object,
 	height,
-	tooltipBackgroundColor
+	tooltipBackgroundColor,
+	theme
 ) {
 	return {
 		title: {
@@ -142,13 +143,6 @@ export function getSparklineConfig(
 			splitLine: {
 				show: false
 			},
-			axisLine: {
-				show: true,
-				lineStyle: {
-					width: 0.75,
-					color: uiColours.grey500
-				}
-			},
 			axisTick: {
 				show: false
 			},
@@ -230,18 +224,18 @@ export function getSparklineConfig(
 				lineStyle: {
 					width: 1,
 					type: 'solid',
-					color: color ?? uiColours.grey400
+					color: color ?? theme.colors['base-content-muted']
 				},
 				areaStyle: {
 					color:
 						type === 'area'
 							? color
 								? chroma(color).brighten(1.5).hex()
-								: uiColours.grey300
+								: theme.colors['base-300']
 							: 'transparent'
 				},
 				itemStyle: {
-					color: color ?? uiColours.grey400
+					color: color ?? theme.colors['base-content-muted']
 				},
 				showSymbol: false,
 				symbol: 'circle',

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/heatmap/Heatmap.stories.svelte b/packages/ui/core-components/src/lib/unsorted/viz/heatmap/Heatmap.stories.svelte
@@ -20,8 +20,6 @@
 			select 1 as x, 0 as y, 200 as value
 			union all
 			select 0 as x, 1 as y, 300 as value
-			union all
-			select 1 as x, 1 as y, 400 as value
 		`,
 		query
 	);

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/heatmap/_CalendarHeatmap.svelte b/packages/ui/core-components/src/lib/unsorted/viz/heatmap/_CalendarHeatmap.svelte
@@ -13,10 +13,9 @@
 		getFormatObjectFromString
 	} from '@evidence-dev/component-utilities/formatting';
 	import getColumnSummary from '@evidence-dev/component-utilities/getColumnSummary';
-	import { uiColours } from '@evidence-dev/component-utilities/colours';
 	import { getThemeStores } from '../../../themes.js';
 
-	const { resolveColorPalette } = getThemeStores();
+	const { theme, resolveColorPalette } = getThemeStores();
 
 	export let data;
 	export let queryID;
@@ -173,20 +172,21 @@
 			right: 5,
 			cellSize: ['auto', 13],
 			itemStyle: {
+				color: $theme.colors['base-100'],
 				borderWidth: 0.5,
-				borderColor: uiColours.grey300
+				borderColor: $theme.colors['base-300']
 			},
 			splitLine: {
 				show: true,
 				lineStyle: {
-					color: uiColours.grey600
+					color: $theme.colors['base-content-muted']
 				}
 			},
-			monthLabel: { show: monthLabel, color: uiColours.grey700 },
-			dayLabel: { show: dayLabel, color: uiColours.grey700 },
+			monthLabel: { show: monthLabel, color: $theme.colors['base-content-muted'] },
+			dayLabel: { show: dayLabel, color: $theme.colors['base-content-muted'] },
 			yearLabel: {
 				show: yearLabel,
-				color: uiColours.grey300,
+				color: $theme.colors['base-300'],
 				fontSize: 16,
 				fontWeight: 600,
 				margin: 25
@@ -264,12 +264,12 @@
 				padding: 6,
 				borderRadius: 4,
 				borderWidth: 1,
-				borderColor: uiColours.grey400,
-				backgroundColor: 'white',
+				borderColor: $theme.colors['base-300'],
+				backgroundColor: $theme.colors['base-100'],
 				extraCssText:
 					'box-shadow: 0 3px 6px rgba(0,0,0,.15); box-shadow: 0 2px 4px rgba(0,0,0,.12); z-index: 1;',
 				textStyle: {
-					color: uiColours.grey900,
+					color: $theme.colors['base-content'],
 					fontSize: 12,
 					fontWeight: 400
 				},
@@ -286,7 +286,10 @@
 				left: 'center',
 				bottom: 10,
 				handleStyle: {
-					borderColor: uiColours.grey200
+					borderColor: $theme.colors['base-100']
+				},
+				textStyle: {
+					color: $theme.colors['base-content-muted']
 				},
 				inRange: {
 					color: $colorPaletteStore
@@ -318,31 +321,31 @@
 			cellSize: ['auto', 12],
 			itemStyle: {
 				borderWidth: 0.5,
-				borderColor: uiColours.grey300
+				borderColor: $theme.colors['base-300']
 			},
 			splitLine: {
 				show: true,
 				lineStyle: {
-					color: uiColours.grey600
+					color: $theme.colors['base-content-muted']
 				}
 			},
 			monthLabel: {
 				show: monthLabel,
-				color: uiColours.grey700,
+				color: $theme.colors['base-content-muted'],
 				fontSize: 10,
 				formatter: function (param) {
 					return param.nameMap.substring(0, 1);
 				}
 			},
 			dayLabel: {
 				show: dayLabel,
-				color: uiColours.grey700,
+				color: $theme.colors['base-content-muted'],
 				fontSize: 10,
 				margin: 7
 			},
 			yearLabel: {
 				show: yearLabel,
-				color: uiColours.grey300,
+				color: $theme.colors['base-300'],
 				fontWeight: 600,
 				margin: 25,
 				fontSize: 14

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/heatmap/_Heatmap.svelte b/packages/ui/core-components/src/lib/unsorted/viz/heatmap/_Heatmap.svelte
@@ -13,13 +13,12 @@
 		getFormatObjectFromString
 	} from '@evidence-dev/component-utilities/formatting';
 	import getColumnSummary from '@evidence-dev/component-utilities/getColumnSummary';
-	import { uiColours } from '@evidence-dev/component-utilities/colours';
 	import getDistinctValues from '@evidence-dev/component-utilities/getDistinctValues';
 	import getSortedDistinctValues from '@evidence-dev/component-utilities/getSortedDistinctValues';
 	import getCompletedData from '@evidence-dev/component-utilities/getCompletedData';
 	import { getThemeStores } from '../../../themes.js';
 
-	const { resolveColorPalette } = getThemeStores();
+	const { theme, resolveColorPalette } = getThemeStores();
 
 	export let data;
 	export let queryID;
@@ -255,12 +254,12 @@
 				padding: 6,
 				borderRadius: 4,
 				borderWidth: 1,
-				borderColor: uiColours.grey400,
-				backgroundColor: 'white',
+				borderColor: $theme.colors['base-300'],
+				backgroundColor: $theme.colors['base-100'],
 				extraCssText:
 					'box-shadow: 0 3px 6px rgba(0,0,0,.15); box-shadow: 0 2px 4px rgba(0,0,0,.12); z-index: 1;',
 				textStyle: {
-					color: uiColours.grey900,
+					color: $theme.colors['base-content'],
 					fontSize: 12,
 					fontWeight: 400
 				},
@@ -276,7 +275,7 @@
 				left: 'center',
 				bottom: '0%',
 				handleStyle: {
-					borderColor: uiColours.grey200
+					borderColor: $theme.colors['base-100']
 				},
 				inRange: {
 					color: $colorPaletteStore
@@ -307,7 +306,7 @@
 						hideOverlap: true
 					},
 					itemStyle: {
-						borderColor: uiColours.grey400,
+						borderColor: $theme.colors['base-300'],
 						borderWidth: borders ? 0.5 : 0
 					}
 				}

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
@@ -5,7 +5,6 @@ import formatTitle from '@evidence-dev/component-utilities/formatTitle';
 import { initSmoothZoom } from './LeafletSmoothZoom';
 import { writable, derived, readonly } from 'svelte/store';
 import chroma from 'chroma-js';
-import { uiColours } 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> */
@@ -481,8 +480,9 @@ export class EvidenceMap {
 		return values;
 	}
 
-	handleFillColor(item, value, values, colorPalette, colorScale) {
-		if (!value) return uiColours.blue700;
+	/** @param {import('@evidence-dev/tailwind').Theme} theme */
+	handleFillColor(item, value, values, colorPalette, colorScale, theme) {
+		if (!value) return theme.colors['primary'];
 
 		if (item[value]) {
 			if (typeof item[value] === 'string') {

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
@@ -7,7 +7,6 @@
 	import { getContext } from 'svelte';
 	import checkInputs from '@evidence-dev/component-utilities/checkInputs';
 	import MapArea from './MapArea.svelte';
-	import { uiColours } from '@evidence-dev/component-utilities/colours';
 	import { nanoid } from 'nanoid';
 	import { getInputContext } from '@evidence-dev/sdk/utils/svelte';
 	import { getThemeStores } from '../../../../themes.js';
@@ -75,7 +74,7 @@
 	$: colorStore = resolveColor(color);
 
 	/** @type {string} */
-	export let borderColor = uiColours.grey300;
+	export let borderColor = 'base-300';
 	$: borderColorStore = resolveColor(borderColor);
 
 	/** @type {string[]} */
@@ -312,7 +311,7 @@
 				areaOptions={{
 					fillColor:
 						$colorStore ??
-						map.handleFillColor(item, value, values, colorPaletteFinal, colorScale) ??
+						map.handleFillColor(item, value, values, colorPaletteFinal, colorScale, $theme) ??
 						colorScale(item[value]).hex(),
 					fillOpacity: opacity,
 					opacity: opacity,

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
@@ -327,7 +327,8 @@
 				// kw note:
 				//need to clean this logic
 				fillColor:
-					$colorStore ?? map.handleFillColor(item, value, values, colorPaletteFinal, colorScale),
+					$colorStore ??
+					map.handleFillColor(item, value, values, colorPaletteFinal, colorScale, $theme),
 				radius: sizeCol ? bubbleSize(item[sizeCol]) : size, // Radius of the circle in meters
 				fillOpacity: opacity,
 				opacity: opacity,