@tamagui/themes 2.7.7 → 3.0.0-beta.1097.1

package/dist/cjs/builder.cjs

@@ -0,0 +1,313 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var builder_exports = {};
+__export(builder_exports, {
+	colorTokens: () => import_tokens2.colorTokens,
+	createThemes: () => import_create_theme2.createThemes,
+	fromShades: () => fromShades,
+	getTheme: () => getTheme,
+	levels: () => levels,
+	raise: () => raise,
+	ramp: () => ramp,
+	scales: () => scales,
+	semanticThemeKeys: () => semanticThemeKeys,
+	shades: () => shades,
+	tailwindColors: () => import_tokens2.tailwindColors,
+	themes: () => themes,
+	tokens: () => import_tokens2.tokens,
+	tree: () => tree
+});
+module.exports = __toCommonJS(builder_exports);
+var import_create_theme = require("@tamagui/create-theme");
+var import_tokens = require("./tokens.cjs");
+var import_create_theme2 = require("@tamagui/create-theme");
+var import_tokens2 = require("./tokens.cjs");
+const shades = [
+	50,
+	100,
+	200,
+	300,
+	400,
+	500,
+	600,
+	700,
+	800,
+	900,
+	950
+];
+const semanticThemeKeys = [
+	"background",
+	"background-hover",
+	"background-press",
+	"background-focus",
+	"border-color",
+	"border-color-hover",
+	"border-color-press",
+	"border-color-focus",
+	"color",
+	"color-hover",
+	"color-press",
+	"color-focus",
+	"placeholder-color",
+	"outline-color",
+	"shadow-color",
+	"accent-background",
+	"accent-color"
+];
+const light = {
+	background: "white",
+	"background-hover": 50,
+	"background-press": "white",
+	"background-focus": 50,
+	"border-color": 200,
+	"border-color-hover": 300,
+	"border-color-press": 200,
+	"border-color-focus": 300,
+	color: 950,
+	"color-hover": 950,
+	"color-press": 950,
+	"color-focus": 950,
+	"placeholder-color": 500,
+	"outline-color": 400,
+	"shadow-color": "shadow-3",
+	"accent-background": "brand-600",
+	"accent-color": "brand-50"
+};
+const dark = {
+	...light,
+	background: 950,
+	"background-hover": 900,
+	"background-press": 950,
+	"background-focus": 900,
+	"border-color": 800,
+	"border-color-hover": 700,
+	"border-color-press": 800,
+	"border-color-focus": 700,
+	color: 50,
+	"color-hover": 50,
+	"color-press": 50,
+	"color-focus": 50,
+	"shadow-color": "shadow-6"
+};
+const boldLight = {
+	background: 600,
+	"background-hover": 500,
+	"background-press": 600,
+	"background-focus": 500,
+	"border-color": 700,
+	"border-color-hover": 600,
+	"border-color-press": 700,
+	"border-color-focus": 600,
+	color: 50,
+	"color-hover": 50,
+	"color-press": 50,
+	"color-focus": 50,
+	"placeholder-color": 200,
+	"outline-color": 400,
+	"shadow-color": "shadow-3",
+	"accent-background": "brand-50",
+	"accent-color": "brand-700"
+};
+const boldDark = {
+	...boldLight,
+	background: 500,
+	"background-hover": 400,
+	"background-press": 500,
+	"background-focus": 400,
+	"border-color": 600,
+	"border-color-hover": 500,
+	"border-color-press": 600,
+	"border-color-focus": 500,
+	"shadow-color": "shadow-6"
+};
+const tintLight = {
+	background: 100,
+	"background-hover": 50,
+	"background-press": 100,
+	"background-focus": 50,
+	"border-color": 300,
+	"border-color-hover": 400,
+	"border-color-press": 300,
+	"border-color-focus": 400,
+	color: 700,
+	"color-hover": 700,
+	"color-press": 700,
+	"color-focus": 700,
+	"placeholder-color": 400,
+	"outline-color": 400,
+	"shadow-color": "shadow-3",
+	"accent-background": "brand-600",
+	"accent-color": "brand-50"
+};
+const tintDark = {
+	...tintLight,
+	background: 900,
+	"background-hover": 800,
+	"background-press": 900,
+	"background-focus": 800,
+	"border-color": 700,
+	"border-color-hover": 600,
+	"border-color-press": 700,
+	"border-color-focus": 600,
+	color: 200,
+	"color-hover": 200,
+	"color-press": 200,
+	"color-focus": 200,
+	"placeholder-color": 500,
+	"outline-color": 600,
+	"shadow-color": "shadow-6"
+};
+const ladder = [
+	"white",
+	...shades,
+	"black"
+];
+function raise(scale, steps) {
+	return Object.fromEntries(Object.entries(scale).map(([key, value]) => {
+		if (!key.startsWith("background") && !key.startsWith("border-color")) {
+			return [key, value];
+		}
+		const index = ladder.indexOf(value);
+		if (index === -1) return [key, value];
+		return [key, ladder[Math.max(0, Math.min(ladder.length - 1, index + steps))]];
+	}));
+}
+const scales = {
+	normal: {
+		light: {
+			1: light,
+			2: raise(light, 1),
+			3: raise(light, 2),
+			4: raise(light, 3)
+		},
+		dark: {
+			1: dark,
+			2: raise(dark, -1),
+			3: raise(dark, -2),
+			4: raise(dark, -3)
+		}
+	},
+	bold: {
+		light: {
+			1: boldLight,
+			2: raise(boldLight, -1),
+			3: raise(boldLight, -2),
+			4: raise(boldLight, -3)
+		},
+		dark: {
+			1: boldDark,
+			2: raise(boldDark, 1),
+			3: raise(boldDark, 2),
+			4: raise(boldDark, 3)
+		}
+	},
+	tint: {
+		light: {
+			1: tintLight,
+			2: raise(tintLight, -1),
+			3: raise(tintLight, 1),
+			4: raise(tintLight, 2)
+		},
+		dark: {
+			1: tintDark,
+			2: raise(tintDark, 1),
+			3: raise(tintDark, -1),
+			4: raise(tintDark, -2)
+		}
+	}
+};
+function ramp(palette, scheme) {
+	const ordered = scheme === "light" ? shades : [...shades].reverse();
+	return Object.fromEntries(ordered.map((shade, index) => [`color${index + 1}`, `${palette}-${shade}`]));
+}
+function fromShades(palette, scale) {
+	return Object.fromEntries(Object.entries(scale).map(([key, value]) => [key, typeof value === "number" ? `${palette}-${value}` : value]));
+}
+function getTheme({ recipe }) {
+	const scale = scales[recipe.treatment ?? "normal"][recipe.scheme][recipe.level ?? 1];
+	return {
+		...ramp(recipe.palette, recipe.scheme),
+		...fromShades(recipe.palette, scale)
+	};
+}
+function createLevels(max, depth) {
+	if (depth === 0) return {};
+	const raiseLevel = (by) => ({ parent }) => {
+		const current = parent.level ?? 1;
+		const level = Math.min(current + by, max);
+		if (level === current) return null;
+		return {
+			level,
+			children: createLevels(max, depth - 1)
+		};
+	};
+	return {
+		level2: raiseLevel(1),
+		level3: raiseLevel(2),
+		level4: raiseLevel(3)
+	};
+}
+function levels(max = 4) {
+	return createLevels(max, 4);
+}
+const tree = {
+	light: {
+		scheme: "light",
+		palette: "gray"
+	},
+	dark: {
+		scheme: "dark",
+		palette: "gray"
+	},
+	children: {
+		...levels(),
+		accent: {
+			palette: "brand",
+			treatment: "tint",
+			children: levels()
+		},
+		brand: {
+			palette: "brand",
+			treatment: "bold",
+			children: levels()
+		},
+		inverse: ({ parent }) => ({
+			scheme: parent.scheme === "light" ? "dark" : "light",
+			children: levels()
+		}),
+		red: {
+			palette: "red",
+			treatment: "tint",
+			children: levels(2)
+		},
+		yellow: {
+			palette: "yellow",
+			treatment: "tint",
+			children: levels(2)
+		},
+		green: {
+			palette: "green",
+			treatment: "tint",
+			children: levels(2)
+		}
+	}
+};
+const themes = (0, import_create_theme.createThemes)(import_tokens.tokens, tree, { getTheme });

package/dist/cjs/builder.native.cjs

@@ -0,0 +1,331 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var builder_exports = {};
+__export(builder_exports, {
+	colorTokens: () => import_tokens2.colorTokens,
+	createThemes: () => import_create_theme2.createThemes,
+	fromShades: () => fromShades,
+	getTheme: () => getTheme,
+	levels: () => levels,
+	raise: () => raise,
+	ramp: () => ramp,
+	scales: () => scales,
+	semanticThemeKeys: () => semanticThemeKeys,
+	shades: () => shades,
+	tailwindColors: () => import_tokens2.tailwindColors,
+	themes: () => themes,
+	tokens: () => import_tokens2.tokens,
+	tree: () => tree
+});
+module.exports = __toCommonJS(builder_exports);
+var import_create_theme = require("@tamagui/create-theme");
+var import_tokens = require("./tokens.native.js");
+var import_create_theme2 = require("@tamagui/create-theme");
+var import_tokens2 = require("./tokens.native.js");
+var shades = [
+	50,
+	100,
+	200,
+	300,
+	400,
+	500,
+	600,
+	700,
+	800,
+	900,
+	950
+];
+var semanticThemeKeys = [
+	"background",
+	"background-hover",
+	"background-press",
+	"background-focus",
+	"border-color",
+	"border-color-hover",
+	"border-color-press",
+	"border-color-focus",
+	"color",
+	"color-hover",
+	"color-press",
+	"color-focus",
+	"placeholder-color",
+	"outline-color",
+	"shadow-color",
+	"accent-background",
+	"accent-color"
+];
+var light = {
+	background: "white",
+	"background-hover": 50,
+	"background-press": "white",
+	"background-focus": 50,
+	"border-color": 200,
+	"border-color-hover": 300,
+	"border-color-press": 200,
+	"border-color-focus": 300,
+	color: 950,
+	"color-hover": 950,
+	"color-press": 950,
+	"color-focus": 950,
+	"placeholder-color": 500,
+	"outline-color": 400,
+	"shadow-color": "shadow-3",
+	"accent-background": "brand-600",
+	"accent-color": "brand-50"
+};
+var dark = {
+	...light,
+	background: 950,
+	"background-hover": 900,
+	"background-press": 950,
+	"background-focus": 900,
+	"border-color": 800,
+	"border-color-hover": 700,
+	"border-color-press": 800,
+	"border-color-focus": 700,
+	color: 50,
+	"color-hover": 50,
+	"color-press": 50,
+	"color-focus": 50,
+	"shadow-color": "shadow-6"
+};
+var boldLight = {
+	background: 600,
+	"background-hover": 500,
+	"background-press": 600,
+	"background-focus": 500,
+	"border-color": 700,
+	"border-color-hover": 600,
+	"border-color-press": 700,
+	"border-color-focus": 600,
+	color: 50,
+	"color-hover": 50,
+	"color-press": 50,
+	"color-focus": 50,
+	"placeholder-color": 200,
+	"outline-color": 400,
+	"shadow-color": "shadow-3",
+	"accent-background": "brand-50",
+	"accent-color": "brand-700"
+};
+var boldDark = {
+	...boldLight,
+	background: 500,
+	"background-hover": 400,
+	"background-press": 500,
+	"background-focus": 400,
+	"border-color": 600,
+	"border-color-hover": 500,
+	"border-color-press": 600,
+	"border-color-focus": 500,
+	"shadow-color": "shadow-6"
+};
+var tintLight = {
+	background: 100,
+	"background-hover": 50,
+	"background-press": 100,
+	"background-focus": 50,
+	"border-color": 300,
+	"border-color-hover": 400,
+	"border-color-press": 300,
+	"border-color-focus": 400,
+	color: 700,
+	"color-hover": 700,
+	"color-press": 700,
+	"color-focus": 700,
+	"placeholder-color": 400,
+	"outline-color": 400,
+	"shadow-color": "shadow-3",
+	"accent-background": "brand-600",
+	"accent-color": "brand-50"
+};
+var tintDark = {
+	...tintLight,
+	background: 900,
+	"background-hover": 800,
+	"background-press": 900,
+	"background-focus": 800,
+	"border-color": 700,
+	"border-color-hover": 600,
+	"border-color-press": 700,
+	"border-color-focus": 600,
+	color: 200,
+	"color-hover": 200,
+	"color-press": 200,
+	"color-focus": 200,
+	"placeholder-color": 500,
+	"outline-color": 600,
+	"shadow-color": "shadow-6"
+};
+var ladder = [
+	"white",
+	...shades,
+	"black"
+];
+function raise(scale, steps) {
+	return Object.fromEntries(Object.entries(scale).map(function(param) {
+		var [key, value] = param;
+		if (!key.startsWith("background") && !key.startsWith("border-color")) {
+			return [key, value];
+		}
+		var index = ladder.indexOf(value);
+		if (index === -1) return [key, value];
+		return [key, ladder[Math.max(0, Math.min(ladder.length - 1, index + steps))]];
+	}));
+}
+var scales = {
+	normal: {
+		light: {
+			1: light,
+			2: raise(light, 1),
+			3: raise(light, 2),
+			4: raise(light, 3)
+		},
+		dark: {
+			1: dark,
+			2: raise(dark, -1),
+			3: raise(dark, -2),
+			4: raise(dark, -3)
+		}
+	},
+	bold: {
+		light: {
+			1: boldLight,
+			2: raise(boldLight, -1),
+			3: raise(boldLight, -2),
+			4: raise(boldLight, -3)
+		},
+		dark: {
+			1: boldDark,
+			2: raise(boldDark, 1),
+			3: raise(boldDark, 2),
+			4: raise(boldDark, 3)
+		}
+	},
+	tint: {
+		light: {
+			1: tintLight,
+			2: raise(tintLight, -1),
+			3: raise(tintLight, 1),
+			4: raise(tintLight, 2)
+		},
+		dark: {
+			1: tintDark,
+			2: raise(tintDark, 1),
+			3: raise(tintDark, -1),
+			4: raise(tintDark, -2)
+		}
+	}
+};
+function ramp(palette, scheme) {
+	var ordered = scheme === "light" ? shades : [...shades].reverse();
+	return Object.fromEntries(ordered.map(function(shade, index) {
+		return [`color${index + 1}`, `${palette}-${shade}`];
+	}));
+}
+function fromShades(palette, scale) {
+	return Object.fromEntries(Object.entries(scale).map(function(param) {
+		var [key, value] = param;
+		return [key, typeof value === "number" ? `${palette}-${value}` : value];
+	}));
+}
+function getTheme(param) {
+	var { recipe } = param;
+	var _recipe_treatment, _recipe_level;
+	var scale = 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];
+	return {
+		...ramp(recipe.palette, recipe.scheme),
+		...fromShades(recipe.palette, scale)
+	};
+}
+function createLevels(max, depth) {
+	if (depth === 0) return {};
+	var raiseLevel = function(by) {
+		return function(param) {
+			var { parent } = param;
+			var _parent_level;
+			var current = (_parent_level = parent.level) !== null && _parent_level !== void 0 ? _parent_level : 1;
+			var level = Math.min(current + by, max);
+			if (level === current) return null;
+			return {
+				level,
+				children: createLevels(max, depth - 1)
+			};
+		};
+	};
+	return {
+		level2: raiseLevel(1),
+		level3: raiseLevel(2),
+		level4: raiseLevel(3)
+	};
+}
+function levels() {
+	var max = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : 4;
+	return createLevels(max, 4);
+}
+var tree = {
+	light: {
+		scheme: "light",
+		palette: "gray"
+	},
+	dark: {
+		scheme: "dark",
+		palette: "gray"
+	},
+	children: {
+		...levels(),
+		accent: {
+			palette: "brand",
+			treatment: "tint",
+			children: levels()
+		},
+		brand: {
+			palette: "brand",
+			treatment: "bold",
+			children: levels()
+		},
+		inverse: function(param) {
+			var { parent } = param;
+			return {
+				scheme: parent.scheme === "light" ? "dark" : "light",
+				children: levels()
+			};
+		},
+		red: {
+			palette: "red",
+			treatment: "tint",
+			children: levels(2)
+		},
+		yellow: {
+			palette: "yellow",
+			treatment: "tint",
+			children: levels(2)
+		},
+		green: {
+			palette: "green",
+			treatment: "tint",
+			children: levels(2)
+		}
+	}
+};
+var themes = (0, import_create_theme.createThemes)(import_tokens.tokens, tree, { getTheme });