reverie-ui/config.js

A React UI library based on Tailwind CSS

/* eslint-disable @typescript-eslint/no-var-requires */
const deepMerge = require('deepmerge')
const plugin = require('tailwindcss/plugin')
const colors = require('tailwindcss/colors')

const COLORS = {
  PRIMARY: colors.blueGray['500'],
  PRIMARY_DARK: colors.blueGray['600'],
  PRIMARY_WEAK: colors.blueGray['200'],
  PRIMARY_LIGHT: colors.blueGray['100'],

  WARN: colors.yellow['500'],
  ERROR: colors.red['500'],
  SUCCESS: colors.green['500'],

  TEXT: colors.blueGray['700'],
  TEXT_LABEL: colors.blueGray['500'],
  TEXT_PLACEHOLDER: colors.blueGray['400'],
}

const defaultConfig = {
  mode: 'jit',
  purge: {
    content: [
      'node_modules/reverie-ui/lib/index.js',
    ],
  },
  theme: {
    extend: {
      colors: {
        primary: COLORS.PRIMARY,
        'primary-dark': COLORS.PRIMARY_DARK,
        'primary-weak': COLORS.PRIMARY_WEAK,
        'primary-light': COLORS.PRIMARY_LIGHT,
        warn: COLORS.WARN,
        error: COLORS.ERROR,
        success: COLORS.SUCCESS,
        text: COLORS.TEXT,
        'text-label': COLORS.TEXT_LABEL,
        'text-placeholder': COLORS.TEXT_PLACEHOLDER,
        modal: {
          DEFAULT: 'rgba(100, 116, 139, 0.2)',
          white: 'rgba(255, 255, 255, 0.95)',
        },
      },
      maxWidth: {
        screen: '100vw',
        'screen-4/5': '80vw',
      },
      minWidth: {
        modal: '20rem',
      },
      zIndex: {
        '1': 1
      },
      animation: {
        'ping-loading': 'ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite',
      }
    },
  },
  variants: {
    extend: {
      borderWidth: ['first', 'last'],
      margin: ['first', 'last'],
      boxShadow: ['active'],
      opacity: ['disabled'],
      cursor: ['disabled'],
    }
  },
  plugins: [
    require('@tailwindcss/typography'),
    plugin(function({ addUtilities }) {
      const newUtilities = {
        '.ellipsis': {
          overflow: 'hidden',
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
        },
        '.form-border-spacing': {
          borderSpacing: '0 1rem',
        }
      }
      addUtilities(newUtilities)
    }),
    plugin(function({ addBase, theme }) {
      console.log(theme)
      addBase({
        'body': {
          color: COLORS.TEXT,
          fontFamily: 'Roboto, HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif',
          fontSize: '0.875rem'  /* 14px */,
          lineHeight: '1.25rem',
        },
        '*': {
          caretColor: COLORS.PRIMARY,
        },
        '*::selection': {
          color: colors.white,
          backgroundColor: COLORS.PRIMARY,
        },
        '*::-webkit-scrollbar': {
          width: '0.875rem',
          height: '0.875rem',
        },
        '*::-webkit-scrollbar-corner': {
          backgroundColor: 'transparent',
        },
        '*::-webkit-scrollbar-track': {
          backgroundColor: colors.blueGray['50'],
        },
        '*::-webkit-scrollbar-thumb': {
          height: '0.5rem',
          borderRadius: 9999,
          border: '0.25rem solid transparent',
          backgroundColor: colors.blueGray['300'],
          backgroundClip: 'padding-box',
        },
      })
    }),
  ]
}

const withReverie = (config) => {
  const purge = Array.isArray(config.purge)
    ? {
      content: config.purge,
    } : config.purge
  return deepMerge(
    { ...config, purge },
    defaultConfig,
    { 
      arrayMerge: function(dest, src) {
        return Array.from(new Set([...dest, ...src]))
      }
    }
  )
}

module.exports = {
  defaultConfig,
  withReverie,
}