fela-plugin-theme-value
v12.2.1
Published
Fela plugin to resolve values from a theme
Downloads
11,714
Maintainers
Readme
fela-plugin-theme-value
When creating consistent UI, a theme is mandatory too keep everything aligned. With built-in theme support, Fela made that possible from the very beginning.
Yet, using values from the theme can be annoying since one has to access the theme manually and pick the correct values. With tools like theme-ui, a direct string based approach became very popular as it's easy to use and still easy to understand.
This plugin provides basic support for string-based theme values in Fela.
Installation
yarn add fela-plugin-theme-value
You may alternatively use npm i --save fela-plugin-theme-value
.
Usage
Make sure to read the documentation on how to use plugins.
import { createRenderer } from 'fela'
import themeValue from 'fela-plugin-theme-value'
const renderer = createRenderer({
plugins: [themeValue()],
})
Configuration
In order to get the right values from the theme, we have to pass an object that maps each property to the respective theme object.
import { createRenderer } from 'fela'
import themeValue from 'fela-plugin-theme-value'
const themeMapping = {
color: (theme) => theme.colors,
backgroundColor: (theme) => theme.colors,
fontFamily: (theme) => theme.fonts,
}
const themValuePlugin = themeValue(themeMapping)
const renderer = createRenderer({
plugins: [themValuePlugin],
})
Example
Let's imagine we have the following theme:
{
colors: {
foreground: {
primary: "red",
secondary: "blue",
},
background: {
primary: "black",
secondary: "white",
}
},
fonts: {
text: "Helvetica Neue, Arial, sans-serif",
heading: "Impact, serif"
}
}
Input
{
color: "foreground.primary",
backgroundColor: "background.secondary",
fontFamily: "heading"
}
Output
{
color: "red",
backgroundColor: "white",
fontFamily: "Impact, serif"
}
License
Fela is licensed under the MIT License. Documentation is licensed under Creative Common License. Created with ♥ by @robinweser and all the great contributors.