ui.html

<style>
  * {
    margin: 0;
    box-sizing: border-box;
  }
  body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 20px;
  }
  h2 {
    text-align: center;
    margin-bottom: 20px;
  }
  textarea {
    border: 1px solid #eee;
    border-radius: 4px;
    width: 100%;
    height: 300px;
    resize: none;
    font-family: monospace;
    padding: 8px;
    outline: none;
    border: 2px solid #eee;
    margin-bottom: 20px;
    font-size: 14px;
  }
  textarea::selection {
    background: transparent;
  }
  button {
    display: flex;
    align-items: center;
    gap: 0 8px;
    border: none;
    height: 32px;
    padding: 0 8px;
    border-radius: 4px;
    background-color: #3d61e5;
    color: white;
    cursor: pointer;
  }
  .actions {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 30px;
  }
  p, a {
    font-size: 12px;
    text-align: center;
    font-family: monospace;
  }
</style>

<div>
  <h2>SCSS Auto Mixin And Color</h2>
  <textarea readonly></textarea>
  <div class="actions">
    <button id="create-text-type">Create Text Type</button>
    <button id="create-color">Create Color</button>
    <button id="copy">
      <svg fill="#fff" height="16" width="16" viewBox="0 0 422 422">
        <g>
          <polygon points="291,0 51,0 51,332 121,332 121,80 291,80 	"/>
          <polygon points="306,125 306,195 376,195 	"/>
          <polygon points="276,225 276,110 151,110 151,442 391,442 391,225 	"/>
        </g>
      </svg>
      <span>Copy</span>
    </button>
  </div>
  <p>with love ♥️ <a href="https://twitter.com/emreeakdas" target="_blank">@emreeakdas</a></p>
</div>

<script>
document.getElementById('create-text-type').addEventListener("click", () => {
  parent.postMessage({ pluginMessage: "create-text-type"}, '*');
});

document.getElementById('create-color').addEventListener("click", () => {
  parent.postMessage({ pluginMessage: "create-color"}, '*');
});

document.getElementById('copy').addEventListener("click", () => {
  const textarea = document.querySelector("textarea");
  if(!textarea.value){
    alert("Create Text Type or Color!");
  }else {
    textarea.select();
    document.execCommand('copy');
    alert("Copied!");
  }
});

onmessage = (event) => {
  document.querySelector("textarea").value = event.data.pluginMessage;
}
</script>