@lilith/ui-themes

Theme-specific component variants and design tokens for Luxe (premium/elegant) and Lilith (mystical/cyberpunk) themes.

Features

• Luxe Theme - premium, elegant design with serif typography and gold accents
• Lilith Theme - mystical, cyberpunk design with deep reds/purples and bronze accents
• Design tokens - colors, typography, spacing, shadows, transitions
• Global styles - theme-specific CSS resets and base styles
• Theme-specific components - components styled for each theme
• Theme hooks - utilities for working with themes

Installation

pnpm add @lilith/ui-themes

Peer Dependencies

{
  "react": "^18.0.0",
  "react-dom": "^18.0.0",
  "styled-components": "^6.0.0"
}

Usage

Luxe Theme

Premium, elegant theme with serif headings and refined aesthetics:

import { ThemeProvider } from 'styled-components';
import { luxeTheme, LuxeGlobalStyles } from '@lilith/ui-themes';

function App() {
  return (
    <ThemeProvider theme={luxeTheme}>
      <LuxeGlobalStyles />
      <YourApp />
    </ThemeProvider>
  );
}

Lilith Theme

Mystical, cyberpunk theme with bold visuals:

import { ThemeProvider } from 'styled-components';
import { lilithTheme, LilithGlobalStyles } from '@lilith/ui-themes';

function App() {
  return (
    <ThemeProvider theme={lilithTheme}>
      <LilithGlobalStyles />
      <YourApp />
    </ThemeProvider>
  );
}

Using Theme Tokens

Access theme tokens in styled components:

import styled from 'styled-components';

const StyledCard = styled.div`
  background: ${(props) => props.theme.colors.surface};
  border-radius: ${(props) => props.theme.borderRadius.md};
  padding: ${(props) => props.theme.spacing.lg};
  box-shadow: ${(props) => props.theme.shadows.md};
  font-family: ${(props) => props.theme.typography.fontFamily.body};
`;

Namespace Imports

Access all theme exports via namespace:

import { luxe, lilith } from '@lilith/ui-themes';

// Use theme tokens
const theme = luxe.luxeTheme;
const colors = luxe.colors;

// Use components
const Button = luxe.LuxeButton;

Theme Tokens

Both themes export consistent token categories:

import {
  // Luxe theme
  luxeTheme,
  colors as luxeColors,
  typography as luxeTypography,
  spacing,
  borderRadius,
  shadows,
  transitions,
  zIndices,
  breakpoints,
  containers,

  // Lilith theme
  lilithTheme,
  gradients, // Lilith-specific
} from '@lilith/ui-themes';

Theme Design Philosophy

Luxe Theme

• Philosophy: Premium, refined, elegant
• Colors: Cream backgrounds, gold accents, black text, rose highlights
• Typography: Playfair Display (serif) for headings, Inter (sans-serif) for body
• Sizing: Fluid, responsive sizing with clamp()

Lilith Theme

• Philosophy: Power, mystique, sensuality
• Colors: Deep blacks/purples, crimson reds, bronze/gold accents, warm neutrals
• Typography: Bold, commanding headings with elegant body text
• Effects: Gradients, glows, dramatic shadows

API Reference

luxeTheme / lilithTheme

Complete theme object for styled-components:

interface Theme {
  colors: {
    primary: string;
    secondary: string;
    background: string;
    surface: string;
    text: {
      primary: string;
      secondary: string;
      muted: string;
    };
    border: string;
    success: string;
    warning: string;
    error: string;
    // ... theme-specific colors
  };
  typography: {
    fontFamily: {
      heading: string;
      body: string;
      mono: string;
    };
    fontSize: {
      xs: string;
      sm: string;
      md: string;
      lg: string;
      xl: string;
      '2xl': string;
      // ...
    };
    fontWeight: {
      normal: number;
      medium: number;
      semibold: number;
      bold: number;
    };
    lineHeight: {
      tight: number;
      normal: number;
      relaxed: number;
    };
  };
  spacing: {
    xs: string;
    sm: string;
    md: string;
    lg: string;
    xl: string;
    '2xl': string;
    // ...
  };
  borderRadius: {
    none: string;
    sm: string;
    md: string;
    lg: string;
    xl: string;
    full: string;
  };
  shadows: {
    none: string;
    sm: string;
    md: string;
    lg: string;
    xl: string;
  };
  transitions: {
    fast: string;
    normal: string;
    slow: string;
  };
  zIndices: {
    base: number;
    dropdown: number;
    sticky: number;
    modal: number;
    tooltip: number;
  };
  breakpoints: {
    sm: string;
    md: string;
    lg: string;
    xl: string;
    '2xl': string;
  };
  containers: {
    sm: string;
    md: string;
    lg: string;
    xl: string;
  };
}

Global Styles

Reset and base styles for each theme:

// Luxe global styles
import { LuxeGlobalStyles } from '@lilith/ui-themes';

// Lilith global styles
import { LilithGlobalStyles } from '@lilith/ui-themes';

Gradients (Lilith Theme)

Lilith theme includes gradient tokens:

import { gradients } from '@lilith/ui-themes';

const StyledHero = styled.div`
  background: ${gradients.primary};
`;

Types

import type { LuxeTheme } from '@lilith/ui-themes';
import type { LilithTheme } from '@lilith/ui-themes';

Switching Themes

Implement theme switching in your app:

import { useState } from 'react';
import { ThemeProvider } from 'styled-components';
import { luxeTheme, LuxeGlobalStyles, lilithTheme, LilithGlobalStyles } from '@lilith/ui-themes';

function App() {
  const [themeName, setThemeName] = useState<'luxe' | 'lilith'>('luxe');

  const theme = themeName === 'luxe' ? luxeTheme : lilithTheme;
  const GlobalStyles = themeName === 'luxe' ? LuxeGlobalStyles : LilithGlobalStyles;

  return (
    <ThemeProvider theme={theme}>
      <GlobalStyles />
      <button onClick={() => setThemeName(themeName === 'luxe' ? 'lilith' : 'luxe')}>
        Switch Theme
      </button>
      <YourApp />
    </ThemeProvider>
  );
}

License

MIT