artcraft/frontend/apps/artcraft-website/tailwind.config.js

const { createGlobPatternsForDependencies } = require("@nx/react/tailwind");
const { join } = require("path");
import colors, { teal } from "tailwindcss/colors";

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    join(
      __dirname,
      "{src,pages,components,app}/**/*!(*.stories|*.spec).{ts,tsx,html}",
    ),
    ...createGlobPatternsForDependencies(__dirname),
    "./app/index.html",
    "./app/src/**/*.{js,jsx,ts,tsx}",
    "./app/src/*.{js,jsx,ts,tsx}",
    "../../libs/components/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        display: [
          "Outfit",
          "system-ui",
          "-apple-system",
          "BlinkMacSystemFont",
          "Segoe UI",
          "Roboto",
          "Helvetica Neue",
          "Arial",
          "sans-serif",
        ],
      },
    },
    colors: {
      transparent: "transparent",
      current: "currentColor",
      white: colors.white,
      gray: colors.gray,
      black: colors.black,
      red: colors.red,
      blue: colors.blue,
      orange: colors.orange,
      green: colors.green,
      emerald: colors.emerald,
      teal: colors.teal,
      yellow: colors.yellow,
      pink: colors.pink,
      purple: colors.purple,
      primary: {
        DEFAULT: "#2d81ff",
        50: "#eef6ff",
        100: "#d9ebff",
        200: "#bcdcff",
        300: "#8ec7ff",
        400: "#59a7ff",
        500: "#2d81ff",
        600: "#1b63f5",
        700: "#144ee1",
        800: "#173fb6",
        900: "#19398f",
        950: "#142457",
      },
      danger: {
        // copper rust — aligned with artcraft app's tailwind.config.ts
        DEFAULT: "#8f4951",
        50: "#fbf5f5",
        100: "#f7ecec",
        200: "#efdcdc",
        300: "#e2c0bf",
        400: "#d19b9c",
        500: "#bd7679",
        600: "#a5595f",
        700: "#8f4951",
        800: "#743d45",
        900: "#64373f",
        950: "#361b1e",
      },
      secondary: {
        DEFAULT: "#3E3E41",
        50: "#f6f6f6",
        100: "#e7e7e7",
        200: "#d1d1d1",
        300: "#b0b0b0",
        400: "#888888",
        500: "#6d6d6d",
        600: "#5d5d5d",
        700: "#4f4f4f",
        800: "#454545",
        900: "#3d3d3d",
        950: "#3E3E41",
      },
      "base-fg": "rgb(255 255 255 / <alpha-value>)",
      ui: {
        // Aligned with artcraft app's theme-gray (frontend/apps/artcraft/app/src/styles/base.css)
        background: "#242424",
        panel: "#1F1F1F",
        "panel-border": "#272727",
        border: "#272727",
        controls: "#3E3E41",
        "controls-button": "#3E3E41",
        "controls-border": "#464646",
        divider: "#272727",
        modal: "#1F1F1F",
      },
    },
  },
  plugins: [],
};