Rollup merge of #101348 - GuillaumeGomez:cleanup-css-theme, r=notriddle

Cleanup css theme Follow-up of #100494. The change for the border color of the search input in the dark mode was actually a weird case: the search input border was unique, it didn't share the same variable with other items with borders. This weird case being unique to the dark theme, I removed it, hence the modification in the GUI test. Live demo is [here](https://rustdoc.crud.net/imperio/cleanup-css-theme/std/index.html). cc `@jsha` r? `@notriddle`
rust-lang · Sep 3, 2022 · 7eed25b · 7eed25b
2 parents 9ed2deb + 30bdf54
commit 7eed25b
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 93 deletions.
diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
@@ -987,6 +987,9 @@ so that we can apply CSS-filters to change the arrow color in themes */
 	width: 100%;
 	background-color: var(--button-background-color);
 }
+.search-input:focus {
+	border-color: var(--search-input-focused-border-color);
+}
 
 .search-results {
 	display: none;
@@ -1167,6 +1170,12 @@ so that we can apply CSS-filters to change the arrow color in themes */
 	float: right;
 }
 
+.rightside:not(a),
+.out-of-band {
+	color: var(--right-side-color);
+}
+
+
 .impl-items .srclink, .impl .srclink, .methods .srclink {
 	/* Override header settings otherwise it's too bold */
 	font-weight: normal;
@@ -1205,6 +1214,7 @@ a.test-arrow:hover {
 
 .code-attribute {
 	font-weight: 300;
+	color: var(--code-attribute-color);
 }
 
 .item-spacer {
@@ -1478,6 +1488,16 @@ pre.rust {
 	background-color: var(--button-background-color);
 }
 
+#copy-path {
+	color: var(--copy-path-button-color);
+}
+#copy-path > img {
+	filter: var(--copy-path-img-filter);
+}
+#copy-path:hover > img {
+	filter: var(--copy-path-img-hover-filter);
+}
+
 @keyframes rotating {
 	from {
 		transform: rotate(0deg);
@@ -1601,6 +1621,12 @@ details.rustdoc-toggle > summary::before {
 	opacity: .5;
 }
 
+details.rustdoc-toggle > summary.hideme > span,
+details.rustdoc-toggle > summary::before,
+.more-examples-toggle summary, .more-examples-toggle .hide-more {
+	color: var(--toggles-color);
+}
+
 /* Screen readers see the text version at the end the line.
 	Visual readers see the icon at the start of the line, but small and transparent. */
 details.rustdoc-toggle > summary::after {

diff --git a/src/librustdoc/html/static/css/themes/ayu.css b/src/librustdoc/html/static/css/themes/ayu.css
@@ -16,6 +16,13 @@ Original by Dempfi (https://github.com/dempfi/ayu)
 	--headings-border-bottom-color: #5c6773;
 	--border-color: #5c6773;
 	--button-background-color: #141920;
+	--right-side-color: grey;
+	--code-attribute-color: #999;
+	--toggles-color: #999;
+	--search-input-focused-border-color: #5c6773; /* Same as `--border-color`. */
+	--copy-path-button-color: #fff;
+	--copy-path-img-filter: invert(70%);
+	--copy-path-img-hover-filter: invert(100%);
 }
 
 .slider {
@@ -158,11 +165,6 @@ body.source .example-wrap pre.rust a {
 	background: #333;
 }
 
-details.rustdoc-toggle > summary.hideme > span,
-details.rustdoc-toggle > summary::before {
-	color: #999;
-}
-
 details.rustdoc-toggle > summary::before {
 	filter: invert(100%);
 }
@@ -197,11 +199,6 @@ details.rustdoc-toggle > summary::before {
 	background: none;
 }
 
-.rightside:not(a),
-.out-of-band {
-	color: grey;
-}
-
 .result-name .primitive > i, .result-name .keyword > i {
 	color: #788797;
 }
@@ -242,10 +239,6 @@ a.test-arrow:hover {
 	color: #c5c5c5;
 }
 
-.code-attribute {
-	color: #999;
-}
-
 :target {
 	background: rgba(255, 236, 164, 0.06);
 	border-right: 3px solid rgba(255, 180, 76, 0.85);
@@ -341,7 +334,6 @@ individually rather than as a group) */
 /* FIXME: these rules should be at the bottom of the file but currently must be
 above the `@media (max-width: 700px)` rules due to a bug in the css checker */
 /* see https://github.com/rust-lang/rust/pull/71237#issuecomment-618170143 */
-.search-input:focus {}
 .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 {}
 .content span.struct,.content a.struct,.block a.current.struct {}
@@ -428,16 +420,6 @@ kbd {
 	filter: invert(100);
 }
 
-#copy-path {
-	color: #fff;
-}
-#copy-path > img {
-	filter: invert(70%);
-}
-#copy-path:hover > img {
-	filter: invert(100%);
-}
-
 #settings-menu > a:hover, #settings-menu > a:focus,
 #help-button > button:hover, #help-button > button:focus {
 	border-color: #e0e0e0;
@@ -471,9 +453,6 @@ kbd {
 	border-color: white;
 	color: white;
 }
-.more-examples-toggle summary, .more-examples-toggle .hide-more {
-	color: #999;
-}
 .scraped-example .example-wrap .rust span.highlight {
 	background: rgb(91, 59, 1);
 }

diff --git a/src/librustdoc/html/static/css/themes/dark.css b/src/librustdoc/html/static/css/themes/dark.css
@@ -11,6 +11,13 @@
 	--headings-border-bottom-color: #d2d2d2;
 	--border-color: #e0e0e0;
 	--button-background-color: #f0f0f0;
+	--right-side-color: grey;
+	--code-attribute-color: #999;
+	--toggles-color: #999;
+	--search-input-focused-border-color: #008dfd;
+	--copy-path-button-color: #999;
+	--copy-path-img-filter: invert(50%);
+	--copy-path-img-hover-filter: invert(65%);
 }
 
 .slider {
@@ -129,18 +136,12 @@ body.source .example-wrap pre.rust a {
 	background: #333;
 }
 
-details.rustdoc-toggle > summary.hideme > span,
-details.rustdoc-toggle > summary::before {
-	color: #999;
-}
-
 details.rustdoc-toggle > summary::before {
 	filter: invert(100%);
 }
 
 .search-input {
 	color: #111;
-	border-color: #f0f0f0;
 }
 
 #crate-search-div::after {
@@ -154,22 +155,13 @@ details.rustdoc-toggle > summary::before {
 	filter: invert(69%) sepia(60%) saturate(6613%) hue-rotate(184deg) brightness(100%) contrast(91%);
 }
 
-.search-input:focus {
-	border-color: #008dfd;
-}
-
 .stab { background: #314559; }
 
 .stab.portability > code {
 	color: #e6e1cf;
 	background: none;
 }
 
-.rightside:not(a),
-.out-of-band {
-	color: grey;
-}
-
 .line-numbers :target { background-color: transparent; }
 
 /* Code highlighting */
@@ -197,10 +189,6 @@ a.test-arrow:hover{
 	background-color: #4e8bca;
 }
 
-.code-attribute {
-	color: #999;
-}
-
 :target {
 	background-color: #494a3d;
 	border-right: 3px solid #bb7410;
@@ -301,16 +289,6 @@ kbd {
 	border-color: #ffb900;
 }
 
-#copy-path {
-	color: #999;
-}
-#copy-path > img {
-	filter: invert(50%);
-}
-#copy-path:hover > img {
-	filter: invert(65%);
-}
-
 .search-results .result-name span.alias {
 	color: #fff;
 }
@@ -334,9 +312,6 @@ kbd {
 	border-color: white;
 	color: white;
 }
-.more-examples-toggle summary, .more-examples-toggle .hide-more {
-	color: #999;
-}
 .scraped-example .example-wrap .rust span.highlight {
 	background: rgb(91, 59, 1);
 }

diff --git a/src/librustdoc/html/static/css/themes/light.css b/src/librustdoc/html/static/css/themes/light.css
@@ -11,6 +11,13 @@
 	--headings-border-bottom-color: #ddd;
 	--border-color: #e0e0e0;
 	--button-background-color: #fff;
+	--right-side-color: grey;
+	--code-attribute-color: #999;
+	--toggles-color: #999;
+	--search-input-focused-border-color: #66afe9;
+	--copy-path-button-color: #999;
+	--copy-path-img-filter: invert(50%);
+	--copy-path-img-hover-filter: invert(35%);
 }
 
 .slider {
@@ -125,11 +132,6 @@ body.source .example-wrap pre.rust a {
 	background: #eee;
 }
 
-details.rustdoc-toggle > summary.hideme > span,
-details.rustdoc-toggle > summary::before {
-	color: #999;
-}
-
 #crate-search-div::after {
 	/* match border-color; uses https://codepen.io/sosuke/pen/Pjoqqp */
 	filter: invert(100%) sepia(0%) saturate(4223%) hue-rotate(289deg) brightness(114%) contrast(76%);
@@ -141,18 +143,9 @@ details.rustdoc-toggle > summary::before {
 	filter: invert(44%) sepia(18%) saturate(23%) hue-rotate(317deg) brightness(96%) contrast(93%);
 }
 
-.search-input:focus {
-	border-color: #66afe9;
-}
-
 .stab { background: #FFF5D6; border-color: #FFC600; }
 .stab.portability > code { background: none; }
 
-.rightside:not(a),
-.out-of-band {
-	color: grey;
-}
-
 .line-numbers :target { background-color: transparent; }
 
 /* Code highlighting */
@@ -182,10 +175,6 @@ a.test-arrow:hover{
 	background-color: #4e8bca;
 }
 
-.code-attribute {
-	color: #999;
-}
-
 :target {
 	background: #FDFFD3;
 	border-right: 3px solid #AD7C37;
@@ -281,16 +270,6 @@ kbd {
 	border-color: #717171;
 }
 
-#copy-path {
-	color: #999;
-}
-#copy-path > img {
-	filter: invert(50%);
-}
-#copy-path:hover > img {
-	filter: invert(35%);
-}
-
 .search-results .result-name span.alias {
 	color: #000;
 }
@@ -313,9 +292,6 @@ kbd {
 	border-color: black;
 	color: black;
 }
-.more-examples-toggle summary, .more-examples-toggle .hide-more {
-	color: #999;
-}
 .scraped-example .example-wrap .rust span.highlight {
 	background: #fcffd6;
 }

diff --git a/src/test/rustdoc-gui/search-form-elements.goml b/src/test/rustdoc-gui/search-form-elements.goml
@@ -92,7 +92,7 @@ reload:
 assert-css: (
     ".search-input",
     {
-        "border-color": "rgb(240, 240, 240)",
+        "border-color": "rgb(224, 224, 224)",
         "background-color": "rgb(240, 240, 240)",
         "color": "rgb(17, 17, 17)",
     },

diff --git a/src/test/rustdoc-gui/search-input.goml b/src/test/rustdoc-gui/search-input.goml
@@ -3,7 +3,7 @@ goto: file://|DOC_PATH|/test_docs/index.html
 local-storage: {"rustdoc-use-system-theme": "false", "rustdoc-theme": "dark"}
 reload:
 
-assert-css: (".search-input", {"border-color": "rgb(240, 240, 240)"})
+assert-css: (".search-input", {"border-color": "rgb(224, 224, 224)"})
 click: ".search-input"
 assert-css: (".search-input", {"border-color": "rgb(0, 141, 253)"})