mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-17 07:39:39 +02:00
style: auto-format codebase with Prettier
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
parent
0241f5554c
commit
d36b321d9d
3952 changed files with 661498 additions and 739751 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,125 +1,122 @@
|
|||
<script lang="ts">
|
||||
import type { ThemeStore, ThemeVariant } from '@manacore/shared-theme';
|
||||
import { THEME_DEFINITIONS } from '@manacore/shared-theme';
|
||||
import type { ThemeStore, ThemeVariant } from '@manacore/shared-theme';
|
||||
import { THEME_DEFINITIONS } from '@manacore/shared-theme';
|
||||
|
||||
interface Props {
|
||||
/** Theme store instance */
|
||||
theme: ThemeStore;
|
||||
/** Show variant labels */
|
||||
showLabels?: boolean;
|
||||
/** Show emoji icons */
|
||||
showEmoji?: boolean;
|
||||
/** Compact mode (smaller buttons) */
|
||||
compact?: boolean;
|
||||
/** Additional CSS classes */
|
||||
class?: string;
|
||||
}
|
||||
interface Props {
|
||||
/** Theme store instance */
|
||||
theme: ThemeStore;
|
||||
/** Show variant labels */
|
||||
showLabels?: boolean;
|
||||
/** Show emoji icons */
|
||||
showEmoji?: boolean;
|
||||
/** Compact mode (smaller buttons) */
|
||||
compact?: boolean;
|
||||
/** Additional CSS classes */
|
||||
class?: string;
|
||||
}
|
||||
|
||||
let {
|
||||
theme,
|
||||
showLabels = true,
|
||||
showEmoji = true,
|
||||
compact = false,
|
||||
class: className = '',
|
||||
}: Props = $props();
|
||||
let {
|
||||
theme,
|
||||
showLabels = true,
|
||||
showEmoji = true,
|
||||
compact = false,
|
||||
class: className = '',
|
||||
}: Props = $props();
|
||||
|
||||
/**
|
||||
* Get the primary color for a variant based on current mode
|
||||
*/
|
||||
function getVariantColor(variant: ThemeVariant): string {
|
||||
const definition = THEME_DEFINITIONS[variant];
|
||||
const colors = theme.effectiveMode === 'dark' ? definition.dark : definition.light;
|
||||
return `hsl(${colors.primary})`;
|
||||
}
|
||||
/**
|
||||
* Get the primary color for a variant based on current mode
|
||||
*/
|
||||
function getVariantColor(variant: ThemeVariant): string {
|
||||
const definition = THEME_DEFINITIONS[variant];
|
||||
const colors = theme.effectiveMode === 'dark' ? definition.dark : definition.light;
|
||||
return `hsl(${colors.primary})`;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="theme-selector {className}" class:compact>
|
||||
{#each theme.variants as variant}
|
||||
{@const definition = THEME_DEFINITIONS[variant]}
|
||||
{@const isActive = theme.variant === variant}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => theme.setVariant(variant)}
|
||||
class="variant-button"
|
||||
class:active={isActive}
|
||||
aria-label="Select {definition.label} theme"
|
||||
aria-pressed={isActive}
|
||||
>
|
||||
<span
|
||||
class="color-dot"
|
||||
style:background-color={getVariantColor(variant)}
|
||||
></span>
|
||||
{#if showEmoji && !compact}
|
||||
<span class="emoji">{definition.emoji}</span>
|
||||
{/if}
|
||||
{#if showLabels && !compact}
|
||||
<span class="label">{definition.label}</span>
|
||||
{/if}
|
||||
</button>
|
||||
{/each}
|
||||
{#each theme.variants as variant}
|
||||
{@const definition = THEME_DEFINITIONS[variant]}
|
||||
{@const isActive = theme.variant === variant}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => theme.setVariant(variant)}
|
||||
class="variant-button"
|
||||
class:active={isActive}
|
||||
aria-label="Select {definition.label} theme"
|
||||
aria-pressed={isActive}
|
||||
>
|
||||
<span class="color-dot" style:background-color={getVariantColor(variant)}></span>
|
||||
{#if showEmoji && !compact}
|
||||
<span class="emoji">{definition.emoji}</span>
|
||||
{/if}
|
||||
{#if showLabels && !compact}
|
||||
<span class="label">{definition.label}</span>
|
||||
{/if}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.theme-selector {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.theme-selector {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.variant-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 0.5rem;
|
||||
background: transparent;
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
cursor: pointer;
|
||||
color: hsl(var(--color-foreground));
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.variant-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 0.5rem;
|
||||
background: transparent;
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
cursor: pointer;
|
||||
color: hsl(var(--color-foreground));
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.variant-button:hover {
|
||||
background-color: hsl(var(--color-surface-hover));
|
||||
border-color: hsl(var(--color-border-strong));
|
||||
}
|
||||
.variant-button:hover {
|
||||
background-color: hsl(var(--color-surface-hover));
|
||||
border-color: hsl(var(--color-border-strong));
|
||||
}
|
||||
|
||||
.variant-button.active {
|
||||
background-color: hsl(var(--color-surface));
|
||||
border-color: hsl(var(--color-primary));
|
||||
box-shadow: 0 0 0 1px hsl(var(--color-primary));
|
||||
}
|
||||
.variant-button.active {
|
||||
background-color: hsl(var(--color-surface));
|
||||
border-color: hsl(var(--color-primary));
|
||||
box-shadow: 0 0 0 1px hsl(var(--color-primary));
|
||||
}
|
||||
|
||||
.variant-button:focus-visible {
|
||||
outline: 2px solid hsl(var(--color-ring));
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.variant-button:focus-visible {
|
||||
outline: 2px solid hsl(var(--color-ring));
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.color-dot {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.color-dot {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.emoji {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.emoji {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-weight: 500;
|
||||
}
|
||||
.label {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Compact mode */
|
||||
.compact .variant-button {
|
||||
padding: 0.375rem;
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
/* Compact mode */
|
||||
.compact .variant-button {
|
||||
padding: 0.375rem;
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
.compact .color-dot {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
.compact .color-dot {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue