mdeck 3.6.2 → 3.7.0

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 3.7.0 — 2026-10-09
+
+- Palettes have a third accent, `--accent-3`, and the three accents mean something: `--accent` is emphasis, `--accent-2` its companion (gradients, a contrast to the accent), `--accent-3` attention, used sparingly. `--accent-3` marks things and need not be readable as text, so it may be a yellow; `mdeck check` asks only that it can be seen (1.5:1 against the background). A palette without `--accent-3` keeps working and gets an amber (`#d99a00`, at night `#f5c542`); `mdeck check` suggests giving it its own. All built-in palettes and those in the theme repository set it (the repository requires it); `mdeck palettes update` brings installed ones up to date.
+- Callouts take their colours from the palette: note, tip and important the accent, warning and caution the third accent. The five callout colours (`--callout-note` … `--callout-caution`) are gone, and with them the green, purple and blue that matched no palette. The built-in themes follow.
+
 ## 3.6.2 — 2026-10-09
 
 - The docs home page and the README start with what mdeck does: drawing from an iPad, polls from phones, citations, themes, running code and sending one file, each with a picture (`npm run feature-images` renders them). The docs' example deck is now a short tour of mdeck, with its own control bar and drawing, and a picker of every built-in theme as a picture, with light or dark.

package/assets/extensions/palettes/cobalt/extension.toml

@@ -16,6 +16,7 @@ license = "MIT"
 "--rule" = "#d5dbf0"
 "--accent" = "#1f3fd1"
 "--accent-2" = "#e8590c"
+"--accent-3" = "#e8a400"
 "--on-accent" = "#ffffff"
 
 [dark]
@@ -27,4 +28,5 @@ license = "MIT"
 "--rule" = "#212b5e"
 "--accent" = "#6f8cff"
 "--accent-2" = "#ff922b"
+"--accent-3" = "#ffd43b"
 "--on-accent" = "#0a1030"

package/assets/extensions/palettes/greyscale/extension.toml

@@ -8,8 +8,8 @@ author = "Tilman Schieber"
 license = "MIT"
 
 # No colour anywhere: emphasis is black against the softer body text, the
-# second accent a mid grey; code and callouts use greys instead of their
-# usual colours.
+# second accent a mid grey, the third (warnings) a lighter grey; code uses
+# greys instead of its usual colours.
 [light]
 "--bg" = "#ffffff"
 "--surface" = "#f0f0f0"
@@ -19,6 +19,7 @@ license = "MIT"
 "--rule" = "#d4d4d4"
 "--accent" = "#000000"
 "--accent-2" = "#6e6e6e"
+"--accent-3" = "#9a9a9a"
 "--on-accent" = "#ffffff"
 "--token-default" = "#141414"
 "--token-comment" = "#6b6b6b"
@@ -27,11 +28,6 @@ license = "MIT"
 "--token-keyword" = "#000000"
 "--token-function" = "#2a2a2a"
 "--token-operator" = "#555555"
-"--callout-note" = "#4a4a4a"
-"--callout-tip" = "#4a4a4a"
-"--callout-important" = "#000000"
-"--callout-warning" = "#7a7a7a"
-"--callout-caution" = "#000000"
 
 [dark]
 "--bg" = "#121212"
@@ -42,6 +38,7 @@ license = "MIT"
 "--rule" = "#303030"
 "--accent" = "#ffffff"
 "--accent-2" = "#a6a6a6"
+"--accent-3" = "#6e6e6e"
 "--on-accent" = "#121212"
 "--token-default" = "#f2f2f2"
 "--token-comment" = "#9a9a9a"
@@ -50,8 +47,3 @@ license = "MIT"
 "--token-keyword" = "#ffffff"
 "--token-function" = "#e0e0e0"
 "--token-operator" = "#b0b0b0"
-"--callout-note" = "#b8b8b8"
-"--callout-tip" = "#b8b8b8"
-"--callout-important" = "#ffffff"
-"--callout-warning" = "#8c8c8c"
-"--callout-caution" = "#ffffff"

package/assets/extensions/palettes/lagoon/extension.toml

@@ -16,6 +16,7 @@ license = "MIT"
 "--rule" = "#e0deda"
 "--accent" = "#0d9488"
 "--accent-2" = "#c2410c"
+"--accent-3" = "#ca8a04"
 "--on-accent" = "#ffffff"
 
 [dark]
@@ -27,4 +28,5 @@ license = "MIT"
 "--rule" = "#23332f"
 "--accent" = "#2dd4bf"
 "--accent-2" = "#fb923c"
+"--accent-3" = "#facc15"
 "--on-accent" = "#062b26"

package/assets/extensions/palettes/nordic/extension.toml

@@ -16,6 +16,7 @@ license = "MIT"
 "--rule" = "#cdd8e1"
 "--accent" = "#1f6f9f"
 "--accent-2" = "#7a5c9e"
+"--accent-3" = "#c08a1e"
 "--on-accent" = "#ffffff"
 
 [dark]
@@ -27,4 +28,5 @@ license = "MIT"
 "--rule" = "#22343f"
 "--accent" = "#7cc4ea"
 "--accent-2" = "#c3a8e6"
+"--accent-3" = "#e8c170"
 "--on-accent" = "#0e1a24"

package/assets/extensions/palettes/paper/extension.toml

@@ -16,6 +16,7 @@ license = "MIT"
 "--rule" = "#e0ddd6"
 "--accent" = "#c2410c"
 "--accent-2" = "#1f2937"
+"--accent-3" = "#c99700"
 "--on-accent" = "#ffffff"
 
 [dark]
@@ -27,4 +28,5 @@ license = "MIT"
 "--rule" = "#2e2e2c"
 "--accent" = "#fb8c4a"
 "--accent-2" = "#e7e5e0"
+"--accent-3" = "#f2c94c"
 "--on-accent" = "#151515"

package/assets/extensions/palettes/swiss/extension.toml

@@ -16,6 +16,7 @@ license = "MIT"
 "--rule" = "#dadada"
 "--accent" = "#e30613"
 "--accent-2" = "#0047bb"
+"--accent-3" = "#f2b700"
 "--on-accent" = "#ffffff"
 
 [dark]
@@ -27,4 +28,5 @@ license = "MIT"
 "--rule" = "#2e2e2e"
 "--accent" = "#ff3b30"
 "--accent-2" = "#6f9bff"
+"--accent-3" = "#ffd60a"
 "--on-accent" = "#0d0d0d"

package/assets/extensions/themes/academic/styles.css

@@ -476,11 +476,9 @@ strong { color: var(--ink); font-weight: 700; }
 .slide-body .callout p { color: var(--ink); }
 .slide-body .callout :is(ul, ol) { gap: 8px; }
 
-.slide-body :is(.callout-theorem, .callout-lemma, .callout-corollary, .callout-proposition, .callout-tip, .callout-important) { --block: var(--accent); }
+.slide-body :is(.callout-theorem, .callout-lemma, .callout-corollary, .callout-proposition, .callout-note, .callout-tip, .callout-important) { --block: var(--accent); }
 .slide-body :is(.callout-definition) { --block: var(--accent-2); }
-.slide-body .callout-note { --block: var(--callout-note); }
-.slide-body .callout-warning { --block: var(--callout-warning); }
-.slide-body .callout-caution { --block: var(--callout-caution); }
+.slide-body :is(.callout-warning, .callout-caution) { --block: var(--accent-3); }
 .slide-body :is(.callout-theorem, .callout-lemma, .callout-corollary, .callout-proposition) > :not(.callout-title) {
   font-family: var(--font-serif);
   font-style: italic;

package/assets/extensions/themes/glass/styles.css

@@ -640,13 +640,9 @@ deck-stage[data-deck-static] .slide { animation: none; }
   box-shadow: 0 0 10px currentColor;
 }
 .slide-body .callout p { padding-left: 0; margin: 0; color: var(--ink); }
-.slide-body .callout-note { --tint: var(--callout-note); }
-.slide-body .callout-tip { --tint: var(--callout-tip); }
-.slide-body .callout-important { --tint: var(--callout-important); }
-.slide-body .callout-warning { --tint: var(--callout-warning); }
-.slide-body .callout-caution { --tint: var(--callout-caution); }
+.slide-body :is(.callout-note, .callout-tip, .callout-important) { --tint: var(--accent); }
+.slide-body :is(.callout-warning, .callout-caution) { --tint: var(--accent-3); }
 .slide-body .callout-definition { --tint: var(--accent-2); }
-.slide-body .callout-tip .callout-title { color: color-mix(in oklab, var(--callout-tip) 60%, var(--ink)); }
 .slide-body :is(.callout-theorem, .callout-lemma, .callout-corollary) .callout-title { color: var(--em); }
 .slide-body .callout-definition .callout-title { color: light-dark(color-mix(in oklab, var(--accent-2) 80%, var(--ink)), var(--accent-2)); }
 

package/assets/extensions/themes/minimal/styles.css

@@ -297,11 +297,8 @@ strong { color: var(--ink); font-weight: 600; }
   margin: 32px 0 0;
   max-width: 1200px;
 }
-.slide-body .callout-tip { border-left-color: var(--accent); }
-.slide-body .callout-note { border-left-color: var(--callout-note); }
-.slide-body .callout-important { border-left-color: var(--callout-important); }
-.slide-body .callout-warning { border-left-color: var(--callout-warning); }
-.slide-body .callout-caution { border-left-color: var(--callout-caution); }
+.slide-body :is(.callout-note, .callout-tip, .callout-important) { border-left-color: var(--accent); }
+.slide-body :is(.callout-warning, .callout-caution) { border-left-color: var(--accent-3); }
 .slide-body .callout-title { margin-bottom: 8px; }
 .slide-body .callout p { padding-left: 0; color: var(--ink); font-size: var(--fs-body); }
 /* Lecture blocks: theorems in the accent, definitions in the second */

package/assets/extensions/themes/neue/styles.css

@@ -434,12 +434,9 @@ strong { color: var(--ink); font-weight: 600; }
   margin: 40px 0 0;
   max-width: 1200px;
 }
-.slide-body .callout-tip { border-top-color: var(--accent); }
+.slide-body :is(.callout-note, .callout-tip, .callout-important) { border-top-color: var(--accent); }
 .slide-body .callout-tip .callout-title { color: var(--accent); }
-.slide-body .callout-note { border-top-color: var(--callout-note); }
-.slide-body .callout-important { border-top-color: var(--callout-important); }
-.slide-body .callout-warning { border-top-color: var(--callout-warning); }
-.slide-body .callout-caution { border-top-color: var(--callout-caution); }
+.slide-body :is(.callout-warning, .callout-caution) { border-top-color: var(--accent-3); }
 .slide-body .callout-title { letter-spacing: 0.12em; margin-bottom: 10px; }
 .slide-body .callout p { padding-left: 0; color: var(--ink); font-size: var(--fs-body); }
 /* Lecture blocks: theorems under a rule in the accent, definitions in the second */

package/assets/extensions/themes/plain/styles.css

@@ -418,8 +418,7 @@ strong { font-weight: 600; color: var(--ink); }
 }
 .slide-body .callout p { padding-left: 0; margin: 0; color: var(--ink-soft); }
 .slide-body .callout :is(.callout-title) { color: var(--ink); }
-.slide-body .callout:is(.callout-warning, .callout-caution) { border-left-color: var(--callout-warning); }
-.slide-body .callout.callout-caution { border-left-color: var(--callout-caution); }
+.slide-body .callout:is(.callout-warning, .callout-caution) { border-left-color: var(--accent-3); }
 .slide-body .callout.callout-proof { background: none; border: 0; padding: 0; }
 
 /* ─────────────────────────────────────────────

package/assets/extensions/themes/work/styles.css

@@ -448,11 +448,8 @@ strong { font-weight: 600; color: var(--ink); }
   margin: 0 0 8px 0;
 }
 .slide-body .callout p { padding-left: 0; margin: 0; color: var(--ink); }
-.slide-body .callout-note { --bar: var(--callout-note); }
-.slide-body .callout-tip { --bar: var(--callout-tip); }
-.slide-body .callout-important { --bar: var(--callout-important); }
-.slide-body .callout-warning { --bar: var(--callout-warning); }
-.slide-body .callout-caution { --bar: var(--callout-caution); }
+.slide-body :is(.callout-note, .callout-tip, .callout-important) { --bar: var(--accent); }
+.slide-body :is(.callout-warning, .callout-caution) { --bar: var(--accent-3); }
 .slide-body .callout-definition { --bar: var(--accent-2); }
 
 /* ─────────────────────────────────────────────

package/docs/reference/authoring.md

@@ -686,7 +686,7 @@ A local SVG whose source contains `var(--…)` is drawn inline instead of as an
 layout's `image` (`title`, `chapter`, `image-text`, `full-bleed-image`, and
 local layouts that render it with `Picture` from `mdeck/layout`). It can use the
 palette's custom properties (`--bg`, `--surface`, `--ink`, `--ink-soft`,
-`--muted`, `--rule`, `--accent`, `--accent-2`, `--on-accent`) and follows the
+`--muted`, `--rule`, `--accent`, `--accent-2`, `--accent-3`, `--on-accent`) and follows the
 theme, palette and appearance. Give each a fallback (`var(--accent, #1f3fd1)`)
 for places that show the file on its own, set `fit: contain` to keep the whole
 drawing, prefix class names in its `<style>` because inline styles apply to the

package/docs/reference/extensions.md

@@ -83,6 +83,7 @@ description = "Deep blue with a warm highlight."
 "--rule" = "#c9d7e2"
 "--accent" = "#0a6aa8"
 "--accent-2" = "#b45309"
+"--accent-3" = "#c99700"
 "--on-accent" = "#ffffff"
 
 [dark]
@@ -94,6 +95,7 @@ description = "Deep blue with a warm highlight."
 "--rule" = "#24384b"
 "--accent" = "#ffbd69"
 "--accent-2" = "#7cc4ff"
+"--accent-3" = "#f2c94c"
 "--on-accent" = "#102030"
 ```
 

package/docs/reference/palettes.md

@@ -23,7 +23,7 @@ The presenter view and the reader view switch palette and light or dark without
 | `swiss` | white, black and signal red | black, white and red |
 | `nordic` | ice grey, deep navy and a cool steel blue | polar night with ice blue |
 | `cobalt` | strong ultramarine on white, vivid orange | midnight blue, bright blue and orange |
-| `greyscale` | black, white and greys only, code and callouts too | the same, inverted |
+| `greyscale` | black, white and greys only, code too | the same, inverted |
 | `lagoon` | teal on warm stone, orange second accent | deep teal-black, bright teal |
 | `paper` | off-white paper and near-black ink with one orange accent | charcoal with a softer orange |
 
@@ -35,7 +35,7 @@ More palettes are in the [theme repository](https://github.com/tilman-schieber/m
 
 ## Colours
 
-Every variant sets all nine:
+Every variant sets all ten (a palette without `--accent-3` gets an amber, and `mdeck check` suggests setting one):
 
 | Colour | Role |
 |---|---|
@@ -45,8 +45,9 @@ Every variant sets all nine:
 | `--ink-soft` | Body text |
 | `--muted` | Small labels: headers, footers, captions |
 | `--rule` | Lines and dividers |
-| `--accent` | The highlight: emphasis, markers, chapter slides |
-| `--accent-2` | A second highlight for themes that pair two |
+| `--accent` | Emphasis: highlighted words, markers, chapter slides; notes, tips and important callouts |
+| `--accent-2` | The accent's companion: gradients, a contrast to the accent, definitions |
+| `--accent-3` | Attention: warnings and cautions, and a colour that pops, used sparingly. It marks things (bars, shapes) and need not be readable as text, so it may be a yellow |
 | `--on-accent` | Text set on the accent, such as a chapter slide's title |
 
 Themes may mix them (for example a light tint of the accent), and read the other variant as `--inverse-bg`, `--inverse-ink`, `--inverse-accent` and so on.
@@ -71,6 +72,7 @@ description = "Sea blue and rust on chalk white."
 "--rule" = "#c9d7e2"
 "--accent" = "#0a6aa8"
 "--accent-2" = "#b45309"
+"--accent-3" = "#c99700"
 "--on-accent" = "#ffffff"
 
 [dark]
@@ -82,6 +84,7 @@ description = "Sea blue and rust on chalk white."
 "--rule" = "#24384b"
 "--accent" = "#5fb3f0"
 "--accent-2" = "#f59e5b"
+"--accent-3" = "#f2c94c"
 "--on-accent" = "#0d1a24"
 ```
 

package/docs/site/content/theme-authoring.md

@@ -48,6 +48,7 @@ title = "Blue notebook"
 "--rule" = "#dbe3ee"
 "--accent" = "#2455c7"
 "--accent-2" = "#17625c"
+"--accent-3" = "#c99700"
 "--on-accent" = "#ffffff"
 
 [dark]
@@ -59,6 +60,7 @@ title = "Blue notebook"
 "--rule" = "#24354d"
 "--accent" = "#7aa2ff"
 "--accent-2" = "#5ec4b6"
+"--accent-3" = "#f2c94c"
 "--on-accent" = "#0f1a2b"
 ```
 
@@ -76,11 +78,12 @@ The folder must be called `notebook` to match `id`. Use it with `palette: notebo
 | `--ink-soft` | Body text |
 | `--muted` | Secondary labels |
 | `--rule` | Borders |
-| `--accent` | Main highlight |
-| `--accent-2` | Secondary highlight |
+| `--accent` | Emphasis; notes, tips and important callouts |
+| `--accent-2` | The accent's companion: gradients, a contrast to the accent |
+| `--accent-3` | Attention: warnings and cautions. Use it sparingly, for bars and shapes, never as text: it may be a yellow |
 | `--on-accent` | Text placed on an accent background |
 
-A theme has no colours of its own: it uses these, and mixes of them, so every palette repaints it. For an inverted slide it uses the palette's other version, as `--inverse-bg`, `--inverse-ink`, `--inverse-accent` and so on:
+A theme has no colours of its own: it uses these, and mixes of them, so every palette repaints it. Give each accent the job its name says: a theme that colours callouts colours note, tip and important with `--accent` and warning and caution with `--accent-3`. For an inverted slide it uses the palette's other version, as `--inverse-bg`, `--inverse-ink`, `--inverse-accent` and so on:
 
 ```css
 .slide--focus {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdeck",
-  "version": "3.6.2",
+  "version": "3.7.0",
   "type": "module",
   "description": "Write slides as a plain text file, present them in the browser, share them as one HTML file or PDF.",
   "license": "MIT",

package/skills/write-slides/SKILL.md

@@ -142,7 +142,7 @@ To see slides yourself, if you can read pictures, run `mdeck snapshot <deck>.md
 
 When the user wants a look the built-in themes and palettes do not give (their institute's colours, a font, the style of a poster or picture), first run `mdeck themes search` or `mdeck palettes search` (with a word or two): someone may have shared it, and `mdeck themes install <theme> <deck>.md` (with its palette) or `mdeck palettes install <palette> <deck>.md` puts it beside the deck, so the slide folder carries it. Otherwise make it as an extension in `extensions/` beside the deck, never as styling on single slides. Read `extensions.md` from the reference folder first; it lists every setting.
 
-- **Colours only: a palette.** `extensions/<id>/extension.toml` with `kind = "palette"`, and every colour role (`--bg`, `--surface`, `--ink`, `--ink-soft`, `--muted`, `--rule`, `--accent`, `--accent-2`, `--on-accent`) in both `[light]` and `[dark]`. Text colours must stay readable on `--bg` and `--surface` in both variants, because themes use the other variant for inverted slides.
+- **Colours only: a palette.** `extensions/<id>/extension.toml` with `kind = "palette"`, and every colour role (`--bg`, `--surface`, `--ink`, `--ink-soft`, `--muted`, `--rule`, `--accent`, `--accent-2`, `--accent-3`, `--on-accent`) in both `[light]` and `[dark]`: `--accent` is emphasis, `--accent-2` its companion, `--accent-3` attention (warnings; it may be too light for text, such as a yellow). Set all of them. Text colours must stay readable on `--bg` and `--surface` in both variants, because themes use the other variant for inverted slides.
 - **Fonts, sizes, spacing or arrangement: a theme.** Copy the folder of the closest built-in theme (`assets/extensions/themes/<id>/` in the mdeck repository or in `$(npm root -g)/mdeck/`) to `extensions/<new-id>/`, change `id` and `title`, then its tokens and `styles.css`. A theme takes no colours of its own: it names its default `palette`, and the colours come from palettes.
 - **Use it:** set `theme:` and `palette:` in the deck settings. `mdeck list <deck>.md` must show it as local, and `mdeck check <deck>.md` reports any mistake in its `extension.toml`.
 - **Hand over:** tell the user to run `mdeck design <deck>.md` (or `mdeck design <folder>` when there is no deck yet). It shows the look on a sample deck with every kind of slide, light and dark, and lets them fine-tune colours, fonts and sizes there.

package/src/build/check.js

@@ -26,6 +26,7 @@ export function checkDeck(slidesPath, registry, source = readFileSync(slidesPath
   for (const record of Object.values(registry.palettes)) {
     if (record.source !== 'local') continue
     for (const problem of paletteProblems(record.manifest)) diagnostics.push({ severity: 'warning', code: 'palette-contrast', message: `Palette "${record.id}", ${problem}`, line: 1, column: 1 })
+    for (const role of record.manifest.fallbacks ?? []) diagnostics.push({ severity: 'warning', code: 'palette-fallback', message: `Palette "${record.id}" sets no ${role}, so it gets mdeck's amber; give it a colour of its own in [light] and [dark]`, line: 1, column: 1 })
   }
   // The deck's drawings file: readable, and only for slides that still exist.
   const inkPath = inkFileFor(resolve(slidesPath))

package/src/cli/themes.js

@@ -27,7 +27,7 @@ function looksOf(registry, catalogue) {
   const palettes = manifestsOf(registry, 'palette')
   // Each theme's icon for the gallery's list (see renderPreviews).
   const icons = new Map(catalogue.themes.map(entry => [entry.id, entry.icon]))
-  const colours = tokens => Object.fromEntries(['--bg', '--surface', '--ink', '--accent', '--accent-2'].map(key => [key, tokens?.[key] ?? null]))
+  const colours = tokens => Object.fromEntries(['--bg', '--surface', '--ink', '--accent', '--accent-2', '--accent-3'].map(key => [key, tokens?.[key] ?? null]))
   return {
     mdeck: VERSION,
     themes: Object.values(manifestsOf(registry, 'theme')).map(theme => ({ id: theme.id, title: theme.title, description: theme.description ?? '', builtIn: builtIn.has(theme.id + ':t'),

package/src/components/callout.css

@@ -1,11 +1,6 @@
-:root {
-  --callout-note:      #0969da;
-  --callout-tip:       #1a7f37;
-  --callout-important: #8250df;
-  --callout-warning:   #eab308;
-  --callout-caution:   #cf222e;
-}
-
+/* Callouts take the palette's accents by what they mean: a note, a tip and
+   something important are emphasis, in the accent; a warning and a caution
+   call for attention, in the third accent. */
 .callout {
   border-left: 4px solid var(--rule);
   padding: 20px 28px;
@@ -21,20 +16,15 @@
 }
 .callout p { margin: 0; color: var(--ink-soft); padding-left: 28px; }
 
-.callout-note      { border-left-color: var(--callout-note); }
-.callout-tip       { border-left-color: var(--callout-tip); }
-.callout-important { border-left-color: var(--callout-important); }
-.callout-warning   { border-left-color: var(--callout-warning); }
-.callout-caution   { border-left-color: var(--callout-caution); }
+.callout:is(.callout-note, .callout-tip, .callout-important) { border-left-color: var(--accent); }
+.callout:is(.callout-warning, .callout-caution)              { border-left-color: var(--accent-3); }
 
-/* Titles are text: the signal colour mixed with the text colour, darker on
-   light slides and lighter on dark ones, so they can be read on both. The
-   yellow of a warning needs more of the text colour. */
-.callout-note      .callout-title { color: color-mix(in oklab, var(--callout-note) 65%, var(--ink)); }
-.callout-tip       .callout-title { color: color-mix(in oklab, var(--callout-tip) 65%, var(--ink)); }
-.callout-important .callout-title { color: color-mix(in oklab, var(--callout-important) 65%, var(--ink)); }
-.callout-warning   .callout-title { color: color-mix(in oklab, var(--callout-warning) 45%, var(--ink)); }
-.callout-caution   .callout-title { color: color-mix(in oklab, var(--callout-caution) 65%, var(--ink)); }
+/* Titles are text: the accent mixed with the text colour, darker on light
+   slides and lighter on dark ones, so they can be read on both. The third
+   accent is a marker colour that need not be readable as text (a yellow, say),
+   so it gets more of the text colour. */
+.callout:is(.callout-note, .callout-tip, .callout-important) .callout-title { color: color-mix(in oklab, var(--accent) 65%, var(--ink)); }
+.callout:is(.callout-warning, .callout-caution) .callout-title              { color: color-mix(in oklab, var(--accent-3) 45%, var(--ink)); }
 
 /* Blocks for lectures, in every theme. Theorems, lemmas and corollaries in
    the accent with the statement in italics, definitions in the second

package/src/editor/components/PalettePicker.jsx

@@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from 'preact/hooks'
 import { Icon } from '../../components/Icon.jsx'
 
 export function Swatches({ tokens = {} }) {
-  return <span class="swatches">{['--bg', '--surface', '--rule', '--accent', '--accent-2', '--ink'].map(key => tokens[key] ? <i key={key} style={{ background: tokens[key] }} /> : null)}</span>
+  return <span class="swatches">{['--bg', '--surface', '--rule', '--accent', '--accent-2', '--accent-3', '--ink'].map(key => tokens[key] ? <i key={key} style={{ background: tokens[key] }} /> : null)}</span>
 }
 
 // The palettes a theme offers, each with its colours in the light or dark

package/src/editor/extensions.js

@@ -7,8 +7,8 @@ export const ID_RE = /^[a-z][a-z0-9-]*$/
 export { COLOR_ROLES as CORE_TOKENS } from '../extensions/tokens.js'
 // Readable colours a new palette starts from.
 const STARTER_COLORS = {
-  light: { '--bg': '#ffffff', '--surface': '#f2f2f2', '--ink': '#111111', '--ink-soft': '#333333', '--muted': '#666666', '--rule': '#dadada', '--accent': '#0b6bcb', '--accent-2': '#c2410c', '--on-accent': '#ffffff' },
-  dark: { '--bg': '#111111', '--surface': '#1e1e1e', '--ink': '#f2f2f2', '--ink-soft': '#cfcfcf', '--muted': '#8f8f8f', '--rule': '#2e2e2e', '--accent': '#6aaeff', '--accent-2': '#fb923c', '--on-accent': '#111111' },
+  light: { '--bg': '#ffffff', '--surface': '#f2f2f2', '--ink': '#111111', '--ink-soft': '#333333', '--muted': '#666666', '--rule': '#dadada', '--accent': '#0b6bcb', '--accent-2': '#c2410c', '--accent-3': '#e0a100', '--on-accent': '#ffffff' },
+  dark: { '--bg': '#111111', '--surface': '#1e1e1e', '--ink': '#f2f2f2', '--ink-soft': '#cfcfcf', '--muted': '#8f8f8f', '--rule': '#2e2e2e', '--accent': '#6aaeff', '--accent-2': '#fb923c', '--accent-3': '#f5c542', '--on-accent': '#111111' },
 }
 
 const entries = table => Object.entries(table ?? {}).map(([name, value]) => ({ name, ...(value && typeof value === 'object' && !Array.isArray(value) ? value : { value }) }))

package/src/extensions/contrast.js

@@ -35,6 +35,8 @@ const RULES = [
   ['--muted', '--bg', 4.5, 'muted text'],
   ['--accent', '--bg', 3, 'the accent'],
   ['--accent-2', '--bg', 3, 'the second accent'],
+  // A marker (bars, shapes), not text: it has to be seen, not read.
+  ['--accent-3', '--bg', 1.5, 'the third accent'],
   ['--on-accent', '--accent', 3, 'text on the accent'],
 ]
 
@@ -48,7 +50,7 @@ export function paletteProblems(palette) {
   for (const appearance of ['light', 'dark']) {
     const tokens = palette[appearance] ?? {}
     for (const [fore, back, minimum, what] of RULES) {
-      if (palette.theme && (fore === '--accent' || fore === '--accent-2')) continue
+      if (palette.theme && (fore === '--accent' || fore === '--accent-2' || fore === '--accent-3')) continue
       const ratio = contrast(tokens[fore], tokens[back])
       if (ratio != null && ratio < minimum) problems.push(`${appearance}: ${what} (${fore} on ${back}) has a contrast of ${ratio.toFixed(1)}:1; at least ${minimum}:1 is needed`)
     }

package/src/extensions/manifest.js

@@ -4,7 +4,7 @@
 import { existsSync } from 'node:fs'
 import { resolve, relative, isAbsolute, sep } from 'node:path'
 import { parse as parseToml, TomlError } from 'smol-toml'
-import { TOKEN_NAME_RE, COLOR_ROLES, APPEARANCES } from './tokens.js'
+import { TOKEN_NAME_RE, COLOR_ROLES, COLOR_FALLBACKS, APPEARANCES } from './tokens.js'
 import { propertyErrors } from '../layouts/layoutProps.js'
 
 export const SCHEMA_VERSION = 1
@@ -247,12 +247,16 @@ function validateGuide(table, fail) {
 function validatePalette(raw, shared, fail) {
   if (raw.theme != null && (typeof raw.theme !== 'string' || !ID_RE.test(raw.theme))) fail('theme must be the id of the only theme that may use this palette', 'theme')
   const variants = {}
+  const fallbacks = new Set()
   for (const appearance of APPEARANCES) {
     if (!isPlainObject(raw[appearance])) fail(`a [${appearance}] table with the ${appearance} colours is required`, appearance)
     const tokens = validateTokens(raw[appearance], appearance, fail, { required: true })
-    const missing = COLOR_ROLES.filter(role => !Object.hasOwn(tokens, role))
+    const missing = COLOR_ROLES.filter(role => !Object.hasOwn(tokens, role) && !COLOR_FALLBACKS[role])
     if (missing.length) fail(`missing colours: ${missing.join(', ')}`, appearance)
+    for (const [role, values] of Object.entries(COLOR_FALLBACKS)) {
+      if (!Object.hasOwn(tokens, role)) { tokens[role] = values[appearance]; fallbacks.add(role) }
+    }
     variants[appearance] = tokens
   }
-  return { ...shared, ...(raw.theme ? { theme: raw.theme } : {}), light: variants.light, dark: variants.dark }
+  return { ...shared, ...(raw.theme ? { theme: raw.theme } : {}), light: variants.light, dark: variants.dark, ...(fallbacks.size ? { fallbacks: [...fallbacks] } : {}) }
 }

package/src/extensions/packages.js

@@ -74,6 +74,9 @@ export function checkPackage({ kind, id, files }, { published = false } = {}) {
   }
   if (record.kind !== kind) fail(`${id}/extension.toml says kind = "${record.kind}", but it is in the ${kind}s`)
   if (published) for (const key of ['version', 'author', 'license']) if (!record.package?.[key]) fail(`The ${kind} ${id}: ${key} is required in the theme repository`)
+  // Palettes made before a colour existed get mdeck's fallback; a new one in
+  // the repository sets every colour itself.
+  if (published && record.manifest.fallbacks?.length) fail(`The palette ${id}: ${record.manifest.fallbacks.join(', ')} is required in the theme repository`)
   if (kind === 'theme') {
     for (const url of record.manifest.fonts) if (!FONT_HOSTS.some(host => url.startsWith(host))) fail(`The theme ${id} loads fonts from ${url}; allowed are ${FONT_HOSTS.join(', ')}`)
     checkCss(files['styles.css'] ?? '', `The theme ${id}: styles.css`)

package/src/extensions/tokens.js

@@ -9,8 +9,16 @@ export function tokensToCss(tokens = {}, selector = ':root') {
 }
 
 // The colours every palette variant defines. Themes use only these (and
-// mixes of them), so any palette fits any theme.
-export const COLOR_ROLES = ['--bg', '--surface', '--ink', '--ink-soft', '--muted', '--rule', '--accent', '--accent-2', '--on-accent']
+// mixes of them), so any palette fits any theme. The three accents mean
+// something: --accent is emphasis (and notes, tips, important callouts),
+// --accent-2 its companion (gradients, a contrast to the accent), --accent-3
+// attention (warnings and cautions), used sparingly; it marks things and
+// need not be readable as text.
+export const COLOR_ROLES = ['--bg', '--surface', '--ink', '--ink-soft', '--muted', '--rule', '--accent', '--accent-2', '--accent-3', '--on-accent']
+// Colours a palette may leave out, and what it gets instead: palettes made
+// before the third accent get an amber that calls for attention in light and
+// dark alike (`mdeck check` suggests setting one's own).
+export const COLOR_FALLBACKS = { '--accent-3': { light: '#d99a00', dark: '#f5c542' } }
 export const APPEARANCES = ['light', 'dark']
 
 /**

package/src/live/client.js

@@ -237,7 +237,7 @@ export function latestByDevice(messages) {
 // The deck's look as the answer page needs it: theme variables, font
 // stylesheets and the style of a slide heading, read from the page that shows
 // the slides (the presenter's current-slide frame, or the deck itself).
-const LOOK_TOKENS = ['--bg', '--ink', '--ink-soft', '--muted', '--rule', '--surface', '--accent', '--accent-2', '--on-accent', '--font-body', '--font-display']
+const LOOK_TOKENS = ['--bg', '--ink', '--ink-soft', '--muted', '--rule', '--surface', '--accent', '--accent-2', '--accent-3', '--on-accent', '--font-body', '--font-display']
 let lookSource = () => document
 export function setLookSource(source) { lookSource = source }
 export function captureLook(doc = lookSource()) {

package/src/runtime/chrome.jsx

@@ -43,7 +43,7 @@ export const S = {
 }
 
 export function PaletteSwatches({ tokens }) {
-  const keys = ['--bg', '--surface', '--rule', '--accent', '--accent-2', '--ink']
+  const keys = ['--bg', '--surface', '--rule', '--accent', '--accent-2', '--accent-3', '--ink']
   return (
     <div style={{ display: 'flex', gap: '2px', alignItems: 'center', flexShrink: 0 }}>
       {keys.map(k => tokens[k]