{"_id":"@baur-software/figma-to","_rev":"6-ffb20eb001ad879ca2e2b0e969413d03","name":"@baur-software/figma-to","dist-tags":{"latest":"0.5.0"},"versions":{"0.1.0":{"name":"@baur-software/figma-to","version":"0.1.0","keywords":["figma","tailwind","ionic","design-tokens","mcp","solidjs","capacitor"],"author":{"name":"Baur Software"},"license":"MIT","_id":"@baur-software/figma-to@0.1.0","maintainers":[{"name":"baursoftware","email":"info@baursoftware.com"},{"name":"sarbada","email":"sarbada@baursoftware.com"}],"homepage":"https://github.com/Baur-Software/Figma-To#readme","bugs":{"url":"https://github.com/Baur-Software/Figma-To/issues"},"dist":{"shasum":"ac6fe7dfc2e99d34c341b960c98f5c9ab5b7938e","tarball":"https://registry.npmjs.org/@baur-software/figma-to/-/figma-to-0.1.0.tgz","fileCount":58,"integrity":"sha512-ikzu/Ro0R22IVkAnMux+tfWlGOm86+0rgSIA1jsi+253D6Sr6UHfL7Vnn7khEol9taI0NjQN8WU08/6cvwfqXg==","signatures":[{"sig":"MEUCIA/5DNDp5U6U3J5ReUI0Hxsj3Mev56vNAJx8Qj4oNQ33AiEAu220OrfJDp7RPPyOqc7lGPPRhJAqhQGevD3tMzqF5GA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@baur-software%2ffigma-to@0.1.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":176383},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","engines":{"node":">=20"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./adapters/figma":{"types":"./dist/adapters/figma/index.d.ts","import":"./dist/adapters/figma/index.js"},"./adapters/tailwind-ionic":{"types":"./dist/adapters/tailwind-ionic/index.d.ts","import":"./dist/adapters/tailwind-ionic/index.js"}},"gitHead":"6dd6b12a02d23937735f63e497805032d4032f4a","scripts":{"dev":"tsc --watch","lint":"eslint src","test":"vitest","build":"tsc","test:e2e":"playwright test","test:run":"vitest run","typecheck":"tsc --noEmit"},"_npmUser":{"name":"baursoftware","email":"info@baursoftware.com"},"repository":{"url":"git+https://github.com/Baur-Software/Figma-To.git","type":"git"},"_npmVersion":"10.8.2","description":"Transform Figma design tokens to any framework via adapters","directories":{},"_nodeVersion":"20.19.5","dependencies":{"@figma/rest-api-spec":"^0.34.0"},"_hasShrinkwrap":false,"devDependencies":{"vitest":"^2.1.0","typescript":"^5.7.0","@types/node":"^22.0.0","@playwright/test":"^1.57.0"},"peerDependencies":{"tailwindcss":"^4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/figma-to_0.1.0_1764111830528_0.10312172590893232","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@baur-software/figma-to","version":"0.2.0","keywords":["figma","tailwind","ionic","design-tokens","mcp","solidjs","capacitor"],"author":{"name":"Baur Software"},"license":"MIT","_id":"@baur-software/figma-to@0.2.0","maintainers":[{"name":"baursoftware","email":"info@baursoftware.com"},{"name":"sarbada","email":"sarbada@baursoftware.com"}],"homepage":"https://github.com/Baur-Software/Figma-To#readme","bugs":{"url":"https://github.com/Baur-Software/Figma-To/issues"},"bin":{"figma-to":"dist/cli.js"},"dist":{"shasum":"e2d94e6ac2370a1b29d63dec8c1ae00b2507833a","tarball":"https://registry.npmjs.org/@baur-software/figma-to/-/figma-to-0.2.0.tgz","fileCount":62,"integrity":"sha512-jyE1BJ8HyazJ76o76tGFrUE4N5he3iUh5YxBbXAsJf83V1vSvoRlwqTiyGYSMGeRy+aNdR7wDJuRj0nvydeuCw==","signatures":[{"sig":"MEUCIBDg4DE4ws8EuWwOeD7zVNRj83Az01hFU/krJOm+wy6LAiEAoBt4pHBGup9AScbFXSLh+3gErDMSFBrZcP5Miog29T8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@baur-software%2ffigma-to@0.2.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":184364},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","engines":{"node":">=20"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./adapters/figma":{"types":"./dist/adapters/figma/index.d.ts","import":"./dist/adapters/figma/index.js"},"./adapters/tailwind-ionic":{"types":"./dist/adapters/tailwind-ionic/index.d.ts","import":"./dist/adapters/tailwind-ionic/index.js"}},"gitHead":"be023ae539fb8394a52662f3ad663ca0d251bf84","scripts":{"dev":"tsc --watch","lint":"eslint src","test":"vitest","build":"tsc","test:e2e":"playwright test","test:run":"vitest run","typecheck":"tsc --noEmit"},"_npmUser":{"name":"baursoftware","email":"info@baursoftware.com"},"repository":{"url":"git+https://github.com/Baur-Software/Figma-To.git","type":"git"},"_npmVersion":"10.8.2","description":"Transform Figma design tokens to any framework via adapters","directories":{},"_nodeVersion":"20.19.5","dependencies":{"@figma/rest-api-spec":"^0.34.0"},"_hasShrinkwrap":false,"devDependencies":{"vitest":"^2.1.0","typescript":"^5.7.0","@types/node":"^22.0.0","@playwright/test":"^1.57.0"},"peerDependencies":{"tailwindcss":"^4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/figma-to_0.2.0_1764114259448_0.40475907419807444","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"name":"@baur-software/figma-to","version":"0.3.0","keywords":["figma","tailwind","ionic","design-tokens","mcp","solidjs","capacitor"],"author":{"name":"Baur Software"},"license":"MIT","_id":"@baur-software/figma-to@0.3.0","maintainers":[{"name":"baursoftware","email":"info@baursoftware.com"},{"name":"sarbada","email":"sarbada@baursoftware.com"}],"homepage":"https://github.com/Baur-Software/Figma-To#readme","bugs":{"url":"https://github.com/Baur-Software/Figma-To/issues"},"bin":{"figma-to":"dist/cli.js"},"dist":{"shasum":"c53a7b4419c485bdc58739869123aa57a36d5bea","tarball":"https://registry.npmjs.org/@baur-software/figma-to/-/figma-to-0.3.0.tgz","fileCount":62,"integrity":"sha512-HWK5aRMGHZsKmlWT7W1e6IXHHC/UzzfFI8ueavtl1gPZ6c/I6dK3UEkhSuQRpGqSgw1yvjHJgCKdbxpX8Tu38Q==","signatures":[{"sig":"MEYCIQDT2nrvTM6WdjxF2oS2PwO3O/9IYePkFj6ccuPne6pdswIhAP3lH8nA2XPrJFt7F/YEKAaXACj1mbaPhA0qFvFS6bL7","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@baur-software%2ffigma-to@0.3.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":203826},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","engines":{"node":">=20"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./adapters/figma":{"types":"./dist/adapters/figma/index.d.ts","import":"./dist/adapters/figma/index.js"},"./adapters/tailwind-ionic":{"types":"./dist/adapters/tailwind-ionic/index.d.ts","import":"./dist/adapters/tailwind-ionic/index.js"}},"gitHead":"066e94958ec88af0eb308e008333390e80edec3a","scripts":{"dev":"tsc --watch","lint":"eslint src","test":"vitest","build":"tsc","test:e2e":"playwright test","test:run":"vitest run","typecheck":"tsc --noEmit"},"_npmUser":{"name":"baursoftware","email":"info@baursoftware.com"},"repository":{"url":"git+https://github.com/Baur-Software/Figma-To.git","type":"git"},"_npmVersion":"10.8.2","description":"Transform Figma design tokens to any framework via adapters","directories":{},"_nodeVersion":"20.19.5","dependencies":{"@figma/rest-api-spec":"^0.34.0"},"_hasShrinkwrap":false,"devDependencies":{"vitest":"^2.1.0","typescript":"^5.7.0","@types/node":"^22.0.0","@playwright/test":"^1.57.0"},"peerDependencies":{"tailwindcss":"^4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/figma-to_0.3.0_1764188710109_0.4989365075189105","host":"s3://npm-registry-packages-npm-production"}},"0.4.0":{"name":"@baur-software/figma-to","version":"0.4.0","keywords":["figma","tailwind","ionic","design-tokens","mcp","solidjs","capacitor"],"author":{"name":"Baur Software"},"license":"MIT","_id":"@baur-software/figma-to@0.4.0","maintainers":[{"name":"baursoftware","email":"info@baursoftware.com"},{"name":"sarbada","email":"sarbada@baursoftware.com"}],"homepage":"https://github.com/Baur-Software/Figma-To#readme","bugs":{"url":"https://github.com/Baur-Software/Figma-To/issues"},"bin":{"figma-to":"dist/cli.js"},"dist":{"shasum":"db9e6ddcb0664e6d40f2a0dac1cc4b97c557907f","tarball":"https://registry.npmjs.org/@baur-software/figma-to/-/figma-to-0.4.0.tgz","fileCount":147,"integrity":"sha512-/mSqSxEITIC5QRhrDwojex7zgJcljLOq3CC0PzF2holdLPK+IyyqGCKWg4VA5LkrDp3cEViKGa4aldGSk2TZhw==","signatures":[{"sig":"MEQCIFtR9Lt4nNusyBUQ47RBljKTQ0S8dxeGQVJc6NMSVV9jAiBu+dbITAC3cVc/0z3vRFM1DMpWr8cMgjrb9oOecpUN7Q==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@baur-software%2ffigma-to@0.4.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":459165},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","engines":{"node":">=20"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./adapters/figma":{"types":"./dist/adapters/figma/index.d.ts","import":"./dist/adapters/figma/index.js"},"./adapters/tailwind-ionic":{"types":"./dist/adapters/tailwind-ionic/index.d.ts","import":"./dist/adapters/tailwind-ionic/index.js"}},"gitHead":"56425d580a17fa4e192df29539d31c7765891307","scripts":{"dev":"tsc --watch","lint":"eslint src","test":"vitest","build":"tsc","test:e2e":"playwright test","test:run":"vitest run","typecheck":"tsc --noEmit"},"_npmUser":{"name":"baursoftware","email":"info@baursoftware.com"},"repository":{"url":"git+https://github.com/Baur-Software/Figma-To.git","type":"git"},"_npmVersion":"10.8.2","description":"Transform Figma design tokens to any framework via adapters","directories":{},"_nodeVersion":"20.19.5","dependencies":{"@figma/rest-api-spec":"^0.34.0"},"_hasShrinkwrap":false,"devDependencies":{"vitest":"^2.1.0","typescript":"^5.7.0","@types/node":"^22.0.0","@playwright/test":"^1.57.0"},"peerDependencies":{"tailwindcss":"^4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/figma-to_0.4.0_1764433051207_0.7246835055452245","host":"s3://npm-registry-packages-npm-production"}},"0.5.0":{"name":"@baur-software/figma-to","version":"0.5.0","keywords":["figma","tailwind","ionic","design-tokens","mcp","solidjs","capacitor"],"author":{"name":"Baur Software"},"license":"MIT","_id":"@baur-software/figma-to@0.5.0","maintainers":[{"name":"baursoftware","email":"info@baursoftware.com"},{"name":"sarbada","email":"sarbada@baursoftware.com"}],"homepage":"https://github.com/Baur-Software/Figma-To#readme","bugs":{"url":"https://github.com/Baur-Software/Figma-To/issues"},"bin":{"figma-to":"dist/cli.js"},"dist":{"shasum":"2a5e038f3455d77853d4a4baa4de1c65316e01c9","tarball":"https://registry.npmjs.org/@baur-software/figma-to/-/figma-to-0.5.0.tgz","fileCount":224,"integrity":"sha512-XEJ2Etb1Wh8oVeka3OsOvTPZiRQCLtQUlHd+A/JcQPbg9sriop3bOW8DaDhwNtYBfOd5ZiBRYcZDJtJzNEOBIQ==","signatures":[{"sig":"MEYCIQDm5YR7O6785P3J6o1mlnRw2gGfThBVQNCO0ghvjH0ZnQIhAIrOBM5jVYPFRXp2snWKPPzGCXphf3m+XkOlKO76YU1p","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@baur-software%2ffigma-to@0.5.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":673372},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","engines":{"node":">=20"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./adapters/figma":{"types":"./dist/adapters/figma/index.d.ts","import":"./dist/adapters/figma/index.js"},"./adapters/tailwind-ionic":{"types":"./dist/adapters/tailwind-ionic/index.d.ts","import":"./dist/adapters/tailwind-ionic/index.js"}},"gitHead":"688d3227180a467ba1b334b8ba094623aeae20a8","scripts":{"dev":"tsc --watch","lint":"eslint src","test":"vitest","build":"tsc","test:e2e":"playwright test","test:run":"vitest run","typecheck":"tsc --noEmit"},"_npmUser":{"name":"baursoftware","email":"info@baursoftware.com"},"repository":{"url":"git+https://github.com/Baur-Software/Figma-To.git","type":"git"},"_npmVersion":"10.8.2","description":"Transform Figma design tokens to any framework via adapters","directories":{},"_nodeVersion":"20.19.5","dependencies":{"@figma/rest-api-spec":"^0.34.0"},"_hasShrinkwrap":false,"devDependencies":{"vitest":"^2.1.0","typescript":"^5.7.0","@types/node":"^22.0.0","@playwright/test":"^1.57.0"},"peerDependencies":{"tailwindcss":"^4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/figma-to_0.5.0_1764447059809_0.06637618570298609","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2025-11-25T23:03:50.462Z","modified":"2026-03-24T22:28:48.816Z","0.1.0":"2025-11-25T23:03:50.740Z","0.2.0":"2025-11-25T23:44:19.665Z","0.3.0":"2025-11-26T20:25:10.356Z","0.4.0":"2025-11-29T16:17:31.414Z","0.5.0":"2025-11-29T20:11:00.021Z"},"bugs":{"url":"https://github.com/Baur-Software/Figma-To/issues"},"author":{"name":"Baur Software"},"license":"MIT","homepage":"https://github.com/Baur-Software/Figma-To#readme","keywords":["figma","tailwind","ionic","design-tokens","mcp","solidjs","capacitor"],"repository":{"url":"git+https://github.com/Baur-Software/Figma-To.git","type":"git"},"description":"Transform Figma design tokens to any framework via adapters","maintainers":[{"email":"info@baursoftware.com","name":"baursoftware"}],"readme":"# @baur-software/figma-to\n\nTransform Figma design tokens to any framework via adapters.\n\nThis library bridges **Figma's MCP server** and **REST API** with your frontend stack through a pluggable adapter architecture.\n\n## Current Adapters\n\n### Input Adapters\n\n- **Figma** - Parse Figma REST API and MCP server responses\n\n### Output Adapters\n\n- **Tailwind/Ionic** - Generate production-ready CSS for:\n  - **Tailwind CSS v4** (`@theme` directive with CSS variables)\n  - **Ionic Framework** (CSS custom properties with color variants)\n  - **SolidJS / Capacitor** applications\n\n- **Figma** - Push design tokens back to Figma:\n  - Variables (colors, dimensions, strings, booleans)\n  - Text Styles (typography tokens)\n  - Effect Styles (shadows)\n  - Paint Styles (gradients)\n\n- **SCSS** - Generate SCSS partials with variables, maps, and mixins\n\n## Why This Library?\n\n**Keep your design and code in sync automatically.**\n\nTraditionally, when designers update colors, spacing, or typography in Figma, developers manually copy those values into code. This creates drift, inconsistencies, and wasted time.\n\nWith `@baur-software/figma-to`, you can:\n\n- **Eliminate manual token translation** - Figma variables become CSS automatically\n- **Stay in sync with design changes** - Re-run the generator whenever Figma updates\n- **Use AI-assisted workflows** - With Figma's MCP server, Claude can read your design tokens and generate theme CSS in one conversation\n- **Support multiple modes** - Light/dark themes from Figma variable modes, no manual duplication\n- **Get framework-ready output** - Ionic color variants (shade, tint, contrast, RGB) generated automatically\n\n### The Workflow\n\n```text\nFigma Variables  →  This Library  →  Production CSS\n     ↓                   ↓                 ↓\n  Designer            Automated        Developer\n  updates             sync             ships\n  tokens              script           features\n```\n\n**Without this library:** Designer changes primary color → Slack message → Developer searches codebase → Updates 5 files → Hopes nothing was missed\n\n**With this library:** Designer changes primary color → CI runs sync script → PR with all CSS updated → Ship it\n\n### AI-Powered Design Sync\n\nWhen using Claude with the [Figma MCP server](https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Figma-MCP-server), just ask:\n\n```text\nYou: \"Get the design tokens from my Figma file and generate theme CSS\"\n```\n\nClaude will:\n\n1. Use `get_variable_defs` to fetch your Figma variables\n2. Use this library to transform them into Tailwind/Ionic CSS\n3. Write the CSS files to your project\n\nNo scripts to maintain - the library handles `Font()` and `Effect()` strings from MCP automatically.\n\n## Installation\n\n```bash\nnpm install @baur-software/figma-to\n```\n\n## CLI\n\nQuickly sync your Figma design tokens to CSS:\n\n```bash\n# Using npx\nnpx @baur-software/figma-to sync --file YOUR_FIGMA_FILE_KEY --output ./src/theme\n\n# Or install globally\nnpm install -g @baur-software/figma-to\nfigma-to sync --file YOUR_FIGMA_FILE_KEY --output ./src/theme\n```\n\nSet your Figma token:\n\n```bash\nexport FIGMA_TOKEN=your_figma_token\n```\n\n## Quick Start\n\n```typescript\nimport { figmaToTailwind } from '@baur-software/figma-to';\n\n// From Figma REST API response\nconst output = await figmaToTailwind({\n  variablesResponse: figmaApiResponse,\n});\n\n// Write the generated CSS\nfs.writeFileSync('theme.css', output.css);\n```\n\n## Usage\n\n### From Figma MCP Server\n\nWhen using the [Figma MCP server](https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Figma-MCP-server) with Claude or other AI assistants:\n\n```typescript\nimport { figmaToTailwind } from '@baur-software/figma-to';\n\n// From MCP get_variable_defs tool\nconst output = await figmaToTailwind({\n  variableDefs: mcpVariables,  // { \"Color/Primary/500\": \"#3880f6\", ... }\n  fileName: 'My Design System',\n});\n\nconsole.log(output.css);\n```\n\nThe library also supports the full MCP response format:\n\n```typescript\n// MCP server response from get_figma_data tool\nconst output = await figmaToTailwind({\n  mcpData: mcpResponse,\n});\n```\n\n### From Figma REST API\n\n```typescript\nimport { figmaToTailwind } from '@baur-software/figma-to';\n\n// Fetch variables from Figma API\nconst response = await fetch(\n  `https://api.figma.com/v1/files/${fileKey}/variables/local`,\n  { headers: { 'X-Figma-Token': token } }\n);\nconst variablesResponse = await response.json();\n\nconst output = await figmaToTailwind({\n  variablesResponse,\n  fileKey,\n});\n```\n\n### Two-Step Workflow\n\nFor more control, separate parsing and generation:\n\n```typescript\nimport { parseTheme, generateOutput } from '@baur-software/figma-to';\n\n// Step 1: Parse Figma data to normalized theme\nconst theme = await parseTheme({\n  variablesResponse: figmaApiResponse,\n});\n\n// Inspect or modify the theme\nconsole.log(theme.collections.map(c => c.name));\n\n// Step 2: Generate output with custom options\nconst output = await generateOutput(theme, {\n  tailwind: { colorFormat: 'oklch' },\n  framework: 'solidjs',\n});\n```\n\n### Using Adapters Directly\n\n```typescript\nimport {\n  createFigmaAdapter,\n  createTailwindIonicAdapter,\n} from '@baur-software/figma-to';\n\nconst figmaAdapter = createFigmaAdapter();\nconst theme = await figmaAdapter.parse({ variablesResponse });\n\nconst outputAdapter = createTailwindIonicAdapter();\nconst output = await outputAdapter.transform(theme, options);\n```\n\n## Output Structure\n\n```typescript\nconst output = await figmaToTailwind({ variablesResponse });\n\n// Combined CSS with all sections\noutput.css;\n\n// Tailwind CSS v4 output\noutput.tailwind.themeCss;      // @theme { ... } block\noutput.tailwind.darkModeCss;   // Dark mode overrides\noutput.tailwind.variables;     // Array of { name, value, comment }\n\n// Ionic output\noutput.ionic.css;              // :root { --ion-color-* } + .ion-color-* classes\noutput.ionic.theme;            // Structured theme object\n\n// Separate files for different use cases\noutput.files['tailwind-theme.css'];  // Just Tailwind\noutput.files['ionic-theme.css'];     // Just Ionic\noutput.files['variables.css'];       // Pure CSS variables\n```\n\n## Options\n\n```typescript\nconst output = await figmaToTailwind(input, {\n  // Select specific mode (default: uses collection's default mode)\n  mode: 'Dark',\n\n  // Target framework for additional CSS\n  framework: 'solidjs', // 'solidjs' | 'react' | 'vue' | 'angular'\n\n  // Generate dark mode CSS\n  darkMode: true,\n\n  // Tailwind-specific options\n  tailwind: {\n    colorFormat: 'oklch',    // 'oklch' | 'hex'\n    includeComments: true,\n    ionicIntegration: true,\n    prefix: '',\n  },\n\n  // Ionic-specific options\n  ionic: {\n    includeColorClasses: true,\n  },\n\n  // Output formatting\n  format: {\n    comments: true,\n    minify: false,\n  },\n});\n```\n\n## Generated CSS Examples\n\n### Tailwind CSS v4 (`@theme`)\n\n```css\n@theme {\n  /* color */\n  --color-primary-500: oklch(59.15% 0.1895 262.47);\n  --color-secondary-500: oklch(78.23% 0.1342 168.91);\n  --color-success: oklch(67.84% 0.1756 149.23);\n\n  /* spacing */\n  --spacing-1: 4px;\n  --spacing-2: 8px;\n  --spacing-4: 16px;\n\n  /* font-family */\n  --font-family-sans: \"Inter\", sans-serif;\n\n  /* radius */\n  --radius-sm: 4px;\n  --radius-md: 8px;\n  --radius-lg: 16px;\n}\n```\n\n### Ionic Theme\n\n```css\n:root {\n  --ion-color-primary: #3880f6;\n  --ion-color-primary-rgb: 56, 128, 246;\n  --ion-color-primary-contrast: #ffffff;\n  --ion-color-primary-contrast-rgb: 255, 255, 255;\n  --ion-color-primary-shade: #3171d8;\n  --ion-color-primary-tint: #4c8df7;\n\n  --ion-color-secondary: #3cd6af;\n  /* ... */\n}\n\n.ion-color-primary {\n  --ion-color-base: var(--ion-color-primary);\n  --ion-color-base-rgb: var(--ion-color-primary-rgb);\n  --ion-color-contrast: var(--ion-color-primary-contrast);\n  --ion-color-contrast-rgb: var(--ion-color-primary-contrast-rgb);\n  --ion-color-shade: var(--ion-color-primary-shade);\n  --ion-color-tint: var(--ion-color-primary-tint);\n}\n```\n\n## Figma Variable Mapping\n\nThe library automatically maps your Figma variables to the appropriate output:\n\n| Figma Variable Path | Tailwind Namespace | Ionic Color |\n|---------------------|-------------------|-------------|\n| `Colors/Primary/500` | `--color-primary-500` | `--ion-color-primary` |\n| `Colors/Success` | `--color-success` | `--ion-color-success` |\n| `Spacing/4` | `--spacing-4` | - |\n| `Typography/Font Family` | `--font-family-*` | - |\n| `Radius/Medium` | `--radius-md` | - |\n\n### Ionic Color Detection\n\nColors are auto-mapped to Ionic's semantic colors based on naming:\n\n- `primary`, `brand` → `--ion-color-primary`\n- `secondary`, `accent` → `--ion-color-secondary`\n- `success`, `green`, `positive` → `--ion-color-success`\n- `warning`, `yellow`, `orange` → `--ion-color-warning`\n- `danger`, `error`, `red` → `--ion-color-danger`\n- `dark`, `gray-900`, `black` → `--ion-color-dark`\n- `medium`, `gray-500` → `--ion-color-medium`\n- `light`, `gray-100`, `white` → `--ion-color-light`\n\n## TypeScript Types\n\nThe library exports all types from `@figma/rest-api-spec` plus custom types:\n\n```typescript\nimport type {\n  // Figma API types (from @figma/rest-api-spec)\n  LocalVariable,\n  LocalVariableCollection,\n  GetLocalVariablesResponse,\n  RGBA,\n  VariableAlias,\n  VariableScope,\n\n  // Normalized theme types\n  ThemeFile,\n  TokenCollection,\n  Token,\n  ColorValue,\n  DimensionValue,\n\n  // Output types\n  TailwindThemeOutput,\n  IonicTheme,\n} from '@baur-software/figma-to';\n```\n\n## Pushing Tokens Back to Figma\n\nThe Figma output adapter lets you push normalized design tokens back to Figma as Variables and Styles. This enables bidirectional sync - you can read tokens from one Figma file and push them to another.\n\n### Using the Figma MCP Write Server (Recommended)\n\nThe easiest way to push tokens to Figma is via the [figma-mcp-write-server](https://github.com/anthropics/figma-mcp-write-server), which provides Plugin API access without requiring Figma Enterprise.\n\n**Setup:**\n\n1. Install and run the write server:\n   ```bash\n   npx figma-mcp-write-server\n   ```\n\n2. Open Figma Desktop and activate the write-server plugin (Dev Mode → Plugins → figma-mcp-write-server)\n\n3. Use the adapter in your code:\n   ```typescript\n   import {\n     parseTheme,\n     createFigmaOutputAdapter,\n     tryConnectWriteServer,\n   } from '@baur-software/figma-to';\n\n   // Parse tokens from source\n   const theme = await parseTheme({ variablesResponse });\n\n   // Connect to write server\n   const writeClient = await tryConnectWriteServer();\n   if (!writeClient) {\n     console.error('Figma plugin not connected');\n     return;\n   }\n\n   // Create adapter with write client\n   const adapter = createFigmaOutputAdapter(writeClient);\n   const result = await adapter.transform(theme, {\n     targetFileKey: 'target-file-key',\n   });\n\n   // Push to Figma\n   await result.execute();\n\n   console.log(result.report.toString());\n   // Output:\n   // Transformation Report\n   // =====================\n   // Collections: 2 created\n   // Variables: 45 created\n   // Text Styles: 8 created\n   // Effect Styles: 3 created\n   ```\n\n### Using the REST API (Enterprise)\n\nIf you have Figma Enterprise with `file_variables:write` scope:\n\n```typescript\nimport { parseTheme, createFigmaOutputAdapter } from '@baur-software/figma-to';\n\nconst theme = await parseTheme({ variablesResponse });\nconst adapter = createFigmaOutputAdapter();\n\nconst result = await adapter.transform(theme, {\n  targetFileKey: 'your-file-key',\n});\n\n// Get the REST API request body\nconsole.log(JSON.stringify(result.requestBody, null, 2));\n\n// Or get manual instructions\nconsole.log(result.getManualInstructions());\n```\n\n### What Gets Pushed\n\n| Token Type | Figma Output |\n|------------|--------------|\n| `color` | Variable (COLOR) |\n| `dimension` | Variable (FLOAT) |\n| `string` | Variable (STRING) |\n| `boolean` | Variable (BOOLEAN) |\n| `typography` | Text Style |\n| `shadow` | Effect Style |\n| `gradient` | Paint Style |\n\n### Safety Checks\n\nThe adapter includes safety checks to prevent accidental overwrites:\n\n```typescript\n// This will throw SourceOverwriteError\nconst result = await adapter.transform(theme, {\n  targetFileKey: theme.meta.figmaFileKey, // Same as source!\n});\n\n// Explicitly allow overwriting\nconst result = await adapter.transform(theme, {\n  targetFileKey: theme.meta.figmaFileKey,\n  allowSourceOverwrite: true,\n});\n```\n\n## Integration with Ionic + SolidJS + Capacitor\n\n```typescript\n// generate-theme.ts\nimport { figmaToTailwind } from '@baur-software/figma-to';\nimport { writeFileSync } from 'fs';\n\nasync function generateTheme() {\n  const response = await fetch(\n    `https://api.figma.com/v1/files/${process.env.FIGMA_FILE_KEY}/variables/local`,\n    { headers: { 'X-Figma-Token': process.env.FIGMA_TOKEN! } }\n  );\n\n  const output = await figmaToTailwind({\n    variablesResponse: await response.json(),\n  }, {\n    framework: 'solidjs',\n    darkMode: true,\n  });\n\n  // Write to your project\n  writeFileSync('src/theme/variables.css', output.files['variables.css']);\n  writeFileSync('src/theme/ionic.css', output.files['ionic-theme.css']);\n  writeFileSync('src/theme/tailwind.css', output.files['tailwind-theme.css']);\n}\n\ngenerateTheme();\n```\n\nThen import in your app:\n\n```css\n/* src/index.css */\n@import './theme/tailwind.css';\n@import './theme/ionic.css';\n@import \"tailwindcss\";\n```\n\n## API Reference\n\n### `figmaToTailwind(input, options?)`\n\nOne-step conversion from Figma data to CSS output.\n\n### `parseTheme(input)`\n\nParse Figma data into normalized `ThemeFile` format.\n\n### `generateOutput(theme, options?)`\n\nGenerate CSS output from a normalized theme.\n\n### `createFigmaAdapter()`\n\nCreate a Figma input adapter instance with `parse()` and `validate()` methods.\n\n### `createTailwindIonicAdapter()`\n\nCreate a Tailwind/Ionic output adapter instance with `transform()` method.\n\n## Requirements\n\n- Node.js >= 20\n- Tailwind CSS v4 (peer dependency)\n\n## License\n\nMIT\n","readmeFilename":"README.md"}