Rollup merge of #104640 - GuillaumeGomez:migrate-kdb-css, r=notriddle

Migrate kdb style to CSS variables

r? `@notriddle`

5 files changed, 50 insertions, 18 deletions

diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
index 10f3c0e95d7..accd6093069 100644
--- a/src/librustdoc/html/static/css/rustdoc.css
+++ b/src/librustdoc/html/static/css/rustdoc.css
@@ -1431,6 +1431,9 @@ kbd {
 	border: solid 1px var(--border-color);
 	border-radius: 3px;
 	cursor: default;
+	color: var(--kbd--color);
+	background-color: var(--kbd-background);
+	box-shadow: inset 0 -1px 0 var(--kbd-box-shadow-color);
 }
 
 ul.all-items > li {
diff --git a/src/librustdoc/html/static/css/themes/ayu.css b/src/librustdoc/html/static/css/themes/ayu.css
index 9d2493c035d..952d3e833fb 100644
--- a/src/librustdoc/html/static/css/themes/ayu.css
+++ b/src/librustdoc/html/static/css/themes/ayu.css
@@ -69,6 +69,9 @@ Original by Dempfi (https://github.com/dempfi/ayu)
 	--target-border-color: rgba(255, 180, 76, 0.85);
 	--tooltip-background-color: #314559;
 	--tooltip-color: #c5c5c5;
+	--kbd-color: #c5c5c5;
+	--kbd-background: #314559;
+	--kbd-box-shadow-color: #5c6773;
 	--rust-logo-filter: drop-shadow(1px 0 0px #fff)
 		drop-shadow(0 1px 0 #fff)
 		drop-shadow(-1px 0 0 #fff)
@@ -195,12 +198,6 @@ pre.rust .kw {}
 pre.rust .self, pre.rust .bool-val, pre.rust .prelude-val, pre.rust .attribute {}
 pre.rust .kw-2, pre.rust .prelude-ty {}
 
-kbd {
-	color: #c5c5c5;
-	background-color: #314559;
-	box-shadow: inset 0 -1px 0 #5c6773;
-}
-
 #settings-menu > a img {
 	filter: invert(100);
 }
diff --git a/src/librustdoc/html/static/css/themes/dark.css b/src/librustdoc/html/static/css/themes/dark.css
index 22a3ae7b273..6327083f6ae 100644
--- a/src/librustdoc/html/static/css/themes/dark.css
+++ b/src/librustdoc/html/static/css/themes/dark.css
@@ -64,6 +64,9 @@
 	--target-border-color: #bb7410;
 	--tooltip-background-color: #000;
 	--tooltip-color: #fff;
+	--kbd-color: #000;
+	--kbd-background: #fafbfc;
+	--kbd-box-shadow-color: #c6cbd1;
 	--rust-logo-filter: drop-shadow(1px 0 0px #fff)
 		drop-shadow(0 1px 0 #fff)
 		drop-shadow(-1px 0 0 #fff)
@@ -100,12 +103,6 @@ details.rustdoc-toggle > summary::before {
 	color: #888;
 }
 
-kbd {
-	color: #000;
-	background-color: #fafbfc;
-	box-shadow: inset 0 -1px 0 #c6cbd1;
-}
-
 .search-results .result-name span.alias {
 	color: #fff;
 }
diff --git a/src/librustdoc/html/static/css/themes/light.css b/src/librustdoc/html/static/css/themes/light.css
index 219dd5cd2ec..0ea709e3e8d 100644
--- a/src/librustdoc/html/static/css/themes/light.css
+++ b/src/librustdoc/html/static/css/themes/light.css
@@ -64,6 +64,9 @@
 	--target-border-color: #ad7c37;
 	--tooltip-background-color: #fdffd3;
 	--tooltip-color: #fff;
+	--kbd-color: #000;
+	--kbd-background: #fafbfc;
+	--kbd-box-shadow-color: #c6cbd1;
 	--rust-logo-filter: initial;
 	/* match border-color; uses https://codepen.io/sosuke/pen/Pjoqqp */
 	--crate-search-div-filter: invert(100%) sepia(0%) saturate(4223%) hue-rotate(289deg)
@@ -93,12 +96,6 @@ body.source .example-wrap pre.rust a {
 	color: #888;
 }
 
-kbd {
-	color: #000;
-	background-color: #fafbfc;
-	box-shadow: inset 0 -1px 0 #c6cbd1;
-}
-
 .search-results .result-name span.alias {
 	color: #000;
 }
diff --git a/src/test/rustdoc-gui/help-page.goml b/src/test/rustdoc-gui/help-page.goml
index 392f17bfd47..799ba851c92 100644
--- a/src/test/rustdoc-gui/help-page.goml
+++ b/src/test/rustdoc-gui/help-page.goml
@@ -13,6 +13,44 @@ assert-css: ("#help", {"display": "block"})
 compare-elements-property: (".sub", "#help", ["offsetWidth"])
 compare-elements-position: (".sub", "#help", ("x"))
 
+// Checking the color of the elements of the help menu.
+show-text: true
+define-function: (
+    "check-colors",
+    (theme, color, background, box_shadow),
+    [
+        // Setting the theme.
+        ("local-storage", {"rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false"}),
+        // We reload the page so the local storage settings are being used.
+        ("reload"),
+        ("assert-css", ("#help kbd", {
+            "color": |color|,
+            "background-color": |background|,
+            "box-shadow": |box_shadow| + " 0px -1px 0px 0px inset",
+            "cursor": "default",
+        }, ALL)),
+    ],
+)
+
+call-function: ("check-colors", {
+    "theme": "ayu",
+    "color": "rgb(197, 197, 197)",
+    "background": "rgb(49, 69, 89)",
+    "box_shadow": "rgb(92, 103, 115)",
+})
+call-function: ("check-colors", {
+    "theme": "dark",
+    "color": "rgb(221, 221, 221)",
+    "background": "rgb(250, 251, 252)",
+    "box_shadow": "rgb(198, 203, 209)",
+})
+call-function: ("check-colors", {
+    "theme": "light",
+    "color": "rgb(0, 0, 0)",
+    "background": "rgb(250, 251, 252)",
+    "box_shadow": "rgb(198, 203, 209)",
+})
+
 // This test ensures that opening the help popover without switching pages works.
 goto: "file://" + |DOC_PATH| + "/test_docs/index.html"
 size: (1000, 1000) // Only supported on desktop.