@tamagui/themes 3.0.0-beta.1161.1 → 3.0.0-beta.1173.1

package/dist/cjs/builder.cjs

@@ -31,6 +31,7 @@ __export(builder_exports, {
 	scales: () => scales,
 	semanticThemeKeys: () => semanticThemeKeys,
 	shades: () => shades,
+	shadows: () => shadows,
 	tailwindColors: () => import_tokens2.tailwindColors,
 	themes: () => themes,
 	tokens: () => import_tokens2.tokens,
@@ -54,6 +55,26 @@ const shades = [
 	900,
 	950
 ];
+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)"
+	},
+	dark: {
+		"shadow-1": "rgba(0, 0, 0, 0.15)",
+		"shadow-2": "rgba(0, 0, 0, 0.23)",
+		"shadow-3": "rgba(0, 0, 0, 0.33)",
+		"shadow-4": "rgba(0, 0, 0, 0.45)",
+		"shadow-5": "rgba(0, 0, 0, 0.65)",
+		"shadow-6": "rgba(0, 0, 0, 0.8)",
+		"shadow-7": "rgba(0, 0, 0, 0.9)"
+	}
+};
 const semanticThemeKeys = [
 	"background",
 	"background-hover",
@@ -74,10 +95,10 @@ const semanticThemeKeys = [
 	"accent-color"
 ];
 const light = {
-	background: "white",
-	"background-hover": 50,
-	"background-press": "white",
-	"background-focus": 50,
+	background: 50,
+	"background-hover": "white",
+	"background-press": 100,
+	"background-focus": "white",
 	"border-color": 200,
 	"border-color-hover": 300,
 	"border-color-press": 200,
@@ -96,7 +117,7 @@ const dark = {
 	...light,
 	background: 950,
 	"background-hover": 900,
-	"background-press": 950,
+	"background-press": "black",
 	"background-focus": 900,
 	"border-color": 800,
 	"border-color-hover": 700,
@@ -106,12 +127,12 @@ const dark = {
 	"color-hover": 50,
 	"color-press": 50,
 	"color-focus": 50,
-	"shadow-color": "shadow-6"
+	"shadow-color": "shadow-3"
 };
 const boldLight = {
 	background: 600,
 	"background-hover": 500,
-	"background-press": 600,
+	"background-press": 700,
 	"background-focus": 500,
 	"border-color": 700,
 	"border-color-hover": 600,
@@ -131,18 +152,18 @@ const boldDark = {
 	...boldLight,
 	background: 500,
 	"background-hover": 400,
-	"background-press": 500,
+	"background-press": 600,
 	"background-focus": 400,
 	"border-color": 600,
 	"border-color-hover": 500,
 	"border-color-press": 600,
 	"border-color-focus": 500,
-	"shadow-color": "shadow-6"
+	"shadow-color": "shadow-3"
 };
 const tintLight = {
 	background: 100,
 	"background-hover": 50,
-	"background-press": 100,
+	"background-press": 200,
 	"background-focus": 50,
 	"border-color": 300,
 	"border-color-hover": 400,
@@ -162,7 +183,7 @@ const tintDark = {
 	...tintLight,
 	background: 900,
 	"background-hover": 800,
-	"background-press": 900,
+	"background-press": 950,
 	"background-focus": 800,
 	"border-color": 700,
 	"border-color-hover": 600,
@@ -174,7 +195,7 @@ const tintDark = {
 	"color-focus": 200,
 	"placeholder-color": 500,
 	"outline-color": 600,
-	"shadow-color": "shadow-6"
+	"shadow-color": "shadow-3"
 };
 const ladder = [
 	"white",
@@ -191,47 +212,84 @@ function raise(scale, steps) {
 		return [key, ladder[Math.max(0, Math.min(ladder.length - 1, index + steps))]];
 	}));
 }
+const levelSteps = [
+	0,
+	1,
+	2,
+	3
+];
+const tintSteps = [
+	0,
+	1,
+	2,
+	2
+];
+const tintType = {
+	light: [
+		700,
+		800,
+		900,
+		900
+	],
+	dark: [
+		200,
+		100,
+		50,
+		50
+	]
+};
+function tintLevel(scale, scheme, level) {
+	const steps = scheme === "light" ? tintSteps[level - 1] : -tintSteps[level - 1];
+	const color = tintType[scheme][level - 1];
+	return {
+		...raise(scale, steps),
+		color,
+		"color-hover": color,
+		"color-press": color,
+		"color-focus": color
+	};
+}
 const scales = {
 	normal: {
 		light: {
 			1: light,
-			2: raise(light, 1),
-			3: raise(light, 2),
-			4: raise(light, 3)
+			2: raise(light, levelSteps[1]),
+			3: raise(light, levelSteps[2]),
+			4: raise(light, levelSteps[3])
 		},
 		dark: {
 			1: dark,
-			2: raise(dark, -1),
-			3: raise(dark, -2),
-			4: raise(dark, -3)
+			2: raise(dark, -levelSteps[1]),
+			3: raise(dark, -levelSteps[2]),
+			4: raise(dark, -levelSteps[3])
 		}
 	},
 	bold: {
 		light: {
 			1: boldLight,
-			2: raise(boldLight, -1),
-			3: raise(boldLight, -2),
-			4: raise(boldLight, -3)
+			2: boldLight,
+			3: boldLight,
+			4: boldLight
 		},
 		dark: {
 			1: boldDark,
-			2: raise(boldDark, 1),
-			3: raise(boldDark, 2),
-			4: raise(boldDark, 3)
+			2: boldDark,
+			3: boldDark,
+			4: boldDark
 		}
 	},
 	tint: {
 		light: {
 			1: tintLight,
-			2: raise(tintLight, -1),
-			3: raise(tintLight, 1),
-			4: raise(tintLight, 2)
+			2: tintLevel(tintLight, "light", 2),
+			3: tintLevel(tintLight, "light", 3),
+			4: tintLevel(tintLight, "light", 4)
 		},
 		dark: {
 			1: tintDark,
-			2: raise(tintDark, 1),
-			3: raise(tintDark, -1),
-			4: raise(tintDark, -2)
+			2: tintLevel(tintDark, "dark", 2),
+			3: tintLevel(tintDark, "dark", 3),
+			4: tintLevel(tintDark, "dark", 4)
 		}
 	}
 };
@@ -245,16 +303,19 @@ function rampReversed(scheme, scale) {
 }
 function ramp(palette, scheme, scale) {
 	const ordered = rampReversed(scheme, scale) ? [...shades].reverse() : shades;
-	return Object.fromEntries(ordered.map((shade, index) => [`color${index + 1}`, `${palette}-${shade}`]));
+	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];
+	const schemeShadows = shadows[recipe.scheme];
 	return {
 		...ramp(recipe.palette, recipe.scheme, scale),
-		...fromShades(recipe.palette, scale)
+		...fromShades(recipe.palette, scale),
+		...schemeShadows,
+		"shadow-color": schemeShadows[scale["shadow-color"]]
 	};
 }
 function createLevels(max, depth) {
@@ -280,23 +341,22 @@ function levels(max = 4) {
 const tree = {
 	light: {
 		scheme: "light",
-		palette: "gray"
+		palette: "mauve"
 	},
 	dark: {
 		scheme: "dark",
-		palette: "gray"
+		palette: "mauve"
 	},
 	children: {
 		...levels(),
 		accent: {
 			palette: "brand",
 			treatment: "tint",
-			children: levels()
+			children: levels(3)
 		},
 		brand: {
 			palette: "brand",
-			treatment: "bold",
-			children: levels()
+			treatment: "bold"
 		},
 		inverse: ({ parent }) => ({
 			scheme: parent.scheme === "light" ? "dark" : "light",
@@ -305,17 +365,17 @@ const tree = {
 		red: {
 			palette: "red",
 			treatment: "tint",
-			children: levels(2)
+			children: levels(3)
 		},
 		yellow: {
 			palette: "yellow",
 			treatment: "tint",
-			children: levels(2)
+			children: levels(3)
 		},
 		green: {
 			palette: "green",
 			treatment: "tint",
-			children: levels(2)
+			children: levels(3)
 		}
 	}
 };

package/dist/cjs/builder.native.cjs

@@ -33,6 +33,7 @@ __export(builder_exports, {
 	scales: () => scales,
 	semanticThemeKeys: () => semanticThemeKeys,
 	shades: () => shades,
+	shadows: () => shadows,
 	tailwindColors: () => import_tokens2.tailwindColors,
 	themes: () => themes,
 	tokens: () => import_tokens2.tokens,
@@ -56,6 +57,26 @@ var shades = [
 	900,
 	950
 ];
+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)"
+	},
+	dark: {
+		"shadow-1": "rgba(0, 0, 0, 0.15)",
+		"shadow-2": "rgba(0, 0, 0, 0.23)",
+		"shadow-3": "rgba(0, 0, 0, 0.33)",
+		"shadow-4": "rgba(0, 0, 0, 0.45)",
+		"shadow-5": "rgba(0, 0, 0, 0.65)",
+		"shadow-6": "rgba(0, 0, 0, 0.8)",
+		"shadow-7": "rgba(0, 0, 0, 0.9)"
+	}
+};
 var semanticThemeKeys = [
 	"background",
 	"background-hover",
@@ -76,10 +97,10 @@ var semanticThemeKeys = [
 	"accent-color"
 ];
 var light = {
-	background: "white",
-	"background-hover": 50,
-	"background-press": "white",
-	"background-focus": 50,
+	background: 50,
+	"background-hover": "white",
+	"background-press": 100,
+	"background-focus": "white",
 	"border-color": 200,
 	"border-color-hover": 300,
 	"border-color-press": 200,
@@ -98,7 +119,7 @@ var dark = {
 	...light,
 	background: 950,
 	"background-hover": 900,
-	"background-press": 950,
+	"background-press": "black",
 	"background-focus": 900,
 	"border-color": 800,
 	"border-color-hover": 700,
@@ -108,12 +129,12 @@ var dark = {
 	"color-hover": 50,
 	"color-press": 50,
 	"color-focus": 50,
-	"shadow-color": "shadow-6"
+	"shadow-color": "shadow-3"
 };
 var boldLight = {
 	background: 600,
 	"background-hover": 500,
-	"background-press": 600,
+	"background-press": 700,
 	"background-focus": 500,
 	"border-color": 700,
 	"border-color-hover": 600,
@@ -133,18 +154,18 @@ var boldDark = {
 	...boldLight,
 	background: 500,
 	"background-hover": 400,
-	"background-press": 500,
+	"background-press": 600,
 	"background-focus": 400,
 	"border-color": 600,
 	"border-color-hover": 500,
 	"border-color-press": 600,
 	"border-color-focus": 500,
-	"shadow-color": "shadow-6"
+	"shadow-color": "shadow-3"
 };
 var tintLight = {
 	background: 100,
 	"background-hover": 50,
-	"background-press": 100,
+	"background-press": 200,
 	"background-focus": 50,
 	"border-color": 300,
 	"border-color-hover": 400,
@@ -164,7 +185,7 @@ var tintDark = {
 	...tintLight,
 	background: 900,
 	"background-hover": 800,
-	"background-press": 900,
+	"background-press": 950,
 	"background-focus": 800,
 	"border-color": 700,
 	"border-color-hover": 600,
@@ -176,7 +197,7 @@ var tintDark = {
 	"color-focus": 200,
 	"placeholder-color": 500,
 	"outline-color": 600,
-	"shadow-color": "shadow-6"
+	"shadow-color": "shadow-3"
 };
 var ladder = [
 	"white",
@@ -194,47 +215,84 @@ function raise(scale, steps) {
 		return [key, ladder[Math.max(0, Math.min(ladder.length - 1, index + steps))]];
 	}));
 }
+var levelSteps = [
+	0,
+	1,
+	2,
+	3
+];
+var tintSteps = [
+	0,
+	1,
+	2,
+	2
+];
+var tintType = {
+	light: [
+		700,
+		800,
+		900,
+		900
+	],
+	dark: [
+		200,
+		100,
+		50,
+		50
+	]
+};
+function tintLevel(scale, scheme, level) {
+	var steps = scheme === "light" ? tintSteps[level - 1] : -tintSteps[level - 1];
+	var color = tintType[scheme][level - 1];
+	return {
+		...raise(scale, steps),
+		color,
+		"color-hover": color,
+		"color-press": color,
+		"color-focus": color
+	};
+}
 var scales = {
 	normal: {
 		light: {
 			1: light,
-			2: raise(light, 1),
-			3: raise(light, 2),
-			4: raise(light, 3)
+			2: raise(light, levelSteps[1]),
+			3: raise(light, levelSteps[2]),
+			4: raise(light, levelSteps[3])
 		},
 		dark: {
 			1: dark,
-			2: raise(dark, -1),
-			3: raise(dark, -2),
-			4: raise(dark, -3)
+			2: raise(dark, -levelSteps[1]),
+			3: raise(dark, -levelSteps[2]),
+			4: raise(dark, -levelSteps[3])
 		}
 	},
 	bold: {
 		light: {
 			1: boldLight,
-			2: raise(boldLight, -1),
-			3: raise(boldLight, -2),
-			4: raise(boldLight, -3)
+			2: boldLight,
+			3: boldLight,
+			4: boldLight
 		},
 		dark: {
 			1: boldDark,
-			2: raise(boldDark, 1),
-			3: raise(boldDark, 2),
-			4: raise(boldDark, 3)
+			2: boldDark,
+			3: boldDark,
+			4: boldDark
 		}
 	},
 	tint: {
 		light: {
 			1: tintLight,
-			2: raise(tintLight, -1),
-			3: raise(tintLight, 1),
-			4: raise(tintLight, 2)
+			2: tintLevel(tintLight, "light", 2),
+			3: tintLevel(tintLight, "light", 3),
+			4: tintLevel(tintLight, "light", 4)
 		},
 		dark: {
 			1: tintDark,
-			2: raise(tintDark, 1),
-			3: raise(tintDark, -1),
-			4: raise(tintDark, -2)
+			2: tintLevel(tintDark, "dark", 2),
+			3: tintLevel(tintDark, "dark", 3),
+			4: tintLevel(tintDark, "dark", 4)
 		}
 	}
 };
@@ -249,7 +307,7 @@ function rampReversed(scheme, scale) {
 function ramp(palette, scheme, scale) {
 	var ordered = rampReversed(scheme, scale) ? [...shades].reverse() : shades;
 	return Object.fromEntries(ordered.map(function(shade, index) {
-		return [`color${index + 1}`, `${palette}-${shade}`];
+		return [`color-${index + 1}`, `${palette}-${shade}`];
 	}));
 }
 function fromShades(palette, scale) {
@@ -262,9 +320,12 @@ 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];
+	var schemeShadows = shadows[recipe.scheme];
 	return {
 		...ramp(recipe.palette, recipe.scheme, scale),
-		...fromShades(recipe.palette, scale)
+		...fromShades(recipe.palette, scale),
+		...schemeShadows,
+		"shadow-color": schemeShadows[scale["shadow-color"]]
 	};
 }
 function createLevels(max, depth) {
@@ -295,23 +356,22 @@ function levels() {
 var tree = {
 	light: {
 		scheme: "light",
-		palette: "gray"
+		palette: "mauve"
 	},
 	dark: {
 		scheme: "dark",
-		palette: "gray"
+		palette: "mauve"
 	},
 	children: {
 		...levels(),
 		accent: {
 			palette: "brand",
 			treatment: "tint",
-			children: levels()
+			children: levels(3)
 		},
 		brand: {
 			palette: "brand",
-			treatment: "bold",
-			children: levels()
+			treatment: "bold"
 		},
 		inverse: function(param) {
 			var { parent } = param;
@@ -323,17 +383,17 @@ var tree = {
 		red: {
 			palette: "red",
 			treatment: "tint",
-			children: levels(2)
+			children: levels(3)
 		},
 		yellow: {
 			palette: "yellow",
 			treatment: "tint",
-			children: levels(2)
+			children: levels(3)
 		},
 		green: {
 			palette: "green",
 			treatment: "tint",
-			children: levels(2)
+			children: levels(3)
 		}
 	}
 };