MokoConsulting/MokoWaaS
1
1
Fork 0
Code Issues Pull Requests Actions 65 Packages Releases 1 Wiki Activity

fix: apply colors via Atum template style params instead of CSS

Browse Source 
Atum reads color values from #__template_styles params (hue, link-color,
special-color) and outputs them as inline CSS variables at render time.
Our CSS variable injection was being overridden by Atum's own output.

Now enforceAtumBranding() sets the color params directly in the DB:
- color_primary → hue (hex→HSL converted) + special-color
- color_sidebar → header-color
- color_link → link-color

Added hexToHsl() helper for the conversion. Install script also sets
default Moko theme colors at install time.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jonathan Miller
2026-04-07 15:22:26 -05:00
parent 62ccec104d
commit 09bb2d5753
2 changed files with 116 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Extension/MokoWaaS.php
+113 -44
View File
@@ -1304,18 +1304,50 @@ class MokoWaaS extends CMSPlugin
{
$mediaBase = 'media/plg_system_mokowaas/';
// Logo params
$expected = [
'logoBrandLarge' => $mediaBase . 'logo.png',
'logoBrandSmall' => $mediaBase . 'favicon_256.png',
'loginLogo' => $mediaBase . 'logo.png',
'logoBrandLargeAlt' => '',
'logoBrandSmallAlt' => '',
'loginLogoAlt' => '',
'logoBrandLarge' => $mediaBase . 'logo.png',
'logoBrandSmall' => $mediaBase . 'favicon_256.png',
'loginLogo' => $mediaBase . 'logo.png',
'logoBrandLargeAlt' => '',
'logoBrandSmallAlt' => '',
'loginLogoAlt' => '',
'emptyLogoBrandLargeAlt' => '1',
'emptyLogoBrandSmallAlt' => '1',
'emptyLoginLogoAlt' => '1',
'emptyLoginLogoAlt' => '1',
];
// Color params — map plugin fields to Atum template params
$primary = $this->params->get('color_primary', '');
$sidebar = $this->params->get('color_sidebar', '');
$link = $this->params->get('color_link', '');
if (!empty($primary))
{
// Convert hex to HSL for Atum's hue param
$hsl = $this->hexToHsl($primary);
if ($hsl)
{
$expected['hue'] = sprintf(
'hsl(%d, %d%%, %d%%)',
$hsl[0], $hsl[1], $hsl[2]
);
}
$expected['special-color'] = $primary;
}
if (!empty($sidebar))
{
$expected['header-color'] = $sidebar;
}
if (!empty($link))
{
$expected['link-color'] = $link;
}
$db = Factory::getDbo();
$query = $db->getQuery(true)
->select([$db->quoteName('id'), $db->quoteName('params')])
@@ -1363,6 +1395,64 @@ class MokoWaaS extends CMSPlugin
}
}
/**
* Convert a hex color to HSL values.
*
* @param string $hex Hex color (e.g., "#1a2744")
*
* @return array|null [hue, saturation%, lightness%] or null
*
* @since 02.00.00
*/
protected function hexToHsl($hex)
{
$hex = ltrim($hex, '#');
if (strlen($hex) !== 6)
{
return null;
}
$r = hexdec(substr($hex, 0, 2)) / 255;
$g = hexdec(substr($hex, 2, 2)) / 255;
$b = hexdec(substr($hex, 4, 2)) / 255;
$max = max($r, $g, $b);
$min = min($r, $g, $b);
$l = ($max + $min) / 2;
if ($max === $min)
{
return [0, 0, (int) round($l * 100)];
}
$d = $max - $min;
$s = $l > 0.5
? $d / (2 - $max - $min)
: $d / ($max + $min);
if ($max === $r)
{
$h = ($g - $b) / $d + ($g < $b ? 6 : 0);
}
elseif ($max === $g)
{
$h = ($b - $r) / $d + 2;
}
else
{
$h = ($r - $g) / $d + 4;
}
$h = $h / 6;
return [
(int) round($h * 360),
(int) round($s * 100),
(int) round($l * 100),
];
}
// ------------------------------------------------------------------
// Visual Branding (called from onBeforeCompileHead)
// ------------------------------------------------------------------
@@ -1423,45 +1513,24 @@ class MokoWaaS extends CMSPlugin
*
* @since 02.00.00
*/
/**
* Inject admin color scheme.
*
* Atum reads colors from template style params at render time and
* outputs them as inline CSS variables. We enforce the params in
* enforceAtumBranding(). This method handles any additional CSS
* overrides needed beyond what the params support.
*
* @param \Joomla\CMS\Document\HtmlDocument $doc
*
* @return void
*
* @since 02.00.00
*/
protected function injectColorScheme($doc)
{
$primary = $this->params->get('color_primary', '');
$sidebar = $this->params->get('color_sidebar', '');
$header = $this->params->get('color_header', '');
$link = $this->params->get('color_link', '');
$vars = [];
if (!empty($primary))
{
$vars[] = '--atum-bg-dark: ' . $primary;
$vars[] = '--template-bg-dark-80: ' . $primary;
}
if (!empty($sidebar))
{
$vars[] = '--atum-sidebar-bg: ' . $sidebar;
$vars[] = '--template-bg-dark-70: ' . $sidebar;
}
if (!empty($header))
{
$vars[] = '--atum-bg-dark-90: ' . $header;
$vars[] = '--template-bg-dark-90: ' . $header;
}
if (!empty($link))
{
$vars[] = '--template-link-color: ' . $link;
$vars[] = '--atum-link-color: ' . $link;
}
if (!empty($vars))
{
$doc->addStyleDeclaration(
':root { ' . implode('; ', $vars) . '; }'
);
}
// Colors are applied via Atum template style params in
// enforceAtumBranding(). No additional CSS injection needed.
}
/**
src/script.php
+3
View File
@@ -408,6 +408,9 @@ class plgSystemMokoWaaSInstallerScript implements InstallerScriptInterface
'emptyLogoBrandLargeAlt' => '1',
'emptyLogoBrandSmallAlt' => '1',
'emptyLoginLogoAlt' => '1',
'hue' => 'hsl(219, 44%, 18%)',
'special-color' => '#1a2744',
'link-color' => '#2ecc71',
];
$db = Factory::getDbo();