Hello I'm trying to make the description not sure how its named white, this what I have done but yea anyone with more experince could help me?

import { toast } from "sonner";

type ToastType = "success" | "error" | "warning" | "info";

interface ToastOptions {
  description?: string;
}

// Define icons for different toast types
const toastIcons = {
  success: "✅",
  error: "❌",
  warning: "⚠️",
  info: "ℹ️",
};

// Define styles for different toast types - we'll use these with custom CSS
const toastColors = {
  success: {
    borderColor: "#6C0EA8", // Purple accent for success
    titleColor: "white",
  },
  error: {
    borderColor: "#FF5555", // Red accent for error
    titleColor: "white",
  },
  warning: {
    borderColor: "#FFAA00", // Orange/yellow accent for warning
    titleColor: "white",
  },
  info: {
    borderColor: "#55AAFF", // Blue accent for info
    titleColor: "white",
  },
};

/**
 * Show a styled toast notification
 * @param type Type of toast (success, error, warning, info)
 * @param title The toast title
 * @param options Additional options including description
 */
export function showToast(
  type: ToastType,
  title: string,
  options?: ToastOptions
) {
  toast(title, {
    description: options?.description || "",
    icon: toastIcons[type],
    style: {
      background: "#191B24",
      color: "white", // Default text color
      border: `1px solid ${toastColors[type].borderColor}`,
    },
  });
}

/**
 * Show a success toast
 */
export function showSuccess(title: string, description?: string) {
  showToast("success", title, { description });
}

/**
 * Show an error toast
 */
export function showError(title: string, description?: string) {
  showToast("error", title, { description });
}

/**
 * Show a warning toast
 */
export function showWarning(title: string, description?: string) {
  showToast("warning", title, { description });
}

/**
 * Show an info toast
 */
export function showInfo(title: string, description?: string) {
  showToast("info", title, { description });
}