refactor segmented control element styling to segment level

src/lib/components/ui/ViewModeToggle.svelte

@@ -66,56 +66,48 @@
 		display: flex;
 		gap: $unit-fourth;
 		padding: $unit-fourth;
-		background: var(--segmented-control-bg);
+		background: var(--segmented-control-blended-bg);
 		border-radius: $item-corner;
 
-		// Default colors (null element)
+		// Default colors (no element)
-		--toggle-active-bg: var(--null-button-bg);
+		--toggle-active-bg: var(--segmented-control-blended-segment-bg-checked);
-		--toggle-active-bg-hover: var(--null-button-bg-hover);
+		--toggle-active-icon: var(--segmented-control-blended-segment-text-checked);
-		--toggle-active-icon: white;
 
-		// Element-specific colors
+		// Element-specific colors (match SegmentedControl)
 		&.wind {
-			--toggle-active-bg: var(--wind-button-bg);
+			--toggle-active-bg: var(--wind-nav-selected-bg);
-			--toggle-active-bg-hover: var(--wind-button-bg-hover);
+			--toggle-active-icon: var(--wind-nav-selected-text);
-			--toggle-active-icon: var(--wind-text-contrast);
 		}
 
 		&.fire {
-			--toggle-active-bg: var(--fire-button-bg);
+			--toggle-active-bg: var(--fire-nav-selected-bg);
-			--toggle-active-bg-hover: var(--fire-button-bg-hover);
+			--toggle-active-icon: var(--fire-nav-selected-text);
-			--toggle-active-icon: var(--fire-text-contrast);
 		}
 
 		&.water {
-			--toggle-active-bg: var(--water-button-bg);
+			--toggle-active-bg: var(--water-nav-selected-bg);
-			--toggle-active-bg-hover: var(--water-button-bg-hover);
+			--toggle-active-icon: var(--water-nav-selected-text);
-			--toggle-active-icon: var(--water-text-contrast);
 		}
 
 		&.earth {
-			--toggle-active-bg: var(--earth-button-bg);
+			--toggle-active-bg: var(--earth-nav-selected-bg);
-			--toggle-active-bg-hover: var(--earth-button-bg-hover);
+			--toggle-active-icon: var(--earth-nav-selected-text);
-			--toggle-active-icon: var(--earth-text-contrast);
 		}
 
 		&.dark {
-			--toggle-active-bg: var(--dark-button-bg);
+			--toggle-active-bg: var(--dark-nav-selected-bg);
-			--toggle-active-bg-hover: var(--dark-button-bg-hover);
+			--toggle-active-icon: var(--dark-nav-selected-text);
-			--toggle-active-icon: var(--dark-text-contrast);
 		}
 
 		&.light {
-			--toggle-active-bg: var(--light-button-bg);
+			--toggle-active-bg: var(--light-nav-selected-bg);
-			--toggle-active-bg-hover: var(--light-button-bg-hover);
+			--toggle-active-icon: var(--light-nav-selected-text);
-			--toggle-active-icon: var(--light-text-contrast);
 		}
 
 		// Neutral gray styling (no element colors)
 		&.neutral {
-			--toggle-active-bg: var(--button-bg);
+			--toggle-active-bg: var(--segmented-control-blended-segment-bg-checked);
-			--toggle-active-bg-hover: var(--button-bg-hover);
+			--toggle-active-icon: var(--segmented-control-blended-segment-text-checked);
-			--toggle-active-icon: var(--text-primary);
 		}
 	}
 
@@ -143,10 +135,6 @@
 		&.active {
 			background: var(--toggle-active-bg);
 			color: var(--toggle-active-icon);
-
-			&:hover {
-				background: var(--toggle-active-bg-hover);
-			}
 		}
 	}
 </style>

src/lib/components/ui/segmented-control/Segment.svelte

@@ -17,10 +17,13 @@
 
 	let { value, class: className, disabled, children: content }: Props = $props()
 
-	// Get variant, size, and grow from parent context
+	// Get variant, size, grow, and element from parent context
 	const variant = getContext<SegmentedControlVariant>('segmented-control-variant') || 'default'
 	const size = getContext<SegmentedControlSize>('segmented-control-size') || 'default'
 	const grow = getContext<boolean>('segmented-control-grow') || false
+	const element = getContext<'wind' | 'fire' | 'water' | 'earth' | 'dark' | 'light' | null>(
+		'segmented-control-element'
+	)
 
 	// Apply variant-specific classes
 	const variantClasses = {
@@ -35,11 +38,22 @@
 		small: styles.small
 	}
 
+	// Apply element-specific classes
+	const elementClasses: Record<string, string | undefined> = {
+		wind: styles.wind,
+		fire: styles.fire,
+		water: styles.water,
+		earth: styles.earth,
+		dark: styles.dark,
+		light: styles.light
+	}
+
 	const segmentClass = $derived(
 		[
 			styles.segment,
 			variantClasses[variant],
 			sizeClasses[size],
+			element ? elementClasses[element] : '',
 			grow ? styles.grow : '',
 			className || ''
 		]

src/lib/components/ui/segmented-control/SegmentedControl.svelte

@@ -37,10 +37,11 @@
 		children
 	}: Props = $props()
 
-	// Provide variant, size, and grow to child segments via context
+	// Provide variant, size, grow, and element to child segments via context
 	setContext('segmented-control-variant', variant)
 	setContext('segmented-control-size', size)
 	setContext('segmented-control-grow', grow)
+	setContext('segmented-control-element', element)
 
 	// Track previous value to only fire callback on actual changes (not initialization)
 	let previousValue = $state<string | undefined>(undefined)
@@ -61,20 +62,10 @@
 		background: styles.background
 	}
 
-	const elementClasses = {
-		wind: styles.wind,
-		fire: styles.fire,
-		water: styles.water,
-		earth: styles.earth,
-		dark: styles.dark,
-		light: styles.light
-	}
-
 	const classList = $derived(
 		[
 			styles.segmentedControl,
 			variantClasses[variant],
-			element ? elementClasses[element] : '',
 			grow ? styles.grow : '',
 			gap ? styles.gap : '',
 			className || ''

src/lib/components/ui/segmented-control/segmented-control.module.scss

@@ -57,77 +57,4 @@
 	&.raid {
 		width: 100%;
 	}
-
-	// Element colors (not used currently, but keeping for future)
-	&.fire {
-		[data-state='checked'] {
-			background: var(--fire-bg);
-			color: var(--fire-text);
-		}
-
-		button:hover {
-			background: var(--fire-hover-bg);
-			color: var(--fire-hover-text);
-		}
-	}
-
-	&.water {
-		[data-state='checked'] {
-			background: var(--water-bg);
-			color: var(--water-text);
-		}
-
-		button:hover {
-			background: var(--water-hover-bg);
-			color: var(--water-hover-text);
-		}
-	}
-
-	&.earth {
-		[data-state='checked'] {
-			background: var(--earth-bg);
-			color: var(--earth-text);
-		}
-
-		button:hover {
-			background: var(--earth-hover-bg);
-			color: var(--earth-hover-text);
-		}
-	}
-
-	&.wind {
-		[data-state='checked'] {
-			background: var(--wind-bg);
-			color: var(--wind-text);
-		}
-
-		button:hover {
-			background: var(--wind-hover-bg);
-			color: var(--wind-hover-text);
-		}
-	}
-
-	&.light {
-		[data-state='checked'] {
-			background: var(--light-bg);
-			color: var(--light-text);
-		}
-
-		button:hover {
-			background: var(--light-hover-bg);
-			color: var(--light-hover-text);
-		}
-	}
-
-	&.dark {
-		[data-state='checked'] {
-			background: var(--dark-bg);
-			color: var(--dark-text);
-		}
-
-		button:hover {
-			background: var(--dark-hover-bg);
-			color: var(--dark-hover-text);
-		}
-	}
 }