Skip to content

[codex] adopt balanced Bellhook identity - #130

Merged
Un3qual merged 7 commits into
mainfrom
codex/adopt-balanced-bellhook-logo
Aug 12, 2026
Merged

[codex] adopt balanced Bellhook identity#130
Un3qual merged 7 commits into
mainfrom
codex/adopt-balanced-bellhook-logo

Conversation

@Un3qual

@Un3qual Un3qual commented Aug 10, 2026

Copy link
Copy Markdown
Owner

User description

Summary

  • replace every production Jazz logo surface with the approved balanced wide-bold Bellhook geometry
  • keep the saxophone J and custom JAZZ lettering optically matched across light and dark wordmarks
  • update the navbar, favicon, social preview, homepage mark, and VS Code icon, with deterministic raster regeneration
  • add structural brand tests that reject the legacy geometry and lock the approved centerline, stroke ratio, gradient, and letter paths
  • keep exploratory option sheets and logo-specific design/planning docs out of the final branch

Verification

  • pnpm --dir website run test:brand — 9/9 passing
  • pnpm --dir website run test:experience — 15/15 passing
  • pnpm --dir website run check — typecheck and production build passing
  • xmllint --noout across all six production SVG surfaces
  • structural audit confirms no legacy logo geometry or exploratory logo paths remain
  • nix --extra-experimental-features 'nix-command flakes' develop --command cabal test all -j1 -v0 --test-show-details=failures — exit 0

Summary by cubic

Adopts the balanced wide‑bold Bellhook identity across the website and editor and updates CI policy checks to allow SHA bumps for approved actions while still requiring immutable pins. The navbar switches from an icon plus title to a 120×48 wordmark with alt "Jazz"; the homepage brand mark now preserves its intrinsic aspect ratio at all breakpoints.

Highlights

  • Replaces all production assets with the Bellhook mark/wordmark, favicon.svg, social-card.svg/.png, and the editors/vscode-jazz icon; updates brass gradient stops to #FFE66A/#FFC43D/#F47A32 and ink/paper to #24182C/#F3EDDF.
  • Updates navbar to jazz-wordmark.svg/jazz-wordmark-dark.svg, removes the title and .jazzNavbarTitle, and sizes the logo via a .navbar__logo wrapper with a 5:2 aspect ratio; images fill the wrapper.
  • Preserves homepage brand mark proportions by setting .brandMark height to auto; experience tests lock the intrinsic ratio and navbar logo contract.
  • Tightens brand tests: enforce the Bellhook centerline and stroke ratios, approved gradient stops, no filters/masks, and a single data-role="wordmark" group with exactly four approved letter paths; assert pixel‑exact renders at 1200×480 and 1200×630.
  • CI policy: check-ci-policy.py and the docs‑pages workflow checker now allowlist actions by name (actions/checkout, actions/setup-node, pnpm/action-setup, actions/cache, actions/upload-artifact, cachix/install-nix-action, dorny/paths-filter) and still require immutable commit SHAs; tests accept SHA updates without policy changes.
  • Tooling: sets website typescript to 6.0.2 and updates the lockfile.

Migration

  • Remove any overrides or styles that depend on the navbar title or .jazzNavbarTitle, and do not override .brandMark height. Use the configured wordmark logo.

Written for commit d957161. Summary will update on new commits.

Review in cubic

Summary by CodeRabbit

  • Style

    • Updated the website navbar with a wider Jazz wordmark logo and improved responsive sizing.
    • Added accessible alternative text and refined light/dark logo asset usage.
    • Improved homepage brand-mark sizing and aspect-ratio preservation across screen sizes.
  • Documentation

    • Updated brand guidelines covering logo geometry, colors, gradients, and asset variants.
  • Tests

    • Added validation for logo assets, dimensions, colors, lettering, and responsive presentation.

CodeAnt-AI Description

Adopt the balanced Bellhook wordmark in the website navigation

What Changed

  • The navbar now displays the full Jazz wordmark instead of a standalone mark with separate “Jazz” text.
  • Light and dark themes use matching wordmark artwork with descriptive alternative text and sizing suited to the wider logo.
  • Brand checks now verify the approved Bellhook geometry, colors, lettering, dimensions, and visible rendering across production logo assets.
  • Brand guidance documents the updated mark, wordmark, colors, and asset usage.

Impact

✅ Consistent Jazz wordmark across navigation themes
✅ Clearer logo identification in the navbar
✅ Fewer accidental brand asset regressions

💡 Usage Guide

Checking Your Pull Request

Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.

Talking to CodeAnt AI

Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:

@codeant-ai ask: Your question here

This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.

Example

@codeant-ai ask: Can you suggest a safer alternative to storing this secret?

Preserve Org Learnings with CodeAnt

You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:

@codeant-ai: Your feedback here

This helps CodeAnt AI learn and adapt to your team's coding style and standards.

Example

@codeant-ai: Do not flag unused imports.

Retrigger review

Ask CodeAnt AI to review the PR again, by typing:

@codeant-ai: review

Check Your Repository Health

To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.

@codeant-ai

codeant-ai Bot commented Aug 10, 2026

Copy link
Copy Markdown

🤖 CodeAnt AI — Review Status

Status Commit Started (UTC) Finished (UTC)
✅ Incremental review completed 22b4116 Aug 12, 2026 · 16:53 16:54
✅ Reviewed your PR dc7319b Aug 10, 2026 · 21:34 21:36

@codeant-ai

codeant-ai Bot commented Aug 10, 2026

Copy link
Copy Markdown

Thanks for using CodeAnt! 🎉

We're free for open-source projects. if you're enjoying it, help us grow by sharing.

Share on X ·
Reddit ·
LinkedIn

@codeant-ai codeant-ai Bot added the size:M This PR changes 30-99 lines, ignoring generated files label Aug 10, 2026
@coderabbitai

coderabbitai Bot commented Aug 10, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

📝 Walkthrough

Walkthrough

The website now uses Jazz wordmark assets with validated geometry, colors, accessibility text, and responsive sizing. CI policy checks now validate approved action identities separately from immutable 40-character commit revisions.

Changes

Website branding

Layer / File(s) Summary
Brand geometry and asset validation
website/scripts/test-brand-assets.mjs, website/static/img/brand/README.md
Brand documentation defines Jazz geometry, wordmark paths, gradient colors, stroke widths, and SVG restrictions. Tests validate wordmark structure, rendered output, vector assets, and prohibited SVG features.
Navbar wordmark integration
website/docusaurus.config.ts, website/src/css/custom.css, website/src/theme/Navbar/Logo/index.tsx, website/scripts/test-experience.mjs
The navbar uses light and dark Jazz wordmarks with "Jazz" alt text and 120×48 dimensions. CSS and the logo component render the wordmark at a 5:2 ratio.
Responsive branding and supporting setup
website/src/pages/index.module.css, website/package.json, website/static/img/brand/README.md
The homepage brand mark uses automatic height across breakpoints. Documentation uses website-relative renderer paths. The website TypeScript development dependency changes to version 6.0.2.

CI action policy

Layer / File(s) Summary
Approved action normalization
scripts/check-ci-policy.py
The policy checker replaces fixed action version and revision pairs with approved action identities. Approved immutable revisions normalize to @approved across workflow checks.
Docs Pages action validation
scripts/check-docs-pages-workflow.py
The validator stores action names separately from references. It requires non-local actions to use 40-character commit SHAs.
Action policy test coverage
scripts/test-check-ci-policy.py, scripts/test-docs-pages-workflow.py
Tests accept changed immutable revisions, update action diagnostics, add reusable action replacement, and cover valid immutable commits and dynamic upload-step lookup.

Estimated code review effort: 4 (Complex) | ~45 minutes

Possibly related PRs

  • Un3qual/jazz#123: Implements related Docusaurus branding and project-operations changes.
  • Un3qual/jazz#126: Introduces related branding files and navbar configuration.
  • Un3qual/jazz#127: Updates the same CI policy and Docs Pages workflow validators.
🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly and concisely describes the primary change: adopting the balanced Bellhook brand identity across Jazz surfaces.
✨ Finishing Touches 💡 1
📝 Generate docstrings 💡
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch codex/adopt-balanced-bellhook-logo

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@codacy-production

codacy-production Bot commented Aug 10, 2026

Copy link
Copy Markdown
Contributor

Not up to standards ⛔

🔴 Issues 1 minor

Alerts:
⚠ 1 issue (≤ 0 issues of at least minor severity)

Results:
1 new issue

Category Results
CodeStyle 1 minor

View in Codacy

🟢 Metrics 39 complexity · -2 duplication

Metric Results
Complexity 39
Duplication -2

View in Codacy

NEW Get contextual insights on your PRs based on Codacy's metrics, along with PR and Jira context, without leaving GitHub. Enable AI reviewer
TIP This summary will be updated as you push new changes.

Comment thread website/scripts/test-brand-assets.mjs Outdated

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

🤖 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 `@website/scripts/test-brand-assets.mjs`:
- Around line 57-80: Add an expected surface-color map keyed by asset name in
the test covering the vector logos, with `#24182C` for jazz-wordmark.svg and
`#F3EDDF` for jazz-wordmark-dark.svg. Within the loop, assert each asset source
contains its mapped ink color so swapped light/dark assets fail while preserving
the existing shared geometry and color checks.

In `@website/scripts/test-experience.mjs`:
- Around line 369-370: Update the navbar logo assertions in the configuration
test to scope matching to navbar.logo and verify the complete contract: both src
and srcDark assets plus alt set to Jazz, width 120, and height 48. Ensure
regressions in any of these properties cause the test to fail.

In `@website/static/img/brand/README.md`:
- Around line 10-19: Update the asset references in the brand README to use
repository-root paths, including website/static/img/jazz-mark.svg,
website/static/img/editors/vscode-jazz/icon.png, and
website/static/img/brand/social-card.svg or the corresponding root-relative
locations for every listed asset. Preserve the existing asset descriptions while
ensuring no reference resolves relative to the nested brand directory.
🪄 Autofix

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: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 5a4aca9a-747c-40b4-b6ed-2e8462659b8a

📥 Commits

Reviewing files that changed from the base of the PR and between d8613e4 and dc7319b.

⛔ Files ignored due to path filters (8)
  • editors/vscode-jazz/icon.png is excluded by !**/*.png
  • website/static/img/favicon.svg is excluded by !**/*.svg
  • website/static/img/jazz-mark-dark.svg is excluded by !**/*.svg
  • website/static/img/jazz-mark.svg is excluded by !**/*.svg
  • website/static/img/jazz-wordmark-dark.svg is excluded by !**/*.svg
  • website/static/img/jazz-wordmark.svg is excluded by !**/*.svg
  • website/static/img/social-card.png is excluded by !**/*.png
  • website/static/img/social-card.svg is excluded by !**/*.svg
📒 Files selected for processing (6)
  • website/docusaurus.config.ts
  • website/scripts/test-brand-assets.mjs
  • website/scripts/test-experience.mjs
  • website/src/css/custom.css
  • website/src/theme/Navbar/Logo/index.tsx
  • website/static/img/brand/README.md
💤 Files with no reviewable changes (1)
  • website/src/theme/Navbar/Logo/index.tsx

Comment thread website/scripts/test-brand-assets.mjs
Comment thread website/scripts/test-experience.mjs Outdated
Comment thread website/static/img/brand/README.md Outdated
@codeant-ai

codeant-ai Bot commented Aug 12, 2026

Copy link
Copy Markdown

Thanks for using CodeAnt! 🎉

We're free for open-source projects. if you're enjoying it, help us grow by sharing.

Share on X ·
Reddit ·
LinkedIn

@codeant-ai codeant-ai Bot added size:L This PR changes 100-499 lines, ignoring generated files and removed size:M This PR changes 30-99 lines, ignoring generated files labels Aug 12, 2026

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 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 `@website/scripts/test-brand-assets.mjs`:
- Around line 78-102: Update assertRenderedWordmark to validate the wordmark
group contains only approved path elements before accepting it. Reject any
non-path child elements such as circle or rect in contents, while preserving the
existing path count and approved-letter checks.
🪄 Autofix

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: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 53fe5d4c-131b-4a5c-8cf0-4df5ba4e530c

📥 Commits

Reviewing files that changed from the base of the PR and between dc7319b and 22b4116.

⛔ Files ignored due to path filters (1)
  • website/static/img/social-card.svg is excluded by !**/*.svg
📒 Files selected for processing (3)
  • website/scripts/test-brand-assets.mjs
  • website/scripts/test-experience.mjs
  • website/static/img/brand/README.md

Comment thread website/scripts/test-brand-assets.mjs Outdated

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: d71d621531

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread website/static/img/jazz-mark-dark.svg

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: a66fe9e0fa

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread website/src/css/custom.css

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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)
scripts/check-ci-policy.py (1)

477-536: 🩺 Stability & Availability | 🟠 Major | ⚡ Quick win

Reject dynamically evaluated shell commands.

eval 'cabal build all' and bash -c 'cabal build all' execute an unbounded Cabal command. Lines 477-536 mask the quoted payload. Lines 728-742 then find no target command. The policy accepts the script despite its required Cabal job bound.

Reject dynamic evaluators such as eval, ., source, bash -c, and sh -c in policy scripts. Add regression fixtures for these forms.

Also applies to: 728-742

🤖 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 `@scripts/check-ci-policy.py` around lines 477 - 536, Update
masked_unquoted_shell_text and the command-detection logic around the referenced
evaluator handling to preserve and inspect payloads passed to dynamic evaluators
instead of masking them as inert quoted text. Reject eval, ., source, bash -c,
and sh -c when they can execute shell text, ensuring embedded Cabal commands
remain subject to the required job-bound validation. Add regression fixtures
covering each evaluator form.
🤖 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 `@website/src/css/custom.css`:
- Around line 99-103: Update the navbar logo CSS selector from `.navbar__logo
img` to `.navbar__logo`, preserving the existing height, width, and object-fit
rules on the image that receives the class directly. Update the related test to
assert the active `.navbar__logo` selector.

---

Outside diff comments:
In `@scripts/check-ci-policy.py`:
- Around line 477-536: Update masked_unquoted_shell_text and the
command-detection logic around the referenced evaluator handling to preserve and
inspect payloads passed to dynamic evaluators instead of masking them as inert
quoted text. Reject eval, ., source, bash -c, and sh -c when they can execute
shell text, ensuring embedded Cabal commands remain subject to the required
job-bound validation. Add regression fixtures covering each evaluator form.
🪄 Autofix

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: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 63c2892e-b1e0-47d7-a1c5-ce76a2d88900

📥 Commits

Reviewing files that changed from the base of the PR and between 22b4116 and d957161.

⛔ Files ignored due to path filters (1)
  • website/pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (9)
  • scripts/check-ci-policy.py
  • scripts/check-docs-pages-workflow.py
  • scripts/test-check-ci-policy.py
  • scripts/test-docs-pages-workflow.py
  • website/package.json
  • website/scripts/test-brand-assets.mjs
  • website/scripts/test-experience.mjs
  • website/src/css/custom.css
  • website/src/pages/index.module.css

Comment on lines +99 to 103
.navbar__logo img {
height: 100%;
object-fit: contain;
width: 100%;
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

rg -n -C 6 'imageClassName="navbar__logo"|navbar__logo img' \
  website/src/theme/Navbar/Logo/index.tsx \
  website/src/css/custom.css \
  website/scripts/test-experience.mjs

Repository: Un3qual/jazz

Length of output: 2431


🏁 Script executed:

#!/bin/bash
set -euo pipefail

printf '%s\n' '--- Logo usage and local theme files ---'
rg -n -C 8 'imageClassName|function Logo|const Logo|<img|navbar__logo' \
  website/src website/package.json package.json 2>/dev/null || true

printf '%s\n' '--- Docusaurus dependencies and theme overrides ---'
rg -n -C 3 '`@docusaurus`|theme-classic|Logo' \
  website/package.json package.json website/src 2>/dev/null || true

printf '%s\n' '--- Relevant file outlines ---'
for f in website/src/theme/Navbar/Logo/index.tsx website/src/css/custom.css website/scripts/test-experience.mjs; do
  if [ -f "$f" ]; then
    printf '\n%s\n' "$f"
    wc -l "$f"
    ast-grep outline "$f" 2>/dev/null || true
  fi
done

Repository: Un3qual/jazz

Length of output: 8161


🌐 Web query:

Docusaurus 3.10.2 theme-classic Logo imageClassName implementation

💡 Result:

In Docusaurus 3.10.2, the navbar logo image class is configured directly within the docusaurus.config.js file under the themeConfig.navbar.logo object using the className property [1][2]. To implement a custom CSS class for your navbar logo, add the className field to the logo configuration object [1]: // docusaurus.config.js export default { themeConfig: { navbar: { logo: { alt: 'Site Logo', src: 'img/logo.svg', className: 'your-custom-css-class', // This applies the class to the element }, }, }, }; The className you provide is applied directly to the logo element within the rendered navbar [1][3]. This allows you to target the logo with custom CSS rules in your site's stylesheet (e.g., in your custom.css file) [4]. Note: The internal Docusaurus @theme/Logo component definition also includes props such as imageClassName and titleClassName [5], but for the standard navbar logo provided by theme-classic, the configuration interface via docusaurus.config.js is the intended and supported method for applying custom CSS classes [1][2].

Citations:


Target the navbar image with .navbar__logo.

imageClassName="navbar__logo" applies the class directly to <img>, so .navbar__logo img matches no element. Move object-fit: contain into .navbar__logo and update the test to check the active selector.

🧰 Tools
🪛 GitHub Check: Codacy Static Code Analysis

[notice] 99-99: website/src/css/custom.css#L99
(selector) => Expected class selector "${selector}" to be kebab-case (selector-class-pattern)

🤖 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 `@website/src/css/custom.css` around lines 99 - 103, Update the navbar logo CSS
selector from `.navbar__logo img` to `.navbar__logo`, preserving the existing
height, width, and object-fit rules on the image that receives the class
directly. Update the related test to assert the active `.navbar__logo` selector.

@Un3qual
Un3qual merged commit dd4f04d into main Aug 12, 2026
9 of 10 checks passed
@Un3qual
Un3qual deleted the codex/adopt-balanced-bellhook-logo branch August 12, 2026 19:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:L This PR changes 100-499 lines, ignoring generated files

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant