teal/tailwind.config.js at main · dotMavriQ/teal · 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
import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
            colors: {
                // Theme-aware colors using CSS variables
                theme: {
                    bg: {
                        primary: 'rgb(var(--color-bg-primary) / <alpha-value>)',
                        secondary: 'rgb(var(--color-bg-secondary) / <alpha-value>)',
                        tertiary: 'rgb(var(--color-bg-tertiary) / <alpha-value>)',
                        hover: 'rgb(var(--color-bg-hover) / <alpha-value>)',
                        active: 'rgb(var(--color-bg-active) / <alpha-value>)',
                    },
                    text: {
                        primary: 'rgb(var(--color-text-primary) / <alpha-value>)',
                        secondary: 'rgb(var(--color-text-secondary) / <alpha-value>)',
                        tertiary: 'rgb(var(--color-text-tertiary) / <alpha-value>)',
                        muted: 'rgb(var(--color-text-muted) / <alpha-value>)',
                        inverted: 'rgb(var(--color-text-inverted) / <alpha-value>)',
                    },
                    border: {
                        primary: 'rgb(var(--color-border-primary) / <alpha-value>)',
                        secondary: 'rgb(var(--color-border-secondary) / <alpha-value>)',
                        focus: 'rgb(var(--color-border-focus) / <alpha-value>)',
                    },
                    accent: {
                        primary: 'rgb(var(--color-accent-primary) / <alpha-value>)',
                        'primary-hover': 'rgb(var(--color-accent-primary-hover) / <alpha-value>)',
                        secondary: 'rgb(var(--color-accent-secondary) / <alpha-value>)',
                    },
                    success: {
                        DEFAULT: 'rgb(var(--color-success) / <alpha-value>)',
                        bg: 'rgb(var(--color-success-bg) / <alpha-value>)',
                        text: 'rgb(var(--color-success-text) / <alpha-value>)',
                    },
                    warning: {
                        DEFAULT: 'rgb(var(--color-warning) / <alpha-value>)',
                        bg: 'rgb(var(--color-warning-bg) / <alpha-value>)',
                        text: 'rgb(var(--color-warning-text) / <alpha-value>)',
                    },
                    danger: {
                        DEFAULT: 'rgb(var(--color-danger) / <alpha-value>)',
                        bg: 'rgb(var(--color-danger-bg) / <alpha-value>)',
                        text: 'rgb(var(--color-danger-text) / <alpha-value>)',
                    },
                    info: {
                        DEFAULT: 'rgb(var(--color-info) / <alpha-value>)',
                        bg: 'rgb(var(--color-info-bg) / <alpha-value>)',
                        text: 'rgb(var(--color-info-text) / <alpha-value>)',
                    },
                    status: {
                        want: 'rgb(var(--color-status-want) / <alpha-value>)',
                        'want-bg': 'rgb(var(--color-status-want-bg) / <alpha-value>)',
                        reading: 'rgb(var(--color-status-reading) / <alpha-value>)',
                        'reading-bg': 'rgb(var(--color-status-reading-bg) / <alpha-value>)',
                        read: 'rgb(var(--color-status-read) / <alpha-value>)',
                        'read-bg': 'rgb(var(--color-status-read-bg) / <alpha-value>)',
                        watchlist: 'rgb(var(--color-status-watchlist) / <alpha-value>)',
                        'watchlist-bg': 'rgb(var(--color-status-watchlist-bg) / <alpha-value>)',
                        watching: 'rgb(var(--color-status-watching) / <alpha-value>)',
                        'watching-bg': 'rgb(var(--color-status-watching-bg) / <alpha-value>)',
                        watched: 'rgb(var(--color-status-watched) / <alpha-value>)',
                        'watched-bg': 'rgb(var(--color-status-watched-bg) / <alpha-value>)',
                        backlog: 'rgb(var(--color-status-backlog) / <alpha-value>)',
                        'backlog-bg': 'rgb(var(--color-status-backlog-bg) / <alpha-value>)',
                        playing: 'rgb(var(--color-status-playing) / <alpha-value>)',
                        'playing-bg': 'rgb(var(--color-status-playing-bg) / <alpha-value>)',
                        shelved: 'rgb(var(--color-status-shelved) / <alpha-value>)',
                        'shelved-bg': 'rgb(var(--color-status-shelved-bg) / <alpha-value>)',
                        completed: 'rgb(var(--color-status-completed) / <alpha-value>)',
                        'completed-bg': 'rgb(var(--color-status-completed-bg) / <alpha-value>)',
                        mastered: 'rgb(var(--color-status-mastered) / <alpha-value>)',
                        'mastered-bg': 'rgb(var(--color-status-mastered-bg) / <alpha-value>)',
                        owned: 'rgb(var(--color-status-owned) / <alpha-value>)',
                        'owned-bg': 'rgb(var(--color-status-owned-bg) / <alpha-value>)',
                        'want-to-play': 'rgb(var(--color-status-want-to-play) / <alpha-value>)',
                        'want-to-play-bg': 'rgb(var(--color-status-want-to-play-bg) / <alpha-value>)',
                        wishlist: 'rgb(var(--color-status-wishlist) / <alpha-value>)',
                        'wishlist-bg': 'rgb(var(--color-status-wishlist-bg) / <alpha-value>)',
                        'for-trade': 'rgb(var(--color-status-for-trade) / <alpha-value>)',
                        'for-trade-bg': 'rgb(var(--color-status-for-trade-bg) / <alpha-value>)',
                        'previously-owned': 'rgb(var(--color-status-previously-owned) / <alpha-value>)',
                        'previously-owned-bg': 'rgb(var(--color-status-previously-owned-bg) / <alpha-value>)',
                    },
                    star: {
                        filled: 'rgb(var(--color-star-filled) / <alpha-value>)',
                        empty: 'rgb(var(--color-star-empty) / <alpha-value>)',
                    },
                    platform: {
                        nintendo: 'rgb(var(--color-platform-nintendo) / <alpha-value>)',
                        'nintendo-bg': 'rgb(var(--color-platform-nintendo-bg) / <alpha-value>)',
                        'nintendo-logo': 'rgb(var(--color-platform-nintendo-logo) / <alpha-value>)',
                        steam: 'rgb(var(--color-platform-steam) / <alpha-value>)',
                        'steam-bg': 'rgb(var(--color-platform-steam-bg) / <alpha-value>)',
                        'steam-logo': 'rgb(var(--color-platform-steam-logo) / <alpha-value>)',
                        playstation: 'rgb(var(--color-platform-playstation) / <alpha-value>)',
                        'playstation-bg': 'rgb(var(--color-platform-playstation-bg) / <alpha-value>)',
                        'playstation-logo': 'rgb(var(--color-platform-playstation-logo) / <alpha-value>)',
                        xbox: 'rgb(var(--color-platform-xbox) / <alpha-value>)',
                        'xbox-bg': 'rgb(var(--color-platform-xbox-bg) / <alpha-value>)',
                        'xbox-logo': 'rgb(var(--color-platform-xbox-logo) / <alpha-value>)',
                        gog: 'rgb(var(--color-platform-gog) / <alpha-value>)',
                        'gog-bg': 'rgb(var(--color-platform-gog-bg) / <alpha-value>)',
                        'gog-logo': 'rgb(var(--color-platform-gog-logo) / <alpha-value>)',
                        pc: 'rgb(var(--color-platform-pc) / <alpha-value>)',
                        'pc-bg': 'rgb(var(--color-platform-pc-bg) / <alpha-value>)',
                        'pc-logo': 'rgb(var(--color-platform-pc-logo) / <alpha-value>)',
                        default: 'rgb(var(--color-platform-default) / <alpha-value>)',
                        'default-bg': 'rgb(var(--color-platform-default-bg) / <alpha-value>)',
                        'default-logo': 'rgb(var(--color-platform-default-logo) / <alpha-value>)',
                    },
                    card: {
                        bg: 'rgb(var(--color-card-bg) / <alpha-value>)',
                        border: 'rgb(var(--color-card-border) / <alpha-value>)',
                    },
                    input: {
                        bg: 'rgb(var(--color-input-bg) / <alpha-value>)',
                        border: 'rgb(var(--color-input-border) / <alpha-value>)',
                        focus: 'rgb(var(--color-input-focus-ring) / <alpha-value>)',
                    },
                },
            },
        },
    },

    plugins: [forms],
};