@runtypelabs/persona 3.5.2 → 3.6.0

package/src/ui.ts

@@ -703,9 +703,7 @@ export const createAgentExperience = (
       eventStreamView.update();
     }
     if (eventStreamToggleBtn) {
-      eventStreamToggleBtn.classList.remove("persona-text-persona-muted");
-      eventStreamToggleBtn.classList.add("persona-text-persona-accent");
-      eventStreamToggleBtn.style.boxShadow = "inset 0 0 0 1.5px var(--persona-accent, #3b82f6)";
+      eventStreamToggleBtn.style.boxShadow = `inset 0 0 0 1.5px ${HEADER_THEME_CSS.actionIconColor}`;
       const activeClasses = config.features?.eventStream?.classNames?.toggleButtonActive;
       if (activeClasses) activeClasses.split(/\s+/).forEach(c => c && eventStreamToggleBtn!.classList.add(c));
     }
@@ -732,8 +730,6 @@ export const createAgentExperience = (
     }
     body.style.display = "";
     if (eventStreamToggleBtn) {
-      eventStreamToggleBtn.classList.remove("persona-text-persona-accent");
-      eventStreamToggleBtn.classList.add("persona-text-persona-muted");
       eventStreamToggleBtn.style.boxShadow = "";
       const activeClasses = config.features?.eventStream?.classNames?.toggleButtonActive;
       if (activeClasses) activeClasses.split(/\s+/).forEach(c => c && eventStreamToggleBtn!.classList.remove(c));
@@ -750,10 +746,11 @@ export const createAgentExperience = (
   let eventStreamToggleBtn: HTMLButtonElement | null = null;
   if (showEventStreamToggle) {
     const esClassNames = config.features?.eventStream?.classNames;
-    const toggleBtnClasses = "persona-inline-flex persona-items-center persona-justify-center persona-rounded-full persona-text-persona-muted hover:persona-bg-gray-100 persona-cursor-pointer persona-border-none persona-bg-transparent persona-p-1" + (esClassNames?.toggleButton ? " " + esClassNames.toggleButton : "");
+    const toggleBtnClasses = "persona-inline-flex persona-items-center persona-justify-center persona-rounded-full hover:persona-opacity-80 persona-cursor-pointer persona-border-none persona-bg-transparent persona-p-1" + (esClassNames?.toggleButton ? " " + esClassNames.toggleButton : "");
     eventStreamToggleBtn = createElement("button", toggleBtnClasses) as HTMLButtonElement;
     eventStreamToggleBtn.style.width = "28px";
     eventStreamToggleBtn.style.height = "28px";
+    eventStreamToggleBtn.style.color = HEADER_THEME_CSS.actionIconColor;
     eventStreamToggleBtn.type = "button";
     eventStreamToggleBtn.setAttribute("aria-label", "Event Stream");
     eventStreamToggleBtn.title = "Event Stream";
@@ -877,13 +874,18 @@ export const createAgentExperience = (
   ensureComposerAttachmentSurface(footer);
   bindComposerRefsFromFooter(footer);
 
-  // Apply contentMaxWidth to composer form if configured
+  // Apply contentMaxWidth to composer form and attachment previews if configured
   const contentMaxWidth = config.layout?.contentMaxWidth;
   if (contentMaxWidth && composerForm) {
     composerForm.style.maxWidth = contentMaxWidth;
     composerForm.style.marginLeft = "auto";
     composerForm.style.marginRight = "auto";
   }
+  if (contentMaxWidth && attachmentPreviewsContainer) {
+    attachmentPreviewsContainer.style.maxWidth = contentMaxWidth;
+    attachmentPreviewsContainer.style.marginLeft = "auto";
+    attachmentPreviewsContainer.style.marginRight = "auto";
+  }
 
   if (config.attachments?.enabled && attachmentInput && attachmentPreviewsContainer) {
     attachmentManager = AttachmentManager.fromConfig(config.attachments);
@@ -2388,7 +2390,6 @@ export const createAgentExperience = (
               "persona-shadow-sm",
               "persona-bg-persona-surface",
               "persona-border",
-              "persona-border-persona-message-border",
               "persona-text-persona-primary",
               "persona-px-5",
               "persona-py-3"
@@ -2400,6 +2401,7 @@ export const createAgentExperience = (
               "persona-text-persona-primary"
             ].join(" ");
         typingBubble.setAttribute("data-typing-indicator", "true");
+        typingBubble.style.borderColor = "var(--persona-message-assistant-border, var(--persona-border, #e5e7eb))";
 
         typingBubble.appendChild(typingIndicator);
 
@@ -2483,12 +2485,16 @@ export const createAgentExperience = (
     // This allows the browser to update layout (e.g., typing indicator removal) before scrolling
     // Use double RAF to ensure layout has fully settled before starting scroll animation
     // Get the scrollable container using its unique ID (#persona-scroll-container)
-    requestAnimationFrame(() => {
+    // Only smooth-scroll if auto-scroll hasn't been blocked by the user scrolling up
+    if (shouldAutoScroll && !isAutoScrollBlocked) {
       requestAnimationFrame(() => {
-        const scrollableContainer = getScrollableContainer();
-        smoothScrollToBottom(scrollableContainer);
+        requestAnimationFrame(() => {
+          if (!shouldAutoScroll || isAutoScrollBlocked) return;
+          const scrollableContainer = getScrollableContainer();
+          smoothScrollToBottom(scrollableContainer);
+        });
       });
-    });
+    }
   };
 
   // Alias for clarity - the implementation handles flicker prevention via typing indicator logic
@@ -2982,17 +2988,16 @@ export const createAgentExperience = (
           iconSize: parseFloat(voiceConfig.iconSize ?? config.sendButton?.size ?? "40") || 24,
         };
 
-        // Apply recording state styles from config
-        const recordingBackgroundColor = voiceConfig.recordingBackgroundColor ?? "#ef4444";
+        // Apply recording state styles from config or theme tokens
+        const recordingBackgroundColor = voiceConfig.recordingBackgroundColor;
         const recordingIconColor = voiceConfig.recordingIconColor;
         const recordingBorderColor = voiceConfig.recordingBorderColor;
-        
+
         micButton.classList.add("persona-voice-recording");
-        micButton.style.backgroundColor = recordingBackgroundColor;
-        
+        micButton.style.backgroundColor = recordingBackgroundColor ?? "var(--persona-voice-recording-bg, #ef4444)";
+        micButton.style.color = recordingIconColor ?? "var(--persona-voice-recording-indicator, #ffffff)";
+
         if (recordingIconColor) {
-          micButton.style.color = recordingIconColor;
-          // Update SVG stroke color if present
           const svg = micButton.querySelector("svg");
           if (svg) {
             svg.setAttribute("stroke", recordingIconColor);
@@ -3092,30 +3097,27 @@ export const createAgentExperience = (
     micButton.style.fontSize = "18px";
     micButton.style.lineHeight = "1";
     
-    // Use Lucide mic icon with configured color (stroke width 1.5 for minimalist outline style)
+    // Set mic button foreground from config or theme token
+    if (iconColor) {
+      micButton.style.color = iconColor;
+    } else {
+      micButton.style.color = "var(--persona-text, #111827)";
+    }
+
+    // Use Lucide mic icon (stroke width 1.5 for minimalist outline style)
     const iconColorValue = iconColor || "currentColor";
     const micIconSvg = renderLucideIcon(micIconName, micIconSizeNum, iconColorValue, 1.5);
     if (micIconSvg) {
       micButton.appendChild(micIconSvg);
-      micButton.style.color = iconColorValue;
     } else {
-      // Fallback to text if icon fails
       micButton.textContent = "🎤";
-      micButton.style.color = iconColorValue;
     }
-    
+
     // Apply background color
     if (backgroundColor) {
       micButton.style.backgroundColor = backgroundColor;
     } else {
-      micButton.classList.add("persona-bg-persona-primary");
-    }
-    
-    // Apply icon/text color
-    if (iconColor) {
-      micButton.style.color = iconColor;
-    } else if (!iconColor && !sendButtonConfig?.textColor) {
-      micButton.classList.add("persona-text-white");
+      micButton.style.backgroundColor = "";
     }
     
     // Apply border styling
@@ -3187,14 +3189,14 @@ export const createAgentExperience = (
     if (!micButton) return;
     storeOriginalMicStyles();
     const voiceConfig = config.voiceRecognition ?? {};
-    const recordingBackgroundColor = voiceConfig.recordingBackgroundColor ?? "#ef4444";
+    const recordingBackgroundColor = voiceConfig.recordingBackgroundColor;
     const recordingIconColor = voiceConfig.recordingIconColor;
     const recordingBorderColor = voiceConfig.recordingBorderColor;
     removeAllVoiceStateClasses();
     micButton.classList.add("persona-voice-recording");
-    micButton.style.backgroundColor = recordingBackgroundColor;
+    micButton.style.backgroundColor = recordingBackgroundColor ?? "var(--persona-voice-recording-bg, #ef4444)";
+    micButton.style.color = recordingIconColor ?? "var(--persona-voice-recording-indicator, #ffffff)";
     if (recordingIconColor) {
-      micButton.style.color = recordingIconColor;
       const svg = micButton.querySelector("svg");
       if (svg) svg.setAttribute("stroke", recordingIconColor);
     }
@@ -3240,7 +3242,7 @@ export const createAgentExperience = (
     const iconColor = voiceConfig.speakingIconColor
       ?? (interruptionMode === "barge-in" ? (voiceConfig.recordingIconColor ?? originalMicStyles?.color ?? "") : (originalMicStyles?.color ?? ""));
     const bgColor = voiceConfig.speakingBackgroundColor
-      ?? (interruptionMode === "barge-in" ? (voiceConfig.recordingBackgroundColor ?? "#ef4444") : (originalMicStyles?.backgroundColor ?? ""));
+      ?? (interruptionMode === "barge-in" ? (voiceConfig.recordingBackgroundColor ?? "var(--persona-voice-recording-bg, #ef4444)") : (originalMicStyles?.backgroundColor ?? ""));
     const borderColor = voiceConfig.speakingBorderColor
       ?? (interruptionMode === "barge-in" ? (voiceConfig.recordingBorderColor ?? "") : (originalMicStyles?.borderColor ?? ""));
 
@@ -3718,10 +3720,11 @@ export const createAgentExperience = (
         // Add header toggle button if not present
         if (!eventStreamToggleBtn && header) {
           const dynEsClassNames = config.features?.eventStream?.classNames;
-          const dynToggleBtnClasses = "persona-inline-flex persona-items-center persona-justify-center persona-rounded-full persona-text-persona-muted hover:persona-bg-gray-100 persona-cursor-pointer persona-border-none persona-bg-transparent persona-p-1" + (dynEsClassNames?.toggleButton ? " " + dynEsClassNames.toggleButton : "");
+          const dynToggleBtnClasses = "persona-inline-flex persona-items-center persona-justify-center persona-rounded-full hover:persona-opacity-80 persona-cursor-pointer persona-border-none persona-bg-transparent persona-p-1" + (dynEsClassNames?.toggleButton ? " " + dynEsClassNames.toggleButton : "");
           eventStreamToggleBtn = createElement("button", dynToggleBtnClasses) as HTMLButtonElement;
           eventStreamToggleBtn.style.width = "28px";
           eventStreamToggleBtn.style.height = "28px";
+          eventStreamToggleBtn.style.color = HEADER_THEME_CSS.actionIconColor;
           eventStreamToggleBtn.type = "button";
           eventStreamToggleBtn.setAttribute("aria-label", "Event Stream");
           eventStreamToggleBtn.title = "Event Stream";
@@ -4488,22 +4491,18 @@ export const createAgentExperience = (
             micButton.textContent = "🎤";
           }
           
-          // Update colors
+          // Update colors from config or theme tokens
           const backgroundColor = voiceConfig.backgroundColor ?? sendButtonConfig.backgroundColor;
           if (backgroundColor) {
             micButton.style.backgroundColor = backgroundColor;
-            micButton.classList.remove("persona-bg-persona-primary");
           } else {
             micButton.style.backgroundColor = "";
-            micButton.classList.add("persona-bg-persona-primary");
           }
-          
+
           if (iconColor) {
             micButton.style.color = iconColor;
-            micButton.classList.remove("persona-text-white");
-          } else if (!iconColor && !sendButtonConfig.textColor) {
-            micButton.style.color = "";
-            micButton.classList.add("persona-text-white");
+          } else {
+            micButton.style.color = "var(--persona-text, #111827)";
           }
           
           // Update border styling
@@ -4729,30 +4728,25 @@ export const createAgentExperience = (
         // Clear existing content
         sendButton.innerHTML = "";
         
+        // Set foreground color from config or theme token
+        if (textColor) {
+          sendButton.style.color = textColor;
+        } else {
+          sendButton.style.color = "var(--persona-button-primary-fg, #ffffff)";
+        }
+
         // Use Lucide icon if iconName is provided, otherwise fall back to iconText
         if (iconName) {
           const iconSize = parseFloat(buttonSize) || 24;
-          const iconColor = textColor && typeof textColor === 'string' && textColor.trim() ? textColor.trim() : "currentColor";
+          const iconColor = textColor?.trim() || "currentColor";
           const iconSvg = renderLucideIcon(iconName, iconSize, iconColor, 2);
           if (iconSvg) {
             sendButton.appendChild(iconSvg);
-            sendButton.style.color = iconColor;
           } else {
-            // Fallback to text if icon fails to render
             sendButton.textContent = iconText;
-            if (textColor) {
-              sendButton.style.color = textColor;
-            } else {
-              sendButton.classList.add("persona-text-white");
-            }
           }
         } else {
           sendButton.textContent = iconText;
-          if (textColor) {
-            sendButton.style.color = textColor;
-          } else {
-            sendButton.classList.add("persona-text-white");
-          }
         }
         
         // Update classes
@@ -4762,6 +4756,7 @@ export const createAgentExperience = (
           sendButton.style.backgroundColor = backgroundColor;
           sendButton.classList.remove("persona-bg-persona-primary");
         } else {
+          sendButton.style.backgroundColor = "";
           sendButton.classList.add("persona-bg-persona-primary");
         }
       } else {

package/src/utils/plugins.ts

@@ -22,7 +22,7 @@ export function accessibilityPlugin(): PersonaThemePlugin {
     },
     cssVariables: {
       '--persona-accessibility-focus-ring':
-        '0 0 0 2px var(--persona-semantic-colors-surface, #fff), 0 0 0 4px var(--persona-semantic-colors-interactive-focus, #1d4ed8)',
+        '0 0 0 2px var(--persona-semantic-colors-surface, #fff), 0 0 0 4px var(--persona-semantic-colors-interactive-focus, #0f0f0f)',
     },
   };
 }

package/src/utils/theme.test.ts

@@ -139,15 +139,16 @@ describe('theme utils', () => {
     expect(cssVars['--persona-md-prose-font-family']).toBe('Georgia, serif');
   });
 
-  it('maps header chrome tokens to dedicated CSS variables with semantic fallbacks', () => {
+  it('maps header chrome tokens to dedicated CSS variables with palette refs', () => {
     const theme = createTheme();
     const cssVars = themeToCssVariables(theme);
 
-    expect(cssVars['--persona-header-icon-bg']).toBe(cssVars['--persona-primary']);
-    expect(cssVars['--persona-header-icon-fg']).toBe(cssVars['--persona-text-inverse']);
-    expect(cssVars['--persona-header-title-fg']).toBe(cssVars['--persona-primary']);
-    expect(cssVars['--persona-header-subtitle-fg']).toBe(cssVars['--persona-text-muted']);
-    expect(cssVars['--persona-header-action-icon-fg']).toBe(cssVars['--persona-muted']);
+    // Default header uses solid primary role: icon-bg=primary.600, icon-fg=primary.50, etc.
+    expect(cssVars['--persona-header-icon-bg']).toBe('#0f0f0f'); // primary.600
+    expect(cssVars['--persona-header-icon-fg']).toBe('#ffffff'); // primary.50
+    expect(cssVars['--persona-header-title-fg']).toBe('#ffffff'); // primary.50
+    expect(cssVars['--persona-header-subtitle-fg']).toBe('#d4d4d4'); // primary.200
+    expect(cssVars['--persona-header-action-icon-fg']).toBe('#d4d4d4'); // primary.200
 
     const custom = createTheme({
       components: {
@@ -172,8 +173,9 @@ describe('theme utils', () => {
     const theme = createTheme();
     const cssVars = themeToCssVariables(theme);
 
-    expect(cssVars['--persona-components-artifact-pane-background']).toBe('#f3f4f6');
-    expect(cssVars['--persona-artifact-toolbar-bg']).toBe('#f3f4f6');
+    // container defaults to gray.50 now (soft gray surfaces role)
+    expect(cssVars['--persona-components-artifact-pane-background']).toBe('#f9fafb');
+    expect(cssVars['--persona-artifact-toolbar-bg']).toBe('#f9fafb');
 
     const surfacePane = createTheme({
       components: {

package/src/utils/theme.ts

@@ -16,17 +16,17 @@ type WidgetConfig = PersonaWidgetConfig | AgentWidgetConfig;
 const DARK_PALETTE = {
   colors: {
     primary: {
-      50: '#eff6ff',
-      100: '#dbeafe',
-      200: '#bfdbfe',
-      300: '#93c5fd',
-      400: '#60a5fa',
-      500: '#3b82f6',
-      600: '#2563eb',
-      700: '#1d4ed8',
-      800: '#1e40af',
-      900: '#1e3a8a',
-      950: '#172554',
+      50: '#ffffff',
+      100: '#f5f5f5',
+      200: '#d4d4d4',
+      300: '#a3a3a3',
+      400: '#737373',
+      500: '#171717',
+      600: '#0f0f0f',
+      700: '#0a0a0a',
+      800: '#050505',
+      900: '#030303',
+      950: '#000000',
     },
     secondary: {
       50: '#f5f3ff',

package/src/utils/tokens.ts

@@ -12,17 +12,17 @@ import type {
 export const DEFAULT_PALETTE = {
   colors: {
     primary: {
-      50: '#eff6ff',
-      100: '#dbeafe',
-      200: '#bfdbfe',
-      300: '#93c5fd',
-      400: '#60a5fa',
-      500: '#3b82f6',
-      600: '#2563eb',
-      700: '#1d4ed8',
-      800: '#1e40af',
-      900: '#1e3a8a',
-      950: '#172554',
+      50: '#ffffff',
+      100: '#f5f5f5',
+      200: '#d4d4d4',
+      300: '#a3a3a3',
+      400: '#737373',
+      500: '#171717',
+      600: '#0f0f0f',
+      700: '#0a0a0a',
+      800: '#050505',
+      900: '#030303',
+      950: '#000000',
     },
     secondary: {
       50: '#f5f3ff',
@@ -99,6 +99,19 @@ export const DEFAULT_PALETTE = {
       800: '#991b1b',
       900: '#7f1d1d',
     },
+    info: {
+      50: '#eff6ff',
+      100: '#dbeafe',
+      200: '#bfdbfe',
+      300: '#93c5fd',
+      400: '#60a5fa',
+      500: '#3b82f6',
+      600: '#2563eb',
+      700: '#1d4ed8',
+      800: '#1e40af',
+      900: '#1e3a8a',
+      950: '#172554',
+    },
   },
   spacing: {
     0: '0px',
@@ -176,28 +189,33 @@ export const DEFAULT_PALETTE = {
 export const DEFAULT_SEMANTIC: SemanticTokens = {
   colors: {
     primary: 'palette.colors.primary.500',
-    secondary: 'palette.colors.gray.500',
+    secondary: 'palette.colors.secondary.500',
+    // Links/Focus role — solid primary
     accent: 'palette.colors.primary.600',
+    // Surfaces role — soft gray
     surface: 'palette.colors.gray.50',
     background: 'palette.colors.gray.50',
-    container: 'palette.colors.gray.100',
+    container: 'palette.colors.gray.50',
     text: 'palette.colors.gray.900',
     textMuted: 'palette.colors.gray.500',
     textInverse: 'palette.colors.gray.50',
+    // Borders role — soft gray
     border: 'palette.colors.gray.200',
     divider: 'palette.colors.gray.200',
     interactive: {
-      default: 'palette.colors.primary.500',
-      hover: 'palette.colors.primary.600',
-      focus: 'palette.colors.primary.700',
-      active: 'palette.colors.primary.800',
+      // Primary Actions role — solid primary
+      default: 'palette.colors.primary.600',
+      hover: 'palette.colors.primary.700',
+      // Links/Focus role — solid primary
+      focus: 'palette.colors.primary.600',
+      active: 'palette.colors.primary.600',
       disabled: 'palette.colors.gray.300',
     },
     feedback: {
       success: 'palette.colors.success.500',
       warning: 'palette.colors.warning.500',
       error: 'palette.colors.error.500',
-      info: 'palette.colors.primary.500',
+      info: 'palette.colors.info.500',
     },
   },
   spacing: {
@@ -219,14 +237,15 @@ export const DEFAULT_SEMANTIC: SemanticTokens = {
 export const DEFAULT_COMPONENTS: ComponentTokens = {
   button: {
     primary: {
-      background: 'semantic.colors.primary',
-      foreground: 'semantic.colors.textInverse',
+      // Primary Actions role — solid primary
+      background: 'palette.colors.primary.500',
+      foreground: 'palette.colors.primary.50',
       borderRadius: 'palette.radius.lg',
       padding: 'semantic.spacing.md',
     },
     secondary: {
       background: 'semantic.colors.surface',
-      foreground: 'semantic.colors.text',
+      foreground: 'semantic.colors.secondary',
       borderRadius: 'palette.radius.lg',
       padding: 'semantic.spacing.md',
     },
@@ -238,16 +257,20 @@ export const DEFAULT_COMPONENTS: ComponentTokens = {
     },
   },
   input: {
-    background: 'semantic.colors.surface',
-    placeholder: 'semantic.colors.textMuted',
+    // Input role — soft gray
+    background: 'palette.colors.gray.50',
+    placeholder: 'palette.colors.gray.400',
     borderRadius: 'palette.radius.lg',
     padding: 'semantic.spacing.md',
     focus: {
-      border: 'semantic.colors.interactive.focus',
-      ring: 'semantic.colors.interactive.focus',
+      border: 'palette.colors.gray.400',
+      ring: 'palette.colors.gray.400',
     },
   },
   launcher: {
+    background: 'palette.colors.primary.500',
+    foreground: 'palette.colors.primary.50',
+    border: 'palette.colors.gray.200',
     size: '60px',
     iconSize: '28px',
     borderRadius: 'palette.radius.full',
@@ -262,28 +285,31 @@ export const DEFAULT_COMPONENTS: ComponentTokens = {
     shadow: 'palette.shadows.xl',
   },
   header: {
-    background: 'semantic.colors.surface',
-    border: 'semantic.colors.border',
+    // Header role — solid primary
+    background: 'palette.colors.primary.500',
+    border: 'palette.colors.primary.600',
     borderRadius: 'palette.radius.xl palette.radius.xl 0 0',
     padding: 'semantic.spacing.md',
-    iconBackground: 'semantic.colors.primary',
-    iconForeground: 'semantic.colors.textInverse',
-    titleForeground: 'semantic.colors.primary',
-    subtitleForeground: 'semantic.colors.textMuted',
-    actionIconForeground: 'semantic.colors.textMuted',
+    iconBackground: 'palette.colors.primary.600',
+    iconForeground: 'palette.colors.primary.50',
+    titleForeground: 'palette.colors.primary.50',
+    subtitleForeground: 'palette.colors.primary.200',
+    actionIconForeground: 'palette.colors.primary.200',
   },
   message: {
     user: {
-      background: 'semantic.colors.primary',
-      text: 'semantic.colors.textInverse',
+      // User Messages role — solid primary
+      background: 'palette.colors.primary.500',
+      text: 'palette.colors.primary.50',
       borderRadius: 'palette.radius.lg',
       shadow: 'palette.shadows.sm',
     },
     assistant: {
-      background: 'semantic.colors.container',
-      text: 'semantic.colors.text',
+      // Assistant Messages role — soft gray
+      background: 'palette.colors.gray.50',
+      text: 'palette.colors.gray.900',
       borderRadius: 'palette.radius.lg',
-      border: 'semantic.colors.border',
+      border: 'palette.colors.gray.200',
       shadow: 'palette.shadows.sm',
     },
   },
@@ -298,11 +324,12 @@ export const DEFAULT_COMPONENTS: ComponentTokens = {
   },
   markdown: {
     inlineCode: {
-      background: 'semantic.colors.container',
-      foreground: 'semantic.colors.text',
+      background: 'palette.colors.gray.50',
+      foreground: 'palette.colors.gray.900',
     },
     link: {
-      foreground: 'semantic.colors.accent',
+      // Links/Focus role — solid primary
+      foreground: 'palette.colors.primary.600',
     },
     prose: {
       fontFamily: 'inherit',
@@ -633,6 +660,21 @@ export function themeToCssVariables(theme: PersonaTheme): Record<string, string>
     cssVars['--persona-components-launcher-borderRadius'] ??
     cssVars['--persona-palette-radius-full'] ??
     '9999px';
+  cssVars['--persona-launcher-bg'] =
+    cssVars['--persona-components-launcher-background'] ??
+    cssVars['--persona-primary'];
+  cssVars['--persona-launcher-fg'] =
+    cssVars['--persona-components-launcher-foreground'] ??
+    cssVars['--persona-text-inverse'];
+  cssVars['--persona-launcher-border'] =
+    cssVars['--persona-components-launcher-border'] ??
+    cssVars['--persona-border'];
+  cssVars['--persona-button-primary-bg'] =
+    cssVars['--persona-components-button-primary-background'] ??
+    cssVars['--persona-primary'];
+  cssVars['--persona-button-primary-fg'] =
+    cssVars['--persona-components-button-primary-foreground'] ??
+    cssVars['--persona-text-inverse'];
   cssVars['--persona-button-radius'] =
     cssVars['--persona-components-button-primary-borderRadius'] ??
     cssVars['--persona-palette-radius-full'] ??
@@ -681,6 +723,11 @@ export function themeToCssVariables(theme: PersonaTheme): Record<string, string>
   if (headerTokens?.shadow) cssVars['--persona-header-shadow'] = headerTokens.shadow;
   if (headerTokens?.borderBottom) cssVars['--persona-header-border-bottom'] = headerTokens.borderBottom;
 
+  cssVars['--persona-input-background'] =
+    cssVars['--persona-components-input-background'] ?? cssVars['--persona-surface'];
+  cssVars['--persona-input-placeholder'] =
+    cssVars['--persona-components-input-placeholder'] ?? cssVars['--persona-text-muted'];
+
   cssVars['--persona-message-user-bg'] =
     cssVars['--persona-components-message-user-background'] ?? cssVars['--persona-accent'];
   cssVars['--persona-message-user-text'] =
@@ -711,7 +758,7 @@ export function themeToCssVariables(theme: PersonaTheme): Record<string, string>
   cssVars['--persona-md-link-color'] =
     cssVars['--persona-components-markdown-link-foreground'] ??
     cssVars['--persona-accent'] ??
-    '#3b82f6';
+    '#0f0f0f';
 
   const mdH1Size = cssVars['--persona-components-markdown-heading-h1-fontSize'];
   if (mdH1Size) cssVars['--persona-md-h1-size'] = mdH1Size;

package/widget.css

@@ -1 +0,0 @@
-@import "./src/widget.css";