Auto merge of #102237 - GuillaumeGomez:sidebar-links-color, r=notriddle

Migrate sidebar links color to CSS variables and unify themes with ayu

Part of https://github.com/rust-lang/rust/pull/98460.

This PR does two things:
 1. Migrate more theme CSS rules toward CSS variables.
 2. Remove `a.current` specific colors depending on the kind of the item behind the link. The `ayu` theme was already doing it this way and I think it makes much more sense like this.

You can test it [here](https://rustdoc.crud.net/imperio/sidebar-links-color/lib2/struct.Foo.html) by hovering other module's items in the sidebar (or check the selector `a.current`).

cc `@jsha`
r? `@notriddle`

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

@@ -545,6 +545,14 @@ h2.location a {
 	margin: 0;
 }
 
+.sidebar a, .sidebar .current {
+	color: var(--sidebar-link-color);
+}
+.sidebar .current,
+.sidebar a:hover {
+	background-color: var(--sidebar-current-link-background-color);
+}
+
 .sidebar-elems .block {
 	margin-bottom: 2em;
 }

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

@@ -35,6 +35,8 @@ Original by Dempfi (https://github.com/dempfi/ayu)
 	--keyword-link-color: #39afd7;
 	--mod-link-color: #39afd7;
 	--link-color: #39afd7;
+	--sidebar-link-color: #53b1db;
+	--sidebar-current-link-background-color: transparent;
 }
 
 .slider {
@@ -85,7 +87,6 @@ pre, .rustdoc.source .example-wrap {
 
 .sidebar .current,
 .sidebar a:hover {
-	background-color: transparent;
 	color: #ffb44c;
 }
 
@@ -119,9 +120,6 @@ pre, .rustdoc.source .example-wrap {
 
 .content .item-info::before { color: #ccc; }
 
-.sidebar a { color: #53b1db; }
-.sidebar a.current.type { color: #53b1db; }
-
 pre.rust .comment { color: #788797; }
 pre.rust .doccomment { color: #a1ac88; }
 
@@ -284,21 +282,6 @@ a.result-static:focus {}
 a.result-primitive:focus {}
 a.result-keyword:focus {}
 
-.sidebar a.current.enum {}
-.sidebar a.current.struct {}
-.sidebar a.current.foreigntype {}
-.sidebar a.current.attr,
-.sidebar a.current.derive,
-.sidebar a.current.macro {}
-.sidebar a.current.union {}
-.sidebar a.current.constant
-.sidebar a.current.static {}
-.sidebar a.current.primitive {}
-.sidebar a.current.trait {}
-.sidebar a.current.traitalias {}
-.sidebar a.current.fn {}
-.sidebar a.current.keyword {}
-
 kbd {
 	color: #c5c5c5;
 	background-color: #314559;

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

@@ -30,6 +30,8 @@
 	--keyword-link-color: #d2991d;
 	--mod-link-color:  #d2991d;
 	--link-color: #d2991d;
+	--sidebar-link-color: #fdbf35;
+	--sidebar-current-link-background-color: #444;
 }
 
 .slider {
@@ -49,11 +51,6 @@ input:focus + .slider {
 		drop-shadow(0 -1px 0 #fff)
 }
 
-.sidebar .current,
-.sidebar a:hover {
-	background: #444;
-}
-
 .src-line-numbers span { color: #3B91E2; }
 .src-line-numbers .line-highlighted {
 	background-color: #0a042f !important;
@@ -91,23 +88,6 @@ a.result-keyword:focus { background-color: #884719; }
 
 .content .item-info::before { color: #ccc; }
 
-.sidebar a { color: #fdbf35; }
-.sidebar a.current.enum { color: #12ece2; }
-.sidebar a.current.struct { color: #12ece2; }
-.sidebar a.current.type { color: #12ece2; }
-.sidebar a.current.foreigntype { color: #12ece2; }
-.sidebar a.current.attr,
-.sidebar a.current.derive,
-.sidebar a.current.macro { color: #0be900; }
-.sidebar a.current.union { color: #12ece2; }
-.sidebar a.current.constant
-.sidebar a.current.static { color: #fdbf35; }
-.sidebar a.current.primitive { color: #12ece2; }
-.sidebar a.current.trait { color: #cca7ff; }
-.sidebar a.current.traitalias { color: #cca7ff; }
-.sidebar a.current.fn { color: #32d479; }
-.sidebar a.current.keyword { color: #fdbf35; }
-
 pre.rust .comment { color: #8d8d8b; }
 pre.rust .doccomment { color: #8ca375; }
 

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

@@ -30,6 +30,8 @@
 	--keyword-link-color: #3873ad;
 	--mod-link-color: #3873ad;
 	--link-color: #3873ad;
+	--sidebar-link-color: #356da4;
+	--sidebar-current-link-background-color: #fff;
 }
 
 .slider {
@@ -48,11 +50,6 @@ input:focus + .slider {
 	 */
 }
 
-.sidebar .current,
-.sidebar a:hover {
-	background-color: #fff;
-}
-
 .src-line-numbers span { color: #c67e2d; }
 .src-line-numbers .line-highlighted {
 	background-color: #FDFFD3 !important;
@@ -90,23 +87,6 @@ a.result-keyword:focus { background-color: #afc6e4; }
 
 .content .item-info::before { color: #ccc; }
 
-.sidebar a { color: #356da4; }
-.sidebar a.current.enum { color: #a63283; }
-.sidebar a.current.struct { color: #a63283; }
-.sidebar a.current.type { color: #a63283; }
-.sidebar a.current.foreigntype { color: #356da4; }
-.sidebar a.current.attr,
-.sidebar a.current.derive,
-.sidebar a.current.macro { color: #067901; }
-.sidebar a.current.union { color: #a63283; }
-.sidebar a.current.constant
-.sidebar a.current.static { color: #356da4; }
-.sidebar a.current.primitive { color: #a63283; }
-.sidebar a.current.trait { color: #6849c3; }
-.sidebar a.current.traitalias { color: #4b349e; }
-.sidebar a.current.fn { color: #a67736; }
-.sidebar a.current.keyword { color: #356da4; }
-
 body.source .example-wrap pre.rust a {
 	background: #eee;
 }

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

@@ -0,0 +1,233 @@
+// This test checks links colors in sidebar before and after hover.
+goto: file://|DOC_PATH|/test_docs/struct.Foo.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:
+
+// Struct
+assert-css: (
+    ".sidebar a.struct:not(.current)",
+    {"color": "rgb(83, 177, 219)", "background-color": "rgba(0, 0, 0, 0)"},
+)
+move-cursor-to: ".sidebar a.struct:not(.current)"
+assert-css: (
+    ".sidebar a.struct:hover",
+    {"color": "rgb(255, 180, 76)", "background-color": "rgba(0, 0, 0, 0)"},
+)
+// Enum
+assert-css: (
+    ".sidebar a.enum",
+    {"color": "rgb(83, 177, 219)", "background-color": "rgba(0, 0, 0, 0)"},
+)
+move-cursor-to: ".sidebar a.enum"
+assert-css: (
+    ".sidebar a.enum:hover",
+    {"color": "rgb(255, 180, 76)", "background-color": "rgba(0, 0, 0, 0)"},
+)
+// Union
+assert-css: (
+    ".sidebar a.union",
+    {"color": "rgb(83, 177, 219)", "background-color": "rgba(0, 0, 0, 0)"},
+)
+move-cursor-to: ".sidebar a.union"
+assert-css: (
+    ".sidebar a.union:hover",
+    {"color": "rgb(255, 180, 76)", "background-color": "rgba(0, 0, 0, 0)"},
+)
+// Trait
+assert-css: (
+    ".sidebar a.trait",
+    {"color": "rgb(83, 177, 219)", "background-color": "rgba(0, 0, 0, 0)"},
+)
+move-cursor-to: ".sidebar a.trait"
+assert-css: (
+    ".sidebar a.trait:hover",
+    {"color": "rgb(255, 180, 76)", "background-color": "rgba(0, 0, 0, 0)"},
+)
+// Function
+assert-css: (
+    ".sidebar a.fn",
+    {"color": "rgb(83, 177, 219)", "background-color": "rgba(0, 0, 0, 0)"},
+)
+move-cursor-to: ".sidebar a.fn"
+assert-css: (
+    ".sidebar a.fn:hover",
+    {"color": "rgb(255, 180, 76)", "background-color": "rgba(0, 0, 0, 0)"},
+)
+// Type definition
+assert-css: (
+    ".sidebar a.type",
+    {"color": "rgb(83, 177, 219)", "background-color": "rgba(0, 0, 0, 0)"},
+)
+move-cursor-to: ".sidebar a.type"
+assert-css: (
+    ".sidebar a.type:hover",
+    {"color": "rgb(255, 180, 76)", "background-color": "rgba(0, 0, 0, 0)"},
+)
+// Keyword
+assert-css: (
+    ".sidebar a.keyword",
+    {"color": "rgb(83, 177, 219)", "background-color": "rgba(0, 0, 0, 0)"},
+)
+move-cursor-to: ".sidebar a.keyword"
+assert-css: (
+    ".sidebar a.keyword:hover",
+    {"color": "rgb(255, 180, 76)", "background-color": "rgba(0, 0, 0, 0)"},
+)
+
+// Dark theme
+local-storage: {"rustdoc-theme": "dark"}
+reload:
+
+// Struct
+assert-css: (
+    ".sidebar a.struct:not(.current)",
+    {"color": "rgb(253, 191, 53)", "background-color": "rgba(0, 0, 0, 0)"},
+)
+move-cursor-to: ".sidebar a.struct:not(.current)"
+assert-css: (
+    ".sidebar a.struct:hover",
+    {"color": "rgb(253, 191, 53)", "background-color": "rgb(68, 68, 68)"},
+)
+// Enum
+assert-css: (
+    ".sidebar a.enum",
+    {"color": "rgb(253, 191, 53)", "background-color": "rgba(0, 0, 0, 0)"},
+)
+move-cursor-to: ".sidebar a.enum"
+assert-css: (
+    ".sidebar a.enum:hover",
+    {"color": "rgb(253, 191, 53)", "background-color": "rgb(68, 68, 68)"},
+)
+// Union
+assert-css: (
+    ".sidebar a.union",
+    {"color": "rgb(253, 191, 53)", "background-color": "rgba(0, 0, 0, 0)"},
+)
+move-cursor-to: ".sidebar a.union"
+assert-css: (
+    ".sidebar a.union:hover",
+    {"color": "rgb(253, 191, 53)", "background-color": "rgb(68, 68, 68)"},
+)
+// Trait
+assert-css: (
+    ".sidebar a.trait",
+    {"color": "rgb(253, 191, 53)", "background-color": "rgba(0, 0, 0, 0)"},
+)
+move-cursor-to: ".sidebar a.trait"
+assert-css: (
+    ".sidebar a.trait:hover",
+    {"color": "rgb(253, 191, 53)", "background-color": "rgb(68, 68, 68)"},
+)
+// Function
+assert-css: (
+    ".sidebar a.fn",
+    {"color": "rgb(253, 191, 53)", "background-color": "rgba(0, 0, 0, 0)"},
+)
+move-cursor-to: ".sidebar a.fn"
+assert-css: (
+    ".sidebar a.fn:hover",
+    {"color": "rgb(253, 191, 53)", "background-color": "rgb(68, 68, 68)"},
+)
+// Type definition
+assert-css: (
+    ".sidebar a.type",
+    {"color": "rgb(253, 191, 53)", "background-color": "rgba(0, 0, 0, 0)"},
+)
+move-cursor-to: ".sidebar a.type"
+assert-css: (
+    ".sidebar a.type:hover",
+    {"color": "rgb(253, 191, 53)", "background-color": "rgb(68, 68, 68)"},
+)
+// Keyword
+assert-css: (
+    ".sidebar a.keyword",
+    {"color": "rgb(253, 191, 53)", "background-color": "rgba(0, 0, 0, 0)"},
+)
+move-cursor-to: ".sidebar a.keyword"
+assert-css: (
+    ".sidebar a.keyword:hover",
+    {"color": "rgb(253, 191, 53)", "background-color": "rgb(68, 68, 68)"},
+)
+
+// Light theme
+local-storage: {"rustdoc-theme": "light"}
+reload:
+
+// Struct
+assert-css: (
+    ".sidebar a.struct:not(.current)",
+    {"color": "rgb(53, 109, 164)", "background-color": "rgba(0, 0, 0, 0)"},
+)
+move-cursor-to: ".sidebar a.struct:not(.current)"
+assert-css: (
+    ".sidebar a.struct:hover",
+    {"color": "rgb(53, 109, 164)", "background-color": "rgb(255, 255, 255)"},
+)
+// Enum
+assert-css: (
+    ".sidebar a.enum",
+    {"color": "rgb(53, 109, 164)", "background-color": "rgba(0, 0, 0, 0)"},
+)
+move-cursor-to: ".sidebar a.enum"
+assert-css: (
+    ".sidebar a.enum:hover",
+    {"color": "rgb(53, 109, 164)", "background-color": "rgb(255, 255, 255)"},
+)
+// Union
+assert-css: (
+    ".sidebar a.union",
+    {"color": "rgb(53, 109, 164)", "background-color": "rgba(0, 0, 0, 0)"},
+)
+move-cursor-to: ".sidebar a.union"
+assert-css: (
+    ".sidebar a.union:hover",
+    {"color": "rgb(53, 109, 164)", "background-color": "rgb(255, 255, 255)"},
+)
+// Trait
+assert-css: (
+    ".sidebar a.trait",
+    {"color": "rgb(53, 109, 164)", "background-color": "rgba(0, 0, 0, 0)"},
+)
+move-cursor-to: ".sidebar a.trait"
+assert-css: (
+    ".sidebar a.trait:hover",
+    {"color": "rgb(53, 109, 164)", "background-color": "rgb(255, 255, 255)"},
+)
+// Function
+assert-css: (
+    ".sidebar a.fn",
+    {"color": "rgb(53, 109, 164)", "background-color": "rgba(0, 0, 0, 0)"},
+)
+move-cursor-to: ".sidebar a.fn"
+assert-css: (
+    ".sidebar a.fn:hover",
+    {"color": "rgb(53, 109, 164)", "background-color": "rgb(255, 255, 255)"},
+)
+// Type definition
+assert-css: (
+    ".sidebar a.type",
+    {"color": "rgb(53, 109, 164)", "background-color": "rgba(0, 0, 0, 0)"},
+)
+move-cursor-to: ".sidebar a.type"
+assert-css: (
+    ".sidebar a.type:hover",
+    {"color": "rgb(53, 109, 164)", "background-color": "rgb(255, 255, 255)"},
+)
+// Keyword
+assert-css: (
+    ".sidebar a.keyword",
+    {"color": "rgb(53, 109, 164)", "background-color": "rgba(0, 0, 0, 0)"},
+)
+move-cursor-to: ".sidebar a.keyword"
+assert-css: (
+    ".sidebar a.keyword:hover",
+    {"color": "rgb(53, 109, 164)", "background-color": "rgb(255, 255, 255)"},
+)