@wippy-fe/theme 0.0.7

package/README.md

@@ -0,0 +1,64 @@
+# @wippy-fe/theme
+
+Theme variables, shared Tailwind config, and PrimeVue styling for Wippy web components and applications.
+
+## Installation
+
+```bash
+npm install @wippy-fe/theme
+```
+
+## Quick Setup
+
+### 1. Theme variables (all components)
+
+Import the CSS variables in your `styles.css`:
+
+```css
+@import "@wippy-fe/theme/theme-config.css";
+```
+
+### 2. Tailwind preset (components using Tailwind)
+
+Use the shared preset in your `tailwind.config.ts`:
+
+```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`, and the secondary color palette.
+
+### 3. PrimeVue plugin (components using PrimeVue)
+
+Install PrimeVue with the correct config:
+
+```ts
+import { PrimeVuePlugin } from '@wippy-fe/theme/primevue-plugin'
+
+// In vueConfig.plugins:
+plugins: [PrimeVuePlugin]
+```
+
+Import PrimeVue component styles in your CSS:
+
+```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) |
+
+## Theming Reference
+
+See [THEMING.md](./THEMING.md) for the full reference on CSS variables, Tailwind utility classes, dark mode behavior, and PrimeVue component styling.

package/THEMING.md

@@ -0,0 +1,316 @@
+# Wippy Theming Reference
+
+Comprehensive reference for CSS variables, Tailwind utility classes, dark mode behavior, and PrimeVue styling used across Wippy web components and applications.
+
+## 1. CSS Variables
+
+All variables are defined in `theme-config.css` and set on `:root`. At runtime, the host injects the real theme — these serve as the dev-time fallback and contract.
+
+### Primary palette (11 vars)
+
+Base: `--p-primary` (default: `rgb(0, 95, 178)`)
+
+| Variable | Value |
+|---|---|
+| `--p-primary-50` | `color-mix(in srgb, var(--p-primary) 5%, white)` |
+| `--p-primary-100` | `color-mix(in srgb, var(--p-primary) 10%, white)` |
+| `--p-primary-200` | `color-mix(in srgb, var(--p-primary) 20%, white)` |
+| `--p-primary-300` | `color-mix(in srgb, var(--p-primary) 30%, white)` |
+| `--p-primary-400` | `color-mix(in srgb, var(--p-primary) 40%, white)` |
+| `--p-primary-500` | `var(--p-primary)` (base) |
+| `--p-primary-600` | `color-mix(in srgb, var(--p-primary) 80%, black)` |
+| `--p-primary-700` | `color-mix(in srgb, var(--p-primary) 70%, black)` |
+| `--p-primary-800` | `color-mix(in srgb, var(--p-primary) 60%, black)` |
+| `--p-primary-900` | `color-mix(in srgb, var(--p-primary) 50%, black)` |
+| `--p-primary-950` | `color-mix(in srgb, var(--p-primary) 40%, black)` |
+
+### Secondary palette (11 vars)
+
+Base: `--p-secondary` (default: `#6f7385`)
+
+Same numbered scale pattern as primary (50–950) using `color-mix`.
+
+### Surface palette (13 vars)
+
+| Variable | Light value | Dark value |
+|---|---|---|
+| `--p-surface-0` | `#fff` | `#fff` |
+| `--p-surface-50` | `#fafafa` | `#fafafa` |
+| `--p-surface-100` | `#f4f4f5` | `#f4f4f5` |
+| `--p-surface-200` | `#e4e4e7` | `#e4e4e7` |
+| `--p-surface-300` | `#d4d4d8` | `#d4d4d8` |
+| `--p-surface-400` | `#a1a1aa` | `#a1a1aa` |
+| `--p-surface-500` | `#71717a` | `#71717a` |
+| `--p-surface-600` | `#52525b` | `#545250` (warm) |
+| `--p-surface-700` | `#3f3f46` | `#403e3c` (warm) |
+| `--p-surface-800` | `#27272a` | `#2b2927` (warm) |
+| `--p-surface-900` | `#18181b` | `#1c1a19` (warm) |
+| `--p-surface-950` | `#09090b` | `#0f0e0d` (warm) |
+
+**Fixed light-to-dark scale** — 0 is always lightest, 950 always darkest. The scale does NOT flip with dark mode. In dark mode, only 600–950 get warmer undertones.
+
+### Semantic variables (15 vars)
+
+These **flip with dark mode** — use these for theme-dependent styling.
+
+| Variable | Light | Dark |
+|---|---|---|
+| `--p-primary-color` | `primary-500` | `primary-400` |
+| `--p-primary-contrast-color` | `surface-0` | `surface-900` |
+| `--p-primary-hover-color` | `primary-600` | `primary-300` |
+| `--p-primary-active-color` | `primary-700` | `primary-200` |
+| `--p-text-color` | `surface-700` | `surface-0` |
+| `--p-text-hover-color` | `surface-800` | `surface-0` |
+| `--p-text-muted-color` | `surface-500` | `surface-400` |
+| `--p-text-hover-muted-color` | `surface-600` | `surface-300` |
+| `--p-content-background` | — | `surface-900` (via host) |
+| `--p-content-border-color` | `surface-200` | `surface-700` |
+| `--p-content-hover-background` | `surface-100` | `surface-800` |
+| `--p-content-hover-color` | `surface-800` | `surface-0` |
+| `--p-highlight-background` | `primary-50` | `primary-400 @ 16%` |
+| `--p-highlight-color` | `primary-700` | `white @ 87%` |
+| `--p-highlight-focus-background` | `primary-100` | `primary-400 @ 24%` |
+| `--p-highlight-focus-color` | `primary-800` | `white @ 87%` |
+| `--p-content-border-radius` | `6px` | `6px` |
+
+## 2. Tailwind Utility Classes
+
+Provided by `tailwindcss-primeui` plugin (included in the shared Tailwind preset).
+
+### Color utilities
+
+Work with `bg-`, `text-`, `border-`, `outline-`, `ring-` prefixes:
+
+| Class suffix | Maps to |
+|---|---|
+| `primary` | `--p-primary-color` |
+| `primary-emphasis` | `--p-primary-hover-color` |
+| `primary-emphasis-alt` | `--p-primary-active-color` |
+| `primary-contrast` | `--p-primary-contrast-color` |
+| `primary-{0,50,100,...,950}` | Full primary shade range |
+| `surface-{0,50,100,...,950}` | Full surface shade range |
+
+### Semantic utilities
+
+| Class | Maps to |
+|---|---|
+| `.text-color` | `--p-text-color` |
+| `.text-color-emphasis` | `--p-text-hover-color` |
+| `.text-muted-color` | `--p-text-muted-color` |
+| `.text-muted-color-emphasis` | `--p-text-hover-muted-color` |
+| `.bg-emphasis` | Emphasis background + text |
+| `.bg-highlight` | Highlighted state (selected items, active rows) |
+| `.bg-highlight-emphasis` | Emphasized highlight |
+| `.border-surface` | `--p-content-border-color` |
+| `.rounded-border` | `--p-content-border-radius` |
+
+### Animation utilities
+
+| Class | Description |
+|---|---|
+| `.animate-fadein` | Fade in |
+| `.animate-fadeout` | Fade out |
+| `.animate-slidedown` | Slide down |
+| `.animate-slideup` | Slide up |
+| `.animate-scalein` | Scale in |
+| `.animate-fadeinleft` | Fade in from left |
+| `.animate-fadeinright` | Fade in from right |
+| `.animate-fadeinup` | Fade in from below |
+| `.animate-fadeindown` | Fade in from above |
+| `.animate-duration-{ms}` | Animation duration |
+| `.animate-delay-{ms}` | Animation delay |
+| `.animate-ease-*` | Easing functions |
+
+### Secondary color utilities
+
+Added by the shared Tailwind preset via `theme.extend.colors`:
+
+```
+bg-secondary-{50..950}
+text-secondary-{50..950}
+border-secondary-{50..950}
+```
+
+## 3. Dark Mode
+
+Variables switch at `@media (prefers-color-scheme: dark)`. Key changes:
+
+- `--p-primary` base shifts from `rgb(0, 95, 178)` to `rgb(0, 125, 178)` (brighter)
+- `--p-primary-color` shifts from `primary-500` to `primary-400`
+- `--p-content-background` shifts to `surface-900` (via host injection)
+- `--p-text-color` shifts from `surface-700` to `surface-0`
+- Surface 600–950 get warmer undertones in dark mode
+
+### Rules
+
+- **Use semantic variables** (`--p-text-color`, `--p-content-background`) for colors that should flip with dark mode.
+- **Use `surface-0`/`surface-950`** only when you explicitly need the fixed shade regardless of mode.
+- **For derived shades**: `color-mix(in srgb, var(--p-content-background) 85%, var(--p-text-color) 15%)`.
+- **Never use `--p-surface-N`** for theme-dependent colors — the numbered scale does NOT flip.
+
+## 4. PrimeVue Styling (opt-in)
+
+The `primevue/` directory contains CSS files that style PrimeVue component tags (`.p-button`, `.p-datatable`, etc.) using Tailwind `@apply` directives. These are **only needed if your component uses PrimeVue tags**.
+
+### Setup
+
+1. Add `primevue` as a dependency
+2. Import `PrimeVuePlugin` from `@wippy-fe/theme/primevue-plugin` — installs PrimeVue with `{ theme: 'none' }`
+3. Import PrimeVue CSS: `@import "@wippy-fe/theme/primevue/tailwind.css"` in your styles
+4. Add `'primeVueCssUrl'` to `hostCssKeys` so the host injects PrimeVue CSS at runtime
+
+### How it works
+
+The CSS files use theme variables via Tailwind classes. Example from `button.css`:
+
+```css
+.p-button {
+  @apply bg-primary text-primary-contrast border-primary
+    enabled:hover:bg-primary-emphasis enabled:active:bg-primary-emphasis-alt ...
+}
+```
+
+The `tailwind.css` master file imports all component CSS files organized by category (form, button, data, overlay, menu, panel, file, message, media, misc).
+
+### Available PrimeVue component styles
+
+**Form**: autocomplete, cascadeselect, checkbox, colorpicker, datepicker, iconfield, iftalabel, inputgroup, inputnumber, inputotp, inputtext, floatlabel, knob, listbox, multiselect, password, radiobutton, rating, select, selectbutton, slider, textarea, togglebutton, toggleswitch, treeselect
+
+**Button**: button, buttongroup, speeddial, splitbutton
+
+**Data**: datatable, dataview, paginator, picklist, orderlist, organizationchart, timeline, tree, treetable
+
+**Overlay**: confirmdialog, confirmpopup, dialog, drawer, popover, tooltip
+
+**Menu**: breadcrumb, contextmenu, dock, menu, menubar, megamenu, panelmenu, tieredmenu
+
+**Panel**: accordion, card, divider, fieldset, panel, scrollpanel, splitter, stepper, tabs, toolbar
+
+**File**: fileupload
+
+**Message**: message, toast
+
+**Media**: carousel, galleria, image, imagecompare
+
+**Misc**: avatar, badge, blockui, chip, inplace, metergroup, overlaybadge, progressbar, progressspinner, ripple, scrolltop, skeleton, tag, terminal
+
+## 5. Choosing Custom Colors
+
+When overriding `--p-primary`, `--p-secondary`, or the surface palette, follow these guidelines to ensure contrast and readability across both modes.
+
+### How the shade scale works
+
+The `color-mix()` system blends your base color with white (lighter shades) or black (darker shades). The percentages are fixed:
+
+| Shade | Blend |
+|---|---|
+| 50 | 5% base + 95% white |
+| 100 | 10% base + 90% white |
+| 200 | 20% base + 80% white |
+| 300 | 30% base + 70% white |
+| 400 | 40% base + 60% white |
+| **500** | **100% base (no blend)** |
+| 600 | 80% base + 20% black |
+| 700 | 70% base + 30% black |
+| 800 | 60% base + 40% black |
+| 900 | 50% base + 50% black |
+| 950 | 40% base + 60% black |
+
+This means the base color's luminosity determines the contrast of the **entire scale**. A too-light base produces a washed-out 500 that can't contrast against white text; a too-dark base makes 400 too dim for dark mode.
+
+### Primary color luminosity
+
+The primary base is used at two critical contrast points:
+
+1. **Light mode**: `bg-primary` (500) with `text-primary-contrast` (white) — buttons, badges, checkboxes
+2. **Dark mode**: `bg-primary` (400 = 40% base + 60% white) with `text-primary-contrast` (surface-900, near-black)
+
+**Recommended relative luminance for `--p-primary`: 0.05–0.15** (medium-dark, saturated).
+
+| Example | RGB | Rel. luminance | Light contrast (500 vs white) | Dark contrast (400 vs black) |
+|---|---|---|---|---|
+| Default blue | `rgb(0, 95, 178)` | ~0.10 | ~8.5:1 (AAA) | ~6.8:1 (AA) |
+| Deep teal | `rgb(0, 128, 128)` | ~0.14 | ~5.8:1 (AA) | ~8.7:1 (AAA) |
+| Indigo | `rgb(79, 70, 229)` | ~0.07 | ~8.0:1 (AAA) | ~5.5:1 (AA) |
+| Red | `rgb(185, 28, 28)` | ~0.05 | ~9.2:1 (AAA) | ~4.7:1 (borderline) |
+| Forest green | `rgb(22, 101, 52)` | ~0.08 | ~7.2:1 (AAA) | ~6.1:1 (AA) |
+| Orange | `rgb(194, 120, 3)` | ~0.18 | ~3.7:1 (FAIL) | ~9.5:1 (AAA) |
+
+**Key constraints:**
+- Luminance **> 0.18** → 500 shade is too light for white text (fails WCAG AA 4.5:1 in light mode)
+- Luminance **< 0.04** → 400 shade is too dark for dark-on-light text (fails WCAG AA in dark mode)
+- The sweet spot is **0.06–0.14** — both modes pass WCAG AA (4.5:1), with most passing AAA (7:1)
+- Pure, saturated colors (high chroma) work best. Desaturated/muted colors lose contrast faster
+
+**If your brand color is too light** (e.g., orange, yellow, lime): darken it for `--p-primary` and use the original as a secondary or accent. Light-mode buttons with white text will fail contrast otherwise.
+
+**If your brand color is too dark** (e.g., navy, dark brown): lighten it slightly. The 400 shade in dark mode needs enough contrast against `surface-900`.
+
+### Secondary color luminosity
+
+Secondary is used for muted/deemphasized elements — less critical than primary but still appears in text and borders.
+
+**Recommended relative luminance for `--p-secondary`: 0.10–0.25** (mid-range, desaturated).
+
+The default `#6f7385` (luminance ~0.16) is a muted gray-purple that reads as neutral in both modes. Good secondary colors:
+- Are **less saturated** than primary (avoid competing for attention)
+- Have **mid-range luminance** so the full shade scale is usable
+- Work as `text-secondary-600` on white and `text-secondary-300` on dark backgrounds
+
+### Surface palette
+
+Surfaces are a fixed grayscale ramp — they do NOT flip with dark mode. The semantic variables (`--p-content-background`, `--p-text-color`) reference different points on this scale per mode.
+
+**Light mode assignments:**
+
+| Role | Surface | Hex | Purpose |
+|---|---|---|---|
+| Page background | 0 | `#ffffff` | Main canvas |
+| Card/container background | 0 | `#ffffff` | Content containers |
+| Hover background | 100 | `#f4f4f5` | Interactive hover state |
+| Border | 200 | `#e4e4e7` | Borders, dividers |
+| Muted text | 500 | `#71717a` | Secondary text, labels |
+| Body text | 700 | `#3f3f46` | Primary readable text |
+| Strong emphasis | 800 | `#27272a` | Headings, hover text |
+
+**Dark mode assignments:**
+
+| Role | Surface | Hex | Purpose |
+|---|---|---|---|
+| Page background | 900 | `#1c1a19` (warm) | Main canvas |
+| Card/container background | 800 | `#2b2927` (warm) | Elevated containers |
+| Hover background | 800 | `#2b2927` (warm) | Interactive hover state |
+| Border | 700 | `#403e3c` (warm) | Borders, dividers |
+| Muted text | 400 | `#a1a1aa` | Secondary text, labels |
+| Body text | 0 | `#ffffff` | Primary readable text |
+| Strong emphasis | 0 | `#ffffff` | Headings, hover text |
+
+**Dark mode warm tones** (600–950): The default surfaces shift from cool zinc grays to slightly warm brown-grays in dark mode. This reduces visual fatigue on dark backgrounds. The shift is subtle — `#545250` vs `#52525b` for surface-600 — but creates a warmer, more natural feel.
+
+When providing custom surfaces, keep these rules:
+- **0 must always be `#ffffff`** (or very near it) — used as contrast text in dark mode
+- **950 must always be very dark** — used as the maximum-contrast anchor
+- **The scale must increase monotonically in darkness** — no inversions
+- **600–950 should shift warm** in dark mode for visual comfort (optional but recommended)
+- **Don't change 0–500** between modes unless you have a specific reason — the semantic variables handle mode switching
+
+### Contrast verification
+
+After choosing colors, verify these critical pairs meet WCAG AA (4.5:1 minimum):
+
+| Pair | Light mode | Dark mode |
+|---|---|---|
+| `bg-primary` + `text-primary-contrast` | primary-500 vs white | primary-400 vs surface-900 |
+| `bg-highlight` + text | primary-50 vs primary-700 | primary-400@16% vs white@87% |
+| Body text on background | surface-700 vs white | surface-0 vs surface-900 |
+| Muted text on background | surface-500 vs white | surface-400 vs surface-900 |
+
+Quick formula for relative luminance of an sRGB color:
+```
+L = 0.2126 * R' + 0.7152 * G' + 0.0722 * B'
+where R' = (R/255)^2.2  (simplified gamma)
+
+Contrast ratio = (L_lighter + 0.05) / (L_darker + 0.05)
+```
+
+WCAG AA requires 4.5:1 for normal text, 3:1 for large text (18px+ bold or 24px+ regular).

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@wippy-fe/theme",
+  "version": "0.0.7",
+  "description": "Theme variables, shared Tailwind config, and PrimeVue styling for Wippy web components.",
+  "type": "module",
+  "main": "theme-config.css",
+  "exports": {
+    ".": "./theme-config.css",
+    "./theme-config.css": "./theme-config.css",
+    "./tailwind.config": "./tailwind.config.ts",
+    "./primevue-plugin": "./primevue-plugin.ts",
+    "./primevue/*": "./primevue/*"
+  },
+  "files": [
+    "theme-config.css",
+    "tailwind.config.ts",
+    "primevue-plugin.ts",
+    "primevue/",
+    "THEMING.md",
+    "README.md"
+  ],
+  "dependencies": {
+    "tailwindcss-primeui": "^0.6.1",
+    "tailwind-scrollbar": "^3.0.0"
+  },
+  "peerDependencies": {
+    "primevue": "^4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "primevue": {
+      "optional": true
+    }
+  },
+  "license": "UNLICENSED"
+}

package/primevue/accordion.css

@@ -0,0 +1,58 @@
+.p-accordionpanel {
+    @apply flex flex-col border-b border-surface-200 dark:border-surface-700
+}
+
+.p-accordionheader {
+    @apply cursor-pointer disabled:cursor-auto flex items-center justify-between p-[1.125rem] font-semibold
+        bg-surface-0 dark:bg-surface-900
+        text-surface-500 dark:text-surface-400
+        transition-colors duration-200
+}
+
+.p-accordionpanel:first-child > .p-accordionheader {
+    @apply rounded-ss-md rounded-se-md
+}
+
+.p-accordionpanel:last-child > .p-accordionheader {
+    @apply rounded-ee-md rounded-es-md
+}
+
+.p-accordionpanel:last-child.p-accordionpanel-active > .p-accordionheader {
+    @apply rounded-ee-md rounded-es-md
+}
+
+.p-accordionheader-toggle-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-accordionpanel:not(.p-disabled) .p-accordionheader:focus-visible {
+    @apply outline outline-1 outline-offset-[-1px] outline-primary
+}
+
+.p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled) > .p-accordionheader:hover {
+    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0
+}
+
+.p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled) .p-accordionheader:hover .p-accordionheader-toggle-icon {
+    @apply text-surface-700 dark:text-surface-0
+}
+
+.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader {
+    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0
+}
+
+.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader .p-accordionheader-toggle-icon {
+    @apply text-surface-700 dark:text-surface-0;
+}
+
+.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader:hover  {
+    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0
+}
+
+.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader:hover  .p-accordionheader-toggle-icon {
+    @apply text-surface-700 dark:text-surface-0;
+}
+
+.p-accordioncontent-content {
+    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0 pt-0 px-[1.125rem] pb-[1.125rem]
+}

package/primevue/autocomplete.css

@@ -0,0 +1,144 @@
+@import './inputtext';
+@import './chip';
+
+.p-autocomplete {
+    @apply inline-flex
+}
+
+.p-autocomplete.p-disabled {
+    @apply opacity-100
+}
+
+.p-autocomplete-loader {
+    @apply absolute top-1/2 -mt-2 end-3
+}
+
+
+.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-loader {
+    @apply end-[3.25rem]
+}
+
+.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input {
+    @apply flex-auto w-[1%]
+}
+
+.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input,
+.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input-multiple {
+    @apply rounded-e-none
+}
+
+.p-autocomplete-dropdown {
+    @apply cursor-pointer inline-flex items-center justify-center select-none overflow-hidden relative w-10 rounded-e-md
+        bg-surface-100 enabled:hover:bg-surface-200 enabled:active:bg-surface-300
+        text-surface-600 enabled:hover:text-surface-700 enabled:hover:active:text-surface-800
+        dark:bg-surface-800 dark:enabled:hover:bg-surface-700 dark:enabled:active:bg-surface-600
+        dark:text-surface-300 dark:enabled:hover:text-surface-200 dark:enabled:active:text-surface-100
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+        transition-colors duration-200
+}
+
+.p-autocomplete .p-autocomplete-overlay {
+    @apply min-w-full
+}
+
+.p-autocomplete-overlay {
+    @apply absolute top-0 left-0 rounded-md
+        bg-surface-0 dark:bg-surface-900
+        border border-surface-200 dark:border-surface-700
+        text-surface-700 dark:text-surface-0
+        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
+}
+
+.p-autocomplete-list-container {
+    @apply overflow-auto
+}
+
+.p-autocomplete-list {
+    @apply m-0 p-1 list-none flex flex-col gap-[2px]
+}
+
+.p-autocomplete-option {
+    @apply cursor-pointer whitespace-nowrap relative overflow-hidden flex items-center px-3 py-2 rounded-sm
+        text-surface-700 dark:text-surface-0 bg-transparent border-none
+        transition-colors duration-200
+}
+
+.p-autocomplete-option:not(.p-autocomplete-option-selected):not(.p-disabled).p-focus {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-0
+}
+
+.p-autocomplete-option-selected {
+    @apply bg-highlight
+}
+
+.p-autocomplete-option-selected.p-focus {
+    @apply bg-highlight-emphasis
+}
+
+.p-autocomplete-option-group {
+    @apply m-0 px-3 py-2 text-surface-500 dark:text-surface-400 font-semibold bg-transparent
+}
+
+.p-autocomplete-input-multiple {
+    @apply m-0 list-none cursor-text overflow-hidden flex items-center flex-wrap
+        px-3 py-1 gap-1 text-surface-700 dark:text-surface-0 bg-surface-0 dark:bg-surface-950
+        border border-surface-300 dark:border-surface-700 rounded-md w-full
+        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
+        transition-colors duration-200 outline-none
+}
+
+.p-autocomplete:not(.p-disabled):hover .p-autocomplete-input-multiple {
+    @apply border-surface-400 dark:border-surface-600
+}
+
+.p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-input-multiple {
+    @apply border-primary
+}
+
+.p-autocomplete.p-invalid .p-autocomplete-input-multiple {
+    @apply border-red-400 dark:border-red-300
+}
+
+.p-variant-filled.p-autocomplete-input-multiple {
+    @apply bg-surface-50 dark:bg-surface-800
+}
+
+.p-autocomplete.p-disabled .p-autocomplete-input-multiple {
+    @apply opacity-100 cursor-default bg-surface-200 text-surface-500 dark:bg-surface-700 dark:text-surface-400
+}
+
+.p-autocomplete-chip.p-chip {
+    @apply py-1 rounded-sm
+}
+
+.p-autocomplete-input-multiple:has(.p-autocomplete-chip) {
+    @apply px-1
+}
+
+.p-autocomplete-chip-item.p-focus .p-autocomplete-chip {
+    @apply bg-surface-200 text-surface-800 dark:bg-surface-700 dark:text-surface-0
+}
+
+.p-autocomplete-input-chip {
+    @apply flex-auto inline-flex py-1
+}
+
+.p-autocomplete-input-chip input {
+    @apply border-none outline-none bg-transparent m-0 p-0 shadow-none rounded-none w-full text-inherit
+}
+
+.p-autocomplete-input-chip input::placeholder {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-autocomplete-empty-message {
+    @apply px-3 py-2
+}
+
+.p-autocomplete-fluid {
+    @apply flex
+}
+
+.p-autocomplete-fluid:has(.p-autocomplete-dropdown) .p-autocomplete-input {
+    @apply w-[1%]
+}

package/primevue/avatar.css

@@ -0,0 +1,50 @@
+.p-avatar {
+    @apply inline-flex items-center justify-center
+        w-8 h-8 text-base rounded-md
+        bg-surface-200 dark:bg-surface-700
+}
+
+.p-avatar-image {
+    @apply bg-transparent
+}
+
+.p-avatar-circle,
+.p-avatar-circle img {
+    @apply rounded-full
+}
+
+.p-avatar-icon {
+    @apply text-base
+}
+
+.p-avatar img {
+    @apply w-full h-full
+}
+
+.p-avatar-lg {
+    @apply w-12 h-12 text-2xl
+}
+
+.p-avatar-lg .p-avatar-icon {
+    @apply text-2xl
+}
+
+.p-avatar-xl {
+    @apply w-16 h-16 text-[2rem]
+}
+
+.p-avatar-xl .p-avatar-icon {
+    @apply text-[2rem]
+}
+
+.p-avatar-group {
+    @apply flex items-center
+}
+
+.p-avatar-group .p-avatar + .p-avatar {
+    @apply -ms-4
+}
+
+.p-avatar-group .p-avatar {
+    @apply border-2 border-surface-200 dark:border-surface-700
+}