@chatbi-v/eslint-plugin-theme

ESLint plugin for enforcing ChatBI theme system rules and auto-fixing design debt.

Features

• No Hardcoded Colors: Detects hex/rgb/hsl color values and suggests semantic tokens.
• No Arbitrary Tailwind: Detects arbitrary Tailwind classes (e.g. bg-[#fff]) and auto-fixes them to token classes.
• No Inline Styles: Warns against using inline styles for colors.
• Auto Fix: Automatically replaces known hardcoded colors with theme tokens.

Installation

This plugin is part of the ChatBI Monorepo and is pre-configured in @chatbi-v/config.

If you need to install it manually:

pnpm add -D @chatbi-v/eslint-plugin-theme

Usage

In eslint.config.mjs (Flat Config)

import themePlugin from '@chatbi-v/eslint-plugin-theme';

export default [
  {
    plugins: {
      '@chatbi-v/theme': themePlugin,
    },
    rules: {
      '@chatbi-v/theme/no-hardcoded-colors': 'warn',
      '@chatbi-v/theme/no-inline-styles': 'warn',
      '@chatbi-v/theme/no-arbitrary-tailwind': 'warn',
    },
  },
];

Rules

@chatbi-v/theme/no-hardcoded-colors

Disallows hardcoded color values (Hex, RGB, HSL) in code.

Bad:

<div style={{ color: '#ef4444' }}>Error</div>;
const activeColor = '#3b82f6';

Good:

// Using Tailwind classes (Recommended)
<div className="text-error">Error</div>

// Or using token variables
const activeColor = tokens.brand.500;

@chatbi-v/theme/no-arbitrary-tailwind

Disallows arbitrary values in Tailwind classes if a matching token exists. Supports Auto-fix.

Bad:

<div className="bg-[#ffffff]">Card</div>

Good (Auto-fixed):

<div className="bg-surface-canvas">Card</div>

@chatbi-v/theme/no-inline-styles

Disallows using style={{ ... }} for coloring.

Bad:

<div style={{ backgroundColor: 'white' }}>Card</div>

Good:

<div className="bg-surface-canvas">Card</div>

Token Loading

The plugin attempts to load theme tokens dynamically from:

1. packages/libs/theme/dist/presets/deepinsight-default.cjs
2. node_modules/@chatbi-v/theme/...

Ensure @chatbi-v/theme is built (pnpm build --filter @chatbi-v/theme) for the most accurate token matching.