@versatiles/style 3.6.1 → 3.8.0

package/README.MD

@@ -125,7 +125,7 @@ interface {
 
 ### Method: `colorful(options)`
 
-<sup><a href="https://github.com/versatiles-org/versatiles-style/blob/516812e/src/index.ts#L4">\[src]</a></sup>
+<sup><a href="https://github.com/versatiles-org/versatiles-style/blob/326466c/src/index.ts#L4">\[src]</a></sup>
 
 **Parameters:**
 
@@ -135,7 +135,7 @@ interface {
 
 ### Method: `graybeard(options)`
 
-<sup><a href="https://github.com/versatiles-org/versatiles-style/blob/516812e/src/index.ts#L9">\[src]</a></sup>
+<sup><a href="https://github.com/versatiles-org/versatiles-style/blob/326466c/src/index.ts#L9">\[src]</a></sup>
 
 **Parameters:**
 
@@ -143,19 +143,19 @@ interface {
 
 **Returns:** <code>MaplibreStyle</code>
 
-### Method: `guessStyle(spec)`
+### Method: `guessStyle(opt)`
 
-<sup><a href="https://github.com/versatiles-org/versatiles-style/blob/516812e/src/lib/style_guesser.ts#L12">\[src]</a></sup>
+<sup><a href="https://github.com/versatiles-org/versatiles-style/blob/326466c/src/lib/style_guesser.ts#L12">\[src]</a></sup>
 
 **Parameters:**
 
-* <code>spec: TileJSONOption</code>
+* <code>opt: TileJSONOption</code>
 
 **Returns:** <code>MaplibreStyle</code>
 
 ### Method: `neutrino(options)`
 
-<sup><a href="https://github.com/versatiles-org/versatiles-style/blob/516812e/src/index.ts#L14">\[src]</a></sup>
+<sup><a href="https://github.com/versatiles-org/versatiles-style/blob/326466c/src/index.ts#L14">\[src]</a></sup>
 
 **Parameters:**
 

package/dist/index.test.js

@@ -36,7 +36,7 @@ describe('Colorful', () => {
 });
 describe('guessStyle', () => {
     const tiles = ['https://fancy.map/tiles/{z}/{x}/{y}'];
-    const vector_layers = [{ id: 'hallo', fields: { label: 'String' } }];
+    const vectorLayers = [{ id: 'hallo', fields: { label: 'String' } }];
     it('should build raster styles', () => {
         const style = builders.guessStyle({
             tiles,
@@ -52,7 +52,7 @@ describe('guessStyle', () => {
         const style = builders.guessStyle({
             tiles,
             format: 'pbf',
-            vector_layers,
+            vectorLayers,
         });
         expect(style).toStrictEqual({
             layers: [
@@ -61,7 +61,7 @@ describe('guessStyle', () => {
                 { id: 'vectorSource-hallo-line', filter: ['==', '$type', 'LineString'], layout: { 'line-cap': 'round', 'line-join': 'round' }, paint: { 'line-color': 'hsla(14,50%,52%,0.6)' }, source: 'vectorSource', 'source-layer': 'hallo', type: 'line' },
                 { id: 'vectorSource-hallo-circle', filter: ['==', '$type', 'Point'], paint: { 'circle-color': 'hsla(14,50%,52%,0.6)', 'circle-radius': 2 }, source: 'vectorSource', 'source-layer': 'hallo', type: 'circle' },
             ],
-            sources: { vectorSource: { format: 'pbf', tilejson: '3.0.0', tiles, type: 'vector', vector_layers } },
+            sources: { vectorSource: { format: 'pbf', tilejson: '3.0.0', tiles, type: 'vector', vector_layers: vectorLayers } },
             'version': 8,
         });
     });

package/dist/lib/shortbread/template.js

@@ -12,6 +12,7 @@ export default function getTemplate() {
         sprite: 'https://tiles.versatiles.org/sprites/sprites',
         sources: {
             'versatiles-shortbread': {
+                tilejson: '3.0.0',
                 attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
                 tiles: [
                     'https://tiles.versatiles.org/tiles/osm/{z}/{x}/{y}',

package/dist/lib/style_builder.js

@@ -11,9 +11,9 @@ export default class StyleBuilder {
         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 glyphs = options.glyphs ?? '/assets/fonts/{fontstack}/{range}.pbf';
+        const sprite = options.sprite ?? '/assets/sprites/sprites';
+        const tiles = options.tiles ?? ['/tiles/osm/{z}/{x}/{y}'];
         const hideLabels = options.hideLabels ?? false;
         const languageSuffix = options.languageSuffix ?? '';
         const recolorOptions = options.recolor ?? getDefaultRecolorFlags();
@@ -64,11 +64,11 @@ export default class StyleBuilder {
             layers = layers.filter(l => l.type !== 'symbol');
         style.layers = layers;
         style.name = 'versatiles-' + this.name.toLowerCase();
-        style.glyphs = resolveUrl(baseUrl, glyphsUrl);
-        style.sprite = resolveUrl(baseUrl, spriteUrl);
+        style.glyphs = resolveUrl(baseUrl, glyphs);
+        style.sprite = resolveUrl(baseUrl, sprite);
         const source = style.sources[this.#sourceName];
         if ('tiles' in source)
-            source.tiles = tilesUrls.map(url => resolveUrl(baseUrl, url));
+            source.tiles = tiles.map(url => resolveUrl(baseUrl, url));
         return style;
         function resolveUrl(base, url) {
             if (!Boolean(base))

package/dist/lib/style_guesser.d.ts

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

package/dist/lib/style_guesser.js

@@ -3,48 +3,71 @@
 import { isTileJSONSpecification } from './types.js';
 import randomColorGenerator from './random_color.js';
 import Colorful from '../style/colorful.js';
-export default function guess(spec) {
+export default function guess(opt) {
+    const { format } = opt;
+    const tilejsonBasic = {
+        tilejson: opt.tilejson ?? '3.0.0',
+        attribution: opt.attribution,
+        tiles: opt.tiles,
+        scheme: opt.scheme,
+        bounds: opt.bounds,
+        center: opt.center,
+        description: opt.description,
+        fillzoom: opt.fillzoom,
+        grids: opt.grids,
+        legend: opt.legend,
+        minzoom: opt.minzoom,
+        maxzoom: opt.maxzoom,
+        name: opt.name,
+        template: opt.template,
+    };
+    let k;
+    for (k in tilejsonBasic) {
+        // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+        if (tilejsonBasic[k] === undefined)
+            delete tilejsonBasic[k];
+    }
     let tilejson;
-    const { format } = spec;
     switch (format) {
         case 'avif':
         case 'jpg':
         case 'png':
         case 'webp':
-            tilejson = {
-                tilejson: '3.0.0',
-                type: 'raster',
-                ...spec,
-                format,
-            };
+            tilejson = { ...tilejsonBasic, type: 'raster', format };
             break;
         case 'pbf':
-            const { vector_layers } = spec;
-            if (vector_layers == null) {
+            const { vectorLayers } = opt;
+            if (vectorLayers == null) {
                 throw Error('property vector_layers is required for vector tiles');
             }
-            tilejson = {
-                tilejson: '3.0.0',
-                type: 'vector',
-                ...spec,
-                format,
-                vector_layers,
-            };
+            tilejson = { ...tilejsonBasic, type: 'vector', format, vector_layers: vectorLayers };
             break;
     }
     if (!isTileJSONSpecification(tilejson))
         throw Error();
+    let style;
     switch (tilejson.type) {
         case 'raster':
-            return getImageStyle(tilejson);
+            style = getImageStyle(tilejson);
+            break;
         case 'vector':
             if (isShortbread(tilejson)) {
-                return getShortbreadStyle(tilejson);
+                style = getShortbreadStyle(tilejson, { baseUrl: opt.baseUrl, glyphs: opt.glyphs, sprite: opt.sprite });
             }
             else {
-                return getInspectorStyle(tilejson);
+                style = getInspectorStyle(tilejson);
             }
     }
+    if (opt.minzoom ?? 0)
+        style.zoom ??= opt.minzoom;
+    if (opt.bounds)
+        style.center ??= [
+            (opt.bounds[0] + opt.bounds[2]) / 2,
+            (opt.bounds[1] + opt.bounds[3]) / 2,
+        ];
+    if (opt.center)
+        style.center = opt.center;
+    return style;
 }
 function isShortbread(spec) {
     if (typeof spec !== 'object')
@@ -57,10 +80,13 @@ function isShortbread(spec) {
     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) {
+function getShortbreadStyle(spec, builderOption) {
     return new Colorful().build({
         hideLabels: true,
-        tilesUrls: spec.tiles,
+        tiles: spec.tiles,
+        baseUrl: builderOption.baseUrl,
+        glyphs: builderOption.glyphs,
+        sprite: builderOption.sprite,
     });
 }
 function getInspectorStyle(spec) {

package/dist/lib/style_guesser.test.js

@@ -1,7 +1,10 @@
 /* eslint-disable @typescript-eslint/naming-convention */
+import getTemplate from './shortbread/template.js';
 import guessStyle from './style_guesser.js';
 describe('guessStyle', () => {
     const tiles = ['https://example.com/tiles/{z}/{x}/{y}'];
+    const vectorLayersSomething = [{ id: 'geometry', fields: { label: 'String', height: 'Number' } }];
+    const vectorLayersShortbread = getTemplate().sources['versatiles-shortbread'].vector_layers;
     it('should build raster styles', () => {
         const type = 'raster';
         const format = 'avif';
@@ -12,14 +15,13 @@ describe('guessStyle', () => {
             layers: [{ id: 'raster', source: 'rasterSource', type }],
         });
     });
-    it('should build vector styles', () => {
+    it('should build vector inspector styles', () => {
         const type = 'vector';
         const format = 'pbf';
-        const vector_layers = [{ id: 'geometry', fields: { label: 'String', height: 'Number' } }];
-        expect(guessStyle({ tiles, format, vector_layers }))
+        expect(guessStyle({ tiles, format, vectorLayers: vectorLayersSomething }))
             .toStrictEqual({
             version: 8,
-            sources: { vectorSource: { format, tilejson: '3.0.0', tiles, type, vector_layers } },
+            sources: { vectorSource: { format, tilejson: '3.0.0', tiles, type, vector_layers: vectorLayersSomething } },
             layers: [
                 {
                     id: 'background',
@@ -54,4 +56,69 @@ describe('guessStyle', () => {
             ],
         });
     });
+    it('should build shortbread vector styles', () => {
+        const type = 'vector';
+        const format = 'pbf';
+        const style = guessStyle({ tiles, format, vectorLayers: vectorLayersShortbread, baseUrl: 'http://example.com' });
+        expect(style.layers.length).toBe(236);
+        style.layers = [];
+        expect(style).toStrictEqual({
+            glyphs: 'http://example.com/assets/fonts/{fontstack}/{range}.pbf',
+            metadata: {
+                license: 'https://creativecommons.org/publicdomain/zero/1.0/',
+                'maputnik:renderer': 'mbgljs',
+            },
+            name: 'versatiles-colorful',
+            sprite: 'http://example.com/assets/sprites/sprites',
+            layers: [],
+            sources: {
+                'versatiles-shortbread': {
+                    attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+                    bounds: [-180, -85.0511287798066, 180, 85.0511287798066],
+                    format,
+                    maxzoom: 14,
+                    minzoom: 0,
+                    scheme: 'xyz',
+                    tilejson: '3.0.0',
+                    tiles,
+                    type,
+                    vector_layers: vectorLayersShortbread,
+                },
+            },
+            version: 8,
+        });
+    });
+    const cases = [
+        { type: 'image', options: { tiles, format: 'png' } },
+        { type: 'inspector', options: { tiles, format: 'pbf', vectorLayers: vectorLayersSomething } },
+        { type: 'shortbread', options: { tiles, format: 'pbf', vectorLayers: vectorLayersShortbread } },
+    ];
+    describe('minzoom sets zoom', () => {
+        cases.forEach(({ type, options }) => {
+            it(type, () => {
+                expect(guessStyle({ ...options, minzoom: 5 })).toHaveProperty('zoom', 5);
+            });
+        });
+    });
+    describe('bounds sets center', () => {
+        cases.forEach(({ type, options }) => {
+            it(type, () => {
+                expect(guessStyle({ ...options, bounds: [1, 2, 3, 4] })).toHaveProperty('center', [2, 3]);
+            });
+        });
+    });
+    describe('center sets center', () => {
+        cases.forEach(({ type, options }) => {
+            it(type, () => {
+                expect(guessStyle({ ...options, center: [12, 34] })).toHaveProperty('center', [12, 34]);
+            });
+        });
+    });
+    describe('center overrides bounds', () => {
+        cases.forEach(({ type, options }) => {
+            it(type, () => {
+                expect(guessStyle({ ...options, bounds: [1, 2, 3, 4], center: [12, 34] })).toHaveProperty('center', [12, 34]);
+            });
+        });
+    });
 });

package/dist/lib/types.d.ts

@@ -1,10 +1,15 @@
 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';
+/** Represents the available tile formats. */
 export type TileFormat = 'avif' | 'bin' | 'geojson' | 'jpg' | 'json' | 'pbf' | 'png' | 'svg' | 'topojson' | 'webp';
+/** Type for Maplibre layers, including background, fill, line, and symbol specifications. */
 export type MaplibreLayer = BackgroundLayerSpecification | FillLayerSpecification | LineLayerSpecification | SymbolLayerSpecification;
+/** Defines the structure of Maplibre layer definitions, omitting the 'source' property for fill, line, and symbol specifications. */
 export type MaplibreLayerDefinition = BackgroundLayerSpecification | Omit<FillLayerSpecification, 'source'> | Omit<LineLayerSpecification, 'source'> | Omit<SymbolLayerSpecification, 'source'>;
+/** Represents a filter specification in Maplibre styles. */
 export type MaplibreFilter = FilterSpecification;
+/** Represents the structure of a vector layer in a TileJSON specification. */
 export interface VectorLayer {
     id: string;
     fields: Record<string, 'Boolean' | 'Number' | 'String'>;
@@ -12,6 +17,7 @@ export interface VectorLayer {
     minzoom?: number;
     maxzoom?: number;
 }
+/** Basic structure for TileJSON specification, applicable to both raster and vector types. */
 export interface TileJSONSpecificationBasic {
     tilejson?: '3.0.0';
     attribution?: string;
@@ -28,65 +34,112 @@ export interface TileJSONSpecificationBasic {
     name?: string;
     template?: string;
 }
+/** Structure for TileJSON specification of raster type, specifying raster-specific properties. */
 export interface TileJSONSpecificationRaster extends TileJSONSpecificationBasic {
     type: 'raster';
     format: 'avif' | 'jpg' | 'png' | 'webp';
 }
+/** Structure for TileJSON specification of vector type, specifying vector-specific properties. */
 export interface TileJSONSpecificationVector extends TileJSONSpecificationBasic {
     type: 'vector';
     format: 'pbf';
     vector_layers: VectorLayer[];
 }
+/** Represents a TileJSON specification, which can be either raster or vector. */
 export type TileJSONSpecification = TileJSONSpecificationRaster | TileJSONSpecificationVector;
+/** Options for creating TileJSON, extending the basic specification with format and optional vector layers. */
 export interface TileJSONOption extends TileJSONSpecificationBasic {
     format: 'avif' | 'jpg' | 'pbf' | 'png' | 'webp';
-    vector_layers?: VectorLayer[];
+    vectorLayers?: VectorLayer[];
+    baseUrl?: string;
+    glyphs?: string;
+    sprite?: string;
 }
+/** Type for Maplibre styles specifically designed for raster sources. */
 export type MaplibreStyleRaster = Omit<StyleSpecification, 'sources'> & {
     'sources': {
         [_: string]: TileJSONSpecificationRaster;
     };
 };
+/** Type for Maplibre styles specifically designed for vector sources. */
 export type MaplibreStyleVector = Omit<StyleSpecification, 'sources'> & {
     'sources': {
         [_: string]: TileJSONSpecificationVector;
     };
 };
+/** Represents a Maplibre style, which can be either raster or vector. */
 export type MaplibreStyle = MaplibreStyleRaster | MaplibreStyleVector;
+/** Defines the value type for a style rule. */
 export type StyleRuleValue = boolean | number | object | string;
+/** Defines the structure of a style rule, which is a record of properties to style values. */
 export type StyleRule = Record<string, StyleRuleValue | undefined>;
+/** Defines the structure of style rules, which is a record of selectors to style rules. */
 export type StyleRules = Record<string, StyleRule | undefined>;
+/** Represents language suffixes used in map styles. */
 export type LanguageSuffix = '_de' | '_en' | '';
+/** Defines the keys for color properties in a style builder. */
 export type StylemakerColorKeys<T extends StyleBuilder<T>> = keyof T['defaultColors'];
+/** Defines the keys for font properties in a style builder. */
 export type StylemakerFontKeys<T extends StyleBuilder<T>> = keyof T['defaultFonts'];
+/** Records string values for color properties in a style builder. */
 export type StylemakerColorStrings<T extends StyleBuilder<T>> = Record<StylemakerColorKeys<T>, string>;
+/** Records string values for font properties in a style builder. */
 export type StylemakerFontStrings<T extends StyleBuilder<T>> = Record<StylemakerFontKeys<T>, string>;
+/** Records Color objects for color properties in a style builder. */
 export type StylemakerColors<T extends StyleBuilder<T>> = Record<StylemakerColorKeys<T>, Color>;
+/** Records string values for font properties in a style builder. */
 export type StylemakerFonts<T extends StyleBuilder<T>> = Record<StylemakerFontKeys<T>, string>;
+/** Defines options for style rules in a style builder. */
 export interface StyleRulesOptions<T extends StyleBuilder<T>> {
     colors: StylemakerColors<T>;
     fonts: StylemakerFontStrings<T>;
     languageSuffix: string;
 }
 export interface RecolorOptions {
+    /** If true, inverts the colors. */
     invert?: boolean;
+    /** The degree to rotate the hue of the color (in degrees). */
     rotate?: number;
+    /** Adjusts the saturation level of the color. Positive values increase saturation, negative values decrease it. */
     saturate?: number;
+    /** Adjusts the gamma of the color. Affects the brightness in a non-linear manner. */
     gamma?: number;
+    /** Adjusts the contrast of the color. Higher values produce more contrast. */
     contrast?: number;
+    /** Adjusts the brightness of the color. Positive values make it brighter, negative values make it darker. */
     brightness?: number;
+    /** Specifies the intensity of the tinting effect. Ranges from 0 (no effect) to 1 (full effect). */
     tint?: number;
+    /** Specifies the color used for tinting, in a string format (e.g., '#FF0000'). */
     tintColor?: string;
 }
 export interface StylemakerOptions<T extends StyleBuilder<T>> {
+    /** The base URL for loading external resources like tiles, sprites, and fonts. */
     baseUrl?: string;
-    glyphsUrl?: string;
-    spriteUrl?: string;
-    tilesUrls?: string[];
+    /** The URL template for loading font glyphs, formatted with `{fontstack}` and `{range}` placeholders. */
+    glyphs?: string;
+    /** The URL for loading sprite images and metadata. */
+    sprite?: string;
+    /** An array of URL templates for loading map tiles, with `{z}`, `{x}`, and `{y}` placeholders. */
+    tiles?: string[];
+    /** If true, hides all map labels. */
     hideLabels?: boolean;
+    /** Suffix to append to language-specific resources, such as `"-en"` for English. */
     languageSuffix?: LanguageSuffix;
+    /** An object specifying overrides for default color values, keyed by the color names. */
     colors?: Partial<StylemakerColorStrings<T>>;
+    /** An object specifying overrides for default font names, keyed by the font names. */
     fonts?: Partial<StylemakerFontStrings<T>>;
+    /** Options for color adjustments and transformations applied to the entire style. */
     recolor?: RecolorOptions;
 }
+/**
+* Checks if an object adheres to the TileJSON specification.
+* Throws errors if the object does not conform to the expected structure or types.
+*/
 export declare function isTileJSONSpecification(obj: unknown): obj is TileJSONSpecification;
+/**
+* Validates if an object conforms to the VectorLayer structure.
+* Throws errors for any deviations from the expected structure or types.
+*/
+export declare function validateVectorLayer(obj: unknown): boolean;

package/dist/lib/types.js

@@ -1,4 +1,8 @@
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
+/**
+* Checks if an object adheres to the TileJSON specification.
+* Throws errors if the object does not conform to the expected structure or types.
+*/
 export function isTileJSONSpecification(obj) {
     if (typeof obj !== 'object' || obj === null) {
         throw Error('spec must be an object');
@@ -65,7 +69,11 @@ export function isTileJSONSpecification(obj) {
     }
     return true;
 }
-function validateVectorLayer(obj) {
+/**
+* Validates if an object conforms to the VectorLayer structure.
+* Throws errors for any deviations from the expected structure or types.
+*/
+export function validateVectorLayer(obj) {
     if (typeof obj !== 'object' || obj === null) {
         throw Error('layer must be an object');
     }

package/dist/style/colorful.d.ts

@@ -7,46 +7,87 @@ export default class Colorful extends StyleBuilder<Colorful> {
         bold: string;
     };
     defaultColors: {
+        /** Color for land areas on the map. */
         land: string;
+        /** Color for water bodies like lakes and rivers. */
         water: string;
+        /** Color for glacier areas, usually shown as white. */
         glacier: string;
+        /** Color for wooded or forested areas. */
         wood: string;
+        /** Color for grasslands or open fields. */
         grass: string;
+        /** Color for parks and recreational areas. */
         park: string;
+        /** Color for streets and roads on the map. */
         street: string;
+        /** Background color for streets. */
         streetbg: string;
+        /** Color for major highways or motorways. */
         motorway: string;
+        /** Background color for motorways. */
         motorwaybg: string;
+        /** Color for trunk roads. */
         trunk: string;
+        /** Background color for trunk roads. */
         trunkbg: string;
+        /** Background color for buildings. */
         buildingbg: string;
+        /** Primary color for buildings. */
         building: string;
+        /** Color used for boundaries. */
         boundary: string;
+        /** Color used for disputed boundaries. */
         disputed: string;
+        /** Color used for residential areas. */
         residential: string;
+        /** Color used for commercial areas. */
         commercial: string;
+        /** Color used for industrial areas. */
         industrial: string;
+        /** Color used for footpaths and pedestrian areas. */
         foot: string;
+        /** Primary color used for labels. */
         label: string;
+        /** Color used for label halos. */
         labelHalo: string;
+        /** Color used for shields on maps. */
         shield: string;
+        /** Color used for agriculture areas. */
         agriculture: string;
+        /** Color used for railways. */
         rail: string;
+        /** Color used for subways and underground systems. */
         subway: string;
+        /** Color used for cycle paths. */
         cycle: string;
+        /** Color used for waste areas. */
         waste: string;
+        /** Color used for burial and cemetery areas. */
         burial: string;
+        /** Color used for sand areas like beaches. */
         sand: string;
+        /** Color used for rocky terrain. */
         rock: string;
+        /** Color used for leisure areas like parks and gardens. */
         leisure: string;
+        /** Color used for wetland areas like marshes. */
         wetland: string;
+        /** Color used for various symbols on the map. */
         symbol: string;
+        /** Color indicating danger or warning areas. */
         danger: string;
+        /** Color used for prison areas. */
         prison: string;
+        /** Color used for parking areas. */
         parking: string;
+        /** Color used for construction sites. */
         construction: string;
+        /** Color used for educational facilities. */
         education: string;
+        /** Color used for hospitals and medical facilities. */
         hospital: string;
+        /** Color used for points of interest. */
         poi: string;
     };
     protected getStyleRules(options: StyleRulesOptions<Colorful>): StyleRules;

package/dist/style/colorful.js

@@ -7,46 +7,87 @@ export default class Colorful extends StyleBuilder {
         bold: 'noto_sans_bold',
     };
     defaultColors = {
+        /** Color for land areas on the map. */
         land: '#F9F4EE',
+        /** Color for water bodies like lakes and rivers. */
         water: '#BEDDF3',
+        /** Color for glacier areas, usually shown as white. */
         glacier: '#FFFFFF',
+        /** Color for wooded or forested areas. */
         wood: '#66AA44',
+        /** Color for grasslands or open fields. */
         grass: '#D8E8C8',
+        /** Color for parks and recreational areas. */
         park: '#D9D9A5',
+        /** Color for streets and roads on the map. */
         street: '#FFFFFF',
+        /** Background color for streets. */
         streetbg: '#CFCDCA',
+        /** Color for major highways or motorways. */
         motorway: '#FFCC88',
+        /** Background color for motorways. */
         motorwaybg: '#E9AC77',
+        /** Color for trunk roads. */
         trunk: '#FFEEAA',
+        /** Background color for trunk roads. */
         trunkbg: '#E9AC77',
+        /** Background color for buildings. */
         buildingbg: '#DFDBD7',
+        /** Primary color for buildings. */
         building: '#F2EAE2',
+        /** Color used for boundaries. */
         boundary: '#A6A6C8',
+        /** Color used for disputed boundaries. */
         disputed: '#BEBCCF',
+        /** Color used for residential areas. */
         residential: '#EAE6E133',
+        /** Color used for commercial areas. */
         commercial: '#F7DEED40',
+        /** Color used for industrial areas. */
         industrial: '#FFF4C255',
+        /** Color used for footpaths and pedestrian areas. */
         foot: '#FBEBFF',
+        /** Primary color used for labels. */
         label: '#333344',
+        /** Color used for label halos. */
         labelHalo: '#FFFFFFCC',
+        /** Color used for shields on maps. */
         shield: '#FFFFFF',
+        /** Color used for agriculture areas. */
         agriculture: '#F0E7D1',
+        /** Color used for railways. */
         rail: '#B1BBC4',
+        /** Color used for subways and underground systems. */
         subway: '#A6B8C7',
+        /** Color used for cycle paths. */
         cycle: '#EFF9FF',
+        /** Color used for waste areas. */
         waste: '#DBD6BD',
+        /** Color used for burial and cemetery areas. */
         burial: '#DDDBCA',
+        /** Color used for sand areas like beaches. */
         sand: '#FAFAED',
+        /** Color used for rocky terrain. */
         rock: '#E0E4E5',
+        /** Color used for leisure areas like parks and gardens. */
         leisure: '#E7EDDE',
+        /** Color used for wetland areas like marshes. */
         wetland: '#D3E6DB',
+        /** Color used for various symbols on the map. */
         symbol: '#66626A',
+        /** Color indicating danger or warning areas. */
         danger: '#FF0000',
+        /** Color used for prison areas. */
         prison: '#FDF2FC',
+        /** Color used for parking areas. */
         parking: '#EBE8E6',
+        /** Color used for construction sites. */
         construction: '#A9A9A9',
+        /** Color used for educational facilities. */
         education: '#FFFF80',
+        /** Color used for hospitals and medical facilities. */
         hospital: '#FF6666',
+        /** Color used for points of interest. */
         poi: '#555555',
     };
     getStyleRules(options) {

package/dist/style/neutrino.d.ts

@@ -7,17 +7,29 @@ export default class Neutrino extends StyleBuilder<Neutrino> {
         bold: string;
     };
     defaultColors: {
+        /** Color representing land areas. */
         land: string;
+        /** Color representing bodies of water such as lakes and rivers. */
         water: string;
+        /** Color for grassy areas and fields. */
         grass: string;
+        /** Color for wooded or forested areas. */
         wood: string;
+        /** Color used for agricultural land. */
         agriculture: string;
+        /** Color for site areas such as parks or recreational facilities. */
         site: string;
+        /** Primary color for buildings. */
         building: string;
+        /** Color for streets and roads. */
         street: string;
+        /** Color used for boundaries, such as national or state lines. */
         boundary: string;
+        /** Color for footpaths and pedestrian areas. */
         foot: string;
+        /** Color used for railways. */
         rail: string;
+        /** Primary color used for text labels. */
         label: string;
     };
     protected getStyleRules(options: StyleRulesOptions<Neutrino>): StyleRules;

package/dist/style/neutrino.js

@@ -7,17 +7,29 @@ export default class Neutrino extends StyleBuilder {
         bold: 'noto_sans_bold',
     };
     defaultColors = {
+        /** Color representing land areas. */
         land: '#f6f0f6',
+        /** Color representing bodies of water such as lakes and rivers. */
         water: '#cbd2df',
+        /** Color for grassy areas and fields. */
         grass: '#e7e9e5',
+        /** Color for wooded or forested areas. */
         wood: '#d9e3d9',
+        /** Color used for agricultural land. */
         agriculture: '#f8eeee',
+        /** Color for site areas such as parks or recreational facilities. */
         site: '#ebe8e6',
+        /** Primary color for buildings. */
         building: '#e0d1d9',
+        /** Color for streets and roads. */
         street: '#ffffff',
+        /** Color used for boundaries, such as national or state lines. */
         boundary: '#e6ccd8',
+        /** Color for footpaths and pedestrian areas. */
         foot: '#fef8ff',
+        /** Color used for railways. */
         rail: '#e8d5e0',
+        /** Primary color used for text labels. */
         label: '#cbb7b7',
     };
     getStyleRules(options) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@versatiles/style",
-  "version": "3.6.1",
+  "version": "3.8.0",
   "description": "Generate StyleJSON for MapLibre",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",