listo/tailwind.config.js at main · jonnyparris/listo · 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
/** @type {import('tailwindcss').Config} */
export default {
	content: ['./src/**/*.{html,js,svelte,ts}'],
	darkMode: 'class',
	theme: {
		extend: {
			colors: {
				// Lazy Days palette - greens darkened by 20%
				primary: {
					DEFAULT: '#99B6A8',
					light: '#AABFB3',
					dark: '#85AA97'
				},
				secondary: {
					DEFAULT: '#E6C8A5',
					light: '#EDD9BF',
					dark: '#D9B88B'
				},
				background: {
					light: '#F5F4F2',
					dark: '#232322'
				},
				text: {
					DEFAULT: '#222222',
					muted: '#6B6B69'
				},
				surface: {
					light: '#EAEAE8',
					dark: '#2E2E2D'
				}
			},
			fontFamily: {
				sans: ['Inter', 'system-ui', 'sans-serif'],
				serif: ['Fraunces', 'Libre Baskerville', 'Georgia', 'serif']
			},
			letterSpacing: {
				'wordmark': '0.02em'
			},
			lineHeight: {
				'body': '1.6'
			},
			borderRadius: {
				'2xl': '1.25rem',
				'3xl': '1.5rem'
			},
			boxShadow: {
				'soft': '0 8px 24px -8px rgba(0, 0, 0, 0.06), 0 2px 8px -2px rgba(0, 0, 0, 0.04)',
				'card': '0 16px 40px -12px rgba(0, 0, 0, 0.08), 0 4px 16px -4px rgba(0, 0, 0, 0.06)',
				'float': '0 24px 48px -16px rgba(0, 0, 0, 0.10)'
			},
			transitionTimingFunction: {
				'spring': 'cubic-bezier(0.4, 0.0, 0.2, 1)',
				'spring-in': 'cubic-bezier(0.4, 0.0, 1, 1)',
				'spring-out': 'cubic-bezier(0.0, 0.0, 0.2, 1)'
			}
		}
	},
	plugins: [require('@tailwindcss/typography')]
};