@diagrammo/dgmo 0.8.14 → 0.8.16

package/docs/guide/colors.md

@@ -4,7 +4,7 @@ Diagrammo uses named colors throughout. There are two ways colors appear in diag
 
 ## Named Colors
 
-Nine color names are available everywhere colors are accepted:
+Eleven color names are available everywhere colors are accepted:
 
 <table>
 <tr><th>Name</th><th>Swatch (Nord)</th></tr>
@@ -17,67 +17,71 @@ Nine color names are available everywhere colors are accepted:
 <tr><td><code>teal</code></td><td><span style="display:inline-block;width:20px;height:20px;background:#8fbcbb;border-radius:3px;vertical-align:middle"></span></td></tr>
 <tr><td><code>cyan</code></td><td><span style="display:inline-block;width:20px;height:20px;background:#88c0d0;border-radius:3px;vertical-align:middle"></span></td></tr>
 <tr><td><code>gray</code></td><td><span style="display:inline-block;width:20px;height:20px;background:#4c566a;border-radius:3px;vertical-align:middle"></span></td></tr>
+<tr><td><code>black</code></td><td><span style="display:inline-block;width:20px;height:20px;background:#2e3440;border-radius:3px;vertical-align:middle"></span></td></tr>
+<tr><td><code>white</code></td><td><span style="display:inline-block;width:20px;height:20px;background:#e5e9f0;border-radius:3px;vertical-align:middle;border:1px solid #d8dee9"></span></td></tr>
 </table>
 
+`black` and `white` are theme-stable — each palette picks near-darkest / near-lightest values that stay distinct from the canvas.
+
 Swatches above use Nord values. The actual color rendered depends on your active color scheme — see [Color Schemes](#color-schemes) below.
 
 ---
 
 ## Color Schemes
 
-Diagrammo includes ten built-in color schemes. Change yours in **Settings**. The same nine color names resolve to different hex values in each scheme. Swatches show the first six colors (red → purple) for light / dark mode.
+Diagrammo includes ten built-in color schemes. Change yours in **Settings**. The same eleven color names resolve to different hex values in each scheme. Swatches show all eleven colors (red → white) for light / dark mode.
 
 <table>
 <tr><th>Scheme</th><th style="text-align:center">Light</th><th style="text-align:center">Dark</th></tr>
 <tr>
   <td><strong>Bold</strong></td>
-  <td><span style="display:inline-flex;gap:2px;background:#ffffff;padding:4px 6px;border-radius:4px;border:1px solid #cccccc"><span style="display:inline-block;width:14px;height:14px;background:#ff0000;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#ff8000;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#ffcc00;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#00cc00;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#0000ff;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#cc00cc;border-radius:2px"></span></span></td>
-  <td><span style="display:inline-flex;gap:2px;background:#000000;padding:4px 6px;border-radius:4px;border:1px solid #333333"><span style="display:inline-block;width:14px;height:14px;background:#ff0000;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#ff8000;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#ffff00;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#00ff00;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#0066ff;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#ff00ff;border-radius:2px"></span></span></td>
+  <td><span style="display:inline-flex;gap:2px;background:#ffffff;padding:4px 6px;border-radius:4px;border:1px solid #cccccc"><span style="display:inline-block;width:14px;height:14px;background:#ff0000;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#ff8000;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#ffcc00;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#00cc00;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#0000ff;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#cc00cc;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#009999;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#00bfff;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#666666;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#000000;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#f0f0f0;border-radius:2px"></span></span></td>
+  <td><span style="display:inline-flex;gap:2px;background:#000000;padding:4px 6px;border-radius:4px;border:1px solid #333333"><span style="display:inline-block;width:14px;height:14px;background:#ff0000;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#ff8000;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#ffff00;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#00ff00;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#0066ff;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#ff00ff;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#00cccc;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#00ffff;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#999999;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#111111;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#ffffff;border-radius:2px"></span></span></td>
 </tr>
 <tr>
   <td><strong>Catppuccin</strong></td>
-  <td><span style="display:inline-flex;gap:2px;background:#eff1f5;padding:4px 6px;border-radius:4px;border:1px solid #ccd0da"><span style="display:inline-block;width:14px;height:14px;background:#d20f39;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#fe640b;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#df8e1d;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#40a02b;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#1e66f5;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#8839ef;border-radius:2px"></span></span></td>
-  <td><span style="display:inline-flex;gap:2px;background:#1e1e2e;padding:4px 6px;border-radius:4px;border:1px solid #45475a"><span style="display:inline-block;width:14px;height:14px;background:#f38ba8;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#fab387;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#f9e2af;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#a6e3a1;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#89b4fa;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#cba6f7;border-radius:2px"></span></span></td>
+  <td><span style="display:inline-flex;gap:2px;background:#eff1f5;padding:4px 6px;border-radius:4px;border:1px solid #ccd0da"><span style="display:inline-block;width:14px;height:14px;background:#d20f39;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#fe640b;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#df8e1d;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#40a02b;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#1e66f5;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#8839ef;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#179299;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#04a5e5;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#9ca0b0;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#4c4f69;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#e6e9ef;border-radius:2px"></span></span></td>
+  <td><span style="display:inline-flex;gap:2px;background:#1e1e2e;padding:4px 6px;border-radius:4px;border:1px solid #45475a"><span style="display:inline-block;width:14px;height:14px;background:#f38ba8;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#fab387;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#f9e2af;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#a6e3a1;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#89b4fa;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#cba6f7;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#94e2d5;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#89dceb;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#a6adc8;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#313244;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#cdd6f4;border-radius:2px"></span></span></td>
 </tr>
 <tr>
   <td><strong>Dracula</strong></td>
-  <td><span style="display:inline-flex;gap:2px;background:#f8f8f2;padding:4px 6px;border-radius:4px;border:1px solid #d8d8d2"><span style="display:inline-block;width:14px;height:14px;background:#ff5555;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#ffb86c;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#f1fa8c;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#50fa7b;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#6272a4;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#bd93f9;border-radius:2px"></span></span></td>
-  <td><span style="display:inline-flex;gap:2px;background:#282a36;padding:4px 6px;border-radius:4px;border:1px solid #6272a4"><span style="display:inline-block;width:14px;height:14px;background:#ff5555;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#ffb86c;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#f1fa8c;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#50fa7b;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#6272a4;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#bd93f9;border-radius:2px"></span></span></td>
+  <td><span style="display:inline-flex;gap:2px;background:#f8f8f2;padding:4px 6px;border-radius:4px;border:1px solid #d8d8d2"><span style="display:inline-block;width:14px;height:14px;background:#ff5555;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#ffb86c;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#f1fa8c;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#50fa7b;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#6272a4;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#bd93f9;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#8be9fd;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#8be9fd;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#6272a4;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#282a36;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#f0f0ec;border-radius:2px"></span></span></td>
+  <td><span style="display:inline-flex;gap:2px;background:#282a36;padding:4px 6px;border-radius:4px;border:1px solid #6272a4"><span style="display:inline-block;width:14px;height:14px;background:#ff5555;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#ffb86c;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#f1fa8c;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#50fa7b;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#6272a4;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#bd93f9;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#8be9fd;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#8be9fd;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#6272a4;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#343746;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#f8f8f2;border-radius:2px"></span></span></td>
 </tr>
 <tr>
   <td><strong>Gruvbox</strong></td>
-  <td><span style="display:inline-flex;gap:2px;background:#fbf1c7;padding:4px 6px;border-radius:4px;border:1px solid #d5c4a1"><span style="display:inline-block;width:14px;height:14px;background:#9d0006;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#af3a03;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#b57614;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#79740e;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#076678;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#8f3f71;border-radius:2px"></span></span></td>
-  <td><span style="display:inline-flex;gap:2px;background:#282828;padding:4px 6px;border-radius:4px;border:1px solid #504945"><span style="display:inline-block;width:14px;height:14px;background:#fb4934;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#fe8019;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#fabd2f;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#b8bb26;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#83a598;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#d3869b;border-radius:2px"></span></span></td>
+  <td><span style="display:inline-flex;gap:2px;background:#fbf1c7;padding:4px 6px;border-radius:4px;border:1px solid #d5c4a1"><span style="display:inline-block;width:14px;height:14px;background:#9d0006;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#af3a03;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#b57614;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#79740e;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#076678;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#8f3f71;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#427b58;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#689d6a;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#7c6f64;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#3c3836;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#ebdbb2;border-radius:2px"></span></span></td>
+  <td><span style="display:inline-flex;gap:2px;background:#282828;padding:4px 6px;border-radius:4px;border:1px solid #504945"><span style="display:inline-block;width:14px;height:14px;background:#fb4934;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#fe8019;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#fabd2f;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#b8bb26;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#83a598;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#d3869b;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#8ec07c;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#8ec07c;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#928374;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#3c3836;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#ebdbb2;border-radius:2px"></span></span></td>
 </tr>
 <tr>
   <td><strong>Monokai</strong></td>
-  <td><span style="display:inline-flex;gap:2px;background:#fafaf8;padding:4px 6px;border-radius:4px;border:1px solid #d4d3cc"><span style="display:inline-block;width:14px;height:14px;background:#f92672;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#fd971f;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#e6db74;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#a6e22e;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#5c7eab;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#ae81ff;border-radius:2px"></span></span></td>
-  <td><span style="display:inline-flex;gap:2px;background:#272822;padding:4px 6px;border-radius:4px;border:1px solid #49483e"><span style="display:inline-block;width:14px;height:14px;background:#f92672;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#fd971f;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#e6db74;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#a6e22e;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#5c7eab;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#ae81ff;border-radius:2px"></span></span></td>
+  <td><span style="display:inline-flex;gap:2px;background:#fafaf8;padding:4px 6px;border-radius:4px;border:1px solid #d4d3cc"><span style="display:inline-block;width:14px;height:14px;background:#f92672;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#fd971f;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#e6db74;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#a6e22e;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#5c7eab;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#ae81ff;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#66d9ef;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#66d9ef;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#75715e;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#272822;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#f0efe8;border-radius:2px"></span></span></td>
+  <td><span style="display:inline-flex;gap:2px;background:#272822;padding:4px 6px;border-radius:4px;border:1px solid #49483e"><span style="display:inline-block;width:14px;height:14px;background:#f92672;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#fd971f;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#e6db74;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#a6e22e;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#5c7eab;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#ae81ff;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#66d9ef;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#66d9ef;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#75715e;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#2d2e27;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#f8f8f2;border-radius:2px"></span></span></td>
 </tr>
 <tr>
   <td><strong>Nord</strong></td>
-  <td><span style="display:inline-flex;gap:2px;background:#eceff4;padding:4px 6px;border-radius:4px;border:1px solid #d8dee9"><span style="display:inline-block;width:14px;height:14px;background:#bf616a;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#d08770;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#ebcb8b;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#a3be8c;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#5e81ac;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#b48ead;border-radius:2px"></span></span></td>
-  <td><span style="display:inline-flex;gap:2px;background:#2e3440;padding:4px 6px;border-radius:4px;border:1px solid #4c566a"><span style="display:inline-block;width:14px;height:14px;background:#bf616a;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#d08770;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#ebcb8b;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#a3be8c;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#5e81ac;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#b48ead;border-radius:2px"></span></span></td>
+  <td><span style="display:inline-flex;gap:2px;background:#eceff4;padding:4px 6px;border-radius:4px;border:1px solid #d8dee9"><span style="display:inline-block;width:14px;height:14px;background:#bf616a;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#d08770;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#ebcb8b;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#a3be8c;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#5e81ac;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#b48ead;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#8fbcbb;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#88c0d0;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#4c566a;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#2e3440;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#e5e9f0;border-radius:2px"></span></span></td>
+  <td><span style="display:inline-flex;gap:2px;background:#2e3440;padding:4px 6px;border-radius:4px;border:1px solid #4c566a"><span style="display:inline-block;width:14px;height:14px;background:#bf616a;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#d08770;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#ebcb8b;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#a3be8c;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#5e81ac;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#b48ead;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#8fbcbb;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#88c0d0;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#4c566a;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#3b4252;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#eceff4;border-radius:2px"></span></span></td>
 </tr>
 <tr>
   <td><strong>One Dark</strong></td>
-  <td><span style="display:inline-flex;gap:2px;background:#fafafa;padding:4px 6px;border-radius:4px;border:1px solid #d0d0d0"><span style="display:inline-block;width:14px;height:14px;background:#e45649;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#c18401;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#c18401;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#50a14f;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#4078f2;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#a626a4;border-radius:2px"></span></span></td>
-  <td><span style="display:inline-flex;gap:2px;background:#282c34;padding:4px 6px;border-radius:4px;border:1px solid #3e4451"><span style="display:inline-block;width:14px;height:14px;background:#e06c75;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#d19a66;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#e5c07b;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#98c379;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#61afef;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#c678dd;border-radius:2px"></span></span></td>
+  <td><span style="display:inline-flex;gap:2px;background:#fafafa;padding:4px 6px;border-radius:4px;border:1px solid #d0d0d0"><span style="display:inline-block;width:14px;height:14px;background:#e45649;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#c18401;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#c18401;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#50a14f;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#4078f2;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#a626a4;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#0184bc;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#0184bc;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#a0a1a7;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#383a42;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#f0f0f0;border-radius:2px"></span></span></td>
+  <td><span style="display:inline-flex;gap:2px;background:#282c34;padding:4px 6px;border-radius:4px;border:1px solid #3e4451"><span style="display:inline-block;width:14px;height:14px;background:#e06c75;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#d19a66;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#e5c07b;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#98c379;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#61afef;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#c678dd;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#56b6c2;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#56b6c2;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#abb2bf;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#21252b;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#abb2bf;border-radius:2px"></span></span></td>
 </tr>
 <tr>
   <td><strong>Rosé Pine</strong></td>
-  <td><span style="display:inline-flex;gap:2px;background:#faf4ed;padding:4px 6px;border-radius:4px;border:1px solid #f2e9e1"><span style="display:inline-block;width:14px;height:14px;background:#b4637a;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#d7827e;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#ea9d34;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#286983;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#56949f;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#907aa9;border-radius:2px"></span></span></td>
-  <td><span style="display:inline-flex;gap:2px;background:#191724;padding:4px 6px;border-radius:4px;border:1px solid #26233a"><span style="display:inline-block;width:14px;height:14px;background:#eb6f92;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#ea9a97;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#f6c177;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#3e8fb0;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#9ccfd8;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#c4a7e7;border-radius:2px"></span></span></td>
+  <td><span style="display:inline-flex;gap:2px;background:#faf4ed;padding:4px 6px;border-radius:4px;border:1px solid #f2e9e1"><span style="display:inline-block;width:14px;height:14px;background:#b4637a;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#d7827e;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#ea9d34;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#286983;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#56949f;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#907aa9;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#56949f;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#56949f;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#9893a5;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#575279;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#fffaf3;border-radius:2px"></span></span></td>
+  <td><span style="display:inline-flex;gap:2px;background:#191724;padding:4px 6px;border-radius:4px;border:1px solid #26233a"><span style="display:inline-block;width:14px;height:14px;background:#eb6f92;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#ea9a97;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#f6c177;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#3e8fb0;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#9ccfd8;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#c4a7e7;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#9ccfd8;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#9ccfd8;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#908caa;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#2a273f;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#e0def4;border-radius:2px"></span></span></td>
 </tr>
 <tr>
   <td><strong>Solarized</strong></td>
-  <td><span style="display:inline-flex;gap:2px;background:#fdf6e3;padding:4px 6px;border-radius:4px;border:1px solid #eee8d5"><span style="display:inline-block;width:14px;height:14px;background:#dc322f;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#cb4b16;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#b58900;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#859900;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#268bd2;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#6c71c4;border-radius:2px"></span></span></td>
-  <td><span style="display:inline-flex;gap:2px;background:#002b36;padding:4px 6px;border-radius:4px;border:1px solid #073642"><span style="display:inline-block;width:14px;height:14px;background:#dc322f;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#cb4b16;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#b58900;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#859900;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#268bd2;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#6c71c4;border-radius:2px"></span></span></td>
+  <td><span style="display:inline-flex;gap:2px;background:#fdf6e3;padding:4px 6px;border-radius:4px;border:1px solid #eee8d5"><span style="display:inline-block;width:14px;height:14px;background:#dc322f;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#cb4b16;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#b58900;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#859900;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#268bd2;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#6c71c4;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#2aa198;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#2aa198;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#93a1a1;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#657b83;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#eee8d5;border-radius:2px"></span></span></td>
+  <td><span style="display:inline-flex;gap:2px;background:#002b36;padding:4px 6px;border-radius:4px;border:1px solid #073642"><span style="display:inline-block;width:14px;height:14px;background:#dc322f;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#cb4b16;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#b58900;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#859900;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#268bd2;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#6c71c4;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#2aa198;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#2aa198;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#586e75;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#073642;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#839496;border-radius:2px"></span></span></td>
 </tr>
 <tr>
   <td><strong>Tokyo Night</strong></td>
-  <td><span style="display:inline-flex;gap:2px;background:#d5d6db;padding:4px 6px;border-radius:4px;border:1px solid #9699a3"><span style="display:inline-block;width:14px;height:14px;background:#f52a65;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#b15c00;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#8c6c3e;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#587539;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#2e7de9;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#7847bd;border-radius:2px"></span></span></td>
-  <td><span style="display:inline-flex;gap:2px;background:#1a1b26;padding:4px 6px;border-radius:4px;border:1px solid #3b4261"><span style="display:inline-block;width:14px;height:14px;background:#f7768e;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#ff9e64;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#e0af68;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#9ece6a;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#7aa2f7;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#bb9af7;border-radius:2px"></span></span></td>
+  <td><span style="display:inline-flex;gap:2px;background:#d5d6db;padding:4px 6px;border-radius:4px;border:1px solid #9699a3"><span style="display:inline-block;width:14px;height:14px;background:#f52a65;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#b15c00;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#8c6c3e;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#587539;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#2e7de9;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#7847bd;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#118c74;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#007197;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#8990b3;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#1a1b26;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#d0d5e3;border-radius:2px"></span></span></td>
+  <td><span style="display:inline-flex;gap:2px;background:#1a1b26;padding:4px 6px;border-radius:4px;border:1px solid #3b4261"><span style="display:inline-block;width:14px;height:14px;background:#f7768e;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#ff9e64;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#e0af68;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#9ece6a;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#7aa2f7;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#bb9af7;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#1abc9c;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#7dcfff;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#565f89;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#292e42;border-radius:2px"></span><span style="display:inline-block;width:14px;height:14px;background:#c0caf5;border-radius:2px"></span></span></td>
 </tr>
 </table>
 

package/docs/language-reference.md

@@ -80,7 +80,9 @@ EntityName | key: value, key2: value2
 Label(colorName)
 ```
 
-- Named palette colors only (no hex codes)
+- **Allowed color names (exactly these 10):** `red`, `orange`, `yellow`, `green`, `blue`, `purple`, `teal`, `cyan`, `lightblue`, `gray`
+- Any other value — including hex codes (`#ff0000`), CSS keywords (`black`, `white`, `pink`), or typos — is a parse error and produces an inline diagnostic in the editor (with a "did you mean?" suggestion when close to a known name)
+- The actual hex value rendered for each name comes from the active palette/theme; users cannot extend or override the allowed list
 - Appears at end of labels, node names, tag values, series names
 - Color is stripped from display text
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diagrammo/dgmo",
-  "version": "0.8.14",
+  "version": "0.8.16",
   "description": "DGMO diagram markup language — parser, renderer, and color system",
   "license": "MIT",
   "type": "module",

package/src/chart.ts

@@ -59,7 +59,7 @@ export interface ParsedChart {
 // Colors
 // ============================================================
 
-import { resolveColor } from './colors';
+import { resolveColorWithDiagnostic } from './colors';
 import type { PaletteColors } from './palettes';
 import { makeDgmoError, formatDgmoError, suggest } from './diagnostics';
 import {
@@ -215,7 +215,14 @@ export function parseChart(
         rawEras.push({
           start: eraMatch[1].trim(),
           afterArrow,
-          color: eraMatch[3] ? resolveColor(eraMatch[3].trim(), palette) : null,
+          color: eraMatch[3]
+            ? (resolveColorWithDiagnostic(
+                eraMatch[3].trim(),
+                lineNumber,
+                result.diagnostics,
+                palette
+              ) ?? null)
+            : null,
           lineNumber,
         });
       }
@@ -278,12 +285,23 @@ export function parseChart(
       }
 
       if (firstToken === 'color') {
-        result.color = resolveColor(value.trim(), palette) ?? undefined;
+        result.color = resolveColorWithDiagnostic(
+          value.trim(),
+          lineNumber,
+          result.diagnostics,
+          palette
+        );
         continue;
       }
 
       if (firstToken === 'series') {
-        const parsed = parseSeriesNames(value, lines, i, palette);
+        const parsed = parseSeriesNames(
+          value,
+          lines,
+          i,
+          palette,
+          result.diagnostics
+        );
         i = parsed.newIndex;
         result.series = parsed.series;
         result.seriesLineNumber = lineNumber;

package/src/class/parser.ts

@@ -1,4 +1,4 @@
-import { resolveColor } from '../colors';
+import { resolveColorWithDiagnostic } from '../colors';
 import type { PaletteColors } from '../palettes';
 import { makeDgmoError, formatDgmoError } from '../diagnostics';
 import {
@@ -302,7 +302,14 @@ export function parseClassDiagram(
       const bracketModifier = classDecl[5] as ClassModifier | undefined;
       const modifier = prefixModifier ?? bracketModifier;
       const colorName = classDecl[6]?.trim();
-      const color = colorName ? resolveColor(colorName, palette) : undefined;
+      const color = colorName
+        ? resolveColorWithDiagnostic(
+            colorName,
+            lineNumber,
+            result.diagnostics,
+            palette
+          )
+        : undefined;
 
       const node = getOrCreateClass(name, lineNumber);
       if (modifier) node.modifier = modifier;

package/src/colors.ts

@@ -36,33 +36,89 @@ export const colorNames: Record<string, string> = {
   purple: nord.nord15,
   teal: nord.nord7,
   cyan: nord.nord8,
-  lightblue: nord.nord8,
   gray: nord.nord3,
+  black: nord.nord0,
+  white: nord.nord6,
 };
 
 /**
- * Resolves a color name to a valid CSS color.
- * When a palette is provided, named colors resolve against its color map first.
- * Hex codes are NOT supported — use named colors only.
- * Unknown names are returned as-is.
+ * The canonical, closed set of color names accepted by the DGMO language.
+ * See `docs/dgmo-language-spec.md` §1.5. Users cannot extend this list —
+ * palettes only provide the per-theme hex values for these names.
+ */
+export const RECOGNIZED_COLOR_NAMES = Object.freeze([
+  'red',
+  'orange',
+  'yellow',
+  'green',
+  'blue',
+  'purple',
+  'teal',
+  'cyan',
+  'gray',
+  'black',
+  'white',
+] as const);
+
+/**
+ * Returns true iff `name` is one of the 11 recognized DGMO color names.
+ */
+export function isRecognizedColorName(name: string): boolean {
+  return Object.prototype.hasOwnProperty.call(colorNames, name.toLowerCase());
+}
+
+/**
+ * Resolves a recognized color name to its hex value for the active palette
+ * (falling back to the built-in Nord defaults). Returns `null` for any
+ * unrecognized input — including hex codes, CSS keywords like `black`,
+ * and typos. Callers MUST treat `null` as a parse error and emit a
+ * diagnostic; do not silently fall back to the raw input.
  */
 export function resolveColor(
   color: string,
   palette?: { colors: Record<string, string> }
 ): string | null {
+  if (!color) return null;
   // Reject hex color codes — only named colors are supported
   if (color.startsWith('#')) return null;
 
   const lower = color.toLowerCase();
+  if (!isRecognizedColorName(lower)) return null;
 
   if (palette) {
     const named = palette.colors[lower];
     if (named) return named;
   }
+  return colorNames[lower];
+}
+
+import type { DgmoError } from './diagnostics';
+import { makeDgmoError, suggest } from './diagnostics';
 
-  if (colorNames[lower]) return colorNames[lower];
-  // Unknown color name — return as-is so callers can detect + warn
-  return color;
+/**
+ * Resolves a color name and pushes a warning diagnostic on failure.
+ * Returns the hex string for valid names, or `undefined` for unknown
+ * input (after pushing a diagnostic). Use this from parsers that have
+ * a diagnostics array and a line number in scope.
+ */
+export function resolveColorWithDiagnostic(
+  color: string,
+  line: number,
+  diagnostics: DgmoError[],
+  palette?: { colors: Record<string, string> }
+): string | undefined {
+  const resolved = resolveColor(color, palette);
+  if (resolved !== null) return resolved;
+  const hint = suggest(color, RECOGNIZED_COLOR_NAMES as readonly string[]);
+  const suggestion = hint ? ` ${hint}` : '';
+  diagnostics.push(
+    makeDgmoError(
+      line,
+      `Unknown color "${color}". Allowed: ${RECOGNIZED_COLOR_NAMES.join(', ')}.${suggestion}`,
+      'warning'
+    )
+  );
+  return undefined;
 }
 
 /** @deprecated Use getSeriesColors(palette) from '@/lib/palettes' instead. */

package/src/d3.ts

@@ -177,7 +177,7 @@ export interface ParsedVisualization {
 // Color Imports
 // ============================================================
 
-import { resolveColor } from './colors';
+import { resolveColorWithDiagnostic } from './colors';
 import type { PaletteColors } from './palettes';
 import { getSeriesColors } from './palettes';
 import { mix } from './palettes/color-utils';
@@ -609,14 +609,24 @@ export function parseVisualization(
       if (result.type === 'arc') {
         const name = groupMatch[1].trim();
         const color = groupMatch[2]
-          ? resolveColor(groupMatch[2].trim(), palette)
+          ? (resolveColorWithDiagnostic(
+              groupMatch[2].trim(),
+              lineNumber,
+              result.diagnostics,
+              palette
+            ) ?? null)
           : null;
         result.arcNodeGroups.push({ name, nodes: [], color, lineNumber });
         currentArcGroup = name;
       } else if (result.type === 'timeline') {
         const name = groupMatch[1].trim();
         const color = groupMatch[2]
-          ? resolveColor(groupMatch[2].trim(), palette)
+          ? (resolveColorWithDiagnostic(
+              groupMatch[2].trim(),
+              lineNumber,
+              result.diagnostics,
+              palette
+            ) ?? null)
           : null;
         result.timelineGroups.push({ name, color, lineNumber });
         currentTimelineGroup = name;
@@ -658,7 +668,12 @@ export function parseVisualization(
         const source = linkMatch[1].trim();
         const target = linkMatch[2].trim();
         const linkColor = linkMatch[3]
-          ? resolveColor(linkMatch[3].trim(), palette)
+          ? (resolveColorWithDiagnostic(
+              linkMatch[3].trim(),
+              lineNumber,
+              result.diagnostics,
+              palette
+            ) ?? null)
           : null;
         result.links.push({
           source,
@@ -701,7 +716,12 @@ export function parseVisualization(
             endDate: eraEntryMatch[2],
             label: eraEntryMatch[3].trim(),
             color: colorAnnotation
-              ? resolveColor(colorAnnotation, palette)
+              ? (resolveColorWithDiagnostic(
+                  colorAnnotation,
+                  lineNumber,
+                  result.diagnostics,
+                  palette
+                ) ?? null)
               : null,
             lineNumber,
           });
@@ -728,7 +748,12 @@ export function parseVisualization(
             date: markerEntryMatch[1],
             label: markerEntryMatch[2].trim(),
             color: colorAnnotation
-              ? resolveColor(colorAnnotation, palette)
+              ? (resolveColorWithDiagnostic(
+                  colorAnnotation,
+                  lineNumber,
+                  result.diagnostics,
+                  palette
+                ) ?? null)
               : null,
             lineNumber,
           });
@@ -766,7 +791,12 @@ export function parseVisualization(
           endDate: eraMatch[2],
           label: eraMatch[3].trim(),
           color: colorAnnotation
-            ? resolveColor(colorAnnotation, palette)
+            ? (resolveColorWithDiagnostic(
+                colorAnnotation,
+                lineNumber,
+                result.diagnostics,
+                palette
+              ) ?? null)
             : null,
           lineNumber,
         });
@@ -783,7 +813,12 @@ export function parseVisualization(
           date: markerMatch[1],
           label: markerMatch[2].trim(),
           color: colorAnnotation
-            ? resolveColor(colorAnnotation, palette)
+            ? (resolveColorWithDiagnostic(
+                colorAnnotation,
+                lineNumber,
+                result.diagnostics,
+                palette
+              ) ?? null)
             : null,
           lineNumber,
         });
@@ -938,20 +973,13 @@ export function parseVisualization(
         const colorName = setDeclMatch[2]?.trim() ?? null;
         let color: string | null = null;
         if (colorName) {
-          const resolved = resolveColor(colorName, palette);
-          if (resolved === null) {
-            warn(
-              lineNumber,
-              `Hex colors are not supported — use named colors (blue, red, green, etc.)`
-            );
-          } else if (resolved.startsWith('#')) {
-            color = resolved;
-          } else {
-            warn(
+          color =
+            resolveColorWithDiagnostic(
+              colorName,
               lineNumber,
-              `Unknown color "${colorName}" on set "${name}". Using auto-assigned color.`
-            );
-          }
+              result.diagnostics,
+              palette
+            ) ?? null;
         }
         const alias = setDeclMatch[3]?.trim() ?? null;
         result.vennSets.push({ name, alias, color, lineNumber });
@@ -1010,7 +1038,12 @@ export function parseVisualization(
         const labelColorMatch = labelPart.match(/^(.+?)\s*\(([^)]+)\)\s*$/);
         const text = labelColorMatch ? labelColorMatch[1].trim() : labelPart;
         const color = labelColorMatch
-          ? resolveColor(labelColorMatch[2].trim(), palette)
+          ? (resolveColorWithDiagnostic(
+              labelColorMatch[2].trim(),
+              lineNumber,
+              result.diagnostics,
+              palette
+            ) ?? null)
           : null;
         const label: QuadrantLabel = { text, color, lineNumber };
 
@@ -1232,7 +1265,12 @@ export function parseVisualization(
         const colorMatch = joinedLabel.match(/^(.+?)\(([^)]+)\)\s*$/);
         const labelPart = colorMatch ? colorMatch[1].trim() : joinedLabel;
         const colorPart = colorMatch
-          ? resolveColor(colorMatch[2].trim(), palette)
+          ? (resolveColorWithDiagnostic(
+              colorMatch[2].trim(),
+              lineNumber,
+              result.diagnostics,
+              palette
+            ) ?? null)
           : null;
 
         if (!labelPart) {
@@ -1333,7 +1371,12 @@ export function parseVisualization(
       // Data line: "Label: value1, value2" or "Label(color): value1, value2"
       const labelPart = colorMatch ? colorMatch[1].trim() : rawKey;
       const colorPart = colorMatch
-        ? resolveColor(colorMatch[2].trim(), palette)
+        ? (resolveColorWithDiagnostic(
+            colorMatch[2].trim(),
+            lineNumber,
+            result.diagnostics,
+            palette
+          ) ?? null)
         : null;
       const valuePart = line.substring(colonIndex + 1).trim();
       const values = valuePart.split(',').map((v) => v.trim());
@@ -6806,19 +6849,13 @@ export async function renderForExport(
     container.style.left = '-9999px';
     document.body.appendChild(container);
 
-    renderKanban(
-      container,
-      kanbanParsed,
-      effectivePalette,
-      theme === 'dark',
-      undefined,
-      undefined,
-      resolveActiveTagGroup(
+    renderKanban(container, kanbanParsed, effectivePalette, theme === 'dark', {
+      activeTagGroup: resolveActiveTagGroup(
         kanbanParsed.tagGroups,
         kanbanParsed.options['active-tag'],
         options?.tagGroup
-      )
-    );
+      ),
+    });
     return finalizeSvgExport(container, theme, effectivePalette, options);
   }
 

package/src/dgmo-mermaid.ts

@@ -3,7 +3,7 @@
 // Parses dgmo quadrant syntax and generates valid Mermaid code.
 // ============================================================
 
-import { resolveColor } from './colors';
+import { resolveColorWithDiagnostic } from './colors';
 import type { DgmoError } from './diagnostics';
 import { makeDgmoError, formatDgmoError } from './diagnostics';
 
@@ -127,7 +127,13 @@ export function parseQuadrant(content: string): ParsedQuadrant {
       if (labelMatch) {
         const label: QuadrantLabel = {
           text: labelMatch[1].trim(),
-          color: labelMatch[2] ? resolveColor(labelMatch[2].trim()) : null,
+          color: labelMatch[2]
+            ? (resolveColorWithDiagnostic(
+                labelMatch[2].trim(),
+                lineNumber,
+                result.diagnostics
+              ) ?? null)
+            : null,
           lineNumber,
         };
         if (position === 'top-right') result.quadrants.topRight = label;