netbird/client/ui/frontend/tailwind.config.ts

import type { Config } from "tailwindcss";

const config: Config = {
  content: ["./index.html", "./src/**/*.{ts,tsx}"],
  darkMode: "class",
  theme: {
    fontFamily: {
      sans: ['"Inter Variable"', 'ui-sans-serif', 'system-ui', 'sans-serif'],
      mono: ['"JetBrains Mono Variable"', 'ui-monospace', 'monospace'],
    },
    extend: {
      colors: {
        // nb-gray is theme-aware: channels come from CSS variables in
        // globals.css (:root = light ramp, .dark = original dark ramp). The
        // rgb(var(...) / <alpha-value>) form keeps opacity modifiers working.
        "nb-gray": {
          DEFAULT: "rgb(var(--nb-gray-DEFAULT) / <alpha-value>)",
          50: "rgb(var(--nb-gray-50) / <alpha-value>)",
          100: "rgb(var(--nb-gray-100) / <alpha-value>)",
          200: "rgb(var(--nb-gray-200) / <alpha-value>)",
          250: "rgb(var(--nb-gray-250) / <alpha-value>)",
          300: "rgb(var(--nb-gray-300) / <alpha-value>)",
          350: "rgb(var(--nb-gray-350) / <alpha-value>)",
          400: "rgb(var(--nb-gray-400) / <alpha-value>)",
          500: "rgb(var(--nb-gray-500) / <alpha-value>)",
          600: "rgb(var(--nb-gray-600) / <alpha-value>)",
          700: "rgb(var(--nb-gray-700) / <alpha-value>)",
          800: "rgb(var(--nb-gray-800) / <alpha-value>)",
          850: "rgb(var(--nb-gray-850) / <alpha-value>)",
          900: "rgb(var(--nb-gray-900) / <alpha-value>)",
          910: "rgb(var(--nb-gray-910) / <alpha-value>)",
          920: "rgb(var(--nb-gray-920) / <alpha-value>)",
          925: "rgb(var(--nb-gray-925) / <alpha-value>)",
          930: "rgb(var(--nb-gray-930) / <alpha-value>)",
          935: "rgb(var(--nb-gray-935) / <alpha-value>)",
          940: "rgb(var(--nb-gray-940) / <alpha-value>)",
          950: "rgb(var(--nb-gray-950) / <alpha-value>)",
          960: "rgb(var(--nb-gray-960) / <alpha-value>)",
        },
        gray: {
          50: "#F9FAFB",
          100: "#F3F4F6",
          200: "#E5E7EB",
          300: "#D1D5DB",
          400: "#9CA3AF",
          500: "#6B7280",
          600: "#4B5563",
          700: "#374151",
          800: "#1F2937",
          900: "#111827",
        },
        red: {
          50: "#FDF2F2",
          100: "#FDE8E8",
          200: "#FBD5D5",
          300: "#F8B4B4",
          400: "#F98080",
          500: "#F05252",
          600: "#E02424",
          700: "#C81E1E",
          800: "#9B1C1C",
          900: "#771D1D",
        },
        yellow: {
          50: "#FDFDEA",
          100: "#FDF6B2",
          200: "#FCE96A",
          300: "#FACA15",
          400: "#E3A008",
          500: "#C27803",
          600: "#9F580A",
          700: "#8E4B10",
          800: "#723B13",
          900: "#633112",
        },
        green: {
          50: "#F3FAF7",
          100: "#DEF7EC",
          200: "#BCF0DA",
          300: "#84E1BC",
          400: "#31C48D",
          500: "#0E9F6E",
          600: "#057A55",
          700: "#046C4E",
          800: "#03543F",
          900: "#014737",
        },
        blue: {
          50: "#EBF5FF",
          100: "#E1EFFE",
          200: "#C3DDFD",
          300: "#A4CAFE",
          400: "#76A9FA",
          500: "#3F83F8",
          600: "#1C64F2",
          700: "#1A56DB",
          800: "#1E429F",
          900: "#233876",
        },
        indigo: {
          50: "#F0F5FF",
          100: "#E5EDFF",
          200: "#CDDBFE",
          300: "#B4C6FC",
          400: "#8DA2FB",
          500: "#6875F5",
          600: "#5850EC",
          700: "#5145CD",
          800: "#42389D",
          900: "#362F78",
        },
        purple: {
          50: "#F6F5FF",
          100: "#EDEBFE",
          200: "#DCD7FE",
          300: "#CABFFD",
          400: "#AC94FA",
          500: "#9061F9",
          600: "#7E3AF2",
          700: "#6C2BD9",
          800: "#5521B5",
          900: "#4A1D96",
        },
        pink: {
          50: "#FDF2F8",
          100: "#FCE8F3",
          200: "#FAD1E8",
          300: "#F8B4D9",
          400: "#F17EB8",
          500: "#E74694",
          600: "#D61F69",
          700: "#BF125D",
          800: "#99154B",
          900: "#751A3D",
        },
        netbird: {
          DEFAULT: "#f68330",
          50: "#fff6ed",
          100: "#feecd6",
          150: "#ffdfb8",
          200: "#ffd4a6",
          300: "#fab677",
          400: "#f68330",
          500: "#f46d1b",
          600: "#e55311",
          700: "#be3e10",
          800: "#973215",
          900: "#7a2b14",
          950: "#421308",
        },
      },
      backgroundImage: {
        "conic-netbird": "conic-gradient(from 0deg, #e55311 0%, #f68330 10%, #e55311 20%, #e55311 100%)",
      },
      keyframes: {
        "pulse-reverse": {
          "0%, 100%": { opacity: "1" },
          "50%": { opacity: "0.4" },
        },
        "spin-slow": {
          "0%": { transform: "rotate(0deg)" },
          "100%": { transform: "rotate(360deg)" },
        },
        "ping-slow": {
          "0%": { transform: "scale(1)", opacity: "1" },
          "75%, 100%": { transform: "scale(2)", opacity: "0" },
        },
      },
      animation: {
        "ping-slow": "ping-slow 2s cubic-bezier(0, 0, 0.2, 1) infinite",
        "pulse-slow": "pulse-reverse 2s cubic-bezier(0.5, 0, 0.6, 1) infinite",
        "pulse-slower": "pulse-reverse 3s cubic-bezier(0.5, 0, 0.6, 1) infinite",
        "spin-slow": "spin-slow 2s linear infinite",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
};

export default config;