The WorldAPI theme

How WorldAPI makes the black and white components of components.hybriel.worldapi.org look for itself: the palette and its named roles, plain elements without frames, the components themed without being forked, and three app shells with a header that works on a phone.

An app copies theme/ and shared/tokens.hl, inherits the theme in its styles.hl, picks a shell and sets its accent. Try another accent in the sidebar: every page follows it.

Use it in an app See the elements

Shells

• Content-firstA regular app: sidebar + main content; the phone shows the content, the sidebar slides in.
• List-firstNotes: the phone shows the list first, an item replaces it; desktop shows both.
• Three-paneMail: folders, the list, the opened item with its actions; desktop shows all three.

Themed components

• Month viewA month to page through; today is marked.
• Date pickerA date field with a month popup.
• Date range pickerOne field for a period.
• PaginationPrevious 1 … 44 45 46 … 89 Next.
• Markdown editorVisual Markdown, the value stays Markdown.
• Code editorColoured code with line numbers.
• File uploadDrop or choose one file.
• File upload, severalDrop or choose many files, a row each.
• File upload, pick firstCollect, paste, thumbnails, ✕; the page sends.
• ModalA window over the dimmed page.
• CommentsA thread with Markdown, likes, edit and delete.
• Media playerAudio and video, phone first, with a queue.