Align brand tokens with deployed visual identity#22
Open
chitcommit wants to merge 1 commit intomainfrom
Open
Conversation
- Colors: swap generic slate/blue for indigo/violet palette (#6366F1→#8B5CF6) - Dark theme: deep navy (#0F0F1A) background, light violet foreground - Fonts: Syne (display), Figtree (body), JetBrains Mono (code) - Add display font to BrandTheme interface and CSS variable output - Add LOGO_MARK_SVG and LOGO_WORDMARK_SVG inline exports - Update BRAND_CONFIG tagline to match Foundation messaging - Update Tailwind config generator with chitty-display font family - Fix focus ring color to match indigo accent Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
📝 WalkthroughWalkthroughBrand theme configuration updated in a single file: font stack extended with a Changes
Estimated Code Review Effort🎯 2 (Simple) | ⏱️ ~12 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 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: 1
🧹 Nitpick comments (1)
src/brand/index.ts (1)
238-238: Use token-aligned focus ring color to avoid drift.Line 238 hard-codes
rgb(99 102 241 / 0.2), while Line 237 already usesvar(--chitty-accent). Keeping both aligned prevents visual mismatch when tokens evolve.Minimal token-aligned fix
- box-shadow: 0 0 0 2px rgb(99 102 241 / 0.2); + box-shadow: 0 0 0 2px rgb(139 92 246 / 0.2);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/brand/index.ts` at line 238, Replace the hard-coded focus ring color "rgb(99 102 241 / 0.2)" with the token-aligned accent variable used nearby (var(--chitty-accent)) so the focus ring tracks the token; update the box-shadow declaration (the one currently set to "box-shadow: 0 0 0 2px rgb(99 102 241 / 0.2);") to derive a 0.2 alpha version of the token (for example via color-mix(in srgb, var(--chitty-accent) 20%, transparent) or rgba(var(--chitty-accent-rgb), 0.2) depending on available token shapes) so the focus ring and the var(--chitty-accent) definition remain consistent as tokens change.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/brand/index.ts`:
- Around line 119-123: BRAND_CONFIG.logo rename from icon/svg to mark/wordmark
is a breaking change; restore backward compatibility by adding aliases on the
logo object so consumers using logo.icon or logo.svg still work (e.g., set
logo.icon = LOGO_MARK_SVG and logo.svg = LOGO_WORDMARK_SVG or map them to the
new properties at initialization), and add a comment marking the aliases as
deprecated for removal in the next major; update any construction code that
creates the logo object (refer to BRAND_CONFIG.logo, LOGO_MARK_SVG,
LOGO_WORDMARK_SVG) to include these aliases.
---
Nitpick comments:
In `@src/brand/index.ts`:
- Line 238: Replace the hard-coded focus ring color "rgb(99 102 241 / 0.2)" with
the token-aligned accent variable used nearby (var(--chitty-accent)) so the
focus ring tracks the token; update the box-shadow declaration (the one
currently set to "box-shadow: 0 0 0 2px rgb(99 102 241 / 0.2);") to derive a 0.2
alpha version of the token (for example via color-mix(in srgb,
var(--chitty-accent) 20%, transparent) or rgba(var(--chitty-accent-rgb), 0.2)
depending on available token shapes) so the focus ring and the
var(--chitty-accent) definition remain consistent as tokens change.
Comment on lines
119
to
123
| logo: { | ||
| text: 'ChittyOS', | ||
| icon: '⚡', | ||
| svg: null as string | null | ||
| mark: LOGO_MARK_SVG, | ||
| wordmark: LOGO_WORDMARK_SVG, | ||
| }, |
There was a problem hiding this comment.
BRAND_CONFIG.logo key rename is a breaking API change.
Line 121–122 replaces icon/svg with mark/wordmark without backward-compat aliases. Any existing consumer reading BRAND_CONFIG.logo.icon or .svg will break at runtime.
Proposed compatibility bridge (deprecate in next major)
logo: {
text: 'ChittyOS',
mark: LOGO_MARK_SVG,
wordmark: LOGO_WORDMARK_SVG,
+ // Backward compatibility for existing consumers (deprecated)
+ icon: LOGO_MARK_SVG,
+ svg: LOGO_WORDMARK_SVG,
},📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| logo: { | |
| text: 'ChittyOS', | |
| icon: '⚡', | |
| svg: null as string | null | |
| mark: LOGO_MARK_SVG, | |
| wordmark: LOGO_WORDMARK_SVG, | |
| }, | |
| logo: { | |
| text: 'ChittyOS', | |
| mark: LOGO_MARK_SVG, | |
| wordmark: LOGO_WORDMARK_SVG, | |
| // Backward compatibility for existing consumers (deprecated) | |
| icon: LOGO_MARK_SVG, | |
| svg: LOGO_WORDMARK_SVG, | |
| }, |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/brand/index.ts` around lines 119 - 123, BRAND_CONFIG.logo rename from
icon/svg to mark/wordmark is a breaking change; restore backward compatibility
by adding aliases on the logo object so consumers using logo.icon or logo.svg
still work (e.g., set logo.icon = LOGO_MARK_SVG and logo.svg = LOGO_WORDMARK_SVG
or map them to the new properties at initialization), and add a comment marking
the aliases as deprecated for removal in the next major; update any construction
code that creates the logo object (refer to BRAND_CONFIG.logo, LOGO_MARK_SVG,
LOGO_WORDMARK_SVG) to include these aliases.
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.
Summary
#6366F1→#8B5CF6) used across deployed ChittyOS UIsLOGO_MARK_SVG,LOGO_WORDMARK_SVG)displayfont toBrandThemeinterface, CSS variables, and Tailwind configContext
Brand tokens in
@chittyos/corewere generic Tailwind defaults that didn't match any deployed service. The canonical brand is now defined inchittycorp/chittybrand— this PR aligns the programmatic tokens with those assets.Test plan
npm run buildpasses with updated typesgetCSSVariables('dark')outputs--chitty-background: #0F0F1AgenerateTailwindConfig()includeschitty-displayfont family🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
Style