feat: map legends use theme

evidence-dev · Nov 19, 2024 · 9d2bdc5 · 9d2bdc5
1 parent 78f4516
commit 9d2bdc5
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 5 deletions.
diff --git a/...core-components/src/lib/unsorted/viz/map/components/Legend Components/LegendToggle.svelte b/...core-components/src/lib/unsorted/viz/map/components/Legend Components/LegendToggle.svelte
@@ -33,11 +33,11 @@
 		height="8"
 		viewBox="6 6 12 12"
 		fill="none"
-		stroke="#374151"
+		stroke="currentColor"
 		stroke-width="1"
 		stroke-linecap="round"
 		stroke-linejoin="round"
-		class="transform transition-transform duration-300 ease-in-out text-left gray-500 {hideLegend
+		class="transform transition-transform duration-300 ease-in-out text-left text-base-content-muted {hideLegend
 			? chevronDirections[direction].hide
 			: chevronDirections[direction].show}"
 	>

diff --git a/...core-components/src/lib/unsorted/viz/map/components/Legend Components/ScalarLegend.svelte b/...core-components/src/lib/unsorted/viz/map/components/Legend Components/ScalarLegend.svelte
@@ -1,5 +1,8 @@
 <script>
 	import { fmt } from '@evidence-dev/component-utilities/formatting';
+	import { getThemeStores } from '../../../../../themes/themes.js';
+
+	const { theme } = getThemeStores();
 
 	/** @type {{ colorPalette: string[]; values: string[]; legendType: 'scalar', value: string }} */
 	export let legend;
@@ -29,7 +32,7 @@
 		<span
 			style="background: {legend.colorPalette
 				? `linear-gradient(to right, ${legend.colorPalette.join(', ')})`
-				: 'white'}"
+				: $theme.colors['base-100']}"
 			class="relative h-2 min-w-56"
 		>
 		</span>

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/map/components/Legend.svelte b/packages/ui/core-components/src/lib/unsorted/viz/map/components/Legend.svelte
@@ -71,7 +71,7 @@
 		on:dblclick={(e) => e.stopPropagation()}
 		role="group"
 	>
-		<div class="bg-white background-blur {containerStyles[legendPosition]}">
+		<div class="bg-base-100 background-blur {containerStyles[legendPosition]}">
 			{#if $categoricalLegendData.length > 0}
 				<div class="flex flex-wrap hover:cursor-default">
 					{#each $categoricalLegendData as legend}
@@ -95,7 +95,7 @@
 			{#if $scalarLegendData.length > 0}
 				{#each $scalarLegendData as legend}
 					<div
-						class="border-t first:border-none overflow-hidden transition-[border, padding] duration-[350ms] ease-in-out px-2 {hideLegend
+						class="border-t border-base-300 first:border-none overflow-hidden transition-[border, padding] duration-[350ms] ease-in-out px-2 {hideLegend
 							? 'py-0 border-none'
 							: 'py-1'}"
 					>