@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-plugins


or


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;
`

Styling Integration

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.

$3

- 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

$3

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

$3

The plugins-theme.css file provides ready-to-use CSS classes including:

- Text colors: .text-content-primary, .text-brand-primary, .text-status-success, etc.
- Backgrounds: .bg-surface-card, .bg-status-success-light, .bg-gradient-primary, etc.
- Borders: .border-surface-primary, .border-status-error, .border-brand-subtle, etc.
- Buttons: .btn-primary, .btn-secondary with hover states
- Animations: .animate-slideIn, fade and slide animations for modals
- Utilities: .line-clamp-1, .line-clamp-2, .line-clamp-3 for text truncation

$3

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.

`html




`

`html




``

This theming system ensures that plugins automatically adapt to the site's visual design and maintain consistency across different themes and color schemes.