UI Components & Theming
Relevant source files
The following files were used as context for generating this wiki page:
The UI Components & Theming system in LiveCanvas provides a unified design language across both the web and mobile platforms. The system is built on a foundation of design tokens—specifically spacing, typography, and color—to ensure visual consistency while allowing for platform-specific implementations. The web frontend leverages Tailwind CSS and DaisyUI, while the mobile application utilizes a custom theme provider with React Native.
Sources: ARCHITECTURE.md, mobile/src/theme/tokens.ts:1-48
Design Tokens
Design tokens are the atomic building blocks of the UI. They define the core aesthetic values used across the application to maintain a consistent look and feel.
Spacing and Radius
The project uses a standard spacing scale and border radius presets to handle layout and container shapes. The mobile implementation explicitly defines these in logical pixels.
| Token | Type | Values |
|---|---|---|
| Spacing | Scale | xs: 4, sm: 8, md: 16, lg: 24, xl: 32 |
| Radius | Presets | sm: 8, md: 14, lg: 24, pill: 999 |
Sources: mobile/src/theme/tokens.ts:4-18
Typography
Typography presets are defined to standardize text styles such as headings, body text, and labels.
| Preset | Attributes |
|---|---|
| eyebrow | Size: 12, Weight: 700, Letter Spacing: 1.4, Uppercase |
| heading | Size: 30, Weight: 700 |
| body | Size: 16, Line Height: 24 |
| label | Size: 14, Weight: 600 |
Sources: mobile/src/theme/tokens.ts:21-39
Web Theming Architecture
The web platform utilizes a plugin-based architecture for theming, primarily driven by DaisyUI and Tailwind CSS. Themes are defined using OKLCH color values to support modern color spaces and high-fidelity gradients.
Theme Configuration
The application supports multiple themes, with specific configurations for light and dark modes. The "light" theme is inspired by Phoenix colors, while the "dark" theme is inspired by Elixir colors.
The system also includes a custom Heroicons plugin that makes hero-#{ICON} classes available by masking SVGs and using currentColor for background coloring.
Sources: assets/css/app.css:1-85, assets/vendor/heroicons.js:5-40
DaisyUI Integration
The daisyui-theme.js bundle provides the logic for switching themes via CSS variables. It handles the injection of base styles into the :root or specific [data-theme] selectors.
Sources: assets/vendor/daisyui-theme.js:450-485
Mobile UI Components
The mobile application features a suite of reusable primitives designed to meet Apple Human Interface Guidelines (HIG), such as ensuring a minimum touch-target size of 44 logical pixels.
Component Library
| Component | Purpose |
|---|---|
| AppButton | Shell-level button with Primary and Secondary variants. |
| AppCard | Themed container with consistent padding and border radius. |
| AppHeader | Screen header with optional eyebrow, title, and subtitle. |
| ScreenState | Primitives for Loading, Error (with retry), and Empty states. |
Sources: mobile/src/components/AppButton.tsx:21-25, mobile/src/components/AppCard.tsx:16-19, mobile/src/components/ScreenState.tsx:16-18
Interaction and State Flow
The ScreenState component manages the visual feedback loop for the user during data fetching or error conditions.
Component implementation Example: AppButton
The AppButton uses the useAppTheme hook to dynamically apply colors based on the current theme and handles the "pressed" state by adjusting opacity.
// mobile/src/components/AppButton.tsx:32-52
export function AppButton({ label, onPress, variant = 'primary', style }: AppButtonProps) {
const theme = useAppTheme();
const isPrimary = variant === 'primary';
return (
<Pressable
onPress={onPress}
style={({ pressed }) => [
styles.base,
{
backgroundColor: isPrimary ? theme.colors.accent : theme.colors.surfaceMuted,
opacity: pressed ? 0.85 : 1,
},
style,
]}
>
<Text style={[styles.label, { color: isPrimary ? theme.colors.accentText : theme.colors.text }]}>
{label}
</Text>
</Pressable>
);
}
Sources: mobile/src/components/AppButton.tsx:32-52
Summary
The UI Components & Theming system ensures that LiveCanvas maintains high visual standards across platforms. By utilizing design tokens for mobile and OKLCH-based CSS plugins for web, the architecture allows for shared aesthetic intent while respecting the technical constraints of each platform. Components like AppButton and AppCard serve as standardized building blocks for the mobile shell, while DaisyUI extensions provide a flexible foundation for the web frontend.