zammad/tailwind.config.js

// Copyright (C) 2012-2022 Zammad Foundation, https://zammad-foundation.org/

const colors = require('tailwindcss/colors')
const formsPlugin = require('@tailwindcss/forms')
const lineClampPlugin = require('@tailwindcss/line-clamp')
const formKitTailwind = require('@formkit/themes/tailwindcss')
const headlessUiTailwind = require('@headlessui/tailwindcss')
const plugin = require('tailwindcss/plugin')
const path = require('path')
const fs = require('fs')

// TODO: Move utility code elsewhere?
function* walkSync(dir) {
  const files = fs.readdirSync(dir, { withFileTypes: true })
  for (const file of files) {
    if (file.isDirectory()) {
      yield* walkSync(path.join(dir, file.name))
    } else {
      yield path.join(dir, file.name)
    }
  }
}

// Here we need to add classes which are only present in the FormSchema back end, as Tailwind
//  can't detect them otherwise.
const safelist = new Set()
for (const filePath of walkSync(`${__dirname}/app/models/form_schema/form/`)) {
  const content = fs.readFileSync(filePath).toString()
  for (const match of content.matchAll(/class: '([^']+)'/g)) {
    for (const klass of match[1].split(/[ ]+/)) {
      safelist.add(klass)
    }
  }
}

// Add the moment we can use one tailwind config for the mobile app, but later we need to check
// how this works with different apps.
module.exports = {
  content: [`${path.resolve(__dirname)}/app/frontend/**/*.{js,jsx,ts,tsx,vue}`],
  theme: {
    fontFamily: {
      sans: [
        '"Fira Sans"',
        '"Helvetica Neue"',
        'Helvetica',
        'Arial',
        'sans-serif',
      ],
    },
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: {
        DEFAULT: '#191919',
        full: colors.black,
      },
      white: colors.white,
      gray: {
        DEFAULT: '#999999',
        100: '#D1D1D1',
        150: '#D8D8D8',
        200: '#656567',
        300: '#4C4C4D',
        400: '#323234',
        500: '#282829',
        600: '#262627',
        highlight: '#99999926',
        light: '#25262D99',
      },
      blue: {
        DEFAULT: '#23A2CD',
        dark: '#045972',
        highlight: '#23A2CD4D',
      },
      yellow: {
        DEFAULT: '#FFCE33',
        highlight: '#FFCE331A',
      },
      red: {
        DEFAULT: '#E54011',
        highlight: '#E540111A',
      },
      green: {
        DEFAULT: '#36AF6A',
        highlight: '#38AD691A',
      },
      pink: '#EA4D84',
      'dark-blue': '#045972',
      orange: '#F39804',
    },
    extend: {},
  },
  plugins: [
    formsPlugin,
    lineClampPlugin,
    formKitTailwind,
    plugin(({ addVariant }) => {
      addVariant('formkit-populated', [
        '&[data-populated]',
        '[data-populated] &',
        '[data-populated]&',
      ])
      addVariant('formkit-required', [
        '&[data-required]',
        '[data-required] &',
        '[data-required]&',
      ])
      addVariant('formkit-is-checked', [
        '&[data-is-checked]',
        '[data-is-checked] &',
        '[data-is-checked]&',
      ])
      addVariant('formkit-variant-primary', [
        '[data-variant="primary"] &',
        '[data-variant="primary"]&',
      ])
      addVariant('formkit-variant-secondary', [
        '[data-variant="secondary"] &',
        '[data-variant="secondary"]&',
      ])
    }),
    headlessUiTailwind,
  ],
  safelist: [...safelist.values()],
}