mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-22 19:06:41 +02:00
feat: implement unified theme system across all web apps
SUMMARY: Create a unified theming architecture with two new shared packages (@manacore/shared-theme and @manacore/shared-theme-ui) that provides consistent theming across all 4 web applications while allowing app-specific primary color customization. NEW PACKAGES: @manacore/shared-theme: - Svelte 5 Runes-based theme store factory - 4 theme variants: Lume (Gold), Nature (Green), Stone (Blue Gray), Ocean (Blue) - 3 theme modes: Light, Dark, System (auto-detect) - HSL-based color system with 18 semantic tokens - localStorage persistence per app - System preference detection via matchMedia - Pre-defined configs for all apps (memoro, manacore, manadeck, maerchenzauber) @manacore/shared-theme-ui: - ThemeToggle: Light/dark mode toggle button - ThemeSelector: Visual theme variant selector with color dots - ThemeModeSelector: Segmented control for light/dark/system UPDATED PACKAGES: @manacore/shared-tailwind: - Converted from HEX to HSL-based CSS variables - Updated preset.js with hsl(var(--color-*)) syntax - themes.css now contains all 4 theme variants with light/dark modes APP MIGRATIONS: memoro/web: - Replaced 145 LOC theme store with 25 LOC shared implementation - Deleted local ThemeSelector.svelte and ThemeToggle.svelte - Primary color: Gold (47 95% 58%) manacore/web: - Replaced 80 LOC theme store with 25 LOC shared implementation - Deleted local ThemeToggle.svelte - Primary color: Indigo (239 84% 67%) manadeck/web: - Added new theme store using shared package - Primary color: Indigo (239 84% 67%) maerchenzauber/web: - Added new theme store using shared package - Primary color: Purple (280 60% 55%) All app layouts updated with theme.initialize() in onMount. BENEFITS: - ~225 LOC of app-specific code reduced to ~100 LOC total - Single source of truth for theme logic - Consistent theming experience across all apps - Easy to add new theme variants - App-specific primary colors preserved 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Till-JS
parent
ef70a1af0b
commit
96e0aceb93
31 changed files with 2993 additions and 1089 deletions
87
packages/shared-theme-ui/src/ThemeModeSelector.svelte
Normal file
87
packages/shared-theme-ui/src/ThemeModeSelector.svelte
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
<script lang="ts">
|
||||
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;
|
||||
}
|
||||
|
||||
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' },
|
||||
];
|
||||
</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}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.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: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:focus-visible {
|
||||
outline: 2px solid hsl(var(--color-ring));
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.label {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
125
packages/shared-theme-ui/src/ThemeSelector.svelte
Normal file
125
packages/shared-theme-ui/src/ThemeSelector.svelte
Normal file
|
|
@ -0,0 +1,125 @@
|
|||
<script lang="ts">
|
||||
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;
|
||||
}
|
||||
|
||||
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})`;
|
||||
}
|
||||
</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}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.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: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: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);
|
||||
}
|
||||
|
||||
.emoji {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Compact mode */
|
||||
.compact .variant-button {
|
||||
padding: 0.375rem;
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
.compact .color-dot {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
</style>
|
||||
74
packages/shared-theme-ui/src/ThemeToggle.svelte
Normal file
74
packages/shared-theme-ui/src/ThemeToggle.svelte
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
<script lang="ts">
|
||||
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;
|
||||
}
|
||||
|
||||
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'}
|
||||
<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: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>
|
||||
4
packages/shared-theme-ui/src/index.ts
Normal file
4
packages/shared-theme-ui/src/index.ts
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
// Theme UI Components
|
||||
export { default as ThemeToggle } from './ThemeToggle.svelte';
|
||||
export { default as ThemeSelector } from './ThemeSelector.svelte';
|
||||
export { default as ThemeModeSelector } from './ThemeModeSelector.svelte';
|
||||
Loading…
Add table
Add a link
Reference in a new issue