Modrinth/apps/app-frontend/tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './src/components/**/*.{js,vue,ts}',
    './src/layouts/**/*.vue',
    './src/pages/**/*.vue',
    './src/plugins/**/*.{js,ts}',
    './src/App.vue',
    './src/error.vue',
    // monorepo - TODO: migrate this to its own package
    '../../packages/**/*.{js,vue,ts}',
  ],
  theme: {
    extend: {
      colors: {
        icon: 'var(--color-base)',
        // Text
        primary: 'var(--color-base)',
        contrast: 'var(--color-contrast)',
        secondary: 'var(--color-secondary)',
        inactive: 'var(--color-text-inactive)',
        dark: 'var(--color-text-dark)',
        inverted: 'var(--color-text-inverted)',
        heading: 'var(--color-heading)',
        red: 'var(--color-red)',
        orange: 'var(--color-orange)',
        purple: 'var(--color-purple)',
        bg: {
          DEFAULT: 'var(--color-bg)',
          red: 'var(--color-red-bg)',
          orange: 'var(--color-orange-bg)',
          green: 'var(--color-green-bg)',
          blue: 'var(--color-blue-bg)',
          purple: 'var(--color-purple-bg)',
          raised: 'var(--color-raised-bg)',
        },
        highlight: {
          DEFAULT: 'var(--color-brand-highlight)',
          red: 'var(--color-red-highlight)',
          orange: 'var(--color-orange-highlight)',
          green: 'var(--color-green-highlight)',
          blue: 'var(--color-blue-highlight)',
          purple: 'var(--color-purple-highlight)',
          gray: 'var(--color-gray-highlight)',
        },
        divider: {
          DEFAULT: 'var(--color-divider)',
          dark: 'var(--color-divider-dark)',
        },
        brand: {
          DEFAULT: 'var(--color-brand)',
          red: 'var(--color-red)',
          orange: 'var(--color-orange)',
          green: 'var(--color-green)',
          blue: 'var(--color-blue)',
          purple: 'var(--color-purple)',
          highlight: 'var(--color-brand-highlight)',
          shadow: 'var(--color-brand-shadow)',
          inverted: 'var(--color-accent-contrast)',
        },
        tabUnderlineHovered: 'var(--tab-underline-hovered)',
        button: {
          bg: 'var(--color-button-bg)',
          text: 'var(--color-button-text)',
          bgHover: 'var(--color-button-bg-hover)',
          textHover: 'var(--color-button-text-hover)',
          bgActive: 'var(--color-button-bg-active)',
          textActive: 'var(--color-button-text-active)',
          border: 'var(--color-button-border)',
          bgSelected: 'var(--color-button-bg-selected)',
          textSelected: 'var(--color-button-text-selected)',
        },
        toggleHandle: 'var(--color-toggle-handle)',
        dropdown: {
          bg: 'var(--color-dropdown-bg)',
          text: 'var(--color-dropdown-text)',
        },
        tooltip: {
          bg: 'var(--color-tooltip-bg)',
          text: 'var(--color-tooltip-text)',
        },
        code: {
          bg: 'var(--color-code-bg)',
          text: 'var(--color-code-text)',
        },
        kbdShadow: 'var(--color-kbd-shadow)',
        ad: {
          DEFAULT: 'var(--color-ad)',
          raised: 'var(--color-ad-raised)',
          contrast: 'var(--color-ad-contrast)',
          highlight: 'var(--color-ad-highlight)',
        },
        greyLink: {
          DEFAULT: 'var(--color-grey-link)',
          hover: 'var(--color-grey-link-hover)',
          active: 'var(--color-grey-link-active)',
        },
        link: {
          DEFAULT: 'var(--color-link)',
          hover: 'var(--color-link-hover)',
          active: 'var(--color-link-active)',
        },
        warning: {
          bg: 'var(--color-warning-bg)',
          text: 'var(--color-warning-text)',
          banner: {
            text: 'var(--color-warning-banner-text)',
            bg: 'var(--color-warning-banner-bg)',
            side: 'var(--color-warning-banner-side)',
          },
        },
        infoBanner: {
          text: 'var(--color-info-banner-text)',
          bg: 'var(--color-info-banner-bg)',
          side: 'var(--color-info-banner-side)',
        },
        blockQuote: 'var(--color-block-quote)',
        headerUnderline: 'var(--color-header-underline)',
        hr: 'var(--color-hr)',
        table: {
          border: 'var(--color-table-border)',
          alternateRow: ' var(--color-table-alternate-row)',
        },
      },
      backgroundImage: {
        mazeBg: 'var(--landing-maze-bg)',
        mazeGradientBg: 'var(--landing-maze-gradient-bg)',
        landing: {
          mazeOuterBg: 'var(--landing-maze-outer-bg)',
          colorHeading: 'var(--landing-color-heading)',
          colorSubheading: 'var(--landing-color-subheading)',
          transitionGradientStart: 'var(--landing-transition-gradient-start)',
          transitionGradientEnd: 'var(--landing-transition-gradient-end)',
          hoverCardGradient: 'var(--landing-hover-card-gradient)',
          borderGradient: 'var(--landing-border-gradient)',
          borderColor: 'var(--landing-border-color)',
          creatorGradient: 'var(--landing-creator-gradient)',
          blobGradient: 'var(--landing-blob-gradient)',
          cardBg: 'var(--landing-card-bg)',
          blueLabel: 'var(--landing-blue-label)',
          blueLabelBg: 'var(--landing-blue-label-bg)',
          greenLabel: 'var(--landing-green-label)',
          greenLabelBg: 'var(--landing-green-label-bg)',
          rawBg: 'var(--landing-raw-bg)',
        },
      },
    },
  },
  plugins: [],
  corePlugins: {
    preflight: false,
  },
}