@tumaet/apollon 5.0.0 → 5.1.0

package/README.md

@@ -23,7 +23,8 @@ Apollon is the modeling editor behind [Artemis](https://artemis.tum.de/), TUM's
 - **Framework-agnostic**: one imperative API for Angular, Vue, Svelte, and vanilla JS, plus a React component, hooks, and provider.
 - **Real-time collaboration**: opt-in multi-user editing over [Yjs](https://yjs.dev/), with any transport you like (WebSocket, WebRTC, BroadcastChannel).
 - **Export**: SVG and JSON are built in. Generate PNG and PDF from the SVG (see [Export](#export)).
-- **Canvas overlays**: inject your own toolbars, banners, and rails into the editor canvas, collision-free with built-in chrome — `<ApollonControl>` (React) or `addControl` / `getRegionElement` (any framework). See [Overlay controls](https://ls1intum.github.io/Apollon/library/api/overlay-controls).
+- **Canvas overlays**: inject your own toolbars, banners, and rails into the editor canvas; Apollon measures reserving controls and places them with the built-in chrome — `<ApollonControl>` (React) or `addControl` / `getRegionElement` (any framework). See [Overlay controls](https://ls1intum.github.io/Apollon/library/api/overlay-controls).
+- **Internationalization**: override the editor UI strings exposed in `ApollonLabels` (tooltips, aria-labels, edit/assessment popovers) via `labels` / `setLabels` / `useLabels`. See [i18n](https://ls1intum.github.io/Apollon/library/api/overlay-controls#i18n).
 - **Assessment mode**: attach scores and feedback to elements. This is the grading workflow Artemis uses.
 - **TypeScript**: type definitions are included.
 
@@ -167,11 +168,11 @@ export class DiagramEditorComponent {
 `yjs` and `y-protocols` are required peers, but on the CDN path esm.sh resolves and serves them from the import URL automatically — there is nothing extra to load. (With a bundler you install the peers yourself.)
 
 ```html
-<link rel="stylesheet" href="https://esm.sh/@tumaet/apollon@5.0.0/style.css" />
+<link rel="stylesheet" href="https://esm.sh/@tumaet/apollon@5.1.0/style.css" />
 <div id="apollon" style="width: 100%; height: 600px"></div>
 
 <script type="module">
-  import { ApollonEditor } from "https://esm.sh/@tumaet/apollon@5.0.0"
+  import { ApollonEditor } from "https://esm.sh/@tumaet/apollon@5.1.0"
 
   const saved = localStorage.getItem("diagram")
   const editor = new ApollonEditor(document.getElementById("apollon"), {
@@ -227,9 +228,35 @@ Any Yjs-compatible transport works: `y-websocket`, `y-webrtc`, BroadcastChannel,
 
 See [Export](https://ls1intum.github.io/Apollon/library/api/export) for the full `ExportOptions`.
 
+## Theming
+
+Theme the editor through the `--apollon-*` CSS custom properties (typed via
+`createApollonTheme`) plus a `data-theme` light/dark switch — framework-agnostic,
+Tailwind-free. A first rebrand is three tokens: `primary`, `background`,
+`foreground`.
+
+```tsx
+import { Apollon, createApollonTheme } from "@tumaet/apollon"
+
+declare const dark: boolean // your app's light/dark state
+;<Apollon
+  style={{ height: "80vh" }}
+  theme={createApollonTheme({
+    primary: "#ff5722",
+    background: "#fff",
+    foreground: "#1a1a1a",
+  })}
+  dataTheme={dark ? "dark" : undefined}
+/>
+```
+
+See [Theming](https://ls1intum.github.io/Apollon/library/theming) (or
+[`THEMING.md`](./THEMING.md)) for the full contract, dark mode, and host patterns.
+
 ## Documentation
 
 - [Library overview](https://ls1intum.github.io/Apollon/library/): install, quickstart, embedding
+- [Theming](https://ls1intum.github.io/Apollon/library/theming): the `--apollon-*` contract, `createApollonTheme`, light/dark
 - [API reference](https://ls1intum.github.io/Apollon/library/api): the full `ApollonEditor` and `<Apollon>` surface
 - [Troubleshooting](https://ls1intum.github.io/Apollon/library/troubleshooting): blank canvas, SSR, duplicate React, and other gotchas