@versatiles/style 5.0.0 → 5.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 VersaTiles
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+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 OR COPYRIGHT HOLDERS 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.

package/dist/browser.d.ts

@@ -1,4 +1,6 @@
 export type * from './styles/index.js';
 export * from './styles/index.js';
+export * as styles from './styles/index.js';
 export type { GuessStyleOptions } from './guess_style/index.js';
 export { guessStyle } from './guess_style/index.js';
+export { Color } from './color/index.js';

package/dist/browser.js

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

package/dist/color/abstract.d.ts

@@ -0,0 +1,32 @@
+import type { HSL } from './hsl.js';
+import type { HSV } from './hsv.js';
+import { RandomColorOptions } from './random.js';
+import type { RGB } from './rgb.js';
+export declare abstract class Color {
+    static parse: (str: string) => Color;
+    static HSL: typeof HSL;
+    static HSV: typeof HSV;
+    static RGB: typeof RGB;
+    static random: (options?: RandomColorOptions) => HSV;
+    abstract clone(): InstanceType<typeof Color>;
+    asHex(): string;
+    abstract asString(): string;
+    abstract asArray(): number[];
+    abstract asHSL(): HSL;
+    abstract asHSV(): HSV;
+    abstract asRGB(): RGB;
+    toHSL(): HSL;
+    toHSV(): HSV;
+    toRGB(): RGB;
+    invertLuminosity(): HSL;
+    rotateHue(offset: number): HSL;
+    saturate(ratio: number): HSL;
+    gamma(value: number): RGB;
+    invert(): RGB;
+    contrast(value: number): RGB;
+    brightness(value: number): RGB;
+    lighten(value: number): RGB;
+    darken(value: number): RGB;
+    tint(value: number, tintColor: Color): RGB;
+    abstract fade(value: number): InstanceType<typeof Color>;
+}

package/dist/color/abstract.js

@@ -0,0 +1,49 @@
+export class Color {
+    static parse;
+    static HSL;
+    static HSV;
+    static RGB;
+    static random;
+    asHex() {
+        return this.toRGB().asHex();
+    }
+    toHSL() {
+        return this.asHSL();
+    }
+    toHSV() {
+        return this.asHSV();
+    }
+    toRGB() {
+        return this.asRGB();
+    }
+    invertLuminosity() {
+        return this.toHSL().invertLuminosity();
+    }
+    rotateHue(offset) {
+        return this.toHSL().rotateHue(offset);
+    }
+    saturate(ratio) {
+        return this.toHSL().saturate(ratio);
+    }
+    gamma(value) {
+        return this.toRGB().gamma(value);
+    }
+    invert() {
+        return this.toRGB().invert();
+    }
+    contrast(value) {
+        return this.toRGB().contrast(value);
+    }
+    brightness(value) {
+        return this.toRGB().brightness(value);
+    }
+    lighten(value) {
+        return this.toRGB().lighten(value);
+    }
+    darken(value) {
+        return this.toRGB().darken(value);
+    }
+    tint(value, tintColor) {
+        return this.toRGB().tint(value, tintColor);
+    }
+}

package/dist/color/hsl.d.ts

@@ -0,0 +1,22 @@
+import { Color } from './abstract.js';
+import { HSV } from './hsv.js';
+import { RGB } from './rgb.js';
+export declare class HSL extends Color {
+    h: number;
+    s: number;
+    l: number;
+    a: number;
+    constructor(h: number, s: number, l: number, a?: number);
+    asArray(): number[];
+    clone(): HSL;
+    asString(): string;
+    asHSL(): HSL;
+    toHSL(): HSL;
+    asHSV(): HSV;
+    asRGB(): RGB;
+    static parse(str: string): HSL;
+    invertLuminosity(): HSL;
+    rotateHue(offset: number): HSL;
+    saturate(ratio: number): HSL;
+    fade(value: number): HSL;
+}

package/dist/color/hsl.js

@@ -0,0 +1,101 @@
+import { Color } from './abstract.js';
+import { HSV } from './hsv.js';
+import { RGB } from './rgb.js';
+import { clamp, formatFloat, mod } from './utils.js';
+export class HSL extends Color {
+    h = 0; // between 0 and 360
+    s = 0; // between 0 and 100
+    l = 0; // between 0 and 100
+    a = 1; // between 0 and 1
+    constructor(h, s, l, a = 1) {
+        super();
+        this.h = mod(h, 360);
+        this.s = clamp(s, 0, 100);
+        this.l = clamp(l, 0, 100);
+        this.a = clamp(a, 0, 1);
+    }
+    asArray() {
+        return [this.h, this.s, this.l, this.a];
+    }
+    clone() {
+        return new HSL(this.h, this.s, this.l, this.a);
+    }
+    asString() {
+        if (this.a === 1) {
+            return `hsl(${this.h.toFixed(0)},${this.s.toFixed(0)}%,${this.l.toFixed(0)}%)`;
+        }
+        else {
+            return `hsla(${this.h.toFixed(0)},${this.s.toFixed(0)}%,${this.l.toFixed(0)}%,${formatFloat(this.a, 3)})`;
+        }
+    }
+    asHSL() {
+        return this.clone();
+    }
+    toHSL() {
+        return this;
+    }
+    asHSV() {
+        const s = this.s / 100, l = this.l / 100;
+        const v = l + s * Math.min(l, 1 - l);
+        const sv = v === 0 ? 0 : 2 * (1 - l / v);
+        return new HSV(this.h, sv * 100, v * 100, this.a);
+    }
+    asRGB() {
+        const h = this.h / 360;
+        const s = this.s / 100;
+        const l = this.l / 100;
+        // Achromatic (grey)
+        if (s === 0)
+            return new RGB(l * 255, l * 255, l * 255, this.a);
+        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+        const p = 2 * l - q;
+        const hueToRgb = (t) => {
+            if (t < 0)
+                t += 1;
+            if (t > 1)
+                t -= 1;
+            if (t < 1 / 6)
+                return p + (q - p) * 6 * t;
+            if (t < 1 / 2)
+                return q;
+            if (t < 2 / 3)
+                return p + (q - p) * (2 / 3 - t) * 6;
+            return p;
+        };
+        // Convert to RGB in the 0-255 range and return
+        return new RGB(255 * hueToRgb(h + 1 / 3), 255 * hueToRgb(h), 255 * hueToRgb(h - 1 / 3), this.a);
+    }
+    static parse(str) {
+        str = str.replace(/\s+/g, '').toLowerCase();
+        let match = str.match(/^hsl\((?<h>[-+0-9.]+)(?:deg)?,(?<s>[-+0-9.]+)%,(?<l>[-+0-9.]+)%\)$/);
+        if (match) {
+            return new HSL(parseFloat(match.groups.h), parseFloat(match.groups.s), parseFloat(match.groups.l));
+        }
+        match = str.match(/^hsla\((?<h>[-+0-9.]+)(?:deg)?,(?<s>[-+0-9.]+)%,(?<l>[-+0-9.]+)%,(?<a>[-+0-9.]+)\)$/);
+        if (match) {
+            return new HSL(parseFloat(match.groups.h), parseFloat(match.groups.s), parseFloat(match.groups.l), parseFloat(match.groups.a));
+        }
+        throw new Error(`Invalid HSL color string: "${str}"`);
+    }
+    invertLuminosity() {
+        this.l = 100 - this.l;
+        return this;
+    }
+    rotateHue(offset) {
+        this.h = mod(this.h + offset, 360);
+        return this;
+    }
+    saturate(ratio) {
+        if (ratio < 0) {
+            this.s = clamp(this.s * (1 + ratio), 0, 100);
+        }
+        else {
+            this.s = clamp(100 - (100 - this.s) * (1 - ratio), 0, 100);
+        }
+        return this;
+    }
+    fade(value) {
+        this.a *= 1 - value;
+        return this;
+    }
+}

package/dist/color/hsv.d.ts

@@ -0,0 +1,18 @@
+import { Color } from './abstract.js';
+import { HSL } from './hsl.js';
+import { RGB } from './rgb.js';
+export declare class HSV extends Color {
+    h: number;
+    s: number;
+    v: number;
+    a: number;
+    constructor(h: number, s: number, v: number, a?: number);
+    asArray(): number[];
+    asString(): string;
+    clone(): HSV;
+    asHSL(): HSL;
+    asHSV(): HSV;
+    toHSV(): HSV;
+    asRGB(): RGB;
+    fade(value: number): HSV;
+}

package/dist/color/hsv.js

@@ -0,0 +1,94 @@
+import { Color } from './abstract.js';
+import { HSL } from './hsl.js';
+import { RGB } from './rgb.js';
+import { clamp, mod } from './utils.js';
+export class HSV extends Color {
+    h = 0; // between 0 and 360
+    s = 0; // between 0 and 100
+    v = 0; // between 0 and 100
+    a = 1; // between 0 and 1
+    constructor(h, s, v, a = 1) {
+        super();
+        this.h = mod(h, 360);
+        this.s = clamp(s, 0, 100);
+        this.v = clamp(v, 0, 100);
+        this.a = clamp(a, 0, 1);
+    }
+    asArray() {
+        return [this.h, this.s, this.v, this.a];
+    }
+    asString() {
+        return this.asHSL().asString();
+    }
+    clone() {
+        return new HSV(this.h, this.s, this.v, this.a);
+    }
+    asHSL() {
+        const s = this.s / 100;
+        const v = this.v / 100;
+        const k = (2 - s) * v;
+        const q = k < 1 ? k : 2 - k;
+        return new HSL(this.h, q == 0 ? 0 : 100 * s * v / q, 100 * k / 2, this.a);
+    }
+    asHSV() {
+        return this.clone();
+    }
+    toHSV() {
+        return this;
+    }
+    asRGB() {
+        const h = this.h / 360; // Normalize h to range [0, 1]
+        const s = this.s / 100; // Normalize s to range [0, 1]
+        const v = this.v / 100; // Normalize v to range [0, 1]
+        let r = 0, g = 0, b = 0;
+        if (s === 0) {
+            // Achromatic (grey)
+            r = g = b = v;
+        }
+        else {
+            const i = Math.floor(h * 6); // Determine the sector of the color wheel
+            const f = h * 6 - i; // Fractional part of h * 6
+            const p = v * (1 - s);
+            const q = v * (1 - s * f);
+            const t = v * (1 - s * (1 - f));
+            switch (i % 6) {
+                case 0:
+                    r = v;
+                    g = t;
+                    b = p;
+                    break;
+                case 1:
+                    r = q;
+                    g = v;
+                    b = p;
+                    break;
+                case 2:
+                    r = p;
+                    g = v;
+                    b = t;
+                    break;
+                case 3:
+                    r = p;
+                    g = q;
+                    b = v;
+                    break;
+                case 4:
+                    r = t;
+                    g = p;
+                    b = v;
+                    break;
+                case 5:
+                    r = v;
+                    g = p;
+                    b = q;
+                    break;
+            }
+        }
+        // Convert to RGB in the 0-255 range and return
+        return new RGB(r * 255, g * 255, b * 255, this.a);
+    }
+    fade(value) {
+        this.a *= 1 - value;
+        return this;
+    }
+}

package/dist/color/index.d.ts

@@ -0,0 +1,3 @@
+import { Color } from './abstract.js';
+export { Color };
+export default Color;

package/dist/color/index.js

@@ -0,0 +1,27 @@
+import { Color } from './abstract.js';
+import { HSL } from './hsl.js';
+import { HSV } from './hsv.js';
+import randomColor from './random.js';
+import { RGB } from './rgb.js';
+Color.parse = function (str) {
+    str = str.trim().toLowerCase();
+    if (str.startsWith('#'))
+        return RGB.parse(str);
+    const prefix = str.replace(/\d.*/, '').trim().toLowerCase();
+    switch (prefix) {
+        case 'rgb(':
+        case 'rgba(':
+            return RGB.parse(str);
+        case 'hsl(':
+        case 'hsla(':
+            return HSL.parse(str);
+        default:
+            throw Error('Unknown color format: ' + str);
+    }
+};
+Color.HSL = HSL;
+Color.HSV = HSV;
+Color.RGB = RGB;
+Color.random = randomColor;
+export { Color };
+export default Color;

package/dist/{guess_style/random_color.d.ts → color/random.d.ts}

@@ -1,3 +1,4 @@
+import { HSV } from './hsv.js';
 export interface RandomColorOptions {
     seed?: string;
     hue?: number | string;
@@ -5,5 +6,4 @@ export interface RandomColorOptions {
     luminosity?: number | string;
     saturation?: number | string;
 }
-export type RandomColorFunction = (options?: RandomColorOptions) => string;
-export default function randomColorGenerator(startSeed?: number | string): RandomColorFunction;
+export default function randomColor(options?: RandomColorOptions): HSV;

package/dist/color/random.js

@@ -0,0 +1,127 @@
+import { HSV } from './hsv.js';
+import { mod } from './utils.js';
+let colorDictionary = new Map();
+export default function randomColor(options) {
+    if (colorDictionary.size === 0)
+        colorDictionary = initColorDictionary();
+    options ??= {};
+    let seed = inputToSeed(options.seed);
+    const H = pickHue(options);
+    const S = pickSaturation(H, options);
+    const V = pickBrightness(H, S, options);
+    return new HSV(H, S, V, options.opacity ?? 1);
+    function pickHue(options) {
+        return mod(randomWithin(getHueRange(options.hue)), 360);
+        function getHueRange(hue) {
+            if (typeof hue === 'number') {
+                hue = mod(hue, 360);
+                return [hue, hue];
+            }
+            if (typeof hue === 'string') {
+                const color = colorDictionary.get(hue);
+                if (color?.hueRange)
+                    return color.hueRange;
+            }
+            return [0, 360];
+        }
+    }
+    function pickSaturation(hue, options) {
+        if (options.hue === 'monochrome')
+            return 0;
+        if (options.luminosity === 'random')
+            return randomWithin([0, 100]);
+        let [sMin, sMax] = getColorInfo(hue).saturationRange;
+        if (options.saturation === 'strong')
+            return sMax;
+        switch (options.luminosity) {
+            case 'bright':
+                sMin = 55;
+                break;
+            case 'dark':
+                sMin = sMax - 10;
+                break;
+            case 'light':
+                sMax = 55;
+                break;
+            default:
+        }
+        return randomWithin([sMin, sMax]);
+    }
+    function pickBrightness(h, s, options) {
+        let bMin = getMinimumBrightness(h, s), bMax = 100;
+        switch (options.luminosity) {
+            case 'dark':
+                bMax = Math.min(100, bMin + 20);
+                break;
+            case 'light':
+                bMin = (bMax + bMin) / 2;
+                break;
+            case 'random':
+                bMin = 0;
+                bMax = 100;
+                break;
+            default:
+        }
+        return randomWithin([bMin, bMax]);
+        function getMinimumBrightness(h, s) {
+            const { lowerBounds } = getColorInfo(h);
+            for (let i = 0; i < lowerBounds.length - 1; i++) {
+                const [s1, v1] = lowerBounds[i];
+                const [s2, v2] = lowerBounds[i + 1];
+                if (s >= s1 && s <= s2) {
+                    const m = (v2 - v1) / (s2 - s1), b = v1 - m * s1;
+                    return m * s + b;
+                }
+            }
+            return 0;
+        }
+    }
+    function randomWithin(range) {
+        //Seeded random algorithm from http://indiegamr.com/generate-repeatable-random-numbers-in-js/
+        seed = (seed * 9301 + 49297) % 233280;
+        return Math.floor(range[0] + seed / 233280.0 * (range[1] - range[0]));
+    }
+}
+function inputToSeed(input) {
+    if (input == null)
+        return 0;
+    if (typeof input === 'number')
+        return input;
+    let i = 0;
+    for (let p = 0; p < input.length; p++)
+        i = (i * 0x101 + input.charCodeAt(p)) % 0x100000000;
+    return i;
+}
+function initColorDictionary() {
+    const dict = new Map();
+    const defineColor = (name, hueRange, lowerBounds) => {
+        const [greyest] = lowerBounds;
+        const colorful = lowerBounds[lowerBounds.length - 1];
+        dict.set(name, {
+            hueRange,
+            lowerBounds,
+            saturationRange: [greyest[0], colorful[0]],
+            brightnessRange: [colorful[1], greyest[1]],
+        });
+    };
+    defineColor('monochrome', null, [[0, 0], [100, 0]]);
+    defineColor('red', [-26, 18], [[20, 100], [30, 92], [40, 89], [50, 85], [60, 78], [70, 70], [80, 60], [90, 55], [100, 50]]);
+    defineColor('orange', [18, 46], [[20, 100], [30, 93], [40, 88], [50, 86], [60, 85], [70, 70], [100, 70]]);
+    defineColor('yellow', [46, 62], [[25, 100], [40, 94], [50, 89], [60, 86], [70, 84], [80, 82], [90, 80], [100, 75]]);
+    defineColor('green', [62, 178], [[30, 100], [40, 90], [50, 85], [60, 81], [70, 74], [80, 64], [90, 50], [100, 40]]);
+    defineColor('blue', [178, 257], [[20, 100], [30, 86], [40, 80], [50, 74], [60, 60], [70, 52], [80, 44], [90, 39], [100, 35]]);
+    defineColor('purple', [257, 282], [[20, 100], [30, 87], [40, 79], [50, 70], [60, 65], [70, 59], [80, 52], [90, 45], [100, 42]]);
+    defineColor('pink', [282, 334], [[20, 100], [30, 90], [40, 86], [60, 84], [80, 80], [90, 75], [100, 73]]);
+    return dict;
+}
+function getColorInfo(hue) {
+    hue = mod(hue, 360);
+    if (hue >= 334)
+        hue -= 360;
+    for (const color of colorDictionary.values()) {
+        if (color.hueRange && hue >= color.hueRange[0] && hue <= color.hueRange[1]) {
+            return color;
+        }
+    }
+    throw Error('Color hue value not found');
+}

package/dist/color/rgb.d.ts

@@ -0,0 +1,27 @@
+import { HSL } from './hsl.js';
+import { HSV } from './hsv.js';
+import { Color } from './abstract.js';
+export declare class RGB extends Color {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+    constructor(r: number, g: number, b: number, a?: number);
+    clone(): RGB;
+    asArray(): number[];
+    asString(): string;
+    asHex(): string;
+    asHSL(): HSL;
+    asHSV(): HSV;
+    asRGB(): RGB;
+    toRGB(): RGB;
+    static parse(str: string): RGB;
+    gamma(value: number): RGB;
+    invert(): RGB;
+    contrast(value: number): RGB;
+    brightness(value: number): RGB;
+    tint(value: number, tintColor: Color): RGB;
+    lighten(ratio: number): RGB;
+    darken(ratio: number): RGB;
+    fade(value: number): RGB;
+}