Update generated Lumo.css to also include typography styles

[marcushellberg]

Describe your motivation

With Hilla 24.4 and the new FS router, I can create a project on start.spring.io, add a index file in the views directory and have a running Hilla app. But loading Lumo is difficult. I don't want to create a full themes folder structure because I will be writing all my CSS in plain CSS files anyway.

Describe the solution you'd like

I would like to be able to import lumo styles from CSS, something like

@import('@vaadin/lumo/all.css');
/* or more specific ones */
@import('@vaadin/lumo/utility.css');

Describe alternatives you've considered

Loading it with JS like this. But loading CSS in JS feels wrong.

Additional context

This is to help people starting their Vaadin journey outside of start.vaadin.com to get a nice looking app with minimal work.

[web-padawan]

There are CSS files generated for @vaadin/react-components project, e.g. @vaadin/react-components/Lumo.css.

[marcushellberg]

That doesn't seem to work in a 24.4.alpha18 project.

import '@vaadin/react-components/Lumo.css';

Generates a Vite-error:

[vite] Internal server error: Missing "./Lumo.css" specifier in "@vaadin/react-components" package

[web-padawan]

My bad, the correct exported file is @vaadin/react-components/css/Lumo.css. See the list of package exports.

[marcushellberg]

Thanks. That worked.

It would be helpful in my opinion if Lumo.css also included typography so that the font styles it loads also get applied to the page.

[web-padawan]

It would be helpful in my opinion if Lumo.css also included typography

Updated the issue accordingly and moved to the correct repository.