Add CSS variables reference documentation and color template files
- Created /templates/ directory with colors_custom_light.css and colors_custom_dark.css - Added comprehensive CSS_VARIABLES.md documentation - Updated README with improved Custom Color Palettes section - Updated docs/README.md to include new resources - Updated CHANGELOG with new additions Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
245
templates/colors_custom_dark.css
Normal file
245
templates/colors_custom_dark.css
Normal file
@@ -0,0 +1,245 @@
|
||||
@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
|
||||
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: 5px;
|
||||
|
||||
/* 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;
|
||||
}
|
||||
227
templates/colors_custom_light.css
Normal file
227
templates/colors_custom_light.css
Normal file
@@ -0,0 +1,227 @@
|
||||
@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_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: auto;
|
||||
--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: auto;
|
||||
--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: auto;
|
||||
--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: auto;
|
||||
--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: auto;
|
||||
--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: auto;
|
||||
--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;
|
||||
}
|
||||
Reference in New Issue
Block a user