New "Brand Showcase" tab in Joomla template configuration embeds
brand-showcase.html — features color system gradients with hover-to-sample
pixel picker, branded nav, typography, buttons, badges, alerts, tables,
forms, cards, accordion, and tabs. Light/dark toggle included.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Bump CSS_VARIABLES.md version to 03.09.02, update effective date
- Add sync_custom_vars.php usage instructions to custom palette section
- Update CHANGELOG to reflect all files modified/added including standard
theme files, script.php, and language files
- Bump CHANGELOG header version to 03.09.02
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Adds all 20 hero variant and block color CSS variables to both
light.standard.css and dark.standard.css, matching the custom palette
templates. Users on the standard palette now get hero variants and
block colors out of the box.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Merges the full Joomla branded-bootstrap5 article content into theme-test.html:
nav sample, typography, buttons, badges/alerts, tables, forms, cards/list groups,
breadcrumb/pagination, progress bars, and computed CSS variable swatches that
display resolved values via JavaScript.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- 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>
* chore: update LICENSE from MokoStandards
* chore: update update.xml from MokoStandards
* chore: update phpstan.neon from MokoStandards
* chore: update Makefile from MokoStandards
* chore: update .gitignore from MokoStandards
* chore: update composer.json from MokoStandards
* chore: update .moko-standards from MokoStandards
* chore: update .github/copilot.yml from MokoStandards
* chore: update .github/copilot-instructions.md from MokoStandards
* chore: update .github/CLAUDE.md from MokoStandards
* chore: update .github/workflows/codeql-analysis.yml from MokoStandards
* chore: update .github/workflows/enterprise-firewall-setup.yml from MokoStandards
* feat: add hero variant system, block color system, theme test sheet, and CSS var sync script
Implements the two-variant hero system (.hero#primary / .hero#secondary) and
automatic block color palette for top-a/top-b/bottom-a/bottom-b positions.
Adds Bootstrap-style HTML test page for visual CSS variable reference, and a
PHP sync utility that detects missing variables in user custom palettes and
injects them on upgrade.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* Add mod_custom hero layout override and bump version to 03.09.01
Adds src/html/mod_custom/hero.php — a banner-overlay style template
override for mod_custom, mirroring Cassiopeia's banner layout pattern.
Includes background image support via WebAssetManager and respects the
Module Manager's moduleclass_sfx field.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* Ignore and untrack .claude/settings.local.json
Adds .claude/settings.local.json to .gitignore and removes it from
version control to keep local Claude Code permissions out of the repo.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* Ship custom palette starters and update template description
- Add src/templates/light.custom.css and dark.custom.css as starter
palette files that ship with the template, giving users a full
variable reference to copy and customise
- Register src/templates/ folder in templateDetails.xml <files>
- Update <description> in templateDetails.xml: correct palette source
paths, add Custom CSS & JavaScript section (user.css / user.js),
link docs to GitHub repo docs/ directory
- Sync en-GB and en-US tpl_mokocassiopeia.sys.ini with same changes,
preserving British/American spelling variants; bump version to 03.09.01
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* Add CSS Variables reference tab to template options
Adds a new 'CSS Variables' tab to the template configuration with eight
documented sections (brand, typography, navigation, header background,
container backgrounds, borders/shadows, forms/focus) so site builders
can reference all available custom properties without leaving Joomla admin.
Also removes external docs links from descriptions in templateDetails.xml
and both language files, replacing them with a pointer to the new tab.
Fixes stale custom palette source paths in en-GB and en-US ini files.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* Expand CSS Variables tab to full variable reference and add custom-hero class
- Replace 8-field CSS Variables tab with 21 comprehensive sections covering
all variables from light.standard.css and dark.standard.css
- New sections: Links, Layout & Spacing, Breakpoints, Bootstrap Semantic
Palette, Bootstrap State Colors, Alert & List Group Colors, Standard
Colors/Grays/Opacity, Shadows & Shadow Tokens, Buttons, Cards,
Component & Plugin Colors, VirtueMart, Gable
- Add custom-hero class to hero.php outer div (always present)
- Both en-GB and en-US language files updated
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* Add Google Search Console verification and ensure all Google services coexist
- Add googlesitekey param to Google fieldset in templateDetails.xml
- Inject <meta name="google-site-verification"> via setMetaData() in
index.php, component.php, and offline.php
- GTM, GA, and Search Console verification can now all be active simultaneously
- Add language strings for new field in en-US and en-GB
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* Add header-aside module position to the right of the logo
- New position renders inside .header-brand-wrap, right-aligned via
margin-inline-start: auto on .container-header-aside
- CSS: .header-brand-wrap uses flexbox so logo stays left, aside floats right
- Registered in templateDetails.xml positions list
- Language strings added to both en-US and en-GB sys.ini files
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* Add minify build script and generate .min CSS/JS; rename position to brand-aside
Build tooling:
- Add package.json with clean-css and terser dev dependencies
- Add scripts/minify.js: reads joomla.asset.json, auto-detects source/.min
pairs, and minifies all template-owned CSS and JS files
- Add node_modules/ to .gitignore
Generated .min files (all 6 manifest pairs):
- css/template.min.css (17.8% saved)
- css/editor.min.css (49.4% saved)
- css/theme/light.standard.min.css (13.1% saved)
- css/theme/dark.standard.min.css (14.4% saved)
- js/template.min.js (58.2% saved)
- js/gtm.min.js (62.3% saved)
Rename: header-aside → brand-aside (position, CSS class, language keys)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* Add hero/banner-overlay CSS variables and wire template.css
- Add HERO / BANNER OVERLAY section to light.standard.css and dark.standard.css:
--hero-height, --hero-color, --hero-bg-repeat, --hero-bg-attachment,
--hero-bg-position, --hero-bg-size, --hero-border-bottom,
--hero-overlay-bg (light: 0.1 alpha / dark: 0.3 alpha),
--hero-overlay-padding, --hero-overlay-text-align, --hero-overlay-text-color
- Replace all hardcoded values in .container-banner .banner-overlay and
.overlay with var() references (with fallbacks)
- Fix background-position: comma syntax → correct space-separated single-bg value
- Add css_vars_hero note field to CSS Variables tab in templateDetails.xml
- Add TPL_MOKOCASSIOPEIA_CSS_VARS_HERO_LABEL/DESC to en-US and en-GB
- Regenerate .min files
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* Add smooth theme-switch transitions and restore hero .overlay wrapper
- Add prefers-reduced-motion-scoped CSS transitions (bg, color, border) on
:root, body, and key layout containers so light/dark theme switches animate
smoothly instead of snapping
- Restore <div class="overlay"> child in hero.php; slim .custom-hero rule to a
customisation hook only — visual overlay styles are handled by .overlay child
- Regenerate template.min.css
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* Update template.css
* Merge duplicate prefers-reduced-motion media queries
Consolidate the two @media (prefers-reduced-motion: no-preference) blocks
into one — scroll-behavior and theme-switch colour transitions share the
same query and are cleaner in a single block.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* Promote offcanvas variables to :root theme files and document in CSS Variables tab
- Move --offcanvas-* definitions from component-scoped .offcanvas selector in
template.css into :root[data-bs-theme] blocks in light.standard.css and
dark.standard.css so they are overridable via user.css at root level
- Fix two bugs in the old definitions: --offcanvas-bg was incorrectly set to
var(--body-color) (text colour); corrected to var(--body-bg); and
--offcanvas-color had a spurious 'color:' prefix
- Dark theme uses a heavier box-shadow (0.3 alpha) for better depth perception
- Add css_vars_offcanvas field to templateDetails.xml CSS Variables tab
- Add en-US and en-GB language strings for the new Offcanvas Panel section
- Rebuild all .min CSS files
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* Promote Bootstrap component variables from template.css to :root theme files
Move 16 component variable groups from component-scoped selectors in
template.css into :root[data-bs-theme] blocks in light.standard.css and
dark.standard.css:
accordion, breadcrumb, pagination, badge, alert, progress, list-group,
dropdown, toast, modal, tooltip, popover, spinner, nav, nav-tabs, nav-pills
Dark theme values adapted for dark surfaces: semantic var() references,
lighter SVG icon fill colours, heavier shadows, secondary-bg backgrounds.
Component selectors in template.css retain only non-variable rules.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* Promote table and backdrop variables to :root theme files
Move --table-* and --backdrop-* base definitions from component selectors
in template.css into :root[data-bs-theme] blocks in light/dark theme files.
Dark table uses white-rgb-based striped/active overlays for proper contrast
on dark surfaces. Deduplicate the double --table-active-* declarations that
existed in template.css. Backdrop values are identical in both themes.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* Add CSS Variables tab documentation for all promoted Bootstrap components
Add LABEL/DESC language strings (en-US + en-GB) for all 17 Bootstrap
component variable groups now living in the :root theme files:
accordion, alert, badge, backdrop, breadcrumb, dropdown, list-group,
modal, nav-tabs, nav-pills, pagination, popover, progress, spinner,
table, toast, tooltip
Each section documents variables with HTML subheadings (Dimensions,
Colours, Typography, Stacking, Animation) and <code> tags for every
variable name. British English spellings used throughout en-GB.
Adds 34 new lines per language file (17 LABEL + 17 DESC pairs, 80
CSS_VARS_* keys total). XML fields were already present from the
prior migration commit.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---------
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Add LABEL/DESC language strings (en-US + en-GB) for all 17 Bootstrap
component variable groups now living in the :root theme files:
accordion, alert, badge, backdrop, breadcrumb, dropdown, list-group,
modal, nav-tabs, nav-pills, pagination, popover, progress, spinner,
table, toast, tooltip
Each section documents variables with HTML subheadings (Dimensions,
Colours, Typography, Stacking, Animation) and <code> tags for every
variable name. British English spellings used throughout en-GB.
Adds 34 new lines per language file (17 LABEL + 17 DESC pairs, 80
CSS_VARS_* keys total). XML fields were already present from the
prior migration commit.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Move --table-* and --backdrop-* base definitions from component selectors
in template.css into :root[data-bs-theme] blocks in light/dark theme files.
Dark table uses white-rgb-based striped/active overlays for proper contrast
on dark surfaces. Deduplicate the double --table-active-* declarations that
existed in template.css. Backdrop values are identical in both themes.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Move 16 component variable groups from component-scoped selectors in
template.css into :root[data-bs-theme] blocks in light.standard.css and
dark.standard.css:
accordion, breadcrumb, pagination, badge, alert, progress, list-group,
dropdown, toast, modal, tooltip, popover, spinner, nav, nav-tabs, nav-pills
Dark theme values adapted for dark surfaces: semantic var() references,
lighter SVG icon fill colours, heavier shadows, secondary-bg backgrounds.
Component selectors in template.css retain only non-variable rules.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Move --offcanvas-* definitions from component-scoped .offcanvas selector in
template.css into :root[data-bs-theme] blocks in light.standard.css and
dark.standard.css so they are overridable via user.css at root level
- Fix two bugs in the old definitions: --offcanvas-bg was incorrectly set to
var(--body-color) (text colour); corrected to var(--body-bg); and
--offcanvas-color had a spurious 'color:' prefix
- Dark theme uses a heavier box-shadow (0.3 alpha) for better depth perception
- Add css_vars_offcanvas field to templateDetails.xml CSS Variables tab
- Add en-US and en-GB language strings for the new Offcanvas Panel section
- Rebuild all .min CSS files
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Consolidate the two @media (prefers-reduced-motion: no-preference) blocks
into one — scroll-behavior and theme-switch colour transitions share the
same query and are cleaner in a single block.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- New position renders inside .header-brand-wrap, right-aligned via
margin-inline-start: auto on .container-header-aside
- CSS: .header-brand-wrap uses flexbox so logo stays left, aside floats right
- Registered in templateDetails.xml positions list
- Language strings added to both en-US and en-GB sys.ini files
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Add googlesitekey param to Google fieldset in templateDetails.xml
- Inject <meta name="google-site-verification"> via setMetaData() in
index.php, component.php, and offline.php
- GTM, GA, and Search Console verification can now all be active simultaneously
- Add language strings for new field in en-US and en-GB
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Replace 8-field CSS Variables tab with 21 comprehensive sections covering
all variables from light.standard.css and dark.standard.css
- New sections: Links, Layout & Spacing, Breakpoints, Bootstrap Semantic
Palette, Bootstrap State Colors, Alert & List Group Colors, Standard
Colors/Grays/Opacity, Shadows & Shadow Tokens, Buttons, Cards,
Component & Plugin Colors, VirtueMart, Gable
- Add custom-hero class to hero.php outer div (always present)
- Both en-GB and en-US language files updated
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Adds a new 'CSS Variables' tab to the template configuration with eight
documented sections (brand, typography, navigation, header background,
container backgrounds, borders/shadows, forms/focus) so site builders
can reference all available custom properties without leaving Joomla admin.
Also removes external docs links from descriptions in templateDetails.xml
and both language files, replacing them with a pointer to the new tab.
Fixes stale custom palette source paths in en-GB and en-US ini files.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Add src/templates/light.custom.css and dark.custom.css as starter
palette files that ship with the template, giving users a full
variable reference to copy and customise
- Register src/templates/ folder in templateDetails.xml <files>
- Update <description> in templateDetails.xml: correct palette source
paths, add Custom CSS & JavaScript section (user.css / user.js),
link docs to GitHub repo docs/ directory
- Sync en-GB and en-US tpl_mokocassiopeia.sys.ini with same changes,
preserving British/American spelling variants; bump version to 03.09.01
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Adds .claude/settings.local.json to .gitignore and removes it from
version control to keep local Claude Code permissions out of the repo.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Adds src/html/mod_custom/hero.php — a banner-overlay style template
override for mod_custom, mirroring Cassiopeia's banner layout pattern.
Includes background image support via WebAssetManager and respects the
Module Manager's moduleclass_sfx field.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
