@tamagui/themes 2.7.7 → 3.0.0-beta.1097.1

package/src/v3-tokens.ts

@@ -1,103 +0,0 @@
-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 as Key extends `$${infer K}` ? K : Key]: number
-}
-type SizeKeys = keyof Sizes
-
-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,12 +0,0 @@
-export { themes } from './generated-v3'
-export { tokens } from './v3-themes'
-
-// specific colors since we have cjs here
-export { blue, blueDark } from '@tamagui/colors/legacy'
-export { green, greenDark } from '@tamagui/colors/legacy'
-export { red, redDark } from '@tamagui/colors/legacy'
-export { orange, orangeDark } from '@tamagui/colors/legacy'
-export { yellow, yellowDark } from '@tamagui/colors/legacy'
-export { pink, pinkDark } from '@tamagui/colors/legacy'
-export { purple, purpleDark } from '@tamagui/colors/legacy'
-export { gray, grayDark } from '@tamagui/colors/legacy'

package/src/v4-default.ts

@@ -1,191 +0,0 @@
-import * as Colors from '@tamagui/colors/legacy'
-import { createThemes, defaultComponentThemes } from '@tamagui/theme-builder'
-
-/**
- * This is the default config v4 definitions.
- *   - uses shorthands v4
- *   - uses tokens v4 which are mostly the same as v3
- */
-
-// Themes:
-
-const darkPalette = [
-  '#050505',
-  '#151515',
-  '#191919',
-  '#232323',
-  '#282828',
-  '#323232',
-  '#424242',
-  '#494949',
-  '#545454',
-  '#626262',
-  '#a5a5a5',
-  '#fff',
-]
-
-const lightPalette = [
-  '#fff',
-  '#f2f2f2',
-  'hsl(0, 0%, 93%)',
-  'hsl(0, 0%, 91%)',
-  'hsl(0, 0%, 88%)',
-  'hsl(0, 0%, 85%)',
-  'hsl(0, 0%, 82%)',
-  'hsl(0, 0%, 76%)',
-  'hsl(0, 0%, 56%)',
-  'hsl(0, 0%, 50%)',
-  'hsl(0, 0%, 42%)',
-  'hsl(0, 0%, 9%)',
-]
-
-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 generatedThemes = createThemes({
-  componentThemes: defaultComponentThemes,
-
-  base: {
-    palette: {
-      dark: darkPalette,
-      light: lightPalette,
-    },
-
-    // for values we don't want being inherited onto sub-themes
-    extra: {
-      light: {
-        ...Colors.blue,
-        ...Colors.red,
-        ...Colors.yellow,
-        ...Colors.green,
-        ...lightShadows,
-        ...blackColors,
-        ...whiteColors,
-        shadowColor: lightShadows.shadow1,
-      },
-      dark: {
-        ...Colors.blueDark,
-        ...Colors.redDark,
-        ...Colors.yellowDark,
-        ...Colors.greenDark,
-        ...darkShadows,
-        ...blackColors,
-        ...whiteColors,
-        shadowColor: darkShadows.shadow1,
-      },
-    },
-  },
-
-  // inverse accent theme
-  accent: {
-    palette: {
-      dark: lightPalette,
-      light: darkPalette,
-    },
-  },
-
-  childrenThemes: {
-    black: {
-      palette: {
-        dark: Object.values(blackColors),
-        light: Object.values(blackColors),
-      },
-    },
-    white: {
-      palette: {
-        dark: Object.values(whiteColors),
-        light: Object.values(whiteColors),
-      },
-    },
-
-    blue: {
-      palette: {
-        dark: Object.values(Colors.blueDark),
-        light: Object.values(Colors.blue),
-      },
-    },
-    red: {
-      palette: {
-        dark: Object.values(Colors.redDark),
-        light: Object.values(Colors.red),
-      },
-    },
-    yellow: {
-      palette: {
-        dark: Object.values(Colors.yellowDark),
-        light: Object.values(Colors.yellow),
-      },
-    },
-    green: {
-      palette: {
-        dark: Object.values(Colors.greenDark),
-        light: Object.values(Colors.green),
-      },
-    },
-  },
-
-  grandChildrenThemes: {
-    accent: {
-      template: 'inverse',
-    },
-  },
-})
-
-export type TamaguiThemes = typeof generatedThemes
-
-export const themes = generatedThemes
-
-/**
- * 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 themes: TamaguiThemes =
-//   process.env.TAMAGUI_ENVIRONMENT === 'client' && process.env.NODE_ENV === 'production'
-//     ? {}
-//     : (generatedThemes as any)

package/src/v4-tamagui.ts

@@ -1,287 +0,0 @@
-import * as Colors from '@tamagui/colors/legacy'
-import { createV4Themes, defaultComponentThemes } from '@tamagui/theme-builder'
-import { desaturate } from 'color2k'
-
-const desat = (colors: Record<string, string>, amount: number) => {
-  return Object.fromEntries(
-    Object.entries(colors).map(([key, value]) => [key, desaturate(value, amount)])
-  )
-}
-
-const colorsGreenDark = desat(Colors.greenDark, 0.2) as typeof Colors.greenDark
-const colorsGreen = desat(Colors.green, 0.2) as typeof Colors.green
-
-// with color2k:
-
-/**
- * Default themes for the tamagui.dev site
- * If you'd like to create your own themes, use `createThemes`
- */
-
-const darkPalette = [
-  '#040404',
-  '#090909',
-  '#111',
-  '#151515',
-  '#222',
-  '#282828',
-  '#343434',
-  '#424242',
-  '#515151',
-  '#626262',
-  '#a5a5a5',
-  '#fff',
-]
-
-const lightPalette = [
-  '#fff',
-  '#f2f2f2',
-  'hsl(0, 0%, 93%)',
-  'hsl(0, 0%, 91%)',
-  'hsl(0, 0%, 88%)',
-  'hsl(0, 0%, 85%)',
-  'hsl(0, 0%, 82%)',
-  'hsl(0, 0%, 76%)',
-  'hsl(0, 0%, 56%)',
-  'hsl(0, 0%, 50%)',
-  'hsl(0, 0%, 42%)',
-  'hsl(0, 0%, 9%)',
-]
-
-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)',
-  shadow7: 'rgba(0,0,0,0.5)',
-  shadow8: 'rgba(0,0,0,0.6)',
-  shadow9: 'rgba(0,0,0,0.7)',
-  shadow10: 'rgba(0,0,0,0.8)',
-}
-
-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.65)',
-  shadow7: 'rgba(0,0,0,0.75)',
-  shadow8: 'rgba(0,0,0,0.8)',
-  shadow9: 'rgba(0,0,0,0.85)',
-  shadow10: 'rgba(0,0,0,0.9)',
-}
-
-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 = createV4Themes({
-  componentThemes: defaultComponentThemes,
-
-  base: {
-    palette: {
-      dark: darkPalette,
-      light: lightPalette,
-    },
-
-    // for values we don't want being inherited onto sub-themes
-    extra: {
-      light: {
-        ...Colors.blue,
-        ...Colors.gray,
-        ...colorsGreen,
-        ...Colors.orange,
-        ...Colors.pink,
-        ...Colors.purple,
-        ...Colors.red,
-        ...Colors.yellow,
-        ...lightShadows,
-        ...blackColors,
-        ...whiteColors,
-        shadowColor: lightShadows.shadow1,
-        colorBg: '#fff',
-      },
-      dark: {
-        ...Colors.blueDark,
-        ...Colors.grayDark,
-        ...colorsGreenDark,
-        ...Colors.orangeDark,
-        ...Colors.pinkDark,
-        ...Colors.purpleDark,
-        ...Colors.redDark,
-        ...Colors.yellowDark,
-        ...darkShadows,
-        ...blackColors,
-        ...whiteColors,
-        shadowColor: darkShadows.shadow1,
-        colorBg: '#000',
-      },
-    },
-  },
-
-  // inverse accent theme
-  accent: {
-    palette: {
-      dark: lightPalette,
-      light: darkPalette,
-    },
-  },
-
-  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),
-        light: Object.values(Colors.gray),
-      },
-    },
-    blue: {
-      palette: {
-        dark: Object.values(Colors.blueDark),
-        light: Object.values(Colors.blue),
-      },
-    },
-    orange: {
-      palette: {
-        dark: Object.values(Colors.orangeDark),
-        light: Object.values(Colors.orange),
-      },
-    },
-    red: {
-      palette: {
-        dark: Object.values(Colors.redDark),
-        light: Object.values(Colors.red),
-      },
-    },
-    yellow: {
-      palette: {
-        dark: Object.values(Colors.yellowDark),
-        light: Object.values(Colors.yellow),
-      },
-    },
-    green: {
-      palette: {
-        dark: Object.values(colorsGreenDark),
-        light: Object.values(colorsGreen),
-      },
-    },
-    purple: {
-      palette: {
-        dark: Object.values(Colors.purpleDark),
-        light: Object.values(Colors.purple),
-      },
-    },
-    pink: {
-      palette: {
-        dark: Object.values(Colors.pinkDark),
-        light: Object.values(Colors.pink),
-      },
-    },
-    tan: {
-      palette: {
-        light: [
-          'hsla(40, 30%, 98%, 1)',
-          'hsla(40, 24%, 94%, 1)',
-          'hsla(38, 23%, 91%, 1)',
-          'hsla(36, 20%, 90%, 1)',
-          'hsla(36, 20%, 88%, 1)',
-          'hsla(35, 20%, 85%, 1)',
-          'hsla(35, 21%, 74%, 1)',
-          'hsla(34, 20%, 70%, 1)',
-          'hsla(35, 20%, 67%, 1)',
-          'hsla(34, 19%, 47%, 1)',
-          'hsla(35, 18%, 37%, 1)',
-          'hsla(35, 17%, 20%, 1)',
-        ],
-        dark: [
-          'hsla(30, 9%, 10%, 1)',
-          'hsla(30, 10%, 12%, 1)',
-          'hsla(31, 11%, 18%, 1)',
-          'hsla(30, 12%, 23%, 1)',
-          'hsla(30, 14%, 28%, 1)',
-          'hsla(30, 16%, 33%, 1)',
-          'hsla(30, 18%, 38%, 1)',
-          'hsla(30, 20%, 45%, 1)',
-          'hsla(30, 21%, 50%, 1)',
-          'hsla(29, 22%, 58%, 1)',
-          'hsla(34, 24%, 70%, 1)',
-          'hsla(11, 12%, 79%, 1)',
-        ],
-      },
-    },
-  },
-
-  grandChildrenThemes: {
-    // inverse accent theme
-    accent: {
-      template: 'inverse',
-    },
-    alt1: {
-      template: 'alt1',
-    },
-    alt2: {
-      template: 'alt2',
-    },
-    surface1: {
-      template: 'surface1',
-    },
-    surface2: {
-      template: 'surface2',
-    },
-    surface3: {
-      template: 'surface3',
-    },
-  },
-})
-
-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-tokens.ts

@@ -1,105 +0,0 @@
-import { sizeToSpace } from './utils'
-
-// the same as v3 for now, but duplicated to avoid accidental changes to both
-
-// --- 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/v4.tsx

@@ -1,4 +0,0 @@
-export { tokens } from './v4-tokens'
-export { createThemes } from '@tamagui/theme-builder'
-export { themes as tamaguiThemes } from './generated-v4-tamagui'
-export { themes as defaultThemes } from './generated-v4'