fela-plugin-theme-value

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.