feat: SWRDataLabDark

components/src/DesignTokens/DesignTokens.svelte

@@ -56,11 +56,13 @@
 		--color-logoFill: var(--logoFill-light);
 		--color-pageFill: var(--pageFill-light);
 		--color-surfaceFill: var(--surfaceFill-light);
+		--color-surfaceBorder: var(--surfaceBorder-light);
 
 		&[data-theme='dark'] {
 			--color-logoFill: var(--logoFill-dark);
 			--color-pageFill: var(--pageFill-dark);
 			--color-surfaceFill: var(--surfaceFill-dark);
+			--color-surfaceBorder: var(--surfaceBorder-dark);
 			--color-textPrimary: var(--textPrimary-dark);
 			--color-textSecondary: var(--textSecondary-dark);
 			--color-textSecondaryHover: var(--textSecondaryHover-dark);

components/src/DesignTokens/Tokens.ts

@@ -175,7 +175,11 @@ const semantics: ColourMap = {
 	},
 	surfaceFill: {
 		dark: '#222325',
-		light: '#f1eeeb'
+		light: '#ffffff'
+	},
+	surfaceBorder: {
+		dark: shades.gray.dark1,
+		light: shades.gray.base
 	},
 	pageFill: {
 		dark: '#0C0C0C',

components/src/maplibre/AttributionControl/AttributionControl.stories.svelte

@@ -12,7 +12,7 @@
 </script>
 
 <Story asChild name="Default">
-	<DesignTokens>
+	<DesignTokens theme="light">
 		<div class="container">
 			<Map style={SWRDataLabLight()} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
 				<AttributionControl customAttribution="SWR Data Lab" position="bottom-left" />

components/src/maplibre/AttributionControl/AttributionControl.svelte

@@ -24,6 +24,7 @@
 			letter-spacing: 0.005em;
 			word-spacing: 0.005em;
 			font-family: var(--swr-sans);
+			color: var(--color-textSecondary);
 		}
 		.maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-inner {
 			display: block;

components/src/maplibre/GeoJSONSource/GeoJSONSource.stories.svelte

@@ -34,13 +34,13 @@
 </script>
 
 <Story asChild name="Default">
-	<DesignTokens>
+	<DesignTokens theme="light">
 		<div class="container">
 			<Map showDebug={true} style={SWRDataLabLight()}>
 				<GeoJSONSource id="demo" data={geoJSON} attribution="Demo attribution" />
 				<VectorLayer
 					sourceId="demo"
-					placeBelow="street-residential"
+					placeBelow="boundary-country"
 					id="test-outline"
 					type="line"
 					paint={{

components/src/maplibre/GeocoderControl/GeocoderControl.stories.svelte

@@ -31,7 +31,7 @@
 		});
 	}}
 >
-	<DesignTokens>
+	<DesignTokens theme="light">
 		<div class="container">
 			<Map style={SWRDataLabLight()} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
 				<GeocoderControl languages="de" service="maptiler" key="V32kPHZjMa0Mkn6YvSzA" />
@@ -56,7 +56,7 @@
 		});
 	}}
 >
-	<DesignTokens>
+	<DesignTokens theme="light">
 		<div class="container">
 			<Map style={SWRDataLabLight()} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
 				<GeocoderControl
@@ -71,7 +71,7 @@
 </Story>
 
 <Story asChild name="Long input">
-	<DesignTokens>
+	<DesignTokens theme="light">
 		<div class="container">
 			<Map style={SWRDataLabLight()} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
 				<GeocoderControl

components/src/maplibre/GeocoderControl/GeocoderControl.svelte

@@ -61,20 +61,24 @@
 <style lang="scss">
 	:global {
 		.maplibregl-ctrl-geocoder {
-			background-color: #fff;
+			background-color: var(--color-surfaceFill);
 			position: relative;
 			width: 100%;
 			z-index: 1;
 			font-family: var(--swr-sans);
 			font-size: var(--fs-small-1);
 			border-radius: var(--br-small);
-			border: 1px solid rgba(0, 0, 0, 0.75);
-			box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.075);
+			border: 1px solid var(--color-surfaceBorder);
+			box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.075);
+
+			button {
+				cursor: pointer;
+			}
 		}
 
 		.maplibre-gl-geocoder--error {
 			font-size: var(--fs-small-2);
-			color: var(--gray-dark-2);
+			color: var(--color-textSecondary);
 			padding: 0.4em 0.65em;
 		}
 
@@ -84,10 +88,10 @@
 			font-family: inherit;
 			font-size: inherit;
 			background-color: transparent;
-			color: var(--gray-dark-5);
+			color: var(--color-textPrimary);
 			border: 0;
-			height: 1.85em;
-			padding: 0 1.85em;
+			height: 1.95em;
+			padding: 0 1.95em;
 			padding-top: 0.1em;
 			text-overflow: ellipsis;
 			white-space: nowrap;
@@ -96,10 +100,10 @@
 
 		.maplibregl-ctrl-geocoder--input::placeholder {
 			opacity: 1;
-			color: var(--gray-dark-2);
+			color: var(--color-textSecondary);
 		}
 		.maplibregl-ctrl-geocoder--input:focus {
-			color: var(--gray-dark-5);
+			color: var(--color-textPrimary);
 			outline: 0;
 		}
 
@@ -115,7 +119,7 @@
 
 		/* Suggestions */
 		.maplibregl-ctrl-geocoder .suggestions {
-			background: white;
+			background: var(--color-surfaceFill);
 			border: 1px solid rgba(0, 0, 0, 0.75);
 			box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
 			border-radius: var(--br-small);
@@ -140,15 +144,15 @@
 			padding: 0.5em 0.75em;
 			color: var(--gray-dark-5);
 			padding-bottom: 0.5em;
-			border-bottom: 1px solid var(--gray-light-3);
+			border-bottom: 1px solid var(--color-surfaceBorder);
 		}
 		.maplibregl-ctrl-geocoder .suggestions > li:last-child > a {
 			border-bottom: 0;
 		}
 
 		.maplibregl-ctrl-geocoder .suggestions > .active > a,
 		.maplibregl-ctrl-geocoder .suggestions > li > a:hover {
-			background: var(--gray-light-5);
+			background: var(--color-surfaceHover);
 			text-decoration: none;
 			cursor: pointer;
 		}
@@ -180,12 +184,13 @@
 			display: none;
 		}
 		.maplibregl-ctrl-geocoder--result-title {
+			color: var(--color-textPrimary);
 			font-weight: 600;
 			letter-spacing: 0;
 		}
 		.maplibregl-ctrl-geocoder--result-address {
 			font-size: var(--fs-small-2);
-			color: var(--gray-dark-2);
+			color: var(--color-textSecondary);
 			line-height: 1.3;
 		}
 
@@ -195,6 +200,9 @@
 			top: 50%;
 			transform: translateY(-50%);
 			height: 1em;
+			path {
+				fill: var(--color-textPrimary);
+			}
 		}
 
 		.maplibregl-ctrl-geocoder--icon-close {

components/src/maplibre/Map/Map.stories.svelte

@@ -69,7 +69,7 @@
 	}}
 >
 	<div class="container">
-		<DesignTokens>
+		<DesignTokens theme="light">
 			<Map style={SWRDataLabLight()}>
 				<ScaleControl />
 				<AttributionControl />
@@ -105,7 +105,7 @@
 	}}
 >
 	<div class="container">
-		<DesignTokens>
+		<DesignTokens theme="light">
 			<button
 				data-testid="flyto-berlin"
 				onclick={() => {
@@ -133,7 +133,7 @@
 
 <Story asChild name="Globe Projection">
 	<div class="container">
-		<DesignTokens>
+		<DesignTokens theme="light">
 			<Map
 				style={SWRDataLabLight()}
 				showDebug
@@ -151,12 +151,12 @@
 </Story>
 <Story asChild name="Cooperative Gestures">
 	<div class="container">
-		<DesignTokens>
+		<DesignTokens theme="light">
 			<div class="placeholder">Placeholder</div>
 			<Map
+				showDebug
 				cooperativeGestures
 				style={SWRDataLabLight()}
-				showDebug
 				initialLocation={{ lat: 51.3, lng: 10.2, zoom: 5 }}
 			>
 				<ScaleControl />
@@ -170,7 +170,7 @@
 
 <Story asChild name="Alternate Style">
 	<div class="container dark">
-		<DesignTokens>
+		<DesignTokens theme="dark">
 			<Map style={alternateStyle}>
 				<ScaleControl />
 				<AttributionControl />

components/src/maplibre/Map/Map.svelte

@@ -147,9 +147,7 @@
 		}
 	});
 
-	const debugValues = $derived(
-		Object.entries({ ...center, zoom, pitch, allowZoom, allowRotation })
-	);
+	const debugValues = $derived(Object.entries({ zoom, pitch, allowZoom, allowRotation }));
 	const handleDebugValueClick = (e: MouseEvent) => {
 		if (e.target) {
 			const t = e.target as HTMLElement;
@@ -173,10 +171,12 @@
 	{/if}
 	{#if showDebug}
 		<ul class="debug">
+			<li>
+				[{center?.lat.toFixed(2)}, {center?.lng.toFixed(2)}]
+			</li>
 			{#each debugValues as [key, value]}
 				<li>
-					{key}:
-					<button onclick={handleDebugValueClick}
+					{key}=<button onclick={handleDebugValueClick}
 						>{value?.toLocaleString('en', { maximumSignificantDigits: 6 })}</button
 					>
 				</li>
@@ -196,11 +196,14 @@
 		position: absolute;
 		top: 0;
 		right: 0;
-		background: rgba(0, 0, 0, 0.9);
+		background: rgba(0, 0, 0, 0.75);
 		color: white;
 		z-index: 1000;
 		padding: 2px;
+		font-size: 10px;
 		font-family: monospace;
+		display: flex;
+		gap: 1em;
 		li {
 			list-style: none;
 		}
@@ -209,7 +212,9 @@
 			background: transparent;
 			font-family: inherit;
 			color: inherit;
+			font-size: inherit;
 			border: 0;
+			text-transform: uppercase;
 			cursor: pointer;
 			&:hover,
 			&:focus-visible {
@@ -300,15 +305,16 @@
 		}
 
 		.maplibregl-ctrl-group {
-			background: white;
-			border: 1px solid rgba(0, 0, 0, 0.75);
+			background: var(--color-surfaceFill);
+			border: 1px solid var(--color-surfaceBorder);
 			box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.075);
 			border-radius: var(--br-small);
 			overflow: hidden;
 		}
 
 		.maplibregl-ctrl-group button {
 			background-color: transparent;
+			color: var(--color-textPrimary);
 			border: 0;
 			box-sizing: border-box;
 			cursor: pointer;
@@ -320,7 +326,7 @@
 		}
 
 		.maplibregl-ctrl-group button + button {
-			border-top: 1px solid rgba(0, 0, 0, 0.35);
+			border-top: 1px solid var(--color-surfaceBorder);
 		}
 
 		.maplibregl-ctrl button .maplibregl-ctrl-icon {
@@ -340,7 +346,7 @@
 		}
 
 		.maplibregl-ctrl button:not(:disabled):hover {
-			background-color: var(--gray-light-5);
+			background-color: var(--color-surfaceHover);
 		}
 
 		.maplibregl-ctrl-group button:focus:focus-visible {
@@ -352,11 +358,11 @@
 		}
 
 		.maplibregl-ctrl-group button:focus:first-child {
-			border-radius: 4px 4px 0 0;
+			border-radius: 2px 2px 0 0;
 		}
 
 		.maplibregl-ctrl-group button:focus:last-child {
-			border-radius: 0 0 4px 4px;
+			border-radius: 0 0 2px 2px;
 		}
 
 		.maplibregl-ctrl-group button:focus:only-child {
@@ -369,7 +375,7 @@
 			will-change: transform;
 		}
 		.maplibregl-marker path {
-			fill: var(--violet-dark-5);
+			fill: var(--color-textPrimary);
 		}
 		.maplibregl-cooperative-gesture-screen {
 			align-items: center;