Fix Toast colours (#60)

Co-authored-by: Claude <claude@users.noreply.github.com>

Author: Shrinks99

packages/demo/src/components/demo/toast.tsx

@@ -3,13 +3,7 @@ import { Button, useToast, ToastAction } from "@eqtylab/equality";
 export const ToastDemo = ({
   variant = "default",
 }: {
-  variant?:
-    | "default"
-    | "danger"
-    | "warning"
-    | "success"
-    | "with-title"
-    | "with-action";
+  variant?: "default" | "danger" | "warning" | "success" | "with-action";
 }) => {
   const { toast } = useToast();
 
@@ -80,23 +74,6 @@ export const ToastDemo = ({
     );
   }
 
-  if (variant === "with-title") {
-    return (
-      <Button
-        size="sm"
-        onClick={() => {
-          toast({
-            variant: "default",
-            title: "Notification",
-            description: "This toast includes both a title and description.",
-          });
-        }}
-      >
-        Show Toast with Title
-      </Button>
-    );
-  }
-
   if (variant === "with-action") {
     return (
       <Button

packages/demo/src/content/components/toast.mdx

@@ -11,12 +11,14 @@ import { ToastRoot } from "@eqtylab/equality";
 
 ## Overview
 
----
+The Toast component provides a non-intrusive way to display notifications to users. It supports status-dependant variants, optional (though suggested) titles and descriptions, and action buttons. Toasts automatically dismiss after a delay and can be manually dismissed via a close button.
 
-The Toast component provides a non-intrusive way to display notifications to users. Built on top of Radix UI primitives, it supports multiple variants (default, danger, warning, success), optional titles and descriptions, and action buttons. Toasts automatically dismiss after a delay and can be manually dismissed via a close button.
+Because toasts disappear automatically after five seconds, it is not recommended to make any actions surfaced within them solely available in the toast. For example, this could be used to give users an opportunity to undo their previous action, but the undo action should also be made available outside of the toast component.
 
 ## Variants
 
+When `title` is present, toasts display variant-specific icons by default.
+
 ### Default
 
 <ToastDemo client:only="react" />
@@ -33,25 +35,21 @@ The Toast component provides a non-intrusive way to display notifications to use
 
 <ToastDemo client:only="react" variant="success" />
 
-### With Title
-
-<ToastDemo client:only="react" variant="with-title" />
-
 ### With Action
 
 <ToastDemo client:only="react" variant="with-action" />
 
 ## Usage
 
----
+Import the components and hooks:
 
-### Setup
+```tsx
+import { ToastRoot, useToast } from "@eqtylab/equality";
+```
 
-First, add the `ToastRoot` component to your application root. This component provides the toast context and viewport:
+First, add the `ToastRoot` component to your application root:
 
 ```tsx
-import { ToastRoot } from "@eqtylab/equality";
-
 function App() {
   return (
     <>
@@ -62,67 +60,59 @@ function App() {
 }
 ```
 
-### Basic Usage
-
-Import the `useToast` hook in any component where you want to display toasts:
+Basic usage with the `useToast` hook:
 
 ```tsx
-import { useToast } from "@eqtylab/equality";
-
 function MyComponent() {
   const { toast } = useToast();
 
   const handleClick = () => {
     toast({
-      description: "This is a toast notification.",
+      title: "Success",
+      description: "Your changes have been saved.",
+      variant: "success",
     });
   };
 
   return <button onClick={handleClick}>Show Toast</button>;
 }
 ```
 
-### Toast API
+## Props
 
-The `toast` function accepts the following options:
+| Name           | Description                                                                 | Type                                      | Default               | Required |
+| -------------- | --------------------------------------------------------------------------- | ----------------------------------------- | --------------------- | -------- |
+| `variant`      | Visual style of the toast with default icon                                 | `default`, `danger`, `warning`, `success` | `default`             | ❌       |
+| `title`        | Title text displayed with an icon                                           | `React.ReactNode`                         | -                     | ❌       |
+| `description`  | Main message content                                                        | `React.ReactNode`                         | -                     | ❌       |
+| `icon`         | Custom icon (string for Lucide icon name or React element, null to disable) | `string \| React.ReactElement \| null`    | Variant-specific icon | ❌       |
+| `action`       | Action button element                                                       | `ToastActionElement`                      | -                     | ❌       |
+| `open`         | Control the open state                                                      | `boolean`                                 | `true`                | ❌       |
+| `onOpenChange` | Callback when open state changes                                            | `(open: boolean) => void`                 | -                     | ❌       |
 
-- `variant?: "default" | "danger" | "warning" | "success"` - Visual variant of the toast
-- `title?: React.ReactNode` - Optional title displayed at the top of the toast
-- `description?: React.ReactNode` - Main message content
-- `action?: ToastActionElement` - Optional action button element
-- `open?: boolean` - Control the open state (defaults to `true`)
-- `onOpenChange?: (open: boolean) => void` - Callback when open state changes
+### Toast Instance Methods
 
-The `toast` function returns an object with:
+The `toast` function returns an object with the following methods:
 
-- `id: string` - Unique identifier for the toast
-- `dismiss: () => void` - Function to manually dismiss the toast
-- `update: (props: ToasterToast) => void` - Function to update the toast properties
+| Method    | Description                             | Type                            |
+| --------- | --------------------------------------- | ------------------------------- |
+| `id`      | Unique identifier for the toast         | `string`                        |
+| `dismiss` | Function to manually dismiss the toast  | `() => void`                    |
+| `update`  | Function to update the toast properties | `(props: ToasterToast) => void` |
 
-### Examples
+## Examples
 
-#### Basic Toast
+### Basic Toast
 
 ```tsx
-import { useToast } from "@eqtylab/equality";
-
 const { toast } = useToast();
 
 toast({
   description: "Your changes have been saved.",
 });
 ```
 
-#### Toast with Title
-
-```tsx
-toast({
-  title: "Success",
-  description: "Your changes have been saved successfully.",
-});
-```
-
-#### Toast with Variant
+### Toast with Title and Variant
 
 ```tsx
 toast({
@@ -132,12 +122,10 @@ toast({
 });
 ```
 
-#### Toast with Action
+### Toast with Action
 
 ```tsx
-import { useToast, ToastAction } from "@eqtylab/equality";
-
-const { toast } = useToast();
+import { ToastAction } from "@eqtylab/equality";
 
 toast({
   title: "Action Required",
@@ -146,11 +134,9 @@ toast({
 });
 ```
 
-#### Updating a Toast
+### Updating a Toast
 
 ```tsx
-const { toast } = useToast();
-
 const toastInstance = toast({
   description: "Uploading...",
 });
@@ -162,11 +148,9 @@ toastInstance.update({
 });
 ```
 
-#### Dismissing a Toast
+### Dismissing a Toast
 
 ```tsx
-const { toast } = useToast();
-
 const toastInstance = toast({
   description: "Processing...",
 });

packages/ui/src/components/toast/toast-components.module.css

@@ -23,19 +23,19 @@
 .toast--default {
   --mix-color: var(--color-brand-primary);
   --hover-darken: 50%;
-  @apply border-brand-primary text-brand-primary bg-mixed-dark;
+  @apply border-badge-text-primary bg-badge-background-primary text-badge-text-primary;
 }
 
 .toast--danger {
-  @apply border-red-400 bg-red-800 text-red-400;
+  @apply border-badge-text-danger bg-badge-background-danger text-badge-text-danger;
 }
 
 .toast--warning {
-  @apply border-yellow-400 bg-yellow-800 text-yellow-400;
+  @apply border-badge-text-warning bg-badge-background-warning text-badge-text-warning;
 }
 
 .toast--success {
-  @apply border-emerald-400 bg-emerald-800 text-emerald-400;
+  @apply border-badge-text-success bg-badge-background-success text-badge-text-success;
 }
 
 .toast-action {
@@ -86,5 +86,5 @@
 }
 
 .toast-description {
-  @apply text-text-secondary text-sm;
+  @apply text-sm;
 }

packages/ui/src/components/toast/toast.module.css

@@ -7,3 +7,7 @@
 .toast-action {
   @apply mt-2 flex justify-end gap-1;
 }
+
+.toast-title-container {
+  @apply flex gap-2;
+}

packages/ui/src/components/toast/toast.tsx

@@ -1,3 +1,4 @@
+import { Icon } from '@/components/icon/icon';
 import {
   ToastClose,
   ToastContainer,
@@ -14,12 +15,33 @@ interface ToastProps {
 }
 
 const Toast = ({ toast }: ToastProps) => {
-  const { id, title, description, action, ...props } = toast;
+  const { id, title, description, action, icon, variant, ...props } = toast;
+
+  // Default icons based on variant
+  const getDefaultIcon = () => {
+    switch (variant) {
+      case 'success':
+        return 'Check';
+      case 'warning':
+        return 'AlertOctagon';
+      case 'danger':
+        return 'AlertTriangle';
+      default:
+        return 'Info';
+    }
+  };
+
+  const displayIcon = icon !== undefined ? icon : getDefaultIcon();
 
   return (
-    <ToastContainer {...props}>
+    <ToastContainer {...props} variant={variant}>
       <div className={styles['toast-copy']}>
-        {title && <ToastTitle>{title}</ToastTitle>}
+        {title && (
+          <div className={styles['toast-title-container']}>
+            {displayIcon && <Icon icon={displayIcon} size="sm" background="transparent" />}
+            <ToastTitle>{title}</ToastTitle>
+          </div>
+        )}
         {description && <ToastDescription>{description}</ToastDescription>}
       </div>
       {action && <div className={styles['toast-action']}>{action}</div>}

packages/ui/src/hooks/use-toast.ts

@@ -10,6 +10,7 @@ export type ToasterToast = ToastProps & {
   title?: React.ReactNode;
   description?: React.ReactNode;
   action?: ToastActionElement;
+  icon?: string | React.ReactElement;
 };
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars