Skip to content

Add an opacity/alpha design token set and adopt it for overlays and disabled states #470

Description

@1nonlypiece

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

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