big, small, and color classes

docs/javascript.md

@@ -90,10 +90,10 @@ The current time is ${new Date(now).toLocaleTimeString("en-US")}.
 
 As with code blocks, if an inline expression evaluates to a DOM element or node, it will be inserted into the page. For example, you can…
 
-interpolate a sparkline ${Plot.plot({axis: null, margin: 0, width: 80, height: 17, x: {type: "band", round: false}, marks: [Plot.rectY(aapl.slice(-15), {x: "Date", y1: 150, y2: "Close", fill: "var(--observablehq-blue)"})]})}
+interpolate a sparkline ${Plot.plot({axis: null, margin: 0, width: 80, height: 17, x: {type: "band", round: false}, marks: [Plot.rectY(aapl.slice(-15), {x: "Date", y1: 150, y2: "Close", fill: "var(--theme-blue)"})]})}
 
 ```md echo
-interpolate a sparkline ${Plot.plot({axis: null, margin: 0, width: 80, height: 17, x: {type: "band", round: false}, marks: [Plot.rectY(aapl.slice(-15), {x: "Date", y1: 150, y2: "Close", fill: "var(--observablehq-blue)"})]})}
+interpolate a sparkline ${Plot.plot({axis: null, margin: 0, width: 80, height: 17, x: {type: "band", round: false}, marks: [Plot.rectY(aapl.slice(-15), {x: "Date", y1: 150, y2: "Close", fill: "var(--theme-blue)"})]})}
 ```
 
 or even a reactive input ${Inputs.bind(html`<input type=range style="width: 120px;">`, numberInput)} ${number}

docs/javascript/mutables.md

@@ -24,7 +24,7 @@ Inputs.button([["Increment", increment], ["Reset", reset]])
 
 <style type="text/css">
 @keyframes flash {
-  from { background-color: var(--observablehq-blue); }
+  from { background-color: var(--theme-blue); }
   to { background-color: none; }
 }
 .flash {

docs/lib/arrow.md

@@ -35,7 +35,7 @@ Plot.plot({
     label: "Flights (thousands)"
   },
   marks: [
-    Plot.rectY(flights, Plot.binX({y: "count"}, {x: "delay", interval: 5, fill: "var(--observablehq-blue)"})),
+    Plot.rectY(flights, Plot.binX({y: "count"}, {x: "delay", interval: 5, fill: "var(--theme-blue)"})),
     Plot.ruleY([0])
   ]
 })

docs/number.md

@@ -0,0 +1,34 @@
+# Big number test
+
+This is a test of the `big` and `small` classes.
+
+<span class="big">3,541</span>
+<span class="small green">+18 ↗︎</span>
+
+Test <span class="small green">+18 ↗︎</span> test
+
+<div style="max-width: 640px; container-type: inline-size;">
+  <div class="grid grid-cols-4">
+    <div class="card">
+      <h2>GitHub Stars</h2>
+      <span class="big">3,541</span>
+      <span class="small green">+18 ↗︎</span>
+    </div>
+    <div class="card">
+      <h2>Daily pageviews</h2>
+      <span class="big">3,699</span>
+      <span class="small green">+2.5% ↗︎</span>
+    </div>
+    <div class="card">
+      <h2>Daily npm downloads</h2>
+      <span class="big">2,737</span>
+      <span class="small yellow">−33.5% ↘︎</span>
+    </div>
+    <div class="card">
+      <h2>Total npm downloads</h2>
+      <span class="big">1,169,127</span>
+      <span class="muted">all-time</span>
+  </div>
+</div>
+
+This has been a test of the `big` and `small` classes.

src/style/global.css

@@ -1,11 +1,14 @@
 :root {
-  --observablehq-blue: #3b5fc0;
   --monospace: Menlo, Consolas, monospace;
   --monospace-font: 14px/1.5 var(--monospace);
   --serif: "Source Serif Pro", "Iowan Old Style", "Apple Garamond", "Palatino Linotype", "Times New Roman",
     "Droid Serif", Times, serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   --sans-serif: -apple-system, BlinkMacSystemFont, "avenir next", avenir, helvetica, "helvetica neue", ubuntu, roboto,
     noto, "segoe ui", arial, sans-serif;
+  --theme-blue: #4269d0;
+  --theme-green: #3ca951;
+  --theme-red: #ff725c;
+  --theme-yellow: #efb118;
 }
 
 html {
@@ -155,7 +158,7 @@ button {
 button,
 input,
 textarea {
-  accent-color: var(--observablehq-blue);
+  accent-color: var(--theme-blue);
 }
 
 table {
@@ -237,3 +240,36 @@ figcaption {
 a[href].observablehq-header-anchor {
   color: inherit;
 }
+
+:root {
+  --font-big: 700 32px/1 var(--sans-serif);
+  --font-small: 14px var(--sans-serif);
+}
+
+.big {
+  font: var(--font-big);
+}
+
+.small {
+  font: var(--font-small);
+}
+
+.red {
+  color: var(--theme-red);
+}
+
+.yellow {
+  color: var(--theme-yellow);
+}
+
+.green {
+  color: var(--theme-green);
+}
+
+.blue {
+  color: var(--theme-blue);
+}
+
+.muted {
+  color: var(--theme-foreground-muted);
+}