Theme Value Plugin

[robinweser]

Description

This PR adds a new plugin: fela-plugin-theme-value.
It allows to use string-based theme value keys directly in style objects.

Example

If required, add a code example or a link to a working example (repository).

// given this theme
const theme = {
  colors: {
    foreground: {
      primary: "red",
      secondary: "blue"
    },
    background: {
      primary: "black",
      secondary: "white"
    }
  },
  fonts: {
    text: "Helvetica Neue, Arial, sanf-serif",
    heading: "Impact, serif"
  }
}

// with given plugin configuration
themeValue({
  color: theme => theme.colors,
  backgroundColors: theme => theme.colors,
  fontFamily: theme => theme.fonts
})

// one can now write style like this
const style = {
  color: "foreground.primary",
  backgroundColor: "background.secondary",
  fontFamily: "heading"
}

Packages

List all packages that have been changed.

• fela-plugin-theme-value

Versioning

Minor

Checklist

Quality Assurance

You can also run yarn run check to run all 4 commands at once.

• The code was formatted using Prettier (yarn run format)
• The code has no linting errors (yarn run lint)
• All tests are passing (yarn run test)
• There are no flow-type errors (yarn run flow)

Changes

If one of the following checks doesn't make sense due to the type of PR, just check them.

• Tests have been added/updated
• Documentation has been added/updated
• My changes have proper flow-types

[montogeek]

@robinweser It is possible to get typings when writing

css({ color: "foreground.prim..."})

?