artcraft/frontend/apps/artcraft-webapp/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,
      rose: colors.rose,
      indigo: colors.indigo,
      red: { ...colors.red, DEFAULT: "#D33242" },
      blue: { ...colors.blue, DEFAULT: "#2E70FF" },
      orange: colors.orange,
      amber: colors.amber,
      green: { ...colors.green, DEFAULT: "#308752" },
      emerald: colors.emerald,
      teal: colors.teal,
      cyan: colors.cyan,
      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",
      },
      "brand-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",
      },
      "brand-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",
      },
      "brand-tertiary": {
        DEFAULT: "#1cb6be",
        50: "#eefdfc",
        100: "#d4f9f8",
        200: "#aef3f3",
        300: "#62e4e6",
        400: "#38d3d8",
        500: "#1cb6be",
        600: "#1a94a0",
        700: "#1c7682",
        800: "#1f616b",
        900: "#1e505b",
        950: "#0e353e",
      },
      action: {
        DEFAULT: "#3E3E41",
        50: "#f6f6f6",
        100: "#e7e7e7",
        200: "#d1d1d1",
        300: "#b0b0b0",
        400: "#888888",
        500: "#6d6d6d",
        600: "#5d5d5d",
        700: "#4f4f4f",
        800: "#454545",
        900: "#3d3d3d",
        950: "#3E3E41",
      },
      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>)",
      sidebar: {
        DEFAULT: "var(--sidebar-bg)",
        foreground: "var(--sidebar-fg)",
        border: "var(--sidebar-border)",
        accent: "var(--sidebar-accent)",
        "accent-foreground": "var(--sidebar-accent-fg)",
        ring: "var(--sidebar-ring)",
      },
      ui: {
        // Aligned with artcraft app's theme-gray (frontend/apps/artcraft/app/src/styles/base.css)
        background: "#242424",
        panel: "#1F1F1F",
        "panel-border": "#272727",
        border: "#3f3f3f",
        controls: "#3e3e41",
        "controls-button": "#3E3E41",
        "controls-border": "#3f3f3f",
        divider: "#272727",
        modal: "#1F1F1F",
      },
      "axis-x": "#D33242",
      "axis-y": "#308752",
      "axis-z": "#2E70FF",

      // shadcn tokens consumed by @storyteller/ui-video-editor. CSS
      // variables live in apps/artcraft-webapp/src/styles.css.
      background: "hsl(var(--background))",
      foreground: "hsl(var(--foreground))",
      card: {
        DEFAULT: "hsl(var(--card))",
        foreground: "hsl(var(--card-foreground))",
      },
      popover: {
        DEFAULT: "hsl(var(--popover))",
        foreground: "hsl(var(--popover-foreground))",
      },
      muted: {
        DEFAULT: "hsl(var(--muted))",
        foreground: "hsl(var(--muted-foreground))",
      },
      accent: {
        DEFAULT: "hsl(var(--accent))",
        foreground: "hsl(var(--accent-foreground))",
      },
      destructive: {
        DEFAULT: "hsl(var(--destructive))",
        foreground: "hsl(var(--destructive-foreground))",
      },
      border: "hsl(var(--border))",
      input: "hsl(var(--input))",
      ring: "hsl(var(--ring))",
    },
  },
  plugins: [],
};