a styling frontend based on open-props
it is a wrapper for open-props to rocket start the next app design no boilierplate and a flexible, preconfigured css style system
- brand-themes
- dark / light mode
- token system
the rovolon contains some dynamic js-functions to provide actions like manually setting the current schema (e.g. dark / light). these functions are shipped within index.ts and can be imported.
themes can be loaded via an overloading theme css-file.
existing themes are only compiled, if they are registered in
src/themes.json.
to create a theme, it is recommended to use the open-props default figma-token export, adjust it in figma to match desired colors, spacings and sizes.
Then export the figma tokens to .json files, put it into a folder named the
theme key and copy the files into that folder.
Make sure, the src/themes.json contains the importing theme and import
it by using bun run import-figmatoken.
Export options must be "Multiple files" and select all options
@todo add a scaffolding to create a theme with folderstructure
With that, a new .css-theme file will created in your theme folder.
if you made changes in the code that should be synced with your figma
files, then you can use bun run export-figmatokens.
The figma files will be created in
a theme is located in src/themes/${name} and consists of at least
one index.css file.
assets, fonts and other files that are related to the theme are located in subfolders of the theme root.
you can easily overwrite or extend the base styles in your theme, by
adding css-files as in base structure and importing it into your theme
index file