improve(NO-TASK): Standalone typography generation using cursor

Author: aaronware

COLOR-PRESETS-GUIDE.md

@@ -211,4 +211,132 @@ The plugin generates:
 - **Unexpected names**: Check your variable naming structure and hierarchy
 - **Empty color presets**: Verify that you have COLOR type variables in collections other than "Primitives"
 
-For more information on WordPress color presets, see the [WordPress documentation](https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/#color). 
+For more information on WordPress color presets, see the [WordPress documentation](https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/#color).
+
+# Color Presets Guide - Paint Style Integration
+
+This guide explains how the Figma to WordPress Theme.json Exporter handles color presets with Paint Style integration for better labeling control.
+
+## Overview
+
+The plugin now uses **Paint Styles** for user-friendly display names while maintaining **Variables** for proper CSS variable references. This gives you the best of both worlds:
+
+- **Paint Styles**: Provide human-readable, designer-friendly names
+- **Variables**: Ensure proper CSS variable references and maintain design system consistency
+
+## How It Works
+
+### 1. Variable-Based Colors with Paint Style Labels
+
+When you have a Paint Style that references a Variable:
+
+```
+Paint Style: "Midnight" 
+  ↓ references
+Variable: "brand/primary"
+  ↓ generates
+WordPress Preset: {
+  name: "Midnight",           // From Paint Style
+  slug: "brand-primary",      // From Variable name
+  color: "var(--wp--custom--brand--primary)"  // From Variable
+}
+```
+
+### 2. Standalone Paint Styles
+
+When you have a Paint Style without bound variables:
+
+```
+Paint Style: "Standalone Blue"
+  ↓ generates
+WordPress Preset: {
+  name: "Standalone Blue",    // From Paint Style
+  slug: "standalone-blue",    // From Paint Style name
+  color: "#0000ff"           // Direct hex value
+}
+```
+
+### 3. Variables Without Paint Styles
+
+When you have a Variable without a bound Paint Style:
+
+```
+Variable: "brand/primary"
+  ↓ generates
+WordPress Preset: {
+  name: "Brand Primary",      // From Variable name
+  slug: "brand-primary",      // From Variable name
+  color: "var(--wp--custom--brand--primary)"  // From Variable
+}
+```
+
+## Best Practices
+
+### For Designers
+
+1. **Create Paint Styles** for colors you want to appear in the UI with friendly names
+2. **Bind Paint Styles to Variables** for design system consistency
+3. **Use descriptive Paint Style names** like "Midnight", "Forest Green", "Sunset Orange"
+4. **Keep Variable names semantic** like "brand/primary", "brand/secondary", "accent/warning"
+
+### For Developers
+
+1. **CSS variables will always reference the Variable name**, not the Paint Style name
+2. **The slug in theme.json will match the Variable name** for consistency
+3. **Display names in the UI will use Paint Style names** when available
+4. **Fallback to Variable names** when no Paint Style is bound
+
+## Example Workflow
+
+1. **Create Variables** in Figma:
+   - `brand/primary` (red color)
+   - `brand/secondary` (green color)
+
+2. **Create Paint Styles** and bind them to Variables:
+   - Paint Style "Midnight" → bound to `brand/primary`
+   - Paint Style "Forest Green" → bound to `brand/secondary`
+
+3. **Export to WordPress**:
+   ```json
+   {
+     "settings": {
+       "color": {
+         "palette": [
+           {
+             "name": "Midnight",
+             "slug": "brand-primary",
+             "color": "var(--wp--custom--brand--primary)"
+           },
+           {
+             "name": "Forest Green", 
+             "slug": "brand-secondary",
+             "color": "var(--wp--custom--brand--secondary)"
+           }
+         ]
+       }
+     }
+   }
+   ```
+
+4. **Use in WordPress**:
+   ```css
+   .my-element {
+     background-color: var(--wp--preset--color--brand-primary);
+   }
+   ```
+
+## Benefits
+
+- **Better UX**: Users see friendly names like "Midnight" instead of "brand/primary"
+- **Consistent References**: CSS variables always reference the semantic Variable names
+- **Design System Integrity**: Variables maintain the design system structure
+- **Flexibility**: Can use Paint Styles for presentation while keeping Variables for logic
+
+## Migration
+
+If you're upgrading from the previous version:
+
+- **Existing exports will continue to work** - the plugin maintains backward compatibility
+- **New exports will show Paint Style names** in the UI when available
+- **CSS variable references remain unchanged** - they still use Variable names
+- **No changes needed to existing WordPress themes** - the CSS variable structure is preserved 

INSTALL.md

@@ -12,7 +12,7 @@
 
 If you're installing the plugin manually:
 
-1. Download the plugin files from the repository
+1. Download the latest plugin release or clone this repository and run `npm install && npm run build`
 2. In Figma, go to Menu > Plugins > Development > Import plugin from manifest
 3. Select the manifest.json file from the downloaded files
 
@@ -52,7 +52,7 @@ For the best results when using the WordPress Theme.json Exporter:
 2. Go to Menu > Plugins > WordPress Theme.json Export > Export to theme.json
 3. In the plugin UI, you can:
    - Choose to include typography presets (from text styles)
-   - Generate color presets with customizable selection
+   - Generate color presets with customizable selection (If adding/editing variables, you may need to close and reopen the plugin if color variables are msising)
    - Generate spacing presets from spacing variables
    - Upload an existing theme.json file to merge variables into it
    - Preview the generated theme.json and additional style files

export.html

@@ -499,15 +499,22 @@
 	</div>
 
 	<div class="options">
+	  <div class="option-row">
+		<input type="checkbox" id="generate-color-presets" />
+		<label for="generate-color-presets">Generate color presets from color variables</label>
+		<button type="button" class="customize-button" id="customize-colors" disabled>Customize</button>
+	  </div>
+
 	  <div class="option-row">
 		<input type="checkbox" id="generate-typography" />
 		<label for="generate-typography">Generate typography presets from text styles <em>(10up tooling)</em></label>
 	  </div>
+
 	  <div class="option-row">
-		<input type="checkbox" id="generate-color-presets" />
-		<label for="generate-color-presets">Generate color presets from color variables</label>
-		<button type="button" class="customize-button" id="customize-colors" disabled>Customize</button>
+		<input type="checkbox" id="generate-wordpress-typography" />
+		<label for="generate-wordpress-typography">Generate WordPress-native typography structure <em>(fontFamilies, fontSizes, etc.)</em></label>
 	  </div>
+
 	  <div class="option-row">
 		<input type="checkbox" id="generate-spacing-presets" />
 		<label for="generate-spacing-presets">Generate spacing presets from spacing variables</label>
@@ -776,6 +783,7 @@ <h3 class="modal-title">Customize Color Presets</h3>
 	document.getElementById("export").addEventListener("click", () => {
 	  // Get the state of the checkboxes
 	  const generateTypography = document.getElementById("generate-typography").checked;
+	  const generateWordPressTypography = document.getElementById("generate-wordpress-typography").checked;
 	  const generateColorPresets = document.getElementById("generate-color-presets").checked;
 	  const generateSpacingPresets = document.getElementById("generate-spacing-presets").checked;
 	  const useRem = document.getElementById("use-rem").checked;
@@ -793,6 +801,7 @@ <h3 class="modal-title">Customize Color Presets</h3>
 		  type: "EXPORT",
 		  options: {
 			generateTypography,
+			generateWordPressTypography,
 			generateColorPresets,
 			generateSpacingPresets,
 			baseTheme,

manifest.json

@@ -1,11 +1,17 @@
 {
-  "name": "WordPress Theme.json Export",
+  "name": "Figma to WordPress Theme.json",
   "id": "1476325215239454172",
   "api": "1.0.0",
   "editorType": ["figma"],
   "permissions": [],
   "main": "dist/code.js",
-  "networkAccess": { "allowedDomains": ["https://cdnjs.cloudflare.com"] },
+  "networkAccess": {
+      "allowedDomains": ["https://cdnjs.cloudflare.com",
+      "https://schemas.wp.org/trunk/theme.json",
+      "https://fonts.googleapis.com",
+      "https://fonts.gstatic.com"
+    ]
+  },
   "menu": [
     { "command": "export", "name": "Export to theme.json" },
     { "command": "css-vars", "name": "Apply CSS Variable Syntax" }