thrilltrack-explorer/src/hooks/useNovuTheme.ts

import { useTheme } from '@/components/theme/ThemeProvider';
import { useMemo } from 'react';

export function useNovuTheme() {
  const { theme } = useTheme();
  
  const appearance = useMemo(() => {
    // Get computed styles to access CSS variables
    const root = document.documentElement;
    const style = getComputedStyle(root);
    
    return {
      variables: {
        // Colors
        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: `var(--radius)`,
        
        // Font
        fontFamily: style.getPropertyValue('font-family') || 'inherit',
        fontSize: '14px',
      },
      elements: {
        bellContainer: {
          width: '40px',
          height: '40px',
        },
        bell: {
          width: '20px',
          height: '20px',
          color: `hsl(var(--foreground))`,
        },
        bellDot: {
          backgroundColor: `hsl(var(--primary))`,
        },
        popover: {
          boxShadow: `var(--shadow-card)`,
          border: `1px solid hsl(var(--border))`,
          borderRadius: `calc(var(--radius) + 4px)`,
        },
        notificationItem: {
          transition: 'var(--transition-smooth)',
          '&:hover': {
            backgroundColor: `hsl(var(--muted) / 0.5)`,
          },
        },
        notificationItemRead: {
          opacity: '0.7',
        },
        notificationItemUnread: {
          backgroundColor: `hsl(var(--muted) / 0.3)`,
          borderLeft: `3px solid hsl(var(--primary))`,
        },
        notificationDot: {
          backgroundColor: `hsl(var(--primary))`,
          width: '8px',
          height: '8px',
        },
        notificationTitle: {
          fontWeight: '500',
          color: `hsl(var(--foreground))`,
        },
        notificationDescription: {
          color: `hsl(var(--muted-foreground))`,
        },
        notificationTimestamp: {
          fontSize: '12px',
          color: `hsl(var(--muted-foreground))`,
        },
        notificationPrimaryAction: {
          backgroundColor: `hsl(var(--primary))`,
          color: `hsl(var(--primary-foreground))`,
          borderRadius: `var(--radius)`,
          padding: '8px 16px',
          transition: 'var(--transition-smooth)',
          '&:hover': {
            opacity: '0.9',
          },
        },
        notificationSecondaryAction: {
          backgroundColor: `hsl(var(--secondary))`,
          color: `hsl(var(--secondary-foreground))`,
          borderRadius: `var(--radius)`,
          padding: '8px 16px',
          transition: 'var(--transition-smooth)',
          '&:hover': {
            backgroundColor: `hsl(var(--secondary) / 0.8)`,
          },
        },
        loader: {
          color: `hsl(var(--primary))`,
        },
        emptyNotifications: {
          color: `hsl(var(--muted-foreground))`,
          textAlign: 'center',
          padding: '32px 16px',
        },
        header: {
          borderBottom: `1px solid hsl(var(--border))`,
          padding: '16px',
        },
        headerTitle: {
          fontSize: '16px',
          fontWeight: '600',
          color: `hsl(var(--foreground))`,
        },
        footer: {
          borderTop: `1px solid hsl(var(--border))`,
          padding: '12px 16px',
        },
      },
    };
  }, [theme]);
  
  return appearance;
}