valenti/vocero-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(frontend): retire legacy CSS and isolate visual artwork

Browse Source
This commit is contained in:
alvaro
2026-10-07 10:06:11 -03:00
parent f3bae8ae0c
commit 65eaf36278
16 changed files with 1376 additions and 5334 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/client/architecture.md
+3 -2
View File
@@ -57,8 +57,9 @@ audio. It is not an unconditional byte-for-byte tunnel.
| [client.ts](../../vocero-frontend/src/realtime/client.ts) | Realtime protocol, session lifecycle, audio and transcript events |
| [components](../../vocero-frontend/src/components) | Chat, caller profile, settings and voice components |
| [audio](../../vocero-frontend/src/audio) | TypeScript capture/playback worklets, PCM codec, and visualizer |
| [legacy-theme.css](../../vocero-frontend/src/styles/legacy-theme.css) | Theme tokens, voice artwork and component appearance |
| [layout.css](../../vocero-frontend/src/styles/layout.css) | Shared responsive layout, transcript sizing and reduced-motion behavior |
| [theme.css](../../vocero-frontend/src/styles/theme.css) | Tailwind semantic tokens, configured theme variants and responsive variants |
| [ui.tsx](../../vocero-frontend/src/components/ui.tsx) | Shared Tailwind buttons, fields and dialog controls; layout utilities live with components |
| [styles](../../vocero-frontend/src/styles) | Minimal base defaults, reduced motion, audio artwork, sanitized Markdown, decorative surfaces and native range controls |
## Server routes
docs/client/design.md
+37 -18
View File
@@ -1,7 +1,7 @@
# Design language
This guide describes the current browser UI. Use
[legacy-theme.css](../../vocero-frontend/src/styles/legacy-theme.css) as the token/selector
[theme.css](../../vocero-frontend/src/styles/theme.css) as the Tailwind token
reference and [App.tsx](../../vocero-frontend/src/App.tsx) for the theme-specific structure.
Earlier documentation described a monochrome-only dark UI; the current design
also uses aurora gradients, glass surfaces, and a separate light theme.
@@ -10,8 +10,10 @@ also uses aurora gradients, glass surfaces, and a separate light theme.
`S2S_THEME=white` selects the white/blue interface. Empty or `dark` selects the
dark aurora interface. The browser sets `html[data-theme]` after configuration
loads; an initial visibility guard prevents the wrong theme flashing on first
paint. Extend the existing theme selectors when adding components.
loads; React renders a loading screen until configuration resolves. Theme values
live under `:root` and `html[data-theme="white"]`, with `@theme inline` exposing
semantic utilities. The `white:` and `dark:` variants follow this attribute,
independently of the browser's preferred color scheme.
| Token group | Dark theme values/purpose |
|---|---|
@@ -20,14 +22,20 @@ paint. Extend the existing theme selectors when adding components.
| Text | `--text`, `--text-dim`, `--text-faint` |
| Borders | `--border` and `--border-strong` hairlines |
| Brand | `--brand: #8b5cf6`, `--brand-2: #ec4899`, `--brand-3: #22d3ee` |
| Radius | `--radius-sm: 10px`, `--radius-md: 16px`, `--radius-lg: 26px`, `--radius-xl: 34px` |
| Radius | `rounded-control: 10px`, `rounded-panel: 16px`, `rounded-card: 26px` (22px in white) |
| Shadows | `--shadow-soft`, `--shadow-glow-brand`, `--shadow-glass` |
Use semantic utilities such as `bg-surface`, `bg-surface-raised`, `text-foreground`,
`text-muted`, `border-line`, `rounded-control` and `shadow-panel`. Palette values
are runtime CSS variables; fonts are declared in `@theme`. Keep audio levels and
waveform bands outside the theme token registry.
Prefer existing variables and `color-mix` over new unrelated colors. The dark
theme's orb is the strongest visual focus, while gradients and restrained role
tints also appear in the surrounding interface. The white theme changes
surfaces, typography contrast, controls and chat presentation through its own
selector overrides rather than a second stylesheet.
tokens and explicit component variants. The two voice presentations retain
their separate React markup and scoped artwork.
## Voice state
@@ -62,29 +70,40 @@ details out of ordinary user flows.
## Layout and components
The page uses a column layout: header, voice stage, always-visible inline
conversation, and sticky footer. The conversation is no longer the old
toggleable right overlay. Preserve space below the latest message so the sticky
footer does not obscure it; chat autoscroll retries after layout/reflow changes.
conversation, and footer. The document scrolls naturally while the transcript
has its own scroll area. New messages preserve the reader's position until they
return to the bottom or use the jump-to-latest action.
In the dark theme, the reports sidebar is fixed on the left at desktop widths
of at least 1024px. On smaller screens it becomes an off-canvas panel with a
toggle and backdrop. The white theme hides the sidebar, its toggle, and hint.
The user avatar opens a profile dialog; profile fields collapse from two
columns on narrow screens. Some controls are intentionally gated by `?debug=true`.
of at least 1024px. On smaller screens it becomes a native dialog drawer with a
toggle and backdrop. The white theme omits the sidebar, its toggle, and hint.
The user avatar opens a profile dialog with label/value rows. Some controls are
intentionally gated by `?debug=true`.
Reuse [ui.tsx](../../vocero-frontend/src/components/ui.tsx) for buttons, icon buttons,
fields and dialog controls. Keep layout utilities with the owning component.
Use complete class names in conditional maps; interpolated utility names cannot
be detected reliably. `compact:` preserves the existing maximum width of 600px;
`short:` covers heights at or below 640px. Other artwork breakpoints remain local.
Use the existing button, icon-button, modal, switch and chat-message classes.
The dark theme uses glass bubbles with role tints, borders and restrained glow;
the light theme uses its white/blue message and avatar treatment. Keep required
chat DOM elements intact; optional historical overlay controls may be absent.
the light theme uses its white/blue message and avatar treatment.
The stylesheet entry point imports Tailwind's theme and utilities without
Preflight. Keep resets explicit in `base.css`; enabling Preflight is a separate
visual change. Custom CSS is reserved for the page background, audio artwork,
sanitized Markdown descendants, decorative masks and native range pseudo-elements.
Do not add model-supplied utility classes to the Markdown sanitizer.
## Motion and accessibility
Microphone RMS and assistant audio levels drive the voice visualization.
Breathing, glow and decorative gradients should remain subordinate to speech
feedback. `body.booting` suppresses initial transitions; new animation should
respect that state and `prefers-reduced-motion`.
feedback. Preserve the reduced-motion rules in `base.css`: they disable both
CSS animations and the audio-driven transform variables. Their `!important`
declarations intentionally override inline variables written by the audio engine.
For changes, verify both themes, narrow mobile layouts down to 360px, keyboard
For changes, verify both themes, narrow mobile layouts down to 320px, keyboard
focus, dialog dismissal, and readable contrast. Prefer touch targets of at least
44px and respect safe-area padding. A CSS guideline is not proof that every
existing control already meets the target.