ui.html

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      margin: 0;
      padding: 20px;
      background: var(--figma-color-bg);
      color: var(--figma-color-text);
    }
    .topbar {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 10px;
      margin-bottom: 4px;
    }
    .panel {
      margin-top: 12px;
      padding: 12px;
      border: 1px solid var(--figma-color-border);
      border-radius: 10px;
      gap: 10px;
    }
    .hidden {
      display: none;
    }
    .check-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }
    .tag-row {
      display: flex;
      align-items: center;
      width: 100%;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: space-between; 
    }
    .tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 8px;
      border-radius: 6px;
      border: 1px solid var(--figma-color-border);
      font-size: 11px;
      line-height: 1.2;
      background: var(--figma-color-bg-secondary);
      color: var(--figma-color-text-secondary);
      min-width: 100px;
      justify-content: center;
    }
    .tag.ok {
      background: var(--figma-color-bg-success-tertiary);
      border-color: var(--figma-color-border-success);
      color: var(--figma-color-text-success);
    }
    .tag.error {
      background: var(--figma-color-bg-danger-tertiary);
      border-color: var(--figma-color-border-danger);
      color: var(--figma-color-text-danger);
    }
    button {
      background: var(--figma-color-bg);
      color: var(--figma-color-text);
      border: 1px solid var(--figma-color-border-brand);
      padding: 8px 12px;
      border-radius: 6px;
      font-size: 13px;
      cursor: pointer;
      line-height: 18px;
      width: 100%;
    }
    button:hover {
      background: var(--figma-color-bg-hover);
      border: 1px solid var(--figma-color-border-brand-strong);
    }
    button:disabled {
      background: var(--figma-color-bg-disabled);
      color: var(--figma-color-text-disabled);
      border-color: var(--figma-color-border-disabled);
      cursor: default;
      opacity: 0.55;
    }
    button.reload {
      width: auto;
      padding: 6px 10px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      line-height: 1;
      border-radius: 8px;
      opacity: 1;
    }
    button.reload .reload-icon {
      font-size: 14px;
    }
    /* Loading state: hide the label and show a centered spinner inside the
       button that was clicked. The button keeps its normal (non-disabled)
       colors so it reads as "working", not "unavailable". */
    button.loading {
      color: transparent !important;
      position: relative;
      pointer-events: none;
    }
    button.loading::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 14px;
      height: 14px;
      margin: -8px 0 0 -8px;
      border: 2px solid var(--figma-color-text);
      border-top-color: transparent;
      border-radius: 50%;
      animation: spin 0.6s linear infinite;
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    .state-tag {
      display: inline-flex;
      align-items: center;
      padding: 3px 8px;
      border-radius: 6px;
      border: 1px solid var(--figma-color-border);
      background: var(--figma-color-bg-secondary);
      color: var(--figma-color-text-secondary);
      font-size: 11px;
      line-height: 1.2;
      white-space: nowrap;
    }
    .banner {
      margin: 0 0 12px;
      padding: 10px 12px;
      border-radius: 10px;
      border: 1px solid var(--figma-color-border);
      font-size: 12px;
      line-height: 1.4;
      color: var(--figma-color-text-secondary);
      white-space: pre-line;
    }
    .banner.warning {
      border-color: var(--figma-color-border-warning);
      color: var(--figma-color-text-warning);
      background: color-mix(in srgb, var(--figma-color-bg-warning-tertiary) 14%, transparent);
    }
  </style>
</head>
<body>
  <div class="topbar">
    <button id="check-health" class="reload" aria-label="Check again" title="Check again">
      <span class="reload-icon" aria-hidden="true">↻</span>
      <span>Check again</span>
    </button>
    <span id="state-tag" class="state-tag hidden"></span>
  </div>

  <div id="migration-banner" class="banner hidden"></div>

  <div id="scope-panel" class="panel">
    <div id="scope-row" class="check-row hidden">
      <span id="scope-tag" class="tag">Scopes</span>

        <button id="generate-scopes">Fix Scopes</button>

    </div>
  </div>

  <div id="syntax-panel" class="panel">
    <div id="syntax-row" class="check-row hidden">
      <div class="tag-row">
        <span id="syntax-tag" class="tag">Syntax</span>
      </div>

        <button id="generate-syntax">Fix CSS Syntax</button>
    </div>
  </div>

  <script>
    const healthButton = document.getElementById('check-health');
    const scopesButton = document.getElementById('generate-scopes');
    const syntaxButton = document.getElementById('generate-syntax');

    const scopeRow = document.getElementById('scope-row');
    const syntaxRow = document.getElementById('syntax-row');
    const scopePanel = document.getElementById('scope-panel');
    const syntaxPanel = document.getElementById('syntax-panel');
    const stateTag = document.getElementById('state-tag');
    const migrationBanner = document.getElementById('migration-banner');
    const syntaxTag = document.getElementById('syntax-tag');
    const scopeTag = document.getElementById('scope-tag');

    const actionButtons = [healthButton, scopesButton, syntaxButton];

    // The button currently showing a spinner. A fix click keeps its spinner
    // through the follow-up re-check, so it is only cleared when the final
    // check-health result comes back.
    let spinnerButton = null;

    function startLoading(button) {
      spinnerButton = button;
      button.classList.add('loading');
      // Disable the other buttons so two write operations can't overlap; the
      // spinner (not a disabled state) shows where the action is happening.
      actionButtons.forEach((b) => { if (b !== button) b.disabled = true; });
    }

    function stopLoading() {
      if (spinnerButton) {
        spinnerButton.classList.remove('loading');
        spinnerButton = null;
      }
      healthButton.disabled = false;
      // The fix buttons' enabled/hidden state is set by applyHealthSummary.
    }

    function showActionPanels(show) {
      scopePanel.classList.toggle('hidden', !show);
      syntaxPanel.classList.toggle('hidden', !show);
    }

    function showStateTag(state) {
      if (state === 'pre' || state === 'post') {
        stateTag.textContent = state === 'post' ? 'Post-migration' : 'Pre-migration';
        stateTag.classList.remove('hidden');
      } else if (state === 'half') {
        stateTag.textContent = 'Mid-migration';
        stateTag.classList.remove('hidden');
      } else {
        stateTag.classList.add('hidden');
      }
    }

    function handleMigrationState(state) {
      showStateTag(state);
      if (state === 'half') {
        // Non-blocking: the plugin processes whatever color collections are
        // present. Show an informational note but keep the actions available.
        migrationBanner.className = 'banner';
        migrationBanner.textContent =
          'This file looks half-migrated (old and new color collections are mixed). The plugin will fix what it finds — finishing the color migration is still recommended.';
        migrationBanner.classList.remove('hidden');
        showActionPanels(true);
        return true;
      }
      if (state === 'not-library') {
        migrationBanner.className = 'banner';
        migrationBanner.textContent =
          'No Designsystemet color collections found. Open the library file or a themed sketch file.';
        migrationBanner.classList.remove('hidden');
        showActionPanels(false);
        return false;
      }
      migrationBanner.classList.add('hidden');
      showActionPanels(true);
      return true;
    }

    function postAction(actionType) {
      parent.postMessage({ pluginMessage: { type: actionType } }, '*');
    }

    function applyHealthSummary(health) {
      const hasScopeIssues = health.scopeMismatch > 0;
      const syntaxIssueCount = health.syntaxMissing + health.syntaxMismatch;
      const hasSyntaxIssues = syntaxIssueCount > 0;

      scopeRow.classList.remove('hidden');
      syntaxRow.classList.remove('hidden');

      scopeTag.classList.remove('ok', 'error');
      syntaxTag.classList.remove('ok', 'error');
      scopeTag.classList.add(hasScopeIssues ? 'error' : 'ok');
      syntaxTag.classList.add(hasSyntaxIssues ? 'error' : 'ok');

      scopeTag.textContent = hasScopeIssues
        ? `${health.scopeMismatch} variables need scope fixes`
        : 'Scopes correct';
      syntaxTag.textContent = hasSyntaxIssues
        ? `${syntaxIssueCount} variables need syntax fixes`
        : 'Syntax correct';

      scopesButton.classList.toggle('hidden', !hasScopeIssues);
      syntaxButton.classList.toggle('hidden', !hasSyntaxIssues);
      scopesButton.disabled = !hasScopeIssues;
      syntaxButton.disabled = !hasSyntaxIssues;
    }

    healthButton.onclick = () => {
      startLoading(healthButton);
      postAction('check-health');
    };
    scopesButton.onclick = () => {
      startLoading(scopesButton);
      postAction('generate-scopes');
    };
    syntaxButton.onclick = () => {
      startLoading(syntaxButton);
      postAction('generate-syntax');
    };

    onmessage = (event) => {
      const msg = event.data.pluginMessage;
      if (msg.type !== 'action-result') {
        return;
      }

      if (msg.action === 'error') {
        stopLoading();
        migrationBanner.classList.add('hidden');
        return;
      }

      // After a fix, re-run the check while KEEPING the spinner on the fix
      // button — the operation isn't visibly "done" until the re-check renders.
      if (msg.action === 'generate-syntax' || msg.action === 'generate-scopes') {
        postAction('check-health');
        return;
      }

      // check-health result: end of any chain, so clear the spinner.
      stopLoading();

      const canProceed = handleMigrationState(msg.migrationState);
      if (!canProceed) {
        return;
      }

      if (msg.health) {
        applyHealthSummary(msg.health);
      }
    };

    // Resize the plugin window to fit its content. body is content-driven
    // (no fixed height), so its box height reflects whatever panels/banners are
    // currently shown; ResizeObserver fires on every change, including the
    // initial render. The plugin code resizes the window to this height.
    const resizeObserver = new ResizeObserver(() => {
      const height = Math.ceil(document.body.getBoundingClientRect().height);
      parent.postMessage({ pluginMessage: { type: 'resize', height } }, '*');
    });
    resizeObserver.observe(document.body);

    startLoading(healthButton);
    postAction('check-health');
  </script>
</body>
</html>