tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      colors: {
        X2: ":darken<2<@panel",
        X3: "rgba(0, 0, 0, 0.05)",
        X4: "rgba(0, 0, 0, 0.1)",
        X5: "rgba(0, 0, 0, 0.05)",
        X6: "rgba(0, 0, 0, 0.25)",
        X7: "rgba(0, 0, 0, 0.05)",
        X8: ":lighten<5<@accent",
        X9: ":darken<5<@accent",
        bg: "#ede7d4",
        fg: "#714116",
        X10: ":alpha<0.4<@accent",
        X11: "rgba(0, 0, 0, 0.1)",
        X12: "rgba(0, 0, 0, 0.1)",
        X13: "rgba(0, 0, 0, 0.15)",
        X14: ":alpha<0.5<@navBg",
        X15: ":alpha<0<@panel",
        X16: ":alpha<0.7<@panel",
        X17: ":alpha<0.8<@bg",
        cwBg: "#b1b9c1",
        cwFg: "#fff",
        link: "#e06766",
        warn: "#ffa500",
        badge: "#95a5e1",
        error: "#e06766",
        focus: ":alpha<0.3<@accent",
        navBg: "@panel",
        navFg: "@fg",
        panel: "#f2eddf",
        accent: "#e06766",
        header: ":alpha<0.7<@panel",
        infoBg: "#f6f4e1",
        infoFg: "#714116",
        renote: "#95a5e1",
        shadow: "rgba(0, 0, 0, 0.1)",
        divider: "rgba(0, 0, 0, 0.1)",
        hashtag: "#e06766",
        mention: "@accent",
        modalBg: "rgba(0, 0, 0, 0.3)",
        success: "#95e1a5",
        buttonBg: "rgba(0, 0, 0, 0.05)",
        acrylicBg: ":alpha<0.5<@bg",
        cwHoverBg: "#bbc4ce",
        indicator: "@accent",
        mentionMe: "@mention",
        messageBg: "@panel",
        navActive: "@accent",
        infoWarnBg: "#ede7d4",
        infoWarnFg: "#e195a5",
        navHoverFg: ":darken<17<@fg",
        dateLabelFg: "@fg",
        inputBorder: "#dae0e4",
        panelBorder: "rgba(0, 0, 0, 0)",
        panelShadow: '" 0 8px 24px rgb(21 43 75 / 8%)',
        accentDarken: ":darken<10<@accent",
        acrylicPanel: ":alpha<0.5<@panel",
        navIndicator: "@accent",
        accentLighten: ":lighten<10<@accent",
        buttonHoverBg: "rgba(0, 0, 0, 0.1)",
        driveFolderBg: ":alpha<0.3<@accent",
        fgHighlighted: ":darken<3<@fg",
        fgTransparent: ":alpha<0.5<@fg",
        panelHeaderBg: "#f6f3ea",
        panelHeaderFg: "@fg",
        htmlThemeColor: "@bg",
        panelHighlight: ":darken<3<@panel",
        listItemHoverBg: "rgba(0, 0, 0, 0.03)",
        scrollbarHandle: "rgba(0, 0, 0, 0.2)",
        wallpaperOverlay: "rgba(255, 255, 255, 0.5)",
        fgTransparentWeak: ":alpha<0.75<@fg",
        panelHeaderDivider: "rgba(0, 0, 0, 0)",
        scrollbarHandleHover: "rgba(0, 0, 0, 0.4)",
      },
    },
  },
  plugins: [require("tailgrids/plugin")],
};