From 2b7c009f8a9f588b6ed42b7d0e90815b96b77a91 Mon Sep 17 00:00:00 2001 From: Jonathan Miller <230051081+jmiller-moko@users.noreply.github.com> Date: Thu, 26 Mar 2026 12:52:21 -0500 Subject: [PATCH] feat: add branded Bootstrap 5 showcase with computed CSS swatches to theme test sheet 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) --- src/templates/theme-test.html | 234 ++++++++++++++++++++++++++++++++++ 1 file changed, 234 insertions(+) diff --git a/src/templates/theme-test.html b/src/templates/theme-test.html index 04a248e..981e6c0 100644 --- a/src/templates/theme-test.html +++ b/src/templates/theme-test.html @@ -582,6 +582,224 @@ pre { background: var(--secondary-bg, #eaedf0); color: var(--body-color); paddin
100%
+ +

21. Branded Bootstrap 5 Showcase

+

Comprehensive component demos using MokoCassiopeia's brand variables. Mirrors the live Joomla article at /style/branded-bootstrap5.

+ + +
+

Brand + Bootstrap Showcase

+

Comprehensive components with toggleable code samples

+
+ + + + + + + + +

Typography

+
+
+

H1 Heading

+

H2 Heading

+

H3 Heading

+

H4 Heading

+
H5 Heading
+
H6 Heading
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

+

Curabitur ullamcorper nec nisi a themed link. Nulla vitae <section> purus.

+
+

"Design is intelligence made visible."

+
— Alina Wheeler
+
+
+
+ + +

Buttons & Button Groups

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

Badges & Alerts

+
+Primary +Secondary +Success +Warning +Danger +Accent +
+
+Primary: Vivamus sagittis lacus vel augue. +
+
+Cras mattis consectetur purus sit amet fermentum. +
+
+Brand alert — Aenean lacinia bibendum nulla sed consectetur. +
+ + +

Tables

+
+ + + + + + + +
#NameStatusNotes
1AlphaActiveLorem ipsum dolor sit amet.
2BetaPendingInteger posuere erat a ante.
3GammaBlockedDonec id elit non mi porta.
+
+ + +

Branded Forms

+
+
+
+ + +
+
+ + +
+
+
+ +
+@ + + +
+
+ +
+ + +

Branded Cards & List Groups

+
+
+
+
Featured
+
+
Card title
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

+ +
+
+
+
+
+
Active item
+
Second item
+
With badge 4
+
+
+
+ + +

Breadcrumb & Pagination

+ + + + +

Progress Bars

+
+
+
25%
+
+
+
65%
+
+
+ + +

CSS Variable Swatches (Computed)

+

Visual preview of key variables with their resolved values displayed via JavaScript.

+
+
+
+
--color-primary
+
+
+
+
--color-link
+
+
+
+
--color-hover
+
+
+
+
--accent-color-primary
+
+
+
+
--accent-color-secondary
+
+
+
+
--nav-bg-color
+
+
+
+
--body-bg
+
+
+
+
--body-color
+
+
+
+
--border-color
+
+
+

MokoCassiopeia Theme Test Sheet — v03.09.02 — © 2026 Moko Consulting @@ -590,6 +808,19 @@ pre { background: var(--secondary-bg, #eaedf0); color: var(--body-color); paddin