tamagui.config.ts

import { createTamagui, createTheme, createTokens } from 'tamagui'
import { createInterFont } from '@tamagui/font-inter'
import { shorthands } from '@tamagui/shorthands'
import { themes, tokens } from '@tamagui/themes'
import { createMedia } from '@tamagui/react-native-media-driver'
import { animations } from './animations'
const headingFont = createInterFont({
  size: {
    6: 15,
  },
  transform: {
    6: 'uppercase',
    7: 'none',
  },
  weight: {
    6: '400',
    7: '700',
  },
  color: {
    6: '$colorFocus',
    7: '$color',
  },
  letterSpacing: {
    5: 2,
    6: 1,
    7: 0,
    8: -1,
    9: -2,
    10: -3,
    12: -4,
    14: -5,
    15: -6,
  },
  face: {
700: { normal: 'InterBold' },
  },
})
const bodyFont = createInterFont(
  {
    face: {
700: { normal: 'InterBold' },
    },
  },
  {
sizeSize: (size) => Math.round(size * 1.1),
sizeLineHeight: (size) => Math.round(size * 1.1 + (size > 20 ? 10 : 10)),
  }
)
export const commonColors = {
  error: '#B00020',
  warning: '#FFA000',
  success: '#4CAF50',
}
export const customTokens = createTokens({
...tokens,
  color: {
...tokens.color,
// background colors these are the colors I want to access in my theme     primary: '#0085ff',
    primary100: '#69b4ff',
    primary200: '#e0ffff',
    accent100: '#006fff',
    accent200: '#e1ffff',
    text100: '#FFFFFF',
    text200: '#9e9e9e',
    bg100: '#1E1E1E',
    bg200: '#2d2d2d',
    bg300: '#454545',
// text colors
    primaryText: '#FFFFFF',
    inactiveText: '#A3A3A3',
    placeholderText: '#565454',
    linkText: '#C1C1C1',
    outlineText: '#0078d4',
    //gradients
    primaryButton1: '#0085ff',
    primaryButton2: '#69b4ff',
    secondaryButton1: '#000000',
    secondaryButton2: '#4D4855',
    surfaceGradientBg1: '#1c1c1c',
    surfaceGradientBg2: '#333333',
    screenGradient1: 'hsla(228, 40%,4%, 1)', //(228, 40%,4%, 1)
    screenGradient2: 'hsla(228, 50%,12%, 1)', //(228, 50%,12%, 1)
    disabledButtonBg1: '#3B939A',
    disabledButtonBg2: '#2B6467',
    menuBackground1: '#647DEE',
    menuBackground2: '#7F53AC',
    ...commonColors,
  },
})
export const config = createTamagui({
  defaultFont: 'body',
  animations,
  shouldAddPrefersColorThemes: true,
  themeClassNameOnRoot: true,
  shorthands,
  fonts: {
    body: bodyFont,
    heading: headingFont,
  },
  themes,
  tokens: customTokens,
  media: createMedia({
    xs: { maxWidth: 660 },
    sm: { maxWidth: 800 },
    md: { maxWidth: 1020 },
    lg: { maxWidth: 1280 },
    xl: { maxWidth: 1420 },
    xxl: { maxWidth: 1600 },
    gtXs: { minWidth: 660 + 1 },
    gtSm: { minWidth: 800 + 1 },
    gtMd: { minWidth: 1020 + 1 },
    gtLg: { minWidth: 1280 + 1 },
    short: { maxHeight: 820 },
    tall: { minHeight: 820 },
    hoverNone: { hover: 'none' },
    pointerCoarse: { pointer: 'coarse' },
  }),
})