@luntta/swatch 3.0.0

package/src/palettes/colorbrewer.js

@@ -0,0 +1,232 @@
+// ColorBrewer 2.0 — Cynthia A. Brewer, Pennsylvania State University.
+//
+// Each palette is stored as a fixed-length array of hex strings
+// matching the largest size published in the Brewer tables. The
+// scale builder interpolates between adjacent stops; for discrete
+// class use, call .classes(n) on the resulting scale.
+//
+// Data is used under the Apache-style ColorBrewer license:
+//
+//   Copyright (c) 2002 Cynthia Brewer, Mark Harrower, and
+//   The Pennsylvania State University.
+//
+//   Licensed under the Apache License, Version 2.0 (the "License");
+//   you may not use this file except in compliance with the License.
+//   You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+//   Unless required by applicable law or agreed to in writing,
+//   software distributed under the License is distributed on an
+//   "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+//   either express or implied. See the License for the specific
+//   language governing permissions and limitations under the License.
+
+// ─── Sequential ─────────────────────────────────────────────────────
+
+export const Blues = [
+	"#f7fbff",
+	"#deebf7",
+	"#c6dbef",
+	"#9ecae1",
+	"#6baed6",
+	"#4292c6",
+	"#2171b5",
+	"#08519c",
+	"#08306b"
+];
+
+export const Greens = [
+	"#f7fcf5",
+	"#e5f5e0",
+	"#c7e9c0",
+	"#a1d99b",
+	"#74c476",
+	"#41ab5d",
+	"#238b45",
+	"#006d2c",
+	"#00441b"
+];
+
+export const Reds = [
+	"#fff5f0",
+	"#fee0d2",
+	"#fcbba1",
+	"#fc9272",
+	"#fb6a4a",
+	"#ef3b2c",
+	"#cb181d",
+	"#a50f15",
+	"#67000d"
+];
+
+export const Oranges = [
+	"#fff5eb",
+	"#fee6ce",
+	"#fdd0a2",
+	"#fdae6b",
+	"#fd8d3c",
+	"#f16913",
+	"#d94801",
+	"#a63603",
+	"#7f2704"
+];
+
+export const Purples = [
+	"#fcfbfd",
+	"#efedf5",
+	"#dadaeb",
+	"#bcbddc",
+	"#9e9ac8",
+	"#807dba",
+	"#6a51a3",
+	"#54278f",
+	"#3f007d"
+];
+
+export const Greys = [
+	"#ffffff",
+	"#f0f0f0",
+	"#d9d9d9",
+	"#bdbdbd",
+	"#969696",
+	"#737373",
+	"#525252",
+	"#252525",
+	"#000000"
+];
+
+// ─── Diverging ──────────────────────────────────────────────────────
+
+export const RdBu = [
+	"#67001f",
+	"#b2182b",
+	"#d6604d",
+	"#f4a582",
+	"#fddbc7",
+	"#f7f7f7",
+	"#d1e5f0",
+	"#92c5de",
+	"#4393c3",
+	"#2166ac",
+	"#053061"
+];
+
+export const RdYlBu = [
+	"#a50026",
+	"#d73027",
+	"#f46d43",
+	"#fdae61",
+	"#fee090",
+	"#ffffbf",
+	"#e0f3f8",
+	"#abd9e9",
+	"#74add1",
+	"#4575b4",
+	"#313695"
+];
+
+export const PiYG = [
+	"#8e0152",
+	"#c51b7d",
+	"#de77ae",
+	"#f1b6da",
+	"#fde0ef",
+	"#f7f7f7",
+	"#e6f5d0",
+	"#b8e186",
+	"#7fbc41",
+	"#4d9221",
+	"#276419"
+];
+
+export const BrBG = [
+	"#543005",
+	"#8c510a",
+	"#bf812d",
+	"#dfc27d",
+	"#f6e8c3",
+	"#f5f5f5",
+	"#c7eae5",
+	"#80cdc1",
+	"#35978f",
+	"#01665e",
+	"#003c30"
+];
+
+export const Spectral = [
+	"#9e0142",
+	"#d53e4f",
+	"#f46d43",
+	"#fdae61",
+	"#fee08b",
+	"#ffffbf",
+	"#e6f598",
+	"#abdda4",
+	"#66c2a5",
+	"#3288bd",
+	"#5e4fa2"
+];
+
+// ─── Qualitative ────────────────────────────────────────────────────
+
+export const Set1 = [
+	"#e41a1c",
+	"#377eb8",
+	"#4daf4a",
+	"#984ea3",
+	"#ff7f00",
+	"#ffff33",
+	"#a65628",
+	"#f781bf",
+	"#999999"
+];
+
+export const Set2 = [
+	"#66c2a5",
+	"#fc8d62",
+	"#8da0cb",
+	"#e78ac3",
+	"#a6d854",
+	"#ffd92f",
+	"#e5c494",
+	"#b3b3b3"
+];
+
+export const Set3 = [
+	"#8dd3c7",
+	"#ffffb3",
+	"#bebada",
+	"#fb8072",
+	"#80b1d3",
+	"#fdb462",
+	"#b3de69",
+	"#fccde5",
+	"#d9d9d9",
+	"#bc80bd",
+	"#ccebc5",
+	"#ffed6f"
+];
+
+export const Pastel1 = [
+	"#fbb4ae",
+	"#b3cde3",
+	"#ccebc5",
+	"#decbe4",
+	"#fed9a6",
+	"#ffffcc",
+	"#e5d8bd",
+	"#fddaec",
+	"#f2f2f2"
+];
+
+export const Dark2 = [
+	"#1b9e77",
+	"#d95f02",
+	"#7570b3",
+	"#e7298a",
+	"#66a61e",
+	"#e6ab02",
+	"#a6761d",
+	"#666666"
+];

package/src/palettes/index.js

@@ -0,0 +1,58 @@
+// Built-in palette registry.
+//
+// Registers the matplotlib perceptually-uniform maps
+// (viridis/magma/plasma/inferno/cividis) and the ColorBrewer 2.0
+// sequential/diverging/qualitative sets. Users can look up any of
+// them via swatch.scale('<name>').
+
+import {
+	viridis,
+	magma,
+	plasma,
+	inferno,
+	cividis
+} from "./viridis.js";
+import * as brewer from "./colorbrewer.js";
+
+const REGISTRY = new Map();
+
+export function registerPalette(name, stops) {
+	REGISTRY.set(name, stops);
+}
+
+export function getPalette(name) {
+	return REGISTRY.get(name) || null;
+}
+
+export function listPalettes() {
+	return Array.from(REGISTRY.keys());
+}
+
+// Matplotlib perceptually-uniform.
+registerPalette("viridis", viridis);
+registerPalette("magma", magma);
+registerPalette("plasma", plasma);
+registerPalette("inferno", inferno);
+registerPalette("cividis", cividis);
+
+// ColorBrewer sequential.
+registerPalette("Blues", brewer.Blues);
+registerPalette("Greens", brewer.Greens);
+registerPalette("Reds", brewer.Reds);
+registerPalette("Oranges", brewer.Oranges);
+registerPalette("Purples", brewer.Purples);
+registerPalette("Greys", brewer.Greys);
+
+// ColorBrewer diverging.
+registerPalette("RdBu", brewer.RdBu);
+registerPalette("RdYlBu", brewer.RdYlBu);
+registerPalette("PiYG", brewer.PiYG);
+registerPalette("BrBG", brewer.BrBG);
+registerPalette("Spectral", brewer.Spectral);
+
+// ColorBrewer qualitative.
+registerPalette("Set1", brewer.Set1);
+registerPalette("Set2", brewer.Set2);
+registerPalette("Set3", brewer.Set3);
+registerPalette("Pastel1", brewer.Pastel1);
+registerPalette("Dark2", brewer.Dark2);

package/src/palettes/viridis.js

@@ -0,0 +1,59 @@
+// Matplotlib perceptually-uniform colormaps — viridis family.
+//
+// Stored as key-stop hex arrays (not matplotlib's full 256-entry
+// look-up tables). The scale builder interpolates between these key
+// points in oklab, which reproduces the smooth perceptual ramp the
+// originals were designed around. Endpoints are exact; intermediate
+// samples match the 5-stop summaries published in the matplotlib
+// docs and the Smith & van der Walt paper on viridis.
+//
+// Original data © Stéfan van der Walt and Nathaniel Smith, released
+// under CC0 (public domain). See https://bids.github.io/colormap/
+
+export const viridis = [
+	"#440154",
+	"#3b528b",
+	"#21918c",
+	"#5ec962",
+	"#fde725"
+];
+
+export const magma = [
+	"#000004",
+	"#3b0f70",
+	"#8c2981",
+	"#de4968",
+	"#fe9f6d",
+	"#fcfdbf"
+];
+
+export const plasma = [
+	"#0d0887",
+	"#6a00a8",
+	"#b12a90",
+	"#e16462",
+	"#fca636",
+	"#f0f921"
+];
+
+export const inferno = [
+	"#000004",
+	"#420a68",
+	"#932667",
+	"#dd513a",
+	"#fca50a",
+	"#fcffa4"
+];
+
+export const cividis = [
+	"#00224e",
+	"#123570",
+	"#3b496c",
+	"#575c6d",
+	"#707173",
+	"#8a8678",
+	"#a59c74",
+	"#c3b369",
+	"#e1cc55",
+	"#fee838"
+];

package/src/parse/css.js

@@ -0,0 +1,241 @@
+// CSS Color 4 string parsers.
+//
+// Handles:
+//
+//   rgb(R G B [/ A])                       — modern syntax only (legacy
+//                                             comma form is parse/legacy.js)
+//   hsl(H S L [/ A])                       — ditto
+//   hwb(H W B [/ A])                       — note: HWB space registers in
+//                                             Phase 8; until then the
+//                                             returned state is { space: 'hwb' }
+//                                             and will fail conversion
+//   lab(L a b [/ A])                       — CIE Lab D50 (CSS spec)
+//   lch(L C H [/ A])                       — CIE LCh D50
+//   oklab(L a b [/ A])                     — OKLab (L in 0..1 internally
+//                                             but CSS uses 0..100% percent)
+//   oklch(L C H [/ A])                     — OKLCh (same L convention)
+//   color(<space> r g b [/ A])             — srgb, srgb-linear, display-p3,
+//                                             rec2020, a98-rgb, prophoto-rgb,
+//                                             xyz / xyz-d65 / xyz-d50
+//
+// Also accepts the `none` keyword (treated as 0 — the CSS spec treats
+// it as "missing" for the purposes of interpolation, but for parsing
+// into our canonical state zero is the right default) and percentages
+// where the spec allows them.
+
+import { registerCssParser } from "./index.js";
+
+const WS = /\s+/;
+
+function tokenize(body) {
+	// Split on slashes (alpha separator), then on commas (legacy inside
+	// the modern form, e.g. oklch() doesn't accept commas but rgb() modern
+	// syntax does via the legacy parser). For Phase 4 we only split on
+	// whitespace within each slash-part.
+	const slashIdx = body.indexOf("/");
+	let main = body;
+	let alpha = null;
+	if (slashIdx >= 0) {
+		main = body.slice(0, slashIdx).trim();
+		alpha = body.slice(slashIdx + 1).trim();
+	}
+	const parts = main.split(WS).filter(Boolean);
+	if (alpha != null) parts.push(alpha);
+	return parts;
+}
+
+function parseNumberOrNone(token) {
+	if (token === "none") return 0;
+	return parseFloat(token);
+}
+
+function parsePercentOrNumber(token, percentBase) {
+	if (token === "none") return 0;
+	if (token.endsWith("%")) {
+		return (parseFloat(token.slice(0, -1)) / 100) * percentBase;
+	}
+	return parseFloat(token);
+}
+
+function parseAlpha(token) {
+	if (token == null) return 1;
+	if (token === "none") return 0;
+	if (token.endsWith("%")) return parseFloat(token.slice(0, -1)) / 100;
+	return parseFloat(token);
+}
+
+function parseHue(token) {
+	if (token === "none") return 0;
+	if (/turn$/i.test(token)) return parseFloat(token.slice(0, -4)) * 360;
+	if (/rad$/i.test(token)) return (parseFloat(token.slice(0, -3)) * 180) / Math.PI;
+	if (/deg$/i.test(token)) return parseFloat(token.slice(0, -3));
+	return parseFloat(token);
+}
+
+function parseFnBody(input, name) {
+	const lower = input.toLowerCase();
+	const prefix = name + "(";
+	if (!lower.startsWith(prefix) || !lower.endsWith(")")) return null;
+	return input.slice(prefix.length, -1).trim();
+}
+
+function parseRgbModern(input) {
+	// Modern `rgb()` only (slash alpha). Legacy comma form is handled
+	// in parse/legacy.js. A modern form has no comma.
+	const body = parseFnBody(input, "rgb");
+	if (body == null) return null;
+	if (body.indexOf(",") >= 0) return null;
+	const parts = tokenize(body);
+	if (parts.length !== 3 && parts.length !== 4) return null;
+	const parse = (token) => {
+		if (token === "none") return 0;
+		if (token.endsWith("%")) return parseFloat(token.slice(0, -1)) / 100;
+		return parseFloat(token) / 255;
+	};
+	const r = parse(parts[0]);
+	const g = parse(parts[1]);
+	const b = parse(parts[2]);
+	const a = parts.length === 4 ? parseAlpha(parts[3]) : 1;
+	if ([r, g, b, a].some(Number.isNaN)) return null;
+	return { space: "srgb", coords: [r, g, b], alpha: a };
+}
+
+function parseHslModern(input) {
+	const body = parseFnBody(input, "hsl");
+	if (body == null) return null;
+	if (body.indexOf(",") >= 0) return null;
+	const parts = tokenize(body);
+	if (parts.length !== 3 && parts.length !== 4) return null;
+	const h = parseHue(parts[0]);
+	const s = parsePercentOrNumber(parts[1], 100);
+	const l = parsePercentOrNumber(parts[2], 100);
+	const a = parts.length === 4 ? parseAlpha(parts[3]) : 1;
+	if ([h, s, l, a].some(Number.isNaN)) return null;
+	return { space: "hsl", coords: [h, s, l], alpha: a };
+}
+
+function parseHwb(input) {
+	const body = parseFnBody(input, "hwb");
+	if (body == null) return null;
+	const parts = tokenize(body);
+	if (parts.length !== 3 && parts.length !== 4) return null;
+	const h = parseHue(parts[0]);
+	const w = parsePercentOrNumber(parts[1], 100);
+	const bl = parsePercentOrNumber(parts[2], 100);
+	const a = parts.length === 4 ? parseAlpha(parts[3]) : 1;
+	if ([h, w, bl, a].some(Number.isNaN)) return null;
+	return { space: "hwb", coords: [h, w, bl], alpha: a };
+}
+
+function parseLab(input) {
+	const body = parseFnBody(input, "lab");
+	if (body == null) return null;
+	const parts = tokenize(body);
+	if (parts.length !== 3 && parts.length !== 4) return null;
+	// CSS lab() L is 0..100 (number or percent of 100).
+	const L = parsePercentOrNumber(parts[0], 100);
+	// a, b are signed, ±125 (number or percent of 125).
+	const a = parsePercentOrNumber(parts[1], 125);
+	const b = parsePercentOrNumber(parts[2], 125);
+	const alpha = parts.length === 4 ? parseAlpha(parts[3]) : 1;
+	if ([L, a, b, alpha].some(Number.isNaN)) return null;
+	// CSS lab() is D50.
+	return { space: "lab-d50", coords: [L, a, b], alpha };
+}
+
+function parseLch(input) {
+	const body = parseFnBody(input, "lch");
+	if (body == null) return null;
+	const parts = tokenize(body);
+	if (parts.length !== 3 && parts.length !== 4) return null;
+	const L = parsePercentOrNumber(parts[0], 100);
+	const C = parsePercentOrNumber(parts[1], 150);
+	const H = parseHue(parts[2]);
+	const alpha = parts.length === 4 ? parseAlpha(parts[3]) : 1;
+	if ([L, C, H, alpha].some(Number.isNaN)) return null;
+	return { space: "lch-d50", coords: [L, C, H], alpha };
+}
+
+function parseOklab(input) {
+	const body = parseFnBody(input, "oklab");
+	if (body == null) return null;
+	const parts = tokenize(body);
+	if (parts.length !== 3 && parts.length !== 4) return null;
+	// CSS oklab() L is 0..1 (percent 0..100% of 1).
+	const L = parsePercentOrNumber(parts[0], 1);
+	const a = parsePercentOrNumber(parts[1], 0.4);
+	const b = parsePercentOrNumber(parts[2], 0.4);
+	const alpha = parts.length === 4 ? parseAlpha(parts[3]) : 1;
+	if ([L, a, b, alpha].some(Number.isNaN)) return null;
+	return { space: "oklab", coords: [L, a, b], alpha };
+}
+
+function parseOklch(input) {
+	const body = parseFnBody(input, "oklch");
+	if (body == null) return null;
+	const parts = tokenize(body);
+	if (parts.length !== 3 && parts.length !== 4) return null;
+	const L = parsePercentOrNumber(parts[0], 1);
+	const C = parsePercentOrNumber(parts[1], 0.4);
+	const H = parseHue(parts[2]);
+	const alpha = parts.length === 4 ? parseAlpha(parts[3]) : 1;
+	if ([L, C, H, alpha].some(Number.isNaN)) return null;
+	return { space: "oklch", coords: [L, C, H], alpha };
+}
+
+// Map CSS color() space IDs to v3 registry ids.
+const COLOR_FN_SPACES = {
+	srgb: "srgb",
+	"srgb-linear": "srgb-linear",
+	"display-p3": "display-p3",
+	rec2020: "rec2020",
+	"a98-rgb": "a98",
+	"prophoto-rgb": "prophoto",
+	xyz: "xyz",
+	"xyz-d65": "xyz",
+	"xyz-d50": "xyz-d50"
+};
+
+function parseColorFn(input) {
+	const body = parseFnBody(input, "color");
+	if (body == null) return null;
+	const parts = tokenize(body);
+	if (parts.length < 4 || parts.length > 5) return null;
+	const spaceToken = parts[0].toLowerCase();
+	const spaceId = COLOR_FN_SPACES[spaceToken];
+	if (!spaceId) return null;
+	// Channels are numbers or percentages; percentages normalize to
+	// [0, 1] in the space's natural domain. For XYZ the percent base is 1
+	// per the CSS spec.
+	const parseChannel = (token) => {
+		if (token === "none") return 0;
+		if (token.endsWith("%")) return parseFloat(token.slice(0, -1)) / 100;
+		return parseFloat(token);
+	};
+	const c1 = parseChannel(parts[1]);
+	const c2 = parseChannel(parts[2]);
+	const c3 = parseChannel(parts[3]);
+	const a = parts.length === 5 ? parseAlpha(parts[4]) : 1;
+	if ([c1, c2, c3, a].some(Number.isNaN)) return null;
+	return { space: spaceId, coords: [c1, c2, c3], alpha: a };
+}
+
+export function parseCss(input) {
+	if (typeof input !== "string") return null;
+	const trimmed = input.trim();
+	const lower = trimmed.toLowerCase();
+	// Quick prefix switch.
+	if (lower.startsWith("rgb(")) return parseRgbModern(trimmed);
+	if (lower.startsWith("hsl(")) return parseHslModern(trimmed);
+	if (lower.startsWith("hwb(")) return parseHwb(trimmed);
+	if (lower.startsWith("lab(")) return parseLab(trimmed);
+	if (lower.startsWith("lch(")) return parseLch(trimmed);
+	if (lower.startsWith("oklab(")) return parseOklab(trimmed);
+	if (lower.startsWith("oklch(")) return parseOklch(trimmed);
+	if (lower.startsWith("color(")) return parseColorFn(trimmed);
+	return null;
+}
+
+// Register as the primary CSS parser so parse/index.js dispatches here
+// before falling through to the legacy rgb/hsl matchers.
+registerCssParser(parseCss);

package/src/parse/hex.js

@@ -0,0 +1,38 @@
+// Hex color parsing.
+//
+// Accepts 3, 4, 6, and 8 hex digit forms with optional leading `#`:
+//
+//   #rgb         → { space: 'srgb', coords: [r,g,b],     alpha: 1 }
+//   #rgba        → { space: 'srgb', coords: [r,g,b],     alpha: a }
+//   #rrggbb      → { space: 'srgb', coords: [r,g,b],     alpha: 1 }
+//   #rrggbbaa    → { space: 'srgb', coords: [r,g,b],     alpha: a }
+//
+// Returns null if the input is not a hex string so callers can fall
+// through to other parsers.
+
+const HEX = /^#?([\da-f]{3,8})$/i;
+
+export function parseHex(input) {
+	if (typeof input !== "string") return null;
+	const match = HEX.exec(input.trim());
+	if (!match) return null;
+	const digits = match[1];
+	const len = digits.length;
+	if (len === 3 || len === 4) {
+		const r = parseInt(digits[0] + digits[0], 16) / 255;
+		const g = parseInt(digits[1] + digits[1], 16) / 255;
+		const b = parseInt(digits[2] + digits[2], 16) / 255;
+		const a =
+			len === 4 ? parseInt(digits[3] + digits[3], 16) / 255 : 1;
+		return { space: "srgb", coords: [r, g, b], alpha: a };
+	}
+	if (len === 6 || len === 8) {
+		const r = parseInt(digits.slice(0, 2), 16) / 255;
+		const g = parseInt(digits.slice(2, 4), 16) / 255;
+		const b = parseInt(digits.slice(4, 6), 16) / 255;
+		const a =
+			len === 8 ? parseInt(digits.slice(6, 8), 16) / 255 : 1;
+		return { space: "srgb", coords: [r, g, b], alpha: a };
+	}
+	return null;
+}

package/src/parse/index.js

@@ -0,0 +1,43 @@
+// Main input dispatcher. Returns a v3 state object, or throws on
+// unrecognized input. Order is significant: v3 instance → object → string
+// forms (CSS Color 4 → legacy → hex → named).
+//
+// parse/css.js lands in Phase 4; until then the modern CSS Color 4 forms
+// fall through to legacy (for rgb/hsl) or fail.
+
+import { Swatch } from "../core/swatch-class.js";
+import { parseObject } from "./objects.js";
+import { parseLegacy } from "./legacy.js";
+import { parseHex } from "./hex.js";
+import { parseNamed } from "./named.js";
+
+let cssParser = null; // wired by parse/css.js later
+
+export function registerCssParser(fn) {
+	cssParser = fn;
+}
+
+export function parseInput(input) {
+	if (input instanceof Swatch) return input._state;
+
+	if (input && typeof input === "object") {
+		const obj = parseObject(input);
+		if (obj) return obj;
+	}
+
+	if (typeof input === "string") {
+		const trimmed = input.trim();
+		if (cssParser) {
+			const css = cssParser(trimmed);
+			if (css) return css;
+		}
+		const legacy = parseLegacy(trimmed);
+		if (legacy) return legacy;
+		const hex = parseHex(trimmed);
+		if (hex) return hex;
+		const named = parseNamed(trimmed);
+		if (named) return named;
+	}
+
+	return null;
+}