@tamagui/themes 1.121.12 → 1.122.0

package/src/index.tsx

@@ -6,3 +6,5 @@ export * from './palettes'
 export * from '@tamagui/colors'
 export * from './templates'
 export * from './shadows'
+export * from './types'
+export * from './helpers'

package/src/themes.tsx

@@ -1,4 +1 @@
-import * as themes from './generated-new'
-export { themes }
-
-// export { themes } from './themes-new'
+export { themes } from './generated-new'

package/src/types.ts

@@ -1,18 +1,12 @@
-import type { Template, ThemeDefinitions } from '@tamagui/create-theme'
+import type { Template } from '@tamagui/create-theme'
 
 type ThemeSuiteItem = {
   id: string
   name: string
   createdAt: number
   updatedAt: number
-
   schemes: { light: boolean; dark: boolean }
   palettes: Record<string, BuildPalette>
-  templates: BuildTemplates
-
-  baseTheme: BuildTheme
-  subThemes: BuildSubTheme[]
-  componentThemes: ThemeDefinitions
 }
 
 export type ThemeSuiteItemData = Omit<ThemeSuiteItem, 'id' | 'createdAt' | 'updatedAt'>

package/src/v2.tsx

@@ -1,8 +1,5 @@
-import * as generatedThemes from './generated-v2'
-export const themes = generatedThemes
-
+export { themes } from './generated-v2'
 export { tokens } from './tokens'
-
 // specific colors since we have cjs here
 export { blue, blueDark } from '@tamagui/colors'
 export { green, greenDark } from '@tamagui/colors'

package/src/v3-themes.ts

@@ -18,7 +18,8 @@ import {
 } from '@tamagui/colors'
 import { createThemeBuilder, objectFromEntries } from '@tamagui/theme-builder'
 import { createTokens } from '@tamagui/web'
-import { objectKeys, postfixObjKeys, sizeToSpace } from './utils'
+import { objectKeys, postfixObjKeys } from './utils'
+import { tokens as v3Tokens } from './v3-tokens'
 
 const colorTokens = {
   light: {
@@ -641,107 +642,9 @@ export type ThemesOut = Record<keyof typeof themesIn, Theme>
 
 export const themes = themesIn as any as ThemesOut
 
-// --- tokens ---
-
-// should roughly map to button/input etc height at each level
-// fonts should match that height/lineHeight at each stop
-// so these are really non-linear on purpose
-// why?
-//   - at sizes <1, used for fine grained things (borders, smallest paddingY)
-//     - so smallest padY should be roughly 1-4px so it can join with lineHeight
-//   - at sizes >=1, have to consider "pressability" (jumps up)
-//   - after that it should go upwards somewhat naturally
-//   - H1 / headings top out at 10 naturally, so after 10 we can go upwards faster
-//  but also one more wrinkle...
-//  space is used in conjunction with size
-//  i'm setting space to generally just a fixed fraction of size (~1/3-2/3 still fine tuning)
-export const size = {
-  $0: 0,
-  '$0.25': 2,
-  '$0.5': 4,
-  '$0.75': 8,
-  $1: 20,
-  '$1.5': 24,
-  $2: 28,
-  '$2.5': 32,
-  $3: 36,
-  '$3.5': 40,
-  $4: 44,
-  $true: 44,
-  '$4.5': 48,
-  $5: 52,
-  $6: 64,
-  $7: 74,
-  $8: 84,
-  $9: 94,
-  $10: 104,
-  $11: 124,
-  $12: 144,
-  $13: 164,
-  $14: 184,
-  $15: 204,
-  $16: 224,
-  $17: 224,
-  $18: 244,
-  $19: 264,
-  $20: 284,
-}
-
-type SizeKeysIn = keyof typeof size
-type Sizes = {
-  [Key in SizeKeysIn extends `$${infer Key}` ? Key : SizeKeysIn]: number
-}
-type SizeKeys = `${keyof Sizes extends `${infer K}` ? K : never}`
-
-export const spaces = Object.entries(size).map(([k, v]) => {
-  return [k, sizeToSpace(v)] as const
-})
-
-export const spacesNegative = spaces.slice(1).map(([k, v]) => [`-${k.slice(1)}`, -v])
-
-type SizeKeysWithNegatives =
-  | Exclude<`-${SizeKeys extends `$${infer Key}` ? Key : SizeKeys}`, '-0'>
-  | SizeKeys
-
-export const space: {
-  [Key in SizeKeysWithNegatives]: Key extends keyof Sizes ? Sizes[Key] : number
-} = {
-  ...Object.fromEntries(spaces),
-  ...Object.fromEntries(spacesNegative),
-} as any
-
-export const zIndex = {
-  0: 0,
-  1: 100,
-  2: 200,
-  3: 300,
-  4: 400,
-  5: 500,
-}
-
-export const radius = {
-  0: 0,
-  1: 3,
-  2: 5,
-  3: 7,
-  4: 9,
-  true: 9,
-  5: 10,
-  6: 16,
-  7: 19,
-  8: 22,
-  9: 26,
-  10: 34,
-  11: 42,
-  12: 50,
-}
+// -- tokens ---
 
 export const tokens = createTokens({
   color,
-  radius,
-  zIndex,
-  space,
-  size,
+  ...v3Tokens,
 })
-
-// --- utils ---

package/src/v3-tokens.ts

@@ -0,0 +1,103 @@
+import { sizeToSpace } from './utils'
+
+// --- tokens ---
+
+// should roughly map to button/input etc height at each level
+// fonts should match that height/lineHeight at each stop
+// so these are really non-linear on purpose
+// why?
+//   - at sizes <1, used for fine grained things (borders, smallest paddingY)
+//     - so smallest padY should be roughly 1-4px so it can join with lineHeight
+//   - at sizes >=1, have to consider "pressability" (jumps up)
+//   - after that it should go upwards somewhat naturally
+//   - H1 / headings top out at 10 naturally, so after 10 we can go upwards faster
+//  but also one more wrinkle...
+//  space is used in conjunction with size
+//  i'm setting space to generally just a fixed fraction of size (~1/3-2/3 still fine tuning)
+export const size = {
+  $0: 0,
+  '$0.25': 2,
+  '$0.5': 4,
+  '$0.75': 8,
+  $1: 20,
+  '$1.5': 24,
+  $2: 28,
+  '$2.5': 32,
+  $3: 36,
+  '$3.5': 40,
+  $4: 44,
+  $true: 44,
+  '$4.5': 48,
+  $5: 52,
+  $6: 64,
+  $7: 74,
+  $8: 84,
+  $9: 94,
+  $10: 104,
+  $11: 124,
+  $12: 144,
+  $13: 164,
+  $14: 184,
+  $15: 204,
+  $16: 224,
+  $17: 224,
+  $18: 244,
+  $19: 264,
+  $20: 284,
+}
+
+type SizeKeysIn = keyof typeof size
+type Sizes = {
+  [Key in SizeKeysIn extends `$${infer Key}` ? Key : SizeKeysIn]: number
+}
+type SizeKeys = `${keyof Sizes extends `${infer K}` ? K : never}`
+
+export const spaces = Object.entries(size).map(([k, v]) => {
+  return [k, sizeToSpace(v)] as const
+})
+
+export const spacesNegative = spaces.slice(1).map(([k, v]) => [`-${k.slice(1)}`, -v])
+
+type SizeKeysWithNegatives =
+  | Exclude<`-${SizeKeys extends `$${infer Key}` ? Key : SizeKeys}`, '-0'>
+  | SizeKeys
+
+export const space: {
+  [Key in SizeKeysWithNegatives]: Key extends keyof Sizes ? Sizes[Key] : number
+} = {
+  ...Object.fromEntries(spaces),
+  ...Object.fromEntries(spacesNegative),
+} as any
+
+export const zIndex = {
+  0: 0,
+  1: 100,
+  2: 200,
+  3: 300,
+  4: 400,
+  5: 500,
+}
+
+export const radius = {
+  0: 0,
+  1: 3,
+  2: 5,
+  3: 7,
+  4: 9,
+  true: 9,
+  5: 10,
+  6: 16,
+  7: 19,
+  8: 22,
+  9: 26,
+  10: 34,
+  11: 42,
+  12: 50,
+}
+
+export const tokens = {
+  radius,
+  zIndex,
+  space,
+  size,
+} as const

package/src/v3.tsx

@@ -1,6 +1,4 @@
-import * as generatedThemes from './generated-v3'
-export const themes = generatedThemes
-
+export { themes } from './generated-v3'
 export { tokens } from './v3-themes'
 
 // specific colors since we have cjs here

package/src/v4-tamagui.ts

@@ -1,61 +1,21 @@
-import {
-  blue,
-  blueDark,
-  gray,
-  grayDark,
-  green,
-  greenDark,
-  orange,
-  orangeDark,
-  pink,
-  pinkDark,
-  purple,
-  purpleDark,
-  red,
-  redDark,
-  yellow,
-  yellowDark,
-} from '@tamagui/colors'
-import { createThemeSuite } from './v4-createTheme'
+import * as Colors from '@tamagui/colors'
+import { createThemes, defaultComponentThemes } from '@tamagui/theme-builder'
 
-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,
-  },
-}
-
-const lightShadowColor = 'rgba(0,0,0,0.04)'
-const lightShadowColorStrong = 'rgba(0,0,0,0.085)'
-const darkShadowColor = 'rgba(0,0,0,0.2)'
-const darkShadowColorStrong = 'rgba(0,0,0,0.3)'
+/**
+ * Default themes for the tamagui.dev site
+ * 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',
@@ -76,106 +36,163 @@ const lightPalette = [
   'hsl(0, 0%, 9.0%)',
 ]
 
-/**
- * Default themes for the tamagui.dev site
- * If you'd like to create your own themes, use `createThemeSuite`
- */
-export const tamaguiThemes = createThemeSuite({
+const lightShadows = {
+  shadow1: 'rgba(0,0,0,0.04)',
+  shadow2: 'rgba(0,0,0,0.08)',
+  shadow3: 'rgba(0,0,0,0.16)',
+  shadow4: 'rgba(0,0,0,0.24)',
+  shadow5: 'rgba(0,0,0,0.32)',
+  shadow6: 'rgba(0,0,0,0.4)',
+}
+
+const darkShadows = {
+  shadow1: 'rgba(0,0,0,0.2)',
+  shadow2: 'rgba(0,0,0,0.3)',
+  shadow3: 'rgba(0,0,0,0.4)',
+  shadow4: 'rgba(0,0,0,0.5)',
+  shadow5: 'rgba(0,0,0,0.6)',
+  shadow6: 'rgba(0,0,0,0.7)',
+}
+
+const 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],
+}
+
+const 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],
+}
+
+const themes = createThemes({
+  componentThemes: defaultComponentThemes,
+
   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,
-        shadowColor: lightShadowColorStrong,
-        shadowColorHover: lightShadowColorStrong,
-        shadowColorPress: lightShadowColor,
-        shadowColorFocus: lightShadowColor,
+        ...Colors.blue,
+        ...Colors.gray,
+        ...Colors.green,
+        ...Colors.orange,
+        ...Colors.pink,
+        ...Colors.purple,
+        ...Colors.red,
+        ...Colors.yellow,
+        ...lightShadows,
+        ...blackColors,
+        ...whiteColors,
+        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,
-        shadowColor: darkShadowColorStrong,
-        shadowColorHover: darkShadowColorStrong,
-        shadowColorPress: darkShadowColor,
-        shadowColorFocus: darkShadowColor,
+        ...Colors.blueDark,
+        ...Colors.grayDark,
+        ...Colors.greenDark,
+        ...Colors.orangeDark,
+        ...Colors.pinkDark,
+        ...Colors.purpleDark,
+        ...Colors.redDark,
+        ...Colors.yellowDark,
+        ...darkShadows,
+        ...blackColors,
+        ...whiteColors,
+        shadowColor: darkShadows.shadow1,
       },
     },
   },
 
+  // inverse accent theme
   accent: {
     palette: {
       dark: lightPalette,
       light: darkPalette,
     },
-    template: 'inverse',
   },
 
   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(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: {
@@ -230,3 +247,15 @@ export const tamaguiThemes = createThemeSuite({
     },
   },
 })
+
+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 const tamaguiThemes: TamaguiThemes =
+  process.env.TAMAGUI_ENVIRONMENT === 'client' && process.env.NODE_ENV === 'production'
+    ? ({} as any)
+    : (themes as any)

package/src/v4.tsx

@@ -1,4 +1,3 @@
-export * from './v4-createTheme'
-export { tokens } from './v3-themes'
-
-export * as tamaguiThemes from './v4-tamagui-out'
+export { tokens } from './v3-tokens'
+export { createThemes } from '@tamagui/theme-builder'
+export { tamaguiThemes } from './v4-tamagui'