website/tailwind.config.cjs at main · ashfidable/website · 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
import colors from 'tailwindcss/colors'

/** @type {import('tailwindcss').Config} */
module.exports = {
	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],

	theme: {
		extend: {
			accentColor: {
				base: 'var(--color-input-accent)'
			},
			backgroundColor: {
				background: 'var(--color-background)',
				body: 'var(--color-background-body)',
				card: 'var(--color-card-background)',
				'card-hover': 'var(--color-card-background-hover)',
				category: 'var(--color-category-background)',
				button: 'var(--color-button-normal)',
				'button-active': 'var(--color-button-active)',
				'button-hover': 'var(--color-button-hover)',
				'spotify-progress': 'var(--color-spotify-progress)',
				'spotify-progress-outer': 'var(--color-spotify-progress-background)',
				input: 'var(--color-input-background)',
				blockquote: 'var(--color-blockquote-background)'
			},
			backgroundImage: {
				background: 'var(--color-background)'
			},
			textColor: {
				body: 'var(--color-body-text)',
				'body-low-contrast': 'var(--color-body-text-low-contrast)',
				'button-text-active': 'var(--color-button-text-active)',
				heading: 'var(--color-heading-text)',
				'heading-hover': 'var(--color-heading-text-hover)',
				'datetime-text': 'var(--color-card-date-text)',
				'icon-hover': 'var(--color-icon-hover)',
				icon: 'var(--color-icon)',
				category: 'var(--color-category-text)',
				'blockquote-text': 'var(--color-blockquote-text)'
			},
			borderColor: {
				highlight: 'var(--color-border-highlight)',
				'category-highlight': 'var(--color-category-highlight)',
				'highlight-hover': 'var(--color-border-highlight-hover)',
				'blockquote-indicator': 'var(--color-blockquote-indicator)'
			},
			outlineColor: {
				highlight: 'var(--color-border-highlight)',
				'highlight-hover': 'var(--color-border-highlight-hover)'
			},
			textDecorationColor: {
				link: 'var(--color-link)',
				'link-hover': 'var(--color-link-hover)'
			},
			ringColor: {
				'input-normal': 'var(--color-input-ring-normal)',
				'input-focus': 'var(--color-input-ring-focus)'
			},
			gridTemplateColumns: {
				'sidebar-layout': '14rem 1fr'
			},
			fontFamily: {
				body: 'var(--font-body)',
				heading: 'var(--font-heading)'
			},
			fontSize: {
				base: 'clamp(.75rem, 3.5vw, 1rem)',
				xl: 'clamp(1rem, 3.5vw, 1.25rem)',
				'3xl': 'clamp(1.5rem, 3vw, 2.5rem)'
			},
			animation: {
				wave: 'wave-animation 2.5s linear infinite'
			},
			easing: {
				springy: 'var(--ease)'
			},
			borderRadius: {
				md: 'var(--rounded-radius)'
			}
		}
	},
	plugins: []
}