Justin Edmund
a31291d69f
- Replace 802 instances of $grey- variables with $gray- across 106 files - Remove legacy color aliases from variables.scss - Maintain consistent naming convention throughout codebase This completes the migration to the new color scale system. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
52 lines
963 B
Svelte
52 lines
963 B
Svelte
<script lang="ts">
|
|
interface Props {
|
|
options: Array<{ value: string; label: string }>
|
|
value: string
|
|
onChange: (value: string) => void
|
|
}
|
|
|
|
let { options, value, onChange }: Props = $props()
|
|
</script>
|
|
|
|
<div class="segmented-control">
|
|
{#each options as option}
|
|
<button
|
|
class="segment"
|
|
class:active={value === option.value}
|
|
onclick={() => onChange(option.value)}
|
|
>
|
|
{option.label}
|
|
</button>
|
|
{/each}
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
.segmented-control {
|
|
display: inline-flex;
|
|
background-color: $gray-95;
|
|
border-radius: 50px;
|
|
padding: $unit-half;
|
|
gap: $unit-half;
|
|
}
|
|
|
|
.segment {
|
|
padding: $unit $unit-3x;
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: 50px;
|
|
font-size: 0.925rem;
|
|
color: $gray-40;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
|
|
&:hover:not(.active) {
|
|
color: $gray-20;
|
|
}
|
|
|
|
&.active {
|
|
background-color: white;
|
|
color: $gray-10;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
}
|
|
}
|
|
</style>
|