Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
4841a7ad7c | ||
|
|
32a49690fa |
16
CLAUDE.md
@@ -119,13 +119,11 @@ 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/camel-logo.svg' // SVG vector logo
|
||||
```
|
||||
|
||||
@@ -336,23 +336,23 @@ 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 |
|
||||
| `camel-logo.svg` | Vector | SVG logo for scalable usage |
|
||||
|
||||
### 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" />
|
||||
```
|
||||
|
||||
|
||||
|
Before Width: | Height: | Size: 869 B After Width: | Height: | Size: 983 B |
|
Before Width: | Height: | Size: 51 KiB After Width: | Height: | Size: 34 KiB |
|
Before Width: | Height: | Size: 58 KiB After Width: | Height: | Size: 37 KiB |
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 5.0 KiB After Width: | Height: | Size: 4.6 KiB |
|
Before Width: | Height: | Size: 418 KiB After Width: | Height: | Size: 162 KiB |
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 374 KiB |
@@ -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",
|
||||
|
||||
@@ -13,7 +13,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 +28,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,7 +41,7 @@ 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>
|
||||
@@ -59,7 +59,7 @@ export function BrandAssetsSection() {
|
||||
<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>
|
||||
<code className={styles.logoExport}>assets/camel-logo.svg</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||