Lesli theme

LesliAssets is the framework implementation of the Lesli visual language. It connects the shared color definitions from lesli-css to Tailwind CSS and provides the fonts, logos, icons, views, and email assets used by Lesli applications.

Theme layers

Lesli applications use the Tailwind interface documented here. The lower-level palette API and token generation belong to the lesli-css library.

Color groups

• Brand color palette provides the stable Lesli brand scale.
• Semantic colors communicate status and intent.
• Collection colors identify product areas and data series.

Runtime customization

The numbered palettes are stable design tokens. A Lesli application can separately configure contextual colors such as the primary brand, sidebar, header, footer, and page background.

Lesli.configure do |config|
    config.theme = {
        color_primary: "#245F93",
        color_sidebar: "#ffffff",
        color_header: "transparent",
        color_footer: "transparent",
        color_background: "#eef2f6",
        color_sidebar_hover: "#E3EEF6"
    }
end

These values are exposed as runtime CSS properties and can change without recompiling Tailwind. In application markup, use unnumbered utilities for theme-aware surfaces and numbered utilities for fixed design-system colors:

<aside class="bg-sidebar">
    <a class="hover:bg-primary-100">Dashboard</a>
</aside>

<button class="bg-primary text-white hover:bg-primary-600">
    Continue
</button>

The complete Tailwind theme API and build workflow will be documented separately.