mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-23 10:46:43 +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,24 +1,19 @@
|
|||
import type {
|
||||
ThemeMode,
|
||||
ThemeVariant,
|
||||
EffectiveMode,
|
||||
ThemeStore,
|
||||
AppThemeConfig,
|
||||
HSLValue,
|
||||
ThemeMode,
|
||||
ThemeVariant,
|
||||
EffectiveMode,
|
||||
ThemeStore,
|
||||
AppThemeConfig,
|
||||
HSLValue,
|
||||
} from './types';
|
||||
import { THEME_VARIANTS, DEFAULT_MODE, DEFAULT_VARIANT, STORAGE_KEY_SUFFIX } from './constants';
|
||||
import {
|
||||
THEME_VARIANTS,
|
||||
DEFAULT_MODE,
|
||||
DEFAULT_VARIANT,
|
||||
STORAGE_KEY_SUFFIX,
|
||||
} from './constants';
|
||||
import {
|
||||
isBrowser,
|
||||
getSystemPreference,
|
||||
createSystemPreferenceListener,
|
||||
applyThemeToDocument,
|
||||
loadThemeFromStorage,
|
||||
saveThemeToStorage,
|
||||
isBrowser,
|
||||
getSystemPreference,
|
||||
createSystemPreferenceListener,
|
||||
applyThemeToDocument,
|
||||
loadThemeFromStorage,
|
||||
saveThemeToStorage,
|
||||
} from './utils';
|
||||
|
||||
/**
|
||||
|
|
@ -42,186 +37,186 @@ import {
|
|||
* ```
|
||||
*/
|
||||
export function createThemeStore(config: AppThemeConfig): ThemeStore {
|
||||
const {
|
||||
appId,
|
||||
defaultMode = DEFAULT_MODE,
|
||||
defaultVariant = DEFAULT_VARIANT,
|
||||
primaryColor,
|
||||
} = config;
|
||||
const {
|
||||
appId,
|
||||
defaultMode = DEFAULT_MODE,
|
||||
defaultVariant = DEFAULT_VARIANT,
|
||||
primaryColor,
|
||||
} = config;
|
||||
|
||||
const storageKey = `${appId}${STORAGE_KEY_SUFFIX}`;
|
||||
const storageKey = `${appId}${STORAGE_KEY_SUFFIX}`;
|
||||
|
||||
// Svelte 5 runes state
|
||||
let mode = $state<ThemeMode>(defaultMode);
|
||||
let variant = $state<ThemeVariant>(defaultVariant);
|
||||
let effectiveMode = $state<EffectiveMode>('light');
|
||||
// Svelte 5 runes state
|
||||
let mode = $state<ThemeMode>(defaultMode);
|
||||
let variant = $state<ThemeVariant>(defaultVariant);
|
||||
let effectiveMode = $state<EffectiveMode>('light');
|
||||
|
||||
// Derived state
|
||||
const isDark = $derived(effectiveMode === 'dark');
|
||||
// Derived state
|
||||
const isDark = $derived(effectiveMode === 'dark');
|
||||
|
||||
/**
|
||||
* Calculate effective mode from current mode and system preference
|
||||
*/
|
||||
function calculateEffectiveMode(currentMode: ThemeMode): EffectiveMode {
|
||||
if (currentMode === 'system') {
|
||||
return getSystemPreference();
|
||||
}
|
||||
return currentMode;
|
||||
}
|
||||
/**
|
||||
* Calculate effective mode from current mode and system preference
|
||||
*/
|
||||
function calculateEffectiveMode(currentMode: ThemeMode): EffectiveMode {
|
||||
if (currentMode === 'system') {
|
||||
return getSystemPreference();
|
||||
}
|
||||
return currentMode;
|
||||
}
|
||||
|
||||
/**
|
||||
* Apply current theme to document and save to storage
|
||||
*/
|
||||
function applyTheme(): void {
|
||||
const newEffectiveMode = calculateEffectiveMode(mode);
|
||||
effectiveMode = newEffectiveMode;
|
||||
/**
|
||||
* Apply current theme to document and save to storage
|
||||
*/
|
||||
function applyTheme(): void {
|
||||
const newEffectiveMode = calculateEffectiveMode(mode);
|
||||
effectiveMode = newEffectiveMode;
|
||||
|
||||
applyThemeToDocument(variant, newEffectiveMode, primaryColor);
|
||||
saveThemeToStorage(storageKey, mode, variant);
|
||||
}
|
||||
applyThemeToDocument(variant, newEffectiveMode, primaryColor);
|
||||
saveThemeToStorage(storageKey, mode, variant);
|
||||
}
|
||||
|
||||
/**
|
||||
* Set theme mode
|
||||
*/
|
||||
function setMode(newMode: ThemeMode): void {
|
||||
if (newMode === mode) return;
|
||||
mode = newMode;
|
||||
applyTheme();
|
||||
}
|
||||
/**
|
||||
* Set theme mode
|
||||
*/
|
||||
function setMode(newMode: ThemeMode): void {
|
||||
if (newMode === mode) return;
|
||||
mode = newMode;
|
||||
applyTheme();
|
||||
}
|
||||
|
||||
/**
|
||||
* Set theme variant
|
||||
*/
|
||||
function setVariant(newVariant: ThemeVariant): void {
|
||||
if (!THEME_VARIANTS.includes(newVariant)) {
|
||||
console.warn(`Invalid theme variant: ${newVariant}`);
|
||||
return;
|
||||
}
|
||||
if (newVariant === variant) return;
|
||||
variant = newVariant;
|
||||
applyTheme();
|
||||
}
|
||||
/**
|
||||
* Set theme variant
|
||||
*/
|
||||
function setVariant(newVariant: ThemeVariant): void {
|
||||
if (!THEME_VARIANTS.includes(newVariant)) {
|
||||
console.warn(`Invalid theme variant: ${newVariant}`);
|
||||
return;
|
||||
}
|
||||
if (newVariant === variant) return;
|
||||
variant = newVariant;
|
||||
applyTheme();
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle between light and dark mode
|
||||
* If currently on system, switches to opposite of effective mode
|
||||
*/
|
||||
function toggleMode(): void {
|
||||
if (mode === 'system') {
|
||||
// Switch to opposite of current effective mode
|
||||
setMode(effectiveMode === 'dark' ? 'light' : 'dark');
|
||||
} else {
|
||||
setMode(mode === 'dark' ? 'light' : 'dark');
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Toggle between light and dark mode
|
||||
* If currently on system, switches to opposite of effective mode
|
||||
*/
|
||||
function toggleMode(): void {
|
||||
if (mode === 'system') {
|
||||
// Switch to opposite of current effective mode
|
||||
setMode(effectiveMode === 'dark' ? 'light' : 'dark');
|
||||
} else {
|
||||
setMode(mode === 'dark' ? 'light' : 'dark');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Cycle through modes: light → dark → system → light
|
||||
*/
|
||||
function cycleMode(): void {
|
||||
const modes: ThemeMode[] = ['light', 'dark', 'system'];
|
||||
const currentIndex = modes.indexOf(mode);
|
||||
const nextIndex = (currentIndex + 1) % modes.length;
|
||||
setMode(modes[nextIndex]);
|
||||
}
|
||||
/**
|
||||
* Cycle through modes: light → dark → system → light
|
||||
*/
|
||||
function cycleMode(): void {
|
||||
const modes: ThemeMode[] = ['light', 'dark', 'system'];
|
||||
const currentIndex = modes.indexOf(mode);
|
||||
const nextIndex = (currentIndex + 1) % modes.length;
|
||||
setMode(modes[nextIndex]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize theme store
|
||||
* - Loads saved preferences from localStorage
|
||||
* - Sets up system preference listener
|
||||
* - Applies initial theme
|
||||
*
|
||||
* @returns Cleanup function to remove listeners
|
||||
*/
|
||||
function initialize(): () => void {
|
||||
if (!isBrowser()) {
|
||||
return () => {};
|
||||
}
|
||||
/**
|
||||
* Initialize theme store
|
||||
* - Loads saved preferences from localStorage
|
||||
* - Sets up system preference listener
|
||||
* - Applies initial theme
|
||||
*
|
||||
* @returns Cleanup function to remove listeners
|
||||
*/
|
||||
function initialize(): () => void {
|
||||
if (!isBrowser()) {
|
||||
return () => {};
|
||||
}
|
||||
|
||||
// Load saved preferences
|
||||
const saved = loadThemeFromStorage(storageKey);
|
||||
if (saved) {
|
||||
if (saved.mode && ['light', 'dark', 'system'].includes(saved.mode)) {
|
||||
mode = saved.mode as ThemeMode;
|
||||
}
|
||||
if (saved.variant && THEME_VARIANTS.includes(saved.variant as ThemeVariant)) {
|
||||
variant = saved.variant as ThemeVariant;
|
||||
}
|
||||
}
|
||||
// Load saved preferences
|
||||
const saved = loadThemeFromStorage(storageKey);
|
||||
if (saved) {
|
||||
if (saved.mode && ['light', 'dark', 'system'].includes(saved.mode)) {
|
||||
mode = saved.mode as ThemeMode;
|
||||
}
|
||||
if (saved.variant && THEME_VARIANTS.includes(saved.variant as ThemeVariant)) {
|
||||
variant = saved.variant as ThemeVariant;
|
||||
}
|
||||
}
|
||||
|
||||
// Apply initial theme
|
||||
applyTheme();
|
||||
// Apply initial theme
|
||||
applyTheme();
|
||||
|
||||
// Listen for system preference changes
|
||||
const cleanup = createSystemPreferenceListener((isDark) => {
|
||||
if (mode === 'system') {
|
||||
effectiveMode = isDark ? 'dark' : 'light';
|
||||
applyThemeToDocument(variant, effectiveMode, primaryColor);
|
||||
}
|
||||
});
|
||||
// Listen for system preference changes
|
||||
const cleanup = createSystemPreferenceListener((isDark) => {
|
||||
if (mode === 'system') {
|
||||
effectiveMode = isDark ? 'dark' : 'light';
|
||||
applyThemeToDocument(variant, effectiveMode, primaryColor);
|
||||
}
|
||||
});
|
||||
|
||||
return cleanup;
|
||||
}
|
||||
return cleanup;
|
||||
}
|
||||
|
||||
return {
|
||||
get mode() {
|
||||
return mode;
|
||||
},
|
||||
get variant() {
|
||||
return variant;
|
||||
},
|
||||
get effectiveMode() {
|
||||
return effectiveMode;
|
||||
},
|
||||
get isDark() {
|
||||
return isDark;
|
||||
},
|
||||
get variants() {
|
||||
return THEME_VARIANTS;
|
||||
},
|
||||
return {
|
||||
get mode() {
|
||||
return mode;
|
||||
},
|
||||
get variant() {
|
||||
return variant;
|
||||
},
|
||||
get effectiveMode() {
|
||||
return effectiveMode;
|
||||
},
|
||||
get isDark() {
|
||||
return isDark;
|
||||
},
|
||||
get variants() {
|
||||
return THEME_VARIANTS;
|
||||
},
|
||||
|
||||
setMode,
|
||||
setVariant,
|
||||
toggleMode,
|
||||
cycleMode,
|
||||
initialize,
|
||||
};
|
||||
setMode,
|
||||
setVariant,
|
||||
toggleMode,
|
||||
cycleMode,
|
||||
initialize,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Pre-defined app configurations for convenience
|
||||
*/
|
||||
export const APP_THEME_CONFIGS = {
|
||||
memoro: {
|
||||
appId: 'memoro',
|
||||
defaultVariant: 'lume' as ThemeVariant,
|
||||
primaryColor: {
|
||||
light: '47 95% 58%' as HSLValue, // Gold #f8d62b
|
||||
dark: '47 95% 58%' as HSLValue,
|
||||
},
|
||||
},
|
||||
manacore: {
|
||||
appId: 'manacore',
|
||||
defaultVariant: 'ocean' as ThemeVariant,
|
||||
primaryColor: {
|
||||
light: '239 84% 67%' as HSLValue, // Indigo #6366f1
|
||||
dark: '239 84% 67%' as HSLValue,
|
||||
},
|
||||
},
|
||||
manadeck: {
|
||||
appId: 'manadeck',
|
||||
defaultVariant: 'ocean' as ThemeVariant,
|
||||
primaryColor: {
|
||||
light: '239 84% 67%' as HSLValue, // Indigo #6366f1
|
||||
dark: '239 84% 67%' as HSLValue,
|
||||
},
|
||||
},
|
||||
maerchenzauber: {
|
||||
appId: 'maerchenzauber',
|
||||
defaultVariant: 'nature' as ThemeVariant,
|
||||
primaryColor: {
|
||||
light: '280 60% 55%' as HSLValue, // Purple (storytelling magic)
|
||||
dark: '280 60% 60%' as HSLValue,
|
||||
},
|
||||
},
|
||||
memoro: {
|
||||
appId: 'memoro',
|
||||
defaultVariant: 'lume' as ThemeVariant,
|
||||
primaryColor: {
|
||||
light: '47 95% 58%' as HSLValue, // Gold #f8d62b
|
||||
dark: '47 95% 58%' as HSLValue,
|
||||
},
|
||||
},
|
||||
manacore: {
|
||||
appId: 'manacore',
|
||||
defaultVariant: 'ocean' as ThemeVariant,
|
||||
primaryColor: {
|
||||
light: '239 84% 67%' as HSLValue, // Indigo #6366f1
|
||||
dark: '239 84% 67%' as HSLValue,
|
||||
},
|
||||
},
|
||||
manadeck: {
|
||||
appId: 'manadeck',
|
||||
defaultVariant: 'ocean' as ThemeVariant,
|
||||
primaryColor: {
|
||||
light: '239 84% 67%' as HSLValue, // Indigo #6366f1
|
||||
dark: '239 84% 67%' as HSLValue,
|
||||
},
|
||||
},
|
||||
maerchenzauber: {
|
||||
appId: 'maerchenzauber',
|
||||
defaultVariant: 'nature' as ThemeVariant,
|
||||
primaryColor: {
|
||||
light: '280 60% 55%' as HSLValue, // Purple (storytelling magic)
|
||||
dark: '280 60% 60%' as HSLValue,
|
||||
},
|
||||
},
|
||||
} as const;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue