Simplify rustdoc themes by relying more on CSS variables

Author: GuillaumeGomez

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

@@ -693,8 +693,13 @@ h2.location a {
 	flex-grow: 1;
 	margin: 0px;
 	padding: 0px;
+	/* We use overflow-wrap: break-word for Safari, which doesn't recognize
+	   `anywhere`: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap */
 	overflow-wrap: break-word;
+	/* Then override it with `anywhere`, which is required to make non-Safari browsers break
+	   more aggressively when we want them to. */
 	overflow-wrap: anywhere;
+	background-color: var(--main-background-color);
 }
 
 .in-band > code, .in-band > .code-header {
@@ -731,13 +736,13 @@ pre, .rustdoc.source .example-wrap {
 
 .docblock table td {
 	padding: .5em;
-	border: 1px dashed;
+	border: 1px dashed var(--border-color);
 }
 
 .docblock table th {
 	padding: .5em;
 	text-align: left;
-	border: 1px solid;
+	border: 1px solid var(--border-color);
 }
 
 .fields + table {
@@ -840,11 +845,11 @@ nav.main {
 	text-align: center;
 }
 nav.main .current {
-	border-top: 1px solid;
-	border-bottom: 1px solid;
+	border-top: 1px solid var(--border-color);
+	border-bottom: 1px solid var(--border-color);
 }
 nav.main .separator {
-	border: 1px solid;
+	border: 1px solid var(--border-color);
 	display: inline-block;
 	height: 23px;
 	margin: 0 20px;
@@ -974,7 +979,7 @@ table,
 	max-width: 100%;
 	/* contents can overflow because of max-width limit, then show ellipsis */
 	text-overflow: ellipsis;
-	border: 1px solid;
+	border: 1px solid var(--border-color);
 	border-radius: 4px;
 	outline: none;
 	cursor: pointer;
@@ -1027,11 +1032,12 @@ so that we can apply CSS-filters to change the arrow color in themes */
 	-moz-box-sizing: border-box !important;
 	box-sizing: border-box !important;
 	outline: none;
-	border: 1px solid;
+	border: 1px solid var(--border-color);
 	border-radius: 2px;
 	padding: 8px;
 	font-size: 1rem;
 	width: 100%;
+	background-color: var(--button-background-color);
 }
 
 .search-results {
@@ -1087,7 +1093,7 @@ so that we can apply CSS-filters to change the arrow color in themes */
 	display: block;
 	margin-top: 7px;
 	border-radius: 3px;
-	border: 1px solid;
+	border: 1px solid var(--border-color);
 	font-size: 1rem;
 }
 
@@ -1096,7 +1102,7 @@ so that we can apply CSS-filters to change the arrow color in themes */
 	content: '';
 	position: absolute;
 	right: 11px;
-	border: solid;
+	border: solid var(--border-color);
 	border-width: 1px 1px 0 0;
 	display: inline-block;
 	padding: 4px;
@@ -1132,13 +1138,13 @@ so that we can apply CSS-filters to change the arrow color in themes */
 	text-align: center;
 	display: block;
 	margin: 10px 0;
-	border-bottom: 1px solid;
+	border-bottom: 1px solid var(--border-color);
 	padding-bottom: 4px;
 	margin-bottom: 6px;
 }
 #help-button span.bottom {
 	clear: both;
-	border-top: 1px solid;
+	border-top: 1px solid var(--border-color);
 }
 .side-by-side {
 	text-align: initial;
@@ -1331,6 +1337,7 @@ h3.variant {
 	border-radius: 6px;
 	margin-left: 5px;
 	font-size: 1rem;
+	border: 1px solid var(--border-color);
 }
 
 .tooltip.ignore::after {
@@ -1496,7 +1503,7 @@ pre.rust {
 #source-sidebar > .title {
 	font-size: 1.5rem;
 	text-align: center;
-	border-bottom: 1px solid;
+	border-bottom: 1px solid var(--border-color);
 	margin-bottom: 6px;
 }
 #sidebar-toggle > button {
@@ -1524,11 +1531,12 @@ pre.rust {
 
 #copy-path {
 	height: 34px;
+	background-color: var(--main-background-color);
 }
 #settings-menu > a, #help-button > button, #copy-path {
 	padding: 5px;
 	width: 33px;
-	border: 1px solid;
+	border: 1px solid var(--border-color);
 	border-radius: 2px;
 	cursor: pointer;
 }
@@ -1539,6 +1547,7 @@ pre.rust {
 	padding: 5px;
 	height: 100%;
 	display: block;
+	background-color: var(--button-background-color);
 }
 
 @keyframes rotating {
@@ -1588,37 +1597,13 @@ input:checked + .slider {
 	border: 0;
 }
 
-#theme-choices {
-	display: none;
-	position: absolute;
-	left: 0;
-	top: 28px;
-	border: 1px solid;
-	border-radius: 3px;
-	z-index: 1;
-	cursor: pointer;
-}
-
-#theme-choices > button {
-	border: none;
-	width: 100%;
-	padding: 4px 8px;
-	text-align: center;
-	background: rgba(0,0,0,0);
-	overflow-wrap: normal;
-}
-
-#theme-choices > button:not(:first-child) {
-	border-top: 1px solid;
-}
-
 kbd {
 	display: inline-block;
 	padding: 3px 5px;
 	font: 15px monospace;
 	line-height: 10px;
 	vertical-align: middle;
-	border: solid 1px;
+	border: solid 1px var(--border-color);
 	border-radius: 3px;
 	cursor: default;
 }

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

@@ -14,6 +14,8 @@ Original by Dempfi (https://github.com/dempfi/ayu)
 	--scrollbar-thumb-background-color: #5c6773;
 	--scrollbar-color: #5c6773 #24292f;
 	--headings-border-bottom-color: #5c6773;
+	--border-color: #5c6773;
+	--button-background-color: #141920;
 }
 
 .slider {
@@ -36,10 +38,6 @@ h4 {
 	border: none;
 }
 
-.in-band {
-	background-color: #0f1419;
-}
-
 .docblock code {
 	color: #ffb454;
 }
@@ -84,10 +82,6 @@ pre, .rustdoc.source .example-wrap {
 	border-right: 1px solid #ffb44c;
 }
 
-.docblock table td, .docblock table th {
-	border-color: #5c6773;
-}
-
 .search-results a:hover {
 	background-color: #777;
 }
@@ -151,13 +145,6 @@ pre, .rustdoc.source .example-wrap {
 pre.rust .comment { color: #788797; }
 pre.rust .doccomment { color: #a1ac88; }
 
-nav.main .current {
-	border-top-color: #5c6773;
-	border-bottom-color: #5c6773;
-}
-nav.main .separator {
-	border: 1px solid #5c6773;
-}
 a {
 	color: #39AFD7;
 }
@@ -182,17 +169,6 @@ details.rustdoc-toggle > summary::before {
 	filter: invert(100%);
 }
 
-.search-input {
-	background-color: #141920;
-	border-color: #424c57;
-}
-
-#crate-search {
-	/* Without the `!important`, the border-color is ignored for `<select>`...
-	   It cannot be in the group above because `.search-input` has a different border color on
-	   hover. */
-	border-color: #5c6773 !important;
-}
 #crate-search-div::after {
 	/* match border-color; uses https://codepen.io/sosuke/pen/Pjoqqp */
 	filter: invert(41%) sepia(12%) saturate(487%) hue-rotate(171deg) brightness(94%) contrast(94%);
@@ -205,7 +181,7 @@ details.rustdoc-toggle > summary::before {
 }
 
 .search-input {
-	color: #ffffff;
+	color: #fff;
 }
 
 .module-item .stab,
@@ -333,7 +309,6 @@ pre.ignore:hover, .information:hover + pre.ignore {
 .tooltip::after {
 	background-color: #314559;
 	color: #c5c5c5;
-	border: 1px solid #5c6773;
 }
 
 .tooltip::before {
@@ -342,11 +317,6 @@ pre.ignore:hover, .information:hover + pre.ignore {
 
 .notable-traits-tooltiptext {
 	background-color: #314559;
-	border-color: #5c6773;
-}
-
-.notable-traits-tooltiptext .notable {
-	border-bottom-color: #5c6773;
 }
 
 #titles > button.selected {
@@ -449,35 +419,20 @@ a.result-keyword:focus {}
 .sidebar a.current.tymethod {}
 .sidebar a.current.keyword {}
 
-@media (max-width: 700px) {
-	.sidebar-elems {
-		border-right-color: #5c6773;
-	}
-}
-
 kbd {
 	color: #c5c5c5;
 	background-color: #314559;
-	border-color: #5c6773;
-	border-bottom-color: #5c6773;
 	box-shadow: inset 0 -1px 0 #5c6773;
 }
 
 #settings-menu > a, #help-button > button {
-	border-color: #5c6773;
-	background-color: #0f1419;
 	color: #fff;
 }
 
 #settings-menu > a img {
 	filter: invert(100);
 }
 
-.popover, .popover::before,
-#help-button span.top, #help-button span.bottom {
-	border-color: #5c6773;
-}
-
 #copy-path {
 	color: #fff;
 }
@@ -493,19 +448,6 @@ kbd {
 	border-color: #e0e0e0;
 }
 
-#theme-choices {
-	border-color: #5c6773;
-	background-color: #0f1419;
-}
-
-#theme-choices > button:not(:first-child) {
-	border-top-color: #5c6773;
-}
-
-#theme-choices > button:hover, #theme-choices > button:focus {
-	background-color: rgba(110, 110, 110, 0.33);
-}
-
 .search-results .result-name span.alias {
 	color: #c5c5c5;
 }
@@ -515,7 +457,6 @@ kbd {
 
 #source-sidebar > .title {
 	color: #fff;
-	border-bottom-color: #5c6773;
 }
 #source-sidebar div.files > a:hover, details.dir-entry summary:hover,
 #source-sidebar div.files > a:focus, details.dir-entry summary:focus {