mirror of
https://github.com/bookorbit/bookorbit.git
synced 2026-11-03 08:21:39 -06:00
neon
dcc60006f5
- add 16 pastel accent colors (coral, peach, butter, lemon, celadon, sage, mint, seafoam, powder, mist, periwinkle, wisteria, lavender, orchid, blush, grey) - replace ThemeToggle icon button with ThemePicker segmented light/dark control - wire ThemePicker into AppHeader alongside existing accent/radius/background pickers - update AccentPicker, BackgroundPicker, RadiusPicker to reflect new palette structure - update theme store with ACCENT_VIVID/ACCENT_PASTEL split and full type union
46 lines
1.7 KiB
Vue
46 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import { ACCENT_VIVID, ACCENT_PASTEL, useThemeStore } from '@/stores/theme'
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
|
|
|
|
const themeStore = useThemeStore()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="space-y-1.5">
|
|
<div class="flex items-center gap-0.5 flex-wrap">
|
|
<Tooltip v-for="opt in ACCENT_VIVID" :key="opt.id">
|
|
<TooltipTrigger as-child>
|
|
<button
|
|
class="w-3.5 h-3.5 rounded-full transition-transform hover:scale-125 focus:outline-none shrink-0"
|
|
:style="{
|
|
backgroundColor: opt.color,
|
|
outline: themeStore.accent === opt.id ? `2px solid ${opt.color}` : 'none',
|
|
outlineOffset: '2px',
|
|
transform: themeStore.accent === opt.id ? 'scale(1.25)' : '',
|
|
}"
|
|
@click="themeStore.setAccent(opt.id)"
|
|
/>
|
|
</TooltipTrigger>
|
|
<TooltipContent>{{ opt.label }}</TooltipContent>
|
|
</Tooltip>
|
|
</div>
|
|
<div class="flex items-center gap-0.5 flex-wrap">
|
|
<Tooltip v-for="opt in ACCENT_PASTEL" :key="opt.id">
|
|
<TooltipTrigger as-child>
|
|
<button
|
|
class="w-3.5 h-3.5 rounded-full transition-transform hover:scale-125 focus:outline-none shrink-0"
|
|
:style="{
|
|
backgroundColor: opt.color,
|
|
outline: themeStore.accent === opt.id ? `2px solid ${opt.color}` : 'none',
|
|
outlineOffset: '2px',
|
|
transform: themeStore.accent === opt.id ? 'scale(1.25)' : '',
|
|
}"
|
|
@click="themeStore.setAccent(opt.id)"
|
|
/>
|
|
</TooltipTrigger>
|
|
<TooltipContent>{{ opt.label }}</TooltipContent>
|
|
</Tooltip>
|
|
</div>
|
|
</div>
|
|
</template>
|