verdad-frontend/tailwind.config.js at main · PublicDataWorks/verdad-frontend · 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
const defaultConfig = require('tailwindcss/defaultConfig')

/** @type {import('tailwindcss/types').Config} */
const config = {
  darkMode: ['class', '[data-theme="dark"]'],
  content: ['index.html', 'src/**/*.tsx'],
  theme: {
    fontFamily: {
      sans: ['Inter', ...defaultConfig.theme.fontFamily.sans]
    },
    extend: {
      colors: {
        'text-blue': '#005EF4',
        'text-secondary': '#3F3F46',
        'dropdown-text': '#A1A1AA',
        'ghost-white': '#F9F9F9',
        'blue-accent': '#639FFF',
        'blue-light': '#E8F1FF',
        'blue-deep': '#337EF4',
        'blue-rich': '#004DC7',
        'header-blue': '#005EF4',
        'header-white': '#93C5FD',
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
        card: {
          DEFAULT: 'hsl(var(--card))',
          foreground: 'hsl(var(--card-foreground))'
        },
        popover: {
          DEFAULT: 'hsl(var(--popover))',
          foreground: 'hsl(var(--popover-foreground))'
        },
        primary: {
          DEFAULT: 'hsl(var(--primary))',
          foreground: 'hsl(var(--primary-foreground))'
        },
        secondary: {
          DEFAULT: 'hsl(var(--secondary))',
          foreground: 'hsl(var(--secondary-foreground))'
        },
        muted: {
          DEFAULT: 'hsl(var(--muted))',
          foreground: 'hsl(var(--muted-foreground))'
        },
        accent: {
          DEFAULT: 'hsl(var(--accent))',
          foreground: 'hsl(var(--accent-foreground))'
        },
        destructive: {
          DEFAULT: 'hsl(var(--destructive))',
          foreground: 'hsl(var(--destructive-foreground))'
        },
        tertiary: 'hsl(var(--tertiary))',
        border: 'hsl(var(--border))',
        input: 'hsl(var(--input))',
        ring: 'hsl(var(--ring))',
        chart: {
          1: 'hsl(var(--chart-1))',
          2: 'hsl(var(--chart-2))',
          3: 'hsl(var(--chart-3))',
          4: 'hsl(var(--chart-4))',
          5: 'hsl(var(--chart-5))'
        },
        'blue-light': 'var(--blue-light)',
        blue: 'var(--blue)',
        'border-gray': 'var(--border-gray)',
        'text-secondary': 'var(--text-secondary)',
        'text-primary': 'var(--text-primary)',
        'icon-secondary': 'var(--icon-secondary)',
        'text-tertiary': 'var(--text-tertiary)',
        'text-blue': 'var(--text-blue)',
        'icon-blue': 'var(--icon-blue)',
        'button-from': 'var(--button-from)',
        'button-to': 'var(--button-to)',
        'selected-from': 'var(--selected-from)',
        'selected-to': 'var(--selected-to)',
        'background-header-from': 'var(--background-header-from)',
        'background-header-to': 'var(--background-header-to)',
        text: {
          primary: 'var(--text-primary)',
          secondary: 'var(--text-secondary)',
          tertiary: 'var(--text-tertiary)',
          blue: 'var(--text-blue)',
          red: 'var(--text-red)',
          yellow: 'var(--text-yellow)',
          green: 'var(--text-green)',
          purple: 'var(--text-purple)',
          disable: 'var(--text-disable)'
        },

        icon: {
          primary: 'var(--icon-primary)',
          secondary: 'var(--icon-secondary)',
          tertiary: 'var(--icon-tertiary)',
          blue: 'var(--icon-blue)'
        },

        blue: {
          DEFAULT: 'var(--blue)',
          light: 'var(--blue-light)'
        },

        button: {
          from: 'var(--button-from)',
          to: 'var(--button-to)'
        },

        selected: {
          from: 'var(--selected-from)',
          to: 'var(--selected-to)'
        },

        'border-gray': {
          DEFAULT: 'var(--border-gray)',
          light: 'var(--border-gray-light)',
          dark: 'var(--border-gray-dark)'
        },

        'background-gray': {
          lightest: 'var(--background-gray-lightest)',
          light: 'var(--background-gray-light)',
          medium: 'var(--background-gray-medium)',
          dark: 'var(--background-gray-dark)',
          darkest: 'var(--background-gray-darkest)'
        },

        'background-blue': {
          light: 'var(--background-blue-light)',
          medium: 'var(--background-blue-medium)',
          dark: 'var(--background-blue-dark)'
        },
        missive: {
          background: 'var(--missive-background-color)',
          blue: 'var(--missive-blue-color)',
          'light-border': 'var(--missive-light-border-color)',
          'border-radius': 'var(--missive-border-radius)',
          'conversation-list-background': 'var(--missive-conversation-list-background-color)'
        },
        'border-gray-medium': 'hsla(240, 5%, 65%, 1)',
        'border-blue': 'var(--border-blue)',
        gold: '#FFD700'
      },
      borderRadius: {
        lg: 'var(--radius)',
        md: 'calc(var(--radius) - 2px)',
        sm: 'calc(var(--radius) - 4px)'
      }
    }
  },
  plugins: [require('tailwindcss-animate')]
}
module.exports = config