Rollup merge of rust-lang#101934 - GuillaumeGomez:theme-links-cleanup…

…, r=notriddle

Continue migration of CSS themes

Now that rust-lang#101898 has been merged, we can move forward.

This PR moves more CSS theme rules as CSS variables. I also added a GUI test to prevent regressions.

Part of rust-lang#98460.

r? ``@notriddle``

src/librustdoc/html/static/css/rustdoc.css

@@ -240,6 +240,49 @@ pre.rust a,
 	color: var(--main-color);
 }
 
+.content span.enum, .content a.enum,
+.content span.struct, .content a.struct,
+.content span.union, .content a.union,
+.content span.primitive, .content a.primitive,
+.content span.type, .content a.type,
+.content span.foreigntype, .content a.foreigntype {
+	color: var(--type-link-color);
+}
+
+.content span.trait, .content a.trait,
+.content span.traitalias, .content a.traitalias {
+	color: var(--trait-link-color);
+}
+
+.content span.associatedtype, .content a.associatedtype,
+.content span.constant, .content a.constant,
+.content span.static, .content a.static {
+	color: var(--assoc-item-link-color);
+}
+
+.content span.fn, .content a.fn,
+.content .fnname {
+	color: var(--function-link-color);
+}
+
+.content span.attr, .content a.attr,
+.content span.derive, .content a.derive,
+.content span.macro, .content a.macro {
+	color: var(--macro-link-color);
+}
+
+.content span.mod, .content a.mod, .block a.current.mod {
+	color: var(--mod-link-color);
+}
+
+.content span.keyword, .content a.keyword {
+	color: var(--keyword-link-color);
+}
+
+a {
+	color: var(--link-color);
+}
+
 ol, ul {
 	padding-left: 24px;
 }

src/librustdoc/html/static/css/themes/ayu.css

@@ -27,6 +27,14 @@ Original by Dempfi (https://github.com/dempfi/ayu)
 	--codeblock-error-color: rgba(255, 0, 0, .5);
 	--codeblock-ignore-hover-color: rgb(255, 142, 0);
 	--codeblock-ignore-color: rgba(255, 142, 0, .6);
+	--type-link-color: #ffa0a5;
+	--trait-link-color: #39afd7;
+	--assoc-item-link-color: #39afd7;
+	--function-link-color: #fdd687;
+	--macro-link-color: #a37acc;
+	--keyword-link-color: #39afd7;
+	--mod-link-color: #39afd7;
+	--link-color: #39afd7;
 }
 
 .slider {
@@ -111,44 +119,12 @@ pre, .rustdoc.source .example-wrap {
 
 .content .item-info::before { color: #ccc; }
 
-.content span.foreigntype, .content a.foreigntype { color: #ffa0a5; }
-.content span.union, .content a.union { color: #ffa0a5; }
-.content span.constant, .content a.constant,
-.content span.static, .content a.static { color: #39AFD7; }
-.content span.primitive, .content a.primitive { color: #ffa0a5; }
-.content span.traitalias, .content a.traitalias { color: #39AFD7; }
-.content span.keyword, .content a.keyword { color: #39AFD7; }
-.content span.mod, .content a.mod {
-	color: #39AFD7;
-}
-.content span.struct, .content a.struct {
-	color: #ffa0a5;
-}
-.content span.enum, .content a.enum {
-	color: #ffa0a5;
-}
-.content span.trait, .content a.trait {
-	color: #39AFD7;
-}
-.content span.type, .content a.type { color: #39AFD7; }
-.content span.associatedtype, .content a.associatedtype { color: #39AFD7; }
-.content span.fn, .content a.fn,
-.content .fnname { color: #fdd687; }
-.content span.attr, .content a.attr, .content span.derive,
-.content a.derive, .content span.macro, .content a.macro {
-	color: #a37acc;
-}
-
 .sidebar a { color: #53b1db; }
 .sidebar a.current.type { color: #53b1db; }
 
 pre.rust .comment { color: #788797; }
 pre.rust .doccomment { color: #a1ac88; }
 
-a {
-	color: #39AFD7;
-}
-
 .sidebar h2 a,
 .sidebar h3 a {
 	color: white;

src/librustdoc/html/static/css/themes/dark.css

@@ -22,6 +22,14 @@
 	--codeblock-error-color: rgba(255, 0, 0, .5);
 	--codeblock-ignore-hover-color: rgb(255, 142, 0);
 	--codeblock-ignore-color: rgba(255, 142, 0, .6);
+	--type-link-color: #2dbfb8;
+	--trait-link-color: #b78cf2;
+	--assoc-item-link-color: #d2991d;
+	--function-link-color: #2bab63;
+	--macro-link-color: #09bd00;
+	--keyword-link-color: #d2991d;
+	--mod-link-color:  #d2991d;
+	--link-color: #d2991d;
 }
 
 .slider {
@@ -83,25 +91,6 @@ a.result-keyword:focus { background-color: #884719; }
 
 .content .item-info::before { color: #ccc; }
 
-.content span.enum, .content a.enum { color: #2dbfb8; }
-.content span.struct, .content a.struct { color: #2dbfb8; }
-.content span.type, .content a.type { color: #2dbfb8; }
-.content span.associatedtype, .content a.associatedtype { color: #D2991D; }
-.content span.foreigntype, .content a.foreigntype { color: #2dbfb8; }
-.content span.attr, .content a.attr,
-.content span.derive, .content a.derive,
-.content span.macro, .content a.macro { color: #09bd00; }
-.content span.union, .content a.union { color: #2dbfb8; }
-.content span.constant, .content a.constant,
-.content span.static, .content a.static { color: #D2991D; }
-.content span.primitive, .content a.primitive { color: #2dbfb8; }
-.content span.mod, .content a.mod { color: #D2991D; }
-.content span.trait, .content a.trait { color: #b78cf2; }
-.content span.traitalias, .content a.traitalias { color: #b78cf2; }
-.content span.fn, .content a.fn,
-.content .fnname { color: #2BAB63; }
-.content span.keyword, .content a.keyword { color: #D2991D; }
-
 .sidebar a { color: #fdbf35; }
 .sidebar a.current.enum { color: #12ece2; }
 .sidebar a.current.struct { color: #12ece2; }
@@ -122,10 +111,6 @@ a.result-keyword:focus { background-color: #884719; }
 pre.rust .comment { color: #8d8d8b; }
 pre.rust .doccomment { color: #8ca375; }
 
-a {
-	color: #D2991D;
-}
-
 body.source .example-wrap pre.rust a {
 	background: #333;
 }

src/librustdoc/html/static/css/themes/light.css

@@ -22,6 +22,14 @@
 	--codeblock-error-color: rgba(255, 0, 0, .5);
 	--codeblock-ignore-hover-color: rgb(255, 142, 0);
 	--codeblock-ignore-color: rgba(255, 142, 0, .6);
+	--type-link-color: #ad378a;
+	--trait-link-color: #6e4fc9;
+	--assoc-item-link-color: #3873ad;
+	--function-link-color: #ad7c37;
+	--macro-link-color: #068000;
+	--keyword-link-color: #3873ad;
+	--mod-link-color: #3873ad;
+	--link-color: #3873ad;
 }
 
 .slider {
@@ -82,25 +90,6 @@ a.result-keyword:focus { background-color: #afc6e4; }
 
 .content .item-info::before { color: #ccc; }
 
-.content span.enum, .content a.enum { color: #AD378A; }
-.content span.struct, .content a.struct { color: #AD378A; }
-.content span.type, .content a.type { color:  #AD378A; }
-.content span.associatedtype, .content a.associatedtype { color: #3873AD; }
-.content span.foreigntype, .content a.foreigntype { color: #3873AD; }
-.content span.attr, .content a.attr,
-.content span.derive, .content a.derive,
-.content span.macro, .content a.macro { color: #068000; }
-.content span.union, .content a.union { color: #AD378A; }
-.content span.constant, .content a.constant,
-.content span.static, .content a.static { color: #3873AD; }
-.content span.primitive, .content a.primitive { color: #AD378A; }
-.content span.mod, .content a.mod { color: #3873AD; }
-.content span.trait, .content a.trait { color: #6E4FC9; }
-.content span.traitalias, .content a.traitalias { color: #5137AD; }
-.content span.fn, .content a.fn,
-.content .fnname { color: #AD7C37; }
-.content span.keyword, .content a.keyword { color: #3873AD; }
-
 .sidebar a { color: #356da4; }
 .sidebar a.current.enum { color: #a63283; }
 .sidebar a.current.struct { color: #a63283; }
@@ -118,10 +107,6 @@ a.result-keyword:focus { background-color: #afc6e4; }
 .sidebar a.current.fn { color: #a67736; }
 .sidebar a.current.keyword { color: #356da4; }
 
-a {
-	color: #3873AD;
-}
-
 body.source .example-wrap pre.rust a {
 	background: #eee;
 }

src/test/rustdoc-gui/links-color.goml

@@ -0,0 +1,85 @@
+// This test checks links colors.
+goto: file://|DOC_PATH|/test_docs/index.html
+
+// This is needed so that the text color is computed.
+show-text: true
+
+// Ayu theme
+local-storage: {
+    "rustdoc-theme": "ayu",
+    "rustdoc-use-system-theme": "false",
+}
+reload:
+
+assert-css: (".item-table .mod", {"color": "rgb(57, 175, 215)"}, ALL)
+assert-css: (".item-table .macro", {"color": "rgb(163, 122, 204)"}, ALL)
+assert-css: (".item-table .struct", {"color": "rgb(255, 160, 165)"}, ALL)
+assert-css: (".item-table .enum", {"color": "rgb(255, 160, 165)"}, ALL)
+assert-css: (".item-table .trait", {"color": "rgb(57, 175, 215)"}, ALL)
+assert-css: (".item-table .fn", {"color": "rgb(253, 214, 135)"}, ALL)
+assert-css: (".item-table .type", {"color": "rgb(255, 160, 165)"}, ALL)
+assert-css: (".item-table .union", {"color": "rgb(255, 160, 165)"}, ALL)
+assert-css: (".item-table .keyword", {"color": "rgb(57, 175, 215)"}, ALL)
+
+assert-css: (
+    ".sidebar-elems a:not(.current)",
+    {"color": "rgb(83, 177, 219)", "background-color": "rgba(0, 0, 0, 0)", "font-weight": "400"},
+    ALL,
+)
+assert-css: (
+    ".sidebar-elems a.current",
+    {"color": "rgb(255, 180, 76)", "background-color": "rgba(0, 0, 0, 0)", "font-weight": "500"},
+    ALL,
+)
+
+
+// Dark theme
+local-storage: {"rustdoc-theme": "dark"}
+reload:
+
+assert-css: (".item-table .mod", {"color": "rgb(210, 153, 29)"}, ALL)
+assert-css: (".item-table .macro", {"color": "rgb(9, 189, 0)"}, ALL)
+assert-css: (".item-table .struct", {"color": "rgb(45, 191, 184)"}, ALL)
+assert-css: (".item-table .enum", {"color": "rgb(45, 191, 184)"}, ALL)
+assert-css: (".item-table .trait", {"color": "rgb(183, 140, 242)"}, ALL)
+assert-css: (".item-table .fn", {"color": "rgb(43, 171, 99)"}, ALL)
+assert-css: (".item-table .type", {"color": "rgb(45, 191, 184)"}, ALL)
+assert-css: (".item-table .union", {"color": "rgb(45, 191, 184)"}, ALL)
+assert-css: (".item-table .keyword", {"color": "rgb(210, 153, 29)"}, ALL)
+
+assert-css: (
+    ".sidebar-elems a:not(.current)",
+    {"color": "rgb(253, 191, 53)", "background-color": "rgba(0, 0, 0, 0)", "font-weight": "400"},
+    ALL,
+)
+assert-css: (
+    ".sidebar-elems a.current",
+    {"color": "rgb(253, 191, 53)", "background-color": "rgb(68, 68, 68)", "font-weight": "500"},
+    ALL,
+)
+
+
+// Light theme
+local-storage: {"rustdoc-theme": "light"}
+reload:
+
+assert-css: (".item-table .mod", {"color": "rgb(56, 115, 173)"}, ALL)
+assert-css: (".item-table .macro", {"color": "rgb(6, 128, 0)"}, ALL)
+assert-css: (".item-table .struct", {"color": "rgb(173, 55, 138)"}, ALL)
+assert-css: (".item-table .enum", {"color": "rgb(173, 55, 138)"}, ALL)
+assert-css: (".item-table .trait", {"color": "rgb(110, 79, 201)"}, ALL)
+assert-css: (".item-table .fn", {"color": "rgb(173, 124, 55)"}, ALL)
+assert-css: (".item-table .type", {"color": "rgb(173, 55, 138)"}, ALL)
+assert-css: (".item-table .union", {"color": "rgb(173, 55, 138)"}, ALL)
+assert-css: (".item-table .keyword", {"color": "rgb(56, 115, 173)"}, ALL)
+
+assert-css: (
+    ".sidebar-elems a:not(.current)",
+    {"color": "rgb(53, 109, 164)", "background-color": "rgba(0, 0, 0, 0)", "font-weight": "400"},
+    ALL,
+)
+assert-css: (
+    ".sidebar-elems a.current",
+    {"color": "rgb(53, 109, 164)", "background-color": "rgb(255, 255, 255)", "font-weight": "500"},
+    ALL,
+)