feat: hero variants, block colors, theme preview & CSS var sync #95

2026-03-26T17:50:15Z

jmiller-moko commented

2026-03-26 17:50:15 +00:00

(Migrated from github.com)

Summary

Hero Variant System: .hero#primary and .hero#secondary CSS variants with 6 new CSS variables per theme (bg-color, overlay, text color)
Block Color System: Automatic :nth-child() slot palette for top-a, top-b, bottom-a, bottom-b module positions with named per-module overrides (#block-highlight, #block-cta, #block-alert)
Theme Preview Tab: New admin configuration tab embedding theme-test.html in an iframe for live CSS variable preview with light/dark toggle
CSS Variable Sync on Upgrade: script.php + sync_custom_vars.php — detects missing variables in user custom palettes and injects them automatically on template update (Joomla 5/6 compatible)
Theme Test Sheet: Standalone HTML page with color swatches, typography, buttons, cards, forms, alerts, hero demos, block color demos, and gradient color test image

Files Changed

src/media/css/template.css — hero variant + block color CSS rules
src/templates/light.custom.css / dark.custom.css — new CSS variables
src/templates/theme-test.html — visual test page (new)
src/script.php — Joomla install/update lifecycle script (new)
src/sync_custom_vars.php — CSS variable sync utility (new)
src/templateDetails.xml — Theme Preview fieldset, hero/block note fields, scriptfile registration
src/language/en-GB/ + en-US/ — language strings for new admin fields
docs/CSS_VARIABLES.md — full variable documentation
CHANGELOG.md — version 03.09.02 entry

Test plan

Verify .hero#primary and .hero#secondary render correctly in light and dark modes
Verify block color slots 1–4 apply to modules in top-a, top-b, bottom-a, bottom-b
Verify #block-highlight ID override wins over :nth-child() without !important
Open theme-test.html standalone — verify all swatches, hero demos, block demos render
Open Joomla admin → Template Options → verify "Theme Preview" tab shows embedded iframe
Run php sync_custom_vars.php --dry-run — verify it reports missing variables correctly
Deploy template update on test site — verify script.php auto-syncs new variables into existing custom palettes
Test on Clarksville Furs dev environment with 1, 2, 3, and 4 module configurations

🤖 Generated with Claude Code

Closes #99

## Summary - **Hero Variant System**: `.hero#primary` and `.hero#secondary` CSS variants with 6 new CSS variables per theme (bg-color, overlay, text color) - **Block Color System**: Automatic `:nth-child()` slot palette for `top-a`, `top-b`, `bottom-a`, `bottom-b` module positions with named per-module overrides (`#block-highlight`, `#block-cta`, `#block-alert`) - **Theme Preview Tab**: New admin configuration tab embedding `theme-test.html` in an iframe for live CSS variable preview with light/dark toggle - **CSS Variable Sync on Upgrade**: `script.php` + `sync_custom_vars.php` — detects missing variables in user custom palettes and injects them automatically on template update (Joomla 5/6 compatible) - **Theme Test Sheet**: Standalone HTML page with color swatches, typography, buttons, cards, forms, alerts, hero demos, block color demos, and gradient color test image ## Files Changed - `src/media/css/template.css` — hero variant + block color CSS rules - `src/templates/light.custom.css` / `dark.custom.css` — new CSS variables - `src/templates/theme-test.html` — visual test page (new) - `src/script.php` — Joomla install/update lifecycle script (new) - `src/sync_custom_vars.php` — CSS variable sync utility (new) - `src/templateDetails.xml` — Theme Preview fieldset, hero/block note fields, scriptfile registration - `src/language/en-GB/` + `en-US/` — language strings for new admin fields - `docs/CSS_VARIABLES.md` — full variable documentation - `CHANGELOG.md` — version 03.09.02 entry ## Test plan - [ ] Verify `.hero#primary` and `.hero#secondary` render correctly in light and dark modes - [ ] Verify block color slots 1–4 apply to modules in `top-a`, `top-b`, `bottom-a`, `bottom-b` - [ ] Verify `#block-highlight` ID override wins over `:nth-child()` without `!important` - [ ] Open theme-test.html standalone — verify all swatches, hero demos, block demos render - [ ] Open Joomla admin → Template Options → verify "Theme Preview" tab shows embedded iframe - [ ] Run `php sync_custom_vars.php --dry-run` — verify it reports missing variables correctly - [ ] Deploy template update on test site — verify `script.php` auto-syncs new variables into existing custom palettes - [ ] Test on Clarksville Furs dev environment with 1, 2, 3, and 4 module configurations 🤖 Generated with [Claude Code](https://claude.com/claude-code) --- Closes #99

Pull request closed

This pull request cannot be reopened because the branch was deleted.

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: MokoConsulting/MokoCassiopeia#95