[UI] Active in-page navigation link never bolds: `font-weight: 5000` is an invalid CSS value
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 1.1k
- Forks
- 1.6k
- Avg merge
- 2d 10h
- Merged PRs (30d)
- 18
Description
Description
Five stylesheets set font-weight: 5000 on the .active state of an in-page ("on this page") navigation link. font-weight accepts numeric values in the range 1–1000; 5000 is out of range, so the declaration is invalid and the browser drops it. The active-section highlight therefore never renders bold.
Affected locations:
| File | Line |
|---|---|
src/components/SistentNavigation/intra-page.js |
33 |
src/components/legal-navigation/intra-page.js |
26 |
src/sections/Projects/Sistent/sistent.style.js |
445 |
src/sections/Community/Handbook/Handbook.style.js |
350 |
src/sections/Community/Adventures-of-Five/adventures.style.js |
407 |
In the two intra-page.js files the effect is worse than a missing bold. The rule reads:
.list {
color: #000000;
}
.active {
font-weight: 5000; /* invalid, dropped */
color: #000000; /* identical to .list */
}
Because the weight is dropped and the colour matches the inactive state, .active produces no visual change at all — there is no indication of which section the reader is currently on.
Pages affected include the Sistent documentation pages (e.g. https://layer5.io/projects/sistent/components/table), the Handbook, the legal pages, and Adventures of Five.
Expected Behavior
The active entry in the in-page navigation should be visually distinct from the inactive entries — a valid weight such as font-weight: 700 (or bold), and in the intra-page.js cases an .active colour that actually differs from .list.
Worth noting while fixing: both intra-page.js files hardcode color: #000000 rather than using a theme token, so these links are near-invisible in dark mode. Switching to props.theme.* would address the active state and dark mode together, matching how sistent.style.js already does it.
Screenshots
N/A — reproducible by inspecting any .active in-page nav link in devtools; the font-weight declaration shows as invalid/struck-through.
Environment:
- Host OS: any
- Browser: any
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the five affected files and inspect each .active rule, especially the two intra-page.js components and their theme usage. Verify the active entry has a valid font weight and a visual difference from inactive entries, including in dark mode, then inspect the listed affected pages in the browser to confirm the current-section link is visibly distinct.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 82/100