Skip to content

Add design tokens support for lookup/validation #114

@galkremer1

Description

@galkremer1

Summary

The MCP currently indexes component documentation (design guidelines, accessibility, React examples) but does not include design tokens documentation from All PatternFly tokens.

Use Case

Developers writing custom SCSS/CSS need to:

  • Validate that CSS variable names are correct (e.g. --pf-t--global--font--weight--heading vs --pf-t--global--font--weight--heading--default)
  • Find the correct token when an invalid one is used
  • Look up semantic token alternatives (e.g. --pf-t--global--text--color--subtle for secondary text instead of non-existent --pf-t--global--text--color--secondary)

Currently, searchPatternFlyDocs with queries like "design tokens", "pf-t--global", or "text--color--subtle" returns no results because the docs index is component-centric.

Proposed Enhancements

One or more of:

  1. Include tokens in docs index – Add the tokens page(s) from patternfly.org so searchPatternFlyDocs can find token-related content
  2. Add token validation/lookup tool – e.g. validateToken or getTokenInfo that accepts a token name and returns validity + suggested alternatives
  3. Add tokens resource – Expose the full token list (e.g. from all-patternfly-tokens) as an MCP resource for programmatic use

Current Workaround

Manual validation against https://www.patternfly.org/tokens/all-patternfly-tokens or grepping node_modules/@patternfly for token definitions.

Related


Jira Issue: PF-3655

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions