Merge pull request #5020 from consul/unify_color_variables

Unify duplicate SCSS color variables

app/assets/stylesheets/_consul_settings.scss

@@ -16,6 +16,8 @@ $white: #fdfdfd !default;
 
 $body-font-family: "Source Sans Pro", "Helvetica", "Arial", sans-serif !important !default;
 
+$closebutton-color: $black !default;
+
 $global-radius: rem-calc(3) !default;
 $global-width: rem-calc(1200) !default;
 
@@ -62,17 +64,12 @@ $font-family-serif: Georgia, "Times New Roman", Times, serif !default;
 
 $brand:             #004a83 !default;
 $brand-secondary:   darken($brand, 10%) !default;
-$dark:              $brand-secondary !default;
 
-$text:              $black !default;
 $text-medium:       #515151 !default;
 $text-light:        #bfbfbf !default;
 
 $border:            #dee0e3 !default;
 
-$link:              $brand !default;
-$link-hover:        darken($link, 20%) !default;
-
 $debates:           $brand !default;
 
 $like:              #7bd2a8 !default;
@@ -148,14 +145,15 @@ $sdg-colors: (
 // 3. Foundation overrides depending on CONSUL variables
 // -----------------------------------------------------
 
+$anchor-color: $brand !default;
+$anchor-color-hover: darken($anchor-color, 20%) !default;
+
 $tab-background-active: $white !default;
 
 $tab-item-font-size: $base-font-size !default;
 $tab-item-padding: $line-height / 2  0 !default;
 $tab-content-border: $border !default;
 
-$closebutton-color: $text !default;
-
 $tooltip-background-color: $brand !default;
 
 // 4. Foundation fixes

app/assets/stylesheets/admin.scss

@@ -515,7 +515,7 @@ code {
     }
 
     .number {
-      color: $text;
+      color: $body-font-color;
       font-size: rem-calc(30);
       font-weight: bold;
     }

app/assets/stylesheets/budgets/phases.scss

@@ -87,7 +87,7 @@
 
       &[aria-selected="true"],
       &.is-active {
-        @include background-with-text-contrast($dark);
+        @include background-with-text-contrast($brand-secondary);
         font-weight: normal;
       }
 
@@ -100,10 +100,6 @@
     &.current-phase-tab a {
       @include background-with-text-contrast($brand-secondary);
       padding-top: $line-height / 2;
-
-      &:hover {
-        background: $dark;
-      }
     }
   }
 

app/assets/stylesheets/layout.scss

@@ -95,17 +95,10 @@ p {
 }
 
 a {
-  color: $link;
-
   &:hover,
   &:active {
-    color: $link-hover;
     text-decoration: underline;
   }
-
-  &:focus {
-    color: $link-hover;
-  }
 }
 
 a,
@@ -696,7 +689,7 @@ body > header,
 }
 
 .top-links {
-  @include background-with-text-contrast($dark);
+  @include background-with-text-contrast($brand-secondary);
   display: flex;
   flex-wrap: wrap;
   font-size: $small-font-size;
@@ -775,7 +768,7 @@ body > header,
       width: auto;
 
       &:hover {
-        color: $link;
+        color: $anchor-color;
       }
 
       &.is-active {
@@ -945,7 +938,7 @@ footer {
 .categories a,
 .geozone a {
   background: $highlight;
-  color: $link;
+  color: $anchor-color;
 
   &:hover,
   &.is-active {
@@ -2446,7 +2439,7 @@ table {
     p {
 
       &.description {
-        color: $text;
+        color: $body-font-color;
         word-wrap: break-word;
       }
     }

app/assets/stylesheets/mixins/buttons.scss

@@ -31,12 +31,12 @@
 }
 
 @mixin link {
-  color: $link;
+  color: $anchor-color;
   cursor: pointer;
 
   &:hover,
   &:active {
-    color: $link-hover;
+    color: $anchor-color-hover;
     text-decoration: underline;
   }
 }
@@ -45,7 +45,7 @@
   color: inherit;
 
   &:hover {
-    color: $link;
+    color: $anchor-color;
   }
 }
 

app/assets/stylesheets/mixins/colors.scss

@@ -18,7 +18,7 @@
 
 @mixin body-colors {
   background-color: $body-background;
-  color: $text;
+  color: $body-font-color;
 }
 
 @mixin normal-selection {

app/assets/stylesheets/mixins/icons.scss

@@ -1516,7 +1516,7 @@ $font-awesome-icons: (
 
   &:hover,
   &:focus {
-    color: $link-hover;
+    color: $anchor-color-hover;
     text-decoration: none;
   }
 

app/assets/stylesheets/participation.scss

@@ -326,7 +326,7 @@
 }
 
 .bullet {
-  color: $text;
+  color: $body-font-color;
 }
 
 .budget-investment-show p {
@@ -893,7 +893,7 @@
 
   a,
   .info {
-    color: lighten($text, 15%);
+    color: lighten($body-font-color, 15%);
     font-size: $small-font-size;
   }
 }
@@ -926,7 +926,7 @@
     }
 
     .button-support {
-      background: $text;
+      background: $body-font-color;
       color: $featured;
       margin-top: 0;
 
@@ -1482,7 +1482,7 @@
   cursor: pointer;
 
   &:hover {
-    @include background-with-text-contrast($dark);
+    @include background-with-text-contrast($brand-secondary);
     text-decoration: none;
   }
 }