Issue #3311218 by andy-blum, javi-er: Olivero link hover styles are not...

Issue #3311218 by andy-blum, javi-er: Olivero link hover styles are not impacted by custom color settings

core/themes/olivero/css/base/variables.css

@@ -149,6 +149,7 @@
   --color--primary-40: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) - (0.24 * var(--color--primary-lightness))))); /* Blue dark */
   --color--primary-50: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * var(--color--primary-lightness))); /* Blue medium */
   --color--primary-60: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) + (0.24 * (100 - var(--color--primary-lightness)))))); /* Blue bright */
+  --color--primary-80: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) + (0.85 * (100 - var(--color--primary-lightness)))))); /* Blue very bright */
 
   /**
    * Variables specific to text.

core/themes/olivero/css/base/variables.pcss.css

@@ -110,6 +110,7 @@
   --color--primary-40: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) - (0.24 * var(--color--primary-lightness))))); /* Blue dark */
   --color--primary-50: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * var(--color--primary-lightness))); /* Blue medium */
   --color--primary-60: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) + (0.24 * (100 - var(--color--primary-lightness)))))); /* Blue bright */
+  --color--primary-80: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) + (0.85 * (100 - var(--color--primary-lightness)))))); /* Blue very bright */
 
   /**
    * Variables specific to text.

core/themes/olivero/css/components/text-content.css

@@ -58,11 +58,9 @@
       .text-content a:where(:not(.button)):hover, .cke_editable a:where(:not(.button)):hover {
         text-decoration: underline;
         color: var(--color--black);
-
-        /* @todo - #d9ecfa isn't currently a variable. */
-        box-shadow: inset 0 -2em 0 0 #d9ecfa;
-        -webkit-text-decoration-color: #d9ecfa;
-        text-decoration-color: #d9ecfa;
+        box-shadow: inset 0 -2em 0 0 var(--color--primary-80);
+        -webkit-text-decoration-color: var(--color--primary-80);
+        text-decoration-color: var(--color--primary-80);
       }
     }
 

core/themes/olivero/css/components/text-content.pcss.css

@@ -34,10 +34,8 @@
       &:hover {
         text-decoration: underline;
         color: var(--color--black);
-
-        /* @todo - #d9ecfa isn't currently a variable. */
-        box-shadow: inset 0 -2em 0 0 #d9ecfa;
-        text-decoration-color: #d9ecfa;
+        box-shadow: inset 0 -2em 0 0 var(--color--primary-80);
+        text-decoration-color: var(--color--primary-80);
       }
     }
   }