ui/panda.config.ts at master · nathan2slime/ui · 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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
import { defineConfig } from '@pandacss/dev';

export default defineConfig({
  preflight: false,
  include: ['./src/**/*.{js,jsx,ts,tsx}', './pages/**/*.{js,jsx,ts,tsx}'],
  exclude: [],
  theme: {
    extend: {
      tokens: {
        colors: {
          brandPrimary: { value: '#625de0' },
          brandPrimaryHover: { value: '#5651cc' },
          brandPrimaryActive: { value: '#4944b6' },
          brandPrimaryStrong: { value: '#4f5875' },
          accentSuccess: { value: '#007885' },
          accentSuccessHover: { value: '#006b76' },
          accentSuccessActive: { value: '#005e67' },
          accentSuccessSubtle: { value: '#e0f5f2' },
          accentWarning: { value: '#eaa443' },
          accentWarningHover: { value: '#d89035' },
          accentWarningActive: { value: '#c37a29' },
          accentWarningSubtle: { value: '#fff2d5' },
          accentError: { value: '#b94955' },
          accentErrorHover: { value: '#a83d49' },
          accentErrorActive: { value: '#93343f' },
          accentErrorSubtle: { value: '#ffe5e4' },
          surfaceBase: { value: '#fffaf5' },
          surfaceSubtle: { value: '#f7efe7' },
          surfaceMuted: { value: '#dedbd2' },
          borderSubtle: { value: '#bcc0d3' },
          textPrimary: { value: '#2d3652' },
          effectBrandGlow: { value: 'rgba(98, 93, 224, 0.24)' },
          effectBrandFocus: { value: 'rgba(98, 93, 224, 0.18)' },
        },
        durations: {
          fast: { value: '160ms' },
        },
        fonts: {
          sansDisplay: {
            value: 'Manrope, ui-sans-serif, system-ui, sans-serif',
          },
        },
        fontSizes: {
          uiSm: { value: '0.875rem' },
          uiMd: { value: '0.95rem' },
          uiLg: { value: '1.05rem' },
        },
        fontWeights: {
          button: { value: '700' },
        },
        opacity: {
          disabled: { value: '0.55' },
        },
        radii: {
          sm: { value: '10px' },
          md: { value: '18px' },
          full: { value: '9999px' },
        },
        sizes: {
          controlSm: { value: '2.5rem' },
          controlMd: { value: '3rem' },
          controlLg: { value: '3.5rem' },
        },
        spacing: {
          insetSm: { value: '0.6rem' },
          insetMd: { value: '1rem' },
          insetLg: { value: '1.25rem' },
        },
        shadows: {
          focusRing: { value: '0 0 0 3px rgba(98, 93, 224, 0.18)' },
          focusRingError: { value: '0 0 0 3px rgba(185, 73, 85, 0.14)' },
          focusRingSuccess: { value: '0 0 0 3px rgba(0, 120, 133, 0.14)' },
          focusRingWarning: { value: '0 0 0 3px rgba(234, 164, 67, 0.18)' },
          magicGlow: { value: '0 0 3px rgba(98, 93, 224, 0.24)' },
          softLift: { value: '0 0 3px rgba(45, 54, 82, 0.08)' },
        },
      },
      semanticTokens: {
        colors: {
          inputAdornmentForeground: { value: '{colors.borderSubtle}' },
          inputBackground: { value: '{colors.surfaceBase}' },
          inputBorder: { value: '{colors.borderSubtle}' },
          inputDisabledBackground: { value: '{colors.surfaceSubtle}' },
          inputDisabledBorder: { value: '{colors.borderSubtle}' },
          inputDisabledForeground: { value: '{colors.borderSubtle}' },
          inputErrorBackground: { value: '{colors.accentErrorSubtle}' },
          inputErrorBorder: { value: '{colors.accentError}' },
          inputErrorForeground: { value: '{colors.accentError}' },
          inputFocusBorder: { value: '{colors.brandPrimary}' },
          inputForeground: { value: '{colors.textPrimary}' },
          inputHelperForeground: { value: '{colors.textPrimary}' },
          inputMessageForeground: { value: '{colors.brandPrimary}' },
          inputPlaceholder: { value: '{colors.borderSubtle}' },
          inputSuccessBackground: { value: '{colors.accentSuccessSubtle}' },
          inputSuccessBorder: { value: '{colors.accentSuccess}' },
          inputSuccessForeground: { value: '{colors.accentSuccess}' },
          inputWarningBackground: { value: '{colors.accentWarningSubtle}' },
          inputWarningBorder: { value: '{colors.accentWarning}' },
          inputWarningForeground: { value: '{colors.accentWarning}' },
          actionGhostPrimaryBackgroundHover: {
            value: '{colors.surfaceSubtle}',
          },
          actionGhostPrimaryBorder: { value: 'transparent' },
          actionGhostPrimaryForeground: { value: '{colors.brandPrimary}' },
          actionGhostSuccessBackgroundHover: {
            value: '{colors.accentSuccessSubtle}',
          },
          actionGhostSuccessBorder: { value: 'transparent' },
          actionGhostSuccessForeground: { value: '{colors.accentSuccess}' },
          actionGhostWarningBackgroundHover: {
            value: '{colors.accentWarningSubtle}',
          },
          actionGhostWarningBorder: { value: 'transparent' },
          actionGhostWarningForeground: { value: '{colors.accentWarning}' },
          actionGhostErrorBackgroundHover: {
            value: '{colors.accentErrorSubtle}',
          },
          actionGhostErrorBorder: { value: 'transparent' },
          actionGhostErrorForeground: { value: '{colors.accentError}' },
          actionOutlinePrimaryBackground: { value: '{colors.surfaceBase}' },
          actionOutlinePrimaryBackgroundHover: {
            value: '{colors.surfaceSubtle}',
          },
          actionOutlinePrimaryBorder: { value: '{colors.borderSubtle}' },
          actionOutlinePrimaryBorderHover: { value: '{colors.brandPrimary}' },
          actionOutlinePrimaryForeground: { value: '{colors.brandPrimary}' },
          actionOutlineSuccessBackground: { value: '{colors.surfaceBase}' },
          actionOutlineSuccessBackgroundHover: {
            value: '{colors.accentSuccessSubtle}',
          },
          actionOutlineSuccessBorder: { value: '{colors.accentSuccess}' },
          actionOutlineSuccessBorderHover: {
            value: '{colors.accentSuccessHover}',
          },
          actionOutlineSuccessForeground: { value: '{colors.accentSuccess}' },
          actionOutlineWarningBackground: { value: '{colors.surfaceBase}' },
          actionOutlineWarningBackgroundHover: {
            value: '{colors.accentWarningSubtle}',
          },
          actionOutlineWarningBorder: { value: '{colors.accentWarning}' },
          actionOutlineWarningBorderHover: {
            value: '{colors.accentWarningHover}',
          },
          actionOutlineWarningForeground: { value: '{colors.accentWarning}' },
          actionOutlineErrorBackground: { value: '{colors.surfaceBase}' },
          actionOutlineErrorBackgroundHover: {
            value: '{colors.accentErrorSubtle}',
          },
          actionOutlineErrorBorder: { value: '{colors.accentError}' },
          actionOutlineErrorBorderHover: { value: '{colors.accentErrorHover}' },
          actionOutlineErrorForeground: { value: '{colors.accentError}' },
          actionIconPrimaryBackground: { value: '{colors.surfaceBase}' },
          actionIconPrimaryBackgroundHover: { value: '{colors.surfaceSubtle}' },
          actionIconPrimaryBorder: { value: '{colors.borderSubtle}' },
          actionIconPrimaryBorderHover: { value: '{colors.brandPrimary}' },
          actionIconPrimaryForeground: { value: '{colors.brandPrimary}' },
          actionIconSuccessBackground: { value: '{colors.surfaceBase}' },
          actionIconSuccessBackgroundHover: {
            value: '{colors.accentSuccessSubtle}',
          },
          actionIconSuccessBorder: { value: '{colors.accentSuccess}' },
          actionIconSuccessBorderHover: {
            value: '{colors.accentSuccessHover}',
          },
          actionIconSuccessForeground: { value: '{colors.accentSuccess}' },
          actionIconWarningBackground: { value: '{colors.surfaceBase}' },
          actionIconWarningBackgroundHover: {
            value: '{colors.accentWarningSubtle}',
          },
          actionIconWarningBorder: { value: '{colors.accentWarning}' },
          actionIconWarningBorderHover: {
            value: '{colors.accentWarningHover}',
          },
          actionIconWarningForeground: { value: '{colors.accentWarning}' },
          actionIconErrorBackground: { value: '{colors.surfaceBase}' },
          actionIconErrorBackgroundHover: {
            value: '{colors.accentErrorSubtle}',
          },
          actionIconErrorBorder: { value: '{colors.accentError}' },
          actionIconErrorBorderHover: { value: '{colors.accentErrorHover}' },
          actionIconErrorForeground: { value: '{colors.accentError}' },
          actionSolidPrimaryBackground: { value: '{colors.brandPrimary}' },
          actionSolidPrimaryBackgroundHover: {
            value: '{colors.brandPrimaryHover}',
          },
          actionSolidPrimaryBackgroundActive: {
            value: '{colors.brandPrimaryActive}',
          },
          actionSolidPrimaryBorder: { value: '{colors.brandPrimary}' },
          actionSolidPrimaryBorderHover: {
            value: '{colors.brandPrimaryHover}',
          },
          actionSolidPrimaryForeground: { value: '{colors.surfaceBase}' },
          actionSolidSuccessBackground: { value: '{colors.accentSuccess}' },
          actionSolidSuccessBackgroundHover: {
            value: '{colors.accentSuccessHover}',
          },
          actionSolidSuccessBackgroundActive: {
            value: '{colors.accentSuccessActive}',
          },
          actionSolidSuccessBorder: { value: '{colors.accentSuccess}' },
          actionSolidSuccessBorderHover: {
            value: '{colors.accentSuccessHover}',
          },
          actionSolidSuccessForeground: { value: '{colors.surfaceBase}' },
          actionSolidWarningBackground: { value: '{colors.accentWarning}' },
          actionSolidWarningBackgroundHover: {
            value: '{colors.accentWarningHover}',
          },
          actionSolidWarningBackgroundActive: {
            value: '{colors.accentWarningActive}',
          },
          actionSolidWarningBorder: { value: '{colors.accentWarning}' },
          actionSolidWarningBorderHover: {
            value: '{colors.accentWarningHover}',
          },
          actionSolidWarningForeground: { value: '{colors.textPrimary}' },
          actionSolidErrorBackground: { value: '{colors.accentError}' },
          actionSolidErrorBackgroundHover: {
            value: '{colors.accentErrorHover}',
          },
          actionSolidErrorBackgroundActive: {
            value: '{colors.accentErrorActive}',
          },
          actionSolidErrorBorder: { value: '{colors.accentError}' },
          actionSolidErrorBorderHover: { value: '{colors.accentErrorHover}' },
          actionSolidErrorForeground: { value: '{colors.surfaceBase}' },
          cardAccentForeground: { value: '{colors.surfaceBase}' },
          cardBackground: { value: '{colors.surfaceBase}' },
          cardBorder: { value: 'rgba(45, 54, 82, 0.16)' },
          cardBorderHover: { value: '{colors.brandPrimary}' },
          cardForeground: { value: '{colors.textPrimary}' },
          cardMutedForeground: { value: 'rgba(45, 54, 82, 0.82)' },
          cardSubtleBorder: { value: 'rgba(45, 54, 82, 0.14)' },
          focusRingColor: { value: '{colors.effectBrandFocus}' },
          borderAccentSubtle: { value: 'rgba(255, 250, 245, 0.28)' },
          borderAccentStrong: { value: '{colors.brandPrimaryStrong}' },
          borderInteractiveMuted: { value: '{colors.borderSubtle}' },
          borderNeutralMuted: { value: 'rgba(188, 192, 211, 0.34)' },
          borderStatusInfoSubtle: { value: 'rgba(98, 93, 224, 0.2)' },
          borderStatusSuccessSubtle: { value: 'rgba(0, 120, 133, 0.22)' },
          borderStatusWarningSubtle: { value: 'rgba(234, 164, 67, 0.28)' },
          foregroundMuted: { value: 'rgba(45, 54, 82, 0.82)' },
          foregroundMutedSubtle: { value: 'rgba(45, 54, 82, 0.68)' },
          foregroundOnAccentMuted: { value: 'rgba(255, 250, 245, 0.92)' },
          surfaceInteractiveMuted: { value: '{colors.surfaceMuted}' },
          surfaceStatusInfoSubtle: { value: 'rgba(98, 93, 224, 0.12)' },
          surfaceAccentStrong: { value: '{colors.brandPrimaryStrong}' },
          surfaceTintedAccentHover: { value: 'rgba(98, 93, 224, 0.08)' },
        },
      },
    },
  },
  outdir: 'styled-system',
});