@dfosco/storyboard 0.8.1 → 0.9.0

package/src/core/stores/presentationStore.js

@@ -0,0 +1,118 @@
+/**
+ * Presentation Store — consumer-supplied overrides for storyboard chrome elements.
+ *
+ * A chrome element is any rendered piece of storyboard UI that is wrapped in
+ * `<ChromeSlot id="...">` (toolbar buttons, canvas title, page selector, etc.).
+ *
+ * Consumers seed this registry through `mountStoryboardCore({ presentation })`
+ * and the store applies per-element overrides at render time:
+ *
+ *   {
+ *     "tool:command-palette": {
+ *       style:     { transform: 'translateY(20px)', opacity: 0 },
+ *       className: 'landing-floating-button',
+ *       props:     { onPointerEnter: handleHover },
+ *       decorator: (Element, ctx) => <ScrollAnimator>{Element}</ScrollAnimator>,
+ *     },
+ *     "canvas:title": { hidden: true },
+ *   }
+ *
+ * This is an **advanced, undocumented** extension surface — intended for
+ * landing-page / hero canvas use cases where the consumer needs heavy
+ * customization of storyboard chrome. Not part of the public API.
+ *
+ * Framework-agnostic (zero npm dependencies).
+ */
+
+/**
+ * @typedef {object} PresentationOverride
+ * @property {React.CSSProperties} [style]     - Spread onto the chrome element root style
+ * @property {string}              [className] - Appended to the chrome element root className
+ * @property {object}              [props]     - Spread as additional props on the chrome element
+ * @property {Function}            [decorator] - (Element, ctx) => ReactNode wrapper
+ * @property {boolean}             [hidden]    - If true, render null (shorthand for full hide)
+ */
+
+/** @type {Map<string, PresentationOverride>} */
+let _overrides = new Map()
+
+/** @type {Set<Function>} */
+const _listeners = new Set()
+
+let _snapshotVersion = 0
+
+/**
+ * Seed the presentation registry from a consumer-supplied map.
+ * Replaces any previous overrides. Called once at app startup.
+ *
+ * @param {Record<string, PresentationOverride>} [map]
+ */
+export function initPresentation(map) {
+  _overrides = new Map()
+  if (map && typeof map === 'object') {
+    for (const [id, override] of Object.entries(map)) {
+      if (override && typeof override === 'object') {
+        _overrides.set(id, override)
+      }
+    }
+  }
+  _notify()
+}
+
+/**
+ * Set or replace a single chrome element's presentation override.
+ * @param {string} id
+ * @param {PresentationOverride|null|undefined} override Pass null/undefined to clear.
+ */
+export function setPresentation(id, override) {
+  if (override == null) {
+    _overrides.delete(id)
+  } else if (typeof override === 'object') {
+    _overrides.set(id, override)
+  }
+  _notify()
+}
+
+/**
+ * Get the presentation override for a chrome element ID, or null if none.
+ * @param {string} id
+ * @returns {PresentationOverride|null}
+ */
+export function getPresentation(id) {
+  return _overrides.get(id) || null
+}
+
+/**
+ * Subscribe to presentation registry changes. Returns an unsubscribe fn.
+ * Compatible with `useSyncExternalStore` shape.
+ * @param {Function} callback
+ * @returns {Function}
+ */
+export function subscribeToPresentation(callback) {
+  _listeners.add(callback)
+  return () => _listeners.delete(callback)
+}
+
+/**
+ * Snapshot version for change detection. Compatible with `useSyncExternalStore`.
+ * @returns {string}
+ */
+export function getPresentationSnapshot() {
+  return String(_snapshotVersion)
+}
+
+function _notify() {
+  _snapshotVersion++
+  for (const cb of _listeners) {
+    try { cb() } catch (err) {
+      console.error('[storyboard] Error in presentation subscriber:', err)
+    }
+  }
+}
+
+/** Reset all state. Only for tests. */
+export function _resetPresentation() {
+  _overrides = new Map()
+  _listeners.clear()
+  _snapshotVersion = 0
+}

package/src/core/stores/presentationStore.test.js

@@ -0,0 +1,114 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+
+import {
+  initPresentation,
+  setPresentation,
+  getPresentation,
+  subscribeToPresentation,
+  getPresentationSnapshot,
+  _resetPresentation,
+} from './presentationStore.js'
+
+describe('presentationStore', () => {
+  beforeEach(() => {
+    _resetPresentation()
+  })
+
+  it('returns null when no override is registered', () => {
+    expect(getPresentation('tool:command-palette')).toBeNull()
+  })
+
+  it('seeds overrides from initPresentation', () => {
+    initPresentation({
+      'tool:command-palette': { hidden: true },
+      'canvas:title': { className: 'landing-title' },
+    })
+    expect(getPresentation('tool:command-palette')).toEqual({ hidden: true })
+    expect(getPresentation('canvas:title')).toEqual({ className: 'landing-title' })
+    expect(getPresentation('nope:nothing')).toBeNull()
+  })
+
+  it('ignores non-object values in initPresentation', () => {
+    initPresentation({
+      'tool:a': null,
+      'tool:b': 'invalid',
+      'tool:c': 42,
+      'tool:d': { hidden: true },
+    })
+    expect(getPresentation('tool:a')).toBeNull()
+    expect(getPresentation('tool:b')).toBeNull()
+    expect(getPresentation('tool:c')).toBeNull()
+    expect(getPresentation('tool:d')).toEqual({ hidden: true })
+  })
+
+  it('replaces previous overrides on subsequent initPresentation calls', () => {
+    initPresentation({ 'tool:a': { hidden: true } })
+    initPresentation({ 'tool:b': { hidden: true } })
+    expect(getPresentation('tool:a')).toBeNull()
+    expect(getPresentation('tool:b')).toEqual({ hidden: true })
+  })
+
+  it('initPresentation() with no arg clears all overrides', () => {
+    initPresentation({ 'tool:a': { hidden: true } })
+    initPresentation()
+    expect(getPresentation('tool:a')).toBeNull()
+  })
+
+  it('setPresentation adds and updates individual overrides', () => {
+    setPresentation('tool:a', { className: 'foo' })
+    expect(getPresentation('tool:a')).toEqual({ className: 'foo' })
+
+    setPresentation('tool:a', { className: 'bar' })
+    expect(getPresentation('tool:a')).toEqual({ className: 'bar' })
+  })
+
+  it('setPresentation with null/undefined deletes the override', () => {
+    setPresentation('tool:a', { hidden: true })
+    setPresentation('tool:a', null)
+    expect(getPresentation('tool:a')).toBeNull()
+
+    setPresentation('tool:b', { hidden: true })
+    setPresentation('tool:b', undefined)
+    expect(getPresentation('tool:b')).toBeNull()
+  })
+
+  it('subscribers are notified on init, set, and clear', () => {
+    const cb = vi.fn()
+    const unsub = subscribeToPresentation(cb)
+
+    initPresentation({ 'tool:a': { hidden: true } })
+    setPresentation('tool:b', { className: 'x' })
+    setPresentation('tool:a', null)
+
+    expect(cb).toHaveBeenCalledTimes(3)
+    unsub()
+
+    setPresentation('tool:c', { hidden: true })
+    expect(cb).toHaveBeenCalledTimes(3) // not called after unsubscribe
+  })
+
+  it('snapshot version changes on every mutation', () => {
+    const v0 = getPresentationSnapshot()
+    setPresentation('tool:a', { hidden: true })
+    const v1 = getPresentationSnapshot()
+    expect(v1).not.toBe(v0)
+
+    setPresentation('tool:b', { hidden: true })
+    const v2 = getPresentationSnapshot()
+    expect(v2).not.toBe(v1)
+  })
+
+  it('subscriber errors are isolated', () => {
+    const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+    const goodCb = vi.fn()
+
+    subscribeToPresentation(() => { throw new Error('boom') })
+    subscribeToPresentation(goodCb)
+
+    setPresentation('tool:a', { hidden: true })
+
+    expect(goodCb).toHaveBeenCalled()
+    expect(consoleSpy).toHaveBeenCalled()
+    consoleSpy.mockRestore()
+  })
+})

package/src/core/stores/uiConfig.js

@@ -2,14 +2,22 @@
  * UI Config — project-level overrides for storyboard chrome visibility.
  *
  * Client repos use the "ui" key in storyboard.config.json to hide
- * specific menus or UI elements from the CoreUIBar.
+ * specific menus, toolbar items, or workspace nav entries.
  *
  *   {
  *     "ui": {
- *       "hide": ["docs", "comments"]
+ *       "hide": [
+ *         "docs",                 // CoreUIBar menu key
+ *         "comments",             // CoreUIBar menu key
+ *         "workspace:components"  // workspace sidebar nav id
+ *       ]
  *     }
  *   }
  *
+ * Convention: namespaced keys (`<surface>:<id>`) are recommended for new
+ * surfaces to avoid collisions. Existing CoreUIBar menus use bare keys
+ * for back-compat.
+ *
  * Framework-agnostic (zero npm dependencies).
  */
 

package/src/core/styles/tailwind.css

@@ -23,103 +23,151 @@
   font-display: swap;
 }
 
+/*
+ * Storyboard color token Single Source of Truth.
+ *
+ * All semantic color variables live here. Two naming families coexist:
+ *
+ *   1. shadcn-style (`--color-*`)              — used by Tailwind utilities
+ *      (`bg-background`, `text-foreground`) and shadcn primitives.
+ *   2. Storyboard chrome (`--color-background-*`, `--color-foreground-*`,
+ *      `--color-border-*`, `--color-overlay-*`, `--shadow-*`)
+ *      — used by every workspace / canvas / widget CSS module.
+ *
+ * Light values live on `:root` (via `@theme`). Dark overrides live on
+ * `[data-sb-theme^="dark"]` and every per-surface dark attribute
+ * (`data-sb-canvas-theme`, `data-sb-prototype-theme`, etc.). The same
+ * selector list drives the `dark:` Tailwind variant (`themes.generated.css`).
+ *
+ * Concrete hex values are GitHub Primer palette values, kept verbatim
+ * so the visual identity is unchanged after dropping `@primer/primitives`.
+ */
 @theme {
-  --color-background: hsl(0 0% 100%);
-  --color-foreground: hsl(222.2 84% 4.9%);
-  --color-card: hsl(0 0% 100%);
-  --color-card-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-destructive: hsl(0 84.2% 60.2%);
-  --color-destructive-foreground: hsl(210 40% 98%);
-  --color-border: hsl(214.3 31.8% 91.4%);
-  --color-input: hsl(214.3 31.8% 91.4%);
-  --color-ring: hsl(222.2 84% 4.9%);
-  --color-success: hsl(142 71% 36%);
-  --color-success-foreground: hsl(0 0% 100%);
+  --color-background: #ffffff;
+  --color-background-muted: #f6f8fa;
+  --color-background-inset: #f6f8fa;
+  --color-background-emphasis: #25292e;
+  --color-background-inverse: #25292e;
+  --color-background-neutral-muted: #818b981f;
+  --color-background-neutral-emphasis: #59636e;
+  --color-background-accent-muted: #ddf4ff;
+  --color-background-accent-emphasis: #0969da;
+  --color-background-accent-emphasis-hover: #0860c7;
+  --color-background-danger-muted: #ffebe9;
+  --color-background-danger-emphasis: #cf222e;
+  --color-background-success-muted: #dafbe1;
+  --color-background-success-emphasis: #1f883d;
+  --color-background-success-hover: #1a7f37;
+  --color-background-attention-muted: #fff8c5;
+  --color-background-done-muted: #fbefff;
+  --color-background-done-emphasis: #8250df;
+  --color-background-open-emphasis: #1f883d;
+  --color-background-closed-emphasis: #cf222e;
+
+  --color-foreground: #1f2328;
+  --color-foreground-muted: #59636e;
+  --color-foreground-accent: #0969da;
+  --color-foreground-danger: #d1242f;
+  --color-foreground-success: #1a7f37;
+  --color-foreground-attention: #9a6700;
+  --color-foreground-on-emphasis: #ffffff;
+  --color-foreground-on-inverse: #ffffff;
+
+  --color-border: #d1d9e0;
+  --color-border-muted: #d1d9e0b3;
+  --color-border-emphasis: #818b98;
+  --color-border-accent-emphasis: #0969da;
+  --color-border-accent-muted: #54aeff66;
+  --color-border-danger-emphasis: #cf222e;
+  --color-border-danger-muted: #ff818266;
+  --color-border-success-muted: #4ac26b66;
+  --color-border-attention-muted: #d4a72c66;
+
+  --color-overlay-backdrop: #c8d1da66;
+
+  --shadow-resting: 0px 1px 1px 0px #1f23280f, 0px 1px 3px 0px #1f23280f;
+  --shadow-floating: 0px 0px 0px 1px #d1d9e080, 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f;
+
+  /* shadcn primitives (Tailwind utility-friendly aliases) */
+  --color-card: var(--color-background);
+  --color-card-foreground: var(--color-foreground);
+  --color-popover: var(--color-background);
+  --color-popover-foreground: var(--color-foreground);
+  --color-primary: #1f2328;
+  --color-primary-foreground: #ffffff;
+  --color-secondary: var(--color-background-muted);
+  --color-secondary-foreground: var(--color-foreground);
+  --color-muted: var(--color-background-muted);
+  --color-muted-foreground: var(--color-foreground-muted);
+  --color-accent: var(--color-background-accent-muted);
+  --color-accent-foreground: var(--color-foreground-accent);
+  --color-destructive: var(--color-background-danger-emphasis);
+  --color-destructive-foreground: #ffffff;
+  --color-input: var(--color-border);
+  --color-ring: var(--color-background-accent-emphasis);
+  --color-success: var(--color-background-success-emphasis);
+  --color-success-foreground: #ffffff;
+
   --radius: 0.5rem;
   --font-sans: "Hubot Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
   --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
-
-  --sb--color-background: hsl(0 0% 100%);
-  --sb--color-foreground: hsl(222.2 84% 4.9%);
-  --sb--color-card: hsl(0 0% 100%);
-  --sb--color-card-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-destructive: hsl(0 84.2% 60.2%);
-  --sb--color-destructive-foreground: hsl(210 40% 98%);
-  --sb--color-border: hsl(214.3 31.8% 91.4%);
-  --sb--color-input: hsl(214.3 31.8% 91.4%);
-  --sb--color-ring: hsl(222.2 84% 4.9%);
-  --sb--color-success: hsl(142 71% 36%);
-  --sb--color-success-foreground: hsl(0 0% 100%);
-  --sb--radius: var(--radius);
-  --sb--font-sans: var(--font-sans);
-  --sb--font-mono: var(--font-mono);
 }
 
 @layer base {
-  [data-sb-theme^="dark"] {
-    --color-background: hsl(222.2 84% 4.9%);
-    --color-foreground: hsl(210 40% 98%);
-    --color-card: hsl(222.2 84% 4.9%);
-    --color-card-foreground: hsl(210 40% 98%);
-    --color-popover: hsl(222.2 84% 4.9%);
-    --color-popover-foreground: hsl(210 40% 98%);
-    --color-primary: hsl(210 40% 98%);
-    --color-primary-foreground: hsl(222.2 47.4% 11.2%);
-    --color-secondary: hsl(217.2 32.6% 17.5%);
-    --color-secondary-foreground: hsl(210 40% 98%);
-    --color-muted: hsl(217.2 32.6% 17.5%);
-    --color-muted-foreground: hsl(215 20.2% 65.1%);
-    --color-accent: hsl(217.2 32.6% 17.5%);
-    --color-accent-foreground: hsl(210 40% 98%);
-    --color-destructive: hsl(0 62.8% 30.6%);
-    --color-destructive-foreground: hsl(210 40% 98%);
-    --color-border: hsl(217.2 32.6% 17.5%);
-    --color-input: hsl(217.2 32.6% 17.5%);
-    --color-ring: hsl(212.7 26.8% 83.9%);
-    --color-success: hsl(142 71% 45%);
-    --color-success-foreground: hsl(0 0% 100%);
-
-    --sb--color-background: hsl(222.2 84% 4.9%);
-    --sb--color-foreground: hsl(210 40% 98%);
-    --sb--color-card: hsl(222.2 84% 4.9%);
-    --sb--color-card-foreground: hsl(210 40% 98%);
-    --sb--color-popover: hsl(222.2 84% 4.9%);
-    --sb--color-popover-foreground: hsl(210 40% 98%);
-    --sb--color-primary: hsl(210 40% 98%);
-    --sb--color-primary-foreground: hsl(222.2 47.4% 11.2%);
-    --sb--color-secondary: hsl(217.2 32.6% 17.5%);
-    --sb--color-secondary-foreground: hsl(210 40% 98%);
-    --sb--color-muted: hsl(217.2 32.6% 17.5%);
-    --sb--color-muted-foreground: hsl(215 20.2% 65.1%);
-    --sb--color-accent: hsl(217.2 32.6% 17.5%);
-    --sb--color-accent-foreground: hsl(210 40% 98%);
-    --sb--color-destructive: hsl(0 62.8% 30.6%);
-    --sb--color-destructive-foreground: hsl(210 40% 98%);
-    --sb--color-border: hsl(217.2 32.6% 17.5%);
-    --sb--color-input: hsl(217.2 32.6% 17.5%);
-    --sb--color-ring: hsl(212.7 26.8% 83.9%);
-    --sb--color-success: hsl(142 71% 45%);
-    --sb--color-success-foreground: hsl(0 0% 100%);
+  [data-sb-theme^="dark"],
+  [data-sb-canvas-theme^="dark"],
+  [data-sb-prototype-theme^="dark"],
+  [data-sb-toolbar-theme^="dark"],
+  [data-sb-codeboxes-theme^="dark"],
+  [data-sb-code-theme^="dark"] {
+    --color-background: #0d1117;
+    --color-background-muted: #151b23;
+    --color-background-inset: #010409;
+    --color-background-emphasis: #3d444d;
+    --color-background-inverse: #ffffff;
+    --color-background-neutral-muted: #656c7633;
+    --color-background-neutral-emphasis: #656c76;
+    --color-background-accent-muted: #388bfd1a;
+    --color-background-accent-emphasis: #1f6feb;
+    --color-background-accent-emphasis-hover: #388bfd;
+    --color-background-danger-muted: #f851491a;
+    --color-background-danger-emphasis: #da3633;
+    --color-background-success-muted: #2ea04326;
+    --color-background-success-emphasis: #238636;
+    --color-background-success-hover: #2ea043;
+    --color-background-attention-muted: #bb800926;
+    --color-background-done-muted: #ab7df81a;
+    --color-background-done-emphasis: #8957e5;
+    --color-background-open-emphasis: #238636;
+    --color-background-closed-emphasis: #da3633;
+
+    --color-foreground: #f0f6fc;
+    --color-foreground-muted: #9198a1;
+    --color-foreground-accent: #4493f8;
+    --color-foreground-danger: #f85149;
+    --color-foreground-success: #3fb950;
+    --color-foreground-attention: #d29922;
+    --color-foreground-on-emphasis: #ffffff;
+    --color-foreground-on-inverse: #010409;
+
+    --color-border: #3d444d;
+    --color-border-muted: #3d444db3;
+    --color-border-emphasis: #656c76;
+    --color-border-accent-emphasis: #1f6feb;
+    --color-border-accent-muted: #388bfd66;
+    --color-border-danger-emphasis: #da3633;
+    --color-border-danger-muted: #f8514966;
+    --color-border-success-muted: #2ea04366;
+    --color-border-attention-muted: #bb800966;
+
+    --color-overlay-backdrop: #21283066;
+
+    --shadow-resting: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
+    --shadow-floating: 0px 0px 0px 1px #3d444d, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
+
+    --color-primary: #f0f6fc;
+    --color-primary-foreground: #0d1117;
+    --color-ring: var(--color-background-accent-emphasis);
   }
 }
 @custom-variant data-open {

package/src/core/styles/workspace-chrome.css

@@ -6,25 +6,8 @@
  * Prototypes and stories do NOT load this stylesheet — their CSS chain
  * is owned by the consumer's `src/_prototype.jsx` / `src/_story.jsx`.
  *
- * Sources:
- *   - @primer/primitives — supplies the --fgColor-*, --bgColor-*,
- *     --borderColor-*, and theme attr selectors that the ~200 CSS module
- *     references across the workspace surfaces depend on.
+ * All color/spacing/typography tokens previously sourced from
+ * `@primer/primitives` now live in `core/styles/tailwind.css` (the
+ * single source of truth). This file is intentionally empty but kept
+ * for backward compatibility with consumers that import it directly.
  */
-@import '@primer/primitives/dist/css/base/size/size.css';
-@import '@primer/primitives/dist/css/base/typography/typography.css';
-@import '@primer/primitives/dist/css/base/motion/motion.css';
-@import '@primer/primitives/dist/css/functional/size/border.css';
-@import '@primer/primitives/dist/css/functional/size/breakpoints.css';
-@import '@primer/primitives/dist/css/functional/size/size-coarse.css';
-@import '@primer/primitives/dist/css/functional/size/size-fine.css';
-@import '@primer/primitives/dist/css/functional/size/size.css';
-@import '@primer/primitives/dist/css/functional/size/viewport.css';
-@import '@primer/primitives/dist/css/functional/typography/typography.css';
-
-@import '@primer/primitives/dist/css/functional/themes/light.css';
-@import '@primer/primitives/dist/css/functional/themes/light-colorblind.css';
-@import '@primer/primitives/dist/css/functional/themes/dark.css';
-@import '@primer/primitives/dist/css/functional/themes/dark-colorblind.css';
-@import '@primer/primitives/dist/css/functional/themes/dark-high-contrast.css';
-@import '@primer/primitives/dist/css/functional/themes/dark-dimmed.css';

package/src/core/ui/AutosyncMenuButton.css

@@ -1,14 +1,14 @@
 .menuTitle {
   font-size: 13px;
   font-weight: 500;
-  color: var(--fgColor-default, #e6edf3);
+  color: var(--color-foreground, #e6edf3);
   padding: 6px 6px 0;
   margin: 0;
 }
 
 .description {
   font-size: 12px;
-  color: var(--fgColor-muted, #848d97);
+  color: var(--color-foreground-muted, #848d97);
   padding: 0 6px 4px;
   margin: 0;
   line-height: 1.4;
@@ -24,7 +24,7 @@
 .branchLabel {
   font-size: 13px;
   font-weight: 500;
-  color: var(--fgColor-default, #e6edf3);
+  color: var(--color-foreground, #e6edf3);
 }
 
 .statusRow {
@@ -33,19 +33,19 @@
 
 .scopeHint {
   font-size: 11px;
-  color: var(--fgColor-muted, #848d97);
+  color: var(--color-foreground-muted, #848d97);
   padding: 4px 0;
   margin: 0;
 }
 
 .statusError {
   font-size: 11px;
-  color: var(--fgColor-danger, #f85149);
+  color: var(--color-foreground-danger, #f85149);
 }
 
 .statusOk {
   font-size: 11px;
-  color: var(--fgColor-muted, #848d97);
+  color: var(--color-foreground-muted, #848d97);
 }
 
 .footer {
@@ -53,7 +53,7 @@
   align-items: center;
   gap: 6px;
   font-size: 12px;
-  color: var(--fgColor-muted, #848d97);
+  color: var(--color-foreground-muted, #848d97);
   padding: 2px 6px 0;
   margin: 0;
 }

package/src/core/ui/BranchSelect.module.css

@@ -1,9 +1,9 @@
 .select {
   width: 100%;
   appearance: none;
-  background-color: var(--bgColor-default, #0d1117);
-  color: var(--fgColor-default, #e6edf3);
-  border: 1px solid var(--borderColor-default, #30363d);
+  background-color: var(--color-background, #0d1117);
+  color: var(--color-foreground, #e6edf3);
+  border: 1px solid var(--color-border, #30363d);
   border-radius: 8px;
   padding: 8px 32px 8px 12px;
   font-size: 13px;
@@ -16,11 +16,11 @@
 }
 
 .select:hover:not(:disabled) {
-  border-color: var(--fgColor-muted, #848d97);
+  border-color: var(--color-foreground-muted, #848d97);
 }
 
 .select:focus-visible {
-  outline: 2px solid var(--borderColor-accent-emphasis, #1f6feb);
+  outline: 2px solid var(--color-border-accent-emphasis, #1f6feb);
   outline-offset: -1px;
 }