@d34dman/flowdrop 0.0.42 → 0.0.44

package/dist/components/interrupt/InterruptBubble.svelte

@@ -362,16 +362,16 @@
 </div>
 
 <style>
-	/* Uses design tokens from base.css: --flowdrop-interrupt-* */
+	/* Uses design tokens from base.css: --fd-interrupt-* */
 	.interrupt-bubble {
 		display: flex;
 		gap: 0.75rem;
 		padding: 1rem 1.25rem;
 		margin: 0.75rem 1rem;
 		border-radius: 0.75rem;
-		background: var(--flowdrop-interrupt-pending-bg);
-		border: 1px solid var(--flowdrop-interrupt-pending-border);
-		box-shadow: 0 2px 8px var(--flowdrop-interrupt-pending-shadow);
+		background: var(--fd-interrupt-pending-bg);
+		border: 1px solid var(--fd-interrupt-pending-border);
+		box-shadow: 0 2px 8px var(--fd-interrupt-pending-shadow);
 		animation: interruptSlideIn 0.3s ease-out;
 	}
 
@@ -388,21 +388,21 @@
 
 	/* Completed state - neutral blue to indicate response received without implying good/bad */
 	.interrupt-bubble--completed {
-		background: var(--flowdrop-interrupt-completed-bg);
-		border-color: var(--flowdrop-interrupt-completed-border);
-		box-shadow: 0 2px 8px var(--flowdrop-interrupt-completed-shadow);
+		background: var(--fd-interrupt-completed-bg);
+		border-color: var(--fd-interrupt-completed-border);
+		box-shadow: 0 2px 8px var(--fd-interrupt-completed-shadow);
 	}
 
 	.interrupt-bubble--cancelled {
-		background: var(--flowdrop-interrupt-cancelled-bg);
-		border-color: var(--flowdrop-interrupt-cancelled-border);
-		box-shadow: 0 2px 8px var(--flowdrop-interrupt-cancelled-shadow);
+		background: var(--fd-interrupt-cancelled-bg);
+		border-color: var(--fd-interrupt-cancelled-border);
+		box-shadow: 0 2px 8px var(--fd-interrupt-cancelled-shadow);
 	}
 
 	.interrupt-bubble--error {
-		background: var(--flowdrop-interrupt-error-bg);
-		border-color: var(--flowdrop-interrupt-error-border);
-		box-shadow: 0 2px 8px var(--flowdrop-interrupt-error-shadow);
+		background: var(--fd-interrupt-error-bg);
+		border-color: var(--fd-interrupt-error-border);
+		box-shadow: 0 2px 8px var(--fd-interrupt-error-shadow);
 	}
 
 	.interrupt-bubble--submitting {
@@ -418,21 +418,21 @@
 		align-items: center;
 		justify-content: center;
 		border-radius: 50%;
-		background-color: var(--flowdrop-interrupt-pending-avatar);
+		background-color: var(--fd-interrupt-pending-avatar);
 		color: #ffffff;
 		font-size: 1.125rem;
 	}
 
 	.interrupt-bubble--completed .interrupt-bubble__avatar {
-		background-color: var(--flowdrop-interrupt-completed-avatar);
+		background-color: var(--fd-interrupt-completed-avatar);
 	}
 
 	.interrupt-bubble--cancelled .interrupt-bubble__avatar {
-		background-color: var(--flowdrop-interrupt-cancelled-avatar);
+		background-color: var(--fd-interrupt-cancelled-avatar);
 	}
 
 	.interrupt-bubble--error .interrupt-bubble__avatar {
-		background-color: var(--flowdrop-interrupt-error-avatar);
+		background-color: var(--fd-interrupt-error-avatar);
 	}
 
 	/* Content */
@@ -458,37 +458,37 @@
 		gap: 0.375rem;
 		font-weight: 600;
 		font-size: 0.875rem;
-		color: var(--flowdrop-interrupt-pending-text);
+		color: var(--fd-interrupt-pending-text);
 	}
 
 	.interrupt-bubble--completed .interrupt-bubble__type {
-		color: var(--flowdrop-interrupt-completed-text);
+		color: var(--fd-interrupt-completed-text);
 	}
 
 	.interrupt-bubble--cancelled .interrupt-bubble__type {
-		color: var(--flowdrop-interrupt-cancelled-text);
+		color: var(--fd-interrupt-cancelled-text);
 	}
 
 	.interrupt-bubble--error .interrupt-bubble__type {
-		color: var(--flowdrop-interrupt-error-text);
+		color: var(--fd-interrupt-error-text);
 	}
 
 	.interrupt-bubble__timestamp {
 		font-size: 0.6875rem;
-		color: var(--flowdrop-interrupt-pending-text-light);
+		color: var(--fd-interrupt-pending-text-light);
 		font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
 	}
 
 	.interrupt-bubble--completed .interrupt-bubble__timestamp {
-		color: var(--flowdrop-interrupt-completed-text-light);
+		color: var(--fd-interrupt-completed-text-light);
 	}
 
 	.interrupt-bubble--cancelled .interrupt-bubble__timestamp {
-		color: var(--flowdrop-interrupt-cancelled-text-light);
+		color: var(--fd-interrupt-cancelled-text-light);
 	}
 
 	.interrupt-bubble--error .interrupt-bubble__timestamp {
-		color: var(--flowdrop-interrupt-error-text-light);
+		color: var(--fd-interrupt-error-text-light);
 	}
 
 	/* Error message */
@@ -497,9 +497,9 @@
 		align-items: center;
 		gap: 0.5rem;
 		padding: 0.5rem 0.75rem;
-		background-color: var(--color-ref-red-50, rgba(239, 68, 68, 0.1));
-		border-radius: 0.375rem;
-		color: var(--flowdrop-interrupt-error-text);
+		background-color: var(--fd-error-muted);
+		border-radius: var(--fd-radius-md);
+		color: var(--fd-interrupt-error-text);
 		font-size: 0.8125rem;
 	}
 
@@ -513,7 +513,7 @@
 		font-weight: 500;
 		font-family: inherit;
 		color: #ffffff;
-		background-color: var(--flowdrop-interrupt-error-avatar);
+		background-color: var(--fd-interrupt-error-avatar);
 		border: none;
 		border-radius: 0.25rem;
 		cursor: pointer;
@@ -521,28 +521,28 @@
 	}
 
 	.interrupt-bubble__retry-btn:hover {
-		background-color: var(--color-ref-red-600, #dc2626);
+		background-color: var(--fd-error-hover);
 	}
 
 	/* Prompt */
 	.interrupt-bubble__prompt {
-		background-color: var(--flowdrop-interrupt-prompt-bg);
+		background-color: var(--fd-interrupt-prompt-bg);
 		border-radius: 0.5rem;
 		padding: 1rem;
-		border: 1px solid var(--flowdrop-interrupt-prompt-border-pending);
+		border: 1px solid var(--fd-interrupt-prompt-border-pending);
 	}
 
 	.interrupt-bubble--completed .interrupt-bubble__prompt {
-		border-color: var(--flowdrop-interrupt-prompt-border-completed);
+		border-color: var(--fd-interrupt-prompt-border-completed);
 	}
 
 	.interrupt-bubble--cancelled .interrupt-bubble__prompt {
-		border-color: var(--flowdrop-interrupt-prompt-border-cancelled);
+		border-color: var(--fd-interrupt-prompt-border-cancelled);
 		opacity: 0.75;
 	}
 
 	.interrupt-bubble--error .interrupt-bubble__prompt {
-		border-color: var(--flowdrop-interrupt-prompt-border-error);
+		border-color: var(--fd-interrupt-prompt-border-error);
 	}
 
 	/* Cancel button wrapper */
@@ -559,18 +559,18 @@
 		font-size: 0.75rem;
 		font-weight: 500;
 		font-family: inherit;
-		color: #6b7280;
+		color: var(--fd-muted-foreground);
 		background-color: transparent;
-		border: 1px solid #d1d5db;
-		border-radius: 0.375rem;
+		border: 1px solid var(--fd-border);
+		border-radius: var(--fd-radius-md);
 		cursor: pointer;
-		transition: all 0.15s ease;
+		transition: all var(--fd-transition-fast);
 	}
 
 	.interrupt-bubble__cancel-btn:hover:not(:disabled) {
-		color: #dc2626;
-		border-color: #fca5a5;
-		background-color: #fef2f2;
+		color: var(--fd-error);
+		border-color: var(--fd-error);
+		background-color: var(--fd-error-muted);
 	}
 
 	.interrupt-bubble__cancel-btn:disabled {
@@ -584,19 +584,19 @@
 		align-items: center;
 		gap: 0.5rem;
 		padding-top: 0.5rem;
-		border-top: 1px solid var(--flowdrop-interrupt-prompt-border-pending);
+		border-top: 1px solid var(--fd-interrupt-prompt-border-pending);
 	}
 
 	.interrupt-bubble--completed .interrupt-bubble__footer {
-		border-color: var(--flowdrop-interrupt-prompt-border-completed);
+		border-color: var(--fd-interrupt-prompt-border-completed);
 	}
 
 	.interrupt-bubble--cancelled .interrupt-bubble__footer {
-		border-color: var(--flowdrop-interrupt-prompt-border-cancelled);
+		border-color: var(--fd-interrupt-prompt-border-cancelled);
 	}
 
 	.interrupt-bubble--error .interrupt-bubble__footer {
-		border-color: var(--flowdrop-interrupt-prompt-border-error);
+		border-color: var(--fd-interrupt-prompt-border-error);
 	}
 
 	.interrupt-bubble__node {
@@ -604,19 +604,19 @@
 		align-items: center;
 		gap: 0.25rem;
 		font-size: 0.6875rem;
-		color: var(--flowdrop-interrupt-pending-text);
+		color: var(--fd-interrupt-pending-text);
 	}
 
 	.interrupt-bubble--completed .interrupt-bubble__node {
-		color: var(--flowdrop-interrupt-completed-text);
+		color: var(--fd-interrupt-completed-text);
 	}
 
 	.interrupt-bubble--cancelled .interrupt-bubble__node {
-		color: var(--flowdrop-interrupt-cancelled-text);
+		color: var(--fd-interrupt-cancelled-text);
 	}
 
 	.interrupt-bubble--error .interrupt-bubble__node {
-		color: var(--flowdrop-interrupt-error-text);
+		color: var(--fd-interrupt-error-text);
 	}
 
 	/* Responsive */

package/dist/components/interrupt/TextInputPrompt.svelte

@@ -31,8 +31,15 @@
 		onSubmit: (value: string) => void;
 	}
 
-	let { config, isResolved, resolvedValue, isSubmitting, error, resolvedByUserName, onSubmit }: Props =
-		$props();
+	let {
+		config,
+		isResolved,
+		resolvedValue,
+		isSubmitting,
+		error,
+		resolvedByUserName,
+		onSubmit
+	}: Props = $props();
 
 	/** Local state for input value */
 	let inputValue = $state(config.defaultValue ?? '');
@@ -177,7 +184,7 @@
 </div>
 
 <style>
-	/* Uses design tokens from base.css: --flowdrop-interrupt-*, --color-ref-* */
+	/* Uses design tokens from base.css/tokens.css */
 	.text-prompt {
 		display: flex;
 		flex-direction: column;
@@ -196,7 +203,7 @@
 		margin: 0;
 		font-size: 0.9375rem;
 		line-height: 1.5;
-		color: var(--color-ref-gray-800, #1f2937);
+		color: var(--fd-foreground);
 	}
 
 	.text-prompt__error {
@@ -204,9 +211,9 @@
 		align-items: center;
 		gap: 0.375rem;
 		padding: 0.5rem 0.75rem;
-		background-color: var(--color-ref-red-50, #fef2f2);
-		border-radius: 0.375rem;
-		color: var(--color-ref-red-600, #dc2626);
+		background-color: var(--fd-error-muted);
+		border-radius: var(--fd-radius-md);
+		color: var(--fd-error);
 		font-size: 0.8125rem;
 	}
 
@@ -222,36 +229,36 @@
 		font-size: 0.9375rem;
 		font-family: inherit;
 		line-height: 1.5;
-		color: var(--color-ref-gray-800, #1f2937);
-		background-color: #ffffff;
-		border: 1px solid var(--color-ref-gray-300, #d1d5db);
-		border-radius: 0.5rem;
+		color: var(--fd-foreground);
+		background-color: var(--fd-background);
+		border: 1px solid var(--fd-border-strong);
+		border-radius: var(--fd-radius-lg);
 		outline: none;
-		transition: all 0.15s ease;
+		transition: all var(--fd-transition-fast);
 	}
 
 	.text-prompt__input::placeholder,
 	.text-prompt__textarea::placeholder {
-		color: var(--color-ref-gray-400, #9ca3af);
+		color: var(--fd-muted-foreground);
 	}
 
 	.text-prompt__input:focus,
 	.text-prompt__textarea:focus {
-		border-color: var(--flowdrop-interrupt-completed-border);
-		box-shadow: 0 0 0 3px var(--flowdrop-interrupt-completed-shadow);
+		border-color: var(--fd-interrupt-completed-border);
+		box-shadow: 0 0 0 3px var(--fd-interrupt-completed-shadow);
 	}
 
 	.text-prompt__input:disabled,
 	.text-prompt__textarea:disabled {
-		background-color: var(--color-ref-gray-50, #f9fafb);
+		background-color: var(--fd-muted);
 		cursor: not-allowed;
 	}
 
 	/* Resolved state - neutral blue to match other interrupt prompts */
 	.text-prompt__input--resolved,
 	.text-prompt__textarea--resolved {
-		background-color: var(--color-ref-blue-50, #eff6ff);
-		border-color: var(--flowdrop-interrupt-completed-border);
+		background-color: var(--fd-primary-muted);
+		border-color: var(--fd-interrupt-completed-border);
 	}
 
 	.text-prompt__textarea {
@@ -260,14 +267,14 @@
 	}
 
 	.text-prompt__char-count {
-		font-size: 0.75rem;
-		color: var(--color-ref-gray-500, #6b7280);
+		font-size: var(--fd-text-xs);
+		color: var(--fd-muted-foreground);
 		text-align: right;
 		padding-right: 0.25rem;
 	}
 
 	.text-prompt__char-count--warning {
-		color: var(--color-ref-amber-500, #f59e0b);
+		color: var(--fd-warning);
 	}
 
 	.text-prompt__actions {
@@ -281,22 +288,22 @@
 		justify-content: center;
 		gap: 0.5rem;
 		padding: 0.625rem 1.25rem;
-		border-radius: 0.5rem;
-		font-size: 0.875rem;
+		border-radius: var(--fd-radius-lg);
+		font-size: var(--fd-text-sm);
 		font-weight: 600;
 		font-family: inherit;
 		cursor: pointer;
 		transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 		border: none;
 		min-height: 2.5rem;
-		background: var(--flowdrop-interrupt-btn-primary-bg);
-		color: #ffffff;
-		box-shadow: 0 1px 3px var(--flowdrop-interrupt-btn-primary-shadow);
+		background: var(--fd-interrupt-btn-primary-bg);
+		color: var(--fd-primary-foreground);
+		box-shadow: 0 1px 3px var(--fd-interrupt-btn-primary-shadow);
 	}
 
 	.text-prompt__submit:hover:not(:disabled) {
-		background: var(--flowdrop-interrupt-btn-primary-bg-hover);
-		box-shadow: 0 4px 12px var(--flowdrop-interrupt-btn-primary-shadow);
+		background: var(--fd-interrupt-btn-primary-bg-hover);
+		box-shadow: 0 4px 12px var(--fd-interrupt-btn-primary-shadow);
 		transform: translateY(-1px);
 	}
 
@@ -310,8 +317,8 @@
 	.text-prompt__spinner {
 		width: 1rem;
 		height: 1rem;
-		border: 2px solid rgba(255, 255, 255, 0.3);
-		border-top-color: #ffffff;
+		border: 2px solid var(--fd-border);
+		border-top-color: currentColor;
 		border-radius: 50%;
 		animation: text-spin 0.6s linear infinite;
 	}
@@ -328,9 +335,9 @@
 		align-items: center;
 		gap: 0.375rem;
 		padding: 0.375rem 0.75rem;
-		background-color: var(--flowdrop-interrupt-badge-completed-bg);
+		background-color: var(--fd-interrupt-badge-completed-bg);
 		border-radius: 9999px;
-		color: var(--flowdrop-interrupt-badge-completed-text);
+		color: var(--fd-interrupt-badge-completed-text);
 		font-size: 0.75rem;
 		font-weight: 500;
 		align-self: flex-start;