mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-07 02:15:38 +00:00
George Cushen
04f3b2e8ae
Modern re-design of the main Resume block. Awards block icons are no longer tied to the 'brands' pack - any pack can be used and specified in the form `icon: <pack>/<icon> Refactor Tailwind CSS theming to support full primary/secondary palettes Refactors the theme system to correctly apply primary and secondary color palettes from theme packs. Previously, Tailwind's build-time resolution of CSS variables in the `@theme` block caused theme pack colors to be overridden by the default blue theme. This commit resolves the issue by adopting a best-practice, two-layer token system: 1. All theme packs now define `--hb-primary-*-rgb` and `--hb-secondary-*-rgb` variables with raw RGB values. 2. The core `theme.css` now defines `--color-primary-*` and `--color-secondary-*` inside the `@theme` block using a `rgb(var(...))` function. This makes Tailwind aware of the themeable color names so it can generate all necessary utilities (`bg-`, `text-`, `ring-`, etc.) while ensuring the final color value is resolved in the browser at runtime. This change fixes the build error related to unknown utility classes (e.g., `ring-primary-500`) and ensures that the selected theme pack is correctly applied across all components.
Hugo Blox Tailwind CSS v4 Color System
Architecture Overview
This system leverages Tailwind CSS v4's automatic utility generation to provide a comprehensive color system with minimal code.
How It Works
-
Theme Configuration (
config/theme.css)- Colors defined in
@themeblock automatically generate ALL utilities - Includes standard Tailwind colors: gray, slate, zinc, neutral, stone
- Includes themeable colors: primary, secondary
- Colors defined in
-
Theme Files (
themes/*.css)- Small files that override
--color-primary-*and--color-secondary-*variables - Users switch themes by loading different theme CSS files
- No utilities redefined - just color values changed
- Small files that override
-
Custom Utilities (
color-utilities.css)- Only 42 lines vs previous 1,228 lines!
- Contains only custom colors not auto-generated (like
hb-dark)
Available Colors
Standard Colors (always available):
gray-*- Neutral graysslate-*- Cool grayszinc-*- True graysneutral-*- Pure graysstone-*- Warm grays
Themeable Colors (vary by theme):
primary-*- Main theme colorsecondary-*- Accent theme color
Custom Colors:
hb-dark- Hugo Blox brand dark color
Auto-Generated Utilities
For every color defined in @theme, Tailwind automatically creates:
- Background:
bg-{color}-{shade} - Text:
text-{color}-{shade} - Border:
border-{color}-{shade} - Hover:
hover:bg-{color}-{shade},hover:text-{color}-{shade} - Dark mode:
dark:bg-{color}-{shade},dark:text-{color}-{shade} - Gradients:
from-{color}-{shade},to-{color}-{shade} - Focus rings:
focus:ring-{color}-{shade} - All other Tailwind color variants
Shades Available
All colors include 11 shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
Usage Examples
<!-- Standard colors (always available) -->
<div class="bg-gray-100 dark:bg-gray-800">...</div>
<div class="text-slate-700 hover:text-slate-900">...</div>
<!-- Themeable colors (change with theme) -->
<div class="bg-primary-500 hover:bg-primary-600">...</div>
<div class="bg-gradient-to-r from-primary-600 to-secondary-600">...</div>
<!-- Custom colors -->
<div class="bg-hb-dark text-white">...</div>
Benefits
- Dramatically Reduced File Size: 1,228 lines → 42 lines (97% reduction!)
- Automatic Generation: No manual utility definitions needed
- Maintainable: Add new colors just by defining them in
@theme - Consistent: All Tailwind variants automatically available
- Themeable: Easy theme switching via CSS variable overrides
Adding New Colors
To add a new color scale:
-
Define in
config/theme.css:--color-brand-500: 59 130 246; --color-brand-600: 37 99 235; /* etc. */ -
Tailwind automatically generates all utilities:
bg-brand-500,text-brand-600,hover:bg-brand-500, etc.
No manual utility definitions required!