Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
a3afe3cb1b | ||
|
|
4841a7ad7c |
17
CLAUDE.md
17
CLAUDE.md
@@ -119,13 +119,12 @@ import type { ChartSeries, DataPoint } from '@cameleer/design-system'
|
||||
// Styles (once, at app root)
|
||||
import '@cameleer/design-system/style.css'
|
||||
|
||||
// Brand assets (static files — logo variants and favicon sizes)
|
||||
import logo from '@cameleer/design-system/logo' // full resolution PNG
|
||||
import logo16 from '@cameleer/design-system/logo-16' // 16×16 favicon
|
||||
import logo32 from '@cameleer/design-system/logo-32' // 32×32 favicon
|
||||
import logo48 from '@cameleer/design-system/logo-48' // 48×48 taskbar
|
||||
import logo180 from '@cameleer/design-system/logo-180' // Apple touch icon
|
||||
import logo192 from '@cameleer/design-system/logo-192' // Android/PWA icon
|
||||
import logo512 from '@cameleer/design-system/logo-512' // PWA splash, og:image
|
||||
import logoSvg from '@cameleer/design-system/logo-svg' // SVG vector logo
|
||||
// Brand assets (static files via ./assets/* export)
|
||||
import logo from '@cameleer/design-system/assets/cameleer3-logo.png' // full resolution
|
||||
import logo32 from '@cameleer/design-system/assets/cameleer3-32.png' // 32×32 favicon
|
||||
import logo180 from '@cameleer/design-system/assets/cameleer3-180.png' // Apple touch icon
|
||||
import logo192 from '@cameleer/design-system/assets/cameleer3-192.png' // Android/PWA icon
|
||||
import logo512 from '@cameleer/design-system/assets/cameleer3-512.png' // PWA splash, og:image
|
||||
import logoSvg from '@cameleer/design-system/assets/cameleer3-logo.svg' // high-detail SVG logo
|
||||
import camelSvg from '@cameleer/design-system/assets/camel-logo.svg' // simplified camel SVG
|
||||
```
|
||||
|
||||
@@ -336,23 +336,24 @@ See `CLAUDE.md` "Using This Design System in Other Apps" for full setup instruct
|
||||
|
||||
## Brand Assets
|
||||
|
||||
The design system ships logo assets as static files via package exports. These are not React components — they resolve to file URLs when imported via a bundler.
|
||||
The design system ships logo assets as static files via the `./assets/*` package export. These are not React components — they resolve to file URLs when imported via a bundler. All PNGs have transparent backgrounds.
|
||||
|
||||
| Export | Size | Use case |
|
||||
|--------|------|----------|
|
||||
| `@cameleer/design-system/logo` | Original | Full resolution for print/marketing |
|
||||
| `@cameleer/design-system/logo-16` | 16×16 | Browser tab favicon |
|
||||
| `@cameleer/design-system/logo-32` | 32×32 | Standard favicon, bookmarks |
|
||||
| `@cameleer/design-system/logo-48` | 48×48 | Windows taskbar |
|
||||
| `@cameleer/design-system/logo-180` | 180×180 | Apple touch icon |
|
||||
| `@cameleer/design-system/logo-192` | 192×192 | Android/PWA icon |
|
||||
| `@cameleer/design-system/logo-512` | 512×512 | PWA splash, og:image |
|
||||
| `@cameleer/design-system/logo-svg` | Vector | SVG logo for scalable usage |
|
||||
| File | Size | Use case |
|
||||
|------|------|----------|
|
||||
| `cameleer3-logo.png` | Original | Full resolution for print/marketing |
|
||||
| `cameleer3-16.png` | 16×16 | Browser tab favicon |
|
||||
| `cameleer3-32.png` | 32×32 | Standard favicon, bookmarks |
|
||||
| `cameleer3-48.png` | 48×48 | Windows taskbar |
|
||||
| `cameleer3-180.png` | 180×180 | Apple touch icon |
|
||||
| `cameleer3-192.png` | 192×192 | Android/PWA icon |
|
||||
| `cameleer3-512.png` | 512×512 | PWA splash, og:image |
|
||||
| `cameleer3-logo.svg` | Vector | High-detail SVG logo (traced from PNG, transparent) |
|
||||
| `camel-logo.svg` | Vector | Simplified camel SVG logo |
|
||||
|
||||
### Usage
|
||||
|
||||
```tsx
|
||||
import logo from '@cameleer/design-system/logo-512'
|
||||
import logo from '@cameleer/design-system/assets/cameleer3-512.png'
|
||||
<img src={logo} alt="Cameleer3" />
|
||||
```
|
||||
|
||||
|
||||
144
assets/cameleer3-logo.svg
Normal file
144
assets/cameleer3-logo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 2.6 MiB |
@@ -11,14 +11,7 @@
|
||||
"import": "./dist/index.es.js"
|
||||
},
|
||||
"./style.css": "./dist/style.css",
|
||||
"./logo": "./assets/cameleer3-logo.png",
|
||||
"./logo-16": "./assets/cameleer3-16.png",
|
||||
"./logo-32": "./assets/cameleer3-32.png",
|
||||
"./logo-48": "./assets/cameleer3-48.png",
|
||||
"./logo-180": "./assets/cameleer3-180.png",
|
||||
"./logo-192": "./assets/cameleer3-192.png",
|
||||
"./logo-512": "./assets/cameleer3-512.png",
|
||||
"./logo-svg": "./assets/camel-logo.svg"
|
||||
"./assets/*": "./assets/*"
|
||||
},
|
||||
"files": [
|
||||
"dist",
|
||||
|
||||
144
src/assets/cameleer3-logo.svg
Normal file
144
src/assets/cameleer3-logo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 2.6 MiB |
@@ -1,6 +1,7 @@
|
||||
import styles from './BrandAssetsSection.module.css'
|
||||
import camelLogoSvg from '../../../assets/camel-logo.svg'
|
||||
import cameleer3Logo from '../../../assets/cameleer3-logo.png'
|
||||
import cameleer3LogoSvg from '../../../assets/cameleer3-logo.svg'
|
||||
|
||||
const LOGO_SIZES = [16, 32, 48, 180, 192, 512] as const
|
||||
|
||||
@@ -13,7 +14,7 @@ export function BrandAssetsSection() {
|
||||
<h3 className={styles.componentTitle}>Cameleer3 Logo (PNG)</h3>
|
||||
<p className={styles.componentDesc}>
|
||||
Full-resolution logo and pre-generated size variants for favicons, PWA icons, and social images.
|
||||
Shipped as static assets via package exports.
|
||||
Shipped as static assets via <code>@cameleer/design-system/assets/*</code> export.
|
||||
</p>
|
||||
<div className={styles.demoArea}>
|
||||
<div className={styles.logoGrid}>
|
||||
@@ -28,7 +29,7 @@ export function BrandAssetsSection() {
|
||||
/>
|
||||
</div>
|
||||
<span className={styles.logoLabel}>{size}×{size}</span>
|
||||
<code className={styles.logoExport}>@cameleer/design-system/logo-{size}</code>
|
||||
<code className={styles.logoExport}>assets/cameleer3-{size}.png</code>
|
||||
</div>
|
||||
))}
|
||||
<div className={styles.logoItem}>
|
||||
@@ -41,25 +42,32 @@ export function BrandAssetsSection() {
|
||||
/>
|
||||
</div>
|
||||
<span className={styles.logoLabel}>Original</span>
|
||||
<code className={styles.logoExport}>@cameleer/design-system/logo</code>
|
||||
<code className={styles.logoExport}>assets/cameleer3-logo.png</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.componentCard}>
|
||||
<h3 className={styles.componentTitle}>Camel Logo (SVG)</h3>
|
||||
<h3 className={styles.componentTitle}>SVG Logos</h3>
|
||||
<p className={styles.componentDesc}>
|
||||
Vector logo for scalable usage. Shipped as a static asset via package export.
|
||||
Vector logos for scalable usage. Transparent backgrounds, infinitely scalable.
|
||||
</p>
|
||||
<div className={styles.demoArea}>
|
||||
<div className={styles.logoGrid}>
|
||||
<div className={styles.logoItem}>
|
||||
<div className={styles.logoPreview}>
|
||||
<img src={cameleer3LogoSvg} alt="Cameleer3 SVG logo" width={96} height={96} />
|
||||
</div>
|
||||
<span className={styles.logoLabel}>Cameleer3 SVG</span>
|
||||
<code className={styles.logoExport}>assets/cameleer3-logo.svg</code>
|
||||
</div>
|
||||
<div className={styles.logoItem}>
|
||||
<div className={styles.logoPreview}>
|
||||
<img src={camelLogoSvg} alt="Camel SVG logo" width={96} height={96} />
|
||||
</div>
|
||||
<span className={styles.logoLabel}>SVG</span>
|
||||
<code className={styles.logoExport}>@cameleer/design-system/logo-svg</code>
|
||||
<span className={styles.logoLabel}>Camel SVG</span>
|
||||
<code className={styles.logoExport}>assets/camel-logo.svg</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user