Skip to content

feat(generate-design-tokens): support community skins generation#1663

Draft
brtbrt wants to merge 2 commits into
masterfrom
mbertamini/1588-import-community-skins
Draft

feat(generate-design-tokens): support community skins generation#1663
brtbrt wants to merge 2 commits into
masterfrom
mbertamini/1588-import-community-skins

Conversation

@brtbrt

@brtbrt brtbrt commented Jul 18, 2026

Copy link
Copy Markdown
Contributor

Summary

Enable generate-design-tokens script to automatically discover and generate community skins from JSON tokens in the mistica-design repository.

This resolves issue #1588 and allows community skin definitions (like cyber skin) to be generated from design tokens instead of being manually maintained.

Changes

Core Implementation

  • Added support for discovering community skin tokens in tokens/community/ folder
  • Community skins are generated to:
    • TypeScript files: src/community/skins/{name}-skin.tsx
    • CSS files: css/community/{name}.css

Key Features

  • Auto-discovery: Automatically finds .json files in community tokens folder
  • Correct Structure: Generated files use appropriate import paths and types
    • Community skins use generic Skin type (not KnownSkin)
    • Constants are defined inline (not imported)
    • Import paths adjusted for subdirectory context
  • CSS Generation: Community skins get CSS files in css/community/
  • Graceful Degradation: If no community tokens exist, generation is skipped
  • Backward Compatible: No changes to main skin generation

Files Changed

  1. packages/generate-design-tokens/index.js

    • Added COMMUNITY_SKINS_FOLDER and COMMUNITY_CSS_FOLDER paths
    • Enhanced generateSkinSrc() with isCommunitySkin parameter
    • Added generateCommunitySkins() function
    • Updated generateSkinFiles() to call community skin generation
  2. packages/generate-design-tokens/README.md

    • Documented community skins generation behavior
    • Clarified output file locations

Technical Details

Generation Pattern

  • Input: tokens/community/cyber.json (from mistica-design repo)
  • Output:
    • src/community/skins/cyber-skin.tsx
    • css/community/cyber.css

Type System

Community skins maintain compatibility with existing type system by using the generic Skin type instead of KnownSkin. No type system changes needed.

Testing

The implementation:

  • Follows existing code patterns and conventions
  • Maintains consistency with main skin generation
  • Properly handles edge cases (missing folders, no community tokens)
  • Uses correct import paths for community context
  • Generates files compatible with existing infrastructure

Related Issues

Fixes #1588

brtbrt added 2 commits July 18, 2026 16:16
Enable generate-design-tokens to discover and generate community skins from JSON tokens in the mistica-design repo. Community skin tokens are expected in tokens/community/ folder, with generated files output to src/community/skins/ and css/community/ directories.

- Add community skins folder paths (src/community/skins, css/community)
- Modify generateSkinSrc to handle community skins with correct import paths and type usage
- Add generateCommunitySkins function to discover and process community token files
- Community skins use generic Skin type instead of KnownSkin
- Constants are defined inline in community skin files
@github-actions

Copy link
Copy Markdown

Size stats

master this branch diff
Total JS 15.8 MB 15.8 MB 0 B
JS without icons 1.91 MB 1.91 MB 0 B
Lib overhead 93 kB 93 kB 0 B
Lib overhead (gzip) 20.5 kB 20.5 kB 0 B

@github-actions

Copy link
Copy Markdown

Deploy preview for mistica-web ready!

Project:mistica-web
Status: ✅  Deploy successful!
Preview URL:https://mistica-9mltuqrav-flows-projects-65bb050e.vercel.app
Latest Commit:0b75aa7

Deployed with vercel-action

@github-actions

Copy link
Copy Markdown

Accessibility report
✔️ No issues found

ℹ️ You can run this locally by executing yarn audit-accessibility.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Update generate-design-tokens package to import from community skins

1 participant