@tesouro/embedded-components-react 0.9.27 → 0.9.30

package/dist/libs/tesouro-embedded-components-react/shared/util/dist/lib/theme/color.js

@@ -51,29 +51,33 @@ function i(e) {
 		alpha: r
 	};
 }
-function a({ l: t, a: n, b: r, alpha: i }) {
-	let a = (t + .3963377774 * n + .2158037573 * r) ** 3, o = (t - .1055613458 * n - .0638541728 * r) ** 3, s = (t - .0894841775 * n - 1.291485548 * r) ** 3, c = [
-		4.0767416621 * a - 3.3077115913 * o + .2309699292 * s,
-		-1.2684380046 * a + 2.6097574011 * o - .3413193965 * s,
-		-.0041960863 * a - .7034186147 * o + 1.707614701 * s
-	].map((t) => {
+function a({ l: e, a: t, b: n }) {
+	let r = (e + .3963377774 * t + .2158037573 * n) ** 3, i = (e - .1055613458 * t - .0638541728 * n) ** 3, a = (e - .0894841775 * t - 1.291485548 * n) ** 3;
+	return [
+		4.0767416621 * r - 3.3077115913 * i + .2309699292 * a,
+		-1.2684380046 * r + 2.6097574011 * i - .3413193965 * a,
+		-.0041960863 * r - .7034186147 * i + 1.707614701 * a
+	];
+}
+function o(t) {
+	let { alpha: n } = t, r = a(t).map((t) => {
 		let n = e(t);
 		return n <= .0031308 ? 12.92 * n : 1.055 * n ** (1 / 2.4) - .055;
 	});
 	return {
-		r: c[0],
-		g: c[1],
-		b: c[2],
-		alpha: i
+		r: r[0],
+		g: r[1],
+		b: r[2],
+		alpha: n
 	};
 }
-var o = (e) => e <= .04045 ? e / 12.92 : ((e + .055) / 1.055) ** 2.4;
-function s({ r: e, g: t, b: n, alpha: r }) {
-	let [i, a, s] = [
+var s = (e) => e <= .04045 ? e / 12.92 : ((e + .055) / 1.055) ** 2.4;
+function c({ r: e, g: t, b: n, alpha: r }) {
+	let [i, a, o] = [
 		e,
 		t,
 		n
-	].map(o), c = Math.cbrt(.4122214708 * i + .5363325363 * a + .0514459929 * s), l = Math.cbrt(.2119034982 * i + .6806995451 * a + .1073969566 * s), u = Math.cbrt(.0883024619 * i + .2817188376 * a + .6299787005 * s);
+	].map(s), c = Math.cbrt(.4122214708 * i + .5363325363 * a + .0514459929 * o), l = Math.cbrt(.2119034982 * i + .6806995451 * a + .1073969566 * o), u = Math.cbrt(.0883024619 * i + .2817188376 * a + .6299787005 * o);
 	return {
 		l: .2104542553 * c + .793617785 * l - .0040720468 * u,
 		a: 1.9779984951 * c - 2.428592205 * l + .4505937099 * u,
@@ -81,7 +85,7 @@ function s({ r: e, g: t, b: n, alpha: r }) {
 		alpha: r
 	};
 }
-function c(e, t, n, r) {
+function l(e, t, n, r) {
 	let i = (t) => (t + e / 30) % 12, a = t * Math.min(n, 1 - n), o = (e) => n - a * Math.max(-1, Math.min(i(e) - 3, Math.min(9 - i(e), 1)));
 	return {
 		r: o(0),
@@ -90,22 +94,45 @@ function c(e, t, n, r) {
 		alpha: r
 	};
 }
-function l(o) {
-	let s = o.trim().toLowerCase();
+function u(t, n, i) {
+	let [a, o, s] = n, c = r(a, 1);
+	if (c === null) return null;
+	let l = e(c);
+	if (t === "oklab") {
+		let e = r(o, .4), t = r(s, .4);
+		return e === null || t === null ? null : {
+			l,
+			a: e,
+			b: t,
+			alpha: i
+		};
+	}
+	let u = r(o, .4), d = r(s);
+	if (u === null || d === null) return null;
+	let f = Math.max(0, u), p = d * Math.PI / 180;
+	return {
+		l,
+		a: f * Math.cos(p),
+		b: f * Math.sin(p),
+		alpha: i
+	};
+}
+function d(a) {
+	let s = a.trim().toLowerCase();
 	if (s in t) return t[s];
 	if (s.startsWith("#")) return n(s);
-	let l = i(s);
-	if (!l || l.args.length !== 3) return null;
-	let u = l.alpha === void 0 ? 1 : r(l.alpha, 1);
-	if (u === null) return null;
-	let [d, f, p] = l.args;
-	switch (l.name) {
+	let c = i(s);
+	if (!c || c.args.length !== 3) return null;
+	let d = c.alpha === void 0 ? 1 : r(c.alpha, 1);
+	if (d === null) return null;
+	let [f, p, m] = c.args;
+	switch (c.name) {
 		case "rgb":
 		case "rgba": {
 			let t = [
-				d,
 				f,
-				p
+				p,
+				m
 			].map((e) => r(e, 255));
 			if (t.some((e) => e === null)) return null;
 			let [n, i, a] = t;
@@ -113,56 +140,74 @@ function l(o) {
 				r: e(n / 255),
 				g: e(i / 255),
 				b: e(a / 255),
-				alpha: u
+				alpha: d
 			};
 		}
 		case "hsl":
 		case "hsla": {
-			let e = r(d), t = r(f, 1), n = r(p, 1);
+			let e = r(f), t = r(p, 1), n = r(m, 1);
 			if (e === null || t === null || n === null) return null;
 			let i = (e, t) => t.endsWith("%") ? e : e / 100;
-			return c((e % 360 + 360) % 360, i(t, f), i(n, p), u);
-		}
-		case "oklch": {
-			let e = r(d, 1), t = r(f, .4), n = r(p);
-			if (e === null || t === null || n === null) return null;
-			let i = n * Math.PI / 180;
-			return a({
-				l: e,
-				a: t * Math.cos(i),
-				b: t * Math.sin(i),
-				alpha: u
-			});
+			return l((e % 360 + 360) % 360, i(t, p), i(n, m), d);
 		}
+		case "oklch":
 		case "oklab": {
-			let e = r(d, 1), t = r(f, .4), n = r(p, .4);
-			return e === null || t === null || n === null ? null : a({
-				l: e,
-				a: t,
-				b: n,
-				alpha: u
-			});
+			let e = u(c.name, c.args, d);
+			return e ? o(e) : null;
 		}
 		default: return null;
 	}
 }
-function u(t, n, r) {
-	let i = s(t), o = s(n), c = e(r), l = i.alpha * c + o.alpha * (1 - c);
+function f(t, n, r) {
+	let i = c(t), a = c(n), s = e(r), l = i.alpha * s + a.alpha * (1 - s);
 	if (l === 0) return {
 		r: 0,
 		g: 0,
 		b: 0,
 		alpha: 0
 	};
-	let u = (e, t) => (e * i.alpha * c + t * o.alpha * (1 - c)) / l;
-	return a({
-		l: u(i.l, o.l),
-		a: u(i.a, o.a),
-		b: u(i.b, o.b),
+	let u = (e, t) => (e * i.alpha * s + t * a.alpha * (1 - s)) / l;
+	return o({
+		l: u(i.l, a.l),
+		a: u(i.a, a.a),
+		b: u(i.b, a.b),
 		alpha: l
 	});
 }
-function d(e, t) {
+var p = ({ l: e, a: t, b: n, alpha: r }) => {
+	let i = Math.hypot(t, n);
+	return {
+		l: e,
+		c: i,
+		h: i < 1e-9 ? 0 : (Math.atan2(n, t) * 180 / Math.PI + 360) % 360,
+		alpha: r
+	};
+};
+function m(e) {
+	return p(c(e));
+}
+function h(e) {
+	let t = e.trim().toLowerCase(), n = i(t);
+	if (n?.args.length === 3 && ["oklch", "oklab"].includes(n.name)) {
+		let e = n.alpha === void 0 ? 1 : r(n.alpha, 1), t = e === null ? null : u(n.name, n.args, e);
+		return t ? p(t) : null;
+	}
+	let a = d(t);
+	return a ? m(a) : null;
+}
+var g = ({ l: e, c: t, h: n, alpha: r }) => {
+	let i = n * Math.PI / 180;
+	return {
+		l: e,
+		a: t * Math.cos(i),
+		b: t * Math.sin(i),
+		alpha: r
+	};
+};
+function _(e) {
+	return o(g(e));
+}
+function v(e, t) {
 	let n = (t, n) => t * e.alpha + n * (1 - e.alpha);
 	return {
 		r: n(e.r, t.r),
@@ -171,12 +216,12 @@ function d(e, t) {
 		alpha: 1
 	};
 }
-function f({ r: e, g: t, b: n }) {
-	return .2126 * o(e) + .7152 * o(t) + .0722 * o(n);
+function y({ r: e, g: t, b: n }) {
+	return .2126 * s(e) + .7152 * s(t) + .0722 * s(n);
 }
-function p(e, t) {
-	let n = Math.max(f(e), f(t)), r = Math.min(f(e), f(t));
+function b(e, t) {
+	let n = Math.max(y(e), y(t)), r = Math.min(y(e), y(t));
 	return (n + .05) / (r + .05);
 }
 //#endregion
-export { d as composite, p as contrastRatio, u as mixOklab, l as parseCssColor };
+export { v as composite, b as contrastRatio, _ as fromOklch, f as mixOklab, d as parseCssColor, h as parseCssOklch, m as toOklch };

package/dist/libs/tesouro-embedded-components-react/shared/util/dist/lib/theme/createTheme.js

@@ -1,85 +1,98 @@
-import { composite as e, contrastRatio as t, mixOklab as n, parseCssColor as r } from "./color.js";
+import { composite as e, contrastRatio as t, parseCssColor as n, parseCssOklch as r } from "./color.js";
 import { DEFAULT_THEME_TOKENS as i, MIN_TEXT_CONTRAST as a, THEME_CONTRAST_PAIRS as o, THEME_RADIUS_RANGE_REM as s, THEME_TOKEN_FALLBACKS as c, THEME_TOKEN_NAMES as l, THEME_TONES as u } from "./themeTokens.js";
+import { legacyToneSubtle as d, legacyToneText as f, toneSubtle as p, toneText as m } from "./toneColors.js";
 //#region ../../libs/tesouro-embedded-components-react/shared/util/dist/lib/theme/createTheme.js
-var d = new Map(Object.entries(l).map(([e, t]) => [t, e])), f = new Set(Object.values(l));
-function p(e) {
+var h = new Map(Object.entries(l).map(([e, t]) => [t, e])), g = new Set(Object.values(l));
+function _(e) {
 	let t = /^(-?[\d.]+)(rem|px|em)?$/i.exec(e.trim());
 	if (!t) return null;
 	let n = Number.parseFloat(t[1]);
 	return Number.isNaN(n) ? null : t[2] ? t[2].toLowerCase() === "px" ? n / 16 : n : n === 0 ? 0 : null;
 }
-function m(t, n) {
+function v(t, n) {
 	return t.alpha >= 1 ? t : n ? e(t, n) : null;
 }
-function h(e) {
-	let l = [], d = { ...i };
-	for (let [t, n] of Object.entries(e)) n?.trim() && (d[t] = n);
-	let f = (e) => {
-		let t = d[e]?.trim();
-		return t ? r(t) : null;
-	}, h = (e) => {
+function y(e) {
+	let l = [], h = { ...i };
+	for (let [t, n] of Object.entries(e)) n?.trim() && (h[t] = n);
+	let g = (e) => {
+		let t = h[e]?.trim();
+		return t ? n(t) : null;
+	}, y = (e) => {
 		let t = c[e];
-		return f(e) ?? (t ? f(t) : null);
-	}, g = h("--ttw-background"), _ = g && g.alpha >= 1 ? g : null, v = (e, n, r, i, o = a) => {
-		if (!r || !i) return;
-		let s = m(r, _), c = s ? m(i, s) : null;
-		if (!s || !c) return;
-		let u = t(s, c);
-		u < o && l.push({
-			kind: "contrast",
+		return g(e) ?? (t ? g(t) : null);
+	}, b = y("--ttw-background"), x = b && b.alpha >= 1 ? b : null, S = (e, n, r, i, o = a, s = "contrast") => {
+		if (!r || !i) return !0;
+		let c = v(r, x), u = c ? v(i, c) : null;
+		if (!c || !u) return !0;
+		let d = t(c, u);
+		return d >= o || (l.push({
+			kind: s,
 			fill: e,
 			text: n,
-			ratio: Math.round(u * 100) / 100,
+			ratio: Math.round(d * 100) / 100,
 			minimum: o
-		});
+		}), !1);
 	};
-	for (let { fill: e, text: t, minimum: n } of o) (c[e] === void 0 || c[t] === void 0 || f(e) || f(t)) && v(e, t, h(e), h(t), n);
-	let y = h("--ttw-foreground");
+	for (let { fill: e, text: t, minimum: n } of o) (c[e] === void 0 || c[t] === void 0 || g(e) || g(t)) && S(e, t, y(e), y(t), n);
+	let C = (e) => {
+		let t = (e) => {
+			let t = h[e]?.trim();
+			return t ? r(t) : null;
+		}, n = c[e];
+		return t(e) ?? (n ? t(n) : null);
+	}, w = C("--ttw-background"), T = C("--ttw-foreground"), E = y("--ttw-background"), D = y("--ttw-foreground");
 	for (let e of u) {
-		let t = h(e.hue), r = h(e.subtle) ?? (t && g ? n(t, g, .12) : null), i = h(e.text) ?? (t && y ? n(t, y, .6) : null);
-		v(e.subtle, e.text, r, i);
+		let t = C(e.hue), n = y(e.subtle), r = y(e.text), i = n ?? (t && w ? p(t, w) : null), a = r ?? (t && T ? m(t, T) : null);
+		if (!S(e.subtle, e.text, i, a)) continue;
+		let o = y(e.hue);
+		o && S(e.subtle, e.text, n ?? (E ? d(o, E) : null), r ?? (D ? f(o, D) : null), 4.5, "fallback-contrast");
 	}
-	let b = d["--ttw-radius"]?.trim();
-	if (b) {
-		let e = p(b);
+	let O = h["--ttw-radius"]?.trim();
+	if (O) {
+		let e = _(O);
 		e !== null && (e < s.min || e > s.max) && l.push({
 			kind: "radius",
-			value: b
+			value: O
 		});
 	}
 	return l;
 }
-var g = "[@tesouro/embedded-components-react]";
-function _(e) {
+var b = "[@tesouro/embedded-components-react]";
+function x(e) {
 	switch (e.kind) {
-		case "unknown-key": return `${g} createTheme: "${e.key}" is not a theme token, so it does nothing. Known keys: ${Object.keys(l).join(", ")}.`;
+		case "unknown-key": return `${b} createTheme: "${e.key}" is not a theme token, so it does nothing. Known keys: ${Object.keys(l).join(", ")}.`;
 		case "contrast": {
-			let t = (e) => d.get(e) ?? e;
-			return `${g} Theme contrast: ${t(e.text)} (${e.text}) on ${t(e.fill)} (${e.fill}) is ${e.ratio}:1. Text needs at least ${e.minimum}:1 to stay readable.`;
+			let t = (e) => h.get(e) ?? e;
+			return `${b} Theme contrast: ${t(e.text)} (${e.text}) on ${t(e.fill)} (${e.fill}) is ${e.ratio}:1. Text needs at least ${e.minimum}:1 to stay readable.`;
+		}
+		case "fallback-contrast": {
+			let t = (e) => h.get(e) ?? e;
+			return `${b} Theme contrast in older browsers: ${t(e.text)} (${e.text}) on ${t(e.fill)} (${e.fill}) is readable in current browsers, but ${e.ratio}:1 in browsers without CSS relative colours, which keep the older tint. Text needs at least ${e.minimum}:1 there too. Set ${t(e.text)} explicitly to fix both.`;
 		}
-		case "radius": return `${g} Theme radius "${e.value}" is outside ${s.min}–${s.max}rem, the range components are designed for.`;
+		case "radius": return `${b} Theme radius "${e.value}" is outside ${s.min}–${s.max}rem, the range components are designed for.`;
 	}
 }
-function v() {
+function S() {
 	try {
 		return process.env.NODE_ENV !== "production";
 	} catch {
 		return !1;
 	}
 }
-var y = /* @__PURE__ */ new Set();
-function b(e) {
-	if (v()) for (let t of e) {
-		let e = _(t);
-		if (!y.has(e)) {
-			y.add(e);
+var C = /* @__PURE__ */ new Set();
+function w(e) {
+	if (S()) for (let t of e) {
+		let e = x(t);
+		if (!C.has(e)) {
+			C.add(e);
 			try {
 				console.warn(e);
 			} catch {}
 		}
 	}
 }
-function x(e) {
+function T(e) {
 	let t = {}, n = [];
 	for (let [r, i] of Object.entries(e ?? {})) {
 		let e = l[r];
@@ -92,12 +105,12 @@ function x(e) {
 		}
 		typeof i == "string" && i.trim() !== "" && (t[e] = i.trim());
 	}
-	return v() && (n.push(...h(t)), b(n)), t;
+	return S() && (n.push(...y(t)), w(n)), t;
 }
-function S(e, t = ":root") {
-	return `${t} {\n${Object.entries(e).filter((e) => f.has(e[0]) && typeof e[1] == "string").map(([e, t]) => `  ${e}: ${t};`).join("\n")}\n}`;
+function E(e, t = ":root") {
+	return `${t} {\n${Object.entries(e).filter((e) => g.has(e[0]) && typeof e[1] == "string").map(([e, t]) => `  ${e}: ${t};`).join("\n")}\n}`;
 }
-function C(e) {
+function D(e) {
 	let t = {};
 	for (let n of Object.values(l)) {
 		let r = e(n)?.trim();
@@ -106,4 +119,4 @@ function C(e) {
 	return t;
 }
 //#endregion
-export { x as createTheme, _ as describeThemeIssue, v as isThemeDevelopmentBuild, C as readThemeTokens, b as reportThemeIssues, h as themeIssues, S as themeToCss };
+export { T as createTheme, x as describeThemeIssue, S as isThemeDevelopmentBuild, D as readThemeTokens, w as reportThemeIssues, y as themeIssues, E as themeToCss };

package/dist/libs/tesouro-embedded-components-react/shared/util/dist/lib/theme/index.js

@@ -1,3 +1,4 @@
 import "./color.js";
 import "./themeTokens.js";
+import "./toneColors.js";
 import "./createTheme.js";

package/dist/libs/tesouro-embedded-components-react/shared/util/dist/lib/theme/themeTokens.js

@@ -163,8 +163,50 @@ var e = {
 		text: "--ttw-cyan-foreground"
 	}
 ], o = {
+	mixWeight: .16,
+	lightness: .56,
+	chromaScale: 2.5
+}, s = {
+	mixWeight: .6,
+	lightness: .55
+}, c = {
+	hueStep: 30,
+	light: [
+		.498,
+		.47,
+		.557,
+		1.055,
+		1.308,
+		1.421,
+		.936,
+		.796,
+		.48,
+		.449,
+		.532,
+		.753,
+		.498
+	],
+	dark: [
+		.396,
+		.355,
+		.209,
+		.193,
+		.225,
+		.25,
+		.164,
+		.16,
+		.161,
+		.489,
+		.525,
+		.444,
+		.396
+	]
+}, l = {
+	subtle: .12,
+	text: .6
+}, u = {
 	min: 0,
 	max: 1.25
 };
 //#endregion
-export { t as DEFAULT_THEME_TOKENS, r as MIN_TEXT_CONTRAST, i as THEME_CONTRAST_PAIRS, o as THEME_RADIUS_RANGE_REM, n as THEME_TOKEN_FALLBACKS, e as THEME_TOKEN_NAMES, a as THEME_TONES };
+export { t as DEFAULT_THEME_TOKENS, r as MIN_TEXT_CONTRAST, i as THEME_CONTRAST_PAIRS, u as THEME_RADIUS_RANGE_REM, n as THEME_TOKEN_FALLBACKS, e as THEME_TOKEN_NAMES, a as THEME_TONES, o as TONE_FILL, c as TONE_FILL_GAMUT, l as TONE_LEGACY_MIX, s as TONE_TEXT };

package/dist/libs/tesouro-embedded-components-react/shared/util/dist/lib/theme/toneColors.js

@@ -0,0 +1,70 @@
+import { fromOklch as e, mixOklab as t, toOklch as n } from "./color.js";
+import { TONE_FILL as r, TONE_FILL_GAMUT as i, TONE_LEGACY_MIX as a, TONE_TEXT as o } from "./themeTokens.js";
+//#region ../../libs/tesouro-embedded-components-react/shared/util/dist/lib/theme/toneColors.js
+var s = (e) => Math.round(e * 1e3) / 1e3;
+function c(e) {
+	return e.slice(1).map((t, n) => s(t - e[n]));
+}
+function l(e, t) {
+	let n = i.hueStep, r = c(e).reduce((e, r, i) => e + r * Math.min(Math.max(t - i * n, 0), n), 0);
+	return e[0] + r / n;
+}
+function u(e, t) {
+	return Math.max(0, Math.min((1 - e) * l(i.light, t), e * l(i.dark, t)));
+}
+var d = (e, t, n) => e * t + (1 - e) * n;
+function f(e, t, n) {
+	let r = d(e, t.alpha, n.alpha);
+	return r === 0 ? d(e, t.value, n.value) : d(e, t.value * t.alpha, n.value * n.alpha) / r;
+}
+var p = (e) => "c" in e ? e : n(e);
+function m(t, n) {
+	let i = p(t), a = p(n), o = r.mixWeight, s = f(o, {
+		value: r.lightness,
+		alpha: i.alpha
+	}, {
+		value: a.l,
+		alpha: a.alpha
+	}), c = f(o, {
+		value: i.c,
+		alpha: i.alpha
+	}, {
+		value: 0,
+		alpha: a.alpha
+	}), l = Math.min(c * r.chromaScale, u(s, i.h));
+	return e({
+		l: s,
+		c: l,
+		h: i.h,
+		alpha: d(r.mixWeight, i.alpha, a.alpha)
+	});
+}
+function h(t, n) {
+	let r = p(t), i = p(n), a = o.mixWeight;
+	return e({
+		l: f(a, {
+			value: o.lightness,
+			alpha: r.alpha
+		}, {
+			value: i.l,
+			alpha: i.alpha
+		}),
+		c: f(a, {
+			value: r.c,
+			alpha: r.alpha
+		}, {
+			value: 0,
+			alpha: i.alpha
+		}),
+		h: r.h,
+		alpha: d(o.mixWeight, r.alpha, i.alpha)
+	});
+}
+function g(e, n) {
+	return t(e, n, a.subtle);
+}
+function _(e, n) {
+	return t(e, n, a.text);
+}
+//#endregion
+export { g as legacyToneSubtle, _ as legacyToneText, u as toneFillChromaLimit, m as toneSubtle, h as toneText };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tesouro/embedded-components-react",
-  "version": "0.9.27",
+  "version": "0.9.30",
   "license": "Apache-2.0",
   "type": "module",
   "sideEffects": [