From 5bf8a1177fc78f0328979b64f1303a62b010fc11 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Fri, 19 Dec 2025 15:48:45 -0800 Subject: [PATCH] refactor segmented control element styling to segment level --- src/lib/components/ui/ViewModeToggle.svelte | 50 +++++-------- .../ui/segmented-control/Segment.svelte | 16 +++- .../segmented-control/SegmentedControl.svelte | 13 +--- .../segmented-control.module.scss | 73 ------------------- 4 files changed, 36 insertions(+), 116 deletions(-) diff --git a/src/lib/components/ui/ViewModeToggle.svelte b/src/lib/components/ui/ViewModeToggle.svelte index 37870796..4cbedecb 100644 --- a/src/lib/components/ui/ViewModeToggle.svelte +++ b/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) - --toggle-active-bg: var(--null-button-bg); - --toggle-active-bg-hover: var(--null-button-bg-hover); - --toggle-active-icon: white; + // Default colors (no element) + --toggle-active-bg: var(--segmented-control-blended-segment-bg-checked); + --toggle-active-icon: var(--segmented-control-blended-segment-text-checked); - // Element-specific colors + // Element-specific colors (match SegmentedControl) &.wind { - --toggle-active-bg: var(--wind-button-bg); - --toggle-active-bg-hover: var(--wind-button-bg-hover); - --toggle-active-icon: var(--wind-text-contrast); + --toggle-active-bg: var(--wind-nav-selected-bg); + --toggle-active-icon: var(--wind-nav-selected-text); } &.fire { - --toggle-active-bg: var(--fire-button-bg); - --toggle-active-bg-hover: var(--fire-button-bg-hover); - --toggle-active-icon: var(--fire-text-contrast); + --toggle-active-bg: var(--fire-nav-selected-bg); + --toggle-active-icon: var(--fire-nav-selected-text); } &.water { - --toggle-active-bg: var(--water-button-bg); - --toggle-active-bg-hover: var(--water-button-bg-hover); - --toggle-active-icon: var(--water-text-contrast); + --toggle-active-bg: var(--water-nav-selected-bg); + --toggle-active-icon: var(--water-nav-selected-text); } &.earth { - --toggle-active-bg: var(--earth-button-bg); - --toggle-active-bg-hover: var(--earth-button-bg-hover); - --toggle-active-icon: var(--earth-text-contrast); + --toggle-active-bg: var(--earth-nav-selected-bg); + --toggle-active-icon: var(--earth-nav-selected-text); } &.dark { - --toggle-active-bg: var(--dark-button-bg); - --toggle-active-bg-hover: var(--dark-button-bg-hover); - --toggle-active-icon: var(--dark-text-contrast); + --toggle-active-bg: var(--dark-nav-selected-bg); + --toggle-active-icon: var(--dark-nav-selected-text); } &.light { - --toggle-active-bg: var(--light-button-bg); - --toggle-active-bg-hover: var(--light-button-bg-hover); - --toggle-active-icon: var(--light-text-contrast); + --toggle-active-bg: var(--light-nav-selected-bg); + --toggle-active-icon: var(--light-nav-selected-text); } // Neutral gray styling (no element colors) &.neutral { - --toggle-active-bg: var(--button-bg); - --toggle-active-bg-hover: var(--button-bg-hover); - --toggle-active-icon: var(--text-primary); + --toggle-active-bg: var(--segmented-control-blended-segment-bg-checked); + --toggle-active-icon: var(--segmented-control-blended-segment-text-checked); } } @@ -143,10 +135,6 @@ &.active { background: var(--toggle-active-bg); color: var(--toggle-active-icon); - - &:hover { - background: var(--toggle-active-bg-hover); - } } } diff --git a/src/lib/components/ui/segmented-control/Segment.svelte b/src/lib/components/ui/segmented-control/Segment.svelte index 225929d1..0643247d 100644 --- a/src/lib/components/ui/segmented-control/Segment.svelte +++ b/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('segmented-control-variant') || 'default' const size = getContext('segmented-control-size') || 'default' const grow = getContext('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 = { + 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 || '' ] diff --git a/src/lib/components/ui/segmented-control/SegmentedControl.svelte b/src/lib/components/ui/segmented-control/SegmentedControl.svelte index adb1b58d..77b886d7 100644 --- a/src/lib/components/ui/segmented-control/SegmentedControl.svelte +++ b/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(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 || '' diff --git a/src/lib/components/ui/segmented-control/segmented-control.module.scss b/src/lib/components/ui/segmented-control/segmented-control.module.scss index 57701210..04a6681e 100644 --- a/src/lib/components/ui/segmented-control/segmented-control.module.scss +++ b/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); - } - } }