dsh-cds-theme 0.0.0-stage → 0.1.1

package/assets/appearance-icon.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
+  <rect x="2.6" y="2.6" width="10.8" height="10.8" rx="3.2"/>
+  <rect x="5.9" y="5.9" width="4.2" height="4.2" rx="1.4"/>
+</svg>

package/assets/preview.html

@@ -0,0 +1,241 @@
+<!doctype html>
+<html lang="zh">
+<head>
+<meta charset="utf-8">
+<title>「主题定制 / Theme」 settings-nav icon · preview</title>
+<style>
+  :root { color-scheme: light dark; }
+  body {
+    margin: 0;
+    padding: 40px;
+    font: 14px/22px system-ui, -apple-system, "Segoe UI", "PingFang SC", sans-serif;
+    background: #f5f5f5;
+    color: #151515;
+  }
+  h1 { font-size: 18px; font-weight: 600; margin: 0 0 4px; }
+  p.lead { margin: 0 0 28px; color: #616161; max-width: 800px; }
+  h2 { font-size: 14px; font-weight: 600; margin: 30px 0 12px; }
+  .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
+  svg { vertical-align: middle; }
+
+  .light {
+    --page-bg: #fcfcfb; --nav-bg: transparent; --nav-active: #f0efec;
+    --nav-fg: #151515; --muted: #767676; --line: #e8e8e8;
+  }
+  .dark {
+    --page-bg: #151515; --nav-bg: transparent; --nav-active: #20201f;
+    --nav-fg: #f5f5f5; --muted: #85837e; --line: #2c2c2a;
+  }
+
+  .panel {
+    background: var(--page-bg);
+    color: var(--nav-fg);
+    border: 1px solid var(--line);
+    border-radius: 10px;
+    padding: 20px;
+    flex: 1;
+    min-width: 300px;
+  }
+  .panel h3 { margin: 0 0 10px; font-size: 12px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
+  .pair { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; }
+
+  /* One settings-nav entry, copied from the host's own navCell metrics:
+     40px tall, 12px/16px padding, 8px gap, 16px glyph, 14px label. */
+  .nav {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 188px;
+    height: 40px;
+    padding: 9px 16px 9px 12px;
+    border-radius: 8px;
+    font: 400 14px/22px inherit;
+    color: var(--nav-fg);
+    background: var(--nav-bg);
+  }
+  .nav svg { flex: none; }
+  .nav span { min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .nav[data-active="true"] { background: var(--nav-active); }
+
+  .stack { display: flex; flex-direction: column; gap: 2px; }
+  .big { display: flex; align-items: flex-end; gap: 22px; padding: 18px 2px 4px; }
+  .big figure { margin: 0; text-align: center; }
+  .big figcaption { font-size: 11px; color: var(--muted); margin-top: 6px; }
+  .note { color: var(--muted); font-size: 12px; max-width: 640px; margin: 12px 0 0; }
+  .note b { color: var(--nav-fg); }
+
+  .board {
+    background: #fff;
+    border: 1px solid #e8e8e8;
+    border-radius: 10px;
+    padding: 20px;
+    display: flex;
+    gap: 24px;
+    align-items: stretch;
+    flex-wrap: wrap;
+  }
+</style>
+</head>
+<body>
+
+<h1>「主题定制 / Theme」 settings-nav icon</h1>
+<p class="lead">
+  Drawn for the Claude Design System theme's own settings page, in the host icon set's own language:
+  <span class="mono">viewBox="0 0 16 16"</span>, <span class="mono">fill="none"</span>,
+  <span class="mono">stroke="currentColor"</span>, <span class="mono">stroke-linecap/linejoin="round"</span>,
+  <span class="mono">stroke-width</span> 1.3 (Medium rung) / 1 (Regular rung), <span class="mono">aria-hidden="true"</span>.
+  Two nested rounded frames — the outer surface and the shape inside it, concentric. It is the same relation the page's own 同心圆角 rule creates on the menu surface, and it is the one mark in this nav that no host glyph uses: the host ships a gear, a slider row, a knot-ring, a database cylinder and a person.
+</p>
+
+<!-- ======================================================= 1. the two rungs -->
+<h2>1. The two rungs, on the real nav backgrounds</h2>
+<div class="board">
+  <div class="panel light">
+    <h3>Light</h3>
+    <div class="stack">
+      <div class="nav" data-active="true">
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2.6" y="2.6" width="10.8" height="10.8" rx="3.2"/><rect x="5.9" y="5.9" width="4.2" height="4.2" rx="1.4"/></svg>
+        <span>主题定制 · Theme</span>
+      </div>
+      <div class="nav">
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2.6" y="2.6" width="10.8" height="10.8" rx="3.2"/><rect x="5.9" y="5.9" width="4.2" height="4.2" rx="1.4"/></svg>
+        <span>主题定制 · Theme</span>
+      </div>
+    </div>
+    <p class="note">Top: <b>Medium, 1.3</b> — the rung the settings nav actually ships. Bottom: Regular, 1.0.</p>
+    <div class="big">
+      <figure>
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2.6" y="2.6" width="10.8" height="10.8" rx="3.2"/><rect x="5.9" y="5.9" width="4.2" height="4.2" rx="1.4"/></svg>
+        <figcaption>16px</figcaption>
+      </figure>
+      <figure>
+        <svg width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2.6" y="2.6" width="10.8" height="10.8" rx="3.2"/><rect x="5.9" y="5.9" width="4.2" height="4.2" rx="1.4"/></svg>
+        <figcaption>20px</figcaption>
+      </figure>
+      <figure>
+        <svg width="32" height="32" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2.6" y="2.6" width="10.8" height="10.8" rx="3.2"/><rect x="5.9" y="5.9" width="4.2" height="4.2" rx="1.4"/></svg>
+        <figcaption>32px (geometry)</figcaption>
+      </figure>
+    </div>
+  </div>
+
+  <div class="panel dark">
+    <h3>Dark</h3>
+    <div class="stack">
+      <div class="nav" data-active="true">
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2.6" y="2.6" width="10.8" height="10.8" rx="3.2"/><rect x="5.9" y="5.9" width="4.2" height="4.2" rx="1.4"/></svg>
+        <span>主题定制 · Theme</span>
+      </div>
+      <div class="nav">
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2.6" y="2.6" width="10.8" height="10.8" rx="3.2"/><rect x="5.9" y="5.9" width="4.2" height="4.2" rx="1.4"/></svg>
+        <span>主题定制 · Theme</span>
+      </div>
+    </div>
+    <p class="note">Pure <span class="mono">currentColor</span>: it takes the nav row's label colour in both palettes.</p>
+    <div class="big">
+      <figure>
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2.6" y="2.6" width="10.8" height="10.8" rx="3.2"/><rect x="5.9" y="5.9" width="4.2" height="4.2" rx="1.4"/></svg>
+        <figcaption>16px</figcaption>
+      </figure>
+      <figure>
+        <svg width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2.6" y="2.6" width="10.8" height="10.8" rx="3.2"/><rect x="5.9" y="5.9" width="4.2" height="4.2" rx="1.4"/></svg>
+        <figcaption>20px</figcaption>
+      </figure>
+      <figure>
+        <svg width="32" height="32" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2.6" y="2.6" width="10.8" height="10.8" rx="3.2"/><rect x="5.9" y="5.9" width="4.2" height="4.2" rx="1.4"/></svg>
+        <figcaption>32px</figcaption>
+      </figure>
+    </div>
+  </div>
+</div>
+
+<!-- =================================================== 2. before / after -->
+<h2>2. Before / after in the real nav column</h2>
+<div class="board">
+  <div class="panel light">
+    <h3>Light — nav (188px column)</h3>
+    <div class="stack">
+      <div class="nav"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"><circle cx="6" cy="5.4" r="2.1"/><path d="M1 14.2c0-2.4 2.1-3.6 5-3.6s5 1.2 5 3.6"/></svg><span>账户 · Account</span></div>
+      <div class="nav"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"><circle cx="8" cy="8" r="2.1"/><path d="M8 1.6v1.9M8 12.5v1.9M1.6 8h1.9M12.5 8h1.9M3.5 3.5l1.35 1.35M11.15 11.15l1.35 1.35M12.5 3.5l-1.35 1.35M4.85 11.15L3.5 12.5"/></svg><span>通用 · General</span></div>
+      <div class="nav" data-active="true"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2.6" y="2.6" width="10.8" height="10.8" rx="3.2"/><rect x="5.9" y="5.9" width="4.2" height="4.2" rx="1.4"/></svg><span>主题定制 · Theme</span></div>
+      <div class="nav"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"><rect x="2" y="2" width="12" height="12" rx="2.5"/><path d="M4.6 10.3V8M8 10.3V5.7M11.4 10.3V7"/></svg><span>模型 · Models</span></div>
+    </div>
+    <p class="note">
+      <b>Before:</b> the theme page showed the same gear as 通用 — the host's fallback branch for a section id it
+      does not know. <b>After:</b> only the theme page has this glyph; every other entry keeps its own.
+    </p>
+  </div>
+
+  <div class="panel dark">
+    <h3>Dark — nav (188px column)</h3>
+    <div class="stack">
+      <div class="nav"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"><circle cx="6" cy="5.4" r="2.1"/><path d="M1 14.2c0-2.4 2.1-3.6 5-3.6s5 1.2 5 3.6"/></svg><span>账户 · Account</span></div>
+      <div class="nav"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"><circle cx="8" cy="8" r="2.1"/><path d="M8 1.6v1.9M8 12.5v1.9M1.6 8h1.9M12.5 8h1.9M3.5 3.5l1.35 1.35M11.15 11.15l1.35 1.35M12.5 3.5l-1.35 1.35M4.85 11.15L3.5 12.5"/></svg><span>通用 · General</span></div>
+      <div class="nav" data-active="true"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2.6" y="2.6" width="10.8" height="10.8" rx="3.2"/><rect x="5.9" y="5.9" width="4.2" height="4.2" rx="1.4"/></svg><span>主题定制 · Theme</span></div>
+      <div class="nav"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"><rect x="2" y="2" width="12" height="12" rx="2.5"/><path d="M4.6 10.3V8M8 10.3V5.7M11.4 10.3V7"/></svg><span>模型 · Models</span></div>
+    </div>
+  </div>
+</div>
+
+<!-- ===================================================== 3. why this mark -->
+<h2>3. Why this mark</h2>
+<div class="board">
+  <div class="panel light" style="flex:1">
+    <div class="big" style="padding-top:6px">
+      <figure>
+        <svg width="40" height="40" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"><rect x="2.6" y="2.6" width="10.8" height="10.8" rx="3.2"/><rect x="5.9" y="5.9" width="4.2" height="4.2" rx="1.4"/></svg>
+        <figcaption>ours: nested frames</figcaption>
+      </figure>
+      <figure>
+        <svg width="40" height="40" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"><circle cx="4.97065" cy="7.66401" r="1.35151"/><circle cx="10.6596" cy="12.4091" r="1.35151"/><circle cx="10.6596" cy="3.59101" r="1.35151"/><path d="M3.25 7.16357C3.20417 7.32247 3.17778 7.48993 3.17773 7.66357C3.17773 7.83698 3.20336 8.00486 3.24902 8.16357H1.85742V7.16357H3.25ZM14.1426 8.16357H6.71484C6.76052 8.00485 6.78613 7.837 6.78613 7.66357C6.78609 7.48991 6.75971 7.32249 6.71387 7.16357H14.1426V8.16357ZM9.1377 11.9092C9.08596 12.0666 9.05668 12.2344 9.05664 12.4092C9.05664 12.5838 9.08606 12.7518 9.1377 12.9092H1.85742V11.9092H9.1377ZM14.1426 12.9092H12.1816C12.2332 12.7519 12.2617 12.5838 12.2617 12.4092C12.2617 12.2345 12.2333 12.0666 12.1816 11.9092H14.1426V12.9092ZM9.1123 3.09106C9.06138 3.24865 9.03324 3.41653 9.0332 3.59106C9.0332 3.76549 9.06148 3.93355 9.1123 4.09106H1.85742V3.09106H9.1123ZM14.1426 4.09106H12.207C12.2578 3.93358 12.2861 3.76545 12.2861 3.59106C12.2861 3.41657 12.2579 3.24862 12.207 3.09106H14.1426V4.09106Z"/></svg>
+        <figcaption>the 插件 glyph — THE COLLISION (three tracks + knobs)</figcaption>
+      </figure>
+      <figure>
+        <svg width="40" height="40" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"><circle cx="8" cy="8" r="2.1"/><path d="M8 1.6v1.9M8 12.5v1.9M1.6 8h1.9M12.5 8h1.9M3.5 3.5l1.35 1.35M11.15 11.15l1.35 1.35M12.5 3.5l-1.35 1.35M4.85 11.15L3.5 12.5"/></svg>
+        <figcaption>通用: the gear</figcaption>
+      </figure>
+      <figure>
+        <svg width="40" height="40" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"><circle cx="6" cy="5.4" r="2.1"/><path d="M1 14.2c0-2.4 2.1-3.6 5-3.6s5 1.2 5 3.6"/></svg>
+        <figcaption>账户: person</figcaption>
+      </figure>
+    </div>
+    <p class="note">
+      <b>Why this shape.</b> The first design was a three-track slider triptych — and the host's own
+      <span class="mono">IconPersonalizationOutlineMedium</span>, the glyph for the 插件 entry, is <i>also</i> three
+      tracks with round knobs. Two entries in one nav column showed the same sliders, which the user reported twice.
+      That motif belongs to 插件 now. The replacement is two nested rounded frames: outer surface, inner shape, equal
+      gap, tighter inner corner — the 同心圆角 relation this theme applies to the menu material, and the same
+      two-surface idea as the plugin's own list artwork.
+    </p>
+    <p class="note">
+      <b>Why it cannot be confused.</b> Measured against all five shipped nav glyphs (gear, sliders, knot-ring,
+      database cylinder, person): every one is built from paths and circles — <b>no rectangles at all</b> across all
+      five. A concentric pair of axis-aligned rounded rectangles appears in none of them.
+    </p>
+    <p class="note">
+      <b>Rejected candidates</b>, each rendered at the real 16px rung on both palettes: a palette / swatch-fan (two
+      offset chips collapsed into the host's “copy file” glyph; three chips read as dice); a 2×2 swatch grid (read
+      as the app-launcher grid); a three-circle palette (read as the “users” glyph above).
+    </p>
+  </div>
+</div>
+
+<!-- ================================================= 4. what the host does -->
+<h2>4. How it gets there</h2>
+<div class="board">
+  <div class="panel light" style="flex:1">
+    <p class="note" style="margin-top:0">
+      The host's <span class="mono">navIcon(id)</span> is a hardcoded if-chain that ends in the gear for any id it
+      does not know, so a slot registration cannot supply an icon. The plugin therefore finds the nav button
+      structurally — the settings dialog is <span class="mono">[data-shortcut-modal="settings"]</span>, the entry is
+      the button whose label span equals our section label — inserts this SVG (marked
+      <span class="mono">data-cds-appearance-icon</span>) before the host's own, and hides the host glyph with an
+      inline <span class="mono">display: none</span>. Both mutations are undone on dispose; a host whose nav is
+      missing or renamed keeps its own gear untouched.
+    </p>
+  </div>
+</div>
+
+</body>
+</html>