react-cheminfo 0.8.0 → 0.10.0

package/src/download/ui/FigureDownloadPanel.tsx

@@ -0,0 +1,165 @@
+import type { ReactElement } from 'react';
+
+import type { HelpContent } from '../../help/ui/HelpBody.tsx';
+import { OverlayAction } from '../../overlay/ui/OverlayAction.tsx';
+import { OverlayPanel } from '../../overlay/ui/OverlayPanel.tsx';
+import type { OverlayOption } from '../../overlay/ui/OverlayRow.tsx';
+import { OverlaySegmented } from '../../overlay/ui/OverlaySegmented.tsx';
+import type { FigureFormat } from '../core/downloadFigure.ts';
+import type { FigurePixels } from '../core/figureScale.ts';
+import {
+  figurePixels,
+  figureScaleFits,
+  figureScaleLabel,
+  formatFigurePixels,
+} from '../core/figureScale.ts';
+
+/** What {@link FigureDownloadPanel} is drawn from. */
+export interface FigureDownloadPanelProps {
+  /** What the panel is called. */
+  title: string;
+  /** Which file the reader is about to write. */
+  format: FigureFormat;
+  /** The multiple of the figure on screen it is painted at. */
+  scale: number;
+  /** The multiples offered. */
+  scales: readonly number[];
+  /** How big the figure is on the page, or `null` where there is none. */
+  size: FigurePixels | null;
+  /** What went wrong the last time save was pressed, if anything. */
+  failure: string | null;
+  /** Whether a file is being written right now. */
+  saving: boolean;
+  /** Called with the format the reader picked. */
+  onFormatChange: (format: FigureFormat) => void;
+  /** Called with the multiple they picked. */
+  onScaleChange: (scale: number) => void;
+  /** Called when they press save. */
+  onSave: () => void;
+}
+
+/**
+ * The two choices behind the save glyph, and the button that writes the file.
+ *
+ * The resolution stays in place and greyed while an SVG is selected rather
+ * than disappearing, because a control that vanishes is a control the reader
+ * concludes the figure does not have — and the sentence at the foot says why
+ * it is greyed, which is that an SVG has no resolution to choose.
+ *
+ * That sentence is the panel's own hint line rather than a row of its own: it
+ * is not a setting, it is what the two settings above it currently amount to,
+ * and it is the only thing here that answers the question a reader actually
+ * has, which is how big the file is going to be. Saving itself is a command
+ * rather than a setting, so it sits at the foot under the hairline: a button
+ * filed among the settings is read as one, and a press nobody meant to make.
+ * @param props - See {@link FigureDownloadPanelProps}.
+ * @returns The panel.
+ */
+export function FigureDownloadPanel(
+  props: FigureDownloadPanelProps,
+): ReactElement {
+  const { title, format, scale, scales, size, failure, saving } = props;
+  const { onFormatChange, onScaleChange, onSave } = props;
+
+  const vector = format === 'svg';
+
+  return (
+    <OverlayPanel
+      title={title}
+      hint={hintOf(format, size, scale, failure)}
+      actions={
+        <OverlayAction
+          text="Save"
+          icon="download"
+          intent="primary"
+          disabled={saving || size === null}
+          onClick={onSave}
+        />
+      }
+    >
+      <OverlaySegmented<FigureFormat>
+        label="Format"
+        help={FORMAT_HELP}
+        value={format}
+        options={FORMAT_CHOICES}
+        onChange={onFormatChange}
+      />
+      <OverlaySegmented
+        label="Resolution"
+        help={RESOLUTION_HELP}
+        value={String(scale)}
+        options={scaleChoices(scales, size)}
+        disabled={vector}
+        onChange={(picked) => onScaleChange(Number(picked))}
+      />
+    </OverlayPanel>
+  );
+}
+
+/** The two files a figure can leave the page as. */
+const FORMAT_CHOICES: ReadonlyArray<OverlayOption<FigureFormat>> = [
+  { value: 'png', label: 'PNG' },
+  { value: 'svg', label: 'SVG' },
+];
+
+const FORMAT_HELP: HelpContent = {
+  title: 'Format',
+  body: 'A PNG is a picture of the figure, which is what a slide, a chat window or an issue accepts. An SVG is the figure itself: every line stays sharp however far it is enlarged, and it can still be edited afterwards.',
+};
+
+const RESOLUTION_HELP: HelpContent = {
+  title: 'Resolution',
+  body: 'How many pixels are painted for each pixel of the figure on screen. Two is right for a slide, three or four for print. An SVG carries no resolution of its own, so it is saved sharp at every size.',
+  example: {
+    code: '2×',
+    note: 'A figure 640 pixels wide on screen is saved 1280 pixels wide.',
+  },
+};
+
+/**
+ * The multiples offered, each saying what it would actually produce.
+ *
+ * One too large for the browser to paint is greyed rather than dropped, so the
+ * reader learns the ceiling exists before they meet it as a blank file.
+ * @param scales - The multiples the caller offers.
+ * @param size - How big the figure is on the page.
+ * @returns The choices, in the order offered.
+ */
+function scaleChoices(
+  scales: readonly number[],
+  size: FigurePixels | null,
+): readonly OverlayOption[] {
+  const choices: OverlayOption[] = [];
+  for (const scale of scales) {
+    const pixels = size === null ? null : figurePixels(size, scale);
+    choices.push({
+      value: String(scale),
+      label: figureScaleLabel(scale),
+      title: pixels === null ? undefined : formatFigurePixels(pixels),
+      disabled: size !== null && !figureScaleFits(size, scale),
+    });
+  }
+  return choices;
+}
+
+/**
+ * The line at the foot of the panel: what pressing save is about to do.
+ * @param format - Which file the reader is about to write.
+ * @param size - How big the figure is on the page.
+ * @param scale - The multiple it is painted at.
+ * @param failure - What went wrong last time, if anything.
+ * @returns The sentence.
+ */
+function hintOf(
+  format: FigureFormat,
+  size: FigurePixels | null,
+  scale: number,
+  failure: string | null,
+): string {
+  if (failure !== null) return failure;
+  if (size === null) return 'There is no figure on the page to save yet.';
+  if (format === 'svg') {
+    return `An SVG stays sharp at any size, so the resolution does not apply. Drawn ${formatFigurePixels(size)}.`;
+  }
+  return `Saved ${formatFigurePixels(figurePixels(size, scale))}.`;
+}

package/src/download/ui/index.ts

@@ -0,0 +1,13 @@
+/**
+ * Taking what is on the page off it, as a file.
+ *
+ * The one component here saves a figure, and it is given the `id` of the box
+ * the figure sits in rather than the figure itself: a chart does not have to
+ * know it is savable, and a bar above one can offer to save it without either
+ * of them holding a reference to the other.
+ */
+
+export type { FigureDownloadProps } from './FigureDownload.tsx';
+export { FigureDownload } from './FigureDownload.tsx';
+export type { FigureDownloadPanelProps } from './FigureDownloadPanel.tsx';
+export { FigureDownloadPanel } from './FigureDownloadPanel.tsx';

package/src/ecosystem/core/sites.ts

@@ -1,5 +1,7 @@
+// tokens-ok: file — every site's two colours are declared here.
 /** The sites the menu links to, in the order they are listed. */
 export type SiteId =
+  | 'learn'
   | 'inchi'
   | 'vcl'
   | 'smiles'
@@ -15,7 +17,8 @@ export type SiteId =
   | 'equilibrium'
   | 'polycarp'
   | '3d'
-  | 'periodic-table';
+  | 'periodic-table'
+  | 'database';
 
 export interface SiteName {
   /** First half of the name, set in the site's leading colour. */
@@ -70,6 +73,16 @@ export interface SiteMarkColors {
  * go with them live in `marks.tsx`.
  */
 export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
+  {
+    id: 'learn',
+    name: { lead: 'learn', alt: 'cheminfo', dot: true },
+    host: 'learn.cheminfo.org',
+    repository: 'https://github.com/cheminfo/learn.cheminfo.org',
+    tagline: 'Arrange the tools into a course and hand out its link.',
+    brand: '#0d9488',
+    brandAlt: '#b45309',
+    mark: { plate: '#0d9488', accent: '#f59e0b' },
+  },
   {
     id: 'inchi',
     name: { lead: 'inchi', alt: 'cheminfo', dot: true },
@@ -230,6 +243,16 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     brandAlt: '#a16207',
     mark: { plate: '#15803d', accent: '#fbbf24' },
   },
+  {
+    id: 'database',
+    name: { lead: 'database', alt: 'cheminfo', dot: true },
+    host: 'database.cheminfo.org',
+    repository: 'https://github.com/cheminfo/database.cheminfo.org',
+    tagline: 'Query a real chemical dataset in SQL and in Mango.',
+    brand: '#7c2d12',
+    brandAlt: '#0b6e85',
+    mark: { plate: '#7c2d12', accent: '#06b6d4' },
+  },
 ];
 
 /**

package/src/ecosystem/core/tokens.ts

@@ -1,3 +1,4 @@
+// tokens-ok: file — the block a site renders is written here.
 import { siteById } from './lookup.ts';
 import type { EcosystemSite, SiteId } from './sites.ts';
 

package/src/ecosystem/ui/EcosystemLinks.tsx

@@ -17,7 +17,7 @@ const SECTION_STYLE: CSSProperties = {
 };
 const HEADING_STYLE: CSSProperties = {
   margin: 0,
-  color: '#5b6875',
+  color: 'var(--text-muted, #5b6875)',
   fontSize: '0.75rem',
   fontWeight: 600,
 };
@@ -40,7 +40,7 @@ const LINK_STYLE: CSSProperties = {
 };
 const CURRENT_STYLE: CSSProperties = {
   ...LINK_STYLE,
-  color: '#8a96a3',
+  color: 'var(--text-faint, #8a96a3)',
   cursor: 'default',
 };
 

package/src/ecosystem/ui/EcosystemMenu.tsx

@@ -14,7 +14,7 @@ const PANEL_STYLE: CSSProperties = {
   gap: 8,
 };
 const HEADING_STYLE: CSSProperties = {
-  color: '#5b6875',
+  color: 'var(--text-muted, #5b6875)',
   fontSize: '0.75rem',
   fontWeight: 600,
 };

package/src/ecosystem/ui/SiteTile.tsx

@@ -11,7 +11,7 @@ const TILE_STYLE: CSSProperties = {
   padding: '7px 8px',
   border: '1px solid transparent',
   borderRadius: 10,
-  color: '#16202c',
+  color: 'var(--text, #16202c)',
   gap: 10,
   textDecoration: 'none',
   transition: 'background 120ms, border-color 120ms, transform 120ms',
@@ -37,7 +37,7 @@ const HERE_STYLE: CSSProperties = {
   textTransform: 'uppercase',
 };
 const TAGLINE_STYLE: CSSProperties = {
-  color: '#5b6875',
+  color: 'var(--text-muted, #5b6875)',
   fontSize: '0.75rem',
   lineHeight: 1.35,
 };
@@ -91,7 +91,9 @@ export function SiteTile(props: SiteTileProps): ReactElement {
         <div style={NAME_STYLE}>
           <span>
             <span style={{ color: site.brand }}>{site.name.lead}</span>
-            {site.name.dot ? <span style={{ color: '#8a96a3' }}>.</span> : null}
+            {site.name.dot ? (
+              <span style={{ color: 'var(--text-faint, #8a96a3)' }}>.</span>
+            ) : null}
             <span style={{ color: site.brandAlt }}>{site.name.alt}</span>
           </span>
           {isCurrent ? (
@@ -134,7 +136,7 @@ export function SiteTile(props: SiteTileProps): ReactElement {
 // A tile lights up in the colour of the site it opens, never in ours: the
 // pointer moving down the grid is what makes the pairs of colours read.
 function tint(site: EcosystemSite, isCurrent: boolean, lit: boolean): string {
-  if (isCurrent) return '#f5f7fa';
+  if (isCurrent) return 'var(--surface-sunken, #f5f7fa)';
   return lit ? `color-mix(in oklab, ${site.brand} 9%, white)` : 'transparent';
 }
 
@@ -143,6 +145,6 @@ function borderOf(
   isCurrent: boolean,
   lit: boolean,
 ): string {
-  if (isCurrent) return '#dfe3e8';
+  if (isCurrent) return 'var(--border, #dfe3e8)';
   return lit ? `color-mix(in oklab, ${site.brand} 32%, white)` : 'transparent';
 }

package/src/ecosystem/ui/glyphs.tsx

@@ -16,6 +16,46 @@ import type { SiteId } from '../core/sites.ts';
 
 /** Every mark, keyed by site, drawn on top of its plate. */
 export const GLYPHS: Record<SiteId, (alt: string) => ReactNode> = {
+  // Six tiles standing where the six atoms of a benzene ring stand: the
+  // arrangement of tiles is the product and the ring is the subject.
+  learn: (alt) => (
+    <g>
+      <rect x="12.85" y="4.15" width="6.3" height="6.3" rx="1.9" fill={alt} />
+      <rect
+        x="20.39"
+        y="8.5"
+        width="6.3"
+        height="6.3"
+        rx="1.9"
+        fill="#ffffff"
+      />
+      <rect
+        x="20.39"
+        y="17.2"
+        width="6.3"
+        height="6.3"
+        rx="1.9"
+        fill="#ffffff"
+      />
+      <rect
+        x="12.85"
+        y="21.55"
+        width="6.3"
+        height="6.3"
+        rx="1.9"
+        fill="#ffffff"
+      />
+      <rect
+        x="5.31"
+        y="17.2"
+        width="6.3"
+        height="6.3"
+        rx="1.9"
+        fill="#ffffff"
+      />
+      <rect x="5.31" y="8.5" width="6.3" height="6.3" rx="1.9" fill="#ffffff" />
+    </g>
+  ),
   // A hexagon with a tail: the structure, and the string it hashes into.
   inchi: (alt) => (
     <g
@@ -262,4 +302,20 @@ export const GLYPHS: Record<SiteId, (alt: string) => ReactNode> = {
       <circle cx="16" cy="16" r="2.9" fill="#ffffff" />
     </>
   ),
+  // A stack of platters, the top one carrying the answering colour: the disk
+  // stack every database has been drawn as, and the two shapes this site asks
+  // the same question in.
+  database: (alt) => (
+    <>
+      <path
+        d="M5.8 9.4v5.3a10.2 3.9 0 0 0 20.4 0V9.4a10.2 3.9 0 0 1-20.4 0Z"
+        fill="#ffffff"
+      />
+      <path
+        d="M5.8 17.4v5.3a10.2 3.9 0 0 0 20.4 0v-5.3a10.2 3.9 0 0 1-20.4 0Z"
+        fill="#ffffff"
+      />
+      <ellipse cx="16" cy="9.4" rx="10.2" ry="3.9" fill={alt} />
+    </>
+  ),
 };

package/src/orbital/core/index.ts

@@ -1,5 +1,8 @@
 export type { ResolutionLimits } from './atomicGrid.ts';
-export { atomicGridResolution } from './atomicGrid.ts';
+export {
+  atomicGridResolution,
+  createAtomicOrbitalEvaluator,
+} from './atomicGrid.ts';
 export type { AtomicOrbital, AtomicOrbitalOptions } from './atomicOrbitals.ts';
 export {
   atomicOrbitalsOf,

package/src/orbital/core/realHarmonics.ts

@@ -32,8 +32,11 @@ export interface RealHarmonic {
    * @param y - Offset from the nucleus along y, ångström.
    * @param z - Offset from the nucleus along z, ångström.
    * @param radius - Length of `(x, y, z)`, passed in because the caller has
-   * already computed it for the radial part.
-   * @returns The dimensionless amplitude; 0 at the nucleus for ℓ > 0.
+   * already computed it for the radial part. Never 0: a harmonic names a
+   * direction and the nucleus has none, so every ℓ > 0 divides by it. Build
+   * `ψ` with `createAtomicOrbitalEvaluator`, which answers that one point
+   * itself rather than paying for a branch on every sample.
+   * @returns The dimensionless amplitude.
    */
   evaluate: (x: number, y: number, z: number, radius: number) => number;
 }

package/src/orbital/ui/AtomicOrbitalCanvas.tsx

@@ -6,9 +6,12 @@
  * reason the two components are separate files.
  */
 
+import { Button } from '@blueprintjs/core';
 import type { CSSProperties, ReactElement } from 'react';
 import { useEffect, useRef, useState } from 'react';
 
+import type { HelpContent } from '../../help/ui/HelpBody.tsx';
+import { HelpTooltip } from '../../help/ui/HelpTooltip.tsx';
 import type { ResolutionLimits } from '../core/atomicGrid.ts';
 import type { PhasePalette } from '../core/palette.ts';
 import { PHASE_PALETTES } from '../core/palette.ts';
@@ -39,6 +42,24 @@ export interface AtomicOrbitalCanvasProps {
    * @default 56
    */
   resolution?: number | ResolutionLimits;
+  /**
+   * Whether the labelled x, y, z frame is drawn through the nucleus when the
+   * canvas opens. A `3d_xz` is only `3d_xz` because of where its lobes sit
+   * against those axes, and a lone isosurface says nothing about that, so the
+   * frame is on unless a site says otherwise.
+   *
+   * The canvas owns the state from then on: the button in its corner flips it,
+   * and {@link AtomicOrbitalCanvasProps.onAxesChange} reports the new value to
+   * a site that wants to remember it for the next mount.
+   * @default true
+   */
+  axes?: boolean;
+  /**
+   * Called when the student flips the frame, with its new state — so a site can
+   * persist the choice and pass it back as `axes`.
+   * @default undefined
+   */
+  onAxesChange?: (axes: boolean) => void;
   /**
    * Whether the scene turns on its own, which is what makes a still screenshot
    * of a 3D shape readable.
@@ -82,9 +103,11 @@ export function AtomicOrbitalCanvas(
     orbitalId,
     palette = PHASE_PALETTES.textbook,
     resolution = DEFAULT_RESOLUTION,
+    axes: initialAxes = true,
     spinning = false,
     spinSpeed = DEFAULT_SPIN_SPEED,
     sample = sampleInProcess,
+    onAxesChange,
     onNodeRadii,
     onError,
   } = props;
@@ -93,6 +116,15 @@ export function AtomicOrbitalCanvas(
   const viewerRef = useRef<OrbitalViewer | null>(null);
   const [drawn, setDrawn] = useState<string | null>(null);
 
+  // How far the drawn surface reaches, and whether the frame is wanted around
+  // it. Both are read by the sampling effect, which finishes long after the
+  // render that started it; keeping them in refs is what lets the frame be
+  // switched on without re-sampling the orbital.
+  const reachRef = useRef<number | null>(null);
+  const axesRef = useRef(initialAxes);
+
+  const [axes, setAxes] = useState(initialAxes);
+
   // What the canvas is being asked to show. Comparing it with what it *is*
   // showing gives the progress note without a state write on every prop change.
   const wanted = `${atomicNumber}|${orbitalId}|${resolutionKey(resolution)}|${palette.id}`;
@@ -100,9 +132,9 @@ export function AtomicOrbitalCanvas(
 
   // Callbacks are read through refs so a caller passing an inline arrow does
   // not re-sample the orbital on every render of its parent.
-  const callbacks = useRef({ onNodeRadii, onError });
+  const callbacks = useRef({ onAxesChange, onNodeRadii, onError });
   useEffect(() => {
-    callbacks.current = { onNodeRadii, onError };
+    callbacks.current = { onAxesChange, onNodeRadii, onError };
   });
 
   // Created and disposed once per mount. React 19 runs this twice in
@@ -136,7 +168,8 @@ export function AtomicOrbitalCanvas(
           positiveColour: palette.positive,
           negativeColour: palette.negative,
         });
-        await viewer.frame(reach);
+        reachRef.current = reach ?? null;
+        await viewer.refit(await fitAxes(viewer, reach, axesRef.current));
         if (!cancelled) setDrawn(wanted);
       })
       .catch((error: unknown) => {
@@ -150,6 +183,16 @@ export function AtomicOrbitalCanvas(
     };
   }, [atomicNumber, orbitalId, resolution, palette, sample, wanted]);
 
+  // Toggling the frame on an orbital already on screen: the field it was drawn
+  // from is unchanged, so nothing is re-sampled.
+  useEffect(() => {
+    axesRef.current = axes;
+    const viewer = viewerRef.current;
+    const reach = reachRef.current;
+    if (viewer === null || reach === null) return;
+    void fitAxes(viewer, reach, axes).then((framed) => viewer.refit(framed));
+  }, [axes]);
+
   useEffect(() => {
     void viewerRef.current?.setSpin(spinning, spinSpeed);
   }, [spinning, spinSpeed]);
@@ -157,10 +200,75 @@ export function AtomicOrbitalCanvas(
   return (
     <div ref={containerRef} style={CANVAS_STYLE}>
       {busy && <div style={BUSY_STYLE}>Sampling…</div>}
+      <div style={CONTROLS_STYLE}>
+        <HelpTooltip content={AXES_HELP} placement="bottom">
+          <Button
+            variant="minimal"
+            size="small"
+            icon="grid"
+            active={axes}
+            aria-label="Show the x, y, z axes"
+            aria-pressed={axes}
+            onClick={() => {
+              setAxes(!axes);
+              callbacks.current.onAxesChange?.(!axes);
+            }}
+          />
+        </HelpTooltip>
+        <HelpTooltip content={RESET_HELP} placement="bottom">
+          <Button
+            variant="minimal"
+            size="small"
+            icon="zoom-to-fit"
+            aria-label="Reset the view"
+            onClick={() => {
+              void viewerRef.current?.resetView();
+            }}
+          />
+        </HelpTooltip>
+      </div>
     </div>
   );
 }
 
+/**
+ * Draw the cartesian frame around the orbital, or remove it.
+ * @param viewer - The viewer holding the canvas.
+ * @param reach - How far the drawn surface reaches, as `showOrbital` returned
+ * it.
+ * @param axes - Whether the frame is wanted.
+ * @returns What the camera has to fit: the frame reaches past the surface, so
+ * turning it on has to zoom out or the labels sit off screen.
+ */
+async function fitAxes(
+  viewer: OrbitalViewer,
+  reach: number | undefined,
+  axes: boolean,
+): Promise<number | undefined> {
+  if (!axes) {
+    await viewer.hideAxes();
+    return reach;
+  }
+  if (reach === undefined) return undefined;
+  return (await viewer.showAxes(reach)) ?? reach;
+}
+
+/** What the frame button says it is for. */
+const AXES_HELP: HelpContent = {
+  title: 'Cartesian axes',
+  body: 'Draw x, y and z through the nucleus. The label names an orbital by where its lobes sit against them.',
+  example: {
+    code: '3d_yz',
+    note: 'four lobes between the y and z axes, none on either.',
+  },
+};
+
+/** What the reset button says it is for. */
+const RESET_HELP: HelpContent = {
+  title: 'Reset the view',
+  body: 'Back to the angle and zoom the orbital opened on. A change of orbital keeps whatever view you have turned it to.',
+};
+
 /** Samples per edge; 56 resolves the radial node of a 3s in about 25 ms. */
 const DEFAULT_RESOLUTION = 56;
 
@@ -191,6 +299,20 @@ const CANVAS_STYLE: CSSProperties = {
   overflow: 'hidden',
 };
 
+/**
+ * The two controls the canvas owns: the frame, and the way back to the framing
+ * the orbital opened on — a change of orbital now keeps whatever angle and zoom
+ * the student is on.
+ */
+const CONTROLS_STYLE: CSSProperties = {
+  position: 'absolute',
+  top: 4,
+  right: 4,
+  zIndex: 1,
+  display: 'flex',
+  gap: 2,
+};
+
 const BUSY_STYLE: CSSProperties = {
   position: 'absolute',
   top: 8,
@@ -199,6 +321,6 @@ const BUSY_STYLE: CSSProperties = {
   padding: '3px 8px',
   borderRadius: 3,
   background: 'rgba(255, 255, 255, 0.85)',
-  color: '#5f6b7c',
+  color: 'var(--text-muted, #5f6b7c)',
   fontSize: 11,
 };

package/src/orbital/ui/AtomicOrbitalViewer.tsx

@@ -51,6 +51,19 @@ export interface AtomicOrbitalViewerProps {
    * @default 56
    */
   resolution?: number | ResolutionLimits;
+  /**
+   * Whether the labelled x, y, z frame is drawn through the nucleus when the
+   * canvas opens — it is what tells a `3d_xz` from a `3d_yz`. The button in the
+   * canvas's corner flips it from there.
+   * @default true
+   */
+  axes?: boolean;
+  /**
+   * Called when the student flips the frame, with its new state — so a site can
+   * persist the choice and pass it back as `axes`.
+   * @default undefined
+   */
+  onAxesChange?: (axes: boolean) => void;
   /**
    * Whether the scene turns on its own.
    * @default false
@@ -145,7 +158,7 @@ const NOTE_STYLE: CSSProperties = {
   padding: 12,
   borderRadius: 3,
   background: 'rgb(241 245 249)',
-  color: '#5f6b7c',
+  color: 'var(--text-muted, #5f6b7c)',
   fontSize: 13,
   textAlign: 'center',
 };