@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<T> / ReadOnlySignal<T> — 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

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.

CSS Files

• 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

CSS Variables

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

Utility Classes

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

Usage in Plugins

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.

<!-- Use utility classes for consistent theming -->
<div class="bg-surface-card border-surface-primary text-content-primary">
  <h2 class="font-theme-heading text-brand-primary">Plugin Title</h2>
  <p class="text-content-muted">Plugin description</p>
  <button class="btn-primary">Action Button</button>
</div>

<!-- Use CSS variables with tailwind for more precise control -->
<div class="bg-[var(--theme-bg-card)]">
  <h2 class="text-[var(--theme-text-content)]">Plugin Title</h2>
  <p class="text-[var(--theme-text-content-muted)]">Plugin description</p>
  <button class="bg-[var(--theme-bg-button)] text-[var(--theme-text-button)]">Action Button</button>
</div>

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