css-vars.html

<style>
	:root {
	  --spacing: 0.8rem;
	}
  
	* {
	  box-sizing: border-box;
	  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
		Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
		sans-serif;
	}
  
	body {
	  background-color: var(--figma-color-bg);
	  color: var(--figma-color-text);
	  margin: 0;
	  padding: var(--spacing);
	  min-height: 400px;
	  min-width: 800px;
	  position: relative;
	  overflow: hidden;
	}
  
	html,
	body {
	  height: 100%;
	}
  
	main {
	  display: flex;
	  flex-direction: column;
	  gap: var(--spacing);
	  max-height: calc(100% - 20px);
	  overflow-y: auto;
	}
  
	button {
	  appearance: none;
	  border-radius: 4px;
	  padding: var(--spacing);
	  background-color: var(--figma-color-bg-brand);
	  border: none;
	  color: var(--figma-color-text-onbrand);
	  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segma UI",
		Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
		sans-serif;
	  font-weight: bold;
	  cursor: pointer;
	  width: 100%;
	}

	button:disabled {
	  background-color: var(--figma-color-bg-disabled);
	  color: var(--figma-color-text-disabled);
	  cursor: not-allowed;
	}

	.info-text {
	  font-size: 0.9rem;
	  margin-bottom: var(--spacing);
	  color: var(--figma-color-text-secondary);
	}

	.options {
	  display: flex;
	  flex-direction: column;
	  gap: calc(var(--spacing) / 2);
	  margin-bottom: var(--spacing);
	  background-color: var(--figma-color-bg-secondary);
	  padding: var(--spacing);
	  border-radius: 4px;
	}
	
	.option-row {
	  display: flex;
	  align-items: center;
	  gap: calc(var(--spacing) / 2);
	}
	
	.option-row label {
	  font-size: 0.9rem;
	  cursor: pointer;
	}
	
	.option-row input[type="checkbox"] {
	  cursor: pointer;
	}

	.status {
	  background-color: var(--figma-color-bg-secondary);
	  padding: var(--spacing);
	  border-radius: 4px;
	  font-size: 0.9rem;
	  color: var(--figma-color-text-secondary);
	  margin-top: var(--spacing);
	  display: none;
	}

	.status.success {
	  background-color: var(--figma-color-bg-success);
	  color: var(--figma-color-text-onbrand);
	}

	.status.error {
	  background-color: var(--figma-color-bg-danger);
	  color: var(--figma-color-text-onbrand);
	}

	code {
	  background-color: var(--figma-color-bg);
	  padding: 2px 4px;
	  border-radius: 2px;
	  font-family: monospace;
	  font-size: 0.85em;
	}
</style>

<main>
	<div class="info-text">
		Apply CSS custom property syntax to your Figma variables for easier handoff to developers.
		<br><br>
		Variables will get code syntax in the format: <code>var(--wp--custom--xxx, originalValue)</code>
	</div>
	
	<div class="options">
		<div class="option-row">
			<input type="checkbox" id="overwrite-existing-vars" />
			<label for="overwrite-existing-vars">Overwrite existing CSS variable syntax</label>
		</div>
	</div>
	<!--
	<button id="apply-vars-btn" type="button">Apply CSS Variable Syntax to All Variables</button>
-->
	<div id="status" class="status"></div>
</main>

<script>
	const overwriteCheckbox = document.getElementById("overwrite-existing-vars");
	const applyButton = document.getElementById("apply-vars-btn");
	const statusDiv = document.getElementById("status");

	// Apply CSS var syntax to Figma variables
	applyButton.addEventListener("click", () => {
		const overwriteExisting = overwriteCheckbox.checked;
		
		// Disable button during processing
		applyButton.disabled = true;
		applyButton.textContent = "Applying...";
		
		// Hide previous status
		statusDiv.style.display = "none";
		statusDiv.className = "status";
		
		// Send message to plugin
		parent.postMessage({ 
			pluginMessage: { 
				type: "APPLY_CSS_VAR_SYNTAX",
				options: {
					overwriteExisting
				}
			} 
		}, "*");
	});

	window.onmessage = ({ data: { pluginMessage } }) => {
		if (pluginMessage.type === "CSS_VAR_SYNTAX_RESULT") {
			// Re-enable the apply button
			applyButton.disabled = false;
			applyButton.textContent = "Apply CSS Variable Syntax to All Variables";
			
			// Show status
			statusDiv.style.display = "block";
			
			if (pluginMessage.error) {
				console.error("Error applying CSS var syntax:", pluginMessage.error);
				statusDiv.className = "status error";
				statusDiv.textContent = "Error: " + pluginMessage.error;
			} else {
				const result = pluginMessage.result;
				const message = `✅ Applied CSS var syntax to ${result.updatedCount} variables${result.skippedCount > 0 ? `, skipped ${result.skippedCount} existing variables` : ''}`;
				console.log("CSS var syntax applied:", result);
				statusDiv.className = "status success";
				statusDiv.textContent = message;
			}
		}
	};
</script>