Link*

SketchSystems.spec

Link*
  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 state = model.active_states[0].name;
  let borderColor = "rgba(255,0,0,.1)";
  let backgroundColor = 'transparent';
  let fontColor = red;
  let primary = {
    style: {
      color: red,
      borderBottom: "1px solid",
      borderColor: borderColor,
      fontFamily: "FrutigerLTStd-Roman",
      fontSize: "16px",
      lineHeight: "1.5em",
      transition: "all .3s",
      maxWidth: "18em",
      outline: "none",
   		padding: ".25em 0 .125em 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") { fontColor = "#FF0000" }
  if(state === "pressed" || state === "pressedFocus") { fontColor = "#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.borderBottom = `1px solid ${fontColor}`; borderColor = fontColor; backgroundColor = "rgba(255,0,0,.1)"; }
  

  attrs.style.backgroundColor = backgroundColor;
  attrs.style.borderColor = borderColor;
  attrs.style.color = fontColor;
  
  return <div style={{padding: "2em", maxWidth: "40em", fontFamily: "FrutigerLTStd-Roman"}}>
      <a href="#" {...primary}>Another Button with two lines of text</a> ölkhadsfa {" "}
			<a href="#" {...attrs}>The current state is WHAT?</a> adfasdfasdf {" "}
      <a href="#" {...primary}>Does nothing</a> aasdfasdfasdf {" "}
      <a href="#" {...attrs}>Does something</a> DFDdsfsDFSDF
    </div>
}