till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-21 16:06:41 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

style: auto-format codebase with Prettier

Browse source 
Applied formatting to 1487+ files using pnpm format:write
  - TypeScript/JavaScript files
  - Svelte components
  - Astro pages
  - JSON configs
  - Markdown docs

  13 files still need manual review (Astro JSX comments)
This commit is contained in:
Wuesteon 2025-11-27 18:33:16 +01:00
parent 0241f5554c
commit d36b321d9d
3952 changed files with 661498 additions and 739751 deletions
Download patch file Download diff file Expand all files Collapse all files

116
packages/shared-theme-ui/src/ThemeToggle.svelte
View file

@ -1,74 +1,76 @@
<script lang="ts">
import type { ThemeStore } from '@manacore/shared-theme';
import { Icon } from '@manacore/shared-icons';
import type { ThemeStore } from '@manacore/shared-theme';
import { Icon } 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;
}
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();
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';
}
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}
type="button"
onclick={() => theme.toggleMode()}
class="theme-toggle {className}"
aria-label="Toggle theme"
title={showTooltip ? getTooltipText() : undefined}
>
{#if theme.effectiveMode === 'dark'}
<Icon name="sun" {size} class="theme-toggle-icon" />
{:else}
<Icon name="moon" {size} class="theme-toggle-icon" />
{/if}
{#if theme.effectiveMode === 'dark'}
<Icon name="sun" {size} class="theme-toggle-icon" />
{:else}
<Icon name="moon" {size} 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 {
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:hover {
background-color: hsl(var(--color-surface-hover));
}
.theme-toggle:active {
transform: scale(0.95);
}
.theme-toggle:active {
transform: scale(0.95);
}
.theme-toggle:focus-visible {
outline: 2px solid hsl(var(--color-ring));
outline-offset: 2px;
}
.theme-toggle:focus-visible {
outline: 2px solid hsl(var(--color-ring));
outline-offset: 2px;
}
:global(.theme-toggle-icon) {
transition: transform 0.3s ease;
}
:global(.theme-toggle-icon) {
transition: transform 0.3s ease;
}
.theme-toggle:hover :global(.theme-toggle-icon) {
transform: rotate(15deg);
}
.theme-toggle:hover :global(.theme-toggle-icon) {
transform: rotate(15deg);
}
</style>