Fix component styles in fumadocs and add automated testing

apps/site/app/global.css

@@ -2,4 +2,80 @@
 @import 'fumadocs-ui/css/neutral.css';
 @import 'fumadocs-ui/css/preset.css';
 
+/* Scan sources for Tailwind classes */
 @source '../node_modules/fumadocs-ui/dist/**/*.js';
+@source '../../packages/components/src/**/*.{ts,tsx}';
+@source '../../packages/react/src/**/*.{ts,tsx}';
+@source '../../packages/plugin-*/src/**/*.{ts,tsx}';
+
+/* ObjectUI component CSS custom properties */
+:root {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
+
+  --primary: 222.2 47.4% 11.2%;
+  --primary-foreground: 210 40% 98%;
+
+  --secondary: 210 40% 96.1%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+
+  --accent: 210 40% 96.1%;
+  --accent-foreground: 222.2 47.4% 11.2%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
+
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+  --ring: 222.2 84% 4.9%;
+
+  --radius: 0.5rem;
+}
+
+.dark {
+  --background: 222.2 84% 4.9%;
+  --foreground: 210 40% 98%;
+
+  --card: 222.2 84% 4.9%;
+  --card-foreground: 210 40% 98%;
+
+  --popover: 222.2 84% 4.9%;
+  --popover-foreground: 210 40% 98%;
+
+  --primary: 210 40% 98%;
+  --primary-foreground: 222.2 47.4% 11.2%;
+
+  --secondary: 217.2 32.6% 17.5%;
+  --secondary-foreground: 210 40% 98%;
+
+  --muted: 217.2 32.6% 17.5%;
+  --muted-foreground: 215 20.2% 65.1%;
+
+  --accent: 217.2 32.6% 17.5%;
+  --accent-foreground: 210 40% 98%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 210 40% 98%;
+
+  --border: 217.2 32.6% 17.5%;
+  --input: 217.2 32.6% 17.5%;
+  --ring: 212.7 26.8% 83.9%;
+}
+
+* {
+  border-color: hsl(var(--border));
+}
+
+body {
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+}

apps/site/tailwind.config.ts

@@ -0,0 +1,57 @@
+import type { Config } from 'tailwindcss'
+
+export default {
+  darkMode: "class",
+  content: [
+    './app/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './content/**/*.{md,mdx}',
+    '../../packages/components/src/**/*.{ts,tsx}',
+    '../../packages/react/src/**/*.{ts,tsx}',
+    '../../packages/plugin-*/src/**/*.{ts,tsx}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+    },
+  },
+} satisfies Config

scripts/README.md

@@ -0,0 +1,170 @@
+# Component Style Testing
+
+This directory contains automated testing scripts for verifying that ObjectUI components render with proper styles in the fumadocs documentation site.
+
+## Scripts
+
+### 1. `test-component-styles.js` (Node.js)
+
+A comprehensive automated test that:
+- Launches a headless browser
+- Navigates to all component documentation pages
+- Checks for proper CSS styling on components
+- Takes screenshots for visual verification
+- Reports errors and warnings
+
+**Usage:**
+```bash
+# Requires dev server to be running on http://localhost:3000
+node scripts/test-component-styles.js
+```
+
+**Features:**
+- ✅ Tests 15+ critical components
+- ✅ Validates background colors, borders, padding, etc.
+- ✅ Captures screenshots for manual review
+- ✅ Detects missing or invalid styles
+- ✅ Distinguishes between critical and non-critical failures
+
+### 2. `test-component-styles.sh` (Bash)
+
+A wrapper script that:
+- Automatically starts the dev/production server
+- Runs the Node.js test script
+- Cleans up the server after testing
+
+**Usage:**
+```bash
+# Test with dev server (default)
+./scripts/test-component-styles.sh dev
+
+# Test with production build
+./scripts/test-component-styles.sh build
+```
+
+## Quick Start
+
+1. **Install dependencies:**
+   ```bash
+   pnpm install
+   ```
+
+2. **Run the tests:**
+   ```bash
+   # Option 1: Manual (requires server running)
+   cd apps/site && pnpm dev &
+   node scripts/test-component-styles.js
+
+   # Option 2: Automatic
+   ./scripts/test-component-styles.sh
+   ```
+
+3. **Check results:**
+   - Console output shows pass/fail for each component
+   - Screenshots saved to `/tmp/*.png`
+   - Exit code 0 = all tests passed, 1 = critical failures
+
+## Adding New Components
+
+To test a new component, edit `test-component-styles.js`:
+
+```javascript
+const COMPONENT_PAGES = [
+  // Add your component
+  { 
+    path: '/docs/components/category/your-component', 
+    name: 'Your Component', 
+    critical: true // Set to true if it's a critical component
+  },
+  // ...
+];
+```
+
+## Common Issues
+
+### Calendar/Date Picker Styling
+
+If calendar components show styling issues:
+
+1. **Check CSS custom properties**: Ensure `global.css` includes all design tokens
+2. **Check Tailwind config**: Verify `tailwind.config.ts` maps CSS variables correctly
+3. **Check content paths**: Ensure Tailwind scans all component source files
+4. **Check for dynamic classes**: Some components use runtime-generated class names
+
+### Fixing Style Issues
+
+1. **Missing colors**: Add CSS custom property to `apps/site/app/global.css`
+2. **Missing mapping**: Add color mapping to `apps/site/tailwind.config.ts`
+3. **Classes not found**: Add path to `content` array in Tailwind config
+4. **Component-specific**: Check component UI source in `packages/components/src/ui/`
+
+## CI Integration
+
+Add to your CI pipeline:
+
+```yaml
+- name: Test Component Styles
+  run: |
+    pnpm build
+    pnpm start &
+    sleep 10
+    node scripts/test-component-styles.js
+```
+
+## Output Format
+
+```
+🚀 Starting Component Style Tests...
+
+Testing: Button (/docs/components/form/button)
+✅ PASSED - Button
+
+Testing: Calendar (/docs/components/data-display/calendar)
+❌ FAILED - Calendar (3 errors, 1 warnings)
+   ⚠️  CRITICAL COMPONENT
+
+📊 TEST SUMMARY
+================================================================================
+
+Total Tests: 15
+Passed: 14 ✅
+Failed: 1 ❌
+Critical Failures: 1 ⚠️
+
+Failed Components:
+
+  ⚠️ Calendar:
+    Path: /docs/components/data-display/calendar
+    Errors: 3, Warnings: 1
+    Screenshot: /tmp/calendar.png
+    - [ERROR] Missing or invalid background-color on button[class*="selected"]
+    - [ERROR] Missing or invalid color on button[class*="selected"]
+    - [ERROR] Missing or invalid border-color on [class*="border"]
+```
+
+## Troubleshooting
+
+**Server not starting:**
+- Check if port 3000 is available
+- Ensure all dependencies are installed (`pnpm install`)
+- Try building first (`pnpm build`)
+
+**Tests timing out:**
+- Increase timeout in script (default: 30s)
+- Check for console errors in browser
+- Verify components are actually rendering
+
+**False positives:**
+- Some components may have intentionally transparent backgrounds
+- Adjust `STYLE_CHECKS` in the script to match expected behavior
+- Add component-specific validation rules
+
+## Maintenance
+
+Update the test script when:
+- Adding new components to the documentation
+- Changing component styling approach
+- Modifying Tailwind configuration
+- Updating design tokens
+
+Last updated: 2026-01-23