PrimeUI Theme Generator

A GitHub Action that generates theme tokens for Prime UI libraries (PrimeVue, PrimeNG, etc.) based on design tokens from your design system. This action enables seamless continuous integration between your design tokens and Prime UI theme generation.

✨ Features

• 🎨 Design Token Integration: Convert design tokens to Prime UI compatible themes
• 🚀 Multiple Prime UI Library Support: Works with PrimeVue, PrimeNG currently. PrimeReact support will be added in the future.
• ⚡ Fast Theme Generation: Automated theme creation from your CI/CD pipeline
• 🎯 Live Preview: View the generated theme at Prime UI showcases using Theme Designer
• 🔐 Secure Authentication: Uses API keys for secure theme generation
• 📦 Ready-to-Use: No additional setup required, works out of the box

🚀 Usage

Example

name: Automated Figma To Theme Code

on:
    push:
        paths:
            - "tokens.json"

permissions:
    contents: write

jobs:
    generate-tokens:
        name: Generate Theme Code
        runs-on: ubuntu-latest
        steps:
            - name: Checkout repository
              uses: actions/checkout@v3

            - name: Generate Prime Theme
              uses: primefaces/theme-designer-ci@1.0.0-beta.4
              with:
                  designer-secret: ${{ secrets.THEME_DESIGNER_SECRET_KEY }}
                  theme-name: "acme"
                  font-size: "14px"
                  font-family: "Inter Var"
                  project: "primevue"
                  tokens-path: "tokens.json"
                  output-dir: "./acme-theme"

📋 Inputs

Input	Description	Required	Default
designer-secret	API key for authentication with the Prime Theme Designer service	✅ Yes	-
theme-name	Name of the theme to generate	✅ Yes	-
project	Target Prime UI project (primevue, primeng)	✅ Yes	-
font-size	Font size for theme preview in visual editor	❌ No	14px
font-family	Font family for theme preview in visual editor	❌ No	Inter Var
tokens-path	Path to the design tokens file	❌ No	tokens.json
output-dir	Directory where generated theme files will be saved	❌ No	./

🔑 Setup

1. Get Your API Key

1. Visit the PrimeUI Store
2. Purchase an Extended License
3. Navigate to your account settings
4. Generate a secret key for CI/CD integration

2. Add API Key to Repository Secrets

1. Go to your GitHub repository
2. Navigate to Settings > Secrets and variables > Actions
3. Click New repository secret
4. Give a name such as: THEME_DESIGNER_SECRET_KEY
5. Value: Your API key from Prime Theme Designer
6. Click Add secret

3. Configure Figma Token Studio with a Git Sync Provider

Visit the Token Studio documentation for a comprehensive guide to connect repository so that you'll be able to push tokens.json to the git repository where this action runs.

📁 Output

The action generates theme files compatible with your specified Prime UI project. You may import the theme files to your project, and configure it as your "preset".

• PrimeNG Theming Docs
• PrimeVue Theming Docs

Example Repository

Visit the example repository with a sample configuration.

https://github.com/primefaces/theme-designer-ci-test

Live Preview

After your CI pipeline completes successfully, your theme becomes available in the Prime UI Theme Designer.

• Navigate to the Prime UI library website.
• Click the ⚙️ icon at topbar to open up Designer Editor.
• Sign in with your license key and pass key credentials.
• Then select your theme from the available options to apply it across all demos and website content.
• Note that CI-generated themes are provided in read-only mode for preview purposes only and cannot be edited in the Theme Designer.

🛠️ Supported Projects

• PrimeVue (primevue) - Vue.js UI library
• PrimeNG (primeng) - Angular UI library
• PrimeReact (soon) (primereact) - React UI library

🐛 Troubleshooting

Common Issues

Authentication Failed

• Verify your API key is correct and added to repository secrets

Invalid Tokens Format

• Ensure your tokens.json follows the expected structure
• Validate JSON syntax using a JSON validator
• Make sure default tokens are not removed and in case new tokens are required, they are defined under the https://primevue.org/uikit/guide/#tokensets tokenset.

Missing Output Files

• Check that the output-dir path is correct
• Verify repository permissions allow file creation

Project Not Supported

• Ensure the project input matches supported values: 'primevue', 'primeng'.

Debug Mode

Enable debug logging by setting the ACTIONS_STEP_DEBUG repository secret to true.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

💬 Support

• 📖 Documentation: Prime Theme Designer Guide
• 💬 Community: PrimeTek Community Forum
• 🐛 Issues: GitHub Issues
• 📧 Enterprise Support: Contact PrimeTek

🏢 About PrimeTek

This action is developed and maintained by PrimeTek Informatics, the team behind the Prime UI libraries trusted by thousands of developers worldwide.

---

Made with ❤️ by the PrimeTek Team