Mirror of https://github.com/roostorg/coop
github.com/roostorg/coop
1import kit from '@kojodesign/tailwindkit';
2import containerQueries from '@tailwindcss/container-queries';
3import forms from '@tailwindcss/forms';
4import typography from '@tailwindcss/typography';
5
6module.exports = {
7 darkMode: ['class'],
8 content: [
9 './pages/**/*.{ts,astro,tsx}',
10 './components/**/*.{ts,astro,tsx}',
11 './app/**/*.{ts,astro,tsx}',
12 './src/**/*.{ts,astro,tsx}',
13 ],
14 prefix: '',
15 theme: {
16 extend: {
17 height: {
18 '1/2': '50%',
19 },
20 animation: {
21 'spin-slow': 'spin 3s linear infinite',
22 'accordion-down': 'accordion-down 0.2s ease-out',
23 'accordion-up': 'accordion-up 0.2s ease-out',
24 'carousel-left': 'carousel-left 60s linear infinite',
25 'carousel-right': 'carousel-right 60s linear infinite',
26 'spin-gradient': 'glow-spin 20s ease-in-out infinite',
27 },
28 colors: {
29 // SHADCN themeable variables
30 border: 'hsl(var(--border))',
31 input: 'hsl(var(--input))',
32 ring: 'hsl(var(--ring))',
33 background: 'hsl(var(--background))',
34 foreground: 'hsl(var(--foreground))',
35 primary: {
36 DEFAULT: 'hsl(var(--primary))',
37 foreground: 'hsl(var(--primary-foreground))',
38 },
39 secondary: {
40 DEFAULT: 'hsl(var(--secondary))',
41 foreground: 'hsl(var(--secondary-foreground))',
42 },
43 destructive: {
44 DEFAULT: 'hsl(var(--destructive))',
45 foreground: 'hsl(var(--destructive-foreground))',
46 },
47 muted: {
48 DEFAULT: 'hsl(var(--muted))',
49 foreground: 'hsl(var(--muted-foreground))',
50 },
51 accent: {
52 DEFAULT: 'hsl(var(--accent))',
53 foreground: 'hsl(var(--accent-foreground))',
54 },
55 popover: {
56 DEFAULT: 'hsl(var(--popover))',
57 foreground: 'hsl(var(--popover-foreground))',
58 },
59 card: {
60 DEFAULT: 'hsl(var(--card))',
61 foreground: 'hsl(var(--card-foreground))',
62 },
63 'coop-dark-purple': '#2f2745',
64 'coop-dark-purple-hover': '#160e1a',
65 'coop-purple': '#756ab9',
66 'coop-purple-hover': '#514982',
67 'coop-purple-selected': '#443c75',
68 'coop-lightpurple': '#e4e2ec',
69 'coop-lightpurple-hover': '#c6c4cf',
70 'coop-blue': '#6aa9f6',
71 'coop-blue-hover': '#5589c9',
72 'coop-lightblue': '#daecfd',
73 'coop-lightblue-hover': '#cce5fc',
74 'coop-red': '#e9958c',
75 'coop-red-hover': '#b06f68',
76 'coop-lightred': '#f7e0d7',
77 'coop-lightred-hover': '#d4bbb2',
78 'coop-orange': '#f3c07a',
79 'coop-orange-hover': '#e0a758',
80 'coop-lightorange': '#fcebd4',
81 'coop-lightorange-hover': '#dec9ad',
82 'coop-green': '#8cc084',
83 'coop-green-hover': '#638a5f',
84 'coop-lightgreen': '#d8ebd2',
85 'coop-lightgreen-hover': '#accfa9',
86 'coop-yellow': '#f5d76e',
87 'coop-yellow-hover': '#d2b457',
88 'coop-lightyellow': '#fef5cf',
89 'coop-lightyellow-hover': '#eadfaa',
90 'coop-pink': '#f69ebd',
91 'coop-pink-hover': '#d8759e',
92 'coop-lightpink': '#fcd7e7',
93 'coop-lightpink-hover': '#e0aad1',
94 'coop-brown': '#a87860',
95 'coop-brown-hover': '#8d654c',
96 'coop-lightbrown': '#e3c8b7',
97 'coop-lightbrown-hover': '#c4a691',
98 'coop-success-green': '#4BB543',
99 'coop-success-green-hover': '#369c2f',
100 'coop-alert-red': '#f1483b',
101 'coop-alert-red-hover': '#CD453A',
102 clear: 'transparent',
103 black: '#282C31',
104 white: '#FFF',
105 'landing-page-green': '#15D277',
106 ternary: '#BA53F9',
107
108 // Coop UI Brand Color
109 indigo: {
110 50: '#ecefff',
111 100: '#dde2ff',
112 200: '#c2c9ff',
113 300: '#9ca4ff',
114 400: '#7675ff',
115 500: '#7165FF',
116 600: '#5436f5',
117 700: '#482ad8',
118 800: '#482ad8',
119 900: '#332689',
120 950: '#201650',
121 },
122 },
123 boxShadow: {
124 'focus-indigo': '0px 0px 0px 4px rgba(113, 101, 255, 0.25)',
125 },
126 fontFamily: {
127 sans: ['Manrope', 'sans-serif'],
128 },
129 container: {
130 center: true,
131 padding: '2rem',
132 screens: {
133 '2xl': '1400px',
134 },
135 },
136 backgroundColor: ({ theme }) => ({
137 ...theme('colors'),
138 DEFAULT: '#FBFBFB',
139 }),
140 borderColor: ({ theme }) => ({
141 DEFAULT: theme('colors.black/0.08'),
142 default: theme('colors.black/0.08'),
143 clear: theme('colors.clear'),
144 primary: theme('colors.primary'),
145 accent: theme('colors.accent'),
146 'landing-page-green': theme('colors.landing-page-green'),
147 }),
148 textColor: ({ theme }) => ({
149 DEFAULT: theme('colors.black'),
150 clear: theme('colors.clear'),
151 default: theme('colors.black'),
152 accent: theme('colors.accent'),
153 primary: theme('colors.primary'),
154 inverted: theme('colors.white'),
155 subtle: theme('colors.black/0.55'),
156 }),
157 fontSize: {
158 xxs: ['10px', { lineHeight: '12px', letterSpacing: '0.05px' }],
159 xs: ['12px', { lineHeight: '16px', letterSpacing: '0.06px' }],
160 sm: ['14px', { lineHeight: '20px', letterSpacing: '0.07px' }],
161 base: ['16px', { lineHeight: '24px', letterSpacing: '0.08px' }],
162 lg: ['18px', { lineHeight: 'normal', letterSpacing: '0.09px' }],
163 xl: ['20px', { lineHeight: 'normal', letterSpacing: '0.1px' }],
164 '2xl': ['24px', { lineHeight: 'normal', letterSpacing: '0.12px' }],
165 '3xl': ['30px', { lineHeight: 'normal', letterSpacing: '0.15px' }],
166 '4xl': ['36px', { lineHeight: 'normal', letterSpacing: '0.18px' }],
167 '5xl': ['48px', { lineHeight: 'normal', letterSpacing: '0.24px' }],
168
169 // TODO: legacy, to be removed once all pages are migrated to coop-ui
170 '3.5xl': '2rem',
171 '4.1xl': '2.5rem',
172 '4.5xl': '2.75rem',
173 '5.5xl': '3.25rem',
174 },
175 borderRadius: {
176 // shadcn default values
177 lg: `var(--radius)`,
178 md: `calc(var(--radius) - 2px)`,
179 sm: 'calc(var(--radius) - 4px)',
180
181 lg2: '0.625rem',
182 '4xl': '1.875rem',
183 '5xl': '2.5rem',
184 full: '9999px',
185 },
186 animationDuration: {
187 20000: '20000ms',
188 },
189 backgroundImage: {
190 'graph-paper':
191 'linear-gradient(to bottom, rgba(0,0,0,0.05) 1px, transparent 1px), linear-gradient(to right, rgba(0,0,0,0.05) 1px, transparent 1px)',
192 },
193 lineHeight: {
194 tight: '1.3',
195 },
196 padding: {
197 5.5: '22px',
198 },
199 screens: {
200 '2xl': '1375px',
201 },
202 keyframes: {
203 'accordion-down': {
204 from: { height: '0' },
205 to: { height: 'var(--radix-accordion-content-height)' },
206 },
207 'accordion-up': {
208 from: { height: 'var(--radix-accordion-content-height)' },
209 to: { height: '0' },
210 },
211 'glow-spin': {
212 from: { '--gradient-angle': '0deg' },
213 to: { '--gradient-angle': '360deg' },
214 },
215 'carousel-left': {
216 from: { transform: 'translateX(0)' },
217 to: { transform: 'translateX(calc(-100% - 1rem))' },
218 },
219 'carousel-right': {
220 from: { transform: 'translateX(calc(-100% - 1rem))' },
221 to: { transform: 'translateX(0)' },
222 },
223 },
224 },
225 },
226 plugins: [
227 kit,
228 function ({ addUtilities }) {
229 const newUtilities = {
230 '.max-two-lines': {
231 overflow: 'hidden',
232 textOverflow: 'ellipsis',
233 whiteSpace: 'initial',
234 display: '-webkit-box',
235 '-webkit-line-clamp': '2',
236 '-webkit-box-orient': 'vertical',
237 },
238 // Vertical line with arrows at the top and bottom
239 '.arrow-line': {
240 position: 'relative',
241 width: '3px', // Line thickness
242 backgroundColor: 'rgb(226 232 240)', // Line color
243 },
244 // Up arrow on top
245 '.arrow-line::before': {
246 content: "''",
247 position: 'absolute',
248 top: '-10px', // Slightly above the top
249 left: '50%',
250 transform: 'translateX(-50%)',
251 borderLeft: '5px solid transparent',
252 borderRight: '5px solid transparent',
253 borderBottom: '10px solid rgb(226 232 240)', // Arrow color
254 },
255 // Down arrow at the bottom
256 '.arrow-line::after': {
257 content: "''",
258 position: 'absolute',
259 bottom: '-10px', // Slightly below the bottom
260 left: '50%',
261 transform: 'translateX(-50%)',
262 borderLeft: '5px solid transparent',
263 borderRight: '5px solid transparent',
264 borderTop: '10px solid rgb(226 232 240)', // Arrow color
265 },
266 };
267 addUtilities(newUtilities, ['responsive', 'hover']);
268 },
269 typography,
270 containerQueries,
271 forms({
272 strategy: 'class',
273 }),
274 require('tailwindcss-animate'),
275 ],
276 corePlugins: { preflight: true },
277};