uilint-eslint 0.2.163 → 0.2.164

package/dist/index.d.ts

@@ -529,7 +529,7 @@ declare const rules: {
     }], unknown, _typescript_eslint_utils_ts_eslint.RuleListener> & {
         name: string;
     };
-    "prefer-tailwind": _typescript_eslint_utils_ts_eslint.RuleModule<"preferTailwind" | "preferSemanticColors" | "preferSemanticColorsWithSuggestion", [({
+    "prefer-tailwind": _typescript_eslint_utils_ts_eslint.RuleModule<"preferTailwind" | "preferSemanticColors" | "preferSemanticColorsWithSuggestion" | "preferSemanticClassGroups" | "semanticOpacityModifier", [({
         styleRatioThreshold?: number;
         minElementsForAnalysis?: number;
         allowedStyleProperties?: string[];
@@ -537,6 +537,12 @@ declare const rules: {
         preferSemanticColors?: boolean;
         allowedHardCodedColors?: string[];
         useLlmSuggestions?: boolean;
+        preferSemanticClassGroups?: boolean;
+        visualUtilityThreshold?: number;
+        visualUtilityMinGroups?: number;
+        disallowSemanticOpacityModifiers?: boolean;
+        allowedOpacityModifierClasses?: string[];
+        allowedVisualUtilityClasses?: string[];
     } | undefined)?], unknown, _typescript_eslint_utils_ts_eslint.RuleListener> & {
         name: string;
     };
@@ -649,7 +655,7 @@ declare const plugin: {
         }], unknown, _typescript_eslint_utils_ts_eslint.RuleListener> & {
             name: string;
         };
-        "prefer-tailwind": _typescript_eslint_utils_ts_eslint.RuleModule<"preferTailwind" | "preferSemanticColors" | "preferSemanticColorsWithSuggestion", [({
+        "prefer-tailwind": _typescript_eslint_utils_ts_eslint.RuleModule<"preferTailwind" | "preferSemanticColors" | "preferSemanticColorsWithSuggestion" | "preferSemanticClassGroups" | "semanticOpacityModifier", [({
             styleRatioThreshold?: number;
             minElementsForAnalysis?: number;
             allowedStyleProperties?: string[];
@@ -657,6 +663,12 @@ declare const plugin: {
             preferSemanticColors?: boolean;
             allowedHardCodedColors?: string[];
             useLlmSuggestions?: boolean;
+            preferSemanticClassGroups?: boolean;
+            visualUtilityThreshold?: number;
+            visualUtilityMinGroups?: number;
+            disallowSemanticOpacityModifiers?: boolean;
+            allowedOpacityModifierClasses?: string[];
+            allowedVisualUtilityClasses?: string[];
         } | undefined)?], unknown, _typescript_eslint_utils_ts_eslint.RuleListener> & {
             name: string;
         };

package/dist/index.js

@@ -4988,7 +4988,7 @@ function formatSuggestionsForMessage(suggestions, limit = 2) {
 // src/rules/prefer-tailwind/index.ts
 var meta14 = defineRuleMeta({
   id: "prefer-tailwind",
-  version: "1.1.0",
+  version: "1.2.0",
   name: "Prefer Tailwind",
   description: "Encourage Tailwind className over inline style attributes",
   defaultSeverity: "warn",
@@ -5005,7 +5005,13 @@ var meta14 = defineRuleMeta({
       ignoreComponents: [],
       preferSemanticColors: true,
       allowedHardCodedColors: [],
-      useLlmSuggestions: false
+      useLlmSuggestions: false,
+      preferSemanticClassGroups: true,
+      visualUtilityThreshold: 4,
+      visualUtilityMinGroups: 2,
+      disallowSemanticOpacityModifiers: true,
+      allowedOpacityModifierClasses: [],
+      allowedVisualUtilityClasses: []
     }
   ],
   optionSchema: {
@@ -5058,6 +5064,48 @@ var meta14 = defineRuleMeta({
         type: "boolean",
         defaultValue: false,
         description: "When enabled, uses Ollama to suggest semantic color replacements based on your project's theme"
+      },
+      {
+        key: "preferSemanticClassGroups",
+        label: "Prefer semantic class groups",
+        type: "boolean",
+        defaultValue: true,
+        description: "Warn when one element uses many low-level visual utilities that should be captured by a semantic class"
+      },
+      {
+        key: "visualUtilityThreshold",
+        label: "Visual utility threshold",
+        type: "number",
+        defaultValue: 4,
+        description: "Minimum number of visual utilities in one class string before warning"
+      },
+      {
+        key: "visualUtilityMinGroups",
+        label: "Visual utility group threshold",
+        type: "number",
+        defaultValue: 2,
+        description: "Minimum number of distinct visual utility groups before warning"
+      },
+      {
+        key: "disallowSemanticOpacityModifiers",
+        label: "Disallow semantic opacity modifiers",
+        type: "boolean",
+        defaultValue: true,
+        description: "Warn on token opacity like text-foreground/80 or border-border/40"
+      },
+      {
+        key: "allowedOpacityModifierClasses",
+        label: "Allowed opacity modifier classes",
+        type: "text",
+        defaultValue: "",
+        description: "Comma-separated exact classes to allow with semantic opacity modifiers"
+      },
+      {
+        key: "allowedVisualUtilityClasses",
+        label: "Allowed visual utility classes",
+        type: "text",
+        defaultValue: "",
+        description: "Comma-separated exact visual utility classes to ignore in cluster detection"
       }
     ]
   },
@@ -5108,7 +5156,11 @@ but only when the file exceeds a configurable threshold ratio.
   allowedStyleProperties: ["transform", "animation"],  // Skip these properties
   ignoreComponents: ["motion.div", "animated.View"],   // Skip animation libraries
   preferSemanticColors: true,    // Warn on hard-coded colors like bg-red-500
-  allowedHardCodedColors: ["gray", "slate"]  // Allow specific color palettes
+  allowedHardCodedColors: ["gray", "slate"],  // Allow specific color palettes
+  preferSemanticClassGroups: true,
+  visualUtilityThreshold: 4,
+  visualUtilityMinGroups: 2,
+  disallowSemanticOpacityModifiers: true
 }]
 \`\`\`
 
@@ -5136,6 +5188,39 @@ Semantic colors like \`bg-background\`, \`text-foreground\`, \`bg-primary\`, \`b
 
 Colors that are always allowed: \`white\`, \`black\`, \`transparent\`, \`inherit\`, \`current\`.
 
+## Semantic Class Groups
+
+When \`preferSemanticClassGroups\` is enabled, the rule warns when a single
+class string combines many low-level visual utilities such as background,
+border, radius, shadow, gradient, ring/outline, blur, and decoration classes.
+This catches generated component styling that should usually become a semantic
+project class such as \`brand-panel\`, \`ui-cell\`, or \`surface-card\`.
+
+### \u274C Dense visual utility cluster
+
+\`\`\`tsx
+<section className="bg-card rounded-2xl shadow-md border border-border/40" />
+\`\`\`
+
+### \u2705 Semantic class
+
+\`\`\`tsx
+<section className="brand-panel" />
+\`\`\`
+
+## Semantic Opacity Modifiers
+
+When \`disallowSemanticOpacityModifiers\` is enabled, semantic color tokens with
+opacity suffixes are reported:
+
+\`\`\`tsx
+<p className="text-foreground/80" />
+<div className="border-border/40 hover:bg-accent/50" />
+\`\`\`
+
+Prefer a fully semantic token such as \`text-muted-foreground\`, or define a new
+theme token/class when the opacity represents a reusable state.
+
 ## LLM-Powered Suggestions
 
 When \`useLlmSuggestions\` is enabled and Ollama is running locally, the rule will:
@@ -5235,19 +5320,6 @@ function createHardCodedColorRegex(colorNames) {
     "g"
   );
 }
-function getClassNameValue(attr) {
-  if (!attr.value) return null;
-  if (attr.value.type === "Literal" && typeof attr.value.value === "string") {
-    return attr.value.value;
-  }
-  if (attr.value.type === "JSXExpressionContainer" && attr.value.expression.type === "Literal" && typeof attr.value.expression.value === "string") {
-    return attr.value.expression.value;
-  }
-  if (attr.value.type === "JSXExpressionContainer" && attr.value.expression.type === "TemplateLiteral") {
-    return attr.value.expression.quasis.map((q) => q.value.raw).join(" ");
-  }
-  return null;
-}
 function findHardCodedColors(className, allowedColors) {
   const disallowedColorNames = HARD_CODED_COLOR_NAMES.filter(
     (c) => !allowedColors.includes(c)
@@ -5261,6 +5333,205 @@ function findHardCodedColors(className, allowedColors) {
   }
   return matches;
 }
+var CLASS_COMBINER_NAMES = /* @__PURE__ */ new Set([
+  "cn",
+  "clsx",
+  "classnames",
+  "cva",
+  "twMerge"
+]);
+var COLOR_UTILITY_PREFIXES = [
+  "bg",
+  "text",
+  "border",
+  "border-t",
+  "border-r",
+  "border-b",
+  "border-l",
+  "border-x",
+  "border-y",
+  "ring",
+  "ring-offset",
+  "outline",
+  "decoration",
+  "accent",
+  "fill",
+  "stroke",
+  "from",
+  "via",
+  "to",
+  "divide",
+  "placeholder",
+  "caret"
+];
+var NON_SEMANTIC_COLOR_VALUES = /* @__PURE__ */ new Set([
+  "black",
+  "white",
+  "transparent",
+  "inherit",
+  "current",
+  "currentColor"
+]);
+var TEXT_SIZE_VALUES = /* @__PURE__ */ new Set([
+  "xs",
+  "sm",
+  "base",
+  "lg",
+  "xl",
+  "2xl",
+  "3xl",
+  "4xl",
+  "5xl",
+  "6xl",
+  "7xl",
+  "8xl",
+  "9xl"
+]);
+var BORDER_WIDTH_VALUES = /* @__PURE__ */ new Set(["0", "2", "4", "8"]);
+var SHADOW_SIZE_VALUES = /* @__PURE__ */ new Set([
+  "2xs",
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl",
+  "2xl",
+  "inner",
+  "none"
+]);
+function stripImportant(value) {
+  return value.replace(/^!/, "").replace(/!$/, "");
+}
+function getBaseClass2(token) {
+  let bracketDepth = 0;
+  let lastVariantColon = -1;
+  for (let i = 0; i < token.length; i++) {
+    const char = token[i];
+    if (char === "[") {
+      bracketDepth++;
+    } else if (char === "]" && bracketDepth > 0) {
+      bracketDepth--;
+    } else if (char === ":" && bracketDepth === 0) {
+      lastVariantColon = i;
+    }
+  }
+  return stripImportant(token.slice(lastVariantColon + 1));
+}
+function extractClassTokens(className) {
+  return className.split(/\s+/g).map((token) => token.trim()).filter(Boolean).map((token) => ({
+    original: token,
+    base: getBaseClass2(token)
+  }));
+}
+function classIsAllowed(token, allowedClasses) {
+  return allowedClasses.includes(token.original) || allowedClasses.includes(token.base);
+}
+function getColorUtilityPrefix(baseClass) {
+  for (const prefix of COLOR_UTILITY_PREFIXES) {
+    if (baseClass === prefix || baseClass.startsWith(`${prefix}-`)) {
+      return prefix;
+    }
+  }
+  return null;
+}
+function getUtilityValue(baseClass, prefix) {
+  if (baseClass === prefix) return "";
+  return baseClass.slice(prefix.length + 1);
+}
+function isBracketColorValue(value) {
+  return value.startsWith("[") && (value.includes("var(") || value.startsWith("[color:") || value.startsWith("[--") || value.includes("oklch(") || value.includes("rgb(") || value.includes("hsl("));
+}
+function isHardCodedTailwindColorValue(value) {
+  const [name, shade] = value.split("-");
+  return HARD_CODED_COLOR_NAMES.includes(name) && /^\d{1,3}$/.test(shade ?? "");
+}
+function isSemanticColorValue(value, prefix) {
+  if (!value) return false;
+  if (NON_SEMANTIC_COLOR_VALUES.has(value)) return false;
+  if (prefix === "text" && TEXT_SIZE_VALUES.has(value)) return false;
+  if (prefix.startsWith("border") && BORDER_WIDTH_VALUES.has(value)) return false;
+  if (prefix === "shadow" && SHADOW_SIZE_VALUES.has(value)) return false;
+  if (isHardCodedTailwindColorValue(value)) return false;
+  if (value.startsWith("[")) return isBracketColorValue(value);
+  return true;
+}
+function getVisualUtilityGroup(baseClass) {
+  if (baseClass === "border" || baseClass.startsWith("border-") || baseClass.startsWith("divide-")) {
+    return "border";
+  }
+  if (baseClass === "rounded" || baseClass.startsWith("rounded-")) {
+    return "radius";
+  }
+  if (baseClass === "shadow" || baseClass.startsWith("shadow-") || baseClass === "drop-shadow" || baseClass.startsWith("drop-shadow-")) {
+    return "shadow";
+  }
+  if (baseClass.startsWith("bg-gradient-") || baseClass.startsWith("from-") || baseClass.startsWith("via-") || baseClass.startsWith("to-")) {
+    return "gradient";
+  }
+  if (baseClass === "ring" || baseClass.startsWith("ring-") || baseClass === "outline" || baseClass.startsWith("outline-")) {
+    return "ring";
+  }
+  if (baseClass === "blur" || baseClass.startsWith("blur-") || baseClass === "backdrop-blur" || baseClass.startsWith("backdrop-blur-")) {
+    return "blur";
+  }
+  if (baseClass.startsWith("decoration-") || baseClass.startsWith("accent-") || baseClass.startsWith("fill-") || baseClass.startsWith("stroke-")) {
+    return "decoration";
+  }
+  if (baseClass.startsWith("bg-")) {
+    return "surface";
+  }
+  const prefix = getColorUtilityPrefix(baseClass);
+  if (prefix) {
+    const value = getUtilityValue(baseClass, prefix).split("/")[0] ?? "";
+    if (isSemanticColorValue(value, prefix) || isBracketColorValue(value)) {
+      return "surface";
+    }
+  }
+  return null;
+}
+function findVisualUtilityCluster(className, threshold, minGroups, allowedClasses) {
+  const matches = [];
+  for (const token of extractClassTokens(className)) {
+    if (classIsAllowed(token, allowedClasses)) {
+      continue;
+    }
+    const group = getVisualUtilityGroup(token.base);
+    if (group) {
+      matches.push({ token: token.original, group });
+    }
+  }
+  const groups = new Set(matches.map((match) => match.group));
+  if (matches.length >= threshold && groups.size >= minGroups) {
+    return matches.map((match) => match.token);
+  }
+  return [];
+}
+function findSemanticOpacityModifiers(className, allowedClasses) {
+  const matches = [];
+  for (const token of extractClassTokens(className)) {
+    if (classIsAllowed(token, allowedClasses)) {
+      continue;
+    }
+    const opacityMatch = token.base.match(/^(.*)\/(\d{1,3})$/);
+    if (!opacityMatch) {
+      continue;
+    }
+    const baseWithoutOpacity = opacityMatch[1];
+    const opacityValue = Number(opacityMatch[2]);
+    if (opacityValue < 0 || opacityValue > 100) {
+      continue;
+    }
+    const prefix = getColorUtilityPrefix(baseWithoutOpacity);
+    if (!prefix) {
+      continue;
+    }
+    const value = getUtilityValue(baseWithoutOpacity, prefix);
+    if (isSemanticColorValue(value, prefix) || isBracketColorValue(value)) {
+      matches.push(token.original);
+    }
+  }
+  return matches;
+}
 var prefer_tailwind_default = createRule({
   name: "prefer-tailwind",
   meta: {
@@ -5271,7 +5542,9 @@ var prefer_tailwind_default = createRule({
     messages: {
       preferTailwind: "Prefer Tailwind className over inline style. This element uses style attribute without className.",
       preferSemanticColors: "Hard-coded colors: {{colors}}. Use semantic classes instead.",
-      preferSemanticColorsWithSuggestion: "Hard-coded colors: {{colors}}. {{suggestion}}"
+      preferSemanticColorsWithSuggestion: "Hard-coded colors: {{colors}}. {{suggestion}}",
+      preferSemanticClassGroups: "Dense visual utility cluster: {{classes}}. Move repeated panel/card styling into a semantic class.",
+      semanticOpacityModifier: "Semantic color opacity modifiers: {{classes}}. Use fully semantic classes or tokens instead."
     },
     schema: [
       {
@@ -5310,6 +5583,34 @@ var prefer_tailwind_default = createRule({
           useLlmSuggestions: {
             type: "boolean",
             description: "Use Ollama LLM to suggest semantic color replacements"
+          },
+          preferSemanticClassGroups: {
+            type: "boolean",
+            description: "Warn when one class string contains many low-level visual utilities"
+          },
+          visualUtilityThreshold: {
+            type: "number",
+            minimum: 1,
+            description: "Minimum visual utility count in one class string before warning"
+          },
+          visualUtilityMinGroups: {
+            type: "number",
+            minimum: 1,
+            description: "Minimum distinct visual utility groups before warning"
+          },
+          disallowSemanticOpacityModifiers: {
+            type: "boolean",
+            description: "Warn on semantic color opacity modifiers like text-foreground/80"
+          },
+          allowedOpacityModifierClasses: {
+            type: "array",
+            items: { type: "string" },
+            description: "Exact classes to allow with semantic opacity modifiers"
+          },
+          allowedVisualUtilityClasses: {
+            type: "array",
+            items: { type: "string" },
+            description: "Exact visual utility classes to ignore in cluster detection"
           }
         },
         additionalProperties: false
@@ -5324,7 +5625,13 @@ var prefer_tailwind_default = createRule({
       ignoreComponents: [],
       preferSemanticColors: true,
       allowedHardCodedColors: [],
-      useLlmSuggestions: false
+      useLlmSuggestions: false,
+      preferSemanticClassGroups: true,
+      visualUtilityThreshold: 4,
+      visualUtilityMinGroups: 2,
+      disallowSemanticOpacityModifiers: true,
+      allowedOpacityModifierClasses: [],
+      allowedVisualUtilityClasses: []
     }
   ],
   create(context) {
@@ -5336,6 +5643,12 @@ var prefer_tailwind_default = createRule({
     const preferSemanticColors = options.preferSemanticColors ?? true;
     const allowedHardCodedColors = options.allowedHardCodedColors ?? [];
     const useLlmSuggestions = options.useLlmSuggestions ?? false;
+    const preferSemanticClassGroups = options.preferSemanticClassGroups ?? true;
+    const visualUtilityThreshold = options.visualUtilityThreshold ?? 4;
+    const visualUtilityMinGroups = options.visualUtilityMinGroups ?? 2;
+    const disallowSemanticOpacityModifiers = options.disallowSemanticOpacityModifiers ?? true;
+    const allowedOpacityModifierClasses = options.allowedOpacityModifierClasses ?? [];
+    const allowedVisualUtilityClasses = options.allowedVisualUtilityClasses ?? [];
     let fileContent = null;
     const filePath = context.filename;
     const fileDir = dirname5(filePath);
@@ -5356,6 +5669,92 @@ var prefer_tailwind_default = createRule({
     function isClassNameAttribute(attr) {
       return attr.name.type === "JSXIdentifier" && (attr.name.name === "className" || attr.name.name === "class");
     }
+    function checkClassString(node, className) {
+      if (preferSemanticColors) {
+        const hardCodedColors = findHardCodedColors(
+          className,
+          allowedHardCodedColors
+        );
+        if (hardCodedColors.length > 0) {
+          const colorsStr = hardCodedColors.join(", ");
+          if (useLlmSuggestions) {
+            const { suggestions } = getColorSuggestions(
+              hardCodedColors,
+              fileDir,
+              getFileContent()
+            );
+            const suggestionStr = formatSuggestionsForMessage(suggestions);
+            if (suggestionStr) {
+              context.report({
+                node,
+                messageId: "preferSemanticColorsWithSuggestion",
+                data: { colors: colorsStr, suggestion: suggestionStr }
+              });
+            } else {
+              context.report({
+                node,
+                messageId: "preferSemanticColors",
+                data: { colors: colorsStr }
+              });
+            }
+          } else {
+            context.report({
+              node,
+              messageId: "preferSemanticColors",
+              data: { colors: colorsStr }
+            });
+          }
+        }
+      }
+      if (preferSemanticClassGroups) {
+        const visualUtilities = findVisualUtilityCluster(
+          className,
+          visualUtilityThreshold,
+          visualUtilityMinGroups,
+          allowedVisualUtilityClasses
+        );
+        if (visualUtilities.length > 0) {
+          context.report({
+            node,
+            messageId: "preferSemanticClassGroups",
+            data: { classes: visualUtilities.join(", ") }
+          });
+        }
+      }
+      if (disallowSemanticOpacityModifiers) {
+        const opacityClasses = findSemanticOpacityModifiers(
+          className,
+          allowedOpacityModifierClasses
+        );
+        if (opacityClasses.length > 0) {
+          context.report({
+            node,
+            messageId: "semanticOpacityModifier",
+            data: { classes: opacityClasses.join(", ") }
+          });
+        }
+      }
+    }
+    function processTemplateLiteral(node) {
+      for (const quasi of node.quasis) {
+        checkClassString(quasi, quasi.value.raw);
+      }
+    }
+    function processClassAttribute(attr) {
+      const value = attr.value;
+      if (value?.type === "Literal" && typeof value.value === "string") {
+        checkClassString(value, value.value);
+      }
+      if (value?.type === "JSXExpressionContainer") {
+        const expr = value.expression;
+        if (expr.type === "Literal" && typeof expr.value === "string") {
+          checkClassString(expr, expr.value);
+        }
+        if (expr.type === "TemplateLiteral") {
+          processTemplateLiteral(expr);
+        }
+      }
+    }
     return {
       JSXOpeningElement(node) {
         const componentName = getComponentName2(node);
@@ -5375,45 +5774,7 @@ var prefer_tailwind_default = createRule({
             }
             if (isClassNameAttribute(attr)) {
               hasClassName = true;
-              if (preferSemanticColors) {
-                const classNameValue = getClassNameValue(attr);
-                if (classNameValue) {
-                  const hardCodedColors = findHardCodedColors(
-                    classNameValue,
-                    allowedHardCodedColors
-                  );
-                  if (hardCodedColors.length > 0) {
-                    const colorsStr = hardCodedColors.join(", ");
-                    if (useLlmSuggestions) {
-                      const { suggestions } = getColorSuggestions(
-                        hardCodedColors,
-                        fileDir,
-                        getFileContent()
-                      );
-                      const suggestionStr = formatSuggestionsForMessage(suggestions);
-                      if (suggestionStr) {
-                        context.report({
-                          node,
-                          messageId: "preferSemanticColorsWithSuggestion",
-                          data: { colors: colorsStr, suggestion: suggestionStr }
-                        });
-                      } else {
-                        context.report({
-                          node,
-                          messageId: "preferSemanticColors",
-                          data: { colors: colorsStr }
-                        });
-                      }
-                    } else {
-                      context.report({
-                        node,
-                        messageId: "preferSemanticColors",
-                        data: { colors: colorsStr }
-                      });
-                    }
-                  }
-                }
-              }
+              processClassAttribute(attr);
             }
           }
         }
@@ -5448,6 +5809,32 @@ var prefer_tailwind_default = createRule({
             });
           }
         }
+      },
+      CallExpression(node) {
+        if (node.callee.type !== "Identifier") {
+          return;
+        }
+        if (!CLASS_COMBINER_NAMES.has(node.callee.name)) {
+          return;
+        }
+        for (const arg of node.arguments) {
+          if (arg.type === "Literal" && typeof arg.value === "string") {
+            checkClassString(arg, arg.value);
+          }
+          if (arg.type === "TemplateLiteral") {
+            processTemplateLiteral(arg);
+          }
+          if (arg.type === "ArrayExpression") {
+            for (const element of arg.elements) {
+              if (element?.type === "Literal" && typeof element.value === "string") {
+                checkClassString(element, element.value);
+              }
+              if (element?.type === "TemplateLiteral") {
+                processTemplateLiteral(element);
+              }
+            }
+          }
+        }
       }
     };
   }
@@ -5872,7 +6259,13 @@ var recommendedConfig = {
         "ignoreComponents": [],
         "preferSemanticColors": true,
         "allowedHardCodedColors": [],
-        "useLlmSuggestions": false
+        "useLlmSuggestions": false,
+        "preferSemanticClassGroups": true,
+        "visualUtilityThreshold": 4,
+        "visualUtilityMinGroups": 2,
+        "disallowSemanticOpacityModifiers": true,
+        "allowedOpacityModifierClasses": [],
+        "allowedVisualUtilityClasses": []
       }
     ]]
   }
@@ -6006,7 +6399,13 @@ var strictConfig = {
         "ignoreComponents": [],
         "preferSemanticColors": true,
         "allowedHardCodedColors": [],
-        "useLlmSuggestions": false
+        "useLlmSuggestions": false,
+        "preferSemanticClassGroups": true,
+        "visualUtilityThreshold": 4,
+        "visualUtilityMinGroups": 2,
+        "disallowSemanticOpacityModifiers": true,
+        "allowedOpacityModifierClasses": [],
+        "allowedVisualUtilityClasses": []
       }
     ]]
   }