Add RocketSim branding and custom styling to Starlight docs#912
Merged
Add RocketSim branding and custom styling to Starlight docs#912
Conversation
- Add custom CSS with RocketSim color palette (primary blue #0093ff, dark backgrounds) - Configure logo, favicon, and social links in Starlight config - Create custom SiteTitle component for proper logo display - Create custom Head component for favicon and meta tags - Update PageTitle with rounded buttons using CSS variables - Update FeatureCard with brand-consistent styling and border radius https://claude.ai/code/session_012viNqjBQiSjVo33oC3bYCc
Add more specific CSS selectors to ensure active sidebar items are visible with the accent color styling. https://claude.ai/code/session_012viNqjBQiSjVo33oC3bYCc
The active state has accent background, so text needs to be white for proper contrast and visibility. https://claude.ai/code/session_012viNqjBQiSjVo33oC3bYCc
- Use proper :root[data-theme="light"] selector for light mode - Properly configure accent color scale (low, default, high) - Use Starlight's gray scale convention (gray-1 through gray-6) - Use CSS variables consistently throughout - Add proper light theme accent colors - Improve code organization with section comments - Reference Starlight CSS guide in header Based on https://starlight.astro.build/guides/css-and-tailwind/ https://claude.ai/code/session_012viNqjBQiSjVo33oC3bYCc
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds comprehensive RocketSim branding and custom styling to the Starlight documentation theme. The changes establish a consistent visual identity across the documentation site, matching the main RocketSim website's design language.
Changes:
- Added extensive custom CSS file (430 lines) with RocketSim color palette, typography, and component styling for dark and light themes
- Created custom Starlight components (SiteTitle, Head, Footer) with RocketSim branding and navigation
- Implemented custom 404 pages for both main site and docs with appropriate redirects
- Updated color scheme throughout existing stylesheets for brand consistency
Reviewed changes
Copilot reviewed 14 out of 15 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| docs/src/styles/starlight-custom.css | New comprehensive CSS file defining RocketSim theme colors, typography, and custom styling for all Starlight components with dark/light mode support |
| docs/src/styles/main.css | Updated primary color accent and active states to harmonize with new Starlight theme colors |
| docs/src/styles/buttons.css | Added focus-visible styles to primary buttons for improved accessibility |
| docs/src/pages/404.astro | New custom 404 page with redirect logic to route docs paths to Starlight's 404 page |
| docs/src/content/docs/docs/404.md | New Starlight 404 page with splash template and navigation action |
| docs/src/content/docs/docs/index.mdx | Added pagefind: false to exclude homepage from search indexing |
| docs/src/content/docs/docs/getting-started/testimonials.mdx | Added pagefind: false to exclude testimonials from search indexing |
| docs/src/config/theme.json | Updated theme colors to match new brand color scheme |
| docs/src/components/starlight/SiteTitle.astro | New custom site title component with RocketSim logo and DOCS badge |
| docs/src/components/starlight/PageTitle.astro | Updated action buttons with rounded styling and new color scheme |
| docs/src/components/starlight/Head.astro | New custom head component with proper favicon references and meta tags |
| docs/src/components/starlight/Footer.astro | New custom footer with links to home, teams, Mac App Store, and contact |
| docs/src/components/starlight/FeatureCard.astro | Enhanced card styling with updated colors, border radius, and hover effects |
| docs/src/assets/rocketsim-logo-dark.svg | New dark version of RocketSim logo for light theme |
| docs/astro.config.ts | Extensive Starlight configuration including logo, social links, custom components, and 404 exclusions from sitemap |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| } | ||
|
|
||
| :root[data-theme="light"] .sl-link-button:hover { | ||
| background: var(--sl-color-accent-low); |
There was a problem hiding this comment.
The light mode hover state for .sl-link-button uses --sl-color-accent-low (#cce4ff), which is a very light blue color. This may result in insufficient color contrast against light backgrounds, potentially causing accessibility issues. The white text (color: #fff) on this very light blue background might not meet WCAG AA contrast requirements. Consider using a darker hover color like --sl-color-accent-high (#003d80) for better contrast in light mode.
Suggested change
| background: var(--sl-color-accent-low); | |
| background: var(--sl-color-accent-high); |
Comment on lines
84
to
95
| .action-button.secondary { | ||
| background: transparent; | ||
| color: var(--sl-color-white); | ||
| border: 1px solid var(--sl-color-gray-5); | ||
| background: #373739; | ||
| color: white; | ||
| border: 1px solid #373739; | ||
| transition: all 0.3s ease; | ||
| } | ||
|
|
||
| .action-button.secondary:hover { | ||
| border-color: var(--sl-color-text-accent); | ||
| background: var(--sl-color-gray-6); | ||
| :global([data-theme="light"]) .action-button.secondary { | ||
| background: #e9ecef; | ||
| color: #373739; | ||
| border-color: #e9ecef; | ||
| } |
There was a problem hiding this comment.
The secondary action button lacks a hover state definition. Users won't receive visual feedback when hovering over the "Product Tour" button. Consider adding a hover state similar to the primary button, such as changing the background opacity or adjusting the border/background color to provide visual feedback.
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
2 participants
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.
Uh oh!
There was an error while loading. Please reload this page.