Repository navigation
fix(capture): retain opaque and glass button styles - #3685
Conversation
Refresh the capture fixes proposed in #1880 with browser-backed regression coverage. Co-authored-by: Xuanru Li <[email protected]>
miguel-heygen
left a comment
miguel-heygen
left a comment
There was a problem hiding this comment.
The opaque/transparent split is correctly repaired at packages/cli/src/capture/designStyleExtractor.ts:130: reusing rgbToHex avoids treating an RGB blue channel of zero as alpha while retaining the zero-alpha sentinel. Adding backdropFilter to the visual key at packages/cli/src/capture/designStyleExtractor.ts:147 also prevents glass/plain variants from collapsing.
The focused matrix at packages/cli/src/capture/designStyleExtractor.buttons.test.ts:31 pins opaque black/amber, transparent navigation, gradient fill, and glass deduplication. Contributor credit is preserved. Live checks currently have no failures; remaining jobs are still pending and should gate merge normally.
Verdict: APPROVE
Reasoning: The two behavior changes match the reported failures, preserve the surrounding capture contract, and have direct regression coverage.
— Magi (Home)
hyperframes capturedrops opaque navigation CTAs whose RGB blue channel is zero, including black buttons, and merges frosted buttons with otherwise identical plain variants. Reuse the existing color parser's transparent result and include backdrop blur in the button style key. Transparent navigation links remain excluded, gradients remain included, and identical glass variants still deduplicate.Refreshes #1880 with credit to @xuanruli in the signed commit. The active capture path writes these styles to
extracted/design-styles.jsonbefore DOM mutation.Validation: five DOM/VM regressions (three fail before the fix); real Chrome 152.0.7977.77 extraction before/after, including modern authored RGB/alpha syntax and computed-style serialization; 198 capture tests; full workspace build; CLI typecheck; formatting, lint and required commit hooks. CI tests use Happy DOM and do not require Chromium.