Allow passing custom themes to create layers (#234)

* Allow passing custom themes to create layers

So far it was only possible to generate styles based on a set of fixed themes maintained by the protomaps project.

With this change, it is possible to pass a custom color theme to create layers, without interfering with the final style. Also passing partial themes is possible to override only a small set of properties.

* Apply biome lint fixes

styles/.gitignore

@@ -1 +1,2 @@
-dist
+dist
+node_modules

styles/src/index.ts

@@ -1,6 +1,6 @@
 import { LayerSpecification } from "@maplibre/maplibre-gl-style-spec";
 import { labels_layers, nolabels_layers } from "./base_layers";
-import themes from "./themes";
+import themes, { Theme } from "./themes";
 
 export default function (source: string, key: string): LayerSpecification[] {
   const theme = themes[key];
@@ -16,3 +16,35 @@ export function labels(source: string, key: string): LayerSpecification[] {
   const theme = themes[key];
   return labels_layers(source, theme);
 }
+
+export function layersWithCustomTheme(
+  source: string,
+  theme: Theme,
+): LayerSpecification[] {
+  return nolabels_layers(source, theme).concat(labels_layers(source, theme));
+}
+
+export function layersWithPartialCustomTheme(
+  source: string,
+  key: string,
+  partialTheme: Partial<Theme>,
+): LayerSpecification[] {
+  const mergedTheme = { ...themes[key], ...partialTheme };
+  return nolabels_layers(source, mergedTheme).concat(
+    labels_layers(source, mergedTheme),
+  );
+}
+
+export function noLabelsWithCustomTheme(
+  source: string,
+  theme: Theme,
+): LayerSpecification[] {
+  return nolabels_layers(source, theme);
+}
+
+export function labelsWithCustomTheme(
+  source: string,
+  theme: Theme,
+): LayerSpecification[] {
+  return labels_layers(source, theme);
+}

styles/test/custom_themes.test.ts

@@ -0,0 +1,40 @@
+import assert from "node:assert";
+import { test } from "node:test";
+import { validateStyleMin } from "@maplibre/maplibre-gl-style-spec";
+import {
+  labelsWithCustomTheme,
+  layersWithPartialCustomTheme,
+} from "../src/index";
+import themes from "../src/themes";
+
+const STUB = {
+  version: 8,
+  glyphs: "https://example.com/{fontstack}/{range}.pbf",
+  sources: {
+    sourcename: {
+      type: "vector",
+    },
+  },
+};
+
+test("validate custom themes", () => {
+  const customTheme = themes.dark;
+  STUB.layers = labelsWithCustomTheme("sourcename", customTheme);
+  const errors = validateStyleMin(STUB);
+  assert.deepStrictEqual([], errors);
+});
+
+test("validate layers with partial custom theme overrides", () => {
+  const customBackgroundColor = "#fff";
+  const partialTheme = { background: customBackgroundColor };
+  STUB.layers = layersWithPartialCustomTheme(
+    "sourcename",
+    "dark",
+    partialTheme,
+  );
+  const errors = validateStyleMin(STUB);
+  assert.deepStrictEqual([], errors);
+  assert.deepStrictEqual(STUB.layers.find((l) => l.id === "background").paint, {
+    "background-color": customBackgroundColor,
+  });
+});

styles/test/index.test.ts

@@ -5,6 +5,7 @@ import layers from "../src/index";
 import themes from "../src/themes";
 
 import "./base_layers.test";
+import "./custom_themes.test";
 import "./themes.test";
 
 const STUB = {