js-draw 1.1.0 → 1.2.1

package/dist/cjs/util/adjustEditorThemeForContrast.js

@@ -0,0 +1,128 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const math_1 = require("@js-draw/math");
+/**
+ * Adjusts the current editor theme such that colors have appropriate contrast.
+ *
+ * As this method overrides CSS variables using the `.style` property,
+ * **assumes** all original theme variables are set using CSS and not the `.style` property.
+ *
+ * If the editor changes theme in response to the system theme, this method should be
+ * called whenever the system theme changes (e.g. by using [the `matchMedia`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia)
+ * method).
+ *
+ * @example
+ * ```ts,runnable
+ * import { Editor, adjustEditorThemeForContrast } from 'js-draw';
+ *
+ * const editor = new Editor(document.body);
+ * editor.addToolbar();
+ *
+ * const css = `
+ *   :root .imageEditorContainer {
+ *     --background-color-1: #ffff77;
+ *     --foreground-color-1: #fff;
+ *     --background-color-2: #ffff99;
+ *     --foreground-color-2: #ffff88;
+ *     --background-color-3: #ddffff;
+ *     --foreground-color-3: #eeffff;
+ *     --selection-background-color: #9f7;
+ *     --selection-foreground-color: #98f;
+ *   }
+ *
+ *   @media screen and (prefers-color-scheme: dark) {
+ *     :root .imageEditorContainer {
+ *       --background-color-1: black;
+ *     }
+ *   }
+ * `;
+ * editor.addStyleSheet(css);
+ *
+ * adjustEditorThemeForContrast(editor);
+ *
+ * // Because adjustEditorThemeForContrast overrides the current theme, it should be called again
+ * // to allow the editor to switch between light/dark themes.
+ * window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+ *   adjustEditorThemeForContrast(editor);
+ * });
+ *
+ * window.matchMedia('print').addEventListener('change', () => {
+ *   adjustEditorThemeForContrast(editor);
+ * });
+ * ```
+ */
+const adjustEditorThemeForContrast = (editor, options) => {
+    const editorElem = editor.getRootElement();
+    // Each set of entries in colorPairs should resolve to colors with sufficient
+    // contrast.
+    const colorPairs = [
+        ['--background-color-1', '--foreground-color-1', true, true],
+        ['--background-color-2', '--foreground-color-2', true, true],
+        ['--background-color-3', '--foreground-color-3', true, true],
+        ['--selection-background-color', '--selection-foreground-color', false, true],
+    ];
+    if (!options?.dontClearOverrides) {
+        // Clear any overrides
+        for (const [backgroundVar, foregroundVar] of colorPairs) {
+            editorElem.style.setProperty(backgroundVar, null);
+            editorElem.style.setProperty(foregroundVar, null);
+        }
+    }
+    const styles = getComputedStyle(editorElem);
+    const updatedColors = Object.create(null);
+    const adjustVariablesForContrast = (var1, var2, minContrast, 
+    // true if the variable can be updated
+    updateVar1, updateVar2) => {
+        // Fetch from updatedColors if available -- styles isn't updated dynamically.
+        let color1 = updatedColors[var1] ? updatedColors[var1] : math_1.Color4.fromString(styles.getPropertyValue(var1));
+        let color2 = updatedColors[var2] ? updatedColors[var2] : math_1.Color4.fromString(styles.getPropertyValue(var2));
+        // Ensure that color1 has the lesser luminance
+        if (color1.relativeLuminance() < color2.relativeLuminance()) {
+            const tmp = color1;
+            color1 = color2;
+            color2 = tmp;
+            const oldVar2 = var2;
+            var2 = var1;
+            var1 = oldVar2;
+            const oldUpdateVar1 = updateVar1;
+            updateVar1 = updateVar2;
+            updateVar2 = oldUpdateVar1;
+        }
+        let colorsUpdated = false;
+        let currentContrast = math_1.Color4.contrastRatio(color1, color2);
+        let iterations = 0;
+        // Step the brightness of color1 and color2 in different directions while necessary
+        while (currentContrast < minContrast && iterations < 8) {
+            const step = math_1.Vec3.of(0.1, 0.1, 0.1);
+            if (updateVar1) {
+                if (color2.eq(math_1.Color4.white) && !updateVar2) {
+                    color2 = math_1.Color4.black;
+                }
+                color1 = math_1.Color4.fromRGBVector(color1.rgb.plus(step));
+            }
+            if (updateVar2) {
+                if (color2.eq(math_1.Color4.black) && !updateVar1) {
+                    color2 = math_1.Color4.white;
+                }
+                color2 = math_1.Color4.fromRGBVector(color2.rgb.minus(step));
+            }
+            currentContrast = math_1.Color4.contrastRatio(color1, color2);
+            colorsUpdated = true;
+            iterations++;
+        }
+        // Update the CSS variables if necessary
+        if (colorsUpdated) {
+            editorElem.style.setProperty(var1, color1.toHexString());
+            editorElem.style.setProperty(var2, color2.toHexString());
+            updatedColors[var1] = color1;
+            updatedColors[var2] = color2;
+        }
+    };
+    // Also adjust the selection background
+    adjustVariablesForContrast('--selection-background-color', '--background-color-2', 1.29, true, false);
+    for (const [backgroundVar, foregroundVar, updateBackground, updateForeground] of colorPairs) {
+        const minContrast = 4.5;
+        adjustVariablesForContrast(backgroundVar, foregroundVar, minContrast, updateBackground, updateForeground);
+    }
+};
+exports.default = adjustEditorThemeForContrast;

package/dist/cjs/util/adjustEditorThemeForContrast.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/util/lib.d.ts

@@ -0,0 +1 @@
+export { default as adjustEditorThemeForContrast } from './adjustEditorThemeForContrast';

package/dist/cjs/util/lib.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.adjustEditorThemeForContrast = void 0;
+var adjustEditorThemeForContrast_1 = require("./adjustEditorThemeForContrast");
+Object.defineProperty(exports, "adjustEditorThemeForContrast", { enumerable: true, get: function () { return __importDefault(adjustEditorThemeForContrast_1).default; } });

package/dist/cjs/version.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
-    number: '1.1.0',
+    number: '1.2.1',
 };

package/dist/mjs/Editor.d.ts

@@ -16,6 +16,7 @@ import KeyBinding from './shortcuts/KeyBinding';
 import AbstractToolbar from './toolbar/AbstractToolbar';
 import RenderablePathSpec from './rendering/RenderablePathSpec';
 import { AboutDialogEntry } from './dialogs/makeAboutDialog';
+/** Provides settings to an instance of an editor. See the Editor {@link Editor.constructor}. */
 export interface EditorSettings {
     /** Defaults to `RenderingMode.CanvasRenderer` */
     renderingMode: RenderingMode;
@@ -27,9 +28,9 @@ export interface EditorSettings {
      * Defaults to true.
      */
     wheelEventsEnabled: boolean | 'only-if-focused';
-    /** Minimum zoom fraction (e.g. 0.5 → 50% zoom). */
+    /** Minimum zoom fraction (e.g. 0.5 → 50% zoom). Defaults to $2 \cdot 10^{-10}$. */
     minZoom: number;
-    /** Maximum zoom fraction (e.g. 2 → 200% zoom). */
+    /** Maximum zoom fraction (e.g. 2 → 200% zoom). Defaults to $1 \cdot 10^{12}$. */
     maxZoom: number;
     /**
      * Overrides for keyboard shortcuts. For example,
@@ -48,7 +49,7 @@ export interface EditorSettings {
      * See, for example, the `@js-draw/material-icons` package.
      *
      * @example
-     * ```ts
+     * ```ts,runnable
      * import * as jsdraw from 'js-draw';
      * import MaterialIconProvider from '@js-draw/material-icons';
      * import 'js-draw/styles';

package/dist/mjs/lib.d.ts

@@ -6,13 +6,18 @@
  * ```ts,runnable
  * import { Editor, Vec3, Mat33, ToolbarWidgetTag } from 'js-draw';
  *
+ * // Use the Material Icon pack.
+ * import { MaterialIconProvider } from '@js-draw/material-icons';
+ *
  * // Apply js-draw CSS
  * import 'js-draw/styles';
  * // If your bundler doesn't support the above, try
  * // import 'js-draw/bundledStyles';
  *
  * (async () => {
- *   const editor = new Editor(document.body);
+ *   const editor = new Editor(document.body, {
+ *     iconProvider: new MaterialIconProvider(),
+ *   });
  *   const toolbar = editor.addToolbar();
  *
  *   // Increases the minimum height of the editor
@@ -22,8 +27,8 @@
  *   await editor.loadFromSVG(`
  *       <svg viewBox="0 0 500 500" width="500" height="500" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
  *           <style id="js-draw-style-sheet">path{stroke-linecap:round;stroke-linejoin:round;}text{white-space:pre;}</style>
- *           <path d="M500,500L500,0L0,0L0,500L500,500" fill="#423131bf" class="js-draw-image-background"></path>
- *           <text style="transform: matrix(1, 0, 0, 1, 57, 192); font-family: serif; font-size: 32px; fill: rgb(204, 102, 51);">Testing...</text>
+ *           <path d="M500,500L500,0L0,0L0,500L500,500" fill="#aaa" class="js-draw-image-background"></path>
+ *           <text style="transform: matrix(1, 0, 0, 1, 57, 192); font-family: serif; font-size: 32px; fill: #111;">Testing...</text>
  *       </svg>
  *   `);
  *
@@ -45,9 +50,10 @@
  * ```
  *
  * @see
- * {@link Editor}
- * {@link Editor.loadFromSVG}
- * {@link AbstractToolbar.addActionButton }
+ * - {@link Editor}
+ * - {@link Editor.loadFromSVG}
+ * - {@link AbstractToolbar.addActionButton }
+ * - {@link EditorSettings}
  *
  * @packageDocumentation
  */
@@ -70,13 +76,14 @@ export * from './shortcuts/lib';
 export { default as EventDispatcher } from './EventDispatcher';
 export { default as Pointer, PointerDevice } from './Pointer';
 export { default as UndoRedoHistory } from './UndoRedoHistory';
+export * from './util/lib';
 export { default as __js_draw__version } from './version';
 import AbstractToolbar from './toolbar/AbstractToolbar';
-export { Editor, EditorSettings, AbstractToolbar, 
+export { Editor, EditorSettings, AbstractToolbar, };
 /**
  * Using the HTMLToolbar alias is deprecated. Use
  * `AbstractToolbar` instead.
  * @deprecated
  */
-AbstractToolbar as HTMLToolbar, };
+export { AbstractToolbar as HTMLToolbar };
 export default Editor;

package/dist/mjs/lib.mjs

@@ -6,13 +6,18 @@
  * ```ts,runnable
  * import { Editor, Vec3, Mat33, ToolbarWidgetTag } from 'js-draw';
  *
+ * // Use the Material Icon pack.
+ * import { MaterialIconProvider } from '@js-draw/material-icons';
+ *
  * // Apply js-draw CSS
  * import 'js-draw/styles';
  * // If your bundler doesn't support the above, try
  * // import 'js-draw/bundledStyles';
  *
  * (async () => {
- *   const editor = new Editor(document.body);
+ *   const editor = new Editor(document.body, {
+ *     iconProvider: new MaterialIconProvider(),
+ *   });
  *   const toolbar = editor.addToolbar();
  *
  *   // Increases the minimum height of the editor
@@ -22,8 +27,8 @@
  *   await editor.loadFromSVG(`
  *       <svg viewBox="0 0 500 500" width="500" height="500" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
  *           <style id="js-draw-style-sheet">path{stroke-linecap:round;stroke-linejoin:round;}text{white-space:pre;}</style>
- *           <path d="M500,500L500,0L0,0L0,500L500,500" fill="#423131bf" class="js-draw-image-background"></path>
- *           <text style="transform: matrix(1, 0, 0, 1, 57, 192); font-family: serif; font-size: 32px; fill: rgb(204, 102, 51);">Testing...</text>
+ *           <path d="M500,500L500,0L0,0L0,500L500,500" fill="#aaa" class="js-draw-image-background"></path>
+ *           <text style="transform: matrix(1, 0, 0, 1, 57, 192); font-family: serif; font-size: 32px; fill: #111;">Testing...</text>
  *       </svg>
  *   `);
  *
@@ -45,9 +50,10 @@
  * ```
  *
  * @see
- * {@link Editor}
- * {@link Editor.loadFromSVG}
- * {@link AbstractToolbar.addActionButton }
+ * - {@link Editor}
+ * - {@link Editor.loadFromSVG}
+ * - {@link AbstractToolbar.addActionButton }
+ * - {@link EditorSettings}
  *
  * @packageDocumentation
  */
@@ -70,14 +76,15 @@ export  *  from './shortcuts/lib.mjs';
 export  { default as EventDispatcher }  from './EventDispatcher.mjs';
 export  { default as Pointer, PointerDevice }  from './Pointer.mjs';
 export  { default as UndoRedoHistory }  from './UndoRedoHistory.mjs';
+export  *  from './util/lib.mjs';
 // @internal
 export  { default as __js_draw__version }  from './version.mjs';
 import  AbstractToolbar  from './toolbar/AbstractToolbar.mjs';
-export { Editor, AbstractToolbar, 
+export { Editor, AbstractToolbar, };
 /**
  * Using the HTMLToolbar alias is deprecated. Use
  * `AbstractToolbar` instead.
  * @deprecated
  */
-AbstractToolbar as HTMLToolbar, };
+export { AbstractToolbar as HTMLToolbar };
 export default Editor;

package/dist/mjs/toolbar/DropdownToolbar.d.ts

@@ -2,6 +2,30 @@ import Editor from '../Editor';
 import { ToolbarLocalization } from './localization';
 import BaseWidget from './widgets/BaseWidget';
 import AbstractToolbar, { SpacerOptions } from './AbstractToolbar';
+/**
+ * @example
+ *
+ * ```ts,runnable
+ * import { makeDropdownToolbar, Editor } from 'js-draw';
+ *
+ * const editor = new Editor(document.body);
+ * const toolbar = makeDropdownToolbar(editor);
+ * toolbar.addDefaults();
+ *
+ * toolbar.addExitButton(editor => {
+ *   // TODO
+ * });
+ *
+ * toolbar.addSaveButton(editor => {
+ *   // TODO
+ * });
+ * ```
+ *
+ * @see
+ * - {@link makeEdgeToolbar}
+ * - {@link AbstractToolbar.addSaveButton}
+ * - {@link AbstractToolbar.addExitButton}
+ */
 export declare const makeDropdownToolbar: (editor: Editor) => AbstractToolbar;
 export default class DropdownToolbar extends AbstractToolbar {
     protected container: HTMLElement;

package/dist/mjs/toolbar/DropdownToolbar.mjs

@@ -2,6 +2,30 @@ import  { defaultToolbarLocalization }  from './localization.mjs';
 import  OverflowWidget  from './widgets/OverflowWidget.mjs';
 import  AbstractToolbar  from './AbstractToolbar.mjs';
 import  { toolbarCSSPrefix }  from './constants.mjs';
+/**
+ * @example
+ *
+ * ```ts,runnable
+ * import { makeDropdownToolbar, Editor } from 'js-draw';
+ *
+ * const editor = new Editor(document.body);
+ * const toolbar = makeDropdownToolbar(editor);
+ * toolbar.addDefaults();
+ *
+ * toolbar.addExitButton(editor => {
+ *   // TODO
+ * });
+ *
+ * toolbar.addSaveButton(editor => {
+ *   // TODO
+ * });
+ * ```
+ *
+ * @see
+ * - {@link makeEdgeToolbar}
+ * - {@link AbstractToolbar.addSaveButton}
+ * - {@link AbstractToolbar.addExitButton}
+ */
 export const makeDropdownToolbar = (editor) => {
     return new DropdownToolbar(editor, editor.getRootElement());
 };

package/dist/mjs/toolbar/EdgeToolbar.d.ts

@@ -2,6 +2,34 @@ import Editor from '../Editor';
 import { ToolbarLocalization } from './localization';
 import BaseWidget from './widgets/BaseWidget';
 import AbstractToolbar, { SpacerOptions } from './AbstractToolbar';
+/**
+ * Creates an `EdgeToolbar`.
+ *
+ * [Credit for the original design of this UI](https://www.figma.com/file/NA5F2AMWO3wUuaoDfUaAb8/Material-3-wireframes?type=design&node-id=54490%3A1103&mode=design&t=Ee0UwnPnQ2bNC2uM-1).
+ *
+ * @example
+ *
+ * ```ts,runnable
+ * import { makeEdgeToolbar, Editor } from 'js-draw';
+ *
+ * const editor = new Editor(document.body);
+ * const toolbar = makeEdgeToolbar(editor);
+ * toolbar.addDefaults();
+ *
+ * toolbar.addSaveButton(editor => {
+ *   // TODO
+ * });
+ *
+ * toolbar.addExitButton(editor => {
+ *   // TODO
+ * });
+ * ```
+ *
+ * @see
+ * - {@link makeDropdownToolbar}
+ * - {@link AbstractToolbar.addSaveButton}
+ * - {@link AbstractToolbar.addExitButton}
+ */
 export declare const makeEdgeToolbar: (editor: Editor) => AbstractToolbar;
 export default class EdgeToolbar extends AbstractToolbar {
     private toolbarContainer;

package/dist/mjs/toolbar/EdgeToolbar.mjs

@@ -4,6 +4,34 @@ import  EdgeToolbarLayoutManager  from './widgets/layout/EdgeToolbarLayoutManage
 import  { MutableReactiveValue, ReactiveValue }  from '../util/ReactiveValue.mjs';
 import  AbstractToolbar  from './AbstractToolbar.mjs';
 import  stopPropagationOfScrollingWheelEvents  from '../util/stopPropagationOfScrollingWheelEvents.mjs';
+/**
+ * Creates an `EdgeToolbar`.
+ *
+ * [Credit for the original design of this UI](https://www.figma.com/file/NA5F2AMWO3wUuaoDfUaAb8/Material-3-wireframes?type=design&node-id=54490%3A1103&mode=design&t=Ee0UwnPnQ2bNC2uM-1).
+ *
+ * @example
+ *
+ * ```ts,runnable
+ * import { makeEdgeToolbar, Editor } from 'js-draw';
+ *
+ * const editor = new Editor(document.body);
+ * const toolbar = makeEdgeToolbar(editor);
+ * toolbar.addDefaults();
+ *
+ * toolbar.addSaveButton(editor => {
+ *   // TODO
+ * });
+ *
+ * toolbar.addExitButton(editor => {
+ *   // TODO
+ * });
+ * ```
+ *
+ * @see
+ * - {@link makeDropdownToolbar}
+ * - {@link AbstractToolbar.addSaveButton}
+ * - {@link AbstractToolbar.addExitButton}
+ */
 export const makeEdgeToolbar = (editor) => {
     return new EdgeToolbar(editor, editor.getRootElement(), editor.localization);
 };
@@ -45,12 +73,12 @@ export default class EdgeToolbar extends AbstractToolbar {
         this.sidebarY.onUpdateAndNow(y => {
             const belowEdgeClassName = 'dropdown-below-edge';
             if (y > 0) {
-                this.sidebarContainer.style.translate = `0 ${y}px`;
+                this.sidebarContainer.style.transform = `translate(0, ${y}px)`;
                 this.sidebarContainer.style.paddingBottom = '';
                 this.menuContainer.classList.add(belowEdgeClassName);
             }
             else {
-                this.sidebarContainer.style.translate = '';
+                this.sidebarContainer.style.transform = '';
                 this.sidebarContainer.style.paddingBottom = `${-y}px`;
                 this.menuContainer.classList.remove(belowEdgeClassName);
             }

package/dist/mjs/util/ReactiveValue.mjs

@@ -94,7 +94,7 @@ export class ReactiveValue {
 export class MutableReactiveValue extends ReactiveValue {
     static fromProperty(sourceValue, propertyName) {
         const child = ReactiveValue.fromInitialValue(sourceValue.get()[propertyName]);
-        const childRef = new WeakRef(child);
+        const childRef = window.WeakRef ? new WeakRef(child) : { deref: () => child };
         // When the source is updated...
         const sourceListener = sourceValue.onUpdate(newValue => {
             const childValue = childRef.deref();

package/dist/mjs/util/adjustEditorThemeForContrast.d.ts

@@ -0,0 +1,55 @@
+import Editor from '../Editor';
+/**
+ * Adjusts the current editor theme such that colors have appropriate contrast.
+ *
+ * As this method overrides CSS variables using the `.style` property,
+ * **assumes** all original theme variables are set using CSS and not the `.style` property.
+ *
+ * If the editor changes theme in response to the system theme, this method should be
+ * called whenever the system theme changes (e.g. by using [the `matchMedia`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia)
+ * method).
+ *
+ * @example
+ * ```ts,runnable
+ * import { Editor, adjustEditorThemeForContrast } from 'js-draw';
+ *
+ * const editor = new Editor(document.body);
+ * editor.addToolbar();
+ *
+ * const css = `
+ *   :root .imageEditorContainer {
+ *     --background-color-1: #ffff77;
+ *     --foreground-color-1: #fff;
+ *     --background-color-2: #ffff99;
+ *     --foreground-color-2: #ffff88;
+ *     --background-color-3: #ddffff;
+ *     --foreground-color-3: #eeffff;
+ *     --selection-background-color: #9f7;
+ *     --selection-foreground-color: #98f;
+ *   }
+ *
+ *   @media screen and (prefers-color-scheme: dark) {
+ *     :root .imageEditorContainer {
+ *       --background-color-1: black;
+ *     }
+ *   }
+ * `;
+ * editor.addStyleSheet(css);
+ *
+ * adjustEditorThemeForContrast(editor);
+ *
+ * // Because adjustEditorThemeForContrast overrides the current theme, it should be called again
+ * // to allow the editor to switch between light/dark themes.
+ * window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+ *   adjustEditorThemeForContrast(editor);
+ * });
+ *
+ * window.matchMedia('print').addEventListener('change', () => {
+ *   adjustEditorThemeForContrast(editor);
+ * });
+ * ```
+ */
+declare const adjustEditorThemeForContrast: (editor: Editor, options?: {
+    dontClearOverrides: boolean;
+}) => void;
+export default adjustEditorThemeForContrast;

package/dist/mjs/util/adjustEditorThemeForContrast.mjs

@@ -0,0 +1,126 @@
+import { Color4, Vec3 } from '@js-draw/math';
+/**
+ * Adjusts the current editor theme such that colors have appropriate contrast.
+ *
+ * As this method overrides CSS variables using the `.style` property,
+ * **assumes** all original theme variables are set using CSS and not the `.style` property.
+ *
+ * If the editor changes theme in response to the system theme, this method should be
+ * called whenever the system theme changes (e.g. by using [the `matchMedia`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia)
+ * method).
+ *
+ * @example
+ * ```ts,runnable
+ * import { Editor, adjustEditorThemeForContrast } from 'js-draw';
+ *
+ * const editor = new Editor(document.body);
+ * editor.addToolbar();
+ *
+ * const css = `
+ *   :root .imageEditorContainer {
+ *     --background-color-1: #ffff77;
+ *     --foreground-color-1: #fff;
+ *     --background-color-2: #ffff99;
+ *     --foreground-color-2: #ffff88;
+ *     --background-color-3: #ddffff;
+ *     --foreground-color-3: #eeffff;
+ *     --selection-background-color: #9f7;
+ *     --selection-foreground-color: #98f;
+ *   }
+ *
+ *   @media screen and (prefers-color-scheme: dark) {
+ *     :root .imageEditorContainer {
+ *       --background-color-1: black;
+ *     }
+ *   }
+ * `;
+ * editor.addStyleSheet(css);
+ *
+ * adjustEditorThemeForContrast(editor);
+ *
+ * // Because adjustEditorThemeForContrast overrides the current theme, it should be called again
+ * // to allow the editor to switch between light/dark themes.
+ * window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+ *   adjustEditorThemeForContrast(editor);
+ * });
+ *
+ * window.matchMedia('print').addEventListener('change', () => {
+ *   adjustEditorThemeForContrast(editor);
+ * });
+ * ```
+ */
+const adjustEditorThemeForContrast = (editor, options) => {
+    const editorElem = editor.getRootElement();
+    // Each set of entries in colorPairs should resolve to colors with sufficient
+    // contrast.
+    const colorPairs = [
+        ['--background-color-1', '--foreground-color-1', true, true],
+        ['--background-color-2', '--foreground-color-2', true, true],
+        ['--background-color-3', '--foreground-color-3', true, true],
+        ['--selection-background-color', '--selection-foreground-color', false, true],
+    ];
+    if (!options?.dontClearOverrides) {
+        // Clear any overrides
+        for (const [backgroundVar, foregroundVar] of colorPairs) {
+            editorElem.style.setProperty(backgroundVar, null);
+            editorElem.style.setProperty(foregroundVar, null);
+        }
+    }
+    const styles = getComputedStyle(editorElem);
+    const updatedColors = Object.create(null);
+    const adjustVariablesForContrast = (var1, var2, minContrast, 
+    // true if the variable can be updated
+    updateVar1, updateVar2) => {
+        // Fetch from updatedColors if available -- styles isn't updated dynamically.
+        let color1 = updatedColors[var1] ? updatedColors[var1] : Color4.fromString(styles.getPropertyValue(var1));
+        let color2 = updatedColors[var2] ? updatedColors[var2] : Color4.fromString(styles.getPropertyValue(var2));
+        // Ensure that color1 has the lesser luminance
+        if (color1.relativeLuminance() < color2.relativeLuminance()) {
+            const tmp = color1;
+            color1 = color2;
+            color2 = tmp;
+            const oldVar2 = var2;
+            var2 = var1;
+            var1 = oldVar2;
+            const oldUpdateVar1 = updateVar1;
+            updateVar1 = updateVar2;
+            updateVar2 = oldUpdateVar1;
+        }
+        let colorsUpdated = false;
+        let currentContrast = Color4.contrastRatio(color1, color2);
+        let iterations = 0;
+        // Step the brightness of color1 and color2 in different directions while necessary
+        while (currentContrast < minContrast && iterations < 8) {
+            const step = Vec3.of(0.1, 0.1, 0.1);
+            if (updateVar1) {
+                if (color2.eq(Color4.white) && !updateVar2) {
+                    color2 = Color4.black;
+                }
+                color1 = Color4.fromRGBVector(color1.rgb.plus(step));
+            }
+            if (updateVar2) {
+                if (color2.eq(Color4.black) && !updateVar1) {
+                    color2 = Color4.white;
+                }
+                color2 = Color4.fromRGBVector(color2.rgb.minus(step));
+            }
+            currentContrast = Color4.contrastRatio(color1, color2);
+            colorsUpdated = true;
+            iterations++;
+        }
+        // Update the CSS variables if necessary
+        if (colorsUpdated) {
+            editorElem.style.setProperty(var1, color1.toHexString());
+            editorElem.style.setProperty(var2, color2.toHexString());
+            updatedColors[var1] = color1;
+            updatedColors[var2] = color2;
+        }
+    };
+    // Also adjust the selection background
+    adjustVariablesForContrast('--selection-background-color', '--background-color-2', 1.29, true, false);
+    for (const [backgroundVar, foregroundVar, updateBackground, updateForeground] of colorPairs) {
+        const minContrast = 4.5;
+        adjustVariablesForContrast(backgroundVar, foregroundVar, minContrast, updateBackground, updateForeground);
+    }
+};
+export default adjustEditorThemeForContrast;

package/dist/mjs/util/adjustEditorThemeForContrast.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/util/lib.d.ts

@@ -0,0 +1 @@
+export { default as adjustEditorThemeForContrast } from './adjustEditorThemeForContrast';

package/dist/mjs/util/lib.mjs

@@ -0,0 +1 @@
+export  { default as adjustEditorThemeForContrast }  from './adjustEditorThemeForContrast.mjs';

package/dist/mjs/version.mjs

@@ -1,3 +1,3 @@
 export default {
-    number: '1.1.0',
+    number: '1.2.1',
 };