tamagui.config.ts

import { createAnimations } from "@tamagui/animations-moti"
import type { CreateTamaguiProps } from "@tamagui/core"
import { createTamagui } from "@tamagui/core"
import { shorthands } from "@tamagui/shorthands"
import { instrumentSansFont } from "./font"
import { dark, light, tokens } from "./tokens"

export const tamaguiConfig = createTamagui({
	animations: createAnimations({
		fast: {
			damping: 20,
			mass: 1.2,
			stiffness: 250,
			type: "spring",
		},
		medium: {
			damping: 10,
			mass: 0.9,
			stiffness: 100,
			type: "spring",
		},
		slow: {
			damping: 20,
			stiffness: 60,
			type: "spring",
		},
	}),
	fonts: { body: instrumentSansFont, heading: instrumentSansFont },
	settings: {
		allowedStyleValues: "somewhat-strict",
		autocompleteSpecificTokens: true,
	},
	shorthands,
	themes: { dark, light },
	tokens,
} satisfies CreateTamaguiProps)

export default tamaguiConfig
export type AppConfig = typeof tamaguiConfig
export type BaseTheme = typeof light

declare module "@tamagui/core" {
	interface TamaguiCustomConfig extends AppConfig {}
}

tokens.ts

import { createTokens } from "@tamagui/core"

export const light = {
	black: "#040600",

	blue50: "#fbfdff",
	blue100: "#f0f9ff",
	blue200: "#e4f5ff",
	blue300: "#d9f1ff",
	blue400: "#cdedff",
	blue500: "#C2E9FF",
	blue600: "#9bbacc",
	blue700: "#748b99",
	blue800: "#4d5d66",
	blue900: "#262e32", 

  [...]

	transparent: "transparent",
	white: "#FFFFFF",
}

export const dark = {
	black: "#FFFFFF",

	blue50: "#262e32",
	blue100: "#4d5d66",
	blue200: "#748b99",
	blue300: "#9bbacc",
	blue400: "#C2E9FF",
	blue500: "#cdedff",
	blue600: "#d9f1ff",
	blue700: "#e4f5ff",
	blue800: "#f0f9ff",
	blue900: "#fbfdff",
  [...]
	red50: "#32151a",
	red100: "#642c35",
	red200: "#964250",
	red300: "#c8586b",
	red400: "#fb6e86",
	red500: "#fb899c",
	red600: "#fca5b3",
	red700: "#fdc0ca",
	red800: "#fedce1",
	red900: "#fef7f8",

	transparent: "transparent",
	white: "#040600",
}

export const size = {
	0: 0,
	0.5: 4,
	0.25: 2,
	1: 8,
	1.5: 12,
	2: 16,
	2.5: 20,
	3: 24,
	4: 32,
	5: 40,
	6: 48,
	7: 56,
	8: 64,
	9: 72,
	10: 80,
	true: 16,
}

type SizeKeys = keyof typeof size
type SpaceKeys = `-${Exclude<SizeKeys, "none" | "true">}` | SizeKeys

/**
 * Contains duplicated tokens from `size` in addition to the negative version of most of them
 */
const space: Record<SpaceKeys, number> = Object.fromEntries(
	Object.entries(size).flatMap(([key, value]) => {
		const entries = [[key, value]]
		// Don't add the negative value of those two keys
		if (!["none", "true", "0"].includes(key)) entries.unshift([`-${key}`, -value])
		return entries
	}),
)

export const tokens = createTokens({
	color: light,
	radius: {
		0: 0,
		0.5: 4,
		0.25: 2,
		1: 8,
		2: 16,
		3: 24,
		4: 32,
		5: 40,
		6: 48,
		7: 56,
		8: 64,
		9: 72,
		10: 80,

		none: 0,
		old_lightRounded: 12,
		old_rounded: 24,
		old_superLightRounded: 4,
	},
	size,
	space,
})

export type ColorTokens = `\$${keyof typeof light}`
export type SizeTokens = `\$${SizeKeys}`
export type SpaceTokens = `\$${SpaceKeys}`