feat: implement auto theme inheritance with dev preview support, repo standards, brand assets & animations - #37
Conversation
… standards, brand assets & animations
github-actions
Bot
added
ci-cd
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
|
Warning Review limit reached
Next review available in: 34 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (13)
WalkthroughSupportUsButton now supports automatic and inherited host styling. The demo adds persisted theme and host-style controls. The repository adds package validation scripts, CI, contribution guidance, maintainer information, branding documentation, and corrected issue-template links. ChangesTheme adaptation
Repository readiness
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant HostPage
participant SupportUsButton
participant useParentStyles
participant DOM
HostPage->>SupportUsButton: render with auto theme
SupportUsButton->>useParentStyles: request host styles
useParentStyles->>DOM: inspect computed parent styles
DOM-->>useParentStyles: return background, font, and text color
useParentStyles-->>SupportUsButton: return ParentStyles
SupportUsButton-->>HostPage: render adapted colors, typography, and imagery
Possibly related PRs
Suggested labels: Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1🛠️ Fix failing CI checks 💡
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 19
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (3)
CONTRIBUTING.md (1)
18-18: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick winRemove the replacement character from the heading.
Line 18 renders as
## �📋 Table of Contents. Replace it with## 📋 Table of Contents.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@CONTRIBUTING.md` at line 18, Remove the replacement character from the Table of Contents heading, leaving the heading as “📋 Table of Contents” with the existing emoji and Markdown structure preserved.demo/App.tsx (1)
97-152: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick winGive each control a programmatic name.
The
spanelements do not label their associatedselectelements. TheONandOFFbutton text does not identify the background-logo action. Uselabelwith matchinghtmlForandidvalues. Addaria-pressedand an accessible name to the logo toggle.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@demo/App.tsx` around lines 97 - 152, Update the controls in the demo UI to have programmatic accessible names: replace each descriptive span with a label associated via matching htmlFor/id values for the theme, host background, and host font selects, and add corresponding select ids. For the logo toggle using setShowLogo, add an accessible name describing the background-logo action and set aria-pressed to show the current showLogo state.Source: Path instructions
src/components/SupportUsButton.tsx (1)
304-322: 🔒 Security & Privacy | 🟠 Major | ⚡ Quick winPrevent reverse tabnabbing and fix related button issues.
rel="noopener noreferrer"at line 308 has no effect on<button>elements;relis only meaningful on<a>,<area>,<link>, and<form>. The actual navigation happens viawindow.open(link.url, "_blank")at line 316, which is called without a features string. Withoutnoopener, the newly opened page can accesswindow.openerand redirect the original tab, a known phishing vector (reverse tabnabbing).While in this segment, also address two static-analysis findings: the
<button>has no explicittype, so it defaults tosubmitand could unexpectedly submit an enclosing form; andkey={index}(line 307) should use a stable identifier ifctaSection.sponsorLinkcan reorder or filter.🔒 Proposed fix
<button - key={index} - rel="noopener noreferrer" + key={link.url ?? link.name ?? index} + type="button" className={`px-6 py-2.5 w-fit rounded-lg font-semibold text-[18px] cursor-pointer transition-all duration-200 ease-in-out transform active:scale-95 shadow-md hover:-translate-y-1 hover:shadow-xl ${ darkThemeActive ? "bg-[`#F4F4F4`] text-[`#191919`] hover:bg-[`#ffd700`] hover:text-[`#191919`] hover:shadow-yellow-500/20" : "bg-[`#191919`] text-[`#F4F4F4`] hover:bg-[`#ffd700`] hover:text-[`#191919`] hover:shadow-black/20" }`} onClick={() => { if (validateUrl(link.url)) { - window.open(link.url, "_blank"); + window.open(link.url, "_blank", "noopener,noreferrer"); } }} >🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/SupportUsButton.tsx` around lines 304 - 322, Update the sponsor-link buttons in the ctaSection.sponsorLink map to open validated URLs with window.open using noopener/noreferrer features, remove the ineffective rel attribute, and explicitly set the button type to button. Replace key={index} with a stable unique identifier from each link, preserving the existing navigation and styling behavior.Source: Linters/SAST tools
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In @.github/ISSUE_TEMPLATE/good_first_issue.yml:
- Line 39: Align the links in the Resources block with the canonical
destinations: replace its Discord invite with the same vK2NfgG invite used
elsewhere, and replace the Template-Repo URL with the SupportUsButton repository
URL. Leave the existing Contribution Guide link unchanged.
In @.github/workflows/ci.yml:
- Around line 30-31: Update the CI “Run Tests” step to execute the configured
unit-test runner rather than npm test, since the test script currently only
performs type checking. Preserve the existing separate type-check step and
ensure the command runs the tests under src/__tests__, including
SupportUsButton.test.ts.
- Around line 15-16: Update the workflow action references in the CI job,
including actions/checkout and actions/setup-node, to reviewed full-length
commit SHA pins instead of mutable v4 tags. Keep their existing action versions
and step behavior unchanged while ensuring both references use immutable SHAs.
- Around line 3-7: Add a workflow-level concurrency configuration alongside the
existing on triggers in the CI workflow, using an appropriate group key and
cancel-in-progress: true so newer runs cancel superseded runs while preserving
the current push and pull_request triggers.
- Around line 9-12: Harden the build-and-test job by declaring explicit
least-privilege permissions and configuring the checkout step with
persist-credentials disabled. Update the job-level permissions and the
actions/checkout invocation, preserving the existing type-check, test, and build
workflow.
In `@AGENTS.md`:
- Line 16: Update AGENTS.md by adding a blank line immediately after the “Key
Build & Test Commands” heading to satisfy MD022, and add an appropriate language
identifier such as text to the repository-structure fenced block to satisfy
MD040.
In `@BestPracticesChecklist.md`:
- Line 28: Update the “Zero Dependencies” checklist item to acknowledge the
runtime tslib dependency, and replace the unsupported “<0.5 KB added overhead”
claim with a bundle-size baseline or target that matches the current published
dist output and tracked source.
In `@brand/Brand.md`:
- Line 20: Add a single blank line immediately after the Markdown headings
“Usage Rules” and “Font Family Specs” in Brand.md so both headings satisfy
markdownlint MD022.
- Around line 15-18: Replace the machine-local file:/// URLs in the Primary Logo
and Favicon / Logomark links with repository-relative Markdown links, using
./logo.svg and ./favicon.svg so they resolve correctly across GitHub and other
clones.
In `@demo/App.tsx`:
- Around line 104-106: Add an option with value "inherit" to the theme selector
alongside the existing auto, light, and dark options, using the existing Theme
mode value and preserving the current selection behavior so the development
preview can select both host-style modes.
- Around line 7-18: Externalize all user-visible strings in demo/App.tsx,
including the HOST_THEME_MAP and HOST_FONT_MAP labels plus the control, option,
and toggle text in the referenced UI section. Move them into a resource module
and update App.tsx to consume those resources, preserving the existing
theme/font values and rendered behavior.
In `@MAINTAINERS.md`:
- Around line 15-17: Update the security-reporting guidance in the maintainers
documentation to provide a private channel for vulnerability reports instead of
directing them to Discord or public GitHub Issues. Keep Discord and GitHub
Issues listed only for architectural questions and governance inquiries,
consistent with the existing CONTRIBUTING.md policy.
- Line 5: Update the maintainers table header by changing “Github Username” to
the official “GitHub Username” spelling, leaving the other columns unchanged.
In `@package.json`:
- Around line 62-63: The test script in package.json only performs
type-checking, and SupportUsButton.test.ts does not register executable tests.
Update package.json so test runs Vitest while retaining type-check as tsc
--noEmit; in src/__tests__/SupportUsButton.test.ts, replace
testSupportUsButtonPackage() with Vitest test/expect cases that render
SupportUsButton and verify auto and inherit behavior, required content, and
accessibility.
In `@src/components/SupportUsButton.tsx`:
- Around line 6-30: Replace the BT.601 brightness calculation in isDarkColor
with WCAG relative luminance: normalize RGB channels, apply sRGB gamma
correction, then use coefficients 0.2126, 0.7152, and 0.0722 for the contrast
threshold. Integrate or reuse this calculation in useParentStyles while
preserving its window.getComputedStyle upward traversal inside
useIsomorphicLayoutEffect, so dynamic logo and button decisions use the detected
parent background luminance.
- Around line 76-81: Clarify the public Theme contract for the existing Theme
handling in SupportUsButton: either document that Theme="inherit" is an
intentional synonym for Theme="auto" and expose that behavior in the demo, or
remove "inherit" from the Theme type and related tests/logic so only supported
modes remain.
In `@src/hooks/useParentStyles.ts`:
- Line 1: Update the import declaration in useParentStyles to import RefObject
as a type-only dependency while keeping useState, useEffect, and useLayoutEffect
as value imports.
- Around line 38-144: Update the useIsomorphicLayoutEffect containing
detectStyles to use [enabled] as its dependency array, preserving setup and
cleanup behavior while avoiding reinitialization on unrelated renders. Narrow
the document.body and document.documentElement MutationObserver configurations
by removing subtree observation, while retaining direct class/style attribute
monitoring and the existing ancestor observer.
In `@src/styles/style.css`:
- Around line 48-54: Add a prefers-reduced-motion: reduce media query targeting
.animate-sub-fade-in and .animate-sub-scale-in, disabling their entrance
animations while preserving the existing animation declarations for users
without the preference.
---
Outside diff comments:
In `@CONTRIBUTING.md`:
- Line 18: Remove the replacement character from the Table of Contents heading,
leaving the heading as “📋 Table of Contents” with the existing emoji and
Markdown structure preserved.
In `@demo/App.tsx`:
- Around line 97-152: Update the controls in the demo UI to have programmatic
accessible names: replace each descriptive span with a label associated via
matching htmlFor/id values for the theme, host background, and host font
selects, and add corresponding select ids. For the logo toggle using
setShowLogo, add an accessible name describing the background-logo action and
set aria-pressed to show the current showLogo state.
In `@src/components/SupportUsButton.tsx`:
- Around line 304-322: Update the sponsor-link buttons in the
ctaSection.sponsorLink map to open validated URLs with window.open using
noopener/noreferrer features, remove the ineffective rel attribute, and
explicitly set the button type to button. Replace key={index} with a stable
unique identifier from each link, preserving the existing navigation and styling
behavior.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: 43beba04-bfc5-4136-9caf-f4a516695113
⛔ Files ignored due to path filters (1)
brand/logo.svgis excluded by!**/*.svg
📒 Files selected for processing (14)
.github/ISSUE_TEMPLATE/good_first_issue.yml.github/workflows/ci.ymlAGENTS.mdBestPracticesChecklist.mdCONTRIBUTING.mdMAINTAINERS.mdbrand/Brand.mddemo/App.tsxpackage.jsonsrc/__tests__/SupportUsButton.test.tssrc/components/SupportUsButton.tsxsrc/hooks/useParentStyles.tssrc/styles/style.csssrc/types/index.ts
2 participants
Overview
This PR completes the GSoC Project Completion Checklist requirements, adds official brand assets, implements native 0ms host theme inheritance with dynamic contrast fallbacks, refactors sponsors flex layout, adds lightweight CSS micro-animations, and establishes automated CI/CD workflows.
Screenshots/Recordings:
2026-07-31.23-00-31.mp4
Key Changes & Features
1. Branding & Repository Governance Assets
brand/logo.svg,brand/favicon.svg, andbrand/Brand.mddocumenting brand specs, color palette (#ffd700,#191919,#f4f4f4), typography, and design tokens.MAINTAINERS.md,AGENTS.md, and fully completedBestPracticesChecklist.md.CONTRIBUTING.mdand issue templates with direct links to the #support-us-button Discord channel and removed allTODOplaceholders.2. Native CSS Theme Inheritance & Contrast Fail-Safe
Theme="auto"Native Cascade: Updated root container to use native CSS transparency (bg-transparent font-inherit text-inherit), enabling 0ms instant theme painting when host background or font changes without re-rendering delays.useParentStylesHook: Created custom layout hook usinguseIsomorphicLayoutEffectandMutationObserverto traverse host DOM parent nodes and calculate relative luminance contrast (isDarkColor) for contrast text/logo inversion.3. Sponsors Responsive Flex Layout Polish
overflow-x-auto) across all viewports.flex-wrap items-center justify-centerso sponsor badges wrap onto centered lines on smaller viewports without squeezing or colliding.min-[1380px]so subtext and sponsors never collide or overlap between 1280px and 1380px screens.4. Lightweight Animations & UI Unclipping
@keyframes sub-fade-in-upand@keyframes sub-scale-infor staggered entrance transitions on hero text, CTA buttons, and sponsor badges (<0.5 KB footprint).overflow-hiddenso vertical dashed border lines extend unclipped full length, setz-0on border overlay, and isolated background map SVG inside an inner wrapper.5. Testing & CI/CD
src/__tests__/SupportUsButton.test.tsverifying package exports, theme props ("auto" | "inherit" | "light" | "dark"), and data contracts..github/workflows/ci.ymlto automatically run type checks (npx tsc --noEmit), unit tests, and production bundle builds on every PR.🧪 Verification & Build Status
npx tsc --noEmit— ✅ Passed (0 errors)npm run build— ✅ Passed (0 warnings)npm test— ✅ Passednpm run dev:demo— ✅ Verified 0ms instant theme switching and responsive viewport alignmentAdditional Notes:
Checklist
We encourage contributors to use AI tools responsibly when creating Pull Requests. While AI can be a valuable aid, it is essential to ensure that your contributions meet the task requirements, build successfully, include relevant tests, and pass all linters. Submissions that do not meet these standards may be closed without warning to maintain the quality and integrity of the project. Please take the time to understand the changes you are proposing and their impact.
Summary by CodeRabbit
New Features
Documentation
Quality