DangerousThings/dt-design-system
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix card-body-flush child bevel clip-path alignment

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
michael
2026-03-10 16:51:56 -07:00
parent c8afd90527
commit 36420868f5
1 changed files with 8 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
packages/web/src/components/bevels.css
View File

@@ -46,11 +46,14 @@
z-index: -1; z-index: -1;
/* Inner clip-path: left edge at bevel-sm to create progress bar zone. /* 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. 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, clip-path: polygon(var(--bevel-sm) 3px,
calc(100% - 3px) 3px, calc(100% - 3px) 3px,
calc(100% - 3px) calc(100% - var(--bevel-md)), calc(100% - 3px) calc(100% - var(--bevel-md) - 3px),
calc(100% - var(--bevel-md)) calc(100% - 3px), calc(100% - var(--bevel-md) - 3px) calc(100% - 3px),
var(--bevel-sm) calc(100% - 3px)); var(--bevel-sm) calc(100% - 3px));
} }
@@ -155,8 +158,8 @@
clip-path: polygon( clip-path: polygon(
0% 0%, 0% 0%,
100% 0%, 100% 0%,
100% calc(100% - var(--bevel-md) + 3px), 100% calc(100% - var(--bevel-md)),
calc(100% - var(--bevel-md) + 3px) 100%, calc(100% - var(--bevel-md)) 100%,
0% 100%); 0% 100%);
} }