reducers.js

const Reducer = (run) => ({
  run,
  concat: (other) => Reducer((acc, x) => other.run(run(acc, x), x)),
  map: (f) => Reducer((acc, x) => f(run(acc, x))),
  contramap: (f) => Reducer((acc, x) => run(acc, f(x))),
});

const baseStyles = () => ({
    backgroundColor: theme.backgroundColors.primary,
    color: 'white'
    //... other styles

})

// The helper functions called here take care of keeping spacing and  other things consistent across components.
// Example: A large button should have 25% more padding than a medium button and paddingFromSize takes care of that.
const widthFromProps = (styles, { size }) => ({
  ...styles,
  display:
    size === "full" && styles.display.includes("inline")
      ? stripInline(styles.display)
      : styles.display,
  width: size === "full" ? "100%" : remFromSize(size),
  padding: paddingFromSize(styles.padding, size),
});

const colorFromProps = (styles, { type }) => ({
  ...styles,
  color: theme.colors[type],
  backgroundColor: theme.backgroundColors[type],
});

const disabled = (styles) => ({
    // Filters out things like shadow, border, etc...
    ...{filterColoredProperties(styles)},
    backgroundColor: theme.backgroundColors[disabled]
})

const useCSS = (props) => {
  const colorReducer = Reducer(colorFromProps);
  const widthReducer = Reducer(widthFromProps);
  const disabledReducer = Reducer(disabled)

  const finalStyles = Reducer(baseStyles).concat(colorReducer).concat(widthReducer).concat(disabledReducer).run({}, props);
  return finalStyles
};