fix(header): switch active topic nav from blue accent to grayscale#15
Closed
hongyi-chen wants to merge 1 commit intomainfrom
Closed
fix(header): switch active topic nav from blue accent to grayscale#15hongyi-chen wants to merge 1 commit intomainfrom
hongyi-chen wants to merge 1 commit intomainfrom
Conversation
The active topic tab in the docs header (e.g. "Terminal") rendered with pale blue text and a 2px pale blue underline because both pulled from `--sl-color-text-accent`. Per Warp brand guidelines flagged in internal review, the top nav should match the sidebar's neutral grayscale active treatment instead. Switch the `a[aria-current='page']` text color and the 2px underline indicator to `--sl-color-white`. That token is theme-aware (off-white in dark, near-black in light) and is the same color used by the sidebar's selected row in `warp-components.css` §1, so the two navigation surfaces now share one grayscale "selected" visual language. Comments above each rule are updated to reflect the new design intent. The Scalar-style underline anchor (replacing the header hairline under the active tab) is preserved; only the color changes. Co-Authored-By: Oz <oz-agent@warp.dev>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Collaborator
Author
|
Closing — this PR retoned the wrong surface (top topic nav). The actual asks are about the Search / Ask / Copy chrome buttons, which is being addressed in a follow-up PR on a fresh branch. |
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.
Problem
In the docs site header, the active topic tab (e.g. Terminal) renders with pale blue text and a 2px pale blue underline. The sidebar's active page uses a neutral grayscale highlight instead, so the two "selected" treatments don't match. Per Warp brand guidelines flagged in internal review, the top nav should be grayscale.
Root cause
In
src/components/WarpTopicNav.astrothe active state pulls from--sl-color-text-accentfor both the text color and the 2px underline. That token resolves tohsl(217, 90%, 84%)in dark mode (pale blue) andhsl(207, 80%, 40%)in light mode (saturated blue) — defined insrc/styles/custom.css.Fix
Switch the two
a[aria-current='page']rules to--sl-color-white(theme-aware: off-white in dark, near-black in light). That's the same token the sidebar's selected row uses inwarp-components.css§1, so the two navigation surfaces now share one grayscale "selected" visual language. The Scalar-style underline anchor (replacing the header hairline under the active tab) is preserved; only the color changes. Inline comments above both rules are updated to reflect the new design intent.The
--warp-control-*chrome tokens used by Search/Ask are intentionally cool-gray per the Oz brand ladder and are left untouched.Validation
npm run buildsucceeds (309 pages built, no test suite perAGENTS.md).Conversation: https://staging.warp.dev/conversation/48c5a764-39e4-43a1-9da0-8a7cff67ed3d
Run: https://oz.staging.warp.dev/runs/019de56f-115d-77ac-beb4-ddd0d3b816dd
Plans:
This PR was generated with Oz.