-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathtailwind.config.ts
131 lines (122 loc) · 4.09 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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
import type { Config } from 'tailwindcss'
const config: Config = {
content: ['./components/**/*.{js,ts,jsx,tsx,mdx}', './app/**/*.{js,ts,jsx,tsx,mdx}'],
theme: {
extend: {
colors: {
ds: {
background: {
100: 'hsl(var(--ds-background-100))',
200: 'hsl(var(--ds-background-200))'
},
gray: {
100: 'hsl(var(--ds-gray-100))',
200: 'hsl(var(--ds-gray-200))',
300: 'hsl(var(--ds-gray-300))',
400: 'hsl(var(--ds-gray-400))',
500: 'hsl(var(--ds-gray-500))',
600: 'hsl(var(--ds-gray-600))',
700: 'hsl(var(--ds-gray-700))',
800: 'hsl(var(--ds-gray-800))',
900: 'hsl(var(--ds-gray-900))',
1000: 'hsl(var(--ds-gray-1000))'
},
blue: {
100: 'var(--ds-blue-100)',
200: 'var(--ds-blue-200)',
300: 'var(--ds-blue-300)',
400: 'var(--ds-blue-400)',
500: 'var(--ds-blue-500)',
600: 'var(--ds-blue-600)',
700: 'var(--ds-blue-700)',
800: 'var(--ds-blue-800)',
900: 'var(--ds-blue-900)',
1000: 'var(--ds-blue-1000)'
},
red: {
100: 'var(--ds-red-100)',
200: 'var(--ds-red-200)',
300: 'var(--ds-red-300)',
400: 'var(--ds-red-400)',
500: 'var(--ds-red-500)',
600: 'var(--ds-red-600)',
700: 'var(--ds-red-700)',
800: 'var(--ds-red-800)',
900: 'var(--ds-red-900)',
1000: 'var(--ds-red-1000)'
},
amber: {
100: 'var(--ds-amber-100)',
200: 'var(--ds-amber-200)',
300: 'var(--ds-amber-300)',
400: 'var(--ds-amber-400)',
500: 'var(--ds-amber-500)',
600: 'var(--ds-amber-600)',
700: 'var(--ds-amber-700)',
800: 'var(--ds-amber-800)',
900: 'var(--ds-amber-900)',
1000: 'var(--ds-amber-1000)'
},
green: {
100: 'var(--ds-green-100)',
200: 'var(--ds-green-200)',
300: 'var(--ds-green-300)',
400: 'var(--ds-green-400)',
500: 'var(--ds-green-500)',
600: 'var(--ds-green-600)',
700: 'var(--ds-green-700)',
800: 'var(--ds-green-800)',
900: 'var(--ds-green-900)',
1000: 'var(--ds-green-1000)'
},
teal: {
100: 'var(--ds-teal-100)',
200: 'var(--ds-teal-200)',
300: 'var(--ds-teal-300)',
400: 'var(--ds-teal-400)',
500: 'var(--ds-teal-500)',
600: 'var(--ds-teal-600)',
700: 'var(--ds-teal-700)',
800: 'var(--ds-teal-800)',
900: 'var(--ds-teal-900)',
1000: 'var(--ds-teal-1000)'
},
purple: {
100: 'var(--ds-purple-100)',
200: 'var(--ds-purple-200)',
300: 'var(--ds-purple-300)',
400: 'var(--ds-purple-400)',
500: 'var(--ds-purple-500)',
600: 'var(--ds-purple-600)',
700: 'var(--ds-purple-700)',
800: 'var(--ds-purple-800)',
900: 'var(--ds-purple-900)',
1000: 'var(--ds-purple-1000)'
},
pink: {
100: 'var(--ds-pink-100)',
200: 'var(--ds-pink-200)',
300: 'var(--ds-pink-300)',
400: 'var(--ds-pink-400)',
500: 'var(--ds-pink-500)',
600: 'var(--ds-pink-600)',
700: 'var(--ds-pink-700)',
800: 'var(--ds-pink-800)',
900: 'var(--ds-pink-900)',
1000: 'var(--ds-pink-1000)'
}
}
},
fontFamily: {
sans: 'var(--font-geist-sans)',
mono: 'var(--font-geist-mono)'
},
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))'
}
}
},
plugins: []
}
export default config