tailwind.config.js

module.exports = {
  mode: 'jit',
  options: {
    // The following extractor is the same as the default of v2, except it includes cut off points for semicolons.
    defaultExtractor: (line) => {
      return [
        ...(line.match(/[^<>"'`;\s]*[^<>"'`;\s:]/g) || []),
        ...(line.match(/[^<>"'`;\s.(){}[\]#=%]*[^<>"'`;\s.(){}[\]#=%:]/g) ||
          []),
      ]
    },
  },

  content: [
    './app/views/**/*.haml',
    './app/helpers/**/*.rb',
    './app/javascript/**/*',
  ],
  theme: {
    extend: {
      screens: {
        max850: { max: '850px' },
        mxl: { min: '1200px' },
        xs: { min: '480px' },
      },
      gridTemplateColumns: {
        // Simple 16 column grid
        '2-auto': 'repeat(2, auto)',
        '3-auto': 'repeat(2, auto)',
      },
      outlineWidth: {
        3: '3px',
      },
      boxShadow: {
        lavenderFocus: '0px 0px 0px 3px rgba(35, 0, 255, 0.3)',
      },
      animation: {
        fadeIn: 'fadeIn 0.2s forwards',
        fadeOut: 'fadeOut 0.2s forwards',
        spin: 'spin 2s linear infinite',
        'spin-slow': 'spin 3s linear infinite',
      },
    },
    borderRadius: {
      none: '0',
      3: '3px',
      5: '5px',
      6: '6px',
      8: '8px',
      12: '12px',
      16: '16px',
      24: '24px',
      32: '32px',
      100: '100px',
      circle: '100%',
    },
    borderWidth: {
      0: '0',
      1: '1px',
      2: '2px',
      3: '3px',
      4: '4px',
      6: '6px',
      8: '8px',
    },
    boxShadow: {
      none: 'none',
      buttonS: '0px 4px 8px rgba(var(--shadowColorMain), 0.4)',
      xsZ1: '0px 2px 4px 0px rgba(var(--shadowColorMain), 0.3)',
      xsZ1_dark: '0px 2px 4px #0F0923',
      dark_xsZ1: '0px 2px 4px #0F0923',
      xsZ1v2: '0px 2px 4px 0px rgba(var(--shadowColorMain), 0.15)',
      xsZ1v3: '0px 2px 4px 0px rgba(var(--shadowColorMain), 0.4)',
      sm: 'var(--box-shadow-sm)',
      smZ1: '0px 4px 16px 0px rgba(var(--shadowColorMain), 0.3)',
      base: 'var(--box-shadow-base)',
      baseZ1: '0px 4px 24px 0px rgba(var(--shadowColorMain), 0.3)',
      baseZ1v2: '0px 4px 24px 0px var(--shadowColorSecondary)',
      lg: 'var(--box-shadow-lg)',
      lgv2: '0px 4px 42px rgba(var(--shadowColorMain), 0.6)',
      lgZ1: 'var(--box-shadow-lgZ1)',
      inputSelected: '0px 0px 2px 2px var(--inputBoxShadowColorFocus)',
      keystroke: '0px 1px 0px 1px rgba(var(--shadowColorKeystroke), 0.6)',
      launching: '8px 8px 0px #211E28',

      navDropdown: '0px 6px 28px 4px rgba(var(--shadowColorMain), 0.5)',
    },
    colors: {
      transparent: 'transparent',
      current: 'currentColor',

      /* NEW */
      darkThemeBackgroundColor: 'var(--darkThemeBackgroundColor)',

      backgroundColorA: 'rgb(var(--backgroundColorA-RGB) / <alpha-value>)',
      backgroundColorB: 'var(--backgroundColorB)',
      backgroundColorC: 'var(--backgroundColorC)',
      backgroundColorD: 'var(--backgroundColorD)',
      backgroundColorE: 'var(--backgroundColorE)',
      backgroundColorF: 'var(--backgroundColorF)',
      backgroundColorG: 'var(--backgroundColorG)',
      backgroundColorH: 'var(--backgroundColorH)',
      backgroundColorI: 'var(--backgroundColorI)',
      backgroundColorHoverMenuTrack: 'var(--backgroundColorHoverMenuTrack)',
      borderColor1: 'var(--borderColor1)',
      borderColor3: 'var(--borderColor3)',
      borderColor4: 'var(--borderColor4)',
      borderColor5: 'var(--borderColor5)',
      borderColor6: 'var(--borderColor6)',
      borderColor7: 'var(--borderColor7)',
      borderColor8: 'var(--borderColor8)',
      borderColor9: 'var(--borderColor9)',
      textColor1: 'var(--textColor1)',
      textColor1NoDark: 'var(--textColor1-no-dark)',
      textColor2: 'var(--textColor2)',
      textColor3: 'var(--textColor3)',
      textColor5: 'var(--textColor5)',
      textColor6: 'var(--textColor6)',
      textColor6NoDark: '#5C5589',
      textColor7: 'var(--textColor7)',
      textColor8: 'var(--textColor8)',
      textColor9: 'var(--textColor9)',
      textColor10: 'var(--textColor10)',
      prominentLinkColor: 'var(--c-prominent-link-color)',

      linkColor: 'var(--linkColor)',
      buttonBorderColor1: 'var(--buttonBorderColor1)',
      buttonBorderColor2: 'var(--buttonBorderColor2)',
      inputBackgroundColor: 'var(--inputBackgroundColor)',
      inputBorderColor: 'var(--inputBorderColor)',
      inputBorderColorFocus: 'var(--inputBorderColorFocus)',
      tabBackgroundColorSelected: 'var(--tabBackgroundColorSelected)',
      tabColorSelected: 'var(--tabColorSelected)',
      tabIconColorSelected: 'var(--tabIconColorSelected)',
      tabBorderColorSelected: 'var(--tabBorderColorSelected)',
      successColor: 'var(--successColor)',
      lockedColor: 'var(--lockedColor)',

      paginationCurrentBackgroundColor:
        'var(--paginationCurrentBackgroundColor)',
      paginationCurrentBorderColor: 'var(--paginationCurrentBorderColor)',

      easy: '#5FB268',
      easyLight: '#EFFFF1',

      disabledLight: '#E0DFEA',
      disabledLabel: '#76709F',

      medium: '#A5A256',
      mediumLight: '#F7F5E0',

      hard: '#CB8D6A',
      hardLight: '#F4EBE5',

      unnamed10: '#3D3B45',
      unnamed13: '#33363F',
      unnamed15: '#F0F3F9',
      aliceBlue: '#F0F3F9',
      unnamed16: '#8480A0',
      randomBlue: '#F9F8FF',
      lightGold: '#FFD38F',

      blueViolet: '#9E8EFF',
      darkBlueViolet: '#282339',

      veryDarkGray: '#221E31',
      darkBlueGray: '#211D2F',
      smokeGray: '#26282D',
      bgGray: '#FBFCFE',
      lightGray: '#EAECF3',
      borderLight: '#CBC9D9',
      borderLight2: '#D5D8E4',

      lightBlue: '#2E57E8',
      darkBlue: '#6A93FF',
      veryLightBlue: '#E1EBFF',
      veryLightBlue2: '#E2EBFF',
      evenLighterBlue: '#ECF2FF',
      cornflowerBlue: '#6A93FF',
      wildBlueYonder: '#A7B7D6',
      crayola: '#C8D5EF',
      eerieBlack: '#191525',
      richBlack: '#09080C',

      btnBorder: '#5C5589',
      primaryBtnBorder: '#130B43',
      purple: '#604FCD',
      purpleDimmed: '#604FCD66',
      adaptivePurple: 'var(--colorPurpleToBrightPurple)',
      brightPurple: '#A9A0E4',
      purpleDarkened: '#3B2A93',
      purpleDarker3: '#453A8F',
      anotherPurple: '#604FCD' /* Remove this */,
      russianViolet: '#302b42',
      englishViolet: '#4A475F',
      lightPurpleDarkened: '#f2f0fc',
      gotToLoveAPurple: '#271B72',
      biggerBolderAndMorePurpleThanEver: '#130B43',
      // textColor1
      midnightBlue: '#130B43',
      lightPurple: '#FAFAFF',
      purpleForever: '#5042AD',
      vividPurple: '#7029F5',
      darkPlaceholder: '#9D94DA',
      lightLavender: 'rgba(35, 0, 255, 0.3)',
      lavender: '#d5d8e4',
      purpleHover: '#F2F0FC',

      champagne: '#fff4e3',
      yellowPrompt: '#FFD38F',
      launchingYellow: '#F7B000',
      greenPrompt: '#59D2AE',
      chatGptGreen: '#74aa9d',

      gray: '#A9A6BD',
      // TODO: fix this - change it back to its hex value
      darkGray: 'var(--textColor3)',
      trueDarkGray: '#26282D',

      darkSuccessGreen: '#2E8C70',
      darkGreen: '#43B593',
      mediumGreen: '#B8EADB',
      lightGreen: '#ABDBCC',
      veryLightGreen: 'rgba(79,205,167,0.15)',
      veryLightGreen2: '#E7FDF6',
      limeGreen: '#1FA378',
      healthyGreen: '#00B500',
      seafoamGreen: '#59D2AE',

      tooManyGreens: '#59D2AE',
      literallySoManyGreens: '#4FCDA7',
      soManyGreens: '#228466',
      bgGreen: 'rgba(89, 210, 174, 0.15)',
      everyoneLovesAGreen: '#349F7F',

      orange: '#F69605',
      lightOrange: '#FFF3E1',
      superLightOrange: '#FFFDFA',
      darkRed: '#D03B3B',
      red: '#EB5757',
      lightRed: '#FDEAEA',
      veryLightRed: '#FFEDED',
      youtubeRed: '#D81A1A',
      discordBlue: '#5865F2',
      bgRed: 'rgba(235, 87, 87, 0.15)',
      gold: '#E2CB2D',
      brown: '#47300C',
      lightBrown: '#955D09',

      gradientProgressBarA: '#2200FF',
      gradientProgressBarB: '#9E00FF',

      warning: '#E48900',
      warningBtnBorder: '#573C13',

      // I think this should be called danger, as it is a variant of alert
      alert: '#D85050',
      danger: '#D85050',
      danger_dark: '#F17070',
      bgDanger_dark: '#2F2121',
      alertBtnBorder: '#873333',

      textCAlert: 'var(--textColorCAlert)',
      textCAlertLabel: 'var(--textColorCAlertLabel)',
      bgCAlert: 'var(--backgroundColorCAlert)',

      anotherGold: '#FAE54D',

      muddy: '#6E82AA',
      caution: '#955D09',
      cautionBright: '#F9D59F',
      cautionLabel: '#3E2705',
      color22: 'var(--color22)',

      commonBadge: 'rgb(var(--commonBadge-RGB))',
      commonBadgeFill: '#505359',
      rareBadge: '#DBF0FF',
      rareBadgeFill: '#00144B',
      ultimateBadge: '#F69605',
      ultimateBadgeFill: '#560000',
      legendaryBadge: '#EB5757',
      legendaryBadgeFill: '#4B0000',

      white: '#fff',
      black: '#000',

      fillColorProgress: 'var(--fillColorProgress)',
      backgroundColorNavDropdown: 'var(--backgroundColorNavDropdown)',
    },
    fontFamily: {
      body: 'var(--body-font)',
      mono: ['Source Code Pro', 'monospace'],
    },
    fontSize: {
      12: '12px',
      13: '13px',
      14: '14px',
      15: '15px',
      16: '16px',
      17: '17px',
      18: '18px',
      20: '20px',
      21: '21px',
      22: '22px',
      23: '23px',
      24: '24px',
      25: '25px',
      28: '28px',
      31: '31px',
      32: '32px',
      34: '34px',
      39: '39px',
      40: '40px',
      48: '48px',
      54: '54px',
      64: '64px',
      100: '100%',
    },
    height: {
      auto: 'auto',
      arbitary: '1px',
      fill: '100%',
      32: '32px',
      48: '48px',
      100: '100%',
    },

    lineHeight: {
      none: '1',
      tight: '125%',
      regular: '138%',
      paragraph: '150%',
      code: '160%',
      huge: '170%',

      100: '100%',
      120: '120%',
      130: '130%',
      140: '140%',
      150: '150%',
      160: '160%',
      170: '170%',
      180: '180%',
      190: '190%',
      200: '200%',
    },
    spacing: {
      auto: 'auto',
      0: '0px',
      2: '2px',
      4: '4px',
      6: '6px',
      8: '8px',
      10: '10px',
      12: '12px',
      16: '16px',
      20: '20px',
      24: '24px',
      28: '28px',
      32: '32px',
      36: '36px',
      40: '40px',
      44: '44px',
      48: '48px',
      52: '52px',
      56: '56px',
      60: '60px',
      64: '64px',
      72: '72px',
      80: '80px',
      84: '84px',
      88: '88px',
      96: '96px',
      128: '128px',
      140: '140px',
    },
    width: {
      // Sometimes, elements need to have *some* width set
      // to then respond to flex-grow. This is used for that.
      auto: 'auto',
      arbitary: '1px',
      fill: '100%',
      '5-7': '71.4%',
      '1-3': '33.3%',
      '1-2': '50%',
      100: '100%',
      fit: 'fit-content',
      unset: 'unset',
    },
    maxWidth: {
      '1-2': '50%',
    },
    zIndex: {
      '-1': '-1',
      '-2': '-2',
      '-3': '-3',
      '-4': '-4',
      1: '1',
      shadow: '2',
      divider: '5',
      overlay: '10',
      menu: '40',
      dropdown: '50',
      tooltip: '80',
      modal: '100',
      redirect: '150',
    },
  },
  variants: {
    extend: {
      borderColor: ['focus-within', 'focus', 'hover'],
      backgroundColor: ['focus-within'],
    },
  },
  plugins: [
    [
      'postcss-reuse',
      {
        mode: 'class',
      },
    ],
    function ({ addVariant }) {
      addVariant('child', '& > *'), addVariant('not-last', '&:not(:last-child)')
    },
  ],
  corePlugins: {
    container: false,
  },
}