Styling & Assets
Relevant source files
The following files were used as context for generating this wiki page:
The Styling & Assets system in Horizon governs the visual presentation and static resource management of the CMDB platform's user interface. It utilizes a modern frontend stack based on React, Vite, and Tailwind CSS, integrated into a cross-platform desktop environment via Tauri. The system is designed to provide a consistent, responsive, and accessible experience across different operating systems while supporting both light and dark display modes.
This module encompasses the CSS architecture, icon management, brand assets, and the build pipeline that optimizes these resources for production deployment. The implementation follows an "Inference-First" and "Foundation-First" approach, ensuring that core UI components are modular and scalable as detailed in the Implementation Phases.
Sources: IMPLEMENTATION_PLAN.md:290, crates/ui/vite.config.ts:1-5, crates/ui/src-tauri/tauri.conf.json:1-10
Visual Architecture and Styling
Horizon employs a centralized styling approach using CSS variables and utility-first classes. The core typography and base layout are defined in global stylesheets, while specific components leverage React-based modular styling.
Base Styles and Typography
The application uses the "Inter" font family as its primary typeface, with fallbacks to system fonts like Avenir and Helvetica. The base configuration sets a standard font size of 16px and a line height of 24px for optimal readability.
Sources: crates/ui/src/App.css:7-11
Theme Management
Horizon implements a dual-theme system (Light and Dark) using CSS media queries. The transition between modes affects background colors, text contrast, and interactive element states.
| Element | Light Mode (Default) | Dark Mode (@media) |
|---|---|---|
| Background | #f6f6f6 | #2f2f2f |
| Text Color | #0f0f0f | #f6f6f6 |
| Input/Button BG | #ffffff | #0f0f0f98 |
| Link Hover | #535bf2 | #24c8db |
Sources: crates/ui/src/App.css:13-14, crates/ui/src/App.css:101-118
Asset Processing Flow
The following diagram illustrates how assets are processed from source files through the Vite build pipeline into the final Tauri bundle.
This diagram shows the transformation of source assets into the distribution-ready Tauri application bundle.
Sources: crates/ui/vite.config.ts:8-53, crates/ui/src-tauri/tauri.conf.json:6-11
Asset Management and Bundling
The project manages three primary types of assets: web-standard SVG/PNG files for the UI, platform-specific system icons for Tauri, and dynamic assets managed via the React lifecycle.
Static Assets
Static assets such as vite.svg and tauri.svg are located in the public directory and accessed via absolute paths, while component-specific assets like react.svg are imported directly into TypeScript files to enable build-time hashing and optimization.
Sources: crates/ui/src/App.tsx:2-25, crates/ui/index.html:5
Build Configuration
The build process is tailored for different platforms (Windows vs. macOS/Linux) and build types (Debug vs. Release).
- Targeting: On Windows, the build targets
chrome105, while macOS/Linux targetsafari13. - Minification: Uses
esbuildfor production builds to reduce binary size, while disabling it for debug builds to preserve sourcemaps. - Port Management: The development server uses a fixed port (1420) to maintain connectivity with the Tauri core.
Sources: crates/ui/vite.config.ts:15-18, crates/ui/vite.config.ts:42-52
Component Styling Standards
Interactive components follow a specific design language regarding shadows, transitions, and hover effects to provide tactile feedback.
Buttons and Inputs
Buttons and inputs share a common visual base:
- Border Radius: 8px for a modern, rounded aesthetic.
- Shadow: A subtle
0 2px 2px rgba(0, 0, 0, 0.2)shadow for depth. - Transitions: Hover states use a
0.25sborder-color transition.
Logo Animations
Logos used in the application feature a "drop-shadow" filter on hover, with a 0.75s transition duration. Specific brand colors are applied to these shadows:
- Vite:
#747bff - React:
#61dafb - Tauri:
#24c8db
Sources: crates/ui/src/App.css:1-5, crates/ui/src/App.css:73-88, crates/ui/src/App.css:32-35
Integration with Tauri
The styling and asset system is integrated into the Tauri configuration to ensure the application window and system bundle reflect the project's identity.
Icon Configuration
Tauri is configured to use a suite of icons for different platforms:
- 32x32 / 128x128: Standard PNG icons.
- icns: For macOS compatibility.
- ico: For Windows executable identity.
Sources: crates/ui/src-tauri/tauri.conf.json:23-31
Window Definition
The primary application window is styled with a default width of 800px and height of 600px, serving as the container for the rendered CSS and HTML assets.
Sources: crates/ui/src-tauri/tauri.conf.json:13-19
Summary
The Styling & Assets module of Horizon provides the foundational visual layer of the CMDB. By combining the flexibility of CSS variables and media queries with the robust build pipeline of Vite and Tauri, the project achieves a high-performance, themeable interface. This architecture supports the project's strategic goal of Accessibility by providing multiple interfaces that remain visually consistent across web and desktop environments.
Sources: README.md:38, IMPLEMENTATION_PLAN.md:507-515