{"id":30232355,"url":"https://github.com/bogy0/vscode-carbonmate","last_synced_at":"2025-08-14T23:57:45.322Z","repository":{"id":304346246,"uuid":"1018521356","full_name":"bogy0/vscode-CarbonMate","owner":"bogy0","description":"A VS Code extension that provides Carbon Design System token suggestions for SCSS files","archived":false,"fork":false,"pushed_at":"2025-07-12T13:48:27.000Z","size":83,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-12T14:52:58.690Z","etag":null,"topics":["carbon","carbon-design-system","frontend","ibm","scss","spacing","tokens","vscode","vscode-extension"],"latest_commit_sha":null,"homepage":"https://github.com/bogy0/vscode-CarbonMate","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bogy0.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","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-07-12T12:46:52.000Z","updated_at":"2025-07-12T13:50:18.000Z","dependencies_parsed_at":"2025-07-12T14:53:04.112Z","dependency_job_id":"c68a2b3a-d321-4988-92ec-d385ff6d81e8","html_url":"https://github.com/bogy0/vscode-CarbonMate","commit_stats":null,"previous_names":["bogy0/vscode-carbonmate"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/bogy0/vscode-CarbonMate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bogy0%2Fvscode-CarbonMate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bogy0%2Fvscode-CarbonMate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bogy0%2Fvscode-CarbonMate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bogy0%2Fvscode-CarbonMate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bogy0","download_url":"https://codeload.github.com/bogy0/vscode-CarbonMate/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bogy0%2Fvscode-CarbonMate/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270500676,"owners_count":24595163,"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","status":"online","status_checked_at":"2025-08-14T02:00:10.309Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["carbon","carbon-design-system","frontend","ibm","scss","spacing","tokens","vscode","vscode-extension"],"created_at":"2025-08-14T23:57:13.280Z","updated_at":"2025-08-14T23:57:45.303Z","avatar_url":"https://github.com/bogy0.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CarbonMate - VS Code Extension\n\nA VS Code extension that provides Carbon Design System token suggestions for SCSS files. Automatically detects SCSS files and suggests Carbon spacing tokens when writing CSS properties like margin and padding.\n\n[![Version](https://img.shields.io/badge/version-1.0.0-blue.svg)](https://marketplace.visualstudio.com/items?itemName=your-username.carbonmate)\n[![License](https://img.shields.io/badge/license-ISC-green.svg)](LICENSE)\n\n## Features\n\n- **SCSS File Detection**: Automatically activates when editing SCSS files\n- **Carbon Spacing Tokens**: Provides suggestions for all Carbon Design System spacing tokens\n- **Carbon Typography Tokens**: Access all Carbon type sets with detailed typography specifications\n- **Carbon Color Tokens**: Browse and copy Carbon color tokens with detailed specifications\n- **Smart Suggestions**: Only shows spacing token suggestions when writing margin or padding properties\n- **Rich Documentation**: Each token includes rem and px values with descriptions\n- **Hardcoded Value Detection**: Detects hardcoded spacing values and suggests Carbon token replacements\n- **Import Awareness**: Ensures proper `@use '@carbon/layout';` import is present\n- **Performance Optimized**: Only processes active SCSS files for better performance\n\n## Carbon Spacing Tokens\n\nThe extension provides suggestions for all 13 Carbon spacing tokens:\n\n| Token | rem | px | Description |\n|-------|-----|----|-------------|\n| `layout.$spacing-01` | 0.125rem | 2px | Smallest spacing increment |\n| `layout.$spacing-02` | 0.25rem | 4px | Small spacing increment |\n| `layout.$spacing-03` | 0.5rem | 8px | Extra small spacing |\n| `layout.$spacing-04` | 0.75rem | 12px | Small spacing |\n| `layout.$spacing-05` | 1rem | 16px | Medium spacing |\n| `layout.$spacing-06` | 1.5rem | 24px | Large spacing |\n| `layout.$spacing-07` | 2rem | 32px | Extra large spacing |\n| `layout.$spacing-08` | 2.5rem | 40px | 2XL spacing |\n| `layout.$spacing-09` | 3rem | 48px | 3XL spacing |\n| `layout.$spacing-10` | 4rem | 64px | 4XL spacing |\n| `layout.$spacing-11` | 5rem | 80px | 5XL spacing |\n| `layout.$spacing-12` | 6rem | 96px | 6XL spacing |\n| `layout.$spacing-13` | 10rem | 160px | 7XL spacing |\n\n## Carbon Typography Tokens\n\nThe extension provides access to all Carbon type sets with detailed typography specifications. Use the Command Palette to browse and copy typography tokens to your clipboard.\n\n### Available Type Set Groups\n\n- **Small Style**: Code snippets, labels, helper text, and legal copy\n- **Body**: Body text for short and long paragraphs\n- **Fixed Headings**: Component and layout headings with fixed sizes\n- **Fluid Headings**: Responsive headings that scale with viewport\n- **Fluid Callouts**: Quotations and larger paragraphs\n- **Fluid Display**: Large display text for hero sections\n\n### Typography Token Details\n\nEach typography token includes:\n- **Font Size**: Both pixel and rem values\n- **Font Weight**: Numeric weight (300, 400, 600)\n- **Line Height**: Both pixel and rem values\n- **Letter Spacing**: Spacing between characters\n- **Description**: Usage guidelines and context\n\n### Example Typography Tokens\n\n| Token | Font Size | Weight | Line Height | Letter Spacing | Use Case |\n|-------|-----------|--------|-------------|----------------|----------|\n| `$heading-07` | 54px / 3.375rem | 300 | 64px / 4rem | 0px | Large layout headings |\n| `$body-01` | 14px / .875rem | 400 | 20px / 1.25rem | .16px | Long body paragraphs |\n| `$code-01` | 12px / .75rem | 400 | 16px / 1rem | .32px | Inline code snippets |\n| `$label-01` | 12px / .75rem | 400 | 16px / 1rem | .32px | Field labels and captions |\n\n## Carbon Color Tokens\n\nThe extension provides access to all Carbon color tokens with detailed color specifications. Use the Command Palette to browse and copy color tokens to your clipboard.\n\n### Available Color Token Groups\n\n- **Interactive**: Primary, secondary, tertiary, and quaternary interactive colors\n- **UI**: Background colors for different UI surfaces and levels\n- **Text**: Text colors for various content types and contexts\n- **Icon**: Icon colors for different visual hierarchies\n- **Field**: Input field background colors\n- **Inverse**: Colors for dark/light theme inversions\n- **Support**: Semantic colors for error, success, warning, and info states\n- **Overlay**: Overlay colors for modals and backdrop elements\n\n### Color Token Details\n\nEach color token includes:\n- **Hex Value**: Standard hexadecimal color code\n- **RGB Value**: RGB color values with alpha channel\n- **Usage Description**: Guidelines for when and how to use the color\n- **Group Classification**: Category and purpose of the color\n\n### Example Color Tokens\n\n| Token | Hex | RGB | Usage |\n|-------|-----|-----|-------|\n| `$interactive-01` | #0f62fe | rgba(15, 98, 254, 1) | Primary buttons, links, and interactive elements |\n| `$text-01` | #161616 | rgba(22, 22, 22, 1) | Primary text and headings |\n| `$support-01` | #da1e28 | rgba(218, 30, 40, 1) | Error states and destructive actions |\n| `$ui-01` | #ffffff | rgba(255, 255, 255, 1) | Main page backgrounds and card surfaces |\n| `$overlay-01` | rgba(22, 22, 22, 0.5) | rgba(22, 22, 22, 0.5) | Modal overlays and backdrop elements |\n\n## Installation\n\n### From VSIX (Local Installation)\n1. Download the latest `.vsix` file from the [Releases](https://github.com/your-username/vscode-CarbonMate/releases) page\n2. In VS Code, go to Extensions (`Ctrl+Shift+X`)\n3. Click the \"...\" menu and select \"Install from VSIX...\"\n4. Choose the downloaded `.vsix` file\n\n### From Source\n1. Clone this repository\n2. Run `npm install`\n3. Run `npm run compile`\n4. Press `F5` to run the extension in a new VS Code window\n\n## Usage\n\n### 1. Token Suggestions\n\n1. Open a SCSS file in VS Code\n2. Add `@use '@carbon/layout';` at the top of the file\n3. Start typing a spacing property (margin, padding, etc.)\n4. Type `$` to trigger the suggestions\n5. Select a Carbon spacing token from the dropdown\n\n### 2. Magic Number Replacement\n\n1. Open a SCSS file with `@use '@carbon/layout';` import\n2. Notice CarbonMate underlines hardcoded spacing values (e.g., `16px`, `1rem`, `2em`)\n3. Use `Ctrl+.` (Windows/Linux) or `Cmd+.` (Mac) to quick fix one of the selected value - the extension will suggest the closest Carbon token\n4. Alternatively:\n   - Press `Ctrl+Shift+P` (Windows/Linux) or `Cmd+Shift+P` (Mac)\n   - Type `CarbonMate`\n   - Select `Fix all hardcoded spacing values`\n5. The extension will automatically replace all hardcoded values with their closest matching Carbon tokens in the file\n\n### 3. Typography Token Access\n\n1. Press `Ctrl+Shift+P` (Windows/Linux) or `Cmd+Shift+P` (Mac) to open Command Palette\n2. Type `CarbonMate: Show Type Sets`\n3. Browse through grouped typography tokens with detailed specifications\n4. Select a token to copy it to your clipboard (e.g., `$heading-07`)\n5. Paste the token into your SCSS file where needed\n\n### 4. Color Token Access\n\n1. Press `Ctrl+Shift+P` (Windows/Linux) or `Cmd+Shift+P` (Mac) to open Command Palette\n2. Type `CarbonMate: Show Color Tokens`\n3. Browse through grouped color tokens with hex and RGB values\n4. Select a token to copy it to your clipboard (e.g., `$interactive-01`)\n5. Paste the token into your SCSS file where needed\n\n### Example\n\n```scss\n@use '@carbon/layout';\n\n.my-component {\n  // Manual token usage\n  margin: layout.$spacing-05;    // ✅ Correct Carbon syntax\n  padding: layout.$spacing-03;   // ✅ Correct Carbon syntax\n  \n  // Hardcoded values that can be replaced\n  margin: 16px;                 // 🔄 Can be replaced with layout.$spacing-05\n  padding: 24px;                // 🔄 Can be replaced with layout.$spacing-06\n  \n  // Color token usage\n  background-color: $ui-01;     // ✅ Carbon color token\n  color: $text-01;              // ✅ Carbon color token\n  border-color: $interactive-01; // ✅ Carbon color token\n}\n```\n\n## Hardcoded Value Detection\n\nThe extension can detect and suggest replacements for:\n\n- **Pixel values**: `16px`, `24px`, `32px`, etc.\n- **Rem values**: `1rem`, `1.5rem`, `2rem`, etc.\n- **Em values**: `1em`, `1.5em`, `2em`, etc.\n\n### Replacement Logic\n\n- **Exact matches**: Direct replacement with corresponding Carbon token\n- **Close matches**: Suggests the closest Carbon token (within 8px difference)\n- **Far matches**: No suggestion (values too far from Carbon tokens)\n\n### Examples\n\n| Original Value | Suggested Carbon Token | Difference |\n|----------------|----------------------|------------|\n| `16px` | `layout.$spacing-05` | 0px (exact) |\n| `18px` | `layout.$spacing-05` | 2px |\n| `24px` | `layout.$spacing-06` | 0px (exact) |\n| `1rem` | `layout.$spacing-05` | 0px (exact) |\n| `2em` | `layout.$spacing-07` | 0px (exact) |\n\n## Commands\n\n- `CarbonMate: Fix All Hardcoded Spacing Values` - Replace all hardcoded spacing values in the current file\n- `CarbonMate: Refresh Code Check` - Manually refresh the code analysis\n- `CarbonMate: Show Type Sets` - Browse and copy Carbon typography tokens to clipboard\n- `CarbonMate: Show Color Tokens` - Browse and copy Carbon color tokens to clipboard\n\n## Development\n\n### Prerequisites\n\n- Node.js (v16 or higher)\n- VS Code\n\n### Setup\n\n1. Clone the repository\n   ```bash\n   git clone https://github.com/your-username/vscode-CarbonMate.git\n   cd vscode-CarbonMate\n   ```\n\n2. Install dependencies\n   ```bash\n   npm install\n   ```\n\n3. Compile the extension\n   ```bash\n   npm run compile\n   ```\n\n4. Press `F5` to run the extension in a new VS Code window\n\n### Build Commands\n\n```bash\nnpm run compile    # Compile TypeScript\nnpm run watch      # Watch for changes and recompile\nnpm run lint       # Run ESLint\n```\n\n### Creating a VSIX Package\n\n```bash\nnpm install -g vsce\nvsce package\n```\n\nThis will create a `.vsix` file that can be installed in VS Code.\n\n## Configuration\n\nThe extension can be configured through VS Code settings:\n\n- `carbonmate.enable`: Enable/disable the extension (default: true)\n\n## Dependencies\n\n- `@carbon/layout`: Carbon Design System layout tokens\n- `@carbon/type`: Carbon Design System typography tokens\n- `@types/vscode`: VS Code extension API types\n- `typescript`: TypeScript compiler\n\n## Contributing\n\n1. Fork the repository\n2. Create a feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add some amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## Issues\n\nIf you find any issues or have suggestions, please [open an issue](https://github.com/your-username/vscode-CarbonMate/issues) on GitHub.\n\n## License\n\nThis project is licensed under the ISC License - see the [LICENSE](LICENSE) file for details.\n\n## Acknowledgments\n\n- [Carbon Design System](https://carbondesignsystem.com/) for the spacing tokens\n- [VS Code Extension API](https://code.visualstudio.com/api) for the development framework ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbogy0%2Fvscode-carbonmate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbogy0%2Fvscode-carbonmate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbogy0%2Fvscode-carbonmate/lists"}