@dfosco/storyboard 0.8.1 → 0.9.0

package/src/core/ui/InspectorPanel.jsx

@@ -509,18 +509,18 @@ export default function InspectorPanel() {
         {/* Empty state */}
         {!hasSelection && !inspecting && (
           <div className="flex flex-col items-center justify-center h-full gap-3 px-6 py-12 text-center">
-            <span style={{ color: 'var(--fgColor-muted)', opacity: 0.4 }}>
+            <span style={{ color: 'var(--color-foreground-muted)', opacity: 0.4 }}>
               <IconoirSquareDashed size={48} />
             </span>
-            <p className="text-sm font-medium m-0" style={{ color: 'var(--fgColor-default)' }}>
+            <p className="text-sm font-medium m-0" style={{ color: 'var(--color-foreground)' }}>
               Select an element to start
             </p>
-            <p className="text-xs m-0" style={{ color: 'var(--fgColor-muted)' }}>
+            <p className="text-xs m-0" style={{ color: 'var(--color-foreground-muted)' }}>
               Click the inspect button to enter selection mode
             </p>
             <button
               className="mt-2 px-4 py-1.5 text-xs font-medium rounded-md border-none cursor-pointer transition-colors"
-              style={{ background: 'var(--sb--color-purple, #7655a4)', color: '#fff' }}
+              style={{ background: 'var(--color-foreground-accent, #7655a4)', color: '#fff' }}
               onClick={startInspecting}
             >
               Start inspecting
@@ -533,7 +533,7 @@ export default function InspectorPanel() {
           <div className="flex flex-col items-center justify-center h-full gap-3 px-6 py-12 text-center">
             <div className="flex items-center gap-2">
               <span className="inspector-pulse-dot" />
-              <p className="text-sm m-0" style={{ color: 'var(--fgColor-default)' }}>
+              <p className="text-sm m-0" style={{ color: 'var(--color-foreground)' }}>
                 Click any element on the page to inspect it
               </p>
             </div>
@@ -541,8 +541,8 @@ export default function InspectorPanel() {
               className="mt-2 px-4 py-1.5 text-xs font-medium rounded-md border cursor-pointer transition-colors"
               style={{
                 background: 'transparent',
-                color: 'var(--fgColor-muted)',
-                borderColor: 'var(--borderColor-default, var(--sb--color-border, #d1d9e0))',
+                color: 'var(--color-foreground-muted)',
+                borderColor: 'var(--color-border, #d1d9e0)',
               }}
               onClick={stopInspecting}
             >
@@ -556,7 +556,7 @@ export default function InspectorPanel() {
           <div className="flex flex-col flex-1 min-h-0 p-3 pt-0 gap-3">
             {/* Component name */}
             <div>
-              <h3 className="text-base font-bold m-0 inspector-mono" style={{ color: 'var(--sb--color-purple, #7655a4)' }}>
+              <h3 className="text-base font-bold m-0 inspector-mono" style={{ color: 'var(--color-foreground-accent, #7655a4)' }}>
                 {componentInfo.name}
               </h3>
             </div>
@@ -640,7 +640,7 @@ export default function InspectorPanel() {
             {/* Re-select button */}
             <button
               className="flex items-center justify-center gap-1.5 w-full px-3 py-1.5 text-xs font-medium rounded-md border-none cursor-pointer transition-colors shrink-0"
-              style={{ background: 'var(--sb--color-purple, #7655a4)', color: '#fff' }}
+              style={{ background: 'var(--color-foreground-accent, #7655a4)', color: '#fff' }}
               onClick={startInspecting}
             >
               <OcticonSvg name="search" size={12} />

package/src/core/ui/PwaInstallBanner.css

@@ -8,9 +8,9 @@
   align-items: center;
   gap: 0.5rem;
   padding: 0.75rem 1rem;
-  background: var(--bgColor-default, #0d1117);
-  color: var(--fgColor-default, #e6edf3);
-  border: 1px solid var(--borderColor-default, #30363d);
+  background: var(--color-background, #0d1117);
+  color: var(--color-foreground, #e6edf3);
+  border: 1px solid var(--color-border, #30363d);
   border-radius: 0.75rem;
   font-family: "Mona Sans", -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
   font-size: 0.8125rem;
@@ -31,12 +31,12 @@
 }
 
 .pwa-banner-btn.install {
-  background: var(--button-primary-bgColor-rest, #238636);
+  background: var(--color-background-success-emphasis, #238636);
   color: #fff;
 }
 
 .pwa-banner-btn.dismiss {
   background: transparent;
-  color: var(--fgColor-muted, #8d96a0);
+  color: var(--color-foreground-muted, #8d96a0);
   padding: 0.375rem;
 }

package/src/core/ui/PwaInstallBanner.jsx

@@ -33,9 +33,9 @@ const bannerStyle = {
   alignItems: 'center',
   gap: '0.5rem',
   padding: '0.75rem 1rem',
-  background: 'var(--bgColor-default, #0d1117)',
-  color: 'var(--fgColor-default, #e6edf3)',
-  border: '1px solid var(--borderColor-default, #30363d)',
+  background: 'var(--color-background, #0d1117)',
+  color: 'var(--color-foreground, #e6edf3)',
+  border: '1px solid var(--color-border, #30363d)',
   borderRadius: '0.75rem',
   fontFamily: '"Mona Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif',
   fontSize: '0.8125rem',
@@ -53,14 +53,14 @@ const btnBase = {
 
 const installBtnStyle = {
   ...btnBase,
-  background: 'var(--button-primary-bgColor-rest, #238636)',
+  background: 'var(--color-background-success-emphasis, #238636)',
   color: '#fff',
 }
 
 const dismissBtnStyle = {
   ...btnBase,
   background: 'transparent',
-  color: 'var(--fgColor-muted, #8d96a0)',
+  color: 'var(--color-foreground-muted, #8d96a0)',
   padding: '0.375rem',
 }
 

package/src/core/ui/core-ui-colors.css

@@ -16,6 +16,10 @@
  *
  * TriggerButton uses the `trigger` button variant (no Tailwind dark:
  * classes) so its scoped CSS has full control over background/color.
+ *
+ * Concrete color values are pinned (not aliased) so toolbar styling
+ * stays locked to its own scheme regardless of the global theme cascade
+ * defined in `core/styles/tailwind.css`.
  */
 
 /* Default: light tokens */
@@ -27,43 +31,23 @@
 [data-slot="dialog-overlay"] {
   color-scheme: light;
 
-  /* shadcn / Tailwind semantic tokens — pinned to light values */
-  --color-background: hsl(0 0% 100%);
-  --color-foreground: hsl(222.2 84% 4.9%);
-  --color-popover: hsl(0 0% 100%);
-  --color-popover-foreground: hsl(222.2 84% 4.9%);
-  --color-primary: hsl(222.2 47.4% 11.2%);
-  --color-primary-foreground: hsl(210 40% 98%);
-  --color-secondary: hsl(210 40% 96.1%);
-  --color-secondary-foreground: hsl(222.2 47.4% 11.2%);
-  --color-muted: hsl(210 40% 96.1%);
-  --color-muted-foreground: hsl(215.4 16.3% 46.9%);
-  --color-accent: hsl(210 40% 96.1%);
-  --color-accent-foreground: hsl(222.2 47.4% 11.2%);
-  --color-border: hsl(214.3 31.8% 91.4%);
-  --color-input: hsl(214.3 31.8% 91.4%);
-
-  --sb--color-background: hsl(0 0% 100%);
-  --sb--color-foreground: hsl(222.2 84% 4.9%);
-  --sb--color-popover: hsl(0 0% 100%);
-  --sb--color-popover-foreground: hsl(222.2 84% 4.9%);
-  --sb--color-primary: hsl(222.2 47.4% 11.2%);
-  --sb--color-primary-foreground: hsl(210 40% 98%);
-  --sb--color-secondary: hsl(210 40% 96.1%);
-  --sb--color-secondary-foreground: hsl(222.2 47.4% 11.2%);
-  --sb--color-muted: hsl(210 40% 96.1%);
-  --sb--color-muted-foreground: hsl(215.4 16.3% 46.9%);
-  --sb--color-accent: hsl(210 40% 96.1%);
-  --sb--color-accent-foreground: hsl(222.2 47.4% 11.2%);
-  --sb--color-border: hsl(214.3 31.8% 91.4%);
-  --sb--color-input: hsl(214.3 31.8% 91.4%);
-
-  /* Primer token aliases used in side panel + inspector chrome */
-  --bgColor-default: #ffffff;
-  --fgColor-default: #1f2328;
-  --fgColor-muted: #656d76;
-  --borderColor-default: #d1d9e0;
-  --bgColor-neutral-muted: rgba(175, 184, 193, 0.2);
+  --color-background: #ffffff;
+  --color-foreground: #1f2328;
+  --color-foreground-muted: #59636e;
+  --color-popover: #ffffff;
+  --color-popover-foreground: #1f2328;
+  --color-primary: #1f2328;
+  --color-primary-foreground: #ffffff;
+  --color-secondary: #f6f8fa;
+  --color-secondary-foreground: #1f2328;
+  --color-muted: #f6f8fa;
+  --color-muted-foreground: #59636e;
+  --color-accent: #ddf4ff;
+  --color-accent-foreground: #0969da;
+  --color-border: #d1d9e0;
+  --color-border-muted: #d1d9e0b3;
+  --color-background-neutral-muted: rgba(175, 184, 193, 0.2);
+  --color-input: #d1d9e0;
 
   /* Slate palette tokens — used by trigger buttons and canvas toolbar */
   --color-slate-100: oklch(96.8% .007 247.896);
@@ -72,10 +56,7 @@
   --color-slate-600: oklch(44.6% .043 257.281);
 }
 
-/* Dark tokens — applied when toolbar syncs with a dark theme.
- * Uses Primer-aligned colors (matching base.css --sb-* dark tokens)
- * instead of generic shadcn dark values.
- */
+/* Dark tokens — applied when toolbar syncs with a dark theme. */
 :root[data-sb-toolbar-theme^="dark"] [data-core-ui-bar],
 :root[data-sb-toolbar-theme^="dark"] [data-sidepanel],
 :root[data-sb-toolbar-theme^="dark"] [data-slot="dropdown-menu-content"],
@@ -86,6 +67,7 @@
 
   --color-background: #161b22;
   --color-foreground: #e6edf3;
+  --color-foreground-muted: #8b949e;
   --color-popover: #161b22;
   --color-popover-foreground: #e6edf3;
   --color-primary: #e6edf3;
@@ -94,36 +76,16 @@
   --color-secondary-foreground: #e6edf3;
   --color-muted: #21262d;
   --color-muted-foreground: #8b949e;
-  --color-accent: #21262d;
-  --color-accent-foreground: #e6edf3;
+  --color-accent: #388bfd1a;
+  --color-accent-foreground: #4493f8;
   --color-border: #30363d;
+  --color-border-muted: #30363db3;
+  --color-background-neutral-muted: rgba(110, 118, 129, 0.2);
   --color-input: #30363d;
 
-  --sb--color-background: #161b22;
-  --sb--color-foreground: #e6edf3;
-  --sb--color-popover: #161b22;
-  --sb--color-popover-foreground: #e6edf3;
-  --sb--color-primary: #e6edf3;
-  --sb--color-primary-foreground: #161b22;
-  --sb--color-secondary: #21262d;
-  --sb--color-secondary-foreground: #e6edf3;
-  --sb--color-muted: #21262d;
-  --sb--color-muted-foreground: #8b949e;
-  --sb--color-accent: #21262d;
-  --sb--color-accent-foreground: #e6edf3;
-  --sb--color-border: #30363d;
-  --sb--color-input: #30363d;
-
-  /* Primer token aliases used in side panel + inspector chrome */
-  --bgColor-default: #161b22;
-  --fgColor-default: #e6edf3;
-  --fgColor-muted: #8b949e;
-  --borderColor-default: #30363d;
-  --bgColor-neutral-muted: rgba(110, 118, 129, 0.2);
-
   /* Slate palette tokens — dark equivalents */
   --color-slate-100: oklch(20.8% .042 265.755);
   --color-slate-300: oklch(29.3% .042 264.531);
   --color-slate-400: oklch(44.6% .043 257.281);
-  --color-slate-600: oklch(70.4% .04 256.788);
+  --color-slate-600: oklch(44.6% .043 257.281);
 }

package/src/core/ui/sidepanel.css

@@ -99,11 +99,11 @@ html.sb-sidepanel-open.sb-sidepanel-bottom .sb-mode-switch {
   z-index: 9998;
   display: flex;
   flex-direction: column;
-  background-color: var(--bgColor-default, var(--sb--color-background, #ffffff));
-  border-left: 1px solid var(--borderColor-default, var(--sb--color-border, #d0d7de));
+  background-color: var(--color-background, #ffffff);
+  border-left: 1px solid var(--color-border, #d0d7de);
   box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
   font-family: "Mona Sans", -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
-  color: var(--fgColor-default, var(--sb--color-foreground, #1f2328));
+  color: var(--color-foreground, #1f2328);
   animation: sb-sidepanel-slide-in 0.25s ease;
 }
 
@@ -115,7 +115,7 @@ html.sb-sidepanel-open.sb-sidepanel-bottom .sb-mode-switch {
   width: 100% !important;
   height: var(--sb--sidepanel-height, 300px);
   border-left: none;
-  border-top: 1px solid var(--borderColor-default, var(--sb--color-border, #d0d7de));
+  border-top: 1px solid var(--color-border, #d0d7de);
   box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
   animation: sb-sidepanel-slide-up 0.25s ease;
 }
@@ -199,7 +199,7 @@ html.sb-sidepanel-open.sb-sidepanel-bottom .sb-mode-switch {
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  color: var(--fgColor-muted, var(--sb--color-muted-foreground, #656d76));
+  color: var(--color-foreground-muted, #656d76);
   padding-left: 4px;
 }
 
@@ -213,7 +213,7 @@ html.sb-sidepanel-open.sb-sidepanel-bottom .sb-mode-switch {
   appearance: none;
   border: none;
   background: transparent;
-  color: var(--fgColor-muted, var(--sb--color-muted-foreground, #656d76));
+  color: var(--color-foreground-muted, #656d76);
   cursor: pointer;
   padding: 6px;
   border-radius: 6px;
@@ -224,8 +224,8 @@ html.sb-sidepanel-open.sb-sidepanel-bottom .sb-mode-switch {
 }
 
 .sb-sidepanel-action-btn:hover {
-  background: var(--bgColor-neutral-muted, rgba(110, 118, 129, 0.1));
-  color: var(--fgColor-default, var(--sb--color-foreground, #1f2328));
+  background: var(--color-background-neutral-muted, rgba(110, 118, 129, 0.1));
+  color: var(--color-foreground, #1f2328);
 }
 
 /* Body */
@@ -246,8 +246,8 @@ html.sb-sidepanel-open.sb-sidepanel-bottom .sb-mode-switch {
 .sb-sidepanel-spinner {
   width: 20px;
   height: 20px;
-  border: 2px solid var(--borderColor-default, var(--sb--color-border, #d0d7de));
-  border-top-color: var(--fgColor-muted, var(--sb--color-muted-foreground, #656d76));
+  border: 2px solid var(--color-border, #d0d7de);
+  border-top-color: var(--color-foreground-muted, #656d76);
   border-radius: 50%;
   animation: sb-spin 0.6s linear infinite;
 }
@@ -263,7 +263,7 @@ html.storyboard-mode-inspect .sb-sidepanel:not(.sb-sidepanel--bottom) {
   top: 12px;
   right: 12px;
   bottom: 12px;
-  border-radius: var(--borderRadius-default);
+  border-radius: var(--radius);
   border-left: none;
 }
 
@@ -275,7 +275,7 @@ html.storyboard-mode-inspect .sb-sidepanel--bottom {
   right: 12px;
   bottom: 12px;
   width: auto !important;
-  border-radius: var(--borderRadius-default);
+  border-radius: var(--radius);
   border-top: none;
 }
 

package/src/core/workshop/features/createCanvas/CreateCanvasForm.jsx

@@ -22,8 +22,15 @@ export default function CreateCanvasForm({ onClose }) {
   const [titleTouched, setTitleTouched] = useState(false)
   const [description, setDescription] = useState('')
   const [folder, setFolder] = useState('')
+  // Special folder select value indicating the user wants to create a new
+  // folder rather than pick an existing one. Triggers the new-folder input.
+  const NEW_FOLDER_VALUE = '__new__'
+  const [folderSelectValue, setFolderSelectValue] = useState('')
+  const [newFolderName, setNewFolderName] = useState('')
+  const [newFolderKind, setNewFolderKind] = useState('workspace')
   const [grid, setGrid] = useState(true)
-  const [folders, setFolders] = useState([])
+  // folderEntries: [{ name, kind: 'workspace' | 'pages' }, ...]
+  const [folderEntries, setFolderEntries] = useState([])
   const [loading, setLoading] = useState(true)
   const [submitting, setSubmitting] = useState(false)
   const [error, setError] = useState(null)
@@ -59,8 +66,13 @@ export default function CreateCanvasForm({ onClose }) {
   )
 
   const routePreview = useMemo(
-    () => (kebabName ? `/canvas/${kebabName}` : ''),
-    [kebabName],
+    () => {
+      if (!kebabName) return ''
+      // Both `.folder/` and plain dir produce the same URL — `.folder` is
+      // stripped by the data plugin's route resolver.
+      return folder ? `/canvas/${folder}/${kebabName}` : `/canvas/${kebabName}`
+    },
+    [kebabName, folder],
   )
 
   const nameError = useMemo(() => {
@@ -71,10 +83,14 @@ export default function CreateCanvasForm({ onClose }) {
     return null
   }, [name, kebabName])
 
-  const canSubmit = useMemo(
-    () => !!kebabName && !nameError && !submitting,
-    [kebabName, nameError, submitting],
-  )
+  const canSubmit = useMemo(() => {
+    if (!kebabName || nameError || submitting) return false
+    // When the user picked "+ Create new folder" they must also provide a
+    // valid (kebab-case) folder name. Other selections (existing folder or
+    // "No folder") always have a usable `folder` value already.
+    if (folderSelectValue === NEW_FOLDER_VALUE && !folder) return false
+    return true
+  }, [kebabName, nameError, submitting, folderSelectValue, folder])
 
   useEffect(() => {
     // Restore success state after Vite's full-reload on file creation
@@ -93,7 +109,13 @@ export default function CreateCanvasForm({ onClose }) {
         const res = await fetch(getApiUrl() + '/folders')
         if (res.ok) {
           const data = await res.json()
-          setFolders(data.folders || [])
+          // Prefer the new tagged `entries` shape; fall back to legacy
+          // `folders` string array (treat as 'pages' for back-compat).
+          if (Array.isArray(data.entries)) {
+            setFolderEntries(data.entries.filter((e) => e && e.name))
+          } else if (Array.isArray(data.folders)) {
+            setFolderEntries(data.folders.map((name) => ({ name, kind: 'pages' })))
+          }
         }
       } catch { /* empty */ } finally {
         setLoading(false)
@@ -102,6 +124,38 @@ export default function CreateCanvasForm({ onClose }) {
     fetchFolders()
   }, [])
 
+  function handleFolderSelectChange(value) {
+    setFolderSelectValue(value)
+    if (value === NEW_FOLDER_VALUE) {
+      // Defer folder commit until the user types a name.
+      setFolder('')
+    } else {
+      setFolder(value)
+      setNewFolderName('')
+    }
+  }
+
+  // Whenever the user types into the new-folder input, mirror it into `folder`
+  // so the submit handler picks it up. Kebab-case to match canvas folder
+  // naming conventions (data plugin / route resolution assumes lowercase).
+  const kebabNewFolder = useMemo(
+    () =>
+      newFolderName
+        .replace(/[^a-zA-Z0-9\s_-]/g, '')
+        .trim()
+        .replace(/[\s_]+/g, '-')
+        .toLowerCase()
+        .replace(/-+/g, '-')
+        .replace(/^-|-$/g, ''),
+    [newFolderName],
+  )
+
+  useEffect(() => {
+    if (folderSelectValue === NEW_FOLDER_VALUE) {
+      setFolder(kebabNewFolder)
+    }
+  }, [folderSelectValue, kebabNewFolder])
+
   function handleTitleInput(e) {
     setTitle(e.target.value)
     setTitleTouched(true)
@@ -126,6 +180,10 @@ export default function CreateCanvasForm({ onClose }) {
           title: displayTitle,
           description: description || undefined,
           folder: folder || undefined,
+          // Only meaningful when the folder doesn't exist yet — the server
+          // resolves existing folders by inspecting the filesystem and
+          // ignores `folderKind` in that case.
+          folderKind: folder && folderSelectValue === NEW_FOLDER_VALUE ? newFolderKind : undefined,
           grid,
         }),
       })
@@ -209,19 +267,50 @@ export default function CreateCanvasForm({ onClose }) {
           <select
             id="canvas-folder"
             className={selectClass}
-            value={folder}
-            onChange={(e) => setFolder(e.target.value)}
+            value={folderSelectValue}
+            onChange={(e) => handleFolderSelectChange(e.target.value)}
             disabled={loading}
           >
             <option value="">No folder</option>
-            {folders.map((f) => (
-              <option key={f} value={f}>
-                {f}
+            {folderEntries.map((f) => (
+              <option key={`${f.kind}:${f.name}`} value={f.name}>
+                {f.name} {f.kind === 'workspace' ? '— workspace folder' : '— canvas pages'}
               </option>
             ))}
+            <option value={NEW_FOLDER_VALUE}>+ Create new folder…</option>
           </select>
         </div>
 
+        {folderSelectValue === NEW_FOLDER_VALUE && (
+          <div className="space-y-2 pl-4 border-l-2 border-muted">
+            <div className="space-y-1">
+              <Label htmlFor="canvas-new-folder-name">New folder name</Label>
+              <Input
+                id="canvas-new-folder-name"
+                value={newFolderName}
+                onChange={(e) => setNewFolderName(e.target.value)}
+                placeholder="kebab-case-folder"
+              />
+            </div>
+            <div className="space-y-1">
+              <Label htmlFor="canvas-new-folder-kind">Folder type</Label>
+              <select
+                id="canvas-new-folder-kind"
+                className={selectClass}
+                value={newFolderKind}
+                onChange={(e) => setNewFolderKind(e.target.value)}
+              >
+                <option value="workspace">
+                  Workspace folder — sibling canvases grouped in the workspace
+                </option>
+                <option value="pages">
+                  Canvas pages — multi-page canvas, canvases become pages
+                </option>
+              </select>
+            </div>
+          </div>
+        )}
+
         <div className="flex items-center gap-2">
           <Checkbox
             id="canvas-grid"

package/src/internals/ArtifactForm/ArtifactForm.module.css

@@ -5,8 +5,8 @@
 .formShell {
   max-width: 480px;
   padding: 28px;
-  background: var(--bgColor-default, #ffffff);
-  border: 1px solid var(--borderColor-default, #d0d7de);
+  background: var(--color-background, #ffffff);
+  border: 1px solid var(--color-border, #d0d7de);
   border-radius: 14px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
 }
@@ -38,7 +38,7 @@
   font-size: 20px;
   font-weight: 700;
   line-height: 1.2;
-  color: var(--fgColor-default, #1a1a1a);
+  color: var(--color-foreground, #1a1a1a);
   letter-spacing: -0.01em;
 }
 
@@ -49,7 +49,7 @@
 .description {
   margin: 0;
   font-size: 14px;
-  color: var(--fgColor-muted, #656d76);
+  color: var(--color-foreground-muted, #656d76);
   line-height: 1.45;
 }
 
@@ -70,7 +70,7 @@
 /* ─── Code field override (textarea variant) ─── */
 
 .codeField {
-  font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace);
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace);
   font-size: 13px;
   line-height: 1.5;
 }
@@ -84,7 +84,7 @@
   gap: 8px;
   margin-top: 4px;
   padding-top: 16px;
-  border-top: 1px solid var(--borderColor-muted, #eaeef2);
+  border-top: 1px solid var(--color-border-muted, #eaeef2);
 }
 
 /* ─── Advanced toggle ─── */
@@ -92,7 +92,7 @@
 .advancedToggle {
   align-self: flex-start;
   margin-top: 2px;
-  color: var(--fgColor-muted, #656d76);
+  color: var(--color-foreground-muted, #656d76);
   padding-left: 10px;
   padding-right: 10px;
 }