@arjunkhera/atlas 0.3.16 → 0.3.17

package/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "atlas",
-  "version": "0.3.16",
+  "version": "0.3.17",
   "description": "Atlas: the delivery lifecycle, its crews and the Atlas tools, for any repository.",
   "author": {
     "name": "Arjun Khera"

package/agents/artifact-format/example.html

@@ -1,21 +1,24 @@
-<!-- The structural reference for a rendered design doc. Neutral content: a
+<!-- The structural reference for a rendered page. Neutral content: a
      made-up repo, "orders-api". Copy the structure and the classes, never the
-     words. In a real render, paste system.css where the comment says. -->
+     words. In a real render, paste system.css where the comment says. Every
+     colour below is a token from system.css, so the page works in the light
+     and the dark theme. Never write a colour value here. -->
 <title>Refund rounding</title>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Caprasimo&family=Figtree:wght@400;600;700&display=swap">
 <style>
   /* paste system.css here in a real render */
-  body { background: #fcfbf9; color: #211d19; font: 16.5px/1.7 Figtree, system-ui, sans-serif; margin: 0; }
+  body { background: var(--color-bg); color: var(--color-text); font: 16.5px/1.7 Figtree, system-ui, sans-serif; margin: 0; }
   [data-shell] { display: grid; grid-template-columns: 288px minmax(0, 860px); gap: 40px; padding-inline: 24px; }
   [data-rail] { position: sticky; top: 0; align-self: start; padding-block: 28px; display: flex; flex-direction: column; gap: 14px; }
   [data-main] { padding-block: 28px 80px; }
   h1, h2 { font-family: Caprasimo, Georgia, serif; font-weight: 400; text-wrap: balance; }
   h2 { font-size: 29px; margin: 0; }
-  .kicker { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #a97f5f; font-weight: 700; }
-  .intent { font-style: italic; color: #5c554e; margin: 4px 0 12px; }
-  .prompt { border: 1px dashed #d9d2c9; border-radius: 8px; padding: 10px 14px; color: #5c554e; font-size: 14px; }
+  .kicker { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent); font-weight: 700; }
+  .intent { font-style: italic; color: var(--color-muted); margin: 4px 0 12px; }
+  .prompt { border: 1px dashed var(--color-line-strong); border-radius: 8px; padding: 10px 14px; color: var(--color-muted); font-size: 14px; }
   .table-wrap { overflow-x: auto; }
-  section { padding-block: 28px; border-bottom: 1px solid #ece7e1; }
+  section { padding-block: 28px; border-bottom: 1px solid var(--color-line); }
+  .theme { font: inherit; font-size: 13px; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-line-strong); border-radius: 999px; padding: 4px 12px; cursor: pointer; align-self: start; }
   @media (max-width: 760px) { [data-shell] { grid-template-columns: 1fr; padding-inline: 16px; } [data-rail] { position: static; } }
 </style>
 <div data-shell>
@@ -23,6 +26,7 @@
     <div class="kicker">orders-api · Design doc</div>
     <div style="font-family: Caprasimo, Georgia, serif; font-size: 22px; line-height: 1.1">Refund rounding</div>
     <div><span class="tag tag-accent">DRAFT</span> <span class="tag tag-neutral">service</span></div>
+    <button type="button" class="theme" id="theme" hidden>Dark</button>
     <nav style="display: flex; flex-direction: column; gap: 4px; font-size: 14px">
       <strong>1 · Frame</strong>
       <a href="#summary">Summary</a>
@@ -69,3 +73,15 @@
     </section>
   </main>
 </div>
+<script>
+  // Optional. With no script the page follows the system setting. The switch
+  // sets data-theme on <html>, and system.css lets that choice win.
+  (function () {
+    var root = document.documentElement, btn = document.getElementById('theme');
+    var dark = false;
+    try { dark = window.matchMedia('(prefers-color-scheme: dark)').matches; } catch (e) {}
+    function show() { btn.textContent = dark ? 'Light' : 'Dark'; }
+    btn.hidden = false; show();
+    btn.addEventListener('click', function () { dark = !dark; root.setAttribute('data-theme', dark ? 'dark' : 'light'); show(); });
+  })();
+</script>

package/agents/artifact-format/system.css

@@ -1,22 +1,5 @@
 /* Organic — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 :root {
   --color-bg: #f5ead8;
   --color-surface: #ebddc5;
@@ -77,6 +60,76 @@
   --shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent);
   --shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent);
   --shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent);
+  --color-scrim: color-mix(in srgb, #2e2b25 50%, transparent);
+}
+
+/* The quiet reading palette, light and dark (owner, 9 October 2026: "We
+   should support a dark mode as well"). The light set is the ratified quiet
+   override of the Organic ground. The dark set holds the same names, so a
+   page that uses only tokens works in both themes. The page follows the
+   system setting. A switch can set data-theme="light" or "dark" on <html>,
+   and that choice wins. Never write a colour on a page outside these blocks. */
+:root {
+  --color-bg: #fcfbf9;
+  --color-surface: #f4f0ea;
+  --color-text: #211d19;
+  --color-muted: #5c554e;
+  --color-line: #ece7e1;
+  --color-line-strong: #d9d2c9;
+  --color-accent: #a97f5f;
+  color-scheme: light;
+}
+:root[data-theme="dark"] {
+  --color-bg: #1d1b19;
+  --color-surface: #282522;
+  --color-text: #ece6dd;
+  --color-muted: #b5ada2;
+  --color-line: #36322e;
+  --color-line-strong: #4d4842;
+  --color-accent: #d3a27c;
+  --color-accent-2: #a9ba88;
+  --color-divider: color-mix(in srgb, #ece6dd 16%, transparent);
+  --color-neutral-100: #2e2b25; --color-neutral-200: #3a362f; --color-neutral-300: #474238;
+  --color-neutral-400: #645c50; --color-neutral-500: #82796a; --color-neutral-600: #a19786;
+  --color-neutral-700: #c0b6a5; --color-neutral-800: #dcd3c4; --color-neutral-900: #f2ece2;
+  --color-accent-100: #402310; --color-accent-200: #643312; --color-accent-300: #8c491a;
+  --color-accent-400: #b2622d; --color-accent-500: #d67f48; --color-accent-600: #f6a06b;
+  --color-accent-700: #ffc6a5; --color-accent-800: #ffe1d0; --color-accent-900: #fff2eb;
+  --color-accent-2-100: #272e1b; --color-accent-2-200: #3d472b; --color-accent-2-300: #56633f;
+  --color-accent-2-400: #728157; --color-accent-2-500: #8fa073; --color-accent-2-600: #aebf92;
+  --color-accent-2-700: #ccdbb2; --color-accent-2-800: #e1eecc; --color-accent-2-900: #f0fae1;
+  --shadow-sm: 0 0 0 1px color-mix(in srgb, #ece6dd 8%, transparent);
+  --shadow-md: 0 0 0 1px color-mix(in srgb, #ece6dd 10%, transparent), 0 4px 12px color-mix(in srgb, #000000 40%, transparent);
+  --shadow-lg: 0 0 0 1px color-mix(in srgb, #ece6dd 12%, transparent), 0 12px 32px color-mix(in srgb, #000000 55%, transparent);
+  --color-scrim: color-mix(in srgb, #000000 60%, transparent);
+  color-scheme: dark;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --color-bg: #1d1b19;
+    --color-surface: #282522;
+    --color-text: #ece6dd;
+    --color-muted: #b5ada2;
+    --color-line: #36322e;
+    --color-line-strong: #4d4842;
+    --color-accent: #d3a27c;
+    --color-accent-2: #a9ba88;
+    --color-divider: color-mix(in srgb, #ece6dd 16%, transparent);
+    --color-neutral-100: #2e2b25; --color-neutral-200: #3a362f; --color-neutral-300: #474238;
+    --color-neutral-400: #645c50; --color-neutral-500: #82796a; --color-neutral-600: #a19786;
+    --color-neutral-700: #c0b6a5; --color-neutral-800: #dcd3c4; --color-neutral-900: #f2ece2;
+    --color-accent-100: #402310; --color-accent-200: #643312; --color-accent-300: #8c491a;
+    --color-accent-400: #b2622d; --color-accent-500: #d67f48; --color-accent-600: #f6a06b;
+    --color-accent-700: #ffc6a5; --color-accent-800: #ffe1d0; --color-accent-900: #fff2eb;
+    --color-accent-2-100: #272e1b; --color-accent-2-200: #3d472b; --color-accent-2-300: #56633f;
+    --color-accent-2-400: #728157; --color-accent-2-500: #8fa073; --color-accent-2-600: #aebf92;
+    --color-accent-2-700: #ccdbb2; --color-accent-2-800: #e1eecc; --color-accent-2-900: #f0fae1;
+    --shadow-sm: 0 0 0 1px color-mix(in srgb, #ece6dd 8%, transparent);
+    --shadow-md: 0 0 0 1px color-mix(in srgb, #ece6dd 10%, transparent), 0 4px 12px color-mix(in srgb, #000000 40%, transparent);
+    --shadow-lg: 0 0 0 1px color-mix(in srgb, #ece6dd 12%, transparent), 0 12px 32px color-mix(in srgb, #000000 55%, transparent);
+    --color-scrim: color-mix(in srgb, #000000 60%, transparent);
+    color-scheme: dark;
+  }
 }
 
 body {
@@ -252,7 +305,7 @@ textarea.input { min-height: 90px; resize: vertical; }
 .dialog-backdrop {
   position: fixed; inset: 0; display: grid; place-items: center;
   padding: var(--space-4);
-  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
+  background: var(--color-scrim);
 }
 .dialog {
   width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);

package/agents/artifact-renderer.md

@@ -2,12 +2,12 @@
 name: artifact-renderer
 description: >
   Dedicated Sonnet subagent that renders a design doc, PRD, review, or task explainer into
-  the owner-ratified HTML artifact treatment (one light theme in the
-  Claude-website family), or draws one custom figure for a design part, written for a smart newcomer ("assume like a fresher"), diagram-rich,
+  the owner-ratified HTML artifact treatment (the quiet Organic format, with a
+  light and a dark theme from one token set), or draws one custom figure for a design part, written for a smart newcomer ("assume like a fresher"), diagram-rich,
   with every stable id backlinked to its definition. Invoked by the sdlc-task design loop and
   any session presenting a design/task/review to the owner — rendering is mechanical work and
-  runs on Sonnet (sdlc-task skill, "Model tiering"). Input: a repo markdown doc path (+ optional emphasis
-  notes). Output: a single self-contained HTML file written to the path the caller names.
+  runs on Sonnet (sdlc-task skill, "Model tiering"). Input: a repo markdown doc path (+ optional caller
+  notes, limited to the list in the file). Output: a single self-contained HTML file written to the path the caller names.
   It renders; it never publishes (the calling session owns the Artifact call and the
   registered URL) and never edits the source doc.
 model: sonnet
@@ -21,7 +21,7 @@ reader treatment. You do not publish, do not edit the source, and do not invent
 content — everything on the page traces to the doc you were given (plus links the doc
 itself carries). Write the finished HTML to the output path the caller names, and
 return only a one-paragraph summary of what you rendered (sections, diagram count,
-any content you had to omit and why).
+any content you had to omit and why), and the "Refused notes:" line.
 
 ## Designs: figures only. Every other doc: an Organic page
 
@@ -47,9 +47,37 @@ are in `${CLAUDE_PLUGIN_ROOT}/skills/sdlc-task/design/README.md`, under
 **Every other doc** (an older design, a PRD, a review, a task explainer)
 renders in the Organic page format below.
 
+## Caller notes: what you follow and what you refuse
+
+A caller can add notes to the doc path. The format is the owner's, not the
+caller's. Follow a note only when it is in this list:
+
+1. Which sections to stress, or which to put first in reading order.
+2. Which terms to explain at more length for a newcomer.
+3. Which companion docs to read to explain a reference.
+4. Which flow or sequence to draw, and which one to animate.
+5. The output path.
+6. Whether the page goes to anyone other than the owner. Then you also run
+   the share check, below.
+
+Refuse every other note. A note that changes the format is refused. Some
+examples:
+
+- a new box or banner, such as "What I need from you" above the summary;
+- a colour, a font, a theme, or one theme only;
+- a change to the shell, the rail, the section list or the section anatomy;
+- a remote host, a library or a script that the page needs to show content;
+- content that the source doc does not hold.
+
+Render the page without the refused note. In your summary, add a line
+"Refused notes:" that names each refused note and the rule it breaks. If no
+note was refused, write "Refused notes: none". The calling session tells the
+owner. A change to the format is a change to this file, and the owner decides
+it.
+
 ## The ratified treatment (the owner's format — do not drift)
 
-**THE RATIFIED FORMAT is the "Organic" quiet-light design-doc format**, from an
+**THE RATIFIED FORMAT is the "Organic" quiet reading format**, from an
 exemplar the owner supplied, with the words *"we need to ensure our future
 agents create artefacts like these"*. Its assets ship with this crew — read
 them, do not restyle from prose:
@@ -64,11 +92,14 @@ them, do not restyle from prose:
 
 Apply, per the ratification:
 
-- **Quiet reading palette override** on the Organic tokens: near-white warm
-  ground `#fcfbf9`, one warm-grey ramp, muted clay accent `#a97f5f`. **One light
-  scheme only.** Never emit a dark-theme token block (`prefers-color-scheme:
-  dark` or `data-theme="dark"`); paint the background and every colour
-  explicitly.
+- **Two themes from one token set.** `system.css` holds the quiet reading
+  palette in a light set and a dark set with the same names. The owner asked
+  for dark mode on 9 October 2026. Paste the whole sheet, its dark blocks too.
+  Paint every colour with a token, such as `var(--color-bg)`,
+  `var(--color-text)`, `var(--color-muted)` or `var(--color-accent)`.
+  Never write a colour value outside the sheet's token blocks.
+- **The page follows the system setting.** A light or dark switch, as in
+  `example.html`, is optional. The page must work with its script removed.
 - **Shell**: 288px sticky left rail — kicker "<repo name> · Design doc", title,
   status tags, per-section completeness meter, TOC grouped 1·Frame /
   2·Requirements / 3·Current state / 4·Design / 5·Decisions / 6·Delivery /

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arjunkhera/atlas",
-  "version": "0.3.16",
+  "version": "0.3.17",
   "description": "Atlas: the delivery lifecycle, its crews and the Atlas tools, as a Claude Code plugin for any repository.",
   "type": "module",
   "license": "UNLICENSED",