Frontend Styling Guide

Styling Guide

Overview

This document outlines the styling system used in the NutriHub frontend application. The system is built on top of Tailwind CSS and custom CSS components, with support for both light and dark themes.

Theme System

Theme Variables

The application uses CSS variables for consistent theming across components. There are two main themes:

1. Dark Theme (Default)

   • Dark backgrounds with light text
   • Blue accent colors
   • Deep shadows

2. Light Theme
   • Light yellowish backgrounds
   • Green navbar/footer
   • Lighter shadows

Theme Toggle

The theme can be toggled using the ThemeToggle component. The theme class light-theme is applied to the root element when in light mode.

Component Classes

Card Component

.nh-card {
  background-color: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
  overflow: hidden;
  border: 1px solid var(--color-gray-800);
}

Button Components

.nh-button {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-weight: 500;
  transition: all 0.2s ease;
}

/* Button variants */
.nh-button-primary .nh-button-secondary .nh-button-outline .nh-button-lg;

Typography

.nh-title .nh-title-lg .nh-subtitle .nh-text .nh-text-light;

Layout Components

.nh-container .nh-grid .nh-navbar .nh-footer;

Usage Examples

Card Usage

<div className="nh-card">
  <h3 className="nh-subtitle">Card Title</h3>
  <p className="nh-text">Card content</p>
</div>

Button Usage

<button className="nh-button nh-button-primary">
  Primary Button
</button>

<button className="nh-button nh-button-secondary">
  Secondary Button
</button>

<button className="nh-button nh-button-outline">
  Outline Button
</button>

Typography Usage

<h1 className="nh-title-lg">Large Title</h1>
<h2 className="nh-title">Regular Title</h2>
<h3 className="nh-subtitle">Subtitle</h3>
<p className="nh-text">Regular text</p>
<p className="nh-text-light">Light text</p>

Layout Usage

<div className="nh-container">
  <div className="nh-grid">{/* Grid items */}</div>
</div>

Best Practices

1. Consistent Spacing

   • Use the predefined spacing variables (--space-*)
   • Example: padding: var(--space-4)

2. Responsive Design

   • Use Tailwind's responsive prefixes (md:, lg:, etc.)
   • Example: className="flex flex-col md:flex-row"

3. Theme Awareness

   • Always consider both light and dark themes
   • Use theme variables for colors
   • Example: color: var(--color-light)

4. Component Composition

   • Combine utility classes with component classes
   • Example: className="nh-card flex items-center"

Theme Variables Reference

Colors

--color-primary
--color-primary-hover
--color-bg-primary
--color-bg-secondary
--color-bg-tertiary
--color-dark
--color-light

Spacing

--space-1: 0.25rem
--space-2: 0.5rem
--space-4: 1rem
--space-6: 1.5rem
--space-8: 2rem

Border Radius

--radius-sm: 0.125rem
--radius-md: 0.375rem
--radius-lg: 0.5rem

Shadows

--shadow-sm
--shadow-md
--shadow-lg

Example Components

Navbar

<nav className="nh-navbar">
  <div className="nh-container">{/* Navbar content */}</div>
</nav>

Footer

<footer className="nh-footer">
  <div className="nh-container">{/* Footer content */}</div>
</footer>

Grid Layout

<div className="nh-grid">
  <div className="nh-card">{/* Card content */}</div>
  {/* More cards */}
</div>

Notes

• Always use the provided component classes for consistency
• Custom styles should be added sparingly and only when necessary
• Test components in both light and dark themes
• Use Tailwind utilities for layout and spacing when appropriate