till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-21 11:06:43 +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

140
packages/shared-theme-ui/src/ThemeModeSelector.svelte
View file

@ -1,87 +1,87 @@
<script lang="ts">
import type { ThemeStore, ThemeMode } from '@manacore/shared-theme';
import { Icon } from '@manacore/shared-icons';
import type { ThemeStore, ThemeMode } from '@manacore/shared-theme';
import { Icon } from '@manacore/shared-icons';
interface Props {
/** Theme store instance */
theme: ThemeStore;
/** Additional CSS classes */
class?: string;
}
interface Props {
/** Theme store instance */
theme: ThemeStore;
/** Additional CSS classes */
class?: string;
}
let { theme, class: className = '' }: Props = $props();
let { theme, class: className = '' }: Props = $props();
const modes: { mode: ThemeMode; icon: string; label: string }[] = [
{ mode: 'light', icon: 'sun', label: 'Light' },
{ mode: 'dark', icon: 'moon', label: 'Dark' },
{ mode: 'system', icon: 'monitor', label: 'System' },
];
const modes: { mode: ThemeMode; icon: string; label: string }[] = [
{ mode: 'light', icon: 'sun', label: 'Light' },
{ mode: 'dark', icon: 'moon', label: 'Dark' },
{ mode: 'system', icon: 'monitor', label: 'System' },
];
</script>
<div class="mode-selector {className}" role="radiogroup" aria-label="Theme mode">
{#each modes as { mode, icon, label }}
{@const isActive = theme.mode === mode}
<button
type="button"
onclick={() => theme.setMode(mode)}
class="mode-button"
class:active={isActive}
role="radio"
aria-checked={isActive}
aria-label="{label} mode"
>
<Icon name={icon} size={16} />
<span class="label">{label}</span>
</button>
{/each}
{#each modes as { mode, icon, label }}
{@const isActive = theme.mode === mode}
<button
type="button"
onclick={() => theme.setMode(mode)}
class="mode-button"
class:active={isActive}
role="radio"
aria-checked={isActive}
aria-label="{label} mode"
>
<Icon name={icon} size={16} />
<span class="label">{label}</span>
</button>
{/each}
</div>
<style>
.mode-selector {
display: inline-flex;
padding: 0.25rem;
gap: 0.25rem;
background-color: hsl(var(--color-muted));
border-radius: 0.5rem;
}
.mode-selector {
display: inline-flex;
padding: 0.25rem;
gap: 0.25rem;
background-color: hsl(var(--color-muted));
border-radius: 0.5rem;
}
.mode-button {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.375rem 0.75rem;
border-radius: 0.375rem;
background: transparent;
border: none;
cursor: pointer;
color: hsl(var(--color-muted-foreground));
font-size: 0.875rem;
font-weight: 500;
transition: all 0.2s ease;
}
.mode-button {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.375rem 0.75rem;
border-radius: 0.375rem;
background: transparent;
border: none;
cursor: pointer;
color: hsl(var(--color-muted-foreground));
font-size: 0.875rem;
font-weight: 500;
transition: all 0.2s ease;
}
.mode-button:hover:not(.active) {
color: hsl(var(--color-foreground));
}
.mode-button:hover:not(.active) {
color: hsl(var(--color-foreground));
}
.mode-button.active {
background-color: hsl(var(--color-surface));
color: hsl(var(--color-foreground));
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.mode-button.active {
background-color: hsl(var(--color-surface));
color: hsl(var(--color-foreground));
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.mode-button:focus-visible {
outline: 2px solid hsl(var(--color-ring));
outline-offset: 2px;
}
.mode-button:focus-visible {
outline: 2px solid hsl(var(--color-ring));
outline-offset: 2px;
}
.label {
display: none;
}
.label {
display: none;
}
@media (min-width: 640px) {
.label {
display: inline;
}
}
@media (min-width: 640px) {
.label {
display: inline;
}
}
</style>