@reviewflow/ui 6.23.0 → 6.25.0

package/src/components/pull-request-diff-viewer.tsx

@@ -18,6 +18,7 @@ import type {
   PullRequestRef,
   PullRequestThread,
 } from "@reviewflow/sdk";
+import { pluralOf } from "@reviewflow/sdk";
 import {
   AccentScope,
   Badge,
@@ -48,11 +49,16 @@ import type { PullRequestDataSource } from "../dataSource.ts";
 import { usePullRequestDataSource } from "../dataSource.ts";
 import type { PendingComment } from "../services/PullRequestReviewDraftProvider.tsx";
 import { usePullRequestReviewDraft } from "../services/PullRequestReviewDraftProvider.tsx";
+import { diffFontCSS } from "./branch-diff/diff-font.ts";
 import type { DiffTheme } from "./branch-diff/diff-themes.ts";
-import { diffThemeNames } from "./branch-diff/diff-themes.ts";
+import {
+  changeBackgroundCSS,
+  diffThemeNames,
+} from "./branch-diff/diff-themes.ts";
 // metro picks the .web.tsx variant only for a specifier without extension
 /* eslint-disable-next-line import-x/no-unresolved */ // oxlint-disable-next-line import/extensions
 import { DiffWorkerPool } from "./branch-diff/diff-worker-pool";
+import { reviewflowSelectionColors } from "./branch-diff/reviewflow-diff-selection.ts";
 import type { CommitFileAnchoring } from "./pull-request-commit-files.ts";
 import type {
   AnnotationGroup,
@@ -70,7 +76,6 @@ import type { PullRequestMovedOn } from "./pull-request-diff-data.ts";
 import {
   countImpacts,
   maxImporterNames,
-  pluralOf,
   usageLabel,
 } from "./pull-request-diff-impacts.ts";
 import type { DiffFileHighlight } from "./pull-request-diff-jump.ts";
@@ -214,8 +219,7 @@ const useStableAnnotations = (
 /** Why a thread is listed above its file rather than placed on a line. */
 type UnplacedKind = "changedSince" | "outdated" | "whitespace";
 
-const commentsText = (count: number): string =>
-  `${String(count)} comment${count === 1 ? "" : "s"}`;
+const commentsText = (count: number): string => pluralOf(count, "comment");
 
 const unplacedLabel = (kind: UnplacedKind, count: number): string => {
   if (kind === "changedSince") {
@@ -224,7 +228,7 @@ const unplacedLabel = (kind: UnplacedKind, count: number): string => {
   if (kind === "whitespace") {
     return `${commentsText(count)} on lines hidden with whitespace changes`;
   }
-  return `${String(count)} outdated comment${count === 1 ? "" : "s"}`;
+  return pluralOf(count, "outdated comment");
 };
 
 const unplacedLineText = (
@@ -429,6 +433,13 @@ const fileRadius = "1rem";
  */
 const roundedFile = `:host { border-radius: ${fileRadius}; overflow: clip; box-shadow: ${surfaceShadow}; }`;
 
+/** The reviewflow theme's selected lines mix with a lighter blue than its modified color. */
+const selectionCSS = (theme: DiffTheme, mode: "dark" | "light"): string => {
+  if (theme !== "reviewflow") return "";
+  const color = reviewflowSelectionColors[mode];
+  return `:host { --diffs-bg-selection-override: ${color}; --diffs-bg-selection-number-override: ${color}; }`;
+};
+
 const pierreScrollbars =
   "@supports not (-moz-appearance: none) { [data-code] { scrollbar-width: auto; scrollbar-color: auto; } }";
 
@@ -447,6 +458,7 @@ interface DiffFileProps {
   diffStyle: DiffStyle;
   theme: DiffTheme;
   themeType: "dark" | "light";
+  fontFamily: string | null;
   wordWrap: boolean;
   stickyTop: number;
   collapsed: boolean;
@@ -635,6 +647,7 @@ function DiffFile({
   diffStyle,
   theme,
   themeType,
+  fontFamily,
   wordWrap,
   stickyTop,
   collapsed,
@@ -723,7 +736,7 @@ function DiffFile({
           overflow: wordWrap ? "wrap" : "scroll",
           collapsed,
           stickyHeader: true,
-          unsafeCSS: `${stickyHeaderBelow(stickyTop)} ${headerInset} ${roundedFile} ${pierreScrollbars} ${headerHighlight(highlight, collapsed)}`,
+          unsafeCSS: `${stickyHeaderBelow(stickyTop)} ${headerInset} ${roundedFile} ${pierreScrollbars} ${diffFontCSS(fontFamily)} ${selectionCSS(theme, themeType)} ${changeBackgroundCSS(theme)} ${headerHighlight(highlight, collapsed)}`,
           loadDiffFiles: loadFiles,
           enableGutterUtility: commentable,
           onGutterUtilityClick: commentable ? onGutterUtilityClick : undefined,
@@ -1019,6 +1032,7 @@ interface ReviewedFilesProps {
   diffStyle: DiffStyle;
   theme: DiffTheme;
   themeType: "dark" | "light";
+  fontFamily: string | null;
   wordWrap: boolean;
   stickyTop: number;
   collapse: PullRequestCollapse;
@@ -1035,6 +1049,7 @@ function ReviewedFiles({
   diffStyle,
   theme,
   themeType,
+  fontFamily,
   wordWrap,
   stickyTop,
   collapse,
@@ -1175,6 +1190,7 @@ function ReviewedFiles({
               diffStyle={diffStyle}
               theme={theme}
               themeType={themeType}
+              fontFamily={fontFamily}
               wordWrap={wordWrap}
               stickyTop={stickyTop}
               loadFiles={loadFiles}
@@ -1250,6 +1266,7 @@ interface PullRequestDiffViewerProps {
   diffStyle: DiffStyle;
   theme: DiffTheme;
   themeType: "dark" | "light";
+  fontFamily: string | null;
   wordWrap: boolean;
   /** where a file header sticks: the height of the toolbar stuck above it */
   stickyTop: number;
@@ -1283,6 +1300,7 @@ function PullRequestDiffViewer({
   diffStyle,
   theme,
   themeType,
+  fontFamily,
   wordWrap,
   stickyTop,
   collapse,
@@ -1335,6 +1353,7 @@ function PullRequestDiffViewer({
               diffStyle={diffStyle}
               theme={theme}
               themeType={themeType}
+              fontFamily={fontFamily}
               wordWrap={wordWrap}
               stickyTop={stickyTop}
               loadFiles={loadFiles}
@@ -1358,6 +1377,7 @@ function PullRequestDiffViewer({
           diffStyle={diffStyle}
           theme={theme}
           themeType={themeType}
+          fontFamily={fontFamily}
           wordWrap={wordWrap}
           stickyTop={stickyTop}
           collapse={collapse}

package/src/components/pull-request-files.tsx

@@ -6,11 +6,10 @@ import type {
   PullRequestThread,
   PullRequestViewerLastReview,
 } from "@reviewflow/sdk";
-import { formatRelativeDate } from "@reviewflow/sdk";
+import { formatRelativeDate, pluralOf } from "@reviewflow/sdk";
 import {
   Button,
   Code,
-  IconButton,
   InfoMessage,
   Menu,
   MenuItem,
@@ -54,6 +53,7 @@ import {
   PullRequestPartPending,
   PullRequestPartReading,
 } from "./pull-request-part-notice.tsx";
+import { TooltipIconButton } from "./tooltip-icon-button.tsx";
 
 type Scope = "all" | "since";
 
@@ -130,7 +130,7 @@ function ByCommitButton({
   onToggle,
 }: ByCommitButtonProps): ReactNode {
   return (
-    <IconButton
+    <TooltipIconButton
       icon={<GitCommitRegularIcon />}
       size="sm"
       accent={byCommit ? "brand" : "neutral"}
@@ -149,7 +149,7 @@ const describeCommit = (
 ): string => {
   const oid = commit.oid.slice(0, 7);
   if (summary === undefined) return oid;
-  const files = `${String(summary.files)} ${summary.files === 1 ? "file" : "files"}`;
+  const files = pluralOf(summary.files, "file");
   return [oid, summary.workspaces.join(", "), files]
     .filter((part) => part !== "")
     .join(" · ");
@@ -173,7 +173,7 @@ function CommitStepper({
   if (commit === undefined) return null;
   return (
     <View className="min-w-0 shrink flex-row items-center gap-xs">
-      <IconButton
+      <TooltipIconButton
         icon={<CaretLeftRegularIcon />}
         size="sm"
         accent="neutral"
@@ -207,7 +207,7 @@ function CommitStepper({
           />
         ))}
       </Menu>
-      <IconButton
+      <TooltipIconButton
         icon={<CaretRightRegularIcon />}
         size="sm"
         accent="neutral"

package/src/components/pull-request-panel.tsx

@@ -7,7 +7,12 @@ import type {
   PullRequestReviewState,
   PullRequestSummary,
 } from "@reviewflow/sdk";
-import { prStatus, prStatusLabels, reviewflowPrStatus } from "@reviewflow/sdk";
+import {
+  pluralOf,
+  prStatus,
+  prStatusLabels,
+  reviewflowPrStatus,
+} from "@reviewflow/sdk";
 import type { Accent } from "alouette";
 import {
   AccentScope,
@@ -39,6 +44,7 @@ import { prStatusAccents } from "../prStatus.ts";
 import { emojify } from "../services/emojify.ts";
 import { errorToMessage } from "../services/errorToMessage.ts";
 import { formatDataAge } from "../services/formatDataAge.ts";
+import { isViewerAuthor } from "../services/isViewerAuthor.ts";
 import { LabelPill } from "./label-pill.tsx";
 import {
   PullRequestMergeButton,
@@ -48,7 +54,6 @@ import {
 import { CheckLine } from "./pull-request-checks.tsx";
 import { PullRequestCommits } from "./pull-request-commits.tsx";
 import { PersonAvatar } from "./pull-request-conversation-person.tsx";
-import { PullRequestFiles } from "./pull-request-files.tsx";
 import {
   PullRequestPartError,
   PullRequestPartPending,
@@ -361,7 +366,7 @@ function UnresolvedThreads({
         </View>
       </AccentScope>
       <Text className="min-w-0 flex-1 text-sm">
-        {`${String(unresolved)} unresolved ${unresolved === 1 ? "thread" : "threads"}`}
+        {pluralOf(unresolved, "unresolved thread")}
       </Text>
     </View>
   );
@@ -1120,18 +1125,12 @@ function Sidebar({ detail, candidates, onEdited }: CandidatesProps): ReactNode {
   );
 }
 
-export type PullRequestTab =
-  | "checks"
-  | "commits"
-  | "files"
-  | "review"
-  | "timeline";
+export type PullRequestTab = "checks" | "commits" | "review" | "timeline";
 
 export const isPullRequestTab = (value: unknown): value is PullRequestTab =>
   value === "checks" ||
   value === "commits" ||
   value === "timeline" ||
-  value === "files" ||
   value === "review";
 
 /** The timeline opens on the description, as GitHub's first comment. */
@@ -1164,7 +1163,8 @@ function PullRequestActions({ detail, onEdited }: EditableProps): ReactNode {
 export interface PullRequestPanelProps extends CandidatesProps {
   /** why the editors stay read-only, when GitHub refused what they offer */
   candidatesError: string | null;
-  tab: PullRequestTab;
+  /** absent: the first tab, Review for a reviewer and Conversation for the author */
+  tab?: PullRequestTab;
   onTabChange: (tab: PullRequestTab) => void;
   /** the commit whose diff is open on the Commits tab; absent: the tab holds it */
   openCommit?: string | null;
@@ -1174,7 +1174,7 @@ export interface PullRequestPanelProps extends CandidatesProps {
 /**
  * One pull request as GitHub reports it now, laid out as GitHub's own page —
  * the header, then Timeline (the description, a status box and a narrow
- * sidebar), Checks and Files changed — with the edits the operator makes
+ * sidebar), Commits, Checks and Review — with the edits the operator makes
  * before asking for a review. Every edit is GitHub's to refuse, and the panel
  * re-reads the pull request after it, so nothing on screen is the request
  * echoed back.
@@ -1184,7 +1184,7 @@ export function PullRequestPanel({
   candidates,
   candidatesError,
   onEdited,
-  tab,
+  tab: tabProp,
   onTabChange,
   openCommit,
   onOpenCommitChange,
@@ -1194,6 +1194,14 @@ export function PullRequestPanel({
     pullRequest,
     "checks",
   ).value;
+  const viewerIsAuthor = isViewerAuthor(detail);
+  const tab = tabProp ?? (viewerIsAuthor ? "timeline" : "review");
+  const reviewTab = (
+    <Tab
+      value="review"
+      label={`Review (${pluralOf(pullRequest.changedFiles, "file")})`}
+    />
+  );
   return (
     <View className="gap-l">
       {[...new Set([...errors, ...(candidates?.errors ?? [])])].map((error) => (
@@ -1214,6 +1222,7 @@ export function PullRequestPanel({
             if (isPullRequestTab(next)) onTabChange(next);
           }}
         >
+          {viewerIsAuthor ? null : reviewTab}
           <Tab value="timeline" label="Conversation" />
           <Tab
             value="commits"
@@ -1227,11 +1236,7 @@ export function PullRequestPanel({
                 : `Checks (${String(checks.checksTotal)})`
             }
           />
-          <Tab
-            value="files"
-            label={`Files changed (${String(pullRequest.changedFiles)})`}
-          />
-          <Tab value="review" label="Review" />
+          {viewerIsAuthor ? reviewTab : null}
         </Tabs>
         <PullRequestActions detail={detail} onEdited={onEdited} />
       </View>
@@ -1247,9 +1252,6 @@ export function PullRequestPanel({
           );
         }
         if (tab === "checks") return <ChecksTab pullRequest={pullRequest} />;
-        if (tab === "files") {
-          return <PullRequestFiles detail={detail} onEdited={onEdited} />;
-        }
         if (tab === "review") {
           return <PullRequestReview detail={detail} onEdited={onEdited} />;
         }

package/src/components/pull-request-reactions.tsx

@@ -1,4 +1,4 @@
-import { pullRequestReactionContents } from "@reviewflow/sdk";
+import { pluralOf, pullRequestReactionContents } from "@reviewflow/sdk";
 import type {
   PullRequestEdit,
   PullRequestReactable,
@@ -58,7 +58,7 @@ function ReactionButton({
   toggle,
 }: ReactionButtonProps): ReactNode {
   const { content, count, viewerHasReacted } = reaction;
-  const people = count === 1 ? "1 person" : `${String(count)} people`;
+  const people = pluralOf(count, "person", "people");
   return (
     <ActionButton
       text={`${reactionEmoji[content]} ${String(count)}`}

package/src/components/pull-request-revisions.tsx

@@ -3,6 +3,7 @@ import type {
   PullRequestRevision,
   PullRequestTextLine,
 } from "@reviewflow/sdk";
+import { pluralOf } from "@reviewflow/sdk";
 import {
   Box,
   Button,
@@ -86,7 +87,7 @@ function ChangeRunText({ run }: { run: ChangeRun }): ReactNode {
   if (run.kind === "folded") {
     return (
       <Text className="py-xxs text-xs text-muted">
-        {`⋯ ${String(run.count)} unchanged ${run.count === 1 ? "line" : "lines"}`}
+        {`⋯ ${pluralOf(run.count, "unchanged line")}`}
       </Text>
     );
   }

package/src/components/pull-request-screen.tsx

@@ -1,5 +1,6 @@
 import { pullRequestPartsStaleAfter } from "@reviewflow/sdk";
 import type {
+  DiffFont,
   DiffWhitespace,
   PullRequestDetailResponse,
   PullRequestEdit,
@@ -63,7 +64,7 @@ interface PullRequestBodyProps {
   ownerRepo: string;
   number: number;
   headerStart?: ReactNode;
-  tab: PullRequestTab;
+  tab?: PullRequestTab;
   onTabChange: (tab: PullRequestTab) => void;
   openCommit?: string | null;
   onOpenCommitChange?: (oid: string | null) => void;
@@ -203,8 +204,11 @@ function PullRequestBody({
 export interface PullRequestScreenProps {
   ownerRepo: string;
   number: number;
-  /** the tab shown; controlled, so an app can keep it in its url */
-  tab: PullRequestTab;
+  /**
+   * The tab shown; controlled, so an app can keep it in its url. Absent: the
+   * first tab, Review for a reviewer and Conversation for the author.
+   */
+  tab?: PullRequestTab;
   onTabChange: (tab: PullRequestTab) => void;
   /**
    * The commit whose diff is open on the Commits tab, by oid. Absent: the
@@ -239,8 +243,12 @@ export interface PullRequestScreenProps {
    * Absent: they live as long as the screen.
    */
   draftStore?: DraftStore;
-  /** the diff's syntax theme family; default `github` */
+  /** the diff's syntax theme family; default `reviewflow` */
   diffTheme?: DiffTheme;
+  /** the diff's code font; default `alouette` */
+  diffFont?: DiffFont;
+  /** the CSS `font-family` of the `custom` diff font */
+  diffCustomFont?: string;
   /** wrap long lines in the diff; default true */
   diffWordWrap?: boolean;
   /** whether the diff starts with whitespace changes hidden; the toolbar toggle then owns it */
@@ -253,11 +261,17 @@ export interface PullRequestScreenProps {
 
 /**
  * One pull request laid out as GitHub's page: the header, then the tabs
- * Conversation, Commits, Checks and Files changed, with the edits a reviewer
+ * Conversation, Commits, Checks and Review, with the edits a reviewer
  * or an author makes. Reads and writes through the
  * {@link PullRequestDataSource} of the nearest
  * `PullRequestDataSourceProvider`, which the app provides. Mount it with a
  * `key` of the pull request, so a draft review never leaks to the next one.
+ *
+ * It fills its parent, and the app chooses how wide that is: its text stays in
+ * a 1200px column, and only a split diff beside its file list widens to the
+ * whole screen. The screen is the CSS container that diff is sized against
+ * (`100cqw`): the window (`100vw`) overflows an app that lays the page beside a
+ * sidebar.
  */
 export function PullRequestScreen({
   ownerRepo,
@@ -265,6 +279,8 @@ export function PullRequestScreen({
   slots = {},
   draftStore,
   diffTheme,
+  diffFont,
+  diffCustomFont,
   diffWordWrap,
   initialWhitespace,
   diffFileOrder,
@@ -275,23 +291,27 @@ export function PullRequestScreen({
     <PullRequestSlotsProvider value={slots}>
       <DiffSettingsProvider
         theme={diffTheme}
+        font={diffFont}
+        customFont={diffCustomFont}
         wordWrap={diffWordWrap}
         initialWhitespace={initialWhitespace}
         fileOrder={diffFileOrder}
         onFileOrderChange={onDiffFileOrderChange}
       >
-        <View className="mx-auto w-full max-w-[1200px] gap-m px-l pt-l pb-xl">
-          <PullRequestDraftsProvider
-            store={draftStore}
-            pullRequest={{ ownerRepo, number }}
-          >
-            <PullRequestBody
-              key={`${ownerRepo}#${String(number)}`}
-              ownerRepo={ownerRepo}
-              number={number}
-              {...body}
-            />
-          </PullRequestDraftsProvider>
+        <View className="w-full px-l pt-l pb-xl web:@container">
+          <View className="mx-auto w-full max-w-[1200px] gap-m">
+            <PullRequestDraftsProvider
+              store={draftStore}
+              pullRequest={{ ownerRepo, number }}
+            >
+              <PullRequestBody
+                key={`${ownerRepo}#${String(number)}`}
+                ownerRepo={ownerRepo}
+                number={number}
+                {...body}
+              />
+            </PullRequestDraftsProvider>
+          </View>
         </View>
       </DiffSettingsProvider>
     </PullRequestSlotsProvider>

package/src/components/pull-request-suggestion-actions.tsx

@@ -1,13 +1,14 @@
-import {
-  parseSuggestions,
-  suggestionCommitRefusal,
-  suggestionRangesOverlap,
-} from "@reviewflow/sdk";
 import type {
   PullRequestComment,
   PullRequestSuggestionRef,
   PullRequestThread,
 } from "@reviewflow/sdk";
+import {
+  parseSuggestions,
+  pluralOf,
+  suggestionCommitRefusal,
+  suggestionRangesOverlap,
+} from "@reviewflow/sdk";
 import {
   Button,
   FormItem,
@@ -161,7 +162,7 @@ export function SuggestionActions({
         text={
           batch.batch.length === 0
             ? "Commit suggestion"
-            : `Commit ${String(batch.batch.length)} suggestion${batch.batch.length === 1 ? "" : "s"}`
+            : `Commit ${pluralOf(batch.batch.length, "suggestion")}`
         }
         disabledReason={
           toCommit.length === 0 ? (refusal ?? undefined) : undefined

package/src/components/repository-attachment-banner.tsx

@@ -13,7 +13,7 @@ interface RepositoryAttachmentBannerProps {
 /**
  * Says up front, on every tab, that the diff of this repository cannot be read
  * because no local checkout is attached to it, rather than leaving that to be
- * found in Files changed. An entry that exists but fails its check shows why.
+ * found in the Review tab. An entry that exists but fails its check shows why.
  * Nothing when the checkout is attached.
  */
 export function RepositoryAttachmentBanner({

package/src/components/scroll-parent.ts

@@ -41,6 +41,26 @@ export const scrollToTopOf = (
   container.scrollTop -= hiddenAbove(element, container, stickyTop);
 };
 
+/**
+ * Scrolls `element`'s scroll parent alone, the least that shows it whole
+ * below the `stickyTop` pixels a pinned row covers: the page around it stays
+ * where the reader has it, unlike `scrollIntoView`.
+ */
+export const revealWithinScrollParent = (
+  element: HTMLElement,
+  stickyTop: number,
+): void => {
+  const container = scrollParentOf(element);
+  if (container === null) return;
+  const bounds = container.getBoundingClientRect();
+  const { top, bottom } = element.getBoundingClientRect();
+  const hidden = bounds.top + stickyTop - top;
+  if (hidden > 0) container.scrollTop -= hidden;
+  else if (bottom > bounds.bottom) {
+    container.scrollTop += bottom - bounds.bottom;
+  }
+};
+
 /** As `scrollToTopOf`, only when `element`'s top is hidden above that bar. */
 export const revealTopOf = (element: HTMLElement, stickyTop: number): void => {
   const container = scrollParentOf(element);

package/src/components/tooltip-icon-button.tsx

@@ -0,0 +1,27 @@
+import type { IconButtonProps } from "alouette";
+import { IconButton, Tooltip } from "alouette";
+import type { ReactNode } from "react";
+
+/**
+ * An icon-only button whose label shows on hover, so its purpose is not left
+ * to the glyph. A disabled one shows its reason instead, in the tooltip the
+ * button renders itself. To replace by alouette's own once released:
+ * https://github.com/christophehurpeau/alouette/pull/448
+ */
+export function TooltipIconButton(props: IconButtonProps): ReactNode {
+  const { disabledReason, "aria-label": label } = props;
+  return (
+    <Tooltip
+      content={disabledReason ? null : label}
+      // the label already names the button: as its description too, a screen reader reads it twice
+      render={(triggerProps) => (
+        <IconButton
+          {...props}
+          {...triggerProps}
+          aria-describedby={undefined}
+          accessibilityHint={undefined}
+        />
+      )}
+    />
+  );
+}

package/src/editor/code-editor.tsx

@@ -6,6 +6,7 @@ import type { CodeLanguage } from "./codeEditorExtensions.ts";
 import { codeEditorExtensions } from "./codeEditorExtensions.ts";
 import { changeBetween, externalUpdate } from "./extensions.ts";
 import "./markdown-editor.css";
+import "./code-token-colors.css";
 
 export interface CodeEditorProps {
   value: string;

package/src/editor/code-token-colors.css

@@ -0,0 +1,39 @@
+/* Generated by build-code-theme.ts from the palette in src/palette.ts. DO NOT EDIT. */
+/* The code tokens of the editors, in fences and in the frontmatter's yaml. */
+
+.markdown-editor {
+  --md-tok-comment: #63707e;
+  --md-tok-keyword: #cd112a;
+  --md-tok-string: #064d8e;
+  --md-tok-constant: #0c71c1;
+  --md-tok-property: #0c71c1;
+  --md-tok-type: #986b0c;
+  --md-tok-function: #8837df;
+  --md-tok-invalid: #cd112a;
+}
+
+.dark .markdown-editor {
+  --md-tok-comment: #b4bdc7;
+  --md-tok-keyword: #f56d68;
+  --md-tok-string: #97caf6;
+  --md-tok-constant: #47a5f4;
+  --md-tok-property: #47a5f4;
+  --md-tok-type: #e2b83c;
+  --md-tok-function: #af87e8;
+  --md-tok-invalid: #f56d68;
+}
+
+/* the "system" preference never sets .dark: the palette resolves it with this
+   media query, so the dark tokens are repeated here */
+@media (prefers-color-scheme: dark) {
+  .system .markdown-editor {
+    --md-tok-comment: #b4bdc7;
+    --md-tok-keyword: #f56d68;
+    --md-tok-string: #97caf6;
+    --md-tok-constant: #47a5f4;
+    --md-tok-property: #47a5f4;
+    --md-tok-type: #e2b83c;
+    --md-tok-function: #af87e8;
+    --md-tok-invalid: #f56d68;
+  }
+}

package/src/editor/codeHighlight.ts

@@ -13,7 +13,8 @@ import { tags } from "@lezer/highlight";
  * **Every style is scoped to a nested language**: `@lezer/markdown` tags its
  * own nodes too (`heading1`, `strong`), and an unscoped style would paint prose
  * a second time over the `md-*` classes. Classes, not colours: the palette is
- * in `markdown-editor.css`, switched with the theme.
+ * in `code-token-colors.css`, generated with the diff's reviewflow theme
+ * (`build-code-theme.ts`), switched with the theme.
  *
  * Coarse on purpose — a parent tag catches its children, so a language emitting
  * a tag nobody listed still lands somewhere sensible. Ported from

package/src/editor/markdown-editor.css

@@ -28,14 +28,7 @@
   --md-frontmatter-bg: color-mix(in srgb, var(--color-muted) 7%, transparent);
   --md-quote-bg: color-mix(in srgb, var(--color-muted) 6%, transparent);
 
-  --md-tok-comment: #6e7781;
-  --md-tok-keyword: #cf222e;
-  --md-tok-string: #0a3069;
-  --md-tok-constant: #0550ae;
-  --md-tok-property: #0550ae;
-  --md-tok-type: #116329;
-  --md-tok-function: #8250df;
-  --md-tok-invalid: #82071e;
+  /* the --md-tok-* colors are generated, in code-token-colors.css */
 
   /* fills a column the caller grew; the editor still sizes to its content, and
      the page — the app layout is the scroll container — scrolls a long one */
@@ -53,32 +46,6 @@
   transition: border-color 150ms ease-in;
 }
 
-.dark .markdown-editor {
-  --md-tok-comment: #8b949e;
-  --md-tok-keyword: #ff7b72;
-  --md-tok-string: #a5d6ff;
-  --md-tok-constant: #79c0ff;
-  --md-tok-property: #79c0ff;
-  --md-tok-type: #7ee787;
-  --md-tok-function: #d2a8ff;
-  --md-tok-invalid: #f85149;
-}
-
-/* the "system" preference never sets .dark: the palette resolves it with this
-   media query, so the dark tokens are repeated here */
-@media (prefers-color-scheme: dark) {
-  .system .markdown-editor {
-    --md-tok-comment: #8b949e;
-    --md-tok-keyword: #ff7b72;
-    --md-tok-string: #a5d6ff;
-    --md-tok-constant: #79c0ff;
-    --md-tok-property: #79c0ff;
-    --md-tok-type: #7ee787;
-    --md-tok-function: #d2a8ff;
-    --md-tok-invalid: #f85149;
-  }
-}
-
 .markdown-editor:hover {
   border-color: var(--color-interactive-outlined-hover);
 }