Jonathan Miller
3a30f1a088
Generic: Repo Health / Site Health (push) Has been skipped
Generic: Repo Health / Site Health (pull_request) Has been skipped
Generic: Repo Health / Access control (push) Successful in 6s
Universal: PR Check / Branch Policy (pull_request) Successful in 3s
Generic: Repo Health / Access control (pull_request) Successful in 3s
Universal: Auto Version Bump / Version Bump (push) Failing after 14s
Joomla: Extension CI / Release Readiness Check (pull_request) Failing after 12s
Universal: Secret Scanning / Gitleaks Secret Scan (pull_request) Successful in 11s
Universal: PR Check / Validate PR (pull_request) Failing after 10s
Update Server / Update Server (push) Successful in 18s
Joomla: Extension CI / Lint & Validate (pull_request) Failing after 35s
Joomla: Extension CI / Tests (PHP 8.2) (pull_request) Has been cancelled
Joomla: Extension CI / Tests (PHP 8.3) (pull_request) Has been cancelled
Joomla: Extension CI / PHPStan Analysis (pull_request) Has been cancelled
Joomla: Extension CI / Build RC Pre-Release (pull_request) Has been cancelled
Generic: Repo Health / Release configuration (push) Has been cancelled
Generic: Repo Health / Scripts governance (push) Has been cancelled
Generic: Repo Health / Repository health (push) Has been cancelled
Universal: PR Check / Build RC Package (pull_request) Has been cancelled
Generic: Repo Health / Release configuration (pull_request) Has been cancelled
Generic: Repo Health / Scripts governance (pull_request) Has been cancelled
Generic: Repo Health / Repository health (pull_request) Has been cancelled
# Conflicts: # .mokogitea/cascade-dev.yml # src/templateDetails.xml # updates.xml
9.7 KiB
9.7 KiB
CSS Variables Reference
All CSS variables are defined in the theme palette files (light.standard.css / dark.standard.css) under :root[data-bs-theme="light"] or :root[data-bs-theme="dark"]. Override any of these in your custom theme files.
Brand and Theme Colors
| Variable | Light Default | Dark Default | Description |
|---|---|---|---|
--color-primary |
#112855 |
#112855 |
Primary brand colour |
--accent-color-primary |
#3f8ff0 |
#3f8ff0 |
Primary accent colour |
--accent-color-secondary |
#6fb3ff |
#6fb3ff |
Secondary accent colour |
Typography and Body
| Variable | Light Default | Dark Default | Description |
|---|---|---|---|
--body-font-family |
System sans-serif stack | System sans-serif stack | Base font family |
--body-font-size |
1rem |
1rem |
Base font size |
--body-font-weight |
400 |
400 |
Base font weight |
--body-line-height |
1.5 |
1.5 |
Base line height |
--body-color |
#22262a |
#e6ebf1 |
Body text colour |
--body-bg |
#fff |
#0e1318 |
Body background colour |
--heading-color |
inherit |
#f1f5f9 |
Heading text colour |
--emphasis-color |
#000 |
#fff |
Emphasis text colour |
--secondary-color |
#22262abf |
#e6ebf1bf |
Secondary text colour |
--tertiary-color |
#22262a80 |
#e6ebf180 |
Tertiary text colour |
--muted-color |
#6d757e |
#6d757e |
Muted text colour |
--highlight-color |
#22262a |
#111 |
Highlight text colour |
--highlight-bg |
#fbeea8 |
#ffe28a1a |
Highlight background |
Standard Colors
| Variable | Light Default | Dark Default |
|---|---|---|
--blue |
#010156 |
#91a4ff |
--indigo |
#6812f3 |
#b19cff |
--purple |
#6f42c2 |
#c0a5ff |
--pink |
#e93f8e |
#ff8fc0 |
--red |
#a51f18 |
#ff7a73 |
--orange |
#fd7e17 |
#ff9c4d |
--yellow |
#ad6200 |
#ffd166 |
--green |
#448344 |
#78d694 |
--teal |
#5abfdd |
#76e3ff |
--cyan |
#30638d |
#6fb7ff |
Gray Scale
| Variable | Light Default | Dark Default |
|---|---|---|
--gray-100 |
#f9fafb |
#161a20 |
--gray-200 |
#eaedf0 |
#1b2027 |
--gray-300 |
#dfe3e7 |
#222831 |
--gray-400 |
#ced4da |
#2b323b |
--gray-500 |
#adb5bd |
#36404a |
--gray-600 |
#6d757e |
#48525d |
--gray-700 |
#484f56 |
#5b6672 |
--gray-800 |
#353b41 |
#cfd6de |
--gray-900 |
#22262a |
#e6ebf1 |
Links
| Variable | Light Default | Dark Default | Description |
|---|---|---|---|
--color-link |
#224FAA |
white |
Navigation link colour |
--color-hover |
var(--accent-color-primary) |
gray |
Navigation hover colour |
--link-color |
#224faa |
#8ab4f8 |
Content link colour |
--link-hover-color |
#424077 |
#c3d6ff |
Content link hover colour |
--link-decoration |
underline |
underline |
Link text decoration |
Navigation
| Variable | Light Default | Dark Default | Description |
|---|---|---|---|
--mainmenu-nav-link-color |
white |
#fff |
Main menu active link colour |
--nav-text-color |
white |
gray |
Navigation text colour |
--nav-bg-color |
var(--color-link) |
var(--color-primary) |
Navigation background colour |
Layout and Spacing
| Variable | Light Default | Dark Default | Description |
|---|---|---|---|
--padding-x |
0.15rem |
0.15rem |
Horizontal padding |
--padding-y |
0.15rem |
0.15rem |
Vertical padding |
--secondary-bg |
#eaedf0 |
#151b22 |
Secondary background |
--tertiary-bg |
#f9fafb |
#10151b |
Tertiary background |
--nav-toggle-size |
3rem |
3rem |
Mobile nav toggle size |
Breakpoints
| Variable | Value | Description |
|---|---|---|
--bp-xs |
0 |
Extra small |
--bp-sm |
576px |
Small |
--bp-md |
768px |
Medium |
--bp-lg |
992px |
Large |
--bp-xl |
1200px |
Extra large |
Borders
| Variable | Light Default | Dark Default |
|---|---|---|
--border-width |
1px |
1px |
--border-style |
solid |
solid |
--border-color |
#dfe3e7 |
#2b323b |
--border-radius |
.25rem |
.25rem |
--border-radius-sm |
.2rem |
.2rem |
--border-radius-lg |
.3rem |
.3rem |
--border-radius-pill |
50rem |
50rem |
Shadows
| Variable | Light Default | Dark Default |
|---|---|---|
--box-shadow |
0 .5rem 1rem #00000026 |
0 .5rem 1rem #00000066 |
--box-shadow-sm |
0 .125rem .25rem #00000013 |
0 .125rem .25rem #00000040 |
--box-shadow-lg |
0 1rem 3rem #0000002d |
0 1rem 3rem #00000080 |
Header Background
| Variable | Light Default | Dark Default | Description |
|---|---|---|---|
--header-background-color |
#adadad |
#1a1f2b |
Header fallback colour |
--header-background-image |
url(.../bg.svg) |
url(.../bg.svg) |
Header background image |
--header-background-attachment |
fixed |
fixed |
CSS attachment |
--header-background-repeat |
repeat |
repeat |
CSS repeat |
Container Backgrounds
Each container position (below-topbar, top-a, top-b, sidebar, bottom-a, bottom-b) has these variables:
| Variable Pattern | Description |
|---|---|
--container-{position}-bg-image |
Background image (default: none) |
--container-{position}-bg-color |
Background colour (default: transparent) |
--container-{position}-bg-position |
Background position |
--container-{position}-bg-attachment |
Background attachment |
--container-{position}-bg-repeat |
Background repeat |
--container-{position}-bg-size |
Background size |
--container-{position}-border |
Border style |
--container-{position}-border-radius |
Border radius |
Forms
| Variable | Light Default | Dark Default |
|---|---|---|
--input-color |
hsl(210, 11%, 15%) |
#e6ebf1 |
--input-bg |
hsl(210, 20%, 98%) |
#1a2332 |
--input-border-color |
hsl(210, 14%, 83%) |
#3a4250 |
--input-focus-border-color |
#8894aa |
#5472ff |
--form-valid-color |
#448344 |
#78d694 |
--form-invalid-color |
#a51f18 |
#ff8e86 |
Bootstrap Palette
| Variable | Light Default | Dark Default |
|---|---|---|
--primary |
#010156 |
#010156 |
--secondary |
#6d757e |
#48525d |
--success |
#448344 |
#4aa664 |
--info |
#30638d |
#4f7aa0 |
--warning |
#ad6200 |
#c77a00 |
--danger |
#a51f18 |
#c23a31 |
--light |
#f9fafb |
#1b2027 |
--dark |
#353b41 |
#0f1318 |
Each palette colour also has -rgb, -text-emphasis, -bg-subtle, and -border-subtle variants.
Hero / Banner
| Variable | Description |
|---|---|
--hero-height |
Banner height (default: 60vh) |
--hero-color |
Banner text colour |
--hero-bg-repeat |
Background repeat |
--hero-bg-attachment |
Background attachment |
--hero-bg-position |
Background position |
--hero-bg-size |
Background size |
--hero-overlay-bg |
Overlay background colour |
--hero-primary-bg-color |
Primary variant background |
--hero-primary-overlay |
Primary variant overlay gradient |
--hero-secondary-bg-color |
Secondary variant background |
--hero-secondary-overlay |
Secondary variant overlay gradient |
--hero-card-* |
Hero card styling (bg, color, overlay, border-radius, padding, max-width) |
--hero-alt-card-* |
Alternative hero card styling |
Block Colors
Used for top-a, top-b, bottom-a, bottom-b section backgrounds:
| Variable | Description |
|---|---|
--block-color-1 through --block-color-4 |
Background colours |
--block-text-1 through --block-text-4 |
Text colours |
--block-highlight-bg / --block-highlight-text |
Highlight block |
--block-cta-bg / --block-cta-text |
Call-to-action block |
--block-alert-bg / --block-alert-text |
Alert block |
Footer
| Variable | Default | Description |
|---|---|---|
--footer-padding-top |
1rem |
Top padding |
--footer-padding-bottom |
80px |
Bottom padding (accounts for FAB) |
--footer-grid-padding-y |
2.5rem |
Grid vertical padding |
--footer-grid-padding-x |
0.5em |
Grid horizontal padding |
Theme FAB
| Variable | Light Default | Dark Default | Description |
|---|---|---|---|
--theme-fab-bg |
var(--color-primary) |
#e6ebf1 |
FAB background |
--theme-fab-color |
#fff |
#0e1318 |
FAB icon colour |
--theme-fab-btn-bg |
rgba(255,255,255,.15) |
transparent |
FAB button background |
--theme-fab-border |
rgba(255,255,255,0.3) |
rgba(0,0,0,0.15) |
FAB border colour |
Component-Specific Variables
Additional variables are defined for: VirtueMart (--vm-*), Gable (--gab-*), accordion, alert, badge, breadcrumb, cards, dropdown, list group, modal, nav tabs/pills, offcanvas, pagination, popover, progress, spinner, table, toast, and tooltip components. See the theme palette files for the complete list.
Built with moko-platform -- Moko Consulting
Repo: MokoOnyx · moko-platform
| Revision | Date | Author | Description |
|---|---|---|---|
| 1.0 | 2026-05-09 | Moko Consulting | Initial version |