Skip to content

fix(capture): address review nits from #1879 (rgba-only transparent check, glass dedup key) #1880

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
xuanruli wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix(capture): address review nits from #1879 (rgba-only transparent check, glass dedup key) #1880

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 8 additions & 4 deletions packages/cli/src/capture/designStyleExtractor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@ const EXTRACT_DESIGN_STYLES_SCRIPT = `(() => {
function rgbToHex(color) {
if (!color) return "";
if (color.startsWith('#')) return color.toUpperCase();
// capture optional alpha (group 4), allowing both comma and modern slash (rgb r g b / a) syntax.
// capture optional alpha (group 4); RGB stay comma-separated (as getComputedStyle returns them),
// the alpha may follow a comma or a slash (rgb(r, g, b / a)).
var m = color.match(/rgba?\\(\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)(?:\\s*[,/]\\s*([\\d.]+))?/);
if (!m) return color;
// fully-transparent fill (rgba(...,0)) → sentinel, NOT #000000 — otherwise a transparent
Expand Down Expand Up @@ -127,7 +128,9 @@ const EXTRACT_DESIGN_STYLES_SCRIPT = `(() => {
var isFilledEl = (el) => {
var cs = getComputedStyle(el);
var bg = cs.backgroundColor;
var solid = !!bg && bg !== "transparent" && !/rgba?\\([^)]*,\\s*0\\s*\\)/.test(bg);
// require the alpha form rgba( — only rgba() carries an explicit alpha. Matching rgba? would
// treat rgb(r, g, 0) (e.g. solid black rgb(0, 0, 0)) as zero-alpha and wrongly drop a black CTA.
var solid = !!bg && bg !== "transparent" && !/rgba\\([^)]*,\\s*0\\s*\\)/.test(bg);
// a gradient-filled CTA (e.g. Snowflake's blue pill = background: var(--ui-background-03)) has a
// transparent background-COLOR but a gradient background-IMAGE — count it as filled too.
return solid || (cs.backgroundImage || "").indexOf("gradient") >= 0;
Expand All @@ -143,8 +146,9 @@ const EXTRACT_DESIGN_STYLES_SCRIPT = `(() => {
var buttonMap = {};
for (var bi = 0; bi < buttonEls.length; bi++) {
var bs = getStyles(buttonEls[bi]);
// Deduplicate by visual appearance (gradient fill kept distinct so a gradient CTA survives)
var bKey = bs.background + "|" + bs.backgroundImage + "|" + bs.borderRadius + "|" + bs.border;
// Deduplicate by visual appearance (gradient fill + glass blur kept distinct so a gradient or
// frosted CTA survives — mirrors the card dedup key).
var bKey = bs.background + "|" + bs.backgroundImage + "|" + bs.backdropFilter + "|" + bs.borderRadius + "|" + bs.border;
if (!buttonMap[bKey]) {
var btnText = (buttonEls[bi].textContent || "").trim().slice(0, 40);
buttonMap[bKey] = {
Expand Down
Loading