spur-tailwind/tailwind.config.js

Spur web UI

module.exports = {
  prefix: '',
  important: false,
  separator: ':',
  theme: {
    extend: {
      screens: {
        sm: '576px',
        md: '768px',
        lg: '992px',
        xl: '1200px',
        xxl: '1440px',
      },
      colors: {
        current: 'currentColor',

        'white-half': 'rgba(255,255,255, 0.5)',

        'spur-grey': '#75757F',
        silver: '#c3c3c3',
        'background-grey': '#f8f9fd',
        'filter-grey': '#e3e7ef',
        'spur-black': '#454553',
        'spur-black-half': 'rgba(69,69,83, 0.5)',

        'blue-jeans': '#60a7ff',
        'blue-jeans-half': 'rgba(96, 167, 255, 0.5)',
        'blue-jeans-20': 'rgba(96, 167, 255, 0.2)',
        'blue-jeans-10': 'rgba(96, 167, 255, 0.1)',
        'deep-blue-jeans': '#428ce8',
        'light-blue-jeans': '#f8f9fd',
        aquamarine: '#60ebb4',
        'deep-aquamarine': '#3ada9b',
        'light-watermelon': '#ffe0e3',
        watermelon: '#ff7a87',
        'deep-watermelon': '#f55f6e',
        'hover-red': '#e85a69',
        'dark-red': '#c24c57',
        'light-warning-gold': '#fdf1dd',
        'warning-gold': '#f5bf5f',
        'deep-gold': '#dba240',

        'border-line-purple': '#b7b4d5',
        'buzz-purple-10': 'rgba(118, 62, 255, 0.1)',
        'buzz-purple-5': 'rgba(118, 62, 255, 0.05)',
        'buzz-purple': '#763eff',
        'dark-purple': '#502AAC',
        'dead-state-purple': '#d6d3eb',
        'extra-light-navy-purple': '#bf96ff',
        'hover-purple': '#6c39e8',
        'light-navy-purple': '#a369ff',
        'navy-purple': '#9f52ff',
        'support-purple': '#746DBC',
      },
      spacing: {
        '7': '1.75rem',
        '9': '2.25rem',
        '11': '2.75rem',
        '13': '3.25rem',
        '14': '3.5rem',
        '15': '3.75rem',
        '17': '4.25rem',
        '18': '4.5rem',
        '21': '5.25rem',
        '22': '5.5rem',
        '23': '5.75rem',
        '25': '6.25rem',
        '26': '6.5rem',
        '27': '6.75rem',
        '30': '7.5rem',
        '33': '8.25rem',
        '34': '8.5rem',
        '35': '8.75rem',
        '36': '9rem',
        '37': '9.25rem',
        '42': '10.5rem',
        '43': '10.75rem',
        '52': '13rem',
        '54': '12.5rem',
        '55': '13rem',
        '58': '15rem',
        '60': '15rem',
        '66': '16.5rem',
        '70': '17.5rem',
        '72': '18rem',
        '80': '20rem',
        '104': '26rem',
      },
      borderColor: theme => ({
        default: theme('colors.border-line-purple', 'currentColor'),
      }),
      borderRadius: {
        sm: '.1875rem',
        md: '.3125rem',
        xl: '.625rem',
      },
      borderWidth: {
        '5': '5px',
        '16': '16px',
      },
      boxShadow: {
        default: '0 2px 4px 0 rgba(0, 0, 0, 0.10)',
        sm: '0 1px 3px 0 rgba(0, 0, 0, 0.25)',
        md: '0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08)',
        lg: '0 15px 30px 0 rgba(0, 0, 0, 0.11), 0 5px 15px 0 rgba(0, 0, 0, 0.08)',
        'top-md': '0 -4px 8px 0 rgba(0, 0, 0, 0.12), 0 -2px 4px 0 rgba(0, 0, 0, 0.08)',
      },
      container: {
        center: true,
        padding: '1rem',
        sm: '',
        md: '',
        lg: '1200px',
        xl: '1440px',
      },
      fontFamily: {
        sans: [
          'Barlow',
          'system-ui',
          'BlinkMacSystemFont',
          '-apple-system',
          'Segoe UI',
          'Roboto',
          'Oxygen',
          'Ubuntu',
          'Cantarell',
          'Fira Sans',
          'Droid Sans',
          'Helvetica Neue',
          'sans-serif',
        ],
      },
      fontSize: {
        '7xl': '5rem', // 80px
        '8xl': '6rem', // 96px
        '8-5xl': '6.875rem', // 110px
        '9xl': '7rem', // 112px
        '10xl': '8rem', // 128px
      },
      lineHeight: {
        loose: 1.75,
      },
      margin: {
        '-px': '-1px',
        '-0': '-0',
        '-1': '-0.25rem',
        '-2': '-0.5rem',
        '-3': '-0.75rem',
        '-4': '-1rem',
        '-5': '-1.25rem',
        '-6': '-1.5rem',
        '-7': '-1.75rem',
        '-8': '-2rem',
        '-9': '-2.25rem',
        '-10': '-2.5rem',
        '-26': '-6.5rem',
      },
      maxHeight: {
        'ratings-takeover': '93vh',
        '5xs': '10rem',
        '4xs': '14rem',
        '3xs': '16rem',
        '2xs': '20rem',
        xs: '30rem',
      },
      maxWidth: {
        '4xs': '15rem',
        '3xs': '16rem',
        '2xs': '17.5rem',
        sm: '30rem',
        md: '40rem',
        lg: '50rem',
        xl: '60rem',
        '2xl': '70rem',
        '3xl': '80rem',
        '4xl': '90rem',
        '5xl': '100rem',
      },
      minHeight: {
        '11': '2.75rem',
        '40': '10rem',
        login: '26.25rem',
      },
      minWidth: {
        '28': '7rem',
        '40': '10rem',
        '60': '15rem',
        '64': '16rem',
        '80': '20rem',
        'profile-dropdown': '180px',
      },
      opacity: {
        '30': '.3',
      },
      width: {
        '1/7': '14.2857142%',
        '1/8': '12.5%',
        '9/10': '90%',
        'dashboard-sidebar': '344px',
      },
      zIndex: {
        '1000': 1000,
      },
    },
  },
  variants: {
    backgroundColors: ['responsive', 'hover', 'focus', 'active'],
    borderWidth: ['responsive', 'hover'],
    opacity: ['responsive', 'hover'],
    fill: ['responsive', 'hover', 'active'],
    stroke: ['responsive', 'hover', 'active'],
    textColors: ['responsive', 'hover', 'focus', 'active'],
    fontStyle: ['responsive', 'hover', 'group-hover'],
  },
  plugins: [
    function({ addUtilities }) {
      const className = 'visuallyhidden'
      const focusClassName = 'focusable'
      const focusable = {
        clip: 'auto',
        clipPath: 'none',
        height: 'auto',
        margin: '0',
        overflow: 'visible',
        position: 'static',
        width: 'auto',
        whiteSpace: 'inherit',
      }
      const utilities = {
        [`.${className}`]: {
          border: '0',
          clip: 'rect(0 0 0 0)',
          clipPath: 'inset(50%)',
          height: '1px',
          margin: '-1px',
          overflow: 'hidden',
          padding: '0',
          position: 'absolute',
          width: '1px',
          whiteSpace: 'nowrap' /* 1 */,
        },
        [`.${className}.${focusClassName}:active`]: focusable,
        [`.${className}.${focusClassName}:focus`]: focusable,
      }
      addUtilities(utilities, {
        variants: ['responsive', 'hover'],
      })
    },
  ],
}