Module theme 

Design token system for consistent styling.

Centralizes all visual design constants—colors, typography, spacing, and border radii—as Rust constants. These tokens ensure visual consistency across all components.

Philosophy

Design tokens are the single source of truth for styling:

• Colors: Brand palette, semantic colors, syntax highlighting
• Typography: Font sizes optimized for accessibility (+2px base)
• Spacing: Consistent rhythm for margins and padding
• Radii: Border radius scale from sharp to fully rounded

Usage

Import tokens directly or use CSS custom properties:

use logicaffeine_web::ui::theme::{self, colors, font_size, spacing};

// Direct constant usage
let style = format!("color: {}; font-size: {};", colors::PRIMARY_BLUE, font_size::BODY_LG);

// Or inject CSS variables and use var(--name)
let vars = theme::css_variables();
rsx! {
    style { "{vars}" }
    div { style: "color: var(--color-primary-blue);", "Hello" }
}

Accessibility

All font sizes have been increased by 2px from typical values to improve readability. Text colors use sufficient contrast ratios against dark backgrounds.

Modules

colors

Color palette for the application.

font_family

Font family stacks with fallbacks.

font_size

Font size scale.

radius

Border radius scale.

spacing

Spacing scale for consistent rhythm.

Functions

css_variables

Returns a CSS block that defines all theme variables as CSS custom properties. Include this in your root component to make variables available everywhere.