color-map 2.2.0 → 2.3.0

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 };

package/esm/scale/scale.d.ts

@@ -0,0 +1,31 @@
+import { GamutId } from "../color/gamut.js";
+import { Color } from "../color/types.js";
+/** The built-in step curves. */
+export type ScalePreset = 'tailwind-11' | 'radix-12' | 'tone-13' | 'even';
+/** Options for `createScale`. Only `seed` is required. */
+export interface ScaleOptions {
+  /** The color the scale is built around. Its hue and chroma set the anchor step. */
+  seed: Color | string;
+  /**
+   * A preset, or a number of steps for an even scale. Default `tailwind-11`.
+   * `tone-13` steps are CIE L* tones, so any two steps whose tones differ by
+   * 40 reach contrast 3 and by 50 about 4.5.
+   */
+  steps?: ScalePreset | number;
+  /** Overrides the curve's lightness, one per step: OKLCH L 0 to 1 (L* tones 0 to 100 for `tone-13`). */
+  lightness?: number[];
+  /** Overrides chroma, as a multiplier of the seed's chroma, one per step. */
+  chroma?: number[];
+  /** Overrides hue drift, as degrees added to the seed's hue, one per step; a number is applied to every step. */
+  hueShift?: number[] | number;
+  /** The gamut every step must fit. Default `srgb`. */
+  gamut?: GamutId;
+}
+/**
+ * Builds a scale from light to dark around `seed`: one color per step, in
+ * OKLCH, mapped into `gamut`. The preset gives each step's lightness, chroma
+ * (relative to the seed's) and hue drift; pass `lightness`, `chroma` or
+ * `hueShift` to replace any of them.
+ */
+export declare function createScale(options: ScaleOptions): Color[];
+//# sourceMappingURL=scale.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"scale.d.ts","names":[],"sources":["../../src/scale/scale.ts"],"mappings":";;;YASY;;iBA2DK;;EAEhB,MAAM;;;;;;EAMN,QAAQ;;EAER;;EAEA;;EAEA;;EAEA,QAAQ;;;;;;;;wBAoBO,YAAY,SAAS,eAAe"}