@versatiles/style 3.4.0

package/LICENSE.md

@@ -0,0 +1,24 @@
+This is free and unencumbered software released into the public domain.
+
+Anyone is free to copy, modify, publish, use, compile, sell, or
+distribute this software, either in source code form or as a compiled
+binary, for any purpose, commercial or non-commercial, and by any
+means.
+
+In jurisdictions that recognize copyright laws, the author or authors
+of this software dedicate any and all copyright interest in the
+software to the public domain. We make this dedication for the benefit
+of the public at large and to the detriment of our heirs and
+successors. We intend this dedication to be an overt act of
+relinquishment in perpetuity of all present and future rights to this
+software under copyright law.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+For more information, please refer to [unlicense.org](https://unlicense.org/)

package/README.MD

@@ -0,0 +1,94 @@
+# VersaTiles Styles
+
+Programatically generates Shortbread StyleJSON for MapLibre.
+
+![Example: Colorful Style](docs/colorful.png)
+
+## Styles
+
+* Colorful - colorful, full featured map
+* Neutrino - light basemap
+* Graybeard - gray basemap
+
+## Download
+
+You can download the latest StyleJSONs from the [latest release](https://github.com/versatiles-org/versatiles-styles/releases/latest/).
+We provide each style with and without labels, and also in multiple languages.
+
+Be aware that styles already include `tiles.versatiles.org` as source for tiles, fonts (glyphs) and icons (sprites). So you might want to update the URLs in the JSON.
+
+## as Node.js module
+
+Install `versatiles-styles` via NPM:
+```bash
+npm install versatiles-styles
+```
+
+Use it in Node.js:
+```javascript
+import { colorful } from 'versatiles-styles';
+let style = colorful({language:'de'});
+writeFileSync('style.json', JSON.stringify(style));
+```
+
+## in a web browser
+
+Download latest release:
+```bash
+wget "https://github.com/versatiles-org/versatiles-styles/releases/latest/download/versatiles-styles.js"
+```
+
+Use it in:
+```html
+<div id="map"></div>
+<script src="maplibre-gl.js"></script>
+<script src="versatiles-styles.js"></script>
+<script>
+	const baseUrl = new URL('/', window.location.href).href;
+	const map = new maplibregl.Map({
+		container: 'map',
+		style: versatiles_styles.colorful({
+			glyphsUrl: baseUrl + 'fonts/{fontstack}/{range}.pbf',
+			spriteUrl: baseUrl + 'sprites/sprites',
+			tilesUrl: [baseUrl + 'tiles/{z}/{x}/{y}'],
+		})
+	});
+<script>
+```
+
+## Generate styles
+
+`npm run build`
+
+## Add/edit styles
+
+* style definitions in `src/styles/*.js`
+* shortbread layer definition in `src/lib/shortbread_layers.js`
+* style template in `src/lib/shortbread_template.json`
+
+## Licenses
+
+* Code: [Unlicense](LICENSE.md)
+* Styles: [CC0 1.0 Universal](https://creativecommons.org/publicdomain/zero/1.0/)
+
+# todo
+
+* [x] convert 'in' to '==' if only one element
+* [x] outlines for roads, buildings, boundaries
+* [x] :en labels
+* [x] links under other roads, sort by size
+* [x] waterway width
+* [x] rail colorscheme
+* [x] bridge semitransparent
+* [x] cycleways and bicycle-roads
+* [x] trams
+* [x] rail zooms 17+
+* [x] minor rails
+* [x] more sites and landcovers
+* [x] airports
+* [x] pois
+* [x] sprites and patterns, revisit sprites
+* [x] public transport signage
+* [x] road signage
+* [ ] labels for rivers, islands, places
+* [ ] aggregate layers with same filters and style for smaller result

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export type { MaplibreStyle } from './lib/style_builder.js';
+export { default as Colorful } from './styles/colorful.js';
+export { default as Graybeard } from './styles/graybeard.js';
+export { default as Neutrino } from './styles/neutrino.js';

package/dist/index.js

@@ -0,0 +1,3 @@
+export { default as Colorful } from './styles/colorful.js';
+export { default as Graybeard } from './styles/graybeard.js';
+export { default as Neutrino } from './styles/neutrino.js';

package/dist/index.test.d.ts

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

package/dist/index.test.js

@@ -0,0 +1,38 @@
+import { Colorful } from './index.js';
+import * as builderClasses from './index.js';
+import StyleBuilder from './lib/style_builder.js';
+describe('Style Builders', () => {
+    const styleNames = [
+        'Colorful',
+        'Graybeard',
+        'Neutrino',
+    ];
+    it(`should have the correct ${styleNames.length} styles`, () => {
+        const keys1 = Array.from(Object.keys(builderClasses)).sort();
+        const keys2 = styleNames.sort();
+        expect(keys1).toEqual(keys2);
+    });
+    Object.entries(builderClasses).forEach(([styleName, builderClass]) => {
+        it(`should create and test an instance of ${styleName}`, () => {
+            const builder = new builderClass();
+            expect(builder).toBeInstanceOf(StyleBuilder);
+            expect(typeof builder.name).toBe('string');
+            builder.baseUrl = 'https://example.org';
+            const style = builder.build();
+            expect(JSON.stringify(style).length).toBeGreaterThan(50000);
+            expect(style.name).toBe('versatiles-' + styleName.toLowerCase());
+            expect(style.glyphs).toBe('https://example.org/assets/fonts/{fontstack}/{range}.pbf');
+            expect(style.sprite).toBe('https://example.org/assets/sprites/sprites');
+            expect(Object.keys(style.sources).join(',')).toBe('versatiles-shortbread');
+            // @ts-expect-error: Still Overwhelmed
+            expect(style.sources['versatiles-shortbread'].tiles).toEqual(['https://example.org/tiles/osm/{z}/{x}/{y}']);
+        });
+    });
+});
+describe('Colorful', () => {
+    const colorful = new Colorful();
+    colorful.baseUrl = 'https://dev.null';
+    colorful.colors.commercial = '#f00';
+    const style = colorful.build();
+    expect(style.glyphs).toBe('https://dev.null/assets/fonts/{fontstack}/{range}.pbf');
+});

package/dist/lib/decorator.d.ts

@@ -0,0 +1,3 @@
+import type { MaplibreLayer } from './shortbread/layers.js';
+import type { StyleRules } from './style_builder.js';
+export declare function decorate(layers: MaplibreLayer[], rules: StyleRules): MaplibreLayer[];

package/dist/lib/decorator.js

@@ -0,0 +1,123 @@
+import Color from 'color';
+import expandBraces from 'brace-expansion';
+import maplibreProperties from './shortbread/properties.js';
+import { deepMerge } from './utils.js';
+export function decorate(layers, rules) {
+    const layerIds = layers.map(l => l.id);
+    const layerIdSet = new Set(layerIds);
+    // Initialize a new map to hold final styles for layers
+    const layerStyles = new Map();
+    // Iterate through the generated layer style rules
+    Object.entries(rules).forEach(([idDef, layerStyle]) => {
+        // Expand any braces in IDs and filter them through a RegExp if necessary
+        const ids = expandBraces(idDef).flatMap(id => {
+            if (!id.includes('*'))
+                return id;
+            const regExpString = id.replace(/[^a-z_:-]/g, c => {
+                if (c === '*')
+                    return '[a-z_-]*';
+                throw new Error('unknown char to process. Do not know how to make a RegExp from: ' + JSON.stringify(c));
+            });
+            const regExp = new RegExp(`^${regExpString}$`, 'i');
+            return layerIds.filter(layerId => regExp.test(layerId));
+        });
+        ids.forEach(id => {
+            if (!layerIdSet.has(id))
+                return;
+            layerStyles.set(id, deepMerge(layerStyles.get(id) ?? {}, layerStyle));
+        });
+    });
+    // Deep clone the original layers and apply styles
+    return layers.flatMap(layer => {
+        // Get the id and style of the layer
+        const layerStyle = layerStyles.get(layer.id);
+        // Don't export layers that have no style
+        if (!layerStyle)
+            return [];
+        processStyling(layer, layerStyle);
+        return [layer];
+    });
+}
+// Function to process each style attribute for the layer
+function processStyling(layer, styleRule) {
+    for (const [ruleKeyCamelCase, ruleValue] of Object.entries(styleRule)) {
+        // CamelCase to not-camel-case
+        const ruleKey = ruleKeyCamelCase.replace(/[A-Z]/g, c => '-' + c.toLowerCase());
+        const propertyDefs = maplibreProperties.get(layer.type + '/' + ruleKey);
+        if (!propertyDefs)
+            continue;
+        propertyDefs.forEach(propertyDef => {
+            const { key } = propertyDef;
+            let value = ruleValue;
+            switch (propertyDef.valueType) {
+                case 'color':
+                    value = processExpression(value, processColor);
+                    break;
+                case 'fonts':
+                    value = processExpression(value, processFont);
+                    break;
+                case 'resolvedImage':
+                case 'formatted':
+                case 'array':
+                case 'boolean':
+                case 'enum':
+                case 'number':
+                    value = processExpression(value);
+                    break;
+                default: throw new Error(`unknown propertyDef.valueType "${propertyDef.valueType}" for key "${key}"`);
+            }
+            switch (propertyDef.parent) {
+                case 'layer':
+                    // @ts-expect-error: too complex to handle
+                    layer[key] = value;
+                    break;
+                case 'layout':
+                    if (!layer.layout)
+                        layer.layout = {};
+                    // @ts-expect-error: too complex to handle
+                    layer.layout[key] = value;
+                    break;
+                case 'paint':
+                    if (!layer.paint)
+                        layer.paint = {};
+                    // @ts-expect-error: too complex to handle
+                    layer.paint[key] = value;
+                    break;
+                default:
+                    // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+                    throw new Error(`unknown parent "${propertyDef.parent}" for key "${key}"`);
+            }
+        });
+    }
+}
+function processColor(value) {
+    if (typeof value === 'string')
+        value = Color(value);
+    if (value instanceof Color) {
+        value = (value.alpha() === 1) ? value.hex() : value.hexa();
+        return value.toLowerCase();
+    }
+    throw new Error(`unknown color type "${typeof value}"`);
+}
+function processFont(value) {
+    if (typeof value === 'string')
+        return [value];
+    throw new Error(`unknown font type "${typeof value}"`);
+}
+function processExpression(value, cbValue) {
+    if (typeof value === 'object') {
+        if (value instanceof Color)
+            return processColor(value);
+        if (!Array.isArray(value)) {
+            return processZoomStops(value, cbValue);
+        }
+    }
+    return cbValue ? cbValue(value) : value;
+}
+function processZoomStops(obj, cbValue) {
+    return {
+        stops: Object.entries(obj)
+            .map(([z, v]) => [parseInt(z, 10), cbValue ? cbValue(v) : v])
+            .sort((a, b) => a[0] - b[0]),
+    };
+}

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

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

package/dist/lib/decorator.test.js

@@ -0,0 +1,56 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import { decorate } from './decorator.js';
+import Color from 'color';
+describe('decorate function', () => {
+    const mockLayers = [
+        { id: 'layer1', type: 'fill', layout: {}, paint: {} },
+        { id: 'layer2', type: 'line', layout: {}, paint: {} },
+    ];
+    const mockRules = {
+        'layer1': {
+            color: '#ff0000',
+            visibility: 'none',
+        },
+        'layer2': {
+            color: 'rgba(0, 255, 0, 0.5)',
+            visibility: 'visible',
+        },
+    };
+    it('should return an array of layers', () => {
+        const result = decorate(mockLayers, mockRules);
+        expect(Array.isArray(result)).toBe(true);
+    });
+    it('should apply styles from rules to the corresponding layers', () => {
+        const result = decorate(mockLayers, mockRules);
+        result.forEach(layer => {
+            if (layer.id === 'layer1') {
+                expect(layer.paint).toHaveProperty('fill-color', '#ff0000');
+                expect(layer.layout).toHaveProperty('visibility', 'none');
+            }
+            if (layer.id === 'layer2') {
+                expect(layer.paint).toHaveProperty('line-color', '#00ff0080');
+                expect(layer.layout).toHaveProperty('visibility', 'visible');
+            }
+        });
+    });
+    it('should handle color conversion correctly', () => {
+        const colorRule = {
+            'layer1': {
+                paintColor: new Color('#ff0000'),
+            },
+        };
+        const result = decorate(mockLayers, colorRule);
+        const layer0 = result[0];
+        expect(layer0).toBeDefined();
+        if (typeof layer0 === 'undefined')
+            return;
+        expect(layer0.paint).toBeDefined();
+        if (typeof layer0.paint === 'undefined')
+            return;
+        expect(layer0.paint).toHaveProperty('fill-color', '#ff0000');
+    });
+    it('should discard layers that have no style rules applied', () => {
+        const result = decorate(mockLayers, {});
+        expect(result.length).toBe(0);
+    });
+});

package/dist/lib/recolor.d.ts

@@ -0,0 +1,13 @@
+import type { StylemakerColorLookup } from './style_builder.js';
+export interface RecolorOptions {
+    invert?: boolean;
+    rotate?: number;
+    saturate?: number;
+    gamma?: number;
+    contrast?: number;
+    brightness?: number;
+    tint?: number;
+    tintColor?: string;
+}
+export declare function getDefaultRecolorFlags(): RecolorOptions;
+export declare function recolor(colors: StylemakerColorLookup, opt?: RecolorOptions): void;

package/dist/lib/recolor.js

@@ -0,0 +1,92 @@
+import Color from 'color';
+export function getDefaultRecolorFlags() {
+    return {
+        invert: false,
+        rotate: 0,
+        saturate: 0,
+        gamma: 1,
+        contrast: 1,
+        brightness: 0,
+        tint: 0,
+        tintColor: '#FF0000',
+    };
+}
+export function recolor(colors, opt) {
+    if (!opt)
+        return;
+    if (opt.invert ?? false)
+        invert();
+    if ((opt.rotate !== undefined) && (opt.rotate !== 0))
+        rotate(opt.rotate);
+    if ((opt.saturate !== undefined) && (opt.saturate !== 0))
+        saturate(opt.saturate);
+    if ((opt.gamma !== undefined) && (opt.gamma !== 1))
+        gamma(opt.gamma);
+    if ((opt.contrast !== undefined) && (opt.contrast !== 1))
+        contrast(opt.contrast);
+    if ((opt.brightness !== undefined) && (opt.brightness !== 0))
+        brightness(opt.brightness);
+    if ((opt.tint !== undefined) && (opt.tintColor !== undefined) && (opt.tint !== 0))
+        tint(opt.tint, Color(opt.tintColor));
+    function forEachColor(callback) {
+        Object.entries(colors).forEach(([k, c]) => colors[k] = callback(c));
+    }
+    function invert() {
+        forEachColor(c => c.negate());
+    }
+    function rotate(value) {
+        forEachColor(c => c.rotate(value));
+    }
+    function saturate(value) {
+        forEachColor(c => c.saturate(value));
+    }
+    function gamma(value) {
+        if (value < 1e-3)
+            value = 1e-3;
+        if (value > 1e3)
+            value = 1e3;
+        forEachColor(color => {
+            const rgb = color.rgb().array();
+            return Color.rgb(Math.pow(rgb[0] / 255, value) * 255, Math.pow(rgb[1] / 255, value) * 255, Math.pow(rgb[2] / 255, value) * 255, color.alpha());
+        });
+    }
+    function contrast(value) {
+        if (value < 0)
+            value = 0;
+        if (value > 1e6)
+            value = 1e6;
+        forEachColor(color => {
+            const rgb = color.rgb().array();
+            return Color.rgb((rgb[0] - 127.5) * value + 127.5, (rgb[1] - 127.5) * value + 127.5, (rgb[2] - 127.5) * value + 127.5, color.alpha());
+        });
+    }
+    function brightness(value) {
+        if (value < -1e6)
+            value = -1e6;
+        if (value > 1e6)
+            value = 1e6;
+        const a = 1 - Math.abs(value);
+        const b = (value < 0) ? 0 : 255 * value;
+        forEachColor(color => {
+            const rgb = color.rgb().array();
+            return Color.rgb(rgb[0] * a + b, rgb[1] * a + b, rgb[2] * a + b, color.alpha());
+        });
+    }
+    function tint(value, tintColor) {
+        if (value < 0)
+            value = 0;
+        if (value > 1)
+            value = 1;
+        const tintColorHSV = tintColor.hsv().array();
+        forEachColor(color => {
+            const rgb0 = color.rgb().array();
+            const hsv = color.hsv().array();
+            // eslint-disable-next-line @typescript-eslint/prefer-destructuring
+            hsv[0] = tintColorHSV[0];
+            hsv[1] *= tintColorHSV[1];
+            hsv[2] *= tintColorHSV[2];
+            const rgbNew = Color.hsv(hsv).rgb().array();
+            return Color.rgb(rgb0[0] * (1 - value) + value * rgbNew[0], rgb0[1] * (1 - value) + value * rgbNew[1], rgb0[2] * (1 - value) + value * rgbNew[2], color.alpha());
+        });
+    }
+}

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

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

package/dist/lib/recolor.test.js

@@ -0,0 +1,179 @@
+import { getDefaultRecolorFlags, recolor } from './recolor.js';
+import Color from 'color';
+describe('colorTransformer', () => {
+    describe('getDefaultRecolorFlags', () => {
+        it('should return the default color transformer flags', () => {
+            const defaultFlags = getDefaultRecolorFlags();
+            expect(defaultFlags).toEqual({
+                invert: false,
+                rotate: 0,
+                saturate: 0,
+                gamma: 1,
+                contrast: 1,
+                brightness: 0,
+                tint: 0,
+                tintColor: '#FF0000',
+            });
+        });
+    });
+    describe('recolor', () => {
+        it('should not alter the colors if no flags are provided', () => {
+            const colors = getDefaultColors();
+            recolor(colors, {});
+            expect(colors).toEqual(getDefaultColors());
+        });
+        describe('invert', () => {
+            it('should invert colors when invert flag is true', () => {
+                const colors = getDefaultColors();
+                recolor(colors, { invert: true });
+                expect(colors2string(colors)).toBe('0055AA00,FF005555,AAFF00AA,55AAFFFF');
+            });
+        });
+        describe('rotate', () => {
+            it('should rotate colors 120°', () => {
+                const colors = getDefaultColors();
+                recolor(colors, { rotate: 120 });
+                expect(colors2string(colors)).toBe('55FFAA00,AA00FF55,FF5500AA,00AA55FF');
+            });
+            it('should rotate colors 180°', () => {
+                const colors = getDefaultColors();
+                recolor(colors, { rotate: 180 });
+                expect(colors2string(colors)).toBe('55AAFF00,FF005555,AAFF00AA,0055AAFF');
+            });
+            it('should rotate colors 240°', () => {
+                const colors = getDefaultColors();
+                recolor(colors, { rotate: 240 });
+                expect(colors2string(colors)).toBe('AA55FF00,FFAA0055,00FF55AA,5500AAFF');
+            });
+        });
+        describe('saturation', () => {
+            it('should remove any saturation', () => {
+                const colors = getDefaultColors();
+                recolor(colors, { saturate: -1.0 });
+                expect(colors2string(colors)).toBe('AAAAAA00,80808055,808080AA,555555FF');
+            });
+            it('should decrease saturation', () => {
+                const colors = getDefaultColors();
+                recolor(colors, { saturate: -0.5 });
+                expect(colors2string(colors)).toBe('D4AA7F00,40BF9555,6A40BFAA,7F552AFF');
+            });
+            it('should increase saturation', () => {
+                const colors = getDefaultColors();
+                recolor(colors, { saturate: 0.5 });
+                expect(colors2string(colors)).toBe('FFAA2A00,00FFBF55,4000FFAA,D45500FF');
+            });
+            it('should maximize saturation', () => {
+                const colors = getDefaultColors();
+                recolor(colors, { saturate: 1.0 });
+                expect(colors2string(colors)).toBe('FFAA0000,00FFD455,2B00FFAA,FF5500FF');
+            });
+        });
+        describe('gamma', () => {
+            it('should decrease gamma', () => {
+                const colors = getDefaultColors();
+                recolor(colors, { gamma: 0.5 });
+                expect(colors2string(colors)).toBe('FFD09300,00FFD055,9300FFAA,D09300FF');
+            });
+            it('should increase gamma', () => {
+                const colors = getDefaultColors();
+                recolor(colors, { gamma: 2 });
+                expect(colors2string(colors)).toBe('FF711C00,00FF7155,1C00FFAA,711C00FF');
+            });
+        });
+        describe('contrast', () => {
+            it('should remove any contrast', () => {
+                const colors = getDefaultColors();
+                recolor(colors, { contrast: 0 });
+                expect(colors2string(colors)).toBe('80808000,80808055,808080AA,808080FF');
+            });
+            it('should decrease contrast', () => {
+                const colors = getDefaultColors();
+                recolor(colors, { contrast: 0.5 });
+                expect(colors2string(colors)).toBe('BF956A00,40BF9555,6A40BFAA,956A40FF');
+            });
+            it('should increase contrast', () => {
+                const colors = getDefaultColors();
+                recolor(colors, { contrast: 2 });
+                expect(colors2string(colors)).toBe('FFD52B00,00FFD555,2B00FFAA,D52B00FF');
+            });
+            it('should maximize contrast', () => {
+                const colors = getDefaultColors();
+                recolor(colors, { contrast: Infinity });
+                expect(colors2string(colors)).toBe('FFFF0000,00FFFF55,0000FFAA,FF0000FF');
+            });
+        });
+        describe('contrast', () => {
+            it('should remove any brightness', () => {
+                const colors = getDefaultColors();
+                recolor(colors, { brightness: -1 });
+                expect(colors2string(colors)).toBe('00000000,00000055,000000AA,000000FF');
+            });
+            it('should decrease brightness', () => {
+                const colors = getDefaultColors();
+                recolor(colors, { brightness: -0.5 });
+                expect(colors2string(colors)).toBe('80552B00,00805555,2B0080AA,552B00FF');
+            });
+            it('should increase brightness', () => {
+                const colors = getDefaultColors();
+                recolor(colors, { brightness: 0.5 });
+                expect(colors2string(colors)).toBe('FFD5AA00,80FFD555,AA80FFAA,D5AA80FF');
+            });
+            it('should maximize brightness', () => {
+                const colors = getDefaultColors();
+                recolor(colors, { brightness: 1 });
+                expect(colors2string(colors)).toBe('FFFFFF00,FFFFFF55,FFFFFFAA,FFFFFFFF');
+            });
+        });
+        describe('tint', () => {
+            it('should not tint at all', () => {
+                const colors = getDefaultColors();
+                recolor(colors, { tint: 0, tintColor: '#F00' });
+                expect(colors2string(colors)).toBe('FFAA5500,00FFAA55,5500FFAA,AA5500FF');
+            });
+            it('should tint a little bit red', () => {
+                const colors = getDefaultColors();
+                recolor(colors, { tint: 0.5, tintColor: '#F00' });
+                expect(colors2string(colors)).toBe('FF552B00,80805555,AA0080AA,D52B00FF');
+            });
+            it('should tint a little bit yellow', () => {
+                const colors = getDefaultColors();
+                recolor(colors, { tint: 0.5, tintColor: '#FF0' });
+                expect(colors2string(colors)).toBe('FFD52B00,80FF5555,AA8080AA,D5AA00FF');
+            });
+            it('should tint a little bit green', () => {
+                const colors = getDefaultColors();
+                recolor(colors, { tint: 0.5, tintColor: '#0F0' });
+                expect(colors2string(colors)).toBe('80D52B00,00FF5555,2B8080AA,55AA00FF');
+            });
+            it('should tint a little bit blue', () => {
+                const colors = getDefaultColors();
+                recolor(colors, { tint: 0.5, tintColor: '#00F' });
+                expect(colors2string(colors)).toBe('8055AA00,0080D555,2B00FFAA,552B80FF');
+            });
+            it('should tint a strongly orange', () => {
+                const colors = getDefaultColors();
+                recolor(colors, { tint: 0.5, tintColor: '#F80' });
+                expect(colors2string(colors)).toBe('FF992B00,80C45555,AA4480AA,D56F00FF');
+            });
+            it('should tint a strongly blue', () => {
+                const colors = getDefaultColors();
+                recolor(colors, { tint: 0.5, tintColor: '#00F' });
+                expect(colors2string(colors)).toBe('8055AA00,0080D555,2B00FFAA,552B80FF');
+            });
+        });
+    });
+});
+function string2colors(colorList) {
+    return Object.fromEntries(colorList.split(',')
+        .map((value, index) => ['color' + index, Color('#' + value)]));
+}
+function colors2string(colors) {
+    const colorArray = [];
+    for (let i = 0; ('color' + i) in colors; i++) {
+        colorArray.push(colors['color' + i].hexa().slice(1));
+    }
+    return colorArray.join(',');
+}
+function getDefaultColors() {
+    return string2colors('FFAA5500,00FFAA55,5500FFAA,AA5500FF');
+}

package/dist/lib/shortbread/layers.d.ts

@@ -0,0 +1,7 @@
+import type { BackgroundLayer, FillLayer, LineLayer, SymbolLayer } from 'mapbox-gl';
+import type { LanguageSuffix } from '../style_builder.js';
+export type MaplibreLayer = BackgroundLayer | FillLayer | LineLayer | SymbolLayer;
+export type MaplibreFilter = unknown[];
+export default function getLayers(option: {
+    readonly languageSuffix: LanguageSuffix;
+}): MaplibreLayer[];