@bottledbrains/ui/config.js

A React UI library based on Tailwind CSS

const deepMerge = require('deepmerge')
const plugin = require('tailwindcss/plugin')
const colors = require('tailwindcss/colors')

const defaultConfig = {
  purge: {
    content: [
      'node_modules/@bottledbrains/ui/lib/index.js',
    ],
  },
  theme: {
    boxShadow: {
      sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
      DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
      md: '0 4px 6px 1px rgba(0, 0, 0, 0.1), 0 2px 4px 1px rgba(0, 0, 0, 0.06)',
      'md-dark': '0 4px 6px 1px rgba(0, 0, 0, 0.23), 0 2px 4px 1px rgba(0, 0, 0, 0.14)',
      lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
      xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
      '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
      '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
      inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
      none: 'none',
      'inner-md': 'inset 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
      'inner-md-dark': 'inset 0 4px 6px -1px rgba(0, 0, 0, 0.23), 0 2px 4px -1px rgba(0, 0, 0, 0.14)',
      'inner-heavy': 'inset 0 0 30px 10px rgba(0, 0, 0, 0.2)',
    },
    extend: {
      colors: {
        primary: {
          DEFAULT: 'rgba(180, 83, 9, 0.95)',
          disabled: 'rgba(180, 83, 9, 0.65)',
          soft: 'rgb(255 253 244)',
        },
        modal: {
          DEFAULT: 'rgba(0, 0, 0, 0.05)',
          white: 'rgba(255, 255, 255, 0.95)',
        },
        label: colors.gray[500],
        placeholder: colors.gray[300],
        warn: colors.yellow[500],
        error: colors.red[500],
        success: colors.green[500],
      },
      animation: {
        'ping-loading': 'ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite',
      }
    },
  },
  variants: {
    extend: {
      borderWidth: ['first', 'last'],
      margin: ['first', 'last'],
      boxShadow: ['active'],
    }
  },
  plugins: [
    plugin(function({ addUtilities }) {
      const newUtilities = {
        '.ellipsis': {
          overflow: 'hidden',
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
        },

        '.calendar-table': {
          tableLayout: 'fixed',
          th: {
            borderBottom: '1px solid',
            borderBottomColor: colors.gray[300],
            paddingBottom: '0.5rem',
          },
          td: {
            textAlign: 'center',
            height: '4rem'
          }
        }
      }
      addUtilities(newUtilities)
    }),
  ]
}

const withBottledBrains = (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,
  withBottledBrains,
}