tailwind.config.js

/* eslint-disable */
const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
    mode: 'jit',
    // purge: ['../../packages/**/*.{js,ts,jsx,tsx}'],
    purge: [
        '../../packages/suite/src/components/**/*.{js,ts,jsx,tsx}',
        '../../packages/suite/src/views/**/*.{js,ts,jsx,tsx}',
        '../../packages/components/src/components/**/*.{js,ts,jsx,tsx}',
    ],
    darkMode: 'class', // or 'media' or 'class'
    theme: {
        extend: {
            colors: {
                gray: {
                    50: '#f9f9fb',
                    100: '#f2f2f7',
                    200: '#e7e7ee',
                    300: '#d3d3de',
                    400: '#a0a0b0',
                    500: '#6e6e86',
                    600: '#49495f',
                    700: '#35354b',
                    800: '#1f1f31',
                    900: '#12121e',
                },
                brand: {
                    50: '#ebf9ec',
                    100: '#d7f4da',
                    200: '#a3e5a9',
                    300: '#67d572',
                    400: '#33c641',
                    500: '#00b812',
                    600: '#00930e',
                    700: '#006f0b',
                    800: '#005809',
                    900: '#004206',
                },
                green: {
                    50: '#effbf2',
                    100: '#dff6e5',
                    200: '#b6ebc3',
                    300: '#86de9c',
                    400: '#5dd27a',
                    500: '#34c759',
                    600: '#2a9f47',
                    700: '#1f7836',
                    800: '#195f2b',
                    900: '#134820',
                },
                blue: {
                    50: '#ebf5ff',
                    100: '#d7eaff',
                    200: '#a3cfff',
                    300: '#67b0ff',
                    400: '#3395ff',
                    500: '#007aff',
                    600: '#0062cc',
                    700: '#004a9a',
                    800: '#003a7a',
                    900: '#002c5c',
                },
                yellow: {
                    50: '#fffbeb',
                    100: '#fff7d7',
                    200: '#ffeda3',
                    300: '#ffe167',
                    400: '#ffd633',
                    500: '#ffcc00',
                    600: '#cca300',
                    700: '#9a7b00',
                    800: '#7a6200',
                    900: '#5c4a00',
                },
                red: {
                    50: '#fff0ef',
                    100: '#ffe0df',
                    200: '#ffb8b4',
                    300: '#ff8a84',
                    400: '#ff6259',
                    500: '#ff3b30',
                    600: '#cc2f26',
                    700: '#9a241d',
                    800: '#7a1c17',
                    900: '#5c1511',
                },
                chain: {
                    btc: '#ff9c00',
                    eth: '#454e5d',
                    bsc: '#ebaf00',
                    heco: '#01943f',
                    oec: '#205fec',
                    stc: '#1234b5',
                    sol: '#111111',
                    cfx: '#621ee4',
                    'default-evm': '#818595',
                },
            },
            fontFamily: {
                sans: [
                    ...defaultTheme.fontFamily.sans,
                    'PingFang SC',
                    '"Microsoft YaHei"',
                    '"Source Han Sans SC"',
                    '"Noto Sans CJK SC"',
                    'WenQuanYi Micro Hei',
                ],
            },
        },
    },
    variants: {
        extend: {},
    },
    plugins: [
        /* eslint-disable */
        require('@tailwindcss/forms')({
            strategy: 'class',
        }),
    ],
};