granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor segmented control element styling to segment level

Browse source
This commit is contained in:
Justin Edmund 2025-12-19 15:48:45 -08:00
parent 916a6f52cd
commit 5bf8a1177f
4 changed files with 36 additions and 116 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
src/lib/components/ui/ViewModeToggle.svelte
View file

@ -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);
}
}
}
</style>

16
src/lib/components/ui/segmented-control/Segment.svelte
View file

@ -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 || ''
]

13
src/lib/components/ui/segmented-control/SegmentedControl.svelte
View file

@ -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 || ''

73
src/lib/components/ui/segmented-control/segmented-control.module.scss
View file

@ -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);
}
}
}