Switch to CSS variables for links

src/common/_config_css.scss

@@ -0,0 +1,58 @@
+$link-type-colors: (
+  "danger": $danger-color,
+  "warning": $warning-color,
+  "success": $success-color,
+  "info": $info-color,
+
+  // Deprecated
+  "red": $danger-color,
+  "yellow": $warning-color,
+  "green": $success-color,
+  "teal": $info-color
+);
+
+:root {
+  --primary-color: #{$primary-color};
+
+  // Secondary colors
+  --danger-color: #{$danger-color};
+  --warning-color: #{$warning-color};
+  --success-color: #{$success-color};
+  --info-color: #{$info-color};
+
+  // Tertiary color
+  --tertiary-color: #{$tertiary-color};
+
+
+  // ------------------------
+  // Links
+  --link-color: #{$link-color};
+  --link-hover-color: #{darken($link-color, 20%)};
+  --link-active-color: #{darken($link-color, 20%)};
+
+  //--link-danger-color: #{darken($danger-color, 25%)};
+  //--link-active-danger-color: #{darken($danger-color, 40%)};
+  //--link-hover-danger-color: #{darken($danger-color, 40%)};
+  //--link-warning-color: #{darken($warning-color, 25%)};
+  //--link-active-warning-color: #{darken($warning-color, 40%)};
+  //--link-hover-warning-color: #{darken($warning-color, 40%)};
+  //--link-success-color: #{darken($success-color, 25%)};
+  //--link-active-success-color: #{darken($success-color, 40%)};
+  //--link-hover-success-color: #{darken($success-color, 40%)};
+  //--link-info-color: #{darken($info-color, 25%)};
+  //--link-active-info-color: #{darken($info-color, 40%)};
+  //--link-hover-info-color: #{darken($info-color, 40%)};
+
+  @each $name, $color in $link-type-colors {
+    --link-#{$name}-color: #{darken($color, 25%)};
+    --link-active-#{$name}-color: #{darken($color, 40%)};
+    --link-hover-#{$name}-color: #{darken($color, 40%)};
+  }
+
+  --link-muted-color: #{darken($tertiary-color, 5%)};
+  --link-hover-muted-color: #{darken($tertiary-color, 25%)};
+
+  // Badges
+  //--badge-filled-text-color: #FFFFFF;
+  //--badge-filled-background-color: var(--badge-tag-master-background-color);
+}

src/common/_typography.scss

@@ -54,31 +54,39 @@ ul li, ol li {
 }
 
 a:link, a:visited, .link {
-  color: $link-color;
+  color: var(--link-color);
   text-decoration: none;
   transition: $default-transition;
   cursor: pointer;
 
-  &:hover, &:active {
-    color: darken($link-color, 20%);
+  &:hover {
+    color: var(--link-hover-color);
+    text-decoration: underline;
+  }
+  &:active {
+    color: var(--link-active-color);
     text-decoration: underline;
   }
 
-  @each $key, $value in $secondary-colors {
+  @each $key, $value in $link-type-colors {
     &.is-#{$key} {
-      color: darken($value, 25%);
+      color: var(--link-#{$key}-color);
+
+      &:hover {
+        color: var(--link-hover-#{$key}-color);
+      }
 
-      &:hover, &:active {
-        color: darken($value, 40%);
+      &:active {
+        color: var(--link-active-#{$key}-color);
       }
     }
   }
 
   &.is-muted {
-    color: darken($tertiary-color, 5%);
+    color: var(--link-muted-color);
 
     &:hover {
-      color: darken($tertiary-color, 25%);
+      color: var(--link-hover-muted-color);
     }
   }
 

src/common/common.scss

@@ -12,6 +12,7 @@
 
 /* First import configuration stylesheet */
 @import "_config.scss";
+@import "_config_css.scss";
 
 /* Then include components */
 @import "_header.scss";