feat: add gray flavor and update dependencies

app/App.tsx

@@ -5,7 +5,7 @@ import maplibregl from "maplibre-gl";
 import { StyleSpecification } from "maplibre-gl";
 import { Flavor, layers } from "@protomaps/basemaps";
 
-const FLAVORS = ["bio", "dusk_rose", "iris_bloom","rainforest", "seafoam"];
+const FLAVORS = ["bio", "dusk_rose", "iris_bloom","rainforest", "seafoam", "flat"];
 
 const nameToFlavor = new Map<string, Flavor>();
 
@@ -19,15 +19,18 @@ import seafoam from "../flavors/seafoam.ts";
 nameToFlavor.set("seafoam", seafoam);
 
 // import sol from "../flavors/sol.ts";
-// themeToLayers.set("sol", sol);
+// nameToFlavor.set("sol", sol);
+
+import flat from "../flavors/flat.ts";
+nameToFlavor.set("flat", flat);
 
 import dusk_rose from "../flavors/dusk_rose.ts";
 nameToFlavor.set("dusk_rose", dusk_rose);
 
 import rainforest from "../flavors/rainforest.ts";
 nameToFlavor.set("rainforest", rainforest);
 
-const getStyle = (index: number, showLabels: boolean):StyleSpecification => {
+const getStyle = (index: number, showLabels: boolean): StyleSpecification => {
   let flavorName = FLAVORS[index];
   return {
     version: 8,
@@ -39,13 +42,13 @@ const getStyle = (index: number, showLabels: boolean):StyleSpecification => {
         url: "https://api.protomaps.com/tiles/v4.json?key=1003762824b9687f",
       },
     },
-    layers: layers("protomaps", nameToFlavor.get(flavorName)!, {lang: showLabels ? "en" : undefined}),
+    layers: layers("protomaps", nameToFlavor.get(flavorName)!, { lang: showLabels ? "en" : undefined }),
   };
 };
 
-const FlavorRow: Component<{name: string, flavor: Flavor}> = (props) => {
+const FlavorRow: Component<{ name: string, flavor: Flavor }> = (props) => {
   return (
-    <div class="flavorRow" style={{"background-color":props.flavor.background,"color":props.flavor.city_label}}>
+    <div class="flavorRow" style={{ "background-color": props.flavor.background, "color": props.flavor.city_label }}>
       {props.name}
     </div>
   )
@@ -65,12 +68,12 @@ function App() {
 
     map = new maplibregl.Map({
       container: "map",
-      style: getStyle(selectedIndex(),showLabels()),
+      style: getStyle(selectedIndex(), showLabels()),
     });
   });
 
   createEffect(() => {
-    map.setStyle(getStyle(selectedIndex(),showLabels()));
+    map.setStyle(getStyle(selectedIndex(), showLabels()));
   });
 
   const selectFlavor = (i: number) => {

flavors/flat.ts

@@ -0,0 +1,99 @@
+import { Flavor } from "@protomaps/basemaps";
+
+export default <Flavor>{
+  background: "#2e2e2e",
+  earth: "#2e2e2e",
+  park_a: "#383838",
+  park_b: "#383838",
+  hospital: "#404040",
+  industrial: "#383838",
+  school: "#404040",
+  wood_a: "#383838",
+  wood_b: "#383838",
+  pedestrian: "#404040",
+  scrub_a: "#2e2e2e",
+  scrub_b: "#2e2e2e",
+  glacier: "#666666",
+  sand: "#404040",
+  beach: "#404040",
+  aerodrome: "#383838",
+  runway: "#666666",
+  water: "#1d1d1d",
+  zoo: "#383838",
+  military: "#383838",
+
+  tunnel_other_casing: "#2e2e2e",
+  tunnel_minor_casing: "#2e2e2e",
+  tunnel_link_casing: "#2e2e2e",
+  tunnel_major_casing: "#2e2e2e",
+  tunnel_highway_casing: "#2e2e2e",
+  tunnel_other: "#454545",
+  tunnel_minor: "#454545",
+  tunnel_link: "#454545",
+  tunnel_major: "#4b4b4b",
+  tunnel_highway: "#494949",
+
+  pier: "#2e2e2e",
+  buildings: "#525252",
+
+  minor_service_casing: "#2e2e2e",
+  minor_casing: "#2e2e2e",
+  link_casing: "#2e2e2e",
+  major_casing_late: "#2e2e2e",
+  highway_casing_late: "#2e2e2e",
+  other: "#454545",
+  minor_service: "#454545",
+  minor_a: "#454545",
+  minor_b: "#454545",
+  link: "#454545",
+  major_casing_early: "#2e2e2e",
+  major: "#4b4b4b",
+  highway_casing_early: "#2e2e2e",
+  highway: "#494949",
+
+  railway: "#737373",
+  boundaries: "#999999",
+  waterway_label: "#b3b3b3",
+
+  bridges_other_casing: "#2e2e2e",
+  bridges_minor_casing: "#2e2e2e",
+  bridges_link_casing: "#2e2e2e",
+  bridges_major_casing: "#2e2e2e",
+  bridges_highway_casing: "#2e2e2e",
+  bridges_other: "#454545",
+  bridges_minor: "#454545",
+  bridges_link: "#454545",
+  bridges_major: "#4b4b4b",
+  bridges_highway: "#494949",
+
+  roads_label_minor: "#e6e6e6",
+  roads_label_minor_halo: "#262626",
+  roads_label_major: "#e6e6e6",
+  roads_label_major_halo: "#262626",
+  ocean_label: "#b3b3b3",
+  peak_label: "#d9d9d9",
+  subplace_label: "#d9d9d9",
+  subplace_label_halo: "#262626",
+  city_label: "#f2f2f2",
+  city_label_halo: "#262626",
+  state_label: "#b3b3b3",
+  state_label_halo: "#262626",
+  country_label: "#b3b3b3",
+
+  regular: "Roboto Regular",
+  bold: "Roboto Medium",
+  italic: "Roboto Italic",
+
+  landcover: {
+    grassland: "#323232",
+    barren: "#323232",
+    urban_area: "#323232",
+    farmland: "#323232",
+    glacier: "#323232",
+    scrub: "#323232",
+    forest: "#323232",
+  },
+
+  address_label: "#d9d9d9",
+  address_label_halo: "#262626",
+};

package.json

@@ -10,13 +10,13 @@
     "build-ghpages": "tsc -b && vite build --base=/basemaps-flavors/"
   },
   "dependencies": {
-    "maplibre-gl": "^5.3.0",
-    "@protomaps/basemaps": "5.1.0",
-    "solid-js": "^1.9.5"
+    "maplibre-gl": "5.4.0",
+    "@protomaps/basemaps": "5.3.0",
+    "solid-js": "1.9.5"
   },
   "devDependencies": {
-    "typescript": "~5.6.2",
-    "vite": "^5.4.16",
-    "vite-plugin-solid": "^2.10.2"
+    "typescript": "5.8.3",
+    "vite": "6.3.3",
+    "vite-plugin-solid": "2.11.6"
   }
 }