@d34dman/flowdrop 0.0.43 → 0.0.45

package/dist/components/form/FormMarkdownEditor.svelte

@@ -250,18 +250,18 @@
 		justify-content: center;
 		gap: 0.75rem;
 		padding: 2rem;
-		background-color: var(--color-ref-gray-50, #f9fafb);
-		border: 1px solid var(--color-ref-gray-200, #e5e7eb);
-		border-radius: 0.5rem;
-		color: var(--color-ref-gray-500, #6b7280);
-		font-size: 0.875rem;
+		background-color: var(--fd-muted);
+		border: 1px solid var(--fd-border);
+		border-radius: var(--fd-radius-lg);
+		color: var(--fd-muted-foreground);
+		font-size: var(--fd-text-sm);
 	}
 
 	.form-markdown-editor__spinner {
 		width: 1.25rem;
 		height: 1.25rem;
-		border: 2px solid var(--color-ref-gray-200, #e5e7eb);
-		border-top-color: var(--color-ref-blue-500, #3b82f6);
+		border: 2px solid var(--fd-border);
+		border-top-color: var(--fd-primary);
 		border-radius: 50%;
 		animation: spin 0.8s linear infinite;
 	}
@@ -282,25 +282,50 @@
 		width: 100%;
 		min-height: var(--editor-height, 300px);
 		padding: 0.75rem;
-		border: 1px solid var(--color-ref-gray-200, #e5e7eb);
-		border-radius: 0.5rem;
+		border: 1px solid var(--fd-border);
+		border-radius: var(--fd-radius-lg);
 		font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Menlo', monospace;
-		font-size: 0.875rem;
+		font-size: var(--fd-text-sm);
 		line-height: 1.5;
 		resize: vertical;
-		background-color: var(--color-ref-gray-50, #f9fafb);
+		background-color: var(--fd-muted);
 	}
 
 	/* EasyMDE container styling */
 	.form-markdown-editor :global(.CodeMirror) {
-		border: 1px solid var(--color-ref-gray-200, #e5e7eb);
+		border: 1px solid var(--fd-border);
 		border-top: none;
 		border-radius: 0;
-		background-color: var(--color-ref-gray-50, #f9fafb);
+		background-color: var(--fd-muted);
+		color: var(--fd-foreground);
 		font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Menlo', monospace;
-		font-size: 0.875rem;
+		font-size: var(--fd-text-sm);
 		min-height: var(--editor-height, 300px);
-		transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+		transition: border-color var(--fd-transition-normal);
+	}
+
+	/* CodeMirror cursor styling for visibility in dark mode */
+	.form-markdown-editor :global(.CodeMirror-cursor) {
+		border-left-color: var(--fd-foreground);
+	}
+
+	/* CodeMirror selection styling */
+	.form-markdown-editor :global(.CodeMirror-selected) {
+		background-color: var(--fd-primary-muted) !important;
+	}
+
+	.form-markdown-editor :global(.CodeMirror-focused .CodeMirror-selected) {
+		background-color: var(--fd-primary-muted) !important;
+	}
+
+	/* CodeMirror line number gutter */
+	.form-markdown-editor :global(.CodeMirror-gutters) {
+		background-color: var(--fd-subtle);
+		border-right: 1px solid var(--fd-border);
+	}
+
+	.form-markdown-editor :global(.CodeMirror-linenumber) {
+		color: var(--fd-muted-foreground);
 	}
 
 	/* Header styling inside the editor - keep sizes reasonable */
@@ -330,27 +355,69 @@
 	.form-markdown-editor :global(.cm-header) {
 		font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Menlo', monospace;
 		font-weight: 600;
-		color: var(--color-ref-gray-900, #111827);
+		color: var(--fd-foreground);
+	}
+
+	/* Markdown syntax highlighting in editor */
+	.form-markdown-editor :global(.cm-s-easymde .cm-comment) {
+		color: var(--fd-muted-foreground);
+	}
+
+	.form-markdown-editor :global(.cm-s-easymde .cm-link) {
+		color: var(--fd-primary);
+	}
+
+	.form-markdown-editor :global(.cm-s-easymde .cm-url) {
+		color: var(--fd-primary-hover);
+	}
+
+	.form-markdown-editor :global(.cm-s-easymde .cm-string) {
+		color: var(--fd-success);
+	}
+
+	.form-markdown-editor :global(.cm-s-easymde .cm-formatting) {
+		color: var(--fd-muted-foreground);
+	}
+
+	.form-markdown-editor :global(.cm-s-easymde .cm-quote) {
+		color: var(--fd-muted-foreground);
+		font-style: italic;
+	}
+
+	.form-markdown-editor :global(.cm-s-easymde .cm-strong) {
+		color: var(--fd-foreground);
+		font-weight: 700;
+	}
+
+	.form-markdown-editor :global(.cm-s-easymde .cm-em) {
+		color: var(--fd-foreground);
+		font-style: italic;
+	}
+
+	.form-markdown-editor :global(.cm-s-easymde .cm-strikethrough) {
+		color: var(--fd-muted-foreground);
+		text-decoration: line-through;
 	}
 
 	.form-markdown-editor :global(.CodeMirror:hover) {
-		border-color: var(--color-ref-gray-300, #d1d5db);
+		border-color: var(--fd-border-strong);
 	}
 
 	.form-markdown-editor :global(.CodeMirror-focused) {
-		border-color: var(--color-ref-blue-500, #3b82f6);
-		background-color: #ffffff;
+		border-color: var(--fd-primary);
+		background-color: var(--fd-background);
+		color: var(--fd-foreground);
 		box-shadow:
 			0 0 0 3px rgba(59, 130, 246, 0.12),
-			0 1px 2px rgba(0, 0, 0, 0.04);
+			var(--fd-shadow-sm);
 	}
 
 	/* Editor wrapper */
 	.form-markdown-editor :global(.editor-toolbar) {
-		border: 1px solid var(--color-ref-gray-200, #e5e7eb);
+		border: 1px solid var(--fd-border);
 		border-bottom: none;
-		border-radius: 0.5rem 0.5rem 0 0;
-		background-color: var(--color-ref-gray-100, #f3f4f6);
+		border-radius: var(--fd-radius-lg) var(--fd-radius-lg) 0 0;
+		background-color: var(--fd-subtle);
 		padding: 0.5rem;
 	}
 
@@ -361,49 +428,49 @@
 
 	/* Toolbar buttons */
 	.form-markdown-editor :global(.editor-toolbar button) {
-		color: var(--color-ref-gray-600, #4b5563);
+		color: var(--fd-muted-foreground);
 		border: none;
-		border-radius: 0.375rem;
+		border-radius: var(--fd-radius-md);
 		width: 2rem;
 		height: 2rem;
-		transition: all 0.15s ease;
+		transition: all var(--fd-transition-fast);
 	}
 
 	.form-markdown-editor :global(.editor-toolbar button:hover) {
-		background-color: var(--color-ref-gray-200, #e5e7eb);
-		color: var(--color-ref-gray-900, #111827);
+		background-color: var(--fd-border);
+		color: var(--fd-foreground);
 	}
 
 	.form-markdown-editor :global(.editor-toolbar button.active) {
-		background-color: var(--color-ref-blue-100, #dbeafe);
-		color: var(--color-ref-blue-700, #1d4ed8);
+		background-color: var(--fd-primary-muted);
+		color: var(--fd-primary-hover);
 	}
 
 	/* Separator */
 	.form-markdown-editor :global(.editor-toolbar i.separator) {
-		border-left: 1px solid var(--color-ref-gray-300, #d1d5db);
+		border-left: 1px solid var(--fd-border-strong);
 		margin: 0 0.25rem;
 	}
 
 	/* Status bar */
 	.form-markdown-editor :global(.editor-statusbar) {
-		border: 1px solid var(--color-ref-gray-200, #e5e7eb);
+		border: 1px solid var(--fd-border);
 		border-top: none;
-		border-radius: 0 0 0.5rem 0.5rem;
-		background-color: var(--color-ref-gray-50, #f9fafb);
+		border-radius: 0 0 var(--fd-radius-lg) var(--fd-radius-lg);
+		background-color: var(--fd-muted);
 		padding: 0.5rem 0.75rem;
-		font-size: 0.75rem;
-		color: var(--color-ref-gray-500, #6b7280);
+		font-size: var(--fd-text-xs);
+		color: var(--fd-muted-foreground);
 	}
 
 	/* Preview pane */
 	.form-markdown-editor :global(.editor-preview) {
-		background-color: #ffffff;
+		background-color: var(--fd-background);
 		padding: 1rem;
 		font-family: inherit;
-		font-size: 0.875rem;
+		font-size: var(--fd-text-sm);
 		line-height: 1.6;
-		color: var(--color-ref-gray-900, #111827);
+		color: var(--fd-foreground);
 	}
 
 	.form-markdown-editor :global(.editor-preview h1),
@@ -415,12 +482,12 @@
 		margin-top: 1.5em;
 		margin-bottom: 0.5em;
 		font-weight: 600;
-		color: var(--color-ref-gray-900, #111827);
+		color: var(--fd-foreground);
 	}
 
 	.form-markdown-editor :global(.editor-preview h1) {
 		font-size: 1.5rem;
-		border-bottom: 1px solid var(--color-ref-gray-200, #e5e7eb);
+		border-bottom: 1px solid var(--fd-border);
 		padding-bottom: 0.5rem;
 	}
 
@@ -438,31 +505,31 @@
 
 	.form-markdown-editor :global(.editor-preview code) {
 		padding: 0.125rem 0.375rem;
-		background-color: var(--color-ref-gray-100, #f3f4f6);
-		border-radius: 0.25rem;
+		background-color: var(--fd-subtle);
+		border-radius: var(--fd-radius-sm);
 		font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Menlo', monospace;
 		font-size: 0.8125rem;
 	}
 
 	.form-markdown-editor :global(.editor-preview pre) {
 		padding: 1rem;
-		background-color: var(--color-ref-gray-900, #111827);
-		border-radius: 0.5rem;
+		background-color: var(--fd-foreground);
+		border-radius: var(--fd-radius-lg);
 		overflow-x: auto;
 	}
 
 	.form-markdown-editor :global(.editor-preview pre code) {
 		padding: 0;
 		background-color: transparent;
-		color: var(--color-ref-gray-100, #f3f4f6);
+		color: var(--fd-subtle);
 	}
 
 	.form-markdown-editor :global(.editor-preview blockquote) {
 		margin: 1rem 0;
 		padding: 0.5rem 1rem;
-		border-left: 4px solid var(--color-ref-blue-500, #3b82f6);
-		background-color: var(--color-ref-blue-50, #eff6ff);
-		color: var(--color-ref-gray-700, #374151);
+		border-left: 4px solid var(--fd-primary);
+		background-color: var(--fd-primary-muted);
+		color: var(--fd-foreground);
 	}
 
 	.form-markdown-editor :global(.editor-preview ul),
@@ -476,12 +543,12 @@
 	}
 
 	.form-markdown-editor :global(.editor-preview a) {
-		color: var(--color-ref-blue-600, #2563eb);
+		color: var(--fd-primary-hover);
 		text-decoration: underline;
 	}
 
 	.form-markdown-editor :global(.editor-preview a:hover) {
-		color: var(--color-ref-blue-700, #1d4ed8);
+		color: var(--fd-primary);
 	}
 
 	.form-markdown-editor :global(.editor-preview table) {
@@ -492,19 +559,19 @@
 
 	.form-markdown-editor :global(.editor-preview th),
 	.form-markdown-editor :global(.editor-preview td) {
-		border: 1px solid var(--color-ref-gray-200, #e5e7eb);
+		border: 1px solid var(--fd-border);
 		padding: 0.5rem 0.75rem;
 		text-align: left;
 	}
 
 	.form-markdown-editor :global(.editor-preview th) {
-		background-color: var(--color-ref-gray-100, #f3f4f6);
+		background-color: var(--fd-subtle);
 		font-weight: 600;
 	}
 
 	.form-markdown-editor :global(.editor-preview img) {
 		max-width: 100%;
-		border-radius: 0.5rem;
+		border-radius: var(--fd-radius-lg);
 	}
 
 	/* Side-by-side mode */
@@ -514,9 +581,9 @@
 
 	.form-markdown-editor :global(.editor-preview-side) {
 		width: 50%;
-		border: 1px solid var(--color-ref-gray-200, #e5e7eb);
+		border: 1px solid var(--fd-border);
 		border-left: none;
-		border-radius: 0 0 0.5rem 0;
+		border-radius: 0 0 var(--fd-radius-lg) 0;
 	}
 
 	/* Fullscreen mode adjustments */
@@ -530,7 +597,7 @@
 
 	/* Placeholder */
 	.form-markdown-editor :global(.CodeMirror .CodeMirror-placeholder) {
-		color: var(--color-ref-gray-400, #9ca3af);
+		color: var(--fd-muted-foreground);
 		font-style: italic;
 	}
 

package/dist/components/form/FormNumberField.svelte

@@ -77,32 +77,32 @@
 	.form-number-field {
 		width: 100%;
 		padding: 0.625rem 0.875rem;
-		border: 1px solid var(--color-ref-gray-200, #e5e7eb);
-		border-radius: 0.5rem;
-		font-size: 0.875rem;
+		border: 1px solid var(--fd-border);
+		border-radius: var(--fd-radius-lg);
+		font-size: var(--fd-text-sm);
 		font-family: inherit;
 		font-variant-numeric: tabular-nums;
-		color: var(--color-ref-gray-900, #111827);
-		background-color: var(--color-ref-gray-50, #f9fafb);
-		transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+		color: var(--fd-foreground);
+		background-color: var(--fd-muted);
+		transition: all var(--fd-transition-normal);
+		box-shadow: var(--fd-shadow-sm);
 	}
 
 	.form-number-field::placeholder {
-		color: var(--color-ref-gray-400, #9ca3af);
+		color: var(--fd-muted-foreground);
 	}
 
 	.form-number-field:hover {
-		border-color: var(--color-ref-gray-300, #d1d5db);
-		background-color: #ffffff;
+		border-color: var(--fd-border-strong);
+		background-color: var(--fd-background);
 	}
 
 	.form-number-field:focus {
 		outline: none;
-		border-color: var(--color-ref-blue-500, #3b82f6);
-		background-color: #ffffff;
+		border-color: var(--fd-primary);
+		background-color: var(--fd-background);
 		box-shadow:
 			0 0 0 3px rgba(59, 130, 246, 0.12),
-			0 1px 2px rgba(0, 0, 0, 0.04);
+			var(--fd-shadow-sm);
 	}
 </style>

package/dist/components/form/FormRangeField.svelte

@@ -121,13 +121,13 @@
 		-webkit-appearance: none;
 		background: linear-gradient(
 			to right,
-			var(--color-ref-blue-500, #3b82f6) 0%,
-			var(--color-ref-blue-500, #3b82f6) var(--progress, 0%),
-			var(--color-ref-gray-200, #e5e7eb) var(--progress, 0%),
-			var(--color-ref-gray-200, #e5e7eb) 100%
+			var(--fd-primary) 0%,
+			var(--fd-primary) var(--progress, 0%),
+			var(--fd-border) var(--progress, 0%),
+			var(--fd-border) 100%
 		);
 		cursor: pointer;
-		transition: background 0.15s ease;
+		transition: background var(--fd-transition-fast);
 	}
 
 	/* Webkit (Chrome, Safari, Edge) - Track */
@@ -143,8 +143,8 @@
 		width: 18px;
 		height: 18px;
 		border-radius: 50%;
-		background: linear-gradient(135deg, #ffffff 0%, var(--color-ref-gray-50, #f9fafb) 100%);
-		border: 2px solid var(--color-ref-blue-500, #3b82f6);
+		background: linear-gradient(135deg, var(--fd-background) 0%, var(--fd-muted) 100%);
+		border: 2px solid var(--fd-primary);
 		box-shadow:
 			0 2px 6px rgba(59, 130, 246, 0.25),
 			0 1px 2px rgba(0, 0, 0, 0.1);
@@ -170,13 +170,13 @@
 	.form-range-field::-moz-range-track {
 		height: 6px;
 		border-radius: 3px;
-		background: var(--color-ref-gray-200, #e5e7eb);
+		background: var(--fd-border);
 	}
 
 	.form-range-field::-moz-range-progress {
 		height: 6px;
 		border-radius: 3px;
-		background: var(--color-ref-blue-500, #3b82f6);
+		background: var(--fd-primary);
 	}
 
 	/* Firefox - Thumb */
@@ -184,8 +184,8 @@
 		width: 18px;
 		height: 18px;
 		border-radius: 50%;
-		background: linear-gradient(135deg, #ffffff 0%, var(--color-ref-gray-50, #f9fafb) 100%);
-		border: 2px solid var(--color-ref-blue-500, #3b82f6);
+		background: linear-gradient(135deg, var(--fd-background) 0%, var(--fd-muted) 100%);
+		border: 2px solid var(--fd-primary);
 		box-shadow:
 			0 2px 6px rgba(59, 130, 246, 0.25),
 			0 1px 2px rgba(0, 0, 0, 0.1);
@@ -220,22 +220,22 @@
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
-		font-size: 0.75rem;
+		font-size: var(--fd-text-xs);
 		font-variant-numeric: tabular-nums;
 	}
 
 	.form-range-min,
 	.form-range-max {
-		color: var(--color-ref-gray-400, #9ca3af);
+		color: var(--fd-muted-foreground);
 		font-weight: 400;
 	}
 
 	.form-range-current {
 		font-weight: 600;
-		color: var(--color-ref-blue-600, #2563eb);
-		background-color: var(--color-ref-blue-50, #eff6ff);
+		color: var(--fd-primary-hover);
+		background-color: var(--fd-primary-muted);
 		padding: 0.125rem 0.5rem;
-		border-radius: 0.25rem;
+		border-radius: var(--fd-radius-sm);
 		min-width: 2.5rem;
 		text-align: center;
 	}

package/dist/components/form/FormSelect.svelte

@@ -76,30 +76,30 @@
 	.form-select {
 		width: 100%;
 		padding: 0.625rem 2.5rem 0.625rem 0.875rem;
-		border: 1px solid var(--color-ref-gray-200, #e5e7eb);
-		border-radius: 0.5rem;
-		font-size: 0.875rem;
+		border: 1px solid var(--fd-border);
+		border-radius: var(--fd-radius-lg);
+		font-size: var(--fd-text-sm);
 		font-family: inherit;
-		color: var(--color-ref-gray-900, #111827);
-		background-color: var(--color-ref-gray-50, #f9fafb);
-		transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+		color: var(--fd-foreground);
+		background-color: var(--fd-muted);
+		transition: all var(--fd-transition-normal);
+		box-shadow: var(--fd-shadow-sm);
 		cursor: pointer;
 		appearance: none;
 	}
 
 	.form-select:hover {
-		border-color: var(--color-ref-gray-300, #d1d5db);
-		background-color: #ffffff;
+		border-color: var(--fd-border-strong);
+		background-color: var(--fd-background);
 	}
 
 	.form-select:focus {
 		outline: none;
-		border-color: var(--color-ref-blue-500, #3b82f6);
-		background-color: #ffffff;
+		border-color: var(--fd-primary);
+		background-color: var(--fd-background);
 		box-shadow:
 			0 0 0 3px rgba(59, 130, 246, 0.12),
-			0 1px 2px rgba(0, 0, 0, 0.04);
+			var(--fd-shadow-sm);
 	}
 
 	.form-select__icon {
@@ -108,10 +108,10 @@
 		top: 50%;
 		transform: translateY(-50%);
 		pointer-events: none;
-		color: var(--color-ref-gray-400, #9ca3af);
+		color: var(--fd-muted-foreground);
 		display: flex;
 		align-items: center;
-		transition: color 0.2s;
+		transition: color var(--fd-transition-normal);
 	}
 
 	.form-select__icon :global(svg) {
@@ -120,6 +120,6 @@
 	}
 
 	.form-select:focus + .form-select__icon {
-		color: var(--color-ref-blue-500, #3b82f6);
+		color: var(--fd-primary);
 	}
 </style>