mango-v4-ui/tailwind.config.js

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    fontFamily: {
      display: ['var(--font-display)'],
      body: ['var(--font-body)'],
      mono: ['var(--font-mono)'],
    },
    extend: {
      animation: {
        shake: 'shake 0.4s linear 4',
        'spin-fast': 'spin 0.5s linear infinite',
      },
      backgroundImage: {
        'share-position': "url('/images/share-image.png')",
      },
      boxShadow: {
        bottomBar: '0px -4px 8px -1px rgba(0,0,0,0.2)',
      },
      // each color category in a theme has a single base color with the variations acheived by adjusting lightness (dark and hover variants) and lightness and saturation for muted variants
      colors: {
        'mango-classic-theme': {
          active: {
            DEFAULT: 'hsl(45, 86%, 62%)',
            dark: 'hsl(45, 86%, 57%)',
          },
          button: {
            DEFAULT: 'hsl(269, 38%, 48%)',
            hover: 'hsl(269, 38%, 43%)',
          },
          input: {
            bkg: 'hsl(256, 18%, 10%)',
            border: 'hsl(253, 19%, 41%)',
            borderDark: 'hsl(253, 19%, 31%)',
          },
          link: { DEFAULT: 'hsl(33, 100%, 57%)', hover: 'hsl(33, 100%, 52%)' },
          down: {
            DEFAULT: 'hsl(4, 63%, 55%)',
            dark: 'hsl(4, 93%, 55%)',
            muted: 'hsl(4, 43%, 38%)',
          },
          up: {
            DEFAULT: 'hsl(77, 63%, 40%)',
            dark: 'hsl(85, 50%, 36%)',
            muted: 'hsl(84, 40%, 32%)',
          },
          error: 'hsl(4, 93%, 60%)',
          success: 'hsl(82, 97%, 41%)',
          warning: 'hsl(33, 100%, 57%)',
          'bkg-1': 'hsl(256, 18%, 12%)',
          'bkg-2': 'hsl(256, 18%, 17%)',
          'bkg-3': 'hsl(256, 18%, 22%)',
          'bkg-4': 'hsl(256, 18%, 27%)',
          'fgd-1': 'hsl(253, 19%, 91%)',
          'fgd-2': 'hsl(253, 19%, 81%)',
          'fgd-3': 'hsl(253, 19%, 71%)',
          'fgd-4': 'hsl(253, 19%, 61%)',
        },
        'light-theme': {
          active: {
            DEFAULT: 'hsl(0, 0%, 8%)',
            dark: 'hsl(33, 100%, 52%)',
          },
          button: {
            DEFAULT: 'hsl(0, 0%, 84%)',
            hover: 'hsl(0, 0%, 74%)',
          },
          input: {
            bkg: 'hsl(0, 0%, 97%)',
            border: 'hsl(0, 0%, 33%)',
            borderDark: 'hsl(0, 0%, 23%)',
          },
          link: { DEFAULT: 'hsl(33, 100%, 57%)', hover: 'hsl(33, 100%, 52%)' },
          down: {
            DEFAULT: 'hsl(0, 39%, 58%)',
            dark: 'hsl(0, 39%, 53%)',
            muted: 'hsl(0, 19%, 53%)',
          },
          up: {
            DEFAULT: 'hsl(111, 47%, 53%)',
            dark: 'hsl(111, 47%, 48%)',
            muted: 'hsl(111, 7%, 48%)',
          },
          error: 'hsl(0, 39%, 58%)',
          success: 'hsl(111, 47%, 53%)',
          warning: 'hsl(33, 100%, 57%)',
          'bkg-1': 'hsl(0, 0%, 99%)',
          'bkg-2': 'hsl(0, 0%, 94%)',
          'bkg-3': 'hsl(0, 0%, 89%)',
          'bkg-4': 'hsl(0, 0%, 84%)',
          'fgd-1': 'hsl(0, 0%, 8%)',
          'fgd-2': 'hsl(0, 0%, 23%)',
          'fgd-3': 'hsl(0, 0%, 38%)',
          'fgd-4': 'hsl(0, 0%, 53%)',
        },
        'dark-theme': {
          active: {
            DEFAULT: 'hsl(45, 86%, 62%)',
            dark: 'hsl(45, 86%, 57%)',
          },
          button: {
            DEFAULT: 'hsl(269, 0%, 38%)',
            hover: 'hsl(269, 0%, 33%)',
          },
          input: {
            bkg: 'hsl(240, 6%, 5%)',
            border: 'hsl(0, 0%, 32%)',
            borderDark: 'hsl(0, 0%, 22%)',
          },
          link: { DEFAULT: 'hsl(45, 86%, 62%)', hover: 'hsl(45, 86%, 57%)' },
          down: {
            DEFAULT: 'hsl(358, 55%, 50%)',
            dark: 'hsl(0, 45%, 26%)',
            muted: 'hsl(0, 45%, 30%)',
          },
          up: {
            DEFAULT: 'hsl(111, 47%, 43%)',
            dark: 'hsl(111, 47%, 38%)',
            muted: 'hsl(130, 34%, 26%)',
          },
          error: 'hsl(0, 59%, 58%)',
          success: 'hsl(111, 47%, 43%)',
          warning: 'hsl(45, 86%, 62%)',
          'bkg-1': 'hsl(240, 6%, 7%)',
          'bkg-2': 'hsl(240, 6%, 12%)',
          'bkg-3': 'hsl(240, 6%, 17%)',
          'bkg-4': 'hsl(240, 6%, 22%)',
          'fgd-1': 'hsl(0, 0%, 82%)',
          'fgd-2': 'hsl(0, 0%, 72%)',
          'fgd-3': 'hsl(0, 0%, 62%)',
          'fgd-4': 'hsl(0, 0%, 52%)',
        },
        'medium-theme': {
          active: {
            DEFAULT: 'hsl(45, 86%, 62%)',
            dark: 'hsl(45, 86%, 57%)',
          },
          button: {
            DEFAULT: 'hsl(269, 0%, 43%)',
            hover: 'hsl(269, 0%, 38%)',
          },
          input: {
            bkg: 'hsl(240, 6%, 10%)',
            border: 'hsl(0, 0%, 30%)',
            borderDark: 'hsl(0, 0%, 20%)',
          },
          link: { DEFAULT: 'hsl(45, 86%, 62%)', hover: 'hsl(45, 86%, 57%)' },
          down: {
            DEFAULT: 'hsl(0, 59%, 58%)',
            dark: 'hsl(0, 59%, 53%)',
            muted: 'hsl(0, 19%, 53%)',
          },
          up: {
            DEFAULT: 'hsl(111, 47%, 43%)',
            dark: 'hsl(111, 47%, 38%)',
            muted: 'hsl(111, 7%, 38%)',
          },
          error: 'hsl(0, 59%, 58%)',
          success: 'hsl(111, 47%, 43%)',
          warning: 'hsl(45, 86%, 62%)',
          'bkg-1': 'hsl(240, 6%, 12%)',
          'bkg-2': 'hsl(240, 6%, 17%)',
          'bkg-3': 'hsl(240, 6%, 22%)',
          'bkg-4': 'hsl(240, 6%, 27%)',
          'fgd-1': 'hsl(0, 0%, 80%)',
          'fgd-2': 'hsl(0, 0%, 70%)',
          'fgd-3': 'hsl(0, 0%, 60%)',
          'fgd-4': 'hsl(0, 0%, 50%)',
        },
        'high-contrast-theme': {
          active: {
            DEFAULT: 'hsl(62, 96%, 54%)',
            dark: 'hsl(62, 96%, 49%)',
          },
          button: {
            DEFAULT: 'hsl(62, 96%, 54%)',
            hover: 'hsl(62, 96%, 49%)',
          },
          input: {
            bkg: 'hsl(0, 0%, 0%)',
            border: 'hsl(0, 0%, 65%)',
            borderDark: 'hsl(0, 0%, 55%)',
          },
          link: { DEFAULT: 'hsl(45, 86%, 62%)', hover: 'hsl(45, 86%, 57%)' },
          down: {
            DEFAULT: 'hsl(0, 100%, 58%)',
            dark: 'hsl(0, 100%, 58%)',
            muted: 'hsl(0, 49%, 48%)',
          },
          up: {
            DEFAULT: 'hsl(111, 90%, 58%)',
            dark: 'hsl(111, 90%, 58%)',
            muted: 'hsl(111, 40%, 48%)',
          },
          error: 'hsl(0, 100%, 58%)',
          success: 'hsl(111, 90%, 58%)',
          warning: 'hsl(45, 86%, 62%)',
          'bkg-1': 'hsl(0, 0%, 0%)',
          'bkg-2': 'hsl(0, 0%, 7%)',
          'bkg-3': 'hsl(0, 0%, 14%)',
          'bkg-4': 'hsl(0, 0%, 21%)',
          'fgd-1': 'hsl(0, 0%, 100%)',
          'fgd-2': 'hsl(0, 0%, 95%)',
          'fgd-3': 'hsl(0, 0%, 90%)',
          'fgd-4': 'hsl(0, 0%, 85%)',
        },
        'blueberry-theme': {
          active: {
            DEFAULT: 'hsl(45, 86%, 62%)',
            dark: 'hsl(45, 86%, 57%)',
          },
          button: {
            DEFAULT: 'hsl(220, 91%, 44%)',
            hover: 'hsl(220, 91%, 39%)',
          },
          input: {
            bkg: 'hsl(222, 74%, 19%)',
            border: 'hsl(220, 71%, 46%)',
            borderDark: 'hsl(220, 71%, 36%)',
          },
          link: { DEFAULT: 'hsl(45, 86%, 62%)', hover: 'hsl(45, 86%, 57%)' },
          down: {
            DEFAULT: 'hsl(3, 59%, 56%)',
            dark: 'hsl(3, 59%, 51%)',
            muted: 'hsl(3, 19%, 51%)',
          },
          up: {
            DEFAULT: 'hsl(165, 82%, 37%)',
            dark: 'hsl(165, 82%, 32%)',
            muted: 'hsl(165, 42%, 32%)',
          },
          error: 'hsl(3, 59%, 56%)',
          success: 'hsl(165, 82%, 37%)',
          warning: 'hsl(45, 86%, 62%)',
          'bkg-1': 'hsl(222, 74%, 21%)',
          'bkg-2': 'hsl(222, 74%, 26%)',
          'bkg-3': 'hsl(222, 74%, 31%)',
          'bkg-4': 'hsl(222, 74%, 36%)',
          'fgd-1': 'hsl(220, 71%, 96%)',
          'fgd-2': 'hsl(220, 71%, 86%)',
          'fgd-3': 'hsl(220, 71%, 76%)',
          'fgd-4': 'hsl(220, 71%, 66%)',
        },
        'banana-theme': {
          active: {
            DEFAULT: 'hsl(236, 95%, 68%)',
            dark: 'hsl(236, 95%, 58%)',
          },
          button: {
            DEFAULT: 'hsl(51, 95%, 72%)',
            hover: 'hsl(51, 95%, 68%)',
          },
          input: {
            bkg: 'hsl(55, 90%, 88%)',
            border: 'hsl(60, 10%, 24%)',
            borderDark: 'hsl(60, 10%, 14%)',
          },
          link: { DEFAULT: 'hsl(33, 100%, 57%)', hover: 'hsl(33, 100%, 52%)' },
          down: {
            DEFAULT: 'hsl(0, 39%, 58%)',
            dark: 'hsl(0, 39%, 53%)',
            muted: 'hsl(0, 19%, 53%)',
          },
          up: {
            DEFAULT: 'hsl(110, 23%, 59%)',
            dark: 'hsl(110, 23%, 54%)',
            muted: 'hsl(110, 3%, 54%)',
          },
          error: 'hsl(0, 39%, 58%)',
          success: 'hsl(110, 23%, 59%)',
          warning: 'hsl(33, 100%, 57%)',
          'bkg-1': 'hsl(55, 90%, 90%)',
          'bkg-2': 'hsl(55, 80%, 85%)',
          'bkg-3': 'hsl(55, 70%, 80%)',
          'bkg-4': 'hsl(55, 60%, 75%)',
          'fgd-1': 'hsl(60, 10%, 14%)',
          'fgd-2': 'hsl(60, 10%, 24%)',
          'fgd-3': 'hsl(60, 10%, 34%)',
          'fgd-4': 'hsl(60, 10%, 44%)',
        },
        'avocado-theme': {
          active: {
            DEFAULT: 'hsl(63, 74%, 67%)',
            dark: 'hsl(63, 74%, 62%)',
          },
          button: {
            DEFAULT: 'hsl(156, 55%, 26%)',
            hover: 'hsl(156, 55%, 21%)',
          },
          input: {
            bkg: 'hsl(156, 48%, 7%)',
            border: 'hsl(120, 20%, 43%)',
            borderDark: 'hsl(120, 20%, 33%)',
          },
          link: { DEFAULT: 'hsl(31, 100%, 57%)', hover: 'hsl(31, 100%, 42%)' },
          down: {
            DEFAULT: 'hsl(3, 59%, 56%)',
            dark: 'hsl(3, 59%, 51%)',
            muted: 'hsl(3, 19%, 51%)',
          },
          up: {
            DEFAULT: 'hsl(120, 50%, 53%)',
            dark: 'hsl(120, 50%, 48%)',
            muted: 'hsl(120, 10%, 48%)',
          },
          error: 'hsl(3, 59%, 56%)',
          success: 'hsl(120, 50%, 53%)',
          warning: 'hsl(37, 92%, 62%)',
          'bkg-1': 'hsl(156, 48%, 9%)',
          'bkg-2': 'hsl(156, 48%, 14%)',
          'bkg-3': 'hsl(156, 48%, 19%)',
          'bkg-4': 'hsl(156, 48%, 24%)',
          'fgd-1': 'hsl(120, 20%, 93%)',
          'fgd-2': 'hsl(120, 20%, 83%)',
          'fgd-3': 'hsl(120, 20%, 73%)',
          'fgd-4': 'hsl(120, 20%, 63%)',
        },
        'olive-theme': {
          active: {
            DEFAULT: 'hsl(53, 68%, 71%)',
            dark: 'hsl(53, 68%, 66%)',
          },
          button: {
            DEFAULT: 'hsl(51, 13%, 44%)',
            hover: 'hsl(51, 13%, 39%)',
          },
          input: {
            bkg: 'hsl(51, 16%, 17%)',
            border: 'hsl(55, 17%, 41%)',
            borderDark: 'hsl(55, 17%, 31%)',
          },
          link: { DEFAULT: 'hsl(45, 86%, 62%)', hover: 'hsl(45, 86%, 57%)' },
          down: {
            DEFAULT: 'hsl(3, 85%, 56%)',
            dark: 'hsl(3, 85%, 51%)',
            muted: 'hsl(3, 45%, 51%)',
          },
          up: {
            DEFAULT: 'hsl(102, 63%, 41%)',
            dark: 'hsl(102, 63%, 36%)',
            muted: 'hsl(102, 23%, 36%)',
          },
          error: 'hsl(3, 59%, 76%)',
          success: 'hsl(102, 63%, 41%)',
          warning: 'hsl(45, 86%, 62%)',
          'bkg-1': 'hsl(51, 16%, 19%)',
          'bkg-2': 'hsl(51, 16%, 24%)',
          'bkg-3': 'hsl(51, 16%, 29%)',
          'bkg-4': 'hsl(51, 16%, 34%)',
          'fgd-1': 'hsl(55, 47%, 91%)',
          'fgd-2': 'hsl(55, 37%, 81%)',
          'fgd-3': 'hsl(55, 27%, 71%)',
          'fgd-4': 'hsl(55, 17%, 61%)',
        },
        'lychee-theme': {
          active: {
            DEFAULT: 'hsl(236, 95%, 32%)',
            dark: 'hsl(236, 95%, 27%)',
          },
          button: {
            DEFAULT: 'hsl(356, 61%, 80%)',
            hover: 'hsl(356, 61%, 75%)',
          },
          input: {
            bkg: 'hsl(356, 58%, 93%)',
            border: 'hsl(357, 41%, 31%)',
            borderDark: 'hsl(357, 41%, 21%)',
          },
          link: { DEFAULT: 'hsl(33, 100%, 57%)', hover: 'hsl(33, 100%, 52%)' },
          down: {
            DEFAULT: 'hsl(356, 61%, 48%)',
            dark: 'hsl(356, 61%, 43%)',
            muted: 'hsl(356, 21%, 43%)',
          },
          up: {
            DEFAULT: 'hsl(155, 48%, 34%)',
            dark: 'hsl(155, 48%, 29%)',
            muted: 'hsl(155, 8%, 29%)',
          },
          error: 'hsl(356, 61%, 48%)',
          success: 'hsl(155, 48%, 34%)',
          warning: 'hsl(33, 100%, 44%)',
          'bkg-1': 'hsl(356, 58%, 95%)',
          'bkg-2': 'hsl(356, 58%, 90%)',
          'bkg-3': 'hsl(356, 58%, 85%)',
          'bkg-4': 'hsl(356, 58%, 80%)',
          'fgd-1': 'hsl(357, 56%, 21%)',
          'fgd-2': 'hsl(357, 51%, 31%)',
          'fgd-3': 'hsl(357, 46%, 41%)',
          'fgd-4': 'hsl(357, 41%, 51%)',
        },
        'th-bkg-1': 'var(--bkg-1)',
        'th-bkg-2': 'var(--bkg-2)',
        'th-bkg-3': 'var(--bkg-3)',
        'th-bkg-4': 'var(--bkg-4)',
        'th-fgd-1': 'var(--fgd-1)',
        'th-fgd-2': 'var(--fgd-2)',
        'th-fgd-3': 'var(--fgd-3)',
        'th-fgd-4': 'var(--fgd-4)',
        'th-active': 'var(--active)',
        'th-active-dark': 'var(--active-dark)',
        'th-error': 'var(--error)',
        'th-success': 'var(--success)',
        'th-warning': 'var(--warning)',
        'th-down': 'var(--down)',
        'th-down-dark': 'var(--down-dark)',
        'th-down-muted': 'var(--down-muted)',
        'th-up': 'var(--up)',
        'th-up-dark': 'var(--up-dark)',
        'th-up-muted': 'var(--up-muted)',
        'th-link': 'var(--link)',
        'th-link-hover': 'var(--link-hover)',
        'th-button': 'var(--button)',
        'th-button-hover': 'var(--button-hover)',
        'th-input-bkg': 'var(--input-bkg)',
        'th-input-border': 'var(--input-border)',
        'th-input-border-hover': 'var(--input-border-hover)',
      },
      cursor: {
        help: 'help',
      },
      fontSize: {
        xxs: '.65rem',
      },
      keyframes: {
        shake: {
          '0%, 100%': {
            transform: 'rotate(0deg)',
          },
          '20%, 60%': {
            transform: 'rotate(6deg)',
          },
          '40%, 80%': {
            transform: 'rotate(-6deg)',
          },
        },
        shimmer: {
          '100%': {
            transform: 'translateX(100%)',
          },
        },
      },
      screens: {
        xl: '1600px',
      },
    },
  },
  // variants: {
  //   extend: {
  //     cursor: ['hover', 'focus', 'disabled'],
  //     opacity: ['disabled'],
  //     backgroundColor: ['disabled'],
  //     textColor: ['disabled'],
  //   },
  // },
  plugins: [],
}