@tamagui/tamagui-dev-config 2.7.7 → 3.0.0-beta.1091.1

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

@@ -1,79 +1,52 @@
-import { animationsCSS } from "@tamagui/config/v5-css";
-import { animationsMotion } from "@tamagui/config/v5-motion";
-import { createV5Theme, defaultConfig, subtleChildrenThemes } from "@tamagui/config/v5-subtle";
+import { animationsCSS } from "@tamagui/config/animations-css";
+import { animationsMotion } from "@tamagui/config/animations-motion";
+import { selectionStyles, settings, sizes } from "@tamagui/config/settings";
 import { setupDev } from "@tamagui/core";
-import { bodyFont, cherryBombFont, headingFont, monoFont, silkscreenFont } from "./fonts.mjs";
+import { shorthands } from "@tamagui/shorthands/v4";
+import { tokens } from "@tamagui/themes/v5";
+import { bodyFont, cherryBombFont, headingFont, monoFont } from "./fonts.mjs";
 import { media, mediaQueryDefaultActive } from "./media.mjs";
-const {
-  gray,
-  blue,
-  red,
-  yellow,
-  green
-} = subtleChildrenThemes;
-const themes = createV5Theme({
-  childrenThemes: {
-    gray,
-    blue,
-    red,
-    yellow,
-    green
-  }
-});
-setupDev({
-  visualizer: true
-});
+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
+	heading: headingFont,
+	body: bodyFont,
+	mono: monoFont,
+	cherryBomb: cherryBombFont
 };
 const animations = {
-  default: animationsMotion,
-  css: animationsCSS
+	default: animationsMotion,
+	css: animationsCSS
 };
+const configuredThemes = process.env.VITE_ENVIRONMENT === "client" ? clientThemes : themes;
 const config = {
-  ...defaultConfig,
-  themes: process.env.VITE_ENVIRONMENT === "client" ? {} : themes,
-  fonts,
-  animations,
-  media,
-  settings: {
-    ...defaultConfig.settings,
-    mediaQueryDefaultActive,
-    allowedStyleValues: "somewhat-strict-web",
-    autocompleteSpecificTokens: "except-special",
-    // Allow both shorthands and longhand names for flexibility
-    onlyAllowShorthands: false
-  }
+	shorthands,
+	tokens,
+	selectionStyles,
+	sizes,
+	themes: configuredThemes,
+	fonts,
+	animations,
+	media,
+	settings: {
+		...settings,
+		mediaQueryDefaultActive,
+		allowedStyleValues: "somewhat-strict-web",
+		onlyAllowShorthands: false
+	}
 };
 Object.assign(config.media, {
-  tiny: {
-    maxWidth: 500
-  },
-  gtTiny: {
-    minWidth: 500 + 1
-  },
-  small: {
-    maxWidth: 620
-  },
-  gtSmall: {
-    minWidth: 620 + 1
-  },
-  medium: {
-    maxWidth: 780
-  },
-  gtMedium: {
-    minWidth: 780 + 1
-  },
-  large: {
-    maxWidth: 900
-  },
-  gtLarge: {
-    minWidth: 900 + 1
-  }
+	tiny: { maxWidth: 500 },
+	gtTiny: { minWidth: 500 + 1 },
+	small: { maxWidth: 620 },
+	gtSmall: { minWidth: 620 + 1 },
+	medium: { maxWidth: 780 },
+	gtMedium: { minWidth: 780 + 1 },
+	large: { maxWidth: 900 },
+	gtLarge: { minWidth: 900 + 1 }
 });
+
 export { animations, config };
 //# sourceMappingURL=tamagui.dev.config.mjs.map

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

@@ -1 +1 @@
-{"version":3,"names":["animationsCSS","animationsMotion","createV5Theme","defaultConfig","subtleChildrenThemes","setupDev","bodyFont","cherryBombFont","headingFont","monoFont","silkscreenFont","media","mediaQueryDefaultActive","gray","blue","red","yellow","green","themes","childrenThemes","visualizer","fonts","heading","body","mono","silkscreen","cherryBomb","animations","default","css","config","process","env","VITE_ENVIRONMENT","settings","allowedStyleValues","autocompleteSpecificTokens","onlyAllowShorthands","Object","assign","tiny","maxWidth","gtTiny","minWidth","small","gtSmall","medium","gtMedium","large","gtLarge"],"sources":["../../src/tamagui.dev.config.ts"],"sourcesContent":[null],"mappings":"AAAA,SAASA,aAAA,QAAqB;AAC9B,SAASC,gBAAA,QAAwB;AACjC,SACEC,aAAA,EACAC,aAAA,EACAC,oBAAA,QACK;AAcP,SAASC,QAAA,QAAgB;AACzB,SAASC,QAAA,EAAUC,cAAA,EAAgBC,WAAA,EAAaC,QAAA,EAAUC,cAAA,QAAsB;AAChF,SAASC,KAAA,EAAOC,uBAAA,QAA+B;AAP/C,MAAM;EAAEC,IAAA;EAAMC,IAAA;EAAMC,GAAA;EAAKC,MAAA;EAAQC;AAAM,IAAIb,oBAAA;AAC3C,MAAMc,MAAA,GAAShB,aAAA,CAAc;EAC3BiB,cAAA,EAAgB;IAAEN,IAAA;IAAMC,IAAA;IAAMC,GAAA;IAAKC,MAAA;IAAQC;EAAM;AACnD,CAAC;AAMDZ,QAAA,CAAS;EACPe,UAAA,EAAY;AACd,CAAC;AAED,MAAMC,KAAA,GAAQ;EACZC,OAAA,EAASd,WAAA;EACTe,IAAA,EAAMjB,QAAA;EACNkB,IAAA,EAAMf,QAAA;EACNgB,UAAA,EAAYf,cAAA;EACZgB,UAAA,EAAYnB;AACd;AAEO,MAAMoB,UAAA,GAAa;EACxBC,OAAA,EAAS3B,gBAAA;EACT4B,GAAA,EAAK7B;AACP;AAGO,MAAM8B,MAAA,GAAS;EACpB,GAAG3B,aAAA;EACHe,MAAA,EAAQa,OAAA,CAAQC,GAAA,CAAIC,gBAAA,KAAqB,WAAY,CAAC,IAAsBf,MAAA;EAC5EG,KAAA;EACAM,UAAA;EACAhB,KAAA;EACAuB,QAAA,EAAU;IACR,GAAG/B,aAAA,CAAc+B,QAAA;IACjBtB,uBAAA;IACAuB,kBAAA,EAAoB;IACpBC,0BAAA,EAA4B;IAAA;IAE5BC,mBAAA,EAAqB;EACvB;AACF;AAGAC,MAAA,CAAOC,MAAA,CAAOT,MAAA,CAAOnB,KAAA,EAAO;EAC1B6B,IAAA,EAAM;IAAEC,QAAA,EAAU;EAAI;EACtBC,MAAA,EAAQ;IAAEC,QAAA,EAAU,MAAM;EAAE;EAC5BC,KAAA,EAAO;IAAEH,QAAA,EAAU;EAAI;EACvBI,OAAA,EAAS;IAAEF,QAAA,EAAU,MAAM;EAAE;EAC7BG,MAAA,EAAQ;IAAEL,QAAA,EAAU;EAAI;EACxBM,QAAA,EAAU;IAAEJ,QAAA,EAAU,MAAM;EAAE;EAC9BK,KAAA,EAAO;IAAEP,QAAA,EAAU;EAAI;EACvBQ,OAAA,EAAS;IAAEN,QAAA,EAAU,MAAM;EAAE;AAC/B,CAAC","ignoreList":[]}
+{"version":3,"file":"tamagui.dev.config.js","names":["defaultSettings"],"sources":["esm/tamagui.dev.config.js"],"sourcesContent":["import { animationsCSS } from \"@tamagui/config/animations-css\";\nimport { animationsMotion } from \"@tamagui/config/animations-motion\";\nimport {\n  selectionStyles,\n  settings as defaultSettings,\n  sizes\n} from \"@tamagui/config/settings\";\nimport { setupDev } from \"@tamagui/core\";\nimport { shorthands } from \"@tamagui/shorthands/v4\";\nimport { tokens } from \"@tamagui/themes/v5\";\nimport { bodyFont, cherryBombFont, headingFont, monoFont } 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  cherryBomb: cherryBombFont\n};\nconst animations = {\n  default: animationsMotion,\n  css: animationsCSS\n};\nconst configuredThemes = process.env.VITE_ENVIRONMENT === \"client\" ? clientThemes : themes;\nconst config = {\n  shorthands,\n  tokens,\n  selectionStyles,\n  sizes,\n  themes: configuredThemes,\n  fonts,\n  animations,\n  media,\n  settings: {\n    ...defaultSettings,\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":";;;;;;;;;;;;AAcA,SAAS,EACP,YAAY,KACd,CAAC;AACD,MAAM,QAAQ;CACZ,SAAS;CACT,MAAM;CACN,MAAM;CACN,YAAY;AACd;AACA,MAAM,aAAa;CACjB,SAAS;CACT,KAAK;AACP;AACA,MAAM,mBAAmB,QAAQ,IAAI,qBAAqB,WAAW,eAAe;AACpF,MAAM,SAAS;CACb;CACA;CACA;CACA;CACA,QAAQ;CACR;CACA;CACA;CACA,UAAU;EACR,GAAGA;EACH;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

@@ -0,0 +1,107 @@
+const schemes = ["light", "dark"];
+const colors = [
+	"gray",
+	"blue",
+	"red",
+	"yellow",
+	"green"
+];
+const paletteColors = [
+	"blue",
+	"gray",
+	"green",
+	"neutral",
+	"orange",
+	"pink",
+	"purple",
+	"red",
+	"teal",
+	"yellow"
+];
+const componentThemes = [
+	"Button",
+	"Input",
+	"Progress",
+	"ProgressIndicator",
+	"Slider",
+	"SliderActive",
+	"SliderThumb",
+	"Switch",
+	"TextArea",
+	"Tooltip",
+	"SwitchThumb"
+];
+const numbered = (prefix, count) => Array.from({ length: count }, (_, index) => `${prefix}${index + 1}`);
+const baseThemeNames = schemes.flatMap((scheme) => [
+	scheme,
+	`${scheme}_accent`,
+	`${scheme}_surface1`,
+	`${scheme}_surface2`,
+	...colors.flatMap((color) => [
+		`${scheme}_${color}`,
+		`${scheme}_${color}_accent`,
+		`${scheme}_${color}_surface1`,
+		`${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 componentThemeNames = [...baseThemeNames, ...levelThemeNames].flatMap((parent) => componentThemes.map((component) => `${parent}_${component}`));
+const themeNames = [
+	...baseThemeNames,
+	...levelThemeNames,
+	...componentThemeNames
+];
+const alphaSteps = [
+	"0",
+	"01",
+	"02",
+	"04",
+	"06",
+	"08",
+	"001",
+	"002",
+	"0025",
+	"005",
+	"0075"
+];
+const themeVariableNames = [
+	"accent-background",
+	"accent-color",
+	...numbered("accent", 12),
+	"background",
+	"background-focus",
+	"background-hover",
+	"background-press",
+	...alphaSteps.map((step) => `background${step}`),
+	"border-color",
+	"border-color-focus",
+	"border-color-hover",
+	"border-color-press",
+	"color",
+	"color-focus",
+	"color-hover",
+	"color-press",
+	"color-transparent",
+	...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`,
+		...numbered(color, 12)
+	]),
+	...paletteColors.flatMap((color) => numbered(color, 12)),
+	...numbered("highlight", 8),
+	...numbered("shadow", 8)
+];
+const variableShape = Object.fromEntries(themeVariableNames.map((name) => [name, `var(--${name})`]));
+const clientThemes = Object.fromEntries(themeNames.map((name) => [name, variableShape]));
+
+export { clientThemes, componentThemes, themeNames, themeVariableNames };
+//# sourceMappingURL=themeMetadata.mjs.map

package/dist/esm/themeMetadata.mjs.map

@@ -0,0 +1 @@
+{"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  `${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;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,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"}

package/dist/esm/themes.mjs

@@ -0,0 +1,54 @@
+import { toV6Themes } from "@tamagui/config/v6-base";
+import { themes as themes$1 } from "@tamagui/themes/v5-subtle";
+import { componentThemes, themeNames } from "./themeMetadata.mjs";
+
+const themeNameSet = new Set(themeNames);
+const selectedThemes = Object.fromEntries(Object.entries(themes$1).filter(([themeName]) => themeNameSet.has(themeName)));
+for (const [themeName, theme] of Object.entries(selectedThemes)) {
+	if (themeName.endsWith("_surface1")) {
+		selectedThemes[themeName.replace(/_surface1$/, "_level2")] = theme;
+	} else if (themeName.endsWith("_surface2")) {
+		selectedThemes[themeName.replace(/_surface2$/, "_level3")] = theme;
+	} else if (themeName.endsWith("_accent")) {
+		selectedThemes[`${themeName}_level2`] = theme;
+		selectedThemes[`${themeName}_level3`] = theme;
+	}
+}
+for (const themeName of themeNames) {
+	const component = componentThemes.find((name) => themeName.endsWith(`_${name}`));
+	if (!component || selectedThemes[themeName]) continue;
+	const parentName = themeName.slice(0, -(component.length + 1));
+	if (selectedThemes[parentName]) {
+		selectedThemes[themeName] = selectedThemes[parentName];
+	}
+}
+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 softened = /* @__PURE__ */ new Map();
+const themes = Object.fromEntries(Object.entries(v6Themes).map(([themeName, theme]) => {
+	let next = softened.get(theme);
+	if (!next) {
+		next = softenLightBorder(theme);
+		softened.set(theme, next);
+	}
+	return [themeName, next];
+}));
+
+export { themes };
+//# sourceMappingURL=themes.mjs.map

package/dist/esm/themes.mjs.map

@@ -0,0 +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 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 softened = /* @__PURE__ */ new Map();\nconst themes = Object.fromEntries(\n  Object.entries(v6Themes).map(([themeName, theme]) => {\n    let next = softened.get(theme);\n    if (!next) {\n      next = softenLightBorder(theme);\n      softened.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,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,2BAA2B,IAAI,IAAI;AACzC,MAAM,SAAS,OAAO,YACpB,OAAO,QAAQ,QAAQ,CAAC,CAAC,KAAK,CAAC,WAAW,WAAW;CACnD,IAAI,OAAO,SAAS,IAAI,KAAK;CAC7B,IAAI,CAAC,MAAM;EACT,OAAO,kBAAkB,KAAK;EAC9B,SAAS,IAAI,OAAO,IAAI;CAC1B;CACA,OAAO,CAAC,WAAW,IAAI;AACzB,CAAC,CACH"}

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@tamagui/tamagui-dev-config",
-  "version": "2.7.7",
+  "version": "3.0.0-beta.1091.1",
+  "sideEffects": false,
+  "license": "MIT",
   "source": "src/index.ts",
   "files": [
     "src",
     "types",
-    "dist",
-    "motion.cjs"
+    "dist"
   ],
   "type": "module",
   "main": "dist/cjs",
@@ -21,13 +22,6 @@
       "import": "./dist/esm/index.mjs",
       "require": "./dist/cjs/index.cjs",
       "default": "./dist/esm/index.mjs"
-    },
-    "./motion": {
-      "types": "./src/animations.motion.ts",
-      "browser": "./dist/esm/animations.motion.mjs",
-      "module": "./dist/esm/animations.motion.mjs",
-      "import": "./dist/esm/animations.motion.mjs",
-      "require": "./dist/cjs/animations.motion.cjs"
     }
   },
   "publishConfig": {
@@ -40,24 +34,20 @@
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@tamagui/animations-css": "2.7.7",
-    "@tamagui/animations-moti": "2.7.7",
-    "@tamagui/animations-motion": "2.7.7",
-    "@tamagui/animations-reanimated": "2.7.7",
-    "@tamagui/colors": "2.7.7",
-    "@tamagui/config": "2.7.7",
-    "@tamagui/core": "2.7.7",
-    "@tamagui/font-cherry-bomb": "2.7.7",
-    "@tamagui/font-inter": "2.7.7",
-    "@tamagui/font-silkscreen": "2.7.7",
-    "@tamagui/shorthands": "2.7.7",
-    "@tamagui/theme-builder": "2.7.7",
-    "@tamagui/themes": "2.7.7",
-    "color2k": "^2.0.2"
+    "@tamagui/animations-css": "3.0.0-beta.1091.1",
+    "@tamagui/animations-motion": "3.0.0-beta.1091.1",
+    "@tamagui/animations-reanimated": "3.0.0-beta.1091.1",
+    "@tamagui/colors": "3.0.0-beta.1091.1",
+    "@tamagui/config": "3.0.0-beta.1091.1",
+    "@tamagui/core": "3.0.0-beta.1091.1",
+    "@tamagui/font-cherry-bomb": "3.0.0-beta.1091.1",
+    "@tamagui/font-inter": "3.0.0-beta.1091.1",
+    "@tamagui/shorthands": "3.0.0-beta.1091.1",
+    "@tamagui/themes": "3.0.0-beta.1091.1"
   },
   "devDependencies": {
-    "@tamagui/build": "2.7.7",
-    "react": ">=19"
+    "@tamagui/build": "3.0.0-beta.1091.1",
+    "react": "19.2.3"
   },
   "peerDependencies": {
     "react": ">=19"

package/src/createGenericFont.ts

@@ -20,15 +20,15 @@ const genericFontSizes = {
   16: 124,
 } as const
 
-export function createGenericFont<A extends GenericFont<keyof typeof genericFontSizes>>(
+export function createGenericFont(
   family: string,
-  font: Partial<A> = {},
+  font: Partial<GenericFont<keyof typeof genericFontSizes>> = {},
   {
     sizeLineHeight = (val) => val * 1.35,
   }: {
     sizeLineHeight?: (val: number) => number
   } = {}
-): A {
+) {
   const size = font.size || genericFontSizes
   return createFont({
     family,
@@ -38,6 +38,6 @@ export function createGenericFont<A extends GenericFont<keyof typeof genericFont
     ) as typeof size,
     weight: { 0: '300' },
     letterSpacing: { 4: 0 },
-    ...(font as any),
+    ...font,
   })
 }

package/src/fonts.ts

@@ -1,25 +1,43 @@
 import { createCherryBombFont } from '@tamagui/font-cherry-bomb'
 import { createInterFont } from '@tamagui/font-inter'
-import { createSilkscreenFont } from '@tamagui/font-silkscreen'
 import { createGenericFont } from './createGenericFont'
 
+const isWeb = process.env.TAMAGUI_TARGET === 'web'
+
+// Inter 4.1, subset to latin + latin-1 + punctuation as a variable font (~54kb),
+// covering weights 200-900 from one file. it's font-display: swap behind the OS
+// UI face, so first paint never waits on it.
+const interFamily = isWeb
+  ? '"Inter", -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',
   },
+  size: {
+    true: 22.4,
+  },
 })
-export const silkscreenFont = createSilkscreenFont()
+
 export const headingFont = createInterFont(
   {
+    family: interFamily,
     size: {
+      true: 14,
       5: 13,
       6: 15,
       9: 30,
@@ -34,26 +52,20 @@ export const headingFont = createInterFont(
       7: '700',
     },
     color: {
-      6: '$colorFocus',
-      7: '$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' },
+      9: 0,
+      10: 0,
+      11: 0,
+      12: 0,
+      14: 0,
+      15: 0,
     },
   },
   { sizeLineHeight: (size) => Math.round(size * 1.1 + (size < 30 ? 10 : 5)) }
@@ -61,6 +73,10 @@ export const headingFont = createInterFont(
 
 export const bodyFont = createInterFont(
   {
+    family: interFamily,
+    size: {
+      true: 14,
+    },
     weight: {
       1: '400',
     },
@@ -72,7 +88,7 @@ export const bodyFont = createInterFont(
 )
 
 export const monoFont = createGenericFont(
-  `"Berkeley Mono", "ui-monospace", "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace`,
+  monoFamily,
   {
     weight: {
       1: '400',

package/src/media.ts

@@ -17,13 +17,13 @@ const breakpoints = {
 
 export const media = {
   // v4 Config
-  maxXs: { maxWidth: breakpoints.xs },
-  max2xs: { maxWidth: breakpoints['2xs'] },
-  maxSm: { maxWidth: breakpoints.sm },
-  maxMd: { maxWidth: breakpoints.md },
-  maxLg: { maxWidth: breakpoints.lg },
-  maxXl: { maxWidth: breakpoints.xl },
-  max2Xl: { maxWidth: breakpoints['2xl'] },
+  '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

package/src/tamagui.dev.config.ts

@@ -1,26 +1,22 @@
-import { animationsCSS } from '@tamagui/config/v5-css'
-import { animationsMotion } from '@tamagui/config/v5-motion'
+import { animationsCSS } from '@tamagui/config/animations-css'
+import { animationsMotion } from '@tamagui/config/animations-motion'
+// the pieces of the v5 default config the site keeps, each from its narrowest
+// entry point. `@tamagui/config/v5-subtle` re-exports a whole theme pack, and
+// `defaultConfig` holds another, so touching either ships ~250kb of theme values
+// to the browser that the `themes:` line below then replaces.
 import {
-  createV5Theme,
-  defaultConfig,
-  subtleChildrenThemes,
-} from '@tamagui/config/v5-subtle'
-
-// only generate the accent themes the site actually uses: red/green/blue/gray/yellow
-// (the @tamagui/logo tint family). dropping orange/pink/purple/teal/neutral roughly
-// halves the render-blocking theme css. note: dropping an accent also removes its
-// color tokens (--pink10 etc.), so all $pink/$purple/$orange/$teal/$neutral usages are
-// collapsed to kept colors across the site. component themes are kept (they dedupe to
-// surfaces in css and the site shows them off). themes-as-js is still stripped to {}
-// on the client below and hydrated from css.
-const { gray, blue, red, yellow, green } = subtleChildrenThemes
-const themes = createV5Theme({
-  childrenThemes: { gray, blue, red, yellow, green },
-})
+  selectionStyles,
+  settings as defaultSettings,
+  sizes,
+} from '@tamagui/config/settings'
 import type { CreateTamaguiProps } from '@tamagui/core'
 import { setupDev } from '@tamagui/core'
-import { bodyFont, cherryBombFont, headingFont, monoFont, silkscreenFont } from './fonts'
+import { shorthands } from '@tamagui/shorthands/v4'
+import { tokens } from '@tamagui/themes/v5'
+import { bodyFont, cherryBombFont, headingFont, monoFont } from './fonts'
 import { media, mediaQueryDefaultActive } from './media'
+import { clientThemes } from './themeMetadata'
+import { themes } from './themes'
 
 setupDev({
   visualizer: true,
@@ -30,7 +26,6 @@ const fonts = {
   heading: headingFont,
   body: bodyFont,
   mono: monoFont,
-  silkscreen: silkscreenFont,
   cherryBomb: cherryBombFont,
 }
 
@@ -39,19 +34,25 @@ export const animations = {
   css: animationsCSS,
 }
 
-// Use v5 config as base, but with tamagui.dev custom themes
+const configuredThemes =
+  process.env.VITE_ENVIRONMENT === 'client'
+    ? (clientThemes as unknown as typeof themes)
+    : themes
+
 export const config = {
-  ...defaultConfig,
-  themes: process.env.VITE_ENVIRONMENT === 'client' ? ({} as typeof themes) : themes,
+  shorthands,
+  tokens,
+  selectionStyles,
+  sizes,
+  themes: configuredThemes,
   fonts,
   animations,
   media,
   settings: {
-    ...defaultConfig.settings,
+    ...defaultSettings,
     mediaQueryDefaultActive,
     allowedStyleValues: 'somewhat-strict-web',
-    autocompleteSpecificTokens: 'except-special',
-    // Allow both shorthands and longhand names for flexibility
+    // allow both shorthands and longhand names for flexibility
     onlyAllowShorthands: false,
   },
 } satisfies CreateTamaguiProps