Minor styling updates

evidence-dev · Jan 2, 2025 · e6fa72a · e6fa72a
1 parent 18ae8a9
commit e6fa72a
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 8 deletions.
diff --git a/.changeset/ten-humans-fetch.md b/.changeset/ten-humans-fetch.md
@@ -0,0 +1,5 @@
+---
+'@evidence-dev/core-components': patch
+---
+
+Minor styling updates
diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Details.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Details.svelte
@@ -9,8 +9,11 @@
 	import { slide } from 'svelte/transition';
 </script>
 
-<div class="mb-4 mt-3">
-	<button class="text-sm cursor-pointer inline-flex gap-2" on:click={() => (open = !open)}>
+<div class="mb-4 mt-2">
+	<button
+		class="text-sm text-base-content-muted cursor-pointer inline-flex gap-2"
+		on:click={() => (open = !open)}
+	>
 		<span class={open ? 'marker rotate-marker' : 'marker'} />
 		<span> {title} </span>
 	</button>

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
@@ -104,7 +104,7 @@ export function getSparklineConfig(
 				// Assuming params[0] is your primary data point
 				const dataPoint = params[0];
 				// Customize these HTML blocks as needed
-				const valuePart = `<div style="text-align: center; background-color: ${theme.colors['base-200']}; border-radius: 1px; padding: 0px 2px;">${formatValue(
+				const valuePart = `<div style="text-align: center; background-color: ${theme.colors['base-100']}; border-radius: 1px; padding: 0px 2px;">${formatValue(
 					dataPoint.value[1],
 					value_format_object
 				)}</div>`;

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
@@ -30,7 +30,7 @@
 	/** @type {string|undefined} */
 	export let value = undefined;
 	/** @type {string|undefined} */
-	export let valueFmt = undefined;
+	export let valueFmt = 'num0';
 	/** @type {number|undefined} */
 	export let min = undefined;
 	/** @type {number|undefined} */

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
@@ -32,9 +32,9 @@
 	/** @type {string|undefined} */
 	export let value = undefined; // column with the value to be represented
 	/** @type {string|undefined} */
-	export let valueFmt = undefined;
+	export let valueFmt = 'num0';
 	/** @type {string|undefined} */
-	export let sizeFmt = undefined;
+	export let sizeFmt = 'num0';
 	/** @type {number|undefined} */
 	export let size = undefined; // point size
 	/** @type {'categorical' | 'scalar' | undefined} */

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/table/TableHeader.svelte b/packages/ui/core-components/src/lib/unsorted/viz/table/TableHeader.svelte
@@ -77,7 +77,7 @@
 		{/if}
 	{/if}
 
-	<tr class="border-b border-base-content-muted">
+	<tr class="border-b border-base-content-muted/60">
 		{#if rowNumbers}
 			<th
 				role="columnheader"

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/table/TableRow.svelte b/packages/ui/core-components/src/lib/unsorted/viz/table/TableRow.svelte
@@ -320,7 +320,7 @@
 
 <style lang="postcss">
 	.row-lines {
-		@apply border-b border-base-300;
+		@apply border-b border-base-content-muted/20;
 	}
 
 	.shaded-row {