Rollup merge of #104532 - GuillaumeGomez:migrate-tooltip-css, r=notriddle

Migrate tooltip style to CSS variables

Author: matthiaskrgr

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

@@ -1159,6 +1159,8 @@ pre.rust .doccomment {
 	width: max-content;
 	top: -2px;
 	z-index: 1;
+	background-color: var(--tooltip-background-color);
+	color: var(--tooltip-color);
 }
 
 .example-wrap .tooltip::before {
@@ -1167,10 +1169,10 @@ pre.rust .doccomment {
 	top: 50%;
 	left: 16px;
 	margin-top: -5px;
-	border-width: 5px;
-	border-style: solid;
 	display: none;
 	z-index: 1;
+	border: 5px solid transparent;
+	border-right-color: var(--tooltip-background-color);
 }
 
 .example-wrap.ignore .tooltip::after {

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

@@ -65,6 +65,8 @@ Original by Dempfi (https://github.com/dempfi/ayu)
 	--test-arrow-hover-background-color: rgba(57, 175, 215, 0.368);
 	--target-background-color: rgba(255, 236, 164, 0.06);
 	--target-border-color: rgba(255, 180, 76, 0.85);
+	--tooltip-background-color: #314559;
+	--tooltip-color: #c5c5c5;
 	--rust-logo-filter: drop-shadow(1px 0 0px #fff)
 		drop-shadow(0 1px 0 #fff)
 		drop-shadow(-1px 0 0 #fff)
@@ -160,15 +162,6 @@ details.rustdoc-toggle > summary::before {
 	color: #788797;
 }
 
-.tooltip::after {
-	background-color: #314559;
-	color: #c5c5c5;
-}
-
-.tooltip::before {
-	border-color: transparent #314559 transparent transparent;
-}
-
 #titles > button.selected {
 	background-color: #141920 !important;
 	border-bottom: 1px solid #ffb44c !important;

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

@@ -60,6 +60,8 @@
 	--test-arrow-hover-background-color: #4e8bca;
 	--target-background-color: #494a3d;
 	--target-border-color: #bb7410;
+	--tooltip-background-color: #000;
+	--tooltip-color: #fff;
 	--rust-logo-filter: drop-shadow(1px 0 0px #fff)
 		drop-shadow(0 1px 0 #fff)
 		drop-shadow(-1px 0 0 #fff)
@@ -82,16 +84,6 @@ details.rustdoc-toggle > summary::before {
 	filter: invert(100%);
 }
 
-.tooltip::after {
-	background-color: #000;
-	color: #fff;
-	border-color: #000;
-}
-
-.tooltip::before {
-	border-color: transparent black transparent transparent;
-}
-
 #titles > button:not(.selected) {
 	background-color: #252525;
 	border-top-color: #252525;

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

@@ -58,8 +58,10 @@
 	--test-arrow-background-color: rgba(78, 139, 202, 0.2);
 	--test-arrow-hover-color: #f5f5f5;
 	--test-arrow-hover-background-color: #4e8bca;
-	--target-background-color: #fdFfd3;
+	--target-background-color: #fdffd3;
 	--target-border-color: #ad7c37;
+	--tooltip-background-color: #fdffd3;
+	--tooltip-color: #fff;
 	--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)
@@ -75,15 +77,6 @@ body.source .example-wrap pre.rust a {
 	background: #eee;
 }
 
-.tooltip::after {
-	background-color: #000;
-	color: #fff;
-}
-
-.tooltip::before {
-	border-color: transparent black transparent transparent;
-}
-
 #titles > button:not(.selected) {
 	background-color: #e6e6e6;
 	border-top-color: #e6e6e6;

src/test/rustdoc-gui/codeblock-tooltip.goml

@@ -4,7 +4,7 @@ show-text: true
 
 define-function: (
     "check-colors",
-    (theme),
+    (theme, background, color, border),
     [
         // Setting the theme.
         ("local-storage", {"rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false"}),
@@ -30,6 +30,25 @@ define-function: (
             ".docblock .example-wrap.compile_fail",
             {"border-left": "2px solid rgb(255, 0, 0)"},
         )),
+        ("assert-css", (
+            ".docblock .example-wrap.compile_fail .tooltip::after",
+            {
+                "content": '"This example deliberately fails to compile"',
+                "text-align": "center",
+                "padding": "5px 3px 3px",
+                "background-color": |background|,
+                "color": |color|,
+                "border": "1px solid " + |border|,
+            },
+        )),
+        ("assert-css", (
+            ".docblock .example-wrap.compile_fail .tooltip::before",
+            {
+                "border-width": "5px",
+                "border-style": "solid",
+                "border-color": "rgba(0, 0, 0, 0) " + |background| + " rgba(0, 0, 0, 0) rgba(0, 0, 0, 0)",
+            },
+        )),
 
         // should_panic block
         ("assert-css", (
@@ -51,6 +70,25 @@ define-function: (
             ".docblock .example-wrap.should_panic",
             {"border-left": "2px solid rgb(255, 0, 0)"},
         )),
+        ("assert-css", (
+            ".docblock .example-wrap.should_panic .tooltip::after",
+            {
+                "content": '"This example panics"',
+                "text-align": "center",
+                "padding": "5px 3px 3px",
+                "background-color": |background|,
+                "color": |color|,
+                "border": "1px solid " + |border|,
+            },
+        )),
+        ("assert-css", (
+            ".docblock .example-wrap.should_panic .tooltip::before",
+            {
+                "border-width": "5px",
+                "border-style": "solid",
+                "border-color": "rgba(0, 0, 0, 0) " + |background| + " rgba(0, 0, 0, 0) rgba(0, 0, 0, 0)",
+            },
+        )),
 
         // ignore block
         ("assert-css", (
@@ -72,9 +110,43 @@ define-function: (
             ".docblock .example-wrap.ignore",
             {"border-left": "2px solid rgb(255, 142, 0)"},
         )),
+        ("assert-css", (
+            ".docblock .example-wrap.ignore .tooltip::after",
+            {
+                "content": '"This example is not tested"',
+                "text-align": "center",
+                "padding": "5px 3px 3px",
+                "background-color": |background|,
+                "color": |color|,
+                "border": "1px solid " + |border|,
+            },
+        )),
+        ("assert-css", (
+            ".docblock .example-wrap.ignore .tooltip::before",
+            {
+                "border-width": "5px",
+                "border-style": "solid",
+                "border-color": "rgba(0, 0, 0, 0) " + |background| + " rgba(0, 0, 0, 0) rgba(0, 0, 0, 0)",
+            },
+        )),
     ],
 )
 
-call-function: ("check-colors", ("ayu"))
-call-function: ("check-colors", ("dark"))
-call-function: ("check-colors", ("light"))
+call-function: ("check-colors", {
+    "theme": "ayu",
+    "background": "rgb(49, 69, 89)",
+    "color": "rgb(197, 197, 197)",
+    "border": "rgb(92, 103, 115)",
+})
+call-function: ("check-colors", {
+    "theme": "dark",
+    "background": "rgb(0, 0, 0)",
+    "color": "rgb(255, 255, 255)",
+    "border": "rgb(224, 224, 224)",
+})
+call-function: ("check-colors", {
+    "theme": "light",
+    "background": "rgb(253, 255, 211)",
+    "color": "rgb(255, 255, 255)",
+    "border": "rgb(224, 224, 224)",
+})