tajniak81andClaude Opus 5.5
325431a5be
Server: GET /voip/turnServer, configured under client_api.turn. A shared
secret (coturn use-auth-secret) gives each user expiring TURN REST API
credentials; static credentials are the fallback; with nothing configured
it answers {} so clients still try a direct connection.
Web client: 1:1 calls (Matrix VoIP via matrix-js-sdk) in rooms with one
other person. Voice and video buttons in the room header, a ringing card
with answer, answer without video and decline, and a call panel that
stays up across rooms: mute, camera, screen sharing, expand, hang up,
ring tones. Call events show in the timeline and room list. Works around
the SDK keeping a failed microphone request forever.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@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 |
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.