From 8b15d3f80ff37816dfe55ca4f8339c3239aeb5d5 Mon Sep 17 00:00:00 2001 From: "R.Eugenio" Date: Tue, 30 Dec 2025 00:11:25 +0100 Subject: [PATCH] feat: Bisel 3D sutil en botones MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Añadir línea highlight (lighten 15) en borde superior interno - Añadir línea shadow (darken 15) en borde inferior interno - Aplicar a buttonRect y buttonStatefulRect - Deshabilitar bisel en botones disabled - Solo aplicar si botón tiene al menos 4px de alto/ancho - Actualizar test para reflejar 2 comandos extra 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- src/widgets/button.zig | 24 ++++++++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/src/widgets/button.zig b/src/widgets/button.zig index bde519c..a4c2eb2 100644 --- a/src/widgets/button.zig +++ b/src/widgets/button.zig @@ -105,6 +105,16 @@ pub fn buttonRect(ctx: *Context, bounds: Layout.Rect, text: []const u8, config: ctx.pushCommand(Command.rectOutline(bounds.x, bounds.y, bounds.w, bounds.h, theme.border)); } + // Bisel 3D sutil: línea clara arriba, línea oscura abajo (inside) + if (bounds.h >= 4 and bounds.w >= 4 and !config.disabled) { + // Línea superior interna (highlight) + const bevel_light = bg_color.lighten(15); + ctx.pushCommand(Command.rect(bounds.x + 1, bounds.y + 1, bounds.w - 2, 1, bevel_light)); + // Línea inferior interna (shadow) + const bevel_dark = bg_color.darken(15); + ctx.pushCommand(Command.rect(bounds.x + 1, bounds.y + @as(i32, @intCast(bounds.h)) - 2, bounds.w - 2, 1, bevel_dark)); + } + // Draw text centered const char_width: u32 = 8; const char_height: u32 = 8; @@ -193,6 +203,16 @@ pub fn buttonStatefulRect( ctx.pushCommand(Command.rectOutline(bounds.x, bounds.y, bounds.w, bounds.h, theme.border)); } + // Bisel 3D sutil: línea clara arriba, línea oscura abajo (inside) + if (bounds.h >= 4 and bounds.w >= 4 and !config.disabled) { + // Línea superior interna (highlight) + const bevel_light = bg_color.lighten(15); + ctx.pushCommand(Command.rect(bounds.x + 1, bounds.y + 1, bounds.w - 2, 1, bevel_light)); + // Línea inferior interna (shadow) + const bevel_dark = bg_color.darken(15); + ctx.pushCommand(Command.rect(bounds.x + 1, bounds.y + @as(i32, @intCast(bounds.h)) - 2, bounds.w - 2, 1, bevel_dark)); + } + // Draw text centered const char_width: u32 = 8; const char_height: u32 = 8; @@ -237,8 +257,8 @@ test "button generates commands" { _ = button(&ctx, "Click me"); - // Should generate: rect (background) + rect_outline (border) + text - try std.testing.expectEqual(@as(usize, 3), ctx.commands.items.len); + // Should generate: rect (background) + rect_outline (border) + 2 bevel lines + text + try std.testing.expectEqual(@as(usize, 5), ctx.commands.items.len); ctx.endFrame(); }