ui/plugin.mjs at main · LarisLab/ui · 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
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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
import plugin from 'tailwindcss/plugin'
import { fontFamily } from 'tailwindcss/defaultTheme'

export default plugin(
    ({ addBase }) => {
        addBase({
            ':root': {
                '--background': '0 0% 100%',
                '--foreground': '222.2 84% 4.9%',
                '--card': '0 0% 100%',
                '--card-foreground': '222.2 84% 4.9%',
                '--popover': '0 0% 100%',
                '--popover-foreground': '222.2 84% 4.9%',
                '--primary': '221.2 83.2% 53.3%',
                '--primary-foreground': '210 40% 98%',
                '--secondary': '210 40% 96.1%',
                '--secondary-foreground': '222.2 47.4% 11.2%',
                '--muted': '210 40% 96.1%',
                '--muted-foreground': '215.4 16.3% 46.9%',
                '--accent': '210 40% 96.1%',
                '--accent-foreground': '222.2 47.4% 11.2%',
                '--destructive': '0 84.2% 60.2%',
                '--destructive-foreground': '210 40% 98%',
                '--border': '214.3 31.8% 91.4%',
                '--input': '214.3 31.8% 91.4%',
                '--ring': '221.2 83.2% 53.3%',
                '--radius': '0.5rem',
                '--chart-1': '12 76% 61%',
                '--chart-2': '173 58% 39%',
                '--chart-3': '197 37% 24%',
                '--chart-4': '43 74% 66%',
                '--chart-5': '27 87% 67%',
                '--sidebar-background': '0 0% 98%',
                '--sidebar-foreground': '240 5.3% 26.1%',
                '--sidebar-primary': '240 5.9% 10%',
                '--sidebar-primary-foreground': '0 0% 98%',
                '--sidebar-accent': '240 4.8% 95.9%',
                '--sidebar-accent-foreground': '240 5.9% 10%',
                '--sidebar-border': '220 13% 91%',
                '--sidebar-ring': '217.2 91.2% 59.8%',
            },
            '.dark': {
                '--background': '240 10% 3.9%',
                '--foreground': '0 0% 98%',
                '--card': '240 10% 3.9%',
                '--card-foreground': '0 0% 98%',
                '--popover': '240 10% 3.9%',
                '--popover-foreground': '0 0% 98%',
                '--primary': '217.2 91.2% 59.8%',
                '--primary-foreground': '222.2 47.4% 11.2%',
                '--secondary': '240 3.7% 15.9%',
                '--secondary-foreground': '0 0% 98%',
                '--muted': '240 3.7% 15.9%',
                '--muted-foreground': '240 5% 64.9%',
                '--accent': '240 3.7% 15.9%',
                '--accent-foreground': '0 0% 98%',
                '--destructive': '0 62.8% 30.6%',
                '--destructive-foreground': '210 40% 98%',
                '--border': '240 3.7% 15.9%',
                '--input': '240 3.7% 15.9%',
                '--ring': '240 4.9% 83.9%',
                '--radius': '0.5rem',
                '--chart-1': '220 70% 50%',
                '--chart-2': '160 60% 45%',
                '--chart-3': '30 80% 55%',
                '--chart-4': '280 65% 60%',
                '--chart-5': '340 75% 55%',
                '--sidebar-background': '240 5.9% 10%',
                '--sidebar-foreground': '240 4.8% 95.9%',
                '--sidebar-primary': '224.3 76.3% 48%',
                '--sidebar-primary-foreground': '0 0% 100%',
                '--sidebar-accent': '240 3.7% 15.9%',
                '--sidebar-accent-foreground': '240 4.8% 95.9%',
                '--sidebar-border': '240 3.7% 15.9%',
                '--sidebar-ring': '217.2 91.2% 59.8%',
            },
            '*': {
                '@apply border-border': {},
            },
            body: {
                '@apply bg-background text-foreground': {},
                'font-feature-settings': '"rlig" 1, "calt" 1',
            },
        })
    },
    {
        darkMode: ['class'],
        content: ['node_modules/@larislab/ui/dist/**/*.js'],
        theme: {
            container: {
                center: true,
                padding: '2rem',
                screens: {
                    '2xl': '1400px',
                },
            },
            extend: {
                colors: {
                    border: 'hsl(var(--border))',
                    input: 'hsl(var(--input))',
                    ring: 'hsl(var(--ring))',
                    background: 'hsl(var(--background))',
                    foreground: 'hsl(var(--foreground))',
                    primary: {
                        DEFAULT: 'hsl(var(--primary))',
                        foreground: 'hsl(var(--primary-foreground))',
                    },
                    secondary: {
                        DEFAULT: 'hsl(var(--secondary))',
                        foreground: 'hsl(var(--secondary-foreground))',
                    },
                    destructive: {
                        DEFAULT: 'hsl(var(--destructive))',
                        foreground: 'hsl(var(--destructive-foreground))',
                    },
                    muted: {
                        DEFAULT: 'hsl(var(--muted))',
                        foreground: 'hsl(var(--muted-foreground))',
                    },
                    accent: {
                        DEFAULT: 'hsl(var(--accent))',
                        foreground: 'hsl(var(--accent-foreground))',
                    },
                    popover: {
                        DEFAULT: 'hsl(var(--popover))',
                        foreground: 'hsl(var(--popover-foreground))',
                    },
                    card: {
                        DEFAULT: 'hsl(var(--card))',
                        foreground: 'hsl(var(--card-foreground))',
                    },
                    sidebar: {
                        DEFAULT: 'hsl(var(--sidebar-background))',
                        foreground: 'hsl(var(--sidebar-foreground))',
                        primary: 'hsl(var(--sidebar-primary))',
                        'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
                        accent: 'hsl(var(--sidebar-accent))',
                        'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
                        border: 'hsl(var(--sidebar-border))',
                        ring: 'hsl(var(--sidebar-ring))',
                    },
                },
                borderRadius: {
                    lg: 'var(--radius)',
                    md: 'calc(var(--radius) - 2px)',
                    sm: 'calc(var(--radius) - 4px)',
                },
                keyframes: {
                    'accordion-down': {
                        from: { height: '0' },
                        to: { height: 'var(--radix-accordion-content-height)' },
                    },
                    'accordion-up': {
                        from: { height: 'var(--radix-accordion-content-height)' },
                        to: { height: '0' },
                    },
                },
                animation: {
                    'accordion-down': 'accordion-down 0.2s ease-out',
                    'accordion-up': 'accordion-up 0.2s ease-out',
                },
                fontFamily: {
                    sans: ['var(--font-sans, Inter Variable, Inter)', ...fontFamily.sans],
                },
            },
        },
    }
)