@violetprotocol/nudge-components/src/tw-preset/index.ts

Components for Nudge's websites and applications.

import type { Config } from "tailwindcss";

export const tailwindColors = {
  white: "#FFFFFF",
  black: "#000000",
  accent: "#FF4C00",
  whiteSmoke: "#F5F5F5",
  neutral: {
    0: "#FFFFFF",
    50: "#F8F8F9",
    100: "#EFEFF1",
    200: "#E6E6E9",
    300: "#DEDEE2",
    400: "#D6D6DA",
    500: "#C9CAD0",
    600: "#B4B5BD",
    700: "#818292",
    800: "#757689",
    900: "#57586A",
    950: "#20212F",
    1000: "#161722",
  },
  primary: {
    50: "#FFF6EC",
    100: "#FFEBD3",
    200: "#FFD3A5",
    300: "#FFB46D",
    400: "#FF8832",
    500: "#FF660A",
    600: "#FF4C00",
    700: "#CC3402",
    800: "#A1290B",
    900: "#82250C",
    950: "#460F04",
  },
  success: {
    50: "#ECFDF5",
    100: "#D1FAE5",
    200: "#A7F3D0",
    300: "#6EE7B7",
    400: "#34D399",
    500: "#10B981",
    600: "#059669",
    700: "#047857",
    800: "#065F46",
    900: "#064E3B",
    950: "#022C22",
  },
  warning: {
    50: "#FEF8E8",
    100: "#FEEEC3",
    200: "#FEDF8A",
    300: "#FAD161",
    400: "#FCC62D",
    500: "#EAAE08",
    600: "#CA9504",
    700: "#A16E07",
    800: "#85530E",
    900: "#714512",
    1000: "#422206",
  },
  error: {
    50: "#FEF2F2",
    100: "#FEE2E2",
    200: "#FECACA",
    300: "#FCA5A5",
    400: "#F87171",
    500: "#F75C5C",
    600: "#DC2626",
    700: "#B91C1C",
    800: "#991B1B",
    900: "#7F1D1D",
    950: "#450A0A",
  },
} as const;

export const tailwindPreset = {
  darkMode: "class",
  theme: {
    extend: {
      colors: tailwindColors,
      fontFamily: {
        sans: ["DM Sans", "sans-serif"],
        dmsans: ["DM Sans", "sans-serif"],
        inter: ["Inter", "sans-serif"],
      },
      opacity: {
        8: "0.08",
      },
    },
  },
  plugins: [],
} as Partial<Config>;