@improv/theme v0.10.1

@improv/theme

Tiny theming utilities.

Try it on codesandbox.io.

API

Utilities

• getDefaultTheme()
  • Returns the default theme.
• getExtendedTheme(partialTheme, theme?)
  • Deep merge the partial theme with another them, or the default them if the theme argument is omitted.
• getBindings(options)
  • Returns framework (e.g. React or Preact) bindings: useTheme(), <Theme>.
  • See @improv/react-theme for pre-build React bindings.
  • See @improv/preact-theme for pre-build Preact bindings.

Theming

Theme values are always strings, and are always nested 3 objects deep.

const theme = getDefaultTheme();
const baseColor = theme.color.base.front;

Categories

The root theme object contains keys for "categories". The color and size categories are always present, because they are part of the default theme.

Scopes

Each theme category is an object with keys for "scopes". The color category will always have base, passive, and active scopes, and the size category will always have a base scope, because they are part of the default theme.

Values

Each theme scope is a map of string "values".

In all color category scopes, the following values are required:

• front
• trim
• back

In the size category base scope, the following values are always available, because they are part of the default theme.

• miniscule
• tiny
• smaller
• small
• medium
• large
• larger
• huge
• gigantic