color-map 2.1.0 → 2.3.0

package/esm/palette/index.d.ts

@@ -0,0 +1,5 @@
+import { DarkStrategy, DarkVariantOptions, darkVariant } from "./dark.js";
+import { HarmonizeOptions, HarmonyOptions, HarmonyScheme, HarmonySpace, harmonize, harmony, inverse } from "./harmony.js";
+import { RolePair, SemanticPalette, SemanticPaletteOptions, SemanticRole, semanticPalette } from "./semantic.js";
+import { PaletteIssue, PaletteLike, ValidateOptions, ValidateResult, validate } from "./validate.js";
+export { type DarkStrategy, type DarkVariantOptions, type HarmonizeOptions, type HarmonyOptions, type HarmonyScheme, type HarmonySpace, type PaletteIssue, type PaletteLike, type RolePair, type SemanticPalette, type SemanticPaletteOptions, type SemanticRole, type ValidateOptions, type ValidateResult, darkVariant, harmonize, harmony, inverse, semanticPalette, validate };

package/esm/palette/index.js

@@ -0,0 +1,5 @@
+import { darkVariant } from "./dark.js";
+import { harmonize, harmony, inverse } from "./harmony.js";
+import { semanticPalette } from "./semantic.js";
+import { validate } from "./validate.js";
+export { darkVariant, harmonize, harmony, inverse, semanticPalette, validate };

package/esm/palette/semantic.d.ts

@@ -0,0 +1,53 @@
+import { ContrastOption } from "../color/contrast.js";
+import { GamutId } from "../color/gamut.js";
+import { Color } from "../color/types.js";
+/** A background, the foreground drawn on it, and the contrast they reach. */
+export interface RolePair {
+  bg: Color;
+  fg: Color;
+  /** The contrast of `fg` on `bg`, as the algorithm reports it (absolute value). */
+  ratio: number;
+  /** The contrast the pair was built to reach. */
+  target: number;
+}
+/** Options for `semanticPalette`. Only `brand` is required. */
+export interface SemanticPaletteOptions {
+  /** The brand color; it sets the hue of the primary, the neutrals and the harmonized status colors. */
+  brand: Color | string;
+  /** Default `light`. */
+  mode?: 'light' | 'dark';
+  /** The contrast measure. Default `wcag2`. */
+  contrast?: ContrastOption;
+  /** The contrast text pairs must reach. Default 4.5, which fits WCAG 2 (pass about 60 for APCA Lc). */
+  target?: number;
+  /** The gamut every color must fit. Default `srgb`. */
+  gamut?: GamutId;
+}
+/** A role in a {@link SemanticPalette}. Each role holds a {@link RolePair}. */
+export type SemanticRole = 'primary' | 'primaryContainer' | 'success' | 'warning' | 'danger' | 'info' | 'surface' | 'surfaceVariant' | 'outline';
+/** What `semanticPalette` returns: the settings it used, the tonal scales it built from, and a pair for each role. */
+export interface SemanticPalette {
+  meta: {
+    mode: 'light' | 'dark';
+    contrast: string;
+    target: number;
+    gamut: GamutId;
+  };
+  /** Material's 13 tones, dark to light, in the brand's hue (`primary`) and a faint tint of it (`neutral`). */
+  scales: {
+    primary: Color[];
+    neutral: Color[];
+  };
+  roles: Record<SemanticRole, RolePair>;
+}
+/**
+ * A role-based palette from one brand color: primary and its container, four
+ * status colors (success, warning, danger, info) harmonized toward the brand's
+ * hue, a surface and a variant tinted by the brand hue, and an outline. Every
+ * pair is built from L* tones, so a 50-tone gap or more reaches about 4.5 on
+ * WCAG 2 (the worst pair, 100 on 50, gives 4.48). Each pair records the ratio
+ * it reached; a foreground that falls short of `target` is replaced by the
+ * closest one that meets it, and `validate` reports any that cannot.
+ */
+export declare function semanticPalette(options: SemanticPaletteOptions): SemanticPalette;
+//# sourceMappingURL=semantic.d.ts.map

package/esm/palette/semantic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"semantic.d.ts","names":[],"sources":["../../src/palette/semantic.ts"],"mappings":";;;;iBAUiB;EAChB,IAAI;EACJ,IAAI;;EAEJ;;EAEA;;;iBAIgB;;EAEhB,OAAO;;EAEP;;EAEA,WAAW;;EAEX;;EAEA,QAAQ;;;YAIG;;iBAYK;EAChB;IAAQ;IAAwB;IAAkB;IAAgB,OAAO;;;EAEzE;IAAU,SAAS;IAAS,SAAS;;EACrC,OAAO,OAAO,cAAc;;;;;;;;;;;wBAmBb,gBAAgB,SAAS,yBAAyB"}

package/esm/palette/semantic.js

@@ -0,0 +1,96 @@
+import { findContrast, pick } from "../color/contrast.js";
+import { toColor } from "../color/parse.js";
+import { componentsIn } from "../color/spaces.js";
+import { checkMode } from "../color/unknown-name.js";
+import { tonalPalette, toneColor } from "../scale/tone.js";
+import { harmonize } from "./harmony.js";
+// src/palette/semantic.ts
+const BG_TONE = {
+	primary: [40, 80],
+	primaryContainer: [90, 30],
+	surface: [98, 6],
+	surfaceVariant: [90, 30]
+};
+const FG_TONE = {
+	primary: [100, 20],
+	primaryContainer: [10, 90],
+	surface: [10, 90],
+	surfaceVariant: [30, 80]
+};
+const STATUS = {
+	success: 145,
+	warning: 85,
+	danger: 25,
+	info: 240
+};
+/**
+* A role-based palette from one brand color: primary and its container, four
+* status colors (success, warning, danger, info) harmonized toward the brand's
+* hue, a surface and a variant tinted by the brand hue, and an outline. Every
+* pair is built from L* tones, so a 50-tone gap or more reaches about 4.5 on
+* WCAG 2 (the worst pair, 100 on 50, gives 4.48). Each pair records the ratio
+* it reached; a foreground that falls short of `target` is replaced by the
+* closest one that meets it, and `validate` reports any that cannot.
+*/
+function semanticPalette(options) {
+	const { mode = "light", contrast = "wcag2", target = 4.5, gamut = "srgb" } = options;
+	const fn = pick(contrast);
+	const dark = checkMode(mode) === "dark";
+	const i = dark ? 1 : 0;
+	const brand = toColor(options.brand);
+	const [, c, h] = componentsIn(brand, "oklch");
+	const hue = h ?? 0;
+	const chroma = Math.max(c, .04);
+	const tint = .015;
+	const pair = (bg, fgTone, fgChroma, need = target) => {
+		let fg = toneColor(fgTone, fgChroma, hue, gamut);
+		let ratio = Math.abs(fn(fg, bg));
+		if (ratio < need) {
+			const found = findContrast(bg, need, {
+				contrast: fn,
+				chroma: fgChroma,
+				hue
+			});
+			fg = found.color;
+			ratio = Math.abs(found.contrast);
+		}
+		return {
+			bg,
+			fg,
+			ratio,
+			target: need
+		};
+	};
+	const status = (name) => {
+		const base = toneColor(BG_TONE.primary[i], .14, STATUS[name], gamut);
+		return pair(harmonize(base, brand, { gamut }), FG_TONE.primary[i], .02);
+	};
+	const surface = toneColor(BG_TONE.surface[i], tint, hue, gamut);
+	const outline = pair(surface, dark ? 60 : 50, tint, 3);
+	return {
+		meta: {
+			mode,
+			contrast: fn.algorithm ?? "custom",
+			target,
+			gamut
+		},
+		scales: {
+			primary: tonalPalette(hue, chroma, void 0, { gamut }),
+			neutral: tonalPalette(hue, tint, void 0, { gamut })
+		},
+		roles: {
+			primary: pair(toneColor(BG_TONE.primary[i], chroma, hue, gamut), FG_TONE.primary[i], .02),
+			primaryContainer: pair(toneColor(BG_TONE.primaryContainer[i], chroma, hue, gamut), FG_TONE.primaryContainer[i], .02),
+			success: status("success"),
+			warning: status("warning"),
+			danger: status("danger"),
+			info: status("info"),
+			surface: pair(surface, FG_TONE.surface[i], tint),
+			surfaceVariant: pair(toneColor(BG_TONE.surfaceVariant[i], tint, hue, gamut), FG_TONE.surfaceVariant[i], tint),
+			outline
+		}
+	};
+}
+export { semanticPalette };
+
+//# sourceMappingURL=semantic.js.map

package/esm/palette/semantic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"semantic.js","names":[],"sources":["../../src/palette/semantic.ts"],"sourcesContent":["import { type ContrastOption, findContrast, pick } from '../color/contrast.js'\nimport type { GamutId } from '../color/gamut.js'\nimport { toColor } from '../color/parse.js'\nimport { componentsIn } from '../color/spaces.js'\nimport type { Color } from '../color/types.js'\nimport { checkMode } from '../color/unknown-name.js'\nimport { tonalPalette, toneColor } from '../scale/tone.js'\nimport { harmonize } from './harmony.js'\n\n/** A background, the foreground drawn on it, and the contrast they reach. */\nexport interface RolePair {\n\tbg: Color\n\tfg: Color\n\t/** The contrast of `fg` on `bg`, as the algorithm reports it (absolute value). */\n\tratio: number\n\t/** The contrast the pair was built to reach. */\n\ttarget: number\n}\n\n/** Options for `semanticPalette`. Only `brand` is required. */\nexport interface SemanticPaletteOptions {\n\t/** The brand color; it sets the hue of the primary, the neutrals and the harmonized status colors. */\n\tbrand: Color | string\n\t/** Default `light`. */\n\tmode?: 'light' | 'dark'\n\t/** The contrast measure. Default `wcag2`. */\n\tcontrast?: ContrastOption\n\t/** The contrast text pairs must reach. Default 4.5, which fits WCAG 2 (pass about 60 for APCA Lc). */\n\ttarget?: number\n\t/** The gamut every color must fit. Default `srgb`. */\n\tgamut?: GamutId\n}\n\n/** A role in a {@link SemanticPalette}. Each role holds a {@link RolePair}. */\nexport type SemanticRole =\n\t| 'primary'\n\t| 'primaryContainer'\n\t| 'success'\n\t| 'warning'\n\t| 'danger'\n\t| 'info'\n\t| 'surface'\n\t| 'surfaceVariant'\n\t| 'outline'\n\n/** What `semanticPalette` returns: the settings it used, the tonal scales it built from, and a pair for each role. */\nexport interface SemanticPalette {\n\tmeta: { mode: 'light' | 'dark'; contrast: string; target: number; gamut: GamutId }\n\t/** Material's 13 tones, dark to light, in the brand's hue (`primary`) and a faint tint of it (`neutral`). */\n\tscales: { primary: Color[]; neutral: Color[] }\n\troles: Record<SemanticRole, RolePair>\n}\n\n// Tones (light, dark) per role: Material's 2021 assignments (see the research notes, B-palettes).\nconst BG_TONE = { primary: [40, 80], primaryContainer: [90, 30], surface: [98, 6], surfaceVariant: [90, 30] } as const\nconst FG_TONE = { primary: [100, 20], primaryContainer: [10, 90], surface: [10, 90], surfaceVariant: [30, 80] } as const\n\n// OKLCH hues of the status colors, before they are harmonized toward the brand.\nconst STATUS = { success: 145, warning: 85, danger: 25, info: 240 } as const\n\n/**\n * A role-based palette from one brand color: primary and its container, four\n * status colors (success, warning, danger, info) harmonized toward the brand's\n * hue, a surface and a variant tinted by the brand hue, and an outline. Every\n * pair is built from L* tones, so a 50-tone gap or more reaches about 4.5 on\n * WCAG 2 (the worst pair, 100 on 50, gives 4.48). Each pair records the ratio\n * it reached; a foreground that falls short of `target` is replaced by the\n * closest one that meets it, and `validate` reports any that cannot.\n */\nexport function semanticPalette(options: SemanticPaletteOptions): SemanticPalette {\n\tconst { mode = 'light', contrast = 'wcag2', target = 4.5, gamut = 'srgb' } = options\n\tconst fn = pick(contrast)\n\tconst dark = checkMode(mode) === 'dark'\n\tconst i = dark ? 1 : 0\n\tconst brand = toColor(options.brand)\n\tconst [, c, h] = componentsIn(brand, 'oklch') as [number, number, number | null]\n\tconst hue = h ?? 0\n\tconst chroma = Math.max(c, 0.04)\n\tconst tint = 0.015\n\n\tconst pair = (bg: Color, fgTone: number, fgChroma: number, need = target): RolePair => {\n\t\tlet fg = toneColor(fgTone, fgChroma, hue, gamut)\n\t\tlet ratio = Math.abs(fn(fg, bg))\n\t\tif (ratio < need) {\n\t\t\tconst found = findContrast(bg, need, { contrast: fn, chroma: fgChroma, hue })\n\t\t\tfg = found.color\n\t\t\tratio = Math.abs(found.contrast)\n\t\t}\n\t\treturn { bg, fg, ratio, target: need }\n\t}\n\tconst status = (name: keyof typeof STATUS): RolePair => {\n\t\tconst base = toneColor(BG_TONE.primary[i], 0.14, STATUS[name], gamut)\n\t\treturn pair(harmonize(base, brand, { gamut }), FG_TONE.primary[i], 0.02)\n\t}\n\tconst surface = toneColor(BG_TONE.surface[i], tint, hue, gamut)\n\tconst outline = pair(surface, dark ? 60 : 50, tint, 3)\n\n\treturn {\n\t\tmeta: { mode, contrast: fn.algorithm ?? 'custom', target, gamut },\n\t\tscales: {\n\t\t\tprimary: tonalPalette(hue, chroma, undefined, { gamut }),\n\t\t\tneutral: tonalPalette(hue, tint, undefined, { gamut })\n\t\t},\n\t\troles: {\n\t\t\tprimary: pair(toneColor(BG_TONE.primary[i], chroma, hue, gamut), FG_TONE.primary[i], 0.02),\n\t\t\tprimaryContainer: pair(\n\t\t\t\ttoneColor(BG_TONE.primaryContainer[i], chroma, hue, gamut),\n\t\t\t\tFG_TONE.primaryContainer[i],\n\t\t\t\t0.02\n\t\t\t),\n\t\t\tsuccess: status('success'),\n\t\t\twarning: status('warning'),\n\t\t\tdanger: status('danger'),\n\t\t\tinfo: status('info'),\n\t\t\tsurface: pair(surface, FG_TONE.surface[i], tint),\n\t\t\tsurfaceVariant: pair(toneColor(BG_TONE.surfaceVariant[i], tint, hue, gamut), FG_TONE.surfaceVariant[i], tint),\n\t\t\toutline\n\t\t}\n\t}\n}\n"],"mappings":";;;;;;;AAsDA,MAAM,UAAU;CAAE,SAAS,CAAC,IAAI,EAAE;CAAG,kBAAkB,CAAC,IAAI,EAAE;CAAG,SAAS,CAAC,IAAI,CAAC;CAAG,gBAAgB,CAAC,IAAI,EAAE;AAAE;AAC5G,MAAM,UAAU;CAAE,SAAS,CAAC,KAAK,EAAE;CAAG,kBAAkB,CAAC,IAAI,EAAE;CAAG,SAAS,CAAC,IAAI,EAAE;CAAG,gBAAgB,CAAC,IAAI,EAAE;AAAE;AAG9G,MAAM,SAAS;CAAE,SAAS;CAAK,SAAS;CAAI,QAAQ;CAAI,MAAM;AAAI;;;;;;;;;;AAWlE,SAAgB,gBAAgB,SAAkD;CACjF,MAAM,EAAE,OAAO,SAAS,WAAW,SAAS,SAAS,KAAK,QAAQ,WAAW;CAC7E,MAAM,KAAK,KAAK,QAAQ;CACxB,MAAM,OAAO,UAAU,IAAI,MAAM;CACjC,MAAM,IAAI,OAAO,IAAI;CACrB,MAAM,QAAQ,QAAQ,QAAQ,KAAK;CACnC,MAAM,GAAG,GAAG,KAAK,aAAa,OAAO,OAAO;CAC5C,MAAM,MAAM,KAAK;CACjB,MAAM,SAAS,KAAK,IAAI,GAAG,GAAI;CAC/B,MAAM,OAAO;CAEb,MAAM,QAAQ,IAAW,QAAgB,UAAkB,OAAO,WAAqB;EACtF,IAAI,KAAK,UAAU,QAAQ,UAAU,KAAK,KAAK;EAC/C,IAAI,QAAQ,KAAK,IAAI,GAAG,IAAI,EAAE,CAAC;EAC/B,IAAI,QAAQ,MAAM;GACjB,MAAM,QAAQ,aAAa,IAAI,MAAM;IAAE,UAAU;IAAI,QAAQ;IAAU;GAAI,CAAC;GAC5E,KAAK,MAAM;GACX,QAAQ,KAAK,IAAI,MAAM,QAAQ;EAChC;EACA,OAAO;GAAE;GAAI;GAAI;GAAO,QAAQ;EAAK;CACtC;CACA,MAAM,UAAU,SAAwC;EACvD,MAAM,OAAO,UAAU,QAAQ,QAAQ,IAAI,KAAM,OAAO,OAAO,KAAK;EACpE,OAAO,KAAK,UAAU,MAAM,OAAO,EAAE,MAAM,CAAC,GAAG,QAAQ,QAAQ,IAAI,GAAI;CACxE;CACA,MAAM,UAAU,UAAU,QAAQ,QAAQ,IAAI,MAAM,KAAK,KAAK;CAC9D,MAAM,UAAU,KAAK,SAAS,OAAO,KAAK,IAAI,MAAM,CAAC;CAErD,OAAO;EACN,MAAM;GAAE;GAAM,UAAU,GAAG,aAAa;GAAU;GAAQ;EAAM;EAChE,QAAQ;GACP,SAAS,aAAa,KAAK,QAAQ,KAAA,GAAW,EAAE,MAAM,CAAC;GACvD,SAAS,aAAa,KAAK,MAAM,KAAA,GAAW,EAAE,MAAM,CAAC;EACtD;EACA,OAAO;GACN,SAAS,KAAK,UAAU,QAAQ,QAAQ,IAAI,QAAQ,KAAK,KAAK,GAAG,QAAQ,QAAQ,IAAI,GAAI;GACzF,kBAAkB,KACjB,UAAU,QAAQ,iBAAiB,IAAI,QAAQ,KAAK,KAAK,GACzD,QAAQ,iBAAiB,IACzB,GACD;GACA,SAAS,OAAO,SAAS;GACzB,SAAS,OAAO,SAAS;GACzB,QAAQ,OAAO,QAAQ;GACvB,MAAM,OAAO,MAAM;GACnB,SAAS,KAAK,SAAS,QAAQ,QAAQ,IAAI,IAAI;GAC/C,gBAAgB,KAAK,UAAU,QAAQ,eAAe,IAAI,MAAM,KAAK,KAAK,GAAG,QAAQ,eAAe,IAAI,IAAI;GAC5G;EACD;CACD;AACD"}

package/esm/palette/validate.d.ts

@@ -0,0 +1,39 @@
+import { ContrastOption } from "../color/contrast.js";
+import { GamutId } from "../color/gamut.js";
+import { Color } from "../color/types.js";
+import { RolePair } from "./semantic.js";
+/** What `validate` accepts: a {@link SemanticPalette}, or any object with role pairs and/or scales. */
+export interface PaletteLike {
+  roles?: Record<string, RolePair>;
+  scales?: Record<string, readonly Color[]>;
+}
+/** Options for `validate`. */
+export interface ValidateOptions {
+  /** The measure used to re-check each pair. Default `wcag2`. */
+  contrast?: ContrastOption;
+  /** The target for a pair that carries none. Default 4.5. */
+  target?: number;
+  /** The gamut colors must fit; a color outside it was clipped or never mapped. Default `srgb`. */
+  gamut?: GamutId;
+}
+/** One problem `validate` found in a palette. */
+export interface PaletteIssue {
+  kind: 'contrast' | 'lightness' | 'gamut';
+  /** Where: `roles.danger`, `scales.primary[3]`. */
+  path: string;
+  message: string;
+}
+/** What `validate` returns: `ok` is true when `issues` is empty. */
+export interface ValidateResult {
+  ok: boolean;
+  issues: PaletteIssue[];
+}
+/**
+ * Checks a palette and lists what is wrong, so an agent can fix it:
+ * - `contrast`: a role pair whose measured contrast is under its target;
+ * - `lightness`: a scale whose OKLCH lightness does not change steadily in one
+ *   direction from one step to the next;
+ * - `gamut`: a color outside the gamut (it would be clipped on display).
+ */
+export declare function validate(palette: PaletteLike, options?: ValidateOptions): ValidateResult;
+//# sourceMappingURL=validate.d.ts.map

package/esm/palette/validate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validate.d.ts","names":[],"sources":["../../src/palette/validate.ts"],"mappings":";;;;;iBAOiB;EAChB,QAAQ,eAAe;EACvB,SAAS,wBAAwB;;;iBAIjB;;EAEhB,WAAW;;EAEX;;EAEA,QAAQ;;;iBAIQ;EAChB;;EAEA;EACA;;;iBAIgB;EAChB;EACA,QAAQ;;;;;;;;;wBAUO,SAAS,SAAS,aAAa,UAAS,kBAAuB"}

package/esm/palette/validate.js

@@ -0,0 +1,56 @@
+import { pick } from "../color/contrast.js";
+import { inGamut } from "../color/gamut.js";
+import { componentsIn } from "../color/spaces.js";
+// src/palette/validate.ts
+/**
+* Checks a palette and lists what is wrong, so an agent can fix it:
+* - `contrast`: a role pair whose measured contrast is under its target;
+* - `lightness`: a scale whose OKLCH lightness does not change steadily in one
+*   direction from one step to the next;
+* - `gamut`: a color outside the gamut (it would be clipped on display).
+*/
+function validate(palette, options = {}) {
+	const { contrast = "wcag2", target = 4.5, gamut = "srgb" } = options;
+	const fn = pick(contrast);
+	const issues = [];
+	const outside = (path, color) => {
+		if (!inGamut(color, gamut)) issues.push({
+			kind: "gamut",
+			path,
+			message: `${path} is outside ${gamut}`
+		});
+	};
+	for (const [name, p] of Object.entries(palette.roles ?? {})) {
+		const need = p.target ?? target;
+		const ratio = Math.abs(fn(p.fg, p.bg));
+		if (ratio < need) issues.push({
+			kind: "contrast",
+			path: `roles.${name}`,
+			message: `roles.${name} reaches ${ratio.toFixed(2)}, needs ${need}`
+		});
+		outside(`roles.${name}.bg`, p.bg);
+		outside(`roles.${name}.fg`, p.fg);
+	}
+	for (const [name, scale] of Object.entries(palette.scales ?? {})) {
+		const ls = scale.map((c) => componentsIn(c, "oklch")[0]);
+		const steps = ls.slice(1).map((l, k) => l - ls[k]);
+		const direction = Math.sign(steps.find((d) => d !== 0) ?? 0);
+		steps.forEach((d, k) => {
+			if (Math.sign(d) !== direction || Math.abs(d) < 1e-9) issues.push({
+				kind: "lightness",
+				path: `scales.${name}[${k + 1}]`,
+				message: `scales.${name} lightness does not change steadily at step ${k + 1}`
+			});
+		});
+		scale.forEach((c, k) => {
+			outside(`scales.${name}[${k}]`, c);
+		});
+	}
+	return {
+		ok: issues.length === 0,
+		issues
+	};
+}
+export { validate };
+
+//# sourceMappingURL=validate.js.map

package/esm/palette/validate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validate.js","names":[],"sources":["../../src/palette/validate.ts"],"sourcesContent":["import { type ContrastOption, pick } from '../color/contrast.js'\nimport { type GamutId, inGamut } from '../color/gamut.js'\nimport { componentsIn } from '../color/spaces.js'\nimport type { Color } from '../color/types.js'\nimport type { RolePair } from './semantic.js'\n\n/** What `validate` accepts: a {@link SemanticPalette}, or any object with role pairs and/or scales. */\nexport interface PaletteLike {\n\troles?: Record<string, RolePair>\n\tscales?: Record<string, readonly Color[]>\n}\n\n/** Options for `validate`. */\nexport interface ValidateOptions {\n\t/** The measure used to re-check each pair. Default `wcag2`. */\n\tcontrast?: ContrastOption\n\t/** The target for a pair that carries none. Default 4.5. */\n\ttarget?: number\n\t/** The gamut colors must fit; a color outside it was clipped or never mapped. Default `srgb`. */\n\tgamut?: GamutId\n}\n\n/** One problem `validate` found in a palette. */\nexport interface PaletteIssue {\n\tkind: 'contrast' | 'lightness' | 'gamut'\n\t/** Where: `roles.danger`, `scales.primary[3]`. */\n\tpath: string\n\tmessage: string\n}\n\n/** What `validate` returns: `ok` is true when `issues` is empty. */\nexport interface ValidateResult {\n\tok: boolean\n\tissues: PaletteIssue[]\n}\n\n/**\n * Checks a palette and lists what is wrong, so an agent can fix it:\n * - `contrast`: a role pair whose measured contrast is under its target;\n * - `lightness`: a scale whose OKLCH lightness does not change steadily in one\n *   direction from one step to the next;\n * - `gamut`: a color outside the gamut (it would be clipped on display).\n */\nexport function validate(palette: PaletteLike, options: ValidateOptions = {}): ValidateResult {\n\tconst { contrast = 'wcag2', target = 4.5, gamut = 'srgb' } = options\n\tconst fn = pick(contrast)\n\tconst issues: PaletteIssue[] = []\n\tconst outside = (path: string, color: Color) => {\n\t\tif (!inGamut(color, gamut)) issues.push({ kind: 'gamut', path, message: `${path} is outside ${gamut}` })\n\t}\n\n\tfor (const [name, p] of Object.entries(palette.roles ?? {})) {\n\t\tconst need = p.target ?? target\n\t\tconst ratio = Math.abs(fn(p.fg, p.bg))\n\t\tif (ratio < need)\n\t\t\tissues.push({\n\t\t\t\tkind: 'contrast',\n\t\t\t\tpath: `roles.${name}`,\n\t\t\t\tmessage: `roles.${name} reaches ${ratio.toFixed(2)}, needs ${need}`\n\t\t\t})\n\t\toutside(`roles.${name}.bg`, p.bg)\n\t\toutside(`roles.${name}.fg`, p.fg)\n\t}\n\n\tfor (const [name, scale] of Object.entries(palette.scales ?? {})) {\n\t\tconst ls = scale.map((c) => componentsIn(c, 'oklch')[0] as number)\n\t\tconst steps = ls.slice(1).map((l, k) => l - (ls[k] as number))\n\t\tconst direction = Math.sign(steps.find((d) => d !== 0) ?? 0)\n\t\tsteps.forEach((d, k) => {\n\t\t\tif (Math.sign(d) !== direction || Math.abs(d) < 1e-9)\n\t\t\t\tissues.push({\n\t\t\t\t\tkind: 'lightness',\n\t\t\t\t\tpath: `scales.${name}[${k + 1}]`,\n\t\t\t\t\tmessage: `scales.${name} lightness does not change steadily at step ${k + 1}`\n\t\t\t\t})\n\t\t})\n\t\tscale.forEach((c, k) => {\n\t\t\toutside(`scales.${name}[${k}]`, c)\n\t\t})\n\t}\n\treturn { ok: issues.length === 0, issues }\n}\n"],"mappings":";;;;;;;;;;;AA2CA,SAAgB,SAAS,SAAsB,UAA2B,CAAC,GAAmB;CAC7F,MAAM,EAAE,WAAW,SAAS,SAAS,KAAK,QAAQ,WAAW;CAC7D,MAAM,KAAK,KAAK,QAAQ;CACxB,MAAM,SAAyB,CAAC;CAChC,MAAM,WAAW,MAAc,UAAiB;EAC/C,IAAI,CAAC,QAAQ,OAAO,KAAK,GAAG,OAAO,KAAK;GAAE,MAAM;GAAS;GAAM,SAAS,GAAG,KAAK,cAAc;EAAQ,CAAC;CACxG;CAEA,KAAK,MAAM,CAAC,MAAM,MAAM,OAAO,QAAQ,QAAQ,SAAS,CAAC,CAAC,GAAG;EAC5D,MAAM,OAAO,EAAE,UAAU;EACzB,MAAM,QAAQ,KAAK,IAAI,GAAG,EAAE,IAAI,EAAE,EAAE,CAAC;EACrC,IAAI,QAAQ,MACX,OAAO,KAAK;GACX,MAAM;GACN,MAAM,SAAS;GACf,SAAS,SAAS,KAAK,WAAW,MAAM,QAAQ,CAAC,EAAE,UAAU;EAC9D,CAAC;EACF,QAAQ,SAAS,KAAK,MAAM,EAAE,EAAE;EAChC,QAAQ,SAAS,KAAK,MAAM,EAAE,EAAE;CACjC;CAEA,KAAK,MAAM,CAAC,MAAM,UAAU,OAAO,QAAQ,QAAQ,UAAU,CAAC,CAAC,GAAG;EACjE,MAAM,KAAK,MAAM,KAAK,MAAM,aAAa,GAAG,OAAO,CAAC,CAAC,EAAY;EACjE,MAAM,QAAQ,GAAG,MAAM,CAAC,CAAC,CAAC,KAAK,GAAG,MAAM,IAAK,GAAG,EAAa;EAC7D,MAAM,YAAY,KAAK,KAAK,MAAM,MAAM,MAAM,MAAM,CAAC,KAAK,CAAC;EAC3D,MAAM,SAAS,GAAG,MAAM;GACvB,IAAI,KAAK,KAAK,CAAC,MAAM,aAAa,KAAK,IAAI,CAAC,IAAI,MAC/C,OAAO,KAAK;IACX,MAAM;IACN,MAAM,UAAU,KAAK,GAAG,IAAI,EAAE;IAC9B,SAAS,UAAU,KAAK,8CAA8C,IAAI;GAC3E,CAAC;EACH,CAAC;EACD,MAAM,SAAS,GAAG,MAAM;GACvB,QAAQ,UAAU,KAAK,GAAG,EAAE,IAAI,CAAC;EAClC,CAAC;CACF;CACA,OAAO;EAAE,IAAI,OAAO,WAAW;EAAG;CAAO;AAC1C"}

package/esm/scale/brand.d.ts

@@ -0,0 +1,21 @@
+import { GamutId } from "../color/gamut.js";
+import { Color } from "../color/types.js";
+/** Options for `scaleFromBrand`. */
+export interface BrandScaleOptions {
+  /** `light` runs from a near-white step 1 to dark text; `dark` the other way. Default `light`. */
+  mode?: 'light' | 'dark';
+  /** The page background, whose lightness step 1 takes. Default near-white, or near-black in `dark`. */
+  background?: Color | string;
+  /** The gamut steps other than 9 must fit. Default `srgb`. */
+  gamut?: GamutId;
+}
+/**
+ * A 12-step UI scale from one brand color, after Radix's palette generator:
+ * the brand color is step 9 exactly (returned as given, never remapped), steps
+ * 1 to 8 run from the background to it, step 10 is its hover state, and steps
+ * 11 and 12 are low- and high-contrast text. Hue is the brand's throughout.
+ * Radix's generator also borrows the shape of the nearest of its hand-tuned
+ * scales; this one uses a single fixed shape instead.
+ */
+export declare function scaleFromBrand(brand: Color | string, options?: BrandScaleOptions): Color[];
+//# sourceMappingURL=brand.d.ts.map

package/esm/scale/brand.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"brand.d.ts","names":[],"sources":["../../src/scale/brand.ts"],"mappings":";;;iBAQiB;;EAEhB;;EAEA,aAAa;;EAEb,QAAQ;;;;;;;;;;wBAgBO,eAAe,OAAO,gBAAgB,UAAS,oBAAyB"}

package/esm/scale/brand.js

@@ -0,0 +1,63 @@
+import { toGamut } from "../color/gamut.js";
+import { toColor } from "../color/parse.js";
+import { componentsIn } from "../color/spaces.js";
+import { checkMode } from "../color/unknown-name.js";
+// src/scale/brand.ts
+const LIGHT_PROGRESS = [
+	0,
+	.0376,
+	.1,
+	.1796,
+	.2606,
+	.3466,
+	.4656,
+	.6312,
+	1
+];
+const CHROMA = [
+	.04,
+	.08,
+	.2,
+	.32,
+	.43,
+	.52,
+	.6,
+	.75
+];
+/**
+* A 12-step UI scale from one brand color, after Radix's palette generator:
+* the brand color is step 9 exactly (returned as given, never remapped), steps
+* 1 to 8 run from the background to it, step 10 is its hover state, and steps
+* 11 and 12 are low- and high-contrast text. Hue is the brand's throughout.
+* Radix's generator also borrows the shape of the nearest of its hand-tuned
+* scales; this one uses a single fixed shape instead.
+*/
+function scaleFromBrand(brand, options = {}) {
+	const { mode = "light", gamut = "srgb" } = options;
+	const dark = checkMode(mode) === "dark";
+	const exact = toColor(brand);
+	const [l9, c9, h9] = componentsIn(exact, "oklch");
+	const hue = h9 ?? 0;
+	const bg = options.background;
+	const l1 = bg ? componentsIn(toColor(bg), "oklch")[0] : dark ? .18 : .992;
+	const step = (l, c) => toGamut({
+		colorSpace: "oklch",
+		components: [
+			l,
+			c,
+			hue
+		]
+	}, { gamut });
+	const out = [];
+	for (let i = 0; i < 8; i++) out.push(step(l1 + (l9 - l1) * LIGHT_PROGRESS[i], c9 * CHROMA[i]));
+	out.push(exact);
+	const hover = .03 / (l9 + .1);
+	out.push(step(dark ? l9 + hover : l9 - hover, c9 * .93));
+	const c8 = c9 * CHROMA[7];
+	out.push(step(dark ? .78 : .5, Math.min(c9 * .9, Math.max(c8, c9))));
+	out.push(step(dark ? .93 : .3, Math.min(c9 * .35, Math.max(c8, c9))));
+	return out;
+}
+export { scaleFromBrand };
+
+//# sourceMappingURL=brand.js.map

package/esm/scale/brand.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"brand.js","names":[],"sources":["../../src/scale/brand.ts"],"sourcesContent":["import type { GamutId } from '../color/gamut.js'\nimport { toGamut } from '../color/gamut.js'\nimport { toColor } from '../color/parse.js'\nimport { componentsIn } from '../color/spaces.js'\nimport type { Color } from '../color/types.js'\nimport { checkMode } from '../color/unknown-name.js'\n\n/** Options for `scaleFromBrand`. */\nexport interface BrandScaleOptions {\n\t/** `light` runs from a near-white step 1 to dark text; `dark` the other way. Default `light`. */\n\tmode?: 'light' | 'dark'\n\t/** The page background, whose lightness step 1 takes. Default near-white, or near-black in `dark`. */\n\tbackground?: Color | string\n\t/** The gamut steps other than 9 must fit. Default `srgb`. */\n\tgamut?: GamutId\n}\n\n// Radix-like lightness shapes, steps 1 to 9, as fractions of the way from\n// step 1 to step 9; chroma of steps 1 to 8 as multiples of the brand's.\nconst LIGHT_PROGRESS = [0, 0.0376, 0.1, 0.1796, 0.2606, 0.3466, 0.4656, 0.6312, 1]\nconst CHROMA = [0.04, 0.08, 0.2, 0.32, 0.43, 0.52, 0.6, 0.75]\n\n/**\n * A 12-step UI scale from one brand color, after Radix's palette generator:\n * the brand color is step 9 exactly (returned as given, never remapped), steps\n * 1 to 8 run from the background to it, step 10 is its hover state, and steps\n * 11 and 12 are low- and high-contrast text. Hue is the brand's throughout.\n * Radix's generator also borrows the shape of the nearest of its hand-tuned\n * scales; this one uses a single fixed shape instead.\n */\nexport function scaleFromBrand(brand: Color | string, options: BrandScaleOptions = {}): Color[] {\n\tconst { mode = 'light', gamut = 'srgb' } = options\n\tconst dark = checkMode(mode) === 'dark'\n\tconst exact = toColor(brand)\n\tconst [l9, c9, h9] = componentsIn(exact, 'oklch') as [number, number, number | null]\n\tconst hue = h9 ?? 0\n\tconst bg = options.background\n\tconst l1 = bg ? (componentsIn(toColor(bg), 'oklch')[0] as number) : dark ? 0.18 : 0.992\n\tconst step = (l: number, c: number): Color => toGamut({ colorSpace: 'oklch', components: [l, c, hue] }, { gamut })\n\n\tconst out: Color[] = []\n\tfor (let i = 0; i < 8; i++) out.push(step(l1 + (l9 - l1) * (LIGHT_PROGRESS[i] as number), c9 * (CHROMA[i] as number)))\n\tout.push(exact)\n\tconst hover = 0.03 / (l9 + 0.1)\n\tout.push(step(dark ? l9 + hover : l9 - hover, c9 * 0.93))\n\tconst c8 = c9 * (CHROMA[7] as number)\n\tout.push(step(dark ? 0.78 : 0.5, Math.min(c9 * 0.9, Math.max(c8, c9))))\n\tout.push(step(dark ? 0.93 : 0.3, Math.min(c9 * 0.35, Math.max(c8, c9))))\n\treturn out\n}\n"],"mappings":";;;;;AAmBA,MAAM,iBAAiB;CAAC;CAAG;CAAQ;CAAK;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;AAAC;AACjF,MAAM,SAAS;CAAC;CAAM;CAAM;CAAK;CAAM;CAAM;CAAM;CAAK;AAAI;;;;;;;;;AAU5D,SAAgB,eAAe,OAAuB,UAA6B,CAAC,GAAY;CAC/F,MAAM,EAAE,OAAO,SAAS,QAAQ,WAAW;CAC3C,MAAM,OAAO,UAAU,IAAI,MAAM;CACjC,MAAM,QAAQ,QAAQ,KAAK;CAC3B,MAAM,CAAC,IAAI,IAAI,MAAM,aAAa,OAAO,OAAO;CAChD,MAAM,MAAM,MAAM;CAClB,MAAM,KAAK,QAAQ;CACnB,MAAM,KAAK,KAAM,aAAa,QAAQ,EAAE,GAAG,OAAO,CAAC,CAAC,KAAgB,OAAO,MAAO;CAClF,MAAM,QAAQ,GAAW,MAAqB,QAAQ;EAAE,YAAY;EAAS,YAAY;GAAC;GAAG;GAAG;EAAG;CAAE,GAAG,EAAE,MAAM,CAAC;CAEjH,MAAM,MAAe,CAAC;CACtB,KAAK,IAAI,IAAI,GAAG,IAAI,GAAG,KAAK,IAAI,KAAK,KAAK,MAAM,KAAK,MAAO,eAAe,IAAe,KAAM,OAAO,EAAa,CAAC;CACrH,IAAI,KAAK,KAAK;CACd,MAAM,QAAQ,OAAQ,KAAK;CAC3B,IAAI,KAAK,KAAK,OAAO,KAAK,QAAQ,KAAK,OAAO,KAAK,GAAI,CAAC;CACxD,MAAM,KAAK,KAAM,OAAO;CACxB,IAAI,KAAK,KAAK,OAAO,MAAO,IAAK,KAAK,IAAI,KAAK,IAAK,KAAK,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC;CACtE,IAAI,KAAK,KAAK,OAAO,MAAO,IAAK,KAAK,IAAI,KAAK,KAAM,KAAK,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC;CACvE,OAAO;AACR"}

package/esm/scale/contrast-scale.d.ts

@@ -0,0 +1,33 @@
+import { ContrastOption } from "../color/contrast.js";
+import { Color } from "../color/types.js";
+/** Options for `createContrastScale`. */
+export interface ContrastScaleOptions {
+  /** The color the scale is built around: its hue and chroma carry to every step. */
+  seed: Color | string;
+  /** What every step is measured against. */
+  background: Color | string;
+  /** Target contrast per step, in order, or a record of named targets (`{ text: 7, border: 3 }`). */
+  targets: number[] | Record<string, number>;
+  /** Default `wcag2`. */
+  contrast?: ContrastOption;
+  /** Which way to look first from the background. Default: darker on a light background, lighter on a dark one. */
+  direction?: 'lighter' | 'darker';
+}
+/** One step of a contrast scale: the target it was given and the color and contrast it got. */
+export interface ContrastStep {
+  /** The key in a record of targets; otherwise the step's index as a string. */
+  name: string;
+  target: number;
+  color: Color;
+  /** The contrast the color achieves, measured on the color itself. */
+  contrast: number;
+  /** False when no lightness reaches `target`; `color` is then the best one found. */
+  met: boolean;
+}
+/**
+ * A Leonardo-style scale: each step is the color nearest the background's
+ * lightness, at the seed's hue and chroma, that reaches its target contrast.
+ * Contrast is the same across hues, which a fixed-lightness scale cannot give.
+ */
+export declare function createContrastScale(options: ContrastScaleOptions): ContrastStep[];
+//# sourceMappingURL=contrast-scale.d.ts.map

package/esm/scale/contrast-scale.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"contrast-scale.d.ts","names":[],"sources":["../../src/scale/contrast-scale.ts"],"mappings":";;;iBAMiB;;EAEhB,MAAM;;EAEN,YAAY;;EAEZ,oBAAoB;;EAEpB,WAAW;;EAEX;;;iBAIgB;;EAEhB;EACA;EACA,OAAO;;EAEP;;EAEA;;;;;;;wBAQe,oBAAoB,SAAS,uBAAuB"}

package/esm/scale/contrast-scale.js

@@ -0,0 +1,26 @@
+import { findContrast } from "../color/contrast.js";
+import { toColor } from "../color/parse.js";
+import { componentsIn } from "../color/spaces.js";
+// src/scale/contrast-scale.ts
+/**
+* A Leonardo-style scale: each step is the color nearest the background's
+* lightness, at the seed's hue and chroma, that reaches its target contrast.
+* Contrast is the same across hues, which a fixed-lightness scale cannot give.
+*/
+function createContrastScale(options) {
+	const { seed, background, targets, contrast, direction } = options;
+	const [, chroma, hue] = componentsIn(toColor(seed), "oklch");
+	return (Array.isArray(targets) ? targets.map((t, i) => [String(i), t]) : Object.entries(targets)).map(([name, target]) => ({
+		name,
+		target,
+		...findContrast(background, target, {
+			hue: hue ?? 0,
+			chroma,
+			contrast,
+			direction
+		})
+	}));
+}
+export { createContrastScale };
+
+//# sourceMappingURL=contrast-scale.js.map

package/esm/scale/contrast-scale.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"contrast-scale.js","names":[],"sources":["../../src/scale/contrast-scale.ts"],"sourcesContent":["import { type ContrastOption, findContrast } from '../color/contrast.js'\nimport { toColor } from '../color/parse.js'\nimport { componentsIn } from '../color/spaces.js'\nimport type { Color } from '../color/types.js'\n\n/** Options for `createContrastScale`. */\nexport interface ContrastScaleOptions {\n\t/** The color the scale is built around: its hue and chroma carry to every step. */\n\tseed: Color | string\n\t/** What every step is measured against. */\n\tbackground: Color | string\n\t/** Target contrast per step, in order, or a record of named targets (`{ text: 7, border: 3 }`). */\n\ttargets: number[] | Record<string, number>\n\t/** Default `wcag2`. */\n\tcontrast?: ContrastOption\n\t/** Which way to look first from the background. Default: darker on a light background, lighter on a dark one. */\n\tdirection?: 'lighter' | 'darker'\n}\n\n/** One step of a contrast scale: the target it was given and the color and contrast it got. */\nexport interface ContrastStep {\n\t/** The key in a record of targets; otherwise the step's index as a string. */\n\tname: string\n\ttarget: number\n\tcolor: Color\n\t/** The contrast the color achieves, measured on the color itself. */\n\tcontrast: number\n\t/** False when no lightness reaches `target`; `color` is then the best one found. */\n\tmet: boolean\n}\n\n/**\n * A Leonardo-style scale: each step is the color nearest the background's\n * lightness, at the seed's hue and chroma, that reaches its target contrast.\n * Contrast is the same across hues, which a fixed-lightness scale cannot give.\n */\nexport function createContrastScale(options: ContrastScaleOptions): ContrastStep[] {\n\tconst { seed, background, targets, contrast, direction } = options\n\tconst [, chroma, hue] = componentsIn(toColor(seed), 'oklch') as [number, number, number | null]\n\tconst entries: [string, number][] = Array.isArray(targets)\n\t\t? targets.map((t, i) => [String(i), t])\n\t\t: Object.entries(targets)\n\treturn entries.map(([name, target]) => ({\n\t\tname,\n\t\ttarget,\n\t\t...findContrast(background, target, { hue: hue ?? 0, chroma, contrast, direction })\n\t}))\n}\n"],"mappings":";;;;;;;;;AAoCA,SAAgB,oBAAoB,SAA+C;CAClF,MAAM,EAAE,MAAM,YAAY,SAAS,UAAU,cAAc;CAC3D,MAAM,GAAG,QAAQ,OAAO,aAAa,QAAQ,IAAI,GAAG,OAAO;CAI3D,QAHoC,MAAM,QAAQ,OAAO,IACtD,QAAQ,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,IACpC,OAAO,QAAQ,OAAO,EAAA,CACV,KAAK,CAAC,MAAM,aAAa;EACvC;EACA;EACA,GAAG,aAAa,YAAY,QAAQ;GAAE,KAAK,OAAO;GAAG;GAAQ;GAAU;EAAU,CAAC;CACnF,EAAE;AACH"}

package/esm/scale/gradient.d.ts

@@ -0,0 +1,38 @@
+import { MixOptions } from "../color/mix.js";
+import { Color } from "../color/types.js";
+/** A color at a position on the gradient line. */
+export interface GradientStop {
+  /** A CSS color string or a color object. Its alpha is the stop's alpha. */
+  color: Color | string;
+  /**
+   * Where the stop sits, with 0 the start and 1 the end; it may fall outside
+   * 0 to 1. Leave it out to spread the stop evenly between its neighbors, as
+   * CSS gradients do.
+   */
+  at?: number;
+}
+/** `in` and `hue` work as they do in `mix()`. The default space is `oklab`. */
+export type GradientOptions = MixOptions;
+/**
+ * Builds `count` colors, evenly spaced from 0 to 1 along a gradient through
+ * `stops`, the way a CSS gradient blends them: each pair of neighboring stops
+ * is mixed with `mix()`, so `in` and `hue` work as they do there. A stop is
+ * `{ color, at? }`, or a bare color when it needs no position. Before the
+ * first stop and after the last, the color holds; where two stops share a
+ * position, the color changes there and the sample at that position takes the
+ * later stop. Colors come back in the `in` space, default `oklab`.
+ *
+ * Alpha comes from each stop's color, 1 when the color has none, so
+ * `rgb(0 0 255 / 0.2)` is a stop at alpha 0.2. Alpha is interpolated linearly
+ * between stops, and the other components are premultiplied by it, so a
+ * transparent stop does not pull its neighbor's color toward its own. A color
+ * whose alpha is 1 has no `alpha` key; a `none` alpha takes the neighboring
+ * stop's.
+ *
+ * ```ts
+ * createGradient([{ color: 'blue', at: 0 }, { color: 'lime', at: 0.6 }, { color: 'yellow', at: 1 }], 72)
+ * createGradient(['blue', 'lime'], 5, { in: 'oklch' })
+ * ```
+ */
+export declare function createGradient(stops: readonly (GradientStop | Color | string)[], count: number, options?: GradientOptions): Color[];
+//# sourceMappingURL=gradient.d.ts.map

package/esm/scale/gradient.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gradient.d.ts","names":[],"sources":["../../src/scale/gradient.ts"],"mappings":";;;iBAKiB;;EAEhB,OAAO;;;;;;EAMP;;;YAIW,kBAAkB;;;;;;;;;;;;;;;;;;;;;;wBAqDd,eACf,iBAAiB,eAAe,mBAChC,eACA,UAAS,kBACP"}

package/esm/scale/gradient.js

@@ -0,0 +1,73 @@
+import { mix } from "../color/mix.js";
+import { toColor } from "../color/parse.js";
+// src/scale/gradient.ts
+/**
+* Places each stop the way CSS gradients do (CSS Images 3 section 3.5.3): a
+* first stop without a position goes at 0 and a last one at 1, a position
+* before an earlier stop's moves up to it, and a run of stops without a
+* position spreads evenly between the stops around it.
+*/
+function positions(stops) {
+	const n = stops.length;
+	const at = stops.map((s, i) => {
+		if (s.at !== void 0 && !Number.isFinite(s.at)) throw new Error(`stop ${i} has a position of ${s.at}`);
+		return s.at;
+	});
+	if (at[0] === void 0) at[0] = 0;
+	if (at[n - 1] === void 0) at[n - 1] = 1;
+	let max = Number.NEGATIVE_INFINITY;
+	for (let i = 0; i < n; i++) {
+		const p = at[i];
+		if (p !== void 0) at[i] = max = Math.max(max, p);
+	}
+	for (let i = 1; i < n; i++) {
+		if (at[i] !== void 0) continue;
+		let j = i;
+		while (at[j] === void 0) j++;
+		const from = at[i - 1];
+		const step = (at[j] - from) / (j - i + 1);
+		for (let k = i; k < j; k++) at[k] = from + step * (k - i + 1);
+	}
+	return at;
+}
+/**
+* Builds `count` colors, evenly spaced from 0 to 1 along a gradient through
+* `stops`, the way a CSS gradient blends them: each pair of neighboring stops
+* is mixed with `mix()`, so `in` and `hue` work as they do there. A stop is
+* `{ color, at? }`, or a bare color when it needs no position. Before the
+* first stop and after the last, the color holds; where two stops share a
+* position, the color changes there and the sample at that position takes the
+* later stop. Colors come back in the `in` space, default `oklab`.
+*
+* Alpha comes from each stop's color, 1 when the color has none, so
+* `rgb(0 0 255 / 0.2)` is a stop at alpha 0.2. Alpha is interpolated linearly
+* between stops, and the other components are premultiplied by it, so a
+* transparent stop does not pull its neighbor's color toward its own. A color
+* whose alpha is 1 has no `alpha` key; a `none` alpha takes the neighboring
+* stop's.
+*
+* ```ts
+* createGradient([{ color: 'blue', at: 0 }, { color: 'lime', at: 0.6 }, { color: 'yellow', at: 1 }], 72)
+* createGradient(['blue', 'lime'], 5, { in: 'oklch' })
+* ```
+*/
+function createGradient(stops, count, options = {}) {
+	if (stops.length < 2) throw new Error(`a gradient needs at least 2 stops, got ${stops.length}`);
+	if (!Number.isInteger(count) || count < 2) throw new Error(`count must be an integer of at least 2, got ${count}`);
+	const list = stops.map((s) => typeof s === "string" || "colorSpace" in s ? { color: s } : s);
+	const colors = list.map((s) => toColor(s.color));
+	const at = positions(list);
+	const last = list.length - 2;
+	return Array.from({ length: count }, (_, i) => {
+		const t = i / (count - 1);
+		let s = 0;
+		while (s < last && at[s + 1] <= t) s++;
+		const from = at[s];
+		const width = at[s + 1] - from;
+		const local = width > 0 ? Math.min(1, Math.max(0, (t - from) / width)) : t < from ? 0 : 1;
+		return mix(colors[s], colors[s + 1], local, options);
+	});
+}
+export { createGradient };
+
+//# sourceMappingURL=gradient.js.map

package/esm/scale/gradient.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gradient.js","names":[],"sources":["../../src/scale/gradient.ts"],"sourcesContent":["import { type MixOptions, mix } from '../color/mix.js'\nimport { toColor } from '../color/parse.js'\nimport type { Color } from '../color/types.js'\n\n/** A color at a position on the gradient line. */\nexport interface GradientStop {\n\t/** A CSS color string or a color object. Its alpha is the stop's alpha. */\n\tcolor: Color | string\n\t/**\n\t * Where the stop sits, with 0 the start and 1 the end; it may fall outside\n\t * 0 to 1. Leave it out to spread the stop evenly between its neighbors, as\n\t * CSS gradients do.\n\t */\n\tat?: number\n}\n\n/** `in` and `hue` work as they do in `mix()`. The default space is `oklab`. */\nexport type GradientOptions = MixOptions\n\n/**\n * Places each stop the way CSS gradients do (CSS Images 3 section 3.5.3): a\n * first stop without a position goes at 0 and a last one at 1, a position\n * before an earlier stop's moves up to it, and a run of stops without a\n * position spreads evenly between the stops around it.\n */\nfunction positions(stops: readonly GradientStop[]): number[] {\n\tconst n = stops.length\n\tconst at: (number | undefined)[] = stops.map((s, i) => {\n\t\tif (s.at !== undefined && !Number.isFinite(s.at)) throw new Error(`stop ${i} has a position of ${s.at}`)\n\t\treturn s.at\n\t})\n\tif (at[0] === undefined) at[0] = 0\n\tif (at[n - 1] === undefined) at[n - 1] = 1\n\tlet max = Number.NEGATIVE_INFINITY\n\tfor (let i = 0; i < n; i++) {\n\t\tconst p = at[i]\n\t\tif (p !== undefined) at[i] = max = Math.max(max, p)\n\t}\n\tfor (let i = 1; i < n; i++) {\n\t\tif (at[i] !== undefined) continue\n\t\tlet j = i\n\t\twhile (at[j] === undefined) j++\n\t\tconst from = at[i - 1] as number\n\t\tconst step = ((at[j] as number) - from) / (j - i + 1)\n\t\tfor (let k = i; k < j; k++) at[k] = from + step * (k - i + 1)\n\t}\n\treturn at as number[]\n}\n\n/**\n * Builds `count` colors, evenly spaced from 0 to 1 along a gradient through\n * `stops`, the way a CSS gradient blends them: each pair of neighboring stops\n * is mixed with `mix()`, so `in` and `hue` work as they do there. A stop is\n * `{ color, at? }`, or a bare color when it needs no position. Before the\n * first stop and after the last, the color holds; where two stops share a\n * position, the color changes there and the sample at that position takes the\n * later stop. Colors come back in the `in` space, default `oklab`.\n *\n * Alpha comes from each stop's color, 1 when the color has none, so\n * `rgb(0 0 255 / 0.2)` is a stop at alpha 0.2. Alpha is interpolated linearly\n * between stops, and the other components are premultiplied by it, so a\n * transparent stop does not pull its neighbor's color toward its own. A color\n * whose alpha is 1 has no `alpha` key; a `none` alpha takes the neighboring\n * stop's.\n *\n * ```ts\n * createGradient([{ color: 'blue', at: 0 }, { color: 'lime', at: 0.6 }, { color: 'yellow', at: 1 }], 72)\n * createGradient(['blue', 'lime'], 5, { in: 'oklch' })\n * ```\n */\nexport function createGradient(\n\tstops: readonly (GradientStop | Color | string)[],\n\tcount: number,\n\toptions: GradientOptions = {}\n): Color[] {\n\tif (stops.length < 2) throw new Error(`a gradient needs at least 2 stops, got ${stops.length}`)\n\tif (!Number.isInteger(count) || count < 2) throw new Error(`count must be an integer of at least 2, got ${count}`)\n\tconst list = stops.map((s): GradientStop => (typeof s === 'string' || 'colorSpace' in s ? { color: s } : s))\n\tconst colors = list.map((s) => toColor(s.color))\n\tconst at = positions(list)\n\tconst last = list.length - 2\n\treturn Array.from({ length: count }, (_, i) => {\n\t\tconst t = i / (count - 1)\n\t\tlet s = 0\n\t\twhile (s < last && (at[s + 1] as number) <= t) s++\n\t\tconst from = at[s] as number\n\t\tconst width = (at[s + 1] as number) - from\n\t\tconst local = width > 0 ? Math.min(1, Math.max(0, (t - from) / width)) : t < from ? 0 : 1\n\t\treturn mix(colors[s] as Color, colors[s + 1] as Color, local, options)\n\t})\n}\n"],"mappings":";;;;;;;;;AAyBA,SAAS,UAAU,OAA0C;CAC5D,MAAM,IAAI,MAAM;CAChB,MAAM,KAA6B,MAAM,KAAK,GAAG,MAAM;EACtD,IAAI,EAAE,OAAO,KAAA,KAAa,CAAC,OAAO,SAAS,EAAE,EAAE,GAAG,MAAM,IAAI,MAAM,QAAQ,EAAE,qBAAqB,EAAE,IAAI;EACvG,OAAO,EAAE;CACV,CAAC;CACD,IAAI,GAAG,OAAO,KAAA,GAAW,GAAG,KAAK;CACjC,IAAI,GAAG,IAAI,OAAO,KAAA,GAAW,GAAG,IAAI,KAAK;CACzC,IAAI,MAAM,OAAO;CACjB,KAAK,IAAI,IAAI,GAAG,IAAI,GAAG,KAAK;EAC3B,MAAM,IAAI,GAAG;EACb,IAAI,MAAM,KAAA,GAAW,GAAG,KAAK,MAAM,KAAK,IAAI,KAAK,CAAC;CACnD;CACA,KAAK,IAAI,IAAI,GAAG,IAAI,GAAG,KAAK;EAC3B,IAAI,GAAG,OAAO,KAAA,GAAW;EACzB,IAAI,IAAI;EACR,OAAO,GAAG,OAAO,KAAA,GAAW;EAC5B,MAAM,OAAO,GAAG,IAAI;EACpB,MAAM,QAAS,GAAG,KAAgB,SAAS,IAAI,IAAI;EACnD,KAAK,IAAI,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,OAAO,QAAQ,IAAI,IAAI;CAC5D;CACA,OAAO;AACR;;;;;;;;;;;;;;;;;;;;;;AAuBA,SAAgB,eACf,OACA,OACA,UAA2B,CAAC,GAClB;CACV,IAAI,MAAM,SAAS,GAAG,MAAM,IAAI,MAAM,0CAA0C,MAAM,QAAQ;CAC9F,IAAI,CAAC,OAAO,UAAU,KAAK,KAAK,QAAQ,GAAG,MAAM,IAAI,MAAM,+CAA+C,OAAO;CACjH,MAAM,OAAO,MAAM,KAAK,MAAqB,OAAO,MAAM,YAAY,gBAAgB,IAAI,EAAE,OAAO,EAAE,IAAI,CAAE;CAC3G,MAAM,SAAS,KAAK,KAAK,MAAM,QAAQ,EAAE,KAAK,CAAC;CAC/C,MAAM,KAAK,UAAU,IAAI;CACzB,MAAM,OAAO,KAAK,SAAS;CAC3B,OAAO,MAAM,KAAK,EAAE,QAAQ,MAAM,IAAI,GAAG,MAAM;EAC9C,MAAM,IAAI,KAAK,QAAQ;EACvB,IAAI,IAAI;EACR,OAAO,IAAI,QAAS,GAAG,IAAI,MAAiB,GAAG;EAC/C,MAAM,OAAO,GAAG;EAChB,MAAM,QAAS,GAAG,IAAI,KAAgB;EACtC,MAAM,QAAQ,QAAQ,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,IAAI,IAAI,QAAQ,KAAK,CAAC,IAAI,IAAI,OAAO,IAAI;EACxF,OAAO,IAAI,OAAO,IAAa,OAAO,IAAI,IAAa,OAAO,OAAO;CACtE,CAAC;AACF"}

package/esm/scale/index.d.ts

@@ -0,0 +1,6 @@
+import { BrandScaleOptions, scaleFromBrand } from "./brand.js";
+import { ContrastScaleOptions, ContrastStep, createContrastScale } from "./contrast-scale.js";
+import { GradientOptions, GradientStop, createGradient } from "./gradient.js";
+import { ScaleOptions, ScalePreset, createScale } from "./scale.js";
+import { MATERIAL_TONES, TonalPaletteOptions, lstar, tonalPalette, toneColor } from "./tone.js";
+export { type BrandScaleOptions, type ContrastScaleOptions, type ContrastStep, type GradientOptions, type GradientStop, MATERIAL_TONES, type ScaleOptions, type ScalePreset, type TonalPaletteOptions, createContrastScale, createGradient, createScale, lstar, scaleFromBrand, tonalPalette, toneColor };

package/esm/scale/index.js

@@ -0,0 +1,6 @@
+import { scaleFromBrand } from "./brand.js";
+import { createContrastScale } from "./contrast-scale.js";
+import { createGradient } from "./gradient.js";
+import { createScale } from "./scale.js";
+import { MATERIAL_TONES, lstar, tonalPalette, toneColor } from "./tone.js";
+export { MATERIAL_TONES, createContrastScale, createGradient, createScale, lstar, scaleFromBrand, tonalPalette, toneColor };