spec.md

Definition

Theme is an object that defines the look and feel of a component. A component is allowed to implement a subset of this standard.

Reserved Properties

Reserved properties are styles, classes and themes. It is allowed to use all of them in one Theme.

Options

Any property name other than reserved one, can be used as an option. Option values can be of any type.

Example

const theme = {
  option1: value1,
  option2: value2
}

Styles

A styles object is a map of names and style objects, where name is any valid property name and value is a style object. Style object may have any property names and values which can be rendered inline, defined by the css-style-attr specification.

const theme = {
  styles: {
    button: {
      padding: 10,
      boxSizing: 'border-box'
    }
  }
}

Classes

A classes object is a map of names and class names. Name is any valid property name. Value is a set of space-separated tokens representing the various classes. html class attribute spec.

const theme = {
  classes: {
    button: 'button-df3d4',
    icon: 'icon-j4h4g'
  }
}

Subthemes

Subthemes are useful when you have a higher order component exposed to the user, but you need to make it's child components themeable as well.

A themes object is a map of theme names and themes. Theme name can be any valid property name. Value is theme object defined on top of this document.

const theme = {
  classes: {
    button: 'button-df3d4',
  },
  themes: {
    childComponentName: {
      classes: {
        button: 'button-fwer23'
      }
    }
  }
}