@tamagui/config-v5 0.0.0-bootstrap.0 → 3.0.0-beta.643.1

package/dist/cjs/v5/v5-themes.cjs

@@ -0,0 +1,390 @@
+
+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 v5_themes_exports = {};
+__export(v5_themes_exports, {
+	V5_BG_OFFSET: () => V5_BG_OFFSET,
+	adjustPalette: () => adjustPalette,
+	adjustPalettes: () => adjustPalettes,
+	createV5Theme: () => createV5Theme,
+	defaultChildrenThemes: () => defaultChildrenThemes,
+	defaultDarkPalette: () => darkPalette,
+	defaultLightPalette: () => lightPalette,
+	hslToString: () => hslToString,
+	interpolateColor: () => import_opacify2.interpolateColor,
+	opacify: () => import_opacify2.opacify,
+	parseColor: () => parseColor,
+	parseHSL: () => parseHSL,
+	parseHex: () => parseHex,
+	v5ComponentThemes: () => v5ComponentThemes,
+	v5ComponentThemesWithInverses: () => v5ComponentThemesWithInverses,
+	v5GrandchildrenThemes: () => v5GrandchildrenThemes
+});
+module.exports = __toCommonJS(v5_themes_exports);
+var import_colors = require("@tamagui/colors");
+var import_theme_builder = require("../theme-builder/index.cjs");
+var import_opacify = require("./opacify.cjs");
+var import_v5_templates = require("./v5-templates.cjs");
+var import_opacify2 = require("./opacify.cjs");
+const V5_BG_OFFSET = 6 + 1;
+const v5ComponentThemes = {
+	Button: { template: "surface2" },
+	Input: { template: "surface1" },
+	Progress: { template: "surface1" },
+	ProgressIndicator: { template: "surface3" },
+	Slider: { template: "surface1" },
+	SliderActive: { template: "surface3" },
+	SliderThumb: { template: "surface2" },
+	Switch: { template: "surface2" },
+	TextArea: { template: "surface1" },
+	Tooltip: { template: "accent" },
+	SwitchThumb: { template: "accent" }
+};
+const v5ComponentThemesWithInverses = {
+	...v5ComponentThemes,
+	ProgressIndicator: { template: "accent" },
+	SliderThumb: { template: "accent" },
+	Tooltip: { template: "accent" }
+};
+const v5GrandchildrenThemes = {
+	accent: { template: "accent" },
+	surface1: { template: "surface1" },
+	surface2: { template: "surface2" }
+};
+function parseHSL(str) {
+	const m = str.match(/hsl\((\d+(?:\.\d+)?),\s*(\d+(?:\.\d+)?)%,\s*(\d+(?:\.\d+)?)%\)/);
+	return m ? {
+		h: +m[1],
+		s: +m[2],
+		l: +m[3]
+	} : null;
+}
+function parseHex(str) {
+	if (!str.startsWith("#")) return null;
+	let hex = str.slice(1);
+	if (hex.length === 3) {
+		hex = hex.split("").map((c) => c + c).join("");
+	}
+	if (hex.length !== 6) return null;
+	const r = Number.parseInt(hex.slice(0, 2), 16) / 255;
+	const g = Number.parseInt(hex.slice(2, 4), 16) / 255;
+	const b = Number.parseInt(hex.slice(4, 6), 16) / 255;
+	const max = Math.max(r, g, b);
+	const min = Math.min(r, g, b);
+	const l = (max + min) / 2;
+	if (max === min) {
+		return {
+			h: 0,
+			s: 0,
+			l: l * 100
+		};
+	}
+	const d = max - min;
+	const s = l > .5 ? d / (2 - max - min) : d / (max + min);
+	let h = 0;
+	if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+	else if (max === g) h = ((b - r) / d + 2) / 6;
+	else h = ((r - g) / d + 4) / 6;
+	return {
+		h: Math.round(h * 360),
+		s: s * 100,
+		l: l * 100
+	};
+}
+function parseColor(str) {
+	return parseHSL(str) ?? parseHex(str);
+}
+function hslToString(hsl) {
+	return `hsl(${hsl.h}, ${Math.round(Math.min(100, Math.max(0, hsl.s)))}%, ${Math.round(Math.min(100, Math.max(0, hsl.l)))}%)`;
+}
+function adjustPalette(palette, fn) {
+	const out = {};
+	const keys = Object.keys(palette);
+	for (let i = 0; i < keys.length; i++) {
+		const key = keys[i];
+		const parsed = parseColor(palette[key]);
+		if (!parsed) {
+			out[key] = palette[key];
+			continue;
+		}
+		out[key] = hslToString(fn(parsed, i + 1));
+	}
+	return out;
+}
+const identity = (hsl) => hsl;
+function adjustPalettes(themes, adjustments) {
+	const result = {};
+	for (const [name, theme] of Object.entries(themes)) {
+		const adj = adjustments[name] ?? adjustments.default;
+		if (!adj) {
+			;
+			result[name] = theme;
+			continue;
+		}
+		;
+		result[name] = {
+			light: adjustPalette(theme.light, adj.light ?? identity),
+			dark: adjustPalette(theme.dark, adj.dark ?? identity)
+		};
+	}
+	return result;
+}
+function paletteToNamedColors(name, palette) {
+	return Object.fromEntries(palette.map((color, i) => [`${name}${i + 1}`, color]));
+}
+const darkPalette = [
+	"#090909",
+	"#151515",
+	"#191919",
+	"#232323",
+	"#333",
+	"#444",
+	"#666",
+	"#777",
+	"#858585",
+	"#aaa",
+	"#ccc",
+	"#ffffff"
+];
+const lightPalette = [
+	"#fff",
+	"#f8f8f8",
+	"hsl(0, 0%, 93%)",
+	"hsl(0, 0%, 85%)",
+	"hsl(0, 0%, 80%)",
+	"hsl(0, 0%, 70%)",
+	"hsl(0, 0%, 59%)",
+	"hsl(0, 0%, 45%)",
+	"hsl(0, 0%, 30%)",
+	"hsl(0, 0%, 20%)",
+	"hsl(0, 0%, 14%)",
+	"hsl(0, 0%, 2%)"
+];
+const neutralPalette = [
+	"hsl(0, 0%, 68%)",
+	"hsl(0, 0%, 65%)",
+	"hsl(0, 0%, 62%)",
+	"hsl(0, 0%, 59%)",
+	"hsl(0, 0%, 56%)",
+	"hsl(0, 0%, 53%)",
+	"hsl(0, 0%, 50%)",
+	"hsl(0, 0%, 47%)",
+	"hsl(0, 0%, 44%)",
+	"hsl(0, 0%, 41%)",
+	"hsl(0, 0%, 38%)",
+	"hsl(0, 0%, 32%)"
+];
+const neutral = paletteToNamedColors("neutral", neutralPalette);
+const whiteBlack = {
+	white: "rgba(255,255,255,1)",
+	white0: "rgba(255,255,255,0)",
+	white02: "rgba(255,255,255,0.2)",
+	white04: "rgba(255,255,255,0.4)",
+	white06: "rgba(255,255,255,0.6)",
+	white08: "rgba(255,255,255,0.8)",
+	black: "rgba(0,0,0,1)",
+	black0: "rgba(0,0,0,0)",
+	black02: "rgba(0,0,0,0.2)",
+	black04: "rgba(0,0,0,0.4)",
+	black06: "rgba(0,0,0,0.6)",
+	black08: "rgba(0,0,0,0.8)"
+};
+const darkShadows = {
+	shadow1: "rgba(0,0,0,0.15)",
+	shadow2: "rgba(0,0,0,0.23)",
+	shadow3: "rgba(0,0,0,0.33)",
+	shadow4: "rgba(0,0,0,0.45)",
+	shadow5: "rgba(0,0,0,0.65)",
+	shadow6: "rgba(0,0,0,0.8)",
+	shadow7: "rgba(0,0,0,0.9)",
+	shadow8: "rgba(0,0,0,1)"
+};
+const lightShadows = {
+	shadow1: "rgba(0,0,0,0.04)",
+	shadow2: "rgba(0,0,0,0.08)",
+	shadow3: "rgba(0,0,0,0.12)",
+	shadow4: "rgba(0,0,0,0.22)",
+	shadow5: "rgba(0,0,0,0.33)",
+	shadow6: "rgba(0,0,0,0.44)",
+	shadow7: "rgba(0,0,0,0.6)",
+	shadow8: "rgba(0,0,0,0.75)"
+};
+const darkHighlights = {
+	highlight1: "rgba(255,255,255,0.1)",
+	highlight2: "rgba(255,255,255,0.2)",
+	highlight3: "rgba(255,255,255,0.3)",
+	highlight4: "rgba(255,255,255,0.45)",
+	highlight5: "rgba(255,255,255,0.65)",
+	highlight6: "rgba(255,255,255,0.85)",
+	highlight7: "rgba(255,255,255,0.95)",
+	highlight8: "rgba(255,255,255,1)"
+};
+const lightHighlights = {
+	highlight1: "rgba(255,255,255,0.05)",
+	highlight2: "rgba(255,255,255,0.1)",
+	highlight3: "rgba(255,255,255,0.15)",
+	highlight4: "rgba(255,255,255,0.3)",
+	highlight5: "rgba(255,255,255,0.4)",
+	highlight6: "rgba(255,255,255,0.55)",
+	highlight7: "rgba(255,255,255,0.7)",
+	highlight8: "rgba(255,255,255,0.85)"
+};
+const defaultChildrenThemes = {
+	gray: {
+		light: import_colors.gray,
+		dark: import_colors.grayDark
+	},
+	blue: {
+		light: import_colors.blue,
+		dark: import_colors.blueDark
+	},
+	red: {
+		light: import_colors.red,
+		dark: import_colors.redDark
+	},
+	yellow: {
+		light: import_colors.yellow,
+		dark: import_colors.yellowDark
+	},
+	green: {
+		light: import_colors.green,
+		dark: import_colors.greenDark
+	},
+	orange: {
+		light: import_colors.orange,
+		dark: import_colors.orangeDark
+	},
+	pink: {
+		light: import_colors.pink,
+		dark: import_colors.pinkDark
+	},
+	purple: {
+		light: import_colors.purple,
+		dark: import_colors.purpleDark
+	},
+	teal: {
+		light: import_colors.teal,
+		dark: import_colors.tealDark
+	},
+	neutral: {
+		light: neutral,
+		dark: neutral
+	}
+};
+function getDefaultV5ThemeValues({ palette }) {
+	if (!palette || palette.length < 3) {
+		throw new Error(`invalid palette: ${JSON.stringify(palette)}`);
+	}
+	const bgColor = palette[V5_BG_OFFSET];
+	const fgColor = palette[palette.length - 2];
+	return {
+		color01: (0, import_opacify.opacify)(fgColor, .1),
+		color0075: (0, import_opacify.opacify)(fgColor, .075),
+		color005: (0, import_opacify.opacify)(fgColor, .05),
+		color0025: (0, import_opacify.opacify)(fgColor, .025),
+		color002: (0, import_opacify.opacify)(fgColor, .02),
+		color001: (0, import_opacify.opacify)(fgColor, .01),
+		background01: (0, import_opacify.opacify)(bgColor, .1),
+		background0075: (0, import_opacify.opacify)(bgColor, .075),
+		background005: (0, import_opacify.opacify)(bgColor, .05),
+		background0025: (0, import_opacify.opacify)(bgColor, .025),
+		background002: (0, import_opacify.opacify)(bgColor, .02),
+		background001: (0, import_opacify.opacify)(bgColor, .01),
+		background02: (0, import_opacify.opacify)(bgColor, .2),
+		background04: (0, import_opacify.opacify)(bgColor, .4),
+		background06: (0, import_opacify.opacify)(bgColor, .6),
+		background08: (0, import_opacify.opacify)(bgColor, .8),
+		outlineColor: (0, import_opacify.opacify)(palette[V5_BG_OFFSET + 4], .6)
+	};
+}
+function createV5Theme(options = {}) {
+	const { darkPalette: customDarkPalette = darkPalette, lightPalette: customLightPalette = lightPalette, accent: customAccent, childrenThemes = defaultChildrenThemes, grandChildrenThemes = v5GrandchildrenThemes, componentThemes: customComponentThemes = v5ComponentThemes, getTheme: userGetTheme } = options;
+	const blackColors = paletteToNamedColors("black", customDarkPalette);
+	const whiteColors = paletteToNamedColors("white", customLightPalette);
+	const extraBase = {
+		...blackColors,
+		...whiteColors,
+		...whiteBlack
+	};
+	const lightExtraBase = {
+		...extraBase,
+		...lightShadows,
+		...lightHighlights,
+		shadowColor: lightShadows.shadow3
+	};
+	const darkExtraBase = {
+		...extraBase,
+		...darkShadows,
+		...darkHighlights,
+		shadowColor: darkShadows.shadow3
+	};
+	const lightExtra = { ...lightExtraBase };
+	const darkExtra = { ...darkExtraBase };
+	for (const theme of Object.values(childrenThemes)) {
+		if (theme.light) Object.assign(lightExtra, theme.light);
+		if (theme.dark) Object.assign(darkExtra, theme.dark);
+	}
+	const childrenWithPalettes = {
+		black: { palette: {
+			dark: Object.values(blackColors),
+			light: Object.values(blackColors)
+		} },
+		white: { palette: {
+			dark: Object.values(whiteColors),
+			light: Object.values(whiteColors)
+		} },
+		...Object.fromEntries(Object.entries(childrenThemes).map(([name, theme]) => [name, { palette: {
+			light: Object.values(theme.light),
+			dark: Object.values(theme.dark)
+		} }]))
+	};
+	return (0, import_theme_builder.createThemes)({
+		componentThemes: customComponentThemes,
+		templates: import_v5_templates.v5Templates,
+		base: {
+			palette: {
+				dark: customDarkPalette,
+				light: customLightPalette
+			},
+			extra: {
+				light: lightExtra,
+				dark: darkExtra
+			}
+		},
+		accent: { palette: customAccent ? {
+			light: Object.values(customAccent.light),
+			dark: Object.values(customAccent.dark)
+		} : {
+			dark: customLightPalette,
+			light: customDarkPalette
+		} },
+		childrenThemes: childrenWithPalettes,
+		grandChildrenThemes,
+		getTheme: (props) => {
+			const builtInTheme = getDefaultV5ThemeValues(props);
+			const customTheme = userGetTheme?.(props);
+			return customTheme ? {
+				...builtInTheme,
+				...customTheme
+			} : builtInTheme;
+		}
+	});
+}