liane-ui/tailwind.config.js at master · lianetoolkit/liane-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
const TWColors = require('tailwindcss/colors');
// //  As specified on Colors.pdf
const colors = {
  purple: {
    100: '#CDB8F2',
    200: '#A781E3',
    300: '#8751D6',
    400: '#6926C7',
    500: '#5100B9',
    600: '#5000B3',
    700: '#4C00A3',
    800: '#44008C',
    900: '#37006E',
    DEFAULT: '#5100B9',
  },
  purpleLight: {
    25: '#F7F5FA',
    50: '#EDE0FF',
    75: '#E4D1FF',
    DEFAULT: '#EDE0FF',
  },
  orange: {
    50: '#FFEFE6',
    100: '#FCD2C7',
    200: '#FAB19D',
    300: '#F59173',
    400: '#F2754B',
    500: '#EF5A24',
    600: '#E65319',
    700: '#D1490F',
    800: '#B33C05',
    900: '#8A2E00',
    DEFAULT: '#EF5A24',
  },
  yellow: {
    50: '#FFF3E0',
    100: '#FFE7CC',
    200: '#FCD6A7',
    300: '#FCC883',
    400: '#FAB95F',
    500: '#F9AE3B',
    600: '#F0A42B',
    700: '#DB951A',
    800: '#BD7F0B',
    900: '#946300',
    DEFAULT: '#F9AE3B',
  },
  green: {
    50: '#E2F1E9',
    100: '#B4E0C4',
    200: '#80C299',
    300: '#55A374',
    400: '#328555',
    500: '#186539',
    600: '#105931',
    700: '#094D29',
    800: '#044021',
    900: '#00331A',
    DEFAULT: '#186539',
  },
  red: {
    50: '#FEEFEF',
    100: '#F0BBBE',
    200: '#E08B8F',
    300: '#CF5F63',
    400: '#BF393C',
    500: '#B01919',
    600: '#AB1411',
    700: '#A10F0A',
    800: '#910A03',
    900: '#7D0800',
    DEFAULT: '#B01919',
  },
  black: '#000',
  white: '#fff',
  gray: TWColors.trueGray,
  darkGray: '#757575',
  darkerGray: '#212121',
};

module.exports = {
  purge: ['./src/**/*.tsx', './src/**/*.jsx'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    colors: {
      ...colors,
      primary: colors.purple['500'],
      secondary: colors.orange['500'],
      tertiary: colors.yellow['500'],
    },
    extend: {
      fontFamily: {
        sans: ['Roboto', 'Helvetica', 'Arial', 'sans-serif'],
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};