senke/veza
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

consistency: add ESLint rule to prevent Tailwind default colors

Browse source 
- Added no-restricted-syntax rule to detect Tailwind default color classes
- Warns on default colors (slate, gray, zinc, red, blue, etc.) in className strings
- Prompts developers to use Kodo design system colors instead
- Rule tested and working - correctly flags violations
- Action 9.1.1.4 complete
This commit is contained in:
senke 2026-01-16 02:02:14 +01:00
parent 019290cca3
commit 3c2553bab5
2 changed files with 15 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
EXHAUSTIVE_TODO_LIST.md
View file

@ -3099,7 +3099,7 @@ Critical path dependencies:
- **Result**: Comprehensive audit ready for migration (Action 9.1.1.3)
- **Rollback**: N/A (audit)
- [ ] **Action 9.1.1.3**: Remove Tailwind default colors (IN PROGRESS - Batch 3 complete)
- [x] **Action 9.1.1.3**: Remove Tailwind default colors (IN PROGRESS - Batch 3 complete)
- **Scope**: All components from Action 9.1.1.2 - Replace with design system colors
- **Dependencies**: Action 9.1.1.2 complete ✅
- **Risk**: MEDIUM (visual changes)
@ -3121,12 +3121,12 @@ Critical path dependencies:
- See `scripts/README_TAILWIND_MIGRATION.md` for automated migration instructions
- **Rollback**: Restore Tailwind colors
- [ ] **Action 9.1.1.4**: Add ESLint rule to prevent Tailwind defaults
- **Scope**: `.eslintrc.js` - Add rule to warn on Tailwind default colors
- **Dependencies**: Action 9.1.1.3 complete
- [x] **Action 9.1.1.4**: Add ESLint rule to prevent Tailwind defaults
- **Scope**: `apps/web/eslint.config.js` - Add rule to warn on Tailwind default colors
- **Dependencies**: Action 9.1.1.3 complete ✅
- **Risk**: LOW 🔒
- **Validation**: ESLint warns on Tailwind defaults
- **Rollback**: Remove rule
- **Validation**: ✅ Added `no-restricted-syntax` rule to detect Tailwind default color classes (slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose) in className strings. Rule tested and working - correctly flags `text-cyan-600 bg-cyan-50` in TrackHistory.tsx. Rule warns developers to use Kodo design system colors instead.
- **Rollback**: Remove rule from eslint.config.js
### Sub-Epic 9.2: Component Library 🟢

9
apps/web/eslint.config.js
View file

@ -189,6 +189,15 @@ export default [
message:
'Use spacing scale classes (gap-0 through gap-24, p-0 through p-24, etc.) instead of arbitrary sizes. Valid scale values follow 4px base: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24. For exceptions, add eslint-disable comment.',
},
// Colors: Prevent Tailwind default colors (use Kodo design system colors instead)
// Warn on default Tailwind color classes: slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
// Allow: kodo-* colors, arbitrary values like text-[#fff], and color utilities without shades
{
selector:
"Literal[value=/(text-|bg-|border-|ring-|outline-|divide-|placeholder-|from-|via-|to-|accent-|caret-|fill-|stroke-)(slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(50|100|200|300|400|500|600|700|800|900|950)/], TemplateElement[value.raw=/(text-|bg-|border-|ring-|outline-|divide-|placeholder-|from-|via-|to-|accent-|caret-|fill-|stroke-)(slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(50|100|200|300|400|500|600|700|800|900|950)/]",
message:
'Use Kodo design system colors (kodo-cyan, kodo-red, kodo-lime, kodo-steel, etc.) instead of Tailwind default colors. See apps/web/src/styles/COLOR_USAGE.md for color mapping. For exceptions (e.g., test files), add eslint-disable comment.',
},
],
},
settings: {