📌 Description
The design system has color, spacing, shadow, motion, border, typography, and
z-index tokens, but no opacity scale. Modal backdrops, disabled controls, and
skeletons hardcode alpha values. This issue adds an opacity.json token file and
exposes it through the loader.
🎯 Requirements and Context
- New
design-system/tokens/opacity.json in DTCG format (disabled, backdrop,
hover, muted levels).
- Register the file in
getAllTokens in
design-system/src/utils/token-loader.ts.
- Adopt the backdrop opacity token in
Modal and the disabled token in Field.
🛠️ Suggested Execution
1. Fork the repo and create a branch
git checkout -b feature/opacity-tokens
2. Implement changes
- Add
design-system/tokens/opacity.json; update
design-system/src/utils/token-loader.ts.
- Adopt tokens in
src/components/Modal.tsx and src/components/Field.tsx.
- Tests: extend
design-system/src/__tests__/token-loader.test.ts and
design-system/src/__tests__/tokens.test.ts.
- Docs: extend
design-system/documentation/token-catalog.md.
3. Test and commit
- Run the design-system Jest suite and
npm test.
- Cover edge cases: token shape validation, loader merge with new file,
components consuming token values.
Example commit message
feat: add opacity token set and adopt in Modal and Field
✅ Guidelines
- Minimum 95% test coverage on the new/changed lines.
- DTCG-conformant token shape.
- 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
The design system has color, spacing, shadow, motion, border, typography, and
z-index tokens, but no opacity scale. Modal backdrops, disabled controls, and
skeletons hardcode alpha values. This issue adds an
opacity.jsontoken file andexposes it through the loader.
🎯 Requirements and Context
design-system/tokens/opacity.jsonin DTCG format (disabled, backdrop,hover, muted levels).
getAllTokensindesign-system/src/utils/token-loader.ts.Modaland the disabled token inField.🛠️ Suggested Execution
1. Fork the repo and create a branch
2. Implement changes
design-system/tokens/opacity.json; updatedesign-system/src/utils/token-loader.ts.src/components/Modal.tsxandsrc/components/Field.tsx.design-system/src/__tests__/token-loader.test.tsanddesign-system/src/__tests__/tokens.test.ts.design-system/documentation/token-catalog.md.3. Test and commit
npm test.components consuming token values.
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.