Update mixins to use custom property approach, add note to prefer theme classes

Author: maureenlholland

assets/sass/protocol/includes/mixins/_utils.scss

@@ -223,61 +223,24 @@
 }
 
 // Light color links for dark backgrounds.
+// Prefer mzp-t-dark class in markup where possible
 @mixin light-links {
-    a:link {
-        color: themes.$link-color-inverse;
-    }
-
-    a:visited {
-        color: themes.$link-color-visited-inverse;
-    }
-
-    a:hover,
-    a:focus,
-    a:active {
-        color: themes.$link-color-hover-inverse;
-    }
-
-    a:visited:hover,
-    a:visited:focus,
-    a:visited:active {
-        color: themes.$link-color-visited-hover-inverse;
-    }
-
-    @supports (--css: variables) {
-        a:link {
-            color: var(--link-color-inverse);
-        }
-
-        a:visited {
-            color: var(--link-color-visited-inverse);
-        }
-
-        a:hover,
-        a:focus,
-        a:active {
-            color: var(--link-color-hover-inverse);
-        }
-
-        a:visited:hover,
-        a:visited:focus,
-        a:visited:active {
-            color: var(--link-color-visited-hover-inverse);
-        }
+    a {
+        --link-color: var(--link-color-inverse);
+        --link-color-hover: var(--link-color-hover-inverse);
+        --link-color-visited: var(--link-color-visited-inverse);
+        --link-color-visited-hover:var(--link-color-visited-hover-inverse);
     }
 }
 
 // White color links for dark backgrounds, when link colors are undesirable.
+// Prefer mzp-t-white-links class in markup where possible
 @mixin white-links {
-    a:link,
-    a:visited {
-        color: tokens.$color-white;
-
-        &:hover,
-        &:focus,
-        &:active {
-            color: tokens.$color-white;
-        }
+    a {
+        --link-color: #{tokens.$color-white};
+        --link-color-hover: #{tokens.$color-white};
+        --link-color-visited: #{tokens.$color-white};
+        --link-color-visited-hover: #{tokens.$color-white};
     }
 }