feat(web): align visual design between docs and marketing apps#124
Merged
Conversation
Contributor
|
Warning Rate limit exceeded
⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughAdds a new shared CSS tokens package and exposes Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~30 minutes 🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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 |
Contributor
✅ Contributor ReportUser: @yacosta738
Contributor Report evaluates based on public GitHub activity. Analysis period: 2025-03-03 to 2026-03-03 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (2)
clients/web/apps/marketing/src/styles/global.css (2)
147-150: Prefer shared tokens over raw brand literals to prevent drift.At Line 147-Line 150, hardcoded gradient colors bypass the centralized token system. Consider moving this gradient into
clients/web/packages/shared/tokens.cssand referencing a token here for consistency across apps.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@clients/web/apps/marketing/src/styles/global.css` around lines 147 - 150, Replace the hardcoded gradient in global.css with a shared token: add a descriptive CSS custom property (e.g. --brand-gradient or individual stop tokens like --brand-100, --brand-400, --brand-700) into clients/web/packages/shared/tokens.css, export or document that token, and then update the rules in clients/web/apps/marketing/src/styles/global.css (the block using linear-gradient, -webkit-background-clip, -webkit-text-fill-color, background-clip) to reference the new token via var(--brand-gradient) or composing the gradient from the stop tokens instead of raw hex literals so all apps consume the centralized brand values.
1-7: Add visual regression coverage for this cross-app design migration.This file carries broad UI/token changes; please add or update visual regression tests for critical surfaces (hero, nav, cards, CTA/footer) to catch token/theming regressions early.
As per coding guidelines, "Testing: Verify that tests cover critical paths and follow established naming conventions (e.g., backticks for Kotlin tests)."
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@clients/web/apps/marketing/src/styles/global.css` around lines 1 - 7, global.css introduces broad token/theme changes that need visual regression coverage; add/update storybook/regression tests to cover critical surfaces (hero, nav, card, CTA/footer) that consume `@corvus/shared` tokens so token breaks are caught. Create visual snapshots for components/pages that import global.css (e.g., Hero component stories, Nav bar, Card variants, Footer/CTA) and add CI assertions against baseline images; name tests following the repository's visual-test naming conventions and place them alongside the related component stories or e2e visual tests to ensure they run in the existing pipeline. Ensure tests load the same global.css (or import `@corvus/shared/tokens.css`) so snapshots reflect the migrated tokens and update baselines if the changes are intentional.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@clients/web/apps/docs/src/styles/custom.css`:
- Line 7: Replace the deep relative import
"../../../../packages/shared/tokens.css" in custom.css with the package-alias
export (e.g., import from "@corvus/shared/tokens.css") so the docs styling
consumes the shared tokens via the package contract rather than repo-relative
path; update the `@import` statement in
clients/web/apps/docs/src/styles/custom.css (the line containing
"../../../../packages/shared/tokens.css") to use the package alias and ensure
the package is exported/added to the build resolver if needed.
In `@clients/web/apps/marketing/src/layouts/MarketingLayout.astro`:
- Around line 16-19: The canonical URL code uses a hardcoded localhost fallback
which can produce bad metadata; remove the "http://localhost:9988" fallback and
instead only build canonical when Astro.site is defined: check Astro.site (and
Astro.url.pathname) and if present compute canonical with new
URL(Astro.url.pathname, Astro.site).toString(), otherwise skip setting
canonical/og:url (or return undefined) so the app relies on the configured site
from astro.config.mjs; update the code that references canonical to handle the
missing value safely.
In `@clients/web/apps/marketing/src/pages/index.astro`:
- Line 158: Update the anchor(s) that currently use href="/install" to use the
in-page anchor href="#install" so they target the install command card on the
current page; specifically find the <a class="btn btn-primary" ...> elements
with href="/install" and change their href value to "#install" to match the
other in-page links and avoid linking to a non-existent /install route.
In `@clients/web/apps/marketing/src/styles/global.css`:
- Line 6: The CSS uses a deep relative import "@import
"../../../../packages/shared/tokens.css";" which is brittle; replace that with
the package-level token export (import tokens from the shared package alias like
"shared/tokens.css" or your org-scoped package alias) so the module boundary is
respected; update the import in global.css to reference the shared package alias
and, if necessary, adjust your build/alias config so the package-level path
resolves.
---
Nitpick comments:
In `@clients/web/apps/marketing/src/styles/global.css`:
- Around line 147-150: Replace the hardcoded gradient in global.css with a
shared token: add a descriptive CSS custom property (e.g. --brand-gradient or
individual stop tokens like --brand-100, --brand-400, --brand-700) into
clients/web/packages/shared/tokens.css, export or document that token, and then
update the rules in clients/web/apps/marketing/src/styles/global.css (the block
using linear-gradient, -webkit-background-clip, -webkit-text-fill-color,
background-clip) to reference the new token via var(--brand-gradient) or
composing the gradient from the stop tokens instead of raw hex literals so all
apps consume the centralized brand values.
- Around line 1-7: global.css introduces broad token/theme changes that need
visual regression coverage; add/update storybook/regression tests to cover
critical surfaces (hero, nav, card, CTA/footer) that consume `@corvus/shared`
tokens so token breaks are caught. Create visual snapshots for components/pages
that import global.css (e.g., Hero component stories, Nav bar, Card variants,
Footer/CTA) and add CI assertions against baseline images; name tests following
the repository's visual-test naming conventions and place them alongside the
related component stories or e2e visual tests to ensure they run in the existing
pipeline. Ensure tests load the same global.css (or import
`@corvus/shared/tokens.css`) so snapshots reflect the migrated tokens and update
baselines if the changes are intentional.
ℹ️ Review info
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (5)
clients/web/apps/docs/src/styles/custom.cssclients/web/apps/marketing/src/layouts/MarketingLayout.astroclients/web/apps/marketing/src/pages/index.astroclients/web/apps/marketing/src/styles/global.cssclients/web/packages/shared/tokens.css
…ate styling across web applications.
Deploying corvus with
|
| Latest commit: |
75103e8
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://633c6413.corvus-42x.pages.dev |
| Branch Preview URL: | https://website.corvus-42x.pages.dev |
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
clients/web/apps/marketing/src/styles/global.css (1)
417-419: Consider tokenizing the testimonial text color for full consistency.
#d7ebfeis the remaining hardcoded color in an otherwise token-driven file; moving it to a--corvus-*token will keep the theme surface centralized.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@clients/web/apps/marketing/src/styles/global.css` around lines 417 - 419, The .testimonial-card p rule uses a hardcoded color `#d7ebfe`; replace this with a CSS variable (e.g. --corvus-testimonial-text or an existing --corvus-* token) and update the declaration in :root (or the theme token file) so the color is centralized; change the selector .testimonial-card p to use color: var(--corvus-testimonial-text) and add the corresponding --corvus-testimonial-text: `#d7ebfe`; to the token definitions to keep theming consistent.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@clients/web/packages/shared/tokens.css`:
- Around line 7-16: Replace the `@import` url(...) line with the quoted syntax
`@import` "https://fonts.googleapis.com/..." so it complies with the stylelint
import-notation rule; keep the rest of the rule-set intact (the font-family
declarations used for --corvus-font-sans and --corvus-font-mono remain unchanged
and the unquoted font names like BlinkMacSystemFont, SFMono-Regular, and
Consolas should stay unquoted).
---
Nitpick comments:
In `@clients/web/apps/marketing/src/styles/global.css`:
- Around line 417-419: The .testimonial-card p rule uses a hardcoded color
`#d7ebfe`; replace this with a CSS variable (e.g. --corvus-testimonial-text or an
existing --corvus-* token) and update the declaration in :root (or the theme
token file) so the color is centralized; change the selector .testimonial-card p
to use color: var(--corvus-testimonial-text) and add the corresponding
--corvus-testimonial-text: `#d7ebfe`; to the token definitions to keep theming
consistent.
ℹ️ Review info
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (4)
assets/corvus-base.pngis excluded by!**/*.pngassets/corvus-base.svgis excluded by!**/*.svgassets/corvus-log.svgis excluded by!**/*.svgclients/web/pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml,!**/pnpm-lock.yaml
📒 Files selected for processing (7)
clients/web/apps/docs/package.jsonclients/web/apps/docs/src/styles/custom.cssclients/web/apps/marketing/src/layouts/MarketingLayout.astroclients/web/apps/marketing/src/pages/index.astroclients/web/apps/marketing/src/styles/global.cssclients/web/packages/shared/package.jsonclients/web/packages/shared/tokens.css
🚧 Files skipped from review as they are similar to previous changes (3)
- clients/web/apps/marketing/src/pages/index.astro
- clients/web/apps/marketing/src/layouts/MarketingLayout.astro
- clients/web/apps/docs/src/styles/custom.css
…tation - Replace @import url() with quoted string syntax in tokens.css for stylelint - Add --corvus-testimonial-text token for centralized theming - Update .testimonial-card p to use CSS variable instead of hardcoded color
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
clients/web/apps/marketing/src/styles/global.css (1)
169-207: Add aprefers-reduced-motion: reduceoverride for transition/transform-heavy interactions.You already gate keyframes and view transitions well; extending that to hover transitions/transforms would complete the a11y story.
♻️ Proposed patch
+@media (prefers-reduced-motion: reduce) { + .btn, + .copy-btn, + nav a, + .inline-link, + .back-link, + .metric-grid article, + .feature-card, + .testimonial-card, + .footer a { + transition: none; + } + + .btn-primary:hover, + .btn-ghost:hover, + .metric-grid article:hover, + .feature-card:hover, + .testimonial-card:hover { + transform: none; + } +}Also applies to: 263-275, 338-415, 472-475, 535-560
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@clients/web/apps/marketing/src/styles/global.css` around lines 169 - 207, The hover transitions and transforms on .btn, .btn-primary, .btn-ghost (and their :hover states) lack a prefers-reduced-motion override; add a media query for (prefers-reduced-motion: reduce) that sets transition: none and transform: none (and removes heavy box-shadow changes if desired) for .btn, .btn-primary, .btn-ghost, .btn-primary:hover and .btn-ghost:hover so users who request reduced motion won’t experience translations or animated transitions; apply the same override to the other affected blocks noted in the comment.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@clients/web/apps/marketing/src/styles/global.css`:
- Around line 169-207: The hover transitions and transforms on .btn,
.btn-primary, .btn-ghost (and their :hover states) lack a prefers-reduced-motion
override; add a media query for (prefers-reduced-motion: reduce) that sets
transition: none and transform: none (and removes heavy box-shadow changes if
desired) for .btn, .btn-primary, .btn-ghost, .btn-primary:hover and
.btn-ghost:hover so users who request reduced motion won’t experience
translations or animated transitions; apply the same override to the other
affected blocks noted in the comment.
ℹ️ Review info
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
clients/web/apps/marketing/src/styles/global.cssclients/web/packages/shared/tokens.css
- Disable transitions on .btn, .btn-primary, .btn-ghost - Disable transforms on hover states for users with reduced motion preferences
|
This was referenced Mar 7, 2026
Merged
This was referenced Mar 28, 2026
Merged
This was referenced Apr 9, 2026
Merged
Merged
Merged
This was referenced Apr 19, 2026
This was referenced Apr 29, 2026
8 tasks
8 tasks
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.
This pull request introduces a major visual and architectural update to the marketing site by centralizing brand tokens, unifying the design language, and enhancing navigation. The most significant changes are the adoption of shared design tokens for consistent branding, a comprehensive overhaul of the CSS to use these tokens, and improvements to navigation and accessibility.
Design System & Branding
custom.cssandglobal.csswith imports from a shared brand tokens file (tokens.css), centralizing design decisions and ensuring consistency across the app. [1] [2]--corvus-*CSS custom properties, and updated gradients, backgrounds, and shadows to match the new brand guidelines. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15] [16] [17] [18]Component & Layout Enhancements
Navigation & Accessibility
Code & Maintainability
Overall, these changes modernize the marketing site’s appearance, improve brand consistency, and enhance the user experience through better navigation and accessibility.
Summary by CodeRabbit
New Features
Style & Design
Improvements