React + St

integration.js

// define some abstract style transformations
// bumpFontSize :: CSS -> CSS
const bumpFontSize = evolve({
  fontSize: add(4),
});

// darkenText :: CSS -> CSS
const darkenText = evolve({
  color: a => chroma(a).darken().hex(),
});

// brandify :: CSS -> CSS
const brand = evolve({
  fontFamily: always("Circular Air Pro"),
});

// and some primitive styles
const shadowed = Style.of({
  boxShadow: "0 2px 3px rgba(0,0,0,.25)",
});

// that relies on more props
const outlineify = style =>
  Style(props => ({
    ...style,
    border: props.outline ? "1px solid currentColor" : "none",
    color: props.outline ? style.backgroundColor : style.color,
    backgroundColor: props.outline ? "transparent" : style.backgroundColor,
  }));


// use in render function as <GenericButtonStyle primary={true} />
const GenericButtonStyle = Style(props => ({
  fontSize: 16,
  fontWeight: "bold",
  fontFamily: "SF UI Display",
  backgroundColor: props.primary ? "green" : "blue",
  color: "white",
}))
  .render(Button); // or "button" on web


// use in render function as <OutlinedBrandButton outline={true} />
const OutlinedBrandButton = GenericButtonStyle
  .map(brand)
  .concat(shadowed)
  .chain(outlineify);

// sugar
const OutlinedBrandButton = GenericButtonStyle
  .class(brand)
  .add(shadowed)
  .chain(outlineify);

// if conditional
const MaybeBrand = GenericButtonStyle
  .if(_ => _.primary, brand)