Compare commits

..

3 Commits

Author SHA1 Message Date
hsiegeln
e572df8558 fix(assets): remove semi-white background artifacts from logo SVG and PNGs
All checks were successful
Build & Publish / publish (push) Successful in 1m4s
SonarQube Analysis / sonarqube (push) Successful in 2m27s
Stripped 8 near-white path layers (brightness > 200) from the traced SVG,
leaving only amber/gold tones. Regenerated all PNG variants from the
cleaned SVG. Validated on dark and red backgrounds with zero artifacts.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-06 23:19:39 +02:00
hsiegeln
a3afe3cb1b feat(assets): add high-detail cameleer3-logo.svg traced from PNG via Inkscape
All checks were successful
Build & Publish / publish (push) Successful in 1m4s
32-scan potrace vector trace with transparent background. Added to brand
assets inventory, documentation, and package exports.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-06 22:58:44 +02:00
hsiegeln
4841a7ad7c refactor(assets): replace named exports with wildcard ./assets/* export
All checks were successful
Build & Publish / publish (push) Successful in 1m10s
Consumers now import via @cameleer/design-system/assets/<filename> instead
of named aliases like /logo-32. Simpler, more flexible, and supports any
future assets without adding new export entries.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-06 22:43:01 +02:00
13 changed files with 261 additions and 36 deletions

View File

@@ -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
```

View File

@@ -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" />
```

Binary file not shown.

Before

Width:  |  Height:  |  Size: 983 B

After

Width:  |  Height:  |  Size: 941 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 37 KiB

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 162 KiB

After

Width:  |  Height:  |  Size: 151 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 374 KiB

After

Width:  |  Height:  |  Size: 342 KiB

112
assets/cameleer3-logo.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 1.5 MiB

View File

@@ -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",

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 1.5 MiB

View File

@@ -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>