From f970e6a27ed6cb6c0c23927ba299c644cd285212 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Thu, 25 Sep 2025 18:02:55 +0200
Subject: [PATCH] Fix tooltip colours

---
 components/src/DesignTokens/Tokens.ts         |  2 +-
 .../maplibre/Tooltip/Tooltip.stories.svelte   | 94 ++++++++++++++++++-
 .../src/maplibre/Tooltip/Tooltip.svelte       | 25 +++--
 3 files changed, 106 insertions(+), 15 deletions(-)

diff --git a/components/src/DesignTokens/Tokens.ts b/components/src/DesignTokens/Tokens.ts
index a373d1b2..88caec31 100644
--- a/components/src/DesignTokens/Tokens.ts
+++ b/components/src/DesignTokens/Tokens.ts
@@ -182,7 +182,7 @@ const semantics: ColourMap = {
 		light: '#ffffff'
 	},
 	surfaceBorder: {
-		dark: '#3e3e3e',
+		dark: 'hsl(0, 0%, 35%)',
 		light: shades.gray.base
 	},
 	pageFill: {
diff --git a/components/src/maplibre/Tooltip/Tooltip.stories.svelte b/components/src/maplibre/Tooltip/Tooltip.stories.svelte
index 798e6dd6..cb1c61d9 100644
--- a/components/src/maplibre/Tooltip/Tooltip.stories.svelte
+++ b/components/src/maplibre/Tooltip/Tooltip.stories.svelte
@@ -8,7 +8,7 @@
 	import VectorLayer from '../VectorLayer/VectorLayer.svelte';
 	import AttributionControl from '../AttributionControl/AttributionControl.svelte';
 	import Tooltip from './Tooltip.svelte';
-	import { SWRDataLabLight } from '../MapStyle';
+	import { SWRDataLabDark, SWRDataLabLight } from '../MapStyle';
 
 	const { Story } = defineMeta({
 		title: 'Maplibre/Extras/Tooltip',
@@ -177,6 +177,98 @@
 	</DesignTokens>
 </Story>
 
+<Story asChild name="fix/172">
+	<DesignTokens theme="dark">
+		<div class="container">
+			<Map
+				style={SWRDataLabDark()}
+				initialLocation={{ lat: 51, lng: 10, zoom: 8 }}
+				allowZoom={false}
+			>
+				<VectorTileSource
+					id="ev-infra-source"
+					url={`https://static.datenhub.net/data/p108_e_auto_check/ev_infra_merged.versatiles?tiles/{z}/{x}/{y}`}
+				/>
+				<VectorLayer
+					sourceId="ev-infra-source"
+					type="fill"
+					id="coverage-fill"
+					sourceLayer="coverage"
+					placeBelow="street-residential"
+					onmousemove={(e) => {
+						hovered2 = e.features?.[0];
+					}}
+					onmouseleave={() => (hovered2 = undefined)}
+					onclick={(e) => {
+						selected = e.features?.[0];
+						selectCoords = e.lngLat;
+					}}
+					paint={{
+						'fill-color': [
+							'step',
+							['get', 'coverage_2025'],
+							'#393636',
+							1,
+							'#262b38',
+							1.3,
+							'#6d4a77'
+						]
+					}}
+				/>
+				<VectorLayer
+					hovered={hovered2}
+					{selected}
+					sourceId="ev-infra-source"
+					sourceLayer="coverage"
+					id="ev-infra-outline"
+					type="line"
+					layout={{
+						'line-join': 'round'
+					}}
+					paint={{
+						'line-width': [
+							'case',
+							[
+								'any',
+								['boolean', ['feature-state', 'hovered'], false],
+								['boolean', ['feature-state', 'selected'], false]
+							],
+							2,
+							0.5
+						],
+						'line-color': [
+							'case',
+							[
+								'any',
+								['boolean', ['feature-state', 'hovered'], false],
+								['boolean', ['feature-state', 'selected'], false]
+							],
+							'#dfdbdb',
+							'#6d6d6d'
+						],
+						'line-opacity': 1
+					}}
+				/>
+				{#if selected}
+					<Tooltip
+						position={selectCoords}
+						mouseEvents={true}
+						showCloseButton={true}
+						onClose={() => {
+							selected = undefined;
+						}}
+					>
+						<pre class="padRight">{Object.entries(selected.properties)
+								.map(([key, val]) => `${key}: ${val}`)
+								.join('\n')}</pre>
+					</Tooltip>
+				{/if}
+				<AttributionControl position="bottom-left" />
+			</Map>
+		</div>
+	</DesignTokens>
+</Story>
+
 <style>
 	.container {
 		width: 100%;
diff --git a/components/src/maplibre/Tooltip/Tooltip.svelte b/components/src/maplibre/Tooltip/Tooltip.svelte
index fc72ede8..a46c1866 100644
--- a/components/src/maplibre/Tooltip/Tooltip.svelte
+++ b/components/src/maplibre/Tooltip/Tooltip.svelte
@@ -72,9 +72,9 @@
 		background: var(--color-surfaceFill);
 		color: var(--color-textPrimary);
 		padding: 0.75em;
-		border: 1px solid rgba(0, 0, 0, 0.75);
-		filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.1));
+		border: 1px solid var(--color-surfaceBorder);
 		pointer-events: none;
+		filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.1));
 	}
 
 	.mouseEvents {
@@ -147,26 +147,25 @@
 
 		.maplibregl-popup-close-button {
 			position: absolute;
-			top: 0.35em;
-			right: 0.35em;
+			top: 0.4em;
+			right: 0.4em;
 			cursor: pointer;
-			border-radius: 2px;
 			display: flex;
 			justify-content: center;
 			align-items: center;
 			padding-bottom: 0.15em;
 			font-size: 1.2rem;
-			width: 1.1em;
-			height: 1.1em;
+			width: 1.15em;
+			height: 1.15em;
 			z-index: 100;
-			background: white;
-			color: var(--gray-dark-5);
-			border: 1px solid var(--gray-dark-5);
+			background: var(--color-surfaceFill);
+			color: var(--color-textPrimary);
+			border: 1px solid var(--color-textSecondary);
 		}
 
 		.maplibregl-popup-close-button:hover,
 		.maplibregl-popup-close-button:focus-visible {
-			background: var(--gray-light-5);
+			background: var(--color-surfaceFill);
 		}
 
 		.maplibregl-popup-tip {
@@ -174,8 +173,8 @@
 			height: 0.65rem;
 			background: var(--color-surfaceFill);
 			position: absolute;
-			border-right: 1px solid var(--gray-dark-5);
-			border-bottom: 1px solid var(--gray-dark-5);
+			border-right: 1px solid var(--color-surfaceBorder);
+			border-bottom: 1px solid var(--color-surfaceBorder);
 			z-index: 10;
 		}
 	}