📌 Description
Responsive behaviour is documented in breakpoints.md but breakpoint values
are not tokenized, and there is no runtime hook to branch layout on the current
breakpoint. This issue adds a breakpoints.json token file and a
useBreakpoint hook consuming it.
🎯 Requirements and Context
- New
design-system/tokens/breakpoints.json (sm/md/lg/xl) matching the
documented values; register in getAllTokens.
- A
useBreakpoint() hook in the app returning the active breakpoint via
matchMedia, SSR-safe and cleanup-correct.
🛠️ Suggested Execution
1. Fork the repo and create a branch
git checkout -b feature/breakpoint-tokens
2. Implement changes
- Add
design-system/tokens/breakpoints.json; update token-loader.
- New
src/utils/useBreakpoint.ts.
- Tests: extend
design-system/src/__tests__/token-loader.test.ts; add
src/utils/__tests__/useBreakpoint.test.tsx.
- Docs: extend
design-system/documentation/breakpoints.md.
3. Test and commit
- Run the design-system Jest suite and
npm test.
- Cover edge cases: matchMedia change events, listener cleanup, boundary widths,
default when matchMedia missing.
Example commit message
feat: breakpoint tokens and useBreakpoint hook with tests
✅ Guidelines
- Minimum 95% test coverage on the new/changed lines.
- SSR-safe; clean listener teardown.
- Timeframe: 96 hours.
🏷️ Labels
type-feature · area-frontend · MAYBE REWARDED · GRANTFOX OSS · OFFICIAL CAMPAIGN
💬 Community & Support
- Join the Disciplr contributor Discord to coordinate, ask questions, and get
unblocked fast: https://discord.gg/xvNAvMJf
- Please introduce yourself in the channel before you start so we can avoid
duplicate work, pair you with a reviewer, and get your PR merged quickly.
- Maintainers actively triage this channel and aim for fast, clear, respectful
reviews — reach out any time you're blocked.
📌 Description
Responsive behaviour is documented in
breakpoints.mdbut breakpoint valuesare not tokenized, and there is no runtime hook to branch layout on the current
breakpoint. This issue adds a
breakpoints.jsontoken file and auseBreakpointhook consuming it.🎯 Requirements and Context
design-system/tokens/breakpoints.json(sm/md/lg/xl) matching thedocumented values; register in
getAllTokens.useBreakpoint()hook in the app returning the active breakpoint viamatchMedia, SSR-safe and cleanup-correct.🛠️ Suggested Execution
1. Fork the repo and create a branch
2. Implement changes
design-system/tokens/breakpoints.json; update token-loader.src/utils/useBreakpoint.ts.design-system/src/__tests__/token-loader.test.ts; addsrc/utils/__tests__/useBreakpoint.test.tsx.design-system/documentation/breakpoints.md.3. Test and commit
npm test.default when matchMedia missing.
Example commit message
✅ Guidelines
🏷️ Labels
type-feature·area-frontend·MAYBE REWARDED·GRANTFOX OSS·OFFICIAL CAMPAIGN💬 Community & Support
unblocked fast: https://discord.gg/xvNAvMJf
duplicate work, pair you with a reviewer, and get your PR merged quickly.
reviews — reach out any time you're blocked.