@wippy-fe/theme

Theme variables, shared Tailwind config, and PrimeVue styling for Wippy web components and applications.

Installation

npm install @wippy-fe/theme

Quick Setup

1. Theme variables (all components)

Import the CSS variables in your styles.css:

@import "@wippy-fe/theme/theme-config.css";

2. Tailwind preset (components using Tailwind)

Use the shared preset in your tailwind.config.ts:

import themePreset from '@wippy-fe/theme/tailwind.config'

export default {
  presets: [themePreset],
  content: ['./src/**/*.{vue,ts}'],
}

This includes tailwindcss-primeui (color utilities, semantic classes, animations), tailwind-scrollbar, the secondary color palette, and severity/accent palettes (danger, success, warn, info, help, accent).

3. PrimeVue plugin (components using PrimeVue)

Install PrimeVue with the correct config:

import { PrimeVuePlugin } from '@wippy-fe/theme/primevue-plugin'

// In vueConfig.plugins:
plugins: [PrimeVuePlugin]

Import PrimeVue component styles in your CSS:

@import "@wippy-fe/theme/primevue/tailwind.css";

What's Included

| Export | Description | |---|---| | @wippy-fe/theme | Default theme CSS variables (theme-config.css) | | @wippy-fe/theme/tailwind.config | Shared Tailwind preset (PrimeUI + secondary colors + scrollbar) | | @wippy-fe/theme/primevue-plugin | Vue plugin that installs PrimeVue with { theme: 'none' } | | @wippy-fe/theme/primevue/* | PrimeVue component CSS files (Tailwind @apply-based) |

Host UI Customization

The Wippy host exposes --wippy-host-* CSS variables and BEM class names for restyling the chat UI, sidebar, splitter, and message bubbles without forking. See THEMING.md §6 for the full reference.

Key principle: Always scope host-only selectors to .wippy-host-app — customCSS is injected into both the host and nested child iframes, so unscoped rules will leak.

/* Variables are already prefixed — no scoping needed */
:root { --wippy-host-message-radius: 0.5rem; }

/* Class selectors MUST be scoped to .wippy-host-app */
.wippy-host-app .chat-message__content { border-radius: 4px; }

/* Bad — leaks into child iframes */
.chat-message__content { border-radius: 4px; }

Available variable groups: --wippy-host-message-* (bubbles), --wippy-host-tool-* (tool calls), --wippy-host-avatar-*, --wippy-host-sidebar-*, --wippy-host-splitter-*.

Theming Reference

See THEMING.md for the full reference on CSS variables, Tailwind utility classes, dark mode behavior, PrimeVue component styling, and host UI customization.