maybe use semantic html?

Author: Fil

docs/bigNumber.md

@@ -5,12 +5,12 @@ ${Dash.BigNumber(1)}
 <div class="card grid grid-cols-4">
   ${Dash.BigNumber(1127)}
   ${Dash.BigNumber(17, {secondary: 7, secondaryFormat: "+"})}
-  ${Dash.BigNumber(1e9 * Math.E, {format: "s", secondary: -2/3, secondaryFormat: ".1%"})}
+  ${Dash.BigNumber(1e9 * Math.E, {title: "e", subtitle: "Transcendental value", format: "s", secondary: -2/3, secondaryFormat: ".1%", secondaryTitle: "Year over year"})}
   ${Dash.BigNumber(1e9 * Math.E, {format: "s", secondary: -2/3, secondaryFormat: ".1%", secondaryColor: "steelblue"})}
 </div>
 
 <div class="card grid grid-cols-4">
-  ${Dash.BigNumber(1127, {secondary: 0})}
+  ${Dash.BigNumber(1127, {title: "A unit", secondary: 0})}
   ${Dash.BigNumber(10, {secondary: -7/17, secondaryFormat: ".0%", children: Plot.lineY({length: 100}, Plot.mapY("cumsum", {
     y: d3.randomNormal.source(d3.randomLcg(42))()
   })).plot({width: 300, height: 40, axis: false})})}

src/client/stdlib/dash/bigNumber.ts

@@ -7,7 +7,9 @@ export function BigNumber(
     href,
     target = "_blank",
     title,
+    subtitle,
     format = ",.2~f",
+    columnGap = "10px",
     secondary,
     secondaryFormat = format,
     secondaryColor = secondary == null
@@ -19,13 +21,14 @@ export function BigNumber(
       : "var(--theme-color-neutral)",
     secondaryArrow = secondary == null ? "" : secondary > 0 ? "↗︎" : secondary < 0 ? "↘︎" : "→",
     secondaryTitle,
-    styles = {display: "flex", flexDirection: "column", fontFamily: "var(--sans-serif)"},
     children
   }: {
     href?: string;
     target?: string;
     title?: string;
+    subtitle?: string;
     format?: string | ((x: any) => string);
+    columnGap?: string;
     secondary?: number;
     secondaryFormat?: string | ((x: any) => string);
     secondaryColor?: string;
@@ -37,19 +40,20 @@ export function BigNumber(
 ) {
   if (typeof format !== "function") format = typeof number === "string" ? String : d3.format(format);
   if (typeof secondaryFormat !== "function") secondaryFormat = d3.format(secondaryFormat);
-  const div = html`<div style="${styles}">
-    <div style="text-transform: uppercase; font-size: 12px;">${title}</div>
-    <div style="display: flex; flex-wrap: wrap; column-gap: 10px; align-items: baseline;">
-      <div style="font-size: 32px; font-weight: bold; line-height: 1;">${(format as (x: any) => string)(number)}</div>
+  const div = html`<figure class="bignumber">
+    ${title != null ? html`<h2>${title}` : ""}
+    ${subtitle != null ? html`<h3>${subtitle}` : ""}
+    <dl style="display: flex; flex-wrap: wrap; align-items: baseline; column-gap: ${columnGap};">
+      <dt>${(format as (x: any) => string)(number)}</dt>
       ${
         secondary == null
           ? null
-          : html`<div style="font-size: 14px; color: ${secondaryColor};" ${{title: secondaryTitle}}>${(
+          : html`<dd style="color: ${secondaryColor};" ${{title: secondaryTitle}}>${(
               secondaryFormat as (x: any) => string
-            )(secondary)} ${secondaryArrow}</div>`
+            )(secondary)} ${secondaryArrow}`
       }
-    </div>
+    </dl>
     ${children}
-  </div>`;
+  </figure>`;
   return href == null ? div : html`<a href=${href} target=${target} style="color: inherit;">${div}</a>`;
 }

src/style/bigNumber.css

@@ -0,0 +1,14 @@
+:root {
+  --theme-color-positive: #3ca951;
+  --theme-color-negative: #ff725c;
+  --theme-color-neutral: #efb118;
+}
+
+figure.bignumber dl {margin-top: 0; }
+figure.bignumber dt {
+  font-size: 32px; font-weight: bold; line-height: 1;
+}
+figure.bignumber dd {
+  font-size: 14px;
+  margin-left: 0;
+}

src/style/default.css

@@ -1,6 +1,7 @@
 @import url("./global.css");
 @import url("./layout.css");
 @import url("./grid.css");
+@import url("./bigNumber.css");
 @import url("./inspector.css");
 @import url("./inputs.css");
 @import url("./plot.css");

src/style/theme-dark.css

@@ -10,8 +10,5 @@
   --theme-foreground-fainter: color-mix(in srgb, var(--theme-foreground) 30%, var(--theme-background));
   --theme-foreground-faintest: color-mix(in srgb, var(--theme-foreground) 10%, var(--theme-background));
   --theme-foreground-focus: oklch(0.712564 0.257662 265.758);
-  --theme-color-positive: #3ca951; /* green */
-  --theme-color-negative: #ff725c; /* red */
-  --theme-color-neutral: #efb118; /* orange/yellow */
   color-scheme: dark;
 }

src/style/theme-light.css

@@ -10,8 +10,5 @@
   --theme-foreground-fainter: color-mix(in srgb, var(--theme-foreground) 30%, var(--theme-background));
   --theme-foreground-faintest: color-mix(in srgb, var(--theme-foreground) 10%, var(--theme-background));
   --theme-foreground-focus: #3b5fc0;
-  --theme-color-positive: #3ca951; /* green */
-  --theme-color-negative: #ff725c; /* red */
-  --theme-color-neutral: #efb118; /* orange/yellow */
   color-scheme: light;
 }