Files

Jonathan Miller c99eba5c01 chore(release): v03.09.03 — search 3-col layout, version sync

Search position now 25% width (3 cols), menu fills remaining space.
All VERSION headers synced to 03.09.03 across README, docs, manifests.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

2026-04-07 18:24:20 -05:00

42 KiB

Raw Blame History

CSS Variables Reference - MokoCassiopeia

This document provides a complete reference of all CSS variables available in the MokoCassiopeia template for customization.

Using Custom Color Palettes
Primary Brand Colors
Link Colors
Navigation Colors
Navbar Variables
Offcanvas Variables
Header Background
Container Backgrounds
Bootstrap Color Palette
Body & Typography
Additional Theme Colors
Borders & Shadows
Button Utilities
Card Variables
Form Colors
Responsive Tokens & Breakpoints
VirtueMart Variables
Gable Variables
Hero Variant Variables
Block Color Variables

Using Custom Color Palettes

To create custom color schemes:

Copy template files from ./templates/ directory:
- light.custom.css → media/templates/site/mokocassiopeia/css/theme/light.custom.css
- dark.custom.css → media/templates/site/mokocassiopeia/css/theme/dark.custom.css
Edit the variables in the copied files to match your brand
Enable in Joomla:
- Navigate to: System → Site Templates → MokoCassiopeia
- Under "Theme" tab, set palette to "Custom"
- Save changes
Note: Custom files are gitignored and won't be committed to the repository
On upgrade: When the template is updated, script.php automatically runs sync_custom_vars.php to detect any new variables added to the starter templates and inject them into your existing custom palette files. Your existing values are never overwritten — only genuinely new variables are added. You can also run this manually:
```
php templates/mokocassiopeia/sync_custom_vars.php --dry-run   # preview what would be added
php templates/mokocassiopeia/sync_custom_vars.php              # apply missing variables
```

Primary Brand Colors

`--color-primary`

Description: Main brand color used throughout the template
Light Mode Default: #112855
Dark Mode Default: #112855
Usage: Headers, primary buttons, brand elements

`--accent-color-primary`

Description: Primary accent color for interactive elements
Light Mode Default: #3f8ff0
Dark Mode Default: #3f8ff0
Usage: Hover states, focus indicators, call-to-action elements

`--accent-color-secondary`

Description: Secondary accent color
Light Mode Default: #3f8ff0
Dark Mode Default: #6fb3ff
Usage: Secondary highlights, alternative styling

Link Colors

`--color-link`

Description: Default color for hyperlinks
Light Mode Default: #224FAA
Dark Mode Default: white
Usage: All text links in content

`--color-hover`

Description: Color when hovering over links and interactive elements
Light Mode Default: var(--accent-color-primary)
Dark Mode Default: gray
Usage: Hover states for links and buttons

`--color-active`

Description: Color for active/selected links
Light Mode Default: (not set)
Dark Mode Default: var(--mainmenu-nav-link-color)
Usage: Active navigation items, selected states

`--link-color`

Description: Bootstrap-compatible link color variable
Light Mode Default: #224faa
Dark Mode Default: #8ab4f8
Usage: Alternative link color variable for Bootstrap compatibility

`--link-hover-color`

Description: Bootstrap-compatible hover color
Light Mode Default: #424077
Dark Mode Default: #c3d6ff
Usage: Link hover state for Bootstrap components

`--mainmenu-nav-link-color`

Description: Text color for main navigation menu
Light Mode Default: white
Dark Mode Default: #fff
Usage: Navigation menu text

`--nav-text-color`

Description: General navigation text color
Light Mode Default: white
Dark Mode Default: gray
Usage: Navigation elements

`--nav-bg-color`

Description: Background color for navigation bars
Light Mode Default: var(--color-link)
Dark Mode Default: var(--color-primary)
Usage: Navigation background

`--navbar-padding-x`

Description: Horizontal padding for navbar
Default: 1rem
Usage: Navbar horizontal spacing

`--navbar-padding-y`

Description: Vertical padding for navbar
Default: 0.5rem
Usage: Navbar vertical spacing

`--navbar-color`

Description: Default text color for navbar items
Light Mode Default: rgba(0, 0, 0, 0.55)
Dark Mode Default: rgba(255, 255, 255, 0.55)
Usage: Navbar text color

`--navbar-active-color`

Description: Text color for active navbar items
Light Mode Default: rgba(0, 0, 0, 0.9)
Dark Mode Default: rgba(255, 255, 255, 0.9)
Usage: Active navbar item color

`--navbar-disabled-color`

Description: Text color for disabled navbar items
Light Mode Default: rgba(0, 0, 0, 0.3)
Dark Mode Default: rgba(255, 255, 255, 0.3)
Usage: Disabled navbar item color

`--navbar-brand-padding-y`

Description: Vertical padding for navbar brand
Default: 0.3125rem
Usage: Navbar brand vertical spacing

`--navbar-brand-margin-end`

Description: Right margin for navbar brand
Default: 1rem
Usage: Space after navbar brand

`--navbar-brand-font-size`

Description: Font size for navbar brand
Default: 1.25rem
Usage: Navbar brand text size

`--navbar-brand-color`

Description: Color for navbar brand
Default: Inherits from --navbar-color
Usage: Navbar brand text color

`--navbar-brand-active-color`

Description: Color for navbar brand when active
Default: Inherits from --navbar-active-color
Usage: Active navbar brand color

`--navbar-toggler-padding-x`

Description: Horizontal padding for navbar toggler button
Default: 0.75rem
Usage: Toggler button horizontal spacing

`--navbar-toggler-padding-y`

Description: Vertical padding for navbar toggler button
Default: 0.25rem
Usage: Toggler button vertical spacing

`--navbar-toggler-font-size`

Description: Font size for navbar toggler icon
Default: 1.25rem
Usage: Toggler icon size

`--navbar-toggler-border-color`

Description: Border color for navbar toggler
Light Mode Default: rgba(0, 0, 0, 0.1)
Dark Mode Default: rgba(255, 255, 255, 0.1)
Usage: Toggler button border

`--navbar-toggler-border-radius`

Description: Border radius for navbar toggler
Default: 0.25rem
Usage: Toggler button corner rounding

`--navbar-toggler-focus-width`

Description: Width of focus outline on toggler
Default: 0.25rem
Usage: Focus indicator width

`--navbar-toggler-transition`

Description: CSS transition for toggler state changes
Default: box-shadow 0.15s ease-in-out
Usage: Toggler animation

`--nav-link-padding-x`

Description: Horizontal padding for nav links
Default: 0.5rem
Usage: Nav link horizontal spacing

`--nav-link-padding-y`

Description: Vertical padding for nav links
Default: 0.5rem
Usage: Nav link vertical spacing

`--nav-link-font-weight`

Description: Font weight for nav links
Default: 400
Usage: Nav link text weight

`--nav-link-color`

Description: Color for nav links
Default: Inherits from --navbar-color
Usage: Nav link text color

`--nav-link-active-color`

Description: Color for active nav links
Default: Inherits from --navbar-active-color
Usage: Active nav link color

`--nav-link-disabled-color`

Description: Color for disabled nav links
Default: Inherits from --navbar-disabled-color
Usage: Disabled nav link color

Offcanvas Variables

`--offcanvas-color`

Description: Text color for offcanvas content
Light Mode Default: var(--body-color)
Dark Mode Default: var(--body-color)
Usage: Offcanvas text color

`--offcanvas-padding-x`

Description: Horizontal padding for offcanvas content
Default: 1.5rem
Usage: Offcanvas horizontal spacing

`--offcanvas-padding-y`

Description: Vertical padding for offcanvas content
Default: 1.5rem
Usage: Offcanvas vertical spacing

Header Background

`--header-background-image`

Description: Background image URL for header
Default: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg')
Usage: Header section background

`--header-background-attachment`

Description: CSS background-attachment property
Default: fixed
Options: scroll, fixed, local

`--header-background-repeat`

Description: CSS background-repeat property
Default: repeat
Options: repeat, repeat-x, repeat-y, no-repeat

`--header-background-size`

Description: CSS background-size property
Default: auto
Options: auto, cover, contain, specific sizes

Container Backgrounds

Each container section has the following customizable properties:

Container Sections

below-topbar - Below top navigation bar
top-a - Top section A
top-b - Top section B
toc - Table of Contents sidebar
sidebar - Sidebar area
bottom-a - Bottom section A
bottom-b - Bottom section B

Available Properties per Container

Replace {section} with the container name:

--container-{section}-bg-image - Background image URL
--container-{section}-bg-color - Background color
--container-{section}-bg-position - Background position
--container-{section}-bg-attachment - Attachment (scroll/fixed)
--container-{section}-bg-repeat - Repeat pattern
--container-{section}-bg-size - Background size
--container-{section}-border - Border styling
--container-{section}-border-radius - Border radius

Special TOC Variables

`--container-toc-bg`

Description: Background color for TOC container
Light Mode Default: var(--mainmenu-nav-link-color)
Dark Mode Default: (empty, transparent)

`--container-toc-color`

Description: Text color for TOC
Light Mode Default: var(--color-primary)
Dark Mode Default: #dbe3ff

Bootstrap Color Palette

Contextual Colors

`--primary`

Light Mode: #010156
Dark Mode: #010156
Usage: Primary theme color

`--secondary`

Light Mode: #6d757e
Dark Mode: #48525d
Usage: Secondary elements

`--success`

Light Mode: #448344
Dark Mode: #4aa664
Usage: Success messages, positive actions

`--info`

Light Mode: #30638d
Dark Mode: #4f7aa0
Usage: Informational messages

`--warning`

Light Mode: #ad6200
Dark Mode: #c77a00
Usage: Warning messages

`--danger`

Light Mode: #a51f18
Dark Mode: #c23a31
Usage: Error messages, destructive actions

`--light`

Light Mode: #f9fafb
Dark Mode: #1b2027
Usage: Light backgrounds

`--dark`

Light Mode: #353b41
Dark Mode: #0f1318
Usage: Dark backgrounds

Standard Colors

Available in both themes:

--blue, --indigo, --purple, --pink
--red, --orange, --yellow, --green
--teal, --cyan
--black, --white

Gray Scale

Available in 9 shades: --gray-100 through --gray-900

Light mode ranges from very light (#f9fafb) to very dark (#22262a). Dark mode ranges are inverted for better contrast on dark backgrounds.

Opacity Utilities

New in v03.08.04: Opacity utility variables for creating translucent colors:

--opacity-0: 0 (fully transparent)
--opacity-5: 0.05
--opacity-10: 0.1
--opacity-15: 0.15
--opacity-20: 0.2
--opacity-25: 0.25
--opacity-30: 0.3
--opacity-50: 0.5
--opacity-75: 0.75
--opacity-100: 1 (fully opaque)

Usage Example:

background-color: rgba(var(--black-rgb), var(--opacity-10));
border-color: rgba(var(--white-rgb), var(--opacity-25));

Shadow Color Utilities

New in v03.08.04: Pre-defined shadow color variables for consistent shadow styling:

Light Theme:

--shadow-color-light: rgba(var(--black-rgb), var(--opacity-15)) - Light shadows
--shadow-color-medium: rgba(var(--black-rgb), var(--opacity-25)) - Medium shadows
--shadow-color-dark: rgba(var(--black-rgb), var(--opacity-30)) - Dark shadows
--border-color-translucent: rgba(var(--black-rgb), var(--opacity-10)) - Translucent borders
--highlight-translucent: rgba(var(--white-rgb), var(--opacity-15)) - Highlight overlays

Dark Theme:

--shadow-color-light: rgba(var(--black-rgb), var(--opacity-30)) - Adjusted for dark backgrounds
--shadow-color-medium: rgba(var(--black-rgb), var(--opacity-50))
--shadow-color-dark: rgba(var(--black-rgb), var(--opacity-75))
--border-color-translucent: rgba(var(--white-rgb), var(--opacity-10))
--highlight-translucent: rgba(var(--white-rgb), var(--opacity-5))

Usage Example:

box-shadow: 0 0.5rem 1rem var(--shadow-color-light);
border: 1px solid var(--border-color-translucent);

Body & Typography

`--body-font-family`

Description: Default font stack for body text
Default: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif
Usage: All body text

`--body-font-size`

Description: Base font size
Default: 1rem (typically 16px)
Usage: Base typography size

`--body-font-weight`

Description: Default font weight
Default: 400
Usage: Body text weight

`--body-line-height`

Description: Line height for body text
Default: 1.5
Usage: Text line spacing

`--body-color`

Description: Main text color
Light Mode Default: #22262a
Dark Mode Default: #e6ebf1
Usage: Body text color

`--body-bg`

Description: Main background color
Light Mode Default: #fff
Dark Mode Default: #0e1318
Usage: Page background

`--heading-color`

Description: Color for headings (h1-h6)
Light Mode Default: inherit
Dark Mode Default: #f1f5f9
Usage: Heading text

Additional Theme Colors

`--muted-color`

Default: #6d757e
Usage: Muted/secondary text

`--code-color`

Light Mode: #e93f8e
Dark Mode: #ff7abd
Usage: Inline code elements

`--highlight-bg`

Light Mode: #fbeea8
Dark Mode: #ffe28a1a
Usage: Text highlighting, mark elements

`--emphasis-color`

Light Mode: #000
Dark Mode: #fff
Usage: Emphasized text

`--secondary-bg`

Light Mode: #eaedf0
Dark Mode: #151b22
Usage: Secondary backgrounds, alternate rows

`--tertiary-bg`

Light Mode: #f9fafb
Dark Mode: #10151b
Usage: Tertiary backgrounds, subtle contrast

Borders & Shadows

Border Variables

`--border`

Default: 5px
Usage: Border width shorthand

`--border-width`

Default: 1px
Usage: Standard border width

`--border-style`

Default: solid
Usage: Border style

`--border-color`

Light Mode: #dfe3e7
Dark Mode: #2b323b
Usage: Standard border color

`--border-color-translucent`

Light Mode: #0000002d
Dark Mode: #ffffff26
Usage: Semi-transparent borders

Border Radius

--border-radius: .25rem (default)
--border-radius-sm: .2rem (small)
--border-radius-lg: .3rem (large)
--border-radius-xl: .3rem (extra large)
--border-radius-xxl: 2rem (2x extra large)
--border-radius-pill: 50rem (pill-shaped)

Box Shadows

`--box-shadow`

Default: 0 .5rem 1rem rgba(0,0,0,.15)
Usage: Standard drop shadow

`--box-shadow-sm`

Default: 0 .125rem .25rem rgba(0,0,0,.075)
Usage: Small/subtle shadow

`--box-shadow-lg`

Default: 0 1rem 3rem rgba(0,0,0,.175)
Usage: Large/prominent shadow

`--box-shadow-inset`

Default: inset 0 1px 2px rgba(0,0,0,.075)
Usage: Inset/inner shadow

Bootstrap Button Variants

New in v03.08.04: Complete Bootstrap button color definitions for both light and dark themes.

Available Button Classes

All button variants support hover, active, focus, and disabled states using CSS variables:

Solid Buttons:

.btn-primary - Primary brand button
.btn-secondary - Secondary button
.btn-success - Success/positive action button
.btn-info - Informational button
.btn-warning - Warning/caution button
.btn-danger - Danger/destructive action button
.btn-light - Light background button
.btn-dark - Dark background button

Outline Buttons:

.btn-outline-primary through .btn-outline-dark - Outlined variants of above

Button CSS Variables

Each button variant defines the following CSS variables:

--btn-color: Text color
--btn-bg: Background color
--btn-border-color: Border color
--btn-hover-color: Hover state text color
--btn-hover-bg: Hover state background
--btn-hover-border-color: Hover state border
--btn-focus-shadow-rgb: Focus ring RGB values
--btn-active-color: Active state text color
--btn-active-bg: Active state background
--btn-active-border-color: Active state border
--btn-active-shadow: Active state shadow
--btn-disabled-color: Disabled state text color
--btn-disabled-bg: Disabled state background
--btn-disabled-border-color: Disabled state border

Customizing Button Colors

To customize button colors in your custom color palette:

:root[data-bs-theme="light"] {
  /* Override Bootstrap state colors */
  --success: #28a745;
  --danger: #dc3545;
}

.btn-primary {
  --btn-bg: var(--color-primary);
  --btn-border-color: var(--color-primary);
  /* Other button states... */
}

See templates/light.custom.css and templates/dark.custom.css for complete examples.

Button Utilities

`--btn-border-radius`

Description: Border radius for buttons
Default: 0.25rem
Usage: Button corner rounding

`--btn-box-shadow`

Description: Box shadow for buttons
Default: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075)
Usage: Button shadow styling

Card Variables

`--card-spacer-x`

Description: Horizontal spacing for card padding
Default: 1rem
Usage: Card horizontal padding

`--card-spacer-y`

Description: Vertical spacing for card padding
Default: 1rem
Usage: Card vertical padding

`--card-title-spacer-y`

Description: Spacing below card title
Default: 0.5rem
Usage: Card title bottom margin

`--card-border-width`

Description: Width of card border
Default: 1px
Usage: Card border thickness

`--card-border-color`

Description: Color of card border
Light Mode Default: rgba(0, 0, 0, 0.125)
Dark Mode Default: rgba(255, 255, 255, 0.125)
Usage: Card border color

`--card-border-radius`

Description: Border radius for cards
Default: 0.25rem
Usage: Card corner rounding

`--card-box-shadow`

Description: Box shadow for cards
Default: none
Usage: Card shadow effect

`--card-inner-border-radius`

Description: Inner border radius for nested card elements
Default: calc(0.25rem - 1px)
Usage: Inner card element corners

`--card-cap-padding-x`

Description: Horizontal padding for card header/footer
Default: 1rem
Usage: Card cap horizontal spacing

`--card-cap-padding-y`

Description: Vertical padding for card header/footer
Default: 0.5rem
Usage: Card cap vertical spacing

`--card-cap-bg`

Description: Background color for card header/footer
Light Mode Default: rgba(0, 0, 0, 0.03)
Dark Mode Default: rgba(255, 255, 255, 0.03)
Usage: Card cap background

`--card-cap-color`

Description: Text color for card header/footer
Default: Inherits from body color
Usage: Card cap text color

`--card-height`

Description: Height constraint for cards
Default: auto
Usage: Card height control

`--card-color`

Description: Text color for card content
Default: Inherits from body color
Usage: Card text color

`--card-bg`

Description: Background color for cards
Light Mode Default: #fff
Dark Mode Default: #212529
Usage: Card background

`--card-img-overlay-padding`

Description: Padding for card image overlays
Default: 1rem
Usage: Card image overlay spacing

`--card-group-margin`

Description: Margin between cards in card groups
Default: 0.75rem
Usage: Card group spacing

Form Colors

Focus Ring

`--focus-ring-width`

Default: .25rem
Usage: Width of focus indicators

`--focus-ring-opacity`

Light Mode: .25
Dark Mode: .6
Usage: Opacity of focus ring

`--focus-ring-color`

Light Mode: rgba(1,1,86,.25)
Dark Mode: rgba(84,114,255,.4)
Usage: Color of focus indicators

Validation Colors

Valid State

--form-valid-color: Success green
- Light: #448344
- Dark: #78d694
--form-valid-border-color: Matching border color

Invalid State

--form-invalid-color: Error red
- Light: #a51f18
- Dark: #ff8e86
--form-invalid-border-color: Matching border color

Form Control Enhancements

New in v03.08.04: Additional form control color variables:

`--input-file-button-active-bg`

Light Mode: #dee1e4
Dark Mode: #2b3441
Usage: Background color for file input button in active state

`--form-range-thumb-active-bg`

Light Mode: #b8bfcc
Dark Mode: #4a5766
Usage: Background color for range slider thumb in active state

Alert Link Colors

New in v03.08.04: Dedicated variables for alert link colors:

--alert-primary-link-color: Link color in primary alerts
--alert-secondary-link-color: Link color in secondary alerts
--alert-success-link-color: Link color in success alerts
--alert-info-link-color: Link color in info alerts
--alert-warning-link-color: Link color in warning alerts
--alert-danger-link-color: Link color in danger alerts
--alert-light-link-color: Link color in light alerts
--alert-dark-link-color: Link color in dark alerts

These ensure optimal readability for links within alert boxes.

Responsive Tokens & Breakpoints

Breakpoint Variables

`--bp-xs`

Description: Extra small breakpoint
Default: 0px
Usage: Mobile devices

`--bp-sm`

Description: Small breakpoint
Default: 576px
Usage: Small tablets, large phones

`--bp-md`

Description: Medium breakpoint
Default: 768px
Usage: Tablets

`--bp-lg`

Description: Large breakpoint
Default: 992px
Usage: Desktops

`--bp-xl`

Description: Extra large breakpoint
Default: 1200px
Usage: Large desktops

Responsive Utilities

`--nav-toggle-size`

Description: Size of navigation toggle button
Default: 40px
Usage: Mobile menu toggle button dimensions

`--bg-opacity`

Description: Background opacity for overlay elements
Default: 0.5
Usage: Overlay transparency

`--padding-x`

Description: General horizontal padding utility
Default: 1rem
Usage: Horizontal spacing utility

`--padding-y`

Description: General vertical padding utility
Default: 1rem
Usage: Vertical spacing utility

VirtueMart Variables

VM Surfaces

`--vm-surface`

Description: Primary VirtueMart surface background
Light Mode Default: #ffffff
Dark Mode Default: #1e1e1e
Usage: Main VM component backgrounds

`--vm-surface-2`

Description: Secondary VirtueMart surface background
Light Mode Default: #f8f9fa
Dark Mode Default: #2d2d2d
Usage: Alternate VM backgrounds

`--vm-text`

Description: Default VirtueMart text color
Light Mode Default: #212529
Dark Mode Default: #e9ecef
Usage: VM body text

`--vm-text-strong`

Description: Strong/emphasized VirtueMart text
Light Mode Default: #000000
Dark Mode Default: #ffffff
Usage: VM headings, emphasized text

`--vm-text-muted`

Description: Muted VirtueMart text
Light Mode Default: #6c757d
Dark Mode Default: #adb5bd
Usage: VM secondary text, captions

`--vm-border`

Description: Border color for VirtueMart components
Light Mode Default: #dee2e6
Dark Mode Default: #495057
Usage: VM borders, dividers

`--vm-price-color`

Description: Color for product prices
Light Mode Default: #198754
Dark Mode Default: #20c997
Usage: Product price display

VM Layout

`--vm-container-max-width`

Description: Maximum width for VM containers
Default: 1200px
Usage: VM content width constraint

`--vm-section-gap`

Description: Gap between VM sections
Default: 2rem
Usage: VM section spacing

`--vm-block-radius`

Description: Border radius for VM blocks
Default: 0.375rem
Usage: VM component corner rounding

`--vm-block-shadow`

Description: Shadow for VM blocks
Default: 0 2px 4px rgba(0, 0, 0, 0.1)
Usage: VM component shadows

VM Typography

`--vm-title-1-size`

Description: Size for h1 titles in VM
Default: 2.5rem
Usage: VM main headings

`--vm-title-1-weight`

Description: Font weight for h1 titles
Default: 700
Usage: VM main heading weight

`--vm-title-2-size`

Description: Size for h2 titles in VM
Default: 2rem
Usage: VM section headings

`--vm-title-2-weight`

Description: Font weight for h2 titles
Default: 600
Usage: VM section heading weight

`--vm-title-3-size`

Description: Size for h3 titles in VM
Default: 1.75rem
Usage: VM subsection headings

`--vm-title-3-weight`

Description: Font weight for h3 titles
Default: 600
Usage: VM subsection heading weight

`--vm-title-4-size`

Description: Size for h4 titles in VM
Default: 1.5rem
Usage: VM component headings

`--vm-title-4-weight`

Description: Font weight for h4 titles
Default: 500
Usage: VM component heading weight

`--vm-title-5-size`

Description: Size for h5 titles in VM
Default: 1.25rem
Usage: VM small headings

`--vm-title-5-weight`

Description: Font weight for h5 titles
Default: 500
Usage: VM small heading weight

VM Controls

`--vm-input-border`

Description: Border style for VM inputs
Light Mode Default: 1px solid #ced4da
Dark Mode Default: 1px solid #495057
Usage: VM form input borders

`--vm-input-bg`

Description: Background color for VM inputs
Light Mode Default: #ffffff
Dark Mode Default: #212529
Usage: VM form input backgrounds

`--vm-input-text`

Description: Text color for VM inputs
Light Mode Default: #212529
Dark Mode Default: #e9ecef
Usage: VM form input text

`--vm-qty-width`

Description: Width for quantity input fields
Default: 80px
Usage: Product quantity selectors

`--vm-cart-dropdown-min-width`

Description: Minimum width for cart dropdown
Default: 300px
Usage: Shopping cart dropdown sizing

VM Alerts

`--vm-alert-success-bg`

Description: Background for success alerts
Light Mode Default: #d1e7dd
Dark Mode Default: #0f5132
Usage: VM success messages

`--vm-alert-error-bg`

Description: Background for error alerts
Light Mode Default: #f8d7da
Dark Mode Default: #842029
Usage: VM error messages

`--vm-availability-in-stock`

Description: Color for in-stock indicator
Light Mode Default: #198754
Dark Mode Default: #20c997
Usage: Product availability display

`--vm-availability-out-of-stock`

Description: Color for out-of-stock indicator
Light Mode Default: #dc3545
Dark Mode Default: #ea868f
Usage: Product unavailability display

VM Buttons

`--vm-btn-padding-x`

Description: Horizontal padding for VM buttons
Default: 1rem
Usage: VM button horizontal spacing

`--vm-btn-padding-y`

Description: Vertical padding for VM buttons
Default: 0.5rem
Usage: VM button vertical spacing

`--vm-btn-radius`

Description: Border radius for VM buttons
Default: 0.25rem
Usage: VM button corner rounding

`--vm-btn-shadow`

Description: Shadow for VM buttons
Default: 0 2px 4px rgba(0, 0, 0, 0.1)
Usage: VM button shadows

`--vm-btn-primary-bg`

Description: Background for primary VM buttons
Light Mode Default: #0d6efd
Dark Mode Default: #0a58ca
Usage: Primary VM action buttons

`--vm-btn-primary-text`

Description: Text color for primary VM buttons
Default: #ffffff
Usage: Primary VM button text

`--vm-btn-secondary-bg`

Description: Background for secondary VM buttons
Light Mode Default: #6c757d
Dark Mode Default: #565e64
Usage: Secondary VM action buttons

`--vm-btn-secondary-text`

Description: Text color for secondary VM buttons
Default: #ffffff
Usage: Secondary VM button text

`--vm-btn-add-to-cart-bg`

Description: Background for add-to-cart button
Light Mode Default: #198754
Dark Mode Default: #146c43
Usage: Add to cart button styling

VM Image Overlays

`--vm-overlay-gap`

Description: Gap in image overlay elements
Default: 0.5rem
Usage: Spacing in product image overlays

`--vm-overlay-top`

Description: Top position for overlay elements
Default: 1rem
Usage: Overlay vertical positioning

`--vm-overlay-right`

Description: Right position for overlay elements
Default: 1rem
Usage: Overlay horizontal positioning

`--vm-overlay-btn-size`

Description: Size for overlay buttons
Default: 40px
Usage: Quick view, wishlist button dimensions

`--vm-overlay-btn-bg`

Description: Background for overlay buttons
Light Mode Default: rgba(255, 255, 255, 0.9)
Dark Mode Default: rgba(0, 0, 0, 0.9)
Usage: Overlay button background

`--vm-overlay-btn-text`

Description: Text color for overlay buttons
Light Mode Default: #212529
Dark Mode Default: #e9ecef
Usage: Overlay button text

`--vm-overlay-btn-hover-bg`

Description: Background for overlay buttons on hover
Light Mode Default: #ffffff
Dark Mode Default: #000000
Usage: Overlay button hover state

`--vm-overlay-btn-radius`

Description: Border radius for overlay buttons
Default: 50%
Usage: Circular overlay buttons

`--vm-overlay-btn-shadow`

Description: Shadow for overlay buttons
Default: 0 2px 8px rgba(0, 0, 0, 0.15)
Usage: Overlay button shadows

`--vm-vendor-menu-bg`

Description: Background for vendor menu
Light Mode Default: #ffffff
Dark Mode Default: #212529
Usage: Vendor menu background

`--vm-vendor-menu-text`

Description: Text color for vendor menu
Light Mode Default: #212529
Dark Mode Default: #e9ecef
Usage: Vendor menu text

`--vm-vendor-menu-border`

Description: Border for vendor menu
Light Mode Default: 1px solid #dee2e6
Dark Mode Default: 1px solid #495057
Usage: Vendor menu borders

`--vm-vendor-menu-hover-bg`

Description: Background on hover for vendor menu items
Light Mode Default: #f8f9fa
Dark Mode Default: #2d2d2d
Usage: Vendor menu hover state

`--vm-vendor-menu-active-bg`

Description: Background for active vendor menu items
Light Mode Default: #e9ecef
Dark Mode Default: #343a40
Usage: Active vendor menu item

`--vm-vendor-menu-active-text`

Description: Text color for active vendor menu items
Light Mode Default: #0d6efd
Dark Mode Default: #6ea8fe
Usage: Active vendor menu text

`--vm-vendor-menu-padding-x`

Description: Horizontal padding for vendor menu items
Default: 1rem
Usage: Vendor menu item horizontal spacing

`--vm-vendor-menu-padding-y`

Description: Vertical padding for vendor menu items
Default: 0.75rem
Usage: Vendor menu item vertical spacing

`--vm-vendor-menu-font-size`

Description: Font size for vendor menu
Default: 0.875rem
Usage: Vendor menu text size

`--vm-vendor-menu-font-weight`

Description: Font weight for vendor menu
Default: 400
Usage: Vendor menu text weight

`--vm-vendor-menu-radius`

Description: Border radius for vendor menu
Default: 0.25rem
Usage: Vendor menu corner rounding

`--vm-vendor-menu-shadow`

Description: Shadow for vendor menu
Default: 0 2px 4px rgba(0, 0, 0, 0.1)
Usage: Vendor menu drop shadow

`--vm-vendor-menu-width`

Description: Width for vendor menu
Default: 250px
Usage: Vendor menu sizing

`--vm-vendor-menu-item-gap`

Description: Gap between vendor menu items
Default: 0.25rem
Usage: Vendor menu item spacing

`--vm-vendor-menu-icon-size`

Description: Size for vendor menu icons
Default: 1.25rem
Usage: Vendor menu icon dimensions

Gable Variables

`--gab-blue`

Description: Gable primary blue color
Default: #1e88e5
Usage: Gable brand blue accent

`--gab-green`

Description: Gable green color
Default: #43a047
Usage: Gable success/positive indicators

`--gab-red`

Description: Gable red color
Default: #e53935
Usage: Gable error/alert indicators

`--gab-orange`

Description: Gable orange color
Default: #fb8c00
Usage: Gable warning indicators

`--gab-gray1`

Description: Gable light gray
Light Mode Default: #f5f5f5
Dark Mode Default: #424242
Usage: Gable light backgrounds

`--gab-gray2`

Description: Gable medium gray
Light Mode Default: #e0e0e0
Dark Mode Default: #616161
Usage: Gable medium backgrounds, borders

`--gab-gray3`

Description: Gable dark gray
Light Mode Default: #9e9e9e
Dark Mode Default: #9e9e9e
Usage: Gable text, icons

Usage Examples

Example 1: Custom Brand Colors

:root[data-bs-theme="light"] {
  --color-primary: #1e40af;
  --accent-color-primary: #3b82f6;
  --color-link: #2563eb;
  --color-hover: #1d4ed8;
}

Example 2: Custom Container Background

:root[data-bs-theme="light"] {
  --container-top-a-bg-color: #f3f4f6;
  --container-top-a-bg-image: url('/images/pattern.svg');
  --container-top-a-bg-repeat: repeat;
  --container-top-a-border-radius: 8px;
}

Example 3: Custom Typography

:root[data-bs-theme="light"] {
  --body-font-family: 'Inter', sans-serif;
  --body-font-size: 1.125rem;
  --heading-color: #1f2937;
}

Example 4: Custom Card Styling

:root[data-bs-theme="light"] {
  --card-border-radius: 0.5rem;
  --card-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  --card-spacer-x: 1.5rem;
  --card-spacer-y: 1.5rem;
}

Example 5: VirtueMart Custom Colors

:root[data-bs-theme="light"] {
  --vm-btn-primary-bg: #0d6efd;
  --vm-btn-add-to-cart-bg: #198754;
  --vm-price-color: #dc3545;
  --vm-surface: #ffffff;
}

:root[data-bs-theme="light"] {
  --navbar-padding-x: 1.5rem;
  --navbar-padding-y: 0.75rem;
  --nav-toggle-size: 48px;
  --navbar-toggler-border-radius: 0.5rem;
}

Tips for Customization

Start with templates: Use the provided template files as a starting point
Test both themes: Ensure your colors work well in both light and dark modes
Use CSS variables: Reference other variables with var() for consistency
Check contrast: Ensure text remains readable against backgrounds
Use fallbacks: Provide fallback values in var() functions
Test responsively: Verify colors work on all screen sizes
Document changes: Keep notes on custom color choices

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
Repository: https://github.com/mokoconsulting-tech/MokoCassiopeia
Path: /docs/CSS_VARIABLES.md
Owner: Moko Consulting
Version: 03.09.02
Status: Active
Effective Date: 2026-03-26
Classification: Public Open Source Documentation

Revision History

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

42 KiB Raw Blame History

CSS Variables Reference - MokoCassiopeia

Table of Contents

Using Custom Color Palettes

Primary Brand Colors

--color-primary

--accent-color-primary

--accent-color-secondary

Link Colors

--color-link

--color-hover

--color-active

--link-color

--link-hover-color

Navigation Colors

--mainmenu-nav-link-color

--nav-text-color

--nav-bg-color

Navbar Variables

--navbar-padding-x

--navbar-padding-y

--navbar-color

--navbar-active-color

--navbar-disabled-color

--navbar-brand-padding-y

--navbar-brand-margin-end

--navbar-brand-font-size

--navbar-brand-color

--navbar-brand-active-color

--navbar-toggler-padding-x

--navbar-toggler-padding-y

--navbar-toggler-font-size

--navbar-toggler-border-color

--navbar-toggler-border-radius

--navbar-toggler-focus-width

--navbar-toggler-transition

--nav-link-padding-x

--nav-link-padding-y

--nav-link-font-weight

--nav-link-color

--nav-link-active-color

--nav-link-disabled-color