feat(play.loradb.com): extend playground theme tokens

zolero · zolero · commit 2c09537ad0e4 · 2026-05-19T20:17:27.000+02:00
diff --git a/apps/play.loradb.com/lib/theme/editor.ts b/apps/play.loradb.com/lib/theme/editor.ts
@@ -13,11 +13,62 @@
  * inline and skip the TLA-gated import entirely.
  */
 
-import type { LoraQueryTheme } from "@loradb/lora-query";
+import type { LoraJsonTheme, LoraQueryTheme } from "@loradb/lora-query";
 
 import type { Tokens } from "./tokens";
 import { hexA } from "./util";
 
+/**
+ * Derive a `LoraJsonTheme` from our token set. Mirrors
+ * {@link deriveEditorTheme} but uses the JSON-specific token slots
+ * (`key`, `string`, `number`, `bool`, `null`, `punct`).
+ */
+export function deriveJsonEditorTheme(tokens: Tokens): LoraJsonTheme {
+  const identifier = tokens.syntax.identifier;
+  return {
+    background: tokens.bg.editor,
+    foreground: tokens.fg.primary,
+    border: tokens.border.subtle,
+    muted: tokens.fg.muted,
+    accent: tokens.accent.primary,
+    activeLine: hexA(tokens.fg.primary, 0.06),
+    gutterBackground: tokens.bg.editor,
+    gutterForeground: tokens.fg.subtle,
+    cursor: tokens.fg.primary,
+    selectionBackground: hexA(tokens.accent.primary, 0.28),
+
+    fontFamily: tokens.font.ui,
+    monoFontFamily: tokens.font.mono,
+    fontSize: "13px",
+    popupFontSize: "12px",
+
+    key: identifier,
+    string: tokens.syntax.string,
+    number: tokens.syntax.number,
+    bool: tokens.syntax.keyword,
+    null: tokens.syntax.keyword,
+    // `punct` left to fall through to the shared `--lq-color-punct`
+    // default (inherited text colour with 0.7 opacity).
+
+    popupBackground: tokens.bg.panel,
+    popupForeground: tokens.fg.primary,
+    popupBorder: tokens.border.subtle,
+    popupSelectedBackground: tokens.accent.primary,
+    popupSelectedForeground: tokens.fg.inverse,
+    popupShadow: `0 6px 16px ${hexA("#000000", 0.35)}`,
+
+    errorAccent: tokens.accent.danger,
+    warningAccent: tokens.accent.warning,
+    infoAccent: tokens.accent.info,
+
+    scrollbarTrack: tokens.bg.editor,
+    scrollbarThumb: tokens.border.strong,
+    scrollbarThumbHover: tokens.fg.subtle,
+    scrollbarWidth: "auto",
+    scrollbarSize: "10px",
+  };
+}
+
 /** Derive a `LoraQueryTheme` from our token set. */
 export function deriveEditorTheme(tokens: Tokens): LoraQueryTheme {
   const keyword = tokens.syntax.keyword;
@@ -42,10 +93,10 @@ export function deriveEditorTheme(tokens: Tokens): LoraQueryTheme {
     popupFontSize: "12px",
 
     keyword,
-    variable: identifier,
-    parameter: identifier,
-    label: type,
-    relType: type,
+    variable: tokens.category.variable,
+    parameter: tokens.category.parameter,
+    label: tokens.category.label,
+    relType: tokens.category.relType,
     property: identifier,
     functionName: type,
     namespace: type,
diff --git a/apps/play.loradb.com/lib/theme/tokens.ts b/apps/play.loradb.com/lib/theme/tokens.ts
@@ -58,6 +58,35 @@ export interface Tokens {
     linkHighlight: string;
     label: string;
   };
+  /**
+   * Semantic category palette — the colour used to identify a Cypher
+   * concept wherever it surfaces (outline chips, plan badges, schema
+   * browser, inspector, table bubbles, graph canvas, summary strips).
+   *
+   * `*Bg` variants are pre-computed translucent versions of the same
+   * hue, suitable for badge / bubble backgrounds.
+   *
+   * Hues mirror the `lora-query` editor palette so a `:Person` label
+   * looks the same in the editor as on a chip below it.
+   */
+  category: {
+    variable: string;
+    variableBg: string;
+    label: string;
+    labelBg: string;
+    relType: string;
+    relTypeBg: string;
+    parameter: string;
+    parameterBg: string;
+    /** Alias for `graph.node` — kept here so node colours can be looked
+     *  up alongside the other categories. */
+    node: string;
+    nodeBg: string;
+    /** Used for the graph-shape "relationship" concept (counts, summary
+     *  chips). Equal to `relType` so chips agree with the rel-type colour. */
+    relationship: string;
+    relationshipBg: string;
+  };
   font: {
     ui: string;
     mono: string;
@@ -119,6 +148,20 @@ export const darkTokens: Tokens = {
     linkHighlight: "#9cdcfe",
     label: "#d4d4d4",
   },
+  category: {
+    variable: "#79c0ff",
+    variableBg: "rgba(121, 192, 255, 0.16)",
+    label: "#7ee787",
+    labelBg: "rgba(126, 231, 135, 0.16)",
+    relType: "#ffa657",
+    relTypeBg: "rgba(255, 166, 87, 0.16)",
+    parameter: "#d2a8ff",
+    parameterBg: "rgba(210, 168, 255, 0.16)",
+    node: "#6aa3ff",
+    nodeBg: "rgba(106, 163, 255, 0.16)",
+    relationship: "#ffa657",
+    relationshipBg: "rgba(255, 166, 87, 0.16)",
+  },
   font: {
     ui: FONT_UI,
     mono: FONT_MONO,
@@ -175,6 +218,20 @@ export const lightTokens: Tokens = {
     linkHighlight: "#0969da",
     label: "#1f2328",
   },
+  category: {
+    variable: "#1e66f5",
+    variableBg: "rgba(30, 102, 245, 0.14)",
+    label: "#40a02b",
+    labelBg: "rgba(64, 160, 43, 0.14)",
+    relType: "#df8e1d",
+    relTypeBg: "rgba(223, 142, 29, 0.16)",
+    parameter: "#8839ef",
+    parameterBg: "rgba(136, 57, 239, 0.14)",
+    node: "#0969da",
+    nodeBg: "rgba(9, 105, 218, 0.14)",
+    relationship: "#df8e1d",
+    relationshipBg: "rgba(223, 142, 29, 0.16)",
+  },
   font: {
     ui: FONT_UI,
     mono: FONT_MONO,
diff --git a/apps/play.loradb.com/lib/theme/usePlaygroundTheme.ts b/apps/play.loradb.com/lib/theme/usePlaygroundTheme.ts
@@ -21,7 +21,7 @@ import {
 } from "@mantine/core";
 
 import { deriveCanvasTheme } from "./canvas";
-import { deriveEditorTheme } from "./editor";
+import { deriveEditorTheme, deriveJsonEditorTheme } from "./editor";
 import { deriveGridTheme } from "./grid";
 import { darkTokens, lightTokens, tokensFor, type Tokens } from "./tokens";
 
@@ -33,6 +33,7 @@ interface PlaygroundTheme {
   mantine: MantineTheme;
   canvas: ReturnType<typeof deriveCanvasTheme>;
   editor: ReturnType<typeof deriveEditorTheme>;
+  jsonEditor: ReturnType<typeof deriveJsonEditorTheme>;
   grid: ReturnType<typeof deriveGridTheme>;
 }
 
@@ -70,6 +71,7 @@ export function usePlaygroundTheme(): PlaygroundTheme {
       mantine,
       canvas: deriveCanvasTheme(tokens),
       editor: deriveEditorTheme(tokens),
+      jsonEditor: deriveJsonEditorTheme(tokens),
       grid: deriveGridTheme(tokens),
     }),
     [tokens, scheme, mantine],
