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
Description
Five stylesheets set
font-weight: 5000on the.activestate of an in-page ("on this page") navigation link.font-weightaccepts numeric values in the range1–1000;5000is out of range, so the declaration is invalid and the browser drops it. The active-section highlight therefore never renders bold.Affected locations:
src/components/SistentNavigation/intra-page.jssrc/components/legal-navigation/intra-page.jssrc/sections/Projects/Sistent/sistent.style.jssrc/sections/Community/Handbook/Handbook.style.jssrc/sections/Community/Adventures-of-Five/adventures.style.jsIn the two
intra-page.jsfiles the effect is worse than a missing bold. The rule reads:Because the weight is dropped and the colour matches the inactive state,
.activeproduces 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(orbold), and in theintra-page.jscases an.activecolour that actually differs from.list.Worth noting while fixing: both
intra-page.jsfiles hardcodecolor: #000000rather than using a theme token, so these links are near-invisible in dark mode. Switching toprops.theme.*would address the active state and dark mode together, matching howsistent.style.jsalready does it.Screenshots
N/A — reproducible by inspecting any
.activein-page nav link in devtools; thefont-weightdeclaration shows as invalid/struck-through.Environment: