@d34dman/flowdrop 0.0.42 → 0.0.44

package/dist/components/nodes/NotesNode.svelte

@@ -34,42 +34,27 @@
 	const noteTypes = {
 		info: {
 			name: 'Info',
-			bgColor: 'bg-blue-50',
-			borderColor: 'border-blue-200',
-			textColor: 'text-blue-800',
-			iconColor: 'text-blue-500',
+			typeClass: 'flowdrop-notes-node--info',
 			icon: 'mdi:information'
 		},
 		warning: {
 			name: 'Warning',
-			bgColor: 'bg-yellow-50',
-			borderColor: 'border-yellow-200',
-			textColor: 'text-yellow-800',
-			iconColor: 'text-yellow-500',
+			typeClass: 'flowdrop-notes-node--warning',
 			icon: 'mdi:alert'
 		},
 		success: {
 			name: 'Success',
-			bgColor: 'bg-green-50',
-			borderColor: 'border-green-200',
-			textColor: 'text-green-800',
-			iconColor: 'text-green-500',
+			typeClass: 'flowdrop-notes-node--success',
 			icon: 'mdi:check-circle'
 		},
 		error: {
 			name: 'Error',
-			bgColor: 'bg-red-50',
-			borderColor: 'border-red-200',
-			textColor: 'text-red-800',
-			iconColor: 'text-red-500',
+			typeClass: 'flowdrop-notes-node--error',
 			icon: 'mdi:close-circle'
 		},
 		note: {
 			name: 'Note',
-			bgColor: 'bg-gray-50',
-			borderColor: 'border-gray-200',
-			textColor: 'text-gray-800',
-			iconColor: 'text-gray-500',
+			typeClass: 'flowdrop-notes-node--note',
 			icon: 'mdi:note-text'
 		}
 	};
@@ -111,21 +96,23 @@
 </script>
 
 <div
-	class="flowdrop-notes-node {currentType.bgColor}"
+	class="flowdrop-notes-node {currentType.typeClass}"
 	class:flowdrop-notes-node--selected={props.selected}
 	class:flowdrop-notes-node--processing={props.isProcessing}
-	class:flowdrop-notes-node--error={props.isError}
+	class:flowdrop-notes-node--has-error={props.isError}
 	ondblclick={handleDoubleClick}
 	onkeydown={handleKeydown}
 	role="button"
 	tabindex="0"
 >
 	<!-- Display Mode -->
-	<div class="flowdrop-notes-node__content {currentType.borderColor} {currentType.textColor}">
+	<div class="flowdrop-notes-node__content">
 		<!-- Header with icon and type -->
 		<div class="flowdrop-notes-node__header">
 			<div class="flowdrop-notes-node__header-left">
-				<Icon icon={currentType.icon} class="flowdrop-notes-node__icon {currentType.iconColor}" />
+				<div class="flowdrop-notes-node__icon-wrapper">
+					<Icon icon={currentType.icon} class="flowdrop-notes-node__icon" />
+				</div>
 				<span class="flowdrop-notes-node__type">{currentType.name}</span>
 			</div>
 		</div>
@@ -145,7 +132,7 @@
 
 		<!-- Error indicator -->
 		{#if props.isError}
-			<div class="flowdrop-notes-node__error">
+			<div class="flowdrop-notes-node__error-indicator">
 				<Icon icon="mdi:alert-circle" class="flowdrop-notes-node__error-icon" />
 				<span>Error occurred</span>
 			</div>
@@ -164,67 +151,87 @@
 
 <style>
 	.flowdrop-notes-node {
-		min-width: var(--notes-node-min-width);
-		max-width: var(--notes-node-max-width);
-		width: var(--notes-node-width);
-		border-radius: var(--notes-node-border-radius);
-		border: 1px solid;
-		background: var(--notes-node-background);
-		backdrop-filter: var(--notes-node-backdrop-filter);
-		box-shadow: var(--notes-node-box-shadow);
-		transition: var(--notes-node-transition);
+		min-width: var(--fd-notes-node-min-width);
+		max-width: var(--fd-notes-node-max-width);
+		width: var(--fd-notes-node-width);
+		border-radius: var(--fd-radius-xl);
+		border: 1.5px solid var(--fd-node-border);
+		background: var(--fd-card);
+		backdrop-filter: var(--fd-notes-node-backdrop-filter);
+		box-shadow: var(--fd-shadow-md);
+		color: var(--fd-foreground);
+		transition: all var(--fd-transition-fast);
 		overflow: hidden;
 		z-index: 5;
 	}
 
-	/* Background color overrides for different note types */
-	.flowdrop-notes-node.bg-blue-50 {
-		background-color: var(--notes-node-info-bg);
-		border-color: var(--notes-node-info-border);
+	/* Note type: Info (blue) - subtle background tint, neutral border */
+	.flowdrop-notes-node--info {
+		background-color: var(--fd-info-muted);
+		--_notes-icon: var(--fd-primary);
 	}
 
-	.flowdrop-notes-node.bg-yellow-50 {
-		background-color: var(--notes-node-warning-bg);
-		border-color: var(--notes-node-warning-border);
+	/* Note type: Warning (yellow/amber) - subtle background tint */
+	.flowdrop-notes-node--warning {
+		background-color: var(--fd-warning-muted);
+		--_notes-icon: var(--fd-warning);
 	}
 
-	.flowdrop-notes-node.bg-green-50 {
-		background-color: var(--notes-node-success-bg);
-		border-color: var(--notes-node-success-border);
+	/* Note type: Success (green) - subtle background tint */
+	.flowdrop-notes-node--success {
+		background-color: var(--fd-success-muted);
+		--_notes-icon: var(--fd-success);
 	}
 
-	.flowdrop-notes-node.bg-red-50 {
-		background-color: var(--notes-node-error-bg);
-		border-color: var(--notes-node-error-border);
+	/* Note type: Error (red) - subtle background tint */
+	.flowdrop-notes-node--error {
+		background-color: var(--fd-error-muted);
+		--_notes-icon: var(--fd-error);
 	}
 
-	.flowdrop-notes-node.bg-gray-50 {
-		background-color: var(--notes-node-note-bg);
-		border-color: var(--notes-node-note-border);
+	/* Note type: Note (gray/neutral) - subtle background tint */
+	.flowdrop-notes-node--note {
+		background-color: var(--fd-muted);
+		--_notes-icon: var(--fd-muted-foreground);
 	}
 
 	.flowdrop-notes-node:hover {
-		box-shadow: var(--notes-node-hover-box-shadow);
-		transform: translateY(-1px);
+		box-shadow: var(--fd-shadow-lg);
+		border-color: var(--fd-node-border-hover);
 	}
 
+	/* Selected state - matches other node components */
 	.flowdrop-notes-node--selected {
-		box-shadow: var(--notes-node-selected-box-shadow);
+		box-shadow:
+			0 0 0 2px var(--fd-primary-muted),
+			var(--fd-shadow-lg);
+		border-color: var(--fd-primary);
+	}
+
+	.flowdrop-notes-node--selected:hover {
+		box-shadow:
+			0 0 0 2px var(--fd-primary-muted),
+			var(--fd-shadow-lg);
+		border-color: var(--fd-primary);
+	}
+
+	.flowdrop-notes-node:focus-visible {
+		outline: 2px solid var(--fd-ring);
+		outline-offset: 2px;
 	}
 
 	.flowdrop-notes-node--processing {
 		opacity: 0.7;
 	}
 
-	.flowdrop-notes-node--error {
-		border-color: #ef4444 !important;
+	.flowdrop-notes-node--has-error {
+		border-color: var(--fd-error) !important;
+		background-color: var(--fd-error-muted) !important;
 	}
 
 	/* Display Mode Styles */
 	.flowdrop-notes-node__content {
-		padding: var(--notes-node-padding);
-		border-radius: var(--notes-node-border-radius);
-		border: 1px solid;
+		padding: var(--fd-space-4);
 		height: 100%;
 		display: flex;
 		flex-direction: column;
@@ -241,52 +248,77 @@
 	.flowdrop-notes-node__header-left {
 		display: flex;
 		align-items: center;
-		gap: 0.5rem;
+		gap: var(--fd-space-3);
 	}
 
-	.flowdrop-notes-node__icon {
-		width: 1.75rem;
-		height: 1.75rem;
+	/* Squircle icon wrapper - Apple-style rounded square background */
+	.flowdrop-notes-node__icon-wrapper {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 2.25rem;
+		height: 2.25rem;
+		border-radius: 0.5rem;
+		background: color-mix(in srgb, var(--_notes-icon) 15%, transparent);
 		flex-shrink: 0;
+		transition: all var(--fd-transition-normal);
+	}
+
+	.flowdrop-notes-node:hover .flowdrop-notes-node__icon-wrapper {
+		background: color-mix(in srgb, var(--_notes-icon) 22%, transparent);
+		transform: scale(1.05);
+	}
+
+	.flowdrop-notes-node__icon-wrapper :global(.flowdrop-notes-node__icon) {
+		width: 1.25rem;
+		height: 1.25rem;
+		color: var(--fd-node-icon);
 	}
 
 	.flowdrop-notes-node__type {
-		font-size: 0.875rem;
-		font-weight: 600;
+		font-size: var(--fd-text-sm);
+		font-weight: 500;
+		color: var(--fd-foreground);
 	}
 
 	.flowdrop-notes-node__body {
-		margin-bottom: 0.5rem;
+		margin-bottom: var(--fd-space-2);
 		flex: 1;
 		overflow-y: auto;
+		color: var(--fd-muted-foreground);
+	}
+
+	/* Markdown content inherits foreground color for better readability */
+	.flowdrop-notes-node__body :global(.flowdrop-notes-node__markdown) {
+		color: var(--fd-foreground);
 	}
 
 	.flowdrop-notes-node__processing {
 		display: flex;
 		align-items: center;
-		gap: 0.5rem;
-		font-size: 0.75rem;
-		opacity: 0.7;
+		gap: var(--fd-space-2);
+		font-size: var(--fd-text-xs);
+		color: var(--fd-muted-foreground);
 	}
 
 	.flowdrop-notes-node__spinner {
 		width: 0.75rem;
 		height: 0.75rem;
-		border: 1px solid currentColor;
-		border-top-color: transparent;
+		border: 1px solid color-mix(in srgb, var(--fd-foreground) 30%, transparent);
+		border-top-color: var(--fd-foreground);
 		border-radius: 50%;
 		animation: spin 1s linear infinite;
 	}
 
-	.flowdrop-notes-node__error {
+	.flowdrop-notes-node__error-indicator {
 		display: flex;
 		align-items: center;
-		gap: 0.5rem;
-		font-size: 0.75rem;
-		color: #ef4444;
+		gap: var(--fd-space-2);
+		font-size: var(--fd-text-xs);
+		color: var(--fd-error);
 	}
 
-	.flowdrop-notes-node__error-icon {
+	:global(.flowdrop-notes-node__error-icon) {
 		width: 0.75rem;
 		height: 0.75rem;
 	}
@@ -299,23 +331,23 @@
 
 	.flowdrop-notes-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;
-		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-notes-node:hover .flowdrop-notes-node__config-btn {
@@ -323,9 +355,9 @@
 	}
 
 	.flowdrop-notes-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);
 	}
 
 	/* Responsive design */
@@ -336,7 +368,7 @@
 		}
 
 		.flowdrop-notes-node__content {
-			padding: 0.75rem;
+			padding: var(--fd-space-3);
 		}
 	}
 </style>

package/dist/components/nodes/SimpleNode.svelte

@@ -186,7 +186,7 @@
 		position={Position.Left}
 		style="background-color: {getDataTypeColor(
 			port.dataType
-		)}; border-color: '#ffffff'; top: {inputPorts.length > 1
+		)}; border-color: var(--fd-handle-border); top: {inputPorts.length > 1
 			? index === 0
 				? '25%'
 				: '75%'
@@ -209,8 +209,8 @@
 >
 	<div class="flowdrop-simple-node__header">
 		<div class="flowdrop-simple-node__header-content">
-			<!-- Node Icon -->
-			<div class="flowdrop-simple-node__icon-container" style="background-color: {nodeColor}">
+			<!-- Node Icon with Squircle Background -->
+			<div class="flowdrop-simple-node__icon-wrapper" style="--_icon-color: {nodeColor}">
 				<Icon icon={nodeIcon} class="flowdrop-simple-node__icon" />
 			</div>
 
@@ -258,7 +258,7 @@
 		position={Position.Right}
 		style="background-color: {getDataTypeColor(
 			port.dataType
-		)}; border-color: '#ffffff'; top: {outputPorts.length > 1
+		)}; border-color: var(--fd-handle-border); top: {outputPorts.length > 1
 			? index === 0
 				? '25%'
 				: '75%'
@@ -272,16 +272,17 @@
 <style>
 	.flowdrop-simple-node {
 		position: relative;
-		background-color: #ffffff;
-		border: 2px solid #e5e7eb;
-		border-radius: 0.75rem;
+		background-color: var(--fd-card);
+		border: 1.5px solid var(--fd-node-border);
+		border-radius: var(--fd-radius-xl);
 		display: flex;
 		flex-direction: column;
 		cursor: pointer;
-		transition: all 0.2s ease-in-out;
-		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+		transition: all var(--fd-transition-fast);
+		box-shadow: var(--fd-shadow-md);
 		overflow: visible; /* Changed from hidden to visible to allow handles to be properly accessible */
 		z-index: 10;
+		color: var(--fd-foreground);
 	}
 
 	/* Normal layout (default) */
@@ -290,12 +291,23 @@
 	}
 
 	.flowdrop-simple-node:hover {
-		box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+		box-shadow: var(--fd-shadow-lg);
+		border-color: var(--fd-node-border-hover);
 	}
 
 	.flowdrop-simple-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-simple-node--selected:hover {
+		box-shadow: 0 0 0 2px var(--fd-primary-muted), var(--fd-shadow-lg);
+		border-color: var(--fd-primary);
+	}
+
+	.flowdrop-simple-node:focus-visible {
+		outline: 2px solid var(--fd-ring);
+		outline-offset: 2px;
 	}
 
 	.flowdrop-simple-node--processing {
@@ -303,36 +315,44 @@
 	}
 
 	.flowdrop-simple-node--error {
-		border-color: #ef4444 !important;
-		background-color: #fef2f2 !important;
+		border-color: var(--fd-error) !important;
+		background-color: var(--fd-error-muted) !important;
 	}
 
 	.flowdrop-simple-node__header {
-		padding: 1rem;
-		background-color: #f9fafb;
-		border-radius: 0.75rem;
+		padding: var(--fd-space-4);
+		background: var(--fd-header);
+		border-radius: var(--fd-radius-xl);
 	}
 
 	.flowdrop-simple-node__header-content {
 		display: flex;
 		align-items: center;
-		gap: 0.75rem;
+		gap: var(--fd-space-3);
 	}
 
-	.flowdrop-simple-node__icon-container {
+	/* Squircle icon wrapper - Apple-style rounded square background */
+	.flowdrop-simple-node__icon-wrapper {
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: 2rem;
-		height: 2rem;
-		border-radius: 0.375rem;
+		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-simple-node:hover .flowdrop-simple-node__icon-wrapper {
+		background: color-mix(in srgb, var(--_icon-color) 22%, transparent);
+		transform: scale(1.05);
 	}
 
 	.flowdrop-simple-node__title {
-		font-size: 0.875rem;
+		font-size: var(--fd-text-sm);
 		font-weight: 500;
-		color: #1f2937;
+		color: var(--fd-foreground);
 		margin: 0;
 		flex: 1;
 		min-width: 0;
@@ -340,16 +360,16 @@
 	}
 
 	.flowdrop-simple-node__description {
-		font-size: 0.75rem;
-		color: #6b7280;
-		margin: 0.25rem 0 0 0;
+		font-size: var(--fd-text-xs);
+		color: var(--fd-muted-foreground);
+		margin: var(--fd-space-1) 0 0 0;
 		line-height: 1.3;
 	}
 
-	:global(.flowdrop-simple-node__icon) {
-		color: white;
-		font-size: 1rem;
-		filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
+	.flowdrop-simple-node__icon-wrapper :global(.flowdrop-simple-node__icon) {
+		width: 1.25rem;
+		height: 1.25rem;
+		color: var(--fd-node-icon);
 	}
 
 	/* Label styling removed - now using header title */
@@ -363,8 +383,8 @@
 	.flowdrop-simple-node__spinner {
 		width: 12px;
 		height: 12px;
-		border: 1px solid rgba(255, 255, 255, 0.3);
-		border-top: 1px solid white;
+		border: 1px solid color-mix(in srgb, var(--fd-foreground) 30%, transparent);
+		border-top: 1px solid var(--fd-foreground);
 		border-radius: 50%;
 		animation: spin 1s linear infinite;
 	}
@@ -373,7 +393,7 @@
 		position: absolute;
 		top: 4px;
 		right: 4px;
-		color: #ef4444;
+		color: var(--fd-error);
 	}
 
 	:global(.flowdrop-simple-node__error-icon) {
@@ -383,23 +403,23 @@
 
 	.flowdrop-simple-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-simple-node:hover .flowdrop-simple-node__config-btn {
@@ -407,9 +427,9 @@
 	}
 
 	.flowdrop-simple-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);
 	}
 
 	@keyframes spin {
@@ -423,7 +443,7 @@
 		width: 18px !important;
 		height: 18px !important;
 		border-radius: 50% !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;
@@ -438,7 +458,7 @@
 	}
 
 	:global(.svelte-flow__node-simple .svelte-flow__handle:focus) {
-		outline: 2px solid #3b82f6 !important;
+		outline: 2px solid var(--fd-ring) !important;
 		outline-offset: 2px !important;
 	}
 </style>