services/tailwind.config.js at develop · max-tech-bot/services · 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
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}', './node_modules/@dfx.swiss/react-components/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: 'media',
  theme: {
    colors: {
      white: '#ffffff',
      black: '#000000',
      primary: {
        red: '#F5516C',
        blue: '#072440',
      },
      link: '#f7f7f7',
      dfxBlue: {
        300: '#5A81BB',
        400: '#124370',
        500: '#0A355C',
        600: '#092E51',
        700: '#082948',
        800: '#072440',
      },
      dfxRed: {
        100: '#F5516C',
        150: '#E73955',
      },
      dfxGray: {
        300: '#F3F4F7',
        400: '#EAECF0',
        500: '#D6DBE2',
        600: '#B8C4D8',
        700: '#9AA5B8',
        800: '#65728A',
      },
      dfxRedBlue: {
        200: '#DE4D68',
        300: '#C54863',
        400: '#AE445F',
        500: '#963F5A',
        600: '#6B3753',
        700: '#55334E',
        800: '#49314C',
        900: '#402F4B',
        1000: '#2D2B47',
      },
      dfxGreen: {
        100: '#27AE60',
        150: '#229954',
        200: '#1E8449',
        300: '#196F3D',
        400: '#145A32',
      },
    },
    fontSize: {
      '2xs': '0.625rem', // 10px
      xs: '0.75rem', // 12px
      sm: '0.875rem', // 14px
      base: '1rem', // 16px
      lg: '1.25rem', // 20px
      xl: '1.5rem', // 24px
      '2xl': '1.75rem', // 28px
      '3xl': '2rem', // 32px
      '4xl': '2.25rem', // 36px
      '5xl': '2.5rem', // 40px
    },
    borderRadius: {
      none: '0',
      sm: '0.25rem', // 4px
      DEFAULT: '0.625rem', // 10px
      md: '0.75rem', // 12px
      lg: '0.9375rem', // 15px
      full: '9999px',
    },
    extend: {
      boxShadow: {
        dfx: '0 3px 20px -10px rgba(0, 0, 0, 0.25)',
      },
      zIndex: {
        1: 1,
      },
      borderWidth: {
        0.5: '0.5px',
      },
      height: {
        2.5: '10px',
        62.5: '250px',
      },
      width: {
        2.5: '10px',
      },
      maxHeight: {
        150: '600px',
      },
      padding: {
        15: '60px',
      },
      minWidth: {
        62.5: '250px',
      },
    },
  },
};