From 660cd7031d3a64f9fa9723a5a105b3f396526e91 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Thu, 25 Sep 2025 17:42:59 +0200
Subject: [PATCH 1/2] Tweak city label colours

---
 .../MapStyle/SWRDataLabDark.stories.svelte     | 13 +++++++++++++
 .../src/maplibre/MapStyle/SWRDataLabDark.ts    |  2 +-
 .../MapStyle/components/PlaceLabels.ts         | 18 ++++++++++++++----
 3 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/components/src/maplibre/MapStyle/SWRDataLabDark.stories.svelte b/components/src/maplibre/MapStyle/SWRDataLabDark.stories.svelte
index e70a8562..ef4fdf93 100644
--- a/components/src/maplibre/MapStyle/SWRDataLabDark.stories.svelte
+++ b/components/src/maplibre/MapStyle/SWRDataLabDark.stories.svelte
@@ -30,6 +30,18 @@
 	</DesignTokens>
 </Story>
 
+<Story asChild name="fix/173">
+	<DesignTokens theme="dark">
+		<div class="grid">
+			<div class="container">
+				<Map showDebug style={SWRDataLabDark()} initialLocation={{ ...locations.berlin, zoom: 11 }}>
+					<AttributionControl position="bottom-left" />
+				</Map>
+			</div>
+		</div>
+	</DesignTokens>
+</Story>
+
 <Story asChild name="Bodensee z9">
 	<DesignTokens theme="dark">
 		<div class="grid">
@@ -41,6 +53,7 @@
 		</div>
 	</DesignTokens>
 </Story>
+
 <Story asChild name="Frankfurt z11">
 	<DesignTokens theme="dark">
 		<div class="grid">
diff --git a/components/src/maplibre/MapStyle/SWRDataLabDark.ts b/components/src/maplibre/MapStyle/SWRDataLabDark.ts
index 2cf1608e..ca56c691 100644
--- a/components/src/maplibre/MapStyle/SWRDataLabDark.ts
+++ b/components/src/maplibre/MapStyle/SWRDataLabDark.ts
@@ -30,7 +30,7 @@ const tokens = {
 	street_secondary_case: 'hsl(0, 0%, 0%)',
 	street_tertiary: 'hsl(0, 0%, 20%)',
 	street_tertiary_case: 'hsl(0, 0%, 14%)',
-	label_primary: 'hsl(240, 5%, 82%)',
+	label_primary: 'hsl(240, 5%, 80%)',
 	label_secondary: 'hsl(0, 2%, 72%)',
 	label_tertiary: 'hsl(0, 1%, 55%)',
 	boundary_country: '#6e6f71',
diff --git a/components/src/maplibre/MapStyle/components/PlaceLabels.ts b/components/src/maplibre/MapStyle/components/PlaceLabels.ts
index 0f2279f7..f692b2f7 100644
--- a/components/src/maplibre/MapStyle/components/PlaceLabels.ts
+++ b/components/src/maplibre/MapStyle/components/PlaceLabels.ts
@@ -103,7 +103,7 @@ export default function makePlaceLabels(tokens) {
 			layout: {
 				'text-size': {
 					stops: [
-						[7, 12],
+						[7, 13],
 						[13, 17]
 					]
 				}
@@ -122,13 +122,18 @@ export default function makePlaceLabels(tokens) {
 			layout: {
 				'text-size': {
 					stops: [
-						[7, 16],
+						[7, 14],
 						[15, 20]
 					]
 				}
 			},
 			paint: {
-				'text-color': tokens.label_secondary
+				'text-color': {
+					stops: [
+						[7, tokens.label_tertiary],
+						[9, tokens.label_secondary]
+					]
+				}
 			}
 		},
 		{
@@ -145,7 +150,12 @@ export default function makePlaceLabels(tokens) {
 				}
 			},
 			paint: {
-				'text-color': tokens.label_tertiary
+				'text-color': {
+					stops: [
+						[7, tokens.label_tertiary],
+						[9, tokens.label_secondary]
+					]
+				}
 			}
 		}
 	].map((el) => {

From 71175d6f3539181ba571646d8d2db0eb7c1a60e0 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Thu, 25 Sep 2025 17:48:44 +0200
Subject: [PATCH 2/2] Tweak colours

---
 .../src/maplibre/GeocoderControl/GeocoderControl.svelte     | 2 +-
 components/src/maplibre/Map/Map.svelte                      | 2 +-
 components/src/maplibre/MapStyle/SWRDataLabDark.ts          | 2 +-
 components/src/maplibre/MapStyle/SWRDataLabLight.ts         | 6 +++---
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/src/maplibre/GeocoderControl/GeocoderControl.svelte b/components/src/maplibre/GeocoderControl/GeocoderControl.svelte
index 8630c86c..1aaf0aa8 100644
--- a/components/src/maplibre/GeocoderControl/GeocoderControl.svelte
+++ b/components/src/maplibre/GeocoderControl/GeocoderControl.svelte
@@ -68,7 +68,7 @@
 			font-family: var(--swr-sans);
 			font-size: var(--fs-small-1);
 			border-radius: var(--br-small);
-			border: 1px solid var(--color-surfaceBorder);
+			border: 1px solid var(--color-textSecondary);
 			box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.075);
 
 			button {
diff --git a/components/src/maplibre/Map/Map.svelte b/components/src/maplibre/Map/Map.svelte
index 46707789..3c9478ff 100644
--- a/components/src/maplibre/Map/Map.svelte
+++ b/components/src/maplibre/Map/Map.svelte
@@ -306,7 +306,7 @@
 
 		.maplibregl-ctrl-group {
 			background: var(--color-surfaceFill);
-			border: 1px solid var(--color-surfaceBorder);
+			border: 1px solid var(--color-textSecondary);
 			box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.075);
 			border-radius: var(--br-small);
 			overflow: hidden;
diff --git a/components/src/maplibre/MapStyle/SWRDataLabDark.ts b/components/src/maplibre/MapStyle/SWRDataLabDark.ts
index ca56c691..9d435c26 100644
--- a/components/src/maplibre/MapStyle/SWRDataLabDark.ts
+++ b/components/src/maplibre/MapStyle/SWRDataLabDark.ts
@@ -20,7 +20,7 @@ const tokens = {
 	},
 	water: 'hsl(210, 12%, 8%)',
 	water_light: 'hsl(210, 12%, 8%)',
-	water_ocean: 'hsl(210, 12%, 8%)',
+	water_ocean: 'hsl(214, 17%, 8%)',
 	marsh: 'hsl(180, 3%, 35%)',
 	grass: 'hsl(170, 20%, 14%)',
 	grass_dark: 'hsl(170, 16%, 12%)',
diff --git a/components/src/maplibre/MapStyle/SWRDataLabLight.ts b/components/src/maplibre/MapStyle/SWRDataLabLight.ts
index 32bf71c2..0e666aee 100644
--- a/components/src/maplibre/MapStyle/SWRDataLabLight.ts
+++ b/components/src/maplibre/MapStyle/SWRDataLabLight.ts
@@ -18,9 +18,9 @@ const tokens = {
 			[10, 'white']
 		]
 	},
-	water: 'hsl(210, 71%, 83%)',
-	water_light: 'hsl(210, 41%, 90%)',
-	water_ocean: 'hsl(209, 57%, 84%)',
+	water: 'hsl(212, 71%, 83%)',
+	water_light: 'hsl(212, 41%, 90%)',
+	water_ocean: 'hsl(212, 60%, 83%)',
 	marsh: 'hsl(200, 14%, 97%)',
 	grass: 'hsl(133, 36%, 95%)',
 	grass_dark: 'hsl(127, 49%, 93%)',