@versatiles/style 5.0.0 → 5.2.0

package/dist/color/rgb.js

@@ -0,0 +1,213 @@
+import { HSL } from './hsl.js';
+import { HSV } from './hsv.js';
+import { Color } from './abstract.js';
+import { clamp, formatFloat } from './utils.js';
+export class RGB extends Color {
+    r = 0; // between 0 and 255
+    g = 0; // between 0 and 255
+    b = 0; // between 0 and 255
+    a = 1; // between 0 and 1
+    constructor(r, g, b, a = 1) {
+        super();
+        this.r = clamp(r, 0, 255);
+        this.g = clamp(g, 0, 255);
+        this.b = clamp(b, 0, 255);
+        this.a = clamp(a, 0, 1);
+    }
+    clone() {
+        return new RGB(this.r, this.g, this.b, this.a);
+    }
+    asArray() {
+        return [this.r, this.g, this.b, this.a];
+    }
+    asString() {
+        if (this.a === 1) {
+            return `rgb(${this.r.toFixed(0)},${this.g.toFixed(0)},${this.b.toFixed(0)})`;
+        }
+        else {
+            return `rgba(${this.r.toFixed(0)},${this.g.toFixed(0)},${this.b.toFixed(0)},${formatFloat(this.a, 3)})`;
+        }
+    }
+    asHex() {
+        const r = Math.round(this.r).toString(16).padStart(2, '0');
+        const g = Math.round(this.g).toString(16).padStart(2, '0');
+        const b = Math.round(this.b).toString(16).padStart(2, '0');
+        if (this.a === 1) {
+            return `#${r}${g}${b}`.toUpperCase();
+        }
+        else {
+            const a = Math.round(this.a * 255).toString(16).padStart(2, '0');
+            return `#${r}${g}${b}${a}`.toUpperCase();
+        }
+    }
+    asHSL() {
+        const r = this.r / 255;
+        const g = this.g / 255;
+        const b = this.b / 255;
+        const min = Math.min(r, g, b);
+        const max = Math.max(r, g, b);
+        const delta = max - min;
+        let h = 0;
+        let s = 0;
+        if (max === min)
+            h = 0;
+        else if (r === max)
+            h = (g - b) / delta;
+        else if (g === max)
+            h = 2 + (b - r) / delta;
+        else if (b === max)
+            h = 4 + (r - g) / delta;
+        h = Math.min(h * 60, 360);
+        if (h < 0)
+            h += 360;
+        const l = (min + max) / 2;
+        if (max === min)
+            s = 0;
+        else if (l <= 0.5)
+            s = delta / (max + min);
+        else
+            s = delta / (2 - max - min);
+        return new HSL(h, s * 100, l * 100, this.a);
+    }
+    ;
+    asHSV() {
+        const r = this.r / 255;
+        const g = this.g / 255;
+        const b = this.b / 255;
+        const v = Math.max(r, g, b);
+        const diff = v - Math.min(r, g, b);
+        let h = 0;
+        let s = 0;
+        if (diff !== 0) {
+            function diffc(c) {
+                return (v - c) / 6 / diff + 1 / 2;
+            }
+            ;
+            s = diff / v;
+            const rdif = diffc(r);
+            const gdif = diffc(g);
+            const bdif = diffc(b);
+            if (r === v)
+                h = bdif - gdif;
+            else if (g === v)
+                h = (1 / 3) + rdif - bdif;
+            else if (b === v)
+                h = (2 / 3) + gdif - rdif;
+            if (h < 0)
+                h += 1;
+            else if (h > 1)
+                h -= 1;
+        }
+        return new HSV(h * 360, s * 100, v * 100, this.a);
+    }
+    asRGB() {
+        return this.clone();
+    }
+    toRGB() {
+        return this;
+    }
+    static parse(str) {
+        str = str.toLowerCase().replaceAll(/[^0-9a-z.#,()]/g, '');
+        let match;
+        match = str.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})?$/);
+        if (match) {
+            const r = parseInt(match[1], 16);
+            const g = parseInt(match[2], 16);
+            const b = parseInt(match[3], 16);
+            const a = match[4] ? parseInt(match[4], 16) / 255 : 1;
+            return new RGB(r, g, b, a);
+        }
+        match = str.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])([0-9a-f])?$/);
+        if (match) {
+            const r = parseInt(match[1], 16) * 17;
+            const g = parseInt(match[2], 16) * 17;
+            const b = parseInt(match[3], 16) * 17;
+            const a = match[4] ? parseInt(match[4], 16) / 15 : 1;
+            return new RGB(r, g, b, a);
+        }
+        str = str.trim().toLowerCase().replaceAll(' ', '');
+        match = str.match(/^rgb\((\d+),(\d+),(\d+)\)$/);
+        if (match) {
+            const r = parseInt(match[1]);
+            const g = parseInt(match[2]);
+            const b = parseInt(match[3]);
+            return new RGB(r, g, b);
+        }
+        match = str.match(/^rgba\((\d+),(\d+),(\d+),([.\d]+)\)$/);
+        if (match) {
+            const r = parseInt(match[1]);
+            const g = parseInt(match[2]);
+            const b = parseInt(match[3]);
+            const a = parseFloat(match[4]);
+            return new RGB(r, g, b, a);
+        }
+        throw new Error(`Invalid RGB color string: "${str}"`);
+    }
+    gamma(value) {
+        if (value < 1e-3)
+            value = 1e-3;
+        if (value > 1e3)
+            value = 1e3;
+        this.r = Math.pow(this.r / 255, value) * 255;
+        this.g = Math.pow(this.g / 255, value) * 255;
+        this.b = Math.pow(this.b / 255, value) * 255;
+        return this;
+    }
+    invert() {
+        this.r = 255 - this.r;
+        this.g = 255 - this.g;
+        this.b = 255 - this.b;
+        return this;
+    }
+    contrast(value) {
+        if (value < 0)
+            value = 0;
+        if (value > 1e6)
+            value = 1e6;
+        this.r = clamp((this.r - 127.5) * value + 127.5, 0, 255);
+        this.g = clamp((this.g - 127.5) * value + 127.5, 0, 255);
+        this.b = clamp((this.b - 127.5) * value + 127.5, 0, 255);
+        return this;
+    }
+    brightness(value) {
+        if (value < -1)
+            value = -1;
+        if (value > 1)
+            value = 1;
+        const a = 1 - Math.abs(value);
+        const b = (value < 0) ? 0 : 255 * value;
+        this.r = this.r * a + b;
+        this.g = this.g * a + b;
+        this.b = this.b * a + b;
+        return this;
+    }
+    tint(value, tintColor) {
+        if (value < 0)
+            value = 0;
+        if (value > 1)
+            value = 1;
+        const hsv = this.asHSV();
+        hsv.h = tintColor.toHSV().h;
+        const rgbNew = hsv.toRGB();
+        rgbNew.r = this.r * (1 - value) + value * rgbNew.r;
+        rgbNew.g = this.g * (1 - value) + value * rgbNew.g;
+        rgbNew.b = this.b * (1 - value) + value * rgbNew.b;
+        return rgbNew;
+    }
+    lighten(ratio) {
+        this.r = clamp(255 - (255 - this.r) * (1 - ratio), 0, 255);
+        this.g = clamp(255 - (255 - this.g) * (1 - ratio), 0, 255);
+        this.b = clamp(255 - (255 - this.b) * (1 - ratio), 0, 255);
+        return this;
+    }
+    darken(ratio) {
+        this.r = clamp(this.r * (1 - ratio), 0, 255);
+        this.g = clamp(this.g * (1 - ratio), 0, 255);
+        this.b = clamp(this.b * (1 - ratio), 0, 255);
+        return this;
+    }
+    fade(value) {
+        this.a *= 1 - value;
+        return this;
+    }
+}

package/dist/color/utils.d.ts

@@ -0,0 +1,3 @@
+export declare function clamp(num: number, min: number, max: number): number;
+export declare function mod(num: number, max: number): number;
+export declare function formatFloat(num: number, precision: number): string;

package/dist/color/utils.js

@@ -0,0 +1,9 @@
+export function clamp(num, min, max) {
+    return Math.min(Math.max(min, num), max);
+}
+export function mod(num, max) {
+    return ((num % max) + max) % max;
+}
+export function formatFloat(num, precision) {
+    return num.toFixed(precision).replace(/0+$/, '').replace(/\.$/, '');
+}

package/dist/guess_style/guess_style.js

@@ -1,7 +1,7 @@
 import { isTileJSONSpecification, isVectorLayers } from '../types/index.js';
 import { resolveUrl } from '../lib/utils.js';
-import randomColorGenerator from './random_color.js';
 import { colorful } from '../styles/index.js';
+import { Color } from '../color/index.js';
 export function guessStyle(opt) {
     const { format } = opt;
     const tilejsonBasic = {
@@ -131,7 +131,6 @@ 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))
@@ -152,13 +151,13 @@ function getInspectorStyle(spec) {
             saturation = 'strong';
             luminosity = 'light';
         }
-        const color = randomColor({
+        const color = Color.random({
             hue,
             luminosity,
             saturation,
             seed: vector_layer.id,
             opacity: 0.6,
-        });
+        }).asString();
         layers.circle.push({
             id: `${sourceName}-${vector_layer.id}-circle`,
             'source-layer': vector_layer.id,

package/dist/index.d.ts

@@ -3,3 +3,4 @@ export * from './styles/index.js';
 export { guessStyle, guessStyleFromContainer } from './guess_style/index.js';
 export type { GuessStyleOptions, GuessContainerOptions } from './guess_style/index.js';
 export type { VectorLayer } from './types/index.js';
+export { default as Color } from './color/index.js';

package/dist/index.js

@@ -1,2 +1,3 @@
 export * from './styles/index.js';
 export { guessStyle, guessStyleFromContainer } from './guess_style/index.js';
+export { default as Color } from './color/index.js';

package/dist/lib/utils.js

@@ -1,4 +1,4 @@
-import Color from 'color';
+import Color from '../color/index.js';
 // Utility function to deep clone an object
 export function deepClone(obj) {
     const type = typeof obj;
@@ -21,8 +21,7 @@ export function deepClone(obj) {
         return obj.map((e) => deepClone(e));
     }
     if (obj instanceof Color) {
-        // @ts-expect-error: Too complicated to handle
-        return Color(obj);
+        return obj.clone();
     }
     if (obj == null)
         return obj;
@@ -83,7 +82,7 @@ export function deepMerge(source0, ...sources) {
             }
             if (sourceValue instanceof Color) {
                 // @ts-expect-error: Too complicated to handle
-                target[key] = Color(sourceValue);
+                target[key] = sourceValue.clone();
                 continue;
             }
             if (isSimpleObject(target[key]) && isSimpleObject(sourceValue)) {

package/dist/shortbread/layers.js

@@ -110,29 +110,40 @@ export function getShortbreadLayers(option) {
         ...['tunnel', 'street', 'bridge'].flatMap((c) => {
             let filter;
             let prefix;
+            let suffixes = [];
             const results = [];
             switch (c) {
                 case 'tunnel':
                     filter = [['==', 'tunnel', true]];
                     prefix = 'tunnel-';
+                    suffixes = [':outline', ''];
                     break;
                 case 'street':
                     filter = [['!=', 'bridge', true], ['!=', 'tunnel', true]];
                     prefix = '';
+                    suffixes = [':outline', ''];
                     break;
                 case 'bridge':
                     filter = [['==', 'bridge', true]];
                     prefix = 'bridge-';
+                    suffixes = [':bridge', ':outline', ''];
                     break;
             }
-            // bridges, above street, below bridge
-            if (c === 'bridge')
+            // in osm data streets on bridges are often not tagged as such
+            // to be able to have multiple levels of bridges cross over each
+            // other in the right order without using a secondary property.
+            // this results in bridge-polygons being rendered above streets.
+            // therefore bridge polygons are *under* surface streets here.
+            // this workaround is also wrong, but everyone is using it since
+            // it's simpler than removing all these tagging hacks from osm.
+            // bridges, above tunnel, below street
+            if (c === 'street')
                 results.push({
                     id: 'bridge',
                     type: 'fill',
                     'source-layer': 'bridges',
                 });
-            [':outline', ''].forEach(suffix => {
+            suffixes.forEach(suffix => {
                 // pedestrian zone — no outline
                 if (suffix === ':outline')
                     results.push({

package/dist/style_builder/decorator.d.ts

@@ -1,4 +1,4 @@
 import type { MaplibreLayer } from '../types/index.js';
 import type { StyleRules } from './types.js';
-import type { CachedRecolor } from './recolor.ts';
+import type { CachedRecolor } from './recolor.js';
 export declare function decorate(layers: MaplibreLayer[], rules: StyleRules, recolor: CachedRecolor): MaplibreLayer[];

package/dist/style_builder/decorator.js

@@ -1,4 +1,4 @@
-import Color from 'color';
+import Color from '../color/index.js';
 import expandBraces from 'brace-expansion';
 import maplibreProperties from '../shortbread/properties.js';
 import { deepMerge } from '../lib/utils.js';
@@ -93,11 +93,10 @@ export function decorate(layers, rules, recolor) {
         }
         function processColor(value) {
             if (typeof value === 'string')
-                value = Color(value);
+                value = Color.parse(value);
             if (value instanceof Color) {
                 const color = recolor.do(value);
-                const text = (color.alpha() === 1) ? color.hex() : color.string();
-                return text.toLowerCase();
+                return color.asString();
             }
             throw new Error(`unknown color type "${typeof value}"`);
         }

package/dist/style_builder/recolor.d.ts

@@ -1,4 +1,4 @@
-import Color from 'color';
+import Color from '../color/index.js';
 export interface RecolorOptions {
     invertBrightness?: boolean;
     rotate?: number;
@@ -11,6 +11,7 @@ export interface RecolorOptions {
 }
 export declare function getDefaultRecolorFlags(): RecolorOptions;
 export declare function recolorObject(colors: Record<string, Color>, opt?: RecolorOptions): void;
+export declare function recolorArray(colors: Color[], opt?: RecolorOptions): void;
 export declare class CachedRecolor {
     private readonly skip;
     private readonly opt?;

package/dist/style_builder/recolor.js

@@ -1,4 +1,4 @@
-import Color from 'color';
+import Color from '../color/index.js';
 export function getDefaultRecolorFlags() {
     return {
         invertBrightness: false,
@@ -39,6 +39,13 @@ export function recolorObject(colors, opt) {
         colors[k] = recolor(c, opt);
     }
 }
+export function recolorArray(colors, opt) {
+    if (!isValidRecolorOptions(opt))
+        return;
+    for (let i = 0; i < colors.length; i++) {
+        colors[i] = recolor(colors[i], opt);
+    }
+}
 export class CachedRecolor {
     skip;
     opt;
@@ -51,7 +58,7 @@ export class CachedRecolor {
     do(color) {
         if (this.skip)
             return color;
-        const key = color.string();
+        const key = color.asHex();
         const result = this.cache.get(key);
         if (result)
             return result;
@@ -64,59 +71,18 @@ export function recolor(color, opt) {
     if (!isValidRecolorOptions(opt))
         return color;
     if (opt.invertBrightness ?? false)
-        color = invert(color);
+        color = color.invertLuminosity();
     if ((opt.rotate !== undefined) && (opt.rotate !== 0))
-        color = color.rotate(opt.rotate);
+        color = color.rotateHue(opt.rotate);
     if ((opt.saturate !== undefined) && (opt.saturate !== 0))
         color = color.saturate(opt.saturate);
     if ((opt.gamma !== undefined) && (opt.gamma !== 1))
-        color = gamma(color, opt.gamma);
+        color = color.gamma(opt.gamma);
     if ((opt.contrast !== undefined) && (opt.contrast !== 1))
-        color = contrast(color, opt.contrast);
+        color = color.contrast(opt.contrast);
     if ((opt.brightness !== undefined) && (opt.brightness !== 0))
-        color = brightness(color, opt.brightness);
+        color = color.brightness(opt.brightness);
     if ((opt.tint !== undefined) && (opt.tintColor !== undefined) && (opt.tint !== 0))
-        color = tint(color, opt.tint, Color(opt.tintColor));
+        color = color.tint(opt.tint, Color.parse(opt.tintColor));
     return color;
-    function invert(c) {
-        c = c.hsl();
-        return c.lightness(100 - c.lightness()).rgb();
-    }
-    function gamma(c, value) {
-        if (value < 1e-3)
-            value = 1e-3;
-        if (value > 1e3)
-            value = 1e3;
-        const rgb = c.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, c.alpha());
-    }
-    function contrast(c, value) {
-        if (value < 0)
-            value = 0;
-        if (value > 1e6)
-            value = 1e6;
-        const rgb = c.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, c.alpha());
-    }
-    function brightness(c, value) {
-        if (value < -1e6)
-            value = -1e6;
-        if (value > 1e6)
-            value = 1e6;
-        const a = 1 - Math.abs(value);
-        const b = (value < 0) ? 0 : 255 * value;
-        const rgb = c.rgb().array();
-        return Color.rgb(rgb[0] * a + b, rgb[1] * a + b, rgb[2] * a + b, c.alpha());
-    }
-    function tint(c, value, tintColor) {
-        if (value < 0)
-            value = 0;
-        if (value > 1)
-            value = 1;
-        const rgb0 = c.rgb().array();
-        const hsv = c.hsv().array();
-        hsv[0] = tintColor.hue();
-        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], c.alpha());
-    }
 }

package/dist/style_builder/style_builder.d.ts

@@ -1,4 +1,4 @@
-import Color from 'color';
+import Color from '../color/index.js';
 import type { MaplibreStyle } from '../types/maplibre.js';
 import type { StyleBuilderColorStrings, StyleBuilderColors, StyleBuilderFontStrings, StyleBuilderOptions } from './types.js';
 import type { StyleRules, StyleRulesOptions } from './types.js';

package/dist/style_builder/style_builder.js

@@ -1,4 +1,4 @@
-import Color from 'color';
+import Color from '../color/index.js';
 import { getShortbreadTemplate, getShortbreadLayers } from '../shortbread/index.js';
 import { decorate } from './decorator.js';
 import { CachedRecolor, getDefaultRecolorFlags } from './recolor.js';
@@ -17,8 +17,11 @@ export default class StyleBuilder {
         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]);
+            for (const key in options.colors) {
+                const value = options.colors[key];
+                if (value != null)
+                    colors[key] = Color.parse(value);
+            }
         }
         const fonts = deepClone(this.defaultFonts);
         if (options.fonts) {
@@ -74,7 +77,7 @@ export default class StyleBuilder {
     }
     getColors(colors) {
         const entriesString = Object.entries(colors);
-        const entriesColor = entriesString.map(([key, value]) => [key, Color(value)]);
+        const entriesColor = entriesString.map(([key, value]) => [key, Color.parse(value)]);
         const result = Object.fromEntries(entriesColor);
         return result;
     }
@@ -94,7 +97,7 @@ export default class StyleBuilder {
     transformDefaultColors(callback) {
         const colors = this.getColors(this.defaultColors);
         for (const key in colors) {
-            this.defaultColors[key] = callback(colors[key]).hexa();
+            this.defaultColors[key] = callback(colors[key]).asHex();
         }
     }
 }

package/dist/style_builder/types.d.ts

@@ -1,4 +1,4 @@
-import type Color from 'color';
+import type Color from '../color/index.js';
 import type StyleBuilder from './style_builder.js';
 import type { RecolorOptions } from './recolor.js';
 /** Represents language suffixes used in map styles. */

package/dist/styles/colorful.js

@@ -317,6 +317,47 @@ export default class Colorful extends StyleBuilder {
             'bridge-{street,way}-*:outline': {
                 lineCap: 'butt',
             },
+            // faux bridges
+            'bridge-{street,way}-*:bridge': {
+                lineCap: 'butt',
+                lineJoin: 'round',
+                color: colors.land.darken(0.02),
+                fillAntialias: true,
+                opacity: 0.5,
+            },
+            'bridge-street-motorway:bridge': {
+                size: { '5': 0, '6': 3, '10': 7, '14': 7, '16': 20, '18': 53, '19': 118, '20': 235 }
+            },
+            'bridge-street-trunk:bridge': {
+                size: { '7': 0, '8': 3, '10': 6, '14': 8, '16': 17, '18': 50, '19': 104, '20': 202 }
+            },
+            'bridge-street-primary:bridge': {
+                size: { '8': 0, '9': 1, '10': 6, '14': 8, '16': 17, '18': 50, '19': 104, '20': 202 }
+            },
+            'bridge-street-secondary:bridge': {
+                size: { '11': 3, '14': 7, '16': 11, '18': 42, '19': 95, '20': 193 },
+                opacity: { '11': 0, '12': 1 }
+            },
+            'bridge-street-motorway-link:bridge': {
+                minzoom: 12,
+                size: { '12': 3, '14': 4, '16': 10, '18': 20, '20': 56 }
+            },
+            'bridge-street-{trunk,primary,secondary}-link:bridge': {
+                minzoom: 13,
+                size: { '12': 3, '14': 4, '16': 10, '18': 20, '20': 56 }
+            },
+            'bridge-street-{tertiary,tertiary-link,unclassified,residential,livingstreet,pedestrian}*:bridge': {
+                size: { '12': 3, '14': 4, '16': 8, '18': 36, '19': 90, '20': 179 },
+                opacity: { '12': 0, '13': 1 }
+            },
+            'bridge-street-{service,track}:bridge': {
+                size: { '14': 3, '16': 6, '18': 25, '19': 67, '20': 134 },
+                opacity: { '14': 0, '15': 1 }
+            },
+            'bridge-way-*:bridge': {
+                size: { '15': 0, '16': 7, '18': 10, '19': 17, '20': 31 },
+                minzoom: 15
+            },
             // special color: motorway
             '{bridge-,}street-motorway{-link,}:outline': {
                 color: colors.motorwaybg,
@@ -435,10 +476,10 @@ export default class Colorful extends StyleBuilder {
                 color: colors.foot.lighten(0.02),
             },
             'tunnel-way-{footway,path,steps}:outline': {
-                color: colors.foot.darken(0.1).desaturate(0.5),
+                color: colors.foot.darken(0.1).saturate(-0.5),
             },
             'tunnel-way-{footway,path,steps}': {
-                color: colors.foot.darken(0.02).desaturate(0.5),
+                color: colors.foot.darken(0.02).saturate(-0.5),
                 lineDasharray: [1, 0.2],
             },
             // cycleway
@@ -449,10 +490,10 @@ export default class Colorful extends StyleBuilder {
                 color: colors.cycle,
             },
             'tunnel-way-cycleway:outline': {
-                color: colors.cycle.darken(0.1).desaturate(0.5),
+                color: colors.cycle.darken(0.1).saturate(-0.5),
             },
             'tunnel-way-cycleway': {
-                color: colors.cycle.darken(0.02).desaturate(0.5),
+                color: colors.cycle.darken(0.02).saturate(-0.5),
                 lineDasharray: [1, 0.2],
             },
             // cycle streets overlay
@@ -567,7 +608,7 @@ export default class Colorful extends StyleBuilder {
                 size: { 5: 8, 8: 12 },
             },
             'label-place-*': {
-                color: colors.label.rotate(-15).saturate(1).darken(0.05),
+                color: colors.label.rotateHue(-15).saturate(1).darken(0.05),
                 font: fonts.regular,
                 textHaloColor: colors.labelHalo,
                 textHaloWidth: 2,
@@ -602,19 +643,19 @@ export default class Colorful extends StyleBuilder {
                 minzoom: 11,
                 size: { 11: 11, 13: 14 },
                 textTransform: 'uppercase',
-                color: colors.label.rotate(-30).saturate(1).darken(0.05),
+                color: colors.label.rotateHue(-30).saturate(1).darken(0.05),
             },
             'label-place-quarter': {
                 minzoom: 13,
                 size: { 13: 13 },
                 textTransform: 'uppercase',
-                color: colors.label.rotate(-40).saturate(1).darken(0.05),
+                color: colors.label.rotateHue(-40).saturate(1).darken(0.05),
             },
             'label-place-neighbourhood': {
                 minzoom: 14,
                 size: { 14: 12 },
                 textTransform: 'uppercase',
-                color: colors.label.rotate(-50).saturate(1).darken(0.05),
+                color: colors.label.rotateHue(-50).saturate(1).darken(0.05),
             },
             'label-motorway-shield': {
                 color: colors.shield,

package/dist/styles/eclipse.js

@@ -3,9 +3,6 @@ export default class Eclipse extends Colorful {
     name = 'Eclipse';
     constructor() {
         super();
-        this.transformDefaultColors(color => {
-            color = color.hsl();
-            return color.lightness(100 - color.lightness()).rgb();
-        });
+        this.transformDefaultColors(color => color.invertLuminosity());
     }
 }

package/dist/styles/graybeard.js

@@ -3,6 +3,6 @@ export default class Graybeard extends Colorful {
     name = 'Graybeard';
     constructor() {
         super();
-        this.transformDefaultColors(color => color.desaturate(1));
+        this.transformDefaultColors(color => color.saturate(-1));
     }
 }