@d34dman/flowdrop 0.0.43 → 0.0.44

package/dist/components/interrupt/ChoicePrompt.svelte

@@ -31,8 +31,15 @@
 		onSubmit: (value: string | 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 selected values */
 	let selectedValues = $state<Set<string>>(new Set());
@@ -200,7 +207,7 @@
 </div>
 
 <style>
-	/* Uses design tokens from base.css: --flowdrop-interrupt-*, --color-ref-* */
+	/* Uses design tokens from base.css/tokens.css */
 	.choice-prompt {
 		display: flex;
 		flex-direction: column;
@@ -219,7 +226,7 @@
 		margin: 0;
 		font-size: 0.9375rem;
 		line-height: 1.5;
-		color: var(--color-ref-gray-800, #1f2937);
+		color: var(--fd-foreground);
 	}
 
 	.choice-prompt__error {
@@ -227,9 +234,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;
 	}
 
@@ -244,36 +251,36 @@
 		align-items: flex-start;
 		gap: 0.75rem;
 		padding: 0.75rem 1rem;
-		background-color: var(--color-ref-gray-50, #f9fafb);
-		border: 1px solid var(--color-ref-gray-200, #e5e7eb);
-		border-radius: 0.5rem;
+		background-color: var(--fd-muted);
+		border: 1px solid var(--fd-border);
+		border-radius: var(--fd-radius-lg);
 		cursor: pointer;
-		transition: all 0.15s ease;
+		transition: all var(--fd-transition-fast);
 	}
 
 	.choice-prompt__option:hover:not(.choice-prompt--resolved .choice-prompt__option) {
-		background-color: var(--color-ref-gray-100, #f3f4f6);
-		border-color: var(--color-ref-gray-300, #d1d5db);
+		background-color: var(--fd-subtle);
+		border-color: var(--fd-border-strong);
 	}
 
 	.choice-prompt__option--selected {
-		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);
 	}
 
 	.choice-prompt__option--selected:hover:not(.choice-prompt--resolved .choice-prompt__option) {
-		background-color: var(--color-ref-blue-100, #dbeafe);
+		background-color: var(--fd-primary-muted);
 	}
 
 	/* Resolved option - neutral blue theme */
 	.choice-prompt__option--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);
 		cursor: default;
 	}
 
 	.choice-prompt--resolved .choice-prompt__option:not(.choice-prompt__option--resolved) {
-		opacity: var(--flowdrop-interrupt-not-selected-opacity);
+		opacity: var(--fd-interrupt-not-selected-opacity);
 		cursor: default;
 	}
 
@@ -287,18 +294,18 @@
 	.choice-prompt__checkmark {
 		flex-shrink: 0;
 		font-size: 1.25rem;
-		color: var(--color-ref-gray-400, #9ca3af);
+		color: var(--fd-muted-foreground);
 		display: flex;
 		align-items: center;
 		justify-content: center;
 	}
 
 	.choice-prompt__option--selected .choice-prompt__checkmark {
-		color: var(--flowdrop-interrupt-completed-border);
+		color: var(--fd-interrupt-completed-border);
 	}
 
 	.choice-prompt__option--resolved .choice-prompt__checkmark {
-		color: var(--flowdrop-interrupt-completed-border);
+		color: var(--fd-interrupt-completed-border);
 	}
 
 	.choice-prompt__option-content {
@@ -308,20 +315,20 @@
 	}
 
 	.choice-prompt__option-label {
-		font-size: 0.875rem;
+		font-size: var(--fd-text-sm);
 		font-weight: 500;
-		color: var(--color-ref-gray-800, #1f2937);
+		color: var(--fd-foreground);
 	}
 
 	.choice-prompt__option-description {
 		font-size: 0.8125rem;
-		color: var(--color-ref-gray-500, #6b7280);
+		color: var(--fd-muted-foreground);
 		line-height: 1.4;
 	}
 
 	.choice-prompt__info {
-		font-size: 0.75rem;
-		color: var(--color-ref-gray-500, #6b7280);
+		font-size: var(--fd-text-xs);
+		color: var(--fd-muted-foreground);
 		padding-left: 0.25rem;
 	}
 
@@ -337,22 +344,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);
 	}
 
 	.choice-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);
 	}
 
@@ -366,8 +373,8 @@
 	.choice-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: choice-spin 0.6s linear infinite;
 	}
@@ -384,9 +391,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;

package/dist/components/interrupt/ConfirmationPrompt.svelte

@@ -144,7 +144,7 @@
 		margin: 0;
 		font-size: 0.9375rem;
 		line-height: 1.5;
-		color: var(--color-ref-gray-800, #1f2937);
+		color: var(--fd-foreground);
 	}
 
 	.confirmation-prompt__error {
@@ -152,9 +152,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;
 	}
 
@@ -185,16 +185,16 @@
 		cursor: not-allowed;
 	}
 
-	/* Uses design tokens from base.css: --flowdrop-interrupt-* */
+	/* Uses design tokens from base.css: --fd-interrupt-* */
 	.confirmation-prompt__button--decline {
-		background-color: var(--flowdrop-interrupt-btn-secondary-bg);
-		border-color: var(--flowdrop-interrupt-btn-secondary-border);
-		color: var(--flowdrop-interrupt-btn-secondary-text);
+		background-color: var(--fd-interrupt-btn-secondary-bg);
+		border-color: var(--fd-interrupt-btn-secondary-border);
+		color: var(--fd-interrupt-btn-secondary-text);
 	}
 
 	.confirmation-prompt__button--decline:hover:not(:disabled) {
-		background-color: var(--color-ref-gray-200, #e5e7eb);
-		border-color: var(--color-ref-gray-400, #9ca3af);
+		background-color: var(--fd-border);
+		border-color: var(--fd-muted-foreground);
 	}
 
 	.confirmation-prompt__button--decline:disabled {
@@ -203,31 +203,31 @@
 
 	/* Non-selected decline button when resolved - very dimmed */
 	.confirmation-prompt__button--decline.confirmation-prompt__button--not-selected {
-		opacity: var(--flowdrop-interrupt-not-selected-opacity);
-		background-color: var(--color-ref-gray-50, #f9fafb);
-		border-color: var(--color-ref-gray-200, #e5e7eb);
-		color: var(--color-ref-gray-400, #9ca3af);
+		opacity: var(--fd-interrupt-not-selected-opacity);
+		background-color: var(--fd-muted);
+		border-color: var(--fd-border);
+		color: var(--fd-muted-foreground);
 	}
 
 	/* Selected decline button - highlighted with border and background */
 	.confirmation-prompt__button--decline.confirmation-prompt__button--selected {
 		opacity: 1;
-		background-color: var(--flowdrop-interrupt-selected-decline-bg);
-		border-color: var(--flowdrop-interrupt-selected-decline-border);
+		background-color: var(--fd-interrupt-selected-decline-bg);
+		border-color: var(--fd-interrupt-selected-decline-border);
 		border-width: 2px;
-		color: var(--flowdrop-interrupt-selected-decline-text);
-		box-shadow: 0 0 0 3px var(--flowdrop-interrupt-selected-decline-glow);
+		color: var(--fd-interrupt-selected-decline-text);
+		box-shadow: 0 0 0 3px var(--fd-interrupt-selected-decline-glow);
 	}
 
 	.confirmation-prompt__button--confirm {
-		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);
 	}
 
 	.confirmation-prompt__button--confirm: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);
 	}
 
@@ -239,35 +239,35 @@
 
 	/* Non-selected confirm button when resolved - very dimmed */
 	.confirmation-prompt__button--confirm.confirmation-prompt__button--not-selected {
-		opacity: var(--flowdrop-interrupt-not-selected-opacity);
-		background: var(--color-ref-gray-200, #e5e7eb);
-		color: var(--color-ref-gray-400, #9ca3af);
+		opacity: var(--fd-interrupt-not-selected-opacity);
+		background: var(--fd-border);
+		color: var(--fd-muted-foreground);
 		box-shadow: none;
 	}
 
 	/* Selected confirm button - highlighted with glow */
 	.confirmation-prompt__button--confirm.confirmation-prompt__button--selected {
 		opacity: 1;
-		background: var(--flowdrop-interrupt-selected-confirm-bg);
+		background: var(--fd-interrupt-selected-confirm-bg);
 		border-width: 2px;
-		border-color: var(--flowdrop-interrupt-selected-confirm-border);
+		border-color: var(--fd-interrupt-selected-confirm-border);
 		box-shadow:
-			0 0 0 3px var(--flowdrop-interrupt-selected-confirm-glow),
-			0 2px 8px var(--flowdrop-interrupt-btn-primary-shadow);
+			0 0 0 3px var(--fd-interrupt-selected-confirm-glow),
+			0 2px 8px var(--fd-interrupt-btn-primary-shadow);
 	}
 
 	.confirmation-prompt__spinner {
 		width: 1rem;
 		height: 1rem;
-		border: 2px solid rgba(255, 255, 255, 0.3);
+		border: 2px solid var(--fd-border);
 		border-top-color: currentColor;
 		border-radius: 50%;
 		animation: confirmation-spin 0.6s linear infinite;
 	}
 
 	.confirmation-prompt__button--decline .confirmation-prompt__spinner {
-		border-color: rgba(55, 65, 81, 0.3);
-		border-top-color: #374151;
+		border-color: var(--fd-border);
+		border-top-color: var(--fd-foreground);
 	}
 
 	@keyframes confirmation-spin {
@@ -282,9 +282,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;

package/dist/components/interrupt/FormPrompt.svelte

@@ -32,8 +32,15 @@
 		onSubmit: (value: Record<string, unknown>) => void;
 	}
 
-	let { config, isResolved, resolvedValue, isSubmitting, error, resolvedByUserName, onSubmit }: Props =
-		$props();
+	let {
+		config,
+		isResolved,
+		resolvedValue,
+		isSubmitting,
+		error,
+		resolvedByUserName,
+		onSubmit
+	}: Props = $props();
 
 	/** Local state for form values */
 	let formValues = $state<Record<string, unknown>>(config.defaultValues ?? {});
@@ -130,7 +137,7 @@
 </div>
 
 <style>
-	/* Uses design tokens from base.css: --flowdrop-interrupt-*, --color-ref-* */
+	/* Uses design tokens from base.css/tokens.css */
 	.form-prompt {
 		display: flex;
 		flex-direction: column;
@@ -149,7 +156,7 @@
 		margin: 0;
 		font-size: 0.9375rem;
 		line-height: 1.5;
-		color: var(--color-ref-gray-800, #1f2937);
+		color: var(--fd-foreground);
 	}
 
 	.form-prompt__error {
@@ -157,24 +164,24 @@
 		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;
 	}
 
 	.form-prompt__form-wrapper {
-		background-color: var(--color-ref-gray-50, #f9fafb);
-		border: 1px solid var(--color-ref-gray-200, #e5e7eb);
-		border-radius: 0.5rem;
+		background-color: var(--fd-muted);
+		border: 1px solid var(--fd-border);
+		border-radius: var(--fd-radius-lg);
 		padding: 1rem;
 	}
 
 	/* Resolved values - neutral blue theme */
 	.form-prompt__resolved-values {
-		background-color: var(--color-ref-blue-50, #eff6ff);
-		border: 1px solid var(--flowdrop-interrupt-completed-border);
-		border-radius: 0.5rem;
+		background-color: var(--fd-primary-muted);
+		border: 1px solid var(--fd-interrupt-completed-border);
+		border-radius: var(--fd-radius-lg);
 		padding: 1rem;
 	}
 
@@ -182,7 +189,7 @@
 		margin: 0 0 0.75rem 0;
 		font-size: 0.8125rem;
 		font-weight: 600;
-		color: var(--flowdrop-interrupt-badge-completed-text);
+		color: var(--fd-interrupt-badge-completed-text);
 		text-transform: uppercase;
 		letter-spacing: 0.05em;
 	}
@@ -200,14 +207,14 @@
 	}
 
 	.form-prompt__value-label {
-		font-size: 0.75rem;
+		font-size: var(--fd-text-xs);
 		font-weight: 500;
-		color: var(--color-ref-gray-500, #6b7280);
+		color: var(--fd-muted-foreground);
 	}
 
 	.form-prompt__value-content {
-		font-size: 0.875rem;
-		color: var(--color-ref-gray-800, #1f2937);
+		font-size: var(--fd-text-sm);
+		color: var(--fd-foreground);
 		word-break: break-word;
 		white-space: pre-wrap;
 	}
@@ -218,9 +225,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;