managarten/packages/shared-branding

@mana/shared-branding

Shared branding components and configuration for the Mana ecosystem.

Features

• AppLogo: SVG logo component for any Mana app
• AppLogoWithName: Logo with app name combination
• ManaIcon: Universal Mana drop icon for credits display
• Branding Config: Centralized colors, names, and taglines

Installation

pnpm add @mana/shared-branding

Usage

AppLogo

Display an app's logo:

<script lang="ts">
	import { AppLogo } from '@mana/shared-branding';
</script>

<AppLogo app="memoro" size={32} />
<AppLogo app="mana" size={32} />
<AppLogo app="cards" size={32} />
<AppLogo app="maerchenzauber" size={32} />

AppLogoWithName

Display logo with app name (perfect for headers):

<script lang="ts">
	import { AppLogoWithName } from '@mana/shared-branding';
</script>

<AppLogoWithName app="memoro" size={28} />
<AppLogoWithName app="mana" showName={false} />

ManaIcon

Universal Mana drop icon:

<script lang="ts">
	import { ManaIcon } from '@mana/shared-branding';
</script>

<ManaIcon size={24} color="#4287f5" />

Branding Configuration

Access branding config programmatically:

import { getAppBranding, APP_BRANDING } from '@mana/shared-branding';

const memoro = getAppBranding('memoro');
console.log(memoro.name); // "Memoro"
console.log(memoro.tagline); // "AI Voice Memos"
console.log(memoro.primaryColor); // "#f8d62b"

App Branding

App	Name	Primary Color	Tagline
memoro	Memoro	#f8d62b (Gold)	AI Voice Memos
mana	Mana	#6366f1 (Indigo)	Central Hub
cards	Cards	#8b5cf6 (Purple)	AI Flashcards
maerchenzauber	Märchenzauber	#ec4899 (Pink)	AI Story Creator

Props

AppLogo

Prop	Type	Default	Description
app	AppId	required	App identifier
size	number	32	Size in pixels
color	string	App primary color	Override color
class	string	''	Additional CSS classes

AppLogoWithName

Prop	Type	Default	Description
app	AppId	required	App identifier
size	number	28	Logo size in pixels
color	string	App primary color	Override color
showName	boolean	true	Show app name
nameFontSize	string	'1.25rem'	Name font size
gap	string	'0.5rem'	Gap between logo and name
class	string	''	Additional CSS classes

ManaIcon

Prop	Type	Default	Description
size	number	24	Size in pixels
color	string	'#4287f5'	Icon color
class	string	''	Additional CSS classes

Types

type AppId = 'memoro' | 'mana' | 'cards' | 'maerchenzauber';

interface AppBranding {
	id: AppId;
	name: string;
	tagline: string;
	primaryColor: string;
	secondaryColor?: string;
	logoPath: string;
	logoViewBox?: string;
	logoStroke?: boolean;
	logoStrokeWidth?: number;
}