replace trend by secondary, color variables that default to a subset of observable10

Author: Fil

src/client/stdlib/dash/bigNumber.ts

@@ -8,40 +8,48 @@ export function BigNumber(
     target = "_blank",
     title,
     format = ",.2~f",
-    trend,
-    trendFormat = "+.1~%",
-    trendColor = trend == null ? "" : trend > 0 ? "green" : trend < 0 ? "red" : "orange",
-    trendArrow = trend == null ? "" : trend > 0 ? "↗︎" : trend < 0 ? "↘︎" : "→",
-    trendTitle,
-    plot
+    secondary,
+    secondaryFormat = format,
+    secondaryColor = secondary == null
+      ? ""
+      : secondary > 0
+      ? "var(--theme-color-positive)"
+      : secondary < 0
+      ? "var(--theme-color-negative)"
+      : "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;
     format?: string | ((x: any) => string);
-    trend?: number;
-    trendFormat?: string | ((x: any) => string);
-    trendColor?: string;
-    trendArrow?: string;
-    trendTitle?: string;
-    plot?: Node;
+    secondary?: number;
+    secondaryFormat?: string | ((x: any) => string);
+    secondaryColor?: string;
+    secondaryArrow?: string;
+    secondaryTitle?: string;
+    styles?: {[key: string]: string};
+    children?: Node | Iterable<Node>;
   } = {}
 ) {
   if (typeof format !== "function") format = typeof number === "string" ? String : d3.format(format);
-  if (typeof trendFormat !== "function") trendFormat = d3.format(trendFormat);
-  const div = html`<div style="display: flex; flex-direction: column; font-family: var(--sans-serif);">
+  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>
       ${
-        trend == null
+        secondary == null
           ? null
-          : html`<div style="font-size: 14px; color: ${trendColor};" ${{title: trendTitle}}>${(
-              trendFormat as (x: any) => string
-            )(trend)} ${trendArrow}</div>`
+          : html`<div style="font-size: 14px; color: ${secondaryColor};" ${{title: secondaryTitle}}>${(
+              secondaryFormat as (x: any) => string
+            )(secondary)} ${secondaryArrow}</div>`
       }
     </div>
-    ${plot}
+    ${children}
   </div>`;
   return href == null ? div : html`<a href=${href} target=${target} style="color: inherit;">${div}</a>`;
 }

src/style/theme-dark.css

@@ -10,5 +10,8 @@
   --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,5 +10,8 @@
   --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;
 }