@tamagui/themes 1.121.12-1737177163952 → 1.121.12-1737239089067

package/src/v4-createTheme.ts

@@ -146,6 +146,15 @@ export function createSimpleThemeBuilder<
   FullTheme = {
     [ThemeKey in keyof Templates['light_base'] | keyof Extra['dark']]: string
   },
+  ThemeNames extends string =
+    | 'light'
+    | 'dark'
+    | (HasAccent extends true ? 'light_accent' | 'dark_accent' : never)
+    | (keyof ChildrenThemes extends string
+        ? `${'light' | 'dark'}_${GrandChildrenThemes extends undefined
+            ? keyof ChildrenThemes
+            : NamesWithChildrenNames<keyof ChildrenThemes, keyof GrandChildrenThemes>}`
+        : never),
 >(props: {
   palettes?: Palettes
   accentTheme?: HasAccent
@@ -156,17 +165,7 @@ export function createSimpleThemeBuilder<
   extra?: Extra
 }): {
   themeBuilder: ThemeBuilder<any>
-  themes: {
-    [Key in
-      | 'light'
-      | 'dark'
-      | (HasAccent extends true ? 'light_accent' | 'dark_accent' : never)
-      | (keyof ChildrenThemes extends string
-          ? `${'light' | 'dark'}_${GrandChildrenThemes extends undefined
-              ? keyof ChildrenThemes
-              : NamesWithChildrenNames<keyof ChildrenThemes, keyof GrandChildrenThemes>}`
-          : never)]: FullTheme
-  }
+  themes: Record<ThemeNames, FullTheme>
 } {
   const {
     extra,
@@ -195,24 +194,23 @@ export function createSimpleThemeBuilder<
         nonInheritedValues: extra?.dark,
       },
     })
-    .addChildThemes(
-      palettes.light_accent
-        ? {
-            accent: [
-              {
-                parent: 'light',
-                template: 'base',
-                palette: 'light_accent',
-              },
-              {
-                parent: 'dark',
-                template: 'base',
-                palette: 'dark_accent',
-              },
-            ],
-          }
-        : {}
-    )
+
+  if (palettes.light_accent) {
+    themeBuilder = themeBuilder.addChildThemes({
+      accent: [
+        {
+          parent: 'light',
+          template: 'base',
+          palette: 'light_accent',
+        },
+        {
+          parent: 'dark',
+          template: 'base',
+          palette: 'dark_accent',
+        },
+      ],
+    })
+  }
 
   if (childrenThemes) {
     themeBuilder = themeBuilder.addChildThemes(childrenThemes, {
@@ -229,6 +227,7 @@ export function createSimpleThemeBuilder<
   if (componentThemes) {
     themeBuilder = themeBuilder.addComponentThemes(getComponentThemes(componentThemes), {
       avoidNestingWithin: [
+        'accent',
         // ...Object.keys(childrenThemes || {}),
         ...Object.keys(grandChildrenThemes || {}),
       ],

package/src/v4-tamagui.ts

@@ -1,45 +1,10 @@
-import {
-  blue,
-  blueDark,
-  gray,
-  grayDark,
-  green,
-  greenDark,
-  orange,
-  orangeDark,
-  pink,
-  pinkDark,
-  purple,
-  purpleDark,
-  red,
-  redDark,
-  yellow,
-  yellowDark,
-} from '@tamagui/colors'
+import * as Colors from '@tamagui/colors'
 import { createThemeSuite } from './v4-createTheme'
 
-const colorTokens = {
-  light: {
-    blue,
-    gray,
-    green,
-    orange,
-    pink,
-    purple,
-    red,
-    yellow,
-  },
-  dark: {
-    blue: blueDark,
-    gray: grayDark,
-    green: greenDark,
-    orange: orangeDark,
-    pink: pinkDark,
-    purple: purpleDark,
-    red: redDark,
-    yellow: yellowDark,
-  },
-}
+/**
+ * Default themes for the tamagui.dev site
+ * If you'd like to create your own themes, use `createThemeSuite`
+ */
 
 const darkPalette = [
   '#050505',
@@ -89,102 +54,97 @@ const darkShadows = {
   shadow6: 'rgba(0,0,0,0.7)',
 }
 
-/**
- * Default themes for the tamagui.dev site
- * If you'd like to create your own themes, use `createThemeSuite`
- */
-export const tamaguiThemes = createThemeSuite({
+const themes = createThemeSuite({
   base: {
     palette: {
       dark: darkPalette,
       light: lightPalette,
     },
 
-    // we set a bunch of colors like $red1 => $red1
-    // we only want to set it on the base light/dark theme
+    // for values we don't want being inherited onto sub-themes
     extra: {
       light: {
-        ...colorTokens.light.blue,
-        ...colorTokens.light.gray,
-        ...colorTokens.light.green,
-        ...colorTokens.light.orange,
-        ...colorTokens.light.pink,
-        ...colorTokens.light.purple,
-        ...colorTokens.light.red,
-        ...colorTokens.light.yellow,
+        ...Colors.blue,
+        ...Colors.gray,
+        ...Colors.green,
+        ...Colors.orange,
+        ...Colors.pink,
+        ...Colors.purple,
+        ...Colors.red,
+        ...Colors.yellow,
         ...lightShadows,
         shadowColor: lightShadows.shadow1,
       },
       dark: {
-        ...colorTokens.dark.blue,
-        ...colorTokens.dark.gray,
-        ...colorTokens.dark.green,
-        ...colorTokens.dark.orange,
-        ...colorTokens.dark.pink,
-        ...colorTokens.dark.purple,
-        ...colorTokens.dark.red,
-        ...colorTokens.dark.yellow,
+        ...Colors.blueDark,
+        ...Colors.grayDark,
+        ...Colors.greenDark,
+        ...Colors.orangeDark,
+        ...Colors.pinkDark,
+        ...Colors.purpleDark,
+        ...Colors.redDark,
+        ...Colors.yellowDark,
         ...darkShadows,
         shadowColor: darkShadows.shadow1,
       },
     },
   },
 
+  // this creates an accent theme, and an accent
   accent: {
     palette: {
-      dark: lightPalette,
-      light: darkPalette,
+      dark: [lightPalette[0], lightPalette[3], lightPalette[11]],
+      light: [darkPalette[0], darkPalette[3], darkPalette[11]],
     },
-    template: 'inverse',
   },
 
   childrenThemes: {
     gray: {
       palette: {
-        dark: Object.values(colorTokens.dark.gray),
-        light: Object.values(colorTokens.light.gray),
+        dark: Object.values(Colors.grayDark),
+        light: Object.values(Colors.gray),
       },
     },
     blue: {
       palette: {
-        dark: Object.values(colorTokens.dark.blue),
-        light: Object.values(colorTokens.light.blue),
+        dark: Object.values(Colors.blueDark),
+        light: Object.values(Colors.blue),
       },
     },
     orange: {
       palette: {
-        dark: Object.values(colorTokens.dark.orange),
-        light: Object.values(colorTokens.light.orange),
+        dark: Object.values(Colors.orangeDark),
+        light: Object.values(Colors.orange),
       },
     },
     red: {
       palette: {
-        dark: Object.values(colorTokens.dark.red),
-        light: Object.values(colorTokens.light.red),
+        dark: Object.values(Colors.redDark),
+        light: Object.values(Colors.red),
       },
     },
     yellow: {
       palette: {
-        dark: Object.values(colorTokens.dark.yellow),
-        light: Object.values(colorTokens.light.yellow),
+        dark: Object.values(Colors.yellowDark),
+        light: Object.values(Colors.yellow),
       },
     },
     green: {
       palette: {
-        dark: Object.values(colorTokens.dark.green),
-        light: Object.values(colorTokens.light.green),
+        dark: Object.values(Colors.greenDark),
+        light: Object.values(Colors.green),
       },
     },
     purple: {
       palette: {
-        dark: Object.values(colorTokens.dark.purple),
-        light: Object.values(colorTokens.light.purple),
+        dark: Object.values(Colors.purpleDark),
+        light: Object.values(Colors.purple),
       },
     },
     pink: {
       palette: {
-        dark: Object.values(colorTokens.dark.pink),
-        light: Object.values(colorTokens.light.pink),
+        dark: Object.values(Colors.pinkDark),
+        light: Object.values(Colors.pink),
       },
     },
     tan: {
@@ -239,3 +199,13 @@ export const tamaguiThemes = createThemeSuite({
     },
   },
 })
+
+export type TamaguiThemes = typeof themes
+
+// avoid themes only on client bundle
+export const tamaguiThemes: TamaguiThemes =
+  process.env.TAMAGUI_IS_SERVER ||
+  process.env.TAMAGUI_KEEP_THEMES ||
+  process.env.NODE_ENV === 'development'
+    ? (themes as any)
+    : ({} as any)

package/src/v4.tsx

@@ -1,4 +1,5 @@
 export * from './v4-createTheme'
 export { tokens } from './v3-themes'
 
-export * as tamaguiThemes from './v4-tamagui-out'
+export { tamaguiThemes } from './v4-tamagui'
+export { defaultThemes } from './v4-default'