Rollup merge of #98460 - GuillaumeGomez:css-simplification, r=jsha

Use CSS variables to handle theming

This is the start for our simplification of theming. Considering how big the diff quickly becomes, I think it's better to do it in multiple parts.

(The 3 first commits come from https://github.com/rust-lang/rust/pull/98297 so once it's merged, they'll disappear).

Normally they shouldn't be any UI changes. You can check it [here](https://rustdoc.crud.net/imperio/css-simplification/doc/foo/index.html).

cc `@notriddle`
r? `@jsha`

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

@@ -114,6 +114,9 @@ body {
 	-webkit-font-feature-settings: "kern", "liga";
 	-moz-font-feature-settings: "kern", "liga";
 	font-feature-settings: "kern", "liga";
+
+	background-color: var(--main-background-color);
+	color: var(--main-color);
 }
 
 h1 {
@@ -214,6 +217,26 @@ a.srclink,
 	font-family: "Fira Sans", Arial, NanumBarunGothic, sans-serif;
 }
 
+h1, h2, h3, h4,
+a#toggle-all-docs,
+a.anchor,
+.small-section-header a,
+#source-sidebar a,
+pre.rust a,
+.sidebar h2 a,
+.sidebar h3 a,
+.mobile-topbar h2 a,
+.in-band a,
+.search-results a,
+.module-item .stab,
+.import-item .stab,
+.result-name .primitive > i, .result-name .keyword > i,
+.content .method .where,
+.content .fn .where,
+.content .where.fmt-newline {
+	color: var(--main-color);
+}
+
 ol, ul {
 	padding-left: 24px;
 }
@@ -391,6 +414,14 @@ nav.sub {
 	display: none;
 }
 
+.source .sidebar, #sidebar-toggle, #source-sidebar {
+	background-color: var(--sidebar-background-color);
+}
+
+#sidebar-toggle:hover {
+	background-color: var(--sidebar-background-color-hover);
+}
+
 .source .sidebar > *:not(#sidebar-toggle) {
 	opacity: 0;
 	visibility: hidden;
@@ -629,11 +660,6 @@ h2.location a {
 	display: block;
 }
 
-.invisible {
-	width: 100%;
-	display: inline-block;
-}
-
 .content .in-band {
 	flex-grow: 1;
 	margin: 0px;
@@ -1008,6 +1034,11 @@ table,
 	top: -5px;
 }
 
+.popover, .popover::before {
+	background-color: var(--main-background-color);
+	color: var(--main-color);
+}
+
 #help-button .popover {
 	max-width: 600px;
 }
@@ -1428,6 +1459,25 @@ pre.rust {
 	animation: rotating 2s linear infinite;
 }
 
+.setting-line .radio-line input:checked {
+	box-shadow: inset 0 0 0 3px var(--main-background-color);
+	background-color: var(--settings-input-color);
+}
+.setting-line .radio-line input:focus {
+	box-shadow: 0 0 1px 1px var(--settings-input-color);
+}
+/* In here we combine both `:focus` and `:checked` properties. */
+.setting-line .radio-line input:checked:focus {
+	box-shadow: inset 0 0 0 3px var(--main-background-color),
+		0 0 2px 2px var(--settings-input-color);
+}
+.setting-line .radio-line input:hover {
+	border-color: var(--settings-input-color) !important;
+}
+input:checked + .slider {
+	background-color: var(--settings-input-color);
+}
+
 #help-button > button {
 	font-family: "Fira Sans", Arial, sans-serif;
 	text-align: center;

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

@@ -3,30 +3,12 @@ Based off of the Ayu theme
 Original by Dempfi (https://github.com/dempfi/ayu)
 */
 
-/* General structure and fonts */
+:root {
-
+	--main-background-color: #0f1419;
-body, .popover, .popover::before {
+	--main-color: #c5c5c5;
-	background-color: #0f1419;
+	--settings-input-color: #ffb454;
-	color: #c5c5c5;
+	--sidebar-background-color: #14191f;
-}
+	--sidebar-background-color-hover: rgba(70, 70, 70, 0.33);
-
-.setting-line .radio-line input {
-	border-color: #c5c5c5;
-}
-.setting-line .radio-line input:checked {
-	box-shadow: inset 0 0 0 3px #0f1419;
-	background-color: #ffb454;
-}
-.setting-line .radio-line input:focus {
-	box-shadow: 0 0 1px 1px #ffb454;
-}
-/* In here we combine both `:focus` and `:checked` properties. */
-.setting-line .radio-line input:checked:focus {
-	box-shadow: inset 0 0 0 3px 0f1419,
-		0 0 2px 2px #ffb454;
-}
-.setting-line .radio-line input:hover {
-	border-color: #ffb454 !important;
 }
 
 .slider {
@@ -35,9 +17,6 @@ body, .popover, .popover::before {
 .slider:before {
 	background-color: white;
 }
-input:checked + .slider {
-	background-color: #ffb454;
-}
 input:focus + .slider {
 	box-shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3);
 }
@@ -62,10 +41,6 @@ h4 {
 	background-color: #0f1419;
 }
 
-.invisible {
-	background: rgba(0, 0, 0, 0);
-}
-
 .docblock code {
 	color: #ffb454;
 }
@@ -129,10 +104,6 @@ pre, .rustdoc.source .example-wrap {
 	color: #ffb44c;
 }
 
-.source .sidebar {
-	background-color: #14191f;
-}
-
 .sidebar-elems .location {
 	color: #ff7733;
 }
@@ -153,12 +124,6 @@ pre, .rustdoc.source .example-wrap {
 	border-color: #5c6773;
 }
 
-.content .method .where,
-.content .fn .where,
-.content .where.fmt-newline {
-	color: #c5c5c5;
-}
-
 .search-results a:hover {
 	background-color: #777;
 }
@@ -233,17 +198,6 @@ a {
 	color: #39AFD7;
 }
 
-a#toggle-all-docs,
-a.anchor,
-.small-section-header a,
-#source-sidebar a,
-pre.rust a,
-.sidebar h2 a,
-.sidebar h3 a,
-.mobile-topbar h2 a,
-.in-band a {
-	color: #c5c5c5;
-}
 .sidebar h2 a,
 .sidebar h3 a {
 	color: white;
@@ -617,15 +571,6 @@ kbd {
 	color: #999;
 }
 
-#sidebar-toggle {
-	background-color: #14191f;
-}
-#sidebar-toggle:hover {
-	background-color: rgba(70, 70, 70, 0.33);
-}
-#source-sidebar {
-	background-color: #14191f;
-}
 #source-sidebar > .title {
 	color: #fff;
 	border-bottom-color: #5c6773;

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

@@ -1,25 +1,9 @@
-body, .popover, .popover::before {
+:root {
-	background-color: #353535;
+	--main-background-color: #353535;
-	color: #ddd;
+	--main-color: #ddd;
-}
+	--settings-input-color: #2196f3;
-
+	--sidebar-background-color: #565656;
-.setting-line .radio-line input {
+	--sidebar-background-color-hover: #676767;
-	border-color: #ddd;
-}
-.setting-line .radio-line input:checked {
-	box-shadow: inset 0 0 0 3px #353535;
-	background-color: #2196f3;
-}
-.setting-line .radio-line input:focus {
-	box-shadow: 0 0 1px 1px #2196f3;
-}
-/* In here we combine both `:focus` and `:checked` properties. */
-.setting-line .radio-line input:checked:focus {
-	box-shadow: inset 0 0 0 3px #353535,
-		0 0 2px 2px #2196f3;
-}
-.setting-line .radio-line input:hover {
-	border-color: #2196f3 !important;
 }
 
 .slider {
@@ -28,16 +12,10 @@ body, .popover, .popover::before {
 .slider:before {
 	background-color: white;
 }
-input:checked + .slider {
-	background-color: #2196F3;
-}
 input:focus + .slider {
 	box-shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3);
 }
 
-h1, h2, h3, h4 {
-	color: #ddd;
-}
 h1.fqn {
 	border-bottom-color: #d2d2d2;
 }
@@ -49,10 +27,6 @@ h2, h3, h4 {
 	background-color: #353535;
 }
 
-.invisible {
-	background: rgba(0, 0, 0, 0);
-}
-
 .docblock code, .docblock-short code {
 	background-color: #2A2A2A;
 }
@@ -98,10 +72,6 @@ pre, .rustdoc.source .example-wrap {
 	background: #444;
 }
 
-.source .sidebar {
-	background-color: #565656;
-}
-
 .line-numbers span { color: #3B91E2; }
 .line-numbers .line-highlighted {
 	background-color: #0a042f !important;
@@ -115,12 +85,6 @@ pre, .rustdoc.source .example-wrap {
 	border-color: #ddd;
 }
 
-.content .method .where,
-.content .fn .where,
-.content .where.fmt-newline {
-	color: #ddd;
-}
-
 .search-results a:hover {
 	background-color: #777;
 }
@@ -214,20 +178,6 @@ a {
 	color: #D2991D;
 }
 
-a#toggle-all-docs,
-a.anchor,
-.small-section-header a,
-#source-sidebar a,
-pre.rust a,
-.sidebar h2 a,
-.sidebar h3 a,
-.mobile-topbar h2 a,
-.in-band a {
-	color: #ddd;
-}
-.search-results a {
-	color: #ddd;
-}
 a.test-arrow {
 	color: #dedede;
 }
@@ -261,11 +211,6 @@ details.undocumented > summary::before {
 	border-color: #008dfd;
 }
 
-.module-item .stab,
-.import-item .stab {
-	color: #ddd;
-}
-
 .stab.empty-impl { background: #FFF5D6; border-color: #FFC600; color: #2f2f2f; }
 .stab.unstable { background: #FFF5D6; border-color: #FFC600; color: #2f2f2f; }
 .stab.deprecated { background: #ffc4c4; border-color: #db7b7b; color: #2f2f2f; }
@@ -291,10 +236,6 @@ details.undocumented > summary::before {
 	color: grey;
 }
 
-.result-name .primitive > i, .result-name .keyword > i {
-	color: #ddd;
-}
-
 .line-numbers :target { background-color: transparent; }
 
 /* Code highlighting */
@@ -488,15 +429,6 @@ kbd {
 	color: #ccc;
 }
 
-#sidebar-toggle {
-	background-color: #565656;
-}
-#sidebar-toggle:hover {
-	background-color: #676767;
-}
-#source-sidebar {
-	background-color: #565656;
-}
 #source-sidebar > .title {
 	border-bottom-color: #ccc;
 }

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

@@ -1,27 +1,9 @@
-/* General structure and fonts */
+:root {
-
+	--main-background-color: white;
-body, .popover, .popover::before {
+	--main-color: black;
-	background-color: white;
+	--settings-input-color: #2196f3;
-	color: black;
+	--sidebar-background-color: #F5F5F5;
-}
+	--sidebar-background-color-hover: #E0E0E0;
-
-.setting-line .radio-line input {
-	border-color: black;
-}
-.setting-line .radio-line input:checked {
-	box-shadow: inset 0 0 0 3px white;
-	background-color: #2196f3;
-}
-.setting-line .radio-line input:focus {
-	box-shadow: 0 0 1px 1px #2196f3;
-}
-/* In here we combine both `:focus` and `:checked` properties. */
-.setting-line .radio-line input:checked:focus {
-	box-shadow: inset 0 0 0 3px white,
-		0 0 2px 2px #2196f3;
-}
-.setting-line .radio-line input:hover {
-	border-color: #2196f3 !important;
 }
 
 .slider {
@@ -30,16 +12,10 @@ body, .popover, .popover::before {
 .slider:before {
 	background-color: white;
 }
-input:checked + .slider {
-	background-color: #2196F3;
-}
 input:focus + .slider {
 	box-shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3);
 }
 
-h1, h2, h3, h4 {
-	color: black;
-}
 h1.fqn {
 	border-bottom-color: #DDDDDD;
 }
@@ -51,10 +27,6 @@ h2, h3, h4 {
 	background-color: white;
 }
 
-.invisible {
-	background: rgba(0, 0, 0, 0);
-}
-
 .docblock code, .docblock-short code {
 	background-color: #F5F5F5;
 }
@@ -100,10 +72,6 @@ pre, .rustdoc.source .example-wrap {
 	background-color: #fff;
 }
 
-.source .sidebar {
-	background-color: #f1f1f1;
-}
-
 .line-numbers span { color: #c67e2d; }
 .line-numbers .line-highlighted {
 	background-color: #FDFFD3 !important;
@@ -117,12 +85,6 @@ pre, .rustdoc.source .example-wrap {
 	border-color: #ddd;
 }
 
-.content .method .where,
-.content .fn .where,
-.content .where.fmt-newline {
-	color: #4E4C4C;
-}
-
 .search-results a:hover {
 	background-color: #ddd;
 }
@@ -213,20 +175,6 @@ a {
 	color: #3873AD;
 }
 
-a#toggle-all-docs,
-a.anchor,
-.small-section-header a,
-#source-sidebar a,
-pre.rust a,
-.sidebar h2 a,
-.sidebar h3 a,
-.mobile-topbar h2 a,
-.in-band a {
-	color: #000;
-}
-.search-results a {
-	color: initial;
-}
 a.test-arrow {
 	color: #f5f5f5;
 }
@@ -250,11 +198,6 @@ details.undocumented > summary::before {
 	border-color: #66afe9;
 }
 
-.module-item .stab,
-.import-item .stab {
-	color: #000;
-}
-
 .stab.empty-impl { background: #FFF5D6; border-color: #FFC600; }
 .stab.unstable { background: #FFF5D6; border-color: #FFC600; }
 .stab.deprecated { background: #ffc4c4; border-color: #db7b7b; }
@@ -275,10 +218,6 @@ details.undocumented > summary::before {
 	color: grey;
 }
 
-.result-name .primitive > i, .result-name .keyword > i {
-	color: black;
-}
-
 .line-numbers :target { background-color: transparent; }
 
 /* Code highlighting */
@@ -472,15 +411,6 @@ kbd {
 	color: #999;
 }
 
-#sidebar-toggle {
-	background-color: #F5F5F5;
-}
-#sidebar-toggle:hover {
-	background-color: #E0E0E0;
-}
-#source-sidebar {
-	background-color: #F5F5F5;
-}
 #source-sidebar > .title {
 	border-bottom-color: #ccc;
 }