Rebrand to the official React palette (verified) — assets, badges, docs tokens - #3
Merged
Conversation
Replace the old Prussian/Scooter badge hexes (003748/30C5CA/8FB6C2) with the verified React palette: badges alternate #61DAFB (classic React cyan, per brandcolors.net) and #23272F (react.dev dark gray-90), with muted #404756 (react.dev gray-70) for the license badge — palette source: react.dev colors.js in github.com/reactjs/react.dev. The sponsor badge logoColor flips white -> 23272F so the logo stays legible on the light cyan. Root README.md regenerated via gen:manifest (mirrored, not hand-edited). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…lette Recolor the hookli mark to the verified React colors — #61DAFB hook stroke (classic React logo cyan, brandcolors.net; 9.22:1 on ground), white state dot, #23272F tile (react.dev gray-90) — and replace the banner with a new 1200x400 composition: mark + hookli. wordmark, cyan accent rule, 'type-safe React hooks' heading, #99A1B3 muted meta line, a '40 HOOKS' outline pill (count from hooks.manifest.json), a code window (#16181D body, #343A46 chrome) with an import snippet keyed in #61DAFB, and low-opacity #087EA4/#61DAFB hook-curl arcs at the edges. Palette source: colors.js at github.com/reactjs/react.dev (react.dev brand tokens: #087EA4, #23272F, #343A46, #16181D, #404756, #EBECF0, #F6F7F9, #99A1B3) and brandcolors.net for #61DAFB. All text >=4.5:1 on its background; #087EA4 used only decoratively. No React atom mark. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Copy the recolored assets/ set (hookli-banner.svg/.png, hookli-icon.svg) into apps/docs/public/ so the docs serve the same React-palette brand (#61DAFB / #087EA4 / #23272F, sourced from colors.js at github.com/reactjs/react.dev and brandcolors.net). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Swap the Prussian/Scooter brand tokens in apps/docs/app/globals.css for the verified react.dev palette (colors.js, github.com/reactjs/react.dev): - ground/raised/overlay -> gray-90 #23272F / gray-80 #343A46 / gray-95 #16181D - accent -> #61DAFB (classic React cyan, text-grade: 9.22:1 on ground) - brand -> #087EA4 (react.dev brand teal, large decorative only — 3.23:1 fails AA for text; token is currently unreferenced by components) - slate-syntax -> gray-70 #404756, now strictly border/chrome grade - gray-body -> gray-20 #BCC1CD (gray-30 #99A1B3 is only 4.4:1 on the new raised surface, so muted text moves one verified ramp step up) - fg -> gray-5 #F6F7F9 (react.dev primary-dark) Because slate-syntax is border-grade on the new ramp, its ~30 text-grade usages (demo hints, kbd chips, palette footer, eyebrow labels, shiki comments, line-number gutter) repoint to the muted text token; the two dark-mode demos keep slate text on their light panels (8.9:1 there). The .surface hairline runs at full slate strength since gray-70 neighbours gray-80. All text-bearing pairs verified >= 4.5:1 (lowest 6.33:1). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…t palette - lib/og.tsx OG_COLORS now mirror the v4 @theme tokens (ground #23272f, accent #61dafb, muted #bcc1cd, fg #f6f7f9); drop the non-text-grade slate entry — OG footers use the muted gray instead - layout.tsx themeColor #04191f -> #23272f (matches --color-ground) - toggle/step off-tracks and the landing meta dot were near-invisible on the new darks (bg-slate-syntax at /50-/60 ~ 1.1-1.9:1); repoint to bg-gray-body/40 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- AGENTS.md brand section + DESIGN.md token table now document the react.dev colors.js values with contrast notes: #61DAFB text-grade (9.22:1 on #23272F), #087EA4 decorative only (3.23:1, fails AA), body #F6F7F9, muted #BCC1CD, slate #404756 chrome-only - retire the Prussian/Scooter (v3) references in apps/docs/README.md, the wordmark comment, and the gen-readme badge-color comment Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…er count note, brand font alignment - WARN-1: comment the light-panel text-slate-syntax exception at both dark-mode demo call sites; carve-out documented in AGENTS.md + DESIGN.md so a mechanical token sweep doesn't blank those panels - WARN-2: DESIGN.md border rule now describes the real two-tier system — full-strength slate-syntax for .surface card outlines, slate-syntax/40 for intentionally faint decorative hairlines - NIT-1: banner SVGs (public/ + assets/) carry an XML note that the "40 HOOKS" count is baked in from packages/hookli/hooks.manifest.json; DESIGN.md says to regenerate on count change - NIT-2: banner sans stacks lead with brand font Plus Jakarta Sans (latin 500/600/700 embedded as data-URI woff2, ~48KB added), PNGs re-rendered at 2x (2400x800); assets/ and public/ copies identical Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
ECC bundle files are already tracked in this repository. Skipping generation of another bundle PR. |
|
Warning Review limit reached
Next review available in: 50 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: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughThe PR updates the documentation and README visual system from Brand v3 to Brand v4, including color tokens, palette guidance, OpenGraph assets, shared UI styling, demo styling, viewport color, wordmark references, and badge color parameters. Functional logic and public interfaces remain unchanged. ChangesBrand v4 visual refresh
Estimated code review effort: 2 (Simple) | ~10 minutes 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 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 |
…rders The React-palette rebrand read flat: ground gray-90 and raised gray-80 sat in a narrow mid-gray band and alpha-faded borders vanished on the ramp. All hexes stay in Meta's official react.dev colors.js scale. - Re-tier surfaces: ground #16181D (gray-95, page + inset wells) -> raised #23272F (gray-90, cards) -> overlay #343A46 (gray-80, hover/nested). ground-overlay consumers audited: both (search palette active row, support hover wash) now correctly read as lifted states. - Insets cut to ground: code-pane + HookDemo Code tab get bg-ground; InstallCommand and the docs-index import chip become bordered wells. - Borders: single solid rule, two roles. Structural chrome = full border-slate-syntax (gray-70); all /20 /40 /50 /60 hairlines swept. Interactive outlines = new --color-gray-outline #99A1B3 (gray-30, >=3:1 non-text on every surface: 5.78:1 raised, 4.40:1 overlay), with hover:border-gray-body and border-accent when pressed/active. - Step chips + support icon tiles: ring-accent/20 -> solid ring-accent. - themeColor follows the new ground (#16181D); og.tsx left standalone. - Docs updated: DESIGN.md token table + border rules, AGENTS.md brand section, globals.css tier-semantics comments. Contrast (WCAG): fg 16.6/14.0/10.7, gray-body 9.9/8.3/6.3, accent 10.9/9.2/7.0 on ground/raised/overlay — all text pairs >=4.5:1. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Contributor
|
ECC bundle files are already tracked in this repository. Skipping generation of another bundle PR. |
… sync notes WARN-A: convert the 9 missed alpha-faded call sites to the solid system (ring-accent tiles in feature-card/support-section, web-apis chip border — was 2.7:1, now 10.9:1 — six demo state chips, copy-button hover wash → bg-ground-overlay). WARN-B: og.tsx + DESIGN.md now record the intentional gray-90 asset/OG hold vs the gray-95 site ground. NIT-A: row dividers get their own quiet solid tier (border-ground-overlay) so they never carry frame weight; DESIGN.md border rule now documents three roles. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Contributor
|
ECC bundle files are already tracked in this repository. Skipping generation of another bundle PR. |
…ned borders Refine the React palette into a cool near-black premium-dark ramp: - ground #0a0d12 / raised #10151d / overlay #151c27 (~6% steps); fg pure white, gray-body #9ba8b8, accent #61dafb unchanged. - new tokens: accent-hover #7ce2ff, divider #242d3a (quiet row rules). - gray-outline retiered to #697586, slate-syntax (frame edge) to #354355. - repoint quiet row dividers border-ground-overlay → border-divider (overlay is now a surface fill tone, ~1.07:1 as a border); leave bg washes. - bump .surface/.surface-lift top-highlight (6→8% / 9→11%) so cards read on the darker ground (elevation from edge+highlight, not fill). - hook-card link title hover → accent-hover; themeColor → #0a0d12. - OG/apple-icon keep a slight lift (#10151d / #151c27) for embed legibility. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- icon tile → lifted chip #151c27 with a 1px inner top-edge highlight (white @8%); hook geometry + white state dot unchanged (#61dafb on #151c27 ≈ 10.5:1). - banner rebuilt: ground #0a0d12 + subtle radial cyan glow, code window on #10151d with #354355 frame + #151c27 titlebar, gray-body subtitle/code punctuation, pure-white heading. Hook count (40) read from hooks.manifest.json, embedded Plus Jakarta Sans woff2 preserved. - PNG re-rendered at 2400×800 via headless Chrome (dpr 2). Mirrored to public/. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Badge background hex 23272F → 0A0D12 (near-black base) and the license badge 404756 → 354355 (new slate-syntax); accent pill stays 61DAFB. Hex lives in README.md (regen only rewrites the count prefix), so re-ran `pnpm --filter hookli gen:manifest` — count stays manifest-driven (40), root README mirror refreshed. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Update DESIGN.md §1/§8 and the AGENTS.md brand section to the new values: the cool near-black ramp, "elevation from edge + 1px highlight + ambient shadow, not fill", and the three border roles — frame (slate-syntax), quiet divider, interactive (gray-outline) — plus accent-hover. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Contributor
|
ECC bundle files are already tracked in this repository. Skipping generation of another bundle PR. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/docs/components/demos/use-dark-mode-demo.tsx (1)
61-64: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick winUse a text token for the light panel.
slate-syntaxis documented inapps/docs/app/globals.cssas a frame border token, “NOT text.” Usetext-groundhere instead; it already provides the required contrast on the light panel without violating the palette contract.Proposed fix
- {/* light-panel exception: slate-syntax is text-grade on slate-50 (~9:1); gray-body would be ~1.7:1 */} + {/* light-panel exception: ground provides sufficient contrast on slate-50 */} <p className={`mt-2 text-xs ${ - dark ? "text-gray-body" : "text-slate-syntax" + dark ? "text-gray-body" : "text-ground" }`}As per coding guidelines, documentation components must follow the Premium Dark theme-token contract.
🤖 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 `@apps/docs/components/demos/use-dark-mode-demo.tsx` around lines 61 - 64, Update the light-mode branch in the className within the dark-mode demo paragraph to use the text-ground token instead of slate-syntax. Preserve the existing dark-mode text-gray-body styling and remove the outdated exception comment that treats the frame-border token as valid text.Source: Coding guidelines
🤖 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 `@apps/docs/components/api-table.tsx`:
- Line 46: Update the table row className in the API table component to replace
the border-slate-syntax utility with border-divider, while preserving the
existing alignment and last-row border behavior.
---
Outside diff comments:
In `@apps/docs/components/demos/use-dark-mode-demo.tsx`:
- Around line 61-64: Update the light-mode branch in the className within the
dark-mode demo paragraph to use the text-ground token instead of slate-syntax.
Preserve the existing dark-mode text-gray-body styling and remove the outdated
exception comment that treats the frame-border token as valid text.
🪄 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: defaults
Review profile: CHILL
Plan: Pro
Run ID: edcafb17-d9ef-459f-83d3-b23e14cbebc9
⛔ Files ignored due to path filters (6)
apps/docs/public/hookli-banner.pngis excluded by!**/*.pngapps/docs/public/hookli-banner.svgis excluded by!**/*.svgapps/docs/public/hookli-icon.svgis excluded by!**/*.svgassets/hookli-banner.pngis excluded by!**/*.pngassets/hookli-banner.svgis excluded by!**/*.svgassets/hookli-icon.svgis excluded by!**/*.svg
📒 Files selected for processing (50)
README.mdapps/docs/AGENTS.mdapps/docs/app/apple-icon.tsxapps/docs/app/docs/page.tsxapps/docs/app/globals.cssapps/docs/app/layout.tsxapps/docs/app/page.tsxapps/docs/app/support/page.tsxapps/docs/components/api-table.tsxapps/docs/components/bottom-cta-section.tsxapps/docs/components/code-block.tsxapps/docs/components/copy-button.tsxapps/docs/components/demo-error-boundary.tsxapps/docs/components/demos/ui.tsxapps/docs/components/demos/use-click-any-where-demo.tsxapps/docs/components/demos/use-click-outside-demo.tsxapps/docs/components/demos/use-dark-mode-demo.tsxapps/docs/components/demos/use-event-listener-demo.tsxapps/docs/components/demos/use-form-demo.tsxapps/docs/components/demos/use-hover-demo.tsxapps/docs/components/demos/use-infinite-scroll-demo.tsxapps/docs/components/demos/use-intersection-observer-demo.tsxapps/docs/components/demos/use-is-client-demo.tsxapps/docs/components/demos/use-is-mounted-demo.tsxapps/docs/components/demos/use-isomorphic-layout-effect-demo.tsxapps/docs/components/demos/use-local-storage-with-expiry-demo.tsxapps/docs/components/demos/use-map-demo.tsxapps/docs/components/demos/use-mouse-position-demo.tsxapps/docs/components/demos/use-resize-observer-demo.tsxapps/docs/components/demos/use-scroll-lock-demo.tsxapps/docs/components/demos/use-ternary-dark-mode-demo.tsxapps/docs/components/demos/use-timeout-demo.tsxapps/docs/components/demos/use-toggle-demo.tsxapps/docs/components/demos/use-unmount-demo.tsxapps/docs/components/feature-card.tsxapps/docs/components/footer.tsxapps/docs/components/header.tsxapps/docs/components/hook-card.tsxapps/docs/components/hook-demo.tsxapps/docs/components/hook-page.tsxapps/docs/components/install-command.tsxapps/docs/components/live-proof-section.tsxapps/docs/components/on-this-page.tsxapps/docs/components/search-palette.tsxapps/docs/components/sidebar.tsxapps/docs/components/support-section.tsxapps/docs/docs/DESIGN.mdapps/docs/lib/og.tsxapps/docs/lib/web-apis.tsxpackages/hookli/README.md
🚧 Files skipped from review as they are similar to previous changes (14)
- README.md
- apps/docs/components/demos/use-infinite-scroll-demo.tsx
- apps/docs/components/demos/use-click-outside-demo.tsx
- apps/docs/components/demos/use-mouse-position-demo.tsx
- apps/docs/app/page.tsx
- apps/docs/components/demos/use-local-storage-with-expiry-demo.tsx
- apps/docs/components/demos/ui.tsx
- apps/docs/components/code-block.tsx
- apps/docs/components/search-palette.tsx
- apps/docs/components/demos/use-intersection-observer-demo.tsx
- apps/docs/components/demos/use-ternary-dark-mode-demo.tsx
- apps/docs/components/demos/use-toggle-demo.tsx
- apps/docs/components/sidebar.tsx
- packages/hookli/README.md
| <tr | ||
| key={row.name} | ||
| className="border-b border-slate-syntax/40 align-top last:border-b-0" | ||
| className="border-b border-slate-syntax align-top last:border-b-0" |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Use the table divider token for body rows.
slate-syntax is defined as the solid frame edge, while dense table rows should use the quieter divider role. Replace border-slate-syntax with border-divider here to preserve the intended visual hierarchy.
🤖 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 `@apps/docs/components/api-table.tsx` at line 46, Update the table row
className in the API table component to replace the border-slate-syntax utility
with border-divider, while preserving the existing alignment and last-row border
behavior.
…le consistency) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Contributor
|
ECC bundle files are already tracked in this repository. Skipping generation of another bundle PR. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Full-React rebrand, synced everywhere. Colors were verified against Meta's own `colors.js` in reactjs/react.dev before applying — which caught that the modern brand teal is `#087EA4`, not the commonly-cited `#0A7EA4`.
Verified palette
What changed (7 commits, each gate-green via the scoped `ralph/check.sh`)
After merge
🤖 Generated with Claude Code
Summary by CodeRabbit
Style
Documentation