base sizes in report on font size of parent element (#1098)

skrub/_reporting/_data/templates/base.css

@@ -2,13 +2,30 @@
 /* -------------------------------- */
 
 :host {
-    --micro: 0.25rem;
-    --tiny: 0.5rem;
-    --small: 1.0rem;
-    --large: 1.2rem;
-    --huge: 1.5rem;
-    --max-content-width: 45rem;
-    --radius: 0.25rem;
+    --base-size: 1em;
+
+    --text-xs: calc(0.8 * var(--base-size));
+    --text-s: calc(0.9 * var(--base-size));
+    --text-m: var(--base-size);
+    --text-l: calc(1.2 * var(--base-size));
+    --text-xl: calc(1.5 * var(--base-size));
+
+    --space-xs: calc(0.125 * var(--base-size));
+    --space-s: calc(0.25 * var(--base-size));
+    --space-m: calc(0.5 * var(--base-size));
+    --space-l: calc(1.0 * var(--base-size));
+    --space-xl: calc(1.2 * var(--base-size));
+    --space-xxl: calc(1.5 * var(--base-size));
+
+    --border-s: 1px;
+    --border-m: 2px;
+
+    --checkbox-size: var(--text-s);
+    --button-s: calc(1.8 * var(--base-size));
+    --button-m: calc(2.0 * var(--base-size));
+
+    --max-content-width: calc(45 * var(--base-size));
+    --radius: var(--space-s);
     --line-height: 1.5;
 
     --lightgreen: #eafaea;
@@ -30,7 +47,7 @@
 }
 
 :host {
-    font-size: 1rem;
+    font-size: var(--text-m);
     line-height: var(--line-height);
     -webkit-text-size-adjust: 100%;
 }
@@ -55,13 +72,18 @@
 
 
 h1 {
-    font-size: var(--huge);
+    font-size: var(--text-xl);
 }
 
 button > * {
     pointer-events: none;
 }
 
+input[type="checkbox"] {
+    height: var(--checkbox-size);
+    width: var(--checkbox-size);
+}
+
 /* pure.css / Normalize.css overrides the default firefox blue ring around focussed */
 /* elements with something almost impossible to see, making it impossible to use */
 /* tab navigation. We revert it to the browser's appropriate default. */
@@ -79,8 +101,7 @@ summary > * {
 }
 
 p {
-    margin-block-start: var(--tiny);
-    margin-block-end: var(--tiny);
+    margin: var(--space-m) 0;
 }
 
 code {
@@ -93,11 +114,15 @@ pre {
 
 code, pre {
     font-family: var(--fontStack-monospace);
-    font-size: calc(0.9 * var(--small));
+    font-size: var(--text-s);
+}
+
+table {
+    font-size: var(--text-m);
 }
 
-:is(td, th) {
-    padding: var(--tiny);
+#report :is(td, th) {
+    padding: var(--space-s) var(--space-m);
     white-space: nowrap;
 }
 
@@ -107,7 +132,7 @@ code, pre {
 dl {
     display: grid;
     grid-template-columns: max-content auto;
-    column-gap: var(--tiny);
+    column-gap: var(--space-m);
     margin: 0;
 }
 
@@ -142,17 +167,17 @@ dd {
     overflow-wrap: anywhere;
 }
 
-.margin-r-s {
-    margin-inline-end: var(--small);
+.margin-r-m {
+    margin-inline-end: var(--space-m);
 }
 
-.margin-r-t {
-    margin-inline-end: var(--tiny);
+.margin-v-m {
+    margin-block-start: var(--space-m);
+    margin-block-end: var(--space-m);
 }
 
-.margin-v-t {
-    margin-block-start: var(--tiny);
-    margin-block-end: var(--tiny);
+.margin-t-s {
+    margin-top: var(--space-s);
 }
 
 .horizontal-scroll {
@@ -168,18 +193,13 @@ dd {
 }
 
 .wrapper {
-    padding-inline-start: var(--small);
-    padding-inline-end: var(--small);
-    padding-block-end: var(--tiny);
-}
-
-.wrapper-vert {
-    padding-block-end: var(--tiny);
+    padding-inline-start: var(--space-l);
+    padding-inline-end: var(--space-l);
+    padding-block-end: var(--space-m);
 }
 
-.wrapper-vert-l {
-    padding-block-start: var(--large);
-    padding-block-end: var(--huge);
+.flow > * + * {
+    margin-top: var(--space-m);
 }
 
 .text {
@@ -202,12 +222,12 @@ dd {
 
 .flex {
     display: flex;
-    gap: var(--tiny);
+    gap: var(--space-m);
     align-items: center;
 }
 
 .gap-l {
-    gap: var(--large);
+    gap: var(--space-xl);
 }
 
 .flex-reverse {
@@ -221,8 +241,6 @@ dd {
 
 .flex-wrap {
     flex-wrap: wrap;
-    padding-block-start: var(--tiny);
-    padding-block-end: var(--tiny);
 }
 
 .flex-wrap > * {
@@ -276,11 +294,19 @@ dd {
 /* ----------- */
 
 
+#report {
+    padding-top: var(--space-s);
+}
+
+#report svg {
+    max-width: 100%;
+}
+
 .report-header {
-    --max-content-width: 100rem;
-    font-size: var(--large);
-    padding-block-start: var(--micro);
-    padding-block-end: var(--micro);
+    --max-content-width: 100em;
+    font-size: var(--text-l);
+    padding-block-start: var(--space-s);
+    padding-block-end: var(--space-s);
 }
 
 .report-header > h1 {
@@ -289,6 +315,6 @@ dd {
 
 .important-note {
     background-color: var(--lightgreen);
-    padding: var(--tiny);
+    padding: var(--space-m);
     border-radius: var(--radius);
 }

skrub/_reporting/_data/templates/column-associations.html

@@ -1,4 +1,4 @@
-<article class="flex-reverse wrapper wrapper-vert-l gap-l">
+<article class="margin-t-s flex-reverse wrapper gap-l">
     {% if summary["top_associations"] %}
 
     <div class="horizontal-scroll">

skrub/_reporting/_data/templates/column-filter.css

@@ -1,9 +1,11 @@
 .column-filter {
     display: flex;
-    gap: var(--tiny);
+    flex-wrap: wrap;
+    gap: var(--space-m);
     align-items: flex-end;
-    margin-bottom: var(--micro);
-    margin-left: var(--small);
+    margin-bottom: var(--space-s);
+    margin-left: var(--space-l);
+    margin-right: var(--space-s);
 }
 
 .column-filter > label {

skrub/_reporting/_data/templates/column-summaries.css

@@ -7,14 +7,17 @@
 .column-summary-group {
     display: flex;
     flex-direction: column;
-    gap: var(--small);
-    padding-block-start: var(--tiny);
-    padding-block-end: var(--tiny);
-    padding-inline-end: var(--small);
+    gap: var(--space-l);
     min-width: min-content;
     max-width: max-content;
 }
 
+/* Increase the gap between buttons & columns to make it clearer the buttons are
+   associated with the bar above them. */
+.column-selection-buttons + .column-summary-group {
+    margin-top: var(--space-l);
+}
+
 .column-summary-group > .card {
     margin: 0;
 }
@@ -28,7 +31,7 @@
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
-        gap: var(--small);
+        gap: var(--space-l);
     }
 
 }
@@ -39,7 +42,7 @@
 
 .card {
     padding: 0;
-    margin: 0.75rem;
+    margin: var(--space-l);
     border-radius: var(--radius);
     min-width: min-content;
     border: 1px solid var(--mediumg);
@@ -51,22 +54,22 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
-    column-gap: 1ch;
+    column-gap: var(--space-l);
 
-    padding: var(--tiny);
-    margin-block-end: var(--tiny);
+    padding: var(--space-m);
+    margin-block-end: var(--space-m);
     background-color: var(--header-color, var(--lightg));
-    border-block-end: 1px solid var(--mediumg);
+    border-block-end: var(--border-s) solid var(--mediumg);
 }
 
 .card-header > * {
     margin-block-start: 0;
     margin-block-end: 0;
-    font-size: var(--small);
+    font-size: var(--space-l);
 }
 
 .card-header input[type="checkbox"] {
-    margin-right: var(--micro);
+    margin-right: var(--space-s);
 }
 
 .column-summary-content {
@@ -79,9 +82,9 @@
 .copybutton-grid {
     display: flex;
     flex-direction: column;
-    gap: var(--tiny);
-    padding-block-start: var(--tiny);
-    padding-block-end: var(--tiny);
+    gap: var(--space-m);
+    padding-block-start: var(--space-m);
+    padding-block-end: var(--space-m);
 }
 
 
@@ -94,6 +97,10 @@
 /* Aspects specific to the single card shown in the dataframe sample tab */
 /* --------------------------------------------------------------------- */
 
+.columns-in-sample-tab {
+    margin-top: var(--space-m);
+}
+
 /* Hide the container when it is empty */
 
 .columns-in-sample-tab:not(:has([data-role="sample-column"]:not([data-hidden]))) {
@@ -105,8 +112,8 @@
 .columns-in-sample-tab .card-header {
     position: relative;
     background-color: var(--darkgreen);
-    border-block-end: 1px solid var(--shadowgreen);
-    padding-right: 2.4rem;
+    border-block-end: var(--border-s) solid var(--shadowgreen);
+    padding-right: calc(var(--button-s) + var(--space-m));
 }
 
 .columns-in-sample-tab .card {
@@ -116,17 +123,17 @@
 /* Button for closing the card / deselecting the column in the table */
 
 .card .close-card-button {
-    height: 1.8rem;
-    width: 1.8rem;
+    height: var(--button-s);
+    width: var(--button-s);
 
-    padding: var(--micro);
+    padding: var(--space-s);
     border: none;
     border-radius: var(--radius);
     background: var(--darkgreen);
 
     position: absolute;
-    top: var(--tiny);
-    right: var(--micro);
+    top: var(--space-m);
+    right: var(--space-s);
 }
 
 .card .close-card-button:hover {

skrub/_reporting/_data/templates/column-summaries.html

@@ -1,15 +1,15 @@
 {% import "buttons.html" as buttons %}
 
-<article class="wrapper"
+<article class="wrapper margin-t-s flow"
          data-show-on="NON_EMPTY_COLUMN_FILTER_SELECTED"
          data-hide-on="EMPTY_COLUMN_FILTER_SELECTED">
-    <div class="flex wrapper-vert">
+    <div class="flex">
         <div class="box">
         <pre id="selected-columns-display" data-manager="SelectedColumnsDisplay"></pre>
         {{ buttons.copybutton("selected-columns-display") }}
         </div>
     </div>
-    <div class="flex flex-wrap toggletip-wrapper">
+    <div class="flex flex-wrap toggletip-wrapper column-selection-buttons">
         <div class="toggletip" data-manager="Toggletip">
         <button type="button" class="toggletip">i</button>
         <div class="toggletip-info box-shadow">