thrilltrack-explorer/src/hooks/useNovuTheme.ts

import { useMemo } from 'react';

export function useNovuTheme() {
  const appearance = useMemo(() => {
    return {
      variables: {
        // Colors - using semantic tokens
        colorBackground: `hsl(var(--background))`,
        colorForeground: `hsl(var(--foreground))`,
        colorPrimary: `hsl(var(--primary))`,
        colorPrimaryForeground: `hsl(var(--primary-foreground))`,
        colorSecondary: `hsl(var(--secondary))`,
        colorSecondaryForeground: `hsl(var(--secondary-foreground))`,
        colorCounter: `hsl(var(--primary))`,
        colorCounterForeground: `hsl(var(--primary-foreground))`,
        
        // Notification item colors
        colorNeutral: `hsl(var(--muted))`,
        colorNeutralForeground: `hsl(var(--muted-foreground))`,
        
        // Border and divider
        colorBorder: `hsl(var(--border))`,
        
        // Border radius
        borderRadius: `calc(var(--radius) + 2px)`,
        
        // Typography
        fontFamily: 'Inter, system-ui, -apple-system, sans-serif',
        fontSize: '14px',
        fontWeightRegular: '400',
        fontWeightMedium: '500',
        fontWeightBold: '600',
        lineHeight: '1.5',
      },
      elements: {
        bellContainer: {
          width: '36px',
          height: '36px',
        },
        bell: {
          width: '20px',
          height: '20px',
          color: `hsl(var(--foreground))`,
        },
        bellDot: {
          backgroundColor: `hsl(var(--primary))`,
          width: '8px',
          height: '8px',
          boxShadow: `0 0 8px hsl(var(--primary) / 0.5)`,
        },
        popover: {
          width: '400px',
          maxWidth: '90vw',
          maxHeight: '600px',
          boxShadow: `var(--shadow-card)`,
          border: `1px solid hsl(var(--border))`,
          borderRadius: `calc(var(--radius) + 4px)`,
          backgroundColor: `hsl(var(--background))`,
          overflow: 'hidden',
        },
        notificationList: {
          maxHeight: '480px',
          overflowY: 'auto',
        },
        notificationItem: {
          padding: '16px',
          borderBottom: `1px solid hsl(var(--border) / 0.5)`,
          transition: 'var(--transition-smooth)',
          cursor: 'pointer',
        },
        notificationItemRead: {
          opacity: '0.65',
          backgroundColor: `hsl(var(--muted) / 0.2)`,
        },
        notificationItemUnread: {
          backgroundColor: `hsl(var(--muted) / 0.4)`,
          borderLeft: `4px solid hsl(var(--primary))`,
          fontWeight: '500',
        },
        notificationDot: {
          backgroundColor: `hsl(var(--primary))`,
          width: '10px',
          height: '10px',
          borderRadius: '50%',
          boxShadow: `0 0 6px hsl(var(--primary) / 0.6)`,
        },
        notificationTitle: {
          fontSize: '15px',
          fontWeight: '600',
          lineHeight: '1.4',
          color: `hsl(var(--foreground))`,
          marginBottom: '4px',
        },
        notificationDescription: {
          fontSize: '14px',
          lineHeight: '1.5',
          color: `hsl(var(--muted-foreground))`,
          marginBottom: '8px',
        },
        notificationTimestamp: {
          fontSize: '12px',
          color: `hsl(var(--muted-foreground))`,
          fontWeight: '400',
        },
        notificationPrimaryAction: {
          backgroundColor: `hsl(var(--primary))`,
          color: `hsl(var(--primary-foreground))`,
          borderRadius: `var(--radius)`,
          padding: '10px 20px',
          fontSize: '14px',
          fontWeight: '500',
          border: 'none',
          transition: 'var(--transition-smooth)',
          cursor: 'pointer',
        },
        notificationSecondaryAction: {
          backgroundColor: `hsl(var(--secondary))`,
          color: `hsl(var(--secondary-foreground))`,
          borderRadius: `var(--radius)`,
          padding: '10px 20px',
          fontSize: '14px',
          fontWeight: '500',
          border: 'none',
          transition: 'var(--transition-smooth)',
          cursor: 'pointer',
        },
        loader: {
          color: `hsl(var(--primary))`,
          width: '32px',
          height: '32px',
        },
        emptyNotifications: {
          color: `hsl(var(--muted-foreground))`,
          textAlign: 'center',
          padding: '48px 24px',
          fontSize: '15px',
          lineHeight: '1.6',
        },
        header: {
          borderBottom: `1px solid hsl(var(--border))`,
          padding: '16px 20px',
          backgroundColor: `hsl(var(--muted) / 0.3)`,
        },
        headerTitle: {
          fontSize: '17px',
          fontWeight: '600',
          color: `hsl(var(--foreground))`,
          letterSpacing: '-0.01em',
        },
        headerMarkAllAsReadButton: {
          fontSize: '13px',
          color: `hsl(var(--primary))`,
          fontWeight: '500',
          cursor: 'pointer',
          transition: 'var(--transition-smooth)',
        },
        footer: {
          borderTop: `1px solid hsl(var(--border))`,
          padding: '12px 20px',
          backgroundColor: `hsl(var(--muted) / 0.3)`,
        },
        footerViewAllButton: {
          fontSize: '14px',
          color: `hsl(var(--primary))`,
          fontWeight: '500',
          cursor: 'pointer',
          transition: 'var(--transition-smooth)',
        },
      },
    } as const;
  }, []);
  
  return appearance;
}