@maxhealth.tech/prefab 0.2.20 → 0.2.21

package/CHANGELOG.md

@@ -2,11 +2,17 @@
 
 All notable changes to this project will be documented in this file.
 
-## [Unreleased] — v0.2.20
+## [Unreleased] — v0.2.21
+
+### Host Theme Adaptation
+- **Fixed**: `[data-theme]` blocks had static-only values, so Claude Desktop's host theme colors were ignored — UI looked plain/unstyled despite receiving host variables
+- Restored 3-tier fallback chain (`MCP Apps → VS Code → static`) in all four theme blocks (`:root`, `@media dark`, `[data-theme="dark"]`, `[data-theme="light"]`)
+- Standalone toggle still works: MCP/VS Code vars undefined → falls to static defaults
+
+## [0.2.20] — 2026-04-29
 
 ### Theme Toggle Fix
 - **Fixed**: dark/light toggle icon flipped but colours didn't change — `@media (prefers-color-scheme: dark) :root:not(...)` at specificity (0,2,0) beat `[data-theme]` at (0,1,0). Bumped to `:root[data-theme="dark/light"]` (0,2,0) so toggle wins by source order
-- `[data-theme]` blocks now use static values only (not host var fallback chains) — prevents both themes resolving to the same host variable
 
 ### VS Code Theme Sync
 - `syncVsCodeTheme()` — reads `data-vscode-theme-kind` from `document.body`, maps to `data-theme` on `:root` (`vscode-dark` / `vscode-high-contrast` → `dark`, else `light`)

package/dist/app.d.ts

@@ -9,7 +9,7 @@ import type { ComponentJSON } from './core/component.js';
 import type { Action, ActionJSON } from './actions/types.js';
 import type { PipeFn } from './rx/pipes.js';
 /** Package version — injected by build script, updated at release time. */
-export declare const VERSION = "0.2.20";
+export declare const VERSION = "0.2.21";
 export interface Theme {
     light?: Record<string, string>;
     dark?: Record<string, string>;

package/dist/app.js

@@ -7,7 +7,7 @@
 import {} from './core/component.js';
 import { drainAutoState } from './rx/state-collector.js';
 /** Package version — injected by build script, updated at release time. */
-export const VERSION = '0.2.20';
+export const VERSION = '0.2.21';
 export class PrefabApp {
     title;
     view;

package/dist/prefab.css

@@ -113,80 +113,83 @@
 
 /* Explicit dark override via data-theme attribute.
    Specificity (0,2,0) via :root[...] to beat the @media dark :root:not(...) rule.
-   Static values only — host vars live in :root / @media dark.
-   applyHostTheme() inline styles win over these when a host is present. */
+   Full fallback chain: MCP Apps → VS Code → static.
+   In hosted mode (Claude/VS Code): applyHostTheme() sets both data-theme AND
+   the inline MCP Apps vars, so the chain resolves to host values.
+   In standalone mode: MCP Apps / VS Code vars are undefined → static wins,
+   so the manual theme toggle produces correct colors. */
 :root[data-theme="dark"] {
-  --background: #09090b;
-  --foreground: #fafafa;
+  --background:            var(--color-background-primary, var(--vscode-editor-background, #09090b));
+  --foreground:            var(--color-text-primary, var(--vscode-editor-foreground, #fafafa));
 
-  --card: #111113;
-  --card-foreground: #fafafa;
+  --card:                  var(--color-background-secondary, var(--vscode-editorWidget-background, #111113));
+  --card-foreground:       var(--color-text-primary, var(--vscode-editorWidget-foreground, #fafafa));
 
-  --popover: #111113;
-  --popover-foreground: #fafafa;
+  --popover:               var(--color-background-secondary, var(--vscode-editorHoverWidget-background, #111113));
+  --popover-foreground:    var(--color-text-primary, var(--vscode-editorHoverWidget-foreground, #fafafa));
 
-  --primary: #60a5fa;
-  --primary-foreground: #09090b;
+  --primary:               var(--color-background-info, var(--vscode-button-background, #60a5fa));
+  --primary-foreground:    var(--color-text-inverse, var(--vscode-button-foreground, #09090b));
 
-  --secondary: #1f2937;
-  --secondary-foreground: #f3f4f6;
+  --secondary:             var(--color-background-tertiary, var(--vscode-button-secondaryBackground, #1f2937));
+  --secondary-foreground:  var(--color-text-secondary, var(--vscode-button-secondaryForeground, #f3f4f6));
 
-  --muted: #1f2937;
-  --muted-foreground: #9ca3af;
+  --muted:                 var(--color-background-tertiary, var(--vscode-editorWidget-background, #1f2937));
+  --muted-foreground:      var(--color-text-tertiary, var(--vscode-descriptionForeground, #9ca3af));
 
-  --accent: #1e3a5f;
-  --accent-foreground: #93c5fd;
+  --accent:                var(--color-background-ghost, var(--vscode-list-hoverBackground, #1e3a5f));
+  --accent-foreground:     var(--color-text-info, var(--vscode-list-hoverForeground, #93c5fd));
 
-  --destructive: #f87171;
-  --destructive-foreground: #09090b;
+  --destructive:           var(--color-background-danger, var(--vscode-errorForeground, #f87171));
+  --destructive-foreground: var(--color-text-inverse, #09090b);
 
-  --success: #4ade80;
-  --success-foreground: #09090b;
+  --success:               var(--color-background-success, #4ade80);
+  --success-foreground:    var(--color-text-inverse, #09090b);
 
-  --warning: #fbbf24;
-  --warning-foreground: #09090b;
+  --warning:               var(--color-background-warning, #fbbf24);
+  --warning-foreground:    var(--color-text-inverse, #09090b);
 
-  --border: #27272a;
-  --input: #27272a;
-  --ring: #60a5fa;
+  --border:                var(--color-border-primary, var(--vscode-panel-border, #27272a));
+  --input:                 var(--color-border-secondary, var(--vscode-input-background, #27272a));
+  --ring:                  var(--color-ring-primary, var(--vscode-focusBorder, #60a5fa));
 }
 
 /* Explicit light override via data-theme attribute.
-   Same specificity bump as dark block above. */
+   Same specificity + fallback strategy as the dark block above. */
 :root[data-theme="light"] {
-  --background: #ffffff;
-  --foreground: #09090b;
+  --background:            var(--color-background-primary, var(--vscode-editor-background, #ffffff));
+  --foreground:            var(--color-text-primary, var(--vscode-editor-foreground, #09090b));
 
-  --card: #ffffff;
-  --card-foreground: #09090b;
+  --card:                  var(--color-background-secondary, var(--vscode-editorWidget-background, #ffffff));
+  --card-foreground:       var(--color-text-primary, var(--vscode-editorWidget-foreground, #09090b));
 
-  --popover: #ffffff;
-  --popover-foreground: #09090b;
+  --popover:               var(--color-background-secondary, var(--vscode-editorHoverWidget-background, #ffffff));
+  --popover-foreground:    var(--color-text-primary, var(--vscode-editorHoverWidget-foreground, #09090b));
 
-  --primary: #3b82f6;
-  --primary-foreground: #ffffff;
+  --primary:               var(--color-background-info, var(--vscode-button-background, #3b82f6));
+  --primary-foreground:    var(--color-text-inverse, var(--vscode-button-foreground, #ffffff));
 
-  --secondary: #f3f4f6;
-  --secondary-foreground: #1f2937;
+  --secondary:             var(--color-background-tertiary, var(--vscode-button-secondaryBackground, #f3f4f6));
+  --secondary-foreground:  var(--color-text-secondary, var(--vscode-button-secondaryForeground, #1f2937));
 
-  --muted: #f3f4f6;
-  --muted-foreground: #6b7280;
+  --muted:                 var(--color-background-tertiary, var(--vscode-editorWidget-background, #f3f4f6));
+  --muted-foreground:      var(--color-text-tertiary, var(--vscode-descriptionForeground, #6b7280));
 
-  --accent: #eff6ff;
-  --accent-foreground: #1e40af;
+  --accent:                var(--color-background-ghost, var(--vscode-list-hoverBackground, #eff6ff));
+  --accent-foreground:     var(--color-text-info, var(--vscode-list-hoverForeground, #1e40af));
 
-  --destructive: #ef4444;
-  --destructive-foreground: #ffffff;
+  --destructive:           var(--color-background-danger, var(--vscode-errorForeground, #ef4444));
+  --destructive-foreground: var(--color-text-inverse, #ffffff);
 
-  --success: #22c55e;
-  --success-foreground: #ffffff;
+  --success:               var(--color-background-success, #22c55e);
+  --success-foreground:    var(--color-text-inverse, #ffffff);
 
-  --warning: #f59e0b;
-  --warning-foreground: #ffffff;
+  --warning:               var(--color-background-warning, #f59e0b);
+  --warning-foreground:    var(--color-text-inverse, #ffffff);
 
-  --border: #e5e7eb;
-  --input: #e5e7eb;
-  --ring: #3b82f6;
+  --border:                var(--color-border-primary, var(--vscode-panel-border, #e5e7eb));
+  --input:                 var(--color-border-secondary, var(--vscode-input-background, #e5e7eb));
+  --ring:                  var(--color-ring-primary, var(--vscode-focusBorder, #3b82f6));
 }
 
 /* ═══════════════════════════════════════════════════════════════════════════

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maxhealth.tech/prefab",
-  "version": "0.2.20",
+  "version": "0.2.21",
   "description": "TypeScript declarative UI component library for MCP apps. Wire-compatible with Python prefab-ui.",
   "type": "module",
   "main": "dist/index.js",