mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-15 16:19:39 +02:00
b97149ac12
- Replace custom Icon.svelte component with phosphor-svelte library
- Remove iconPaths.ts with manually maintained SVG paths
- Update @manacore/shared-icons to re-export phosphor-svelte
- Migrate shared-ui Modal and ConfirmationModal components
- Migrate shared-theme-ui ThemeToggle and ThemeModeSelector
- Migrate all chat app components to use Phosphor Icons
- All apps now use consistent icon API: <IconName size={24} weight="bold" />
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
76 lines
1.7 KiB
Svelte
76 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
import type { ThemeStore } from '@manacore/shared-theme';
|
|
import { Sun, Moon } from '@manacore/shared-icons';
|
|
|
|
interface Props {
|
|
/** Theme store instance */
|
|
theme: ThemeStore;
|
|
/** Icon size in pixels */
|
|
size?: number;
|
|
/** Additional CSS classes */
|
|
class?: string;
|
|
/** Show tooltip */
|
|
showTooltip?: boolean;
|
|
}
|
|
|
|
let { theme, size = 20, class: className = '', showTooltip = false }: Props = $props();
|
|
|
|
function getTooltipText(): string {
|
|
if (theme.mode === 'system') {
|
|
return `System (${theme.effectiveMode})`;
|
|
}
|
|
return theme.effectiveMode === 'dark' ? 'Dark mode' : 'Light mode';
|
|
}
|
|
</script>
|
|
|
|
<button
|
|
type="button"
|
|
onclick={() => theme.toggleMode()}
|
|
class="theme-toggle {className}"
|
|
aria-label="Toggle theme"
|
|
title={showTooltip ? getTooltipText() : undefined}
|
|
>
|
|
{#if theme.effectiveMode === 'dark'}
|
|
<Sun {size} weight="bold" class="theme-toggle-icon" />
|
|
{:else}
|
|
<Moon {size} weight="bold" class="theme-toggle-icon" />
|
|
{/if}
|
|
</button>
|
|
|
|
<style>
|
|
.theme-toggle {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0.5rem;
|
|
border-radius: 0.5rem;
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
color: hsl(var(--color-foreground));
|
|
transition:
|
|
background-color 0.2s ease,
|
|
transform 0.1s ease;
|
|
}
|
|
|
|
.theme-toggle:hover {
|
|
background-color: hsl(var(--color-surface-hover));
|
|
}
|
|
|
|
.theme-toggle:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.theme-toggle:focus-visible {
|
|
outline: 2px solid hsl(var(--color-ring));
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
:global(.theme-toggle-icon) {
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.theme-toggle:hover :global(.theme-toggle-icon) {
|
|
transform: rotate(15deg);
|
|
}
|
|
</style>
|