timvir 0.2.45 → 0.2.47

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # timvir
 
+## 0.2.47
+
+### Patch Changes
+
+- **Honor prefers-color-scheme media feature** ([#3635](https://github.com/timvir/timvir/pull/3635)) - Timvir now honors the prefers-color-scheme media feature. Previously, Timvir would only appear in light mode, unless the theme detector script was injected into the page. For cases where you have a component in an Exhibit that requires a light or dark background, you can override that globally (Page blocks configuration) or locally (theme prop on Exhibit). The theme detector module remains present to not break builds, but became obsolete. It will print a warning into the console when used. We will completely remove it in a future version.
+
+## 0.2.46
+
 ## 0.2.45
 
 ### Patch Changes

package/blocks/Arbitrary/index.js

@@ -280,7 +280,7 @@ function Arbitrary(props$1, ref) {
       children: [/*#__PURE__*/jsxs("div", {
         className: "timvir-s-rvj5dj timvir-s-d3ue5d timvir-s-9flyx0 timvir-s-1e56ztr",
         children: [/*#__PURE__*/jsxs("div", {
-          className: "timvir-s-78zum5 timvir-s-6s0dn4 timvir-s-qtkp2c timvir-s-u0aao5 timvir-s-1n2onr6 timvir-s-1d0dlzq timvir-s-1tcdsnd timvir-s-ieozyd timvir-s-1x824oc timvir-s-5l10my timvir-s-1op5qub timvir-s-1kx6eu5 timvir-s-hlrplc timvir-s-1dzvx6z timvir-s-lzy7x8 timvir-s-1edtgf2 timvir-s-18wp92t timvir-s-rlfy00",
+          className: "timvir-s-78zum5 timvir-s-6s0dn4 timvir-s-qtkp2c timvir-s-u0aao5 timvir-s-1n2onr6 timvir-s-1d0dlzq timvir-s-1tcdsnd timvir-s-hkezso timvir-s-1j6awrg timvir-s-1s928wv timvir-s-arstr8 timvir-s-2q1x1w timvir-s-5hscyn timvir-s-86avzo timvir-s-1mbvx0 timvir-s-2l4bqv timvir-s-hqgf4x timvir-s-1o0ppuw",
           children: [/*#__PURE__*/jsx("span", {
             className: "timvir-s-1rg5ohu timvir-s-vgvpxu timvir-s-15ku74s",
             children: "Seed:"

package/blocks/Arbitrary/styles.css

@@ -34,10 +34,6 @@
   .timvir-s-1717udv {
     padding: 0;
   }
-
-  .timvir-s-1op5qub:after {
-    inset: 0;
-  }
 }
 
 @layer priority3 {
@@ -81,27 +77,7 @@
     outline: none;
   }
 
-  .timvir-s-lzy7x8:after {
-    border-color: var(--timvir-border-color);
-  }
-
-  .timvir-s-18wp92t:hover:after, .timvir-s-rlfy00:focus-within:after {
-    border-color: var(--timvir-text-color);
-  }
-
-  .timvir-s-1edtgf2:after {
-    border-radius: 2px;
-  }
-
-  .timvir-s-1dzvx6z:after {
-    border-style: solid;
-  }
-
-  .timvir-s-hlrplc:after {
-    border-width: 1px;
-  }
-
-  .timvir-s-49kzi4:hover, .timvir-s-13m658e:active {
+  .timvir-s-hqgf4x:hover:after, .timvir-s-1o0ppuw:focus-within:after, .timvir-s-49kzi4:hover, .timvir-s-13m658e:active {
     border-color: var(--timvir-text-color);
   }
 }
@@ -167,22 +143,6 @@
     word-break: initial;
   }
 
-  .timvir-s-5l10my:after {
-    content: "";
-  }
-
-  .timvir-s-ieozyd:after {
-    display: block;
-  }
-
-  .timvir-s-1kx6eu5:after {
-    pointer-events: none;
-  }
-
-  .timvir-s-1x824oc:after {
-    position: absolute;
-  }
-
   .timvir-s-1dc5b4e:hover, .timvir-s-1bx2y69:active {
     background-color: var(--timvir-sidebar-highlight-color);
   }
@@ -221,3 +181,45 @@
     width: 100%;
   }
 }
+
+@layer priority6 {
+  .timvir-s-arstr8:after {
+    inset: 0;
+  }
+}
+
+@layer priority7 {
+  .timvir-s-1mbvx0:after {
+    border-color: var(--timvir-border-color);
+  }
+
+  .timvir-s-2l4bqv:after {
+    border-radius: 2px;
+  }
+
+  .timvir-s-86avzo:after {
+    border-style: solid;
+  }
+
+  .timvir-s-5hscyn:after {
+    border-width: 1px;
+  }
+}
+
+@layer priority8 {
+  .timvir-s-1s928wv:after {
+    content: "";
+  }
+
+  .timvir-s-hkezso:after {
+    display: block;
+  }
+
+  .timvir-s-2q1x1w:after {
+    pointer-events: none;
+  }
+
+  .timvir-s-1j6awrg:after {
+    position: absolute;
+  }
+}

package/blocks/Cover/index.js

@@ -180,7 +180,7 @@ const Root = "div";
 function Cover(props$1, ref) {
   const {
     metadata,
-    img,
+    img: img1,
     sources,
     ...rest
   } = props$1;
@@ -195,7 +195,7 @@ function Cover(props$1, ref) {
         ...p
       }, i)), /*#__PURE__*/jsx("img", {
         ...metadata,
-        ...img,
+        ...img1,
         className: "timvir-s-1lliihq timvir-s-193iq5w timvir-s-5i6pxz timvir-s-l1xv1r"
       })]
     })

package/blocks/Exhibit/Exhibit.d.ts

@@ -12,6 +12,12 @@ interface Props extends React.ComponentProps<typeof Root> {
      */
     bleed?: string | number;
     BackdropProps?: React.ComponentPropsWithoutRef<"div">;
+    /**
+     * Override the theme used for the background pattern. If not provided, the
+     * Exhibit component will use the default from the context. If that is also
+     * not provided, it will honor the prefers-color-scheme media feature.
+     */
+    theme?: "system" | "light" | "dark";
 }
 declare const _default: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/blocks/Exhibit/docs/index.mdx

@@ -1,4 +1,4 @@
-import { Code } from "timvir/blocks";
+import { Code, Grid } from "timvir/blocks";
 
 # Exhibit
 
@@ -39,3 +39,19 @@ To entirely remove any bleed and checkered background, render your element direc
 <Sample variant="bleed" props={{ bleed: 8 }} />
 <Sample variant="bleed" props={{ bleed: 16 }} />
 <Sample variant="bleed" />
+
+## Theme
+
+Timvir itself respects the `prefers-color-scheme` media feature.
+Its UI automatically adjusts based on that user preference.
+However, sometimes the elements shown in an `<Exhibit>` need to be shown on a light or dark background.
+In those cases, you can force a light or dark theme with the `theme` prop.
+
+<Grid>
+  <div>
+    <Sample variant="theme" props={{ theme: "light" }} />
+  </div>
+  <div>
+    <Sample variant="theme" props={{ theme: "dark" }} />
+  </div>
+</Grid>

package/blocks/Exhibit/index.js

@@ -1,5 +1,5 @@
 'use client';
-import { useBlock } from 'timvir/core';
+import { useContext, useBlock } from 'timvir/core';
 import * as React from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -175,25 +175,25 @@ const layoutStyles = {
 
 const Root = "div";
 function Exhibit(props$1, ref) {
-  const block = useBlock(props$1);
+  const {
+    theme: defaultTheme
+  } = useContext().blocks?.Exhibit ?? {};
+  const block = useBlock({
+    ...props$1,
+    theme: props$1.theme ?? defaultTheme
+  });
   const {
     caption,
     bleed,
     BackdropProps,
+    theme = "system",
     children,
     className,
     style,
     ...rest
   } = block.props;
   const rootStyleProps = props(layoutStyles.block, styles.root);
-  const containerStyleProps = {
-    0: {
-      className: "timvir-s-ufnvkl timvir-s-7zdco timvir-s-zqqpyx timvir-s-1htuw1x timvir-s-1sxf85j timvir-s-mkeg23 timvir-s-1y0btm7 timvir-s-1tffoc1"
-    },
-    1: {
-      className: "timvir-s-ufnvkl timvir-s-7zdco timvir-s-1sxf85j timvir-s-mkeg23 timvir-s-1tffoc1 timvir-s-ng3xce timvir-s-rxpjvj timvir-s-1717udv"
-    }
-  }[!!(bleed === 0) << 0];
+  const containerStyleProps = props(styles.container, bleed === 0 && styles.bleedZero, styles[`${theme}Theme`]);
   return /*#__PURE__*/jsxs(Root, {
     ref: ref,
     "data-timvir-b-exhibit": true,
@@ -234,6 +234,42 @@ const cssVariables = {
 const styles = {
   root: {
     $$css: true
+  },
+  container: {
+    k1xSpc: "timvir-s-ufnvkl",
+    kKwaWg: "timvir-s-7zdco",
+    kUOVxO: "timvir-s-zqqpyx",
+    kmVPX3: "timvir-s-1htuw1x",
+    kaIpWk: "timvir-s-1sxf85j",
+    kMzoRj: "timvir-s-mkeg23",
+    ksu8eU: "timvir-s-1y0btm7",
+    kVAM5u: "timvir-s-1tffoc1",
+    $$css: true
+  },
+  bleedZero: {
+    ksu8eU: "timvir-s-ng3xce",
+    kUOVxO: "timvir-s-rxpjvj",
+    kmVPX3: "timvir-s-1717udv",
+    $$css: true
+  },
+  systemTheme: {
+    kKwaWg: "timvir-s-7zdco",
+    $$css: true
+  },
+  lightTheme: {
+    kKwaWg: "timvir-s-7ns93p",
+    $$css: true
+  },
+  darkTheme: {
+    kKwaWg: "timvir-s-kt43kk",
+    $$css: true
+  },
+  caption: {
+    kGuDYH: "timvir-s-1dcheo9",
+    kLWn49: "timvir-s-jkpybl",
+    kMwMTN: "timvir-s-vgvpxu",
+    keoZOQ: "timvir-s-lwy1ot",
+    $$css: true
   }
 };
 

package/blocks/Exhibit/samples/basic.d.ts

@@ -1 +1,4 @@
-export default function Sample(): import("react/jsx-runtime").JSX.Element;
+import { Exhibit } from "..";
+type Props = Partial<React.ComponentPropsWithoutRef<typeof Exhibit>>;
+export default function Sample(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/blocks/Exhibit/samples/theme.d.ts

@@ -0,0 +1,4 @@
+import { Exhibit } from "..";
+type Props = Partial<React.ComponentPropsWithoutRef<typeof Exhibit>>;
+export default function Sample(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/blocks/Exhibit/styles.css

@@ -71,6 +71,14 @@
 }
 
 @layer priority4 {
+  .timvir-s-kt43kk {
+    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZBhAAAAFklEQVQI12NQBQF2EGAghQkmwXxSmADZJQiZ2ZZ46gAAAABJRU5ErkJggg==");
+  }
+
+  .timvir-s-7ns93p {
+    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAAHElEQVR4AWP4/u07Mvr75y8yGlBpND6a6oGUBgAxMSSkDKa/pQAAAABJRU5ErkJggg==");
+  }
+
   .timvir-s-7zdco {
     background-image: var(--timvir-b-Exhibit-background);
   }

package/blocks/Message/index.js

@@ -225,13 +225,13 @@ function Message(props$1, ref) {
     ...rest,
     children: [variant && {
       info: /*#__PURE__*/jsx(SvgChevronsRight, {
-        className: "timvir-s-3psx0u timvir-s-1lliihq timvir-s-1n2onr6 timvir-s-xk6nc9 timvir-s-jvto2c timvir-s-dpf0h8 timvir-s-ozkzq6 timvir-s-1h1xus1"
+        className: "timvir-s-3psx0u timvir-s-1lliihq timvir-s-1n2onr6 timvir-s-xk6nc9 timvir-s-jvto2c timvir-s-dpf0h8 timvir-s-ozkzq6 timvir-s-kggzb5"
       }),
       warning: /*#__PURE__*/jsx(SvgAlertCircle, {
-        className: "timvir-s-3psx0u timvir-s-1lliihq timvir-s-1n2onr6 timvir-s-xk6nc9 timvir-s-jvto2c timvir-s-dpf0h8 timvir-s-ozkzq6 timvir-s-4u77bm"
+        className: "timvir-s-3psx0u timvir-s-1lliihq timvir-s-1n2onr6 timvir-s-xk6nc9 timvir-s-jvto2c timvir-s-dpf0h8 timvir-s-ozkzq6 timvir-s-1hw0bdt"
       }),
       alert: /*#__PURE__*/jsx(SvgXOctagon, {
-        className: "timvir-s-3psx0u timvir-s-1lliihq timvir-s-1n2onr6 timvir-s-xk6nc9 timvir-s-jvto2c timvir-s-dpf0h8 timvir-s-ozkzq6 timvir-s-1mz1spe"
+        className: "timvir-s-3psx0u timvir-s-1lliihq timvir-s-1n2onr6 timvir-s-xk6nc9 timvir-s-jvto2c timvir-s-dpf0h8 timvir-s-ozkzq6 timvir-s-1co8gj4"
       })
     }[variant], /*#__PURE__*/jsx("div", {
       className: "timvir-s-1iyjqo2 timvir-s-euugli",
@@ -261,11 +261,11 @@ var Message_default = /*#__PURE__*/React.forwardRef(Message);
 const styles = {
   root: {
     kVAEAm: "timvir-s-1n2onr6",
-    kWkggS: "timvir-s-m75j3u",
-    kMwMTN: "timvir-s-1mqxbix",
+    kWkggS: "timvir-s-8wt6bl",
+    kMwMTN: "timvir-s-fs82qe",
     kaIpWk: "timvir-s-18zih8k",
     kmVPX3: "timvir-s-qb5aye",
-    kGVxlE: "timvir-s-1w911z",
+    kGVxlE: "timvir-s-spnz74",
     k1xSpc: "timvir-s-78zum5",
     kGNEyG: "timvir-s-1cy8zhl",
     kGuDYH: "timvir-s-kpwil5",
@@ -283,30 +283,30 @@ const styles = {
     $$css: true
   },
   info: {
-    kWkggS: "timvir-s-1a1mm2c",
-    kMwMTN: "timvir-s-1mqxbix",
+    kWkggS: "timvir-s-s9vwj2",
+    kMwMTN: "timvir-s-oz4c4x",
     $$css: true
   },
   warning: {
-    kWkggS: "timvir-s-1nd4xj2",
-    kMwMTN: "timvir-s-1mqxbix",
+    kWkggS: "timvir-s-lu7zl4",
+    kMwMTN: "timvir-s-chvu57",
     $$css: true
   },
   alert: {
-    kWkggS: "timvir-s-18vcsbs",
-    kMwMTN: "timvir-s-1mqxbix",
+    kWkggS: "timvir-s-irir1e",
+    kMwMTN: "timvir-s-qjx7hj",
     $$css: true
   },
   iconInfo: {
-    kMwMTN: "timvir-s-1h1xus1",
+    kMwMTN: "timvir-s-kggzb5",
     $$css: true
   },
   iconWarning: {
-    kMwMTN: "timvir-s-4u77bm",
+    kMwMTN: "timvir-s-1hw0bdt",
     $$css: true
   },
   iconAlert: {
-    kMwMTN: "timvir-s-1mz1spe",
+    kMwMTN: "timvir-s-1co8gj4",
     $$css: true
   },
   content: {

package/blocks/Message/styles.css

@@ -55,40 +55,52 @@
     align-items: flex-start;
   }
 
-  .timvir-s-1a1mm2c {
-    background-color: #f0f2fc;
+  .timvir-s-irir1e {
+    background-color: var(--timvir-message-alert-bg);
   }
 
-  .timvir-s-18vcsbs {
-    background-color: #fcf0f0;
+  .timvir-s-8wt6bl {
+    background-color: var(--timvir-message-bg-color);
   }
 
-  .timvir-s-1nd4xj2 {
-    background-color: #fcf9f0;
+  .timvir-s-s9vwj2 {
+    background-color: var(--timvir-message-info-bg);
   }
 
-  .timvir-s-m75j3u {
-    background-color: var(--c-p-0);
+  .timvir-s-lu7zl4 {
+    background-color: var(--timvir-message-warning-bg);
   }
 
-  .timvir-s-1w911z {
-    box-shadow: inset 0 0 0 1px #10161a33;
+  .timvir-s-spnz74 {
+    box-shadow: inset 0 0 0 1px var(--timvir-message-border-color);
   }
 
-  .timvir-s-1h1xus1 {
-    color: #2a47d5;
+  .timvir-s-1co8gj4 {
+    color: var(--timvir-message-alert-icon);
   }
 
-  .timvir-s-4u77bm {
-    color: #a68521;
+  .timvir-s-qjx7hj {
+    color: var(--timvir-message-alert-text);
   }
 
-  .timvir-s-1mz1spe {
-    color: #da4444;
+  .timvir-s-kggzb5 {
+    color: var(--timvir-message-info-icon);
   }
 
-  .timvir-s-1mqxbix {
-    color: #000;
+  .timvir-s-oz4c4x {
+    color: var(--timvir-message-info-text);
+  }
+
+  .timvir-s-fs82qe {
+    color: var(--timvir-message-text-color);
+  }
+
+  .timvir-s-1hw0bdt {
+    color: var(--timvir-message-warning-icon);
+  }
+
+  .timvir-s-chvu57 {
+    color: var(--timvir-message-warning-text);
   }
 
   .timvir-s-1lliihq {

package/blocks/styles.css

@@ -34,10 +34,6 @@
   .timvir-s-1717udv {
     padding: 0;
   }
-
-  .timvir-s-1op5qub:after {
-    inset: 0;
-  }
 }
 
 @layer priority3 {
@@ -81,27 +77,7 @@
     outline: none;
   }
 
-  .timvir-s-lzy7x8:after {
-    border-color: var(--timvir-border-color);
-  }
-
-  .timvir-s-18wp92t:hover:after, .timvir-s-rlfy00:focus-within:after {
-    border-color: var(--timvir-text-color);
-  }
-
-  .timvir-s-1edtgf2:after {
-    border-radius: 2px;
-  }
-
-  .timvir-s-1dzvx6z:after {
-    border-style: solid;
-  }
-
-  .timvir-s-hlrplc:after {
-    border-width: 1px;
-  }
-
-  .timvir-s-49kzi4:hover, .timvir-s-13m658e:active {
+  .timvir-s-hqgf4x:hover:after, .timvir-s-1o0ppuw:focus-within:after, .timvir-s-49kzi4:hover, .timvir-s-13m658e:active {
     border-color: var(--timvir-text-color);
   }
 }
@@ -167,22 +143,6 @@
     word-break: initial;
   }
 
-  .timvir-s-5l10my:after {
-    content: "";
-  }
-
-  .timvir-s-ieozyd:after {
-    display: block;
-  }
-
-  .timvir-s-1kx6eu5:after {
-    pointer-events: none;
-  }
-
-  .timvir-s-1x824oc:after {
-    position: absolute;
-  }
-
   .timvir-s-1dc5b4e:hover, .timvir-s-1bx2y69:active {
     background-color: var(--timvir-sidebar-highlight-color);
   }
@@ -221,6 +181,48 @@
     width: 100%;
   }
 }
+
+@layer priority6 {
+  .timvir-s-arstr8:after {
+    inset: 0;
+  }
+}
+
+@layer priority7 {
+  .timvir-s-1mbvx0:after {
+    border-color: var(--timvir-border-color);
+  }
+
+  .timvir-s-2l4bqv:after {
+    border-radius: 2px;
+  }
+
+  .timvir-s-86avzo:after {
+    border-style: solid;
+  }
+
+  .timvir-s-5hscyn:after {
+    border-width: 1px;
+  }
+}
+
+@layer priority8 {
+  .timvir-s-1s928wv:after {
+    content: "";
+  }
+
+  .timvir-s-hkezso:after {
+    display: block;
+  }
+
+  .timvir-s-2q1x1w:after {
+    pointer-events: none;
+  }
+
+  .timvir-s-1j6awrg:after {
+    position: absolute;
+  }
+}
 @layer priority1 {
   .timvir-s-i27niw {
     --timvir-b-Code-bleed: calc(var(--timvir-margin, 0px) * .6666);
@@ -920,6 +922,14 @@
 }
 
 @layer priority4 {
+  .timvir-s-kt43kk {
+    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZBhAAAAFklEQVQI12NQBQF2EGAghQkmwXxSmADZJQiZ2ZZ46gAAAABJRU5ErkJggg==");
+  }
+
+  .timvir-s-7ns93p {
+    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAAHElEQVR4AWP4/u07Mvr75y8yGlBpND6a6oGUBgAxMSSkDKa/pQAAAABJRU5ErkJggg==");
+  }
+
   .timvir-s-7zdco {
     background-image: var(--timvir-b-Exhibit-background);
   }
@@ -1372,40 +1382,52 @@
     align-items: flex-start;
   }
 
-  .timvir-s-1a1mm2c {
-    background-color: #f0f2fc;
+  .timvir-s-irir1e {
+    background-color: var(--timvir-message-alert-bg);
   }
 
-  .timvir-s-18vcsbs {
-    background-color: #fcf0f0;
+  .timvir-s-8wt6bl {
+    background-color: var(--timvir-message-bg-color);
   }
 
-  .timvir-s-1nd4xj2 {
-    background-color: #fcf9f0;
+  .timvir-s-s9vwj2 {
+    background-color: var(--timvir-message-info-bg);
   }
 
-  .timvir-s-m75j3u {
-    background-color: var(--c-p-0);
+  .timvir-s-lu7zl4 {
+    background-color: var(--timvir-message-warning-bg);
   }
 
-  .timvir-s-1w911z {
-    box-shadow: inset 0 0 0 1px #10161a33;
+  .timvir-s-spnz74 {
+    box-shadow: inset 0 0 0 1px var(--timvir-message-border-color);
+  }
+
+  .timvir-s-1co8gj4 {
+    color: var(--timvir-message-alert-icon);
+  }
+
+  .timvir-s-qjx7hj {
+    color: var(--timvir-message-alert-text);
+  }
+
+  .timvir-s-kggzb5 {
+    color: var(--timvir-message-info-icon);
   }
 
-  .timvir-s-1h1xus1 {
-    color: #2a47d5;
+  .timvir-s-oz4c4x {
+    color: var(--timvir-message-info-text);
   }
 
-  .timvir-s-4u77bm {
-    color: #a68521;
+  .timvir-s-fs82qe {
+    color: var(--timvir-message-text-color);
   }
 
-  .timvir-s-1mz1spe {
-    color: #da4444;
+  .timvir-s-1hw0bdt {
+    color: var(--timvir-message-warning-icon);
   }
 
-  .timvir-s-1mqxbix {
-    color: #000;
+  .timvir-s-chvu57 {
+    color: var(--timvir-message-warning-text);
   }
 
   .timvir-s-1lliihq {

package/builtins/index.js

@@ -205,23 +205,23 @@ function Heading(Component) {
     });
   };
 }
-const h1 = props$1 => /*#__PURE__*/jsx("h1", {
+const h11 = props$1 => /*#__PURE__*/jsx("h1", {
   ...props(layoutStyles.block, styles.h1),
   ...props$1
 });
-const h2 = Heading(props$1 => /*#__PURE__*/jsx("h2", {
+const h21 = Heading(props$1 => /*#__PURE__*/jsx("h2", {
   ...props(layoutStyles.block, styles.h2),
   ...props$1
 }));
-const h3 = Heading(props$1 => /*#__PURE__*/jsx("h3", {
+const h31 = Heading(props$1 => /*#__PURE__*/jsx("h3", {
   ...props(layoutStyles.block, styles.h3),
   ...props$1
 }));
-const h4 = Heading(props$1 => /*#__PURE__*/jsx("h4", {
+const h41 = Heading(props$1 => /*#__PURE__*/jsx("h4", {
   ...props(layoutStyles.block, styles.h4),
   ...props$1
 }));
-const blockquote = props$1 => {
+const blockquote1 = props$1 => {
   const {
     children,
     ...rest
@@ -243,25 +243,25 @@ const blockquote = props$1 => {
     })
   });
 };
-const hr = props$1 => /*#__PURE__*/jsx("hr", {
+const hr1 = props$1 => /*#__PURE__*/jsx("hr", {
   ...props(layoutStyles.block, styles.hr),
   ...props$1
 });
-const table = props$1 => /*#__PURE__*/jsx("table", {
+const table1 = props$1 => /*#__PURE__*/jsx("table", {
   ...props(layoutStyles.block, styles.table),
   ...props$1
 });
-const thead = props => /*#__PURE__*/jsx("thead", {
+const thead1 = props => /*#__PURE__*/jsx("thead", {
   ...props
 });
-const tbody = props => /*#__PURE__*/jsx("tbody", {
+const tbody1 = props => /*#__PURE__*/jsx("tbody", {
   ...props
 });
-const tr = props => /*#__PURE__*/jsx("tr", {
+const tr1 = props => /*#__PURE__*/jsx("tr", {
   className: "timvir-s-83z2og timvir-s-178xt8z timvir-s-13fuv20 timvir-s-1r4gg6b timvir-s-7kswos",
   ...props
 });
-const th = props => {
+const th1 = props => {
   const {
     align,
     ...rest
@@ -275,7 +275,7 @@ const th = props => {
     ...rest
   });
 };
-const td = props => {
+const td1 = props => {
   const {
     align,
     ...rest
@@ -289,23 +289,23 @@ const td = props => {
     ...rest
   });
 };
-const code = props => /*#__PURE__*/jsx("code", {
+const code1 = props => /*#__PURE__*/jsx("code", {
   className: "timvir-s-1sxf85j timvir-s-1jnxms5 timvir-s-sfzzmd timvir-s-bspb1j timvir-s-mkeg23 timvir-s-1y0btm7 timvir-s-j7gikm timvir-s-1vhptj2",
   ...props
 });
-const a = props => /*#__PURE__*/jsx("a", {
+const a1 = props => /*#__PURE__*/jsx("a", {
   className: "timvir-s-15rks2t timvir-s-1hl2dhg timvir-s-1dlxito timvir-s-1j43nte timvir-s-odwsf6 timvir-s-1w3jsh0 timvir-s-g7t5vw timvir-s-1v02d47 timvir-s-ene6ev timvir-s-15m0p1m timvir-s-1bezv82",
   ...props
 });
-const p = props$1 => /*#__PURE__*/jsx("p", {
+const p1 = props$1 => /*#__PURE__*/jsx("p", {
   ...props(layoutStyles.block),
   ...props$1
 });
-const ul = props$1 => /*#__PURE__*/jsx("ul", {
+const ul1 = props$1 => /*#__PURE__*/jsx("ul", {
   ...props(layoutStyles.block),
   ...props$1
 });
-const ol = props$1 => /*#__PURE__*/jsx("ol", {
+const ol1 = props$1 => /*#__PURE__*/jsx("ol", {
   ...props(layoutStyles.block),
   ...props$1
 });
@@ -366,4 +366,4 @@ const styles = {
   }
 };
 
-export { a, blockquote, code, h1, h2, h3, h4, hr, ol, p, table, tbody, td, th, thead, tr, ul };
+export { a1 as a, blockquote1 as blockquote, code1 as code, h11 as h1, h21 as h2, h31 as h3, h41 as h4, hr1 as hr, ol1 as ol, p1 as p, table1 as table, tbody1 as tbody, td1 as td, th1 as th, thead1 as thead, tr1 as tr, ul1 as ul };

package/context/index.d.ts

@@ -14,6 +14,14 @@ export interface Value {
         href: string;
     }>;
     blocks?: {
+        Exhibit?: {
+            /**
+             * If provided, Exhibit blocks will use this theme by default (unless overridden locally).
+             *
+             * If not set, default is to honor the prefers-color-scheme media feature.
+             */
+            theme?: "system" | "light" | "dark";
+        };
         WebLink?: {
             unfurl: (url: string) => Promise<any>;
         };

package/core/theme/detector.js

@@ -1 +1 @@
-const t=Object.fromEntries(["light","dark"].map(t=>[t,(()=>{const n=window.matchMedia(`(prefers-color-scheme: ${t})`);return n.addEventListener("change",e),n})()]));function e(){const e=function(){try{const t=localStorage.getItem("timvir-theme");if(t)return t}catch{}for(const[e,n]of Object.entries(t))if(n.matches)return e}();e&&function(t){document.documentElement.setAttribute("data-timvir-theme",t)}(e)}e();
+console.warn("Timvir theme detector is obsolete and will be removed in future versions.");

package/global.css

@@ -23,22 +23,52 @@
 
   --timvir-background-pattern: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAAHElEQVR4AWP4/u07Mvr75y8yGlBpND6a6oGUBgAxMSSkDKa/pQAAAABJRU5ErkJggg==);
   --timvir-highlight-background-color: #ffe10044;
-}
-
-:root[data-timvir-theme="dark"] {
-  --timvir-background-color: #1f2023;
-  --timvir-text-color: rgba(255 255 255 / 0.86);
-  --timvir-secondary-text-color: rgba(255 255 255 / 0.56);
-  --timvir-secondary-background-color: #161618;
-
-  --timvir-border-color: #27292f;
 
-  --timvir-sidebar-highlight-color: rgb(41, 43, 47);
-
-  --timvir-accent-color: #38a585;
+  /* Message component colors - light mode */
+  --timvir-message-text-color: #000000;
+  --timvir-message-bg-color: #f0fcf6;
+  --timvir-message-border-color: rgba(16, 22, 26, 0.2);
+  --timvir-message-info-bg: #f0f2fc;
+  --timvir-message-info-text: #000000;
+  --timvir-message-info-icon: #2a47d5;
+  --timvir-message-warning-bg: #fcf9f0;
+  --timvir-message-warning-text: #000000;
+  --timvir-message-warning-icon: #a68521;
+  --timvir-message-alert-bg: #fcf0f0;
+  --timvir-message-alert-text: #000000;
+  --timvir-message-alert-icon: #da4444;
+}
 
-  --timvir-background-pattern: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZBhAAAAFklEQVQI12NQBQF2EGAghQkmwXxSmADZJQiZ2ZZ46gAAAABJRU5ErkJggg==);
-  --timvir-highlight-background-color: rgba(174, 124, 20, 0.15);
+@media (prefers-color-scheme: dark) {
+  :root {
+    --timvir-background-color: #1f2023;
+    --timvir-text-color: rgba(255 255 255 / 0.86);
+    --timvir-secondary-text-color: rgba(255 255 255 / 0.56);
+    --timvir-secondary-background-color: #161618;
+
+    --timvir-border-color: #27292f;
+
+    --timvir-sidebar-highlight-color: rgb(41, 43, 47);
+
+    --timvir-accent-color: #38a585;
+
+    --timvir-background-pattern: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZBhAAAAFklEQVQI12NQBQF2EGAghQkmwXxSmADZJQiZ2ZZ46gAAAABJRU5ErkJggg==);
+    --timvir-highlight-background-color: rgba(174, 124, 20, 0.15);
+
+    /* Message component colors - dark mode */
+    --timvir-message-text-color: rgba(255, 255, 255, 0.86);
+    --timvir-message-bg-color: #2a2d31;
+    --timvir-message-border-color: rgba(255, 255, 255, 0.15);
+    --timvir-message-info-bg: #1e2233;
+    --timvir-message-info-text: rgba(255, 255, 255, 0.86);
+    --timvir-message-info-icon: #5b7fff;
+    --timvir-message-warning-bg: #33301e;
+    --timvir-message-warning-text: rgba(255, 255, 255, 0.86);
+    --timvir-message-warning-icon: #d4b55c;
+    --timvir-message-alert-bg: #331e1e;
+    --timvir-message-alert-text: rgba(255, 255, 255, 0.86);
+    --timvir-message-alert-icon: #ff6b6b;
+  }
 }
 
 /*
@@ -52,11 +82,13 @@
   text-decoration: var(--timvir-b-Code-shiki-light-text-decoration);
 }
 
-:root[data-timvir-theme="dark"] [data-timvir-b-Code] .shiki span {
-  color: var(--timvir-b-Code-shiki-dark);
-  font-style: var(--timvir-b-Code-shiki-dark-font-style);
-  font-weight: var(--timvir-b-Code-shiki-dark-font-weight);
-  text-decoration: var(--timvir-b-Code-shiki-dark-text-decoration);
+@media (prefers-color-scheme: dark) {
+  [data-timvir-b-Code] .shiki span {
+    color: var(--timvir-b-Code-shiki-dark);
+    font-style: var(--timvir-b-Code-shiki-dark-font-style);
+    font-weight: var(--timvir-b-Code-shiki-dark-font-weight);
+    text-decoration: var(--timvir-b-Code-shiki-dark-text-decoration);
+  }
 }
 
 body {

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "timvir",
-  "version": "0.2.45",
+  "version": "0.2.47",
   "license": "MIT",
   "sideEffects": false,
   "exports": {

package/styles.css

@@ -23,22 +23,52 @@
 
   --timvir-background-pattern: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAAHElEQVR4AWP4/u07Mvr75y8yGlBpND6a6oGUBgAxMSSkDKa/pQAAAABJRU5ErkJggg==);
   --timvir-highlight-background-color: #ffe10044;
-}
-
-:root[data-timvir-theme="dark"] {
-  --timvir-background-color: #1f2023;
-  --timvir-text-color: rgba(255 255 255 / 0.86);
-  --timvir-secondary-text-color: rgba(255 255 255 / 0.56);
-  --timvir-secondary-background-color: #161618;
-
-  --timvir-border-color: #27292f;
-
-  --timvir-sidebar-highlight-color: rgb(41, 43, 47);
-
-  --timvir-accent-color: #38a585;
 
-  --timvir-background-pattern: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZBhAAAAFklEQVQI12NQBQF2EGAghQkmwXxSmADZJQiZ2ZZ46gAAAABJRU5ErkJggg==);
-  --timvir-highlight-background-color: rgba(174, 124, 20, 0.15);
+  /* Message component colors - light mode */
+  --timvir-message-text-color: #000000;
+  --timvir-message-bg-color: #f0fcf6;
+  --timvir-message-border-color: rgba(16, 22, 26, 0.2);
+  --timvir-message-info-bg: #f0f2fc;
+  --timvir-message-info-text: #000000;
+  --timvir-message-info-icon: #2a47d5;
+  --timvir-message-warning-bg: #fcf9f0;
+  --timvir-message-warning-text: #000000;
+  --timvir-message-warning-icon: #a68521;
+  --timvir-message-alert-bg: #fcf0f0;
+  --timvir-message-alert-text: #000000;
+  --timvir-message-alert-icon: #da4444;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --timvir-background-color: #1f2023;
+    --timvir-text-color: rgba(255 255 255 / 0.86);
+    --timvir-secondary-text-color: rgba(255 255 255 / 0.56);
+    --timvir-secondary-background-color: #161618;
+
+    --timvir-border-color: #27292f;
+
+    --timvir-sidebar-highlight-color: rgb(41, 43, 47);
+
+    --timvir-accent-color: #38a585;
+
+    --timvir-background-pattern: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZBhAAAAFklEQVQI12NQBQF2EGAghQkmwXxSmADZJQiZ2ZZ46gAAAABJRU5ErkJggg==);
+    --timvir-highlight-background-color: rgba(174, 124, 20, 0.15);
+
+    /* Message component colors - dark mode */
+    --timvir-message-text-color: rgba(255, 255, 255, 0.86);
+    --timvir-message-bg-color: #2a2d31;
+    --timvir-message-border-color: rgba(255, 255, 255, 0.15);
+    --timvir-message-info-bg: #1e2233;
+    --timvir-message-info-text: rgba(255, 255, 255, 0.86);
+    --timvir-message-info-icon: #5b7fff;
+    --timvir-message-warning-bg: #33301e;
+    --timvir-message-warning-text: rgba(255, 255, 255, 0.86);
+    --timvir-message-warning-icon: #d4b55c;
+    --timvir-message-alert-bg: #331e1e;
+    --timvir-message-alert-text: rgba(255, 255, 255, 0.86);
+    --timvir-message-alert-icon: #ff6b6b;
+  }
 }
 
 /*
@@ -52,11 +82,13 @@
   text-decoration: var(--timvir-b-Code-shiki-light-text-decoration);
 }
 
-:root[data-timvir-theme="dark"] [data-timvir-b-Code] .shiki span {
-  color: var(--timvir-b-Code-shiki-dark);
-  font-style: var(--timvir-b-Code-shiki-dark-font-style);
-  font-weight: var(--timvir-b-Code-shiki-dark-font-weight);
-  text-decoration: var(--timvir-b-Code-shiki-dark-text-decoration);
+@media (prefers-color-scheme: dark) {
+  [data-timvir-b-Code] .shiki span {
+    color: var(--timvir-b-Code-shiki-dark);
+    font-style: var(--timvir-b-Code-shiki-dark-font-style);
+    font-weight: var(--timvir-b-Code-shiki-dark-font-weight);
+    text-decoration: var(--timvir-b-Code-shiki-dark-text-decoration);
+  }
 }
 
 body {
@@ -1303,10 +1335,6 @@ body {
   .timvir-s-1717udv {
     padding: 0;
   }
-
-  .timvir-s-1op5qub:after {
-    inset: 0;
-  }
 }
 
 @layer priority3 {
@@ -1350,27 +1378,7 @@ body {
     outline: none;
   }
 
-  .timvir-s-lzy7x8:after {
-    border-color: var(--timvir-border-color);
-  }
-
-  .timvir-s-18wp92t:hover:after, .timvir-s-rlfy00:focus-within:after {
-    border-color: var(--timvir-text-color);
-  }
-
-  .timvir-s-1edtgf2:after {
-    border-radius: 2px;
-  }
-
-  .timvir-s-1dzvx6z:after {
-    border-style: solid;
-  }
-
-  .timvir-s-hlrplc:after {
-    border-width: 1px;
-  }
-
-  .timvir-s-49kzi4:hover, .timvir-s-13m658e:active {
+  .timvir-s-hqgf4x:hover:after, .timvir-s-1o0ppuw:focus-within:after, .timvir-s-49kzi4:hover, .timvir-s-13m658e:active {
     border-color: var(--timvir-text-color);
   }
 }
@@ -1436,22 +1444,6 @@ body {
     word-break: initial;
   }
 
-  .timvir-s-5l10my:after {
-    content: "";
-  }
-
-  .timvir-s-ieozyd:after {
-    display: block;
-  }
-
-  .timvir-s-1kx6eu5:after {
-    pointer-events: none;
-  }
-
-  .timvir-s-1x824oc:after {
-    position: absolute;
-  }
-
   .timvir-s-1dc5b4e:hover, .timvir-s-1bx2y69:active {
     background-color: var(--timvir-sidebar-highlight-color);
   }
@@ -1490,6 +1482,48 @@ body {
     width: 100%;
   }
 }
+
+@layer priority6 {
+  .timvir-s-arstr8:after {
+    inset: 0;
+  }
+}
+
+@layer priority7 {
+  .timvir-s-1mbvx0:after {
+    border-color: var(--timvir-border-color);
+  }
+
+  .timvir-s-2l4bqv:after {
+    border-radius: 2px;
+  }
+
+  .timvir-s-86avzo:after {
+    border-style: solid;
+  }
+
+  .timvir-s-5hscyn:after {
+    border-width: 1px;
+  }
+}
+
+@layer priority8 {
+  .timvir-s-1s928wv:after {
+    content: "";
+  }
+
+  .timvir-s-hkezso:after {
+    display: block;
+  }
+
+  .timvir-s-2q1x1w:after {
+    pointer-events: none;
+  }
+
+  .timvir-s-1j6awrg:after {
+    position: absolute;
+  }
+}
 @layer priority1 {
   .timvir-s-i27niw {
     --timvir-b-Code-bleed: calc(var(--timvir-margin, 0px) * .6666);
@@ -2189,6 +2223,14 @@ body {
 }
 
 @layer priority4 {
+  .timvir-s-kt43kk {
+    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZBhAAAAFklEQVQI12NQBQF2EGAghQkmwXxSmADZJQiZ2ZZ46gAAAABJRU5ErkJggg==");
+  }
+
+  .timvir-s-7ns93p {
+    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAAHElEQVR4AWP4/u07Mvr75y8yGlBpND6a6oGUBgAxMSSkDKa/pQAAAABJRU5ErkJggg==");
+  }
+
   .timvir-s-7zdco {
     background-image: var(--timvir-b-Exhibit-background);
   }
@@ -2641,40 +2683,52 @@ body {
     align-items: flex-start;
   }
 
-  .timvir-s-1a1mm2c {
-    background-color: #f0f2fc;
+  .timvir-s-irir1e {
+    background-color: var(--timvir-message-alert-bg);
   }
 
-  .timvir-s-18vcsbs {
-    background-color: #fcf0f0;
+  .timvir-s-8wt6bl {
+    background-color: var(--timvir-message-bg-color);
   }
 
-  .timvir-s-1nd4xj2 {
-    background-color: #fcf9f0;
+  .timvir-s-s9vwj2 {
+    background-color: var(--timvir-message-info-bg);
   }
 
-  .timvir-s-m75j3u {
-    background-color: var(--c-p-0);
+  .timvir-s-lu7zl4 {
+    background-color: var(--timvir-message-warning-bg);
   }
 
-  .timvir-s-1w911z {
-    box-shadow: inset 0 0 0 1px #10161a33;
+  .timvir-s-spnz74 {
+    box-shadow: inset 0 0 0 1px var(--timvir-message-border-color);
+  }
+
+  .timvir-s-1co8gj4 {
+    color: var(--timvir-message-alert-icon);
+  }
+
+  .timvir-s-qjx7hj {
+    color: var(--timvir-message-alert-text);
+  }
+
+  .timvir-s-kggzb5 {
+    color: var(--timvir-message-info-icon);
   }
 
-  .timvir-s-1h1xus1 {
-    color: #2a47d5;
+  .timvir-s-oz4c4x {
+    color: var(--timvir-message-info-text);
   }
 
-  .timvir-s-4u77bm {
-    color: #a68521;
+  .timvir-s-fs82qe {
+    color: var(--timvir-message-text-color);
   }
 
-  .timvir-s-1mz1spe {
-    color: #da4444;
+  .timvir-s-1hw0bdt {
+    color: var(--timvir-message-warning-icon);
   }
 
-  .timvir-s-1mqxbix {
-    color: #000;
+  .timvir-s-chvu57 {
+    color: var(--timvir-message-warning-text);
   }
 
   .timvir-s-1lliihq {