@tamagui/themes 1.121.12-1737332968773 → 1.122.0

package/src/v4-tamagui.ts

@@ -1,21 +1,21 @@
 import * as Colors from '@tamagui/colors'
-import { createThemeSuite } from '@tamagui/theme-builder'
+import { createThemes, defaultComponentThemes } from '@tamagui/theme-builder'
 
 /**
  * Default themes for the tamagui.dev site
- * If you'd like to create your own themes, use `createThemeSuite`
+ * If you'd like to create your own themes, use `createThemes`
  */
 
 const darkPalette = [
-  '#050505',
+  '#040404',
+  '#090909',
+  '#111',
   '#151515',
-  '#191919',
-  '#232323',
+  '#222',
   '#282828',
-  '#323232',
+  '#343434',
   '#424242',
-  '#494949',
-  '#545454',
+  '#515151',
   '#626262',
   '#a5a5a5',
   '#fff',
@@ -54,7 +54,7 @@ const darkShadows = {
   shadow6: 'rgba(0,0,0,0.7)',
 }
 
-const extraColors = {
+const blackColors = {
   black1: darkPalette[0],
   black2: darkPalette[1],
   black3: darkPalette[2],
@@ -67,6 +67,9 @@ const extraColors = {
   black10: darkPalette[9],
   black11: darkPalette[10],
   black12: darkPalette[11],
+}
+
+const whiteColors = {
   white1: lightPalette[0],
   white2: lightPalette[1],
   white3: lightPalette[2],
@@ -81,7 +84,9 @@ const extraColors = {
   white12: lightPalette[11],
 }
 
-const themes = createThemeSuite({
+const themes = createThemes({
+  componentThemes: defaultComponentThemes,
+
   base: {
     palette: {
       dark: darkPalette,
@@ -100,20 +105,9 @@ const themes = createThemeSuite({
         ...Colors.red,
         ...Colors.yellow,
         ...lightShadows,
-        ...extraColors,
+        ...blackColors,
+        ...whiteColors,
         shadowColor: lightShadows.shadow1,
-        accent1: darkPalette[0],
-        accent2: darkPalette[1],
-        accent3: darkPalette[2],
-        accent4: darkPalette[3],
-        accent5: darkPalette[4],
-        accent6: darkPalette[5],
-        accent7: darkPalette[6],
-        accent8: darkPalette[7],
-        accent9: darkPalette[8],
-        accent10: darkPalette[9],
-        accent11: darkPalette[10],
-        accent12: darkPalette[11],
       },
       dark: {
         ...Colors.blueDark,
@@ -125,20 +119,9 @@ const themes = createThemeSuite({
         ...Colors.redDark,
         ...Colors.yellowDark,
         ...darkShadows,
-        ...extraColors,
+        ...blackColors,
+        ...whiteColors,
         shadowColor: darkShadows.shadow1,
-        accent1: lightPalette[0],
-        accent2: lightPalette[1],
-        accent3: lightPalette[2],
-        accent4: lightPalette[3],
-        accent5: lightPalette[4],
-        accent6: lightPalette[5],
-        accent7: lightPalette[6],
-        accent8: lightPalette[7],
-        accent9: lightPalette[8],
-        accent10: lightPalette[9],
-        accent11: lightPalette[10],
-        accent12: lightPalette[11],
       },
     },
   },
@@ -152,6 +135,18 @@ const themes = createThemeSuite({
   },
 
   childrenThemes: {
+    black: {
+      palette: {
+        dark: Object.values(blackColors),
+        light: Object.values(blackColors),
+      },
+    },
+    white: {
+      palette: {
+        dark: Object.values(whiteColors),
+        light: Object.values(whiteColors),
+      },
+    },
     gray: {
       palette: {
         dark: Object.values(Colors.grayDark),
@@ -255,10 +250,12 @@ const themes = createThemeSuite({
 
 export type TamaguiThemes = typeof themes
 
-// avoid themes only on client bundle
+/**
+ * This is an optional production optimization: themes JS can get to 20Kb or more.
+ * Tamagui has ~1Kb of logic to hydrate themes from CSS, so you can remove the JS.
+ * So long as you server render your Tamagui CSS, this will save you bundle size:
+ */
 export const tamaguiThemes: TamaguiThemes =
-  process.env.TAMAGUI_IS_SERVER ||
-  process.env.TAMAGUI_KEEP_THEMES ||
-  process.env.NODE_ENV === 'development'
-    ? (themes as any)
-    : ({} as any)
+  process.env.TAMAGUI_ENVIRONMENT === 'client' && process.env.NODE_ENV === 'production'
+    ? ({} as any)
+    : (themes as any)

package/src/v4.tsx

@@ -1,3 +1,3 @@
 export { tokens } from './v3-tokens'
-export { createThemeSuite } from '@tamagui/theme-builder'
+export { createThemes } from '@tamagui/theme-builder'
 export { tamaguiThemes } from './v4-tamagui'

package/types/generated-v4-tamagui.d.ts

@@ -2,9 +2,10 @@ type Theme = {
     accentBackground: string;
     accentColor: string;
     background0: string;
-    background025: string;
-    background05: string;
-    background075: string;
+    background02: string;
+    background04: string;
+    background06: string;
+    background08: string;
     color1: string;
     color2: string;
     color3: string;
@@ -18,9 +19,10 @@ type Theme = {
     color11: string;
     color12: string;
     color0: string;
-    color025: string;
-    color05: string;
-    color075: string;
+    color02: string;
+    color04: string;
+    color06: string;
+    color08: string;
     background: string;
     backgroundHover: string;
     backgroundPress: string;

package/types/v4-tamagui.d.ts

@@ -1,9 +1,14 @@
-declare const themes: Record<"light_blue" | "light_gray" | "light_green" | "light_orange" | "light_pink" | "light_purple" | "light_red" | "light_yellow" | "dark_blue" | "dark_gray" | "dark_green" | "dark_orange" | "dark_pink" | "dark_purple" | "dark_red" | "dark_yellow" | "light" | "dark" | "light_blue_alt1" | "light_blue_alt2" | "light_green_alt1" | "light_green_alt2" | "light_orange_alt1" | "light_orange_alt2" | "light_pink_alt1" | "light_pink_alt2" | "light_purple_alt1" | "light_purple_alt2" | "light_red_alt1" | "light_red_alt2" | "light_yellow_alt1" | "light_yellow_alt2" | "dark_blue_alt1" | "dark_blue_alt2" | "dark_green_alt1" | "dark_green_alt2" | "dark_orange_alt1" | "dark_orange_alt2" | "dark_pink_alt1" | "dark_pink_alt2" | "dark_purple_alt1" | "dark_purple_alt2" | "dark_red_alt1" | "dark_red_alt2" | "dark_yellow_alt1" | "dark_yellow_alt2" | "light_gray_alt1" | "light_gray_alt2" | "dark_gray_alt1" | "dark_gray_alt2" | "light_blue_surface1" | "light_blue_surface2" | "light_blue_surface3" | "light_gray_surface1" | "light_gray_surface2" | "light_gray_surface3" | "light_green_surface1" | "light_green_surface2" | "light_green_surface3" | "light_orange_surface1" | "light_orange_surface2" | "light_orange_surface3" | "light_pink_surface1" | "light_pink_surface2" | "light_pink_surface3" | "light_purple_surface1" | "light_purple_surface2" | "light_purple_surface3" | "light_red_surface1" | "light_red_surface2" | "light_red_surface3" | "light_yellow_surface1" | "light_yellow_surface2" | "light_yellow_surface3" | "dark_blue_surface1" | "dark_blue_surface2" | "dark_blue_surface3" | "dark_gray_surface1" | "dark_gray_surface2" | "dark_gray_surface3" | "dark_green_surface1" | "dark_green_surface2" | "dark_green_surface3" | "dark_orange_surface1" | "dark_orange_surface2" | "dark_orange_surface3" | "dark_pink_surface1" | "dark_pink_surface2" | "dark_pink_surface3" | "dark_purple_surface1" | "dark_purple_surface2" | "dark_purple_surface3" | "dark_red_surface1" | "dark_red_surface2" | "dark_red_surface3" | "dark_yellow_surface1" | "dark_yellow_surface2" | "dark_yellow_surface3" | "light_accent" | "dark_accent" | "dark_tan" | "dark_tan_alt1" | "dark_tan_alt2" | "dark_tan_surface1" | "dark_tan_surface2" | "dark_tan_surface3" | "light_tan" | "light_tan_alt1" | "light_tan_alt2" | "light_tan_surface1" | "light_tan_surface2" | "light_tan_surface3", {
+declare const themes: Record<"light_blue" | "light_gray" | "light_green" | "light_orange" | "light_pink" | "light_purple" | "light_red" | "light_yellow" | "dark_blue" | "dark_gray" | "dark_green" | "dark_orange" | "dark_pink" | "dark_purple" | "dark_red" | "dark_yellow" | "light" | "dark" | "light_blue_alt1" | "light_blue_alt2" | "light_green_alt1" | "light_green_alt2" | "light_orange_alt1" | "light_orange_alt2" | "light_pink_alt1" | "light_pink_alt2" | "light_purple_alt1" | "light_purple_alt2" | "light_red_alt1" | "light_red_alt2" | "light_yellow_alt1" | "light_yellow_alt2" | "dark_blue_alt1" | "dark_blue_alt2" | "dark_green_alt1" | "dark_green_alt2" | "dark_orange_alt1" | "dark_orange_alt2" | "dark_pink_alt1" | "dark_pink_alt2" | "dark_purple_alt1" | "dark_purple_alt2" | "dark_red_alt1" | "dark_red_alt2" | "dark_yellow_alt1" | "dark_yellow_alt2" | "light_gray_alt1" | "light_gray_alt2" | "dark_gray_alt1" | "dark_gray_alt2" | "light_blue_surface1" | "light_blue_surface2" | "light_blue_surface3" | "light_gray_surface1" | "light_gray_surface2" | "light_gray_surface3" | "light_green_surface1" | "light_green_surface2" | "light_green_surface3" | "light_orange_surface1" | "light_orange_surface2" | "light_orange_surface3" | "light_pink_surface1" | "light_pink_surface2" | "light_pink_surface3" | "light_purple_surface1" | "light_purple_surface2" | "light_purple_surface3" | "light_red_surface1" | "light_red_surface2" | "light_red_surface3" | "light_yellow_surface1" | "light_yellow_surface2" | "light_yellow_surface3" | "dark_blue_surface1" | "dark_blue_surface2" | "dark_blue_surface3" | "dark_gray_surface1" | "dark_gray_surface2" | "dark_gray_surface3" | "dark_green_surface1" | "dark_green_surface2" | "dark_green_surface3" | "dark_orange_surface1" | "dark_orange_surface2" | "dark_orange_surface3" | "dark_pink_surface1" | "dark_pink_surface2" | "dark_pink_surface3" | "dark_purple_surface1" | "dark_purple_surface2" | "dark_purple_surface3" | "dark_red_surface1" | "dark_red_surface2" | "dark_red_surface3" | "dark_yellow_surface1" | "dark_yellow_surface2" | "dark_yellow_surface3" | "light_accent" | "dark_accent" | "dark_black" | "dark_white" | "dark_tan" | "dark_black_alt1" | "dark_white_alt1" | "dark_tan_alt1" | "dark_black_alt2" | "dark_white_alt2" | "dark_tan_alt2" | "dark_black_surface1" | "dark_white_surface1" | "dark_tan_surface1" | "dark_black_surface2" | "dark_white_surface2" | "dark_tan_surface2" | "dark_black_surface3" | "dark_white_surface3" | "dark_tan_surface3" | "light_black" | "light_white" | "light_tan" | "light_black_alt1" | "light_white_alt1" | "light_tan_alt1" | "light_black_alt2" | "light_white_alt2" | "light_tan_alt2" | "light_black_surface1" | "light_white_surface1" | "light_tan_surface1" | "light_black_surface2" | "light_white_surface2" | "light_tan_surface2" | "light_black_surface3" | "light_white_surface3" | "light_tan_surface3", {
     [x: string]: string;
     [x: number]: string;
     [x: symbol]: string;
 }>;
 export type TamaguiThemes = typeof themes;
+/**
+ * This is an optional production optimization: themes JS can get to 20Kb or more.
+ * Tamagui has ~1Kb of logic to hydrate themes from CSS, so you can remove the JS.
+ * So long as you server render your Tamagui CSS, this will save you bundle size:
+ */
 export declare const tamaguiThemes: TamaguiThemes;
 export {};
 //# sourceMappingURL=v4-tamagui.d.ts.map

package/types/v4.d.ts

@@ -1,4 +1,4 @@
 export { tokens } from './v3-tokens';
-export { createThemeSuite } from '@tamagui/theme-builder';
+export { createThemes } from '@tamagui/theme-builder';
 export { tamaguiThemes } from './v4-tamagui';
 //# sourceMappingURL=v4.d.ts.map