minimal-chrome-tab/panda.config.ts at main · khmm12/minimal-chrome-tab · 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
import { defineAnimationStyles, defineConfig, defineGlobalStyles, defineKeyframes } from '@pandacss/dev'
import type { AnimationStyles } from '@pandacss/types'
import removeUnusedCSS from './lib/panda/remove-unused-css.js'

const animationStyles: AnimationStyles = defineAnimationStyles({
  'scale-fade-in': {
    value: {
      transformOrigin: 'var(--transform-origin)',
      animationName: 'scale-in, fade-in',
    },
  },
  'scale-fade-out': {
    value: {
      transformOrigin: 'var(--transform-origin)',
      animationName: 'scale-out, fade-out',
    },
  },
})

const keyframes = defineKeyframes({
  'fade-in': {
    from: {
      opacity: 0,
    },
    to: {
      opacity: 1,
    },
  },
  'fade-out': {
    from: {
      opacity: 1,
    },
    to: {
      opacity: 0,
    },
  },
  'scale-in': {
    from: {
      scale: 0.6,
    },
    to: {
      scale: 1.0,
    },
  },
  'scale-out': {
    from: {
      scale: 1.0,
    },
    to: {
      scale: 0.6,
    },
  },
})

export default defineConfig({
  preflight: false,
  importMap: 'styled-system',
  include: ['./src/**/*.{js,jsx,ts,tsx}'],
  exclude: [],
  conditions: {
    extend: {
      dark: '&[data-theme="dark"], [data-theme="dark"] &',
    },
  },
  theme: {
    extend: {
      keyframes,
      animationStyles,
      tokens: {
        fonts: {
          Digital7Mono: { value: 'Digital-7Mono' },
        },
      },
    },
  },
  globalCss: defineGlobalStyles({
    html: {
      '-webkit-text-size-adjust': '100%',
      '-webkit-tap-highlight-color': 'rgba(0, 0, 0, 0)',
      '-webkit-font-smoothing': 'antialiased',
      fontFamily:
        "'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
      fontWeight: 400,
      boxSizing: 'border-box',
      background: { base: 'white', _dark: 'neutral.800' },
    },
    body: {
      margin: 0,
      touchAction: 'manipulation',
      fontFamily: 'inherit',
      fontSize: 'inherit',
    },
    '*, *::before, *::after': {
      boxSizing: 'inherit',
    },
    'html, body, #app': {
      height: 'full',
      width: 'full',
    },
  }),
  outdir: 'styled-system',
  hooks: {
    'cssgen:done'({ artifact, content }) {
      if (artifact === 'styles.css') return removeUnusedCSS(content)
      return content
    },
  },
})