Mixins

You can easily create overridable style mixins for your components. Here we'll create a mixin for adding a drop shadow to a component. By making it a mixin, we get two benefits:

• It's DRY, and reusable in multiple components
• The component's users can override the mixin, so they can easily make the shadow darker or lighter. They can even remove the mixin to eliminate drop shadows altogether.

Setting up the mixin

Add mixins as an object in the global meta. Remember, the meta is your place to do anything you want:

const ourLibraryMeta = {
  colors: {/* ... */},
  mixins: {
    dropShadows: {
      light: {boxShadow: '0 0 3px rgba(0,0,0,0.2)'},
      heavy: {boxShadow: '0 0 5px rgba(0,0,0,0.4)'}
    }
    // etc
  },
  grid: {/* ... */}
};

Using the mixin

If you have a component that needs a drop shadow, add the mixin to your component's styling function:

function dynamicStyle({props, componentTheme, globalMeta}) {
  return Object.assign(
    {}, componentTheme,
    globalMeta.mixins.dropShadows.light,    // add your mixin
    props.dark && {borderThickness: '2px'}  // and other dynamic styles
  );
}

Overriding

Your component users can set up their application theme with changes to your mixins. Anything you put into the global meta can be overridden, as long as the user matches the structure of the object:

const appTheme = {
  Button: {/* ... */},
  meta: {
    colors: {/* ... */},
    mixins: {
      dropShadows: {
        light: {boxShadow: '0 2px 2px rgba(0,0,0,0.1)'},
        heavy: null  // user can eliminate all heavy dropshadows
      }
      // etc
    },
    grid: {/* ... */}
  }
};