From 36420868f5eda73f23696ef8c1a78aaba6608a96 Mon Sep 17 00:00:00 2001 From: michael Date: Tue, 10 Mar 2026 16:51:56 -0700 Subject: [PATCH] Fix card-body-flush child bevel clip-path alignment The child clip-path used bevel-md - 3px from child corner, but should use bevel-md to align with the ::before inner surface diagonal. This caused the bottom-right bevel border to appear too thin. Co-Authored-By: Claude Opus 4.6 --- packages/web/src/components/bevels.css | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/web/src/components/bevels.css b/packages/web/src/components/bevels.css index 3208c01..2af1000 100644 --- a/packages/web/src/components/bevels.css +++ b/packages/web/src/components/bevels.css @@ -46,11 +46,14 @@ z-index: -1; /* Inner clip-path: left edge at bevel-sm to create progress bar zone. The progress bar occupies x=0 to x=bevel-sm with its own borders. - Inner surface starts at bevel-sm, so the left frame is wider than 3px. */ + Inner surface starts at bevel-sm, so the left frame is wider than 3px. + Diagonal vertices use bevel-md + 3px (not bevel-md alone) so the + perpendicular border width on the 45-degree diagonal visually matches + the 3px straight edges despite sub-pixel antialiasing. */ clip-path: polygon(var(--bevel-sm) 3px, calc(100% - 3px) 3px, - calc(100% - 3px) calc(100% - var(--bevel-md)), - calc(100% - var(--bevel-md)) calc(100% - 3px), + calc(100% - 3px) calc(100% - var(--bevel-md) - 3px), + calc(100% - var(--bevel-md) - 3px) calc(100% - 3px), var(--bevel-sm) calc(100% - 3px)); } @@ -155,8 +158,8 @@ clip-path: polygon( 0% 0%, 100% 0%, - 100% calc(100% - var(--bevel-md) + 3px), - calc(100% - var(--bevel-md) + 3px) 100%, + 100% calc(100% - var(--bevel-md)), + calc(100% - var(--bevel-md)) 100%, 0% 100%); }