browser-extension/tailwind.config.js

// SPDX-FileCopyrightText: © 2023 Olivier Meunier <olivier@neokraft.net>
//
// SPDX-License-Identifier: GPL-3.0-only

const {addDynamicIconSelectors} = require("@iconify/tailwind")

const colorVar = (name) => {
  return ({opacityValue}) => {
    if (opacityValue) {
      return `rgb(var(--color-${name}) / ${opacityValue})`
    }
    return `rgb(var(--color-${name}))`
  }
}

const varPalette = (name) => {
  return [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950].reduce(
    (acc, cur) => {
      acc[cur] = colorVar(`${name}-${cur}`)
      return acc
    },
    {},
  )
}

module.exports = {
  content: ["addon/**/*.html", "src/**/*"],
  theme: {
    colors: {
      inherit: "inherit",
      transparent: "transparent",
      current: "currentColor",
      black: colorVar("black"),
      white: colorVar("white"),
      app: {
        bg: colorVar("app-bg"),
        fg: colorVar("app-fg"),
      },
      gray: {
        ...varPalette("gray"),
        light: colorVar("gray-light"),
        dark: colorVar("gray-dark"),
      },
      red: varPalette("red"),
      green: varPalette("green"),
      blue: varPalette("blue"),
      yellow: varPalette("yellow"),
      primary: {
        ...varPalette("blue"),
        DEFAULT: colorVar("primary"),
        light: colorVar("primary-light"),
        dark: colorVar("primary-dark"),
      },
    },
  },

  plugins: [require("./src/ui/interactions"), addDynamicIconSelectors()],
}