mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-18 05:49:41 +02:00
refactor(theme): remove custom theme editor and community themes
Remove unused custom theme functionality: - Delete custom-themes-store.svelte.ts from shared-theme - Remove ThemeEditor, ColorPicker, ThemeLivePreview components - Remove CommunityThemeGallery, ThemeCommunityCard components - Remove ThemeEditorPage, CommunityThemesPage - Simplify ThemePage to show only built-in themes - Remove editor and community routes from contacts app - Update THEMING.md documentation The built-in theme variants (default, ocean, forest, sunset, etc.) provide sufficient customization. Custom theme creation was never fully implemented and added unnecessary complexity. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Till-JS
parent
db701fd648
commit
12ba2cf824
17 changed files with 44 additions and 3395 deletions
|
|
@ -1,266 +0,0 @@
|
|||
<script lang="ts">
|
||||
import type { CommunityTheme, CommunityThemeQuery } from '@manacore/shared-theme';
|
||||
import {
|
||||
MagnifyingGlass,
|
||||
SortAscending,
|
||||
Funnel,
|
||||
Star,
|
||||
Fire,
|
||||
Clock,
|
||||
DownloadSimple,
|
||||
CaretLeft,
|
||||
CaretRight,
|
||||
} from '@manacore/shared-icons';
|
||||
import ThemeCommunityCard from './ThemeCommunityCard.svelte';
|
||||
|
||||
interface Props {
|
||||
/** List of community themes */
|
||||
themes: CommunityTheme[];
|
||||
/** Pagination info */
|
||||
pagination?: {
|
||||
page: number;
|
||||
totalPages: number;
|
||||
total: number;
|
||||
};
|
||||
/** Current query */
|
||||
currentQuery?: CommunityThemeQuery;
|
||||
/** Loading state */
|
||||
loading?: boolean;
|
||||
/** Current user's effective mode */
|
||||
effectiveMode?: 'light' | 'dark';
|
||||
/** Callback when query changes */
|
||||
onQueryChange?: (query: CommunityThemeQuery) => void;
|
||||
/** Callback when theme is selected */
|
||||
onSelectTheme?: (theme: CommunityTheme) => void;
|
||||
/** Callback when download is clicked */
|
||||
onDownloadTheme?: (theme: CommunityTheme) => void;
|
||||
/** Callback when favorite is toggled */
|
||||
onToggleFavorite?: (theme: CommunityTheme) => void;
|
||||
/** Callback when theme is rated */
|
||||
onRateTheme?: (theme: CommunityTheme, rating: number) => void;
|
||||
}
|
||||
|
||||
let {
|
||||
themes,
|
||||
pagination = { page: 1, totalPages: 1, total: 0 },
|
||||
currentQuery = {},
|
||||
loading = false,
|
||||
effectiveMode = 'light',
|
||||
onQueryChange,
|
||||
onSelectTheme,
|
||||
onDownloadTheme,
|
||||
onToggleFavorite,
|
||||
onRateTheme,
|
||||
}: Props = $props();
|
||||
|
||||
// Local state for search input
|
||||
let searchInput = $state(currentQuery.search ?? '');
|
||||
let searchTimeout: ReturnType<typeof setTimeout>;
|
||||
|
||||
// Sort options
|
||||
const sortOptions: { value: CommunityThemeQuery['sort']; label: string; icon: typeof Star }[] = [
|
||||
{ value: 'popular', label: 'Beliebt', icon: Fire },
|
||||
{ value: 'recent', label: 'Neueste', icon: Clock },
|
||||
{ value: 'rating', label: 'Bestbewertet', icon: Star },
|
||||
{ value: 'downloads', label: 'Downloads', icon: DownloadSimple },
|
||||
];
|
||||
|
||||
// Common tags for filtering
|
||||
const commonTags = ['minimal', 'dark', 'colorful', 'professional', 'nature', 'warm', 'cool'];
|
||||
|
||||
// Handle search with debounce
|
||||
function handleSearchInput(e: Event) {
|
||||
const target = e.target as HTMLInputElement;
|
||||
searchInput = target.value;
|
||||
|
||||
clearTimeout(searchTimeout);
|
||||
searchTimeout = setTimeout(() => {
|
||||
onQueryChange?.({ ...currentQuery, search: searchInput || undefined, page: 1 });
|
||||
}, 300);
|
||||
}
|
||||
|
||||
function handleSortChange(sort: CommunityThemeQuery['sort']) {
|
||||
onQueryChange?.({ ...currentQuery, sort, page: 1 });
|
||||
}
|
||||
|
||||
function handleTagToggle(tag: string) {
|
||||
const currentTags = currentQuery.tags ?? [];
|
||||
const newTags = currentTags.includes(tag)
|
||||
? currentTags.filter((t) => t !== tag)
|
||||
: [...currentTags, tag];
|
||||
|
||||
onQueryChange?.({ ...currentQuery, tags: newTags.length ? newTags : undefined, page: 1 });
|
||||
}
|
||||
|
||||
function handleFeaturedToggle() {
|
||||
onQueryChange?.({
|
||||
...currentQuery,
|
||||
featuredOnly: !currentQuery.featuredOnly,
|
||||
page: 1,
|
||||
});
|
||||
}
|
||||
|
||||
function handlePageChange(page: number) {
|
||||
if (page < 1 || page > pagination.totalPages) return;
|
||||
onQueryChange?.({ ...currentQuery, page });
|
||||
}
|
||||
|
||||
function clearFilters() {
|
||||
searchInput = '';
|
||||
onQueryChange?.({ page: 1, sort: 'popular' });
|
||||
}
|
||||
|
||||
// Check if any filters are active
|
||||
let hasActiveFilters = $derived(
|
||||
!!currentQuery.search || !!currentQuery.tags?.length || !!currentQuery.featuredOnly
|
||||
);
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<!-- Search & Filters -->
|
||||
<div class="flex flex-wrap gap-3 items-center">
|
||||
<!-- Search -->
|
||||
<div class="flex-1 min-w-[200px] relative">
|
||||
<MagnifyingGlass
|
||||
size={18}
|
||||
class="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none"
|
||||
/>
|
||||
<input
|
||||
type="search"
|
||||
class="w-full py-2.5 px-3 pl-10 text-sm bg-input border border-border rounded-lg text-foreground transition-all focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 placeholder:text-muted-foreground"
|
||||
placeholder="Themes suchen..."
|
||||
value={searchInput}
|
||||
oninput={handleSearchInput}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Sort -->
|
||||
<div class="flex items-center gap-2">
|
||||
<SortAscending size={16} class="text-muted-foreground" />
|
||||
<select
|
||||
class="py-2 px-3 text-sm bg-input border border-border rounded-lg text-foreground cursor-pointer focus:outline-none focus:border-primary"
|
||||
value={currentQuery.sort ?? 'popular'}
|
||||
onchange={(e) =>
|
||||
handleSortChange((e.target as HTMLSelectElement).value as CommunityThemeQuery['sort'])}
|
||||
>
|
||||
{#each sortOptions as option}
|
||||
<option value={option.value}>{option.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Featured Toggle -->
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center gap-1.5 py-2 px-3 text-sm font-medium border rounded-lg cursor-pointer transition-all
|
||||
{currentQuery.featuredOnly
|
||||
? 'bg-primary/10 border-primary text-primary'
|
||||
: 'bg-muted border-border text-foreground hover:bg-muted/80'}"
|
||||
onclick={handleFeaturedToggle}
|
||||
>
|
||||
<Star size={16} weight={currentQuery.featuredOnly ? 'fill' : 'regular'} />
|
||||
Featured
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Tag Filters -->
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<Funnel size={14} class="text-muted-foreground" />
|
||||
{#each commonTags as tag}
|
||||
<button
|
||||
type="button"
|
||||
class="px-2.5 py-1.5 text-xs font-medium rounded-full cursor-pointer transition-all
|
||||
{currentQuery.tags?.includes(tag)
|
||||
? 'bg-primary/10 border border-primary/30 text-primary'
|
||||
: 'bg-muted/50 border border-transparent text-muted-foreground hover:bg-muted hover:text-foreground'}"
|
||||
onclick={() => handleTagToggle(tag)}
|
||||
>
|
||||
{tag}
|
||||
</button>
|
||||
{/each}
|
||||
|
||||
{#if hasActiveFilters}
|
||||
<button
|
||||
type="button"
|
||||
class="px-2.5 py-1.5 text-xs font-medium bg-transparent border border-dashed border-border rounded-full text-muted-foreground cursor-pointer transition-all hover:border-primary hover:text-primary"
|
||||
onclick={clearFilters}
|
||||
>
|
||||
Filter löschen
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Results Info -->
|
||||
<div class="py-2">
|
||||
{#if loading}
|
||||
<span class="text-sm text-muted-foreground">Lade...</span>
|
||||
{:else}
|
||||
<span class="text-sm text-muted-foreground">{pagination.total} Themes gefunden</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Theme Grid -->
|
||||
<div
|
||||
class="grid gap-4 transition-opacity duration-200
|
||||
{loading ? 'opacity-60 pointer-events-none' : ''}
|
||||
grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
|
||||
>
|
||||
{#if themes.length === 0 && !loading}
|
||||
<div class="col-span-full text-center py-12">
|
||||
<p class="text-lg font-semibold text-foreground mb-2">Keine Themes gefunden</p>
|
||||
<p class="text-sm text-muted-foreground mb-4">Versuche andere Suchbegriffe oder Filter.</p>
|
||||
{#if hasActiveFilters}
|
||||
<button
|
||||
type="button"
|
||||
class="py-2 px-4 text-sm font-medium bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors"
|
||||
onclick={clearFilters}
|
||||
>
|
||||
Filter zurücksetzen
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
{#each themes as theme (theme.id)}
|
||||
<ThemeCommunityCard
|
||||
{theme}
|
||||
{effectiveMode}
|
||||
onSelect={onSelectTheme}
|
||||
onDownload={onDownloadTheme}
|
||||
{onToggleFavorite}
|
||||
onRate={onRateTheme}
|
||||
/>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
{#if pagination.totalPages > 1}
|
||||
<div class="flex justify-center items-center gap-4 pt-4">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center w-9 h-9 bg-muted border border-border rounded-lg text-foreground transition-all hover:bg-muted/80 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
disabled={pagination.page <= 1}
|
||||
onclick={() => handlePageChange(pagination.page - 1)}
|
||||
aria-label="Vorherige Seite"
|
||||
>
|
||||
<CaretLeft size={18} />
|
||||
</button>
|
||||
|
||||
<div class="flex items-center gap-1 text-sm">
|
||||
<span class="font-semibold text-foreground">{pagination.page}</span>
|
||||
<span class="text-muted-foreground">/</span>
|
||||
<span class="text-muted-foreground">{pagination.totalPages}</span>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center w-9 h-9 bg-muted border border-border rounded-lg text-foreground transition-all hover:bg-muted/80 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
disabled={pagination.page >= pagination.totalPages}
|
||||
onclick={() => handlePageChange(pagination.page + 1)}
|
||||
aria-label="Nächste Seite"
|
||||
>
|
||||
<CaretRight size={18} />
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
@ -1,197 +0,0 @@
|
|||
<script lang="ts">
|
||||
import type { CommunityTheme, ThemeColors } from '@manacore/shared-theme';
|
||||
import { Heart, DownloadSimple, Star, Crown } from '@manacore/shared-icons';
|
||||
|
||||
interface Props {
|
||||
/** The community theme to display */
|
||||
theme: CommunityTheme;
|
||||
/** Current user's effective mode */
|
||||
effectiveMode?: 'light' | 'dark';
|
||||
/** Callback when theme is selected */
|
||||
onSelect?: (theme: CommunityTheme) => void;
|
||||
/** Callback when download is clicked */
|
||||
onDownload?: (theme: CommunityTheme) => void;
|
||||
/** Callback when favorite is toggled */
|
||||
onToggleFavorite?: (theme: CommunityTheme) => void;
|
||||
/** Callback when theme is rated */
|
||||
onRate?: (theme: CommunityTheme, rating: number) => void;
|
||||
/** Show download button */
|
||||
showDownload?: boolean;
|
||||
/** Show favorite button */
|
||||
showFavorite?: boolean;
|
||||
}
|
||||
|
||||
let {
|
||||
theme,
|
||||
effectiveMode = 'light',
|
||||
onSelect,
|
||||
onDownload,
|
||||
onToggleFavorite,
|
||||
onRate,
|
||||
showDownload = true,
|
||||
showFavorite = true,
|
||||
}: Props = $props();
|
||||
|
||||
// Get preview colors based on effective mode
|
||||
let previewColors = $derived(
|
||||
effectiveMode === 'dark' ? theme.darkColors : theme.lightColors
|
||||
) as ThemeColors;
|
||||
|
||||
// Format download count
|
||||
function formatCount(count: number): string {
|
||||
if (count >= 1000000) {
|
||||
return `${(count / 1000000).toFixed(1)}M`;
|
||||
}
|
||||
if (count >= 1000) {
|
||||
return `${(count / 1000).toFixed(1)}k`;
|
||||
}
|
||||
return String(count);
|
||||
}
|
||||
|
||||
let hoverRating = $state<number | null>(null);
|
||||
|
||||
function handleStarClick(rating: number) {
|
||||
onRate?.(theme, rating);
|
||||
}
|
||||
|
||||
function handleStarHover(rating: number | null) {
|
||||
hoverRating = rating;
|
||||
}
|
||||
</script>
|
||||
|
||||
<article
|
||||
class="bg-surface border border-border rounded-xl overflow-hidden cursor-pointer transition-all hover:border-border-strong hover:shadow-md hover:-translate-y-0.5 focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2
|
||||
{theme.isFeatured ? 'border-primary/30 bg-gradient-to-b from-primary/5 to-surface' : ''}"
|
||||
onclick={() => onSelect?.(theme)}
|
||||
onkeypress={(e) => e.key === 'Enter' && onSelect?.(theme)}
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<!-- Color Preview -->
|
||||
<div class="flex h-12 relative">
|
||||
<div class="flex-1" style="background-color: hsl({previewColors.primary})"></div>
|
||||
<div class="flex-1" style="background-color: hsl({previewColors.background})"></div>
|
||||
<div class="flex-1" style="background-color: hsl({previewColors.surface})"></div>
|
||||
<div class="flex-1" style="background-color: hsl({previewColors.foreground})"></div>
|
||||
<div class="flex-1" style="background-color: hsl({previewColors.success})"></div>
|
||||
<div class="flex-1" style="background-color: hsl({previewColors.error})"></div>
|
||||
|
||||
{#if theme.isFeatured}
|
||||
<div
|
||||
class="absolute top-2 right-2 flex items-center gap-1 px-2 py-1 text-[10px] font-semibold bg-primary text-primary-foreground rounded shadow-md"
|
||||
>
|
||||
<Crown size={12} weight="fill" />
|
||||
Featured
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Card Content -->
|
||||
<div class="p-4 flex flex-col gap-3">
|
||||
<div class="flex items-start gap-3">
|
||||
<span class="text-2xl leading-none">{theme.emoji}</span>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 class="text-base font-semibold text-foreground truncate m-0">{theme.name}</h3>
|
||||
{#if theme.authorName}
|
||||
<span class="text-xs text-muted-foreground">von {theme.authorName}</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if theme.description}
|
||||
<p class="text-sm text-muted-foreground line-clamp-2 m-0">{theme.description}</p>
|
||||
{/if}
|
||||
|
||||
<!-- Tags -->
|
||||
{#if theme.tags.length > 0}
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
{#each theme.tags.slice(0, 3) as tag}
|
||||
<span class="px-2 py-1 text-[10px] font-medium bg-muted text-muted-foreground rounded"
|
||||
>{tag}</span
|
||||
>
|
||||
{/each}
|
||||
{#if theme.tags.length > 3}
|
||||
<span class="px-2 py-1 text-[10px] font-medium bg-primary/10 text-primary rounded"
|
||||
>+{theme.tags.length - 3}</span
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Stats -->
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex items-center gap-1.5 text-xs text-muted-foreground">
|
||||
<DownloadSimple size={14} />
|
||||
<span>{formatCount(theme.downloadCount)}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-0.5" role="group" aria-label="Bewertung">
|
||||
{#each [1, 2, 3, 4, 5] as star}
|
||||
<button
|
||||
type="button"
|
||||
class="bg-transparent border-none p-0 cursor-pointer transition-transform hover:scale-110
|
||||
{star <= (hoverRating ?? theme.userRating ?? 0) ? 'text-yellow-500' : ''}
|
||||
{!hoverRating && !theme.userRating && star <= Math.round(theme.averageRating)
|
||||
? 'text-yellow-500/60'
|
||||
: ''}
|
||||
{star > (hoverRating ?? theme.userRating ?? Math.round(theme.averageRating))
|
||||
? 'text-muted-foreground/40'
|
||||
: ''}"
|
||||
onclick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleStarClick(star);
|
||||
}}
|
||||
onmouseenter={() => handleStarHover(star)}
|
||||
onmouseleave={() => handleStarHover(null)}
|
||||
aria-label={`${star} Stern${star > 1 ? 'e' : ''}`}
|
||||
>
|
||||
<Star
|
||||
size={14}
|
||||
weight={star <= (hoverRating ?? theme.userRating ?? Math.round(theme.averageRating))
|
||||
? 'fill'
|
||||
: 'regular'}
|
||||
/>
|
||||
</button>
|
||||
{/each}
|
||||
<span class="ml-1 text-[10px] text-muted-foreground">({theme.ratingCount})</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex gap-2 mt-1">
|
||||
{#if showDownload}
|
||||
<button
|
||||
type="button"
|
||||
class="flex-1 flex items-center justify-center gap-1.5 py-2 px-3.5 text-[13px] font-medium rounded-lg transition-colors
|
||||
{theme.isDownloaded
|
||||
? 'bg-success/10 border border-success/30 text-success'
|
||||
: 'bg-primary border border-primary text-primary-foreground hover:bg-primary/90'}"
|
||||
onclick={(e) => {
|
||||
e.stopPropagation();
|
||||
onDownload?.(theme);
|
||||
}}
|
||||
>
|
||||
<DownloadSimple size={16} />
|
||||
{theme.isDownloaded ? 'Installiert' : 'Installieren'}
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
{#if showFavorite}
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center p-2 rounded-lg border transition-colors flex-shrink-0
|
||||
{theme.isFavorited
|
||||
? 'text-red-500 bg-red-500/10 border-red-500/30'
|
||||
: 'bg-muted border-border text-foreground hover:bg-muted/80'}"
|
||||
onclick={(e) => {
|
||||
e.stopPropagation();
|
||||
onToggleFavorite?.(theme);
|
||||
}}
|
||||
aria-label={theme.isFavorited ? 'Aus Favoriten entfernen' : 'Zu Favoriten hinzufügen'}
|
||||
>
|
||||
<Heart size={18} weight={theme.isFavorited ? 'fill' : 'regular'} />
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
|
@ -1,349 +0,0 @@
|
|||
<script lang="ts">
|
||||
import type { HSLValue } from '@manacore/shared-theme';
|
||||
|
||||
interface Props {
|
||||
/** Current HSL value (format: "H S% L%") */
|
||||
value: HSLValue;
|
||||
/** Callback when color changes */
|
||||
onChange: (value: HSLValue) => void;
|
||||
/** Label for the color picker */
|
||||
label?: string;
|
||||
/** Show hex input field */
|
||||
showHexInput?: boolean;
|
||||
/** Compact mode (smaller size) */
|
||||
compact?: boolean;
|
||||
}
|
||||
|
||||
let { value, onChange, label, showHexInput = true, compact = false }: Props = $props();
|
||||
|
||||
// Parse HSL value to components
|
||||
function parseHSL(hsl: HSLValue): { h: number; s: number; l: number } {
|
||||
const match = hsl.match(/^(\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)%?\s+(\d+(?:\.\d+)?)%?$/);
|
||||
if (match) {
|
||||
return {
|
||||
h: parseFloat(match[1]),
|
||||
s: parseFloat(match[2]),
|
||||
l: parseFloat(match[3]),
|
||||
};
|
||||
}
|
||||
return { h: 0, s: 50, l: 50 };
|
||||
}
|
||||
|
||||
// Convert HSL to hex
|
||||
function hslToHex(h: number, s: number, l: number): string {
|
||||
s /= 100;
|
||||
l /= 100;
|
||||
const a = s * Math.min(l, 1 - l);
|
||||
const f = (n: number) => {
|
||||
const k = (n + h / 30) % 12;
|
||||
const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
|
||||
return Math.round(255 * color)
|
||||
.toString(16)
|
||||
.padStart(2, '0');
|
||||
};
|
||||
return `#${f(0)}${f(8)}${f(4)}`;
|
||||
}
|
||||
|
||||
// Convert hex to HSL
|
||||
function hexToHSL(hex: string): { h: number; s: number; l: number } {
|
||||
// Remove # if present
|
||||
hex = hex.replace(/^#/, '');
|
||||
|
||||
// Parse hex to RGB
|
||||
const r = parseInt(hex.substring(0, 2), 16) / 255;
|
||||
const g = parseInt(hex.substring(2, 4), 16) / 255;
|
||||
const b = parseInt(hex.substring(4, 6), 16) / 255;
|
||||
|
||||
const max = Math.max(r, g, b);
|
||||
const min = Math.min(r, g, b);
|
||||
let h = 0;
|
||||
let s = 0;
|
||||
const l = (max + min) / 2;
|
||||
|
||||
if (max !== min) {
|
||||
const d = max - min;
|
||||
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
|
||||
|
||||
switch (max) {
|
||||
case r:
|
||||
h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
|
||||
break;
|
||||
case g:
|
||||
h = ((b - r) / d + 2) / 6;
|
||||
break;
|
||||
case b:
|
||||
h = ((r - g) / d + 4) / 6;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
h: Math.round(h * 360),
|
||||
s: Math.round(s * 100),
|
||||
l: Math.round(l * 100),
|
||||
};
|
||||
}
|
||||
|
||||
// Current color values
|
||||
let hsl = $derived(parseHSL(value));
|
||||
let hex = $derived(hslToHex(hsl.h, hsl.s, hsl.l));
|
||||
let hexInput = $state('');
|
||||
|
||||
// Keep hex input in sync
|
||||
$effect(() => {
|
||||
hexInput = hex;
|
||||
});
|
||||
|
||||
function updateColor(h: number, s: number, l: number) {
|
||||
const newValue = `${h} ${s}% ${l}%` as HSLValue;
|
||||
onChange(newValue);
|
||||
}
|
||||
|
||||
function handleHueChange(e: Event) {
|
||||
const target = e.target as HTMLInputElement;
|
||||
updateColor(parseInt(target.value), hsl.s, hsl.l);
|
||||
}
|
||||
|
||||
function handleSaturationChange(e: Event) {
|
||||
const target = e.target as HTMLInputElement;
|
||||
updateColor(hsl.h, parseInt(target.value), hsl.l);
|
||||
}
|
||||
|
||||
function handleLightnessChange(e: Event) {
|
||||
const target = e.target as HTMLInputElement;
|
||||
updateColor(hsl.h, hsl.s, parseInt(target.value));
|
||||
}
|
||||
|
||||
function handleHexChange(e: Event) {
|
||||
const target = e.target as HTMLInputElement;
|
||||
const newHex = target.value;
|
||||
hexInput = newHex;
|
||||
|
||||
// Only update if valid hex
|
||||
if (/^#?[0-9A-Fa-f]{6}$/.test(newHex)) {
|
||||
const newHSL = hexToHSL(newHex);
|
||||
updateColor(newHSL.h, newHSL.s, newHSL.l);
|
||||
}
|
||||
}
|
||||
|
||||
// Gradient backgrounds for sliders
|
||||
const hueGradient = `linear-gradient(to right,
|
||||
hsl(0, 100%, 50%),
|
||||
hsl(60, 100%, 50%),
|
||||
hsl(120, 100%, 50%),
|
||||
hsl(180, 100%, 50%),
|
||||
hsl(240, 100%, 50%),
|
||||
hsl(300, 100%, 50%),
|
||||
hsl(360, 100%, 50%)
|
||||
)`;
|
||||
|
||||
let saturationGradient = $derived(
|
||||
`linear-gradient(to right, hsl(${hsl.h}, 0%, ${hsl.l}%), hsl(${hsl.h}, 100%, ${hsl.l}%))`
|
||||
);
|
||||
|
||||
let lightnessGradient = $derived(
|
||||
`linear-gradient(to right, hsl(${hsl.h}, ${hsl.s}%, 0%), hsl(${hsl.h}, ${hsl.s}%, 50%), hsl(${hsl.h}, ${hsl.s}%, 100%))`
|
||||
);
|
||||
</script>
|
||||
|
||||
<div class="color-picker" class:compact>
|
||||
{#if label}
|
||||
<label class="label">{label}</label>
|
||||
{/if}
|
||||
|
||||
<div class="color-display">
|
||||
<!-- Color preview swatch -->
|
||||
<div class="swatch" style="background-color: hsl({hsl.h}, {hsl.s}%, {hsl.l}%)"></div>
|
||||
|
||||
{#if showHexInput}
|
||||
<input
|
||||
type="text"
|
||||
class="hex-input"
|
||||
value={hexInput}
|
||||
oninput={handleHexChange}
|
||||
placeholder="#000000"
|
||||
maxlength="7"
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="sliders">
|
||||
<!-- Hue slider -->
|
||||
<div class="slider-group">
|
||||
<span class="slider-label">H</span>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="360"
|
||||
value={hsl.h}
|
||||
oninput={handleHueChange}
|
||||
class="slider hue-slider"
|
||||
style="--slider-bg: {hueGradient}"
|
||||
/>
|
||||
<span class="slider-value">{hsl.h}</span>
|
||||
</div>
|
||||
|
||||
<!-- Saturation slider -->
|
||||
<div class="slider-group">
|
||||
<span class="slider-label">S</span>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="100"
|
||||
value={hsl.s}
|
||||
oninput={handleSaturationChange}
|
||||
class="slider"
|
||||
style="--slider-bg: {saturationGradient}"
|
||||
/>
|
||||
<span class="slider-value">{hsl.s}%</span>
|
||||
</div>
|
||||
|
||||
<!-- Lightness slider -->
|
||||
<div class="slider-group">
|
||||
<span class="slider-label">L</span>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="100"
|
||||
value={hsl.l}
|
||||
oninput={handleLightnessChange}
|
||||
class="slider"
|
||||
style="--slider-bg: {lightnessGradient}"
|
||||
/>
|
||||
<span class="slider-value">{hsl.l}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.color-picker {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.color-picker.compact {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: hsl(var(--foreground));
|
||||
}
|
||||
|
||||
.color-display {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.swatch {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border-radius: 0.5rem;
|
||||
border: 2px solid hsl(var(--border));
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.compact .swatch {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.hex-input {
|
||||
flex: 1;
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
font-family: ui-monospace, monospace;
|
||||
background: hsl(var(--input));
|
||||
border: 1px solid hsl(var(--border));
|
||||
border-radius: 0.375rem;
|
||||
color: hsl(var(--foreground));
|
||||
max-width: 100px;
|
||||
}
|
||||
|
||||
.hex-input:focus {
|
||||
outline: none;
|
||||
border-color: hsl(var(--primary));
|
||||
box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2);
|
||||
}
|
||||
|
||||
.sliders {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.slider-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.slider-label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: hsl(var(--muted-foreground));
|
||||
width: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.slider {
|
||||
flex: 1;
|
||||
height: 0.5rem;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background: var(--slider-bg);
|
||||
border-radius: 0.25rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
border: 2px solid hsl(var(--border-strong));
|
||||
cursor: pointer;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.slider::-moz-range-thumb {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
border: 2px solid hsl(var(--border-strong));
|
||||
cursor: pointer;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.slider-value {
|
||||
font-size: 0.75rem;
|
||||
font-family: ui-monospace, monospace;
|
||||
color: hsl(var(--muted-foreground));
|
||||
width: 2.5rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.compact .slider-group {
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
.compact .slider {
|
||||
height: 0.375rem;
|
||||
}
|
||||
|
||||
.compact .slider::-webkit-slider-thumb {
|
||||
width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
}
|
||||
|
||||
.compact .slider::-moz-range-thumb {
|
||||
width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,542 +0,0 @@
|
|||
<script lang="ts">
|
||||
import type {
|
||||
ThemeColors,
|
||||
ThemeVariant,
|
||||
EffectiveMode,
|
||||
CreateCustomThemeInput,
|
||||
HSLValue,
|
||||
} from '@manacore/shared-theme';
|
||||
import {
|
||||
THEME_DEFINITIONS,
|
||||
THEME_VARIANTS,
|
||||
MAIN_THEME_COLORS,
|
||||
EXTENDED_THEME_COLORS,
|
||||
THEME_COLOR_LABELS,
|
||||
} from '@manacore/shared-theme';
|
||||
import {
|
||||
Sun,
|
||||
Moon,
|
||||
CaretDown,
|
||||
CaretUp,
|
||||
FloppyDisk,
|
||||
ArrowCounterClockwise,
|
||||
} from '@manacore/shared-icons';
|
||||
import ColorPicker from './ColorPicker.svelte';
|
||||
|
||||
interface Props {
|
||||
/** Initial theme data (for editing existing theme) */
|
||||
initialTheme?: Partial<CreateCustomThemeInput>;
|
||||
/** Current effective mode for preview */
|
||||
effectiveMode?: EffectiveMode;
|
||||
/** Callback when theme changes */
|
||||
onThemeChange?: (theme: Partial<CreateCustomThemeInput>) => void;
|
||||
/** Callback when save is triggered */
|
||||
onSave?: (theme: CreateCustomThemeInput) => void;
|
||||
/** Callback to preview theme */
|
||||
onPreview?: (colors: ThemeColors, mode: EffectiveMode) => void;
|
||||
/** Callback to stop preview */
|
||||
onStopPreview?: () => void;
|
||||
/** Show save button */
|
||||
showSaveButton?: boolean;
|
||||
/** Is saving in progress */
|
||||
isSaving?: boolean;
|
||||
}
|
||||
|
||||
let {
|
||||
initialTheme,
|
||||
effectiveMode = 'light',
|
||||
onThemeChange,
|
||||
onSave,
|
||||
onPreview,
|
||||
onStopPreview,
|
||||
showSaveButton = true,
|
||||
isSaving = false,
|
||||
}: Props = $props();
|
||||
|
||||
// Get default colors from a base variant
|
||||
function getDefaultColors(variant: ThemeVariant = 'ocean'): {
|
||||
light: ThemeColors;
|
||||
dark: ThemeColors;
|
||||
} {
|
||||
const definition = THEME_DEFINITIONS[variant];
|
||||
if (definition) {
|
||||
return { light: definition.light, dark: definition.dark };
|
||||
}
|
||||
// Fallback to ocean
|
||||
const ocean = THEME_DEFINITIONS['ocean'];
|
||||
return { light: ocean.light, dark: ocean.dark };
|
||||
}
|
||||
|
||||
// Initialize theme state
|
||||
const defaultColors = getDefaultColors(initialTheme?.baseVariant);
|
||||
|
||||
let name = $state(initialTheme?.name ?? '');
|
||||
let description = $state(initialTheme?.description ?? '');
|
||||
let baseVariant = $state<ThemeVariant | undefined>(initialTheme?.baseVariant);
|
||||
let lightColors = $state<ThemeColors>(
|
||||
(initialTheme?.lightColors as ThemeColors) ?? { ...defaultColors.light }
|
||||
);
|
||||
let darkColors = $state<ThemeColors>(
|
||||
(initialTheme?.darkColors as ThemeColors) ?? { ...defaultColors.dark }
|
||||
);
|
||||
|
||||
// UI State
|
||||
let editingMode = $state<EffectiveMode>(effectiveMode);
|
||||
let showExtendedColors = $state(false);
|
||||
|
||||
// Current colors based on editing mode
|
||||
let currentColors = $derived(editingMode === 'light' ? lightColors : darkColors);
|
||||
|
||||
// Build the theme input object
|
||||
let themeInput = $derived<Partial<CreateCustomThemeInput>>({
|
||||
name: name || undefined,
|
||||
description: description || undefined,
|
||||
baseVariant,
|
||||
lightColors,
|
||||
darkColors,
|
||||
});
|
||||
|
||||
// Notify parent of changes
|
||||
$effect(() => {
|
||||
onThemeChange?.(themeInput);
|
||||
});
|
||||
|
||||
// Check if theme is valid for saving
|
||||
let isValid = $derived(name.trim().length > 0);
|
||||
|
||||
function updateColor(key: keyof ThemeColors, value: HSLValue) {
|
||||
if (editingMode === 'light') {
|
||||
lightColors = { ...lightColors, [key]: value };
|
||||
} else {
|
||||
darkColors = { ...darkColors, [key]: value };
|
||||
}
|
||||
}
|
||||
|
||||
function handleBaseVariantChange(variant: ThemeVariant) {
|
||||
baseVariant = variant;
|
||||
const colors = getDefaultColors(variant);
|
||||
lightColors = { ...colors.light };
|
||||
darkColors = { ...colors.dark };
|
||||
}
|
||||
|
||||
function resetToBase() {
|
||||
if (baseVariant) {
|
||||
const colors = getDefaultColors(baseVariant);
|
||||
lightColors = { ...colors.light };
|
||||
darkColors = { ...colors.dark };
|
||||
}
|
||||
}
|
||||
|
||||
function handleSave() {
|
||||
if (!isValid) return;
|
||||
|
||||
const theme: CreateCustomThemeInput = {
|
||||
name: name.trim(),
|
||||
description: description.trim() || undefined,
|
||||
lightColors,
|
||||
darkColors,
|
||||
baseVariant,
|
||||
};
|
||||
|
||||
onSave?.(theme);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="theme-editor">
|
||||
<!-- Theme Info + Base Variant in one row -->
|
||||
<section class="editor-section compact">
|
||||
<div class="info-row">
|
||||
<div class="form-group name-group">
|
||||
<label for="theme-name" class="form-label">Name *</label>
|
||||
<input
|
||||
id="theme-name"
|
||||
type="text"
|
||||
class="form-input"
|
||||
bind:value={name}
|
||||
placeholder="Mein Theme"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group desc-group">
|
||||
<label for="theme-description" class="form-label">Beschreibung</label>
|
||||
<input
|
||||
id="theme-description"
|
||||
type="text"
|
||||
class="form-input"
|
||||
bind:value={description}
|
||||
placeholder="Kurze Beschreibung..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="variant-row">
|
||||
<span class="variant-label">Basis:</span>
|
||||
<div class="variant-buttons">
|
||||
{#each THEME_VARIANTS as variantName}
|
||||
{@const variant = THEME_DEFINITIONS[variantName]}
|
||||
<button
|
||||
type="button"
|
||||
class="variant-button"
|
||||
class:selected={baseVariant === variantName}
|
||||
onclick={() => handleBaseVariantChange(variantName)}
|
||||
title={variant.label}
|
||||
>
|
||||
{variant.emoji}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Colors Section -->
|
||||
<section class="editor-section">
|
||||
<div class="mode-header">
|
||||
<h3 class="section-title">Farben</h3>
|
||||
<div class="mode-toggle">
|
||||
<button
|
||||
type="button"
|
||||
class="mode-button"
|
||||
class:active={editingMode === 'light'}
|
||||
onclick={() => (editingMode = 'light')}
|
||||
>
|
||||
<Sun size={14} weight={editingMode === 'light' ? 'fill' : 'regular'} />
|
||||
Hell
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="mode-button"
|
||||
class:active={editingMode === 'dark'}
|
||||
onclick={() => (editingMode = 'dark')}
|
||||
>
|
||||
<Moon size={14} weight={editingMode === 'dark' ? 'fill' : 'regular'} />
|
||||
Dunkel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Colors -->
|
||||
<div class="colors-grid">
|
||||
{#each MAIN_THEME_COLORS as colorKey}
|
||||
<div class="color-item">
|
||||
<ColorPicker
|
||||
label={THEME_COLOR_LABELS[colorKey]}
|
||||
value={currentColors[colorKey]}
|
||||
onChange={(value) => updateColor(colorKey, value)}
|
||||
compact
|
||||
/>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<!-- Extended Colors (collapsible) -->
|
||||
<button
|
||||
type="button"
|
||||
class="colors-toggle"
|
||||
onclick={() => (showExtendedColors = !showExtendedColors)}
|
||||
>
|
||||
<span>Erweiterte Farben ({EXTENDED_THEME_COLORS.length})</span>
|
||||
{#if showExtendedColors}
|
||||
<CaretUp size={14} />
|
||||
{:else}
|
||||
<CaretDown size={14} />
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
{#if showExtendedColors}
|
||||
<div class="colors-grid extended">
|
||||
{#each EXTENDED_THEME_COLORS as colorKey}
|
||||
<div class="color-item">
|
||||
<ColorPicker
|
||||
label={THEME_COLOR_LABELS[colorKey]}
|
||||
value={currentColors[colorKey]}
|
||||
onChange={(value) => updateColor(colorKey, value)}
|
||||
compact
|
||||
/>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="editor-actions">
|
||||
{#if baseVariant}
|
||||
<button type="button" class="action-button secondary" onclick={resetToBase}>
|
||||
<ArrowCounterClockwise size={14} />
|
||||
Reset
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
{#if showSaveButton && onSave}
|
||||
<button
|
||||
type="button"
|
||||
class="action-button primary"
|
||||
onclick={handleSave}
|
||||
disabled={!isValid || isSaving}
|
||||
>
|
||||
<FloppyDisk size={14} />
|
||||
{isSaving ? 'Speichern...' : 'Speichern'}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.theme-editor {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.editor-section {
|
||||
background: hsl(var(--surface));
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem;
|
||||
border: 1px solid hsl(var(--border));
|
||||
}
|
||||
|
||||
.editor-section.compact {
|
||||
padding: 0.875rem 1rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: hsl(var(--foreground));
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Info Row - Name + Description side by side */
|
||||
.info-row {
|
||||
display: grid;
|
||||
grid-template-columns: 200px 1fr;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: hsl(var(--muted-foreground));
|
||||
}
|
||||
|
||||
.form-input {
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 0.8125rem;
|
||||
background: hsl(var(--input));
|
||||
border: 1px solid hsl(var(--border));
|
||||
border-radius: 0.375rem;
|
||||
color: hsl(var(--foreground));
|
||||
transition:
|
||||
border-color 0.15s,
|
||||
box-shadow 0.15s;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
outline: none;
|
||||
border-color: hsl(var(--primary));
|
||||
box-shadow: 0 0 0 2px hsl(var(--primary) / 0.15);
|
||||
}
|
||||
|
||||
/* Variant Row */
|
||||
.variant-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.variant-label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: hsl(var(--muted-foreground));
|
||||
}
|
||||
|
||||
.variant-buttons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.variant-button {
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.875rem;
|
||||
background: hsl(var(--muted));
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0.375rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.variant-button:hover {
|
||||
background: hsl(var(--muted) / 0.7);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.variant-button.selected {
|
||||
background: hsl(var(--primary) / 0.15);
|
||||
border-color: hsl(var(--primary));
|
||||
}
|
||||
|
||||
/* Mode Toggle */
|
||||
.mode-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.mode-toggle {
|
||||
display: flex;
|
||||
background: hsl(var(--muted));
|
||||
border-radius: 0.375rem;
|
||||
padding: 0.125rem;
|
||||
}
|
||||
|
||||
.mode-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.375rem 0.625rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 0.25rem;
|
||||
color: hsl(var(--muted-foreground));
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.mode-button:hover {
|
||||
color: hsl(var(--foreground));
|
||||
}
|
||||
|
||||
.mode-button.active {
|
||||
background: hsl(var(--surface));
|
||||
color: hsl(var(--foreground));
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* Colors Grid */
|
||||
.colors-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.colors-grid.extended {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.color-item {
|
||||
background: hsl(var(--background));
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.375rem;
|
||||
border: 1px solid hsl(var(--border));
|
||||
}
|
||||
|
||||
/* Colors Toggle */
|
||||
.colors-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: 0.5rem 0.75rem;
|
||||
margin-top: 0.75rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: hsl(var(--muted-foreground));
|
||||
background: hsl(var(--muted) / 0.5);
|
||||
border: none;
|
||||
border-radius: 0.375rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.colors-toggle:hover {
|
||||
background: hsl(var(--muted));
|
||||
color: hsl(var(--foreground));
|
||||
}
|
||||
|
||||
/* Actions */
|
||||
.editor-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
padding: 0.5rem 0.875rem;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
background: hsl(var(--muted));
|
||||
border: 1px solid hsl(var(--border));
|
||||
border-radius: 0.375rem;
|
||||
color: hsl(var(--foreground));
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.action-button:hover:not(:disabled) {
|
||||
background: hsl(var(--muted) / 0.8);
|
||||
}
|
||||
|
||||
.action-button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.action-button.primary {
|
||||
background: hsl(var(--primary));
|
||||
border-color: hsl(var(--primary));
|
||||
color: hsl(var(--primary-foreground));
|
||||
}
|
||||
|
||||
.action-button.primary:hover:not(:disabled) {
|
||||
background: hsl(var(--primary) / 0.9);
|
||||
}
|
||||
|
||||
.action-button.secondary {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 640px) {
|
||||
.info-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.mode-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.colors-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.editor-actions {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,485 +0,0 @@
|
|||
<script lang="ts">
|
||||
import type { ThemeColors, EffectiveMode } from '@manacore/shared-theme';
|
||||
import {
|
||||
Bell,
|
||||
Heart,
|
||||
MagnifyingGlass,
|
||||
House,
|
||||
User,
|
||||
Gear,
|
||||
Check,
|
||||
X,
|
||||
Sun,
|
||||
Moon,
|
||||
} from '@manacore/shared-icons';
|
||||
|
||||
interface Props {
|
||||
/** Theme colors to preview */
|
||||
colors: ThemeColors;
|
||||
/** Preview mode (light/dark) */
|
||||
mode?: EffectiveMode;
|
||||
/** Preview title */
|
||||
title?: string;
|
||||
/** Callback when mode changes */
|
||||
onModeChange?: (mode: EffectiveMode) => void;
|
||||
}
|
||||
|
||||
let { colors, mode = 'light', title = 'Live-Vorschau', onModeChange }: Props = $props();
|
||||
|
||||
// Map from camelCase to CSS variable names
|
||||
const colorToCssVar: Record<string, string> = {
|
||||
primary: 'primary',
|
||||
primaryForeground: 'primary-foreground',
|
||||
secondary: 'secondary',
|
||||
secondaryForeground: 'secondary-foreground',
|
||||
background: 'background',
|
||||
foreground: 'foreground',
|
||||
surface: 'surface',
|
||||
surfaceHover: 'surface-hover',
|
||||
surfaceElevated: 'surface-elevated',
|
||||
muted: 'muted',
|
||||
mutedForeground: 'muted-foreground',
|
||||
border: 'border',
|
||||
input: 'input',
|
||||
ring: 'ring',
|
||||
success: 'success',
|
||||
successForeground: 'success-foreground',
|
||||
warning: 'warning',
|
||||
warningForeground: 'warning-foreground',
|
||||
error: 'error',
|
||||
errorForeground: 'error-foreground',
|
||||
info: 'info',
|
||||
infoForeground: 'info-foreground',
|
||||
};
|
||||
|
||||
// Convert colors to CSS variables for inline style
|
||||
function colorsToStyle(colors: ThemeColors): string {
|
||||
return Object.entries(colors)
|
||||
.map(([key, value]) => {
|
||||
const cssVar = colorToCssVar[key] || key.replace(/([A-Z])/g, '-$1').toLowerCase();
|
||||
return `--${cssVar}: ${value}`;
|
||||
})
|
||||
.join('; ');
|
||||
}
|
||||
|
||||
let styleVars = $derived(colorsToStyle(colors));
|
||||
</script>
|
||||
|
||||
<div class="preview-container" class:dark={mode === 'dark'}>
|
||||
<div class="preview-header">
|
||||
<span class="preview-title">{title}</span>
|
||||
{#if onModeChange}
|
||||
<div class="mode-toggle">
|
||||
<button
|
||||
type="button"
|
||||
class="mode-btn"
|
||||
class:active={mode === 'light'}
|
||||
onclick={() => onModeChange?.('light')}
|
||||
aria-label="Hell"
|
||||
>
|
||||
<Sun size={14} weight={mode === 'light' ? 'fill' : 'regular'} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="mode-btn"
|
||||
class:active={mode === 'dark'}
|
||||
onclick={() => onModeChange?.('dark')}
|
||||
aria-label="Dunkel"
|
||||
>
|
||||
<Moon size={14} weight={mode === 'dark' ? 'fill' : 'regular'} />
|
||||
</button>
|
||||
</div>
|
||||
{:else}
|
||||
<span class="preview-mode">{mode === 'light' ? 'Hell' : 'Dunkel'}</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="preview-frame" style={styleVars}>
|
||||
<!-- App Header -->
|
||||
<div class="app-header">
|
||||
<div class="app-logo">
|
||||
<div class="logo-icon"></div>
|
||||
<span class="app-name">Mana App</span>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<button class="icon-button">
|
||||
<MagnifyingGlass size={16} />
|
||||
</button>
|
||||
<button class="icon-button">
|
||||
<Bell size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="app-content">
|
||||
<!-- Card -->
|
||||
<div class="preview-card">
|
||||
<div class="card-header">
|
||||
<div class="avatar"></div>
|
||||
<div class="card-info">
|
||||
<div class="card-title">Max Mustermann</div>
|
||||
<div class="card-subtitle">Beispiel-Kontakt</div>
|
||||
</div>
|
||||
<button class="icon-button favorite">
|
||||
<Heart size={16} weight="fill" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p class="card-text">Dies ist eine Vorschau, wie dein Theme in der App aussehen wird.</p>
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<button class="btn btn-primary">
|
||||
<Check size={14} />
|
||||
Bestätigen
|
||||
</button>
|
||||
<button class="btn btn-secondary">
|
||||
<X size={14} />
|
||||
Abbrechen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Status Badges -->
|
||||
<div class="status-row">
|
||||
<span class="badge success">Erfolgreich</span>
|
||||
<span class="badge warning">Ausstehend</span>
|
||||
<span class="badge error">Fehler</span>
|
||||
</div>
|
||||
|
||||
<!-- Input Preview -->
|
||||
<div class="input-preview">
|
||||
<input type="text" class="preview-input" placeholder="Suchbegriff eingeben..." />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom Navigation -->
|
||||
<div class="app-nav">
|
||||
<button class="nav-item active">
|
||||
<House size={18} weight="fill" />
|
||||
<span>Start</span>
|
||||
</button>
|
||||
<button class="nav-item">
|
||||
<User size={18} />
|
||||
<span>Profil</span>
|
||||
</button>
|
||||
<button class="nav-item">
|
||||
<Gear size={18} />
|
||||
<span>Einstellungen</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.preview-container {
|
||||
border-radius: 0.75rem;
|
||||
overflow: hidden;
|
||||
border: 1px solid hsl(var(--border));
|
||||
background: hsl(var(--surface));
|
||||
}
|
||||
|
||||
.preview-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.75rem 1rem;
|
||||
background: hsl(var(--muted));
|
||||
border-bottom: 1px solid hsl(var(--border));
|
||||
}
|
||||
|
||||
.preview-title {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: hsl(var(--foreground));
|
||||
}
|
||||
|
||||
.preview-mode {
|
||||
font-size: 0.75rem;
|
||||
color: hsl(var(--muted-foreground));
|
||||
padding: 0.25rem 0.5rem;
|
||||
background: hsl(var(--surface));
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.mode-toggle {
|
||||
display: flex;
|
||||
background: hsl(var(--surface));
|
||||
border-radius: 0.375rem;
|
||||
padding: 0.125rem;
|
||||
gap: 0.125rem;
|
||||
}
|
||||
|
||||
.mode-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.75rem;
|
||||
height: 1.5rem;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 0.25rem;
|
||||
color: hsl(var(--muted-foreground));
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.mode-btn:hover {
|
||||
color: hsl(var(--foreground));
|
||||
}
|
||||
|
||||
.mode-btn.active {
|
||||
background: hsl(var(--background));
|
||||
color: hsl(var(--foreground));
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* Preview Frame - uses inline CSS variables */
|
||||
.preview-frame {
|
||||
background: hsl(var(--background));
|
||||
color: hsl(var(--foreground));
|
||||
font-size: 0.8125rem;
|
||||
min-height: 420px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* App Header */
|
||||
.app-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.75rem 1rem;
|
||||
background: hsl(var(--surface));
|
||||
border-bottom: 1px solid hsl(var(--border));
|
||||
}
|
||||
|
||||
.app-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
background: hsl(var(--primary));
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.app-name {
|
||||
font-weight: 600;
|
||||
color: hsl(var(--foreground));
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 0.375rem;
|
||||
color: hsl(var(--muted-foreground));
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.icon-button:hover {
|
||||
background: hsl(var(--muted));
|
||||
color: hsl(var(--foreground));
|
||||
}
|
||||
|
||||
.icon-button.favorite {
|
||||
color: hsl(var(--primary));
|
||||
}
|
||||
|
||||
/* App Content */
|
||||
.app-content {
|
||||
flex: 1;
|
||||
padding: 0.75rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
/* Preview Card */
|
||||
.preview-card {
|
||||
background: hsl(var(--surface));
|
||||
border: 1px solid hsl(var(--border));
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.625rem;
|
||||
border-bottom: 1px solid hsl(var(--border));
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
background: hsl(var(--muted));
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.card-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-weight: 600;
|
||||
color: hsl(var(--foreground));
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
font-size: 0.625rem;
|
||||
color: hsl(var(--muted-foreground));
|
||||
}
|
||||
|
||||
.card-content {
|
||||
padding: 0.625rem;
|
||||
}
|
||||
|
||||
.card-text {
|
||||
color: hsl(var(--muted-foreground));
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
padding: 0.625rem;
|
||||
border-top: 1px solid hsl(var(--border));
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.375rem 0.625rem;
|
||||
font-size: 0.625rem;
|
||||
font-weight: 500;
|
||||
border-radius: 0.375rem;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: hsl(var(--primary));
|
||||
color: hsl(var(--primary-foreground));
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: hsl(var(--primary) / 0.9);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: hsl(var(--muted));
|
||||
color: hsl(var(--foreground));
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: hsl(var(--muted) / 0.8);
|
||||
}
|
||||
|
||||
/* Status Row */
|
||||
.status-row {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.badge {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.625rem;
|
||||
font-weight: 500;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.badge.success {
|
||||
background: hsl(var(--success) / 0.15);
|
||||
color: hsl(var(--success));
|
||||
}
|
||||
|
||||
.badge.warning {
|
||||
background: hsl(var(--warning) / 0.15);
|
||||
color: hsl(var(--warning));
|
||||
}
|
||||
|
||||
.badge.error {
|
||||
background: hsl(var(--error) / 0.15);
|
||||
color: hsl(var(--error));
|
||||
}
|
||||
|
||||
/* Input Preview */
|
||||
.input-preview {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.preview-input {
|
||||
width: 100%;
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 0.75rem;
|
||||
background: hsl(var(--input));
|
||||
border: 1px solid hsl(var(--border));
|
||||
border-radius: 0.375rem;
|
||||
color: hsl(var(--foreground));
|
||||
}
|
||||
|
||||
.preview-input::placeholder {
|
||||
color: hsl(var(--muted-foreground));
|
||||
}
|
||||
|
||||
.preview-input:focus {
|
||||
outline: none;
|
||||
border-color: hsl(var(--primary));
|
||||
box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
|
||||
}
|
||||
|
||||
/* Bottom Navigation */
|
||||
.app-nav {
|
||||
display: flex;
|
||||
background: hsl(var(--surface));
|
||||
border-top: 1px solid hsl(var(--border));
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.125rem;
|
||||
padding: 0.5rem;
|
||||
font-size: 0.5rem;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: hsl(var(--muted-foreground));
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
color: hsl(var(--foreground));
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
color: hsl(var(--primary));
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue