@dfosco/storyboard-react 4.0.0-beta.46 → 4.0.0-beta.48

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@dfosco/storyboard-react",
-  "version": "4.0.0-beta.46",
+  "version": "4.0.0-beta.48",
   "type": "module",
   "dependencies": {
     "@base-ui/react": "^1.4.0",
-    "@dfosco/storyboard-core": "4.0.0-beta.46",
-    "@dfosco/tiny-canvas": "4.0.0-beta.46",
+    "@dfosco/storyboard-core": "4.0.0-beta.48",
+    "@dfosco/tiny-canvas": "4.0.0-beta.48",
     "@neodrag/react": "^2.3.1",
     "glob": "^11.0.0",
     "jsonc-parser": "^3.3.1",

package/src/AuthModal/AuthModal.jsx

@@ -5,6 +5,8 @@
  *   - ViewfinderNew sidebar login button via same event
  */
 import { useState, useEffect, useCallback } from 'react'
+import { Dialog } from '@base-ui/react/dialog'
+import { Button } from '@base-ui/react/button'
 import css from './AuthModal.module.css'
 
 const COMMENTS_TOKEN_KEY = 'sb-comments-token'
@@ -54,75 +56,79 @@ export default function AuthModal() {
     if (e.key === 'Enter') handleSignIn()
   }, [handleSignIn])
 
-  if (!open) return null
-
   const repo = getRepoInfo()
 
   return (
-    <div className={css.overlay} onClick={handleClose}>
-      <div className={css.dialog} onClick={e => e.stopPropagation()}>
-        <button className={css.closeBtn} onClick={handleClose} aria-label="Close">×</button>
-
-        <div className={css.title}>Sign in for comments</div>
-        <div className={css.desc}>
-          Leave comments for other users to see and respond, and react to! Storyboard comments use Discussions as a back-end and require a GitHub PAT to be enabled.
-        </div>
-
-        <hr className={css.separator} />
-
-        <div className={css.tokenCard}>
-          <div className={css.tokenCardTitle}>Fine-grained Personal Access Token</div>
-          <div className={css.tokenCardRow}>
-            <span className={css.tokenCardLabel}>Owner:</span>
-            <code className={css.tokenCardCode}>{repo.owner}</code>
-          </div>
-          <div className={css.tokenCardRow}>
-            <span className={css.tokenCardLabel}>Expiration:</span>
-            <code className={css.tokenCardCode}>366 days</code>
-            <span className={css.tokenCardHint}>(recommended)</span>
-          </div>
-          <div className={css.tokenCardRow}>
-            <span className={css.tokenCardLabel}>Repository access:</span>
-            <code className={css.tokenCardCode}>Only select repositories &gt; {repo.owner}/{repo.name}</code>
-          </div>
-          <div className={css.tokenCardRow}>
-            <span className={css.tokenCardLabel}>Permissions:</span>
-            <code className={css.tokenCardCode}>Repositories &gt; Discussions &gt; Access: Read and Write</code>
-          </div>
-        </div>
-
-        <a
-          className={css.tokenLink}
-          href="https://github.com/settings/personal-access-tokens/new"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Create a GitHub Fine-Grained Personal Access Token ↗
-        </a>
-
-        <hr className={css.separator} />
-
-        <label className={css.label}>Personal Access Token</label>
-        <input
-          className={css.input}
-          placeholder="github_pat_… or ghp_…"
-          type="password"
-          autoFocus
-          value={tokenValue}
-          onChange={e => setTokenValue(e.target.value)}
-          onKeyDown={handleKeyDown}
-        />
-
-        <div className={css.warning}>
-          <span className={css.warningIcon}>⚠️</span>
-          <span>Comments are an experimental feature and may be unstable.</span>
-        </div>
-
-        <div className={css.actions}>
-          <button className={css.btnSecondary} onClick={handleClose}>Cancel</button>
-          <button className={css.btnPrimary} onClick={handleSignIn}>Sign in</button>
+    <Dialog.Root open={open} onOpenChange={setOpen}>
+      <Dialog.Portal>
+        <Dialog.Backdrop className={css.backdrop} />
+        <div className={css.popupWrap}>
+          <Dialog.Popup className={css.popup}>
+            <Dialog.Title className={css.title}>Sign in for comments</Dialog.Title>
+            <Dialog.Description className={css.desc}>
+              Leave comments for other users to see and respond, and react to! Storyboard
+              comments use Discussions as a back-end and require a GitHub PAT to be enabled.
+            </Dialog.Description>
+            <Dialog.Close className={css.closeBtn} aria-label="Close">×</Dialog.Close>
+
+            <hr className={css.separator} />
+
+            <div className={css.tokenCard}>
+              <p className={css.tokenCardTitle}>Fine-grained Personal Access Token</p>
+              <div className={css.tokenCardRow}>
+                <span className={css.tokenCardLabel}>Owner:</span>
+                <code className={css.tokenCardCode}>{repo.owner}</code>
+              </div>
+              <div className={css.tokenCardRow}>
+                <span className={css.tokenCardLabel}>Expiration:</span>
+                <code className={css.tokenCardCode}>366 days</code>
+                <span className={css.tokenCardHint}>(recommended)</span>
+              </div>
+              <div className={css.tokenCardRow}>
+                <span className={css.tokenCardLabel}>Repository access:</span>
+                <code className={css.tokenCardCode}>Only select repositories &gt; {repo.owner}/{repo.name}</code>
+              </div>
+              <div className={css.tokenCardRow}>
+                <span className={css.tokenCardLabel}>Permissions:</span>
+                <code className={css.tokenCardCode}>Repositories &gt; Discussions &gt; Access: Read and Write</code>
+              </div>
+            </div>
+
+            <a
+              className={css.tokenLink}
+              href="https://github.com/settings/personal-access-tokens/new"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Create a GitHub Fine-Grained Personal Access Token ↗
+            </a>
+
+            <hr className={css.separator} />
+
+            <label className={css.label} htmlFor="auth-modal-token">Personal Access Token</label>
+            <input
+              id="auth-modal-token"
+              className={css.input}
+              placeholder="github_pat_… or ghp_…"
+              type="password"
+              autoFocus
+              value={tokenValue}
+              onChange={e => setTokenValue(e.target.value)}
+              onKeyDown={handleKeyDown}
+            />
+
+            <div className={css.warning}>
+              <span className={css.warningIcon}>⚠️</span>
+              <span>Comments are an experimental feature and may be unstable.</span>
+            </div>
+
+            <div className={css.actions}>
+              <Dialog.Close className={css.btnSecondary}>Cancel</Dialog.Close>
+              <button className={css.btnPrimary} onClick={handleSignIn}>Sign in</button>
+            </div>
+          </Dialog.Popup>
         </div>
-      </div>
-    </div>
+      </Dialog.Portal>
+    </Dialog.Root>
   )
 }

package/src/AuthModal/AuthModal.module.css

@@ -1,22 +1,35 @@
-/* AuthModal — PAT entry dialog */
+/* AuthModal — PAT entry dialog (BaseUI Dialog) */
 
-.overlay {
+.backdrop {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.4);
+  background: var(--overlay-backdrop-bgColor, rgba(0, 0, 0, 0.4));
+  z-index: 10000;
+}
+
+.popupWrap {
+  position: fixed;
+  inset: 0;
+  z-index: 10001;
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 10000;
+  pointer-events: none;
 }
 
-.dialog {
-  background: #fff;
+.popupWrap > * {
+  pointer-events: auto;
+}
+
+.popup {
+  background: var(--bgColor-default);
   border-radius: 12px;
-  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
+  box-shadow: var(--shadow-overlay, 0 16px 48px rgba(0, 0, 0, 0.12));
   padding: 28px;
-  width: 480px;
-  max-width: 90vw;
+  max-width: 620px;
+  max-height: 90vh;
+  overflow-y: auto;
+  color: var(--fgColor-default);
   position: relative;
 }
 
@@ -28,43 +41,43 @@
   border: none;
   font-size: 24px;
   line-height: 1;
-  color: #999;
+  color: var(--fgColor-muted);
   cursor: pointer;
   padding: 4px 8px;
   border-radius: 4px;
 }
 
 .closeBtn:hover {
-  background: #f0f0f0;
-  color: #555;
+  background: var(--bgColor-neutral-muted);
+  color: var(--fgColor-default);
 }
 
 .title {
   font-size: 18px;
   font-weight: 600;
   margin-bottom: 8px;
-  color: #1a1a1a;
+  color: var(--fgColor-default);
   padding-right: 32px;
 }
 
 .desc {
   font-size: 15px;
-  color: #666;
+  color: var(--fgColor-muted);
   margin-bottom: 16px;
   line-height: 1.5;
 }
 
 .separator {
   border: none;
-  border-top: 1px solid #e5e5e5;
+  border-top: 1px solid var(--borderColor-default);
   margin: 16px 0;
 }
 
 /* Token config card — matches GitHub PAT settings screenshot */
 
 .tokenCard {
-  background: #f6f8fa;
-  border: 1px solid #e5e5e5;
+  background: var(--bgColor-muted);
+  border: 1px solid var(--borderColor-default);
   border-radius: 8px;
   padding: 14px 16px;
   margin-bottom: 12px;
@@ -73,7 +86,7 @@
 .tokenCardTitle {
   font-size: 15px;
   font-weight: 600;
-  color: #1a1a1a;
+  color: var(--fgColor-default);
   margin-bottom: 8px;
 }
 
@@ -83,7 +96,7 @@
   gap: 6px;
   font-size: 14px;
   line-height: 1.8;
-  color: #656d76;
+  color: var(--fgColor-muted);
 }
 
 .tokenCardLabel {
@@ -93,20 +106,20 @@
 .tokenCardCode {
   font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
   font-size: 13px;
-  color: #1a1a1a;
-  background: #fff;
+  color: var(--fgColor-default);
+  background: var(--bgColor-default);
   padding: 1px 6px;
   border-radius: 4px;
 }
 
 .tokenCardHint {
-  color: #8b949e;
+  color: var(--fgColor-muted);
 }
 
 .tokenLink {
   display: inline-block;
   font-size: 15px;
-  color: #0969da;
+  color: var(--fgColor-accent);
   text-decoration: none;
   margin-bottom: 4px;
 }
@@ -121,24 +134,31 @@
   display: block;
   font-size: 15px;
   font-weight: 600;
-  color: #1a1a1a;
+  color: var(--fgColor-default);
   margin-bottom: 6px;
 }
 
 .input {
   width: 100%;
   padding: 10px 12px;
-  border: 1px solid #e5e5e5;
+  border: 1px solid var(--borderColor-default);
   border-radius: 6px;
   font-size: 15px;
   font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
   margin-bottom: 16px;
   box-sizing: border-box;
+  background: var(--bgColor-default);
+  color: var(--fgColor-default);
+}
+
+.input::placeholder {
+  color: var(--fgColor-muted);
 }
 
 .input:focus {
   outline: none;
-  border-color: #999;
+  border-color: var(--borderColor-accent-emphasis);
+  box-shadow: 0 0 0 3px var(--borderColor-accent-muted);
 }
 
 /* Warning banner */
@@ -148,11 +168,11 @@
   align-items: center;
   gap: 8px;
   padding: 10px 12px;
-  background: #fff8c5;
-  border: 1px solid #d4a72c;
+  background: var(--bgColor-attention-muted);
+  border: 1px solid var(--borderColor-attention-muted);
   border-radius: 6px;
   font-size: 14px;
-  color: #6a5300;
+  color: var(--fgColor-attention);
   margin-bottom: 8px;
 }
 
@@ -172,29 +192,30 @@
 
 .btnSecondary {
   padding: 8px 16px;
-  background: #fff;
-  border: 1px solid #e5e5e5;
+  background: transparent;
+  border: none;
   border-radius: 6px;
   font-size: 15px;
-  color: #555;
+  color: var(--fgColor-muted);
   cursor: pointer;
 }
 
 .btnSecondary:hover {
-  background: #f5f5f5;
+  color: var(--fgColor-default);
+  background: var(--bgColor-neutral-muted);
 }
 
 .btnPrimary {
-  padding: 8px 16px;
-  background: #1a1a1a;
+  padding: 8px 20px;
+  background: var(--bgColor-accent-emphasis);
   border: none;
   border-radius: 6px;
   font-size: 15px;
   font-weight: 600;
-  color: #fff;
+  color: var(--fgColor-onEmphasis);
   cursor: pointer;
 }
 
 .btnPrimary:hover {
-  background: #333;
+  background: var(--bgColor-accent-emphasis-hover, var(--bgColor-accent-emphasis));
 }

package/src/BranchBar/BranchBar.jsx

@@ -11,6 +11,12 @@ import css from './BranchBar.module.css'
 export default function BranchBar({ basePath }) {
   const [hidden, setHidden] = useState(false)
 
+  const isHiddenByParam = useMemo(() => {
+    if (typeof window === 'undefined') return false
+    const params = new URLSearchParams(window.location.search)
+    return params.has('_sb_hide_branch_bar') || params.has('_sb_embed')
+  }, [])
+
   const currentBranch = useMemo(() => {
     const m = (basePath || '').match(/\/branch--([^/]+)\/?$/)
     return m ? m[1] : 'main'
@@ -26,7 +32,7 @@ export default function BranchBar({ basePath }) {
     return () => observer.disconnect()
   }, [])
 
-  if (!isOnBranch || hidden) return null
+  if (!isOnBranch || hidden || isHiddenByParam) return null
 
   function hideChrome() {
     window.dispatchEvent(new KeyboardEvent('keydown', {

package/src/CommandPalette/CommandPalette.jsx

@@ -17,6 +17,7 @@ import {
   getCommandPaletteConfig,
   getToolbarConfig,
   setTheme,
+  getTheme,
   isExcludedByRoute,
 } from '@dfosco/storyboard-core'
 import CreateDialog from './CreateDialog.jsx'
@@ -675,6 +676,14 @@ export default function StoryboardCommandPalette({ basePath }) {
   const [authorIndex, setAuthorIndex] = useState(new Map())
   const [activePage, setActivePage] = useState('root')
   const [createType, setCreateType] = useState(null)
+  const [currentTheme, setCurrentTheme] = useState(() => getTheme())
+
+  // Keep currentTheme in sync when theme changes
+  useEffect(() => {
+    const handler = (e) => setCurrentTheme(e.detail.theme)
+    document.addEventListener('storyboard:theme:changed', handler)
+    return () => document.removeEventListener('storyboard:theme:changed', handler)
+  }, [])
 
   function handleCreateAction(type) {
     setOpen(false)
@@ -773,7 +782,9 @@ export default function StoryboardCommandPalette({ basePath }) {
       id: `subpage:${menu.id}`,
       items: (menu.options || []).map((opt, i) => ({
         id: `subpage:${menu.id}:${i}`,
-        children: opt.label,
+        children: opt.toolHandler === 'core:theme' && opt.value === currentTheme
+          ? <span style={{ display: 'flex', width: '100%', justifyContent: 'space-between', alignItems: 'center' }}><span>{opt.label}</span><span>✓</span></span>
+          : opt.label,
         keywords: [opt.label, menu.label || menu.id],
         showType: false,
         onClick: () => {
@@ -789,7 +800,7 @@ export default function StoryboardCommandPalette({ basePath }) {
         },
       })),
     })).filter(g => g.items.length > 0)
-  }, [toolMenus])
+  }, [toolMenus, currentTheme])
 
   const filteredItems = useMemo(() => {
     const base = filterItems(items, search)
@@ -903,7 +914,9 @@ export default function StoryboardCommandPalette({ basePath }) {
                   setActivePage('root')
                 }}
               >
-                {opt.label}
+                {opt.toolHandler === 'core:theme' && opt.value === currentTheme
+                  ? <span style={{ display: 'flex', width: '100%', justifyContent: 'space-between', alignItems: 'center' }}><span>{opt.label}</span><span>✓</span></span>
+                  : opt.label}
               </CommandPalette.ListItem>
             ))}
           </CommandPalette.List>

package/src/CommandPalette/command-palette.css

@@ -7,56 +7,101 @@
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
 }
 
+/*
+ * Light mode overrides for react-cmdk.
+ * react-cmdk uses @media (prefers-color-scheme: dark) with Tailwind dark:
+ * utilities. When the OS is dark but the app theme is light, those media
+ * queries fire and the palette renders dark. We override every dark: utility
+ * back to light values when data-color-mode="light".
+ */
+html[data-color-mode="light"] .command-palette .dark\:bg-gray-900,
+html[data-color-mode="light"] .command-palette .dark\:bg-gray-800 {
+  background-color: rgb(255 255 255) !important;
+}
+
+html[data-color-mode="light"] .command-palette .dark\:text-white {
+  color: inherit !important;
+}
+
+html[data-color-mode="light"] .command-palette .dark\:text-gray-600 {
+  color: rgb(107 114 128) !important;
+}
+
+html[data-color-mode="light"] .command-palette .dark\:hover\:bg-gray-800:hover {
+  background-color: rgb(243 244 246) !important;
+}
+
+html[data-color-mode="light"] .command-palette .dark\:hover\:text-gray-300:hover {
+  color: rgb(107 114 128) !important;
+}
+
+html[data-color-mode="light"] .command-palette .dark\:divide-gray-800 > :not([hidden]) ~ :not([hidden]) {
+  border-color: rgb(229 231 235) !important;
+}
+
 /*
  * Dark mode overrides for react-cmdk.
  * react-cmdk uses @media (prefers-color-scheme: dark) internally,
- * but we drive dark mode via data-color-mode on body. Override all
- * colors with a single high-specificity block.
+ * but we drive dark mode via data-color-mode on <html> (set by themeStore).
+ * Primer may also mirror it to <body>, so we target both.
  */
-body[data-color-mode="dark"] .command-palette {
+body[data-color-mode="dark"] .command-palette,
+html[data-color-mode="dark"] .command-palette {
   color-scheme: dark;
 }
 
-body[data-color-mode="dark"] .command-palette .command-palette-content {
+body[data-color-mode="dark"] .command-palette .command-palette-content,
+html[data-color-mode="dark"] .command-palette .command-palette-content {
   color: #e6edf3 !important;
 }
 
 /* Panel background */
-body[data-color-mode="dark"] .command-palette .bg-white {
+body[data-color-mode="dark"] .command-palette .bg-white,
+html[data-color-mode="dark"] .command-palette .bg-white {
   background-color: #2d333b !important;
 }
 
 /* Hover highlight */
-body[data-color-mode="dark"] .command-palette .hover\:bg-gray-100:hover {
+body[data-color-mode="dark"] .command-palette .hover\:bg-gray-100:hover,
+html[data-color-mode="dark"] .command-palette .hover\:bg-gray-100:hover {
   background-color: #373e47 !important;
 }
 
 /* Selected/active item highlight */
-body[data-color-mode="dark"] .command-palette .bg-gray-200\/50 {
+body[data-color-mode="dark"] .command-palette .bg-gray-200\/50,
+html[data-color-mode="dark"] .command-palette .bg-gray-200\/50 {
   background-color: rgba(99, 110, 123, 0.4) !important;
 }
 
 /* Muted text (headings, badges, "Action" labels) */
 body[data-color-mode="dark"] .command-palette .text-gray-400,
-body[data-color-mode="dark"] .command-palette .text-gray-500 {
+body[data-color-mode="dark"] .command-palette .text-gray-500,
+html[data-color-mode="dark"] .command-palette .text-gray-400,
+html[data-color-mode="dark"] .command-palette .text-gray-500 {
   color: #768390 !important;
 }
 
 /* Input text */
-body[data-color-mode="dark"] .command-palette input {
+body[data-color-mode="dark"] .command-palette input,
+html[data-color-mode="dark"] .command-palette input {
   color: #e6edf3 !important;
 }
-body[data-color-mode="dark"] .command-palette .placeholder-gray-500::placeholder {
+body[data-color-mode="dark"] .command-palette .placeholder-gray-500::placeholder,
+html[data-color-mode="dark"] .command-palette .placeholder-gray-500::placeholder {
   color: #636e7b !important;
 }
-body[data-color-mode="dark"] .command-palette .placeholder-gray-500::-moz-placeholder {
+body[data-color-mode="dark"] .command-palette .placeholder-gray-500::-moz-placeholder,
+html[data-color-mode="dark"] .command-palette .placeholder-gray-500::-moz-placeholder {
   color: #636e7b !important;
 }
 
 /* Borders / dividers */
 body[data-color-mode="dark"] .command-palette .divide-y > :not([hidden]) ~ :not([hidden]),
 body[data-color-mode="dark"] .command-palette .border-t,
-body[data-color-mode="dark"] .command-palette .border-b {
+body[data-color-mode="dark"] .command-palette .border-b,
+html[data-color-mode="dark"] .command-palette .divide-y > :not([hidden]) ~ :not([hidden]),
+html[data-color-mode="dark"] .command-palette .border-t,
+html[data-color-mode="dark"] .command-palette .border-b {
   border-color: #444c56 !important;
 }
 

package/src/canvas/CanvasPage.bridge.test.jsx

@@ -283,17 +283,40 @@ describe('CanvasPage canvas bridge', () => {
 })
 
 describe('getCanvasThemeVars', () => {
-  it('returns a distinct dark-dimmed background token', () => {
+  it('returns correct tokens for each theme', () => {
     expect(getCanvasThemeVars('light')['--sb--canvas-bg']).toBe('#f6f8fa')
     expect(getCanvasThemeVars('light')['--tc-bg-muted']).toBe('#f6f8fa')
-    expect(getCanvasThemeVars('dark')['--sb--canvas-bg']).toBe('#161b22')
-    expect(getCanvasThemeVars('dark')['--bgColor-muted']).toBe('#161b22')
-    expect(getCanvasThemeVars('dark')['--tc-bg-muted']).toBe('#161b22')
-    expect(getCanvasThemeVars('dark_dimmed')['--sb--canvas-bg']).toBe('#22272e')
-    expect(getCanvasThemeVars('dark_dimmed')['--bgColor-muted']).toBe('#22272e')
-    expect(getCanvasThemeVars('dark_dimmed')['--tc-bg-muted']).toBe('#22272e')
-    expect(getCanvasThemeVars('dark_dimmed')['--tc-dot-color']).toBe('rgba(205, 217, 229, 0.22)')
-    expect(getCanvasThemeVars('dark_dimmed')['--overlay-backdrop-bgColor']).toBe('rgba(205, 217, 229, 0.22)')
+    expect(getCanvasThemeVars('dark')['--sb--canvas-bg']).toBe('#151b23')
+    expect(getCanvasThemeVars('dark')['--bgColor-muted']).toBe('#151b23')
+    expect(getCanvasThemeVars('dark')['--tc-bg-muted']).toBe('#151b23')
+    expect(getCanvasThemeVars('dark_dimmed')['--sb--canvas-bg']).toBe('#262c36')
+    expect(getCanvasThemeVars('dark_dimmed')['--bgColor-muted']).toBe('#262c36')
+    expect(getCanvasThemeVars('dark_dimmed')['--tc-bg-muted']).toBe('#262c36')
+    expect(getCanvasThemeVars('dark_dimmed')['--tc-dot-color']).toBe('rgba(209, 215, 224, 0.18)')
+    expect(getCanvasThemeVars('dark_dimmed')['--overlay-backdrop-bgColor']).toBe('rgba(209, 215, 224, 0.18)')
+  })
+
+  it('returns distinct values for dark_high_contrast', () => {
+    const vars = getCanvasThemeVars('dark_high_contrast')
+    expect(vars['--bgColor-default']).toBe('#010409')
+    expect(vars['--borderColor-default']).toBe('#b7bdc8')
+    expect(vars['--fgColor-default']).toBe('#ffffff')
+  })
+
+  it('returns distinct values for dark_colorblind', () => {
+    const vars = getCanvasThemeVars('dark_colorblind')
+    expect(vars['--bgColor-default']).toBe('#0d1117')
+    expect(vars['--fgColor-muted']).toBe('#9198a1')
+  })
+
+  it('returns distinct values for light_colorblind', () => {
+    const vars = getCanvasThemeVars('light_colorblind')
+    expect(vars['--bgColor-default']).toBe('#ffffff')
+    expect(vars['--fgColor-muted']).toBe('#59636e')
+  })
+
+  it('falls back to light for unknown themes', () => {
+    expect(getCanvasThemeVars('unknown')).toEqual(getCanvasThemeVars('light'))
   })
 })
 
@@ -304,6 +327,11 @@ describe('getCanvasPrimerAttrs', () => {
       'data-dark-theme': 'dark',
       'data-light-theme': 'light',
     })
+    expect(getCanvasPrimerAttrs('light_colorblind')).toEqual({
+      'data-color-mode': 'light',
+      'data-dark-theme': 'dark',
+      'data-light-theme': 'light_colorblind',
+    })
     expect(getCanvasPrimerAttrs('dark')).toEqual({
       'data-color-mode': 'dark',
       'data-dark-theme': 'dark',
@@ -314,6 +342,16 @@ describe('getCanvasPrimerAttrs', () => {
       'data-dark-theme': 'dark_dimmed',
       'data-light-theme': 'light',
     })
+    expect(getCanvasPrimerAttrs('dark_high_contrast')).toEqual({
+      'data-color-mode': 'dark',
+      'data-dark-theme': 'dark_high_contrast',
+      'data-light-theme': 'light',
+    })
+    expect(getCanvasPrimerAttrs('dark_colorblind')).toEqual({
+      'data-color-mode': 'dark',
+      'data-dark-theme': 'dark_colorblind',
+      'data-light-theme': 'light',
+    })
   })
 })
 

package/src/canvas/CanvasPage.jsx

@@ -2035,7 +2035,7 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
   return (
     <>
       <div className={styles.canvasTitle}>
-        <a href={(import.meta.env?.BASE_URL || '/')} className={`${styles.canvasLogo} smooth-corners`} aria-label="Go to homepage">
+        <a href={(import.meta.env?.BASE_URL || '/')} className={styles.canvasLogo} aria-label="Go to homepage">
           <Icon name="iconoir/key-command" size={16} color="#fff" />
         </a>
         {siblingPages.length > 1 && (

package/src/canvas/canvasTheme.js

@@ -1,74 +1,118 @@
 export function getCanvasPrimerAttrs(theme) {
-  if (String(theme || 'light') === 'dark_dimmed') {
-    return {
-      'data-color-mode': 'dark',
-      'data-dark-theme': 'dark_dimmed',
-      'data-light-theme': 'light',
-    }
-  }
-  if (String(theme || 'light').startsWith('dark')) {
+  const value = String(theme || 'light')
+  if (value.startsWith('dark')) {
     return {
       'data-color-mode': 'dark',
-      'data-dark-theme': 'dark',
+      'data-dark-theme': value,
       'data-light-theme': 'light',
     }
   }
   return {
     'data-color-mode': 'light',
     'data-dark-theme': 'dark',
-    'data-light-theme': 'light',
+    'data-light-theme': value.startsWith('light') ? value : 'light',
   }
 }
 
-export function getCanvasThemeVars(theme) {
-  const value = String(theme || 'light')
-  if (value === 'dark_dimmed') {
-    return {
-      '--sb--canvas-bg': '#22272e',
-      '--bgColor-default': '#22272e',
-      '--bgColor-muted': '#22272e',
-      '--bgColor-neutral-muted': 'rgba(99, 110, 123, 0.3)',
-      '--bgColor-accent-emphasis': '#316dca',
-      '--tc-bg-muted': '#22272e',
-      '--tc-dot-color': 'rgba(205, 217, 229, 0.22)',
-      '--overlay-backdrop-bgColor': 'rgba(205, 217, 229, 0.22)',
-      '--fgColor-muted': '#768390',
-      '--fgColor-default': '#adbac7',
-      '--fgColor-onEmphasis': '#ffffff',
-      '--borderColor-default': '#444c56',
-      '--borderColor-muted': '#545d68',
-    }
-  }
-  if (value.startsWith('dark')) {
-    return {
-      '--sb--canvas-bg': '#161b22',
-      '--bgColor-default': '#161b22',
-      '--bgColor-muted': '#161b22',
-      '--bgColor-neutral-muted': 'rgba(110, 118, 129, 0.2)',
-      '--bgColor-accent-emphasis': '#2f81f7',
-      '--tc-bg-muted': '#161b22',
-      '--tc-dot-color': 'rgba(255, 255, 255, 0.1)',
-      '--overlay-backdrop-bgColor': 'rgba(255, 255, 255, 0.1)',
-      '--fgColor-muted': '#8b949e',
-      '--fgColor-default': '#e6edf3',
-      '--fgColor-onEmphasis': '#ffffff',
-      '--borderColor-default': '#30363d',
-      '--borderColor-muted': '#30363d',
-    }
-  }
-  return {
+/**
+ * Per-theme canvas CSS custom properties sourced from @primer/primitives.
+ * Each theme gets its own entry so high-contrast, colorblind, and dimmed
+ * variants all render with the correct background, dot, and text colors.
+ */
+const THEME_VARS = {
+  light: {
     '--sb--canvas-bg': '#f6f8fa',
     '--bgColor-default': '#ffffff',
+    '--bgColor-muted': '#f6f8fa',
+    '--bgColor-neutral-muted': '#818b981f',
+    '--bgColor-accent-emphasis': '#0969da',
     '--tc-bg-muted': '#f6f8fa',
     '--tc-dot-color': 'rgba(0, 0, 0, 0.08)',
     '--overlay-backdrop-bgColor': 'rgba(0, 0, 0, 0.08)',
+    '--fgColor-muted': '#59636e',
+    '--fgColor-default': '#1f2328',
+    '--fgColor-onEmphasis': '#ffffff',
+    '--borderColor-default': '#d1d9e0',
+    '--borderColor-muted': '#d1d9e0b3',
+  },
+  light_colorblind: {
+    '--sb--canvas-bg': '#f6f8fa',
+    '--bgColor-default': '#ffffff',
     '--bgColor-muted': '#f6f8fa',
-    '--bgColor-neutral-muted': '#eaeef2',
-    '--bgColor-accent-emphasis': '#2f81f7',
-    '--fgColor-muted': '#656d76',
+    '--bgColor-neutral-muted': '#818b981f',
+    '--bgColor-accent-emphasis': '#0969da',
+    '--tc-bg-muted': '#f6f8fa',
+    '--tc-dot-color': 'rgba(0, 0, 0, 0.08)',
+    '--overlay-backdrop-bgColor': 'rgba(0, 0, 0, 0.08)',
+    '--fgColor-muted': '#59636e',
     '--fgColor-default': '#1f2328',
     '--fgColor-onEmphasis': '#ffffff',
     '--borderColor-default': '#d1d9e0',
-    '--borderColor-muted': '#d8dee4',
-  }
+    '--borderColor-muted': '#d1d9e0b3',
+  },
+  dark: {
+    '--sb--canvas-bg': '#151b23',
+    '--bgColor-default': '#0d1117',
+    '--bgColor-muted': '#151b23',
+    '--bgColor-neutral-muted': '#656c7633',
+    '--bgColor-accent-emphasis': '#1f6feb',
+    '--tc-bg-muted': '#151b23',
+    '--tc-dot-color': 'rgba(255, 255, 255, 0.1)',
+    '--overlay-backdrop-bgColor': 'rgba(255, 255, 255, 0.1)',
+    '--fgColor-muted': '#9198a1',
+    '--fgColor-default': '#f0f6fc',
+    '--fgColor-onEmphasis': '#ffffff',
+    '--borderColor-default': '#3d444d',
+    '--borderColor-muted': '#3d444db3',
+  },
+  dark_dimmed: {
+    '--sb--canvas-bg': '#262c36',
+    '--bgColor-default': '#212830',
+    '--bgColor-muted': '#262c36',
+    '--bgColor-neutral-muted': '#656c7633',
+    '--bgColor-accent-emphasis': '#316dca',
+    '--tc-bg-muted': '#262c36',
+    '--tc-dot-color': 'rgba(209, 215, 224, 0.18)',
+    '--overlay-backdrop-bgColor': 'rgba(209, 215, 224, 0.18)',
+    '--fgColor-muted': '#9198a1',
+    '--fgColor-default': '#d1d7e0',
+    '--fgColor-onEmphasis': '#f0f6fc',
+    '--borderColor-default': '#3d444d',
+    '--borderColor-muted': '#3d444db3',
+  },
+  dark_colorblind: {
+    '--sb--canvas-bg': '#151b23',
+    '--bgColor-default': '#0d1117',
+    '--bgColor-muted': '#151b23',
+    '--bgColor-neutral-muted': '#656c7633',
+    '--bgColor-accent-emphasis': '#1f6feb',
+    '--tc-bg-muted': '#151b23',
+    '--tc-dot-color': 'rgba(255, 255, 255, 0.1)',
+    '--overlay-backdrop-bgColor': 'rgba(255, 255, 255, 0.1)',
+    '--fgColor-muted': '#9198a1',
+    '--fgColor-default': '#f0f6fc',
+    '--fgColor-onEmphasis': '#ffffff',
+    '--borderColor-default': '#3d444d',
+    '--borderColor-muted': '#3d444db3',
+  },
+  dark_high_contrast: {
+    '--sb--canvas-bg': '#151b23',
+    '--bgColor-default': '#010409',
+    '--bgColor-muted': '#151b23',
+    '--bgColor-neutral-muted': '#212830',
+    '--bgColor-accent-emphasis': '#194fb1',
+    '--tc-bg-muted': '#151b23',
+    '--tc-dot-color': 'rgba(183, 189, 200, 0.25)',
+    '--overlay-backdrop-bgColor': 'rgba(183, 189, 200, 0.25)',
+    '--fgColor-muted': '#b7bdc8',
+    '--fgColor-default': '#ffffff',
+    '--fgColor-onEmphasis': '#ffffff',
+    '--borderColor-default': '#b7bdc8',
+    '--borderColor-muted': '#b7bdc8',
+  },
+}
+
+export function getCanvasThemeVars(theme) {
+  const value = String(theme || 'light')
+  return THEME_VARS[value] || THEME_VARS.light
 }

package/src/canvas/widgets/embedTheme.js

@@ -1,21 +1,19 @@
 /**
- * Resolve the effective canvas theme from localStorage + sync settings.
+ * Resolve the effective canvas theme from the core theme store.
  * Respects the canvas-specific theme sync toggle.
  */
+import { getTheme, getThemeSyncTargets } from '@dfosco/storyboard-core'
+
+function resolveSystem() {
+  if (typeof window === 'undefined') return 'light'
+  return window.matchMedia?.('(prefers-color-scheme: dark)')?.matches ? 'dark' : 'light'
+}
+
 export function resolveCanvasTheme() {
-  if (typeof localStorage === 'undefined') return 'light'
-  let sync = { prototype: true, toolbar: false, codeBoxes: true, canvas: true }
-  try {
-    const rawSync = localStorage.getItem('sb-theme-sync')
-    if (rawSync) sync = { ...sync, ...JSON.parse(rawSync) }
-  } catch { /* ignore */ }
+  const sync = getThemeSyncTargets()
   if (!sync.canvas) return 'light'
-  const attrTheme = document.documentElement.getAttribute('data-sb-canvas-theme')
-  if (attrTheme) return attrTheme
-  const stored = localStorage.getItem('sb-color-scheme') || 'system'
-  if (stored !== 'system') return stored
-  return typeof window.matchMedia === 'function' &&
-    window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  const theme = getTheme()
+  return theme === 'system' ? resolveSystem() : theme
 }
 
 /**
@@ -54,52 +52,97 @@ export function subscribeCanvasTheme({ anchorRef, onTheme }) {
   }
 }
 
-export function getEmbedChromeVars(theme) {
-  const value = String(theme || 'light')
-  if (value === 'dark_dimmed') {
-    return {
-      '--bgColor-default': '#22272e',
-      '--bgColor-muted': '#2d333b',
-      '--bgColor-neutral-muted': 'rgba(99, 110, 123, 0.3)',
-      '--fgColor-default': '#adbac7',
-      '--fgColor-muted': '#768390',
-      '--fgColor-onEmphasis': '#ffffff',
-      '--borderColor-default': '#444c56',
-      '--borderColor-muted': '#545d68',
-      '--bgColor-accent-emphasis': '#316dca',
-      '--trigger-bg': '#2d333b',
-      '--trigger-bg-hover': '#373e47',
-      '--trigger-border': '#444c56',
-    }
-  }
-  if (value.startsWith('dark')) {
-    return {
-      '--bgColor-default': '#161b22',
-      '--bgColor-muted': '#21262d',
-      '--bgColor-neutral-muted': 'rgba(110, 118, 129, 0.2)',
-      '--fgColor-default': '#e6edf3',
-      '--fgColor-muted': '#8b949e',
-      '--fgColor-onEmphasis': '#ffffff',
-      '--borderColor-default': '#30363d',
-      '--borderColor-muted': '#30363d',
-      '--bgColor-accent-emphasis': '#2f81f7',
-      '--trigger-bg': '#21262d',
-      '--trigger-bg-hover': '#30363d',
-      '--trigger-border': '#30363d',
-    }
-  }
-  return {
+/**
+ * Per-theme embed chrome CSS custom properties sourced from @primer/primitives.
+ */
+const EMBED_CHROME_VARS = {
+  light: {
     '--bgColor-default': '#ffffff',
     '--bgColor-muted': '#f6f8fa',
-    '--bgColor-neutral-muted': '#eaeef2',
+    '--bgColor-neutral-muted': '#818b981f',
     '--fgColor-default': '#1f2328',
-    '--fgColor-muted': '#656d76',
+    '--fgColor-muted': '#59636e',
     '--fgColor-onEmphasis': '#ffffff',
-    '--borderColor-default': '#d0d7de',
-    '--borderColor-muted': '#d8dee4',
-    '--bgColor-accent-emphasis': '#2f81f7',
+    '--borderColor-default': '#d1d9e0',
+    '--borderColor-muted': '#d1d9e0b3',
+    '--bgColor-accent-emphasis': '#0969da',
     '--trigger-bg': '#f6f8fa',
     '--trigger-bg-hover': '#eaeef2',
-    '--trigger-border': '#d0d7de',
-  }
+    '--trigger-border': '#d1d9e0',
+  },
+  light_colorblind: {
+    '--bgColor-default': '#ffffff',
+    '--bgColor-muted': '#f6f8fa',
+    '--bgColor-neutral-muted': '#818b981f',
+    '--fgColor-default': '#1f2328',
+    '--fgColor-muted': '#59636e',
+    '--fgColor-onEmphasis': '#ffffff',
+    '--borderColor-default': '#d1d9e0',
+    '--borderColor-muted': '#d1d9e0b3',
+    '--bgColor-accent-emphasis': '#0969da',
+    '--trigger-bg': '#f6f8fa',
+    '--trigger-bg-hover': '#eaeef2',
+    '--trigger-border': '#d1d9e0',
+  },
+  dark: {
+    '--bgColor-default': '#0d1117',
+    '--bgColor-muted': '#151b23',
+    '--bgColor-neutral-muted': '#656c7633',
+    '--fgColor-default': '#f0f6fc',
+    '--fgColor-muted': '#9198a1',
+    '--fgColor-onEmphasis': '#ffffff',
+    '--borderColor-default': '#3d444d',
+    '--borderColor-muted': '#3d444db3',
+    '--bgColor-accent-emphasis': '#1f6feb',
+    '--trigger-bg': '#151b23',
+    '--trigger-bg-hover': '#212830',
+    '--trigger-border': '#3d444d',
+  },
+  dark_dimmed: {
+    '--bgColor-default': '#212830',
+    '--bgColor-muted': '#262c36',
+    '--bgColor-neutral-muted': '#656c7633',
+    '--fgColor-default': '#d1d7e0',
+    '--fgColor-muted': '#9198a1',
+    '--fgColor-onEmphasis': '#f0f6fc',
+    '--borderColor-default': '#3d444d',
+    '--borderColor-muted': '#3d444db3',
+    '--bgColor-accent-emphasis': '#316dca',
+    '--trigger-bg': '#262c36',
+    '--trigger-bg-hover': '#2d333b',
+    '--trigger-border': '#3d444d',
+  },
+  dark_colorblind: {
+    '--bgColor-default': '#0d1117',
+    '--bgColor-muted': '#151b23',
+    '--bgColor-neutral-muted': '#656c7633',
+    '--fgColor-default': '#f0f6fc',
+    '--fgColor-muted': '#9198a1',
+    '--fgColor-onEmphasis': '#ffffff',
+    '--borderColor-default': '#3d444d',
+    '--borderColor-muted': '#3d444db3',
+    '--bgColor-accent-emphasis': '#1f6feb',
+    '--trigger-bg': '#151b23',
+    '--trigger-bg-hover': '#212830',
+    '--trigger-border': '#3d444d',
+  },
+  dark_high_contrast: {
+    '--bgColor-default': '#010409',
+    '--bgColor-muted': '#151b23',
+    '--bgColor-neutral-muted': '#212830',
+    '--fgColor-default': '#ffffff',
+    '--fgColor-muted': '#b7bdc8',
+    '--fgColor-onEmphasis': '#ffffff',
+    '--borderColor-default': '#b7bdc8',
+    '--borderColor-muted': '#b7bdc8',
+    '--bgColor-accent-emphasis': '#194fb1',
+    '--trigger-bg': '#151b23',
+    '--trigger-bg-hover': '#212830',
+    '--trigger-border': '#b7bdc8',
+  },
+}
+
+export function getEmbedChromeVars(theme) {
+  const value = String(theme || 'light')
+  return EMBED_CHROME_VARS[value] || EMBED_CHROME_VARS.light
 }

package/src/hooks/useThemeState.js

@@ -0,0 +1,61 @@
+/**
+ * useThemeState — React hook for the global storyboard theme.
+ *
+ * Subscribes to the core themeStore via useSyncExternalStore so React
+ * components re-render whenever the theme changes (user action, system
+ * preference toggle, or sync-target change).
+ *
+ * Returns { theme, resolved } where `theme` may be "system" and
+ * `resolved` is always a concrete Primer theme name.
+ *
+ * useThemeSyncTargets — React hook for which UI surfaces follow the theme.
+ * Returns { prototype, toolbar, codeBoxes, canvas }.
+ */
+
+import { useSyncExternalStore } from 'react'
+import {
+  themeState,
+  themeSyncState,
+} from '@dfosco/storyboard-core'
+
+// --- useThemeState ----------------------------------------------------------
+
+function subscribeTheme(cb) {
+  return themeState.subscribe(cb)
+}
+
+let _themeSnapshot = null
+themeState.subscribe((s) => { _themeSnapshot = s })
+
+function getThemeSnapshot() {
+  return _themeSnapshot
+}
+
+/**
+ * Subscribe to the global storyboard theme.
+ * @returns {{ theme: string, resolved: string }}
+ */
+export function useThemeState() {
+  return useSyncExternalStore(subscribeTheme, getThemeSnapshot, getThemeSnapshot)
+}
+
+// --- useThemeSyncTargets ----------------------------------------------------
+
+function subscribeSyncTargets(cb) {
+  return themeSyncState.subscribe(cb)
+}
+
+let _syncSnapshot = null
+themeSyncState.subscribe((s) => { _syncSnapshot = s })
+
+function getSyncSnapshot() {
+  return _syncSnapshot
+}
+
+/**
+ * Subscribe to which UI surfaces follow the global theme.
+ * @returns {{ prototype: boolean, toolbar: boolean, codeBoxes: boolean, canvas: boolean }}
+ */
+export function useThemeSyncTargets() {
+  return useSyncExternalStore(subscribeSyncTargets, getSyncSnapshot, getSyncSnapshot)
+}

package/src/hooks/useThemeState.test.js

@@ -0,0 +1,66 @@
+import { renderHook, act } from '@testing-library/react'
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { setTheme, setThemeSyncTarget } from '@dfosco/storyboard-core'
+import { useThemeState, useThemeSyncTargets } from './useThemeState.js'
+
+beforeEach(() => {
+  localStorage.clear()
+  // Reset to defaults
+  setTheme('system')
+})
+
+describe('useThemeState', () => {
+  it('returns { theme, resolved }', () => {
+    const { result } = renderHook(() => useThemeState())
+    expect(result.current).toHaveProperty('theme')
+    expect(result.current).toHaveProperty('resolved')
+  })
+
+  it('defaults to system theme', () => {
+    const { result } = renderHook(() => useThemeState())
+    expect(result.current.theme).toBe('system')
+    // resolved should be 'light' or 'dark' depending on matchMedia mock
+    expect(['light', 'dark']).toContain(result.current.resolved)
+  })
+
+  it('updates when setTheme is called', () => {
+    const { result } = renderHook(() => useThemeState())
+
+    act(() => {
+      setTheme('dark_dimmed')
+    })
+
+    expect(result.current.theme).toBe('dark_dimmed')
+    expect(result.current.resolved).toBe('dark_dimmed')
+  })
+
+  it('reverts to system when set back', () => {
+    const { result } = renderHook(() => useThemeState())
+
+    act(() => { setTheme('dark') })
+    expect(result.current.theme).toBe('dark')
+
+    act(() => { setTheme('system') })
+    expect(result.current.theme).toBe('system')
+  })
+})
+
+describe('useThemeSyncTargets', () => {
+  it('returns default sync targets', () => {
+    const { result } = renderHook(() => useThemeSyncTargets())
+    expect(result.current.prototype).toBe(true)
+    expect(result.current.toolbar).toBe(false)
+    expect(result.current.codeBoxes).toBe(true)
+    expect(result.current.canvas).toBe(true)
+  })
+
+  it('updates when setThemeSyncTarget is called', () => {
+    const { result } = renderHook(() => useThemeSyncTargets())
+
+    act(() => {
+      setThemeSyncTarget('toolbar', true)
+    })
+
+    expect(result.current.toolbar).toBe(true)
+  })
+})

package/src/index.js

@@ -24,6 +24,7 @@ export { useHideMode } from './hooks/useHideMode.js'
 export { useUndoRedo } from './hooks/useUndoRedo.js'
 export { useFeatureFlag } from './hooks/useFeatureFlag.js'
 export { useMode } from './hooks/useMode.js'
+export { useThemeState, useThemeSyncTargets } from './hooks/useThemeState.js'
 
 // React Router integration
 export { installHashPreserver } from './hashPreserver.js'

package/src/vite/data-plugin.js

@@ -731,6 +731,12 @@ function generateModule({ index, protoFolders, flowRoutes, canvasRoutes, canvasA
     initCalls.push(`initUIConfig(${JSON.stringify(config.ui)})`)
   }
 
+  // Customer mode config from storyboard.config.json
+  if (config?.customerMode) {
+    imports.push(`import { initCustomerModeConfig } from '@dfosco/storyboard-core'`)
+    initCalls.push(`initCustomerModeConfig(${JSON.stringify(config.customerMode)})`)
+  }
+
   // Log info when multiple flows target the same route
   const routeGroups = {}
   for (const [name, { route, isDefault }] of Object.entries(resolvedFlowRoutes)) {