CSS Design System

BuddyPress Stats uses a unified CSS design system for consistent styling across all admin pages and frontend components.

Design Principles

Consistency: Same classes produce same results everywhere
Responsiveness: All components work on mobile and desktop
Customization: Easy to override with specificity
Accessibility: Proper contrast and focus states

Color Palette

Status Colors

Variable	Color	Usage
–bp-stats-green	#10b981	Active, success, positive
–bp-stats-blue	#3b82f6	Info, links, neutral
–bp-stats-yellow	#f59e0b	Warning, at risk
–bp-stats-red	#ef4444	Error, dormant, negative
–bp-stats-gray	#6b7280	Inactive, disabled

Background Colors

Variable	Color	Usage
–bp-stats-bg-light	#f9fafb	Light backgrounds
–bp-stats-bg-card	#ffffff	Card backgrounds
–bp-stats-bg-dark	#1f2937	Dark mode backgrounds

Stat Cards

Basic Card


    Total Members
    1,234

Colored Cards


    Active Today
    150



    Active This Week
    450

Health Bar


    
        Active 45%
    
    
        At Risk 25%
    
    
        Dormant 15%
    
    
        Inactive 15%

Charts

Default chart color palette: primary (#3b82f6), secondary (#10b981), tertiary (#f59e0b), quaternary (#ef4444)

Tables


    
        
            User
            Activity
            Date
        
    
    
        
            John Doe
            Posted update
            2024-01-15

User	Activity	Date
John Doe	Posted update	2024-01-15

Buttons

Loading States

Responsive Design

Breakpoints

Mobile: max-width 640px – 1 column grid
Tablet: 641px – 1024px – 2 column grid
Desktop: 1025px+ – 4 column grid

Customization

Override Variables

:root {
    --bp-stats-green: #22c55e; /* Custom green */
    --bp-stats-blue: #0ea5e9;  /* Custom blue */
}

Theme Integration

/* Match theme styling */
.bp-stats-stat-card {
    font-family: inherit;
    background: var(--theme-card-bg, #ffffff);
    border-radius: var(--theme-radius, 8px);
}