{"id":27696236,"url":"https://github.com/salemaljebaly/themepathpro","last_synced_at":"2025-04-25T15:08:52.452Z","repository":{"id":289363205,"uuid":"971004960","full_name":"salemaljebaly/ThemePathPro","owner":"salemaljebaly","description":"ThemePathPro: Effortlessly Transform Style Paths","archived":false,"fork":false,"pushed_at":"2025-04-23T15:41:11.000Z","size":308,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-25T15:08:44.447Z","etag":null,"topics":["figma","figma-api"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/salemaljebaly.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-04-22T21:40:04.000Z","updated_at":"2025-04-23T15:41:18.000Z","dependencies_parsed_at":"2025-04-23T16:39:34.129Z","dependency_job_id":"565e63fa-1cfc-4d2f-be9c-e4710798fba6","html_url":"https://github.com/salemaljebaly/ThemePathPro","commit_stats":null,"previous_names":["salemaljebaly/material-swap-style","salemaljebaly/themepathpro"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salemaljebaly%2FThemePathPro","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salemaljebaly%2FThemePathPro/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salemaljebaly%2FThemePathPro/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salemaljebaly%2FThemePathPro/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/salemaljebaly","download_url":"https://codeload.github.com/salemaljebaly/ThemePathPro/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250840608,"owners_count":21495910,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["figma","figma-api"],"created_at":"2025-04-25T15:08:51.569Z","updated_at":"2025-04-25T15:08:52.447Z","avatar_url":"https://github.com/salemaljebaly.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ThemePathPro\n\n![ThemePathPro Cover](src/assets/ThemePathPro.jpg)\n\n## What does this plugin do?\n\nThemePathPro automates style path transformation in your Figma designs. Instantly swap all references from one path to another (e.g., 'M3/sys/dark/' to 'M3/sys/light/'), saving hours of manual work.\n\n## Features\n\n- **Custom Style Paths**: Enter your own source and target paths\n- **Modern UI**: Clean, user-friendly interface\n- **Error Handling**: Clear feedback on errors and warnings\n- **Path Validation**: Automatically corrects malformed paths (e.g., double slashes)\n- **Selection Support**: Works on selected elements or the entire page\n- **Real-time Feedback**: Shows success/error counts and messages\n- **Free and Open Source**: Available for everyone to use and modify\n\n## Problem \u0026 Solution\n\n**Problem:** \nMaterial Design workflows in Figma require tedious manual reassignment when switching between theme variations. The Material Theme Builder creates styles but offers no easy way to switch elements between themes.\n\n**Solution:**\nThemePathPro bridges this critical gap, helping designers quickly switch between theme variations without manual reassignment.\n\n## How to use the plugin\n\n1. **Select elements** (optional)  \n   If you want to limit the scope, select the elements you want to process. Otherwise, the plugin will process the entire page.\n\n2. **Run the plugin**\n   - Enter the source path prefix (e.g., `M3/sys/dark/`)\n   - Enter the target path prefix (e.g., `M3/sys/light/`)\n   - Click \"Swap Styles\"\n\n3. **View Results**\n   - The plugin will show how many styles were swapped\n   - Any errors or warnings will be displayed\n   - Check the console for detailed logs\n\n## Installation\n\n1. **Build the plugin**  \n   Make sure you have run the TypeScript build step (see Development section below).\n\n2. **In Figma:**  \n   - Go to the Figma desktop/web app\n   - Open the file you want to use the plugin in\n   - Go to `Menu \u003e Plugins \u003e Development \u003e Import plugin from manifest...`\n   - Select the `manifest.json` in this directory\n   - Run the plugin from `Menu \u003e Plugins \u003e Development \u003e ThemePathPro`\n\n## Project Structure\n\nThe plugin follows a modular structure:\n\n```\nThemePathPro/\n├── dist/                      # Compiled JavaScript files (used by Figma)\n├── src/                       # Source code\n│   ├── assets/                # Assets like logo\n│   ├── ui/                    # UI dir\n│       └── ui.html            # UI file\n|   ├── code.ts                # Main plugin code\n├── manifest.json              # Points to dist/code.js\n├── package.json               # Dependency management\n└── tsconfig.json              # TypeScript configuration\n```\n\n## Development\n\nThis plugin uses TypeScript, NPM, and follows a modular structure.\n\n### Prerequisites\n\n1. Install Node.js and NPM from https://nodejs.org/\n2. Install dependencies:\n   ```\n   npm install\n   ```\n\n### Development Workflow\n\n1. Make changes to the TypeScript files in the `src` directory\n2. Build the plugin:\n   ```\n   npm run build\n   ```\n   Or to watch for changes:\n   ```\n   npm run dev\n   ```\n3. Test in Figma by importing the plugin from the manifest\n\n### Building for Production\n\n```\nnpm run build\n```\n\nThis will create the compiled JavaScript files in the `dist` directory.\n\n## Credits\n\n- Developer: [Salem Aljebaly](https://github.com/salemaljebaly)\n- Uses Figma Plugin API\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsalemaljebaly%2Fthemepathpro","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsalemaljebaly%2Fthemepathpro","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsalemaljebaly%2Fthemepathpro/lists"}