Plugin Title
Plugin description
@wix/wix-vibe-plugins ======================
npm install @wix/wix-vibe-plugins@wix/wix-vibe-plugins
======================
Small helper library that exports a plugin module interface and a simple signal type used across wix vibe plugins.
Package information
- Name: @wix/wix-vibe-plugins
- Version: 0.0.1
- Main: dist/index.js
- Types: dist/index.d.ts
Exports
This package re-exports the public API from src/pluginModule.ts and src/Signal.ts.
- PluginModule / PluginEnv — types describing plugin entry points (install, generateData, getInstructions).
- Signal / ReadOnlySignal — simple reactive signal types with get, peek, subscribe, and optional set.
Installation
```
npm install @wix/wix-vibe-pluginsor
yarn add @wix/wix-vibe-plugins
Basic usage
`ts
import type { PluginModule, PluginEnv } from "@wix/wix-vibe-plugins";
const myPlugin: PluginModule = {
install: async (env: PluginEnv) => {
// use env.generateImage, env.WIX_TOKEN, etc.
return {};
},
generateData: async (env) => {
// produce initial data for the plugin
},
};
export default myPlugin;
`
This package also exports CSS files with pre-defined class names and CSS variables that plugins can use to integrate seamlessly with the generated site's theme.
- styles/plugins-vars.css - Contains comprehensive CSS custom properties (variables) for theming
- styles/plugins-theme.css - Provides utility classes that use the CSS variables for consistent styling
The plugins-vars.css file defines a complete theming system with variables for:
- Colors: Primary, secondary, success, danger, info, and accent colors with various opacity levels
- Typography: Font families, weights, and text colors with opacity variants
- Backgrounds: Surface colors, status backgrounds, gradients, and overlay colors
- Borders: Border colors for different states and components
- Buttons: Button styles with hover states
- Social: Social media platform colors and styling
The plugins-theme.css file provides ready-to-use CSS classes including:
- Text colors: .text-content-primary, .text-brand-primary, .text-status-success, etc..bg-surface-card
- Backgrounds: , .bg-status-success-light, .bg-gradient-primary, etc..border-surface-primary
- Borders: , .border-status-error, .border-brand-subtle, etc..btn-primary
- Buttons: , .btn-secondary with hover states.animate-slideIn
- Animations: , fade and slide animations for modals.line-clamp-1
- Utilities: , .line-clamp-2, .line-clamp-3 for text truncation
To use the styling system in your plugin:
The CSS files are automatically loaded into the site, so you can directly use the utility classes and CSS variables in your plugin's components without needing to import them.
` Plugin descriptionhtml`
Plugin Title
` Plugin descriptionhtml``
Plugin Title
This theming system ensures that plugins automatically adapt to the site's visual design and maintain consistency across different themes and color schemes.