Merge pull request #2818 from evidence-dev/feat/2499-theming_map-legend

[Theming] Map legend
evidence-dev · Nov 19, 2024 · 2fb3deb · 2fb3deb
2 parents d062cc5 + 9d2bdc5
commit 2fb3deb
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 55 deletions.
diff --git a/...components/src/lib/unsorted/viz/map/components/Legend Components/CategoricalLegend.svelte b/...components/src/lib/unsorted/viz/map/components/Legend Components/CategoricalLegend.svelte
@@ -22,7 +22,7 @@
 <div class="flex w-full">
 	<div
 		style={`max-height: ${hideLegend ? '0px' : `${height - 50}px`};`}
-		class="scrollbox flex flex-col transition-[opacity, max-height, overflow-y] duration-[350ms] ease-in-out w-full min-w-24 {overflowOn
+		class="pretty-scrollbar flex flex-col transition-[opacity, max-height, overflow-y] duration-[350ms] ease-in-out w-full min-w-24 {overflowOn
 			? 'overflow-y-auto'
 			: 'overflow-hidden'} {hideLegend ? 'opacity-0' : ``}"
 	>
@@ -46,50 +46,3 @@
 		</div>
 	</div>
 </div>
-
-<style>
-	/* pulled css design from datatables should we move this into a global style component? */
-	.scrollbox {
-		width: 100%;
-		overflow-x: auto;
-		scrollbar-width: thin;
-		scrollbar-color: var(--scrollbar-color) var(--scrollbar-track-color);
-	}
-
-	:root {
-		--scrollbar-track-color: transparent;
-		--scrollbar-color: rgba(0, 0, 0, 0.2);
-		--scrollbar-active-color: rgba(0, 0, 0, 0.4);
-		--scrollbar-size: 0.75rem;
-		--scrollbar-minlength: 1.5rem; /* Minimum length of scrollbar thumb (width of horizontal, height of vertical) */
-	}
-
-	.scrollbox::-webkit-scrollbar {
-		height: var(--scrollbar-size);
-		width: var(--scrollbar-size);
-	}
-
-	.scrollbox::-webkit-scrollbar-track {
-		background-color: var(--scrollbar-track-color);
-	}
-
-	.scrollbox::-webkit-scrollbar-thumb {
-		background-color: var(--scrollbar-color);
-		border-radius: 7px;
-		background-clip: padding-box;
-	}
-
-	.scrollbox::-webkit-scrollbar-thumb:hover {
-		background-color: var(--scrollbar-active-color);
-	}
-
-	.scrollbox::-webkit-scrollbar-thumb:vertical {
-		min-height: var(--scrollbar-minlength);
-		border: 3px solid transparent;
-	}
-
-	.scrollbox::-webkit-scrollbar-thumb:horizontal {
-		min-width: var(--scrollbar-minlength);
-		border: 3px solid transparent;
-	}
-</style>
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
@@ -65,18 +65,18 @@
 
 {#if $legendData.length > 0}
 	<div
-		class="absolute z-[401] m-4 flex max-w-60 flex legend-font {constHandleLegendButtonPosition()} 
+		class="absolute z-[401] m-4 flex max-w-60 legend-font {constHandleLegendButtonPosition()} 
     {positions[legendPosition] ?? 'top-3 left-[-9px]'}"
 		on:wheel={(e) => e.stopPropagation()}
 		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}
 						<div
-							class="border-l first:border-none flex transition-[border, padding] ease-in-out ease-in-out duration-[350ms] px-2 truncate {multiLegend
+							class="border-l first:border-none flex transition-[border, padding] ease-in-out duration-[350ms] px-2 truncate {multiLegend
 								? 'w-1/2'
 								: 'max-w-48'} {hideLegend ? ' py-0' : ' py-1'}"
 						>
@@ -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'}"
 					>