-
Notifications
You must be signed in to change notification settings - Fork 1
/
tailwind.config.ts
109 lines (107 loc) · 3.99 KB
/
tailwind.config.ts
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
/** @type {import('tailwindcss').Config} */
import { withTV } from 'tailwind-variants/transformer'
const config = withTV({
darkMode: ['class'],
content: ['./components/**/*.{ts,tsx}', './app/**/*.{ts,tsx,js,jsx,md,.mdx}', './src/**/*.{ts,tsx,js,jsx,md,js,jsx,mdx}'],
theme: {
container: {
center: true,
padding: '2rem',
screens: {
'2xl': '1400px',
},
},
extend: {
colors: {
light: "oklch(var(--light) / <alpha-value>)",
dark: "oklch(var(--dark) / <alpha-value>)",
border: "oklch(var(--border) / <alpha-value>)",
input: "oklch(var(--input) / <alpha-value>)",
ring: "oklch(var(--ring) / <alpha-value>)",
toggle: "oklch(var(--toggle) / <alpha-value>)",
bg: "oklch(var(--bg) / <alpha-value>)",
fg: "oklch(var(--fg) / <alpha-value>)",
primary: {
DEFAULT: "oklch(var(--primary) / <alpha-value>)",
fg: "oklch(var(--primary-fg) / <alpha-value>)",
'50': 'oklch(97.37% 0.014 238 / <alpha-value>)',
'100': 'oklch(93.81% 0.03280649558828209 241.06746081081621 / <alpha-value>)',
'200': 'oklch(88.9% 0.059 242.33 / <alpha-value>)',
'300': 'oklch(82.58% 0.09763750297234024 239.47890979942932 / <alpha-value>)',
'400': 'oklch(74.36% 0.142 244.63 / <alpha-value>)',
'500': 'oklch(65.63% 0.18687681791257255 253.9987240551966 / <alpha-value>)',
'600': 'oklch(57.82% 0.228 260.03 / <alpha-value>)',
'700': 'oklch(52.27% 0.227 261.8 / <alpha-value>)',
'800': 'oklch(45.04% 0.19 262.37 / <alpha-value>)',
'900': 'oklch(39.92% 0.145 261.36 / <alpha-value>)',
'950': 'oklch(29.38% 0.093 262.52 / <alpha-value>)',
},
secondary: {
DEFAULT: "oklch(var(--secondary) / <alpha-value>)",
fg: "oklch(var(--secondary-fg) / <alpha-value>)"
},
tertiary: {
DEFAULT: "oklch(var(--tertiary) / <alpha-value>)",
fg: "oklch(var(--tertiary-fg) / <alpha-value>)"
},
accent: {
DEFAULT: "oklch(var(--accent) / <alpha-value>)",
fg: "oklch(var(--accent-fg) / <alpha-value>)",
subtle: "oklch(var(--accent-subtle) / <alpha-value>)",
"subtle-fg": "oklch(var(--accent-subtle-fg) / <alpha-value>)"
},
success: {
DEFAULT: "oklch(var(--success) / <alpha-value>)",
fg: "oklch(var(--success-fg) / <alpha-value>)"
},
info: {
DEFAULT: "oklch(var(--info) / <alpha-value>)",
fg: "oklch(var(--info-fg) / <alpha-value>)"
},
danger: {
DEFAULT: "oklch(var(--danger) / <alpha-value>)",
fg: "oklch(var(--danger-fg) / <alpha-value>)"
},
warning: {
DEFAULT: "oklch(var(--warning) / <alpha-value>)",
fg: "oklch(var(--warning-fg) / <alpha-value>)"
},
muted: {
DEFAULT: "oklch(var(--muted) / <alpha-value>)",
fg: "oklch(var(--muted-fg) / <alpha-value>)"
},
overlay: {
DEFAULT: "oklch(var(--overlay) / <alpha-value>)",
fg: "oklch(var(--overlay-fg) / <alpha-value>)"
}
},
borderRadius: {
'3xl': "calc(var(--radius) + 7.5px)",
'2xl': "calc(var(--radius) + 5px)",
xl: "calc(var(--radius) + 2.5px)",
lg: "calc(var(--radius))",
md: "calc(var(--radius) - 2.5px)",
sm: "calc(var(--radius) - 5px)"
},
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' },
},
},
animation: {
'accordion-down': 'accordion-down 0.2s ease-out',
'accordion-up': 'accordion-up 0.2s ease-out',
},
},
},
plugins: [
require('tailwindcss-animate'),
require('tailwindcss-react-aria-components'),
],
})
export default config