🌈 Overview

Pigmenta is a lightweight, powerful toolkit for theming and design token management.
It helps you define color palettes, tokens, and outputs ready-to-use Tailwind or CSS themes automatically.

Perfect for UI libraries, monorepos, and multi-theme applications.

✨ Features

• ⚙️ Automatic theme generation (CSS or Tailwind)
• 🌗 Light / Dark mode ready
• 🧩 Extendable configs for shared theming in monorepos
• ⚡ Vite plugin support for real-time updates
• 🔄 Watch mode to auto-generate themes on file change
• 🧠 Typed configuration with auto-completion
• 🪄 Simple CLI for setup and management
• 💡 VS Code extension for token previews and theme sync
• 🎨 Figma plugin to import/export tokens visually

🚀 Quick Start

1. Installation

# with npm
npm i pigmenta -D

# or yarn
yarn add pigmenta -D

# or pnpm
pnpm add pigmenta -D

2. Initialize Pigmenta

Create your theme config:

npx pigmenta init

This creates a pigmenta.config.js file and a .pigmenta directory with type definitions.

Example config:

/** @type {import('./.pigmenta/types').Config} */
export default {
	options: {
		output: 'tailwind',
		dest: './src',
		default: 'light',
		tokenPrefix: 'color',
	},
	pallets: {
		neutral: {
			titanium: {
				shade: {
					0: '#101113',
					10: '#181A1C',
					20: '#2E3033',
				},
			},
		},
	},
	tokens: {
		back: {
			light: 'neutral-titanium-shade-95',
			dark: 'neutral-titanium-black',
		},
	},
};

3. Generate Theme Files

npx pigmenta watch

This will automatically generate your Tailwind or CSS theme files based on your config.

🔌 Vite Integration

Pigmenta ships with a Vite plugin for live updates while developing.

import { defineConfig } from 'vite';
import { pigmentaVitePlugin } from 'pigmenta/vite';

export default defineConfig({
	plugins: [sveltekit(), pigmentaVitePlugin()],
});

🧱 Extending Configs

You can extend other Pigmenta configs to share tokens and palettes across packages — ideal for monorepos or design systems.

export default {
	options: {
		output: 'tailwind',
		dest: './src',
		default: 'light',
		extend: ['../../pigmenta.config.js'],
	},
	pallets: {},
	tokens: {},
};

🧭 Example Use Cases

• Build a shared design system for multiple apps
• Sync theme tokens between design and code
• Quickly prototype dark / light modes
• Generate Tailwind-ready themes from your tokens

🎨 Pigmenta Figma Plugin — Bridge Design to Code

The Pigmenta Figma Plugin lets designers export color tokens directly from Figma into a ready-to-use Pigmenta config file.

No more manual syncing — generate .pigmenta token structures straight from your design system and keep your codebase perfectly aligned.

👉 Install from Figma Community

Key Features:

• 🎨 Export colors, palettes, and shades from Figma
• 🔄 Generate Pigmenta-compatible tokens automatically
• 🧩 Stay consistent between design and development

💡 Pigmenta VS Code Extension

The Pigmenta VS Code Extension enhances your workflow with smart syntax highlighting and color awareness.

It recognizes Pigmenta token names, highlights their values, and gives you quick color previews inline — making theme editing intuitive and visual.

👉 Download from Visual Studio Marketplace

Key Features:

• 🌈 Smart syntax highlighting for tokens
• 🧠 Inline color previews and hover info
• ⚙️ Works seamlessly with your pigmenta.config.js

Together, the Figma plugin and VS Code extension close the loop between design and development, keeping your themes in perfect sync 🎯

🧑‍💻 Contributing

Contributions are always welcome! Please read the contributing guide before submitting PRs.

🧠 Authors

• Mostafa Kheibary (@taker)
• Community contributors 💛

📜 License

Licensed under the MIT License.

Built with love and a bit of pigment 🎨