Button*

SketchSystems.spec

Button*
  disable -> disabled
  enabled*
    default*
      hover -> hover
      tab -> focus
      click -> pressedFocus
      tap -> pressed
    focus
      click -> pressedFocus
      blur -> default
      hover -> hoverFocus
    hover
      tab -> hoverFocus
      leave -> default
      click -> pressedFocus
    hoverFocus
      click -> pressedFocus
      leave -> focus
      blur -> hover
    pressed
      release -> hover
    pressedFocus
      release -> hoverFocus
  disabled
    enable -> default
  

SketchSystems_prototype.js

const red = "#D40511";

function render(model){
  let isSecondary = false; // isSecondary = true;
  let isText =  false; // isText = true;
  
  let state = model.active_states[0].name;
  let color = red;
  let fontColor = "#FFFFFF";
  let primary = {
    style: {
      color: "white",
      backgroundColor: color,
      borderWidth: "0",
      borderColor: color,
      padding: "1.1em 3em .9em",
      margin: "0 1em 1em 0",
      fontFamily: "FrutigerLTStd-Bold",
      fontSize: "16px",
      lineHeight: "1.3em",
      transition: "all .3s",
      maxWidth: "18em",
      outline: "none"
    }
  };
  
  primary.style.borderRadius = "4px";
  //primary.style.borderRadius = "24px";
  //primary.style.borderRadius = "0";
  
  let attrs = JSON.parse(JSON.stringify(primary));
  attrs.onMouseDown = function() {model.emit("click")};
  attrs.onMouseUp = function() {model.emit("release")};
  attrs.onMouseOver = function() {model.emit("hover")};
  attrs.onMouseOut = function() {model.emit("leave")};
  attrs.onFocus = function() {model.emit("tab")};
  attrs.onBlur = function() {model.emit("blur")};
  
  if(state === "hover" || state === "hoverFocus") { color = "#FF0000" }
  if(state === "pressed" || state === "pressedFocus") { color = "#C00000"; attrs.style.transform = "scale(.97)" }
  if(state === "disabled") { color = "rgba(50,50,50,1)"; attrs.style.opacity = ".3" }
    if(state === "focus" || state === "hoverFocus" || state === "pressedFocus") { attrs.style.boxShadow = `0 0 0 2px rgba(255,255,255,1), 0 0 0 4px ${color}` }
  
  if(isSecondary || isText) {
    attrs.style.color = color;
    attrs.style.borderColor = color;
    attrs.style.backgroundColor = "transparent";
    if(isSecondary && !isText) { attrs.style.borderWidth = "1px"; }
  }
  else {
    attrs.style.backgroundColor = color;
    attrs.style.borderColor = color;
    attrs.style.color = fontColor;
  }
  
  if(isText) { attrs.padding = "1.1em 1.2em .9em" }
  
  return <div style={{padding: "2em", maxWidth: "40em"}}>
      <button {...primary}>Another Button with two lines of text</button>
      <button {...attrs}>The current state is: {state}</button>
      <button {...primary}>Does nothing</button>
      <button {...attrs}>Does something</button>
    </div>
}