INPUT TEXT COLOR FIX

Documentation for Plans

Input Text Color Fix

🎯 Status: ✅ FIXED

📋 Problem

Input fields (.slug-input, .form-input, .form-textarea) had white text appearing in some browsers, making them invisible or hard to read.

Root Cause: Input elements had background-color set but no explicit color property, causing text to inherit from parent styles (which could be white in some themes/browsers).

✅ Solution

Added explicit text color and background color to all input fields to ensure consistent visibility across all browsers and themes.

Files Fixed:

1. `libs/shared-components/src/lib/editable-slug/editable-slug.component.ts`

.slug-input {
  font-family: 'Monaco', 'Courier New', monospace;
  font-size: 14px;
  padding: 6px 10px;
  border: 2px solid #6366f1;
  border-radius: 4px;
  outline: none;
  min-width: 200px;
  background-color: white;
  color: #1f2937; /* ✅ FIX: Explicit dark text color */
}

2. `libs/editor-ui/src/lib/components/page-properties/components/basic-info/basic-info.component.ts`

.form-input,
.form-textarea {
  display: block;
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--ux-color-gray-300, #d1d5db);
  border-radius: 0.375rem;
  color: #1f2937; /* ✅ FIX: Explicit dark text color */
  background-color: white; /* ✅ FIX: Explicit white background */
}

3. Universe Creation Wizard (Already Correct)

apps/gograb-space/src/app/components/features/universe-creation/universe-creation-wizard.component.scss

Already had explicit color: white; for dark-themed inputs ✅

🎨 Color Choices

Color	Value	Usage
Text (Dark)	`#1f2937`	Input text on light backgrounds
Text (Light)	`white`	Input text on dark backgrounds
Background	`white`	Light-themed inputs

📊 Impact

Before Fix:

❌ Input text invisible (white on white) in some browsers
❌ Inconsistent text color inheritance
❌ Poor accessibility

After Fix:

✅ Input text always visible
✅ Consistent across all browsers
✅ Better accessibility

🧪 Testing

To verify the fix works:

Open any form with input fields (slug editor, page properties, etc.)
Check in multiple browsers (Chrome, Firefox, Safari)
Verify text is clearly visible (dark gray on white background)
Check both light and dark themes

📖 Best Practice

Always explicitly set BOTH color and background-color for input elements:

/* ✅ GOOD - Explicit colors */
input {
  background-color: white;
  color: #1f2937;
}

/* ❌ BAD - Color inherited, may be invisible */
input {
  background-color: white;
  /* color: ??? (inherited from parent) */
}

Date Fixed: November 3, 2025
Fixed By: AI Assistant
Issue: Input text appearing white/invisible in some browsers