MillerByte

All components use CSS variables for styling, making it easy to customize colors, spacing, and other visual properties to match your app's design system.

Importing Styles

Import the package styles in your app entry point:

// In your main.tsx or App.tsx
import "@millerbyte/react-logging/styles.css";

CSS Variables

Override these variables in your app's CSS to customize the appearance:

Color Variables

:root {
  /* Primary brand color */
  --mb-color-primary: hsl(217 91% 60%);
  --mb-color-primary-hover: hsl(217 91% 50%);
  
  /* Surface colors */
  --mb-color-surface: hsl(210 40% 98%);
  --mb-color-surface-elevated: hsl(0 0% 100%);
  
  /* Text colors */
  --mb-color-text: hsl(222 47% 11%);
  --mb-color-text-muted: hsl(215 16% 47%);
  
  /* Status colors */
  --mb-color-success: hsl(142 76% 36%);
  --mb-color-warning: hsl(38 92% 50%);
  --mb-color-error: hsl(0 84% 60%);
  --mb-color-info: hsl(199 89% 48%);
  
  /* Border colors */
  --mb-color-border: hsl(214 32% 91%);
  --mb-color-border-hover: hsl(214 32% 80%);
}

Spacing Variables

:root {
  --mb-spacing-xs: 0.25rem;
  --mb-spacing-sm: 0.5rem;
  --mb-spacing-md: 1rem;
  --mb-spacing-lg: 1.5rem;
  --mb-spacing-xl: 2rem;
}

Border Radius

:root {
  --mb-radius-sm: 0.25rem;
  --mb-radius-md: 0.5rem;
  --mb-radius-lg: 0.75rem;
  --mb-radius-full: 9999px;
}

Typography

:root {
  --mb-font-family: system-ui, -apple-system, sans-serif;
  --mb-font-size-sm: 0.875rem;
  --mb-font-size-base: 1rem;
  --mb-font-size-lg: 1.125rem;
}

Dark Mode

The package includes dark mode support. Override variables with a dark theme:

/* Dark mode overrides */
[data-theme="dark"],
.dark {
  --mb-color-primary: hsl(217 91% 65%);
  --mb-color-surface: hsl(222 47% 11%);
  --mb-color-surface-elevated: hsl(222 47% 15%);
  --mb-color-text: hsl(210 40% 98%);
  --mb-color-text-muted: hsl(215 20% 65%);
  --mb-color-border: hsl(215 28% 17%);
}

/* Or use media query for system preference */
@media (prefers-color-scheme: dark) {
  :root {
    --mb-color-surface: hsl(222 47% 11%);
    /* ... other dark mode overrides */
  }
}

Component-Specific Overrides

Target specific components with class selectors:

/* Custom table styling */
.mb-table {
  --mb-color-border: hsl(220 13% 91%);
}

.mb-table th {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Custom badge colors */
.mb-badge--success {
  --mb-color-success: hsl(142 76% 36%);
  background: hsl(142 76% 36% / 0.1);
}

/* Custom button styling */
.mb-button {
  transition: all 150ms ease;
}

.mb-button:hover {
  transform: translateY(-1px);
}

Integration with Tailwind CSS

If you're using Tailwind CSS, you can map the logging variables to your Tailwind theme:

:root {
  /* Map to Tailwind colors */
  --mb-color-primary: theme('colors.blue.500');
  --mb-color-surface: theme('colors.slate.50');
  --mb-color-text: theme('colors.slate.900');
  --mb-color-border: theme('colors.slate.200');
}

.dark {
  --mb-color-primary: theme('colors.blue.400');
  --mb-color-surface: theme('colors.slate.900');
  --mb-color-text: theme('colors.slate.100');
  --mb-color-border: theme('colors.slate.700');
}

CSS Classes Reference

Key CSS classes used by components:

Class	Description
`.mb-root`	Root container for all components
`.mb-section`	Section wrapper with padding
`.mb-table`	Data table
`.mb-table-wrapper`	Scrollable table container
`.mb-table-row`	Clickable table row
`.mb-pagination`	Pagination controls
`.mb-button`	Button base class
`.mb-button-outline`	Outlined button variant
`.mb-badge`	Status badge
`.mb-badge--success`	Success badge variant
`.mb-badge--warning`	Warning badge variant
`.mb-badge--error`	Error badge variant
`.mb-select`	Select dropdown
`.mb-input`	Text input
`.mb-state`	Loading/empty/error state container
`.mb-muted`	Muted text color

Complete Theme Example

/* Custom theme for your app */
:root {
  /* Brand colors */
  --mb-color-primary: #6366f1;
  --mb-color-primary-hover: #4f46e5;
  
  /* Surfaces */
  --mb-color-surface: #fafafa;
  --mb-color-surface-elevated: #ffffff;
  
  /* Text */
  --mb-color-text: #18181b;
  --mb-color-text-muted: #71717a;
  
  /* Status */
  --mb-color-success: #22c55e;
  --mb-color-warning: #f59e0b;
  --mb-color-error: #ef4444;
  
  /* Borders */
  --mb-color-border: #e4e4e7;
  
  /* Spacing */
  --mb-spacing-md: 1rem;
  
  /* Radius */
  --mb-radius-md: 0.5rem;
}

/* Dark mode */
.dark {
  --mb-color-primary: #818cf8;
  --mb-color-surface: #18181b;
  --mb-color-surface-elevated: #27272a;
  --mb-color-text: #fafafa;
  --mb-color-text-muted: #a1a1aa;
  --mb-color-border: #3f3f46;
}

Theming