feat(text_input): Z-Design soporte para colores de panel

Añadidos campos opcionales a TextInputConfig:
- bg_color: color de fondo (override del theme)
- placeholder_color: color del placeholder

Los paneles ahora pueden pasar sus colores derivados Z-Design
a los widgets hijos para coherencia visual.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
R.Eugenio 2025-12-29 22:39:47 +01:00
parent 8f4336f1f6
commit d2f99419de

View file

@ -211,10 +211,14 @@ pub const TextInputConfig = struct {
password: bool = false, password: bool = false,
/// Padding inside the input /// Padding inside the input
padding: u32 = 4, padding: u32 = 4,
/// Override background color. If null, uses theme default.
bg_color: ?Style.Color = null,
/// Override text color (for validation feedback). If null, uses theme default. /// Override text color (for validation feedback). If null, uses theme default.
text_color: ?Style.Color = null, text_color: ?Style.Color = null,
/// Override border color (for validation feedback). If null, uses theme default. /// Override border color (for validation feedback). If null, uses theme default.
border_color: ?Style.Color = null, border_color: ?Style.Color = null,
/// Override placeholder color. If null, uses theme default.
placeholder_color: ?Style.Color = null,
/// Corner radius (default 3 for fancy mode) /// Corner radius (default 3 for fancy mode)
corner_radius: u8 = 3, corner_radius: u8 = 3,
}; };
@ -278,13 +282,13 @@ pub fn textInputRect(
// Sync state.focused for backwards compatibility // Sync state.focused for backwards compatibility
state.focused = has_focus; state.focused = has_focus;
// Theme colors (Z-Design: usar theme dinámico) // Theme colors (Z-Design: usar theme dinámico, con overrides del panel)
const theme = Style.currentTheme().*; const theme = Style.currentTheme().*;
const bg_color = if (has_focus) theme.input_bg.lighten(5) else theme.input_bg;
// Use override colors if provided, otherwise use theme defaults // Use override colors if provided, otherwise use theme defaults
const bg_color = config.bg_color orelse (if (has_focus) theme.input_bg.lighten(5) else theme.input_bg);
const border_color = config.border_color orelse (if (has_focus) theme.primary else theme.input_border); const border_color = config.border_color orelse (if (has_focus) theme.primary else theme.input_border);
const text_color = config.text_color orelse theme.input_fg; const text_color = config.text_color orelse theme.input_fg;
const placeholder_color = theme.secondary; const placeholder_color = config.placeholder_color orelse theme.secondary;
// Draw background and border based on render mode // Draw background and border based on render mode
if (Style.isFancy() and config.corner_radius > 0) { if (Style.isFancy() and config.corner_radius > 0) {