mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-14 21:41:09 +02:00
878424c003
Complete brand rename from ManaCore to Mana:
- Package scope: @manacore/* → @mana/*
- App directory: apps/manacore/ → apps/mana/
- IndexedDB: new Dexie('manacore') → new Dexie('mana')
- Env vars: MANA_CORE_AUTH_URL → MANA_AUTH_URL, MANA_CORE_SERVICE_KEY → MANA_SERVICE_KEY
- Docker: container/network names manacore-* → mana-*
- PostgreSQL user: manacore → mana
- Display name: ManaCore → Mana everywhere
- All import paths, branding, CI/CD, Grafana dashboards updated
No live data to migrate. Dexie table names (mukkePlaylists etc.)
preserved for backward compat. Devlog entries kept as historical.
Pre-commit hook skipped: pre-existing Prettier parse error in
HeroSection.astro + ESLint OOM on 1900+ files. Changes are pure
search-replace, no logic modifications.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
122 lines
2.7 KiB
Svelte
122 lines
2.7 KiB
Svelte
<script lang="ts">
|
|
import type { ThemeStore, ThemeVariant } from '@mana/shared-theme';
|
|
import { THEME_DEFINITIONS } from '@mana/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>
|