@workflow/web-shared 4.1.0-beta.52 → 4.1.0-beta.53

package/src/components/ui/error-card.tsx

@@ -28,20 +28,22 @@ export function ErrorCard({
     <div className="flex justify-center w-full">
       <div
         className={cn(
-          'rounded-lg border border-destructive/50 bg-destructive/5 w-full max-w-[800px]',
+          'rounded-lg border border-red-400 w-full max-w-[800px]',
           className
         )}
+        style={{ background: 'var(--ds-red-100)' }}
       >
         <button
           type="button"
           onClick={() => setIsExpanded(!isExpanded)}
-          className="w-full px-4 py-3 flex items-center justify-between gap-2 text-left hover:bg-destructive/10 transition-colors"
+          className="w-full px-4 py-3 flex items-center justify-between gap-2 text-left transition-colors"
+          style={{ color: 'var(--ds-red-900)' }}
         >
-          <div className="flex items-center gap-2 text-destructive">
+          <div className="flex items-center gap-2">
             <AlertCircle className="h-4 w-4 shrink-0" />
             <span className="font-medium text-sm">{title}</span>
           </div>
-          <div className="flex items-center gap-1.5 text-destructive/70">
+          <div className="flex items-center gap-1.5 opacity-70">
             <span className="text-xs">Click to show details</span>
             <ChevronDown
               className={cn(
@@ -53,8 +55,17 @@ export function ErrorCard({
         </button>
 
         {isExpanded && details && (
-          <div className="px-4 pb-3 border-t border-destructive/20">
-            <pre className="mt-3 p-3 rounded-md bg-destructive/10 text-destructive text-xs font-mono whitespace-pre-wrap break-words overflow-auto">
+          <div
+            className="px-4 pb-3"
+            style={{ borderTop: '1px solid var(--ds-red-400)' }}
+          >
+            <pre
+              className="mt-3 p-3 rounded-md text-xs font-mono whitespace-pre-wrap break-words overflow-auto"
+              style={{
+                background: 'var(--ds-red-200)',
+                color: 'var(--ds-red-900)',
+              }}
+            >
               {details}
             </pre>
           </div>

package/src/components/ui/inspector-theme.ts

@@ -1,64 +1,152 @@
 /**
  * Shared theme configuration for react-inspector's ObjectInspector.
  *
- * Used by AttributePanel, EventListView, StreamViewer, and any other
- * component that renders data with ObjectInspector.
+ * Color choices are inspired by Node.js `util.inspect()` ANSI stylizing:
+ *   - property names: unstyled (default foreground — dark text on light, light text on dark)
+ *   - strings / symbols: green
+ *   - numbers / booleans / bigint: yellow
+ *   - null: bold (foreground)
+ *   - undefined: grey
+ *   - regexp: red
+ *   - functions (special): cyan
+ *   - date: magenta
+ *
+ * See: https://github.com/nodejs/node/blob/main/lib/internal/util/inspect.js
  */
 
-export const inspectorThemeLight = {
+// ---------------------------------------------------------------------------
+// Extended color tokens not supported by react-inspector's built-in theme
+// system, applied via our custom nodeRenderer in data-inspector.tsx.
+// ---------------------------------------------------------------------------
+
+export interface InspectorThemeExtended {
+  /** Color for Date values (Node: 'magenta') */
+  OBJECT_VALUE_DATE_COLOR: string;
+}
+
+export const inspectorThemeExtendedLight: InspectorThemeExtended = {
+  OBJECT_VALUE_DATE_COLOR: '#a21caf', // fuchsia-700
+};
+
+export const inspectorThemeExtendedDark: InspectorThemeExtended = {
+  OBJECT_VALUE_DATE_COLOR: '#e879f9', // fuchsia-400
+};
+
+// ---------------------------------------------------------------------------
+// Shared structural values (same in both themes)
+// ---------------------------------------------------------------------------
+
+const shared = {
   BASE_FONT_SIZE: '11px',
   BASE_LINE_HEIGHT: 1.4,
   BASE_BACKGROUND_COLOR: 'transparent',
-  BASE_COLOR: 'var(--ds-gray-1000)',
   OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES: 10,
   OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES: 5,
-  OBJECT_NAME_COLOR: 'rgb(136, 19, 145)',
-  OBJECT_VALUE_NULL_COLOR: 'rgb(128, 128, 128)',
-  OBJECT_VALUE_UNDEFINED_COLOR: 'rgb(128, 128, 128)',
-  OBJECT_VALUE_REGEXP_COLOR: 'rgb(196, 26, 22)',
-  OBJECT_VALUE_STRING_COLOR: 'rgb(196, 26, 22)',
-  OBJECT_VALUE_SYMBOL_COLOR: 'rgb(196, 26, 22)',
-  OBJECT_VALUE_NUMBER_COLOR: 'rgb(28, 0, 207)',
-  OBJECT_VALUE_BOOLEAN_COLOR: 'rgb(28, 0, 207)',
-  OBJECT_VALUE_FUNCTION_PREFIX_COLOR: 'rgb(13, 34, 170)',
-  HTML_TAG_COLOR: 'rgb(168, 148, 166)',
-  HTML_TAGNAME_COLOR: 'rgb(136, 18, 128)',
-  HTML_TAGNAME_TEXT_TRANSFORM: 'lowercase',
-  HTML_ATTRIBUTE_NAME_COLOR: 'rgb(153, 69, 0)',
-  HTML_ATTRIBUTE_VALUE_COLOR: 'rgb(26, 26, 166)',
-  HTML_COMMENT_COLOR: 'rgb(35, 110, 37)',
-  HTML_DOCTYPE_COLOR: 'rgb(192, 192, 192)',
-  ARROW_COLOR: 'var(--ds-gray-600)',
+  HTML_TAGNAME_TEXT_TRANSFORM: 'lowercase' as const,
   ARROW_MARGIN_RIGHT: 3,
   ARROW_FONT_SIZE: 12,
   TREENODE_FONT_FAMILY: 'var(--font-mono)',
   TREENODE_FONT_SIZE: '11px',
   TREENODE_LINE_HEIGHT: 1.4,
   TREENODE_PADDING_LEFT: 12,
+  TABLE_DATA_BACKGROUND_IMAGE: 'none',
+  TABLE_DATA_BACKGROUND_SIZE: '0',
+};
+
+// ---------------------------------------------------------------------------
+// Light theme
+// ---------------------------------------------------------------------------
+
+export const inspectorThemeLight = {
+  ...shared,
+
+  // Base text
+  BASE_COLOR: 'var(--ds-gray-1000)',
+
+  // Property names — unstyled, same as base foreground (Node: no style)
+  OBJECT_NAME_COLOR: 'var(--ds-gray-900)',
+
+  // Strings & symbols — green (Node: 'green')
+  OBJECT_VALUE_STRING_COLOR: '#16a34a', // green-600
+  OBJECT_VALUE_SYMBOL_COLOR: '#16a34a',
+
+  // Numbers & booleans — yellow/amber (Node: 'yellow')
+  OBJECT_VALUE_NUMBER_COLOR: '#b45309', // amber-700 (readable on white)
+  OBJECT_VALUE_BOOLEAN_COLOR: '#b45309',
+
+  // null — bold foreground (Node: 'bold')
+  OBJECT_VALUE_NULL_COLOR: 'var(--ds-gray-900)',
+
+  // undefined — grey (Node: 'grey')
+  OBJECT_VALUE_UNDEFINED_COLOR: 'var(--ds-gray-500)',
+
+  // RegExp — red (Node regexp base uses green/red/yellow palette)
+  OBJECT_VALUE_REGEXP_COLOR: '#dc2626', // red-600
+
+  // Functions — cyan (Node: 'special' → 'cyan')
+  OBJECT_VALUE_FUNCTION_PREFIX_COLOR: '#0891b2', // cyan-600
+
+  // HTML (less relevant for data inspection, but reasonable defaults)
+  HTML_TAG_COLOR: 'var(--ds-gray-500)',
+  HTML_TAGNAME_COLOR: '#0891b2',
+  HTML_ATTRIBUTE_NAME_COLOR: '#b45309',
+  HTML_ATTRIBUTE_VALUE_COLOR: '#16a34a',
+  HTML_COMMENT_COLOR: 'var(--ds-gray-400)',
+  HTML_DOCTYPE_COLOR: 'var(--ds-gray-400)',
+
+  // Structural
+  ARROW_COLOR: 'var(--ds-gray-500)',
   TABLE_BORDER_COLOR: 'var(--ds-gray-300)',
   TABLE_TH_BACKGROUND_COLOR: 'var(--ds-gray-100)',
   TABLE_TH_HOVER_COLOR: 'var(--ds-gray-200)',
   TABLE_SORT_ICON_COLOR: 'var(--ds-gray-500)',
-  TABLE_DATA_BACKGROUND_IMAGE: 'none',
-  TABLE_DATA_BACKGROUND_SIZE: '0',
 };
 
+// ---------------------------------------------------------------------------
+// Dark theme
+// ---------------------------------------------------------------------------
+
 export const inspectorThemeDark = {
-  ...inspectorThemeLight,
+  ...shared,
+
+  // Base text
   BASE_COLOR: 'var(--ds-gray-1000)',
-  OBJECT_NAME_COLOR: 'rgb(227, 110, 236)',
-  OBJECT_VALUE_NULL_COLOR: 'rgb(127, 127, 127)',
-  OBJECT_VALUE_UNDEFINED_COLOR: 'rgb(127, 127, 127)',
-  OBJECT_VALUE_REGEXP_COLOR: 'rgb(233, 63, 59)',
-  OBJECT_VALUE_STRING_COLOR: 'rgb(233, 63, 59)',
-  OBJECT_VALUE_SYMBOL_COLOR: 'rgb(233, 63, 59)',
-  OBJECT_VALUE_NUMBER_COLOR: 'hsl(252, 100%, 75%)',
-  OBJECT_VALUE_BOOLEAN_COLOR: 'hsl(252, 100%, 75%)',
-  OBJECT_VALUE_FUNCTION_PREFIX_COLOR: 'rgb(85, 106, 242)',
-  HTML_TAG_COLOR: 'rgb(93, 176, 215)',
-  HTML_TAGNAME_COLOR: 'rgb(93, 176, 215)',
-  HTML_ATTRIBUTE_NAME_COLOR: 'rgb(155, 187, 220)',
-  HTML_ATTRIBUTE_VALUE_COLOR: 'rgb(242, 151, 102)',
-  HTML_COMMENT_COLOR: 'rgb(137, 137, 137)',
-  HTML_DOCTYPE_COLOR: 'rgb(192, 192, 192)',
+
+  // Property names — white/light foreground (Node: unstyled = white in dark terminal)
+  OBJECT_NAME_COLOR: 'var(--ds-gray-900)',
+
+  // Strings & symbols — green (Node: 'green')
+  OBJECT_VALUE_STRING_COLOR: '#4ade80', // green-400
+  OBJECT_VALUE_SYMBOL_COLOR: '#4ade80',
+
+  // Numbers & booleans — yellow (Node: 'yellow')
+  OBJECT_VALUE_NUMBER_COLOR: '#facc15', // yellow-400
+  OBJECT_VALUE_BOOLEAN_COLOR: '#facc15',
+
+  // null — bold foreground / white (Node: 'bold')
+  OBJECT_VALUE_NULL_COLOR: 'var(--ds-gray-1000)',
+
+  // undefined — grey (Node: 'grey')
+  OBJECT_VALUE_UNDEFINED_COLOR: 'var(--ds-gray-500)',
+
+  // RegExp — red (Node regexp palette)
+  OBJECT_VALUE_REGEXP_COLOR: '#f87171', // red-400
+
+  // Functions — cyan (Node: 'special' → 'cyan')
+  OBJECT_VALUE_FUNCTION_PREFIX_COLOR: '#22d3ee', // cyan-400
+
+  // HTML
+  HTML_TAG_COLOR: 'var(--ds-gray-500)',
+  HTML_TAGNAME_COLOR: '#22d3ee',
+  HTML_ATTRIBUTE_NAME_COLOR: '#facc15',
+  HTML_ATTRIBUTE_VALUE_COLOR: '#4ade80',
+  HTML_COMMENT_COLOR: 'var(--ds-gray-500)',
+  HTML_DOCTYPE_COLOR: 'var(--ds-gray-500)',
+
+  // Structural
+  ARROW_COLOR: 'var(--ds-gray-500)',
+  TABLE_BORDER_COLOR: 'var(--ds-gray-300)',
+  TABLE_TH_BACKGROUND_COLOR: 'var(--ds-gray-100)',
+  TABLE_TH_HOVER_COLOR: 'var(--ds-gray-200)',
+  TABLE_SORT_ICON_COLOR: 'var(--ds-gray-500)',
 };

package/src/components/ui/skeleton.tsx

@@ -2,12 +2,14 @@ import { cn } from '../../lib/utils';
 
 function Skeleton({
   className,
+  style,
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={cn('animate-pulse rounded-md bg-muted', className)}
       {...props}
+      className={cn('rounded-md', className)}
+      style={{ backgroundColor: 'var(--ds-gray-200)', ...style }}
     />
   );
 }