MokoConsulting/MokoCassiopeia
1
1
Fork 0
Code Issues 4 Pull Requests Actions Packages Releases 1 Activity

Remove client fork infrastructure and update nav padding

Browse Source 
- Remove client fork automation script and workflow
- Remove client fork documentation and templates
- Update .container-header nav padding to 0 2rem

Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
2026-03-07 20:37:06 +00:00
parent 6b2ba5548f
commit e8a432c82a
6 changed files with 1 additions and 1135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
.github/workflows/create-client-fork.yml vendored
View File

@@ -1,129 +0,0 @@
---
# Copyright (C) 2026 Moko Consulting <hello@mokoconsulting.tech>
#
# SPDX-License-Identifier: GPL-3.0-or-later
#
# GitHub Actions Workflow: Create Client Fork (Colors Only)
name: Create Client Fork (Colors Only)
"on":
workflow_dispatch:
inputs:
client_name:
description: 'Client Name (e.g., "Acme Corporation")'
required: true
type: string
confirm:
description: 'Type "CONFIRM" to proceed'
required: true
type: string
jobs:
create-fork:
name: Setup Client Fork
runs-on: ubuntu-latest
permissions:
contents: write
steps:
- name: Validate confirmation
if: ${{ inputs.confirm != 'CONFIRM' }}
run: |
echo "::error::Type CONFIRM to proceed"
exit 1
- name: Checkout repository
uses: actions/checkout@v4
with:
token: ${{ secrets.GITHUB_TOKEN }}
- name: Setup Git
run: |
git config user.name "github-actions[bot]"
git config user.email "github-actions[bot]@users.noreply.github.com"
- name: Create client fork branch
run: |
CLIENT_NAME="${{ inputs.client_name }}"
CLIENT_SLUG=$(echo "${CLIENT_NAME}" | tr '[:upper:]' '[:lower:]' | tr ' ' '-')
BRANCH_NAME="client-fork/${CLIENT_SLUG}"
git checkout -b "${BRANCH_NAME}"
echo "BRANCH_NAME=${BRANCH_NAME}" >> $GITHUB_ENV
echo "CLIENT_SLUG=${CLIENT_SLUG}" >> $GITHUB_ENV
- name: Copy custom color templates
run: |
echo "Copying colors_custom.css..."
mkdir -p src/media/css/colors/light
mkdir -p src/media/css/colors/dark
cp templates/colors_custom.css src/media/css/colors/light/colors_custom.css
cp templates/colors_custom.css src/media/css/colors/dark/colors_custom.css
if [ -f "src/media/css/colors/light/colors_custom.css" ]; then
echo "✓ Created light mode colors_custom.css"
else
echo "::error::Failed to create light mode colors_custom.css"
exit 1
fi
if [ -f "src/media/css/colors/dark/colors_custom.css" ]; then
echo "✓ Created dark mode colors_custom.css"
else
echo "::error::Failed to create dark mode colors_custom.css"
exit 1
fi
- name: Apply client fork .gitignore
run: |
echo "Setting up .gitignore to track custom color files..."
cp templates/gitignore-template .gitignore
echo "✓ Applied client fork .gitignore template"
echo "✓ Custom color files will be tracked in this fork"
- name: Commit changes
run: |
git add .
git status
if git diff --staged --quiet; then
echo "No changes to commit"
else
git commit -m "Setup client fork for ${{ inputs.client_name }} (colors only)" \
-m "Copied colors_custom.css to src/media/css/colors/" \
-m "Applied client fork .gitignore template to track custom color files" \
-m "Kept templates/colors_custom.css as reference"
echo "✓ Changes committed"
fi
- name: Push branch
run: |
git push origin "${BRANCH_NAME}"
echo "✓ Branch ${BRANCH_NAME} pushed"
- name: Summary
run: |
cat >> $GITHUB_STEP_SUMMARY << EOF
## Client Fork Setup Complete! 🎉
### Changes Applied
- ✓ Copied colors_custom.css to src/media/css/colors/light/
- ✓ Copied colors_custom.css to src/media/css/colors/dark/
- ✓ Applied client fork .gitignore template
- ✓ Custom color files will be tracked in this fork
### Next Steps
1. Review branch: \`${BRANCH_NAME}\`
2. Customize colors in src/media/css/colors/light/colors_custom.css
3. Customize colors in src/media/css/colors/dark/colors_custom.css
4. Test colors in both light and dark modes
5. Create new repository for ${{ inputs.client_name }}
6. Push branch to new repository
7. In Joomla: System → Site Templates → MokoCassiopeia → Theme tab
8. Set palette to 'Custom' and save
### Branch Information
- **Branch**: \`${BRANCH_NAME}\`
- **Client**: ${{ inputs.client_name }}
- **Scope**: Custom colors only
EOF

336
docs/CLIENT_FORK_WORKFLOW.md
View File

@@ -1,336 +0,0 @@
<!-- Copyright (C) 2026 Moko Consulting <hello@mokoconsulting.tech>
SPDX-License-Identifier: GPL-3.0-or-later
BRIEF: Documentation for client fork creation workflow (colors only)
-->
# Client Fork Creation Workflow (Colors Only)
This document explains how to use the automated client fork creation tools to set up a new client-specific fork of MokoCassiopeia for custom color branding.
---
## Overview
The client fork creation workflow automates the process of preparing a repository for a client-specific color fork. It performs the following actions:
1. ✅ Copies `templates/colors_custom.css` to `src/media/css/colors/light/colors_custom.css`
2. ✅ Copies `templates/colors_custom.css` to `src/media/css/colors/dark/colors_custom.css`
3. ✅ Applies client fork `.gitignore` template that tracks custom color files
4. ✅ Keeps `templates/colors_custom.css` as a reference template
**Scope**: Client forks are limited to custom color branding only. All other customizations should be made through Joomla's template settings.
---
## Method 1: GitHub Actions Workflow (Recommended)
### Prerequisites
- Repository admin or maintainer access
- GitHub Actions enabled for the repository
### Steps
1. **Navigate to Actions**
- Go to your repository on GitHub
- Click on the "Actions" tab
2. **Run the Workflow**
- Select "Create Client Fork (Colors Only)" from the workflow list
- Click "Run workflow"
- Fill in the required inputs:
- **Client Name**: Full client name (e.g., "Acme Corporation")
- **Confirm**: Type "CONFIRM" to proceed
- Click "Run workflow" button
3. **Monitor Progress**
- The workflow will create a new branch named `client-fork/{client-slug}`
- You can monitor the progress in the Actions tab
- Once complete, you'll see a summary of changes
4. **Review the Branch**
- Navigate to the new branch: `client-fork/{client-slug}`
- Review the changes made
- Custom color files will be in place and tracked
- Upstream README and documentation remain unchanged
5. **Create Client Repository**
- Create a new repository for the client
- Push the branch to the new repository:
```bash
git remote add client-repo <CLIENT_REPO_URL>
git push client-repo client-fork/{client-slug}:main
```
### Workflow Features
- ✅ **Safe Confirmation**: Requires typing "CONFIRM" to prevent accidental runs
- ✅ **Automated Branch Creation**: Creates a properly named branch automatically
- ✅ **Color File Setup**: Copies color templates to both light and dark directories
- ✅ **Git Tracking**: Custom colors tracked via client fork .gitignore
- ✅ **Summary Report**: Provides a complete summary of actions taken
---
## Method 2: Local Bash Script
### Prerequisites
- Git installed on your local machine
- Bash shell (Linux, macOS, or Git Bash on Windows)
- Local clone of the MokoCassiopeia repository
### Steps
1. **Clone the Repository**
```bash
git clone https://github.com/mokoconsulting-tech/MokoCassiopeia.git
cd MokoCassiopeia
```
2. **Make Script Executable**
```bash
chmod +x scripts/create-client-fork.sh
```
3. **Run the Script**
```bash
./scripts/create-client-fork.sh "Client Name"
```
Example:
```bash
./scripts/create-client-fork.sh "Acme Corporation"
```
4. **Confirm Actions**
- The script will show you what it will do
- Type "yes" to proceed
- Review the changes shown
- Type "yes" to commit
5. **Push to New Repository**
```bash
# Add the client's repository as a remote
git remote add client-repo <CLIENT_REPO_URL>
# Push the branch
git push client-repo client-fork/{client-slug}:main
```
### Script Features
- 🎨 **Colored Output**: Easy-to-read colored terminal output
- ✅ **Interactive Confirmation**: Asks for confirmation before making changes
- ✅ **Safety Checks**: Verifies you're in the correct directory
- ✅ **Progress Indicators**: Shows each step as it completes
- ✅ **Git Status**: Shows what files changed before committing
- ✅ **Summary**: Provides a complete summary at the end
---
## What Gets Changed
### Files Created
```
src/media/css/colors/light/colors_custom.css [NEW - TRACKED]
src/media/css/colors/dark/colors_custom.css [NEW - TRACKED]
```
### Files Modified
```
.gitignore [REPLACED with client fork template]
```
### Files Kept Unchanged
```
README.md [UNCHANGED - upstream docs]
templates/colors_custom.css [UNCHANGED - reference template]
All other repository files [UNCHANGED]
```
---
## Post-Setup Steps
After running the workflow or script, you should:
1. **Customize Brand Colors**
- Edit `src/media/css/colors/light/colors_custom.css`
- Edit `src/media/css/colors/dark/colors_custom.css`
- Update CSS variables to match client branding
2. **Test Locally**
- Install the template in a local Joomla instance
- Test light and dark modes
- Verify custom colors appear correctly
3. **Enable Custom Palette in Joomla**
- Log into Joomla admin
- Navigate to System → Site Templates → MokoCassiopeia
- Under Theme tab, set palette to "Custom"
- Save and test
4. **Create Client Repository**
- Create a new repository for the client
- Push the prepared branch to the new repo
- Set up appropriate access controls
5. **Document Customizations**
- Add a note to the repository about custom colors
- Document the client's brand color palette
- Keep reference for future updates
---
## Troubleshooting
### Workflow Fails with "CONFIRM" Error
**Problem**: Workflow stops immediately with confirmation error.
**Solution**: Make sure you type "CONFIRM" (in all caps) in the confirmation field.
### Script Says "colors_custom.css not found"
**Problem**: Script can't find required files.
**Solution**: Make sure you're running the script from the repository root directory:
```bash
cd /path/to/MokoCassiopeia
./scripts/create-client-fork.sh "Client Name"
```
### Colors Don't Appear After Setup
**Problem**: Custom colors don't show in Joomla.
**Solution**:
1. Enable custom palette in template settings
2. Clear Joomla cache (System → Clear Cache)
3. Clear browser cache (Ctrl+Shift+R / Cmd+Shift+R)
### Branch Already Exists
**Problem**: Branch name conflicts with existing branch.
**Solution**: Either delete the old branch or choose a different client name:
```bash
# Delete old branch
git branch -D client-fork/{client-slug}
# Or use a more specific client name
./scripts/create-client-fork.sh "Client Name - Division"
```
### How to Make Other Customizations
**Problem**: Need more than just color customization.
**Solution**: Use Joomla's built-in template customization options:
- System → Site Templates → MokoCassiopeia → Custom Code tab
- Add custom HTML/CSS/JS through the template settings
- Use Joomla's module positions and layout options
- For extensive customizations, consider a full template fork (not recommended)
---
## Examples
### Example 1: Simple Client Fork
```bash
# Using the script
./scripts/create-client-fork.sh "Acme Corporation"
```
This creates:
- Branch: `client-fork/acme-corporation`
- Custom colors tracked in the fork
- Upstream README and docs preserved
### Example 2: Client with Multiple Words
```bash
# Using the script
./scripts/create-client-fork.sh "Global Tech Solutions Inc"
```
This creates:
- Branch: `client-fork/global-tech-solutions-inc`
- Custom color files in `src/media/css/colors/`
### Example 3: Using GitHub Actions
1. Go to Actions → Create Client Fork (Colors Only)
2. Enter: "Mountain View Medical Center"
3. Enter: "CONFIRM"
4. Click "Run workflow"
Result:
- Branch: `client-fork/mountain-view-medical-center`
- Color files ready for customization
---
## Best Practices
1. **Naming Convention**: Use the official client name as it should appear in documentation
2. **Branch Management**:
- Keep the branch until the client repository is set up
- Don't merge client fork branches back to main
3. **Custom Colors**:
- Document color choices in a README note or commit message
- Keep a backup of custom color files
- Test in both light and dark modes before deployment
4. **Version Tracking**:
- Note the upstream version in your fork documentation
- Track when you last synced with upstream
- Use semantic versioning for your fork releases
5. **Security**:
- Don't commit client-specific credentials
- Keep client forks private if they contain sensitive branding
- Regularly sync with upstream for security patches
6. **Syncing with Upstream**:
- Periodically merge upstream updates to get bug fixes
- Test thoroughly after merging upstream changes
- Custom colors won't conflict with upstream updates
7. **Limited Scope**:
- Forks are for colors only
- Use Joomla's template settings for other customizations
- Avoid modifying core template files
---
## Related Documentation
- **[CSS Variables](../docs/CSS_VARIABLES.md)** - Complete CSS variable reference for color customization
- **[Main README](../README.md)** - MokoCassiopeia documentation
- **[Quick Start](../docs/QUICK_START.md)** - Installation and setup guide
---
## Support
For issues with the workflow or script:
- Check this documentation first
- Review error messages carefully
- Contact: hello@mokoconsulting.tech
---
**Document Version**: 2.0
**Last Updated**: 2026-03-04
**Scope**: Colors only
**Maintained by**: Moko Consulting

139
scripts/create-client-fork.sh
View File

@@ -1,139 +0,0 @@
#!/bin/bash
# Copyright (C) 2026 Moko Consulting <hello@mokoconsulting.tech>
#
# SPDX-License-Identifier: GPL-3.0-or-later
#
# Script: Create Client Fork Setup (Colors Only)
# This script prepares the repository for a client-specific fork by:
# - Copying custom color templates to the appropriate locations
# - Setting up .gitignore to track colors_custom.css files in the fork
set -e
# Colors for output
RED='\033[0;31m'
GREEN='\033[0;32m'
YELLOW='\033[1;33m'
BLUE='\033[0;34m'
NC='\033[0m' # No Color
# Function to print colored output
print_success() { echo -e "${GREEN}✓${NC} $1"; }
print_error() { echo -e "${RED}✗${NC} $1"; }
print_info() { echo -e "${BLUE}ℹ${NC} $1"; }
print_warning() { echo -e "${YELLOW}⚠${NC} $1"; }
# Check if client name is provided
if [ -z "$1" ]; then
print_error "Usage: $0 <CLIENT_NAME>"
echo "Example: $0 \"Acme Corporation\""
exit 1
fi
CLIENT_NAME="$1"
CLIENT_SLUG=$(echo "${CLIENT_NAME}" | tr '[:upper:]' '[:lower:]' | tr ' ' '-')
BRANCH_NAME="client-fork/${CLIENT_SLUG}"
echo ""
echo "╔════════════════════════════════════════════════════════════════╗"
echo "║ MokoCassiopeia - Client Fork Setup (Colors Only) ║"
echo "╚════════════════════════════════════════════════════════════════╝"
echo ""
print_info "Client Name: ${CLIENT_NAME}"
print_info "Branch Name: ${BRANCH_NAME}"
print_info "Scope: Custom colors only"
echo ""
# Confirm before proceeding
read -p "Do you want to proceed? (yes/no): " -r
echo
if [[ ! $REPLY =~ ^[Yy]es$ ]]; then
print_warning "Operation cancelled by user"
exit 0
fi
# Check if we're in the right directory
if [ ! -f "templates/colors_custom.css" ]; then
print_error "templates/colors_custom.css not found. Are you in the repository root?"
exit 1
fi
if [ ! -f "templates/gitignore-template" ]; then
print_error "templates/gitignore-template not found. Are you in the repository root?"
exit 1
fi
# Create new branch
print_info "Creating branch: ${BRANCH_NAME}"
git checkout -b "${BRANCH_NAME}"
print_success "Branch created"
# Copy custom color templates
print_info "Copying colors_custom.css to light and dark mode directories..."
mkdir -p src/media/css/colors/light
mkdir -p src/media/css/colors/dark
cp templates/colors_custom.css src/media/css/colors/light/colors_custom.css
cp templates/colors_custom.css src/media/css/colors/dark/colors_custom.css
if [ -f "src/media/css/colors/light/colors_custom.css" ] && [ -f "src/media/css/colors/dark/colors_custom.css" ]; then
print_success "Created src/media/css/colors/light/colors_custom.css"
print_success "Created src/media/css/colors/dark/colors_custom.css"
else
print_error "Failed to create colors_custom.css files"
exit 1
fi
# Copy template .gitignore to root
print_info "Setting up .gitignore to track custom color files..."
cp templates/gitignore-template .gitignore
print_success "Copied templates/gitignore-template to .gitignore"
print_info "Custom color files will be tracked in this fork"
# Show git status
echo ""
print_info "Git status:"
git status --short
# Commit changes
echo ""
read -p "Commit these changes? (yes/no): " -r
echo
if [[ $REPLY =~ ^[Yy]es$ ]]; then
git add .
git commit -m "Setup client fork for ${CLIENT_NAME} (colors only)
- Copied colors_custom.css to src/media/css/colors/light/ and dark/
- Applied client fork .gitignore template to track custom color files
- Kept templates/colors_custom.css as reference template
This commit prepares the repository for ${CLIENT_NAME}'s custom colors."
print_success "Changes committed successfully"
echo ""
print_info "To push this branch, run:"
echo " git push origin ${BRANCH_NAME}"
fi
# Summary
echo ""
echo "╔════════════════════════════════════════════════════════════════╗"
echo "║ Setup Complete! 🎉 ║"
echo "╚════════════════════════════════════════════════════════════════╝"
echo ""
echo "Changes Applied:"
print_success "Copied colors_custom.css to src/media/css/colors/light/"
print_success "Copied colors_custom.css to src/media/css/colors/dark/"
print_success "Applied client fork .gitignore template"
print_success "Custom color files will be tracked in this fork"
echo ""
echo "Next Steps:"
echo "1. Review the changes in branch: ${BRANCH_NAME}"
echo "2. Customize colors in src/media/css/colors/light/colors_custom.css"
echo "3. Customize colors in src/media/css/colors/dark/colors_custom.css"
echo "4. Test the colors in both light and dark modes"
echo "5. Create a new repository for ${CLIENT_NAME}"
echo "6. Push this branch to the new repository"
echo "7. In Joomla: System → Site Templates → MokoCassiopeia → Theme tab"
echo "8. Set palette to 'Custom' and save"
echo ""

2
src/media/css/template.css
View File

@@ -14367,7 +14367,7 @@ fieldset>* {
} }
.container-header nav { .container-header nav {
padding: 0; padding: 0 2rem;
} }
.container-header .site-description { .container-header .site-description {

424
templates/colors_custom.css
View File

@@ -1,424 +0,0 @@
@charset "UTF-8";
/* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
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`
or
`media/templates/site/mokocassiopeia/css/colors/light/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']{
color-scheme: dark;
/* ===== BRAND & THEME COLORS ===== */
--color-primary: #112855;
--accent-color-primary: #3f8ff0;
--accent-color-secondary: #6fb3ff;
/* ===== NAVIGATION ===== */
--mainmenu-nav-link-color: #fff;
--nav-text-color: gray;
--nav-bg-color: var(--color-primary);
/* ===== LINKS ===== */
--color-link: white;
--color-hover: gray;
--color-active: var(--mainmenu-nav-link-color);
--link-color: #8ab4f8;
--link-color-rgb: 138, 180, 248;
--link-decoration: underline;
--link-hover-color: #c3d6ff;
--link-hover-color-rgb: 195, 214, 255;
--link-active-color: var(--link-color);
/* ===== OFFCANVAS ===== */
--offcanvas-color: var(--body-color);
--offcanvas-padding-x: 1rem;
--offcanvas-padding-y: 1rem;
/* ===== NAVBAR ===== */
--navbar-padding-x: 1rem;
--navbar-padding-y: 0.5rem;
--navbar-color: var(--nav-text-color);
--navbar-active-color: var(--mainmenu-nav-link-color);
--navbar-disabled-color: #6c757d;
--navbar-brand-padding-y: 0.3125rem;
--navbar-brand-margin-end: 1rem;
--navbar-brand-font-size: 1.25rem;
--navbar-brand-color: var(--nav-text-color);
--navbar-brand-active-color: var(--mainmenu-nav-link-color);
--navbar-nav-link-padding-x: 0.5rem;
--navbar-toggler-padding-y: 0.25rem;
--navbar-toggler-padding-x: 0.75rem;
--navbar-toggler-font-size: 1.25rem;
--navbar-toggler-border-color: rgba(255, 255, 255, 0.1);
--navbar-toggler-border-radius: 0.25rem;
--navbar-toggler-focus-width: 0.25rem;
--navbar-toggler-transition: box-shadow 0.15s ease-in-out;
--nav-link-padding-x: 1rem;
--nav-link-padding-y: 0.5rem;
--nav-link-font-weight: 400;
--nav-link-color: var(--nav-text-color);
--nav-link-active-color: var(--mainmenu-nav-link-color);
--nav-link-disabled-color: #6c757d;
/* ===== TYPOGRAPHY & BODY ===== */
--font-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--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;
--heading-color: #f1f5f9;
--emphasis-color: #fff;
--emphasis-color-rgb: 255, 255, 255;
--secondary-color: #e6ebf1bf;
--secondary-color-rgb: 230, 235, 241;
--tertiary-color: #e6ebf180;
--tertiary-color-rgb: 230, 235, 241;
--muted-color: #6d757e;
--code-color: #ff7abd;
--code-color-ink: var(--code-color, #e93f8e);
--highlight-color: #111;
--highlight-bg: #ffe28a1a;
/* ===== LAYOUT & SPACING ===== */
--padding-x: 0.15rem;
--padding-y: 0.15rem;
--bg-opacity: 1;
--nav-toggle-size: 3rem;
--gradient: linear-gradient(180deg, #ffffff26, #fff0);
--secondary-bg: #151b22;
--secondary-bg-rgb: 21, 27, 34;
--tertiary-bg: #10151b;
--tertiary-bg-rgb: 16, 21, 27;
--hr-color: var(--border-color, #dfe3e7);
--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);
--border: 5px;
/* ===== BREAKPOINTS ===== */
--bp-xs: 0;
--bp-sm: 576px;
--bp-md: 768px;
--bp-lg: 992px;
--bp-xl: 1200px;
/* ===== BOOTSTRAP PALETTE ===== */
--primary: #010156;
--secondary: #48525d;
--success: #4aa664;
--info: #4f7aa0;
--warning: #c77a00;
--danger: #c23a31;
--light: #1b2027;
--dark: #0f1318;
--primary-rgb: 1,1,86;
--secondary-rgb: 72,82,93;
--success-rgb: 74,166,100;
--info-rgb: 79,122,160;
--warning-rgb: 199,122,0;
--danger-rgb: 194,58,49;
--light-rgb: 27,32,39;
--dark-rgb: 15,19,24;
--primary-text-emphasis: #c7ccff;
--secondary-text-emphasis: #cfd6de;
--success-text-emphasis: #bde8c9;
--info-text-emphasis: #bcd6ee;
--warning-text-emphasis: #ffd9a6;
--danger-text-emphasis: #ffb7b2;
--light-text-emphasis: #d2d8df;
--dark-text-emphasis: #d2d8df;
--primary-bg-subtle: #0b1030;
--secondary-bg-subtle: #1e2430;
--success-bg-subtle: #0f2a1b;
--info-bg-subtle: #0d2232;
--warning-bg-subtle: #2a1e06;
--danger-bg-subtle: #2d1110;
--light-bg-subtle: #12161d;
--dark-bg-subtle: #1e2430;
--primary-border-subtle: #2b3a7a;
--secondary-border-subtle: #2b323b;
--success-border-subtle: #2b5b40;
--info-border-subtle: #254861;
--warning-border-subtle: #5a3c0e;
--danger-border-subtle: #5c2723;
--light-border-subtle: #222831;
--dark-border-subtle: #2b323b;
/* ===== STANDARD COLORS ===== */
--blue: #91a4ff;
--indigo: #b19cff;
--purple: #c0a5ff;
--pink: #ff8fc0;
--red: #ff7a73;
--orange: #ff9c4d;
--yellow: #ffd166;
--green: #78d694;
--teal: #76e3ff;
--cyan: #6fb7ff;
--black: #000;
--white: #fff;
/* ===== GRAY SCALE ===== */
--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;
--white-rgb: 255, 255, 255;
--black-rgb: 0, 0, 0;
/* ===== HEADER BACKGROUND ===== */
--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: ;
/* TOC 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: ;
/* ===== BORDERS ===== */
--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;
/* ===== SHADOWS ===== */
--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;
/* ===== FOCUS & FORMS ===== */
--focus-ring-width: .25rem;
--focus-ring-opacity: .6;
--focus-ring-color: #5472ff66;
--input-color: #e6ebf1;
--input-bg: #1a2332;
--input-border-color: #3a4250;
--input-focus-border-color: #5472ff;
--input-focus-box-shadow: 0 0 0 0.25rem rgba(84, 114, 255, 0.25);
--input-placeholder-color: #8894aa;
--input-disabled-bg: #0f1318;
--input-disabled-border-color: #2b323b;
--form-valid-color: #78d694;
--form-valid-border-color: #78d694;
--form-invalid-color: #ff8e86;
--form-invalid-border-color: #ff8e86;
/* ===== BUTTONS ===== */
--btn-border-radius: var(--border-radius);
--btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 1px rgba(0, 0, 0, 0.3);
/* ===== CARDS ===== */
--card-spacer-y: 1rem;
--card-spacer-x: 1rem;
--card-title-spacer-y: 0.5rem;
--card-border-width: 1px;
--card-border-color: var(--border-color);
--card-border-radius: var(--border-radius);
--card-box-shadow: none;
--card-inner-border-radius: calc(var(--border-radius) - 1px);
--card-cap-padding-y: 0.5rem;
--card-cap-padding-x: 1rem;
--card-cap-bg: rgba(255, 255, 255, 0.03);
--card-cap-color: var(--body-color);
--card-height: auto;
--card-color: var(--body-color);
--card-bg: var(--secondary-bg);
--card-img-overlay-padding: 1rem;
--card-group-margin: 0.75rem;
/* ===== VIRTUEMART (VM) ===== */
/* VM Surfaces */
--vm-surface: var(--secondary-bg);
--vm-surface-2: var(--tertiary-bg);
--vm-text: var(--body-color);
--vm-text-strong: #ffffff;
--vm-text-muted: var(--gray-700);
--vm-border: var(--border-color);
--vm-price-color: var(--success);
/* VM Layout and Density */
--vm-container-max-width: 1200px;
--vm-section-gap: 2rem;
--vm-block-radius: var(--border-radius);
--vm-block-shadow: var(--box-shadow-sm);
/* VM Typography */
--vm-category-title-size: 2rem;
--vm-subcategory-title-size: 1.5rem;
--vm-page-title-size: 1.75rem;
--vm-products-type-title-size: 1.25rem;
--vm-product-title-size: 1.125rem;
--vm-product-title-weight: 500;
--vm-products-type-title-weight: 600;
--vm-price-size: 1.5rem;
--vm-price-detail-size: 1.125rem;
--vm-price-desc-size: 0.875rem;
/* VM Controls */
--vm-input-radius: var(--border-radius);
--vm-input-shadow: var(--box-shadow-sm);
--vm-qty-width: 80px;
--vm-cart-dropdown-min-width: 300px;
/* VM Alerts */
--vm-alert-radius: var(--border-radius);
--vm-alert-shadow: var(--box-shadow-sm);
--vm-availability-bg: var(--success-bg-subtle);
--vm-availability-text: var(--success);
/* VM Buttons */
--vm-btn-padding-x: 1rem;
--vm-btn-padding-y: 0.5rem;
--vm-btn-radius: var(--border-radius);
--vm-btn-shadow: var(--box-shadow-sm);
--vm-btn-primary-bg: var(--primary);
--vm-btn-primary-text: #ffffff;
--vm-btn-primary-border: var(--primary);
--vm-btn-secondary-bg: var(--secondary);
--vm-btn-secondary-text: #ffffff;
--vm-btn-secondary-border: var(--secondary);
/* VM Image Overlay Controls */
--vm-image-overlay-gap-x: 0.5rem;
--vm-image-overlay-gap-y: 0.5rem;
--vm-image-overlay-raise: 0.25rem;
--vm-image-overlay-btn-size: 2.5rem;
--vm-image-overlay-btn-radius: 50%;
--vm-image-overlay-btn-bg: rgba(0, 0, 0, 0.7);
--vm-image-overlay-btn-bg-hover: rgba(0, 0, 0, 0.85);
--vm-image-overlay-btn-border-color: rgba(255, 255, 255, 0.2);
--vm-image-overlay-btn-border-width: 1px;
--vm-image-overlay-btn-color: var(--body-color);
--vm-image-overlay-btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
/* VM Vendor Menu */
--vm-vendor-menu-bg: var(--secondary-bg);
--vm-vendor-menu-border: var(--border-color);
--vm-vendor-menu-radius: var(--border-radius);
--vm-vendor-menu-shadow: var(--box-shadow-sm);
--vm-vendor-menu-item-gap: 0.25rem;
--vm-vendor-menu-item-padding-x: 1rem;
--vm-vendor-menu-item-padding-y: 0.5rem;
--vm-vendor-menu-pill-radius: 50rem;
--vm-vendor-menu-link: var(--link-color);
--vm-vendor-menu-link-hover: var(--link-hover-color);
--vm-vendor-menu-link-active: var(--primary);
--vm-vendor-menu-hover-bg: var(--tertiary-bg);
/* ===== GABLE ===== */
--gab-blue: #4d9fff;
--gab-green: #5cb85c;
--gab-red: #ff6b6b;
--gab-orange: #ff9f5a;
--gab-gray1: #868e96;
--gab-gray2: #adb5bd;
--gab-gray3: #ced4da;
}

106
templates/gitignore-template
View File

@@ -1,106 +0,0 @@
# MokoCassiopeia Client Fork .gitignore Template
# This file is copied to client forks to ensure custom color files are tracked
# DO NOT ignore custom color files in client forks
# These files should be tracked to preserve client-specific branding
#
# The files below are intentionally NOT ignored:
# src/media/css/colors/light/colors_custom.css
# src/media/css/colors/dark/colors_custom.css
# ============================================================
# Environment and secrets
# ============================================================
.env
.env.local
.env.*.local
*.local.php
*.secret.php
configuration.php
configuration.*.php
configuration.local.php
conf/conf.php
conf/conf*.php
secrets/
*.secrets.*
# ============================================================
# Logs, dumps and databases
# ============================================================
*.db
*.db-journal
*.dump
*.log
*.pid
*.seed
*.sql
*.sql.gz
*.sqlite
*.sqlite3
# ============================================================
# OS / Editor / IDE cruft
# ============================================================
.DS_Store
Thumbs.db
desktop.ini
Thumbs.db:encryptable
ehthumbs.db
ehthumbs_vista.db
$RECYCLE.BIN/
System Volume Information/
*.lnk
Icon?
.idea/
.settings/
.vscode/*
!.vscode/tasks.json
!.vscode/settings.json.example
!.vscode/extensions.json
*.code-workspace
# ============================================================
# Package manager and dependencies
# ============================================================
node_modules/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
*.tgz
package-lock.json
yarn.lock
pnpm-lock.yaml
vendor/
# ============================================================
# Build artifacts and temporary files
# ============================================================
dist/
build/
.cache/
*.tmp
*.temp
*.swp
*.swo
*~
.#*
\#*#
# ============================================================
# Test and coverage
# ============================================================
tests/_output/
coverage/
.nyc_output/
phpunit.xml
.phpunit.result.cache
# ============================================================
# Joomla specific
# ============================================================
administrator/cache/
cache/
tmp/
logs/