mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-14 23:21:08 +02:00
22a73943e1
Final cleanup of references missed in previous rename commits: - Dockerfiles: PUBLIC_MANA_CORE_AUTH_URL → PUBLIC_MANA_AUTH_URL - Go modules: github.com/manacore/* → github.com/mana/* (7 go.mod files) - launchd plists: com.manacore.* → com.mana.* (14 files renamed + content) - Image assets: *_Manacore_AI_Credits* → *_Mana_AI_Credits* (11 files) - .env.example files: ManaCore brand strings → Mana - .prettierignore: stale apps/manacore/* paths → apps/mana/* - Markdown docs (CLAUDE.md, /docs/*): mana-core-auth → mana-auth, etc. Excluded from rename: .claude/, devlog/, manascore/ (historical content), client testimonials, blueprints, npm package refs (@mana-core/*). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
129 lines
3.6 KiB
Markdown
129 lines
3.6 KiB
Markdown
# @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
|
|
|
|
```bash
|
|
pnpm add @mana/shared-branding
|
|
```
|
|
|
|
## Usage
|
|
|
|
### AppLogo
|
|
|
|
Display an app's logo:
|
|
|
|
```svelte
|
|
<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):
|
|
|
|
```svelte
|
|
<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:
|
|
|
|
```svelte
|
|
<script lang="ts">
|
|
import { ManaIcon } from '@mana/shared-branding';
|
|
</script>
|
|
|
|
<ManaIcon size={24} color="#4287f5" />
|
|
```
|
|
|
|
### Branding Configuration
|
|
|
|
Access branding config programmatically:
|
|
|
|
```typescript
|
|
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
|
|
|
|
```typescript
|
|
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;
|
|
}
|
|
```
|