# @warp/ui

Warp's design system for Vue 3 and Tailwind CSS v4: the brand tokens, fonts,
icons and logo, and the components built on them. Every Warp app in the
browser uses it, so a colour or a radius is changed here once.

The package ships source, not a build: apps import the `.vue` and `.ts`
files and their own Vite compiles them.

## Use

```css
/* the app's main stylesheet */
@import "tailwindcss";
@import "@warp/ui/styles.css";
```

```ts
import { WButton, WTextField, WBanner, useTheme } from '@warp/ui'
```

The stylesheet brings in:

- `tokens.css`: the colour, type, space, radius and shadow tokens as CSS
  variables, the three font faces and the type classes (`title`, `heading`,
  `body`, `small`, `caption`, `mxid`, `code`, ...). Dark follows the OS, or
  `data-theme="dark"` on `<html>` (`useTheme()` sets it).
- A Tailwind theme on those tokens. The default palette is cleared, so the
  colour utilities are the token names: `bg-surface-sunken`, `text-ink-muted`,
  `border-line`, `text-teal-text`. They switch with the theme on their own;
  no `dark:` variants. `shadow-raised` and `shadow-float` are the tokens'
  `shadow-sm` and `shadow-lg`.
- The component styles (`wp-*` classes) from the brand package, plus the
  ones drawn here for the apps: card, switch, checkbox, select, textarea,
  dialog, table, nav item, segmented control, spinner.

## Components

| Component | What |
|---|---|
| `WLogo` | horizontal lockup or symbol, never redrawn |
| `WIcon` | the stroke icons, in `currentColor` |
| `WButton`, `WIconButton` | actions; one `primary` per view |
| `WTextField`, `WTextArea`, `WSelect`, `WCheckbox`, `WSwitch` | forms |
| `WAvatar`, `WBadge` | identity and status |
| `WBanner` | feedback; always icon and words, never colour alone |
| `WDialog` | modal on the native `<dialog>` |
| `WSpinner` | progress |
| `WRoomItem` | a row of the room list: avatar, name, preview, time, unread counter |
| `WMessageBubble` | a message with sender, time and delivery status (`sending`, `sent`, `read`, `failed`) |
| `WComposer` | the message field: attach, Enter sends, Shift+Enter adds a line |

## Where things come from

`src/styles/tokens.css`, `tokens.json`, `fonts/`, the 20 brand icons in
`src/icons/` and the logo paths in `src/logos/` are copies from the brand
package (`warp-brand/design-system`). Change them there and copy them over.
The other icons (`home`, `globe`, `key`, `trash`, ...) were drawn for the
apps on the same grid: 24px, 1.75 stroke, round caps and joins.

The fonts are Outfit, Figtree and JetBrains Mono under the SIL Open Font
License.

The three chat components are the brand package's `RoomItem`,
`MessageBubble` and `Composer`. The Matrix state itself is not here: it
lives with the web client (`apps/web/src/stores`, `apps/web/src/matrix`),
which the desktop app will reuse as a whole.