Adwaita: make links readable in the dark variant

And fix the messy style we have for *:link in the process.
https://bugzilla.gnome.org/show_bug.cgi?id=737386

4 files changed, 52 insertions, 24 deletions

diff --git a/gtk/resources/theme/Adwaita/_colors.scss b/gtk/resources/theme/Adwaita/_colors.scss
index 3a6bbc39f5..d1fa4b6fc7 100644
--- a/gtk/resources/theme/Adwaita/_colors.scss
+++ b/gtk/resources/theme/Adwaita/_colors.scss
@@ -12,7 +12,10 @@ $selected_borders_color: if($variant=='light', darken($selected_bg_color, 30%),
                                                darken($selected_bg_color, 20%));
 $borders_color: if($variant =='light', darken($bg_color,30%), darken($bg_color,12%));
 $borders_edge: if($variant =='light', white, transparentize($fg_color, 0.9));
-$link_color: darken($selected_bg_color,10%);
+$link_color: if($variant == 'light', darken($selected_bg_color,10%),
+                                     lighten($selected_bg_color,20%));
+$link_visited_color: if($variant == 'light', darken($selected_bg_color,20%),
+                                     lighten($selected_bg_color,10%));
 $top_hilight: $borders_edge;
 
 $warning_color: #f57900;
diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss
index a63ba50581..4d148d5913 100644
--- a/gtk/resources/theme/Adwaita/_common.scss
+++ b/gtk/resources/theme/Adwaita/_common.scss
@@ -29,7 +29,7 @@
   -GtkMenu-vertical-padding: 0;
 
   -GtkWidget-link-color: $link_color;
-  -GtkWidget-visited-link-color: $link_color;
+  -GtkWidget-visited-link-color: $link_visited_color;
 
   -GtkWidget-focus-padding: 2;    // FIXME: do we still need these?
   -GtkWidget-focus-line-width: 1; //
@@ -703,15 +703,25 @@ GtkColorButton.button {
  *********/
 
 *:link {
-  color: $selected_bg_color; //FIXME use a proper color
-  &:hover, &:active, &:visited {
-    color: mix($fg_color, $selected_bg_color, 40%); //FIXME same here
+  color: $link_color;
+  &:visited {
+    color: $link_visited_color;
+    *:selected & { color: mix($selected_fg_color, $selected_bg_color, 60%); }
+  }
+  &:hover {
+    color: lighten($link_color,10%);
+    *:selected & { color: mix($selected_fg_color, $selected_bg_color, 90%); }
+  }
+  &:active {
+    color: $link_color;
     *:selected & { color: mix($selected_fg_color, $selected_bg_color, 80%); }
   }
   &:backdrop, &:backdrop:hover, &:backdrop:hover:selected {
     color: $selected_bg_color;
   }
-  &:selected, *:selected & { color: $selected_fg_color; }
+  &:selected, *:selected & {
+    color: mix($selected_fg_color, $selected_bg_color, 80%);
+  }
 }
 
 .button:link, .button:visited {
@@ -1108,7 +1118,7 @@ GtkComboBox {
     padding-left: 12px;
     padding-right: 12px;
   }
-  
+
   // the following is for spacing the icon and the label inside the home button
   GtkLabel:last-child { padding-left: 2px; }
   GtkLabel:first-child { padding-right: 2px; }
@@ -1258,8 +1268,7 @@ GtkTreeView.view.progressbar { //Progressbar in treeview cells
     padding: 4px 8px;
     &:hover { //Seems like it :hover even with keyboard focus
       box-shadow: inset 0 -3px $selected_bg_color;
-      color: if($variant == 'light', $selected_bg_color,
-                                     lighten($selected_bg_color,15%));
+      color: $link_color;
     }
     &:insensitive {
       color: $insensitive_fg_color;
diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
index 3d1d30d707..07adc12a51 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
@@ -13,8 +13,8 @@
   -GtkTreeView-horizontal-separator: 4;
   -GtkMenu-horizontal-padding: 0;
   -GtkMenu-vertical-padding: 0;
-  -GtkWidget-link-color: #184472;
-  -GtkWidget-visited-link-color: #184472;
+  -GtkWidget-link-color: #4a90d9;
+  -GtkWidget-visited-link-color: #2a76c6;
   -GtkWidget-focus-padding: 2;
   -GtkWidget-focus-line-width: 1;
   -GtkDialog-button-spacing: 4;
@@ -1189,19 +1189,27 @@ GtkCalendar.header GtkColorButton.button.titlebutton {
 GtkCalendar.header .button.titlebutton:link, .button:visited, .header-bar .button.titlebutton:visited,
 .titlebar .button.titlebutton:visited,
 GtkCalendar.header .button.titlebutton:visited {
-  color: #215d9c; }
-  *:link:hover, .button:hover:link, .button:hover:visited, *:link:active, .button:active:link, .button:active:visited, *:link:visited, .button:visited, .header-bar .button.titlebutton:visited,
+  color: #4a90d9; }
+  *:link:visited, .button:visited, .header-bar .button.titlebutton:visited,
   .titlebar .button.titlebutton:visited,
   GtkCalendar.header .button.titlebutton:visited {
-    color: #7397bc; }
-    *:selected *:link:hover, *:selected .button:hover:link, *:selected .button:hover:visited, *:selected *:link:active, *:selected .button:active:link, *:selected .button:active:visited, *:selected *:link:visited, *:selected .button:visited {
+    color: #2a76c6; }
+    *:selected *:link:visited, *:selected .button:visited {
+      color: #a6bed7; }
+  *:link:hover, .button:hover:link, .button:hover:visited {
+    color: #74aae2; }
+    *:selected *:link:hover, *:selected .button:hover:link, *:selected .button:hover:visited {
+      color: #e8eef5; }
+  *:link:active, .button:active:link, .button:active:visited {
+    color: #4a90d9; }
+    *:selected *:link:active, *:selected .button:active:link, *:selected .button:active:visited {
       color: #d2deeb; }
   *:link:backdrop, .button:backdrop:link, .button:backdrop:visited, *:link:backdrop:hover, .button:backdrop:hover:link, .button:backdrop:hover:visited, *:link:backdrop:hover:selected, .button:backdrop:hover:selected:link, .button:backdrop:hover:selected:visited, .titlebar.selection-mode .subtitle:backdrop:hover:link, GtkCalendar.selection-mode.header .subtitle:backdrop:hover:link,
   .header-bar.selection-mode .subtitle:backdrop:hover:link {
     color: #215d9c; }
   *:link:selected, .button:selected:link, .button:selected:visited, .titlebar.selection-mode .subtitle:link, GtkCalendar.selection-mode.header .subtitle:link,
   .header-bar.selection-mode .subtitle:link, *:selected *:link, *:selected .button:link, *:selected .button:visited {
-    color: #ffffff; }
+    color: #d2deeb; }
 
 .button:link, .header-bar .button.titlebutton:link,
 .titlebar .button.titlebutton:link,
@@ -1887,7 +1895,7 @@ GtkTreeView.view.progressbar {
     padding: 4px 8px; }
     .menubar > .menuitem:hover {
       box-shadow: inset 0 -3px #215d9c;
-      color: #3583d5; }
+      color: #4a90d9; }
     .menubar > .menuitem:insensitive {
       color: #939695;
       box-shadow: none; }
diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css
index 0c4d7f3e76..c39fdcc41b 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained.css
@@ -14,7 +14,7 @@
   -GtkMenu-horizontal-padding: 0;
   -GtkMenu-vertical-padding: 0;
   -GtkWidget-link-color: #2a76c6;
-  -GtkWidget-visited-link-color: #2a76c6;
+  -GtkWidget-visited-link-color: #215d9c;
   -GtkWidget-focus-padding: 2;
   -GtkWidget-focus-line-width: 1;
   -GtkDialog-button-spacing: 4;
@@ -1181,19 +1181,27 @@ GtkCalendar.header GtkColorButton.button.titlebutton {
 GtkCalendar.header .button.titlebutton:link, .button:visited, .header-bar .button.titlebutton:visited,
 .titlebar .button.titlebutton:visited,
 GtkCalendar.header .button.titlebutton:visited {
-  color: #4a90d9; }
-  *:link:hover, .button:hover:link, .button:hover:visited, *:link:active, .button:active:link, .button:active:visited, *:link:visited, .button:visited, .header-bar .button.titlebutton:visited,
+  color: #2a76c6; }
+  *:link:visited, .button:visited, .header-bar .button.titlebutton:visited,
   .titlebar .button.titlebutton:visited,
   GtkCalendar.header .button.titlebutton:visited {
-    color: #3e6b97; }
-    *:selected *:link:hover, *:selected .button:hover:link, *:selected .button:hover:visited, *:selected *:link:active, *:selected .button:active:link, *:selected .button:active:visited, *:selected *:link:visited, *:selected .button:visited {
+    color: #215d9c; }
+    *:selected *:link:visited, *:selected .button:visited {
+      color: #b6d2ef; }
+  *:link:hover, .button:hover:link, .button:hover:visited {
+    color: #4a90d9; }
+    *:selected *:link:hover, *:selected .button:hover:link, *:selected .button:hover:visited {
+      color: #ecf3fb; }
+  *:link:active, .button:active:link, .button:active:visited {
+    color: #2a76c6; }
+    *:selected *:link:active, *:selected .button:active:link, *:selected .button:active:visited {
       color: #dae8f7; }
   *:link:backdrop, .button:backdrop:link, .button:backdrop:visited, *:link:backdrop:hover, .button:backdrop:hover:link, .button:backdrop:hover:visited, *:link:backdrop:hover:selected, .button:backdrop:hover:selected:link, .button:backdrop:hover:selected:visited, .titlebar.selection-mode .subtitle:backdrop:hover:link, GtkCalendar.selection-mode.header .subtitle:backdrop:hover:link,
   .header-bar.selection-mode .subtitle:backdrop:hover:link {
     color: #4a90d9; }
   *:link:selected, .button:selected:link, .button:selected:visited, .titlebar.selection-mode .subtitle:link, GtkCalendar.selection-mode.header .subtitle:link,
   .header-bar.selection-mode .subtitle:link, *:selected *:link, *:selected .button:link, *:selected .button:visited {
-    color: #ffffff; }
+    color: #dae8f7; }
 
 .button:link, .header-bar .button.titlebutton:link,
 .titlebar .button.titlebutton:link,
@@ -1881,7 +1889,7 @@ GtkTreeView.view.progressbar {
     padding: 4px 8px; }
     .menubar > .menuitem:hover {
       box-shadow: inset 0 -3px #4a90d9;
-      color: #4a90d9; }
+      color: #2a76c6; }
     .menubar > .menuitem:insensitive {
       color: #8d9091;
       box-shadow: none; }