Red text with red border
\n\n\n```\n\n### Using SCSS Source\n```scss\n// Import the plugin\n@use '@ahmed-aliraqi/color-palette';\n\n// The plugin automatically generates utilities for the default color palette\n// You can now use classes like:\n// .bg-red-500, .text-blue-300, .border-green-700, etc.\n```\n\n## Available Classes\n\nWith the pre-built CSS, you get **over 3,000 utility classes** for 11 colors across 11 shade levels:\n\n### Colors Available\n- `red`, `green`, `blue`, `yellow`, `purple`, `pink`, `indigo`, `orange`, `teal`, `cyan`, `gray`\n\n### Shade Levels\n- `50` (lightest), `100`, `200`, `300`, `400`, `500` (base), `600`, `700`, `800`, `900`, `1000` (darkest)\n\n### Property Types\n- **Backgrounds**: `.bg-red-500`\n- **Text**: `.text-blue-300`\n- **Borders**: `.border-green-700`\n- **Outlines**: `.outline-purple-400`\n- **SVG Fill**: `.fill-orange-600`\n- **SVG Stroke**: `.stroke-teal-500`\n- **Text Decoration**: `.text-decoration-pink-300`\n- **Caret**: `.caret-indigo-500`\n- **Emphasis**: `.emphasis-cyan-400`\n- **Accent**: `.accent-yellow-600`\n- **Column Rule**: `.column-rule-gray-500`\n\n## Default Color Palette\n\nThe plugin includes these colors by default:\n\n- `red`: #ef4444\n- `green`: #22c55e\n- `blue`: #3b82f6\n- `yellow`: #f59e0b\n- `purple`: #8b5cf6\n- `pink`: #ec4899\n- `indigo`: #6366f1\n- `orange`: #f97316\n- `teal`: #14b8a6\n- `cyan`: #06b6d4\n- `gray`: #6b7280\n\n## Default Shade Scale\n\n| Shade | Lightness | Description |\n|-------|-----------|-------------|\n| 50 | +90% | Lightest |\n| 100 | +80% | Very light |\n| 200 | +70% | Light |\n| 300 | +60% | Light medium |\n| 400 | +50% | Medium light |\n| 500 | 0% | Base color |\n| 600 | -10% | Medium dark |\n| 700 | -20% | Dark |\n| 800 | -30% | Very dark |\n| 900 | -40% | Darkest |\n| 1000 | -50% | Ultra dark |\n\n## Generated Class Examples\n\nFor a color named `blue`, the plugin generates:\n\n### Background Classes\n```css\n.bg-blue-50 { background-color: #eff6ff !important; }\n.bg-blue-500 { background-color: #3b82f6 !important; }\n.bg-blue-900 { background-color: #1e3a8a !important; }\n```\n\n### Text Classes\n```css\n.text-blue-50 { color: #eff6ff !important; }\n.text-blue-500 { color: #3b82f6 !important; }\n.text-blue-900 { color: #1e3a8a !important; }\n```\n\n### Border Classes\n```css\n.border-blue-500 { border-color: #3b82f6 !important; }\n.outline-blue-500 { outline-color: #3b82f6 !important; }\n```\n\n### SVG Classes\n```css\n.fill-blue-500 { fill: #3b82f6 !important; }\n.stroke-blue-500 { stroke: #3b82f6 !important; }\n```\n\n## Browser Support\n\nThis plugin works with any modern SCSS compiler and the generated CSS works in all modern browsers. Some advanced properties like `accent-color` may have limited browser support.\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## License\n\nMIT License - see LICENSE file for details.\n","readmeFilename":"README.md"}