CreepOS/tailwind.config.ts at another · softpython2884/CreepOS · 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
import type {Config} from 'tailwindcss';

export default {
  darkMode: ['class'],
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      backgroundImage: {
        'grid-pattern': "linear-gradient(hsl(var(--accent) / 0.05) 1px, transparent 1px), linear-gradient(to right, hsl(var(--accent) / 0.05) 1px, hsl(var(--background)) 1px)",
        'vignette': 'radial-gradient(ellipse at center, transparent 70%, hsl(var(--background)) 100%)',
      },
      fontFamily: {
        body: ['Inter', 'sans-serif'],
        headline: ['Inter', 'sans-serif'],
        code: ['"Source Code Pro"', 'monospace'],
      },
      colors: {
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
        card: {
          DEFAULT: 'hsl(var(--card))',
          foreground: 'hsl(var(--card-foreground))',
        },
        popover: {
          DEFAULT: 'hsl(var(--popover))',
          foreground: 'hsl(var(--popover-foreground))',
        },
        primary: {
          DEFAULT: 'hsl(var(--primary))',
          foreground: 'hsl(var(--primary-foreground))',
        },
        secondary: {
          DEFAULT: 'hsl(var(--secondary))',
          foreground: 'hsl(var(--secondary-foreground))',
        },
        muted: {
          DEFAULT: 'hsl(var(--muted))',
          foreground: 'hsl(var(--muted-foreground))',
        },
        accent: {
          DEFAULT: 'hsl(var(--accent))',
          foreground: 'hsl(var(--accent-foreground))',
        },
        destructive: {
          DEFAULT: 'hsl(var(--destructive))',
          foreground: 'hsl(var(--destructive-foreground))',
        },
        border: 'hsl(var(--border))',
        input: 'hsl(var(--input))',
        ring: 'hsl(var(--ring))',
        chart: {
          '1': 'hsl(var(--chart-1))',
          '2': 'hsl(var(--chart-2))',
          '3': 'hsl(var(--chart-3))',
          '4': 'hsl(var(--chart-4))',
          '5': 'hsl(var(--chart-5))',
        },
      },
      borderRadius: {
        lg: 'var(--radius)',
        md: 'calc(var(--radius) - 2px)',
        sm: 'calc(var(--radius) - 4px)',
      },
      keyframes: {
        'accordion-down': {
          from: {
            height: '0',
          },
          to: {
            height: 'var(--radix-accordion-content-height)',
          },
        },
        'accordion-up': {
          from: {
            height: 'var(--radix-accordion-content-height)',
          },
          to: {
            height: '0',
          },
        },
        glitch: {
            '0%, 100%': { transform: 'translate(0, 0) skew(0deg)', opacity: '1' },
            '25%': { transform: 'translate(5px, -5px) skew(1deg)', opacity: '.85' },
            '50%': { transform: 'translate(-5px, 5px) skew(-1deg)', opacity: '.75' },
            '75%': { transform: 'translate(5px, 5px) skew(1deg)', opacity: '.85' },
        },
        'super-glitch': {
            '0%': { transform: 'translate(0,0) skew(0deg)', filter: 'none' },
            '10%': { transform: 'translate(-10px,-5px) skew(2deg)', filter: 'url(#chromatic-aberration-filter-1)' },
            '20%': { transform: 'translate(5px,10px) skew(-1deg)', opacity: 0.8 },
            '30%': { transform: 'translate(-15px,8px) skew(3deg)' },
            '40%': { transform: 'translate(10px,-3px) skew(-2deg)', opacity: 0.9 },
            '50%': { transform: 'translate(0,0) skew(0deg)', clipPath: 'inset(40% 0 40% 0)' },
            '60%': { transform: 'translate(-10px,10px) skew(-3deg)', opacity: 0.7 },
            '70%': { transform: 'translate(15px,-5px) skew(1deg)' },
            '80%': { transform: 'translate(5px,5px) skew(-1deg)', filter: 'url(#chromatic-aberration-filter-0)' },
            '90%': { transform: 'translate(-5px,-10px) skew(2deg)', clipPath: 'none' },
            '100%': { transform: 'translate(0,0) skew(0deg)' },
        },
        'ping-freeze': {
            '0%': { filter: 'none' },
            '10%': { filter: 'contrast(1.5)' },
            '20%': { filter: 'contrast(1) blur(0.5px)' },
            '100%': { filter: 'contrast(1) blur(0.5px)' },
        },
        'glitch-short': {
          '0%': { transform: 'translate(0, 0)', opacity: '1' },
          '25%': { transform: 'translate(2px, -2px)', opacity: '.75' },
          '50%': { transform: 'translate(-2px, 2px)', opacity: '.5' },
          '75%': { transform: 'translate(2px, 2px)', opacity: '.75' },
          '100%': { transform: 'translate(-2px, -2px)', opacity: '1' },
        },
        'pulse-slow': {
          '0%, 100%': { opacity: '0.8' },
          '50%': { opacity: '1' },
        },
        shatter: {
            '0%': { transform: 'scale(1)', opacity: 1 },
            '100%': { transform: 'scale(2.5)', opacity: 0 }
        },
        'glitch-long': {
            '0%': { transform: 'translate(0,0) skew(0deg)' },
            '10%': { transform: 'translate(-5px,-5px) skew(1deg)' },
            '20%': { transform: 'translate(5px,5px) skew(-1deg)' },
            '30%': { transform: 'translate(-7px,3px) skew(2deg)' },
            '40%': { transform: 'translate(7px,-3px) skew(-2deg)' },
            '50%': { transform: 'translate(-5px,7px) skew(1deg)' },
            '60%': { transform: 'translate(5px,-7px) skew(-1deg)' },
            '70%': { transform: 'translate(-7px,-3px) skew(2deg)' },
            '80%': { transform: 'translate(7px,3px) skew(-2deg)' },
            '90%': { transform: 'translate(-5px,-5px) skew(1deg)' },
            '100%': { transform: 'translate(0,0) skew(0deg)' },
        },
        'chromatic-aberration': {
            '0%, 100%': { filter: 'url(#chromatic-aberration-filter-0)' },
            '50%': { filter: 'url(#chromatic-aberration-filter-1)' },
        },
        typing: {
            from: { width: '0' },
            to: { width: '100%' }
        },
        'typing-cursor-slow': {
          'from, to': { borderColor: 'transparent' },
          '50%': { borderColor: 'currentColor' },
        },
        blink: {
            '0%, 100%': { opacity: '1' },
            '50%': { opacity: '0' }
        },
        scream: {
            '0%, 100%': { transform: 'scale(1)', opacity: 0 },
            '5%': { transform: 'scale(1.1) translate(-5px, 5px)', opacity: 1 },
            '10%': { transform: 'scale(1)', opacity: 0.9 },
            '80%': { transform: 'scale(1.5)', opacity: 0.2 },
            '90%': { opacity: 0.1 },
        },
        lag: {
            '0%, 100%': { opacity: 1, filter: 'none' },
            '50%': { opacity: 0.6, filter: 'blur(1px) contrast(2)' },
        },
        'image-deform': {
            '0%, 100%': { transform: 'scale(1)', filter: 'url(#chromatic-aberration-filter-0)' },
            '20%': { transform: 'scale(1.02) skewX(2deg)', filter: 'url(#chromatic-aberration-filter-1)' },
            '50%': { clipPath: 'inset(20% 0 30% 0)' },
            '80%': { transform: 'scale(0.98) skewX(-2deg)', filter: 'none' },
        },
        'red-screen': {
          '0%': { backgroundColor: 'transparent', filter: 'invert(0)'},
          '50%': { backgroundColor: 'hsl(var(--destructive) / 0.7)', filter: 'invert(1)'},
          '100%': { backgroundColor: 'transparent', filter: 'invert(0)'},
        },
        'die-spam': {
          '0%, 100%': { transform: 'scale(1)', opacity: 1 },
          '5%': { transform: 'scale(1.2) translate(10px, -5px)', opacity: 0.8 },
          '10%': { transform: 'scale(0.9) translate(-10px, 5px)', opacity: 1 },
          '15%': { transform: 'scale(1.1)', opacity: 0.9 },
          '20%, 80%': { opacity: 1, textShadow: '0 0 20px #f00, 0 0 40px #f00, 0 0 60px #f00' },
          '100%': { opacity: 1, transform: 'scale(3)', filter: 'blur(5px)' }
        },
        vibration: {
            '0%, 100%': { transform: 'translateX(0)' },
            '25%': { transform: 'translateX(-1px)' },
            '50%': { transform: 'translateX(1px)' },
            '75%': { transform: 'translateX(-1px)' },
        },
        'system-collapse': {
          '0%': { filter: 'contrast(1) saturate(1)', background: 'hsl(var(--background))' },
          '50%': { filter: 'contrast(2) saturate(0) brightness(1.5)', background: 'hsl(0, 0%, 5%)' },
          '100%': { filter: 'contrast(1) saturate(1)', background: 'hsl(var(--background))' },
        }
      },
      animation: {
        'accordion-down': 'accordion-down 0.2s ease-out',
        'accordion-up': 'accordion-up 0.2s ease-out',
        'glitch': 'glitch 0.4s linear infinite alternate',
        'glitch-short': 'glitch-short 0.2s linear',
        'glitch-long': 'glitch-long 1s linear infinite alternate',
        'typing': 'typing 1s steps(20, end), blink .75s step-end infinite',
        'typing-cursor-slow': 'typing-cursor-slow 1.5s step-end infinite',
        'blink': 'blink 1s step-end infinite',
        'scream': 'scream 0.7s ease-out forwards',
        'lag': 'lag 1.5s linear infinite alternate',
        'chromatic-aberration': 'chromatic-aberration 1s steps(1, end) infinite',
        'image-deform': 'image-deform 4s ease-in-out forwards, screen-tear 2s ease-in-out infinite alternate',
        'pulse-strong': 'pulse-strong 2s cubic-bezier(0, 0, 0.2, 1) infinite',
        'red-screen': 'red-screen 1.5s ease-in-out forwards',
        'die-spam': 'die-spam 0.5s linear infinite',
        'ping-freeze': 'ping-freeze 2s ease-in-out forwards',
        'super-glitch': 'super-glitch 1.5s linear infinite',
        'vibration': 'vibration 0.1s linear infinite',
        'system-collapse': 'system-collapse 1.5s linear infinite alternate, super-glitch 2s linear infinite',
        'pulse-slow': 'pulse-slow 3s ease-in-out infinite',
        'shatter': 'shatter 1.5s ease-out forwards',
      },
    },
  },
  plugins: [require('tailwindcss-animate')],
} satisfies Config;