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

feat: hero variants, block colors, theme preview tab, CSS var sync on upgrade

Browse Source 
- Add .hero#primary / .hero#secondary CSS variant system to template.css
- Add :nth-child() block color palette for top-a/b, bottom-a/b positions
- Add named per-module overrides (#block-highlight, #block-cta, #block-alert)
- Add all hero + block CSS variables to light/dark custom palette templates
- Add theme-test.html with full visual CSS variable reference + color test
- Add "Theme Preview" tab to admin config with embedded iframe of test sheet
- Add script.php install/update script (Joomla 5/6 compatible)
- Add sync_custom_vars.php — detects missing vars in user palettes on upgrade
- Add en-GB and en-US language strings for new admin config fields
- Update CSS_VARIABLES.md and CHANGELOG.md
- Bump version to 03.09.02

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jonathan Miller
2026-03-26 12:44:46 -05:00
parent 4237b303dc
commit b25a8f58d8
10 changed files with 1440 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
docs/CSS_VARIABLES.md
View File

@@ -38,6 +38,8 @@ This document provides a complete reference of all CSS variables available in th
- [Responsive Tokens & Breakpoints](#responsive-tokens--breakpoints)
- [VirtueMart Variables](#virtuemart-variables)
- [Gable Variables](#gable-variables)
- [Hero Variant Variables](#hero-variant-variables)
- [Block Color Variables](#block-color-variables)
---
@@ -1357,6 +1359,81 @@ These ensure optimal readability for links within alert boxes.
---
## Hero Variant Variables
### `--hero-primary-bg-color`
- **Description**: Fallback background color for the primary hero variant
- **Light Mode Default**: `var(--color-primary)`
- **Dark Mode Default**: `#0d1e3a`
- **Usage**: `.hero#primary` background when no image loads
### `--hero-primary-overlay`
- **Description**: Gradient overlay tint for primary hero
- **Light Mode Default**: `linear-gradient(rgba(163, 205, 226, .45), rgba(163, 205, 226, .45))`
- **Dark Mode Default**: `linear-gradient(rgba(13, 30, 58, .65), rgba(13, 30, 58, .65))`
- **Usage**: Semi-transparent color wash over hero background image
### `--hero-primary-color`
- **Description**: Text color for primary hero content
- **Light Mode Default**: `var(--color-primary)`
- **Dark Mode Default**: `#f1f5f9`
- **Usage**: Headings and body text inside `.hero#primary`
### `--hero-secondary-bg-color`
- **Description**: Fallback background color for the secondary hero variant
- **Light Mode Default**: `var(--color-primary)`
- **Dark Mode Default**: `#080f1e`
- **Usage**: `.hero#secondary` background when no image loads
### `--hero-secondary-overlay`
- **Description**: Gradient overlay tint for secondary hero
- **Light Mode Default**: `linear-gradient(rgba(17, 40, 85, .75), rgba(17, 40, 85, .75))`
- **Dark Mode Default**: `linear-gradient(rgba(8, 15, 30, .80), rgba(8, 15, 30, .80))`
- **Usage**: Stronger overlay for inner-page heroes
### `--hero-secondary-color`
- **Description**: Text color for secondary hero content
- **Light Mode Default**: `#f1f5f9`
- **Dark Mode Default**: `#f1f5f9`
- **Usage**: Headings and body text inside `.hero#secondary`
---
## Block Color Variables
### Slot Palette (automatic by position order)
| Variable | Purpose | Light Default | Dark Default |
|---|---|---|---|
| `--block-color-1` | Background for 1st module | `var(--color-primary)` | `var(--secondary-bg)` |
| `--block-text-1` | Text for 1st module | `var(--body-color)` | `var(--body-color)` |
| `--block-color-2` | Background for 2nd module | `var(--accent-color-primary)` | `var(--accent-color-primary)` |
| `--block-text-2` | Text for 2nd module | `#fff` | `#fff` |
| `--block-color-3` | Background for 3rd module | `var(--warning, #eec234)` | `rgba(238, 194, 52, .15)` |
| `--block-text-3` | Text for 3rd module | `var(--body-color)` | `var(--body-color)` |
| `--block-color-4` | Background for 4th module | `var(--success-bg-subtle, #eef7f0)` | `rgba(74, 166, 100, .15)` |
| `--block-text-4` | Text for 4th module | `var(--body-color)` | `var(--body-color)` |
### Named Per-Module Overrides
| Variable | Purpose |
|---|---|
| `--block-highlight-bg` | Background for `#block-highlight` module |
| `--block-highlight-text` | Text color for `#block-highlight` module |
| `--block-cta-bg` | Background for `#block-cta` module |
| `--block-cta-text` | Text color for `#block-cta` module |
| `--block-alert-bg` | Background for `#block-alert` module |
| `--block-alert-text` | Text color for `#block-alert` module |
### Override Priority
| Priority | Method | How applied |
|---|---|---|
| 1 (highest) | Named module ID (`#block-highlight`) | ID in module HTML, named variable in palette |
| 2 | Slot color (`--block-color-1` etc.) | Automatic by `:nth-child()` order |
---
## Metadata
* Document: docs/CSS_VARIABLES.md
@@ -1372,5 +1449,6 @@ These ensure optimal readability for links within alert boxes.
| Date | Change Summary | Author |
| ---------- | ----------------------------------------------------- | --------------- |
| 2026-03-26 | Added hero variant and block color variable docs | Claude |
| 2026-02-07 | Added missing CSS variable documentation | GitHub Copilot |
| 2026-01-30 | Initial CSS variables reference documentation created | GitHub Copilot |