@grfzhl/rovolon

rovolon

A styling frontend based on open-props

It is a wrapper for open-props to rocket start the next app design no boilerplate and a flexible, preconfigured css style system

• brand-themes
• dark / light mode
• token system with import from figma
• existing design system to make it easy and efficient to develop a design and turning it into an app

Its lightweight because it is almost CSS only. Consistency comes through the design token. Core CSS can be overwritten in themes.

Dynamic functions

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.

Theme

Themes can be loaded via an overloading theme css-file.

Existing themes are only compiled, if they are registered in src/themes.json.

Theme creation

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.

New theme structure can be created with

bun generate

Export theme to figma-token

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

Structure

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.

Extending and overwriting

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