From 9e431df12734f7d6d3082f6f018032fb8e032d62 Mon Sep 17 00:00:00 2001
From: Michael Kirk <michael.code@endoftheworl.de>
Date: Wed, 10 Jan 2024 11:31:18 -0800
Subject: [PATCH] [basemap] tweak water, background, building style

---
 services/frontend/www-app/src/components/BaseMap.vue | 11 ++++++-----
 services/tileserver/styles/basic/style.json          | 10 +++++-----
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/services/frontend/www-app/src/components/BaseMap.vue b/services/frontend/www-app/src/components/BaseMap.vue
index 781929ae0..e2e9c8aa4 100644
--- a/services/frontend/www-app/src/components/BaseMap.vue
+++ b/services/frontend/www-app/src/components/BaseMap.vue
@@ -607,7 +607,7 @@ export default defineComponent({
       }
 
       // Add 3-D buildings
-      const render3DZoomLevel = 15;
+      const render3DZoomLevel = 17;
       type LerpableValue =
         | maplibregl.ExpressionSpecification
         | maplibregl.ColorSpecification
@@ -647,10 +647,11 @@ export default defineComponent({
           type: 'fill-extrusion',
           minzoom: render3DZoomLevel,
           paint: {
-            'fill-extrusion-color': zoomLerp<maplibregl.ColorSpecification>(
-              'hsl(35, 8%, 85%)',
-              'hsl(35, 8%, 75%)'
-            ),
+            // This value is based on the background-fill of the "buildings" layer in tileserver/styles/basic/style.json
+            // But the extruded rendering appears "brighter", presumably due rendering lighting effects, so I've
+            // reduced the brightness here to compensate. What we want is an imperceptible transition between 2d and 3d
+            // as the user zooms in.
+            'fill-extrusion-color': 'hsl(40, 5.5%, 87%)',
             'fill-extrusion-height':
               zoomLerp<maplibregl.ExpressionSpecification>(0, [
                 '*',
diff --git a/services/tileserver/styles/basic/style.json b/services/tileserver/styles/basic/style.json
index 2d45f7ff2..e77e927d4 100644
--- a/services/tileserver/styles/basic/style.json
+++ b/services/tileserver/styles/basic/style.json
@@ -1,6 +1,6 @@
 {
   "version": 8,
-  "name": "OSM Liberty",
+  "name": "Headway Default",
   "metadata": {
     "maputnik:license": "https://github.com/maputnik/osm-liberty/blob/gh-pages/LICENSE.md",
     "maputnik:renderer": "mbgljs",
@@ -24,7 +24,7 @@
     {
       "id": "background",
       "type": "background",
-      "paint": {"background-color": "rgb(239,239,239)"}
+      "paint": {"background-color": "rgb(241,239,231)"}
     },
     {
       "id": "natural_earth",
@@ -159,7 +159,7 @@
       "source": "openmaptiles",
       "source-layer": "water",
       "filter": ["all", ["!=", "brunnel", "tunnel"]],
-      "paint": {"fill-color": "rgb(158,189,255)"}
+      "paint": {"fill-color": "rgb(141,220,248)"}
     },
     {
       "id": "waterway_river",
@@ -1225,10 +1225,10 @@
       "source-layer": "building",
       "minzoom": 13,
       "paint": {
-        "fill-color": "hsl(35, 8%, 85%)",
+        "fill-color": "hsl(40, 5.5%, 89.2%)",
         "fill-outline-color": {
           "base": 1,
-          "stops": [[13, "hsla(35, 6%, 79%, 0.32)"], [14, "hsl(35, 6%, 79%)"]]
+          "stops": [[13, "hsla(40, 6%, 79%, 0.32)"], [14, "hsl(40, 6%, 79%)"]]
         }
       }
     },