HOA Connect
The workspace surface: liquid glass, one accent, light and dark.
The workspace ships one brand accent, but it is resolved through getAdminAccent() — so letting an organization brand their own workspace is a one-line change. Pick a colour to preview it: the buttons, links, focus rings, glass rims and the active tab thumb all re-tint together.
Seven roles. Actions are Title Case, meta-labels are UPPERCASE, prose is sentence case.
type-displaytype-sectiontype-cardtype-bodytype-metatype-microtype-labelPill by default. One primary action per view.
The one way to switch between sibling views. Arrow keys move and select; the thumb slides on the house spring.
Direction and goodness are separate: dues going up is an increase and bad news.
Sortable headers, keyboard-reachable rows, and a built-in empty state. Collapses to labelled cards on phones. `row-class` tints a whole row when its state — not one of its cells — is what matters.
| Type | |||
|---|---|---|---|
Every chart sits in an AppChartCard, which owns the three states a chart really has — loading, empty, drawn. Colour comes from --chart-1…5, declared light and dark, so a chart follows the theme without being told. A colour that MEANS something (overdue, failed) leaves the categorical ramp for the status tokens instead.
Email notifications
Progress
The create/edit surface. Drag the grabber down to dismiss — past 100px or with a flick it goes, otherwise it springs back.
Glass belongs to floating chrome and cards — never to content backgrounds, and never stacked glass-on-glass.
glass-surface--strongios-cardglass-edgeglassactive-thumb