wide theme; grid class

src/preview.ts

@@ -93,7 +93,7 @@ export class PreviewServer {
         end(req, res, await rollupClient(getClientPath("./src/client/" + pathname.slice("/_observablehq/".length))), "text/javascript"); // prettier-ignore
       } else if (pathname === "/_observablehq/client.js") {
         end(req, res, await rollupClient(getClientPath("./src/client/preview.js")), "text/javascript");
-      } else if ((match = /^\/_observablehq\/theme-(?<theme>\w+(,\w+)*)?\.css$/.exec(pathname))) {
+      } else if ((match = /^\/_observablehq\/theme-(?<theme>[\w-]+(,[\w-]+)*)?\.css$/.exec(pathname))) {
         end(req, res, await bundleStyles({theme: match.groups!.theme?.split(",") ?? []}), "text/css");
       } else if (pathname.startsWith("/_observablehq/")) {
         send(req, pathname.slice("/_observablehq".length), {root: publicRoot}).pipe(res);

src/rollup.ts

@@ -18,8 +18,12 @@ import {relativeUrl} from "./url.js";
 const STYLE_MODULES = {
   "observablehq:default.css": getClientPath("./src/style/default.css"),
   "observablehq:theme-auto.css": getClientPath("./src/style/theme-auto.css"),
+  "observablehq:theme-auto-alt.css": getClientPath("./src/style/theme-auto-alt.css"),
   "observablehq:theme-dark.css": getClientPath("./src/style/theme-dark.css"),
-  "observablehq:theme-light.css": getClientPath("./src/style/theme-light.css")
+  "observablehq:theme-dark-alt.css": getClientPath("./src/style/theme-dark-alt.css"),
+  "observablehq:theme-light.css": getClientPath("./src/style/theme-light.css"),
+  "observablehq:theme-light-alt.css": getClientPath("./src/style/theme-light-alt.css"),
+  "observablehq:theme-wide.css": getClientPath("./src/style/theme-wide.css")
 };
 
 export async function bundleStyles({path, theme}: {path?: string; theme?: string[]}): Promise<string> {
@@ -29,9 +33,9 @@ export async function bundleStyles({path, theme}: {path?: string; theme?: string
       ? {entryPoints: [path]}
       : {
           stdin: {
-            contents: `${theme!
+            contents: `@import url("observablehq:default.css");\n${theme!
               .map((t) => `@import url(${JSON.stringify(`observablehq:theme-${t}.css`)});\n`)
-              .join("")}@import url("observablehq:default.css");\n`,
+              .join("")}`,
             loader: "css"
           }
         }),

src/style/default.css

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

src/style/grid.css

@@ -0,0 +1,69 @@
+#observablehq-center {
+  container-type: inline-size;
+}
+
+.grid {
+  margin: 1rem 0;
+  display: grid;
+  gap: 1rem;
+  grid-auto-rows: 1fr;
+  font: 14px var(--sans-serif);
+}
+
+.grid > * {
+  background: var(--theme-background-alt);
+  border: solid 1px var(--theme-foreground-faintest);
+  border-radius: 0.75rem;
+  padding: 1rem;
+}
+
+.grid svg {
+  overflow: visible;
+}
+
+.grid figure {
+  margin: 0;
+}
+
+@container (min-width: 640px) {
+  .grid-cols-2,
+  .grid-cols-4 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .grid-colspan-2,
+  .grid-colspan-3,
+  .grid-colspan-4 {
+    grid-column: span 2;
+  }
+}
+
+@container (min-width: 720px) {
+  .grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .grid-cols-3 .grid-colspan-3 {
+    grid-column: span 3;
+  }
+}
+
+@container (min-width: 1080px) {
+  .grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  .grid-cols-4 .grid-colspan-3 {
+    grid-column: span 3;
+  }
+  .grid-cols-4 .grid-colspan-4 {
+    grid-column: span 4;
+  }
+}
+
+.grid-rowspan-2 {
+  grid-row: span 2;
+}
+.grid-rowspan-3 {
+  grid-row: span 3;
+}
+.grid-rowspan-4 {
+  grid-row: span 4;
+}

src/style/theme-auto-alt.css

@@ -0,0 +1,2 @@
+@import url("./theme-light-alt.css");
+@import url("./theme-dark.css") (prefers-color-scheme: dark);

src/style/theme-dark-alt.css

@@ -0,0 +1,6 @@
+@import url("./theme-dark.css");
+
+:root {
+  --theme-background-alt: rgb(31, 31, 31);
+  --theme-background: color-mix(in srgb, var(--theme-background-alt) 70%, black);
+}

src/style/theme-light-alt.css

@@ -0,0 +1,6 @@
+@import url("./theme-light.css");
+
+:root {
+  --theme-background: color-mix(in srgb, var(--theme-background-alt) 97%, black);
+  --theme-background-alt: rgb(255, 255, 255);
+}

src/style/theme-wide.css

@@ -0,0 +1,4 @@
+#observablehq-main,
+#observablehq-footer {
+  max-width: none;
+}