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

package/dist/esm/media.mjs

@@ -1,90 +1,55 @@
-const demoMedia = [500, 620, 780, 900];
-const widths = [660, 800, 1020, 1280];
+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
+	"2xl": 1536,
+	xl: 1280,
+	lg: 1024,
+	md: 768,
+	sm: 640,
+	xs: 460,
+	"2xs": 340
 };
 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"]
-  },
-  // 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"
-  }
+	"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,
-  // false
-  xxs: false
+	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 +1 @@
-{"version":3,"names":["demoMedia","widths","breakpoints","xl","lg","md","sm","xs","media","maxXs","maxWidth","max2xs","maxSm","maxMd","maxLg","maxXl","max2Xl","lg_xl","xxs","gtXxs","minWidth","gtXs","gtSm","gtMd","gtLg","gtXl","pointerFine","pointer","mediaQueryDefaultActive"],"sources":["../../src/media.ts"],"sourcesContent":[null],"mappings":"AAAO,MAAMA,SAAA,GAAY,CAAC,KAAK,KAAK,KAAK,GAAG;AACrC,MAAMC,MAAA,GAAS,CAAC,KAAK,KAAK,MAAM,IAAI;AAM3C,MAAMC,WAAA,GAAc;EAClB,OAAO;EACPC,EAAA,EAAI;EACJC,EAAA,EAAI;EACJC,EAAA,EAAI;EACJC,EAAA,EAAI;EACJC,EAAA,EAAI;EACJ,OAAO;AACT;AAEO,MAAMC,KAAA,GAAQ;EAAA;EAEnBC,KAAA,EAAO;IAAEC,QAAA,EAAUR,WAAA,CAAYK;EAAG;EAClCI,MAAA,EAAQ;IAAED,QAAA,EAAUR,WAAA,CAAY,KAAK;EAAE;EACvCU,KAAA,EAAO;IAAEF,QAAA,EAAUR,WAAA,CAAYI;EAAG;EAClCO,KAAA,EAAO;IAAEH,QAAA,EAAUR,WAAA,CAAYG;EAAG;EAClCS,KAAA,EAAO;IAAEJ,QAAA,EAAUR,WAAA,CAAYE;EAAG;EAClCW,KAAA,EAAO;IAAEL,QAAA,EAAUR,WAAA,CAAYC;EAAG;EAClCa,MAAA,EAAQ;IAAEN,QAAA,EAAUR,WAAA,CAAY,KAAK;EAAE;EAAA;EAEvCC,EAAA,EAAI;IAAEO,QAAA,EAAU;EAAK;EAAA;EAErBO,KAAA,EAAO;IAAEP,QAAA,EAAU;EAAK;EACxBN,EAAA,EAAI;IAAEM,QAAA,EAAU;EAAK;EACrBL,EAAA,EAAI;IAAEK,QAAA,EAAU;EAAK;EACrBJ,EAAA,EAAI;IAAEI,QAAA,EAAU;EAAI;EACpBH,EAAA,EAAI;IAAEG,QAAA,EAAU;EAAI;EACpBQ,GAAA,EAAK;IAAER,QAAA,EAAU;EAAI;EACrBS,KAAA,EAAO;IAAEC,QAAA,EAAU,MAAM;EAAE;EAC3BC,IAAA,EAAM;IAAED,QAAA,EAAU,MAAM;EAAE;EAC1BE,IAAA,EAAM;IAAEF,QAAA,EAAU,MAAM;EAAE;EAC1BG,IAAA,EAAM;IAAEH,QAAA,EAAU,OAAO;EAAE;EAC3BI,IAAA,EAAM;IAAEJ,QAAA,EAAU,OAAO;EAAE;EAC3BK,IAAA,EAAM;IAAEL,QAAA,EAAU,OAAO;EAAE;EAC3BM,WAAA,EAAa;IAAEC,OAAA,EAAS;EAAO;AACjC;AAIO,MAAMC,uBAAA,GAA0B;EACrCzB,EAAA,EAAI;EACJC,EAAA,EAAI;EACJC,EAAA,EAAI;EACJC,EAAA,EAAI;EACJC,EAAA,EAAI;EAAA;EAEJW,GAAA,EAAK;AACP","ignoreList":[]}
+{"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/dist/esm/tamagui.dev.config.mjs

@@ -1,79 +1,48 @@
-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 { defaultConfig } from "@tamagui/config/v5-subtle";
 import { setupDev } from "@tamagui/core";
 import { bodyFont, cherryBombFont, headingFont, monoFont, silkscreenFont } 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,
+	silkscreen: silkscreenFont,
+	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
-  }
+	...defaultConfig,
+	themes: configuredThemes,
+	fonts,
+	animations,
+	media,
+	settings: {
+		...defaultConfig.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":[],"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"}

package/dist/esm/themeMetadata.mjs

@@ -0,0 +1,109 @@
+const schemes = ["light", "dark"];
+const colors = [
+	"black",
+	"white",
+	"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")] : []);
+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 = [\"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\")] : []\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,CAAC,CACpL;AACA,MAAM,sBAAsB,CAAC,GAAG,gBAAgB,GAAG,eAAe,EAAE,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,EAAE,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,25 @@
+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;
+	}
+}
+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 themes = toV6Themes(selectedThemes);
+
+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  }\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,EAAE,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;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"}

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "@tamagui/tamagui-dev-config",
-  "version": "2.7.7",
+  "version": "3.0.0-beta.643.1",
   "source": "src/index.ts",
   "files": [
     "src",
     "types",
-    "dist",
-    "motion.cjs"
+    "dist"
   ],
   "type": "module",
   "main": "dist/cjs",
@@ -21,13 +20,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,23 +32,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.643.1",
+    "@tamagui/animations-motion": "3.0.0-beta.643.1",
+    "@tamagui/animations-reanimated": "3.0.0-beta.643.1",
+    "@tamagui/colors": "3.0.0-beta.643.1",
+    "@tamagui/config": "3.0.0-beta.643.1",
+    "@tamagui/core": "3.0.0-beta.643.1",
+    "@tamagui/font-cherry-bomb": "3.0.0-beta.643.1",
+    "@tamagui/font-inter": "3.0.0-beta.643.1",
+    "@tamagui/font-silkscreen": "3.0.0-beta.643.1",
+    "@tamagui/shorthands": "3.0.0-beta.643.1",
+    "@tamagui/themes": "3.0.0-beta.643.1"
   },
   "devDependencies": {
-    "@tamagui/build": "2.7.7",
+    "@tamagui/build": "3.0.0-beta.643.1",
     "react": ">=19"
   },
   "peerDependencies": {

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

@@ -15,11 +15,15 @@ export const cherryBombFont = createCherryBombFont({
   weight: {
     4: '800',
   },
+  size: {
+    true: 22.4,
+  },
 })
 export const silkscreenFont = createSilkscreenFont()
 export const headingFont = createInterFont(
   {
     size: {
+      true: 14,
       5: 13,
       6: 15,
       9: 30,
@@ -34,8 +38,8 @@ export const headingFont = createInterFont(
       7: '700',
     },
     color: {
-      6: '$colorFocus',
-      7: '$color',
+      6: 'color-focus',
+      7: 'color',
     },
     letterSpacing: {
       5: 2,
@@ -61,6 +65,9 @@ export const headingFont = createInterFont(
 
 export const bodyFont = createInterFont(
   {
+    size: {
+      true: 14,
+    },
     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,12 @@
-import { animationsCSS } from '@tamagui/config/v5-css'
-import { animationsMotion } from '@tamagui/config/v5-motion'
-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 },
-})
+import { animationsCSS } from '@tamagui/config/animations-css'
+import { animationsMotion } from '@tamagui/config/animations-motion'
+import { defaultConfig } from '@tamagui/config/v5-subtle'
 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 { clientThemes } from './themeMetadata'
+import { themes } from './themes'
 
 setupDev({
   visualizer: true,
@@ -39,10 +25,14 @@ 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,
+  themes: configuredThemes,
   fonts,
   animations,
   media,
@@ -50,8 +40,7 @@ export const config = {
     ...defaultConfig.settings,
     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