From ded89467027d8fc5192b69e1df62fc03bbc4066a Mon Sep 17 00:00:00 2001 From: "R.Eugenio" Date: Tue, 30 Dec 2025 20:09:08 +0100 Subject: [PATCH] feat(widgets): Add focus_border_color to text_input and select MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Z-Design V2: Allow panels to specify custom focus ring color. - TextInputConfig.focus_border_color: overrides theme.primary - SelectConfig.focus_border_color: same pattern - Uses Command.focusRingColor() instead of focusRing() 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- src/widgets/select.zig | 10 +++++++--- src/widgets/text_input.zig | 10 +++++++--- 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/src/widgets/select.zig b/src/widgets/select.zig index f798373..2f4cc7a 100644 --- a/src/widgets/select.zig +++ b/src/widgets/select.zig @@ -48,6 +48,8 @@ pub const SelectConfig = struct { padding: u32 = 4, /// Corner radius (default 3 for fancy mode) corner_radius: u8 = 3, + /// Override focus border color (Z-Design: color del panel). If null, uses theme.primary. + focus_border_color: ?Style.Color = null, }; /// Select result @@ -134,15 +136,17 @@ pub fn selectRect( else state.hover.blend(theme.button_bg, theme.button_bg.lighten(5)); - const border_color = if (has_focus or state.open) theme.primary else theme.border; + // Z-Design V2: focus_border_color permite color de focus personalizado por panel + const focus_color = config.focus_border_color orelse theme.primary; + const border_color = if (has_focus or state.open) focus_color else theme.border; // Draw main button background based on render mode if (Style.isFancy() and config.corner_radius > 0) { ctx.pushCommand(Command.roundedRect(bounds.x, bounds.y, bounds.w, bounds.h, bg_color, config.corner_radius)); ctx.pushCommand(Command.roundedRectOutline(bounds.x, bounds.y, bounds.w, bounds.h, border_color, config.corner_radius)); - // Draw focus ring when focused (not when dropdown is open) + // Draw focus ring when focused (Z-Design V2: usa color del panel) if (has_focus and !state.open) { - ctx.pushCommand(Command.focusRing(bounds.x, bounds.y, bounds.w, bounds.h, config.corner_radius)); + ctx.pushCommand(Command.focusRingColor(bounds.x, bounds.y, bounds.w, bounds.h, config.corner_radius, focus_color.withAlpha(180))); } } else { ctx.pushCommand(Command.rect(bounds.x, bounds.y, bounds.w, bounds.h, bg_color)); diff --git a/src/widgets/text_input.zig b/src/widgets/text_input.zig index 70764cb..5ceae77 100644 --- a/src/widgets/text_input.zig +++ b/src/widgets/text_input.zig @@ -217,6 +217,8 @@ pub const TextInputConfig = struct { text_color: ?Style.Color = null, /// Override border color (for validation feedback). If null, uses theme default. border_color: ?Style.Color = null, + /// Override focus border color (Z-Design: color del panel). If null, uses theme.primary. + focus_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) @@ -286,7 +288,9 @@ pub fn textInputRect( const theme = Style.currentTheme().*; // 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); + // Z-Design V2: focus_border_color permite color de focus personalizado por panel + const focus_color = config.focus_border_color orelse theme.primary; + const border_color = config.border_color orelse (if (has_focus) focus_color else theme.input_border); const text_color = config.text_color orelse theme.input_fg; const placeholder_color = config.placeholder_color orelse theme.secondary; @@ -295,9 +299,9 @@ pub fn textInputRect( // Fancy mode: rounded corners ctx.pushCommand(Command.roundedRect(bounds.x, bounds.y, bounds.w, bounds.h, bg_color, config.corner_radius)); ctx.pushCommand(Command.roundedRectOutline(bounds.x, bounds.y, bounds.w, bounds.h, border_color, config.corner_radius)); - // Draw focus ring when focused + // Draw focus ring when focused (Z-Design V2: usa color del panel) if (has_focus) { - ctx.pushCommand(Command.focusRing(bounds.x, bounds.y, bounds.w, bounds.h, config.corner_radius)); + ctx.pushCommand(Command.focusRingColor(bounds.x, bounds.y, bounds.w, bounds.h, config.corner_radius, focus_color.withAlpha(180))); } } else { // Simple mode: square corners