@d34dman/flowdrop 0.0.43 → 0.0.45

package/dist/utils/colors.js

@@ -5,63 +5,65 @@
  */
 import { getPortCompatibilityChecker } from './connections.js';
 /**
- * Category color mapping to reference tokens (CSS variables)
+ * Category color mapping to design tokens (CSS variables)
+ * Uses --fd-node-* tokens from tokens.css
  */
 export const CATEGORY_COLOR_TOKENS = {
-    triggers: 'var(--color-ref-cyan-500)',
-    inputs: 'var(--color-ref-emerald-500)',
-    outputs: 'var(--color-ref-blue-600)',
-    prompts: 'var(--color-ref-amber-500)',
-    models: 'var(--color-ref-indigo-500)',
-    processing: 'var(--color-ref-teal-500)',
-    logic: 'var(--color-ref-purple-600)',
-    data: 'var(--color-ref-orange-500)',
-    helpers: 'var(--color-ref-slate-500)',
-    tools: 'var(--color-ref-amber-500)',
-    'vector stores': 'var(--color-ref-emerald-500)',
-    embeddings: 'var(--color-ref-indigo-500)',
-    memories: 'var(--color-ref-blue-600)',
-    agents: 'var(--color-ref-teal-500)',
-    ai: 'var(--color-ref-purple-500)',
-    bundles: 'var(--color-ref-slate-500)'
+    triggers: 'var(--fd-node-cyan)',
+    inputs: 'var(--fd-node-emerald)',
+    outputs: 'var(--fd-node-blue)',
+    prompts: 'var(--fd-node-amber)',
+    models: 'var(--fd-node-indigo)',
+    processing: 'var(--fd-node-teal)',
+    logic: 'var(--fd-node-purple)',
+    data: 'var(--fd-node-orange)',
+    helpers: 'var(--fd-node-slate)',
+    tools: 'var(--fd-node-amber)',
+    'vector stores': 'var(--fd-node-emerald)',
+    embeddings: 'var(--fd-node-indigo)',
+    memories: 'var(--fd-node-blue)',
+    agents: 'var(--fd-node-teal)',
+    ai: 'var(--fd-node-purple)',
+    bundles: 'var(--fd-node-slate)'
 };
 /**
  * Default data type colors for fallback when port configuration is not available
+ * Uses --fd-node-* tokens from tokens.css
  */
 const DEFAULT_DATA_TYPE_COLORS = {
-    string: 'var(--color-ref-emerald-500)',
-    text: 'var(--color-ref-emerald-500)',
-    number: 'var(--color-ref-blue-600)',
-    integer: 'var(--color-ref-blue-600)',
-    float: 'var(--color-ref-blue-600)',
-    boolean: 'var(--color-ref-purple-600)',
-    array: 'var(--color-ref-amber-500)',
-    list: 'var(--color-ref-amber-500)',
-    object: 'var(--color-ref-orange-500)',
-    json: 'var(--color-ref-orange-500)',
-    mixed: 'var(--color-ref-orange-500)',
-    file: 'var(--color-ref-red-500)',
-    document: 'var(--color-ref-red-500)',
-    image: 'var(--color-ref-pink-500)',
-    picture: 'var(--color-ref-pink-500)',
-    audio: 'var(--color-ref-indigo-500)',
-    sound: 'var(--color-ref-indigo-500)',
-    video: 'var(--color-ref-teal-500)',
-    movie: 'var(--color-ref-teal-500)',
-    url: 'var(--color-ref-cyan-500)',
-    email: 'var(--color-ref-cyan-500)',
-    date: 'var(--color-ref-lime-500)',
-    datetime: 'var(--color-ref-lime-500)',
-    time: 'var(--color-ref-lime-500)',
-    tool: 'var(--color-ref-amber-500)',
-    trigger: 'var(--color-ref-gray-950)',
-    branch: 'var(--color-ref-purple-500)'
+    string: 'var(--fd-node-emerald)',
+    text: 'var(--fd-node-emerald)',
+    number: 'var(--fd-node-blue)',
+    integer: 'var(--fd-node-blue)',
+    float: 'var(--fd-node-blue)',
+    boolean: 'var(--fd-node-purple)',
+    array: 'var(--fd-node-amber)',
+    list: 'var(--fd-node-amber)',
+    object: 'var(--fd-node-orange)',
+    json: 'var(--fd-node-orange)',
+    mixed: 'var(--fd-node-orange)',
+    file: 'var(--fd-node-red)',
+    document: 'var(--fd-node-red)',
+    image: 'var(--fd-node-pink)',
+    picture: 'var(--fd-node-pink)',
+    audio: 'var(--fd-node-indigo)',
+    sound: 'var(--fd-node-indigo)',
+    video: 'var(--fd-node-teal)',
+    movie: 'var(--fd-node-teal)',
+    url: 'var(--fd-node-cyan)',
+    email: 'var(--fd-node-cyan)',
+    date: 'var(--fd-node-lime)',
+    datetime: 'var(--fd-node-lime)',
+    time: 'var(--fd-node-lime)',
+    tool: 'var(--fd-node-amber)',
+    trigger: 'var(--fd-edge-trigger)',
+    branch: 'var(--fd-node-purple)'
 };
 /**
- * Get the reference color token for a category
+ * Get the design token for a category color
  */
 export function getCategoryColorToken(category) {
-    return CATEGORY_COLOR_TOKENS[category] || 'var(--color-ref-slate-500)';
+    return CATEGORY_COLOR_TOKENS[category] || 'var(--fd-node-slate)';
 }
 /**
  * Get the reference color token for a data type (configurable version)
@@ -78,7 +80,7 @@ export function getDataTypeColorToken(dataType) {
         // Fallback to static color mapping if port checker not initialized
         // console.warn("Port compatibility checker not initialized, using fallback colors");
     }
-    return DEFAULT_DATA_TYPE_COLORS[dataType.toLowerCase()] || 'var(--color-ref-slate-500)';
+    return DEFAULT_DATA_TYPE_COLORS[dataType.toLowerCase()] || 'var(--fd-node-slate)';
 }
 /**
  * Get data type configuration from port config
@@ -121,7 +123,7 @@ export const DEFAULT_COLORS = {
  * @returns The color configuration for the category
  */
 export function getCategoryColors(category) {
-    return CATEGORY_COLOR_TOKENS[category] || 'var(--color-ref-slate-500)';
+    return CATEGORY_COLOR_TOKENS[category] || 'var(--fd-node-slate)';
 }
 /**
  * Get category background color
@@ -167,32 +169,32 @@ export function getNodeColors(category, isError = false, isProcessing = false, i
     const baseColor = getCategoryColors(category);
     if (isError) {
         return {
-            background: 'var(--color-ref-red-50)',
-            accent: 'var(--color-ref-red-500)',
-            text: 'var(--color-ref-red-900)',
-            border: 'var(--color-ref-red-200)'
+            background: 'var(--fd-error-muted)',
+            accent: 'var(--fd-error)',
+            text: 'var(--fd-error-hover)',
+            border: 'var(--fd-error)'
         };
     }
     if (isProcessing) {
         return {
-            background: 'var(--color-ref-blue-50)',
-            accent: 'var(--color-ref-blue-500)',
-            text: 'var(--color-ref-blue-900)',
-            border: 'var(--color-ref-blue-200)'
+            background: 'var(--fd-info-muted)',
+            accent: 'var(--fd-info)',
+            text: 'var(--fd-primary-hover)',
+            border: 'var(--fd-primary)'
         };
     }
     if (isSelected) {
         return {
-            background: 'var(--color-ref-indigo-50)',
-            accent: 'var(--color-ref-indigo-500)',
-            text: 'var(--color-ref-indigo-900)',
-            border: 'var(--color-ref-indigo-200)'
+            background: 'var(--fd-accent-muted)',
+            accent: 'var(--fd-accent)',
+            text: 'var(--fd-accent-hover)',
+            border: 'var(--fd-accent)'
         };
     }
     return {
         background: baseColor,
         accent: baseColor,
-        text: 'var(--color-ref-slate-900)',
+        text: 'var(--fd-foreground)',
         border: baseColor
     };
 }
@@ -318,6 +320,109 @@ export function hexToRgb(hex) {
     const b = parseInt(cleanHex.substring(4, 6), 16);
     return { r, g, b };
 }
+/**
+ * Calculate the relative luminance of a color
+ * Based on WCAG 2.1 guidelines for contrast calculations
+ * @param r - Red component (0-255)
+ * @param g - Green component (0-255)
+ * @param b - Blue component (0-255)
+ * @returns Relative luminance value (0-1)
+ */
+export function getRelativeLuminance(r, g, b) {
+    const toLinear = (value) => {
+        const srgb = value / 255;
+        return srgb <= 0.03928 ? srgb / 12.92 : Math.pow((srgb + 0.055) / 1.055, 2.4);
+    };
+    return 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
+}
+/**
+ * Determine if a background color is considered "light" (needs dark text)
+ * @param hex - Hex color string
+ * @returns True if the color is light and needs dark text for contrast
+ */
+export function isLightColor(hex) {
+    const rgb = hexToRgb(hex);
+    if (!rgb) {
+        return false; // Default to dark background assumption
+    }
+    const luminance = getRelativeLuminance(rgb.r, rgb.g, rgb.b);
+    // WCAG recommends contrast ratio of 4.5:1 for normal text
+    // Luminance > 0.179 generally requires dark text for good contrast
+    return luminance > 0.179;
+}
+/**
+ * Get the appropriate contrast text color (black or white) for a background
+ * @param backgroundColor - Hex color string of the background
+ * @returns CSS color value for text that provides good contrast
+ */
+export function getContrastTextColor(backgroundColor) {
+    return isLightColor(backgroundColor) ? "#18181b" : "#ffffff";
+}
+/**
+ * Mapping of CSS variable tokens to their resolved hex values
+ * Used for contrast calculations when working with design tokens
+ */
+const TOKEN_TO_HEX = {
+    "var(--fd-node-cyan)": "#06b6d4",
+    "var(--fd-node-emerald)": "#10b981",
+    "var(--fd-node-blue)": "#3b82f6",
+    "var(--fd-node-amber)": "#f59e0b",
+    "var(--fd-node-indigo)": "#6366f1",
+    "var(--fd-node-teal)": "#14b8a6",
+    "var(--fd-node-purple)": "#8b5cf6",
+    "var(--fd-node-orange)": "#f97316",
+    "var(--fd-node-slate)": "#64748b",
+    "var(--fd-node-red)": "#ef4444",
+    "var(--fd-node-pink)": "#ec4899",
+    "var(--fd-node-lime)": "#84cc16"
+};
+/**
+ * Resolve a CSS variable token to its hex value
+ * @param token - CSS variable token (e.g., "var(--fd-node-amber)")
+ * @returns Hex color value or the original value if not a known token
+ */
+export function resolveColorToken(token) {
+    return TOKEN_TO_HEX[token] || token;
+}
+/**
+ * Get the appropriate contrast text color for a data type badge
+ * @param dataType - The data type (e.g., "array", "string", "number")
+ * @returns CSS color value for text that provides good contrast on the data type's background
+ */
+export function getContrastTextColorForDataType(dataType) {
+    const colorToken = getDataTypeColorToken(dataType);
+    const hexColor = resolveColorToken(colorToken);
+    return getContrastTextColor(hexColor);
+}
+/**
+ * Get the appropriate contrast text color for a category badge
+ * @param category - The node category
+ * @returns CSS color value for text that provides good contrast on the category's background
+ */
+export function getContrastTextColorForCategory(category) {
+    const colorToken = getCategoryColorToken(category);
+    const hexColor = resolveColorToken(colorToken);
+    return getContrastTextColor(hexColor);
+}
+/**
+ * Get a semi-transparent tinted background color for ports
+ * Creates a cohesive look with the icon wrapper styling
+ * @param dataType - The data type
+ * @param opacity - Opacity percentage (default 25%)
+ * @returns CSS color-mix expression for the tinted background
+ */
+export function getPortBackgroundColor(dataType, opacity = 25) {
+    const colorToken = getDataTypeColorToken(dataType);
+    return `color-mix(in srgb, ${colorToken} ${opacity}%, transparent)`;
+}
+/**
+ * Get the border color for ports (solid data type color)
+ * @param dataType - The data type
+ * @returns CSS color value for the port border
+ */
+export function getPortBorderColor(dataType) {
+    return getDataTypeColorToken(dataType);
+}
 /**
  * Convert RGB components to hex color string
  * @param r - Red component (0-255)
@@ -334,14 +439,14 @@ export function rgbToHex(r, g, b) {
 }
 /**
  * Generate a light tint of a color (similar to Tailwind's -50 shade)
- * Creates a very light background-friendly version of the color
+ * Creates a very light background-friendly version of the color for light mode
  * @param hex - Base hex color string
  * @returns Light tint hex color string
  */
 export function getLightTint(hex) {
     const rgb = hexToRgb(hex);
     if (!rgb) {
-        return '#fffbeb'; // Fallback to amber-50
+        return "#fffbeb"; // Fallback to amber-50
     }
     // Mix with white at 95% to create a very light tint
     const mixRatio = 0.95;
@@ -350,16 +455,35 @@ export function getLightTint(hex) {
     const b = rgb.b + (255 - rgb.b) * mixRatio;
     return rgbToHex(r, g, b);
 }
+/**
+ * Generate a dark tint of a color for dark mode backgrounds
+ * Creates a subtle, muted version of the color that works well on dark backgrounds
+ * @param hex - Base hex color string
+ * @param opacity - Optional opacity for the color overlay (default 0.15)
+ * @returns Dark tint hex color string
+ */
+export function getDarkTint(hex, opacity = 0.15) {
+    const rgb = hexToRgb(hex);
+    if (!rgb) {
+        return "#2a2518"; // Fallback dark amber tint
+    }
+    // Mix with dark background (#1a1a1e) to create a subtle dark tint
+    const darkBg = { r: 26, g: 26, b: 30 };
+    const r = darkBg.r + (rgb.r - darkBg.r) * opacity;
+    const g = darkBg.g + (rgb.g - darkBg.g) * opacity;
+    const b = darkBg.b + (rgb.b - darkBg.b) * opacity;
+    return rgbToHex(r, g, b);
+}
 /**
  * Generate a border tint of a color (similar to Tailwind's -300 shade)
- * Creates a medium-light version suitable for borders
+ * Creates a medium-light version suitable for borders in light mode
  * @param hex - Base hex color string
  * @returns Border tint hex color string
  */
 export function getBorderTint(hex) {
     const rgb = hexToRgb(hex);
     if (!rgb) {
-        return '#fcd34d'; // Fallback to amber-300
+        return "#fcd34d"; // Fallback to amber-300
     }
     // Mix with white at 60% to create a medium-light tint
     const mixRatio = 0.6;
@@ -368,15 +492,52 @@ export function getBorderTint(hex) {
     const b = rgb.b + (255 - rgb.b) * mixRatio;
     return rgbToHex(r, g, b);
 }
+/**
+ * Generate a dark border tint of a color for dark mode
+ * Creates a medium-dark version suitable for borders in dark mode
+ * @param hex - Base hex color string
+ * @returns Dark border tint hex color string
+ */
+export function getDarkBorderTint(hex) {
+    const rgb = hexToRgb(hex);
+    if (!rgb) {
+        return "#5c4a1e"; // Fallback dark amber border
+    }
+    // Mix with dark background to create a muted but visible border
+    const darkBg = { r: 26, g: 26, b: 30 };
+    const mixRatio = 0.35;
+    const r = darkBg.r + (rgb.r - darkBg.r) * mixRatio;
+    const g = darkBg.g + (rgb.g - darkBg.g) * mixRatio;
+    const b = darkBg.b + (rgb.b - darkBg.b) * mixRatio;
+    return rgbToHex(r, g, b);
+}
 /**
  * Generate color variants for theming a component
+ * Returns variants for both light and dark modes
  * @param baseColor - Base hex color string
- * @returns Object with base, light, and border color variants
+ * @returns Object with base, light, border, darkLight, and darkBorder color variants
  */
 export function getColorVariants(baseColor) {
     return {
         base: baseColor,
         light: getLightTint(baseColor),
-        border: getBorderTint(baseColor)
+        border: getBorderTint(baseColor),
+        darkLight: getDarkTint(baseColor),
+        darkBorder: getDarkBorderTint(baseColor)
+    };
+}
+/**
+ * Get theme-aware color variants
+ * Returns the appropriate light or dark variants based on the theme
+ * @param baseColor - Base hex color string
+ * @param isDarkMode - Whether dark mode is active
+ * @returns Object with base, background, and border colors appropriate for the theme
+ */
+export function getThemeAwareColorVariants(baseColor, isDarkMode) {
+    const variants = getColorVariants(baseColor);
+    return {
+        base: variants.base,
+        background: isDarkMode ? variants.darkLight : variants.light,
+        border: isDarkMode ? variants.darkBorder : variants.border
     };
 }

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@d34dman/flowdrop",
 	"license": "MIT",
 	"private": false,
-	"version": "0.0.43",
+	"version": "0.0.45",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
@@ -150,7 +150,7 @@
 		"@eslint/js": "^9.18.0",
 		"@iconify/svelte": "^5.0.0",
 		"@playwright/test": "^1.49.1",
-		"@redocly/cli": "^2.14.9",
+		"@redocly/cli": "^1.31.0",
 		"@storybook/addon-docs": "^9.0.15",
 		"@storybook/addon-svelte-csf": "^5.0.4",
 		"@storybook/addon-vitest": "^9.0.15",