@oneuptime/common 14.0.10 → 14.0.12

package/UI/Components/ActionCard/ActionCard.tsx

@@ -18,6 +18,12 @@ export interface ComponentProps {
   actions: Array<ConfirmAction>;
 }
 
+const DESTRUCTIVE_ACTION_STYLES: Array<ButtonStyleType> = [
+  ButtonStyleType.DANGER,
+  ButtonStyleType.DANGER_OUTLINE,
+  ButtonStyleType.HOVER_DANGER_OUTLINE,
+];
+
 const ActionCard: (props: ComponentProps) => ReactElement = (
   props: ComponentProps,
 ): ReactElement => {
@@ -33,7 +39,11 @@ const ActionCard: (props: ComponentProps) => ReactElement = (
         buttons={props.actions.map((action: ConfirmAction) => {
           return {
             title: action.actionName,
-            buttonStyle: action.actionButtonStyle || ButtonStyleType.NORMAL,
+            /*
+             * `??`: ButtonStyleType.PRIMARY is 0, and `||` turned an action
+             * its author marked PRIMARY into a plain button.
+             */
+            buttonStyle: action.actionButtonStyle ?? ButtonStyleType.NORMAL,
             onClick: () => {
               setCurrentAction(action);
             },
@@ -51,7 +61,17 @@ const ActionCard: (props: ComponentProps) => ReactElement = (
             currentAction.onConfirmAction();
             setCurrentAction(undefined);
           }}
-          submitButtonText={`Confirm`}
+          /*
+           * The button says what it does, and is the dialog's one primary
+           * action - red when the action it confirms destroys something.
+           */
+          submitButtonText={currentAction.actionName}
+          submitButtonType={
+            currentAction.actionButtonStyle !== undefined &&
+            DESTRUCTIVE_ACTION_STYLES.includes(currentAction.actionButtonStyle)
+              ? ButtonStyleType.DANGER
+              : ButtonStyleType.PRIMARY
+          }
           onClose={() => {
             setCurrentAction(undefined);
           }}

package/UI/Components/BulkUpdate/BulkLabelActions.tsx

@@ -505,6 +505,7 @@ function useBulkLabelActions<T extends BaseModel>(
             isLoading={isLoadingRemoveLabels}
             onClose={closeRemoveModal}
             submitButtonText="Remove Labels"
+            submitButtonStyleType={ButtonStyleType.DANGER}
             onSubmit={async (formData: { labelIds: Array<string> }) => {
               await applyLabels(formData.labelIds || [], "remove");
             }}

package/UI/Components/BulkUpdate/BulkOwnerActions.tsx

@@ -524,6 +524,7 @@ function useBulkOwnerActions<T extends BaseModel>(
             setBulkActionProps(null);
           }}
           submitButtonText="Remove Owner"
+          submitButtonStyleType={ButtonStyleType.DANGER}
           onSubmit={async (formData: { ownerKeys: Array<string> }) => {
             await applyOwners(formData.ownerKeys || [], "remove");
           }}

package/UI/Components/BulkUpdate/BulkUpdateForm.tsx

@@ -55,6 +55,11 @@ export interface BulkActionButtonSchema<T extends GenericObject> {
   shortcutKey?: undefined | ShortcutKey;
   confirmMessage?: ((items: Array<T>) => string) | undefined;
   confirmTitle?: ((items: Array<T>) => string) | undefined;
+  /*
+   * Drawn under confirmMessage: which records the action is about to touch,
+   * where the count alone does not say (DeleteItemNames lists them).
+   */
+  confirmDetails?: ((items: Array<T>) => ReactElement | undefined) | undefined;
   confirmButtonStyleType?: ButtonStyleType;
 }
 
@@ -173,6 +178,7 @@ const BulkUpdateForm: <T extends GenericObject>(
           ? button.confirmTitle(props.selectedItems)
           : "Confirm",
         description: button.confirmMessage(props.selectedItems),
+        children: button.confirmDetails?.(props.selectedItems),
         submitButtonType: button.confirmButtonStyleType,
         submitButtonText: button.title,
         onClose: () => {

package/UI/Components/Button/Button.tsx

@@ -133,7 +133,15 @@ const Button: FunctionComponent<ComponentProps> = ({
     }
   };
 
-  let buttonStyleCssClass: string = `inline-flex w-full justify-center rounded-md border border-gray-300 bg-white text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 md:mt-0 md:ml-3 md:w-auto md:text-sm`;
+  /*
+   * The focus ring is for keyboard focus only (focus-visible). Drawn on every
+   * :focus it also ringed whatever a script focused: a dialog opened with a
+   * click put its initial focus on Cancel, and the ring made Cancel the most
+   * prominent button on the dialog - a plain button wearing the highlight the
+   * action should have. The browser still draws it for anyone moving through
+   * the page with the keyboard, which is who it is for.
+   */
+  let buttonStyleCssClass: string = `inline-flex w-full justify-center rounded-md border border-gray-300 bg-white text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 md:mt-0 md:ml-3 md:w-auto md:text-sm`;
   let loadingIconClassName: string = `w-5 h-5 mr-3 -ml-1 mr-1 animate-spin`;
   let iconClassName: string = `w-5 h-5`;
 
@@ -165,39 +173,39 @@ const Button: FunctionComponent<ComponentProps> = ({
   if (buttonStyle === ButtonStyleType.DANGER) {
     buttonStyleCssClass = `inline-flex w-full justify-center rounded-md border border-transparent bg-red-600 text-base font-medium text-white shadow-sm ${
       disabled ? "" : "hover:bg-red-700"
-    } focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 md:ml-3 md:w-auto md:text-sm`;
+    } focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2 md:ml-3 md:w-auto md:text-sm`;
   }
 
   if (buttonStyle === ButtonStyleType.DANGER_OUTLINE) {
     buttonStyleCssClass = `inline-flex w-full justify-center rounded-md border border-red-700 bg-white text-base font-medium text-red-700 shadow-sm ${
       disabled ? "" : "hover:bg-red-50"
-    } focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 md:mt-0 md:ml-3 md:w-auto md:text-sm`;
+    } focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2 md:mt-0 md:ml-3 md:w-auto md:text-sm`;
   }
 
   if (buttonStyle === ButtonStyleType.PRIMARY) {
     loadingIconClassName += ` text-indigo-100`;
     buttonStyleCssClass = `inline-flex w-full justify-center rounded-md border border-transparent ${
       disabled ? "bg-indigo-300" : "bg-indigo-600 hover:bg-indigo-700"
-    } text-base font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 md:ml-3 md:w-auto md:text-sm`;
+    } text-base font-medium text-white shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 md:ml-3 md:w-auto md:text-sm`;
   }
 
   if (buttonStyle === ButtonStyleType.SECONDARY) {
     loadingIconClassName += ` text-indigo-500`;
     buttonStyleCssClass = `inline-flex rounded-md border border-transparent ${
       disabled ? "bg-indigo-300" : "bg-indigo-100 hover:bg-indigo-200"
-    } text-sm font-medium text-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2`;
+    } text-sm font-medium text-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2`;
   }
 
   if (buttonStyle === ButtonStyleType.ICON_LIGHT) {
     buttonStyleCssClass = `rounded-md bg-white text-gray-400 ${
       disabled ? "" : "hover:text-gray-500"
-    }  focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2`;
+    }  focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2`;
   }
 
   if (buttonStyle === ButtonStyleType.ICON) {
     buttonStyleCssClass = `rounded-md bg-transparent text-gray-600 ${
       disabled ? "" : "hover:text-gray-900"
-    }  focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2`;
+    }  focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2`;
   }
 
   if (
@@ -224,25 +232,25 @@ const Button: FunctionComponent<ComponentProps> = ({
   if (buttonStyle === ButtonStyleType.SUCCESS) {
     buttonStyleCssClass = `inline-flex w-full justify-center rounded-md border border-transparent bg-green-600 text-base font-medium text-white shadow-sm ${
       disabled ? "" : "hover:bg-green-700"
-    }  focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 md:ml-3 md:w-auto md:text-sm`;
+    }  focus:outline-none focus-visible:ring-2 focus-visible:ring-green-500 focus-visible:ring-offset-2 md:ml-3 md:w-auto md:text-sm`;
   }
 
   if (buttonStyle === ButtonStyleType.SUCCESS_OUTLINE) {
     buttonStyleCssClass = `inline-flex w-full justify-center rounded-md border border-green-700 bg-white text-base font-medium text-green-700 shadow-sm ${
       disabled ? "" : "hover:bg-green-50"
-    }  focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 md:mt-0 md:ml-3 md:w-auto md:text-sm`;
+    }  focus:outline-none focus-visible:ring-2 focus-visible:ring-green-500 focus-visible:ring-offset-2 md:mt-0 md:ml-3 md:w-auto md:text-sm`;
   }
 
   if (buttonStyle === ButtonStyleType.WARNING) {
     buttonStyleCssClass = `inline-flex w-full justify-center rounded-md border border-transparent bg-yellow-600 text-base font-medium text-white shadow-sm  ${
       disabled ? "" : "hover:bg-yellow-700"
-    }  focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 md:ml-3 md:w-auto md:text-sm`;
+    }  focus:outline-none focus-visible:ring-2 focus-visible:ring-yellow-500 focus-visible:ring-offset-2 md:ml-3 md:w-auto md:text-sm`;
   }
 
   if (buttonStyle === ButtonStyleType.WARNING_OUTLINE) {
     buttonStyleCssClass = `inline-flex w-full justify-center rounded-md border border-yellow-700 bg-white text-base font-medium text-yellow-700 shadow-sm ${
       disabled ? "" : "hover:bg-yellow-50"
-    }   focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 md:mt-0 md:ml-3 md:w-auto md:text-sm`;
+    }   focus:outline-none focus-visible:ring-2 focus-visible:ring-yellow-500 focus-visible:ring-offset-2 md:mt-0 md:ml-3 md:w-auto md:text-sm`;
   }
 
   // Center the icon against both desktop and taller mobile label lines.

package/UI/Components/Card/Card.tsx

@@ -30,8 +30,16 @@ export interface CardButtonSchema {
  * word or two wide beside the buttons, so "stacked" gives the title and
  * description the whole width and moves the actions onto their own row
  * underneath.
+ *
+ * "inline" keeps what is on the right beside the title at any width they
+ * both fit in, phones included, and is for something small such as a status
+ * badge. Below md the default layout always drops it under the title and
+ * centres it, which suits a row of buttons but leaves a badge alone in the
+ * middle of a phone's card; from md up it also holds it 12px short of the
+ * card's right edge. Inline ends it at the edge the card's content ends at,
+ * and when the two do not fit it goes under the title, at its left edge.
  */
-export type CardHeaderLayout = "default" | "stacked";
+export type CardHeaderLayout = "default" | "stacked" | "inline";
 
 export interface ComponentProps {
   title?: string | ReactElement | undefined;
@@ -91,25 +99,31 @@ const Card: FunctionComponent<ComponentProps> = (
     );
   };
 
+  const titleElement: ReactElement | false | "" | undefined =
+    translatedTitle && (
+      <h2
+        data-testid="card-details-heading"
+        id="card-details-heading"
+        className="text-lg font-semibold leading-6 text-gray-900"
+      >
+        {translatedTitle}
+      </h2>
+    );
+
+  const descriptionElement: ReactElement | false | "" | undefined =
+    translatedDescription && (
+      <p
+        data-testid="card-description"
+        className="mt-1.5 text-sm text-gray-500 w-full max-md:hidden md:block leading-relaxed"
+      >
+        {translatedDescription}
+      </p>
+    );
+
   const titleAndDescription: ReactElement = (
     <React.Fragment>
-      {translatedTitle && (
-        <h2
-          data-testid="card-details-heading"
-          id="card-details-heading"
-          className="text-lg font-semibold leading-6 text-gray-900"
-        >
-          {translatedTitle}
-        </h2>
-      )}
-      {translatedDescription && (
-        <p
-          data-testid="card-description"
-          className="mt-1.5 text-sm text-gray-500 w-full max-md:hidden md:block leading-relaxed"
-        >
-          {translatedDescription}
-        </p>
-      )}
+      {titleElement}
+      {descriptionElement}
     </React.Fragment>
   );
 
@@ -136,6 +150,33 @@ const Card: FunctionComponent<ComponentProps> = (
     </div>
   );
 
+  /*
+   * The title and what is on the right share one row that wraps: beside
+   * each other while both fit, and the right element under the title, at
+   * its left edge, when they do not (a long badge on a phone). The title is
+   * never squeezed into two lines to make room. The description is not part
+   * of that row, so its length cannot push the right element off it.
+   */
+  const inlineHeader: ReactElement = (
+    <div data-testid="card-header" data-header-layout="inline">
+      <div className="flex flex-wrap items-start justify-between gap-x-4 gap-y-2">
+        {titleElement}
+        {(props.rightElement || hasButtons) && (
+          <div
+            data-testid="card-header-actions"
+            className="flex flex-wrap items-center gap-2 [&_button]:ml-0 [&_button]:md:ml-0"
+          >
+            {props.rightElement && (
+              <div className="flex items-center">{props.rightElement}</div>
+            )}
+            {hasButtons && renderButtons()}
+          </div>
+        )}
+      </div>
+      {descriptionElement}
+    </div>
+  );
+
   const defaultHeader: ReactElement = (
     <div className="flex flex-col md:flex-row md:justify-between md:items-start">
       <div
@@ -163,7 +204,11 @@ const Card: FunctionComponent<ComponentProps> = (
       <div data-testid="card" className={`mb-5 ${props.className || ""}`}>
         <div className="bg-white border border-gray-200 rounded-xl shadow-sm overflow-visible">
           <div className="py-6 px-5 md:px-6">
-            {isStacked ? stackedHeader : defaultHeader}
+            {isStacked
+              ? stackedHeader
+              : props.headerLayout === "inline"
+                ? inlineHeader
+                : defaultHeader}
 
             {props.children && (
               <div className={props.bodyClassName || "mt-4"}>

package/UI/Components/Charts/ChartGroup/ChartGroup.tsx

@@ -276,10 +276,7 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
         onClose={() => {
           setMetricInfoModalChart(null);
         }}
-        onSubmit={() => {
-          setMetricInfoModalChart(null);
-        }}
-        submitButtonText="Close"
+        closeButtonText="Close"
         modalWidth={ModalWidth.Normal}
       >
         <div className="space-y-4">

package/UI/Components/CodeEditor/CodeEditor.css

@@ -0,0 +1,379 @@
+/*
+ * CodeEditor: a transparent <textarea> laid exactly over a highlighted copy
+ * of its own text.
+ *
+ * The textarea does all the editing - caret, selection, IME, spell check,
+ * undo, the context menu, mobile keyboards - and the layer under it only
+ * paints colours. That only works while every glyph of the two lands in the
+ * same place, so both layers take ALL of their text metrics from
+ * .ou-code-editor__layer below and nothing else may set a font property on
+ * either. CodeEditor.tsx does arithmetic with the line height and padding;
+ * Tests/UI/Components/CodeEditor/CodeEditorStyles.test.ts holds the two
+ * files to the same numbers.
+ */
+
+.ou-code-editor {
+  --ou-code-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    "Liberation Mono", "Courier New", monospace;
+  --ou-code-font-size: 13px;
+  --ou-code-line-height: 20px;
+  --ou-code-padding-y: 10px;
+  --ou-code-padding-x: 12px;
+
+  --ou-code-text: #1f2937;
+  --ou-code-caret: #111827;
+  --ou-code-selection: rgb(99 102 241 / 24%);
+  --ou-code-placeholder: #9ca3af;
+  --ou-code-active-line: rgb(99 102 241 / 6%);
+  --ou-code-gutter-background: #f9fafb;
+  --ou-code-gutter-border: #f3f4f6;
+  --ou-code-gutter-text: #9ca3af;
+  --ou-code-gutter-active: #4b5563;
+  --ou-code-gutter-error-text: #b91c1c;
+  --ou-code-gutter-error-background: #fee2e2;
+  --ou-code-tab: rgb(220 38 38 / 12%);
+  --ou-code-scrollbar: #d1d5db;
+
+  /* Tokens: every colour clears 4.5:1 on white (WCAG 1.4.3). */
+  --ou-code-token-keyword: #7c3aed;
+  --ou-code-token-string: #047857;
+  --ou-code-token-number: #b45309;
+  --ou-code-token-property: #1d4ed8;
+  --ou-code-token-comment: #6b7280;
+  --ou-code-token-function: #0e7490;
+  --ou-code-token-tag: #be123c;
+  --ou-code-token-variable: #c2410c;
+  --ou-code-token-meta: #4b5563;
+  --ou-code-token-regexp: #be185d;
+}
+
+/*
+ * The dark theme is a class on <html> (Utils/Theme.ts), not a media query:
+ * a user who picked light keeps light on a dark OS.
+ */
+html.dark .ou-code-editor {
+  --ou-code-text: #e2e8f0;
+  --ou-code-caret: #f8fafc;
+  --ou-code-selection: rgb(129 140 248 / 32%);
+  --ou-code-placeholder: #64748b;
+  --ou-code-active-line: rgb(148 163 184 / 8%);
+  --ou-code-gutter-background: #1b2536;
+  --ou-code-gutter-border: #273449;
+  --ou-code-gutter-text: #64748b;
+  --ou-code-gutter-active: #cbd5e1;
+  --ou-code-gutter-error-text: #fca5a5;
+  --ou-code-gutter-error-background: rgb(239 68 68 / 18%);
+  --ou-code-tab: rgb(248 113 113 / 18%);
+  --ou-code-scrollbar: #475569;
+
+  --ou-code-token-keyword: #c4b5fd;
+  --ou-code-token-string: #6ee7b7;
+  --ou-code-token-number: #fcd34d;
+  --ou-code-token-property: #93c5fd;
+  --ou-code-token-comment: #94a3b8;
+  --ou-code-token-function: #67e8f9;
+  --ou-code-token-tag: #fda4af;
+  --ou-code-token-variable: #fdba74;
+  --ou-code-token-meta: #cbd5e1;
+  --ou-code-token-regexp: #f9a8d4;
+}
+
+.ou-code-editor__scroller {
+  position: relative;
+  overflow: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--ou-code-scrollbar) transparent;
+}
+
+.ou-code-editor__content {
+  display: flex;
+  align-items: stretch;
+  min-width: 100%;
+  width: max-content;
+  min-height: 100%;
+}
+
+.ou-code-editor--wrap .ou-code-editor__content {
+  width: 100%;
+}
+
+.ou-code-editor__gutter {
+  position: sticky;
+  left: 0;
+  z-index: 2;
+  flex: none;
+  box-sizing: border-box;
+  padding: var(--ou-code-padding-y) 10px var(--ou-code-padding-y) 12px;
+  border-right: 1px solid var(--ou-code-gutter-border);
+  background: var(--ou-code-gutter-background);
+  color: var(--ou-code-gutter-text);
+  font-family: var(--ou-code-font);
+  font-size: 12px;
+  line-height: var(--ou-code-line-height);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+  white-space: pre;
+  cursor: default;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.ou-code-editor__gutter-active {
+  color: var(--ou-code-gutter-active);
+}
+
+.ou-code-editor__gutter-error {
+  border-radius: 3px;
+  margin-right: -4px;
+  padding-right: 4px;
+  background: var(--ou-code-gutter-error-background);
+  color: var(--ou-code-gutter-error-text);
+}
+
+.ou-code-editor__code {
+  position: relative;
+  flex: 1 0 auto;
+  min-width: 0;
+}
+
+/* Wrapped text takes the width it is given instead of setting it. */
+.ou-code-editor--wrap .ou-code-editor__code {
+  flex: 1 1 0%;
+}
+
+/* A run of digits the caret arithmetic measures the character width from. */
+.ou-code-editor__measure {
+  position: absolute;
+  top: 0;
+  left: 0;
+  visibility: hidden;
+  pointer-events: none;
+  white-space: pre;
+  font-family: var(--ou-code-font);
+  font-size: var(--ou-code-font-size);
+  font-variant-ligatures: none;
+  letter-spacing: normal;
+}
+
+.ou-code-editor__active-line {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: var(--ou-code-line-height);
+  background: var(--ou-code-active-line);
+  pointer-events: none;
+}
+
+.ou-code-editor__layer {
+  box-sizing: border-box;
+  display: block;
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+  padding: var(--ou-code-padding-y) var(--ou-code-padding-x);
+  font-family: var(--ou-code-font);
+  font-size: var(--ou-code-font-size);
+  font-weight: 400;
+  font-style: normal;
+  font-variant-ligatures: none;
+  font-feature-settings: normal;
+  line-height: var(--ou-code-line-height);
+  letter-spacing: normal;
+  word-spacing: normal;
+  text-indent: 0;
+  text-transform: none;
+  text-align: left;
+  -moz-tab-size: 4;
+  tab-size: 4;
+  white-space: pre;
+  overflow-wrap: normal;
+  word-break: normal;
+}
+
+.ou-code-editor--wrap .ou-code-editor__layer {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.ou-code-editor__highlight {
+  position: relative;
+  pointer-events: none;
+  color: var(--ou-code-text);
+  background: transparent;
+}
+
+/*
+ * Room past the longest line for the caret. The textarea is exactly as wide
+ * as this layer, so without it the caret at the end of the longest line
+ * would scroll the textarea's own content by a few pixels and every glyph
+ * would drift off the colours under it. Wrapped layers must stay identical
+ * (padding decides where a line wraps), and never need it.
+ */
+.ou-code-editor:not(.ou-code-editor--wrap) .ou-code-editor__highlight {
+  padding-right: calc(var(--ou-code-padding-x) + 32px);
+}
+
+/*
+ * Token spans may colour text, never reshape it. Every frontend's index.ejs
+ * sets `* { font-family: Inter, ... }`, and a rule that matches an element
+ * beats what it inherits: without this each highlighted token (and each
+ * marked line number) would switch to a proportional font and slide off the
+ * textarea's glyphs. A class selector outranks `*`.
+ */
+.ou-code-editor__highlight *,
+.ou-code-editor__gutter * {
+  font-family: inherit;
+  font-size: inherit;
+  font-style: inherit;
+  font-weight: inherit;
+  font-variant-ligatures: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+}
+
+.ou-code-editor__placeholder {
+  color: var(--ou-code-placeholder);
+}
+
+/* An example keeps its colours, faded: it is code, but not yours yet. */
+.ou-code-editor__example {
+  opacity: 0.55;
+}
+
+.ou-code-editor__input {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  resize: none;
+  overflow: hidden;
+  outline: none;
+  box-shadow: none;
+  background: transparent;
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+  caret-color: var(--ou-code-caret);
+  -webkit-font-smoothing: antialiased;
+}
+
+.ou-code-editor__input:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+/*
+ * The placeholder attribute is kept for assistive technology; the layer
+ * underneath draws it, highlighted when it is an example.
+ */
+.ou-code-editor__input::placeholder {
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+  opacity: 0;
+}
+
+/*
+ * The selection paints over transparent text. Theme.css gives html.dark a
+ * ::selection with white text, which here would draw a second copy of every
+ * selected glyph on top of the highlighted one.
+ */
+.ou-code-editor .ou-code-editor__input::selection,
+html.dark .ou-code-editor .ou-code-editor__input::selection {
+  background: var(--ou-code-selection);
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+}
+
+.ou-code-editor--readonly .ou-code-editor__input {
+  caret-color: transparent;
+}
+
+.ou-code-editor__tab {
+  border-radius: 2px;
+  background: var(--ou-code-tab);
+}
+
+/*
+ * Token colours. Scoped under the editor so they outrank CodeBlock's global
+ * a11y-dark theme, which colours the same .hljs-* classes for a dark panel
+ * and would be unreadable on a white one.
+ */
+.ou-code-editor .hljs-keyword,
+.ou-code-editor .hljs-selector-tag,
+.ou-code-editor .hljs-meta-keyword,
+.ou-code-editor .hljs-doctag {
+  color: var(--ou-code-token-keyword);
+}
+
+.ou-code-editor .hljs-string,
+.ou-code-editor .hljs-meta-string,
+.ou-code-editor .hljs-addition,
+.ou-code-editor .hljs-code {
+  color: var(--ou-code-token-string);
+}
+
+.ou-code-editor .hljs-number,
+.ou-code-editor .hljs-literal,
+.ou-code-editor .hljs-symbol {
+  color: var(--ou-code-token-number);
+}
+
+.ou-code-editor .hljs-attr,
+.ou-code-editor .hljs-attribute,
+.ou-code-editor .hljs-property,
+.ou-code-editor .hljs-section,
+.ou-code-editor .hljs-selector-attr,
+.ou-code-editor .hljs-selector-pseudo {
+  color: var(--ou-code-token-property);
+}
+
+.ou-code-editor .hljs-comment,
+.ou-code-editor .hljs-quote {
+  color: var(--ou-code-token-comment);
+}
+
+.ou-code-editor .hljs-title,
+.ou-code-editor .hljs-built_in,
+.ou-code-editor .hljs-builtin-name,
+.ou-code-editor .hljs-type,
+.ou-code-editor .hljs-class {
+  color: var(--ou-code-token-function);
+}
+
+.ou-code-editor .hljs-tag,
+.ou-code-editor .hljs-name,
+.ou-code-editor .hljs-selector-id,
+.ou-code-editor .hljs-selector-class,
+.ou-code-editor .hljs-deletion {
+  color: var(--ou-code-token-tag);
+}
+
+.ou-code-editor .hljs-variable,
+.ou-code-editor .hljs-template-variable,
+.ou-code-editor .hljs-template-tag,
+.ou-code-editor .hljs-params,
+.ou-code-editor .hljs-bullet,
+.ou-code-editor .hljs-link {
+  color: var(--ou-code-token-variable);
+}
+
+.ou-code-editor .hljs-meta,
+.ou-code-editor .hljs-subst,
+.ou-code-editor .hljs-formula,
+.ou-code-editor .hljs-function {
+  color: var(--ou-code-token-meta);
+}
+
+.ou-code-editor .hljs-regexp {
+  color: var(--ou-code-token-regexp);
+}
+
+/* Markdown's emphasis would change glyph widths; mark it without doing so. */
+.ou-code-editor .hljs-emphasis,
+.ou-code-editor .hljs-strong {
+  color: var(--ou-code-token-keyword);
+}
+
+.ou-code-editor .hljs-link {
+  text-decoration: underline;
+}