@seed-ship/mcp-ui-solid 6.23.0 → 6.25.1

package/src/components/ChatPrompt.tsx

@@ -86,22 +86,22 @@ export const ChatPrompt: Component<ChatPromptProps> = (props) => {
 
   return (
     <div
-      class="w-full max-w-2xl mx-auto mb-2 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-lg overflow-visible"
+      class="mcp-ui-root w-full max-w-2xl mx-auto mb-2 bg-[color:var(--mcp-ui-surface,var(--color-white,#fff))] dark:bg-[color:var(--mcp-ui-surface,var(--color-gray-800,#1f2937))] rounded-xl border border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-700,#374151))] shadow-[var(--mcp-ui-shadow,var(--shadow-lg))] overflow-visible"
       style={{ animation: 'chat-prompt-slide-up 0.2s ease-out' }}
       role="dialog"
       aria-label={props.config.title}
     >
       {/* Header */}
-      <div class="flex items-center justify-between px-4 py-2.5 border-b border-gray-100 dark:border-gray-700">
-        <p class="text-sm font-medium text-gray-900 dark:text-white">{props.config.title}</p>
+      <div class="flex items-center justify-between px-4 py-2.5 border-b border-[color:var(--mcp-ui-border,var(--color-gray-100,#f3f4f6))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-700,#374151))]">
+        <p class="text-sm font-medium text-[color:var(--mcp-ui-fg,var(--color-gray-900,#111827))] dark:text-[color:var(--mcp-ui-fg,var(--color-white,#fff))]">{props.config.title}</p>
         <button
           onClick={() => {
             props.onDismiss?.()
             props.onSubmit({ type: props.config.type, value: '', label: '', dismissed: true })
           }}
           class={props.dismissLabel
-            ? 'px-3 py-1 text-xs font-medium text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors'
-            : 'p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors'
+            ? 'px-3 py-1 text-xs font-medium text-[color:var(--mcp-ui-accent,var(--color-blue-600))] dark:text-[color:var(--mcp-ui-accent,var(--color-blue-400))] hover:bg-[color:var(--mcp-ui-accent-soft,var(--color-blue-50))] dark:hover:bg-[color:var(--mcp-ui-accent-soft,color-mix(in_oklab,var(--color-blue-900)_20%,transparent))] rounded-lg transition-colors'
+            : 'p-1 text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))] hover:text-[color:var(--mcp-ui-fg-muted,var(--color-gray-600,#4b5563))] dark:hover:text-[color:var(--mcp-ui-fg,var(--color-gray-300,#d1d5db))] rounded-full hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-100,#f3f4f6))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-700,#374151))] transition-colors'
           }
           aria-label={props.dismissLabel || strings.dismiss}
         >
@@ -172,7 +172,7 @@ const ChoiceBody: Component<{
   }
 
   const buttonClass = () => {
-    const base = 'px-4 py-2 text-sm font-medium rounded-lg border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white hover:bg-blue-50 hover:border-blue-300 dark:hover:bg-blue-900/30 dark:hover:border-blue-600 transition-colors text-left'
+    const base = 'px-4 py-2 text-sm font-medium rounded-lg border border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-600,#4b5563))] bg-[color:var(--mcp-ui-surface-muted,var(--color-gray-50,#f9fafb))] dark:bg-[color:var(--mcp-ui-surface-muted,var(--color-gray-700,#374151))] text-[color:var(--mcp-ui-fg,var(--color-gray-900,#111827))] dark:text-[color:var(--mcp-ui-fg,var(--color-white,#fff))] hover:bg-[color:var(--mcp-ui-accent-soft,var(--color-blue-50))] hover:border-[color:var(--mcp-ui-accent-border,var(--color-blue-300))] dark:hover:bg-[color:var(--mcp-ui-accent-soft,color-mix(in_oklab,var(--color-blue-900)_30%,transparent))] dark:hover:border-[color:var(--mcp-ui-accent-border,var(--color-blue-600))] transition-colors text-left'
     const extra = props.config.buttonClass
     return extra ? `${base} ${extra}` : base
   }
@@ -195,7 +195,7 @@ const ChoiceBody: Component<{
                   </Show>
                   {option.label}
                   <Show when={option.description}>
-                    <span class="block text-xs text-gray-500 dark:text-gray-400 mt-0.5 font-normal">{option.description}</span>
+                    <span class="block text-xs text-[color:var(--mcp-ui-fg-muted,var(--color-gray-500,#6b7280))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))] mt-0.5 font-normal">{option.description}</span>
                   </Show>
                 </>
               }
@@ -222,21 +222,21 @@ const ConfirmBody: Component<{
   return (
     <div>
       <Show when={props.config.message}>
-        <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">{props.config.message}</p>
+        <p class="text-sm text-[color:var(--mcp-ui-fg-muted,var(--color-gray-600,#4b5563))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))] mb-3">{props.config.message}</p>
       </Show>
       <div class="flex gap-2 justify-end">
         <button
           onClick={props.onCancel}
-          class="px-4 py-2 text-sm font-medium rounded-lg border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+          class="px-4 py-2 text-sm font-medium rounded-lg border border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-600,#4b5563))] text-[color:var(--mcp-ui-fg,var(--color-gray-700,#374151))] dark:text-[color:var(--mcp-ui-fg,var(--color-gray-300,#d1d5db))] hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-100,#f3f4f6))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-700,#374151))] transition-colors"
         >
           {props.config.cancelLabel || strings.cancel}
         </button>
         <button
           onClick={props.onConfirm}
-          class={`px-4 py-2 text-sm font-medium rounded-lg text-white transition-colors ${
+          class={`px-4 py-2 text-sm font-medium rounded-lg text-[color:var(--mcp-ui-accent-fg,var(--color-white,#fff))] transition-colors ${
             isDanger()
-              ? 'bg-red-600 hover:bg-red-700'
-              : 'bg-blue-600 hover:bg-blue-700'
+              ? 'bg-[color:var(--mcp-ui-danger,var(--color-red-600))] hover:bg-[color:var(--mcp-ui-danger-hover,var(--color-red-700))]'
+              : 'bg-[color:var(--mcp-ui-accent,var(--color-blue-600))] hover:bg-[color:var(--mcp-ui-accent-hover,var(--color-blue-700))]'
           }`}
         >
           {props.config.confirmLabel || strings.confirm}
@@ -380,11 +380,11 @@ const FormBody: Component<{
 
       {/* Live preview */}
       <Show when={previewText() || previewLoading()}>
-        <div class="px-3 py-2 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800 text-sm">
+        <div class="px-3 py-2 bg-[color:var(--mcp-ui-accent-soft,var(--color-blue-50))] dark:bg-[color:var(--mcp-ui-accent-soft,color-mix(in_oklab,var(--color-blue-900)_20%,transparent))] rounded-lg border border-[color:var(--mcp-ui-accent-border,var(--color-blue-200))] dark:border-[color:var(--mcp-ui-accent-border,var(--color-blue-800))] text-sm">
           <Show when={previewLoading()} fallback={
-            <p class="text-blue-700 dark:text-blue-300">{previewText()}</p>
+            <p class="text-[color:var(--mcp-ui-accent,var(--color-blue-700))] dark:text-[color:var(--mcp-ui-accent,var(--color-blue-300))]">{previewText()}</p>
           }>
-            <p class="text-blue-400 animate-pulse">{strings.promptLoadingPreview}</p>
+            <p class="text-[color:var(--mcp-ui-accent,var(--color-blue-400))] animate-pulse">{strings.promptLoadingPreview}</p>
           </Show>
         </div>
       </Show>
@@ -393,7 +393,7 @@ const FormBody: Component<{
         <button
           type="submit"
           disabled={!isValid()}
-          class="px-4 py-2 text-sm font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
+          class="px-4 py-2 text-sm font-medium rounded-lg text-[color:var(--mcp-ui-accent-fg,var(--color-white,#fff))] bg-[color:var(--mcp-ui-accent,var(--color-blue-600))] hover:bg-[color:var(--mcp-ui-accent-hover,var(--color-blue-700))] disabled:bg-[color:var(--mcp-ui-surface-muted,var(--color-gray-400,#9ca3af))] disabled:cursor-not-allowed transition-colors"
         >
           {props.config.submitLabel || strings.submit}
         </button>

package/src/components/ComponentToolbar.tsx

@@ -58,7 +58,7 @@ export const ComponentToolbar: Component<ComponentToolbarProps> = (props) => {
   }
 
   return (
-    <div class={`absolute ${positionClasses()} z-10 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity`}>
+    <div class={`mcp-ui-root absolute ${positionClasses()} z-10 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity`}>
       <For each={props.actions}>
         {(action) => <ToolbarButton action={action} />}
       </For>
@@ -81,15 +81,15 @@ const ToolbarButton: Component<{ action: ToolbarAction }> = (props) => {
   const iconPath = () => showCheck() ? ICONS.check : ICONS[props.action.icon]
   const isActive = () => props.action.active
   const colorClass = () => {
-    if (showCheck()) return 'text-green-500'
-    if (isActive()) return 'text-blue-500 dark:text-blue-400'
-    return 'text-gray-500 dark:text-gray-400'
+    if (showCheck()) return 'text-[color:var(--mcp-ui-success,var(--color-green-500))]'
+    if (isActive()) return 'text-[color:var(--mcp-ui-accent,var(--color-blue-500))] dark:text-[color:var(--mcp-ui-accent,var(--color-blue-400))]'
+    return 'text-[color:var(--mcp-ui-fg-muted,var(--color-gray-500,#6b7280))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))]'
   }
 
   return (
     <button
       onClick={handleClick}
-      class={`p-1.5 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-all shadow-sm`}
+      class={`p-1.5 bg-[color:var(--mcp-ui-surface,var(--color-white,#fff))] dark:bg-[color:var(--mcp-ui-surface,var(--color-gray-800,#1f2937))] border border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-600,#4b5563))] rounded-full hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-100,#f3f4f6))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-700,#374151))] transition-all shadow-[var(--mcp-ui-shadow,var(--shadow-sm))]`}
       title={props.action.label}
       aria-label={props.action.label}
       data-mcp-ui-action={props.action.icon}

package/src/components/DegradedFallback.tsx

@@ -17,6 +17,7 @@
 
 import { Component, For, Show } from 'solid-js';
 import { formatMCPUIString, useMCPUIStrings } from '../context/MCPUIStringsContext';
+import { MissingValueLegend, MissingValueMark } from './MissingValue';
 
 export interface DegradedFallbackProps {
   /** Short, human-readable reason the native render was skipped/failed. */
@@ -35,6 +36,13 @@ export interface DegradedFallbackProps {
   caption?: string;
   /** Max rows to render before truncating (default 50). */
   maxRows?: number;
+  /**
+   * Same shape as `rows`: `true` marks a cell whose value is missing, which
+   * renders as `<MissingValueMark/>` instead of its text. A
+   * `<MissingValueLegend/>` follows the table when a SHOWN cell is missing.
+   * Omitted, the output is unchanged. @since v6.24.0
+   */
+  missing?: boolean[][];
 }
 
 export const DegradedFallback: Component<DegradedFallbackProps> = (props) => {
@@ -43,38 +51,49 @@ export const DegradedFallback: Component<DegradedFallbackProps> = (props) => {
   const allRows = () => props.rows ?? [];
   const shownRows = () => allRows().slice(0, maxRows());
   const hiddenCount = () => Math.max(0, allRows().length - shownRows().length);
+  const isMissing = (rowIndex: number, colIndex: number) =>
+    props.missing?.[rowIndex]?.[colIndex] === true;
+  const anyShownMissing = () => {
+    const columnCount = props.columns?.length ?? 0;
+    return shownRows().some((_row, r) => {
+      for (let c = 0; c < columnCount; c += 1) if (isMissing(r, c)) return true;
+      return false;
+    });
+  };
   const hasTable = () => (props.columns?.length ?? 0) > 0 && allRows().length > 0;
 
   return (
     <div
-      class="w-full rounded-lg border border-amber-200 bg-amber-50 p-3 dark:border-amber-800 dark:bg-amber-900/20"
+      class="w-full rounded-lg border border-[color:var(--mcp-ui-warning-border,var(--color-amber-200))] bg-[color:var(--mcp-ui-warning-soft,var(--color-amber-50))] p-3 dark:border-[color:var(--mcp-ui-warning-border,var(--color-amber-800))] dark:bg-[color:var(--mcp-ui-warning-soft,color-mix(in_oklab,var(--color-amber-900)_20%,transparent))]"
       role="alert"
     >
-      <p class="text-sm font-medium text-amber-900 dark:text-amber-100">{props.message}</p>
-      <p class="mt-0.5 text-xs text-amber-700 dark:text-amber-300">
+      <p class="text-sm font-medium text-[color:var(--mcp-ui-warning,var(--color-amber-900))] dark:text-[color:var(--mcp-ui-warning,var(--color-amber-100))]">{props.message}</p>
+      <p class="mt-0.5 text-xs text-[color:var(--mcp-ui-warning,var(--color-amber-700))] dark:text-[color:var(--mcp-ui-warning,var(--color-amber-300))]">
         {props.caption ?? strings.degradedCaption}
       </p>
 
       <Show when={hasTable()}>
-        <div class="mt-2 max-h-64 overflow-auto rounded border border-amber-200 dark:border-amber-800">
+        <div class="mt-2 max-h-64 overflow-auto rounded border border-[color:var(--mcp-ui-warning-border,var(--color-amber-200))] dark:border-[color:var(--mcp-ui-warning-border,var(--color-amber-800))]">
           <table class="w-full border-collapse text-left text-xs">
-            <thead class="sticky top-0 bg-amber-100 dark:bg-amber-900/40">
+            <thead class="sticky top-0 bg-[color:var(--mcp-ui-warning-soft,var(--color-amber-100))] dark:bg-[color:var(--mcp-ui-warning-soft,color-mix(in_oklab,var(--color-amber-900)_40%,transparent))]">
               <tr>
                 <For each={props.columns}>
                   {(col) => (
-                    <th class="px-2 py-1 font-medium text-amber-900 dark:text-amber-100">{col}</th>
+                    <th class="px-2 py-1 font-medium text-[color:var(--mcp-ui-warning,var(--color-amber-900))] dark:text-[color:var(--mcp-ui-warning,var(--color-amber-100))]">{col}</th>
                   )}
                 </For>
               </tr>
             </thead>
             <tbody>
               <For each={shownRows()}>
-                {(row) => (
-                  <tr class="border-t border-amber-100 dark:border-amber-800/60">
+                {(row, rowIndex) => (
+                  <tr class="border-t border-[color:var(--mcp-ui-warning-border,var(--color-amber-100))] dark:border-[color:var(--mcp-ui-warning-border,color-mix(in_oklab,var(--color-amber-800)_60%,transparent))]">
                     <For each={props.columns}>
                       {(_col, i) => (
-                        <td class="px-2 py-1 text-amber-800 dark:text-amber-200">
-                          {String(row[i()] ?? '')}
+                        <td class="px-2 py-1 text-[color:var(--mcp-ui-warning,var(--color-amber-800))] dark:text-[color:var(--mcp-ui-warning,var(--color-amber-200))]">
+                          <Show when={isMissing(rowIndex(), i())} fallback={String(row[i()] ?? '')}>
+                            <MissingValueMark />
+                          </Show>
                         </td>
                       )}
                     </For>
@@ -84,8 +103,11 @@ export const DegradedFallback: Component<DegradedFallbackProps> = (props) => {
             </tbody>
           </table>
         </div>
+        <Show when={anyShownMissing()}>
+          <MissingValueLegend class="mt-2" />
+        </Show>
         <Show when={hiddenCount() > 0}>
-          <p class="mt-1 text-[10px] text-amber-600 dark:text-amber-400">
+          <p class="mt-1 text-[10px] text-[color:var(--mcp-ui-warning,var(--color-amber-600))] dark:text-[color:var(--mcp-ui-warning,var(--color-amber-400))]">
             {formatMCPUIString(strings.degradedMoreRows, { count: hiddenCount() })}
           </p>
         </Show>

package/src/components/ExpandableWrapper.tsx

@@ -8,6 +8,7 @@
 
 import { Component, Show, createSignal, createEffect, onCleanup, JSX, createContext, useContext, Accessor } from 'solid-js'
 import { Portal } from 'solid-js/web'
+import { bindPortalTheme } from '../utils/theme'
 import { useMCPUIStrings } from '../context/MCPUIStringsContext'
 
 /** Context for child components to know if they're in expanded/fullscreen view */
@@ -154,7 +155,7 @@ export const ExpandableWrapper: Component<ExpandableWrapperProps> = (props) => {
   }
 
   return (
-    <div class="relative group">
+    <div class="mcp-ui-root relative group">
       {/* Inline slot — content lives here when not expanded */}
       <div ref={inlineSlotRef}>
         <div ref={contentRef}>
@@ -172,12 +173,12 @@ export const ExpandableWrapper: Component<ExpandableWrapperProps> = (props) => {
           props.toolbarVariant === 'always-visible'
             ? 'opacity-60 hover:opacity-100'
             : 'opacity-0 group-hover:opacity-70 hover:!opacity-100'
-        } p-1.5 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-all shadow-sm`}
+        } p-1.5 bg-[color:var(--mcp-ui-surface,var(--color-white,#fff))] dark:bg-[color:var(--mcp-ui-surface,var(--color-gray-800,#1f2937))] border border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-600,#4b5563))] rounded-full hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-100,#f3f4f6))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-700,#374151))] transition-all shadow-[var(--mcp-ui-shadow,var(--shadow-sm))]`}
         title={strings.expand}
         aria-label={strings.expand}
         data-mcp-ui-action="expand"
       >
-        <svg class="w-3.5 h-3.5 text-gray-500 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <svg class="w-3.5 h-3.5 text-[color:var(--mcp-ui-fg-muted,var(--color-gray-500,#6b7280))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 4h-4m4 0l-5-5" />
         </svg>
       </button>
@@ -186,7 +187,7 @@ export const ExpandableWrapper: Component<ExpandableWrapperProps> = (props) => {
       <Show when={isExpanded()}>
         <Portal>
           <div
-            class="fixed inset-0 z-50 flex flex-col bg-black/50 backdrop-blur-sm"
+            class="fixed inset-0 z-50 flex flex-col bg-[color:var(--mcp-ui-overlay,color-mix(in_oklab,var(--color-black,#000)_50%,transparent))] backdrop-blur-sm"
             style={{ animation: 'expandable-fade-in 0.15s ease-out' }}
             onClick={handleBackdropClick}
             onPointerDown={handleBackdropPointerDown}
@@ -195,17 +196,20 @@ export const ExpandableWrapper: Component<ExpandableWrapperProps> = (props) => {
             aria-modal="true"
             aria-label={props.title || strings.expandedView}
             tabIndex={-1}
-            ref={dialogRef}
+            ref={(element) => {
+              dialogRef = element
+              bindPortalTheme(element, () => inlineSlotRef)
+            }}
           >
             {/* Modal panel */}
             <div
-              class="relative flex flex-col m-4 flex-1 bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden"
+              class="relative flex flex-col m-4 flex-1 bg-[color:var(--mcp-ui-surface,var(--color-white,#fff))] dark:bg-[color:var(--mcp-ui-surface,var(--color-gray-800,#1f2937))] rounded-lg shadow-[var(--mcp-ui-shadow,var(--shadow-xl))] overflow-hidden"
               style={{ animation: 'expandable-scale-in 0.15s ease-out' }}
               onClick={(e) => e.stopPropagation()}
             >
               {/* Header */}
-              <div class="flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
-                <h2 class="text-lg font-semibold text-gray-900 dark:text-white truncate">
+              <div class="flex items-center justify-between px-4 py-3 border-b border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-700,#374151))] flex-shrink-0">
+                <h2 class="text-lg font-semibold text-[color:var(--mcp-ui-fg,var(--color-gray-900,#111827))] dark:text-[color:var(--mcp-ui-fg,var(--color-white,#fff))] truncate">
                   {props.title || strings.expandedView}
                 </h2>
                 <div class="flex items-center gap-2">
@@ -214,7 +218,7 @@ export const ExpandableWrapper: Component<ExpandableWrapperProps> = (props) => {
                     <button
                       type="button"
                       onClick={handleCopy}
-                      class="p-1.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+                      class="p-1.5 text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))] hover:text-[color:var(--mcp-ui-fg-muted,var(--color-gray-600,#4b5563))] dark:hover:text-[color:var(--mcp-ui-fg,var(--color-gray-300,#d1d5db))] rounded-full hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-100,#f3f4f6))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-700,#374151))] transition-colors"
                       title={props.copyLabel || strings.copyToClipboard}
                       aria-label={props.copyLabel || strings.copyToClipboard}
                       data-mcp-ui-action="copy"
@@ -222,7 +226,7 @@ export const ExpandableWrapper: Component<ExpandableWrapperProps> = (props) => {
                       <Show
                         when={!copied()}
                         fallback={
-                          <svg class="w-5 h-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                          <svg class="w-5 h-5 text-[color:var(--mcp-ui-success,var(--color-green-500))]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                           </svg>
                         }
@@ -237,7 +241,7 @@ export const ExpandableWrapper: Component<ExpandableWrapperProps> = (props) => {
                   <button
                     type="button"
                     onClick={handleClose}
-                    class="p-1.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+                    class="p-1.5 text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))] hover:text-[color:var(--mcp-ui-fg-muted,var(--color-gray-600,#4b5563))] dark:hover:text-[color:var(--mcp-ui-fg,var(--color-gray-300,#d1d5db))] rounded-full hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-100,#f3f4f6))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-700,#374151))] transition-colors"
                     aria-label={strings.closeExpandedView}
                     data-mcp-ui-action="close"
                   >