Fonts in inline report (skrub-data#1038)

* don't specify font in inline reports * smaller font in pre, code * smaller font for banner * [doc build] * smaller text boxes * [doc build] * smaller title * [doc build] * changelog
jeromedockes · Aug 5, 2024 · a97e1a4 · a97e1a4
1 parent fe0c07a
commit a97e1a4
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 7 deletions.
diff --git a/CHANGES.rst b/CHANGES.rst
@@ -18,6 +18,9 @@ Major changes
 
 Minor changes
 -------------
+* The reports created by :class:`TableReport`, when inserted in an html page (or
+  displayed in a notebook), now use the same font as the surrounding page.
+  :pr:`1038` by :user:`Jérôme Dockès <jeromedockes>`.
 
 
 Release 0.3.0

diff --git a/skrub/_reporting/_data/templates/base.css b/skrub/_reporting/_data/templates/base.css
@@ -22,16 +22,15 @@
     --lightg: #f0f0f0;
 
     --fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, "DejaVu Sans Mono", Liberation Mono, monospace;
-    --fontStack-sansSerif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
 }
 
 :host {
-    font-family: var(--fontStack-sansSerif);
     font-size: 1rem;
     line-height: 1.5;
     -webkit-text-size-adjust: 100%;
 }
 
+
 /* The report is in a shadow DOM so outside selectors don't reach it but properties */
 /* can still be inherited from a parent element. We make sure it has black text on */
 /* a white background otherwise eg a dark mode in the page could make parts of it */
@@ -45,6 +44,10 @@
     max-width: max-content;
 }
 
+h1 {
+    font-size: var(--huge);
+}
+
 button > * {
     pointer-events: none;
 }
@@ -80,6 +83,7 @@ pre {
 
 code, pre {
     font-family: var(--fontStack-monospace);
+    font-size: calc(0.9 * var(--small));
 }
 
 :is(td, th) {
@@ -260,9 +264,9 @@ dd {
 }
 
 .announcement  {
-    font-size: var(--large);
-    padding-block-start: var(--huge);
-    padding-block-end: var(--huge);
+    font-size: var(--small);
+    padding-block-start: var(--small);
+    padding-block-end: var(--small);
 }
 
 .important-note {

diff --git a/skrub/_reporting/_data/templates/copybutton.css b/skrub/_reporting/_data/templates/copybutton.css
@@ -17,7 +17,7 @@
 
 .box pre {
     overflow-x: auto;
-    padding: var(--tiny);
+    padding: var(--micro);
     flex-grow: 1;
     white-space: pre;
 }
@@ -54,7 +54,7 @@
     border-radius: var(--radius, 5px);
     position: absolute;
     right: calc(100% + 5px);
-    top: 5px;
+    top: 3px;
     margin: 0;
 }
 

diff --git a/skrub/_reporting/_data/templates/standalone-report.css b/skrub/_reporting/_data/templates/standalone-report.css
@@ -0,0 +1,7 @@
+:root {
+    --fontStack-sansSerif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+}
+
+body {
+    font-family: var(--fontStack-sansSerif);
+}
diff --git a/skrub/_reporting/_data/templates/standalone-report.html b/skrub/_reporting/_data/templates/standalone-report.html
@@ -5,6 +5,9 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{{ summary.file_name if summary.file_name else "skrub report" }}</title>
+    <style>
+     {% include "standalone-report.css" %}
+    </style>
 </head>
 <body>
     <main>