diff --git a/CHANGELOG.md b/CHANGELOG.md index cc1c912..6fa4174 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,17 +8,45 @@ DEFGROUP: Joomla.Template.Site INGROUP: MokoCassiopeia.Documentation PATH: ./CHANGELOG.md - VERSION: 03.06.02 + VERSION: 03.06.03 BRIEF: Changelog file documenting version history of MokoCassiopeia --> -# Changelog — MokoCassiopeia (VERSION: 03.06.02) +# Changelog — MokoCassiopeia (VERSION: 03.06.03) All notable changes to the MokoCassiopeia Joomla template are documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## [03.06.03] - 2026-01-30 + +### Added +- **Templates Directory**: Created `/templates/` directory with ready-to-use color palette templates + - `colors_custom_light.css` - Comprehensive light mode color template with all available variables + - `colors_custom_dark.css` - Comprehensive dark mode color template with all available variables +- **CSS Variables Documentation**: Added complete CSS variables reference guide (`docs/CSS_VARIABLES.md`) + - Complete list of all customizable CSS variables + - Organized by category (colors, typography, borders, etc.) + - Usage examples and tips for customization + - Light and dark mode variable differences documented + +### Changed +- **README**: Updated title to "README - MokoCassiopeia (VERSION: 03.06.03)" +- **README**: Fixed custom color variables instructions with correct file paths +- **README**: Updated example CSS variables to use actual template variable names (e.g., `--color-link` instead of `--cassiopeia-color-link`) +- **README**: Added note that custom color files are excluded from version control via `.gitignore` +- **README**: Enhanced Custom Color Palettes section with step-by-step instructions +- **README**: Added link to CSS Variables documentation for complete reference +- **TOC CSS**: Updated bootstrap-toc.css to use template color variables for proper theme integration +- **Version**: Updated version to 03.06.03 across all files + +### Documentation +- **docs/README.md**: Added CSS Variables Reference to developer documentation section +- **docs/README.md**: Updated project structure to include `/templates/` directory +- **docs/README.md**: Updated version to 03.06.03 +- Clarified that `colors_custom.css` files are gitignored to prevent fork-specific customizations from being committed + ## [03.06.02] - 2026-01-30 ### Major Rebrand diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index 8bd6171..b0b170d 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -10,7 +10,7 @@ INGROUP: MokoCassiopeia.Governance REPO: https://github.com/mokoconsulting-tech/MokoCassiopeia FILE: CODE_OF_CONDUCT.md - VERSION: 03.06.02 + VERSION: 03.06.03 BRIEF: Contributor code of conduct for the MokoCassiopeia project. PATH: /CODE_OF_CONDUCT.md NOTE: This document defines behavioral expectations and enforcement processes. diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index ad19907..1b8f124 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -10,7 +10,7 @@ INGROUP: MokoCassiopeia.Governance REPO: https://github.com/mokoconsulting-tech/MokoCassiopeia FILE: CONTRIBUTING.md - VERSION: 03.06.02 + VERSION: 03.06.03 BRIEF: Contribution guidelines for the MokoCassiopeia project. PATH: /CONTRIBUTING.md NOTE: This document defines contribution workflow, standards, and governance alignment. diff --git a/GOVERNANCE.md b/GOVERNANCE.md index 9b01d65..b5f3f31 100644 --- a/GOVERNANCE.md +++ b/GOVERNANCE.md @@ -10,7 +10,7 @@ INGROUP: MokoCassiopeia.Governance REPO: https://github.com/mokoconsulting-tech/MokoCassiopeia FILE: GOVERNANCE.md - VERSION: 03.06.02 + VERSION: 03.06.03 BRIEF: Project governance model, roles, and decision processes for MokoCassiopeia. PATH: /GOVERNANCE.md NOTE: This document defines authority, decision making, and escalation paths. diff --git a/README.md b/README.md index 4f7a1e6..34eabf7 100644 --- a/README.md +++ b/README.md @@ -9,13 +9,12 @@ INGROUP: MokoCassiopeia.Documentation REPO: https://github.com/mokoconsulting-tech/MokoCassiopeia FILE: ./README.md - VERSION: 03.06.02 + VERSION: 03.06.03 BRIEF: Documentation for MokoCassiopeia template --> -# MokoCassiopeia +# README - MokoCassiopeia (VERSION: 03.06.03) -**Version:** 03.06.02 **A Modern, Lightweight Joomla Template Based on Cassiopeia** [![License: GPL v3](https://img.shields.io/badge/License-GPLv3-blue.svg)](https://www.gnu.org/licenses/gpl-3.0) @@ -206,23 +205,29 @@ Access template configuration via **System → Site Templates → MokoCassiopeia MokoCassiopeia supports custom color schemes: -1. Create `src/media/css/colors/light/colors_custom.css` for light mode -2. Create `src/media/css/colors/dark/colors_custom.css` for dark mode -3. Define CSS variables (reference `colors_standard.css` for structure) -4. Select "Custom" palette in template settings +1. **Copy template files** from `/templates/` directory: + - `colors_custom_light.css` → `media/templates/site/mokocassiopeia/css/colors/light/colors_custom.css` + - `colors_custom_dark.css` → `media/templates/site/mokocassiopeia/css/colors/dark/colors_custom.css` +2. **Customize** the CSS variables to match your brand colors +3. **Enable in Joomla**: System → Site Templates → MokoCassiopeia → Theme tab → Set palette to "Custom" +4. **Save** and view your site with custom colors -**Example CSS Variables:** +**Note:** Custom color files are excluded from version control (`.gitignore`) to prevent fork-specific customizations from being committed. + +**Quick Example:** ```css -:root { - --cassiopeia-color-primary: #1e40af; - --cassiopeia-color-link: #2563eb; - --cassiopeia-color-hover: #1d4ed8; - --cassiopeia-color-text: #1f2937; - --cassiopeia-color-bg: #ffffff; +:root[data-bs-theme="light"] { + --color-primary: #1e40af; + --color-link: #2563eb; + --color-hover: #1d4ed8; + --body-color: #1f2937; + --body-bg: #ffffff; } ``` +**Complete Reference:** See [CSS Variables Documentation](./docs/CSS_VARIABLES.md) for all available variables and detailed usage examples. + ### Table of Contents Enable automatic TOC for articles: @@ -318,8 +323,15 @@ See [Joomla Development Guide](./docs/JOOMLA_DEVELOPMENT.md) for packaging instr - **[Quick Start](./docs/QUICK_START.md)** - 5-minute developer setup - **[Development Guide](./docs/JOOMLA_DEVELOPMENT.md)** - Comprehensive development guide - **[Workflow Guide](./docs/WORKFLOW_GUIDE.md)** - Git workflow and processes +- **[CSS Variables Reference](./docs/CSS_VARIABLES.md)** - Complete CSS customization guide - **[Documentation Index](./docs/README.md)** - All documentation links +### Customization Resources + +- **[Template Files](./templates/)** - Ready-to-use color palette templates + - `colors_custom_light.css` - Light mode template + - `colors_custom_dark.css` - Dark mode template + ### Governance - **[Contributing](./CONTRIBUTING.md)** - How to contribute @@ -335,6 +347,7 @@ See the [CHANGELOG.md](./CHANGELOG.md) for detailed version history. ### Recent Releases +- **[03.06.03]** (2026-01-30) - README updates and TOC color variable improvements - **[03.06.02]** (2026-01-30) - Complete rebrand to MokoCassiopeia, removed all overrides - **[03.06.00]** (2026-01-28) - Version standardization - **[03.05.01]** (2026-01-09) - Security and compliance improvements @@ -479,6 +492,7 @@ All third-party libraries and assets remain the property of their respective aut | Date | Version | Change Summary | Author | | ---------- | -------- | ------------------------------------------------------------------------- | ------------------------------- | +| 2026-01-30 | 03.06.03 | Updated README title, fixed custom color variables instructions, improved TOC color scheme integration | Copilot Agent | | 2026-01-30 | 03.06.02 | Regenerated README with comprehensive documentation and updated structure | Copilot Agent | | 2026-01-30 | 03.06.02 | Complete rebrand to MokoCassiopeia, removed overrides | Copilot Agent | | 2026-01-05 | 03.00.00 | Initial publication of template documentation and feature overview | Moko Consulting | diff --git a/docs/CSS_VARIABLES.md b/docs/CSS_VARIABLES.md new file mode 100644 index 0000000..0cce5ae --- /dev/null +++ b/docs/CSS_VARIABLES.md @@ -0,0 +1,494 @@ + + +# CSS Variables Reference - MokoCassiopeia + +This document provides a complete reference of all CSS variables available in the MokoCassiopeia template for customization. + +## Table of Contents + +- [Using Custom Color Palettes](#using-custom-color-palettes) +- [Primary Brand Colors](#primary-brand-colors) +- [Link Colors](#link-colors) +- [Navigation Colors](#navigation-colors) +- [Header Background](#header-background) +- [Container Backgrounds](#container-backgrounds) +- [Bootstrap Color Palette](#bootstrap-color-palette) +- [Body & Typography](#body--typography) +- [Additional Theme Colors](#additional-theme-colors) +- [Borders & Shadows](#borders--shadows) +- [Form Colors](#form-colors) + +--- + +## Using Custom Color Palettes + +To create custom color schemes: + +1. **Copy template files** from `./templates/` directory: + - `colors_custom_light.css` → `media/templates/site/mokocassiopeia/css/colors/light/colors_custom.css` + - `colors_custom_dark.css` → `media/templates/site/mokocassiopeia/css/colors/dark/colors_custom.css` + +2. **Edit the variables** in the copied files to match your brand + +3. **Enable in Joomla**: + - Navigate to: System → Site Templates → MokoCassiopeia + - Under "Theme" tab, set palette to "Custom" + - Save changes + +4. **Note**: Custom files are gitignored and won't be committed to the repository + +--- + +## 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 + +--- + +## Navigation Colors + +### `--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 + +--- + +## 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. + +--- + +## 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 + +--- + +## 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 + +--- + +## Usage Examples + +### Example 1: Custom Brand Colors + +```css +:root[data-bs-theme="light"] { + --color-primary: #1e40af; + --accent-color-primary: #3b82f6; + --color-link: #2563eb; + --color-hover: #1d4ed8; +} +``` + +### Example 2: Custom Container Background + +```css +: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 + +```css +:root[data-bs-theme="light"] { + --body-font-family: 'Inter', sans-serif; + --body-font-size: 1.125rem; + --heading-color: #1f2937; +} +``` + +--- + +## Tips for Customization + +1. **Start with templates**: Use the provided template files as a starting point +2. **Test both themes**: Ensure your colors work well in both light and dark modes +3. **Use CSS variables**: Reference other variables with `var()` for consistency +4. **Check contrast**: Ensure text remains readable against backgrounds +5. **Use fallbacks**: Provide fallback values in `var()` functions +6. **Test responsively**: Verify colors work on all screen sizes +7. **Document changes**: Keep notes on custom color choices + +--- + +## See Also + +- [README](../README.md) - Main documentation +- [Quick Start Guide](./QUICK_START.md) - Getting started +- [Development Guide](./JOOMLA_DEVELOPMENT.md) - Developer resources +- Template files in `/templates/` directory + +--- + +## Metadata + +* Document: docs/CSS_VARIABLES.md +* Repository: [https://github.com/mokoconsulting-tech/MokoCassiopeia](https://github.com/mokoconsulting-tech/MokoCassiopeia) +* Path: /docs/CSS_VARIABLES.md +* Owner: Moko Consulting +* Version: 03.06.03 +* Status: Active +* Effective Date: 2026-01-30 +* Classification: Public Open Source Documentation + +## Revision History + +| Date | Change Summary | Author | +| ---------- | ----------------------------------------------------- | --------------- | +| 2026-01-30 | Initial CSS variables reference documentation created | GitHub Copilot | diff --git a/docs/JOOMLA_DEVELOPMENT.md b/docs/JOOMLA_DEVELOPMENT.md index 4c14bb4..135369f 100644 --- a/docs/JOOMLA_DEVELOPMENT.md +++ b/docs/JOOMLA_DEVELOPMENT.md @@ -354,3 +354,23 @@ For issues or questions: ## License All scripts and workflows are licensed under GPL-3.0-or-later, same as the main project. + +--- + +## Metadata + +* Document: docs/JOOMLA_DEVELOPMENT.md +* Repository: [https://github.com/mokoconsulting-tech/MokoCassiopeia](https://github.com/mokoconsulting-tech/MokoCassiopeia) +* Path: /docs/JOOMLA_DEVELOPMENT.md +* Owner: Moko Consulting +* Version: 03.06.03 +* Status: Active +* Effective Date: 2026-01-30 +* Classification: Public Open Source Documentation + +## Revision History + +| Date | Change Summary | Author | +| ---------- | ----------------------------------------------------- | --------------- | +| 2026-01-30 | Updated metadata to MokoStandards format | GitHub Copilot | +| 2025-01-04 | Initial Joomla development guide created | GitHub Copilot | diff --git a/docs/QUICK_START.md b/docs/QUICK_START.md index f8c2ebd..012541e 100644 --- a/docs/QUICK_START.md +++ b/docs/QUICK_START.md @@ -307,6 +307,20 @@ make help # Show all commands --- -**Document Version:** 1.0.0 -**Last Updated:** 2025-01-04 -**Get Started:** Run `make dev-setup` now! +## Metadata + +* Document: docs/QUICK_START.md +* Repository: [https://github.com/mokoconsulting-tech/MokoCassiopeia](https://github.com/mokoconsulting-tech/MokoCassiopeia) +* Path: /docs/QUICK_START.md +* Owner: Moko Consulting +* Version: 03.06.03 +* Status: Active +* Effective Date: 2026-01-30 +* Classification: Public Open Source Documentation + +## Revision History + +| Date | Change Summary | Author | +| ---------- | ----------------------------------------------------- | --------------- | +| 2026-01-30 | Updated metadata to MokoStandards format | GitHub Copilot | +| 2025-01-04 | Initial quick start guide created | GitHub Copilot | diff --git a/docs/README.md b/docs/README.md index 014149a..0d78550 100644 --- a/docs/README.md +++ b/docs/README.md @@ -10,7 +10,7 @@ INGROUP: MokoCassiopeia.Documentation REPO: https://github.com/mokoconsulting-tech/MokoCassiopeia FILE: docs/README.md - VERSION: 03.06.02 + VERSION: 03.06.03 BRIEF: Documentation index for MokoCassiopeia template PATH: /docs/README.md --> @@ -40,8 +40,14 @@ This directory contains comprehensive documentation for the MokoCassiopeia Jooml * Joomla extension packaging * Multi-version testing +* **[CSS Variables Reference](CSS_VARIABLES.md)** - Complete CSS customization guide + * All available CSS variables + * Custom color palette creation + * Usage examples and tips + * Light and dark mode theming + * **[Roadmap](ROADMAP.md)** - Version-specific roadmap - * Current features (v03.06.00) + * Current features (v03.06.03) * Feature evolution timeline * Planned enhancements * Development priorities @@ -59,10 +65,14 @@ moko-cassiopeia/ │ ├── QUICK_START.md # Quick start guide for developers │ ├── WORKFLOW_GUIDE.md # Development workflow guide │ ├── JOOMLA_DEVELOPMENT.md # Joomla-specific development guide +│ ├── CSS_VARIABLES.md # CSS variables reference │ └── ROADMAP.md # Version-specific roadmap ├── src/ # Template source code │ ├── templates/ # Joomla template files │ └── media/ # Assets (CSS, JS, images) +├── templates/ # Template files for customization +│ ├── colors_custom_light.css # Light mode color template +│ └── colors_custom_dark.css # Dark mode color template ├── tests/ # Automated tests └── .github/ # GitHub configuration and workflows ``` @@ -105,13 +115,15 @@ This project adheres to [MokoStandards](https://github.com/mokoconsulting-tech/M * Repository: [https://github.com/mokoconsulting-tech/MokoCassiopeia](https://github.com/mokoconsulting-tech/MokoCassiopeia) * Path: /docs/README.md * Owner: Moko Consulting -* Version: 03.06.02 +* Version: 03.06.03 * Status: Active -* Effective Date: 2026-01-09 +* Effective Date: 2026-01-30 +* Classification: Public Open Source Documentation ## Revision History | Date | Change Summary | Author | | ---------- | ----------------------------------------------------- | --------------- | +| 2026-01-30 | Added CSS Variables reference, updated version to 03.06.03 | GitHub Copilot | | 2026-01-09 | Initial documentation index created for MokoStandards compliance. | GitHub Copilot | | 2026-01-27 | Updated with roadmap link and version to 03.05.01. | GitHub Copilot | diff --git a/docs/ROADMAP.md b/docs/ROADMAP.md index 89d3a41..c71616c 100644 --- a/docs/ROADMAP.md +++ b/docs/ROADMAP.md @@ -10,12 +10,12 @@ INGROUP: MokoCassiopeia.Documentation REPO: https://github.com/mokoconsulting-tech/moko-cassiopeia FILE: docs/ROADMAP.md - VERSION: 03.06.02 + VERSION: 03.06.03 BRIEF: Version-specific roadmap for MokoCassiopeia template PATH: /docs/ROADMAP.md --> -# MokoCassiopeia Roadmap (VERSION: 03.06.02) +# MokoCassiopeia Roadmap (VERSION: 03.06.03) This document provides a comprehensive, version-specific roadmap for the MokoCassiopeia Joomla template, tracking feature evolution, current capabilities, and planned enhancements. @@ -24,7 +24,7 @@ This document provides a comprehensive, version-specific roadmap for the MokoCas - [Version Timeline](#version-timeline) - [Past Releases](#past-releases) - [Future Roadmap (5-Year Plan)](#future-roadmap-5-year-plan) -- [Current Release (v03.06.02)](#current-release-v030600) +- [Current Release (v03.06.03)](#current-release-v030603) - [Implemented Features](#implemented-features) - [Planned Features](#planned-features) - [Development Priorities](#development-priorities) @@ -437,7 +437,7 @@ The following versions represent our planned annual major releases, each buildin --- -## Current Release (v03.06.02) +## Current Release (v03.06.03) ### System Requirements - **Joomla**: 4.4.x or 5.x @@ -886,12 +886,12 @@ Have ideas for future features? We welcome community input! ## Metadata * Document: docs/ROADMAP.md -* Repository: [https://github.com/mokoconsulting-tech/moko-cassiopeia](https://github.com/mokoconsulting-tech/moko-cassiopeia) +* Repository: [https://github.com/mokoconsulting-tech/MokoCassiopeia](https://github.com/mokoconsulting-tech/MokoCassiopeia) * Path: /docs/ROADMAP.md * Owner: Moko Consulting -* Version: 03.06.02 +* Version: 03.06.03 * Status: Active -* Last Updated: 2026-01-27 +* Effective Date: 2026-01-30 * Classification: Public Open Source Documentation ## Revision History diff --git a/docs/WORKFLOW_GUIDE.md b/docs/WORKFLOW_GUIDE.md index d9aef1f..c06a240 100644 --- a/docs/WORKFLOW_GUIDE.md +++ b/docs/WORKFLOW_GUIDE.md @@ -440,6 +440,20 @@ phpcs --standard=phpcs.xml --report=source src/ --- -**Document Version:** 1.0.0 -**Last Updated:** 2025-01-04 -**Maintained by:** Moko Consulting Engineering +## Metadata + +* Document: docs/WORKFLOW_GUIDE.md +* Repository: [https://github.com/mokoconsulting-tech/MokoCassiopeia](https://github.com/mokoconsulting-tech/MokoCassiopeia) +* Path: /docs/WORKFLOW_GUIDE.md +* Owner: Moko Consulting +* Version: 03.06.03 +* Status: Active +* Effective Date: 2026-01-30 +* Classification: Public Open Source Documentation + +## Revision History + +| Date | Change Summary | Author | +| ---------- | ----------------------------------------------------- | --------------- | +| 2026-01-30 | Updated metadata to MokoStandards format | GitHub Copilot | +| 2025-01-04 | Initial workflow guide created | GitHub Copilot | diff --git a/src/media/vendor/bootstrap-toc/bootstrap-toc.css b/src/media/vendor/bootstrap-toc/bootstrap-toc.css index 35ba3c3..67cf784 100644 --- a/src/media/vendor/bootstrap-toc/bootstrap-toc.css +++ b/src/media/vendor/bootstrap-toc/bootstrap-toc.css @@ -2,6 +2,8 @@ * Bootstrap Table of Contents v1.0.1 (https://afeld.github.io/bootstrap-toc/) * Copyright 2015 Aidan Feldman * Licensed under MIT (https://github.com/afeld/bootstrap-toc/blob/gh-pages/LICENSE.md) + * + * Modified for MokoCassiopeia to use template color variables for theme integration */ /* All levels of nav */ @@ -10,24 +12,24 @@ nav[data-toggle='toc'] .nav > li > a { padding: 4px 20px; font-size: 13px; font-weight: 500; - color: var(--cassiopeia-color-link, #0d6efd); + color: var(--link-color, var(--color-link, #0d6efd)); } nav[data-toggle='toc'] .nav > li > a:hover, nav[data-toggle='toc'] .nav > li > a:focus { padding-left: 19px; - color: var(--cassiopeia-color-hover, #0a58ca); + color: var(--link-hover-color, var(--color-hover, #0a58ca)); text-decoration: none; background-color: transparent; - border-left: 1px solid var(--cassiopeia-color-primary, #0d6efd); + border-left: 1px solid var(--link-color, var(--color-link, #0d6efd)); } nav[data-toggle='toc'] .nav > .active > a, nav[data-toggle='toc'] .nav > .active:hover > a, nav[data-toggle='toc'] .nav > .active:focus > a { padding-left: 18px; font-weight: bold; - color: var(--cassiopeia-color-primary, #0d6efd); + color: var(--link-color, var(--color-link, #0d6efd)); background-color: transparent; - border-left: 2px solid var(--cassiopeia-color-primary, #0d6efd); + border-left: 2px solid var(--link-color, var(--color-link, #0d6efd)); } /* Nav: second level (shown on .active) */ diff --git a/src/templates/templateDetails.xml b/src/templates/templateDetails.xml index d3264e9..29e6158 100644 --- a/src/templates/templateDetails.xml +++ b/src/templates/templateDetails.xml @@ -11,7 +11,7 @@ DEFGROUP: Joomla INGROUP: MokoCassiopeia PATH: templates/mokocassiopeia/templateDetails.xml - VERSION: 03.06.02 + VERSION: 03.06.03 BRIEF: Template manifest XML file for MokoCassiopeia ========================================================================= --> @@ -22,7 +22,7 @@ mokocassiopeia - 03.06.02 + 03.06.03 2025-12-23 Jonathan Miller || Moko Consulting hello@mokoconsulting.tech diff --git a/templates/colors_custom_dark.css b/templates/colors_custom_dark.css new file mode 100644 index 0000000..18b8655 --- /dev/null +++ b/templates/colors_custom_dark.css @@ -0,0 +1,245 @@ +@charset "UTF-8"; +/* Copyright (C) 2025 Moko Consulting + + This file is part of a Moko Consulting project. + + SPDX-License-Identifier: GPL-3.0-or-later + + # FILE INFORMATION + DEFGROUP: Joomla.Template.Site + INGROUP: MokoCassiopeia.Templates + PATH: ./templates/colors_custom_dark.css + VERSION: 03.06.03 + BRIEF: Template for custom dark mode color definitions + + # USAGE INSTRUCTIONS + 1. Copy this file to: media/templates/site/mokocassiopeia/css/colors/dark/colors_custom.css + 2. Customize the CSS variables below to match your brand colors for dark mode + 3. In Joomla admin, go to System → Site Templates → MokoCassiopeia + 4. Under Theme tab, set "Dark Mode Palette" to "Custom" + 5. Save and view your site in dark mode to see the custom colors + + NOTE: This file is excluded from version control (.gitignore) to prevent + fork-specific customizations from being committed to the repository. + */ + +/* ----------------------------------------------- + * CUSTOM DARK THEME + * --------------------------------------------- */ + +:root[data-bs-theme='dark']{ + /* System hint for native widgets */ + color-scheme: dark; + + /* ===== PRIMARY BRAND COLORS ===== */ + /* Main brand color used throughout the template */ + --color-primary: #112855; + + /* Accent colors for interactive elements */ + --accent-color-primary: #3f8ff0; + --accent-color-secondary: #6fb3ff; + + /* ===== LINK COLORS ===== */ + /* Color for hyperlinks in dark mode */ + --color-link: white; + + /* Color when hovering over links */ + --color-hover: gray; + + /* Active link color */ + --color-active: var(--mainmenu-nav-link-color); + + /* ===== NAVIGATION ===== */ + /* Text color in main menu */ + --mainmenu-nav-link-color: #fff; + + /* Background color for navigation */ + --nav-text-color: gray; + --nav-bg-color: var(--color-primary); + + /* ===== HEADER BACKGROUND ===== */ + /* Background image for header section (same as light mode) */ + --header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg'); + --header-background-attachment: fixed; + --header-background-repeat: repeat; + --header-background-size: auto; + + /* ===== CONTAINER BACKGROUNDS ===== */ + /* Below Topbar Container */ + --container-below-topbar-bg-image: ; + --container-below-topbar-bg-color: ; + --container-below-topbar-bg-position: center; + --container-below-topbar-bg-attachment: fixed; + --container-below-topbar-bg-repeat: no-repeat; + --container-below-topbar-bg-size: cover; + --container-below-topbar-border: ; + --container-below-topbar-border-radius: ; + + /* Top A Container */ + --container-top-a-bg-image: ; + --container-top-a-bg-color: ; + --container-top-a-bg-position: center; + --container-top-a-bg-attachment: fixed; + --container-top-a-bg-repeat: no-repeat; + --container-top-a-bg-size: cover; + --container-top-a-border: ; + --container-top-a-border-radius: ; + + /* Top B Container */ + --container-top-b-bg-image: ; + --container-top-b-bg-color: ; + --container-top-b-bg-position: center; + --container-top-b-bg-attachment: fixed; + --container-top-b-bg-repeat: no-repeat; + --container-top-b-bg-size: cover; + --container-top-b-border: ; + --container-top-b-border-radius: ; + + /* Table of Contents Container */ + --container-toc-bg: ; + --container-toc-color: #dbe3ff; + + /* Sidebar Container */ + --container-sidebar-bg-image: ; + --container-sidebar-bg-color: ; + --container-sidebar-bg-position: center; + --container-sidebar-bg-attachment: scroll; + --container-sidebar-bg-repeat: repeat; + --container-sidebar-bg-size: auto; + --container-sidebar-border: ; + --container-sidebar-border-radius: ; + + /* Bottom A Container */ + --container-bottom-a-bg-image: ; + --container-bottom-a-bg-color: ; + --container-bottom-a-bg-position: center; + --container-bottom-a-bg-attachment: fixed; + --container-bottom-a-bg-repeat: no-repeat; + --container-bottom-a-bg-size: cover; + --container-bottom-a-border: ; + --container-bottom-a-border-radius: ; + + /* Bottom B Container */ + --container-bottom-b-bg-image: ; + --container-bottom-b-bg-color: ; + --container-bottom-b-bg-position: center; + --container-bottom-b-bg-attachment: fixed; + --container-bottom-b-bg-repeat: no-repeat; + --container-bottom-b-bg-size: cover; + --container-bottom-b-border: ; + --container-bottom-b-border-radius: ; + + /* ===== BOOTSTRAP 5 COLOR PALETTE (Dark Mode) ===== */ + /* Lightened colors for dark mode visibility */ + --blue: #91a4ff; + --black: #000; + --indigo: #b19cff; + --purple: #c0a5ff; + --pink: #ff8fc0; + --red: #ff7a73; + --orange: #ff9c4d; + --yellow: #ffd166; + --green: #78d694; + --teal: #76e3ff; + --cyan: #6fb7ff; + --white: #fff; + + /* Gray scale tuned for dark mode */ + --gray-100: #161a20; + --gray-200: #1b2027; + --gray-300: #222831; + --gray-400: #2b323b; + --gray-500: #36404a; + --gray-600: #48525d; + --gray-700: #5b6672; + --gray-800: #cfd6de; + --gray-900: #e6ebf1; + + /* Contextual colors (adjusted for dark backgrounds) */ + --primary: #010156; + --secondary: #48525d; + --success: #4aa664; + --info: #4f7aa0; + --warning: #c77a00; + --danger: #c23a31; + --light: #1b2027; + --dark: #0f1318; + + /* ===== BODY & TYPOGRAPHY ===== */ + --body-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; + --body-font-size: 1rem; + --body-font-weight: 400; + --body-line-height: 1.5; + + --body-color: #e6ebf1; + --body-color-rgb: 230, 235, 241; + --body-bg: #0e1318; + --body-bg-rgb: 14, 19, 24; + + /* ===== ADDITIONAL THEME COLORS ===== */ + --muted-color: #6d757e; + --hr-color: var(--border-color, #dfe3e7); + --link-active-color: var(--link-color); + --code-color: #ff7abd; + --code-color-ink: var(--code-color, #e93f8e); + --border-color-soft: var(--border-color, #dfe3e7); + --kbd-bg: var(--secondary-bg, #eaedf0); + --kbd-ink: var(--body-bg, #fff); + --toc-bg: var(--secondary-bg, #eaedf0); + --toc-ink: var(--color-primary, #112855); + --selection-bg: var(--highlight-bg, #fbeea8); + --selection-ink: var(--body-color, #22262a); + + --emphasis-color: #fff; + --emphasis-color-rgb: 255, 255, 255; + + --secondary-color: #e6ebf1bf; + --secondary-color-rgb: 230, 235, 241; + --secondary-bg: #151b22; + --secondary-bg-rgb: 21, 27, 34; + + --tertiary-color: #e6ebf180; + --tertiary-color-rgb: 230, 235, 241; + --tertiary-bg: #10151b; + --tertiary-bg-rgb: 16, 21, 27; + + --heading-color: #f1f5f9; + + --link-color: #8ab4f8; + --link-color-rgb: 138, 180, 248; + --link-decoration: underline; + --link-hover-color: #c3d6ff; + --link-hover-color-rgb: 195, 214, 255; + + --highlight-color: #111; + --highlight-bg: #ffe28a1a; + + /* ===== BORDERS & SHADOWS ===== */ + --border: 5px; + --border-width: 1px; + --border-style: solid; + --border-color: #2b323b; + --border-color-translucent: #ffffff26; + + --border-radius: .25rem; + --border-radius-sm: .2rem; + --border-radius-lg: .3rem; + --border-radius-xl: .3rem; + --border-radius-xxl: 2rem; + --border-radius-pill: 50rem; + + --box-shadow: 0 .5rem 1rem #00000066; + --box-shadow-sm: 0 .125rem .25rem #00000040; + --box-shadow-lg: 0 1rem 3rem #00000080; + --box-shadow-inset: inset 0 1px 2px #00000040; + + /* ===== FORM COLORS ===== */ + --focus-ring-width: .25rem; + --focus-ring-opacity: .6; + --focus-ring-color: #5472ff66; + + --form-valid-color: #78d694; + --form-valid-border-color: #78d694; + --form-invalid-color: #ff8e86; + --form-invalid-border-color: #ff8e86; +} diff --git a/templates/colors_custom_light.css b/templates/colors_custom_light.css new file mode 100644 index 0000000..4a4c77f --- /dev/null +++ b/templates/colors_custom_light.css @@ -0,0 +1,227 @@ +@charset "UTF-8"; +/* Copyright (C) 2025 Moko Consulting + + This file is part of a Moko Consulting project. + + SPDX-License-Identifier: GPL-3.0-or-later + + # FILE INFORMATION + DEFGROUP: Joomla.Template.Site + INGROUP: MokoCassiopeia.Templates + PATH: ./templates/colors_custom_light.css + VERSION: 03.06.03 + BRIEF: Template for custom light mode color definitions + + # USAGE INSTRUCTIONS + 1. Copy this file to: media/templates/site/mokocassiopeia/css/colors/light/colors_custom.css + 2. Customize the CSS variables below to match your brand colors + 3. In Joomla admin, go to System → Site Templates → MokoCassiopeia + 4. Under Theme tab, set "Light Mode Palette" to "Custom" + 5. Save and view your site to see the custom colors + + NOTE: This file is excluded from version control (.gitignore) to prevent + fork-specific customizations from being committed to the repository. + */ + +/* ----------------------------------------------- + * CUSTOM LIGHT THEME + * --------------------------------------------- */ + +:root[data-bs-theme="light"] { + color-scheme: light; + + /* ===== PRIMARY BRAND COLORS ===== */ + /* Main brand color used throughout the template */ + --color-primary: #112855; + + /* Accent colors for interactive elements */ + --accent-color-primary: #3f8ff0; + --accent-color-secondary: #3f8ff0; + + /* ===== LINK COLORS ===== */ + /* Color for hyperlinks */ + --color-link: #224FAA; + + /* Color when hovering over links */ + --color-hover: var(--accent-color-primary); + + /* ===== NAVIGATION ===== */ + /* Text color in main menu */ + --mainmenu-nav-link-color: white; + + /* Background color for navigation */ + --nav-text-color: white; + --nav-bg-color: var(--color-link); + + /* ===== HEADER BACKGROUND ===== */ + /* Background image for header section */ + --header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg'); + --header-background-attachment: fixed; + --header-background-repeat: repeat; + --header-background-size: auto; + + /* ===== CONTAINER BACKGROUNDS ===== */ + /* Below Topbar Container */ + --container-below-topbar-bg-image: ; + --container-below-topbar-bg-color: ; + --container-below-topbar-bg-position: center; + --container-below-topbar-bg-attachment: fixed; + --container-below-topbar-bg-repeat: repeat; + --container-below-topbar-bg-size: auto; + --container-below-topbar-border: ; + --container-below-topbar-border-radius: ; + + /* Top A Container */ + --container-top-a-bg-image: ; + --container-top-a-bg-color: ; + --container-top-a-bg-position: center; + --container-top-a-bg-attachment: fixed; + --container-top-a-bg-repeat: repeat; + --container-top-a-bg-size: auto; + --container-top-a-border: ; + --container-top-a-border-radius: ; + + /* Top B Container */ + --container-top-b-bg-image: ; + --container-top-b-bg-color: ; + --container-top-b-bg-position: center; + --container-top-b-bg-attachment: fixed; + --container-top-b-bg-repeat: repeat; + --container-top-b-bg-size: auto; + --container-top-b-border: ; + --container-top-b-border-radius: ; + + /* Table of Contents Container */ + --container-toc-bg: var(--mainmenu-nav-link-color); + --container-toc-color: var(--color-primary); + + /* Sidebar Container */ + --container-sidebar-bg-image: ; + --container-sidebar-bg-color: ; + --container-sidebar-bg-position: center; + --container-sidebar-bg-attachment: scroll; + --container-sidebar-bg-repeat: repeat; + --container-sidebar-bg-size: auto; + --container-sidebar-border: ; + --container-sidebar-border-radius: ; + + /* Bottom A Container */ + --container-bottom-a-bg-image: ; + --container-bottom-a-bg-color: ; + --container-bottom-a-bg-position: center; + --container-bottom-a-bg-attachment: fixed; + --container-bottom-a-bg-repeat: repeat; + --container-bottom-a-bg-size: auto; + --container-bottom-a-border: ; + --container-bottom-a-border-radius: ; + + /* Bottom B Container */ + --container-bottom-b-bg-image: ; + --container-bottom-b-bg-color: ; + --container-bottom-b-bg-position: center; + --container-bottom-b-bg-attachment: fixed; + --container-bottom-b-bg-repeat: repeat; + --container-bottom-b-bg-size: auto; + --container-bottom-b-border: ; + --container-bottom-b-border-radius: ; + + /* ===== BOOTSTRAP 5 COLOR PALETTE ===== */ + /* Standard Bootstrap color variables */ + --blue: #010156; + --black: #000; + --indigo: #6812f3; + --purple: #6f42c2; + --pink: #e93f8e; + --red: #a51f18; + --orange: #fd7e17; + --yellow: #ad6200; + --green: #448344; + --teal: #5abfdd; + --cyan: #30638d; + --white: #fff; + + /* Gray scale */ + --gray-100: #f9fafb; + --gray-200: #eaedf0; + --gray-300: #dfe3e7; + --gray-400: #ced4da; + --gray-500: #adb5bd; + --gray-600: #6d757e; + --gray-700: #484f56; + --gray-800: #353b41; + --gray-900: #22262a; + + /* Contextual colors */ + --primary: #010156; + --secondary: #6d757e; + --success: #448344; + --info: #30638d; + --warning: #ad6200; + --danger: #a51f18; + --light: #f9fafb; + --dark: #353b41; + + /* ===== BODY & TYPOGRAPHY ===== */ + --body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; + --body-font-size: 1rem; + --body-font-weight: 400; + --body-line-height: 1.5; + --body-color: #22262a; + --body-color-rgb: 34, 38, 42; + --body-bg: #fff; + --body-bg-rgb: 255, 255, 255; + + /* ===== ADDITIONAL THEME COLORS ===== */ + --muted-color: #6d757e; + --hr-color: var(--border-color, #dfe3e7); + --link-active-color: var(--link-color); + --code-color: #e93f8e; + --code-color-ink: var(--code-color, #e93f8e); + --border-color-soft: var(--border-color, #dfe3e7); + --kbd-bg: var(--secondary-bg, #eaedf0); + --kbd-ink: var(--body-bg, #fff); + --toc-bg: var(--secondary-bg, #eaedf0); + --toc-ink: var(--color-primary, #112855); + --selection-bg: var(--highlight-bg, #fbeea8); + --selection-ink: var(--body-color, #22262a); + --emphasis-color: #000; + --emphasis-color-rgb: 0, 0, 0; + --secondary-color: #22262abf; + --secondary-bg: #eaedf0; + --tertiary-color: #22262a80; + --tertiary-bg: #f9fafb; + --heading-color: inherit; + --link-color: #224faa; + --link-color-rgb: 34, 79, 170; + --link-decoration: underline; + --link-hover-color: #424077; + --link-hover-color-rgb: 66, 64, 119; + --highlight-color: #22262a; + --highlight-bg: #fbeea8; + + /* ===== BORDERS & SHADOWS ===== */ + --border: 5px; + --border-width: 1px; + --border-style: solid; + --border-color: #dfe3e7; + --border-color-translucent: #0000002d; + --border-radius: .25rem; + --border-radius-sm: .2rem; + --border-radius-lg: .3rem; + --border-radius-xl: .3rem; + --border-radius-xxl: 2rem; + --border-radius-pill: 50rem; + --box-shadow: 0 .5rem 1rem #00000026; + --box-shadow-sm: 0 .125rem .25rem #00000013; + --box-shadow-lg: 0 1rem 3rem #0000002d; + --box-shadow-inset: inset 0 1px 2px #00000013; + + /* ===== FORM COLORS ===== */ + --focus-ring-width: .25rem; + --focus-ring-opacity: .25; + --focus-ring-color: #01015640; + --form-valid-color: #448344; + --form-valid-border-color: #448344; + --form-invalid-color: #a51f18; + --form-invalid-border-color: #a51f18; +} diff --git a/updates.xml b/updates.xml index f85b40c..d08f194 100644 --- a/updates.xml +++ b/updates.xml @@ -10,7 +10,7 @@ INGROUP: MokoCassiopeia REPO: https://github.com/mokoconsulting-tech/MokoCassiopeia PATH: ./updates.xml - VERSION: 03.06.02 + VERSION: 03.06.03 BRIEF: Update manifest XML file for MokoCassiopeia --> @@ -22,7 +22,7 @@ template site - 03.06.02 + 03.06.03 2025-12-12 Jonathan Miller || Moko Consulting hello@mokoconsulting.tech