fullstack-template/frontends/auth/react-native/src/theme/tokens.ts at 481da6dc95f61abdd1ace7292563c985bb0a9ff7 · CarterPerez-dev/fullstack-template · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
/**
 * @AngelaMos | 2026
 * tokens.ts
 */

import { createTokens } from 'tamagui'
import { APP_CONFIG } from '@/core/config'

export const tokens = createTokens({
  color: {
    bgDefault: '#121212',
    bgAlternative: '#0f0f0f',
    bgPage: '#1a1a1a',
    bgCard: '#101010',

    bgShellBase: '#151515',
    bgShellDot: '#1d1d1d',

    bgContentBase: '#0f0f0f',
    bgContentDot: '#171717',

    bgSurface75: '#171717',
    bgSurface100: '#181818',
    bgSurface200: '#242424',
    bgSurface300: '#292929',

    bgControl: '#1a1a1a',
    bgSelection: '#313131',
    bgOverlay: '#242424',
    bgOverlayHover: '#2e2e2e',

    borderMuted: '#242424',
    borderDefault: '#2e2e2e',
    borderStrong: '#363636',
    borderStronger: '#454545',
    borderControl: '#393939',

    textDefault: '#fafafa',
    textLight: '#b4b4b4',
    textLighter: '#898989',
    textMuted: '#4d4d4d',

    white: '#ffffff',
    black: '#000000',

    accent: APP_CONFIG.ACCENT_COLOR,

    errorDefault: '#dc2626',
    errorLight: '#ef4444',

    transparent: 'transparent',
  },

  space: {
    0: 0,
    0.5: 2,
    1: 4,
    1.5: 6,
    2: 8,
    2.5: 10,
    3: 12,
    3.5: 14,
    4: 16,
    5: 20,
    6: 24,
    7: 28,
    8: 32,
    9: 36,
    10: 40,
    12: 48,
    14: 56,
    16: 64,
    20: 80,
    24: 96,
    true: 16,
  },

  size: {
    0: 0,
    0.5: 2,
    1: 4,
    1.5: 6,
    2: 8,
    2.5: 10,
    3: 12,
    3.5: 14,
    4: 16,
    5: 20,
    6: 24,
    7: 28,
    8: 32,
    9: 36,
    10: 40,
    11: 44,
    12: 48,
    14: 56,
    16: 64,
    20: 80,
    true: 16,
  },

  radius: {
    0: 0,
    1: 2,
    2: 4,
    3: 6,
    4: 8,
    5: 10,
    6: 12,
    true: 6,
  },

  zIndex: {
    0: 0,
    1: 100,
    2: 200,
    3: 300,
    4: 400,
    5: 500,
  },
})

export const colors = tokens.color