From 4f6994719196e72dc01ebe8f60d869e064ec7685 Mon Sep 17 00:00:00 2001 From: vanceingalls Date: Fri, 24 Jul 2026 00:03:46 +0000 Subject: [PATCH] fix(registry): clear brand CSS custom properties on unbranded re-attach; remove dead italic path MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit hfApplyStageConfig (Block B, verbatim across all 5 retrofitted caption identities) only ever set --hf-caption-primary/--hf-caption-accent when the corresponding brand.primaryColor/accentColor key was present, with no else branch to clear it when absent. Re-attaching a brand-less payload after a branded one left the custom property (and any JS-cached color derived from it, e.g. caption-pill-karaoke's hfColorActive and caption-emoji-pop's hfAccentColors) stuck at the stale value instead of reverting to the CSS fallback, violating idempotent re-attach. Also removes caption-editorial-emphasis's dead .word--italic CSS rule and CLASS_MAP.i entry — hfMakeBlocks only ever emits "n"/"e" tags, "i" was only reachable via the old hand-authored BLOCKS literal this task replaced. Co-Authored-By: Claude Sonnet 5 --- .../caption-editorial-emphasis.html | 13 +++++-------- .../caption-emoji-pop/caption-emoji-pop.html | 4 ++++ .../caption-highlight/caption-highlight.html | 4 ++++ .../caption-pill-karaoke/caption-pill-karaoke.html | 4 ++++ .../caption-weight-shift/caption-weight-shift.html | 4 ++++ 5 files changed, 21 insertions(+), 8 deletions(-) diff --git a/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html b/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html index f859ab6ae..38c86f294 100644 --- a/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html +++ b/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html @@ -95,13 +95,6 @@ font-style: normal; } - .word--italic { - font-family: "Inter", sans-serif; - font-size: 86px; - font-weight: 400; - font-style: italic; - } - .word--emphasis { font-family: "Playfair Display", serif; font-size: 180px; @@ -236,9 +229,13 @@ var brand = (data && data.brand) || {}; if (typeof brand.primaryColor === "string" && brand.primaryColor) { root.style.setProperty("--hf-caption-primary", brand.primaryColor); + } else { + root.style.removeProperty("--hf-caption-primary"); } if (typeof brand.accentColor === "string" && brand.accentColor) { root.style.setProperty("--hf-caption-accent", brand.accentColor); + } else { + root.style.removeProperty("--hf-caption-accent"); } return { W: W, H: H, scaleX: W / 1920, scaleY: H / 1080, fontScale: Math.min(W, H) / 1080 }; } @@ -415,7 +412,7 @@ return minSize; } - var CLASS_MAP = { n: "word word--normal", i: "word word--italic", e: "word word--emphasis" }; + var CLASS_MAP = { n: "word word--normal", e: "word word--emphasis" }; var W = []; var BLOCKS = []; diff --git a/registry/components/caption-emoji-pop/caption-emoji-pop.html b/registry/components/caption-emoji-pop/caption-emoji-pop.html index da1692a5f..e9837d5f6 100644 --- a/registry/components/caption-emoji-pop/caption-emoji-pop.html +++ b/registry/components/caption-emoji-pop/caption-emoji-pop.html @@ -232,9 +232,13 @@ var brand = (data && data.brand) || {}; if (typeof brand.primaryColor === "string" && brand.primaryColor) { root.style.setProperty("--hf-caption-primary", brand.primaryColor); + } else { + root.style.removeProperty("--hf-caption-primary"); } if (typeof brand.accentColor === "string" && brand.accentColor) { root.style.setProperty("--hf-caption-accent", brand.accentColor); + } else { + root.style.removeProperty("--hf-caption-accent"); } return { W: W, H: H, scaleX: W / 1920, scaleY: H / 1080, fontScale: Math.min(W, H) / 1080 }; } diff --git a/registry/components/caption-highlight/caption-highlight.html b/registry/components/caption-highlight/caption-highlight.html index b53e98180..b87f407e8 100644 --- a/registry/components/caption-highlight/caption-highlight.html +++ b/registry/components/caption-highlight/caption-highlight.html @@ -243,9 +243,13 @@ var brand = (data && data.brand) || {}; if (typeof brand.primaryColor === "string" && brand.primaryColor) { root.style.setProperty("--hf-caption-primary", brand.primaryColor); + } else { + root.style.removeProperty("--hf-caption-primary"); } if (typeof brand.accentColor === "string" && brand.accentColor) { root.style.setProperty("--hf-caption-accent", brand.accentColor); + } else { + root.style.removeProperty("--hf-caption-accent"); } return { W: W, diff --git a/registry/components/caption-pill-karaoke/caption-pill-karaoke.html b/registry/components/caption-pill-karaoke/caption-pill-karaoke.html index 741048027..f57bbd163 100644 --- a/registry/components/caption-pill-karaoke/caption-pill-karaoke.html +++ b/registry/components/caption-pill-karaoke/caption-pill-karaoke.html @@ -238,9 +238,13 @@ var brand = (data && data.brand) || {}; if (typeof brand.primaryColor === "string" && brand.primaryColor) { root.style.setProperty("--hf-caption-primary", brand.primaryColor); + } else { + root.style.removeProperty("--hf-caption-primary"); } if (typeof brand.accentColor === "string" && brand.accentColor) { root.style.setProperty("--hf-caption-accent", brand.accentColor); + } else { + root.style.removeProperty("--hf-caption-accent"); } return { W: W, H: H, scaleX: W / 1920, scaleY: H / 1080, fontScale: Math.min(W, H) / 1080 }; } diff --git a/registry/components/caption-weight-shift/caption-weight-shift.html b/registry/components/caption-weight-shift/caption-weight-shift.html index 873182ea5..3689dfa40 100644 --- a/registry/components/caption-weight-shift/caption-weight-shift.html +++ b/registry/components/caption-weight-shift/caption-weight-shift.html @@ -224,9 +224,13 @@ var brand = (data && data.brand) || {}; if (typeof brand.primaryColor === "string" && brand.primaryColor) { root.style.setProperty("--hf-caption-primary", brand.primaryColor); + } else { + root.style.removeProperty("--hf-caption-primary"); } if (typeof brand.accentColor === "string" && brand.accentColor) { root.style.setProperty("--hf-caption-accent", brand.accentColor); + } else { + root.style.removeProperty("--hf-caption-accent"); } return { W: W, H: H, scaleX: W / 1920, scaleY: H / 1080, fontScale: Math.min(W, H) / 1080 }; }