diff --git a/CHANGELOG.md b/CHANGELOG.md
index fb296ae5..2e2e7529 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,13 @@
+# 5.0.0
+
+This is a breaking major version change.
+
+* Now only works with the protomaps basemap tileset v4.0 and above. [#177]
+* visualize the `landcover` layer in the light and dark flavors.
+* replace `theme` option with `flavor` in frontends.
+* Add a `lang` option to frontends to change the label language. [#157]
+* depend on the `@protomaps/basemaps` package for flavor definitions.
+
 # 4.1.0
 * clarify types of `LeafletLayerOptions` and `leafletLayer` via @jwasilgeo [#179]
 
diff --git a/benchmark/index.html b/benchmark/index.html
index 959ea92e..9acbeb59 100644
--- a/benchmark/index.html
+++ b/benchmark/index.html
@@ -6,7 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
         <script src="pixelmatch.js"></script>
-        <script src="https://unpkg.com/protomaps-leaflet@4.1.1/dist/protomaps-leaflet.js"></script>
+        <script src="https://unpkg.com/protomaps-leaflet@5.0.0/dist/protomaps-leaflet.js"></script>
         <!-- <script src="../dist/protomaps-leaflet.js"></script> -->
         <style>
             html {
diff --git a/examples/comparison.html b/examples/comparison.html
index 89cf0162..48536cea 100644
--- a/examples/comparison.html
+++ b/examples/comparison.html
@@ -9,7 +9,7 @@
         <link rel="stylesheet" href="https://unpkg.com/maplibre-gl@3.3.1/dist/maplibre-gl.css" crossorigin="anonymous">
         <script src="https://unpkg.com/maplibre-gl@3.3.1/dist/maplibre-gl.js" crossorigin="anonymous"></script>
         <script src="https://unpkg.com/@maplibre/maplibre-gl-leaflet@0.0.20/leaflet-maplibre-gl.js"></script>
-        <script src="https://unpkg.com/protomaps-leaflet@4.1.1/dist/protomaps-leaflet.js"></script>
+        <script src="https://unpkg.com/protomaps-leaflet@5.0.0/dist/protomaps-leaflet.js"></script>
         <!-- <script src="../dist/protomaps-leaflet.js"></script> -->
         <style>
             #parent {
@@ -31,7 +31,7 @@
             const map = L.map('leaflet');
             let hash = new L.Hash(map)
             if (!window.location.hash) map.setView(new L.LatLng(0,0),0)
-            var layer = protomapsL.leafletLayer({url:'https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=1003762824b9687f',theme:theme})
+            var layer = protomapsL.leafletLayer({url:'https://api.protomaps.com/tiles/v4/{z}/{x}/{y}.mvt?key=1003762824b9687f',theme:theme})
             layer.addTo(map)
 
             const map2 = L.map('map2')
@@ -42,7 +42,7 @@
                     sources:{
                         protomaps:{
                             type:"vector",
-                            tiles:['https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=1003762824b9687f'],
+                            tiles:['https://api.protomaps.com/tiles/v4/{z}/{x}/{y}.mvt?key=1003762824b9687f'],
                             maxzoom: 15
                         }
                     },
diff --git a/examples/fonts.html b/examples/fonts.html
index bcf5f069..2060b4d6 100644
--- a/examples/fonts.html
+++ b/examples/fonts.html
@@ -5,7 +5,7 @@
         <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
         <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
         <script src="https://unpkg.com/leaflet-hash@0.2.1/leaflet-hash.js"></script>
-        <script src="https://unpkg.com/protomaps-leaflet@4.1.1/dist/protomaps-leaflet.js"></script>
+        <script src="https://unpkg.com/protomaps-leaflet@5.0.0/dist/protomaps-leaflet.js"></script>
         <!-- <script src="../dist/protomaps-leaflet.js"></script> -->
 
         <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Work+Sans:wght@100..900&family=Petrona:wght@100..900&family=Raleway:wght@100..900" rel="stylesheet">
@@ -91,7 +91,7 @@
             }
 
             let layer = protomapsL.leafletLayer({
-                url:'https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=1003762824b9687f',
+                url:'https://api.protomaps.com/tiles/v4/{z}/{x}/{y}.mvt?key=1003762824b9687f',
                 paintRules:paintRules,
                 labelRules:labelRulesWithFont("sans-serif"),
                 tasks:[document.fonts.load("12px Work Sans"),document.fonts.load("12px Manrope"),document.fonts.load("12px Inter"),document.fonts.load("12px Petrona"),document.fonts.load("12px Raleway")]
diff --git a/examples/inset.html b/examples/inset.html
index 0e304279..3fab81ba 100644
--- a/examples/inset.html
+++ b/examples/inset.html
@@ -2,7 +2,7 @@
     <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        <script src="https://unpkg.com/protomaps-leaflet@4.1.1/dist/protomaps-leaflet.js"></script>
+        <script src="https://unpkg.com/protomaps-leaflet@5.0.0/dist/protomaps-leaflet.js"></script>
         <!-- <script src="../dist/protomaps-leaflet.js"></script> -->
         <style>
             #map {
@@ -23,7 +23,7 @@
             canvas.height = 600 * dpr
             let ctx = canvas.getContext('2d')
             ctx.scale(dpr,dpr)
-            let map = new protomapsL.Static({url:"https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=1003762824b9687f", theme: "light"})
+            let map = new protomapsL.Static({url:"https://api.protomaps.com/tiles/v4/{z}/{x}/{y}.mvt?key=1003762824b9687f", theme: "light"})
             let {project} = await map.drawContext(ctx,800,600,{y:22.1777,x:114.1635},10)
             let highlight = project({y:22.2777,x:114.1635})
             ctx.globalAlpha = 0.2
diff --git a/examples/labels.html b/examples/labels.html
index 8dff17f1..92e34813 100644
--- a/examples/labels.html
+++ b/examples/labels.html
@@ -5,7 +5,7 @@
         <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
         <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
         <script src="https://unpkg.com/leaflet-hash@0.2.1/leaflet-hash.js"></script>
-        <script src="https://unpkg.com/protomaps-leaflet@4.1.1/dist/protomaps-leaflet.js"></script>
+        <script src="https://unpkg.com/protomaps-leaflet@5.0.0/dist/protomaps-leaflet.js"></script>
         <!-- <script src="../dist/protomaps-leaflet.js"></script> -->
         <style>
             body, #map {
@@ -41,7 +41,7 @@
                 }
             ]
 
-            let labels = protomapsL.leafletLayer({url:'https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=1003762824b9687f',paintRules:[],labelRules:labelRules})
+            let labels = protomapsL.leafletLayer({url:'https://api.protomaps.com/tiles/v4/{z}/{x}/{y}.mvt?key=1003762824b9687f',paintRules:[],labelRules:labelRules})
             labels.addTo(map)
         </script>
     </body>
diff --git a/examples/leaflet.html b/examples/leaflet.html
index 5295da29..ff22b148 100644
--- a/examples/leaflet.html
+++ b/examples/leaflet.html
@@ -5,7 +5,7 @@
         <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
         <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
         <script src="https://unpkg.com/leaflet-hash@0.2.1/leaflet-hash.js"></script>
-        <script src="https://unpkg.com/protomaps-leaflet@4.1.1/dist/protomaps-leaflet.js"></script>
+        <script src="https://unpkg.com/protomaps-leaflet@5.0.0/dist/protomaps-leaflet.js"></script>
         <!-- <script src="../dist/protomaps-leaflet.js"></script> -->
         <style>
             body, #map {
@@ -20,7 +20,7 @@
             const map = L.map('map')
             let hash = new L.Hash(map)
             if (!window.location.hash) map.setView(new L.LatLng(0,0),0)
-            var layer = protomapsL.leafletLayer({url:'https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=1003762824b9687f',theme:'light'})
+            var layer = protomapsL.leafletLayer({url:'https://api.protomaps.com/tiles/v4/{z}/{x}/{y}.mvt?key=1003762824b9687f',flavor:'light', lang: "en"})
             layer.addTo(map)
 
             map.on("click", (ev) => {
diff --git a/examples/multi_source.html b/examples/multi_source.html
index 1d07c5af..decd0290 100644
--- a/examples/multi_source.html
+++ b/examples/multi_source.html
@@ -5,7 +5,7 @@
         <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
         <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
         <script src="https://unpkg.com/leaflet-hash@0.2.1/leaflet-hash.js"></script>
-        <script src="https://unpkg.com/protomaps-leaflet@4.1.1/dist/protomaps-leaflet.js"></script>
+        <script src="https://unpkg.com/protomaps-leaflet@5.0.0/dist/protomaps-leaflet.js"></script>
         <!-- <script src="../dist/protomaps-leaflet.js"></script> -->
         <style>
             body, #map {
@@ -19,8 +19,8 @@
         <canvas id="map"></canvas>
         <script>
             let sources = {
-                '':{url:'https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=1003762824b9687f'},
-                'source2':{url:'https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=1003762824b9687f',maxDataZoom:10}
+                '':{url:'https://api.protomaps.com/tiles/v4/{z}/{x}/{y}.mvt?key=1003762824b9687f'},
+                'source2':{url:'https://api.protomaps.com/tiles/v4/{z}/{x}/{y}.mvt?key=1003762824b9687f',maxDataZoom:10}
             }
 
             let paintRules = [
diff --git a/examples/pmtiles.html b/examples/pmtiles.html
index c3515687..acb0fd23 100644
--- a/examples/pmtiles.html
+++ b/examples/pmtiles.html
@@ -4,7 +4,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
         <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
-        <script src="https://unpkg.com/protomaps-leaflet@4.1.1/dist/protomaps-leaflet.js"></script>
+        <script src="https://unpkg.com/protomaps-leaflet@5.0.0/dist/protomaps-leaflet.js"></script>
         <!-- <script src="../dist/protomaps-leaflet.js"></script> -->
         <style>
             body, #map {
@@ -17,7 +17,7 @@
         <div id="map"></div> 
         <script>
             const map = L.map('map')
-            var layer = protomapsL.leafletLayer({url:'https://data.source.coop/protomaps/openstreetmap/tiles/v3.pmtiles',theme:'black'})
+            var layer = protomapsL.leafletLayer({url:'https://data.source.coop/protomaps/openstreetmap/v4.pmtiles',theme:'black'})
             map.setView(new L.LatLng(0,0),0)
             layer.addTo(map)
         </script>
diff --git a/examples/pmtiles_headers.html b/examples/pmtiles_headers.html
index 5fb05b36..a8f3df68 100644
--- a/examples/pmtiles_headers.html
+++ b/examples/pmtiles_headers.html
@@ -5,7 +5,7 @@
         <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
         <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
         <script src="https://unpkg.com/pmtiles@3.0.3/dist/pmtiles.js"></script>
-        <script src="https://unpkg.com/protomaps-leaflet@4.1.1/dist/protomaps-leaflet.js"></script>
+        <script src="https://unpkg.com/protomaps-leaflet@5.0.0/dist/protomaps-leaflet.js"></script>
         <!-- <script src="../dist/protomaps-leaflet.js"></script> -->
         <style>
             body, #map {
@@ -19,7 +19,7 @@
         <script>
             const map = L.map('map')
 
-            const source = new pmtiles.FetchSource("https://data.source.coop/protomaps/openstreetmap/tiles/v3.pmtiles", {"x-custom-header":"value"});
+            const source = new pmtiles.FetchSource("https://data.source.coop/protomaps/openstreetmap/v4.pmtiles", {"x-custom-header":"value"});
 
             const p = new pmtiles.PMTiles(source)
             var layer = protomapsL.leafletLayer({url:p,theme:'black'})
diff --git a/examples/sandwich.html b/examples/sandwich.html
index e1db42ef..6561cce6 100644
--- a/examples/sandwich.html
+++ b/examples/sandwich.html
@@ -5,7 +5,7 @@
         <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
         <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
         <script src="https://unpkg.com/leaflet-hash@0.2.1/leaflet-hash.js"></script>
-        <script src="https://unpkg.com/protomaps-leaflet@4.1.1/dist/protomaps-leaflet.js"></script>
+        <script src="https://unpkg.com/protomaps-leaflet@5.0.0/dist/protomaps-leaflet.js"></script>
         <!-- <script src="../dist/protomaps-leaflet.js"></script> -->
         <style>
             body, #map {
@@ -54,7 +54,7 @@
                 }
 
             ]
-            let paint = protomapsL.leafletLayer({url:'https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=1003762824b9687f',paintRules:paintRules,labelRules:[]})
+            let paint = protomapsL.leafletLayer({url:'https://api.protomaps.com/tiles/v4/{z}/{x}/{y}.mvt?key=1003762824b9687f',paintRules:paintRules,labelRules:[]})
             paint.addTo(map)
 
             let labelRules = [
@@ -71,7 +71,7 @@
 
             // https://leafletjs.com/examples/map-panes/
             map.createPane('labels');
-            let labels = protomapsL.leafletLayer({url:'https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=1003762824b9687f',paintRules:[],labelRules:labelRules,pane:'labels'})
+            let labels = protomapsL.leafletLayer({url:'https://api.protomaps.com/tiles/v4/{z}/{x}/{y}.mvt?key=1003762824b9687f',paintRules:[],labelRules:labelRules,pane:'labels'})
             labels.addTo(map)
         </script>
     </body>
diff --git a/examples/sprites.html b/examples/sprites.html
index ab2f4b0c..f41fe16a 100644
--- a/examples/sprites.html
+++ b/examples/sprites.html
@@ -5,7 +5,7 @@
         <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
         <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
         <script src="https://unpkg.com/leaflet-hash@0.2.1/leaflet-hash.js"></script>
-        <script src="https://unpkg.com/protomaps-leaflet@4.1.1/dist/protomaps-leaflet.js"></script>
+        <script src="https://unpkg.com/protomaps-leaflet@5.0.0/dist/protomaps-leaflet.js"></script>
         <!-- <script src="../dist/protomaps-leaflet.js"></script> -->
         <style>
             body, #map {
@@ -20,7 +20,7 @@
             const map = L.map('map')
             let hash = new L.Hash(map)
             if (!window.location.hash) map.setView(new L.LatLng(25.0412,121.5177),16)
-            let url = 'https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=1003762824b9687f'
+            let url = 'https://api.protomaps.com/tiles/v4/{z}/{x}/{y}.mvt?key=1003762824b9687f'
 
             const ICONS = `
             <html>
diff --git a/examples/static.html b/examples/static.html
index b776a7a4..336c6d22 100644
--- a/examples/static.html
+++ b/examples/static.html
@@ -2,7 +2,7 @@
     <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        <script src="https://unpkg.com/protomaps-leaflet@4.1.1/dist/protomaps-leaflet.js"></script>
+        <script src="https://unpkg.com/protomaps-leaflet@5.0.0/dist/protomaps-leaflet.js"></script>
         <!-- <script src="../dist/protomaps-leaflet.js"></script> -->
         <style>
             #map {
@@ -22,7 +22,7 @@
        <script>
         let canvas = document.getElementById("map")
         var zoom = 11
-        let map = new protomapsL.Static({url:"https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=1003762824b9687f",theme:"dark"})
+        let map = new protomapsL.Static({url:"https://api.protomaps.com/tiles/v4/{z}/{x}/{y}.mvt?key=1003762824b9687f",theme:"dark"})
         let center = {y:37.7658,x:-122.4221}
         map.drawCanvas(canvas,center,zoom)
         document.getElementById("zoom").innerHTML = zoom
diff --git a/package-lock.json b/package-lock.json
index 1a5f0a29..8df22f9e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,16 +1,17 @@
 {
   "name": "protomaps-leaflet",
-  "version": "4.1.1",
+  "version": "5.0.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "protomaps-leaflet",
-      "version": "4.1.1",
+      "version": "5.0.0",
       "license": "BSD-3-Clause",
       "dependencies": {
         "@mapbox/point-geometry": "^1.1.0",
         "@mapbox/vector-tile": "^2.0.2",
+        "@protomaps/basemaps": "^5.0.0",
         "@types/css-font-loading-module": "^0.0.7",
         "@types/rbush": "^3.0.0",
         "color2k": "^2.0.3",
@@ -21,6 +22,7 @@
       },
       "devDependencies": {
         "@biomejs/biome": "^1.5.3",
+        "@maplibre/maplibre-gl-style-spec": "^23.1.0",
         "@types/leaflet": "^1.9.8",
         "@types/node": "^16.18.74",
         "tslib": "^2.3.0",
@@ -306,12 +308,28 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@mapbox/jsonlint-lines-primitives": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
+      "integrity": "sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/@mapbox/point-geometry": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-1.1.0.tgz",
       "integrity": "sha512-YGcBz1cg4ATXDCM/71L9xveh4dynfGmcLDqufR+nQQy3fKwsAZsWd/x4621/6uJaeB9mwOHE6hPeDgXz9uViUQ==",
       "license": "ISC"
     },
+    "node_modules/@mapbox/unitbezier": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.1.tgz",
+      "integrity": "sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw==",
+      "dev": true,
+      "license": "BSD-2-Clause"
+    },
     "node_modules/@mapbox/vector-tile": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@mapbox/vector-tile/-/vector-tile-2.0.3.tgz",
@@ -323,6 +341,34 @@
         "pbf": "^4.0.1"
       }
     },
+    "node_modules/@maplibre/maplibre-gl-style-spec": {
+      "version": "23.1.0",
+      "resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-style-spec/-/maplibre-gl-style-spec-23.1.0.tgz",
+      "integrity": "sha512-R6/ihEuC5KRexmKIYkWqUv84Gm+/QwsOUgHyt1yy2XqCdGdLvlBWVWIIeTZWN4NGdwmY6xDzdSGU2R9oBLNg2w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "@mapbox/jsonlint-lines-primitives": "~2.0.2",
+        "@mapbox/unitbezier": "^0.0.1",
+        "json-stringify-pretty-compact": "^4.0.0",
+        "minimist": "^1.2.8",
+        "quickselect": "^3.0.0",
+        "rw": "^1.3.3",
+        "tinyqueue": "^3.0.0"
+      },
+      "bin": {
+        "gl-style-format": "dist/gl-style-format.mjs",
+        "gl-style-migrate": "dist/gl-style-migrate.mjs",
+        "gl-style-validate": "dist/gl-style-validate.mjs"
+      }
+    },
+    "node_modules/@maplibre/maplibre-gl-style-spec/node_modules/quickselect": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-3.0.0.tgz",
+      "integrity": "sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -334,6 +380,12 @@
         "node": ">=14"
       }
     },
+    "node_modules/@protomaps/basemaps": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@protomaps/basemaps/-/basemaps-5.0.0.tgz",
+      "integrity": "sha512-lp+2ktb9gC9jZ/2L2AKvuQt36MNV1lJPOxDHA3IgD09roloxgp6QwXcMyE36ijGKMuKUiYKnmUuT9ouVhNgdLA==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.35.0",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.35.0.tgz",
@@ -1377,6 +1429,13 @@
         "node": ">=10"
       }
     },
+    "node_modules/json-stringify-pretty-compact": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/json-stringify-pretty-compact/-/json-stringify-pretty-compact-4.0.0.tgz",
+      "integrity": "sha512-3CNZ2DnrpByG9Nqj6Xo8vqbjT4F6N+tb4Gb28ESAZjYZ5yqvmc56J+/kuIwkaAMOyblTQhUW7PxMkUb8Q36N3Q==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/lilconfig": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.2.tgz",
@@ -1437,6 +1496,16 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/minipass": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
@@ -1719,6 +1788,13 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==",
+      "dev": true,
+      "license": "BSD-3-Clause"
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -1929,6 +2005,13 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
+    "node_modules/tinyqueue": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-3.0.0.tgz",
+      "integrity": "sha512-gRa9gwYU3ECmQYv3lslts5hxuIa90veaEcxDYuu3QGOIAEM2mOZkVHp48ANJuu1CURtRdHKUBY5Lm1tHV+sD4g==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/tr46": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz",
@@ -2329,11 +2412,23 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "@mapbox/jsonlint-lines-primitives": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
+      "integrity": "sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ==",
+      "dev": true
+    },
     "@mapbox/point-geometry": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-1.1.0.tgz",
       "integrity": "sha512-YGcBz1cg4ATXDCM/71L9xveh4dynfGmcLDqufR+nQQy3fKwsAZsWd/x4621/6uJaeB9mwOHE6hPeDgXz9uViUQ=="
     },
+    "@mapbox/unitbezier": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.1.tgz",
+      "integrity": "sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw==",
+      "dev": true
+    },
     "@mapbox/vector-tile": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@mapbox/vector-tile/-/vector-tile-2.0.3.tgz",
@@ -2344,6 +2439,29 @@
         "pbf": "^4.0.1"
       }
     },
+    "@maplibre/maplibre-gl-style-spec": {
+      "version": "23.1.0",
+      "resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-style-spec/-/maplibre-gl-style-spec-23.1.0.tgz",
+      "integrity": "sha512-R6/ihEuC5KRexmKIYkWqUv84Gm+/QwsOUgHyt1yy2XqCdGdLvlBWVWIIeTZWN4NGdwmY6xDzdSGU2R9oBLNg2w==",
+      "dev": true,
+      "requires": {
+        "@mapbox/jsonlint-lines-primitives": "~2.0.2",
+        "@mapbox/unitbezier": "^0.0.1",
+        "json-stringify-pretty-compact": "^4.0.0",
+        "minimist": "^1.2.8",
+        "quickselect": "^3.0.0",
+        "rw": "^1.3.3",
+        "tinyqueue": "^3.0.0"
+      },
+      "dependencies": {
+        "quickselect": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-3.0.0.tgz",
+          "integrity": "sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g==",
+          "dev": true
+        }
+      }
+    },
     "@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -2351,6 +2469,11 @@
       "dev": true,
       "optional": true
     },
+    "@protomaps/basemaps": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@protomaps/basemaps/-/basemaps-5.0.0.tgz",
+      "integrity": "sha512-lp+2ktb9gC9jZ/2L2AKvuQt36MNV1lJPOxDHA3IgD09roloxgp6QwXcMyE36ijGKMuKUiYKnmUuT9ouVhNgdLA=="
+    },
     "@rollup/rollup-android-arm-eabi": {
       "version": "4.35.0",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.35.0.tgz",
@@ -2917,6 +3040,12 @@
       "integrity": "sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==",
       "dev": true
     },
+    "json-stringify-pretty-compact": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/json-stringify-pretty-compact/-/json-stringify-pretty-compact-4.0.0.tgz",
+      "integrity": "sha512-3CNZ2DnrpByG9Nqj6Xo8vqbjT4F6N+tb4Gb28ESAZjYZ5yqvmc56J+/kuIwkaAMOyblTQhUW7PxMkUb8Q36N3Q==",
+      "dev": true
+    },
     "lilconfig": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.2.tgz",
@@ -2956,6 +3085,12 @@
         "brace-expansion": "^2.0.1"
       }
     },
+    "minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "dev": true
+    },
     "minipass": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
@@ -3135,6 +3270,12 @@
         "fsevents": "~2.3.2"
       }
     },
+    "rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==",
+      "dev": true
+    },
     "shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -3279,6 +3420,12 @@
         "picomatch": "^4.0.2"
       }
     },
+    "tinyqueue": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-3.0.0.tgz",
+      "integrity": "sha512-gRa9gwYU3ECmQYv3lslts5hxuIa90veaEcxDYuu3QGOIAEM2mOZkVHp48ANJuu1CURtRdHKUBY5Lm1tHV+sD4g==",
+      "dev": true
+    },
     "tr46": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz",
diff --git a/package.json b/package.json
index 772f439b..037955d3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "protomaps-leaflet",
-  "version": "4.1.1",
+  "version": "5.0.0",
   "files": [
     "dist",
     "src"
@@ -24,6 +24,7 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^1.5.3",
+    "@maplibre/maplibre-gl-style-spec": "^23.1.0",
     "@types/leaflet": "^1.9.8",
     "@types/node": "^16.18.74",
     "tslib": "^2.3.0",
@@ -34,6 +35,7 @@
   "dependencies": {
     "@mapbox/point-geometry": "^1.1.0",
     "@mapbox/vector-tile": "^2.0.2",
+    "@protomaps/basemaps": "^5.0.0",
     "@types/css-font-loading-module": "^0.0.7",
     "@types/rbush": "^3.0.0",
     "color2k": "^2.0.3",
diff --git a/src/default_style/style.ts b/src/default_style/style.ts
index bc8220a5..bf85128e 100644
--- a/src/default_style/style.ts
+++ b/src/default_style/style.ts
@@ -1,3 +1,4 @@
+import { type Flavor } from "@protomaps/basemaps";
 import { mix } from "color2k";
 import { LabelRule } from "../labeler";
 import { PaintRule } from "../painter";
@@ -12,8 +13,7 @@ import {
   exp,
   linear,
 } from "../symbolizer";
-import { Feature, JsonObject } from "../tilecache";
-import { Theme } from "./themes";
+import { Feature, GeomType, JsonObject } from "../tilecache";
 
 const getString = (props: JsonObject, key: string): string => {
   const val = props[key];
@@ -27,7 +27,7 @@ const getNumber = (props: JsonObject, key: string): number => {
   return 0;
 };
 
-export const paintRules = (t: Theme): PaintRule[] => {
+export const paintRules = (t: Flavor): PaintRule[] => {
   return [
     {
       dataLayer: "earth",
@@ -35,6 +35,31 @@ export const paintRules = (t: Theme): PaintRule[] => {
         fill: t.earth,
       }),
     },
+    ...(t.landcover
+      ? [
+          {
+            dataLayer: "landcover",
+            symbolizer: new PolygonSymbolizer({
+              fill: (z, f) => {
+                const landcover = t.landcover;
+                if (!landcover || !f) return "";
+                const kind = getString(f.props, "kind");
+                if (kind === "grassland") return landcover.grassland;
+                if (kind === "barren") return landcover.barren;
+                if (kind === "urban_area") return landcover.urban_area;
+                if (kind === "farmland") return landcover.farmland;
+                if (kind === "glacier") return landcover.glacier;
+                if (kind === "scrub") return landcover.scrub;
+                return landcover.forest;
+              },
+              opacity: (z, f) => {
+                if (z === 8) return 0.5;
+                return 1;
+              },
+            }),
+          },
+        ]
+      : []),
     {
       dataLayer: "landuse",
       symbolizer: new PolygonSymbolizer({
@@ -43,19 +68,22 @@ export const paintRules = (t: Theme): PaintRule[] => {
         },
       }),
       filter: (z, f) => {
-        const kind = getString(f.props, "pmap:kind");
+        const kind = getString(f.props, "kind");
         return ["allotments", "village_green", "playground"].includes(kind);
       },
     },
     {
-      // landuse_urban_green
       dataLayer: "landuse",
       symbolizer: new PolygonSymbolizer({
         fill: t.park_b,
-        opacity: 0.7,
+        opacity: (z, f) => {
+          if (z < 8) return 0;
+          if (z === 8) return 0.5;
+          return 1;
+        },
       }),
       filter: (z, f) => {
-        const kind = getString(f.props, "pmap:kind");
+        const kind = getString(f.props, "kind");
         return [
           "national_park",
           "park",
@@ -73,7 +101,7 @@ export const paintRules = (t: Theme): PaintRule[] => {
         fill: t.hospital,
       }),
       filter: (z, f) => {
-        return f.props["pmap:kind"] === "hospital";
+        return f.props.kind === "hospital";
       },
     },
     {
@@ -82,7 +110,7 @@ export const paintRules = (t: Theme): PaintRule[] => {
         fill: t.industrial,
       }),
       filter: (z, f) => {
-        return f.props["pmap:kind"] === "industrial";
+        return f.props.kind === "industrial";
       },
     },
     {
@@ -91,7 +119,7 @@ export const paintRules = (t: Theme): PaintRule[] => {
         fill: t.school,
       }),
       filter: (z, f) => {
-        const kind = getString(f.props, "pmap:kind");
+        const kind = getString(f.props, "kind");
         return ["school", "university", "college"].includes(kind);
       },
     },
@@ -101,7 +129,7 @@ export const paintRules = (t: Theme): PaintRule[] => {
         fill: t.beach,
       }),
       filter: (z, f) => {
-        return f.props["pmap:kind"] === "beach";
+        return f.props.kind === "beach";
       },
     },
     {
@@ -110,7 +138,7 @@ export const paintRules = (t: Theme): PaintRule[] => {
         fill: t.zoo,
       }),
       filter: (z, f) => {
-        return f.props["pmap:kind"] === "zoo";
+        return f.props.kind === "zoo";
       },
     },
     {
@@ -119,60 +147,70 @@ export const paintRules = (t: Theme): PaintRule[] => {
         fill: t.zoo,
       }),
       filter: (z, f) => {
-        const kind = getString(f.props, "pmap:kind");
+        const kind = getString(f.props, "kind");
         return ["military", "naval_base", "airfield"].includes(kind);
       },
     },
     {
-      dataLayer: "natural",
+      dataLayer: "landuse",
       symbolizer: new PolygonSymbolizer({
         fill: (z, f) => {
           return mix(t.wood_a, t.wood_b, Math.min(Math.max(z / 12.0, 12), 0));
         },
+        opacity: (z, f) => {
+          if (z < 8) return 0;
+          if (z === 8) return 0.5;
+          return 1;
+        },
       }),
       filter: (z, f) => {
-        const kind = getString(f.props, "pmap:kind");
+        const kind = getString(f.props, "kind");
         return ["wood", "nature_reserve", "forest"].includes(kind);
       },
     },
     {
-      dataLayer: "natural",
+      dataLayer: "landuse",
       symbolizer: new PolygonSymbolizer({
         fill: (z, f) => {
           return mix(t.scrub_a, t.scrub_b, Math.min(Math.max(z / 12.0, 12), 0));
         },
       }),
       filter: (z, f) => {
-        const kind = getString(f.props, "pmap:kind");
+        const kind = getString(f.props, "kind");
         return ["scrub", "grassland", "grass"].includes(kind);
       },
     },
     {
-      dataLayer: "natural",
+      dataLayer: "landuse",
       symbolizer: new PolygonSymbolizer({
         fill: t.scrub_b,
       }),
       filter: (z, f) => {
-        const kind = getString(f.props, "pmap:kind");
+        const kind = getString(f.props, "kind");
         return ["scrub", "grassland", "grass"].includes(kind);
       },
     },
     {
-      dataLayer: "natural",
+      dataLayer: "landuse",
       symbolizer: new PolygonSymbolizer({
         fill: t.glacier,
       }),
       filter: (z, f) => {
-        return f.props["pmap:kind"] === "glacier";
+        return f.props.kind === "glacier";
       },
     },
     {
-      dataLayer: "natural",
+      dataLayer: "landuse",
       symbolizer: new PolygonSymbolizer({
         fill: t.sand,
+        opacity: (z, f) => {
+          if (z < 8) return 0;
+          if (z === 8) return 0.5;
+          return 1;
+        },
       }),
       filter: (z, f) => {
-        return f.props["pmap:kind"] === "sand";
+        return f.props.kind === "sand";
       },
     },
     {
@@ -181,7 +219,7 @@ export const paintRules = (t: Theme): PaintRule[] => {
         fill: t.aerodrome,
       }),
       filter: (z, f) => {
-        return f.props["pmap:kind"] === "aerodrome";
+        return f.props.kind === "aerodrome";
       },
     },
     {
@@ -189,10 +227,12 @@ export const paintRules = (t: Theme): PaintRule[] => {
       symbolizer: new PolygonSymbolizer({
         fill: t.water,
       }),
+      filter: (z, f) => {
+        return f.geomType === GeomType.Polygon;
+      },
     },
     {
-      // transit_runway
-      dataLayer: "transit",
+      dataLayer: "roads",
       symbolizer: new LineSymbolizer({
         color: t.runway,
         width: (z, f) => {
@@ -204,12 +244,11 @@ export const paintRules = (t: Theme): PaintRule[] => {
         },
       }),
       filter: (z, f) => {
-        return f.props["pmap:kind_detail"] === "runway";
+        return f.props.kind_detail === "runway";
       },
     },
     {
-      // transit_taxiway
-      dataLayer: "transit",
+      dataLayer: "roads",
       symbolizer: new LineSymbolizer({
         color: t.runway,
         width: (z, f) => {
@@ -221,12 +260,11 @@ export const paintRules = (t: Theme): PaintRule[] => {
         },
       }),
       filter: (z, f) => {
-        return f.props["pmap:kind_detail"] === "taxiway";
+        return f.props.kind_detail === "taxiway";
       },
     },
     {
-      // transit_pier
-      dataLayer: "transit",
+      dataLayer: "roads",
       symbolizer: new LineSymbolizer({
         color: t.pier,
         width: (z, f) => {
@@ -238,12 +276,11 @@ export const paintRules = (t: Theme): PaintRule[] => {
         },
       }),
       filter: (z, f) => {
-        return f.props["pmap:kind"] === "pier";
+        return f.props.kind === "path" && f.props.kind_detail === "pier";
       },
     },
     {
-      // physical_line_river
-      dataLayer: "physical_line",
+      dataLayer: "water",
       minzoom: 14,
       symbolizer: new LineSymbolizer({
         color: t.water,
@@ -256,19 +293,18 @@ export const paintRules = (t: Theme): PaintRule[] => {
         },
       }),
       filter: (z, f) => {
-        return f.props["pmap:kind"] === "river";
+        return f.geomType === GeomType.Line && f.props.kind === "river";
       },
     },
     {
-      // physical_line_river
-      dataLayer: "physical_line",
+      dataLayer: "water",
       minzoom: 14,
       symbolizer: new LineSymbolizer({
         color: t.water,
         width: 0.5,
       }),
       filter: (z, f) => {
-        return f.props["pmap:kind"] === "stream";
+        return f.geomType === GeomType.Line && f.props.kind === "stream";
       },
     },
     {
@@ -277,7 +313,7 @@ export const paintRules = (t: Theme): PaintRule[] => {
         fill: t.pedestrian,
       }),
       filter: (z, f) => {
-        return f.props["pmap:kind"] === "pedestrian";
+        return f.props.kind === "pedestrian";
       },
     },
     {
@@ -286,7 +322,7 @@ export const paintRules = (t: Theme): PaintRule[] => {
         fill: t.pier,
       }),
       filter: (z, f) => {
-        return f.props["pmap:kind"] === "pier";
+        return f.props.kind === "pier";
       },
     },
     {
@@ -308,7 +344,7 @@ export const paintRules = (t: Theme): PaintRule[] => {
         },
       }),
       filter: (z, f) => {
-        const kind = getString(f.props, "pmap:kind");
+        const kind = getString(f.props, "kind");
         return ["other", "path"].includes(kind);
       },
     },
@@ -324,24 +360,7 @@ export const paintRules = (t: Theme): PaintRule[] => {
         },
       }),
       filter: (z, f) => {
-        return f.props["pmap:kind"] === "minor_road";
-      },
-    },
-    {
-      dataLayer: "roads",
-      symbolizer: new LineSymbolizer({
-        color: t.major,
-        width: (z, f) => {
-          return exp(1.6, [
-            [7, 0],
-            [12, 1.2],
-            [15, 3],
-            [18, 13],
-          ])(z);
-        },
-      }),
-      filter: (z, f) => {
-        return f.props["pmap:kind"] === "medium_road";
+        return f.props.kind === "minor_road";
       },
     },
     {
@@ -358,7 +377,7 @@ export const paintRules = (t: Theme): PaintRule[] => {
         },
       }),
       filter: (z, f) => {
-        return f.props["pmap:kind"] === "major_road";
+        return f.props.kind === "major_road";
       },
     },
     {
@@ -376,23 +395,22 @@ export const paintRules = (t: Theme): PaintRule[] => {
         },
       }),
       filter: (z, f) => {
-        return f.props["pmap:kind"] === "highway";
+        return f.props.kind === "highway";
       },
     },
     {
       dataLayer: "boundaries",
       symbolizer: new LineSymbolizer({
-        dash: [3, 2],
         color: t.boundaries,
         width: 1,
       }),
       filter: (z, f) => {
-        const minAdminLevel = f.props["pmap:min_admin_level"];
+        const minAdminLevel = f.props.kind_detail;
         return typeof minAdminLevel === "number" && minAdminLevel <= 2;
       },
     },
     {
-      dataLayer: "transit",
+      dataLayer: "roads",
       symbolizer: new LineSymbolizer({
         dash: [0.3, 0.75],
         color: t.railway,
@@ -406,26 +424,25 @@ export const paintRules = (t: Theme): PaintRule[] => {
         opacity: 0.5,
       }),
       filter: (z, f) => {
-        return f.props["pmap:kind"] === "rail";
+        return f.props.kind === "rail";
       },
     },
     {
       dataLayer: "boundaries",
       symbolizer: new LineSymbolizer({
-        dash: [3, 2],
         color: t.boundaries,
         width: 0.5,
       }),
       filter: (z, f) => {
-        const minAdminLevel = f.props["pmap:min_admin_level"];
+        const minAdminLevel = f.props.kind_detail;
         return typeof minAdminLevel === "number" && minAdminLevel > 2;
       },
     },
   ];
 };
 
-export const labelRules = (t: Theme): LabelRule[] => {
-  const nametags = ["name"];
+export const labelRules = (t: Flavor, lang: string): LabelRule[] => {
+  const nametags = [`name:${lang}`, "name"];
 
   return [
     // {
@@ -441,7 +458,7 @@ export const labelRules = (t: Theme): LabelRule[] => {
     //     params.neighbourhoodLabel,
     //   ),
     //   filter: (z, f) => {
-    //     return f.props["pmap:kind"] === "neighbourhood";
+    //     return f.props["kind"] === "neighbourhood";
     //   },
     // },
     {
@@ -456,7 +473,7 @@ export const labelRules = (t: Theme): LabelRule[] => {
       // TODO: sort by minzoom
       minzoom: 16,
       filter: (z, f) => {
-        const kind = getString(f.props, "pmap:kind");
+        const kind = getString(f.props, "kind");
         return ["minor_road", "other", "path"].includes(kind);
       },
     },
@@ -472,8 +489,8 @@ export const labelRules = (t: Theme): LabelRule[] => {
       // TODO: sort by minzoom
       minzoom: 12,
       filter: (z, f) => {
-        const kind = getString(f.props, "pmap:kind");
-        return ["highway", "major_road", "medium_road"].includes(kind);
+        const kind = getString(f.props, "kind");
+        return ["highway", "major_road"].includes(kind);
       },
     },
     {
@@ -488,12 +505,12 @@ export const labelRules = (t: Theme): LabelRule[] => {
       // TODO: sort by minzoom
       minzoom: 12,
       filter: (z, f) => {
-        const kind = getString(f.props, "pmap:kind");
-        return ["highway", "major_road", "medium_road"].includes(kind);
+        const kind = getString(f.props, "kind");
+        return ["highway", "major_road"].includes(kind);
       },
     },
     {
-      dataLayer: "physical_point",
+      dataLayer: "water",
       symbolizer: new CenteredTextSymbolizer({
         labelProps: nametags,
         fill: t.ocean_label,
@@ -509,12 +526,15 @@ export const labelRules = (t: Theme): LabelRule[] => {
         textTransform: "uppercase",
       }),
       filter: (z, f) => {
-        const kind = getString(f.props, "pmap:kind");
-        return ["ocean", "bay", "strait", "fjord"].includes(kind);
+        const kind = getString(f.props, "kind");
+        return (
+          f.geomType === GeomType.Point &&
+          ["ocean", "bay", "strait", "fjord"].includes(kind)
+        );
       },
     },
     {
-      dataLayer: "physical_point",
+      dataLayer: "water",
       symbolizer: new CenteredTextSymbolizer({
         labelProps: nametags,
         fill: t.ocean_label,
@@ -522,7 +542,7 @@ export const labelRules = (t: Theme): LabelRule[] => {
         letterSpacing: 1,
         font: (z, f) => {
           const size = linear([
-            [3, 0],
+            [3, 10],
             [6, 12],
             [10, 12],
           ])(z);
@@ -530,8 +550,11 @@ export const labelRules = (t: Theme): LabelRule[] => {
         },
       }),
       filter: (z, f) => {
-        const kind = getString(f.props, "pmap:kind");
-        return ["sea", "lake", "water"].includes(kind);
+        const kind = getString(f.props, "kind");
+        return (
+          f.geomType === GeomType.Point &&
+          ["sea", "lake", "water"].includes(kind)
+        );
       },
     },
     {
@@ -539,7 +562,7 @@ export const labelRules = (t: Theme): LabelRule[] => {
       symbolizer: new CenteredTextSymbolizer({
         labelProps: (z, f) => {
           if (z < 6) {
-            return ["name:short"];
+            return [`ref:${lang}`, "ref"];
           }
           return nametags;
         },
@@ -548,13 +571,12 @@ export const labelRules = (t: Theme): LabelRule[] => {
         width: 1,
         lineHeight: 1.5,
         font: (z: number, f?: Feature) => {
-          if (z < 6) return "400 16px sans-serif";
           return "400 12px sans-serif";
         },
         textTransform: "uppercase",
       }),
       filter: (z, f) => {
-        return f.props["pmap:kind"] === "region";
+        return f.props.kind === "region";
       },
     },
     {
@@ -570,7 +592,7 @@ export const labelRules = (t: Theme): LabelRule[] => {
         textTransform: "uppercase",
       }),
       filter: (z, f) => {
-        return f.props["pmap:kind"] === "country";
+        return f.props.kind === "country";
       },
     },
     {
@@ -583,13 +605,13 @@ export const labelRules = (t: Theme): LabelRule[] => {
         lineHeight: 1.5,
         font: (z: number, f?: Feature) => {
           if (!f) return "400 12px sans-serif";
-          const minZoom = f.props["pmap:min_zoom"];
+          const minZoom = f.props.min_zoom;
           let weight = 400;
           if (minZoom && minZoom <= 5) {
             weight = 600;
           }
           let size = 12;
-          const popRank = f.props["pmap:population_rank"];
+          const popRank = f.props.population_rank;
           if (popRank && popRank > 9) {
             size = 16;
           }
@@ -597,12 +619,12 @@ export const labelRules = (t: Theme): LabelRule[] => {
         },
       }),
       sort: (a, b) => {
-        const aRank = getNumber(a, "pmap:population_rank");
-        const bRank = getNumber(b, "pmap:population_rank");
+        const aRank = getNumber(a, "min_zoom");
+        const bRank = getNumber(b, "min_zoom");
         return aRank - bRank;
       },
       filter: (z, f) => {
-        return f.props["pmap:kind"] === "locality";
+        return f.props.kind === "locality";
       },
     },
     {
@@ -611,8 +633,8 @@ export const labelRules = (t: Theme): LabelRule[] => {
       symbolizer: new GroupSymbolizer([
         new CircleSymbolizer({
           radius: 2,
-          fill: t.city_circle,
-          stroke: t.city_circle_stroke,
+          fill: t.city_label,
+          stroke: t.city_label_halo,
           width: 1.5,
         }),
         new OffsetTextSymbolizer({
@@ -628,7 +650,7 @@ export const labelRules = (t: Theme): LabelRule[] => {
         }),
       ]),
       filter: (z, f) => {
-        return f.props["pmap:kind"] === "locality";
+        return f.props.kind === "locality";
       },
     },
   ];
diff --git a/src/default_style/themes.ts b/src/default_style/themes.ts
deleted file mode 100644
index f856effe..00000000
--- a/src/default_style/themes.ts
+++ /dev/null
@@ -1,547 +0,0 @@
-export interface Theme {
-  background: string;
-  earth: string;
-  park_a: string;
-  park_b: string;
-  hospital: string;
-  industrial: string;
-  school: string;
-  wood_a: string;
-  wood_b: string;
-  pedestrian: string;
-  scrub_a: string;
-  scrub_b: string;
-  glacier: string;
-  sand: string;
-  beach: string;
-  aerodrome: string;
-  runway: string;
-  water: string;
-  pier: string;
-  zoo: string;
-  military: string;
-
-  tunnel_other_casing: string;
-  tunnel_minor_casing: string;
-  tunnel_link_casing: string;
-  tunnel_medium_casing: string;
-  tunnel_major_casing: string;
-  tunnel_highway_casing: string;
-  tunnel_other: string;
-  tunnel_minor: string;
-  tunnel_link: string;
-  tunnel_medium: string;
-  tunnel_major: string;
-  tunnel_highway: string;
-
-  transit_pier: string;
-  buildings: string;
-
-  minor_service_casing: string;
-  minor_casing: string;
-  link_casing: string;
-  medium_casing: string;
-  major_casing_late: string;
-  highway_casing_late: string;
-  other: string;
-  minor_service: string;
-  minor_a: string;
-  minor_b: string;
-  link: string;
-  medium: string;
-  major_casing_early: string;
-  major: string;
-  highway_casing_early: string;
-  highway: string;
-
-  railway: string;
-  boundaries: string;
-  waterway_label: string;
-
-  bridges_other_casing: string;
-  bridges_minor_casing: string;
-  bridges_link_casing: string;
-  bridges_medium_casing: string;
-  bridges_major_casing: string;
-  bridges_highway_casing: string;
-  bridges_other: string;
-  bridges_minor: string;
-  bridges_link: string;
-  bridges_medium: string;
-  bridges_major: string;
-  bridges_highway: string;
-
-  roads_label_minor: string;
-  roads_label_minor_halo: string;
-  roads_label_major: string;
-  roads_label_major_halo: string;
-  ocean_label: string;
-  peak_label: string;
-  subplace_label: string;
-  subplace_label_halo: string;
-  city_circle: string;
-  city_circle_stroke: string;
-  city_label: string;
-  city_label_halo: string;
-  state_label: string;
-  state_label_halo: string;
-  country_label: string;
-}
-
-export const LIGHT: Theme = {
-  background: "#cccccc",
-  earth: "#e0e0e0",
-  park_a: "#cfddd5",
-  park_b: "#9cd3b4",
-  hospital: "#e4dad9",
-  industrial: "#d1dde1",
-  school: "#e4ded7",
-  wood_a: "#d0ded0",
-  wood_b: "#a0d9a0",
-  pedestrian: "#e3e0d4",
-  scrub_a: "#cedcd7",
-  scrub_b: "#99d2bb",
-  glacier: "#e7e7e7",
-  sand: "#e2e0d7",
-  beach: "#e8e4d0",
-  aerodrome: "#dadbdf",
-  runway: "#e9e9ed",
-  water: "#80deea",
-  pier: "#e0e0e0",
-  zoo: "#c6dcdc",
-  military: "#dcdcdc",
-
-  tunnel_other_casing: "#e0e0e0",
-  tunnel_minor_casing: "#e0e0e0",
-  tunnel_link_casing: "#e0e0e0",
-  tunnel_medium_casing: "#e0e0e0",
-  tunnel_major_casing: "#e0e0e0",
-  tunnel_highway_casing: "#e0e0e0",
-  tunnel_other: "#d5d5d5",
-  tunnel_minor: "#d5d5d5",
-  tunnel_link: "#d5d5d5",
-  tunnel_medium: "#d5d5d5",
-  tunnel_major: "#d5d5d5",
-  tunnel_highway: "#d5d5d5",
-
-  transit_pier: "#e0e0e0",
-  buildings: "#cccccc",
-
-  minor_service_casing: "#e0e0e0",
-  minor_casing: "#e0e0e0",
-  link_casing: "#e0e0e0",
-  medium_casing: "#e0e0e0",
-  major_casing_late: "#e0e0e0",
-  highway_casing_late: "#e0e0e0",
-  other: "#ebebeb",
-  minor_service: "#ebebeb",
-  minor_a: "#ebebeb",
-  minor_b: "#ffffff",
-  link: "#ffffff",
-  medium: "#f5f5f5",
-  major_casing_early: "#e0e0e0",
-  major: "#ffffff",
-  highway_casing_early: "#e0e0e0",
-  highway: "#ffffff",
-
-  railway: "#a7b1b3",
-  boundaries: "#adadad",
-  waterway_label: "#ffffff",
-
-  bridges_other_casing: "#e0e0e0",
-  bridges_minor_casing: "#e0e0e0",
-  bridges_link_casing: "#e0e0e0",
-  bridges_medium_casing: "#e0e0e0",
-  bridges_major_casing: "#e0e0e0",
-  bridges_highway_casing: "#e0e0e0",
-  bridges_other: "#ebebeb",
-  bridges_minor: "#ffffff",
-  bridges_link: "#ffffff",
-  bridges_medium: "#f0eded",
-  bridges_major: "#f5f5f5",
-  bridges_highway: "#ffffff",
-
-  roads_label_minor: "#91888b",
-  roads_label_minor_halo: "#ffffff",
-  roads_label_major: "#938a8d",
-  roads_label_major_halo: "#ffffff",
-  ocean_label: "#ffffff",
-  peak_label: "#7e9aa0",
-  subplace_label: "#8f8f8f",
-  subplace_label_halo: "#e0e0e0",
-  city_circle: "#ffffff",
-  city_circle_stroke: "#a3a3a3",
-  city_label: "#5c5c5c",
-  city_label_halo: "#e0e0e0",
-  state_label: "#b3b3b3",
-  state_label_halo: "#e0e0e0",
-  country_label: "#a3a3a3",
-};
-
-export const DARK: Theme = {
-  background: "#34373d",
-  earth: "#1f1f1f",
-  park_a: "#232325",
-  park_b: "#232325",
-  hospital: "#252424",
-  industrial: "#222222",
-  school: "#262323",
-  wood_a: "#202121",
-  wood_b: "#202121",
-  pedestrian: "#1e1e1e",
-  scrub_a: "#222323",
-  scrub_b: "#222323",
-  glacier: "#1c1c1c",
-  sand: "#212123",
-  beach: "#28282a",
-  aerodrome: "#1e1e1e",
-  runway: "#333333",
-  water: "#34373d",
-  pier: "#222222",
-  zoo: "#222323",
-  military: "#242323",
-
-  tunnel_other_casing: "#141414",
-  tunnel_minor_casing: "#141414",
-  tunnel_link_casing: "#141414",
-  tunnel_medium_casing: "#141414",
-  tunnel_major_casing: "#141414",
-  tunnel_highway_casing: "#141414",
-  tunnel_other: "#292929",
-  tunnel_minor: "#292929",
-  tunnel_link: "#292929",
-  tunnel_medium: "#292929",
-  tunnel_major: "#292929",
-  tunnel_highway: "#292929",
-
-  transit_pier: "#333333",
-  buildings: "#111111",
-
-  minor_service_casing: "#1f1f1f",
-  minor_casing: "#1f1f1f",
-  link_casing: "#1f1f1f",
-  medium_casing: "#1f1f1f",
-  major_casing_late: "#1f1f1f",
-  highway_casing_late: "#1f1f1f",
-  other: "#333333",
-  minor_service: "#333333",
-  minor_a: "#3d3d3d",
-  minor_b: "#333333",
-  link: "#3d3d3d",
-  medium: "#3d3d3d",
-  major_casing_early: "#1f1f1f",
-  major: "#3d3d3d",
-  highway_casing_early: "#1f1f1f",
-  highway: "#474747",
-
-  railway: "#000000",
-  boundaries: "#5b6374",
-  waterway_label: "#717784",
-
-  bridges_other_casing: "#2b2b2b",
-  bridges_minor_casing: "#1f1f1f",
-  bridges_link_casing: "#1f1f1f",
-  bridges_medium_casing: "#1f1f1f",
-  bridges_major_casing: "#1f1f1f",
-  bridges_highway_casing: "#1f1f1f",
-  bridges_other: "#333333",
-  bridges_minor: "#333333",
-  bridges_link: "#3d3d3d",
-  bridges_medium: "#3d3d3d",
-  bridges_major: "#3d3d3d",
-  bridges_highway: "#474747",
-
-  roads_label_minor: "#525252",
-  roads_label_minor_halo: "#1f1f1f",
-  roads_label_major: "#666666",
-  roads_label_major_halo: "#1f1f1f",
-  ocean_label: "#717784",
-  peak_label: "#898080",
-  subplace_label: "#525252",
-  subplace_label_halo: "#1f1f1f",
-  city_circle: "#000000",
-  city_circle_stroke: "#7a7a7a",
-  city_label: "#7a7a7a",
-  city_label_halo: "#212121",
-  state_label: "#3d3d3d",
-  state_label_halo: "#1f1f1f",
-  country_label: "#5c5c5c",
-};
-
-export const WHITE: Theme = {
-  background: "#ffffff",
-  earth: "#ffffff",
-  park_a: "#fcfcfc",
-  park_b: "#fcfcfc",
-  hospital: "#f8f8f8",
-  industrial: "#fcfcfc",
-  school: "#f8f8f8",
-  wood_a: "#fafafa",
-  wood_b: "#fafafa",
-  pedestrian: "#fdfdfd",
-  scrub_a: "#fafafa",
-  scrub_b: "#fafafa",
-  glacier: "#fcfcfc",
-  sand: "#fafafa",
-  beach: "#f6f6f6",
-  aerodrome: "#fdfdfd",
-  runway: "#efefef",
-  water: "#dcdcdc",
-  pier: "#f5f5f5",
-  zoo: "#f7f7f7",
-  military: "#fcfcfc",
-
-  tunnel_other_casing: "#d6d6d6",
-  tunnel_minor_casing: "#fcfcfc",
-  tunnel_link_casing: "#fcfcfc",
-  tunnel_medium_casing: "#fcfcfc",
-  tunnel_major_casing: "#fcfcfc",
-  tunnel_highway_casing: "#fcfcfc",
-  tunnel_other: "#d6d6d6",
-  tunnel_minor: "#d6d6d6",
-  tunnel_link: "#d6d6d6",
-  tunnel_medium: "#d6d6d6",
-  tunnel_major: "#d6d6d6",
-  tunnel_highway: "#d6d6d6",
-
-  transit_pier: "#efefef",
-  buildings: "#efefef",
-
-  minor_service_casing: "#ffffff",
-  minor_casing: "#ffffff",
-  link_casing: "#ffffff",
-  medium_casing: "#ffffff",
-  major_casing_late: "#ffffff",
-  highway_casing_late: "#ffffff",
-  other: "#f5f5f5",
-  minor_service: "#f5f5f5",
-  minor_a: "#ebebeb",
-  minor_b: "#f5f5f5",
-  link: "#ebebeb",
-  medium: "#ebebeb",
-  major_casing_early: "#ffffff",
-  major: "#ebebeb",
-  highway_casing_early: "#ffffff",
-  highway: "#ebebeb",
-
-  railway: "#d6d6d6",
-  boundaries: "#adadad",
-  waterway_label: "#adadad",
-
-  bridges_other_casing: "#ffffff",
-  bridges_minor_casing: "#ffffff",
-  bridges_link_casing: "#ffffff",
-  bridges_medium_casing: "#ffffff",
-  bridges_major_casing: "#ffffff",
-  bridges_highway_casing: "#ffffff",
-  bridges_other: "#f5f5f5",
-  bridges_minor: "#f5f5f5",
-  bridges_link: "#ebebeb",
-  bridges_medium: "#ebebeb",
-  bridges_major: "#ebebeb",
-  bridges_highway: "#ebebeb",
-
-  roads_label_minor: "#adadad",
-  roads_label_minor_halo: "#ffffff",
-  roads_label_major: "#999999",
-  roads_label_major_halo: "#ffffff",
-  ocean_label: "#adadad",
-  peak_label: "#adadad",
-  subplace_label: "#8f8f8f",
-  subplace_label_halo: "#ffffff",
-  city_circle: "#ffffff",
-  city_circle_stroke: "#adadad",
-  city_label: "#5c5c5c",
-  city_label_halo: "#ffffff",
-  state_label: "#b3b3b3",
-  state_label_halo: "#ffffff",
-  country_label: "#b8b8b8",
-};
-
-export const GRAYSCALE: Theme = {
-  background: "#a3a3a3",
-  earth: "#cccccc",
-  park_a: "#c2c2c2",
-  park_b: "#c2c2c2",
-  hospital: "#d0d0d0",
-  industrial: "#c6c6c6",
-  school: "#d0d0d0",
-  wood_a: "#c2c2c2",
-  wood_b: "#c2c2c2",
-  pedestrian: "#c4c4c4",
-  scrub_a: "#c2c2c2",
-  scrub_b: "#c2c2c2",
-  glacier: "#d2d2d2",
-  sand: "#d2d2d2",
-  beach: "#d2d2d2",
-  aerodrome: "#c9c9c9",
-  runway: "#f5f5f5",
-  water: "#a3a3a3",
-  pier: "#b8b8b8",
-  zoo: "#c7c7c7",
-  military: "#bfbfbf",
-
-  tunnel_other_casing: "#b8b8b8",
-  tunnel_minor_casing: "#b8b8b8",
-  tunnel_link_casing: "#b8b8b8",
-  tunnel_medium_casing: "#b8b8b8",
-  tunnel_major_casing: "#b8b8b8",
-  tunnel_highway_casing: "#b8b8b8",
-  tunnel_other: "#d6d6d6",
-  tunnel_minor: "#d6d6d6",
-  tunnel_link: "#d6d6d6",
-  tunnel_medium: "#d6d6d6",
-  tunnel_major: "#d6d6d6",
-  tunnel_highway: "#d6d6d6",
-
-  transit_pier: "#b8b8b8",
-  buildings: "#e0e0e0",
-
-  minor_service_casing: "#cccccc",
-  minor_casing: "#cccccc",
-  link_casing: "#cccccc",
-  medium_casing: "#cccccc",
-  major_casing_late: "#cccccc",
-  highway_casing_late: "#cccccc",
-  other: "#e0e0e0",
-  minor_service: "#e0e0e0",
-  minor_a: "#ebebeb",
-  minor_b: "#e0e0e0",
-  link: "#ebebeb",
-  medium: "#ebebeb",
-  major_casing_early: "#cccccc",
-  major: "#ebebeb",
-  highway_casing_early: "#cccccc",
-  highway: "#ebebeb",
-
-  railway: "#f5f5f5",
-  boundaries: "#5c5c5c",
-  waterway_label: "#7a7a7a",
-
-  bridges_other_casing: "#cccccc",
-  bridges_minor_casing: "#cccccc",
-  bridges_link_casing: "#cccccc",
-  bridges_medium_casing: "#cccccc",
-  bridges_major_casing: "#cccccc",
-  bridges_highway_casing: "#cccccc",
-  bridges_other: "#e0e0e0",
-  bridges_minor: "#e0e0e0",
-  bridges_link: "#ebebeb",
-  bridges_medium: "#ebebeb",
-  bridges_major: "#ebebeb",
-  bridges_highway: "#ebebeb",
-
-  roads_label_minor: "#999999",
-  roads_label_minor_halo: "#e0e0e0",
-  roads_label_major: "#8f8f8f",
-  roads_label_major_halo: "#ebebeb",
-  ocean_label: "#7a7a7a",
-  peak_label: "#5c5c5c",
-  subplace_label: "#7a7a7a",
-  subplace_label_halo: "#cccccc",
-  city_circle: "#c2c2c2",
-  city_circle_stroke: "#7a7a7a",
-  city_label: "#474747",
-  city_label_halo: "#cccccc",
-  state_label: "#999999",
-  state_label_halo: "#cccccc",
-  country_label: "#858585",
-};
-
-export const BLACK: Theme = {
-  background: "#2b2b2b",
-  earth: "#141414",
-  park_a: "#181818",
-  park_b: "#181818",
-  hospital: "#1d1d1d",
-  industrial: "#101010",
-  school: "#111111",
-  wood_a: "#1a1a1a",
-  wood_b: "#1a1a1a",
-  pedestrian: "#191919",
-  scrub_a: "#1c1c1c",
-  scrub_b: "#1c1c1c",
-  glacier: "#191919",
-  sand: "#161616",
-  beach: "#1f1f1f",
-  aerodrome: "#191919",
-  runway: "#323232",
-  water: "#333333",
-  pier: "#0a0a0a",
-  zoo: "#191919",
-  military: "#121212",
-
-  tunnel_other_casing: "#101010",
-  tunnel_minor_casing: "#101010",
-  tunnel_link_casing: "#101010",
-  tunnel_medium_casing: "#101010",
-  tunnel_major_casing: "#101010",
-  tunnel_highway_casing: "#101010",
-  tunnel_other: "#292929",
-  tunnel_minor: "#292929",
-  tunnel_link: "#292929",
-  tunnel_medium: "#292929",
-  tunnel_major: "#292929",
-  tunnel_highway: "#292929",
-
-  transit_pier: "#0a0a0a",
-  buildings: "#0a0a0a",
-
-  minor_service_casing: "#141414",
-  minor_casing: "#141414",
-  link_casing: "#141414",
-  medium_casing: "#141414",
-  major_casing_late: "#141414",
-  highway_casing_late: "#141414",
-  other: "#1f1f1f",
-  minor_service: "#1f1f1f",
-  minor_a: "#292929",
-  minor_b: "#1f1f1f",
-  link: "#1f1f1f",
-  medium: "#292929",
-  major_casing_early: "#141414",
-  major: "#292929",
-  highway_casing_early: "#141414",
-  highway: "#292929",
-
-  railway: "#292929",
-  boundaries: "#707070",
-  waterway_label: "#707070",
-
-  bridges_other_casing: "#141414",
-  bridges_minor_casing: "#141414",
-  bridges_link_casing: "#141414",
-  bridges_medium_casing: "#141414",
-  bridges_major_casing: "#141414",
-  bridges_highway_casing: "#141414",
-  bridges_other: "#1f1f1f",
-  bridges_minor: "#1f1f1f",
-  bridges_link: "#292929",
-  bridges_medium: "#292929",
-  bridges_major: "#292929",
-  bridges_highway: "#292929",
-
-  roads_label_minor: "#525252",
-  roads_label_minor_halo: "#141414",
-  roads_label_major: "#5c5c5c",
-  roads_label_major_halo: "#141414",
-  ocean_label: "#707070",
-  peak_label: "#707070",
-  subplace_label: "#5c5c5c",
-  subplace_label_halo: "#141414",
-  city_circle: "#000000",
-  city_circle_stroke: "#666666",
-  city_label: "#999999",
-  city_label_halo: "#141414",
-  state_label: "#3d3d3d",
-  state_label_halo: "#141414",
-  country_label: "#707070",
-};
-
-export const themes: Record<string, Theme> = {
-  light: LIGHT,
-  dark: DARK,
-  white: WHITE,
-  grayscale: GRAYSCALE,
-  black: BLACK,
-};
diff --git a/src/frontends/leaflet.ts b/src/frontends/leaflet.ts
index e9edf8c9..c6338f56 100644
--- a/src/frontends/leaflet.ts
+++ b/src/frontends/leaflet.ts
@@ -4,13 +4,13 @@ declare const L: any;
 import Point from "@mapbox/point-geometry";
 
 import type { Coords } from "leaflet";
+import { namedFlavor } from "@protomaps/basemaps";
 import { PMTiles } from "pmtiles";
 import { labelRules, paintRules } from "../default_style/style";
-import { themes } from "../default_style/themes";
 import { LabelRule, Labelers } from "../labeler";
 import { PaintRule, paint } from "../painter";
-import { PreparedTile, SourceOptions, sourcesToViews } from "../view";
 import { PickedFeature } from "../tilecache";
+import { PreparedTile, SourceOptions, sourcesToViews } from "../view";
 
 const timer = (duration: number) => {
   return new Promise<void>((resolve) => {
@@ -49,7 +49,6 @@ export interface LeafletLayerOptions extends L.GridLayerOptions {
   debug?: string;
   lang?: string;
   tileDelay?: number;
-  language?: string[];
   noWrap?: boolean;
   paintRules?: PaintRule[];
   labelRules?: LabelRule[];
@@ -57,7 +56,7 @@ export interface LeafletLayerOptions extends L.GridLayerOptions {
   maxDataZoom?: number;
   url?: PMTiles | string;
   sources?: Record<string, SourceOptions>;
-  theme?: string;
+  flavor?: string;
   backgroundColor?: string;
 }
 
@@ -78,11 +77,11 @@ const leafletLayer = (options: LeafletLayerOptions = {}) => {
           '<a href="https://protomaps.com">Protomaps</a> © <a href="https://openstreetmap.org/copyright">OpenStreetMap</a>';
       super(options);
 
-      if (options.theme) {
-        const theme = themes[options.theme];
-        this.paintRules = paintRules(theme);
-        this.labelRules = labelRules(theme);
-        this.backgroundColor = theme.background;
+      if (options.flavor) {
+        const flavor = namedFlavor(options.flavor);
+        this.paintRules = paintRules(flavor);
+        this.labelRules = labelRules(flavor, options.lang || "en");
+        this.backgroundColor = flavor.background;
       } else {
         this.paintRules = options.paintRules || [];
         this.labelRules = options.labelRules || [];
diff --git a/src/frontends/static.ts b/src/frontends/static.ts
index f055c4f3..a1ca20e3 100644
--- a/src/frontends/static.ts
+++ b/src/frontends/static.ts
@@ -1,8 +1,8 @@
 import Point from "@mapbox/point-geometry";
 
+import { namedFlavor } from "@protomaps/basemaps";
 import { PMTiles } from "pmtiles";
 import { labelRules, paintRules } from "../default_style/style";
-import { themes } from "../default_style/themes";
 import { LabelRule, Labeler } from "../labeler";
 import { PaintRule, paint } from "../painter";
 import { PreparedTile, SourceOptions, View, sourcesToViews } from "../view";
@@ -66,9 +66,8 @@ interface StaticOptions {
   sources?: Record<string, SourceOptions>;
   paintRules?: PaintRule[];
   labelRules?: LabelRule[];
-  language?: string[];
   backgroundColor?: string;
-  theme?: string;
+  flavor?: string;
 }
 
 export class Static {
@@ -79,11 +78,11 @@ export class Static {
   backgroundColor?: string;
 
   constructor(options: StaticOptions) {
-    if (options.theme) {
-      const theme = themes[options.theme];
-      this.paintRules = paintRules(theme);
-      this.labelRules = labelRules(theme);
-      this.backgroundColor = theme.background;
+    if (options.flavor) {
+      const flavor = namedFlavor(options.flavor);
+      this.paintRules = paintRules(flavor);
+      this.labelRules = labelRules(flavor, options.lang || "en");
+      this.backgroundColor = flavor.background;
     } else {
       this.paintRules = options.paintRules || [];
       this.labelRules = options.labelRules || [];