@versatiles/style 3.5.2 → 3.6.1

package/dist/lib/style_builder.d.ts

@@ -1,19 +1,12 @@
 import Color from 'color';
-import type { LanguageSuffix, MaplibreStyle, RecolorOptions, StyleRules, StyleRulesOptions } from './types.js';
-export default abstract class StyleBuilder {
+import type { MaplibreStyle, StyleRules, StyleRulesOptions, StylemakerColorStrings, StylemakerColors, StylemakerFontStrings, StylemakerOptions } from './types.js';
+export default abstract class StyleBuilder<Subclass extends StyleBuilder<Subclass>> {
     #private;
-    baseUrl: string;
-    glyphsUrl: string;
-    spriteUrl: string;
-    tilesUrls: string[];
-    hideLabels: boolean;
-    languageSuffix: LanguageSuffix;
-    recolor: RecolorOptions;
     abstract readonly name: string;
-    abstract fonts: Record<string, string>;
-    abstract colors: Record<string, string>;
-    constructor();
-    build(): MaplibreStyle;
-    protected resetColors(callback: (color: Color) => Color): void;
-    protected abstract getStyleRules(opt: StyleRulesOptions): StyleRules;
+    abstract readonly defaultColors: StylemakerColorStrings<Subclass>;
+    abstract readonly defaultFonts: StylemakerFontStrings<Subclass>;
+    build(options?: StylemakerOptions<Subclass>): MaplibreStyle;
+    getColors(colors: StylemakerColorStrings<Subclass>): StylemakerColors<Subclass>;
+    protected transformDefaultColors(callback: (color: Color) => Color): void;
+    protected abstract getStyleRules(options: StyleRulesOptions<Subclass>): StyleRules;
 }

package/dist/lib/style_builder.js

@@ -3,42 +3,46 @@ import getShortbreadTemplate from './shortbread/template.js';
 import getShortbreadLayers from './shortbread/layers.js';
 import { decorate } from './decorator.js';
 import { getDefaultRecolorFlags, recolor } from './recolor.js';
+import { deepClone } from './utils.js';
 // Stylemaker class definition
 export default class StyleBuilder {
-    baseUrl;
-    glyphsUrl = '/assets/fonts/{fontstack}/{range}.pbf';
-    spriteUrl = '/assets/sprites/sprites';
-    tilesUrls = ['/tiles/osm/{z}/{x}/{y}'];
-    hideLabels = false;
-    languageSuffix = '';
-    recolor = getDefaultRecolorFlags();
     #sourceName = 'versatiles-shortbread';
-    // Constructor
-    constructor() {
-        try {
-            // @ts-expect-error: I'm not sure if I'm in a browser
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-            this.baseUrl = document.location.href;
+    build(options) {
+        options ??= {};
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        const baseUrl = options.baseUrl ?? globalThis?.document?.location?.href ?? 'https://tiles.versatiles.org';
+        const glyphsUrl = options.glyphsUrl ?? '/assets/fonts/{fontstack}/{range}.pbf';
+        const spriteUrl = options.spriteUrl ?? '/assets/sprites/sprites';
+        const tilesUrls = options.tilesUrls ?? ['/tiles/osm/{z}/{x}/{y}'];
+        const hideLabels = options.hideLabels ?? false;
+        const languageSuffix = options.languageSuffix ?? '';
+        const recolorOptions = options.recolor ?? getDefaultRecolorFlags();
+        const colors = this.getColors(this.defaultColors);
+        if (options.colors) {
+            for (const key in options.colors)
+                colors[key] = Color(options.colors[key]);
         }
-        catch (e) {
-            this.baseUrl = 'https://tiles.versatiles.org'; // set me in the browser
+        // transform colors
+        recolor(colors, recolorOptions);
+        const fonts = deepClone(this.defaultColors);
+        if (options.fonts) {
+            for (const key in options.fonts) {
+                const fontName = options.fonts[key];
+                if (fontName != null)
+                    fonts[key] = fontName;
+            }
         }
-    }
-    build() {
         // get empty shortbread style
         const style = getShortbreadTemplate();
-        const colors = Object.fromEntries(Object.entries(this.colors)
-            .map(([name, colorString]) => [name, Color(colorString)]));
-        // transform colors
-        recolor(colors, this.recolor);
-        // get layer style rules from child class
-        const layerStyleRules = this.getStyleRules({
+        const styleRuleOptions = {
             colors,
-            fonts: this.fonts,
-            languageSuffix: this.languageSuffix,
-        });
+            fonts: deepClone(this.defaultFonts),
+            languageSuffix,
+        };
+        // get layer style rules from child class
+        const layerStyleRules = this.getStyleRules(styleRuleOptions);
         // get shortbread layers
-        const layerDefinitions = getShortbreadLayers({ languageSuffix: this.languageSuffix });
+        const layerDefinitions = getShortbreadLayers({ languageSuffix });
         let layers = layerDefinitions.map(layer => {
             switch (layer.type) {
                 case 'background':
@@ -56,28 +60,35 @@ export default class StyleBuilder {
         // apply layer rules
         layers = decorate(layers, layerStyleRules);
         // hide labels, if wanted
-        if (this.hideLabels)
+        if (hideLabels)
             layers = layers.filter(l => l.type !== 'symbol');
         style.layers = layers;
-        style.name = 'versatiles-' + this.name;
-        style.glyphs = resolveUrl(this.baseUrl, this.glyphsUrl);
-        style.sprite = resolveUrl(this.baseUrl, this.spriteUrl);
+        style.name = 'versatiles-' + this.name.toLowerCase();
+        style.glyphs = resolveUrl(baseUrl, glyphsUrl);
+        style.sprite = resolveUrl(baseUrl, spriteUrl);
         const source = style.sources[this.#sourceName];
         if ('tiles' in source)
-            source.tiles = this.tilesUrls.map(url => resolveUrl(this.baseUrl, url));
+            source.tiles = tilesUrls.map(url => resolveUrl(baseUrl, url));
         return style;
-        function resolveUrl(baseUrl, url) {
-            if (!Boolean(baseUrl))
+        function resolveUrl(base, url) {
+            if (!Boolean(base))
                 return url;
-            url = new URL(url, baseUrl).href;
+            url = new URL(url, base).href;
             url = url.replace(/%7B/gi, '{');
             url = url.replace(/%7D/gi, '}');
             return url;
         }
     }
-    resetColors(callback) {
-        const colors = Object.fromEntries(Object.entries(this.colors)
-            .map(([name, color]) => [name, callback(Color(color)).hexa()]));
-        this.colors = colors;
+    getColors(colors) {
+        const entriesString = Object.entries(colors);
+        const entriesColor = entriesString.map(([key, value]) => [key, Color(value)]);
+        const result = Object.fromEntries(entriesColor);
+        return result;
+    }
+    transformDefaultColors(callback) {
+        const colors = this.getColors(this.defaultColors);
+        for (const key in colors) {
+            this.defaultColors[key] = callback(colors[key]).hexa();
+        }
     }
 }

package/dist/lib/style_builder.test.js

@@ -4,10 +4,10 @@ import StyleBuilder from './style_builder.js';
 // Mock class for abstract class StyleBuilder
 class MockStyleBuilder extends StyleBuilder {
     name = 'mock';
-    fonts = { regular: 'Arial' };
-    colors = { primary: '#FF8800' };
+    defaultFonts = { regular: 'Arial' };
+    defaultColors = { primary: '#FF8800' };
     negateColors() {
-        this.resetColors((color) => color.negate());
+        this.transformDefaultColors(color => color.negate());
     }
     getStyleRules(opt) {
         for (const color of Object.values(opt.colors))
@@ -20,7 +20,7 @@ class MockStyleBuilder extends StyleBuilder {
             'water-area': {
                 textColor: opt.colors.primary,
                 textSize: 12,
-                textFont: [opt.fonts.Arial],
+                textFont: opt.fonts.regular,
             },
         };
     }
@@ -41,11 +41,11 @@ describe('StyleBuilder', () => {
         expect(style).toHaveProperty('glyphs');
         expect(style).toHaveProperty('sprite');
     });
-    it('should reset colors correctly', () => {
-        const initialColor = builder.colors.primary;
+    it('should transform colors correctly', () => {
+        const initialColor = builder.defaultColors.primary;
         builder.negateColors();
-        expect(builder.colors.primary).not.toBe(initialColor);
-        expect(builder.colors.primary).toBe(Color(initialColor).negate().hexa());
+        expect(builder.defaultColors.primary).not.toBe(initialColor);
+        expect(builder.defaultColors.primary).toBe(Color(initialColor).negate().hexa());
     });
     describe('build method', () => {
         it('should create a style object', () => {
@@ -56,14 +56,8 @@ describe('StyleBuilder', () => {
             expect(style).toHaveProperty('glyphs');
             expect(style).toHaveProperty('sprite');
         });
-        it('should convert color strings to Color instances', () => {
-            builder.build();
-            const colors = Object.values(builder.colors);
-            expect(colors.every((color) => typeof color === 'string')).toBe(true);
-        });
         it('should resolve urls correctly', () => {
-            builder.baseUrl = 'https://my.base.url/';
-            const style = builder.build();
+            const style = builder.build({ baseUrl: 'https://my.base.url/' });
             expect(style.glyphs).toBe('https://my.base.url/assets/fonts/{fontstack}/{range}.pbf');
             expect(style.sprite).toBe('https://my.base.url/assets/sprites/sprites');
             const source = style.sources['versatiles-shortbread'];

package/dist/lib/style_guesser.d.ts

@@ -0,0 +1,2 @@
+import type { MaplibreStyle, TileJSONOption } from './types.js';
+export default function guess(spec: TileJSONOption): MaplibreStyle;

package/dist/lib/style_guesser.js

@@ -0,0 +1,148 @@
+/* eslint-disable @typescript-eslint/prefer-includes */
+/* eslint-disable @typescript-eslint/naming-convention */
+import { isTileJSONSpecification } from './types.js';
+import randomColorGenerator from './random_color.js';
+import Colorful from '../style/colorful.js';
+export default function guess(spec) {
+    let tilejson;
+    const { format } = spec;
+    switch (format) {
+        case 'avif':
+        case 'jpg':
+        case 'png':
+        case 'webp':
+            tilejson = {
+                tilejson: '3.0.0',
+                type: 'raster',
+                ...spec,
+                format,
+            };
+            break;
+        case 'pbf':
+            const { vector_layers } = spec;
+            if (vector_layers == null) {
+                throw Error('property vector_layers is required for vector tiles');
+            }
+            tilejson = {
+                tilejson: '3.0.0',
+                type: 'vector',
+                ...spec,
+                format,
+                vector_layers,
+            };
+            break;
+    }
+    if (!isTileJSONSpecification(tilejson))
+        throw Error();
+    switch (tilejson.type) {
+        case 'raster':
+            return getImageStyle(tilejson);
+        case 'vector':
+            if (isShortbread(tilejson)) {
+                return getShortbreadStyle(tilejson);
+            }
+            else {
+                return getInspectorStyle(tilejson);
+            }
+    }
+}
+function isShortbread(spec) {
+    if (typeof spec !== 'object')
+        return false;
+    if (!('vector_layers' in spec))
+        return false;
+    if (!Array.isArray(spec.vector_layers))
+        return false;
+    const layerIds = new Set(spec.vector_layers.map(l => String(l.id)));
+    const shortbreadIds = ['place_labels', 'boundaries', 'boundary_labels', 'addresses', 'water_lines', 'water_lines_labels', 'dam_lines', 'dam_polygons', 'pier_lines', 'pier_polygons', 'bridges', 'street_polygons', 'streets_polygons_labels', 'ferries', 'streets', 'street_labels', 'street_labels_points', 'aerialways', 'public_transport', 'buildings', 'water_polygons', 'ocean', 'water_polygons_labels', 'land', 'sites', 'pois'];
+    return shortbreadIds.every(id => layerIds.has(id));
+}
+function getShortbreadStyle(spec) {
+    return new Colorful().build({
+        hideLabels: true,
+        tilesUrls: spec.tiles,
+    });
+}
+function getInspectorStyle(spec) {
+    const sourceName = 'vectorSource';
+    const layers = { background: [], circle: [], line: [], fill: [] };
+    layers.background.push({ 'id': 'background', 'type': 'background', 'paint': { 'background-color': '#fff' } });
+    const randomColor = randomColorGenerator();
+    spec.vector_layers.forEach((vector_layer) => {
+        let luminosity = 'bright', saturation, hue;
+        if (/water|ocean|lake|sea|river/.test(vector_layer.id))
+            hue = 'blue';
+        if (/state|country|place/.test(vector_layer.id))
+            hue = 'pink';
+        if (/road|highway|transport|streets/.test(vector_layer.id))
+            hue = 'orange';
+        if (/contour|building/.test(vector_layer.id))
+            hue = 'monochrome';
+        if (/building/.test(vector_layer.id))
+            luminosity = 'dark';
+        if (/contour|landuse/.test(vector_layer.id))
+            hue = 'yellow';
+        if (/wood|forest|park|landcover|land/.test(vector_layer.id))
+            hue = 'green';
+        if (/point/.test(vector_layer.id)) {
+            saturation = 'strong';
+            luminosity = 'light';
+        }
+        const color = randomColor({
+            hue,
+            luminosity,
+            saturation,
+            seed: vector_layer.id,
+            opacity: 0.6,
+        });
+        layers.circle.push({
+            id: `${sourceName}-${vector_layer.id}-circle`,
+            'source-layer': vector_layer.id,
+            source: sourceName,
+            type: 'circle',
+            filter: ['==', '$type', 'Point'],
+            paint: { 'circle-color': color, 'circle-radius': 2 },
+        });
+        layers.line.push({
+            id: `${sourceName}-${vector_layer.id}-line`,
+            'source-layer': vector_layer.id,
+            source: sourceName,
+            type: 'line',
+            filter: ['==', '$type', 'LineString'],
+            layout: { 'line-join': 'round', 'line-cap': 'round' },
+            paint: { 'line-color': color },
+        });
+        layers.fill.push({
+            id: `${sourceName}-${vector_layer.id}-fill`,
+            'source-layer': vector_layer.id,
+            source: sourceName,
+            type: 'fill',
+            filter: ['==', '$type', 'Polygon'],
+            paint: { 'fill-color': color, 'fill-opacity': 0.3, 'fill-antialias': true, 'fill-outline-color': color },
+        });
+    });
+    return {
+        version: 8,
+        sources: {
+            [sourceName]: spec,
+        },
+        layers: [
+            ...layers.background,
+            ...layers.fill,
+            ...layers.line,
+            ...layers.circle,
+        ],
+    };
+}
+function getImageStyle(spec) {
+    const sourceName = 'rasterSource';
+    return {
+        version: 8,
+        sources: { [sourceName]: spec },
+        layers: [{
+                id: 'raster',
+                type: 'raster',
+                source: sourceName,
+            }],
+    };
+}

package/dist/lib/style_guesser.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/lib/style_guesser.test.js

@@ -0,0 +1,57 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import guessStyle from './style_guesser.js';
+describe('guessStyle', () => {
+    const tiles = ['https://example.com/tiles/{z}/{x}/{y}'];
+    it('should build raster styles', () => {
+        const type = 'raster';
+        const format = 'avif';
+        expect(guessStyle({ tiles, format }))
+            .toStrictEqual({
+            version: 8,
+            sources: { rasterSource: { format, tilejson: '3.0.0', tiles, type } },
+            layers: [{ id: 'raster', source: 'rasterSource', type }],
+        });
+    });
+    it('should build vector styles', () => {
+        const type = 'vector';
+        const format = 'pbf';
+        const vector_layers = [{ id: 'geometry', fields: { label: 'String', height: 'Number' } }];
+        expect(guessStyle({ tiles, format, vector_layers }))
+            .toStrictEqual({
+            version: 8,
+            sources: { vectorSource: { format, tilejson: '3.0.0', tiles, type, vector_layers } },
+            layers: [
+                {
+                    id: 'background',
+                    type: 'background',
+                    paint: { 'background-color': '#fff' },
+                },
+                {
+                    id: 'vectorSource-geometry-fill',
+                    type: 'fill',
+                    source: 'vectorSource',
+                    'source-layer': 'geometry',
+                    filter: ['==', '$type', 'Polygon'],
+                    paint: { 'fill-antialias': true, 'fill-color': 'hsla(7,57%,56%,0.6)', 'fill-opacity': 0.3, 'fill-outline-color': 'hsla(7,57%,56%,0.6)' },
+                },
+                {
+                    id: 'vectorSource-geometry-line',
+                    type: 'line',
+                    source: 'vectorSource',
+                    'source-layer': 'geometry',
+                    filter: ['==', '$type', 'LineString'],
+                    layout: { 'line-cap': 'round', 'line-join': 'round' },
+                    paint: { 'line-color': 'hsla(7,57%,56%,0.6)' },
+                },
+                {
+                    id: 'vectorSource-geometry-circle',
+                    type: 'circle',
+                    source: 'vectorSource',
+                    'source-layer': 'geometry',
+                    filter: ['==', '$type', 'Point'],
+                    paint: { 'circle-color': 'hsla(7,57%,56%,0.6)', 'circle-radius': 2 },
+                },
+            ],
+        });
+    });
+});

package/dist/lib/types.d.ts

@@ -1,5 +1,6 @@
 import type { BackgroundLayerSpecification, FillLayerSpecification, FilterSpecification, LineLayerSpecification, StyleSpecification, SymbolLayerSpecification } from '@maplibre/maplibre-gl-style-spec';
 import type Color from 'color';
+import type StyleBuilder from './style_builder.ts';
 export type TileFormat = 'avif' | 'bin' | 'geojson' | 'jpg' | 'json' | 'pbf' | 'png' | 'svg' | 'topojson' | 'webp';
 export type MaplibreLayer = BackgroundLayerSpecification | FillLayerSpecification | LineLayerSpecification | SymbolLayerSpecification;
 export type MaplibreLayerDefinition = BackgroundLayerSpecification | Omit<FillLayerSpecification, 'source'> | Omit<LineLayerSpecification, 'source'> | Omit<SymbolLayerSpecification, 'source'>;
@@ -11,9 +12,8 @@ export interface VectorLayer {
     minzoom?: number;
     maxzoom?: number;
 }
-export interface TileJSONSpecificationRaster {
+export interface TileJSONSpecificationBasic {
     tilejson?: '3.0.0';
-    type: 'raster';
     attribution?: string;
     tiles: string[];
     scheme?: 'tms' | 'xyz';
@@ -27,14 +27,21 @@ export interface TileJSONSpecificationRaster {
     maxzoom?: number;
     name?: string;
     template?: string;
+}
+export interface TileJSONSpecificationRaster extends TileJSONSpecificationBasic {
+    type: 'raster';
     format: 'avif' | 'jpg' | 'png' | 'webp';
 }
-export interface TileJSONSpecificationVector extends Omit<TileJSONSpecificationRaster, 'format' | 'type'> {
-    vector_layers: VectorLayer[];
-    format: 'pbf';
+export interface TileJSONSpecificationVector extends TileJSONSpecificationBasic {
     type: 'vector';
+    format: 'pbf';
+    vector_layers: VectorLayer[];
 }
 export type TileJSONSpecification = TileJSONSpecificationRaster | TileJSONSpecificationVector;
+export interface TileJSONOption extends TileJSONSpecificationBasic {
+    format: 'avif' | 'jpg' | 'pbf' | 'png' | 'webp';
+    vector_layers?: VectorLayer[];
+}
 export type MaplibreStyleRaster = Omit<StyleSpecification, 'sources'> & {
     'sources': {
         [_: string]: TileJSONSpecificationRaster;
@@ -47,14 +54,18 @@ export type MaplibreStyleVector = Omit<StyleSpecification, 'sources'> & {
 };
 export type MaplibreStyle = MaplibreStyleRaster | MaplibreStyleVector;
 export type StyleRuleValue = boolean | number | object | string;
-export type StyleRule = Record<string, StyleRuleValue>;
-export type StyleRules = Record<string, StyleRule>;
-export type StylemakerColorLookup = Record<string, Color>;
-export type StylemakerStringLookup = Record<string, string>;
+export type StyleRule = Record<string, StyleRuleValue | undefined>;
+export type StyleRules = Record<string, StyleRule | undefined>;
 export type LanguageSuffix = '_de' | '_en' | '';
-export interface StyleRulesOptions {
-    colors: StylemakerColorLookup;
-    fonts: StylemakerStringLookup;
+export type StylemakerColorKeys<T extends StyleBuilder<T>> = keyof T['defaultColors'];
+export type StylemakerFontKeys<T extends StyleBuilder<T>> = keyof T['defaultFonts'];
+export type StylemakerColorStrings<T extends StyleBuilder<T>> = Record<StylemakerColorKeys<T>, string>;
+export type StylemakerFontStrings<T extends StyleBuilder<T>> = Record<StylemakerFontKeys<T>, string>;
+export type StylemakerColors<T extends StyleBuilder<T>> = Record<StylemakerColorKeys<T>, Color>;
+export type StylemakerFonts<T extends StyleBuilder<T>> = Record<StylemakerFontKeys<T>, string>;
+export interface StyleRulesOptions<T extends StyleBuilder<T>> {
+    colors: StylemakerColors<T>;
+    fonts: StylemakerFontStrings<T>;
     languageSuffix: string;
 }
 export interface RecolorOptions {
@@ -67,4 +78,15 @@ export interface RecolorOptions {
     tint?: number;
     tintColor?: string;
 }
+export interface StylemakerOptions<T extends StyleBuilder<T>> {
+    baseUrl?: string;
+    glyphsUrl?: string;
+    spriteUrl?: string;
+    tilesUrls?: string[];
+    hideLabels?: boolean;
+    languageSuffix?: LanguageSuffix;
+    colors?: Partial<StylemakerColorStrings<T>>;
+    fonts?: Partial<StylemakerFontStrings<T>>;
+    recolor?: RecolorOptions;
+}
 export declare function isTileJSONSpecification(obj: unknown): obj is TileJSONSpecification;

package/dist/lib/types.js

@@ -44,19 +44,19 @@ export function isTileJSONSpecification(obj) {
     if (typeof spec.template !== 'undefined' && typeof spec.template !== 'string') {
         throw Error('spec.template must be a string if present');
     }
+    if (!Array.isArray(spec.tiles) || spec.tiles.length === 0 || spec.tiles.some(url => typeof url !== 'string')) {
+        throw Error('spec.tiles must be an array of strings');
+    }
     if (spec.type === 'raster') {
         if (!['avif', 'jpg', 'png', 'webp'].includes(spec.format)) {
             throw Error('spec.format must be "avif", "jpg", "png", or "webp"');
         }
-        if (!Array.isArray(spec.tiles) || spec.tiles.some(url => typeof url !== 'string')) {
-            throw Error('spec.tiles must be an array of strings');
-        }
     }
     else if (spec.type === 'vector') {
         if (spec.format !== 'pbf') {
             throw Error('spec.format must be "pbf"');
         }
-        if (!Array.isArray(spec.vector_layers) || spec.vector_layers.some(layer => !validateVectorLayer(layer))) {
+        if (!Array.isArray(spec.vector_layers) || spec.vector_layers.length === 0 || spec.vector_layers.some(layer => !validateVectorLayer(layer))) {
             throw Error('spec.vector_layers must be an array of VectorLayer');
         }
     }

package/dist/style/colorful.d.ts

@@ -1,12 +1,12 @@
 import StyleBuilder from '../lib/style_builder.js';
 import type { StyleRules, StyleRulesOptions } from '../lib/types.js';
-export default class Colorful extends StyleBuilder {
+export default class Colorful extends StyleBuilder<Colorful> {
     readonly name: string;
-    fonts: {
+    defaultFonts: {
         regular: string;
         bold: string;
     };
-    colors: {
+    defaultColors: {
         land: string;
         water: string;
         glacier: string;
@@ -49,5 +49,5 @@ export default class Colorful extends StyleBuilder {
         hospital: string;
         poi: string;
     };
-    protected getStyleRules(options: StyleRulesOptions): StyleRules;
+    protected getStyleRules(options: StyleRulesOptions<Colorful>): StyleRules;
 }

package/dist/style/colorful.js

@@ -1,12 +1,12 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import StyleBuilder from '../lib/style_builder.js';
 export default class Colorful extends StyleBuilder {
-    name = 'colorful';
-    fonts = {
+    name = 'Colorful';
+    defaultFonts = {
         regular: 'noto_sans_regular',
         bold: 'noto_sans_bold',
     };
-    colors = {
+    defaultColors = {
         land: '#F9F4EE',
         water: '#BEDDF3',
         glacier: '#FFFFFF',

package/dist/style/graybeard.js

@@ -1,8 +1,8 @@
 import Colorful from './colorful.js';
 export default class Graybeard extends Colorful {
-    name = 'graybeard';
+    name = 'Graybeard';
     constructor() {
         super();
-        this.resetColors(color => color.desaturate(1));
+        this.transformDefaultColors(color => color.desaturate(1));
     }
 }

package/dist/style/neutrino.d.ts

@@ -1,12 +1,12 @@
 import StyleBuilder from '../lib/style_builder.js';
 import type { StyleRules, StyleRulesOptions } from '../lib/types.js';
-export default class Neutrino extends StyleBuilder {
+export default class Neutrino extends StyleBuilder<Neutrino> {
     readonly name: string;
-    fonts: {
+    defaultFonts: {
         regular: string;
         bold: string;
     };
-    colors: {
+    defaultColors: {
         land: string;
         water: string;
         grass: string;
@@ -20,5 +20,5 @@ export default class Neutrino extends StyleBuilder {
         rail: string;
         label: string;
     };
-    protected getStyleRules(options: StyleRulesOptions): StyleRules;
+    protected getStyleRules(options: StyleRulesOptions<Neutrino>): StyleRules;
 }

package/dist/style/neutrino.js

@@ -1,12 +1,12 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import StyleBuilder from '../lib/style_builder.js';
 export default class Neutrino extends StyleBuilder {
-    name = 'neutrino';
-    fonts = {
+    name = 'Neutrino';
+    defaultFonts = {
         regular: 'noto_sans_regular',
         bold: 'noto_sans_bold',
     };
-    colors = {
+    defaultColors = {
         land: '#f6f0f6',
         water: '#cbd2df',
         grass: '#e7e9e5',