From 09bb2d5753d273cf1d4e0484f45f47f1cea56b6c Mon Sep 17 00:00:00 2001 From: Jonathan Miller <230051081+jmiller-moko@users.noreply.github.com> Date: Tue, 7 Apr 2026 15:22:26 -0500 Subject: [PATCH] fix: apply colors via Atum template style params instead of CSS MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- src/Extension/MokoWaaS.php | 157 ++++++++++++++++++++++++++----------- src/script.php | 3 + 2 files changed, 116 insertions(+), 44 deletions(-) diff --git a/src/Extension/MokoWaaS.php b/src/Extension/MokoWaaS.php index 7c95054..51e277f 100644 --- a/src/Extension/MokoWaaS.php +++ b/src/Extension/MokoWaaS.php @@ -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. } /** diff --git a/src/script.php b/src/script.php index 507b0fe..3c847de 100644 --- a/src/script.php +++ b/src/script.php @@ -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();