Contrast category open

SketchSystems.spec

Contrast category open
  Card Displayed
    Color A does not contrast with color B*
      Generating suggested colors
        Loaded -> Suggested colors shown
      Suggested colors shown
        pick suggested color -> Color A has sufficient contrast with color B
      change color A -> Checking Color A with Color B
      change color B -> Checking Color A with Color B
      move element -> Checking Color A with Color B
    Color A has sufficient contrast with color B
      click done btn -> Card Hidden
      
  Checking Color A with Color B
    passed check -> Color A has sufficient contrast with color B
    failed check -> Generating suggested colors
    Both color A and B have changed -> Error state
    Element is deleted -> Error state
    Element is removed from page -> Error state
    
  Card Hidden
    Tooltip shown
     click tooltip Undo -> Color A does not contrast with color B
     click X button -> Tooltip hidden
    10 seconds pass -> Card Destroyed
    
  Card Destroyed&
   Tooltip hidden
   
  Error state
   Display error tooltip
    Refresh view -> Contrast category open

SketchSystems_prototype.js

function render(model){
  let current_state_name = model.active_states[0].name;
  return $("h1",
           {style: {color: "darkBlue"}},
           `The current state is: ${current_state_name}`);
}