dc1d28c670
The composer, the shell frame and sidebar, the right side panel and the create-bot modal were hard-coded dark while the text on them follows the theme, so in the light theme the typed draft, the sidebar rows and the side panel forms rendered dark on dark. - Composer: the island uses the card and foreground tokens; attach, stop and chips use border and foreground tokens, and send is the default primary button. The focus and shadow utilities on the bar are removed: .apple-island always overrode them, so they never rendered. - Shell frame and page background use the background token. The frame's radial gradient never rendered under Tailwind v4 and is dropped. - Sidebar: the panel uses the sidebar tokens on desktop too. The main conversation, roster, project and Heute rows share one token-based row style; muted text measures 4.4:1 on the light sidebar, so row times use a dimmed foreground instead. - Side panel and create-bot modal use background, popover and overlay tokens. Settings helper texts and inactive tabs use the full muted color, which stays above 4.5:1 in light. - Stage vignette, stage pill, ensemble and hero orb, and the transcript paths behind the call overlay use tokens. - E2E: chat-contrast.spec.ts gains a shell test that measures the composer draft, sidebar rows, the new bot form and the bot settings form in both themes and captures screenshots. Claude-Session: https://claude.ai/code/session_01SSVQGR4WU92LaddTP19GcQ Co-authored-by: Claude <noreply@anthropic.com>
23 lines
1.1 KiB
TypeScript
23 lines
1.1 KiB
TypeScript
/** One look for sidebar conversation rows: the main conversation entry and the bot roster. */
|
|
export function rosterRowClass(selected: boolean): string {
|
|
return `flex w-full items-center gap-3 rounded-2xl border px-3 py-3 mb-[2px] text-start transition-all duration-150 cursor-pointer min-h-[52px] ${
|
|
selected
|
|
? "border-sidebar-border bg-sidebar-accent shadow-[inset_0_1px_0_rgba(255,255,255,0.14),0_4px_16px_rgba(0,0,0,0.4)]"
|
|
: "border-transparent hover:bg-sidebar-accent/50"
|
|
}`;
|
|
}
|
|
|
|
export function rosterNameClass(unread: boolean): string {
|
|
return unread ? "font-bold text-sidebar-foreground" : "font-semibold text-sidebar-foreground";
|
|
}
|
|
|
|
// Muted text measures about 4.4:1 on the light sidebar; a dimmed foreground stays above 4.5:1.
|
|
export const rosterTimeClass =
|
|
"text-ui-body-sm text-sidebar-foreground/65 tabular-nums font-medium";
|
|
|
|
export const rosterUnreadDotClass = "inline-block h-2 w-2 rounded-full bg-sidebar-foreground";
|
|
|
|
export function rosterPreviewClass(unread: boolean): string {
|
|
return unread ? "font-medium text-sidebar-foreground" : "text-sidebar-foreground/85";
|
|
}
|