From 0612a181fdbec1c2b39f173cad21d8e71354aff3 Mon Sep 17 00:00:00 2001 From: Jonathan Miller <230051081+jmiller-moko@users.noreply.github.com> Date: Thu, 26 Mar 2026 17:37:08 -0500 Subject: [PATCH] feat: add Brand Showcase admin tab with interactive color sampler MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- src/language/en-GB/tpl_mokocassiopeia.ini | 5 + src/language/en-US/tpl_mokocassiopeia.ini | 5 + src/templateDetails.xml | 6 + src/templates/brand-showcase.html | 282 ++++++++++++++++++++++ 4 files changed, 298 insertions(+) create mode 100644 src/templates/brand-showcase.html diff --git a/src/language/en-GB/tpl_mokocassiopeia.ini b/src/language/en-GB/tpl_mokocassiopeia.ini index f747b77..071e8de 100644 --- a/src/language/en-GB/tpl_mokocassiopeia.ini +++ b/src/language/en-GB/tpl_mokocassiopeia.ini @@ -243,6 +243,11 @@ TPL_MOKOCASSIOPEIA_THEME_PREVIEW_FIELDSET_LABEL="Theme Preview" TPL_MOKOCASSIOPEIA_THEME_PREVIEW_INTRO="

Live preview of all CSS variables, hero variants, block colours, and Bootstrap components rendered with your active theme. Use the Toggle Light / Dark button inside the preview to switch modes. This page is also available as a standalone file at templates/mokocassiopeia/templates/theme-test.html.

" TPL_MOKOCASSIOPEIA_THEME_PREVIEW_FRAME="" +; ===== Brand Showcase tab ===== +TPL_MOKOCASSIOPEIA_BRAND_SHOWCASE_FIELDSET_LABEL="Brand Showcase" +TPL_MOKOCASSIOPEIA_BRAND_SHOWCASE_INTRO="

Interactive brand and Bootstrap 5 component showcase with colour system gradients. Hover over any gradient to sample the exact pixel colour at that point. Use the Toggle Light / Dark button to switch themes. This page is also available standalone at templates/mokocassiopeia/templates/brand-showcase.html.

" +TPL_MOKOCASSIOPEIA_BRAND_SHOWCASE_FRAME="" + ; ===== Misc ===== MOD_BREADCRUMBS_HERE="YOU ARE HERE:" diff --git a/src/language/en-US/tpl_mokocassiopeia.ini b/src/language/en-US/tpl_mokocassiopeia.ini index 2572057..494fe52 100644 --- a/src/language/en-US/tpl_mokocassiopeia.ini +++ b/src/language/en-US/tpl_mokocassiopeia.ini @@ -243,6 +243,11 @@ TPL_MOKOCASSIOPEIA_THEME_PREVIEW_FIELDSET_LABEL="Theme Preview" TPL_MOKOCASSIOPEIA_THEME_PREVIEW_INTRO="

Live preview of all CSS variables, hero variants, block colors, and Bootstrap components rendered with your active theme. Use the Toggle Light / Dark button inside the preview to switch modes. This page is also available as a standalone file at templates/mokocassiopeia/templates/theme-test.html.

" TPL_MOKOCASSIOPEIA_THEME_PREVIEW_FRAME="" +; ===== Brand Showcase tab ===== +TPL_MOKOCASSIOPEIA_BRAND_SHOWCASE_FIELDSET_LABEL="Brand Showcase" +TPL_MOKOCASSIOPEIA_BRAND_SHOWCASE_INTRO="

Interactive brand and Bootstrap 5 component showcase with color system gradients. Hover over any gradient to sample the exact pixel color at that point. Use the Toggle Light / Dark button to switch themes. This page is also available standalone at templates/mokocassiopeia/templates/brand-showcase.html.

" +TPL_MOKOCASSIOPEIA_BRAND_SHOWCASE_FRAME="" + ; ===== Misc ===== MOD_BREADCRUMBS_HERE="YOU ARE HERE:" diff --git a/src/templateDetails.xml b/src/templateDetails.xml index e586ad2..792e9f5 100644 --- a/src/templateDetails.xml +++ b/src/templateDetails.xml @@ -304,6 +304,12 @@ + + +
+ + +
diff --git a/src/templates/brand-showcase.html b/src/templates/brand-showcase.html new file mode 100644 index 0000000..9770590 --- /dev/null +++ b/src/templates/brand-showcase.html @@ -0,0 +1,282 @@ + + + + + + +MokoCassiopeia — Brand + Bootstrap Showcase + + + + + + +
+ +
+ +
+ + +
+

Brand + Bootstrap Showcase

+

Bootstrap 5 powers the responsive, mobile-first foundation of MOKO-CASSIOPEIA, delivering a scalable grid system, standardized components, and utility classes. This implementation integrates Moko Consulting brand variables to ensure consistency, accessibility, and performance across all interfaces.

+
+

Full variable system, gradients, and Bootstrap components

+
+

Hover gradients to sample exact pixel color

+ + +

Color System

+
+ +
+
 
+
+
--color-primary
+
+ +
+
 
+
+
--accent-color-primary
+
+ +
+
 
+
+
--accent-color-secondary
+
+ +
+
 
+
+
--secondary-bg
+
+ +
+
 
+
+
--tertiary-bg
+
+ +
+
 
+
+
--border-color
+
+ +
+ + +

RGB Gradient

+
+ +

Black to White Gradient

+
+ + + + +
+ + +

Typography

+

Heading 1

+

Heading 2

+

Heading 3

+

Lead paragraph

+

Body text with link and inline code

+ + +

Buttons

+
+ + + + + + + +
+ + +

Badges

+
+Primary +Success +Danger +
+ + +

Alerts

+ + + + + + +

Table

+ + + + + + + + +
#NameStatus
1ItemActive
2ItemInactive
+ + +

Forms

+
+ + + +
+ + +

Cards

+
+
Card Title
+

Example content

+ +
+ + +

Accordion

+
+
+

+
+
Content
+
+
+
+ + +

Tabs

+ + +
+ +
+ + + + + + +