@d34dman/flowdrop 0.0.42 → 0.0.44

package/dist/components/nodes/GatewayNode.svelte

@@ -13,7 +13,7 @@
 	import type { WorkflowNode, NodePort, Branch } from '../../types/index.js';
 	import Icon from '@iconify/svelte';
 	import { getNodeIcon } from '../../utils/icons.js';
-	import { getDataTypeColorToken, getCategoryColorToken } from '../../utils/colors.js';
+	import { getDataTypeColorToken, getCategoryColorToken, getPortBackgroundColor } from '../../utils/colors.js';
 	import { connectedHandles } from '../../stores/workflowStore.js';
 
 	interface Props {
@@ -159,12 +159,12 @@
 	<!-- Node Header -->
 	<div class="flowdrop-workflow-node__header">
 		<div class="flowdrop-flex flowdrop-gap--3 flowdrop-items--center">
-			<!-- Node Icon -->
+			<!-- Node Icon with Squircle Background -->
 			<div
-				class="flowdrop-workflow-node__icon"
-				style="background-color: {getCategoryColorToken(props.data.metadata.category)}"
+				class="flowdrop-workflow-node__icon-wrapper"
+				style="--_icon-color: {getCategoryColorToken(props.data.metadata.category)}"
 			>
-				<Icon icon={getNodeIcon(props.data.metadata.icon, props.data.metadata.category)} />
+				<Icon icon={getNodeIcon(props.data.metadata.icon, props.data.metadata.category)} class="flowdrop-workflow-node__icon" />
 			</div>
 
 			<!-- Node Title - uses instanceTitle override if set -->
@@ -198,7 +198,7 @@
 							class="flowdrop-workflow-node__handle"
 							style="top: 50%; transform: translateY(-50%); margin-left: -32px; background-color: {getDataTypeColorToken(
 								port.dataType
-							)}; border-color: '#ffffff';"
+							)}; border-color: var(--fd-handle-border);"
 							role="button"
 							tabindex={0}
 							aria-label="Connect to {port.name} input port"
@@ -210,7 +210,7 @@
 								<span class="flowdrop-text--xs flowdrop-font--medium">{port.name}</span>
 								<span
 									class="flowdrop-badge flowdrop-badge--sm"
-									style="background-color: {getDataTypeColorToken(port.dataType)}; color: #fff;"
+									style="background-color: {getPortBackgroundColor(port.dataType, 15)}; color: {getDataTypeColorToken(port.dataType)}; border: 1px solid {getPortBackgroundColor(port.dataType, 30)};"
 								>
 									{port.dataType}
 								</span>
@@ -263,7 +263,7 @@
 								</span>
 								<span
 									class="flowdrop-badge flowdrop-badge--sm"
-									style="background-color: {getDataTypeColorToken('trigger')}; color: #fff;"
+									style="background-color: {getPortBackgroundColor('trigger', 15)}; color: {getDataTypeColorToken('trigger')}; border: 1px solid {getPortBackgroundColor('trigger', 30)};"
 								>
 									trigger
 								</span>
@@ -278,7 +278,7 @@
 							class={`flowdrop-workflow-node__handle ${isActive ? 'flowdrop-workflow-node__handle--active' : ''}`}
 							style="top: 50%; transform: translateY(-50%); margin-right: -32px; background-color: {isActive
 								? getDataTypeColorToken('trigger')
-								: getDataTypeColorToken('trigger')}; border-color: '#ffffff';"
+								: getDataTypeColorToken('trigger')}; border-color: var(--fd-handle-border);"
 							role="button"
 							tabindex={0}
 							aria-label="Connect from {branch.name} branch"
@@ -311,89 +311,118 @@
 <style>
 	.flowdrop-workflow-node {
 		position: relative;
-		background-color: #ffffff;
-		border: 2px solid #e5e7eb;
-		border-radius: 0.75rem;
-		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+		background-color: var(--fd-card);
+		border: 1.5px solid var(--fd-node-border);
+		border-radius: var(--fd-radius-xl);
+		box-shadow: var(--fd-shadow-md);
 		width: 18rem;
 		z-index: 10;
+		color: var(--fd-foreground);
+		transition: all var(--fd-transition-fast);
 	}
 
 	.flowdrop-workflow-node--gateway {
 		min-width: 18rem;
 	}
 
+	.flowdrop-workflow-node:hover {
+		box-shadow: var(--fd-shadow-lg);
+		border-color: var(--fd-node-border-hover);
+	}
+
 	.flowdrop-workflow-node--selected {
-		box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
-		border: 2px solid #3b82f6;
+		box-shadow: 0 0 0 2px var(--fd-primary-muted), var(--fd-shadow-lg);
+		border-color: var(--fd-primary);
+	}
+
+	.flowdrop-workflow-node--selected:hover {
+		box-shadow: 0 0 0 2px var(--fd-primary-muted), var(--fd-shadow-lg);
+		border-color: var(--fd-primary);
+	}
+
+	.flowdrop-workflow-node:focus-visible {
+		outline: 2px solid var(--fd-ring);
+		outline-offset: 2px;
 	}
 
 	.flowdrop-workflow-node__header {
-		padding: 1rem;
-		border-bottom: 1px solid #e5e7eb;
-		background-color: #f9fafb;
-		border-top-left-radius: 0.75rem;
-		border-top-right-radius: 0.75rem;
+		padding: var(--fd-space-4);
+		border-bottom: 1px solid var(--fd-border-muted);
+		background: var(--fd-header);
+		border-top-left-radius: var(--fd-radius-xl);
+		border-top-right-radius: var(--fd-radius-xl);
 	}
 
-	.flowdrop-workflow-node__icon {
-		width: 2rem;
-		height: 2rem;
-		border-radius: 0.5rem;
-		color: #ffffff;
-		font-size: 0.875rem;
-		font-weight: 500;
+	/* Squircle icon wrapper - Apple-style rounded square background */
+	.flowdrop-workflow-node__icon-wrapper {
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+		width: 2.25rem;
+		height: 2.25rem;
+		border-radius: 0.5rem;
+		background: color-mix(in srgb, var(--_icon-color) 15%, transparent);
+		flex-shrink: 0;
+		transition: all var(--fd-transition-normal);
+	}
+
+	.flowdrop-workflow-node:hover .flowdrop-workflow-node__icon-wrapper {
+		background: color-mix(in srgb, var(--_icon-color) 22%, transparent);
+		transform: scale(1.05);
+	}
+
+	.flowdrop-workflow-node__icon-wrapper :global(.flowdrop-workflow-node__icon) {
+		width: 1.25rem;
+		height: 1.25rem;
+		color: var(--fd-node-icon);
 	}
 
 	.flowdrop-workflow-node__header h3 {
 		margin: 0;
 		line-height: 1;
+		color: var(--fd-foreground);
 	}
 
 	.flowdrop-workflow-node__ports {
-		padding: 0.75rem 1rem;
+		padding: var(--fd-space-3) var(--fd-space-4);
 	}
 
 	.flowdrop-workflow-node__ports-header {
-		margin-bottom: 0.5rem;
+		margin-bottom: var(--fd-space-2);
 		display: flex;
 		align-items: center;
-		gap: 0.25rem;
+		gap: var(--fd-space-1);
 	}
 
 	.flowdrop-workflow-node__ports-title {
 		margin: 0;
-		font-size: 0.75rem;
+		font-size: var(--fd-text-xs);
 		font-weight: 600;
-		color: #374151;
+		color: var(--fd-foreground);
 		text-transform: uppercase;
 		letter-spacing: 0.05em;
 		display: flex;
 		align-items: center;
-		gap: 0.5rem;
+		gap: var(--fd-space-2);
 	}
 
 	.flowdrop-workflow-node__ports-list {
 		display: flex;
 		flex-direction: column;
-		gap: 0.5rem;
+		gap: var(--fd-space-2);
 	}
 
 	.flowdrop-workflow-node__port {
 		display: flex;
 		align-items: center;
-		gap: 0.5rem;
-		padding: 0.25rem 0;
+		gap: var(--fd-space-2);
+		padding: var(--fd-space-1) 0;
 		position: relative;
 	}
 
 	.flowdrop-badge {
-		padding: 0.125rem 0.375rem;
-		border-radius: 0.25rem;
+		padding: 0.125rem var(--fd-space-1);
+		border-radius: var(--fd-radius-sm);
 		font-size: 0.625rem;
 		font-weight: 500;
 		text-transform: uppercase;
@@ -401,51 +430,51 @@
 	}
 
 	.flowdrop-badge--error {
-		background-color: #ef4444;
-		color: #ffffff;
+		background-color: var(--fd-error);
+		color: var(--fd-error-foreground);
 	}
 
 	.flowdrop-badge--sm {
 		font-size: 0.625rem;
-		padding: 0.125rem 0.25rem;
+		padding: 0.125rem var(--fd-space-1);
 	}
 
 	.workflow-node__no-branches {
 		display: flex;
 		align-items: center;
-		gap: 0.5rem;
-		padding: 0.75rem;
-		background: #fef3c7;
-		border: 1px solid #f59e0b;
-		border-radius: 0.5rem;
-		color: #92400e;
-		font-size: 0.875rem;
+		gap: var(--fd-space-2);
+		padding: var(--fd-space-3);
+		background: var(--fd-warning-muted);
+		border: 1px solid var(--fd-warning);
+		border-radius: var(--fd-radius-lg);
+		color: var(--fd-warning-foreground);
+		font-size: var(--fd-text-sm);
 	}
 
 	/* Handle styles */
 	:global(.flowdrop-workflow-node__handle) {
 		width: 0.75rem;
 		height: 0.75rem;
-		background-color: #6b7280;
-		border: 2px solid #ffffff;
+		background-color: var(--fd-muted-foreground);
+		border: 2px solid var(--fd-handle-border);
 		border-radius: 50%;
-		transition: all 0.2s ease-in-out;
+		transition: all var(--fd-transition-normal);
 		cursor: pointer;
 	}
 
 	:global(.flowdrop-workflow-node__handle:hover) {
-		background-color: #3b82f6;
+		background-color: var(--fd-primary);
 		transform: scale(1.2);
 	}
 
 	:global(.flowdrop-workflow-node__handle:focus) {
-		outline: 2px solid #3b82f6;
+		outline: 2px solid var(--fd-ring);
 		outline-offset: 2px;
 	}
 
 	:global(.flowdrop-workflow-node__handle--active) {
 		transform: scale(1.15);
-		box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
+		box-shadow: 0 0 0 3px color-mix(in srgb, var(--fd-success) 20%, transparent);
 	}
 
 	/* Utility classes */
@@ -458,11 +487,11 @@
 	}
 
 	.flowdrop-gap--2 {
-		gap: 0.5rem;
+		gap: var(--fd-space-2);
 	}
 
 	.flowdrop-gap--3 {
-		gap: 0.75rem;
+		gap: var(--fd-space-3);
 	}
 
 	.flowdrop-items--center {
@@ -478,21 +507,21 @@
 	}
 
 	.flowdrop-text--xs {
-		font-size: 0.75rem;
+		font-size: var(--fd-text-xs);
 		line-height: 1rem;
 	}
 
 	.flowdrop-text--sm {
-		font-size: 0.875rem;
+		font-size: var(--fd-text-sm);
 		line-height: 1.25rem;
 	}
 
 	.flowdrop-text--gray {
-		color: #6b7280;
+		color: var(--fd-muted-foreground);
 	}
 
 	.flowdrop-text--active {
-		color: #10b981;
+		color: var(--fd-success);
 		font-weight: 600;
 	}
 
@@ -507,7 +536,7 @@
 	}
 
 	.flowdrop-mt--1 {
-		margin-top: 0.25rem;
+		margin-top: var(--fd-space-1);
 	}
 
 	.flowdrop-text--right {
@@ -516,23 +545,23 @@
 
 	.flowdrop-workflow-node__config-btn {
 		position: absolute;
-		top: 0.5rem;
-		right: 0.5rem;
+		top: var(--fd-space-2);
+		right: var(--fd-space-2);
 		width: 1.5rem;
 		height: 1.5rem;
-		background-color: rgba(255, 255, 255, 0.9);
-		border: 1px solid #e5e7eb;
-		border-radius: 0.25rem;
-		color: #6b7280;
+		background-color: var(--fd-backdrop);
+		border: 1px solid var(--fd-border);
+		border-radius: var(--fd-radius-sm);
+		color: var(--fd-muted-foreground);
 		cursor: pointer;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		opacity: 0;
-		transition: all 0.2s ease-in-out;
+		transition: all var(--fd-transition-normal);
 		backdrop-filter: blur(4px);
 		z-index: 15;
-		font-size: 0.875rem;
+		font-size: var(--fd-text-sm);
 	}
 
 	.flowdrop-workflow-node:hover .flowdrop-workflow-node__config-btn {
@@ -540,8 +569,8 @@
 	}
 
 	.flowdrop-workflow-node__config-btn:hover {
-		background-color: #f9fafb;
-		border-color: #d1d5db;
-		color: #374151;
+		background-color: var(--fd-muted);
+		border-color: var(--fd-border-strong);
+		color: var(--fd-foreground);
 	}
 </style>

package/dist/components/nodes/IdeaNode.svelte

@@ -238,33 +238,30 @@
 		position: relative;
 		width: 18rem;
 		cursor: pointer;
-		transition: all 0.2s ease-in-out;
+		transition: all var(--fd-transition-normal);
 		z-index: 10;
+		color: var(--fd-foreground);
 	}
 
 	.flowdrop-idea-node__card {
-		background-color: #ffffff;
-		border-radius: 0.75rem;
-		border: 1px solid #e5e7eb;
-		box-shadow:
-			0 4px 6px -1px rgba(0, 0, 0, 0.1),
-			0 2px 4px -1px rgba(0, 0, 0, 0.06);
+		background-color: var(--fd-background);
+		border-radius: var(--fd-radius-xl);
+		border: 1px solid var(--fd-border);
+		box-shadow: var(--fd-shadow-md);
 		overflow: hidden;
-		transition: all 0.2s ease-in-out;
+		transition: all var(--fd-transition-normal);
 	}
 
 	.flowdrop-idea-node:hover .flowdrop-idea-node__card {
-		box-shadow:
-			0 10px 15px -3px rgba(0, 0, 0, 0.1),
-			0 4px 6px -2px rgba(0, 0, 0, 0.05);
+		box-shadow: var(--fd-shadow-lg);
 		transform: translateY(-1px);
 	}
 
 	.flowdrop-idea-node--selected .flowdrop-idea-node__card {
-		border-color: #3b82f6;
+		border-color: var(--fd-primary);
 		box-shadow:
-			0 10px 15px -3px rgba(0, 0, 0, 0.1),
-			0 0 0 3px rgba(59, 130, 246, 0.3);
+			var(--fd-shadow-lg),
+			0 0 0 3px color-mix(in srgb, var(--fd-primary) 30%, transparent);
 	}
 
 	.flowdrop-idea-node--processing .flowdrop-idea-node__card {
@@ -272,15 +269,15 @@
 	}
 
 	.flowdrop-idea-node--error .flowdrop-idea-node__card {
-		border-color: #ef4444 !important;
-		background-color: #fef2f2 !important;
+		border-color: var(--fd-error) !important;
+		background-color: var(--fd-error-muted) !important;
 	}
 
 	/* Accent bar at top of card */
 	.flowdrop-idea-node__accent-bar {
 		height: 4px;
-		background-color: var(--idea-accent-color, #6366f1);
-		transition: background-color 0.2s ease-in-out;
+		background-color: var(--idea-accent-color, var(--fd-accent));
+		transition: background-color var(--fd-transition-normal);
 	}
 
 	/* Header section */
@@ -288,7 +285,7 @@
 		display: flex;
 		align-items: center;
 		gap: 0.625rem;
-		padding: 0.75rem 1rem 0.5rem;
+		padding: var(--fd-space-3) var(--fd-space-4) var(--fd-space-2);
 	}
 
 	.flowdrop-idea-node__icon-wrapper {
@@ -297,21 +294,25 @@
 		justify-content: center;
 		width: 2rem;
 		height: 2rem;
-		background-color: color-mix(in srgb, var(--idea-accent-color, #6366f1) 15%, transparent);
-		border-radius: 0.5rem;
+		background-color: color-mix(
+			in srgb,
+			var(--idea-accent-color, var(--fd-accent)) 15%,
+			transparent
+		);
+		border-radius: var(--fd-radius-lg);
 		flex-shrink: 0;
 	}
 
 	:global(.flowdrop-idea-node__icon) {
 		width: 1.25rem;
 		height: 1.25rem;
-		color: var(--idea-accent-color, #6366f1);
+		color: var(--fd-node-icon);
 	}
 
 	.flowdrop-idea-node__title {
 		font-size: 0.9375rem;
 		font-weight: 600;
-		color: #1f2937;
+		color: var(--fd-foreground);
 		margin: 0;
 		line-height: 1.3;
 		overflow: hidden;
@@ -321,12 +322,12 @@
 
 	/* Body section */
 	.flowdrop-idea-node__body {
-		padding: 0 1rem 0.875rem;
+		padding: 0 var(--fd-space-4) var(--fd-space-3);
 	}
 
 	.flowdrop-idea-node__description {
 		font-size: 0.8125rem;
-		color: #6b7280;
+		color: var(--fd-muted-foreground);
 		margin: 0;
 		line-height: 1.5;
 		display: -webkit-box;
@@ -340,18 +341,18 @@
 	.flowdrop-idea-node__processing {
 		display: flex;
 		align-items: center;
-		gap: 0.5rem;
-		padding: 0.5rem 1rem;
-		font-size: 0.75rem;
-		color: #6b7280;
-		border-top: 1px solid #f3f4f6;
+		gap: var(--fd-space-2);
+		padding: var(--fd-space-2) var(--fd-space-4);
+		font-size: var(--fd-text-xs);
+		color: var(--fd-muted-foreground);
+		border-top: 1px solid var(--fd-border-muted);
 	}
 
 	.flowdrop-idea-node__spinner {
 		width: 0.875rem;
 		height: 0.875rem;
-		border: 2px solid #e5e7eb;
-		border-top-color: var(--idea-accent-color, #6366f1);
+		border: 2px solid var(--fd-border);
+		border-top-color: var(--idea-accent-color, var(--fd-accent));
 		border-radius: 50%;
 		animation: idea-spin 1s linear infinite;
 	}
@@ -360,12 +361,12 @@
 	.flowdrop-idea-node__error {
 		display: flex;
 		align-items: center;
-		gap: 0.5rem;
-		padding: 0.5rem 1rem;
-		font-size: 0.75rem;
-		color: #ef4444;
-		border-top: 1px solid #fecaca;
-		background-color: #fef2f2;
+		gap: var(--fd-space-2);
+		padding: var(--fd-space-2) var(--fd-space-4);
+		font-size: var(--fd-text-xs);
+		color: var(--fd-error);
+		border-top: 1px solid color-mix(in srgb, var(--fd-error) 30%, transparent);
+		background-color: var(--fd-error-muted);
 	}
 
 	:global(.flowdrop-idea-node__error-icon) {
@@ -386,19 +387,19 @@
 		right: 0.625rem;
 		width: 1.5rem;
 		height: 1.5rem;
-		background-color: rgba(255, 255, 255, 0.95);
-		border: 1px solid #e5e7eb;
-		border-radius: 0.375rem;
-		color: #6b7280;
+		background-color: var(--fd-backdrop);
+		border: 1px solid var(--fd-border);
+		border-radius: var(--fd-radius-md);
+		color: var(--fd-muted-foreground);
 		cursor: pointer;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		opacity: 0;
-		transition: all 0.2s ease-in-out;
-		backdrop-filter: blur(4px);
+		transition: all var(--fd-transition-normal);
+		backdrop-filter: var(--fd-backdrop-blur);
 		z-index: 15;
-		font-size: 0.875rem;
+		font-size: var(--fd-text-sm);
 	}
 
 	.flowdrop-idea-node:hover .flowdrop-idea-node__config-btn {
@@ -406,9 +407,9 @@
 	}
 
 	.flowdrop-idea-node__config-btn:hover {
-		background-color: #f9fafb;
-		border-color: #d1d5db;
-		color: #374151;
+		background-color: var(--fd-muted);
+		border-color: var(--fd-border-strong);
+		color: var(--fd-foreground);
 		transform: scale(1.05);
 	}
 
@@ -418,7 +419,7 @@
 		height: 16px !important;
 		border-radius: 50% !important;
 		border: 2px solid #ffffff !important;
-		transition: all 0.2s ease-in-out !important;
+		transition: all var(--fd-transition-normal) !important;
 		cursor: pointer !important;
 		z-index: 20 !important;
 		pointer-events: auto !important;
@@ -456,7 +457,7 @@
 	}
 
 	:global(.flowdrop-idea-node .svelte-flow__handle:focus) {
-		outline: 2px solid #3b82f6 !important;
+		outline: 2px solid var(--fd-ring) !important;
 		outline-offset: 2px !important;
 	}
 
@@ -475,11 +476,11 @@
 		}
 
 		.flowdrop-idea-node__title {
-			font-size: 0.875rem;
+			font-size: var(--fd-text-sm);
 		}
 
 		.flowdrop-idea-node__description {
-			font-size: 0.75rem;
+			font-size: var(--fd-text-xs);
 		}
 	}
 </style>