open-model-database/tailwind.config.js at main · OpenModelDB/open-model-database · 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
/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ['./src/**/*.{js,ts,jsx,tsx}'],
    theme: {
        extend: {
            fontFamily: {
                sans: [
                    'var(--font-inter)',
                    '-apple-system',
                    'BlinkMacSystemFont',
                    'Segoe UI',
                    'Helvetica',
                    'Arial',
                    'sans-serif',
                ],
            },
            colors: {
                'fade-50': '#f9f8ff',
                'fade-100': '#f3f2fd',
                'fade-200': '#e5e4ee',
                'fade-300': '#d4d3dd',
                'fade-400': '#a2a1ab',
                'fade-500': '#72717a',
                'fade-600': '#55545c',
                'fade-700': '#403f47',
                'fade-800': '#28272f',
                'fade-850': '#1f1e26',
                'fade-900': '#17171e',
                'fade-950': '#111117',

                // Semantic tokens. Prefer these over hand-pairing `x dark:y`,
                // which is where most of the theme drift came from.
                page: 'var(--page-bg)',
                surface: 'var(--surface)',
                'surface-sunken': 'var(--surface-sunken)',
                'surface-hover': 'var(--surface-hover)',
                line: 'var(--line-color)',
                'line-strong': 'var(--line-strong)',
                ink: 'var(--font-color)',
                'ink-muted': 'var(--font-color-light)',
                'ink-subtle': 'var(--font-color-subtle)',
                'accent-text': 'var(--accent-text)',
                'warning-surface': 'var(--warning-surface)',
                'warning-line': 'var(--warning-line)',
                'warning-ink': 'var(--warning-ink)',
                accent: '#4d48a9',
                'accent-50': '#feeaff',
                'accent-100': '#f8e4ff',
                'accent-200': '#e9d6ff',
                'accent-300': '#d8c5ff',
                'accent-400': '#a394ff',
                'accent-500': '#6e64ca',
                'accent-600': '#4d48a9',
                'accent-700': '#323391',
                'accent-800': '#031c74',
                'accent-900': '#000c60',
            },
            borderRadius: {
                control: 'var(--radius-control)',
                card: 'var(--radius-card)',
            },
            boxShadow: {
                card: 'var(--shadow-card)',
                raised: 'var(--shadow-raised)',
                pop: 'var(--shadow-pop)',
            },
        },
        screens: {
            sm: '640px',
            md: '768px',
            lg: '1024px',
            xl: '1400px',
        },
    },
    darkMode: ['class', '[data-theme="dark"]'],
    plugins: [require('@tailwindcss/line-clamp'), require('@headlessui/tailwindcss')],
};