tajniak81andClaude Opus 5.5
7e5e38c921
apps/ui: Warp's design system for Vue 3 + Tailwind v4. Tokens, fonts, icons and logo come from the brand package, with a Tailwind theme on the tokens and Vue components on the brand component styles. apps/admin: the admin panel as a separate, optional service. warp-admin embeds the built Vue app and proxies only the login endpoints and /_warp/admin/v1 to the homeserver. Pages: dashboard, users, rooms, federation, registration and tokens, server notices, application services, audit log. Also: pnpm workspace, go.work entry, Dockerfile, an `admin` compose profile, Makefile targets, a CI job with a proxy smoke test, and docs. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2.3 KiB
@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
/* the app's main stylesheet */
@import "tailwindcss";
@import "@warp/ui/styles.css";
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, ordata-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; nodark:variants.shadow-raisedandshadow-floatare the tokens'shadow-smandshadow-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 |
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 Matrix store (Pinia over matrix-js-sdk) joins this package with the web client.