ui.html

<style type="text/css">
  p, table{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    }
  table{
    padding: 0;
    }
  table td{
    min-width: 20px;
  }
  table th{
    text-align: left;
  }
  button, input{
    height: 32px;
    line-height: 32px;
    padding: 0 8px;
  }

</style>
<div id="setup">
  <h2>Design Token Importer</h2>
  <p>Currently only supports tokens generated by Theo.</p>
  <p>URL to design token raw JSON<input id="url" type="url" placeholder="https://" value=""></p>
  <button id="next">Next</button>
  <button class="cancel" onClick="cancel()">Cancel</button>
</div>
<div id="loading" style="display:none;">
  <p>Loading...</p>
</div>
<div id="select" style="display:none;">
  <p>Select which tokens to import</p>
  <div id="tokenList"></div>
  <button id="import">Import</button>
  <button class="cancel" onClick="cancel()">Cancel</button>
</div>
<div id="error" style="display:none;">
  <h2>Something went wrong!</h2>
  <p id="errorMessage">An error message is supposed to display here.</p>
  <button id="reset">Try again</button>
  <button class="cancel" onClick="cancel()">Cancel</button>
</div>
<script>

const colorTokens = {};

document.getElementById('next').onclick = () => {
  const textbox = document.getElementById('url').value;
  document.getElementById('setup').style.display = "none";
  document.getElementById('loading').style="";
  fetch(textbox)
    .then(response => response.json())
    .then(data => {
      //const jsonData = JSON.parse(data);
      console.log(data);
      const tokenKeys = Object.keys(data.props);
      var selectionTable = '<table class="tokenTable"><thead><tr><th colspan="2">Name</th><th colspan="2">Value</th></tr></thead><tbody>'
      for (var i=0; i<tokenKeys.length; i++) {
        if (data.props[tokenKeys[i]].category == 'background-color'){
          colorTokens[tokenKeys[i]] = data.props[tokenKeys[i]];
          selectionTable+=
`<tr>
  <td><input type="checkbox" name="${tokenKeys[i]}"></td>
  <td><label for="${tokenKeys[i]}">${data.props[tokenKeys[i]].name}</label></td>
  <td>${data.props[tokenKeys[i]].value}</td>
  <td style="background:${data.props[tokenKeys[i]].value}"></td>
</tr>
`
        }
      }
      selectionTable += '</tbody></table>';
      document.getElementById("tokenList").innerHTML = selectionTable; //Instead of this, we need to loop and create a table with color values to select.
      document.getElementById("loading").style.display = "none";
      document.getElementById("select").style = "";
    }).catch(e => {
      document.getElementById("errorMessage").innerHTML = e;
      document.getElementById("loading").style.display = "none";
      document.getElementById("error").style = "";
    })
}

document.getElementById('reset').onclick = () => {
  document.getElementById('error').style.display = "none";
  document.getElementById('setup').style = "";
}

document.getElementById('import').onclick = () => {
  const colors = {}
  const checkboxes = document.querySelectorAll("input[type=checkbox]");
  for (let cb in checkboxes){
    if (checkboxes[cb].checked){
      colors[checkboxes[cb].name] = colorTokens[checkboxes[cb].name];
    }
  }
  parent.postMessage({ pluginMessage: { type: 'create-update-colors', colors } }, '*')
}

function cancel(){
  parent.postMessage({ pluginMessage: { type: 'cancel' } }, '*')
}

</script>