Skip to content

Add a breakpoints design token set and a useBreakpoint hook #471

Description

@1nonlypiece

📌 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.

Metadata

Metadata

Labels

No fields configured for Feature.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions