Color Utilities

AutoCSS uses a semantic color system with text and background color classes. Add these to your styles.css in Bricks Child Theme:

/* colors.css */
:root {
  --primary: #3b82f6;    /* Blue */
  --secondary: #6366f1;  /* Indigo */
  --success: #22c55e;    /* Green */
  --warning: #f59e0b;    /* Amber */
  --danger: #ef4444;     /* Red */
  --info: #06b6d4;       /* Cyan */
  --light: #f8f9fa;      /* Off-white */
  --dark: #1e293b;       /* Dark blue-gray */
  --muted: #64748b;      /* Gray */
  --white: #ffffff;      /* Pure white */
}

Available Color Classes

Type	Class Format	Example Usage
Text Color	.text-{color}	<p class="text-primary">
Background	.bg-{color}	<div class="bg-success">
Hover	.hover:bg-{color}	<button class="hover:bg-danger">

Color Palette

Color Class	Default Value	Typical Usage
primary	Blue	Main CTAs, key elements
secondary	Indigo	Secondary buttons, accents
success	Green	Positive status, checkmarks
warning	Amber	Alerts, warnings
danger	Red	Errors, destructive actions
info	Cyan	Informational messages
light	Off-white	Light backgrounds
dark	Dark blue-gray	Dark text/backgrounds
muted	Gray	Secondary text
white	Pure white	Light elements on dark bg

Usage Examples

<!-- Text colors -->
<p class="text-primary">Important content</p>
<span class="text-muted">Secondary information</span>

<!-- Background c/prisolors -->
<div class="bg-dark text-white">Contrast section</div>
<button class="bg-primary hover:bg-secondary text-white">Hover me</button>

<!-- Combined utilities -->
<div class="bg-warning text-dark font-bold p-4">
  Warning message
</div>

Customization in Bricks Child

1. Open wp-content/themes/bricks-child/styles.css
2. Override default colors by adding:

:root {
  --primary: #your-color-hex;
  --secondary: #your-color-hex;
  /* ... other color variables ... */
}

Best Practices

1. Use semantic colors (success=green, danger=red)
2. Maintain contrast ratios (WCAG 2.1 AA)
3. Combine with text utilities:

<div class="bg-dark text-light p-4">

4. Use hover states for interactive elements:

<a class="text-primary hover:text-secondary">

Technical Notes

• Colors use CSS custom properties for easy theming
• Built with opacity control (add -50 suffix for 50% opacity)

<div class="bg-primary-50 text-dark">

• Automatically handles light/dark mode when configured
• Works with Bricks Builder’s native styling system

Extended Usage (Add to styles.css)

/* Opacity variants */
.bg-primary-50 { background-color: rgba(var(--primary), 0.5) }
.text-danger-50 { color: rgba(var(--danger), 0.5) }

/* Gradient backgrounds */
.bg-gradient-primary {
  background: linear-gradient(45deg, var(--primary), var(--secondary));
}