🐛 Bugfix: Why did 15+ widget preview components render with invisible/...

Date: 2026-03-24
Time: 17:37:04 UTC
Session: gspace1-131.3
Agent: angular
Confidence: 97%
Status: ✅ Documented

📋 Decision Context

Question:

Why did 15+ widget preview components render with invisible/broken colors on the white page builder canvas?

Task: Page builder production readiness — widget theme fixes

🎯 Decision Made

Chosen:

Systematically converted all rgba(255, 255, 255, *) patterns in widget preview stylesheets to rgba(0, 0, 0, *) equivalents, plus set canvas area color: #1f2937 to override inherited dark-theme white text

Options Considered:

1. Convert all widgets to use CSS variables for theming
2. Add a dark/light mode toggle to the canvas
3. Override at the canvas level with CSS specificity
4. Systematically convert each widget's hardcoded colors

💭 Reasoning

Root cause: All widget preview components were authored for a dark-themed parent UI (the GoGrab Space app shell uses dark backgrounds). They used white-based rgba colors for text, borders, backgrounds, and accents — e.g., rgba(255, 255, 255, 0.8) for text, rgba(255, 255, 255, 0.1) for borders. When the page builder canvas was white (#ffffff), this produced invisible white-on-white text, invisible borders, and ghost elements. Additionally, widgets inherited color: white from the parent dark-themed container through CSS inheritance. The fix was two-pronged: (1) canvas-level: set color: #1f2937 on .page-canvas__area to reset inherited text color for all child widgets, and (2) widget-level: convert each widget's preview stylesheet from dark-theme to light-canvas-compatible colors. Files affected: table, image, input, select, textarea, checkbox, radio, alert, accordion, tabs, container, section, badge, progress, spacer preview components (15 files total). Careful analysis ensured white text on intentionally colored backgrounds (buttons, checkmarks, progress bars) was preserved.

📁 Files Involved

• libs/libs-widgets/widgets/src/lib/table/components/table-preview.component.ts
• libs/libs-widgets/widgets/src/lib/image/components/image-preview.component.ts
• libs/libs-widgets/widgets/src/lib/input/components/input-preview.component.ts
• libs/libs-widgets/widgets/src/lib/select/components/select-preview.component.ts
• libs/libs-widgets/widgets/src/lib/textarea/components/textarea-preview.component.ts
• libs/libs-widgets/widgets/src/lib/checkbox/components/checkbox-preview.component.ts
• libs/libs-widgets/widgets/src/lib/radio/components/radio-preview.component.ts
• libs/libs-widgets/widgets/src/lib/alert/components/alert-preview.component.ts
• libs/libs-widgets/widgets/src/lib/accordion/components/accordion-preview.component.ts
• libs/libs-widgets/widgets/src/lib/tabs/components/tabs-preview.component.ts
• libs/libs-widgets/widgets/src/lib/container/components/container-preview.component.ts
• libs/libs-widgets/widgets/src/lib/section/components/section-preview.component.ts
• libs/libs-widgets/widgets/src/lib/badge/components/badge-preview.component.ts
• libs/libs-widgets/widgets/src/lib/progress/components/progress-preview.component.ts
• libs/libs-widgets/widgets/src/lib/spacer/components/spacer-preview.component.ts
• libs/libs-structural/page-builder/src/lib/canvas/page-canvas.component.scss

🔗 Related

• Decision ID: dev_1774373824305_pwfgw6j
• Session: 131
• Workspace: gspace1

Auto-generated by MCP Smart Consolidation