@tamagui/themes 2.0.0-1768636514428 → 2.0.0-1768696252732

package/dist/esm/v5-palettes.native.js

@@ -0,0 +1,92 @@
+import { blue, blueDark, gray, grayDark, green, greenDark, red, redDark, yellow, yellowDark } from "@tamagui/colors";
+var darkPalette = ["#050505", "#151515", "#191919", "#232323", "#282828", "#323232", "#424242", "#494949", "#545454", "#626262", "#a5a5a5", "#fff"],
+  lightPalette = ["#fff", "#f8f8f8", "hsl(0, 0%, 93%)", "hsl(0, 0%, 87%)", "hsl(0, 0%, 80%)", "hsl(0, 0%, 74%)", "hsl(0, 0%, 68%)", "hsl(0, 0%, 60%)", "hsl(0, 0%, 48%)", "hsl(0, 0%, 38%)", "hsl(0, 0%, 20%)", "hsl(0, 0%, 2%)"],
+  neutralPalette = ["hsl(0, 0%, 68%)", "hsl(0, 0%, 65%)", "hsl(0, 0%, 62%)", "hsl(0, 0%, 59%)", "hsl(0, 0%, 56%)", "hsl(0, 0%, 53%)", "hsl(0, 0%, 50%)", "hsl(0, 0%, 47%)", "hsl(0, 0%, 44%)", "hsl(0, 0%, 41%)", "hsl(0, 0%, 38%)", "hsl(0, 0%, 32%)"],
+  whiteBlack = {
+    white: "rgba(255,255,255,1)",
+    white0: "rgba(255,255,255,0)",
+    white02: "rgba(255,255,255,0.2)",
+    white04: "rgba(255,255,255,0.4)",
+    white06: "rgba(255,255,255,0.6)",
+    white08: "rgba(255,255,255,0.8)",
+    black: "rgba(0,0,0,1)",
+    black0: "rgba(0,0,0,0)",
+    black02: "rgba(0,0,0,0.2)",
+    black04: "rgba(0,0,0,0.4)",
+    black06: "rgba(0,0,0,0.6)",
+    black08: "rgba(0,0,0,0.8)"
+  },
+  darkShadows = {
+    shadow1: "rgba(0,0,0,0.1)",
+    shadow2: "rgba(0,0,0,0.18)",
+    shadow3: "rgba(0,0,0,0.25)",
+    shadow4: "rgba(0,0,0,0.4)",
+    shadow5: "rgba(0,0,0,0.55)",
+    shadow6: "rgba(0,0,0,0.66)"
+  },
+  lightShadows = {
+    shadow1: "rgba(0,0,0,0.025)",
+    shadow2: "rgba(0,0,0,0.04)",
+    shadow3: "rgba(0,0,0,0.06)",
+    shadow4: "rgba(0,0,0,0.095)",
+    shadow5: "rgba(0,0,0,0.195)",
+    shadow6: "rgba(0,0,0,0.3)"
+  },
+  blackColors = {
+    black1: darkPalette[0],
+    black2: darkPalette[1],
+    black3: darkPalette[2],
+    black4: darkPalette[3],
+    black5: darkPalette[4],
+    black6: darkPalette[5],
+    black7: darkPalette[6],
+    black8: darkPalette[7],
+    black9: darkPalette[8],
+    black10: darkPalette[9],
+    black11: darkPalette[10],
+    black12: darkPalette[11]
+  },
+  whiteColors = {
+    white1: lightPalette[0],
+    white2: lightPalette[1],
+    white3: lightPalette[2],
+    white4: lightPalette[3],
+    white5: lightPalette[4],
+    white6: lightPalette[5],
+    white7: lightPalette[6],
+    white8: lightPalette[7],
+    white9: lightPalette[8],
+    white10: lightPalette[9],
+    white11: lightPalette[10],
+    white12: lightPalette[11]
+  },
+  neutral = {
+    neutral1: neutralPalette[0],
+    neutral2: neutralPalette[1],
+    neutral3: neutralPalette[2],
+    neutral4: neutralPalette[3],
+    neutral5: neutralPalette[4],
+    neutral6: neutralPalette[5],
+    neutral7: neutralPalette[6],
+    neutral8: neutralPalette[7],
+    neutral9: neutralPalette[8],
+    neutral10: neutralPalette[9],
+    neutral11: neutralPalette[10],
+    neutral12: neutralPalette[11]
+  },
+  palettes = {
+    dark: darkPalette,
+    light: lightPalette,
+    dark_blue: Object.values(blueDark),
+    light_blue: Object.values(blue),
+    dark_gray: Object.values(grayDark),
+    light_gray: Object.values(gray),
+    dark_green: Object.values(greenDark),
+    light_green: Object.values(green),
+    dark_red: Object.values(redDark),
+    light_red: Object.values(red),
+    dark_yellow: Object.values(yellowDark),
+    light_yellow: Object.values(yellow)
+  };
+export { blackColors, darkPalette, darkShadows, lightPalette, lightShadows, neutral, neutralPalette, palettes, whiteBlack, whiteColors };
+//# sourceMappingURL=v5-palettes.native.js.map

package/dist/esm/v5-palettes.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["blue","blueDark","gray","grayDark","green","greenDark","red","redDark","yellow","yellowDark","darkPalette","lightPalette","neutralPalette","whiteBlack","white","white0","white02","white04","white06","white08","black","black0","black02","black04","black06","black08","darkShadows","shadow1","shadow2","shadow3","shadow4","shadow5","shadow6","lightShadows","blackColors","black1","black2","black3","black4","black5","black6","black7","black8","black9","black10","black11","black12","whiteColors","white1","white2","white3","white4","white5","white6","white7","white8","white9","white10","white11","white12","neutral","neutral1","neutral2","neutral3","neutral4","neutral5","neutral6","neutral7","neutral8","neutral9","neutral10","neutral11","neutral12","palettes","dark","light","dark_blue","Object","values","light_blue","dark_gray","light_gray","dark_green","light_green","dark_red","light_red","dark_yellow","light_yellow"],"sources":["../../src/v5-palettes.ts"],"sourcesContent":[null],"mappings":"AAAA,SAAAA,IAAA,EAAAC,QAAA,EAAAC,IAAA,EAAAC,QAAA,EAAAC,KAAA,EAAAC,SAAA,EAAAC,GAAA,EAAAC,OAAA,EAAAC,MAAA,EAAAC,UAAA;AAAA,IACEC,WAAA,IACA,WACA,WACA,WACA,WACA,WACA,WACA,WACA,WACA,oBACK,EAGA,SAAM,EACX;EACAC,YAAA,IACA,QACA,WACA,mBACA,mBACA,mBACA,mBACA,mBACA,mBACA,mBACA,mBACF,iBAE4B,EAC1B;EACAC,cAAA,IACA,mBACA,mBACA,mBACA,mBACA,mBACA,mBACA,mBACA,mBACA,mBACA,mBACF,iBAMa,EACX;EACAC,UAAA;IACAC,KAAA;IACAC,MAAA;IACAC,OAAA;IACAC,OAAA;IACAC,OAAA;IACAC,OAAA;IACAC,KAAA;IACAC,MAAA;IACAC,OAAA;IACAC,OAAA;IACFC,OAGa,mBAAa;IACxBC,OAAO;EAAA;EACPC,WAAQ;IACRC,OAAA,EAAS;IACTC,OAAA,EAAS;IACTC,OAAA,EAAS;IACTC,OAAA,EAAS;IACTC,OAAO;IACPC,OAAA,EAAQ;EAAA;EACRC,YAAS;IACTN,OAAA,EAAS;IACTC,OAAA,EAAS;IACTC,OAAA,EAAS;IACXC,OAEa,qBAAc;IACzBC,OAAA,EAAS;IACTC,OAAA,EAAS;EAAA;EACTE,WAAS;IACTC,MAAA,EAAAzB,WAAS;IACT0B,MAAA,EAAA1B,WAAS;IACT2B,MAAA,EAAA3B,WAAS;IACX4B,MAEa,EAAA5B,WAAe;IAC1B6B,MAAA,EAAA7B,WAAS;IACT8B,MAAA,EAAA9B,WAAS;IACT+B,MAAA,EAAA/B,WAAS;IACTgC,MAAA,EAAAhC,WAAS;IACTiC,MAAA,EAAAjC,WAAS;IACTkC,OAAA,EAASlC,WAAA;IACXmC,OAGa,EAAAnC,WAAc;IACzBoC,OAAA,EAAQpC,WAAY,CAAC;EAAA;EACrBqC,WAAQ;IACRC,MAAA,EAAQrC,YAAY,CAAC;IACrBsC,MAAA,EAAQtC,YAAY,CAAC;IACrBuC,MAAA,EAAQvC,YAAY,CAAC;IACrBwC,MAAA,EAAQxC,YAAY,CAAC;IACrByC,MAAA,EAAQzC,YAAY,CAAC;IACrB0C,MAAA,EAAQ1C,YAAY,CAAC;IACrB2C,MAAA,EAAQ3C,YAAY,CAAC;IACrB4C,MAAA,EAAA5C,YAAS,CAAY,CAAC;IACtB6C,MAAA,EAAA7C,YAAS,CAAY,EAAE;IACvB8C,OAAA,EAAS9C,YAAY,EAAE;IACzB+C,OAEa,EAAA/C,YAAc;IACzBgD,OAAA,EAAQhD,YAAa,CAAC;EAAA;EACtBiD,OAAQ;IACRC,QAAQ,EAAAjD,cAAc;IACtBkD,QAAQ,EAAAlD,cAAc;IACtBmD,QAAQ,EAAAnD,cAAc;IACtBoD,QAAQ,EAAApD,cAAc;IACtBqD,QAAQ,EAAArD,cAAc;IACtBsD,QAAQ,EAAAtD,cAAc;IACtBuD,QAAQ,EAAAvD,cAAc;IACtBwD,QAAA,EAASxD,cAAc;IACvByD,QAAA,EAASzD,cAAe;IACxB0D,SAAS,EAAA1D,cAAe;IAC1B2D,SAEa,EAAU3D,cAAA;IACrB4D,SAAA,EAAU5D,cAAe,CAAC;EAAA;EAC1B6D,QAAA,GAAU;IACVC,IAAA,EAAAhE,WAAU;IACViE,KAAA,EAAAhE,YAAU;IACViE,SAAA,EAAUC,MAAA,CAAAC,MAAA,CAAe7E,QAAC;IAC1B8E,UAAU,EAAAF,MAAA,CAAAC,MAAe,CAAC9E,IAAA;IAC1BgF,SAAA,EAAUH,MAAA,CAAAC,MAAA,CAAe3E,QAAC;IAC1B8E,UAAU,EAAAJ,MAAA,CAAAC,MAAe,CAAC5E,IAAA;IAC1BgF,UAAU,EAAAL,MAAA,CAAAC,MAAe,CAACzE,SAAA;IAC1B8E,WAAW,EAAAN,MAAA,CAAAC,MAAe,CAAC1E,KAAA;IAC3BgF,QAAA,EAAAP,MAAW,CAAAC,MAAA,CAAAvE,OAAiB;IAC5B8E,SAAA,EAAWR,MAAA,CAAAC,MAAA,CAAAxE,GAAiB;IAC9BgF,WAGa,EAAWT,MAAA,CAAAC,MAAA,CAAArE,UAAA;IACtB8E,YAAM,EAAAV,MAAA,CAAAC,MAAA,CAAAtE,MAAA;EAAA;AACC,SAEP0B,WAAA,EACAxB,WAAW,EACXgB,WAAA,EACAf,YAAY,EACZsB,YAAA,EACA2B,OAAA,EACAhD,cAAW,EACX6D,QAAA,EACA5D,UAAA,EACFkC,WAAA","ignoreList":[]}

package/dist/esm/v5.js

@@ -1,10 +1,21 @@
 import { tokens } from "./v5-tokens";
-import { createThemes } from "@tamagui/theme-builder";
+import { createThemes, defaultComponentThemes } from "@tamagui/theme-builder";
 import { themes } from "./generated-v5";
-import { createV5Theme } from "./v5-themes";
+import {
+  createV5Theme,
+  defaultChildrenThemes,
+  defaultGrandChildrenThemes,
+  defaultDarkPalette,
+  defaultLightPalette
+} from "./v5-themes";
 export {
   createThemes,
   createV5Theme,
+  defaultChildrenThemes,
+  defaultComponentThemes,
+  defaultDarkPalette,
+  defaultGrandChildrenThemes,
+  defaultLightPalette,
   themes,
   tokens
 };

package/dist/esm/v5.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/v5.tsx"],
-  "mappings": "AAAA,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,cAAc;AACvB,SAAS,qBAAqB;",
+  "mappings": "AAAA,SAAS,cAAc;AACvB,SAAS,cAAc,8BAA8B;AACrD,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;",
   "names": []
 }

package/dist/esm/v5.mjs

@@ -1,6 +1,6 @@
 import { tokens } from "./v5-tokens.mjs";
-import { createThemes } from "@tamagui/theme-builder";
+import { createThemes, defaultComponentThemes } from "@tamagui/theme-builder";
 import { themes } from "./generated-v5.mjs";
-import { createV5Theme } from "./v5-themes.mjs";
-export { createThemes, createV5Theme, themes, tokens };
+import { createV5Theme, defaultChildrenThemes, defaultGrandChildrenThemes, defaultDarkPalette, defaultLightPalette } from "./v5-themes.mjs";
+export { createThemes, createV5Theme, defaultChildrenThemes, defaultComponentThemes, defaultDarkPalette, defaultGrandChildrenThemes, defaultLightPalette, themes, tokens };
 //# sourceMappingURL=v5.mjs.map

package/dist/esm/v5.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["tokens","createThemes","themes","createV5Theme"],"sources":["../../src/v5.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,MAAA,QAAc;AACvB,SAASC,YAAA,QAAoB;AAC7B,SAASC,MAAA,QAAc;AACvB,SAASC,aAAA,QAAqB","ignoreList":[]}
+{"version":3,"names":["tokens","createThemes","defaultComponentThemes","themes","createV5Theme","defaultChildrenThemes","defaultGrandChildrenThemes","defaultDarkPalette","defaultLightPalette"],"sources":["../../src/v5.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,MAAA,QAAc;AACvB,SAASC,YAAA,EAAcC,sBAAA,QAA8B;AACrD,SAASC,MAAA,QAAc;AACvB,SACEC,aAAA,EACAC,qBAAA,EACAC,0BAAA,EACAC,kBAAA,EACAC,mBAAA,QACK","ignoreList":[]}

package/dist/esm/v5.native.js

@@ -1,6 +1,6 @@
 import { tokens } from "./v5-tokens.native.js";
-import { createThemes } from "@tamagui/theme-builder";
+import { createThemes, defaultComponentThemes } from "@tamagui/theme-builder";
 import { themes } from "./generated-v5.native.js";
-import { createV5Theme } from "./v5-themes.native.js";
-export { createThemes, createV5Theme, themes, tokens };
+import { createV5Theme, defaultChildrenThemes, defaultGrandChildrenThemes, defaultDarkPalette, defaultLightPalette } from "./v5-themes.native.js";
+export { createThemes, createV5Theme, defaultChildrenThemes, defaultComponentThemes, defaultDarkPalette, defaultGrandChildrenThemes, defaultLightPalette, themes, tokens };
 //# sourceMappingURL=v5.native.js.map

package/dist/esm/v5.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["tokens","createThemes","themes","createV5Theme"],"sources":["../../src/v5.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,MAAA,QAAc;AACvB,SAASC,YAAA,QAAoB;AAC7B,SAASC,MAAA,QAAc;AACvB,SAASC,aAAA,QAAqB","ignoreList":[]}
+{"version":3,"names":["tokens","createThemes","defaultComponentThemes","themes","createV5Theme","defaultChildrenThemes","defaultGrandChildrenThemes","defaultDarkPalette","defaultLightPalette"],"sources":["../../src/v5.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,MAAA,QAAc;AACvB,SAASC,YAAA,EAAcC,sBAAA,QAA8B;AACrD,SAASC,MAAA,QAAc;AACvB,SAAAC,aAAA,EAAAC,qBAAA,EAAAC,0BAAA,EAAAC,kBAAA,EAAAC,mBAAA;AAAA,SAEEP,YAAA,EACAG,aAAA,EACAC,qBAAA,EACAH,sBAAA,EAAAK,kBACK,E","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/themes",
-  "version": "2.0.0-1768636514428",
+  "version": "2.0.0-1768696252732",
   "type": "module",
   "types": "./types/index.d.ts",
   "main": "dist/cjs",
@@ -105,15 +105,15 @@
     }
   },
   "dependencies": {
-    "@tamagui/colors": "2.0.0-1768636514428",
-    "@tamagui/create-theme": "2.0.0-1768636514428",
-    "@tamagui/theme-builder": "2.0.0-1768636514428",
-    "@tamagui/web": "2.0.0-1768636514428",
+    "@tamagui/colors": "2.0.0-1768696252732",
+    "@tamagui/create-theme": "2.0.0-1768696252732",
+    "@tamagui/theme-builder": "2.0.0-1768696252732",
+    "@tamagui/web": "2.0.0-1768696252732",
     "color2k": "^2.0.2"
   },
   "devDependencies": {
-    "@tamagui/build": "2.0.0-1768636514428",
-    "@tamagui/cli": "2.0.0-1768636514428",
+    "@tamagui/build": "2.0.0-1768696252732",
+    "@tamagui/cli": "2.0.0-1768696252732",
     "vitest": "^4.0.4"
   },
   "publishConfig": {

package/src/defaultColorThemes.ts

@@ -0,0 +1,120 @@
+import {
+  blue,
+  blueDark,
+  gray,
+  grayDark,
+  green,
+  greenDark,
+  red,
+  redDark,
+  yellow,
+  yellowDark,
+} from '@tamagui/colors'
+import { darkPalette, lightPalette, neutralPalette } from './v5-palettes'
+
+export type ColorPalette = string[]
+
+export type ColorTheme = {
+  palette: {
+    dark: ColorPalette
+    light: ColorPalette
+  }
+}
+
+/** Creates named color object from a 12-color palette array */
+function paletteToNamedColors<Name extends string>(
+  name: Name,
+  palette: ColorPalette
+): Record<`${Name}${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12}`, string> {
+  return {
+    [`${name}1`]: palette[0]!,
+    [`${name}2`]: palette[1]!,
+    [`${name}3`]: palette[2]!,
+    [`${name}4`]: palette[3]!,
+    [`${name}5`]: palette[4]!,
+    [`${name}6`]: palette[5]!,
+    [`${name}7`]: palette[6]!,
+    [`${name}8`]: palette[7]!,
+    [`${name}9`]: palette[8]!,
+    [`${name}10`]: palette[9]!,
+    [`${name}11`]: palette[10]!,
+    [`${name}12`]: palette[11]!,
+  } as Record<`${Name}${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12}`, string>
+}
+
+/**
+ * Default color themes for v5.
+ * Each theme has a light and dark palette variant.
+ */
+export const defaultColorThemes = {
+  black: {
+    palette: {
+      dark: Object.values(darkPalette),
+      light: Object.values(darkPalette),
+    },
+  },
+  white: {
+    palette: {
+      dark: Object.values(lightPalette),
+      light: Object.values(lightPalette),
+    },
+  },
+  gray: {
+    palette: {
+      dark: Object.values(grayDark),
+      light: Object.values(gray),
+    },
+  },
+  blue: {
+    palette: {
+      dark: Object.values(blueDark),
+      light: Object.values(blue),
+    },
+  },
+  red: {
+    palette: {
+      dark: Object.values(redDark),
+      light: Object.values(red),
+    },
+  },
+  yellow: {
+    palette: {
+      dark: Object.values(yellowDark),
+      light: Object.values(yellow),
+    },
+  },
+  green: {
+    palette: {
+      dark: Object.values(greenDark),
+      light: Object.values(green),
+    },
+  },
+  neutral: {
+    palette: {
+      dark: neutralPalette,
+      light: neutralPalette,
+    },
+  },
+}
+
+export type DefaultColorThemes = typeof defaultColorThemes
+
+/**
+ * Generates the extra colors for base theme from color themes.
+ * This ensures base.extra contains named colors (blue1-12, red1-12, etc.)
+ * for all provided color themes.
+ */
+export function colorThemesToExtra<T extends Record<string, ColorTheme>>(
+  colorThemes: T,
+  scheme: 'light' | 'dark'
+): Record<string, string> {
+  const extra: Record<string, string> = {}
+
+  for (const [name, theme] of Object.entries(colorThemes)) {
+    const palette = scheme === 'light' ? theme.palette.light : theme.palette.dark
+    const namedColors = paletteToNamedColors(name, palette)
+    Object.assign(extra, namedColors)
+  }
+
+  return extra
+}

package/src/defaultGrandChildrenThemes.ts

@@ -0,0 +1,27 @@
+export type GrandChildrenThemeDefinition = {
+  template: string
+}
+
+/** Default grandchildren theme names */
+export type DefaultGrandChildrenThemeName =
+  | 'accent'
+  | 'alt1'
+  | 'alt2'
+  | 'surface1'
+  | 'surface2'
+  | 'surface3'
+
+/**
+ * Default grandchildren themes for v5.
+ * These create sub-theme variants using different templates.
+ */
+export const defaultGrandChildrenThemes = {
+  accent: { template: 'inverse' },
+  alt1: { template: 'alt1' },
+  alt2: { template: 'alt2' },
+  surface1: { template: 'surface1' },
+  surface2: { template: 'surface2' },
+  surface3: { template: 'surface3' },
+} satisfies Record<DefaultGrandChildrenThemeName, GrandChildrenThemeDefinition>
+
+export type DefaultGrandChildrenThemes = typeof defaultGrandChildrenThemes