@d34dman/flowdrop 0.0.43 → 0.0.44

package/dist/components/NodeSidebar.svelte

@@ -11,6 +11,7 @@
 	import { getNodeIcon, getCategoryIcon } from '../utils/icons.js';
 	import { getCategoryColorToken } from '../utils/colors.js';
 	import { SvelteSet } from 'svelte/reactivity';
+	import { uiSettings, updateSettings } from '../stores/settingsStore.js';
 
 	interface Props {
 		nodes: NodeMetadata[];
@@ -21,6 +22,14 @@
 	let searchInput = $state('');
 	let selectedCategory = $state(props.selectedCategory || 'all');
 
+	/**
+	 * Toggle the sidebar collapsed state
+	 * Persists the new state to settings
+	 */
+	function toggleSidebar(): void {
+		updateSettings({ ui: { sidebarCollapsed: !$uiSettings.sidebarCollapsed } });
+	}
+
 	let filteredNodes = $derived(getFilteredNodes());
 	let categories = $derived(getCategories());
 
@@ -188,208 +197,226 @@
 </script>
 
 <!-- Components Sidebar - Always Visible -->
-<div
+<aside
 	class="flowdrop-sidebar flowdrop-sidebar--container"
-	role="complementary"
+	class:flowdrop-sidebar--collapsed={$uiSettings.sidebarCollapsed}
+	class:flowdrop-sidebar--compact={$uiSettings.compactMode}
+	style:width="{$uiSettings.sidebarCollapsed ? 48 : $uiSettings.sidebarWidth}px"
 	aria-label="Components sidebar"
 >
 	<!-- Header -->
 	<div class="flowdrop-sidebar__header">
-		<div class="flowdrop-sidebar__title">
-			<h2 class="flowdrop-text--lg flowdrop-font--bold">Components</h2>
-		</div>
+		<button
+			class="flowdrop-sidebar__toggle"
+			onclick={toggleSidebar}
+			aria-label={$uiSettings.sidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+			title={$uiSettings.sidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+		>
+			<Icon icon={$uiSettings.sidebarCollapsed ? 'mdi:chevron-right' : 'mdi:chevron-left'} />
+		</button>
+		{#if !$uiSettings.sidebarCollapsed}
+			<div class="flowdrop-sidebar__title">
+				<h2 class="flowdrop-text--lg flowdrop-font--bold">Components</h2>
+			</div>
+		{/if}
 	</div>
 
-	<!-- Search Section -->
-	<div class="flowdrop-sidebar__search">
-		<div class="flowdrop-join flowdrop-w--full">
-			<div class="flowdrop-join__item flowdrop-flex--1">
-				<input
-					type="text"
-					placeholder="Search components..."
-					class="flowdrop-input flowdrop-join__item flowdrop-w--full"
-					bind:value={searchInput}
-					oninput={handleSearchChange}
-				/>
+	{#if !$uiSettings.sidebarCollapsed}
+		<!-- Search Section -->
+		<div class="flowdrop-sidebar__search">
+			<div class="flowdrop-join flowdrop-w--full">
+				<div class="flowdrop-join__item flowdrop-flex--1">
+					<input
+						type="text"
+						placeholder="Search components..."
+						class="flowdrop-input flowdrop-join__item flowdrop-w--full"
+						bind:value={searchInput}
+						oninput={handleSearchChange}
+					/>
+				</div>
+				<button class="flowdrop-btn flowdrop-join__item" aria-label="Search components">
+					<Icon icon="mdi:magnify" class="flowdrop-icon" />
+				</button>
 			</div>
-			<button class="flowdrop-btn flowdrop-join__item" aria-label="Search components">
-				<Icon icon="mdi:magnify" class="flowdrop-icon" />
-			</button>
 		</div>
-	</div>
 
-	<!-- Node Types List -->
-	<div class="flowdrop-sidebar__content">
-		{#if props.nodes?.length === 0}
-			<!-- No node types available -->
-			<div class="flowdrop-hero">
-				<div class="flowdrop-hero__content">
-					<div class="flowdrop-hero__icon">📦</div>
-					<h3 class="flowdrop-hero__title">No node types available</h3>
-					<p class="flowdrop-hero__description">Node type definitions will appear here</p>
-					<div class="flowdrop-mb--4">
-						<LoadingSpinner size="md" text="Loading from server..." />
+		<!-- Node Types List -->
+		<div class="flowdrop-sidebar__content">
+			{#if props.nodes?.length === 0}
+				<!-- No node types available -->
+				<div class="flowdrop-hero">
+					<div class="flowdrop-hero__content">
+						<div class="flowdrop-hero__icon">📦</div>
+						<h3 class="flowdrop-hero__title">No node types available</h3>
+						<p class="flowdrop-hero__description">Node type definitions will appear here</p>
+						<div class="flowdrop-mb--4">
+							<LoadingSpinner size="md" text="Loading from server..." />
+						</div>
 					</div>
 				</div>
-			</div>
-		{:else if searchInput.trim()}
-			<!-- Search Results -->
-			<div class="flowdrop-p--4">
-				<div class="flowdrop-divider">
-					<h3 class="flowdrop-divider__text">Search Results</h3>
-				</div>
-				{#if filteredNodes.length === 0}
-					<div class="flowdrop-hero">
-						<div class="flowdrop-hero__content">
-							<div class="flowdrop-hero__icon">🔍</div>
-							<h3 class="flowdrop-hero__title">No components found</h3>
-							<p class="flowdrop-hero__description">Try adjusting your search</p>
-							{#if props.nodes?.length === 0}
-								<div class="flowdrop-mb--4">
-									<LoadingSpinner size="sm" text="Loading components..." />
-								</div>
-							{/if}
-						</div>
+			{:else if searchInput.trim()}
+				<!-- Search Results -->
+				<div class="flowdrop-p--4">
+					<div class="flowdrop-divider">
+						<h3 class="flowdrop-divider__text">Search Results</h3>
 					</div>
-				{:else}
-					<div class="flowdrop-node-list">
-						{#each filteredNodes as nodeType (nodeType.id)}
-							<div
-								class="flowdrop-card flowdrop-card--compact flowdrop-node-item"
-								draggable="true"
-								ondragstart={(e) => handleNodeDragStart(e, nodeType)}
-								role="button"
-								tabindex="0"
-							>
-								<div class="flowdrop-card__body flowdrop-p--1 flowdrop-py--1">
-									<div class="flowdrop-flex flowdrop-gap--2 flowdrop-items--center">
-										<!-- Node Type Icon -->
-										<div
-											class="flowdrop-node-icon"
-											style="background-color: {getCategoryColorToken(nodeType.category)}"
-										>
-											<Icon icon={getNodeIcon(nodeType.icon, nodeType.category)} />
-										</div>
-
-										<!-- Node Type Info - Icon and Title only -->
-										<h4
-											class="flowdrop-text--sm flowdrop-font--medium flowdrop-truncate flowdrop-flex--1"
-										>
-											{nodeType.name}
-										</h4>
+					{#if filteredNodes.length === 0}
+						<div class="flowdrop-hero">
+							<div class="flowdrop-hero__content">
+								<div class="flowdrop-hero__icon">🔍</div>
+								<h3 class="flowdrop-hero__title">No components found</h3>
+								<p class="flowdrop-hero__description">Try adjusting your search</p>
+								{#if props.nodes?.length === 0}
+									<div class="flowdrop-mb--4">
+										<LoadingSpinner size="sm" text="Loading components..." />
 									</div>
-									<p
-										class="flowdrop-text--xs flowdrop-text--gray flowdrop-truncate flowdrop-mt--1 flowdrop-ml--0"
-									>
-										{nodeType.description}
-									</p>
-								</div>
+								{/if}
 							</div>
-						{/each}
-					</div>
-				{/if}
-			</div>
-		{:else}
-			<!-- Show categories with details when no search is active -->
-			<div class="flowdrop-p--4">
-				<!-- Category-specific details -->
-				<div class="flowdrop-category-list">
-					{#each categories as category (category)}
-						{@const categoryNodes = getFilteredNodesForCategory(category)}
-						{#if categoryNodes.length > 0}
-							<details class="flowdrop-details">
-								<summary class="flowdrop-details__summary">
-									<div class="flowdrop-flex flowdrop-gap--2 flowdrop-items--center">
-										<span
-											class="flowdrop-node-icon"
-											style="background-color: {getCategoryColorToken(category)}"
+						</div>
+					{:else}
+						<div class="flowdrop-node-list">
+							{#each filteredNodes as nodeType (nodeType.id)}
+								<div
+									class="flowdrop-card flowdrop-card--compact flowdrop-node-item"
+									draggable="true"
+									ondragstart={(e) => handleNodeDragStart(e, nodeType)}
+									role="button"
+									tabindex="0"
+								>
+									<div class="flowdrop-card__body flowdrop-p--1 flowdrop-py--1">
+										<div class="flowdrop-flex flowdrop-gap--2 flowdrop-items--center">
+											<!-- Node Type Icon with Squircle Background -->
+											<span
+												class="flowdrop-node-icon"
+												style="--_icon-color: {getCategoryColorToken(nodeType.category)}"
+											>
+												<Icon icon={getNodeIcon(nodeType.icon, nodeType.category)} />
+											</span>
+
+											<!-- Node Type Info - Icon and Title only -->
+											<h4
+												class="flowdrop-text--sm flowdrop-font--medium flowdrop-truncate flowdrop-flex--1"
+											>
+												{nodeType.name}
+											</h4>
+										</div>
+										<p
+											class="flowdrop-text--xs flowdrop-text--gray flowdrop-truncate flowdrop-mt--1 flowdrop-ml--0"
 										>
-											<Icon icon={getCategoryIcon(category)} />
-										</span>
-										<span>{getCategoryDisplayName(category)}</span>
+											{nodeType.description}
+										</p>
 									</div>
-									<div class="flowdrop-badge flowdrop-badge--secondary">{categoryNodes.length}</div>
-								</summary>
-								<div class="flowdrop-details__content">
-									<div class="flowdrop-node-list">
-										{#each categoryNodes as nodeType (nodeType.id)}
-											<div
-												class="flowdrop-card flowdrop-card--compact flowdrop-node-item"
-												draggable="true"
-												ondragstart={(e) => handleNodeDragStart(e, nodeType)}
-												onclick={() => handleNodeClick(nodeType)}
-												role="button"
-												tabindex="0"
-												onkeydown={(e) => {
-													if (e.key === 'Enter' || e.key === ' ') {
-														e.preventDefault();
-														handleNodeClick(nodeType);
-													}
-												}}
+								</div>
+							{/each}
+						</div>
+					{/if}
+				</div>
+			{:else}
+				<!-- Show categories with details when no search is active -->
+				<div class="flowdrop-p--4">
+					<!-- Category-specific details -->
+					<div class="flowdrop-category-list">
+						{#each categories as category (category)}
+							{@const categoryNodes = getFilteredNodesForCategory(category)}
+							{#if categoryNodes.length > 0}
+								<details class="flowdrop-details">
+									<summary class="flowdrop-details__summary">
+										<div class="flowdrop-flex flowdrop-gap--2 flowdrop-items--center">
+											<span
+												class="flowdrop-node-icon"
+												style="--_icon-color: {getCategoryColorToken(category)}"
 											>
-												<div class="flowdrop-card__body flowdrop-p--1 flowdrop-py--1">
-													<div class="flowdrop-flex flowdrop-gap--2 flowdrop-items--center">
-														<!-- Node Type Icon -->
-														<div
-															class="flowdrop-node-icon"
-															style="background-color: {getCategoryColorToken(nodeType.category)}"
-														>
-															<Icon icon={getNodeIcon(nodeType.icon, nodeType.category)} />
+												<Icon icon={getCategoryIcon(category)} />
+											</span>
+											<span>{getCategoryDisplayName(category)}</span>
+										</div>
+										<div class="flowdrop-badge flowdrop-badge--secondary">
+											{categoryNodes.length}
+										</div>
+									</summary>
+									<div class="flowdrop-details__content">
+										<div class="flowdrop-node-list">
+											{#each categoryNodes as nodeType (nodeType.id)}
+												<div
+													class="flowdrop-card flowdrop-card--compact flowdrop-node-item"
+													draggable="true"
+													ondragstart={(e) => handleNodeDragStart(e, nodeType)}
+													onclick={() => handleNodeClick(nodeType)}
+													role="button"
+													tabindex="0"
+													onkeydown={(e) => {
+														if (e.key === 'Enter' || e.key === ' ') {
+															e.preventDefault();
+															handleNodeClick(nodeType);
+														}
+													}}
+												>
+													<div class="flowdrop-card__body flowdrop-p--1 flowdrop-py--1">
+														<div class="flowdrop-flex flowdrop-gap--2 flowdrop-items--center">
+															<!-- Node Type Icon with Squircle Background -->
+															<span
+																class="flowdrop-node-icon"
+																style="--_icon-color: {getCategoryColorToken(nodeType.category)}"
+															>
+																<Icon icon={getNodeIcon(nodeType.icon, nodeType.category)} />
+															</span>
+
+															<!-- Node Type Info - Icon and Title only -->
+															<h4
+																class="flowdrop-text--sm flowdrop-font--medium flowdrop-truncate flowdrop-flex--1"
+															>
+																{nodeType.name}
+															</h4>
 														</div>
-
-														<!-- Node Type Info - Icon and Title only -->
-														<h4
-															class="flowdrop-text--sm flowdrop-font--medium flowdrop-truncate flowdrop-flex--1"
+														<p
+															class="flowdrop-text--xs flowdrop-text--gray flowdrop-truncate flowdrop-mt--1 flowdrop-ml--0"
 														>
-															{nodeType.name}
-														</h4>
+															{nodeType.description}
+														</p>
 													</div>
-													<p
-														class="flowdrop-text--xs flowdrop-text--gray flowdrop-truncate flowdrop-mt--1 flowdrop-ml--0"
-													>
-														{nodeType.description}
-													</p>
 												</div>
-											</div>
-										{/each}
+											{/each}
+										</div>
 									</div>
-								</div>
-							</details>
-						{/if}
-					{/each}
+								</details>
+							{/if}
+						{/each}
+					</div>
 				</div>
-			</div>
-		{/if}
-	</div>
+			{/if}
+		</div>
 
-	<!-- Footer -->
-	<div class="flowdrop-sidebar__footer">
-		<div class="flowdrop-flex flowdrop-gap--4">
+		<!-- Footer -->
+		<div class="flowdrop-sidebar__footer">
 			<div class="flowdrop-flex flowdrop-gap--4">
-				{#if props.nodes?.length === 0}
-					<span class="flowdrop-text--xs flowdrop-text--gray">Loading components...</span>
-				{:else}
-					<span class="flowdrop-text--xs flowdrop-text--gray"
-						>Total: {props.nodes?.length || 0} components</span
-					>
-					<span class="flowdrop-text--xs flowdrop-text--gray">Showing: {filteredNodes.length}</span>
-				{/if}
+				<div class="flowdrop-flex flowdrop-gap--4">
+					{#if props.nodes?.length === 0}
+						<span class="flowdrop-text--xs flowdrop-text--gray">Loading components...</span>
+					{:else}
+						<span class="flowdrop-text--xs flowdrop-text--gray"
+							>Total: {props.nodes?.length || 0} components</span
+						>
+						<span class="flowdrop-text--xs flowdrop-text--gray"
+							>Showing: {filteredNodes.length}</span
+						>
+					{/if}
+				</div>
 			</div>
 		</div>
-	</div>
-</div>
+	{/if}
+</aside>
 
 <style>
 	/* Components Sidebar - Always Visible */
 	.flowdrop-sidebar {
-		width: 320px;
-		height: calc(100vh - var(--flowdrop-navbar-height, 60px)); /* Account for navbar height */
-		background-color: #ffffff;
-		border-right: 1px solid #e5e7eb;
+		height: calc(100vh - var(--fd-navbar-height)); /* Account for navbar height */
+		background-color: var(--fd-background);
+		border-right: 1px solid var(--fd-border);
 		display: flex;
 		flex-direction: column;
-		box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
+		box-shadow: var(--fd-shadow-md);
 		flex-shrink: 0;
+		transition: width 0.2s ease;
 	}
 
 	.flowdrop-sidebar--container {
@@ -398,9 +425,79 @@
 		height: 100%;
 	}
 
+	/* Collapsed state */
+	.flowdrop-sidebar--collapsed {
+		overflow: hidden;
+	}
+
+	.flowdrop-sidebar--collapsed .flowdrop-sidebar__header {
+		justify-content: center;
+		padding: 0.75rem 0.5rem;
+	}
+
+	/* Compact mode styles */
+	.flowdrop-sidebar--compact .flowdrop-sidebar__header {
+		padding: 0.5rem 0.75rem;
+	}
+
+	.flowdrop-sidebar--compact .flowdrop-sidebar__search {
+		padding: 0.5rem 0.75rem;
+	}
+
+	.flowdrop-sidebar--compact .flowdrop-sidebar__content {
+		padding-bottom: 2rem;
+	}
+
+	.flowdrop-sidebar--compact .flowdrop-sidebar__footer {
+		padding: 0.375rem 0.5rem;
+		height: 32px;
+	}
+
+	.flowdrop-sidebar--compact .flowdrop-node-icon {
+		width: 1.5rem;
+		height: 1.5rem;
+		font-size: var(--fd-text-xs);
+	}
+
+	.flowdrop-sidebar--compact .flowdrop-node-list {
+		gap: 0.25rem;
+	}
+
+	.flowdrop-sidebar--compact .flowdrop-category-list {
+		gap: 0.25rem;
+	}
+
+	/* Toggle button */
+	.flowdrop-sidebar__toggle {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 2rem;
+		height: 2rem;
+		border: none;
+		background: transparent;
+		color: var(--fd-muted-foreground);
+		border-radius: var(--fd-radius-md);
+		cursor: pointer;
+		transition:
+			color var(--fd-transition-fast),
+			background-color var(--fd-transition-fast);
+		flex-shrink: 0;
+	}
+
+	.flowdrop-sidebar__toggle:hover {
+		color: var(--fd-foreground);
+		background-color: var(--fd-subtle);
+	}
+
+	.flowdrop-sidebar__toggle:focus {
+		outline: none;
+		box-shadow: 0 0 0 2px var(--fd-ring);
+	}
+
 	.flowdrop-sidebar__header {
-		background-color: #f8fafc;
-		border-bottom: 1px solid #e5e7eb;
+		background: var(--fd-header);
+		border-bottom: 1px solid var(--fd-border);
 		padding: 0.75rem 1rem;
 		display: flex;
 		align-items: center;
@@ -419,19 +516,20 @@
 		font-size: 1rem;
 		font-weight: 600;
 		margin: 0;
+		color: var(--fd-foreground);
 	}
 
 	.flowdrop-sidebar__search {
 		padding: 0.75rem 1rem;
-		background-color: #ffffff;
-		border-bottom: 1px solid #e5e7eb;
+		background-color: var(--fd-background);
+		border-bottom: 1px solid var(--fd-border);
 	}
 
 	.flowdrop-sidebar__content {
 		flex: 1;
 		overflow-y: scroll; /* Changed from auto to scroll to always show scrollbar */
 		scrollbar-width: thin;
-		scrollbar-color: #d1d5db #f3f4f6;
+		scrollbar-color: var(--fd-scrollbar-thumb) var(--fd-scrollbar-track);
 		padding-bottom: 4rem; /* Add padding to ensure content is scrollable above footer */
 		min-height: 0; /* Allow flex item to shrink below content size */
 	}
@@ -442,23 +540,23 @@
 	}
 
 	.flowdrop-sidebar__content::-webkit-scrollbar-track {
-		background: #f3f4f6;
+		background: var(--fd-scrollbar-track);
 	}
 
 	.flowdrop-sidebar__content::-webkit-scrollbar-thumb {
-		background: #d1d5db;
+		background: var(--fd-scrollbar-thumb);
 		border-radius: 4px;
 		min-height: 20px; /* Ensure thumb has minimum height for visibility */
 	}
 
 	.flowdrop-sidebar__content::-webkit-scrollbar-thumb:hover {
-		background: #9ca3af;
+		background: var(--fd-scrollbar-thumb-hover);
 	}
 
 	.flowdrop-sidebar__footer {
-		background-color: rgba(255, 255, 255, 0.8);
-		backdrop-filter: blur(8px);
-		border-top: 1px solid #e5e7eb;
+		background-color: var(--fd-backdrop);
+		backdrop-filter: var(--fd-backdrop-blur);
+		border-top: 1px solid var(--fd-border);
 		padding: 0.5rem 0.75rem;
 		flex-shrink: 0; /* Prevent footer from shrinking */
 		position: relative;
@@ -476,30 +574,44 @@
 
 	.flowdrop-node-item {
 		cursor: grab;
-		transition: all 0.2s ease-in-out;
-		border-radius: 0.375rem;
+		transition: all var(--fd-transition-fast);
+		border-radius: var(--fd-radius-md);
 		border: 1px solid transparent;
+		background-color: var(--fd-card);
 	}
 
 	.flowdrop-node-item:hover {
-		border-color: #d1d5db;
-		background-color: #f9fafb;
+		border-color: var(--fd-border);
+		background-color: var(--fd-muted);
+		box-shadow: var(--fd-shadow-sm);
+		transform: translateY(-1px);
 	}
 
 	.flowdrop-node-item:active {
 		cursor: grabbing;
+		transform: translateY(0);
+		box-shadow: none;
 	}
 
+	/* Squircle icon wrapper - Apple-style rounded square background */
 	.flowdrop-node-icon {
 		width: 2rem;
 		height: 2rem;
-		border-radius: 0.375rem;
-		color: #ffffff;
-		font-size: 0.875rem;
+		border-radius: 0.5rem;
+		background: color-mix(in srgb, var(--_icon-color) 15%, transparent);
+		color: var(--fd-node-icon);
+		font-size: var(--fd-text-sm);
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		flex-shrink: 0;
+		transition: all var(--fd-transition-normal);
+	}
+
+	.flowdrop-node-item:hover .flowdrop-node-icon,
+	.flowdrop-details__summary:hover .flowdrop-node-icon {
+		background: color-mix(in srgb, var(--_icon-color) 22%, transparent);
+		transform: scale(1.05);
 	}
 
 	.flowdrop-category-list {
@@ -521,6 +633,7 @@
 	.flowdrop-card__body h4 {
 		margin: 0;
 		line-height: 1;
+		color: var(--fd-foreground);
 	}
 
 	.flowdrop-p--4 {
@@ -539,14 +652,14 @@
 	/* Form Elements - Matching App Design System */
 	.flowdrop-input {
 		padding: 0.625rem 0.75rem;
-		border: 1px solid #d1d5db;
-		border-radius: 0.375rem;
-		font-size: 0.875rem;
-		color: #111827;
-		background-color: #ffffff;
+		border: 1px solid var(--fd-border-strong);
+		border-radius: var(--fd-radius-md);
+		font-size: var(--fd-text-sm);
+		color: var(--fd-foreground);
+		background-color: var(--fd-background);
 		transition:
-			border-color 0.2s ease-in-out,
-			box-shadow 0.2s ease-in-out;
+			border-color var(--fd-transition-normal),
+			box-shadow var(--fd-transition-normal);
 		width: 100%;
 		height: 2.5rem;
 		box-sizing: border-box;
@@ -554,51 +667,51 @@
 
 	.flowdrop-input:focus {
 		outline: none;
-		border-color: #6b7280;
-		box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.1);
+		border-color: var(--fd-ring);
+		box-shadow: 0 0 0 3px color-mix(in srgb, var(--fd-ring) 20%, transparent);
 	}
 
 	.flowdrop-input::placeholder {
-		color: #9ca3af;
+		color: var(--fd-muted-foreground);
 	}
 
 	.flowdrop-btn {
 		padding: 0.625rem 0.75rem;
-		border-radius: 0.375rem;
-		font-size: 0.875rem;
+		border-radius: var(--fd-radius-md);
+		font-size: var(--fd-text-sm);
 		font-weight: 500;
 		cursor: pointer;
-		transition: all 0.2s ease-in-out;
-		border: 1px solid #d1d5db;
+		transition: all var(--fd-transition-normal);
+		border: 1px solid var(--fd-border-strong);
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		gap: 0.5rem;
-		background-color: #f9fafb;
-		color: #374151;
+		background-color: var(--fd-muted);
+		color: var(--fd-foreground);
 		height: 2.5rem;
 		min-width: 2.5rem;
 		box-sizing: border-box;
 	}
 
 	.flowdrop-btn:hover {
-		background-color: #f3f4f6;
-		border-color: #9ca3af;
+		background-color: var(--fd-subtle);
+		border-color: var(--fd-border-strong);
 	}
 
 	.flowdrop-btn:active {
-		background-color: #e5e7eb;
-		border-color: #6b7280;
+		background-color: var(--fd-border);
+		border-color: var(--fd-muted-foreground);
 	}
 
 	.flowdrop-btn:focus {
 		outline: none;
-		box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.1);
+		box-shadow: 0 0 0 3px color-mix(in srgb, var(--fd-ring) 20%, transparent);
 	}
 
 	.flowdrop-btn:disabled {
-		background-color: #9ca3af;
-		border-color: #9ca3af;
+		background-color: var(--fd-muted-foreground);
+		border-color: var(--fd-muted-foreground);
 		cursor: not-allowed;
 		opacity: 0.6;
 	}
@@ -607,10 +720,10 @@
 	.flowdrop-join {
 		display: flex;
 		width: 100%;
-		border-radius: 0.375rem;
+		border-radius: var(--fd-radius-md);
 		overflow: hidden;
-		border: 1px solid #d1d5db;
-		background-color: #ffffff;
+		border: 1px solid var(--fd-border-strong);
+		background-color: var(--fd-background);
 	}
 
 	.flowdrop-join__item {
@@ -620,23 +733,23 @@
 	}
 
 	.flowdrop-join__item:first-child {
-		border-right: 1px solid #d1d5db;
+		border-right: 1px solid var(--fd-border-strong);
 		flex: 1;
 	}
 
 	.flowdrop-join__item:last-child {
 		border-left: none;
-		background-color: #f9fafb;
-		color: #374151;
+		background-color: var(--fd-muted);
+		color: var(--fd-foreground);
 	}
 
 	.flowdrop-join__item:last-child:hover {
-		background-color: #f3f4f6;
+		background-color: var(--fd-subtle);
 	}
 
 	.flowdrop-join:focus-within {
-		border-color: #6b7280;
-		box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.1);
+		border-color: var(--fd-ring);
+		box-shadow: 0 0 0 3px color-mix(in srgb, var(--fd-ring) 20%, transparent);
 	}
 
 	/* Utility classes */