eslint-plugin-tailwind-palette-guard 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 johanlyckenvik
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,209 @@
+# eslint-plugin-tailwind-palette-guard
+
+ESLint plugin that enforces semantic design tokens over hardcoded colors in Tailwind CSS and inline styles.
+
+## Why?
+
+Hardcoded palette colors (`text-red-500`, `bg-white`) and inline color styles (`style={{ color: 'red' }}`) scatter raw color values across your codebase, making theme changes painful and dark mode support inconsistent. Semantic tokens (`text-destructive`, `bg-background`) provide a single source of truth.
+
+## Requirements
+
+- ESLint 9+ (flat config only)
+- Node.js 18+
+
+## Installation
+
+```bash
+npm install -D eslint-plugin-tailwind-palette-guard
+```
+
+## Usage
+
+Use a preset or configure manually:
+
+**Recommended** — enables `no-palette-colors` only:
+
+```js
+// eslint.config.js
+import tailwindPaletteGuard from "eslint-plugin-tailwind-palette-guard";
+
+export default [tailwindPaletteGuard.configs.recommended];
+```
+
+**Strict** — enables both rules:
+
+```js
+// eslint.config.js
+import tailwindPaletteGuard from "eslint-plugin-tailwind-palette-guard";
+
+export default [tailwindPaletteGuard.configs.strict];
+```
+
+**Manual** — full control:
+
+```js
+// eslint.config.js
+import tailwindPaletteGuard from "eslint-plugin-tailwind-palette-guard";
+
+export default [
+  {
+    plugins: {
+      "tailwind-palette-guard": tailwindPaletteGuard,
+    },
+    rules: {
+      "tailwind-palette-guard/no-palette-colors": ["warn", {
+        allowedColors: ["stroke-gray-100"],
+        allowedFiles: ["**/icons/**"],
+      }],
+      "tailwind-palette-guard/no-inline-color-styles": ["warn", {
+        allowedProperties: ["fill"],
+        allowedValues: ["transparent"],
+        allowedFiles: ["**/charts/**"],
+      }],
+    },
+  },
+];
+```
+
+## Rules
+
+### `no-palette-colors`
+
+Flags Tailwind classes that use hardcoded colors instead of semantic design tokens.
+
+#### What it detects
+
+**Palette colors** — `{prefix}-{color}-{shade}` with optional `/{opacity}`:
+
+| Pattern | Example |
+| ------- | ------- |
+| Static className | `className="text-red-500"` |
+| cn/clsx/cx/twMerge/twJoin | `cn("text-red-500", cond && "bg-green-100")` |
+| Object syntax | `cn({ "text-red-500": isError })` |
+| cva definitions | `cva("base", { variants: { v: { danger: "text-red-500" } } })` |
+| Template literals | `` className={`px-4 text-red-500 ${x}`} `` |
+| Ternary expressions | `className={isError ? "text-red-500" : "text-green-500"}` |
+| Standalone strings\* | `const color = "text-red-500"` |
+
+\*Requires `checkAllStrings: true` (opt-in).
+
+**Bare colors** (flagged by default) — `{prefix}-white`, `{prefix}-black`:
+
+| Example | Use instead |
+| ------- | ----------- |
+| `bg-white` | `bg-background` |
+| `text-black` | `text-foreground` |
+
+> `transparent` is **not** flagged — it's a CSS reset, not a color choice.
+
+**Arbitrary color values** — `{prefix}-[color]`:
+
+| Example | Why flagged |
+| ------- | ----------- |
+| `text-[#ff0000]` | Hardcoded hex color |
+| `bg-[red]` | Named CSS color |
+| `border-[rgb(255,0,0)]` | Color function |
+| `text-[hsl(0,100%,50%)]` | Color function |
+
+CSS variable references like `text-[var(--color)]` are **not** flagged. Non-color arbitrary values like `text-[14px]` or `w-[100px]` are also **not** flagged.
+
+#### What it ignores
+
+- Semantic tokens: `text-destructive`, `bg-success`, `border-warning`
+- Non-color utilities: `rounded-lg`, `p-4`, `flex`, `text-sm`
+- CSS inheritance keywords: `text-inherit`, `text-current`
+- Transparent: `bg-transparent`, `border-transparent`, etc.
+- Tailwind modifiers are stripped before matching: `hover:`, `dark:`, `focus:`, `[&>svg]:`, etc.
+- `!important` prefix: `!text-red-500` is still detected
+
+#### Supported prefixes
+
+`bg`, `text`, `border`, `ring`, `fill`, `stroke`, `shadow`, `outline`, `decoration`, `accent`, `caret`, `divide`, `from`, `via`, `to`, `placeholder`
+
+#### Supported palette colors
+
+`red`, `green`, `blue`, `amber`, `yellow`, `orange`, `emerald`, `gray`, `slate`, `violet`, `cyan`, `pink`, `purple`, `teal`, `lime`, `indigo`, `fuchsia`, `rose`, `sky`, `zinc`, `neutral`, `stone`
+
+#### Configuration
+
+| Option | Type | Default | Description |
+| ------ | ---- | ------- | ----------- |
+| `allowedColors` | `string[]` | `[]` | Specific classes to allow (exact match) |
+| `allowedFiles` | `string[]` | `[]` | Glob patterns for files to skip entirely |
+| `allowBareColors` | `boolean` | `false` | When `true`, allows `bg-white`, `text-black`, etc. |
+| `checkAllStrings` | `boolean` | `false` | When `true`, scans all string literals (not just `className` and utility calls). May be noisy in test files. |
+
+---
+
+### `no-inline-color-styles`
+
+Flags inline `style` attributes that set color CSS properties with literal values, and SVG presentation attributes (`fill`, `stroke`, etc.) with hardcoded colors.
+
+#### What it detects
+
+```jsx
+// Inline styles — all flagged:
+<div style={{ color: "red" }} />
+<div style={{ backgroundColor: "#ff0000" }} />
+<div style={{ borderColor: "rgb(255, 0, 0)" }} />
+<div style={{ color: isError ? "red" : "green" }} />
+
+// SVG attributes — all flagged:
+<svg fill="red" />
+<circle stroke="#000" />
+<path fill="#ff0000" />
+<stop stopColor="rgb(255, 0, 0)" />
+```
+
+#### What it allows
+
+```jsx
+// Inline styles — all pass:
+<div style={{ color: "var(--text-primary)" }} />   // CSS variables
+<div style={{ color: "inherit" }} />                // CSS global keywords
+<div style={{ color: "currentColor" }} />           // currentColor
+<div style={{ color: myColor }} />                  // Dynamic expressions
+<div style={{ display: "flex" }} />                 // Non-color properties
+
+// SVG attributes — all pass:
+<svg fill="none" />                                 // none (common for stroked icons)
+<svg fill="currentColor" />                         // currentColor
+<svg fill="url(#gradient)" />                       // Gradient/pattern references
+<svg fill="var(--icon-color)" />                    // CSS variables
+<svg fill={iconColor} />                            // Dynamic expressions
+```
+
+> **Note:** This rule uses a deny-by-default approach for inline style values. Any string literal that isn't a CSS variable (`var(--...)`), global keyword (`inherit`, `currentColor`, etc.), or explicitly allowed via `allowedValues` will be flagged — including `"transparent"`. Use `allowedValues: ["transparent"]` to allow it. For SVG attributes, `none`, `transparent`, and `url()` references are allowed by default.
+
+<details>
+<summary>Monitored CSS properties (inline styles)</summary>
+
+`color`, `backgroundColor`, `borderColor`, `borderTopColor`, `borderRightColor`, `borderBottomColor`, `borderLeftColor`, `borderBlockColor`, `borderBlockStartColor`, `borderBlockEndColor`, `borderInlineColor`, `borderInlineStartColor`, `borderInlineEndColor`, `outlineColor`, `textDecorationColor`, `fill`, `stroke`, `caretColor`, `accentColor`, `columnRuleColor`, `floodColor`, `lightingColor`, `stopColor`
+
+</details>
+
+<details>
+<summary>Monitored SVG attributes</summary>
+
+`fill`, `stroke`, `color`, `stopColor`, `stop-color`, `floodColor`, `flood-color`, `lightingColor`, `lighting-color`
+
+</details>
+
+#### Configuration
+
+| Option | Type | Default | Description |
+| ------ | ---- | ------- | ----------- |
+| `allowedProperties` | `string[]` | `[]` | CSS properties or SVG attributes to skip (e.g. `["fill"]`) |
+| `allowedValues` | `string[]` | `[]` | Values to allow (e.g. `["transparent"]`) |
+| `allowedFiles` | `string[]` | `[]` | Glob patterns for files to skip entirely |
+
+## Configs
+
+| Config | Rules |
+| ------ | ----- |
+| `recommended` | `no-palette-colors: warn` |
+| `strict` | `no-palette-colors: warn` + `no-inline-color-styles: warn` |
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import { ESLint } from 'eslint';
+
+declare const plugin: ESLint.Plugin;
+
+export { plugin as default };

package/dist/index.js

@@ -0,0 +1,742 @@
+// src/rules/no-inline-color-styles.ts
+import { minimatch } from "minimatch";
+
+// src/utils/css-colors.ts
+var COLOR_PROPERTIES = /* @__PURE__ */ new Set([
+  "color",
+  "backgroundColor",
+  "borderColor",
+  "borderTopColor",
+  "borderRightColor",
+  "borderBottomColor",
+  "borderLeftColor",
+  "borderBlockColor",
+  "borderBlockStartColor",
+  "borderBlockEndColor",
+  "borderInlineColor",
+  "borderInlineStartColor",
+  "borderInlineEndColor",
+  "outlineColor",
+  "textDecorationColor",
+  "fill",
+  "stroke",
+  "caretColor",
+  "accentColor",
+  "columnRuleColor",
+  "floodColor",
+  "lightingColor",
+  "stopColor"
+]);
+var SVG_COLOR_ATTRIBUTES = /* @__PURE__ */ new Set([
+  "fill",
+  "stroke",
+  "color",
+  "stopColor",
+  "stop-color",
+  "floodColor",
+  "flood-color",
+  "lightingColor",
+  "lighting-color"
+]);
+var CSS_GLOBAL_VALUES = /* @__PURE__ */ new Set([
+  "inherit",
+  "initial",
+  "unset",
+  "revert",
+  "revert-layer",
+  "currentColor",
+  "currentcolor"
+]);
+var SVG_ALLOWED_VALUES = /* @__PURE__ */ new Set([
+  "none",
+  "transparent",
+  "inherit",
+  "initial",
+  "unset",
+  "revert",
+  "currentColor",
+  "currentcolor",
+  "context-fill",
+  "context-stroke"
+]);
+var CSS_NAMED_COLORS = /* @__PURE__ */ new Set([
+  "aliceblue",
+  "antiquewhite",
+  "aqua",
+  "aquamarine",
+  "azure",
+  "beige",
+  "bisque",
+  "black",
+  "blanchedalmond",
+  "blue",
+  "blueviolet",
+  "brown",
+  "burlywood",
+  "cadetblue",
+  "chartreuse",
+  "chocolate",
+  "coral",
+  "cornflowerblue",
+  "cornsilk",
+  "crimson",
+  "cyan",
+  "darkblue",
+  "darkcyan",
+  "darkgoldenrod",
+  "darkgray",
+  "darkgreen",
+  "darkgrey",
+  "darkkhaki",
+  "darkmagenta",
+  "darkolivegreen",
+  "darkorange",
+  "darkorchid",
+  "darkred",
+  "darksalmon",
+  "darkseagreen",
+  "darkslateblue",
+  "darkslategray",
+  "darkslategrey",
+  "darkturquoise",
+  "darkviolet",
+  "deeppink",
+  "deepskyblue",
+  "dimgray",
+  "dimgrey",
+  "dodgerblue",
+  "firebrick",
+  "floralwhite",
+  "forestgreen",
+  "fuchsia",
+  "gainsboro",
+  "ghostwhite",
+  "gold",
+  "goldenrod",
+  "gray",
+  "green",
+  "greenyellow",
+  "grey",
+  "honeydew",
+  "hotpink",
+  "indianred",
+  "indigo",
+  "ivory",
+  "khaki",
+  "lavender",
+  "lavenderblush",
+  "lawngreen",
+  "lemonchiffon",
+  "lightblue",
+  "lightcoral",
+  "lightcyan",
+  "lightgoldenrodyellow",
+  "lightgray",
+  "lightgreen",
+  "lightgrey",
+  "lightpink",
+  "lightsalmon",
+  "lightseagreen",
+  "lightskyblue",
+  "lightslategray",
+  "lightslategrey",
+  "lightsteelblue",
+  "lightyellow",
+  "lime",
+  "limegreen",
+  "linen",
+  "magenta",
+  "maroon",
+  "mediumaquamarine",
+  "mediumblue",
+  "mediumorchid",
+  "mediumpurple",
+  "mediumseagreen",
+  "mediumslateblue",
+  "mediumspringgreen",
+  "mediumturquoise",
+  "mediumvioletred",
+  "midnightblue",
+  "mintcream",
+  "mistyrose",
+  "moccasin",
+  "navajowhite",
+  "navy",
+  "oldlace",
+  "olive",
+  "olivedrab",
+  "orange",
+  "orangered",
+  "orchid",
+  "palegoldenrod",
+  "palegreen",
+  "paleturquoise",
+  "palevioletred",
+  "papayawhip",
+  "peachpuff",
+  "peru",
+  "pink",
+  "plum",
+  "powderblue",
+  "purple",
+  "rebeccapurple",
+  "red",
+  "rosybrown",
+  "royalblue",
+  "saddlebrown",
+  "salmon",
+  "sandybrown",
+  "seagreen",
+  "seashell",
+  "sienna",
+  "silver",
+  "skyblue",
+  "slateblue",
+  "slategray",
+  "slategrey",
+  "snow",
+  "springgreen",
+  "steelblue",
+  "tan",
+  "teal",
+  "thistle",
+  "tomato",
+  "turquoise",
+  "violet",
+  "wheat",
+  "white",
+  "whitesmoke",
+  "yellow",
+  "yellowgreen"
+]);
+function isColorValue(value) {
+  const trimmed = value.trim().toLowerCase();
+  if (/^#([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/.test(trimmed)) return true;
+  if (/^(rgba?|hsla?|oklch|oklab|lch|lab|color)\(/.test(trimmed)) return true;
+  if (CSS_NAMED_COLORS.has(trimmed)) return true;
+  return false;
+}
+
+// src/rules/no-inline-color-styles.ts
+function isColorProperty(name, allowedProperties) {
+  if (allowedProperties.has(name)) return false;
+  return COLOR_PROPERTIES.has(name);
+}
+function isDisallowedValue(value, allowedValues) {
+  const trimmed = value.trim();
+  if (allowedValues.has(trimmed)) return false;
+  if (CSS_GLOBAL_VALUES.has(trimmed)) return false;
+  if (trimmed.startsWith("var(")) return false;
+  return true;
+}
+function isSvgColorAttribute(name, allowedProperties) {
+  if (allowedProperties.has(name)) return false;
+  return SVG_COLOR_ATTRIBUTES.has(name);
+}
+function isDisallowedSvgValue(value, allowedValues) {
+  const trimmed = value.trim();
+  if (allowedValues.has(trimmed)) return false;
+  if (SVG_ALLOWED_VALUES.has(trimmed)) return false;
+  if (trimmed.startsWith("var(")) return false;
+  if (trimmed.startsWith("url(")) return false;
+  return true;
+}
+var rule = {
+  meta: {
+    type: "suggestion",
+    docs: {
+      description: "Disallow inline style color properties and SVG color attributes; use Tailwind classes or design tokens instead"
+    },
+    messages: {
+      inlineColor: "Avoid inline color style '{{property}}: {{value}}'. Use a Tailwind class or design token instead.",
+      svgColor: `Avoid hardcoded SVG color '{{attribute}}="{{value}}"'. Use a design token (e.g. currentColor or a CSS variable) instead.`
+    },
+    schema: [
+      {
+        type: "object",
+        properties: {
+          allowedProperties: {
+            type: "array",
+            items: { type: "string" }
+          },
+          allowedValues: {
+            type: "array",
+            items: { type: "string" }
+          },
+          allowedFiles: {
+            type: "array",
+            items: { type: "string" }
+          }
+        },
+        additionalProperties: false
+      }
+    ]
+  },
+  create(context) {
+    const options = context.options[0] ?? {};
+    const allowedProperties = new Set(options.allowedProperties ?? []);
+    const allowedValues = new Set(options.allowedValues ?? []);
+    const allowedFiles = options.allowedFiles ?? [];
+    if (allowedFiles.length > 0 && allowedFiles.some((pattern) => minimatch(context.filename, pattern, { dot: true }))) {
+      return {};
+    }
+    function checkStyleValue(node, property, value) {
+      switch (value.type) {
+        case "Literal":
+          if (typeof value.value === "string") {
+            if (isDisallowedValue(value.value, allowedValues)) {
+              context.report({
+                node: value,
+                messageId: "inlineColor",
+                data: { property, value: value.value }
+              });
+            }
+          }
+          break;
+        case "TemplateLiteral":
+          if (value.expressions.length === 0 && value.quasis.length === 1) {
+            const raw = value.quasis[0].value.raw;
+            if (isDisallowedValue(raw, allowedValues)) {
+              context.report({
+                node: value,
+                messageId: "inlineColor",
+                data: { property, value: raw }
+              });
+            }
+          }
+          break;
+        case "ConditionalExpression":
+          checkStyleValue(node, property, value.consequent);
+          checkStyleValue(node, property, value.alternate);
+          break;
+      }
+    }
+    return {
+      // Inline style={{ color: "red" }}
+      'JSXAttribute[name.name="style"]'(node) {
+        const attr = node;
+        if (!attr.value) return;
+        if (attr.value.type !== "JSXExpressionContainer") return;
+        const expr = attr.value.expression;
+        if (!expr || expr.type !== "ObjectExpression") return;
+        const obj = expr;
+        for (const prop of obj.properties) {
+          if (prop.type !== "Property") continue;
+          let propertyName;
+          if (prop.key.type === "Identifier") {
+            propertyName = prop.key.name;
+          } else if (prop.key.type === "Literal" && typeof prop.key.value === "string") {
+            propertyName = prop.key.value;
+          }
+          if (!propertyName) continue;
+          if (!isColorProperty(propertyName, allowedProperties)) continue;
+          checkStyleValue(node, propertyName, prop.value);
+        }
+      },
+      // SVG color attributes: <svg fill="red">, <circle stroke="#000">
+      JSXAttribute(node) {
+        const attr = node;
+        if (attr.name.type !== "JSXIdentifier") return;
+        const attrName = attr.name.name;
+        if (attrName === "style" || attrName === "className") return;
+        if (!isSvgColorAttribute(attrName, allowedProperties)) return;
+        if (!attr.value) return;
+        if (attr.value.type === "Literal" && typeof attr.value.value === "string") {
+          if (isDisallowedSvgValue(attr.value.value, allowedValues)) {
+            context.report({
+              node: attr.value,
+              messageId: "svgColor",
+              data: { attribute: attrName, value: attr.value.value }
+            });
+          }
+        } else if (attr.value.type === "JSXExpressionContainer" && attr.value.expression) {
+          const expr = attr.value.expression;
+          if (expr.type === "Literal" && typeof expr.value === "string") {
+            if (isDisallowedSvgValue(expr.value, allowedValues)) {
+              context.report({
+                node: expr,
+                messageId: "svgColor",
+                data: { attribute: attrName, value: expr.value }
+              });
+            }
+          } else if (expr.type === "ConditionalExpression") {
+            for (const branch of [expr.consequent, expr.alternate]) {
+              if (branch.type === "Literal" && typeof branch.value === "string") {
+                if (isDisallowedSvgValue(branch.value, allowedValues)) {
+                  context.report({
+                    node: branch,
+                    messageId: "svgColor",
+                    data: { attribute: attrName, value: branch.value }
+                  });
+                }
+              }
+            }
+          }
+        }
+      }
+    };
+  }
+};
+var no_inline_color_styles_default = rule;
+
+// src/rules/no-palette-colors.ts
+import { minimatch as minimatch2 } from "minimatch";
+
+// src/utils/class-extractors.ts
+var CLASS_UTILITY_NAMES = /* @__PURE__ */ new Set(["cn", "clsx", "classnames", "cx", "twMerge", "twJoin"]);
+function isClassUtility(node) {
+  if (node.type !== "CallExpression") return false;
+  const callee = node.callee;
+  if (callee.type === "Identifier") {
+    return CLASS_UTILITY_NAMES.has(callee.name);
+  }
+  if (callee.type === "MemberExpression" && callee.property.type === "Identifier") {
+    return CLASS_UTILITY_NAMES.has(callee.property.name);
+  }
+  return false;
+}
+function isCvaCall(node) {
+  if (node.type !== "CallExpression") return false;
+  const callee = node.callee;
+  return callee.type === "Identifier" && callee.name === "cva";
+}
+function* extractStringNodes(node) {
+  if (!node) return;
+  switch (node.type) {
+    case "Literal":
+      if (typeof node.value === "string") {
+        yield { value: node.value, node };
+      }
+      break;
+    case "TemplateLiteral":
+      for (const quasi of node.quasis) {
+        if (quasi.value.raw) {
+          yield { value: quasi.value.raw, node: quasi };
+        }
+      }
+      break;
+    case "ConditionalExpression":
+      yield* extractStringNodes(node.consequent);
+      yield* extractStringNodes(node.alternate);
+      break;
+    case "LogicalExpression":
+      yield* extractStringNodes(node.left);
+      yield* extractStringNodes(node.right);
+      break;
+    case "ObjectExpression":
+      for (const prop of node.properties) {
+        if (prop.type === "Property") {
+          yield* extractStringNodes(prop.key);
+        }
+      }
+      break;
+    case "ArrayExpression":
+      for (const element of node.elements) {
+        if (element) {
+          yield* extractStringNodes(element);
+        }
+      }
+      break;
+    case "CallExpression":
+      for (const arg of node.arguments) {
+        yield* extractStringNodes(arg);
+      }
+      break;
+  }
+}
+function* extractCvaStrings(node) {
+  if (node.type !== "CallExpression") return;
+  const [baseArg, configArg] = node.arguments;
+  if (baseArg) {
+    yield* extractStringNodes(baseArg);
+  }
+  if (configArg && configArg.type === "ObjectExpression") {
+    for (const prop of configArg.properties) {
+      if (prop.type !== "Property" || prop.key.type !== "Identifier") continue;
+      if (prop.key.name === "variants" && prop.value.type === "ObjectExpression") {
+        for (const variantGroup of prop.value.properties) {
+          if (variantGroup.type === "Property" && variantGroup.value.type === "ObjectExpression") {
+            for (const variantOption of variantGroup.value.properties) {
+              if (variantOption.type === "Property") {
+                yield* extractStringNodes(variantOption.value);
+              }
+            }
+          }
+        }
+      } else if (prop.key.name === "compoundVariants" && prop.value.type === "ArrayExpression") {
+        for (const element of prop.value.elements) {
+          if (element && element.type === "ObjectExpression") {
+            for (const cvProp of element.properties) {
+              if (cvProp.type === "Property" && cvProp.key.type === "Identifier" && (cvProp.key.name === "class" || cvProp.key.name === "className")) {
+                yield* extractStringNodes(cvProp.value);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// src/utils/palette-regex.ts
+var PREFIXES = [
+  "bg",
+  "text",
+  "border",
+  "ring",
+  "fill",
+  "stroke",
+  "shadow",
+  "outline",
+  "decoration",
+  "accent",
+  "caret",
+  "divide",
+  "from",
+  "via",
+  "to",
+  "placeholder"
+];
+var COLORS = [
+  "red",
+  "green",
+  "blue",
+  "amber",
+  "yellow",
+  "orange",
+  "emerald",
+  "gray",
+  "slate",
+  "violet",
+  "cyan",
+  "pink",
+  "purple",
+  "teal",
+  "lime",
+  "indigo",
+  "fuchsia",
+  "rose",
+  "sky",
+  "zinc",
+  "neutral",
+  "stone"
+];
+var SHADES = [
+  "50",
+  "100",
+  "200",
+  "300",
+  "400",
+  "500",
+  "600",
+  "700",
+  "800",
+  "900",
+  "950"
+];
+var BARE_COLORS = ["white", "black"];
+var prefixGroup = PREFIXES.join("|");
+var colorGroup = COLORS.join("|");
+var shadeGroup = SHADES.join("|");
+var bareGroup = BARE_COLORS.join("|");
+var PALETTE_REGEX = new RegExp(
+  `^(${prefixGroup})-(${colorGroup})-(${shadeGroup})(\\/\\d+)?$`
+);
+var BARE_COLOR_REGEX = new RegExp(
+  `^(${prefixGroup})-(${bareGroup})(\\/\\d+)?$`
+);
+var ARBITRARY_COLOR_REGEX = new RegExp(
+  `^(${prefixGroup})-\\[([^\\]]+)\\](\\/\\d+)?$`
+);
+function stripModifiers(className) {
+  const lastColon = className.lastIndexOf(":");
+  if (lastColon === -1) return className;
+  return className.slice(lastColon + 1);
+}
+function cleanClass(className) {
+  const base = stripModifiers(className);
+  return base.startsWith("!") ? base.slice(1) : base;
+}
+function isPaletteColor(className) {
+  return PALETTE_REGEX.test(cleanClass(className));
+}
+function isBareColor(className) {
+  return BARE_COLOR_REGEX.test(cleanClass(className));
+}
+function isArbitraryColor(className) {
+  const cleaned = cleanClass(className);
+  const match = ARBITRARY_COLOR_REGEX.exec(cleaned);
+  if (!match) return false;
+  const bracketContent = match[2];
+  if (bracketContent.startsWith("var(")) return false;
+  return isColorValue(bracketContent);
+}
+
+// src/utils/string-scanner.ts
+function scanForPaletteColors(classString, options = {}) {
+  const { allowedColors = /* @__PURE__ */ new Set(), allowBareColors = false } = options;
+  const violations = [];
+  for (const token of classString.split(/\s+/)) {
+    if (!token) continue;
+    if (allowedColors.has(token)) continue;
+    if (isPaletteColor(token)) {
+      violations.push(token);
+    } else if (!allowBareColors && isBareColor(token)) {
+      violations.push(token);
+    } else if (isArbitraryColor(token)) {
+      violations.push(token);
+    }
+  }
+  return violations;
+}
+
+// src/rules/no-palette-colors.ts
+var rule2 = {
+  meta: {
+    type: "suggestion",
+    docs: {
+      description: "Disallow hardcoded Tailwind palette colors; use semantic design tokens instead"
+    },
+    messages: {
+      paletteColor: "Avoid hardcoded palette color '{{className}}'. Use a semantic design token instead."
+    },
+    schema: [
+      {
+        type: "object",
+        properties: {
+          allowedColors: {
+            type: "array",
+            items: { type: "string" }
+          },
+          allowedFiles: {
+            type: "array",
+            items: { type: "string" }
+          },
+          allowBareColors: {
+            type: "boolean"
+          },
+          checkAllStrings: {
+            type: "boolean"
+          }
+        },
+        additionalProperties: false
+      }
+    ]
+  },
+  create(context) {
+    const options = context.options[0] ?? {};
+    const allowedColors = new Set(options.allowedColors ?? []);
+    const allowedFiles = options.allowedFiles ?? [];
+    const allowBareColors = options.allowBareColors ?? false;
+    const checkAllStrings = options.checkAllStrings ?? false;
+    if (allowedFiles.length > 0 && allowedFiles.some((pattern) => minimatch2(context.filename, pattern, { dot: true }))) {
+      return {};
+    }
+    const scanOptions = { allowedColors, allowBareColors };
+    const handledNodes = /* @__PURE__ */ new WeakSet();
+    function reportViolations(node, classString) {
+      for (const className of scanForPaletteColors(classString, scanOptions)) {
+        context.report({
+          node,
+          messageId: "paletteColor",
+          data: { className }
+        });
+      }
+    }
+    function processNode(node) {
+      for (const extracted of extractStringNodes(node)) {
+        if (handledNodes.has(extracted.node)) continue;
+        handledNodes.add(extracted.node);
+        reportViolations(extracted.node, extracted.value);
+      }
+    }
+    return {
+      // className="..." / className={`...`} / className={cond ? "..." : "..."}
+      'JSXAttribute[name.name="className"]'(node) {
+        const attr = node;
+        if (!attr.value) return;
+        if (attr.value.type === "Literal" && typeof attr.value.value === "string") {
+          const literalNode = attr.value;
+          if (!handledNodes.has(literalNode)) {
+            handledNodes.add(literalNode);
+            reportViolations(literalNode, attr.value.value);
+          }
+        } else if (attr.value.type === "JSXExpressionContainer") {
+          processNode(attr.value.expression);
+        }
+      },
+      // cn(...), clsx(...), classnames(...), cva(...)
+      CallExpression(node) {
+        if (node.type !== "CallExpression") return;
+        if (isCvaCall(node)) {
+          for (const extracted of extractCvaStrings(node)) {
+            if (handledNodes.has(extracted.node)) continue;
+            handledNodes.add(extracted.node);
+            reportViolations(extracted.node, extracted.value);
+          }
+        } else if (isClassUtility(node)) {
+          for (const arg of node.arguments) {
+            processNode(arg);
+          }
+        }
+      },
+      // Catch-all: any string literal not already handled by specific visitors
+      // Only enabled when checkAllStrings is true (opt-in)
+      ...checkAllStrings ? {
+        Literal(node) {
+          if (handledNodes.has(node)) return;
+          if (node.type !== "Literal") return;
+          if (typeof node.value !== "string") return;
+          reportViolations(node, node.value);
+        },
+        TemplateLiteral(node) {
+          if (handledNodes.has(node)) return;
+          if (node.type !== "TemplateLiteral") return;
+          for (const quasi of node.quasis) {
+            if (handledNodes.has(quasi)) continue;
+            if (quasi.value.raw) {
+              reportViolations(quasi, quasi.value.raw);
+            }
+          }
+        }
+      } : {}
+    };
+  }
+};
+var no_palette_colors_default = rule2;
+
+// src/index.ts
+var plugin = {
+  meta: {
+    name: "eslint-plugin-tailwind-palette-guard",
+    version: "0.1.0"
+  },
+  rules: {
+    "no-palette-colors": no_palette_colors_default,
+    "no-inline-color-styles": no_inline_color_styles_default
+  },
+  configs: {}
+};
+Object.assign(plugin.configs, {
+  recommended: {
+    plugins: {
+      "tailwind-palette-guard": plugin
+    },
+    rules: {
+      "tailwind-palette-guard/no-palette-colors": "warn"
+    }
+  },
+  strict: {
+    plugins: {
+      "tailwind-palette-guard": plugin
+    },
+    rules: {
+      "tailwind-palette-guard/no-palette-colors": "warn",
+      "tailwind-palette-guard/no-inline-color-styles": "warn"
+    }
+  }
+});
+var index_default = plugin;
+export {
+  index_default as default
+};

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "eslint-plugin-tailwind-palette-guard",
+  "version": "0.1.0",
+  "description": "ESLint plugin that flags hardcoded Tailwind palette colors in favor of semantic design tokens",
+  "keywords": [
+    "eslint",
+    "eslintplugin",
+    "tailwind",
+    "tailwindcss",
+    "design-tokens",
+    "lint"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/johanlyckenvik/eslint-plugin-tailwind-palette-guard.git"
+  },
+  "bugs": {
+    "url": "https://github.com/johanlyckenvik/eslint-plugin-tailwind-palette-guard/issues"
+  },
+  "homepage": "https://github.com/johanlyckenvik/eslint-plugin-tailwind-palette-guard#readme",
+  "license": "MIT",
+  "author": "johanlyckenvik",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "prepublishOnly": "npm run build",
+    "tsc": "tsc --noEmit"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "peerDependencies": {
+    "eslint": ">=9"
+  },
+  "devDependencies": {
+    "@types/eslint": "^9.6.0",
+    "@types/node": "^22.0.0",
+    "eslint": "^9.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.7.0",
+    "vitest": "^3.0.0"
+  },
+  "dependencies": {
+    "minimatch": "^10.0.0"
+  }
+}