MokoConsulting/MokoCassiopeia
1
1
Fork 0
Code Issues 4 Pull Requests Actions Packages Releases 1 Activity

Release v03.09.02 — Hero Variants, Block Colors, Theme Preview & CSS Var Sync #99

New Issue
Closed
opened 2026-03-26 19:34:30 +00:00 by jmiller-moko · 4 comments
jmiller-moko commented 2026-03-26 19:34:30 +00:00 (Migrated from github.com)
Copy Link

Version Branch: dev/03.09.01

PR: #95
Target: main

Release Summary

Version 03.09.02 introduces the hero variant system, block color system, theme preview admin tab, and automatic CSS variable sync on template upgrade.

Features Included

Hero Variant System

  • .hero#primary — light/welcoming treatment for homepages and landing pages
  • .hero#secondary — stronger contrast for inner pages, events, about
  • 6 CSS variables per theme (--hero-primary-bg-color, --hero-primary-overlay, --hero-primary-color, and secondary equivalents)

Block Color System

  • Automatic :nth-child() slot palette for top-a, top-b, bottom-a, bottom-b positions
  • 4 color slots with matching text variables
  • Named per-module overrides: #block-highlight, #block-cta, #block-alert
  • ID specificity wins over :nth-child() — no !important needed

Theme Preview Admin Tab

  • New "Theme Preview" tab in Joomla template configuration
  • Embeds theme-test.html in an iframe for live CSS variable preview
  • Light/dark toggle within the preview

CSS Variable Sync on Upgrade

  • script.php — Joomla install/update lifecycle script (Joomla 5/6 compatible)
  • sync_custom_vars.php — detects missing variables in user custom palettes, injects them on upgrade
  • CLI support: php sync_custom_vars.php --dry-run

Theme Test Sheet

  • Full branded Bootstrap 5 showcase with toggleable code samples
  • Color swatches, typography, buttons, badges, tables, forms, cards, progress bars
  • Hero variant and block color live demos
  • Computed CSS variable values displayed via JavaScript
  • Gradient color test image

Sub-Issues

  • Hero variant CSS rules in template.css
  • Block color :nth-child() rules in template.css
  • Named override rules (#block-highlight, #block-cta, #block-alert)
  • Hero + block variables in light.standard.css and dark.standard.css
  • Hero + block variables in light.custom.css and dark.custom.css starters
  • Theme Preview fieldset in templateDetails.xml
  • Language strings (en-GB + en-US) for hero variants, block colors, theme preview
  • script.php with preflight checks and CSS sync on update
  • sync_custom_vars.php CLI/library utility
  • theme-test.html with branded Bootstrap showcase and computed swatches
  • CSS_VARIABLES.md updated with full variable reference
  • CHANGELOG.md updated with 03.09.02 entry
  • Test on Clarksville Furs dev environment
  • Migrate existing #hero modules to class="hero" id="primary"

Files Changed

File Change
src/media/css/template.css Hero variant + block color CSS rules
src/media/css/theme/light.standard.css Hero + block variables (light)
src/media/css/theme/dark.standard.css Hero + block variables (dark)
src/templates/light.custom.css Hero + block variables (light starter)
src/templates/dark.custom.css Hero + block variables (dark starter)
src/templates/theme-test.html New — visual test page
src/script.php New — Joomla install/update script
src/sync_custom_vars.php New — CSS variable sync utility
src/templateDetails.xml Theme Preview tab, note fields, scriptfile, version bump
src/language/en-GB/tpl_mokocassiopeia.ini Language strings
src/language/en-US/tpl_mokocassiopeia.ini Language strings
docs/CSS_VARIABLES.md Variable docs + sync script usage
CHANGELOG.md 03.09.02 entry
## Version Branch: `dev/03.09.01` **PR:** #95 **Target:** `main` --- ## Release Summary Version 03.09.02 introduces the hero variant system, block color system, theme preview admin tab, and automatic CSS variable sync on template upgrade. --- ## Features Included ### Hero Variant System - `.hero#primary` — light/welcoming treatment for homepages and landing pages - `.hero#secondary` — stronger contrast for inner pages, events, about - 6 CSS variables per theme (`--hero-primary-bg-color`, `--hero-primary-overlay`, `--hero-primary-color`, and secondary equivalents) ### Block Color System - Automatic `:nth-child()` slot palette for `top-a`, `top-b`, `bottom-a`, `bottom-b` positions - 4 color slots with matching text variables - Named per-module overrides: `#block-highlight`, `#block-cta`, `#block-alert` - ID specificity wins over `:nth-child()` — no `!important` needed ### Theme Preview Admin Tab - New "Theme Preview" tab in Joomla template configuration - Embeds `theme-test.html` in an iframe for live CSS variable preview - Light/dark toggle within the preview ### CSS Variable Sync on Upgrade - `script.php` — Joomla install/update lifecycle script (Joomla 5/6 compatible) - `sync_custom_vars.php` — detects missing variables in user custom palettes, injects them on upgrade - CLI support: `php sync_custom_vars.php --dry-run` ### Theme Test Sheet - Full branded Bootstrap 5 showcase with toggleable code samples - Color swatches, typography, buttons, badges, tables, forms, cards, progress bars - Hero variant and block color live demos - Computed CSS variable values displayed via JavaScript - Gradient color test image --- ## Sub-Issues - [ ] Hero variant CSS rules in `template.css` - [ ] Block color `:nth-child()` rules in `template.css` - [ ] Named override rules (`#block-highlight`, `#block-cta`, `#block-alert`) - [ ] Hero + block variables in `light.standard.css` and `dark.standard.css` - [ ] Hero + block variables in `light.custom.css` and `dark.custom.css` starters - [ ] Theme Preview fieldset in `templateDetails.xml` - [ ] Language strings (en-GB + en-US) for hero variants, block colors, theme preview - [ ] `script.php` with preflight checks and CSS sync on update - [ ] `sync_custom_vars.php` CLI/library utility - [ ] `theme-test.html` with branded Bootstrap showcase and computed swatches - [ ] `CSS_VARIABLES.md` updated with full variable reference - [ ] `CHANGELOG.md` updated with 03.09.02 entry - [ ] Test on Clarksville Furs dev environment - [ ] Migrate existing `#hero` modules to `class="hero" id="primary"` --- ## Files Changed | File | Change | |---|---| | `src/media/css/template.css` | Hero variant + block color CSS rules | | `src/media/css/theme/light.standard.css` | Hero + block variables (light) | | `src/media/css/theme/dark.standard.css` | Hero + block variables (dark) | | `src/templates/light.custom.css` | Hero + block variables (light starter) | | `src/templates/dark.custom.css` | Hero + block variables (dark starter) | | `src/templates/theme-test.html` | **New** — visual test page | | `src/script.php` | **New** — Joomla install/update script | | `src/sync_custom_vars.php` | **New** — CSS variable sync utility | | `src/templateDetails.xml` | Theme Preview tab, note fields, scriptfile, version bump | | `src/language/en-GB/tpl_mokocassiopeia.ini` | Language strings | | `src/language/en-US/tpl_mokocassiopeia.ini` | Language strings | | `docs/CSS_VARIABLES.md` | Variable docs + sync script usage | | `CHANGELOG.md` | 03.09.02 entry |
jmiller-moko commented 2026-03-26 19:38:21 +00:00 (Migrated from github.com)
Copy Link

Branch: dev/03.09.01
PR: #95

This issue tracks all work for the v03.09.02 release. Sub-issues can be created and linked here as needed.

**Branch:** `dev/03.09.01` **PR:** #95 This issue tracks all work for the v03.09.02 release. Sub-issues can be created and linked here as needed.
jmiller-moko commented 2026-04-04 20:06:20 +00:00 (Migrated from github.com)
Copy Link

dev/03.09.01 Progress Update — 2026-04-04

Significant additions made to this branch beyond the original v03.09.02 features:

Accessibility Toolbar (new feature)

  • Floating a11y toolbar with 6 individually toggleable options: text resize, color inversion, high contrast, highlight links, readable font, pause animations
  • Each option has admin enable/disable toggle in Theme tab (showon conditional)
  • Visitor preferences persist in localStorage
  • Positioned above theme FAB to avoid overlap

Module Overrides — Complete Coverage

All 24 standard Joomla 5 site modules now have template overrides with showtitle support:

  • New this session: mod_stats, mod_feed, mod_wrapper, mod_whosonline, mod_users_latest, mod_articles_archive, mod_articles_categories, mod_banners, mod_languages, mod_random_image, mod_syndicate, mod_menu (default layout)

IcoMoon → Font Awesome 7 Compatibility

  • 80+ icon-* class mappings via CSS ::before pseudo-elements
  • System-wide — any Joomla core output using IcoMoon renders via FA7 Free

Other Fixes

  • TOC scoped to article body only (ignores page header/article titles)
  • TOC detects highest heading level + two levels deep
  • Dev mode auto-enables when Joomla debug is on
  • Custom palette descriptions note files survive updates
  • Footer modules stack full-width; dynamic padding for floating controls
  • Main menu link color fix in header
  • Back-to-top icon + anchor fix
  • mod_login count() on null fix

Blocked

  • Font Awesome 7 not loading on dev server — MokoStandards deploy skips vendor/ directory (#114)
## dev/03.09.01 Progress Update — 2026-04-04 Significant additions made to this branch beyond the original v03.09.02 features: ### Accessibility Toolbar (new feature) - Floating a11y toolbar with 6 individually toggleable options: text resize, color inversion, high contrast, highlight links, readable font, pause animations - Each option has admin enable/disable toggle in Theme tab (`showon` conditional) - Visitor preferences persist in localStorage - Positioned above theme FAB to avoid overlap ### Module Overrides — Complete Coverage All 24 standard Joomla 5 site modules now have template overrides with `showtitle` support: - **New this session:** mod_stats, mod_feed, mod_wrapper, mod_whosonline, mod_users_latest, mod_articles_archive, mod_articles_categories, mod_banners, mod_languages, mod_random_image, mod_syndicate, mod_menu (default layout) ### IcoMoon → Font Awesome 7 Compatibility - 80+ icon-* class mappings via CSS `::before` pseudo-elements - System-wide — any Joomla core output using IcoMoon renders via FA7 Free ### Other Fixes - TOC scoped to article body only (ignores page header/article titles) - TOC detects highest heading level + two levels deep - Dev mode auto-enables when Joomla debug is on - Custom palette descriptions note files survive updates - Footer modules stack full-width; dynamic padding for floating controls - Main menu link color fix in header - Back-to-top icon + anchor fix - mod_login count() on null fix ### Blocked - **Font Awesome 7 not loading** on dev server — MokoStandards deploy skips `vendor/` directory (#114)
jmiller-moko commented 2026-04-04 21:42:18 +00:00 (Migrated from github.com)
Copy Link

dev/03.09.01 Update — 2026-04-04 (Session 2)

New Features

Sidebar Accordion

  • Sidebar-left and sidebar-right modules now render as Bootstrap accordions at all breakpoints
  • Desktop: all panels open by default
  • Mobile: all panels collapsed by default
  • Users can toggle individual modules at any screen size

Search Module

  • Search bar in header position now stretches 100% width at all breakpoints
  • Desktop media query no longer constrains to min-width: 300px

Mobile Menu

  • Hamburger icon switched from Bootstrap SVG to Font Awesome fa-bars
  • Bootstrap collapse component now loaded for mobile menu toggle functionality
  • Navbar toggler color matches --mainmenu-nav-link-color

Fixes

Navigation

  • Main menu links in header forced to --mainmenu-nav-link-color via .container-header .nav-link
  • .container-nav a links now use navbar color variable
  • Back-to-top icon changed from IcoMoon to Font Awesome; id="top" anchor added to header

Icons

  • System-wide IcoMoon → Font Awesome 7 compatibility layer (80+ icon mappings)
  • All icon-* classes now render via FA7 Free ::before pseudo-elements

Layout

  • Blog items use flex: 1; height: 100% for equal-height cards in rows
  • "Read more" button pinned to bottom via margin-top: auto
  • Empty #system-message-container hidden with :empty selector
  • Sticky header confirmed disabled on mobile as intended

Blocked

  • Font Awesome 7 CSS not deployed — MokoStandards deploy skips vendor/ directory (#114)
## dev/03.09.01 Update — 2026-04-04 (Session 2) ### New Features **Sidebar Accordion** - Sidebar-left and sidebar-right modules now render as Bootstrap accordions at all breakpoints - Desktop: all panels open by default - Mobile: all panels collapsed by default - Users can toggle individual modules at any screen size **Search Module** - Search bar in header position now stretches 100% width at all breakpoints - Desktop media query no longer constrains to min-width: 300px **Mobile Menu** - Hamburger icon switched from Bootstrap SVG to Font Awesome `fa-bars` - Bootstrap collapse component now loaded for mobile menu toggle functionality - Navbar toggler color matches `--mainmenu-nav-link-color` ### Fixes **Navigation** - Main menu links in header forced to `--mainmenu-nav-link-color` via `.container-header .nav-link` - `.container-nav a` links now use navbar color variable - Back-to-top icon changed from IcoMoon to Font Awesome; `id="top"` anchor added to header **Icons** - System-wide IcoMoon → Font Awesome 7 compatibility layer (80+ icon mappings) - All `icon-*` classes now render via FA7 Free `::before` pseudo-elements **Layout** - Blog items use `flex: 1; height: 100%` for equal-height cards in rows - "Read more" button pinned to bottom via `margin-top: auto` - Empty `#system-message-container` hidden with `:empty` selector - Sticky header confirmed disabled on mobile as intended ### Blocked - **Font Awesome 7 CSS not deployed** — MokoStandards deploy skips `vendor/` directory (#114)
jmiller-moko commented 2026-04-07 22:42:41 +00:00 (Migrated from github.com)
Copy Link

Released as v03.09.01

Release: https://github.com/mokoconsulting-tech/MokoCassiopeia/releases/tag/v03

All planned features merged to main and released. Update manifests (update.xml, updates.xml) updated with v03.09.01 version, download URL, and SHA-256 checksum.

## Released as v03.09.01 Release: https://github.com/mokoconsulting-tech/MokoCassiopeia/releases/tag/v03 All planned features merged to main and released. Update manifests (update.xml, updates.xml) updated with v03.09.01 version, download URL, and SHA-256 checksum.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
automation
Automated processes or scripts
 breaking-change
Breaking API or functionality change
 bug
Something isn't working
 build
Build system changes
 ci-cd
CI/CD pipeline changes
 config
Configuration file changes
 css
CSS/styling changes
 dependencies
Dependency updates
 deploy-failure
Automated deploy failure tracking
 docker
Docker configuration changes
 documentation
Documentation changes
 dolibarr
Dolibarr module or extension
 duplicate
This issue or pull request already exists
 enhancement
New feature or request
 generic
Generic project or library
 good first issue
Good for newcomers
 health-check
Repository health check results
 health: excellent
Health score 90-100
 health: fair
Health score 50-69
 health: good
Health score 70-89
 health: poor
Health score below 50
 help wanted
Extra attention is needed
 html
HTML template changes
 invalid
This doesn't seem right
 javascript
JavaScript code changes
 joomla
Joomla extension or component
 major-release
Major version release (breaking changes)
 minor-release
Minor version release (XX.YY.00)
 mokostandards
MokoStandards compliance
 needs-changelog
needs-review
Awaiting code review
 needs-testing
Requires manual or automated testing
 patch-release
Patch version release (XX.YY.ZZ)
 php
PHP code changes
 priority: critical
Critical priority, must be addressed immediately
 priority: high
High priority
 priority: low
Low priority
 priority: medium
Medium priority
 push-failure
File push failure requiring attention
 python
Python code changes
 question
Further information is requested
 regression
Regression from a previous working state
 release
Release related PR
 release-candidate
Release candidate build
 security
Security-related changes
 size/l
Large change (101-300 lines)
 size/m
Medium change (31-100 lines)
 size/s
Small change (11-30 lines)
 size/xl
Extra large change (301-1000 lines)
 size/xs
Extra small change (1-10 lines)
 size/xxl
Extremely large change (1000+ lines)
 standards-drift
Repository drifted from MokoStandards
 standards-update
MokoStandards sync update
 standards-violation
Standards compliance failure
 status: blocked
Blocked by another issue or dependency
 status: in-progress
Currently being worked on
 status: on-hold
Temporarily on hold
 status: pending
Pending action or decision
 status: wontfix
This will not be worked on
 sync-failure
Bulk sync failure requiring attention
 sync-report
Bulk sync run report
 template-validation-failure
Template workflow validation failure
 test-failure
Automated test failure
 tests
Test suite changes
 type: bug
Something isn't working
 type: chore
Maintenance tasks
 type: enhancement
Enhancement to existing feature
 type: feature
New feature or request
 type: refactor
Code refactoring
 type: release
Release preparation or tracking
 type: test
Test suite additions or changes
 type: version
Version-related change
 typescript
TypeScript code changes
 version
Version bump or release
 version-branch
Version branch related
 version-drift
Version mismatch detected
 version-update
Version bump and release PR
 wontfix
This will not be worked on
 work-in-progress
Work in progress, not ready for merge
bug
Something is not working
 chore
Maintenance and housekeeping
 documentation
Documentation improvements
 enhancement
Improvement to existing functionality
 feature
New feature or request
 priority: critical
Must fix immediately
 priority: high
Should fix soon
 priority: low
Nice to have
 priority: medium
Fix when convenient
 refactor
Code restructuring without behavior change
 scope: client
Client-specific work
 scope: dolibarr
Dolibarr modules and customizations
 scope: infrastructure
Server, CI, backups, monitoring
 scope: joomla
Joomla templates and extensions
 scope: waas
MokoWaaS platform
 security
Security vulnerability or hardening
 status: blocked
Waiting on external dependency
 status: duplicate
Duplicate of another issue
 status: in-progress
Being worked on
 status: needs-review
Ready for review
 status: wontfix
Will not be addressed
No Label automation enhancement html joomla mokostandards release type: feature type: version version-update
Milestone
No items
No Milestone
Assignees
Clear assignees
jmiller
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: MokoConsulting/MokoCassiopeia#99
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?