@tamagui/themes 3.0.0-beta.1402.1 → 3.0.0-beta.1407.1

package/dist/cjs/builder.cjs

@@ -22,10 +22,12 @@ var builder_exports = {};
 __export(builder_exports, {
 	activeScale: () => activeScale,
 	colorTokens: () => import_tokens2.colorTokens,
+	createPaletteThemes: () => createPaletteThemes,
 	createThemes: () => import_create_theme2.createThemes,
 	fromShades: () => fromShades,
 	getTheme: () => getTheme,
 	levels: () => levels,
+	paletteTokens: () => paletteTokens,
 	raise: () => raise,
 	ramp: () => ramp,
 	rampReversed: () => rampReversed,
@@ -58,13 +60,13 @@ const shades = [
 ];
 const shadows = {
 	light: {
-		"shadow-1": "rgba(0, 0, 0, 0.04)",
-		"shadow-2": "rgba(0, 0, 0, 0.08)",
-		"shadow-3": "rgba(0, 0, 0, 0.12)",
-		"shadow-4": "rgba(0, 0, 0, 0.22)",
-		"shadow-5": "rgba(0, 0, 0, 0.33)",
-		"shadow-6": "rgba(0, 0, 0, 0.44)",
-		"shadow-7": "rgba(0, 0, 0, 0.6)"
+		"shadow-1": "rgba(0, 0, 0, 0.03)",
+		"shadow-2": "rgba(0, 0, 0, 0.06)",
+		"shadow-3": "rgba(0, 0, 0, 0.1)",
+		"shadow-4": "rgba(0, 0, 0, 0.17)",
+		"shadow-5": "rgba(0, 0, 0, 0.26)",
+		"shadow-6": "rgba(0, 0, 0, 0.36)",
+		"shadow-7": "rgba(0, 0, 0, 0.5)"
 	},
 	dark: {
 		"shadow-1": "rgba(0, 0, 0, 0.15)",
@@ -332,15 +334,178 @@ function ramp(palette, scheme, scale) {
 function fromShades(palette, scale) {
 	return Object.fromEntries(Object.entries(scale).map(([key, value]) => [key, typeof value === "number" ? `${palette}-${value}` : value]));
 }
-function getTheme({ recipe }) {
+function channels(color) {
+	const value = color.trim().toLowerCase();
+	const hex = /^#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/.exec(value);
+	if (hex) {
+		const digits = hex[1].length < 6 ? hex[1].split("").map((digit) => digit + digit).join("") : hex[1];
+		return [
+			0,
+			2,
+			4
+		].map((offset) => parseInt(digits.slice(offset, offset + 2), 16));
+	}
+	const fn = /^(rgba?|hsla?)\((.+)\)$/.exec(value);
+	if (!fn) return null;
+	const parts = fn[2].split(/[\s,/]+/).filter(Boolean);
+	if (parts.length < 3) return null;
+	const numbers = parts.slice(0, 3).map((part) => Number.parseFloat(part));
+	if (numbers.some((number) => Number.isNaN(number))) return null;
+	if (fn[1].startsWith("rgb")) return numbers;
+	const [hue, saturation, lightness] = [
+		numbers[0],
+		numbers[1] / 100,
+		numbers[2] / 100
+	];
+	const chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;
+	const x = chroma * (1 - Math.abs(hue / 60 % 2 - 1));
+	const sector = Math.floor((hue % 360 + 360) % 360 / 60);
+	const [r, g, b] = [
+		[
+			chroma,
+			x,
+			0
+		],
+		[
+			x,
+			chroma,
+			0
+		],
+		[
+			0,
+			chroma,
+			x
+		],
+		[
+			0,
+			x,
+			chroma
+		],
+		[
+			x,
+			0,
+			chroma
+		],
+		[
+			chroma,
+			0,
+			x
+		]
+	][sector];
+	const m = lightness - chroma / 2;
+	return [
+		(r + m) * 255,
+		(g + m) * 255,
+		(b + m) * 255
+	];
+}
+function luminance(color) {
+	const rgb = channels(color);
+	if (!rgb) return null;
+	const [r, g, b] = rgb.map((channel) => {
+		const unit = channel / 255;
+		return unit <= .03928 ? unit / 12.92 : ((unit + .055) / 1.055) ** 2.4;
+	});
+	return .2126 * r + .7152 * g + .0722 * b;
+}
+function contrast(a, b) {
+	return (Math.max(a, b) + .05) / (Math.min(a, b) + .05);
+}
+const MIN_TEXT_CONTRAST = 4.5;
+const mirroredShade = {
+	50: 950,
+	100: 900,
+	200: 800,
+	300: 700,
+	400: 600,
+	500: 500,
+	600: 400,
+	700: 300,
+	800: 200,
+	900: 100,
+	950: 50
+};
+function readable(theme, colors, bold) {
+	const pairs = [["accent-background", ["accent-color"]]];
+	if (bold) pairs.push(["background", [
+		"color",
+		"color-hover",
+		"color-press",
+		"color-focus"
+	]]);
+	const valueOf = (token) => luminance(colors[token] ?? token);
+	for (const [fill, keys] of pairs) {
+		const fillLuminance = valueOf(theme[fill]);
+		if (fillLuminance === null) continue;
+		for (const key of keys) {
+			const named = theme[key];
+			const match = /^(.*)-(\d+)$/.exec(named);
+			const shade = match ? Number(match[2]) : null;
+			if (!match || !shade || !(shade in mirroredShade)) continue;
+			const mirrored = `${match[1]}-${mirroredShade[shade]}`;
+			const namedLuminance = valueOf(named);
+			const mirroredLuminance = mirrored in colors ? valueOf(mirrored) : null;
+			if (namedLuminance === null || mirroredLuminance === null) continue;
+			const namedContrast = contrast(fillLuminance, namedLuminance);
+			if (namedContrast >= MIN_TEXT_CONTRAST) continue;
+			if (contrast(fillLuminance, mirroredLuminance) > namedContrast) theme[key] = mirrored;
+		}
+	}
+	return theme;
+}
+function getTheme({ recipe, tokens: themeTokens }) {
 	const resting = scales[recipe.treatment ?? "normal"][recipe.scheme][recipe.level ?? 1];
 	const scale = recipe.active ? activeScale(resting) : resting;
 	const schemeShadows = shadows[recipe.scheme];
-	return {
+	return readable({
 		...ramp(recipe.palette, recipe.scheme, scale),
 		...fromShades(recipe.palette, scale),
 		...schemeShadows,
 		"shadow-color": schemeShadows[scale["shadow-color"]]
+	}, themeTokens.color, recipe.treatment === "bold");
+}
+function paletteTokens(palettes) {
+	const result = {};
+	for (const name in palettes) {
+		const colors = palettes[name];
+		if (colors.length !== shades.length) {
+			throw new Error(`palette "${name}" needs ${shades.length} colors from shade 50 to 950, got ${colors.length}`);
+		}
+		shades.forEach((shade, index) => {
+			result[`${name}-${shade}`] = colors[index];
+		});
+	}
+	return result;
+}
+function createPaletteThemes(palettes) {
+	const colorTokens2 = {
+		...import_tokens.colorTokens,
+		...paletteTokens(palettes)
+	};
+	const surface = palettes.surface ? "surface" : "mauve";
+	const paletteTree = {
+		...tree,
+		light: {
+			scheme: "light",
+			palette: surface
+		},
+		dark: {
+			scheme: "dark",
+			palette: surface
+		},
+		children: {
+			...tree.children,
+			...palettes.brand ? { brand: {
+				palette: "brand",
+				treatment: "bold",
+				children: levels()
+			} } : {}
+		}
+	};
+	const themes2 = (0, import_create_theme.createThemes)({ color: colorTokens2 }, paletteTree, { getTheme });
+	return {
+		colorTokens: colorTokens2,
+		themes: themes2
 	};
 }
 function createLevels(max, depth) {

package/dist/cjs/builder.native.cjs

@@ -24,10 +24,12 @@ var builder_exports = {};
 __export(builder_exports, {
 	activeScale: () => activeScale,
 	colorTokens: () => import_tokens2.colorTokens,
+	createPaletteThemes: () => createPaletteThemes,
 	createThemes: () => import_create_theme2.createThemes,
 	fromShades: () => fromShades,
 	getTheme: () => getTheme,
 	levels: () => levels,
+	paletteTokens: () => paletteTokens,
 	raise: () => raise,
 	ramp: () => ramp,
 	rampReversed: () => rampReversed,
@@ -60,13 +62,13 @@ var shades = [
 ];
 var shadows = {
 	light: {
-		"shadow-1": "rgba(0, 0, 0, 0.04)",
-		"shadow-2": "rgba(0, 0, 0, 0.08)",
-		"shadow-3": "rgba(0, 0, 0, 0.12)",
-		"shadow-4": "rgba(0, 0, 0, 0.22)",
-		"shadow-5": "rgba(0, 0, 0, 0.33)",
-		"shadow-6": "rgba(0, 0, 0, 0.44)",
-		"shadow-7": "rgba(0, 0, 0, 0.6)"
+		"shadow-1": "rgba(0, 0, 0, 0.03)",
+		"shadow-2": "rgba(0, 0, 0, 0.06)",
+		"shadow-3": "rgba(0, 0, 0, 0.1)",
+		"shadow-4": "rgba(0, 0, 0, 0.17)",
+		"shadow-5": "rgba(0, 0, 0, 0.26)",
+		"shadow-6": "rgba(0, 0, 0, 0.36)",
+		"shadow-7": "rgba(0, 0, 0, 0.5)"
 	},
 	dark: {
 		"shadow-1": "rgba(0, 0, 0, 0.15)",
@@ -340,17 +342,226 @@ function fromShades(palette, scale) {
 		return [key, typeof value === "number" ? `${palette}-${value}` : value];
 	}));
 }
+function channels(color) {
+	var value = color.trim().toLowerCase();
+	var hex = /^#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/.exec(value);
+	if (hex) {
+		var digits = hex[1].length < 6 ? hex[1].split("").map(function(digit) {
+			return digit + digit;
+		}).join("") : hex[1];
+		return [
+			0,
+			2,
+			4
+		].map(function(offset) {
+			return parseInt(digits.slice(offset, offset + 2), 16);
+		});
+	}
+	var fn = /^(rgba?|hsla?)\((.+)\)$/.exec(value);
+	if (!fn) return null;
+	var parts = fn[2].split(/[\s,/]+/).filter(Boolean);
+	if (parts.length < 3) return null;
+	var numbers = parts.slice(0, 3).map(function(part) {
+		return Number.parseFloat(part);
+	});
+	if (numbers.some(function(number) {
+		return Number.isNaN(number);
+	})) return null;
+	if (fn[1].startsWith("rgb")) return numbers;
+	var [hue, saturation, lightness] = [
+		numbers[0],
+		numbers[1] / 100,
+		numbers[2] / 100
+	];
+	var chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;
+	var x = chroma * (1 - Math.abs(hue / 60 % 2 - 1));
+	var sector = Math.floor((hue % 360 + 360) % 360 / 60);
+	var [r, g, b] = [
+		[
+			chroma,
+			x,
+			0
+		],
+		[
+			x,
+			chroma,
+			0
+		],
+		[
+			0,
+			chroma,
+			x
+		],
+		[
+			0,
+			x,
+			chroma
+		],
+		[
+			x,
+			0,
+			chroma
+		],
+		[
+			chroma,
+			0,
+			x
+		]
+	][sector];
+	var m = lightness - chroma / 2;
+	return [
+		(r + m) * 255,
+		(g + m) * 255,
+		(b + m) * 255
+	];
+}
+function luminance(color) {
+	var rgb = channels(color);
+	if (!rgb) return null;
+	var [r, g, b] = rgb.map(function(channel) {
+		var unit = channel / 255;
+		return unit <= .03928 ? unit / 12.92 : Math.pow((unit + .055) / 1.055, 2.4);
+	});
+	return .2126 * r + .7152 * g + .0722 * b;
+}
+function contrast(a, b) {
+	return (Math.max(a, b) + .05) / (Math.min(a, b) + .05);
+}
+var MIN_TEXT_CONTRAST = 4.5;
+var mirroredShade = {
+	50: 950,
+	100: 900,
+	200: 800,
+	300: 700,
+	400: 600,
+	500: 500,
+	600: 400,
+	700: 300,
+	800: 200,
+	900: 100,
+	950: 50
+};
+function readable(theme, colors, bold) {
+	var pairs = [["accent-background", ["accent-color"]]];
+	if (bold) pairs.push(["background", [
+		"color",
+		"color-hover",
+		"color-press",
+		"color-focus"
+	]]);
+	var valueOf = function(token) {
+		var _colors_token;
+		return luminance((_colors_token = colors[token]) !== null && _colors_token !== void 0 ? _colors_token : token);
+	};
+	var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+	try {
+		for (var _iterator = pairs[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+			var [fill, keys] = _step.value;
+			var fillLuminance = valueOf(theme[fill]);
+			if (fillLuminance === null) continue;
+			var _iteratorNormalCompletion1 = true, _didIteratorError1 = false, _iteratorError1 = void 0;
+			try {
+				for (var _iterator1 = keys[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true) {
+					var key = _step1.value;
+					var named = theme[key];
+					var match = /^(.*)-(\d+)$/.exec(named);
+					var shade = match ? Number(match[2]) : null;
+					if (!match || !shade || !(shade in mirroredShade)) continue;
+					var mirrored = `${match[1]}-${mirroredShade[shade]}`;
+					var namedLuminance = valueOf(named);
+					var mirroredLuminance = mirrored in colors ? valueOf(mirrored) : null;
+					if (namedLuminance === null || mirroredLuminance === null) continue;
+					var namedContrast = contrast(fillLuminance, namedLuminance);
+					if (namedContrast >= MIN_TEXT_CONTRAST) continue;
+					if (contrast(fillLuminance, mirroredLuminance) > namedContrast) theme[key] = mirrored;
+				}
+			} catch (err) {
+				_didIteratorError1 = true;
+				_iteratorError1 = err;
+			} finally {
+				try {
+					if (!_iteratorNormalCompletion1 && _iterator1.return != null) {
+						_iterator1.return();
+					}
+				} finally {
+					if (_didIteratorError1) {
+						throw _iteratorError1;
+					}
+				}
+			}
+		}
+	} catch (err) {
+		_didIteratorError = true;
+		_iteratorError = err;
+	} finally {
+		try {
+			if (!_iteratorNormalCompletion && _iterator.return != null) {
+				_iterator.return();
+			}
+		} finally {
+			if (_didIteratorError) {
+				throw _iteratorError;
+			}
+		}
+	}
+	return theme;
+}
 function getTheme(param) {
-	var { recipe } = param;
+	var { recipe, tokens: themeTokens } = param;
 	var _recipe_treatment, _recipe_level;
 	var resting = scales[(_recipe_treatment = recipe.treatment) !== null && _recipe_treatment !== void 0 ? _recipe_treatment : "normal"][recipe.scheme][(_recipe_level = recipe.level) !== null && _recipe_level !== void 0 ? _recipe_level : 1];
 	var scale = recipe.active ? activeScale(resting) : resting;
 	var schemeShadows = shadows[recipe.scheme];
-	return {
+	return readable({
 		...ramp(recipe.palette, recipe.scheme, scale),
 		...fromShades(recipe.palette, scale),
 		...schemeShadows,
 		"shadow-color": schemeShadows[scale["shadow-color"]]
+	}, themeTokens.color, recipe.treatment === "bold");
+}
+function paletteTokens(palettes) {
+	var _loop = function(name2) {
+		var colors = palettes[name2];
+		if (colors.length !== shades.length) {
+			throw new Error(`palette "${name2}" needs ${shades.length} colors from shade 50 to 950, got ${colors.length}`);
+		}
+		shades.forEach(function(shade, index) {
+			result[`${name2}-${shade}`] = colors[index];
+		});
+	};
+	var result = {};
+	for (var name in palettes) _loop(name);
+	return result;
+}
+function createPaletteThemes(palettes) {
+	var colorTokens2 = {
+		...import_tokens.colorTokens,
+		...paletteTokens(palettes)
+	};
+	var surface = palettes.surface ? "surface" : "mauve";
+	var paletteTree = {
+		...tree,
+		light: {
+			scheme: "light",
+			palette: surface
+		},
+		dark: {
+			scheme: "dark",
+			palette: surface
+		},
+		children: {
+			...tree.children,
+			...palettes.brand ? { brand: {
+				palette: "brand",
+				treatment: "bold",
+				children: levels()
+			} } : {}
+		}
+	};
+	var themes2 = (0, import_create_theme.createThemes)({ color: colorTokens2 }, paletteTree, { getTheme });
+	return {
+		colorTokens: colorTokens2,
+		themes: themes2
 	};
 }
 function createLevels(max, depth) {