@tamagui/tamagui-dev-config 3.0.0-beta.922.1 → 3.0.0

package/dist/cjs/fonts.cjs

@@ -23,66 +23,45 @@ __export(fonts_exports, {
 	bodyFont: () => bodyFont,
 	cherryBombFont: () => cherryBombFont,
 	headingFont: () => headingFont,
-	monoFont: () => monoFont,
-	silkscreenFont: () => silkscreenFont
+	monoFont: () => monoFont
 });
 module.exports = __toCommonJS(fonts_exports);
 var import_font_cherry_bomb = require("@tamagui/font-cherry-bomb");
-var import_font_inter = require("@tamagui/font-inter");
-var import_font_silkscreen = require("@tamagui/font-silkscreen");
+var import_core = require("@tamagui/core");
 var import_createGenericFont = require("./createGenericFont.cjs");
+const contrastFamily = "\"Contrast\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+const monoFamily = "\"JetBrains Mono\", ui-monospace, \"SFMono-Regular\", \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace";
 const cherryBombFont = (0, import_font_cherry_bomb.createCherryBombFont)({
-	family: "\"Cherry Bomb\", \"Inter\", \"Arial Black\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
+	family: `"Cherry Bomb", "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif`,
 	weight: { 4: "800" },
 	size: { true: 22.4 }
 });
-const silkscreenFont = (0, import_font_silkscreen.createSilkscreenFont)();
-const headingFont = (0, import_font_inter.createInterFont)({
-	size: {
-		true: 14,
-		5: 13,
-		6: 15,
-		9: 30,
-		10: 44
-	},
-	transform: {
-		6: "uppercase",
-		7: "none"
-	},
-	weight: {
-		6: "400",
-		7: "700"
-	},
-	color: {
-		6: "color-focus",
-		7: "color"
-	},
-	letterSpacing: {
-		5: 2,
-		6: 1,
-		7: 0,
-		8: 0,
-		9: -.1,
-		10: -.25,
-		11: -.5,
-		12: -.75,
-		14: -1,
-		15: -2
-	},
-	face: {
-		700: { normal: "InterBold" },
-		800: { normal: "InterBold" },
-		900: { normal: "InterBold" }
+const sizes = () => {
+	const out = { true: 14 };
+	let px = 11;
+	for (let i = 1; i <= 16; i++) {
+		out[i] = Math.round(px);
+		px *= Math.min(1.19, 1.05 + i * .019);
 	}
-}, { sizeLineHeight: (size) => Math.round(size * 1.1 + (size < 30 ? 10 : 5)) });
-const bodyFont = (0, import_font_inter.createInterFont)({
-	size: { true: 14 },
-	weight: { 1: "400" }
-}, {
-	sizeSize: (size) => Math.round(size),
-	sizeLineHeight: (size) => Math.round(size * 1.2 + (size >= 20 ? 12 : 8))
+	return out;
+};
+const size = sizes();
+const lineHeights = (ratio, extra) => Object.fromEntries(Object.entries(size).map(([k, v]) => [k, Math.round(v * ratio + extra)]));
+const headingFont = (0, import_core.createFont)({
+	family: contrastFamily,
+	size,
+	lineHeight: lineHeights(1.25, 2),
+	weight: { 1: "600" },
+	letterSpacing: { 1: 0 }
+});
+const bodyFont = (0, import_core.createFont)({
+	family: contrastFamily,
+	size,
+	lineHeight: lineHeights(1.35, 3),
+	weight: { 1: "400" },
+	letterSpacing: { 1: 0 }
 });
-const monoFont = (0, import_createGenericFont.createGenericFont)(`"Berkeley Mono", "ui-monospace", "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace`, {
+const monoFont = (0, import_createGenericFont.createGenericFont)(monoFamily, {
 	weight: { 1: "400" },
 	size: {
 		1: 11,

package/dist/cjs/index.cjs

@@ -16,4 +16,3 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 module.exports = __toCommonJS(index_exports);
 __reExport(index_exports, require("./tamagui.dev.config.cjs"), module.exports);
-__reExport(index_exports, require("./media.cjs"), module.exports);

package/dist/cjs/tamagui.dev.config.cjs

@@ -26,34 +26,31 @@ __export(tamagui_dev_config_exports, {
 module.exports = __toCommonJS(tamagui_dev_config_exports);
 var import_animations_css = require("@tamagui/config/animations-css");
 var import_animations_motion = require("@tamagui/config/animations-motion");
-var import_v5_subtle = require("@tamagui/config/v5-subtle");
+var import_v6_base = require("@tamagui/config/v6-base");
 var import_core = require("@tamagui/core");
 var import_fonts = require("./fonts.cjs");
-var import_media = require("./media.cjs");
 var import_themeMetadata = require("./themeMetadata.cjs");
 var import_themes = require("./themes.cjs");
 (0, import_core.setupDev)({ visualizer: true });
-const fonts = {
-	heading: import_fonts.headingFont,
-	body: import_fonts.bodyFont,
-	mono: import_fonts.monoFont,
-	silkscreen: import_fonts.silkscreenFont,
-	cherryBomb: import_fonts.cherryBombFont
-};
 const animations = {
 	default: import_animations_motion.animationsMotion,
 	css: import_animations_css.animationsCSS
 };
 const configuredThemes = process.env.VITE_ENVIRONMENT === "client" ? import_themeMetadata.clientThemes : import_themes.themes;
+const v6 = (0, import_v6_base.createV6Config)({ themes: configuredThemes });
 const config = {
-	...import_v5_subtle.defaultConfig,
-	themes: configuredThemes,
-	fonts,
+	...v6,
+	fonts: {
+		heading: (0, import_v6_base.withTailwindTypeScale)(import_fonts.headingFont),
+		body: (0, import_v6_base.withTailwindTypeScale)(import_fonts.bodyFont),
+		mono: import_fonts.monoFont,
+		cherryBomb: import_fonts.cherryBombFont
+	},
 	animations,
-	media: import_media.media,
+	media: { ...v6.media },
 	settings: {
-		...import_v5_subtle.defaultConfig.settings,
-		mediaQueryDefaultActive: import_media.mediaQueryDefaultActive,
+		...v6.settings,
+		mediaQueryDefaultActive: import_v6_base.mediaQueryDefaultActive,
 		allowedStyleValues: "somewhat-strict-web",
 		onlyAllowShorthands: false
 	}

package/dist/cjs/themeMetadata.cjs

@@ -28,8 +28,6 @@ __export(themeMetadata_exports, {
 module.exports = __toCommonJS(themeMetadata_exports);
 const schemes = ["light", "dark"];
 const colors = [
-	"black",
-	"white",
 	"gray",
 	"blue",
 	"red",
@@ -61,10 +59,11 @@ const componentThemes = [
 	"Tooltip",
 	"SwitchThumb"
 ];
-const numbered = (prefix, count) => Array.from({ length: count }, (_, index) => `${prefix}${index + 1}`);
+const numbered = (prefix, count) => Array.from({ length: count }, (_, index) => `${prefix}-${index + 1}`);
 const baseThemeNames = schemes.flatMap((scheme) => [
 	scheme,
 	`${scheme}_accent`,
+	`${scheme}_brand`,
 	`${scheme}_surface1`,
 	`${scheme}_surface2`,
 	...colors.flatMap((color) => [
@@ -74,7 +73,7 @@ const baseThemeNames = schemes.flatMap((scheme) => [
 		`${scheme}_${color}_surface2`
 	])
 ]);
-const levelThemeNames = baseThemeNames.flatMap((themeName) => themeName.endsWith("_surface1") ? [themeName.replace(/_surface1$/, "_level2")] : themeName.endsWith("_surface2") ? [themeName.replace(/_surface2$/, "_level3")] : themeName.endsWith("_accent") ? [`${themeName}_level2`, `${themeName}_level3`] : []);
+const levelThemeNames = baseThemeNames.flatMap((themeName) => themeName.endsWith("_surface1") ? [themeName.replace(/_surface1$/, "_level2")] : themeName.endsWith("_surface2") ? [themeName.replace(/_surface2$/, "_level3")] : themeName.endsWith("_accent") || themeName.endsWith("_brand") ? [`${themeName}_level2`, `${themeName}_level3`] : []);
 const componentThemeNames = [...baseThemeNames, ...levelThemeNames].flatMap((parent) => componentThemes.map((component) => `${parent}_${component}`));
 const themeNames = [
 	...baseThemeNames,
@@ -102,7 +101,7 @@ const themeVariableNames = [
 	"background-focus",
 	"background-hover",
 	"background-press",
-	...alphaSteps.map((step) => `background${step}`),
+	...alphaSteps.map((step) => `background-${step}`),
 	"border-color",
 	"border-color-focus",
 	"border-color-hover",
@@ -112,18 +111,18 @@ const themeVariableNames = [
 	"color-hover",
 	"color-press",
 	"color-transparent",
-	...alphaSteps.map((step) => `color${step}`),
+	...alphaSteps.map((step) => `color-${step}`),
 	...numbered("color", 12),
 	"outline-color",
 	"placeholder-color",
 	"shadow-color",
 	...["black", "white"].flatMap((color) => [
 		color,
-		`${color}0`,
-		`${color}02`,
-		`${color}04`,
-		`${color}06`,
-		`${color}08`,
+		`${color}-0`,
+		`${color}-02`,
+		`${color}-04`,
+		`${color}-06`,
+		`${color}-08`,
 		...numbered(color, 12)
 	]),
 	...paletteColors.flatMap((color) => numbered(color, 12)),

package/dist/cjs/themes.cjs

@@ -36,6 +36,12 @@ for (const [themeName, theme] of Object.entries(selectedThemes)) {
 		selectedThemes[`${themeName}_level3`] = theme;
 	}
 }
+for (const scheme of ["light", "dark"]) {
+	const inverse = selectedThemes[scheme === "light" ? "dark" : "light"];
+	selectedThemes[`${scheme}_brand`] = inverse;
+	selectedThemes[`${scheme}_brand_level2`] = inverse;
+	selectedThemes[`${scheme}_brand_level3`] = inverse;
+}
 for (const themeName of import_themeMetadata.themeNames) {
 	const component = import_themeMetadata.componentThemes.find((name) => themeName.endsWith(`_${name}`));
 	if (!component || selectedThemes[themeName]) continue;
@@ -44,4 +50,30 @@ for (const themeName of import_themeMetadata.themeNames) {
 		selectedThemes[themeName] = selectedThemes[parentName];
 	}
 }
-const themes = (0, import_v6_base.toV6Themes)(selectedThemes);
+const MAX_LIGHT_BORDER_GAP = 8;
+const hsla = /^hsla\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%\s*,\s*([\d.]+)\s*\)$/;
+const softenLightBorder = (theme) => {
+	const background = hsla.exec(theme.background);
+	const border = hsla.exec(theme["border-color"]);
+	if (!background || !border) return theme;
+	const backgroundLightness = Number(background[3]);
+	const borderLightness = Number(border[3]);
+	if (backgroundLightness <= 50) return theme;
+	const gap = backgroundLightness - borderLightness;
+	if (gap <= MAX_LIGHT_BORDER_GAP) return theme;
+	const lightness = backgroundLightness - MAX_LIGHT_BORDER_GAP;
+	return {
+		...theme,
+		"border-color": `hsla(${border[1]}, ${border[2]}%, ${lightness}%, ${border[4]})`
+	};
+};
+const v6Themes = (0, import_v6_base.toV6Themes)(selectedThemes);
+const edited = /* @__PURE__ */ new Map();
+const themes = Object.fromEntries(Object.entries(v6Themes).map(([themeName, theme]) => {
+	let next = edited.get(theme);
+	if (!next) {
+		next = softenLightBorder(theme);
+		edited.set(theme, next);
+	}
+	return [themeName, next];
+}));

package/dist/esm/fonts.mjs

@@ -1,60 +1,40 @@
 import { createCherryBombFont } from "@tamagui/font-cherry-bomb";
-import { createInterFont } from "@tamagui/font-inter";
-import { createSilkscreenFont } from "@tamagui/font-silkscreen";
+import { createFont } from "@tamagui/core";
 import { createGenericFont } from "./createGenericFont.mjs";
 
+const contrastFamily = "\"Contrast\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+const monoFamily = "\"JetBrains Mono\", ui-monospace, \"SFMono-Regular\", \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace";
 const cherryBombFont = createCherryBombFont({
-	family: "\"Cherry Bomb\", \"Inter\", \"Arial Black\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
+	family: `"Cherry Bomb", "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif`,
 	weight: { 4: "800" },
 	size: { true: 22.4 }
 });
-const silkscreenFont = createSilkscreenFont();
-const headingFont = createInterFont({
-	size: {
-		true: 14,
-		5: 13,
-		6: 15,
-		9: 30,
-		10: 44
-	},
-	transform: {
-		6: "uppercase",
-		7: "none"
-	},
-	weight: {
-		6: "400",
-		7: "700"
-	},
-	color: {
-		6: "color-focus",
-		7: "color"
-	},
-	letterSpacing: {
-		5: 2,
-		6: 1,
-		7: 0,
-		8: 0,
-		9: -.1,
-		10: -.25,
-		11: -.5,
-		12: -.75,
-		14: -1,
-		15: -2
-	},
-	face: {
-		700: { normal: "InterBold" },
-		800: { normal: "InterBold" },
-		900: { normal: "InterBold" }
+const sizes = () => {
+	const out = { true: 14 };
+	let px = 11;
+	for (let i = 1; i <= 16; i++) {
+		out[i] = Math.round(px);
+		px *= Math.min(1.19, 1.05 + i * .019);
 	}
-}, { sizeLineHeight: (size) => Math.round(size * 1.1 + (size < 30 ? 10 : 5)) });
-const bodyFont = createInterFont({
-	size: { true: 14 },
-	weight: { 1: "400" }
-}, {
-	sizeSize: (size) => Math.round(size),
-	sizeLineHeight: (size) => Math.round(size * 1.2 + (size >= 20 ? 12 : 8))
+	return out;
+};
+const size = sizes();
+const lineHeights = (ratio, extra) => Object.fromEntries(Object.entries(size).map(([k, v]) => [k, Math.round(v * ratio + extra)]));
+const headingFont = createFont({
+	family: contrastFamily,
+	size,
+	lineHeight: lineHeights(1.25, 2),
+	weight: { 1: "600" },
+	letterSpacing: { 1: 0 }
+});
+const bodyFont = createFont({
+	family: contrastFamily,
+	size,
+	lineHeight: lineHeights(1.35, 3),
+	weight: { 1: "400" },
+	letterSpacing: { 1: 0 }
 });
-const monoFont = createGenericFont(`"Berkeley Mono", "ui-monospace", "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace`, {
+const monoFont = createGenericFont(monoFamily, {
 	weight: { 1: "400" },
 	size: {
 		1: 11,
@@ -76,5 +56,5 @@ const monoFont = createGenericFont(`"Berkeley Mono", "ui-monospace", "SFMono-Reg
 	}
 }, { sizeLineHeight: (x) => x * 1.5 + 2 });
 
-export { bodyFont, cherryBombFont, headingFont, monoFont, silkscreenFont };
+export { bodyFont, cherryBombFont, headingFont, monoFont };
 //# sourceMappingURL=fonts.mjs.map

package/dist/esm/fonts.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"fonts.js","names":[],"sources":["esm/fonts.js"],"sourcesContent":["import { createCherryBombFont } from \"@tamagui/font-cherry-bomb\";\nimport { createInterFont } from \"@tamagui/font-inter\";\nimport { createSilkscreenFont } from \"@tamagui/font-silkscreen\";\nimport { createGenericFont } from \"./createGenericFont\";\nconst cherryBombFont = createCherryBombFont({\n  // Cherry Bomb is a heavy rounded display face; fall back to on-brand Inter,\n  // then heavy web-safe faces, so the brief pre-load flash looks close to the\n  // real thing instead of thin default Arial.\n  family: '\"Cherry Bomb\", \"Inter\", \"Arial Black\", \"Helvetica Neue\", Helvetica, Arial, sans-serif',\n  // Cherry Bomb only ships weight 400 (so this doesn't change its look), but a\n  // heavy weight makes the Inter fallback render at ExtraBold (already preloaded)\n  // instead of thin, much closer to Cherry Bomb during the load flash.\n  weight: {\n    4: \"800\"\n  },\n  size: {\n    true: 22.4\n  }\n});\nconst silkscreenFont = createSilkscreenFont();\nconst headingFont = createInterFont(\n  {\n    size: {\n      true: 14,\n      5: 13,\n      6: 15,\n      9: 30,\n      10: 44\n    },\n    transform: {\n      6: \"uppercase\",\n      7: \"none\"\n    },\n    weight: {\n      6: \"400\",\n      7: \"700\"\n    },\n    color: {\n      6: \"color-focus\",\n      7: \"color\"\n    },\n    letterSpacing: {\n      5: 2,\n      6: 1,\n      7: 0,\n      8: 0,\n      9: -0.1,\n      10: -0.25,\n      11: -0.5,\n      12: -0.75,\n      14: -1,\n      15: -2\n    },\n    // for native\n    face: {\n      700: { normal: \"InterBold\" },\n      800: { normal: \"InterBold\" },\n      900: { normal: \"InterBold\" }\n    }\n  },\n  { sizeLineHeight: (size) => Math.round(size * 1.1 + (size < 30 ? 10 : 5)) }\n);\nconst bodyFont = createInterFont(\n  {\n    size: {\n      true: 14\n    },\n    weight: {\n      1: \"400\"\n    }\n  },\n  {\n    sizeSize: (size) => Math.round(size),\n    sizeLineHeight: (size) => Math.round(size * 1.2 + (size >= 20 ? 12 : 8))\n  }\n);\nconst monoFont = createGenericFont(\n  `\"Berkeley Mono\", \"ui-monospace\", \"SFMono-Regular\", \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace`,\n  {\n    weight: {\n      1: \"400\"\n    },\n    size: {\n      1: 11,\n      2: 12,\n      3: 13,\n      4: 14,\n      5: 16,\n      6: 18,\n      7: 20,\n      8: 22,\n      9: 24,\n      10: 32,\n      11: 46,\n      12: 62,\n      13: 72,\n      14: 92,\n      15: 114,\n      16: 124\n    }\n  },\n  {\n    sizeLineHeight: (x) => x * 1.5 + 2\n  }\n);\nexport {\n  bodyFont,\n  cherryBombFont,\n  headingFont,\n  monoFont,\n  silkscreenFont\n};\n//# sourceMappingURL=fonts.js.map\n"],"mappings":";;;;;;AAIA,MAAM,iBAAiB,qBAAqB;CAI1C,QAAQ;CAIR,QAAQ,EACN,GAAG,MACL;CACA,MAAM,EACJ,MAAM,KACR;AACF,CAAC;AACD,MAAM,iBAAiB,qBAAqB;AAC5C,MAAM,cAAc,gBAClB;CACE,MAAM;EACJ,MAAM;EACN,GAAG;EACH,GAAG;EACH,GAAG;EACH,IAAI;CACN;CACA,WAAW;EACT,GAAG;EACH,GAAG;CACL;CACA,QAAQ;EACN,GAAG;EACH,GAAG;CACL;CACA,OAAO;EACL,GAAG;EACH,GAAG;CACL;CACA,eAAe;EACb,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG,CAAC;EACJ,IAAI,CAAC;EACL,IAAI,CAAC;EACL,IAAI,CAAC;EACL,IAAI,CAAC;EACL,IAAI,CAAC;CACP;CAEA,MAAM;EACJ,KAAK,EAAE,QAAQ,YAAY;EAC3B,KAAK,EAAE,QAAQ,YAAY;EAC3B,KAAK,EAAE,QAAQ,YAAY;CAC7B;AACF,GACA,EAAE,iBAAiB,SAAS,KAAK,MAAM,OAAO,OAAO,OAAO,KAAK,KAAK,EAAE,EAAE,CAC5E;AACA,MAAM,WAAW,gBACf;CACE,MAAM,EACJ,MAAM,GACR;CACA,QAAQ,EACN,GAAG,MACL;AACF,GACA;CACE,WAAW,SAAS,KAAK,MAAM,IAAI;CACnC,iBAAiB,SAAS,KAAK,MAAM,OAAO,OAAO,QAAQ,KAAK,KAAK,EAAE;AACzE,CACF;AACA,MAAM,WAAW,kBACf,+GACA;CACE,QAAQ,EACN,GAAG,MACL;CACA,MAAM;EACJ,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN;AACF,GACA,EACE,iBAAiB,MAAM,IAAI,MAAM,EACnC,CACF"}
+{"version":3,"file":"fonts.js","names":[],"sources":["esm/fonts.js"],"sourcesContent":["import { createCherryBombFont } from \"@tamagui/font-cherry-bomb\";\nimport { createFont } from \"@tamagui/core\";\nimport { createGenericFont } from \"./createGenericFont\";\n\nconst contrastFamily = \"\\\"Contrast\\\", -apple-system, BlinkMacSystemFont, \\\"Segoe UI\\\", Roboto, \\\"Helvetica Neue\\\", Arial, sans-serif\";\nconst monoFamily = \"\\\"JetBrains Mono\\\", ui-monospace, \\\"SFMono-Regular\\\", \\\"SF Mono\\\", Menlo, Consolas, \\\"Liberation Mono\\\", monospace\";\nconst cherryBombFont = createCherryBombFont({\n\tfamily: `\"Cherry Bomb\", \"Arial Black\", \"Helvetica Neue\", Helvetica, Arial, sans-serif`,\n\tweight: { 4: \"800\" },\n\tsize: { true: 22.4 }\n});\nconst sizes = () => {\n\tconst out = { true: 14 };\n\tlet px = 11;\n\tfor (let i = 1; i <= 16; i++) {\n\t\tout[i] = Math.round(px);\n\t\tpx *= Math.min(1.19, 1.05 + i * .019);\n\t}\n\treturn out;\n};\nconst size = sizes();\nconst lineHeights = (ratio, extra) => Object.fromEntries(Object.entries(size).map(([k, v]) => [k, Math.round(v * ratio + extra)]));\nconst headingFont = createFont({\n\tfamily: contrastFamily,\n\tsize,\n\tlineHeight: lineHeights(1.25, 2),\n\tweight: { 1: \"600\" },\n\tletterSpacing: { 1: 0 }\n});\nconst bodyFont = createFont({\n\tfamily: contrastFamily,\n\tsize,\n\tlineHeight: lineHeights(1.35, 3),\n\tweight: { 1: \"400\" },\n\tletterSpacing: { 1: 0 }\n});\nconst monoFont = createGenericFont(monoFamily, {\n\tweight: { 1: \"400\" },\n\tsize: {\n\t\t1: 11,\n\t\t2: 12,\n\t\t3: 13,\n\t\t4: 14,\n\t\t5: 16,\n\t\t6: 18,\n\t\t7: 20,\n\t\t8: 22,\n\t\t9: 24,\n\t\t10: 32,\n\t\t11: 46,\n\t\t12: 62,\n\t\t13: 72,\n\t\t14: 92,\n\t\t15: 114,\n\t\t16: 124\n\t}\n}, { sizeLineHeight: (x) => x * 1.5 + 2 });\n\nexport { bodyFont, cherryBombFont, headingFont, monoFont };"],"mappings":";;;;;AAIA,MAAM,iBAAiB;AACvB,MAAM,aAAa;AACnB,MAAM,iBAAiB,qBAAqB;CAC3C,QAAQ;CACR,QAAQ,EAAE,GAAG,MAAM;CACnB,MAAM,EAAE,MAAM,KAAK;AACpB,CAAC;AACD,MAAM,cAAc;CACnB,MAAM,MAAM,EAAE,MAAM,GAAG;CACvB,IAAI,KAAK;CACT,KAAK,IAAI,IAAI,GAAG,KAAK,IAAI,KAAK;EAC7B,IAAI,KAAK,KAAK,MAAM,EAAE;EACtB,MAAM,KAAK,IAAI,MAAM,OAAO,IAAI,IAAI;CACrC;CACA,OAAO;AACR;AACA,MAAM,OAAO,MAAM;AACnB,MAAM,eAAe,OAAO,UAAU,OAAO,YAAY,OAAO,QAAQ,IAAI,CAAC,CAAC,KAAK,CAAC,GAAG,OAAO,CAAC,GAAG,KAAK,MAAM,IAAI,QAAQ,KAAK,CAAC,CAAC,CAAC;AACjI,MAAM,cAAc,WAAW;CAC9B,QAAQ;CACR;CACA,YAAY,YAAY,MAAM,CAAC;CAC/B,QAAQ,EAAE,GAAG,MAAM;CACnB,eAAe,EAAE,GAAG,EAAE;AACvB,CAAC;AACD,MAAM,WAAW,WAAW;CAC3B,QAAQ;CACR;CACA,YAAY,YAAY,MAAM,CAAC;CAC/B,QAAQ,EAAE,GAAG,MAAM;CACnB,eAAe,EAAE,GAAG,EAAE;AACvB,CAAC;AACD,MAAM,WAAW,kBAAkB,YAAY;CAC9C,QAAQ,EAAE,GAAG,MAAM;CACnB,MAAM;EACL,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACL;AACD,GAAG,EAAE,iBAAiB,MAAM,IAAI,MAAM,EAAE,CAAC"}

package/dist/esm/index.js

@@ -1,3 +1 @@
 export * from "./tamagui.dev.config.mjs"
-
-export * from "./media.mjs"

package/dist/esm/index.mjs

@@ -1,3 +1 @@
 export * from "./tamagui.dev.config.mjs"
-
-export * from "./media.mjs"

package/dist/esm/tamagui.dev.config.mjs

@@ -1,33 +1,30 @@
 import { animationsCSS } from "@tamagui/config/animations-css";
 import { animationsMotion } from "@tamagui/config/animations-motion";
-import { defaultConfig } from "@tamagui/config/v5-subtle";
+import { createV6Config, mediaQueryDefaultActive, withTailwindTypeScale } from "@tamagui/config/v6-base";
 import { setupDev } from "@tamagui/core";
-import { bodyFont, cherryBombFont, headingFont, monoFont, silkscreenFont } from "./fonts.mjs";
-import { media, mediaQueryDefaultActive } from "./media.mjs";
+import { bodyFont, cherryBombFont, headingFont, monoFont } from "./fonts.mjs";
 import { clientThemes } from "./themeMetadata.mjs";
 import { themes } from "./themes.mjs";
 
 setupDev({ visualizer: true });
-const fonts = {
-	heading: headingFont,
-	body: bodyFont,
-	mono: monoFont,
-	silkscreen: silkscreenFont,
-	cherryBomb: cherryBombFont
-};
 const animations = {
 	default: animationsMotion,
 	css: animationsCSS
 };
 const configuredThemes = process.env.VITE_ENVIRONMENT === "client" ? clientThemes : themes;
+const v6 = createV6Config({ themes: configuredThemes });
 const config = {
-	...defaultConfig,
-	themes: configuredThemes,
-	fonts,
+	...v6,
+	fonts: {
+		heading: withTailwindTypeScale(headingFont),
+		body: withTailwindTypeScale(bodyFont),
+		mono: monoFont,
+		cherryBomb: cherryBombFont
+	},
 	animations,
-	media,
+	media: { ...v6.media },
 	settings: {
-		...defaultConfig.settings,
+		...v6.settings,
 		mediaQueryDefaultActive,
 		allowedStyleValues: "somewhat-strict-web",
 		onlyAllowShorthands: false

package/dist/esm/tamagui.dev.config.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tamagui.dev.config.js","names":[],"sources":["esm/tamagui.dev.config.js"],"sourcesContent":["import { animationsCSS } from \"@tamagui/config/animations-css\";\nimport { animationsMotion } from \"@tamagui/config/animations-motion\";\nimport { defaultConfig } from \"@tamagui/config/v5-subtle\";\nimport { setupDev } from \"@tamagui/core\";\nimport { bodyFont, cherryBombFont, headingFont, monoFont, silkscreenFont } from \"./fonts\";\nimport { media, mediaQueryDefaultActive } from \"./media\";\nimport { clientThemes } from \"./themeMetadata\";\nimport { themes } from \"./themes\";\nsetupDev({\n  visualizer: true\n});\nconst fonts = {\n  heading: headingFont,\n  body: bodyFont,\n  mono: monoFont,\n  silkscreen: silkscreenFont,\n  cherryBomb: cherryBombFont\n};\nconst animations = {\n  default: animationsMotion,\n  css: animationsCSS\n};\nconst configuredThemes = process.env.VITE_ENVIRONMENT === \"client\" ? clientThemes : themes;\nconst config = {\n  ...defaultConfig,\n  themes: configuredThemes,\n  fonts,\n  animations,\n  media,\n  settings: {\n    ...defaultConfig.settings,\n    mediaQueryDefaultActive,\n    allowedStyleValues: \"somewhat-strict-web\",\n    // allow both shorthands and longhand names for flexibility\n    onlyAllowShorthands: false\n  }\n};\nObject.assign(config.media, {\n  tiny: { maxWidth: 500 },\n  gtTiny: { minWidth: 500 + 1 },\n  small: { maxWidth: 620 },\n  gtSmall: { minWidth: 620 + 1 },\n  medium: { maxWidth: 780 },\n  gtMedium: { minWidth: 780 + 1 },\n  large: { maxWidth: 900 },\n  gtLarge: { minWidth: 900 + 1 }\n});\nexport {\n  animations,\n  config\n};\n//# sourceMappingURL=tamagui.dev.config.js.map\n"],"mappings":";;;;;;;;;;AAQA,SAAS,EACP,YAAY,KACd,CAAC;AACD,MAAM,QAAQ;CACZ,SAAS;CACT,MAAM;CACN,MAAM;CACN,YAAY;CACZ,YAAY;AACd;AACA,MAAM,aAAa;CACjB,SAAS;CACT,KAAK;AACP;AACA,MAAM,mBAAmB,QAAQ,IAAI,qBAAqB,WAAW,eAAe;AACpF,MAAM,SAAS;CACb,GAAG;CACH,QAAQ;CACR;CACA;CACA;CACA,UAAU;EACR,GAAG,cAAc;EACjB;EACA,oBAAoB;EAEpB,qBAAqB;CACvB;AACF;AACA,OAAO,OAAO,OAAO,OAAO;CAC1B,MAAM,EAAE,UAAU,IAAI;CACtB,QAAQ,EAAE,UAAU,MAAM,EAAE;CAC5B,OAAO,EAAE,UAAU,IAAI;CACvB,SAAS,EAAE,UAAU,MAAM,EAAE;CAC7B,QAAQ,EAAE,UAAU,IAAI;CACxB,UAAU,EAAE,UAAU,MAAM,EAAE;CAC9B,OAAO,EAAE,UAAU,IAAI;CACvB,SAAS,EAAE,UAAU,MAAM,EAAE;AAC/B,CAAC"}
+{"version":3,"file":"tamagui.dev.config.js","names":[],"sources":["esm/tamagui.dev.config.js"],"sourcesContent":["import { animationsCSS } from \"@tamagui/config/animations-css\";\nimport { animationsMotion } from \"@tamagui/config/animations-motion\";\nimport {\n  createV6Config,\n  mediaQueryDefaultActive,\n  withTailwindTypeScale\n} from \"@tamagui/config/v6-base\";\nimport { setupDev } from \"@tamagui/core\";\nimport { bodyFont, cherryBombFont, headingFont, monoFont } from \"./fonts\";\nimport { clientThemes } from \"./themeMetadata\";\nimport { themes } from \"./themes\";\nsetupDev({\n  visualizer: true\n});\nconst animations = {\n  default: animationsMotion,\n  css: animationsCSS\n};\nconst configuredThemes = process.env.VITE_ENVIRONMENT === \"client\" ? clientThemes : themes;\nconst v6 = createV6Config({ themes: configuredThemes });\nconst config = {\n  ...v6,\n  fonts: {\n    heading: withTailwindTypeScale(headingFont),\n    body: withTailwindTypeScale(bodyFont),\n    mono: monoFont,\n    cherryBomb: cherryBombFont\n  },\n  animations,\n  // a copy, since the demo media below is assigned onto it\n  media: { ...v6.media },\n  settings: {\n    ...v6.settings,\n    mediaQueryDefaultActive,\n    allowedStyleValues: \"somewhat-strict-web\",\n    // allow both shorthands and longhand names for flexibility\n    onlyAllowShorthands: false\n  }\n};\nObject.assign(config.media, {\n  tiny: { maxWidth: 500 },\n  gtTiny: { minWidth: 500 + 1 },\n  small: { maxWidth: 620 },\n  gtSmall: { minWidth: 620 + 1 },\n  medium: { maxWidth: 780 },\n  gtMedium: { minWidth: 780 + 1 },\n  large: { maxWidth: 900 },\n  gtLarge: { minWidth: 900 + 1 }\n});\nexport {\n  animations,\n  config\n};\n//# sourceMappingURL=tamagui.dev.config.js.map\n"],"mappings":";;;;;;;;;AAWA,SAAS,EACP,YAAY,KACd,CAAC;AACD,MAAM,aAAa;CACjB,SAAS;CACT,KAAK;AACP;AACA,MAAM,mBAAmB,QAAQ,IAAI,qBAAqB,WAAW,eAAe;AACpF,MAAM,KAAK,eAAe,EAAE,QAAQ,iBAAiB,CAAC;AACtD,MAAM,SAAS;CACb,GAAG;CACH,OAAO;EACL,SAAS,sBAAsB,WAAW;EAC1C,MAAM,sBAAsB,QAAQ;EACpC,MAAM;EACN,YAAY;CACd;CACA;CAEA,OAAO,EAAE,GAAG,GAAG,MAAM;CACrB,UAAU;EACR,GAAG,GAAG;EACN;EACA,oBAAoB;EAEpB,qBAAqB;CACvB;AACF;AACA,OAAO,OAAO,OAAO,OAAO;CAC1B,MAAM,EAAE,UAAU,IAAI;CACtB,QAAQ,EAAE,UAAU,MAAM,EAAE;CAC5B,OAAO,EAAE,UAAU,IAAI;CACvB,SAAS,EAAE,UAAU,MAAM,EAAE;CAC7B,QAAQ,EAAE,UAAU,IAAI;CACxB,UAAU,EAAE,UAAU,MAAM,EAAE;CAC9B,OAAO,EAAE,UAAU,IAAI;CACvB,SAAS,EAAE,UAAU,MAAM,EAAE;AAC/B,CAAC"}

package/dist/esm/themeMetadata.mjs

@@ -1,7 +1,5 @@
 const schemes = ["light", "dark"];
 const colors = [
-	"black",
-	"white",
 	"gray",
 	"blue",
 	"red",
@@ -33,10 +31,11 @@ const componentThemes = [
 	"Tooltip",
 	"SwitchThumb"
 ];
-const numbered = (prefix, count) => Array.from({ length: count }, (_, index) => `${prefix}${index + 1}`);
+const numbered = (prefix, count) => Array.from({ length: count }, (_, index) => `${prefix}-${index + 1}`);
 const baseThemeNames = schemes.flatMap((scheme) => [
 	scheme,
 	`${scheme}_accent`,
+	`${scheme}_brand`,
 	`${scheme}_surface1`,
 	`${scheme}_surface2`,
 	...colors.flatMap((color) => [
@@ -46,7 +45,7 @@ const baseThemeNames = schemes.flatMap((scheme) => [
 		`${scheme}_${color}_surface2`
 	])
 ]);
-const levelThemeNames = baseThemeNames.flatMap((themeName) => themeName.endsWith("_surface1") ? [themeName.replace(/_surface1$/, "_level2")] : themeName.endsWith("_surface2") ? [themeName.replace(/_surface2$/, "_level3")] : themeName.endsWith("_accent") ? [`${themeName}_level2`, `${themeName}_level3`] : []);
+const levelThemeNames = baseThemeNames.flatMap((themeName) => themeName.endsWith("_surface1") ? [themeName.replace(/_surface1$/, "_level2")] : themeName.endsWith("_surface2") ? [themeName.replace(/_surface2$/, "_level3")] : themeName.endsWith("_accent") || themeName.endsWith("_brand") ? [`${themeName}_level2`, `${themeName}_level3`] : []);
 const componentThemeNames = [...baseThemeNames, ...levelThemeNames].flatMap((parent) => componentThemes.map((component) => `${parent}_${component}`));
 const themeNames = [
 	...baseThemeNames,
@@ -74,7 +73,7 @@ const themeVariableNames = [
 	"background-focus",
 	"background-hover",
 	"background-press",
-	...alphaSteps.map((step) => `background${step}`),
+	...alphaSteps.map((step) => `background-${step}`),
 	"border-color",
 	"border-color-focus",
 	"border-color-hover",
@@ -84,18 +83,18 @@ const themeVariableNames = [
 	"color-hover",
 	"color-press",
 	"color-transparent",
-	...alphaSteps.map((step) => `color${step}`),
+	...alphaSteps.map((step) => `color-${step}`),
 	...numbered("color", 12),
 	"outline-color",
 	"placeholder-color",
 	"shadow-color",
 	...["black", "white"].flatMap((color) => [
 		color,
-		`${color}0`,
-		`${color}02`,
-		`${color}04`,
-		`${color}06`,
-		`${color}08`,
+		`${color}-0`,
+		`${color}-02`,
+		`${color}-04`,
+		`${color}-06`,
+		`${color}-08`,
 		...numbered(color, 12)
 	]),
 	...paletteColors.flatMap((color) => numbered(color, 12)),

package/dist/esm/themeMetadata.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"themeMetadata.js","names":[],"sources":["esm/themeMetadata.js"],"sourcesContent":["const schemes = [\"light\", \"dark\"];\nconst colors = [\"black\", \"white\", \"gray\", \"blue\", \"red\", \"yellow\", \"green\"];\nconst paletteColors = [\n  \"blue\",\n  \"gray\",\n  \"green\",\n  \"neutral\",\n  \"orange\",\n  \"pink\",\n  \"purple\",\n  \"red\",\n  \"teal\",\n  \"yellow\"\n];\nconst componentThemes = [\n  \"Button\",\n  \"Input\",\n  \"Progress\",\n  \"ProgressIndicator\",\n  \"Slider\",\n  \"SliderActive\",\n  \"SliderThumb\",\n  \"Switch\",\n  \"TextArea\",\n  \"Tooltip\",\n  \"SwitchThumb\"\n];\nconst numbered = (prefix, count) => Array.from({ length: count }, (_, index) => `${prefix}${index + 1}`);\nconst baseThemeNames = schemes.flatMap((scheme) => [\n  scheme,\n  `${scheme}_accent`,\n  `${scheme}_surface1`,\n  `${scheme}_surface2`,\n  ...colors.flatMap((color) => [\n    `${scheme}_${color}`,\n    `${scheme}_${color}_accent`,\n    `${scheme}_${color}_surface1`,\n    `${scheme}_${color}_surface2`\n  ])\n]);\nconst levelThemeNames = baseThemeNames.flatMap(\n  (themeName) => themeName.endsWith(\"_surface1\") ? [themeName.replace(/_surface1$/, \"_level2\")] : themeName.endsWith(\"_surface2\") ? [themeName.replace(/_surface2$/, \"_level3\")] : themeName.endsWith(\"_accent\") ? [`${themeName}_level2`, `${themeName}_level3`] : []\n);\nconst componentThemeNames = [...baseThemeNames, ...levelThemeNames].flatMap(\n  (parent) => componentThemes.map((component) => `${parent}_${component}`)\n);\nconst themeNames = [...baseThemeNames, ...levelThemeNames, ...componentThemeNames];\nconst alphaSteps = [\n  \"0\",\n  \"01\",\n  \"02\",\n  \"04\",\n  \"06\",\n  \"08\",\n  \"001\",\n  \"002\",\n  \"0025\",\n  \"005\",\n  \"0075\"\n];\nconst themeVariableNames = [\n  \"accent-background\",\n  \"accent-color\",\n  ...numbered(\"accent\", 12),\n  \"background\",\n  \"background-focus\",\n  \"background-hover\",\n  \"background-press\",\n  ...alphaSteps.map((step) => `background${step}`),\n  \"border-color\",\n  \"border-color-focus\",\n  \"border-color-hover\",\n  \"border-color-press\",\n  \"color\",\n  \"color-focus\",\n  \"color-hover\",\n  \"color-press\",\n  \"color-transparent\",\n  ...alphaSteps.map((step) => `color${step}`),\n  ...numbered(\"color\", 12),\n  \"outline-color\",\n  \"placeholder-color\",\n  \"shadow-color\",\n  ...[\"black\", \"white\"].flatMap((color) => [\n    color,\n    `${color}0`,\n    `${color}02`,\n    `${color}04`,\n    `${color}06`,\n    `${color}08`,\n    ...numbered(color, 12)\n  ]),\n  ...paletteColors.flatMap((color) => numbered(color, 12)),\n  ...numbered(\"highlight\", 8),\n  ...numbered(\"shadow\", 8)\n];\nconst variableShape = Object.fromEntries(\n  themeVariableNames.map((name) => [name, `var(--${name})`])\n);\nconst clientThemes = Object.fromEntries(\n  themeNames.map((name) => [name, variableShape])\n);\nexport {\n  clientThemes,\n  componentThemes,\n  themeNames,\n  themeVariableNames\n};\n//# sourceMappingURL=themeMetadata.js.map\n"],"mappings":";AAAA,MAAM,UAAU,CAAC,SAAS,MAAM;AAChC,MAAM,SAAS;CAAC;CAAS;CAAS;CAAQ;CAAQ;CAAO;CAAU;AAAO;AAC1E,MAAM,gBAAgB;CACpB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AACA,MAAM,kBAAkB;CACtB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AACA,MAAM,YAAY,QAAQ,UAAU,MAAM,KAAK,EAAE,QAAQ,MAAM,IAAI,GAAG,UAAU,GAAG,SAAS,QAAQ,GAAG;AACvG,MAAM,iBAAiB,QAAQ,SAAS,WAAW;CACjD;CACA,GAAG,OAAO;CACV,GAAG,OAAO;CACV,GAAG,OAAO;CACV,GAAG,OAAO,SAAS,UAAU;EAC3B,GAAG,OAAO,GAAG;EACb,GAAG,OAAO,GAAG,MAAM;EACnB,GAAG,OAAO,GAAG,MAAM;EACnB,GAAG,OAAO,GAAG,MAAM;CACrB,CAAC;AACH,CAAC;AACD,MAAM,kBAAkB,eAAe,SACpC,cAAc,UAAU,SAAS,WAAW,IAAI,CAAC,UAAU,QAAQ,cAAc,SAAS,CAAC,IAAI,UAAU,SAAS,WAAW,IAAI,CAAC,UAAU,QAAQ,cAAc,SAAS,CAAC,IAAI,UAAU,SAAS,SAAS,IAAI,CAAC,GAAG,UAAU,UAAU,GAAG,UAAU,QAAQ,IAAI,CAAC,CACrQ;AACA,MAAM,sBAAsB,CAAC,GAAG,gBAAgB,GAAG,eAAe,CAAC,CAAC,SACjE,WAAW,gBAAgB,KAAK,cAAc,GAAG,OAAO,GAAG,WAAW,CACzE;AACA,MAAM,aAAa;CAAC,GAAG;CAAgB,GAAG;CAAiB,GAAG;AAAmB;AACjF,MAAM,aAAa;CACjB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AACA,MAAM,qBAAqB;CACzB;CACA;CACA,GAAG,SAAS,UAAU,EAAE;CACxB;CACA;CACA;CACA;CACA,GAAG,WAAW,KAAK,SAAS,aAAa,MAAM;CAC/C;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA,GAAG,WAAW,KAAK,SAAS,QAAQ,MAAM;CAC1C,GAAG,SAAS,SAAS,EAAE;CACvB;CACA;CACA;CACA,GAAG,CAAC,SAAS,OAAO,CAAC,CAAC,SAAS,UAAU;EACvC;EACA,GAAG,MAAM;EACT,GAAG,MAAM;EACT,GAAG,MAAM;EACT,GAAG,MAAM;EACT,GAAG,MAAM;EACT,GAAG,SAAS,OAAO,EAAE;CACvB,CAAC;CACD,GAAG,cAAc,SAAS,UAAU,SAAS,OAAO,EAAE,CAAC;CACvD,GAAG,SAAS,aAAa,CAAC;CAC1B,GAAG,SAAS,UAAU,CAAC;AACzB;AACA,MAAM,gBAAgB,OAAO,YAC3B,mBAAmB,KAAK,SAAS,CAAC,MAAM,SAAS,KAAK,EAAE,CAAC,CAC3D;AACA,MAAM,eAAe,OAAO,YAC1B,WAAW,KAAK,SAAS,CAAC,MAAM,aAAa,CAAC,CAChD"}
+{"version":3,"file":"themeMetadata.js","names":[],"sources":["esm/themeMetadata.js"],"sourcesContent":["const schemes = [\"light\", \"dark\"];\nconst colors = [\"gray\", \"blue\", \"red\", \"yellow\", \"green\"];\nconst paletteColors = [\n  \"blue\",\n  \"gray\",\n  \"green\",\n  \"neutral\",\n  \"orange\",\n  \"pink\",\n  \"purple\",\n  \"red\",\n  \"teal\",\n  \"yellow\"\n];\nconst componentThemes = [\n  \"Button\",\n  \"Input\",\n  \"Progress\",\n  \"ProgressIndicator\",\n  \"Slider\",\n  \"SliderActive\",\n  \"SliderThumb\",\n  \"Switch\",\n  \"TextArea\",\n  \"Tooltip\",\n  \"SwitchThumb\"\n];\nconst numbered = (prefix, count) => Array.from({ length: count }, (_, index) => `${prefix}-${index + 1}`);\nconst baseThemeNames = schemes.flatMap((scheme) => [\n  scheme,\n  `${scheme}_accent`,\n  // brand is neutral, so one per scheme covers every tint: theme resolution\n  // walks the parent name down, and `light_blue_brand` lands on `light_brand`\n  `${scheme}_brand`,\n  `${scheme}_surface1`,\n  `${scheme}_surface2`,\n  ...colors.flatMap((color) => [\n    `${scheme}_${color}`,\n    `${scheme}_${color}_accent`,\n    `${scheme}_${color}_surface1`,\n    `${scheme}_${color}_surface2`\n  ])\n]);\nconst levelThemeNames = baseThemeNames.flatMap(\n  (themeName) => themeName.endsWith(\"_surface1\") ? [themeName.replace(/_surface1$/, \"_level2\")] : themeName.endsWith(\"_surface2\") ? [themeName.replace(/_surface2$/, \"_level3\")] : themeName.endsWith(\"_accent\") || themeName.endsWith(\"_brand\") ? [`${themeName}_level2`, `${themeName}_level3`] : []\n);\nconst componentThemeNames = [...baseThemeNames, ...levelThemeNames].flatMap(\n  (parent) => componentThemes.map((component) => `${parent}_${component}`)\n);\nconst themeNames = [...baseThemeNames, ...levelThemeNames, ...componentThemeNames];\nconst alphaSteps = [\n  \"0\",\n  \"01\",\n  \"02\",\n  \"04\",\n  \"06\",\n  \"08\",\n  \"001\",\n  \"002\",\n  \"0025\",\n  \"005\",\n  \"0075\"\n];\nconst themeVariableNames = [\n  \"accent-background\",\n  \"accent-color\",\n  ...numbered(\"accent\", 12),\n  \"background\",\n  \"background-focus\",\n  \"background-hover\",\n  \"background-press\",\n  ...alphaSteps.map((step) => `background-${step}`),\n  \"border-color\",\n  \"border-color-focus\",\n  \"border-color-hover\",\n  \"border-color-press\",\n  \"color\",\n  \"color-focus\",\n  \"color-hover\",\n  \"color-press\",\n  \"color-transparent\",\n  ...alphaSteps.map((step) => `color-${step}`),\n  ...numbered(\"color\", 12),\n  \"outline-color\",\n  \"placeholder-color\",\n  \"shadow-color\",\n  ...[\"black\", \"white\"].flatMap((color) => [\n    color,\n    `${color}-0`,\n    `${color}-02`,\n    `${color}-04`,\n    `${color}-06`,\n    `${color}-08`,\n    ...numbered(color, 12)\n  ]),\n  ...paletteColors.flatMap((color) => numbered(color, 12)),\n  ...numbered(\"highlight\", 8),\n  ...numbered(\"shadow\", 8)\n];\nconst variableShape = Object.fromEntries(\n  themeVariableNames.map((name) => [name, `var(--${name})`])\n);\nconst clientThemes = Object.fromEntries(\n  themeNames.map((name) => [name, variableShape])\n);\nexport {\n  clientThemes,\n  componentThemes,\n  themeNames,\n  themeVariableNames\n};\n//# sourceMappingURL=themeMetadata.js.map\n"],"mappings":";AAAA,MAAM,UAAU,CAAC,SAAS,MAAM;AAChC,MAAM,SAAS;CAAC;CAAQ;CAAQ;CAAO;CAAU;AAAO;AACxD,MAAM,gBAAgB;CACpB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AACA,MAAM,kBAAkB;CACtB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AACA,MAAM,YAAY,QAAQ,UAAU,MAAM,KAAK,EAAE,QAAQ,MAAM,IAAI,GAAG,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG;AACxG,MAAM,iBAAiB,QAAQ,SAAS,WAAW;CACjD;CACA,GAAG,OAAO;CAGV,GAAG,OAAO;CACV,GAAG,OAAO;CACV,GAAG,OAAO;CACV,GAAG,OAAO,SAAS,UAAU;EAC3B,GAAG,OAAO,GAAG;EACb,GAAG,OAAO,GAAG,MAAM;EACnB,GAAG,OAAO,GAAG,MAAM;EACnB,GAAG,OAAO,GAAG,MAAM;CACrB,CAAC;AACH,CAAC;AACD,MAAM,kBAAkB,eAAe,SACpC,cAAc,UAAU,SAAS,WAAW,IAAI,CAAC,UAAU,QAAQ,cAAc,SAAS,CAAC,IAAI,UAAU,SAAS,WAAW,IAAI,CAAC,UAAU,QAAQ,cAAc,SAAS,CAAC,IAAI,UAAU,SAAS,SAAS,KAAK,UAAU,SAAS,QAAQ,IAAI,CAAC,GAAG,UAAU,UAAU,GAAG,UAAU,QAAQ,IAAI,CAAC,CACrS;AACA,MAAM,sBAAsB,CAAC,GAAG,gBAAgB,GAAG,eAAe,CAAC,CAAC,SACjE,WAAW,gBAAgB,KAAK,cAAc,GAAG,OAAO,GAAG,WAAW,CACzE;AACA,MAAM,aAAa;CAAC,GAAG;CAAgB,GAAG;CAAiB,GAAG;AAAmB;AACjF,MAAM,aAAa;CACjB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AACA,MAAM,qBAAqB;CACzB;CACA;CACA,GAAG,SAAS,UAAU,EAAE;CACxB;CACA;CACA;CACA;CACA,GAAG,WAAW,KAAK,SAAS,cAAc,MAAM;CAChD;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA,GAAG,WAAW,KAAK,SAAS,SAAS,MAAM;CAC3C,GAAG,SAAS,SAAS,EAAE;CACvB;CACA;CACA;CACA,GAAG,CAAC,SAAS,OAAO,CAAC,CAAC,SAAS,UAAU;EACvC;EACA,GAAG,MAAM;EACT,GAAG,MAAM;EACT,GAAG,MAAM;EACT,GAAG,MAAM;EACT,GAAG,MAAM;EACT,GAAG,SAAS,OAAO,EAAE;CACvB,CAAC;CACD,GAAG,cAAc,SAAS,UAAU,SAAS,OAAO,EAAE,CAAC;CACvD,GAAG,SAAS,aAAa,CAAC;CAC1B,GAAG,SAAS,UAAU,CAAC;AACzB;AACA,MAAM,gBAAgB,OAAO,YAC3B,mBAAmB,KAAK,SAAS,CAAC,MAAM,SAAS,KAAK,EAAE,CAAC,CAC3D;AACA,MAAM,eAAe,OAAO,YAC1B,WAAW,KAAK,SAAS,CAAC,MAAM,aAAa,CAAC,CAChD"}

package/dist/esm/themes.mjs

@@ -14,6 +14,12 @@ for (const [themeName, theme] of Object.entries(selectedThemes)) {
 		selectedThemes[`${themeName}_level3`] = theme;
 	}
 }
+for (const scheme of ["light", "dark"]) {
+	const inverse = selectedThemes[scheme === "light" ? "dark" : "light"];
+	selectedThemes[`${scheme}_brand`] = inverse;
+	selectedThemes[`${scheme}_brand_level2`] = inverse;
+	selectedThemes[`${scheme}_brand_level3`] = inverse;
+}
 for (const themeName of themeNames) {
 	const component = componentThemes.find((name) => themeName.endsWith(`_${name}`));
 	if (!component || selectedThemes[themeName]) continue;
@@ -22,7 +28,33 @@ for (const themeName of themeNames) {
 		selectedThemes[themeName] = selectedThemes[parentName];
 	}
 }
-const themes = toV6Themes(selectedThemes);
+const MAX_LIGHT_BORDER_GAP = 8;
+const hsla = /^hsla\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%\s*,\s*([\d.]+)\s*\)$/;
+const softenLightBorder = (theme) => {
+	const background = hsla.exec(theme.background);
+	const border = hsla.exec(theme["border-color"]);
+	if (!background || !border) return theme;
+	const backgroundLightness = Number(background[3]);
+	const borderLightness = Number(border[3]);
+	if (backgroundLightness <= 50) return theme;
+	const gap = backgroundLightness - borderLightness;
+	if (gap <= MAX_LIGHT_BORDER_GAP) return theme;
+	const lightness = backgroundLightness - MAX_LIGHT_BORDER_GAP;
+	return {
+		...theme,
+		"border-color": `hsla(${border[1]}, ${border[2]}%, ${lightness}%, ${border[4]})`
+	};
+};
+const v6Themes = toV6Themes(selectedThemes);
+const edited = /* @__PURE__ */ new Map();
+const themes = Object.fromEntries(Object.entries(v6Themes).map(([themeName, theme]) => {
+	let next = edited.get(theme);
+	if (!next) {
+		next = softenLightBorder(theme);
+		edited.set(theme, next);
+	}
+	return [themeName, next];
+}));
 
 export { themes };
 //# sourceMappingURL=themes.mjs.map

package/dist/esm/themes.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"themes.js","names":["v5Themes"],"sources":["esm/themes.js"],"sourcesContent":["import { toV6Themes } from \"@tamagui/config/v6-base\";\nimport { themes as v5Themes } from \"@tamagui/themes/v5-subtle\";\nimport { componentThemes, themeNames } from \"./themeMetadata\";\nconst themeNameSet = new Set(themeNames);\nconst selectedThemes = Object.fromEntries(\n  Object.entries(v5Themes).filter(([themeName]) => themeNameSet.has(themeName))\n);\nfor (const [themeName, theme] of Object.entries(selectedThemes)) {\n  if (themeName.endsWith(\"_surface1\")) {\n    selectedThemes[themeName.replace(/_surface1$/, \"_level2\")] = theme;\n  } else if (themeName.endsWith(\"_surface2\")) {\n    selectedThemes[themeName.replace(/_surface2$/, \"_level3\")] = theme;\n  } else if (themeName.endsWith(\"_accent\")) {\n    selectedThemes[`${themeName}_level2`] = theme;\n    selectedThemes[`${themeName}_level3`] = theme;\n  }\n}\nfor (const themeName of themeNames) {\n  const component = componentThemes.find((name) => themeName.endsWith(`_${name}`));\n  if (!component || selectedThemes[themeName]) continue;\n  const parentName = themeName.slice(0, -(component.length + 1));\n  if (selectedThemes[parentName]) {\n    selectedThemes[themeName] = selectedThemes[parentName];\n  }\n}\nconst themes = toV6Themes(selectedThemes);\nexport {\n  themes\n};\n//# sourceMappingURL=themes.js.map\n"],"mappings":";;;;;AAGA,MAAM,eAAe,IAAI,IAAI,UAAU;AACvC,MAAM,iBAAiB,OAAO,YAC5B,OAAO,QAAQA,QAAQ,CAAC,CAAC,QAAQ,CAAC,eAAe,aAAa,IAAI,SAAS,CAAC,CAC9E;AACA,KAAK,MAAM,CAAC,WAAW,UAAU,OAAO,QAAQ,cAAc,GAAG;CAC/D,IAAI,UAAU,SAAS,WAAW,GAAG;EACnC,eAAe,UAAU,QAAQ,cAAc,SAAS,KAAK;CAC/D,OAAO,IAAI,UAAU,SAAS,WAAW,GAAG;EAC1C,eAAe,UAAU,QAAQ,cAAc,SAAS,KAAK;CAC/D,OAAO,IAAI,UAAU,SAAS,SAAS,GAAG;EACxC,eAAe,GAAG,UAAU,YAAY;EACxC,eAAe,GAAG,UAAU,YAAY;CAC1C;AACF;AACA,KAAK,MAAM,aAAa,YAAY;CAClC,MAAM,YAAY,gBAAgB,MAAM,SAAS,UAAU,SAAS,IAAI,MAAM,CAAC;CAC/E,IAAI,CAAC,aAAa,eAAe,YAAY;CAC7C,MAAM,aAAa,UAAU,MAAM,GAAG,EAAE,UAAU,SAAS,EAAE;CAC7D,IAAI,eAAe,aAAa;EAC9B,eAAe,aAAa,eAAe;CAC7C;AACF;AACA,MAAM,SAAS,WAAW,cAAc"}
+{"version":3,"file":"themes.js","names":["v5Themes"],"sources":["esm/themes.js"],"sourcesContent":["import { toV6Themes } from \"@tamagui/config/v6-base\";\nimport { themes as v5Themes } from \"@tamagui/themes/v5-subtle\";\nimport { componentThemes, themeNames } from \"./themeMetadata\";\nconst themeNameSet = new Set(themeNames);\nconst selectedThemes = Object.fromEntries(\n  Object.entries(v5Themes).filter(([themeName]) => themeNameSet.has(themeName))\n);\nfor (const [themeName, theme] of Object.entries(selectedThemes)) {\n  if (themeName.endsWith(\"_surface1\")) {\n    selectedThemes[themeName.replace(/_surface1$/, \"_level2\")] = theme;\n  } else if (themeName.endsWith(\"_surface2\")) {\n    selectedThemes[themeName.replace(/_surface2$/, \"_level3\")] = theme;\n  } else if (themeName.endsWith(\"_accent\")) {\n    selectedThemes[`${themeName}_level2`] = theme;\n    selectedThemes[`${themeName}_level3`] = theme;\n  }\n}\nfor (const scheme of [\"light\", \"dark\"]) {\n  const inverse = selectedThemes[scheme === \"light\" ? \"dark\" : \"light\"];\n  selectedThemes[`${scheme}_brand`] = inverse;\n  selectedThemes[`${scheme}_brand_level2`] = inverse;\n  selectedThemes[`${scheme}_brand_level3`] = inverse;\n}\nfor (const themeName of themeNames) {\n  const component = componentThemes.find((name) => themeName.endsWith(`_${name}`));\n  if (!component || selectedThemes[themeName]) continue;\n  const parentName = themeName.slice(0, -(component.length + 1));\n  if (selectedThemes[parentName]) {\n    selectedThemes[themeName] = selectedThemes[parentName];\n  }\n}\nconst MAX_LIGHT_BORDER_GAP = 8;\nconst hsla = /^hsla\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)%\\s*,\\s*([\\d.]+)%\\s*,\\s*([\\d.]+)\\s*\\)$/;\nconst softenLightBorder = (theme) => {\n  const background = hsla.exec(theme.background);\n  const border = hsla.exec(theme[\"border-color\"]);\n  if (!background || !border) return theme;\n  const backgroundLightness = Number(background[3]);\n  const borderLightness = Number(border[3]);\n  if (backgroundLightness <= 50) return theme;\n  const gap = backgroundLightness - borderLightness;\n  if (gap <= MAX_LIGHT_BORDER_GAP) return theme;\n  const lightness = backgroundLightness - MAX_LIGHT_BORDER_GAP;\n  return {\n    ...theme,\n    \"border-color\": `hsla(${border[1]}, ${border[2]}%, ${lightness}%, ${border[4]})`\n  };\n};\nconst v6Themes = toV6Themes(selectedThemes);\nconst edited = /* @__PURE__ */ new Map();\nconst themes = Object.fromEntries(\n  Object.entries(v6Themes).map(([themeName, theme]) => {\n    let next = edited.get(theme);\n    if (!next) {\n      next = softenLightBorder(theme);\n      edited.set(theme, next);\n    }\n    return [themeName, next];\n  })\n);\nexport {\n  themes\n};\n//# sourceMappingURL=themes.js.map\n"],"mappings":";;;;;AAGA,MAAM,eAAe,IAAI,IAAI,UAAU;AACvC,MAAM,iBAAiB,OAAO,YAC5B,OAAO,QAAQA,QAAQ,CAAC,CAAC,QAAQ,CAAC,eAAe,aAAa,IAAI,SAAS,CAAC,CAC9E;AACA,KAAK,MAAM,CAAC,WAAW,UAAU,OAAO,QAAQ,cAAc,GAAG;CAC/D,IAAI,UAAU,SAAS,WAAW,GAAG;EACnC,eAAe,UAAU,QAAQ,cAAc,SAAS,KAAK;CAC/D,OAAO,IAAI,UAAU,SAAS,WAAW,GAAG;EAC1C,eAAe,UAAU,QAAQ,cAAc,SAAS,KAAK;CAC/D,OAAO,IAAI,UAAU,SAAS,SAAS,GAAG;EACxC,eAAe,GAAG,UAAU,YAAY;EACxC,eAAe,GAAG,UAAU,YAAY;CAC1C;AACF;AACA,KAAK,MAAM,UAAU,CAAC,SAAS,MAAM,GAAG;CACtC,MAAM,UAAU,eAAe,WAAW,UAAU,SAAS;CAC7D,eAAe,GAAG,OAAO,WAAW;CACpC,eAAe,GAAG,OAAO,kBAAkB;CAC3C,eAAe,GAAG,OAAO,kBAAkB;AAC7C;AACA,KAAK,MAAM,aAAa,YAAY;CAClC,MAAM,YAAY,gBAAgB,MAAM,SAAS,UAAU,SAAS,IAAI,MAAM,CAAC;CAC/E,IAAI,CAAC,aAAa,eAAe,YAAY;CAC7C,MAAM,aAAa,UAAU,MAAM,GAAG,EAAE,UAAU,SAAS,EAAE;CAC7D,IAAI,eAAe,aAAa;EAC9B,eAAe,aAAa,eAAe;CAC7C;AACF;AACA,MAAM,uBAAuB;AAC7B,MAAM,OAAO;AACb,MAAM,qBAAqB,UAAU;CACnC,MAAM,aAAa,KAAK,KAAK,MAAM,UAAU;CAC7C,MAAM,SAAS,KAAK,KAAK,MAAM,eAAe;CAC9C,IAAI,CAAC,cAAc,CAAC,QAAQ,OAAO;CACnC,MAAM,sBAAsB,OAAO,WAAW,EAAE;CAChD,MAAM,kBAAkB,OAAO,OAAO,EAAE;CACxC,IAAI,uBAAuB,IAAI,OAAO;CACtC,MAAM,MAAM,sBAAsB;CAClC,IAAI,OAAO,sBAAsB,OAAO;CACxC,MAAM,YAAY,sBAAsB;CACxC,OAAO;EACL,GAAG;EACH,gBAAgB,QAAQ,OAAO,GAAG,IAAI,OAAO,GAAG,KAAK,UAAU,KAAK,OAAO,GAAG;CAChF;AACF;AACA,MAAM,WAAW,WAAW,cAAc;AAC1C,MAAM,yBAAyB,IAAI,IAAI;AACvC,MAAM,SAAS,OAAO,YACpB,OAAO,QAAQ,QAAQ,CAAC,CAAC,KAAK,CAAC,WAAW,WAAW;CACnD,IAAI,OAAO,OAAO,IAAI,KAAK;CAC3B,IAAI,CAAC,MAAM;EACT,OAAO,kBAAkB,KAAK;EAC9B,OAAO,IAAI,OAAO,IAAI;CACxB;CACA,OAAO,CAAC,WAAW,IAAI;AACzB,CAAC,CACH"}

package/package.json

@@ -1,6 +1,8 @@
 {
   "name": "@tamagui/tamagui-dev-config",
-  "version": "3.0.0-beta.922.1",
+  "version": "3.0.0",
+  "sideEffects": false,
+  "license": "MIT",
   "source": "src/index.ts",
   "files": [
     "src",
@@ -32,20 +34,18 @@
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@tamagui/animations-css": "3.0.0-beta.922.1",
-    "@tamagui/animations-motion": "3.0.0-beta.922.1",
-    "@tamagui/animations-reanimated": "3.0.0-beta.922.1",
-    "@tamagui/colors": "3.0.0-beta.922.1",
-    "@tamagui/config": "3.0.0-beta.922.1",
-    "@tamagui/core": "3.0.0-beta.922.1",
-    "@tamagui/font-cherry-bomb": "3.0.0-beta.922.1",
-    "@tamagui/font-inter": "3.0.0-beta.922.1",
-    "@tamagui/font-silkscreen": "3.0.0-beta.922.1",
-    "@tamagui/shorthands": "3.0.0-beta.922.1",
-    "@tamagui/themes": "3.0.0-beta.922.1"
+    "@tamagui/animations-css": "3.0.0",
+    "@tamagui/animations-motion": "3.0.0",
+    "@tamagui/animations-reanimated": "3.0.0",
+    "@tamagui/colors": "3.0.0",
+    "@tamagui/config": "3.0.0",
+    "@tamagui/core": "3.0.0",
+    "@tamagui/font-cherry-bomb": "3.0.0",
+    "@tamagui/font-inter": "3.0.0",
+    "@tamagui/themes": "3.0.0"
   },
   "devDependencies": {
-    "@tamagui/build": "3.0.0-beta.922.1",
+    "@tamagui/build": "3.0.0",
     "react": "19.2.3"
   },
   "peerDependencies": {
@@ -55,5 +55,6 @@
     "type": "git",
     "url": "git+https://github.com/tamagui/tamagui.git",
     "directory": "code/packages/tamagui-dev-config"
-  }
+  },
+  "releaseSourceCommit": "15fbca480b143f876f6975601e23a17d3f90d2ee"
 }

package/src/fonts.ts

@@ -1,17 +1,28 @@
 import { createCherryBombFont } from '@tamagui/font-cherry-bomb'
-import { createInterFont } from '@tamagui/font-inter'
-import { createSilkscreenFont } from '@tamagui/font-silkscreen'
+import { createFont } from '@tamagui/core'
 import { createGenericFont } from './createGenericFont'
 
+const isWeb = process.env.TAMAGUI_TARGET === 'web'
+
+// Contrast variable font (100-900) for UI and text, paired with Inter italic
+const contrastFamily = isWeb
+  ? '"Contrast", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
+  : 'System'
+
+// JetBrains Mono, subset to latin + punctuation as a variable font (~19kb), is
+// the only webfont left. it covers every weight from one file.
+const monoFamily = isWeb
+  ? '"JetBrains Mono", ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace'
+  : 'JetBrains Mono'
+
 export const cherryBombFont = createCherryBombFont({
-  // Cherry Bomb is a heavy rounded display face; fall back to on-brand Inter,
-  // then heavy web-safe faces, so the brief pre-load flash looks close to the
-  // real thing instead of thin default Arial.
-  family:
-    '"Cherry Bomb", "Inter", "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif',
+  // Cherry Bomb is a heavy rounded display face; fall back to heavy web-safe
+  // faces so the brief pre-load flash looks close to the real thing instead of
+  // thin default Arial.
+  family: `"Cherry Bomb", "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif`,
   // Cherry Bomb only ships weight 400 (so this doesn't change its look), but a
-  // heavy weight makes the Inter fallback render at ExtraBold (already preloaded)
-  // instead of thin, much closer to Cherry Bomb during the load flash.
+  // heavy weight makes the system fallback render bold instead of thin, much
+  // closer to Cherry Bomb during the load flash.
   weight: {
     4: '800',
   },
@@ -19,67 +30,54 @@ export const cherryBombFont = createCherryBombFont({
     true: 22.4,
   },
 })
-export const silkscreenFont = createSilkscreenFont()
-export const headingFont = createInterFont(
-  {
-    size: {
-      true: 14,
-      5: 13,
-      6: 15,
-      9: 30,
-      10: 44,
-    },
-    transform: {
-      6: 'uppercase',
-      7: 'none',
-    },
-    weight: {
-      6: '400',
-      7: '700',
-    },
-    color: {
-      6: 'color-focus',
-      7: 'color',
-    },
-    letterSpacing: {
-      5: 2,
-      6: 1,
-      7: 0,
-      8: 0,
-      9: -0.1,
-      10: -0.25,
-      11: -0.5,
-      12: -0.75,
-      14: -1,
-      15: -2,
-    },
-    // for native
-    face: {
-      700: { normal: 'InterBold' },
-      800: { normal: 'InterBold' },
-      900: { normal: 'InterBold' },
-    },
-  },
-  { sizeLineHeight: (size) => Math.round(size * 1.1 + (size < 30 ? 10 : 5)) }
-)
 
-export const bodyFont = createInterFont(
-  {
-    size: {
-      true: 14,
-    },
-    weight: {
-      1: '400',
-    },
-  },
-  {
-    sizeSize: (size) => Math.round(size),
-    sizeLineHeight: (size) => Math.round(size * 1.2 + (size >= 20 ? 12 : 8)),
+// one equation for the whole ramp instead of a hand-written table. each step is
+// a little bigger than the one before it, from 9% at the UI sizes up to 19% at
+// the display sizes, because small text wants roughly a point between steps and
+// big text wants a proportion. the table this replaced had a cliff at the top:
+// 30 to 44 between size 9 and 10, a 47% jump next to neighbours around 15%.
+const sizes = () => {
+  const out: Record<number | 'true', number> = {
+    true: 14,
   }
-)
+  let px = 11
+  for (let i = 1; i <= 16; i++) {
+    out[i] = Math.round(px)
+    px *= Math.min(1.19, 1.05 + i * 0.019)
+  }
+  return out
+}
+
+// 11 12 13 14 16 18 21 25 30 36 42 50 60 71 85 101
+const size = sizes()
+
+const lineHeights = (ratio: number, extra: number) =>
+  Object.fromEntries(
+    Object.entries(size).map(([k, v]) => [k, Math.round(v * ratio + extra)])
+  ) as typeof size
+
+export const headingFont = createFont({
+  family: contrastFamily,
+  size,
+  // eases from 1.4 at label sizes down to 1.3 at display sizes
+  lineHeight: lineHeights(1.25, 2),
+  weight: { 1: '600' },
+  letterSpacing: { 1: 0 },
+})
+
+export const bodyFont = createFont({
+  family: contrastFamily,
+  size,
+  // the old curve was size * 1.2 plus a step that jumped from 8 to 12 at size
+  // 20, so 18px came out at ratio 1.67 while 22px came out at 1.75: bigger text
+  // ended up looser than smaller text. this is monotonic and lands 16px on 25px
+  lineHeight: lineHeights(1.35, 3),
+  weight: { 1: '400' },
+  letterSpacing: { 1: 0 },
+})
 
 export const monoFont = createGenericFont(
-  `"Berkeley Mono", "ui-monospace", "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace`,
+  monoFamily,
   {
     weight: {
       1: '400',

package/src/index.ts

@@ -1,2 +1 @@
 export * from './tamagui.dev.config'
-export * from './media'

package/src/tamagui.dev.config.ts

@@ -1,10 +1,15 @@
 import { animationsCSS } from '@tamagui/config/animations-css'
 import { animationsMotion } from '@tamagui/config/animations-motion'
-import { defaultConfig } from '@tamagui/config/v5-subtle'
+// v6-base rather than v6: `defaultConfig` carries a whole theme pack the site
+// replaces with its own themes
+import {
+  createV6Config,
+  mediaQueryDefaultActive,
+  withTailwindTypeScale,
+} from '@tamagui/config/v6-base'
 import type { CreateTamaguiProps } from '@tamagui/core'
 import { setupDev } from '@tamagui/core'
-import { bodyFont, cherryBombFont, headingFont, monoFont, silkscreenFont } from './fonts'
-import { media, mediaQueryDefaultActive } from './media'
+import { bodyFont, cherryBombFont, headingFont, monoFont } from './fonts'
 import { clientThemes } from './themeMetadata'
 import { themes } from './themes'
 
@@ -12,14 +17,6 @@ setupDev({
   visualizer: true,
 })
 
-const fonts = {
-  heading: headingFont,
-  body: bodyFont,
-  mono: monoFont,
-  silkscreen: silkscreenFont,
-  cherryBomb: cherryBombFont,
-}
-
 export const animations = {
   default: animationsMotion,
   css: animationsCSS,
@@ -30,14 +27,21 @@ const configuredThemes =
     ? (clientThemes as unknown as typeof themes)
     : themes
 
+const v6 = createV6Config({ themes: configuredThemes })
+
 export const config = {
-  ...defaultConfig,
-  themes: configuredThemes,
-  fonts,
+  ...v6,
+  fonts: {
+    heading: withTailwindTypeScale(headingFont),
+    body: withTailwindTypeScale(bodyFont),
+    mono: monoFont,
+    cherryBomb: cherryBombFont,
+  },
   animations,
-  media,
+  // a copy, since the demo media below is assigned onto it
+  media: { ...v6.media },
   settings: {
-    ...defaultConfig.settings,
+    ...v6.settings,
     mediaQueryDefaultActive,
     allowedStyleValues: 'somewhat-strict-web',
     // allow both shorthands and longhand names for flexibility

package/src/themeMetadata.ts

@@ -1,5 +1,7 @@
 const schemes = ['light', 'dark']
-const colors = ['black', 'white', 'gray', 'blue', 'red', 'yellow', 'green']
+// only the tint families in @tamagui/logo, since every color here costs 192 theme
+// names (and their selectors) in the render-blocking stylesheet
+const colors = ['gray', 'blue', 'red', 'yellow', 'green']
 const paletteColors = [
   'blue',
   'gray',
@@ -27,11 +29,14 @@ export const componentThemes = [
 ]
 
 const numbered = (prefix: string, count: number) =>
-  Array.from({ length: count }, (_, index) => `${prefix}${index + 1}`)
+  Array.from({ length: count }, (_, index) => `${prefix}-${index + 1}`)
 
 const baseThemeNames = schemes.flatMap((scheme) => [
   scheme,
   `${scheme}_accent`,
+  // brand is neutral, so one per scheme covers every tint: theme resolution
+  // walks the parent name down, and `light_blue_brand` lands on `light_brand`
+  `${scheme}_brand`,
   `${scheme}_surface1`,
   `${scheme}_surface2`,
   ...colors.flatMap((color) => [
@@ -47,7 +52,7 @@ const levelThemeNames = baseThemeNames.flatMap((themeName) =>
     ? [themeName.replace(/_surface1$/, '_level2')]
     : themeName.endsWith('_surface2')
       ? [themeName.replace(/_surface2$/, '_level3')]
-      : themeName.endsWith('_accent')
+      : themeName.endsWith('_accent') || themeName.endsWith('_brand')
         ? [`${themeName}_level2`, `${themeName}_level3`]
         : []
 )
@@ -80,7 +85,7 @@ export const themeVariableNames = [
   'background-focus',
   'background-hover',
   'background-press',
-  ...alphaSteps.map((step) => `background${step}`),
+  ...alphaSteps.map((step) => `background-${step}`),
   'border-color',
   'border-color-focus',
   'border-color-hover',
@@ -90,18 +95,18 @@ export const themeVariableNames = [
   'color-hover',
   'color-press',
   'color-transparent',
-  ...alphaSteps.map((step) => `color${step}`),
+  ...alphaSteps.map((step) => `color-${step}`),
   ...numbered('color', 12),
   'outline-color',
   'placeholder-color',
   'shadow-color',
   ...['black', 'white'].flatMap((color) => [
     color,
-    `${color}0`,
-    `${color}02`,
-    `${color}04`,
-    `${color}06`,
-    `${color}08`,
+    `${color}-0`,
+    `${color}-02`,
+    `${color}-04`,
+    `${color}-06`,
+    `${color}-08`,
     ...numbered(color, 12),
   ]),
   ...paletteColors.flatMap((color) => numbered(color, 12)),

package/src/themes.ts

@@ -25,6 +25,19 @@ for (const [themeName, theme] of Object.entries(selectedThemes)) {
   }
 }
 
+// `brand` is the loudest surface in the v3 grammar, and the convention is that
+// it inverses: a brand button, checked switch or tooltip on a light page is
+// near-black with light text, the same trade shadcn makes for its primary. it
+// stays neutral under a tinted parent, so the two scheme roots are enough. the
+// bold scale does not nest, so its levels alias it rather than walking back
+// toward the page.
+for (const scheme of ['light', 'dark']) {
+  const inverse = selectedThemes[scheme === 'light' ? 'dark' : 'light']
+  selectedThemes[`${scheme}_brand`] = inverse
+  selectedThemes[`${scheme}_brand_level2`] = inverse
+  selectedThemes[`${scheme}_brand_level3`] = inverse
+}
+
 // V5's component-theme lookup stays on the active parent theme when a more
 // specific component subtheme does not exist. Materialize those fallback
 // names so a V3 nested Theme resolves identically instead of jumping back to
@@ -38,4 +51,47 @@ for (const themeName of themeNames) {
   }
 }
 
-export const themes = toV6Themes(selectedThemes)
+// V5's light gray ramp puts `border-color` on color4, twelve lightness points
+// below a 97% background, so every card, input and code block on the site is
+// outlined in #d9d9d9. Colored light themes already sit within six points of
+// their background and read fine, so rather than repaint the pack, cap how far
+// a light theme's border may fall below its own background. Dark themes are
+// left alone: a border there has to climb away from the background to show up.
+const MAX_LIGHT_BORDER_GAP = 8
+
+const hsla = /^hsla\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%\s*,\s*([\d.]+)\s*\)$/
+
+const softenLightBorder = <Theme extends Record<string, any>>(theme: Theme): Theme => {
+  const background = hsla.exec(theme.background)
+  const border = hsla.exec(theme['border-color'])
+  if (!background || !border) return theme
+
+  const backgroundLightness = Number(background[3])
+  const borderLightness = Number(border[3])
+  if (backgroundLightness <= 50) return theme
+
+  const gap = backgroundLightness - borderLightness
+  if (gap <= MAX_LIGHT_BORDER_GAP) return theme
+
+  const lightness = backgroundLightness - MAX_LIGHT_BORDER_GAP
+  return {
+    ...theme,
+    'border-color': `hsla(${border[1]}, ${border[2]}%, ${lightness}%, ${border[4]})`,
+  }
+}
+
+const v6Themes = toV6Themes(selectedThemes)
+
+// several names alias one object above, so keep that sharing through the edit
+const edited = new Map<object, object>()
+
+export const themes = Object.fromEntries(
+  Object.entries(v6Themes).map(([themeName, theme]) => {
+    let next = edited.get(theme)
+    if (!next) {
+      next = softenLightBorder(theme)
+      edited.set(theme, next)
+    }
+    return [themeName, next]
+  })
+) as typeof v6Themes

package/dist/cjs/media.cjs

@@ -1,80 +0,0 @@
-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 media_exports = {};
-__export(media_exports, {
-	demoMedia: () => demoMedia,
-	media: () => media,
-	mediaQueryDefaultActive: () => mediaQueryDefaultActive,
-	widths: () => widths
-});
-module.exports = __toCommonJS(media_exports);
-const demoMedia = [
-	500,
-	620,
-	780,
-	900
-];
-const widths = [
-	660,
-	800,
-	1020,
-	1280
-];
-const breakpoints = {
-	"2xl": 1536,
-	xl: 1280,
-	lg: 1024,
-	md: 768,
-	sm: 640,
-	xs: 460,
-	"2xs": 340
-};
-const media = {
-	"max-xs": { maxWidth: breakpoints.xs },
-	"max-2xs": { maxWidth: breakpoints["2xs"] },
-	"max-sm": { maxWidth: breakpoints.sm },
-	"max-md": { maxWidth: breakpoints.md },
-	"max-lg": { maxWidth: breakpoints.lg },
-	"max-xl": { maxWidth: breakpoints.xl },
-	"max-2xl": { maxWidth: breakpoints["2xl"] },
-	xl: { maxWidth: 1650 },
-	lg_xl: { maxWidth: 1400 },
-	lg: { maxWidth: 1280 },
-	md: { maxWidth: 1020 },
-	sm: { maxWidth: 800 },
-	xs: { maxWidth: 660 },
-	xxs: { maxWidth: 390 },
-	gtXxs: { minWidth: 390 + 1 },
-	gtXs: { minWidth: 660 + 1 },
-	gtSm: { minWidth: 800 + 1 },
-	gtMd: { minWidth: 1020 + 1 },
-	gtLg: { minWidth: 1280 + 1 },
-	gtXl: { minWidth: 1650 + 1 },
-	pointerFine: { pointer: "fine" }
-};
-const mediaQueryDefaultActive = {
-	xl: true,
-	lg: true,
-	md: true,
-	sm: true,
-	xs: true,
-	xxs: false
-};

package/dist/esm/media.mjs

@@ -1,55 +0,0 @@
-const demoMedia = [
-	500,
-	620,
-	780,
-	900
-];
-const widths = [
-	660,
-	800,
-	1020,
-	1280
-];
-const breakpoints = {
-	"2xl": 1536,
-	xl: 1280,
-	lg: 1024,
-	md: 768,
-	sm: 640,
-	xs: 460,
-	"2xs": 340
-};
-const media = {
-	"max-xs": { maxWidth: breakpoints.xs },
-	"max-2xs": { maxWidth: breakpoints["2xs"] },
-	"max-sm": { maxWidth: breakpoints.sm },
-	"max-md": { maxWidth: breakpoints.md },
-	"max-lg": { maxWidth: breakpoints.lg },
-	"max-xl": { maxWidth: breakpoints.xl },
-	"max-2xl": { maxWidth: breakpoints["2xl"] },
-	xl: { maxWidth: 1650 },
-	lg_xl: { maxWidth: 1400 },
-	lg: { maxWidth: 1280 },
-	md: { maxWidth: 1020 },
-	sm: { maxWidth: 800 },
-	xs: { maxWidth: 660 },
-	xxs: { maxWidth: 390 },
-	gtXxs: { minWidth: 390 + 1 },
-	gtXs: { minWidth: 660 + 1 },
-	gtSm: { minWidth: 800 + 1 },
-	gtMd: { minWidth: 1020 + 1 },
-	gtLg: { minWidth: 1280 + 1 },
-	gtXl: { minWidth: 1650 + 1 },
-	pointerFine: { pointer: "fine" }
-};
-const mediaQueryDefaultActive = {
-	xl: true,
-	lg: true,
-	md: true,
-	sm: true,
-	xs: true,
-	xxs: false
-};
-
-export { demoMedia, media, mediaQueryDefaultActive, widths };
-//# sourceMappingURL=media.mjs.map

package/dist/esm/media.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"media.js","names":[],"sources":["esm/media.js"],"sourcesContent":["const demoMedia = [500, 620, 780, 900];\nconst widths = [660, 800, 1020, 1280];\nconst breakpoints = {\n  \"2xl\": 1536,\n  xl: 1280,\n  lg: 1024,\n  md: 768,\n  sm: 640,\n  xs: 460,\n  \"2xs\": 340\n};\nconst media = {\n  // v4 Config\n  \"max-xs\": { maxWidth: breakpoints.xs },\n  \"max-2xs\": { maxWidth: breakpoints[\"2xs\"] },\n  \"max-sm\": { maxWidth: breakpoints.sm },\n  \"max-md\": { maxWidth: breakpoints.md },\n  \"max-lg\": { maxWidth: breakpoints.lg },\n  \"max-xl\": { maxWidth: breakpoints.xl },\n  \"max-2xl\": { maxWidth: breakpoints[\"2xl\"] },\n  // for site\n  xl: { maxWidth: 1650 },\n  // between lg and xl - for studio usage\n  lg_xl: { maxWidth: 1400 },\n  lg: { maxWidth: 1280 },\n  md: { maxWidth: 1020 },\n  sm: { maxWidth: 800 },\n  xs: { maxWidth: 660 },\n  xxs: { maxWidth: 390 },\n  gtXxs: { minWidth: 390 + 1 },\n  gtXs: { minWidth: 660 + 1 },\n  gtSm: { minWidth: 800 + 1 },\n  gtMd: { minWidth: 1020 + 1 },\n  gtLg: { minWidth: 1280 + 1 },\n  gtXl: { minWidth: 1650 + 1 },\n  pointerFine: { pointer: \"fine\" }\n};\nconst mediaQueryDefaultActive = {\n  xl: true,\n  lg: true,\n  md: true,\n  sm: true,\n  xs: true,\n  // false\n  xxs: false\n};\nexport {\n  demoMedia,\n  media,\n  mediaQueryDefaultActive,\n  widths\n};\n//# sourceMappingURL=media.js.map\n"],"mappings":";AAAA,MAAM,YAAY;CAAC;CAAK;CAAK;CAAK;AAAG;AACrC,MAAM,SAAS;CAAC;CAAK;CAAK;CAAM;AAAI;AACpC,MAAM,cAAc;CAClB,OAAO;CACP,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;AACT;AACA,MAAM,QAAQ;CAEZ,UAAU,EAAE,UAAU,YAAY,GAAG;CACrC,WAAW,EAAE,UAAU,YAAY,OAAO;CAC1C,UAAU,EAAE,UAAU,YAAY,GAAG;CACrC,UAAU,EAAE,UAAU,YAAY,GAAG;CACrC,UAAU,EAAE,UAAU,YAAY,GAAG;CACrC,UAAU,EAAE,UAAU,YAAY,GAAG;CACrC,WAAW,EAAE,UAAU,YAAY,OAAO;CAE1C,IAAI,EAAE,UAAU,KAAK;CAErB,OAAO,EAAE,UAAU,KAAK;CACxB,IAAI,EAAE,UAAU,KAAK;CACrB,IAAI,EAAE,UAAU,KAAK;CACrB,IAAI,EAAE,UAAU,IAAI;CACpB,IAAI,EAAE,UAAU,IAAI;CACpB,KAAK,EAAE,UAAU,IAAI;CACrB,OAAO,EAAE,UAAU,MAAM,EAAE;CAC3B,MAAM,EAAE,UAAU,MAAM,EAAE;CAC1B,MAAM,EAAE,UAAU,MAAM,EAAE;CAC1B,MAAM,EAAE,UAAU,OAAO,EAAE;CAC3B,MAAM,EAAE,UAAU,OAAO,EAAE;CAC3B,MAAM,EAAE,UAAU,OAAO,EAAE;CAC3B,aAAa,EAAE,SAAS,OAAO;AACjC;AACA,MAAM,0BAA0B;CAC9B,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CAEJ,KAAK;AACP"}

package/src/media.ts

@@ -1,55 +0,0 @@
-export const demoMedia = [500, 620, 780, 900]
-export const widths = [660, 800, 1020, 1280]
-
-// note order is important!
-// earlier defined = less important
-
-// v4 Config
-const breakpoints = {
-  '2xl': 1536,
-  xl: 1280,
-  lg: 1024,
-  md: 768,
-  sm: 640,
-  xs: 460,
-  '2xs': 340,
-}
-
-export const media = {
-  // v4 Config
-  'max-xs': { maxWidth: breakpoints.xs },
-  'max-2xs': { maxWidth: breakpoints['2xs'] },
-  'max-sm': { maxWidth: breakpoints.sm },
-  'max-md': { maxWidth: breakpoints.md },
-  'max-lg': { maxWidth: breakpoints.lg },
-  'max-xl': { maxWidth: breakpoints.xl },
-  'max-2xl': { maxWidth: breakpoints['2xl'] },
-  // for site
-  xl: { maxWidth: 1650 },
-  // between lg and xl - for studio usage
-  lg_xl: { maxWidth: 1400 },
-  lg: { maxWidth: 1280 },
-  md: { maxWidth: 1020 },
-  sm: { maxWidth: 800 },
-  xs: { maxWidth: 660 },
-  xxs: { maxWidth: 390 },
-  gtXxs: { minWidth: 390 + 1 },
-  gtXs: { minWidth: 660 + 1 },
-  gtSm: { minWidth: 800 + 1 },
-  gtMd: { minWidth: 1020 + 1 },
-  gtLg: { minWidth: 1280 + 1 },
-  gtXl: { minWidth: 1650 + 1 },
-  pointerFine: { pointer: 'fine' },
-} as const
-
-// note all the non "gt" ones should be true to start to match mobile-first
-// were aiming for "xs" to be the default to "gtXs" true too
-export const mediaQueryDefaultActive = {
-  xl: true,
-  lg: true,
-  md: true,
-  sm: true,
-  xs: true,
-  // false
-  xxs: false,
-}