Rollup merge of #91480 - jsha:fewer-colors, r=GuillaumeGomez

rustdoc: use smaller number of colors to distinguish items

This reduces visual distractions when reading method signatures.

As discussed in https://github.com/rust-lang/rust/issues/59845#issuecomment-974757191, this categorizes items into one of six colors (down from thirteen):

 - method, function (ochre `#AD7C37`)
 - trait, trait alias (dark slate blue `#6E4FC9`)
 - enum, struct, type alias, union, primitive (maroon `#AD378A`)
 - static, module, keyword, associated type, foreign type (steel blue `#3873AD`)
 - macro (green `#068000`)
 - generic params, self, Self (unmarked black `#000000`)

I slightly tweaked the actual color values so they'd have the same lightness (previously the trait color stood out much more than the others). And I made the color for links in general consistently use steel blue (previously there was a slightly different color for "search-failed").

The ayu and dark themes have been updated according to the same logic. I haven't changed any of the color values in those themes, just their assignment to types.

Demo:

https://rustdoc.crud.net/jsha/fewer-colors/std/string/struct.String.html
https://rustdoc.crud.net/jsha/fewer-colors/std/vec/struct.Vec.html
https://rustdoc.crud.net/jsha/fewer-colors/std/io/trait.Read.html
https://rustdoc.crud.net/jsha/fewer-colors/std/iter/trait.Iterator.html

3 files changed, 73 insertions, 59 deletions

diff --git a/src/librustdoc/html/static/css/themes/ayu.css b/src/librustdoc/html/static/css/themes/ayu.css
index dea6d08396f..38040eeca52 100644
--- a/src/librustdoc/html/static/css/themes/ayu.css
+++ b/src/librustdoc/html/static/css/themes/ayu.css
@@ -167,29 +167,35 @@ pre, .rustdoc.source .example-wrap {
 
 .content .item-info::before { color: #ccc; }
 
-.content span.foreigntype, .content a.foreigntype { color: #ef57ff; }
-.content span.union, .content a.union { color: #98a01c; }
+.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: #6380a0; }
-.content span.primitive, .content a.primitive { color: #32889b; }
-.content span.traitalias, .content a.traitalias { color: #57d399; }
-.content span.keyword, .content a.keyword { color: #de5249; }
+.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.externcrate, .content span.mod, .content a.mod {
-	color: #acccf9;
+	color: #39AFD7;
 }
 .content span.struct, .content a.struct {
 	color: #ffa0a5;
 }
 .content span.enum, .content a.enum {
-	color: #99e0c9;
+	color: #ffa0a5;
 }
 .content span.trait, .content a.trait {
 	color: #39AFD7;
 }
 .content span.type, .content a.type {
-	color: #cfbcf5;
+	color: #39AFD7;
 }
+.content span.type,
+.content a.type,
+.block a.current.type { color: #39AFD7; }
+.content span.associatedtype,
+.content a.associatedtype,
+.block a.current.associatedtype { color: #39AFD7; }
 .content span.fn, .content a.fn, .content span.method,
 .content a.method, .content span.tymethod,
 .content a.tymethod, .content .fnname {
@@ -454,11 +460,12 @@ above the `@media (max-width: 700px)` rules due to a bug in the css checker */
 .block a.current.derive,.content span.macro,.content a.macro,.block a.current.macro {}
 .content span.struct,.content a.struct,.block a.current.struct {}
 #titles>button:hover,#titles>button.selected {}
-.content span.type,.content a.type,.block a.current.type {}
+.content span.typedef,.content a.typedef,.block a.current.typedef {}
 .content span.union,.content a.union,.block a.current.union {}
 pre.rust .lifetime {}
 .stab.unstable {}
-h2,h3:not(.impl):not(.method):not(.type):not(.tymethod),h4:not(.method):not(.type):not(.tymethod) {}
+h2,
+h3:not(.impl):not(.method):not(.type):not(.tymethod), h4:not(.method):not(.type):not(.tymethod) {}
 .content span.enum,.content a.enum,.block a.current.enum {}
 .content span.constant,.content a.constant,.block a.current.constant,.content span.static,
 .content a.static, .block a.current.static {}
@@ -495,6 +502,7 @@ a.result-fn:focus,
 a.result-method:focus,
 a.result-tymethod:focus {}
 a.result-type:focus {}
+a.result-associatedtype:focus {}
 a.result-foreigntype:focus {}
 a.result-attr:focus,
 a.result-derive:focus,
diff --git a/src/librustdoc/html/static/css/themes/dark.css b/src/librustdoc/html/static/css/themes/dark.css
index 6e2cbbecbf7..f4181e431c8 100644
--- a/src/librustdoc/html/static/css/themes/dark.css
+++ b/src/librustdoc/html/static/css/themes/dark.css
@@ -119,47 +119,49 @@ pre, .rustdoc.source .example-wrap {
 a.result-trait:focus { background-color: #013191; }
 a.result-traitalias:focus { background-color: #013191; }
 a.result-mod:focus,
-a.result-externcrate:focus { background-color: #afc6e4; }
-a.result-mod:focus { background-color: #803a1b; }
-a.result-externcrate:focus { background-color: #396bac; }
-a.result-enum:focus { background-color: #5b4e68; }
+a.result-externcrate:focus { background-color: #884719; }
+a.result-enum:focus { background-color: #194e9f; }
 a.result-struct:focus { background-color: #194e9f; }
-a.result-union:focus { background-color: #b7bd49; }
+a.result-union:focus { background-color: #194e9f; }
 a.result-fn:focus,
 a.result-method:focus,
 a.result-tymethod:focus { background-color: #4950ed; }
-a.result-type:focus { background-color: #38902c; }
-a.result-foreigntype:focus { background-color: #b200d6; }
+a.result-type:focus { background-color: #194e9f; }
+a.result-associatedtype:focus { background-color: #884719; }
+a.result-foreigntype:focus { background-color: #194e9f; }
 a.result-attr:focus,
 a.result-derive:focus,
 a.result-macro:focus { background-color: #217d1c; }
 a.result-constant:focus,
-a.result-static:focus { background-color: #0063cc; }
-a.result-primitive:focus { background-color: #00708a; }
+a.result-static:focus { background-color: #884719; }
+a.result-primitive:focus { background-color: #194e9f; }
 a.result-keyword:focus { background-color: #884719; }
 
 .content .item-info::before { color: #ccc; }
 
-.content span.enum, .content a.enum, .block a.current.enum { color: #82b089; }
+.content span.enum, .content a.enum, .block a.current.enum { color: #2dbfb8; }
 .content span.struct, .content a.struct, .block a.current.struct { color: #2dbfb8; }
-.content span.type, .content a.type, .block a.current.type { color: #ff7f00; }
-.content span.foreigntype, .content a.foreigntype, .block a.current.foreigntype { color: #dd7de8; }
+.content span.type, .content a.type, .block a.current.type { color: #2dbfb8; }
+.content span.associatedtype,
+.content a.associatedtype,
+.block a.current.associatedtype { color: #D2991D; }
+.content span.foreigntype, .content a.foreigntype, .block a.current.foreigntype { color: #2dbfb8; }
 .content span.attr, .content a.attr, .block a.current.attr,
 .content span.derive, .content a.derive, .block a.current.derive,
 .content span.macro, .content a.macro, .block a.current.macro { color: #09bd00; }
-.content span.union, .content a.union, .block a.current.union { color: #a6ae37; }
+.content span.union, .content a.union, .block a.current.union { color: #2dbfb8; }
 .content span.constant, .content a.constant, .block a.current.constant,
-.content span.static, .content a.static, .block a.current.static { color: #82a5c9; }
-.content span.primitive, .content a.primitive, .block a.current.primitive { color: #43aec7; }
+.content span.static, .content a.static, .block a.current.static { color: #D2991D; }
+.content span.primitive, .content a.primitive, .block a.current.primitive { color: #2dbfb8; }
 .content span.externcrate,
-.content span.mod, .content a.mod, .block a.current.mod { color: #bda000; }
+.content span.mod, .content a.mod, .block a.current.mod { color: #D2991D; }
 .content span.trait, .content a.trait, .block a.current.trait { color: #b78cf2; }
-.content span.traitalias, .content a.traitalias, .block a.current.traitalias { color: #b397da; }
+.content span.traitalias, .content a.traitalias, .block a.current.traitalias { color: #b78cf2; }
 .content span.fn, .content a.fn, .block a.current.fn,
 .content span.method, .content a.method, .block a.current.method,
 .content span.tymethod, .content a.tymethod, .block a.current.tymethod,
 .content .fnname{ color: #2BAB63; }
-.content span.keyword, .content a.keyword, .block a.current.keyword { color: #de5249; }
+.content span.keyword, .content a.keyword, .block a.current.keyword { color: #D2991D; }
 
 pre.rust .comment { color: #8d8d8b; }
 pre.rust .doccomment { color: #8ca375; }
diff --git a/src/librustdoc/html/static/css/themes/light.css b/src/librustdoc/html/static/css/themes/light.css
index 4bf411d459a..176f63098a4 100644
--- a/src/librustdoc/html/static/css/themes/light.css
+++ b/src/librustdoc/html/static/css/themes/light.css
@@ -9,7 +9,7 @@ h1, h2, h3, h4 {
 	color: black;
 }
 h1.fqn {
-	border-bottom-color: #D5D5D5;
+	border-bottom-color: #DDDDDD;
 }
 h2, h3, h4 {
 	border-bottom-color: #DDDDDD;
@@ -31,7 +31,7 @@ pre, .rustdoc.source .example-wrap {
 }
 
 .sidebar {
-	background-color: #F1F1F1;
+	background-color: #F5F5F5;
 }
 
 /* Improve the scrollbar display on firefox */
@@ -90,7 +90,7 @@ pre, .rustdoc.source .example-wrap {
 
 .line-numbers span { color: #c67e2d; }
 .line-numbers .line-highlighted {
-	background-color: #f6fdb0 !important;
+	background-color: #FDFFD3 !important;
 }
 
 .docblock h1, .docblock h2, .docblock h3, .docblock h4, .docblock h5, .docblock h6 {
@@ -120,44 +120,48 @@ a.result-trait:focus { background-color: #c7b6ff; }
 a.result-traitalias:focus { background-color: #c7b6ff; }
 a.result-mod:focus,
 a.result-externcrate:focus { background-color: #afc6e4; }
-a.result-enum:focus { background-color: #b4d1b9; }
+a.result-enum:focus { background-color: #e7b1a0; }
 a.result-struct:focus { background-color: #e7b1a0; }
-a.result-union:focus { background-color: #b7bd49; }
+a.result-union:focus { background-color: #e7b1a0; }
 a.result-fn:focus,
 a.result-method:focus,
 a.result-tymethod:focus { background-color: #c6afb3; }
-a.result-type:focus { background-color: #ffc891; }
-a.result-foreigntype:focus { background-color: #f5c4ff; }
+a.result-type:focus { background-color: #e7b1a0; }
+a.result-associatedtype:focus { background-color: #afc6e4; }
+a.result-foreigntype:focus { background-color: #e7b1a0; }
 a.result-attr:focus,
 a.result-derive:focus,
 a.result-macro:focus { background-color: #8ce488; }
 a.result-constant:focus,
-a.result-static:focus { background-color: #c3e0ff; }
-a.result-primitive:focus { background-color: #9aecff; }
-a.result-keyword:focus { background-color: #f99650; }
+a.result-static:focus { background-color: #afc6e4; }
+a.result-primitive:focus { background-color: #e7b1a0; }
+a.result-keyword:focus { background-color: #afc6e4; }
 
 .content .item-info::before { color: #ccc; }
 
-.content span.enum, .content a.enum, .block a.current.enum { color: #508157; }
-.content span.struct, .content a.struct, .block a.current.struct { color: #ad448e; }
-.content span.type, .content a.type, .block a.current.type { color: #ba5d00; }
-.content span.foreigntype, .content a.foreigntype, .block a.current.foreigntype { color: #cd00e2; }
+.content span.enum, .content a.enum, .block a.current.enum { color: #AD378A; }
+.content span.struct, .content a.struct, .block a.current.struct { color: #AD378A; }
+.content span.type, .content a.type, .block a.current.type { color:  #AD378A; }
+.content span.foreigntype, .content a.foreigntype, .block a.current.foreigntype { color: #3873AD; }
+.content span.associatedtype,
+.content a.associatedtype,
+.block a.current.associatedtype { color: #3873AD; }
 .content span.attr, .content a.attr, .block a.current.attr,
 .content span.derive, .content a.derive, .block a.current.derive,
 .content span.macro, .content a.macro, .block a.current.macro { color: #068000; }
-.content span.union, .content a.union, .block a.current.union { color: #767b27; }
+.content span.union, .content a.union, .block a.current.union { color: #AD378A; }
 .content span.constant, .content a.constant, .block a.current.constant,
-.content span.static, .content a.static, .block a.current.static { color: #546e8a; }
-.content span.primitive, .content a.primitive, .block a.current.primitive { color: #2c8093; }
+.content span.static, .content a.static, .block a.current.static { color: #3873AD; }
+.content span.primitive, .content a.primitive, .block a.current.primitive { color: #AD378A; }
 .content span.externcrate,
-.content span.mod, .content a.mod, .block a.current.mod { color: #4d76ae; }
-.content span.trait, .content a.trait, .block a.current.trait { color: #7c5af3; }
-.content span.traitalias, .content a.traitalias, .block a.current.traitalias { color: #6841f1; }
+.content span.mod, .content a.mod, .block a.current.mod { color: #3873AD; }
+.content span.trait, .content a.trait, .block a.current.trait { color: #6E4FC9; }
+.content span.traitalias, .content a.traitalias, .block a.current.traitalias { color: #5137AD; }
 .content span.fn, .content a.fn, .block a.current.fn,
 .content span.method, .content a.method, .block a.current.method,
 .content span.tymethod, .content a.tymethod, .block a.current.tymethod,
-.content .fnname { color: #9a6e31; }
-.content span.keyword, .content a.keyword, .block a.current.keyword { color: #de5249; }
+.content .fnname { color: #AD7C37; }
+.content span.keyword, .content a.keyword, .block a.current.keyword { color: #3873AD; }
 
 nav:not(.sidebar) {
 	border-bottom-color: #e0e0e0;
@@ -268,7 +272,7 @@ pre.rust .question-mark {
 }
 
 a.test-arrow {
-	background-color: rgba(78, 139, 202, 0.2);
+	background-color: rgb(78, 139, 202, 0.2);
 }
 
 a.test-arrow:hover{
@@ -285,7 +289,7 @@ a.test-arrow:hover{
 }
 
 :target {
-	border-right: 3px solid #ffb44c;
+	border-right: 3px solid #AD7C37;
 }
 
 pre.compile_fail {
@@ -337,7 +341,7 @@ pre.ignore:hover, .information:hover + pre.ignore {
 }
 
 .search-failed a {
-	color: #0089ff;
+	color: #3873AD;
 }
 
 .tooltip::after {
@@ -374,18 +378,18 @@ pre.ignore:hover, .information:hover + pre.ignore {
 
 @media (max-width: 700px) {
 	.sidebar-menu {
-		background-color: #F1F1F1;
+		background-color: #F5F5F5;
 		border-bottom-color: #e0e0e0;
 		border-right-color: #e0e0e0;
 	}
 
 	.sidebar-elems {
-		background-color: #F1F1F1;
+		background-color: #F5F5F5;
 		border-right-color: #000;
 	}
 
 	#sidebar-filler {
-		background-color: #F1F1F1;
+		background-color: #F5F5F5;
 		border-bottom-color: #e0e0e0;
 	}
 }
@@ -453,13 +457,13 @@ kbd {
 }
 
 #sidebar-toggle {
-	background-color: #F1F1F1;
+	background-color: #F5F5F5;
 }
 #sidebar-toggle:hover {
 	background-color: #E0E0E0;
 }
 #source-sidebar {
-	background-color: #F1F1F1;
+	background-color: #F5F5F5;
 }
 #source-sidebar > .title {
 	border-bottom-color: #ccc;