From 995fea072b2791f4258391874ae4666be08c8239 Mon Sep 17 00:00:00 2001
From: Rick Spaan <rick@r2h.nl>
Date: Wed, 6 Mar 2024 16:45:08 +0100
Subject: [PATCH] Fix link hover colors and change color theme CSS files order
 (#42794)

* Fix link and button colors in header footer

* Add hover state color for links, fix theme color web asset order, add hover color to theme color CSS files

* Place theme colors before user.css

---------
---
 .../templates/site/cassiopeia/scss/blocks/_global.scss        | 4 ++++
 .../site/cassiopeia/scss/global/colors_alternative.scss       | 2 ++
 .../site/cassiopeia/scss/global/colors_standard.scss          | 2 ++
 templates/cassiopeia/index.php                                | 2 +-
 4 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/build/media_source/templates/site/cassiopeia/scss/blocks/_global.scss b/build/media_source/templates/site/cassiopeia/scss/blocks/_global.scss
index 0591114c5f4..1eb404754bd 100644
--- a/build/media_source/templates/site/cassiopeia/scss/blocks/_global.scss
+++ b/build/media_source/templates/site/cassiopeia/scss/blocks/_global.scss
@@ -56,6 +56,10 @@ h6 {
 a {
   color: var(--#{$prefix}link-color);
 
+  &:hover {
+    color: var(--#{$prefix}link-hover-color);
+  }
+
   &:not([class]) {
     text-decoration: underline;
   }
diff --git a/build/media_source/templates/site/cassiopeia/scss/global/colors_alternative.scss b/build/media_source/templates/site/cassiopeia/scss/global/colors_alternative.scss
index fc286320208..61b1c546f2f 100644
--- a/build/media_source/templates/site/cassiopeia/scss/global/colors_alternative.scss
+++ b/build/media_source/templates/site/cassiopeia/scss/global/colors_alternative.scss
@@ -9,4 +9,6 @@
   --link-color: #{$alternative-color-link};
   --link-color-rgb: #{to-rgb($alternative-color-link)};
   --cassiopeia-color-hover: #{$alternative-color-hover};
+  --link-hover-color: #{$alternative-color-hover};
+  --link-hover-color-rgb: #{to-rgb($alternative-color-hover)};
 }
diff --git a/build/media_source/templates/site/cassiopeia/scss/global/colors_standard.scss b/build/media_source/templates/site/cassiopeia/scss/global/colors_standard.scss
index 487e270d928..3b72dbad656 100644
--- a/build/media_source/templates/site/cassiopeia/scss/global/colors_standard.scss
+++ b/build/media_source/templates/site/cassiopeia/scss/global/colors_standard.scss
@@ -9,4 +9,6 @@
   --link-color: #{$standard-color-link};
   --link-color-rgb: #{to-rgb($standard-color-link)};
   --cassiopeia-color-hover: #{$standard-color-hover};
+  --link-hover-color: #{$standard-color-hover};
+  --link-hover-color-rgb: #{to-rgb($standard-color-hover)};
 }
diff --git a/templates/cassiopeia/index.php b/templates/cassiopeia/index.php
index 013413801c6..cf706b52db0 100644
--- a/templates/cassiopeia/index.php
+++ b/templates/cassiopeia/index.php
@@ -39,7 +39,6 @@ $pageclass = $menu !== null ? $menu->getParams()->get('pageclass_sfx', '') : '';
 // Color Theme
 $paramsColorName = $this->params->get('colorName', 'colors_standard');
 $assetColorName  = 'theme.' . $paramsColorName;
-$wa->registerAndUseStyle($assetColorName, 'media/templates/site/cassiopeia/css/global/' . $paramsColorName . '.css');
 
 // Use a font scheme if set in the template style options
 $paramsFontScheme = $this->params->get('useFontScheme', false);
@@ -67,6 +66,7 @@ if ($paramsFontScheme) {
 // Enable assets
 $wa->usePreset('template.cassiopeia.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr'))
     ->useStyle('template.active.language')
+    ->registerAndUseStyle($assetColorName, 'media/templates/site/cassiopeia/css/global/' . $paramsColorName . '.css')
     ->useStyle('template.user')
     ->useScript('template.user')
     ->addInlineStyle(":root {