Refresh the Impeccable product experience

Rework the landing page proof, steering demo, feature grid, slop catalog, detector coverage, theming, Live workflow, and responsive behavior.\n\nAI-assisted implementation by OpenAI Codex.

cli/engine/detect-antipatterns-browser.js

@@ -1264,11 +1264,6 @@ function findShadowColor(layer) {
   if (fn) return { color: parseAnyColor(fn[0]), start: fn.index, end: fn.index + fn[0].length };
   const hex = layer.match(/#[0-9a-fA-F]{3,8}\b/);
   if (hex) return { color: parseAnyColor(hex[0]), start: hex.index, end: hex.index + hex[0].length };
-  // Keep unresolved custom properties intact as one color token. Otherwise
-  // names such as `--signal-blue` are accidentally parsed as the named color
-  // `blue`, and digits in names such as `--accent-500` become shadow lengths.
-  const variable = layer.match(/var\([^)]*\)/i);
-  if (variable) return { color: null, start: variable.index, end: variable.index + variable[0].length };
   const wordRe = /[a-zA-Z][a-zA-Z]*/g;
   let m;
   while ((m = wordRe.exec(layer)) !== null) {
@@ -1278,13 +1273,6 @@ function findShadowColor(layer) {
   return null;
 }
 
-const CHROMATIC_CUSTOM_PROPERTY_HINT_RE = /(?:^|-)(?:accent|kinpaku|patina|gold|red|orange|amber|yellow|lime|green|emerald|teal|cyan|blue|indigo|violet|purple|magenta|pink|rose|coral|aqua|mint|burgundy|crimson|scarlet)(?:-|$)/i;
-
-function unresolvedShadowTokenLooksChromatic(layer) {
-  const variable = layer.match(/var\(\s*(--[\w-]+)/i);
-  return variable ? CHROMATIC_CUSTOM_PROPERTY_HINT_RE.test(variable[1]) : false;
-}
-
 // Extract the length values of a shadow layer in declaration order, with the
 // color token removed so its components aren't misread as lengths. Handles
 // computed-style px values AND authored unitless zeros ("0 0 20px"); rem/em
@@ -1686,22 +1674,16 @@ function scanCssTextForInsetStripe(content) {
     // menu items — are wider or leave width to layout.
     const declaredWidth = cssLengthToPx(resolveVarRefs(decls.get('width') || decls.get('inline-size') || '', customProps));
     if (declaredWidth != null && declaredWidth <= 40) continue;
-    for (const authoredLayer of shadow.split(/,(?![^(]*\))/)) {
-      const layer = resolveVarRefs(authoredLayer, customProps);
+    const value = resolveVarRefs(shadow, customProps);
+    for (const layer of value.split(/,(?![^(]*\))/)) {
       if (!/\binset\b/i.test(layer)) continue;
       const colorInfo = findShadowColor(layer);
-      if (!colorInfo) continue;
-      if (colorInfo.color) {
-        const c = colorInfo.color;
-        if ((c.a ?? 1) < 0.1) continue;
-        const chroma = Math.max(c.r, c.g, c.b) - Math.min(c.r, c.g, c.b);
-        if (chroma < 30) continue;
-      } else if (!unresolvedShadowTokenLooksChromatic(authoredLayer)) {
-        // External custom properties are unknowable in an isolated artifact.
-        // Only explicit accent or hue semantics justify treating one as
-        // chromatic; neutral shadow/divider tokens and currentColor stay legal.
-        continue;
-      }
+      // Unresolvable colors (currentColor, external vars): don't guess.
+      if (!colorInfo || !colorInfo.color) continue;
+      const c = colorInfo.color;
+      if ((c.a ?? 1) < 0.1) continue;
+      const chroma = Math.max(c.r, c.g, c.b) - Math.min(c.r, c.g, c.b);
+      if (chroma < 30) continue;
       const vals = extractShadowLengths(layer, colorInfo.start, colorInfo.end);
       const x = vals[0] || 0, y = vals[1] || 0, blur = vals[2] || 0, sp = vals[3] || 0;
       if (blur !== 0 || sp !== 0) continue;

cli/engine/engines/regex/detect-text.mjs

@@ -2,7 +2,7 @@ import { GENERIC_FONTS, OVERUSED_FONTS } from '../../shared/constants.mjs';
 import { isNeutralColor } from '../../shared/color.mjs';
 import { extractGoogleFontFamilies } from '../../shared/fonts.mjs';
 import { checkSourceDesignSystem } from '../../design-system.mjs';
-import { scanCssTextForGlow, scanCssTextForInsetStripe, scanCssTextForMarquee, scanCssTextForRadialHalo } from '../../rules/checks.mjs';
+import { scanCssTextForGlow, scanCssTextForMarquee, scanCssTextForRadialHalo } from '../../rules/checks.mjs';
 import { isFullPage } from '../../shared/page.mjs';
 import { applyInlineIgnores } from '../../shared/inline-ignores.mjs';
 import { finding } from '../../findings.mjs';
@@ -340,12 +340,12 @@ const REGEX_ANALYZERS = [
 ];
 
 // ---------------------------------------------------------------------------
-// Style block extraction (Astro/Vue/Svelte <style> blocks)
+// Style block extraction (Vue/Svelte <style> blocks)
 // ---------------------------------------------------------------------------
 
 function extractStyleBlocks(content, ext) {
   ext = ext.toLowerCase();
-  if (ext !== '.astro' && ext !== '.vue' && ext !== '.svelte') return [];
+  if (ext !== '.vue' && ext !== '.svelte') return [];
   const blocks = [];
   const re = /<style[^>]*>([\s\S]*?)<\/style>/gi;
   let m;
@@ -472,16 +472,8 @@ function detectText(content, filePath, options = {}) {
     profile,
     phase: 'source',
   }));
-  if (cssLike.has(ext)) {
-    findings.push(...profileFindings(profile, {
-      engine: 'regex',
-      phase: 'source',
-      ruleId: 'side-tab',
-      target: filePath,
-    }, () => scanCssTextForInsetStripe(content).map(hit => finding(hit.id, filePath, hit.snippet))));
-  }
 
-  // Extract and scan <style> blocks from Astro/Vue/Svelte components.
+  // Extract and scan <style> blocks from Vue/Svelte SFCs
   const styleBlocks = profile
     ? profileStep(profile, {
       engine: 'regex',
@@ -496,13 +488,6 @@ function detectText(content, filePath, options = {}) {
       profile,
       phase: 'style-block',
     }));
-    findings.push(...profileFindings(profile, {
-      engine: 'regex',
-      phase: 'style-block',
-      ruleId: 'side-tab',
-      target: filePath,
-    }, () => scanCssTextForInsetStripe(block.content)
-      .map(hit => finding(hit.id, filePath, hit.snippet, block.startLine))));
   }
 
   // Extract and scan CSS-in-JS template literals
@@ -520,13 +505,6 @@ function detectText(content, filePath, options = {}) {
       profile,
       phase: 'css-in-js',
     }));
-    findings.push(...profileFindings(profile, {
-      engine: 'regex',
-      phase: 'css-in-js',
-      ruleId: 'side-tab',
-      target: filePath,
-    }, () => scanCssTextForInsetStripe(block.content)
-      .map(hit => finding(hit.id, filePath, hit.snippet, block.startLine))));
   }
 
   if (options?.designSystem) {

cli/engine/rules/checks.mjs

@@ -475,11 +475,6 @@ function findShadowColor(layer) {
   if (fn) return { color: parseAnyColor(fn[0]), start: fn.index, end: fn.index + fn[0].length };
   const hex = layer.match(/#[0-9a-fA-F]{3,8}\b/);
   if (hex) return { color: parseAnyColor(hex[0]), start: hex.index, end: hex.index + hex[0].length };
-  // Keep unresolved custom properties intact as one color token. Otherwise
-  // names such as `--signal-blue` are accidentally parsed as the named color
-  // `blue`, and digits in names such as `--accent-500` become shadow lengths.
-  const variable = layer.match(/var\([^)]*\)/i);
-  if (variable) return { color: null, start: variable.index, end: variable.index + variable[0].length };
   const wordRe = /[a-zA-Z][a-zA-Z]*/g;
   let m;
   while ((m = wordRe.exec(layer)) !== null) {
@@ -489,13 +484,6 @@ function findShadowColor(layer) {
   return null;
 }
 
-const CHROMATIC_CUSTOM_PROPERTY_HINT_RE = /(?:^|-)(?:accent|kinpaku|patina|gold|red|orange|amber|yellow|lime|green|emerald|teal|cyan|blue|indigo|violet|purple|magenta|pink|rose|coral|aqua|mint|burgundy|crimson|scarlet)(?:-|$)/i;
-
-function unresolvedShadowTokenLooksChromatic(layer) {
-  const variable = layer.match(/var\(\s*(--[\w-]+)/i);
-  return variable ? CHROMATIC_CUSTOM_PROPERTY_HINT_RE.test(variable[1]) : false;
-}
-
 // Extract the length values of a shadow layer in declaration order, with the
 // color token removed so its components aren't misread as lengths. Handles
 // computed-style px values AND authored unitless zeros ("0 0 20px"); rem/em
@@ -897,22 +885,16 @@ function scanCssTextForInsetStripe(content) {
     // menu items — are wider or leave width to layout.
     const declaredWidth = cssLengthToPx(resolveVarRefs(decls.get('width') || decls.get('inline-size') || '', customProps));
     if (declaredWidth != null && declaredWidth <= 40) continue;
-    for (const authoredLayer of shadow.split(/,(?![^(]*\))/)) {
-      const layer = resolveVarRefs(authoredLayer, customProps);
+    const value = resolveVarRefs(shadow, customProps);
+    for (const layer of value.split(/,(?![^(]*\))/)) {
       if (!/\binset\b/i.test(layer)) continue;
       const colorInfo = findShadowColor(layer);
-      if (!colorInfo) continue;
-      if (colorInfo.color) {
-        const c = colorInfo.color;
-        if ((c.a ?? 1) < 0.1) continue;
-        const chroma = Math.max(c.r, c.g, c.b) - Math.min(c.r, c.g, c.b);
-        if (chroma < 30) continue;
-      } else if (!unresolvedShadowTokenLooksChromatic(authoredLayer)) {
-        // External custom properties are unknowable in an isolated artifact.
-        // Only explicit accent or hue semantics justify treating one as
-        // chromatic; neutral shadow/divider tokens and currentColor stay legal.
-        continue;
-      }
+      // Unresolvable colors (currentColor, external vars): don't guess.
+      if (!colorInfo || !colorInfo.color) continue;
+      const c = colorInfo.color;
+      if ((c.a ?? 1) < 0.1) continue;
+      const chroma = Math.max(c.r, c.g, c.b) - Math.min(c.r, c.g, c.b);
+      if (chroma < 30) continue;
       const vals = extractShadowLengths(layer, colorInfo.start, colorInfo.end);
       const x = vals[0] || 0, y = vals[1] || 0, blur = vals[2] || 0, sp = vals[3] || 0;
       if (blur !== 0 || sp !== 0) continue;