give themes more descriptive names

app/App.tsx

@@ -5,27 +5,27 @@ import maplibregl from "maplibre-gl";
 import { StyleSpecification } from "maplibre-gl";
 import { Theme, layersWithCustomTheme, noLabelsWithCustomTheme } from "protomaps-themes-base";
 
-const THEMES = ["contrast", "bright", "calm", "black_and_white", "pink", "bold"];
+const THEMES = ["bio", "dusk_rose", "iris_bloom","rainforest", "seafoam"];
 
 const themeToLayers = new Map<string, Theme>();
 
-import contrast from "../themes/contrast.ts";
-themeToLayers.set("contrast", contrast);
+import bio from "../themes/bio.ts";
+themeToLayers.set("bio", bio);
 
-import bright from "../themes/bright.ts";
-themeToLayers.set("bright", bright);
+import iris_bloom from "../themes/iris_bloom.ts";
+themeToLayers.set("iris_bloom", iris_bloom);
 
-import calm from "../themes/calm.ts";
-themeToLayers.set("calm", calm);
+import seafoam from "../themes/seafoam.ts";
+themeToLayers.set("seafoam", seafoam);
 
-import black_and_white from "../themes/black_and_white.ts";
-themeToLayers.set("black_and_white", black_and_white);
+// import sol from "../themes/sol.ts";
+// themeToLayers.set("sol", sol);
 
-import pink from "../themes/pink.ts";
-themeToLayers.set("pink", pink);
+import dusk_rose from "../themes/dusk_rose.ts";
+themeToLayers.set("dusk_rose", dusk_rose);
 
-import bold from "../themes/bold.ts";
-themeToLayers.set("bold", bold);
+import rainforest from "../themes/rainforest.ts";
+themeToLayers.set("rainforest", rainforest);
 
 const getStyle = (index: number, showLabels: boolean):StyleSpecification => {
   let themeName = THEMES[index];
@@ -96,8 +96,6 @@ function App() {
     setShowLabels(target.checked);
   };
 
-  console.log(showLabels());
-
   return (
     <div id="container">
       <div class="sidebar">

themes/sol.ts

@@ -0,0 +1,96 @@
+import { Theme } from "protomaps-themes-base";
+
+export default <Theme> {
+  background: "rgba(231, 240, 221, 1)",
+  earth: "rgba(231, 240, 221, 1)",
+  park_a: "#8ad3d4",
+  park_b: "#8ad3d4",
+  hospital: "rgba(253, 160, 179, 1)",
+  industrial: "rgba(191, 189, 186, 1)",
+  school: "rgba(250, 220, 166, 1)",
+  wood_a: "#94ccc3",
+  wood_b: "#94ccc3",
+  pedestrian: "",
+  scrub_a: "#a4c6a2",
+  scrub_b: "#a4c6a2",
+  glacier: "rgba(239, 240, 231, 1)",
+  sand: "rgba(222, 218, 189, 1)",
+  beach: "rgba(236, 251, 218, 1)",
+  aerodrome: "rgba(218, 211, 208, 1)",
+  runway: "",
+  water: "",
+  zoo: "rgba(143, 211, 167, 1)",
+  military: "rgba(173, 188, 195, 1)",
+
+  tunnel_other_casing: "",
+  tunnel_minor_casing: "",
+  tunnel_link_casing: "",
+  tunnel_major_casing: "",
+  tunnel_highway_casing: "",
+  tunnel_other: "",
+  tunnel_minor: "",
+  tunnel_link: "",
+  tunnel_major: "",
+  tunnel_highway: "",
+
+  pier: "",
+  buildings: "",
+
+  minor_service_casing: "",
+  minor_casing: "",
+  link_casing: "",
+  major_casing_late: "",
+  highway_casing_late: "",
+  other: "",
+  minor_service: "",
+  minor_a: "",
+  minor_b: "",
+  link: "",
+  major_casing_early: "",
+  major: "",
+  highway_casing_early: "",
+  highway: "",
+
+  railway: "",
+  boundaries: "",
+  waterway_label: "",
+
+  bridges_other_casing: "",
+  bridges_minor_casing: "",
+  bridges_link_casing: "",
+  bridges_major_casing: "",
+  bridges_highway_casing: "",
+  bridges_other: "",
+  bridges_minor: "",
+  bridges_link: "",
+  bridges_major: "",
+  bridges_highway: "",
+
+  roads_label_minor: "",
+  roads_label_minor_halo: "",
+  roads_label_major: "",
+  roads_label_major_halo: "",
+  ocean_label: "",
+  peak_label: "",
+  subplace_label: "",
+  subplace_label_halo: ")",
+  city_label: "",
+  city_label_halo: "",
+  state_label: "",
+  state_label_halo: "",
+  country_label: "",
+
+  regular: '',
+  bold: '',
+  italic: '',
+
+  landcover: {
+    grassland: 'rgba(143, 201, 173, 1)',
+    barren: 'rgba(232, 214, 183, 1)',
+    urban_area: 'rgba(224, 232, 216, 1)',
+    farmland: 'rgba(165, 213, 166, 1)',
+    glacier: 'rgba(239, 240, 231, 1)',
+    scrub: 'rgba(176, 205, 174, 1)',
+    forest: 'rgba(149, 207, 194, 1)'
+  }
+};