dembrandt 0.7.1 → 0.7.2

package/index.js

@@ -21,7 +21,7 @@ import { join } from "path";
 program
   .name("dembrandt")
   .description("Extract design tokens from any website")
-  .version("0.7.1")
+  .version("0.7.2")
   .argument("<url>")
   .option("--browser <type>", "Browser to use (chromium|firefox)", "chromium")
   .option("--json-only", "Output raw JSON")

package/lib/extractors.js

@@ -448,7 +448,7 @@ export async function extractBranding(
     await page.mouse.move(0, 0).catch(() => { });
 
     // Merge hover/focus colors into palette
-    hoverFocusColors.forEach(({ color }) => {
+    hoverFocusColors.forEach(({ color, property }) => {
       const isDuplicate = colors.palette.some((c) => c.color === color);
       if (!isDuplicate && color) {
         // Normalize and add to palette
@@ -461,6 +461,18 @@ export async function extractBranding(
           normalized = `#${r}${g}${b}`;
         }
 
+        // Skip chromatic colors that only appear in border/outline on hover — likely focus rings, not brand colors
+        if (property !== 'background-color') {
+          const hex = normalized.replace('#', '');
+          const r = parseInt(hex.substring(0, 2), 16);
+          const g = parseInt(hex.substring(2, 4), 16);
+          const b = parseInt(hex.substring(4, 6), 16);
+          const max = Math.max(r, g, b);
+          const min = Math.min(r, g, b);
+          const saturation = max === 0 ? 0 : (max - min) / max;
+          if (saturation > 0.3) return;
+        }
+
         colors.palette.push({
           color,
           normalized,
@@ -619,16 +631,14 @@ export async function extractBranding(
       result.isCanvasOnly = true;
     }
 
-    // Save page screenshot if requested
+    // Take screenshot if requested
     if (options.screenshotPath) {
-      try {
-        const { mkdirSync } = await import("fs");
-        const { dirname } = await import("path");
-        mkdirSync(dirname(options.screenshotPath), { recursive: true });
-        await page.screenshot({ path: options.screenshotPath, fullPage: false });
-      } catch (err) {
-        console.error(chalk.dim(`  ↳ Screenshot failed: ${err.message}`));
-      }
+      await page.screenshot({ path: options.screenshotPath, fullPage: false });
+    }
+
+    // Include raw colors before filtering if requested
+    if (options.includeRawColors) {
+      result.colors.rawColors = colors._raw || [];
     }
 
     return result;
@@ -987,6 +997,21 @@ async function extractColors(page) {
           continue;
         }
 
+        // Skip UI framework default theme variables
+        if (
+          prop.startsWith("--el-") ||       // Element Plus/UI
+          prop.startsWith("--p-") ||         // PrimeVue/PrimeReact
+          prop.startsWith("--chakra-") ||    // Chakra UI
+          prop.startsWith("--mantine-") ||   // Mantine
+          prop.startsWith("--ant-") ||       // Ant Design
+          prop.startsWith("--bs-") ||        // Bootstrap
+          prop.startsWith("--swiper-") ||    // Swiper
+          prop.startsWith("--rsbs-") ||      // React Spring Bottom Sheet
+          prop.startsWith("--toastify-")     // React Toastify
+        ) {
+          continue;
+        }
+
         // Skip obvious system/default variables
         if (prop.includes("--system-") || prop.includes("--default-")) {
           continue;
@@ -1078,6 +1103,10 @@ async function extractColors(page) {
       ) {
         return;
       }
+      const rect = el.getBoundingClientRect();
+      if (rect.width === 0 || rect.height === 0) {
+        return;
+      }
 
       const bgColor = computed.backgroundColor;
       const textColor = computed.color;
@@ -1128,12 +1157,11 @@ async function extractColors(page) {
         );
       }
 
-      // Collect all colors from this element
-      const allColors = [
-        ...extractColorsFromValue(bgColor),
-        ...extractColorsFromValue(textColor),
-        ...extractColorsFromValue(borderColor)
-      ];
+      // Collect colors by property type
+      const bgColors = extractColorsFromValue(bgColor);
+      const textColors = extractColorsFromValue(textColor);
+      const borderColors = extractColorsFromValue(borderColor);
+      const allColors = [...bgColors, ...textColors, ...borderColors];
 
       allColors.forEach((color) => {
         if (color && color !== "rgba(0, 0, 0, 0)" && color !== "transparent") {
@@ -1141,10 +1169,12 @@ async function extractColors(page) {
           const existing = colorMap.get(normalized) || {
             original: color, // Keep first seen format
             count: 0,
+            bgCount: 0,
             score: 0,
             sources: new Set(),
           };
           existing.count++;
+          if (bgColors.includes(color)) existing.bgCount++;
           existing.score += score;
           if (score > 1) {
             const source = context.split(" ")[0].substring(0, 30); // Limit source length
@@ -1191,6 +1221,22 @@ async function extractColors(page) {
         return true;
       }
 
+      // Chromatic colors (saturated) that never appear as backgrounds are likely browser defaults
+      // or framework internals, not brand colors. Real brand colors appear on backgrounds somewhere.
+      if (data.bgCount === 0) {
+        const hex = normalized.replace('#', '');
+        const r = parseInt(hex.substring(0, 2), 16);
+        const g = parseInt(hex.substring(2, 4), 16);
+        const b = parseInt(hex.substring(4, 6), 16);
+        const max = Math.max(r, g, b);
+        const min = Math.min(r, g, b);
+        const saturation = max === 0 ? 0 : (max - min) / max;
+        // If saturation > 0.3, this is a chromatic color with no background usage
+        if (saturation > 0.3) {
+          return true;
+        }
+      }
+
       return false;
     }
 
@@ -1272,16 +1318,9 @@ async function extractColors(page) {
       return Math.sqrt(deltaL * deltaL + deltaA * deltaA + deltaB * deltaB);
     }
 
-    // Capture all colors before filtering (for QA/debugging)
     const rawColors = Array.from(colorMap.entries())
-      .map(([normalizedColor, data]) => ({
-        color: data.original,
-        normalized: normalizedColor,
-        count: data.count,
-        score: data.score,
-        sources: Array.from(data.sources).slice(0, 3),
-      }))
-      .sort((a, b) => b.count - a.count);
+      .filter(([, data]) => data.count >= threshold)
+      .map(([normalized, data]) => ({ color: data.original, normalized, count: data.count }));
 
     const palette = Array.from(colorMap.entries())
       .filter(([normalizedColor, data]) => {
@@ -1371,8 +1410,8 @@ async function extractColors(page) {
     return {
       semantic: semanticColors,
       palette: perceptuallyDeduped,
-      rawColors,
       cssVariables: filteredCssVariables,
+      _raw: rawColors,
     };
   });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dembrandt",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "description": "Extract design tokens and brand assets from any website",
   "main": "index.js",
   "type": "module",