Skip to content

Replace Shadcn UI Kit logo with theme-aware SVG lockup - #283

Merged
kapishdima merged 1 commit into
mainfrom
chore/shadcnuikit-logo
Sep 4, 2026
Merged

kapishdima merged 1 commit into
mainfrom
chore/shadcnuikit-logo

Conversation

@kapishdima

Copy link
Copy Markdown
Collaborator

Swaps the Shadcn UI Kit sponsor logo for the new icon + wordmark lockup, adapted to both themes.

Why the asset was redrawn

The source SVG was a hybrid: a vector wordmark plus the mark as a 1876×1764 base64 PNG (210 KB). Its placement rect (x=-8.32 y=-4.94, 120.7×113.5) overflowed the clipPath on all four sides, so the rounded corners were cropped and the tile rendered as a full-bleed square.

The mark is pure geometry, so I measured it off the bitmap and redrew it: rect rx=11 plus five 45° capsules (stroke-width 9, round caps, 24.94 spacing). Corners are back and each file is 8 KB instead of 210 KB.

Theme handling

The lockup is strictly monochrome, so dark mode is an exact inversion.

  • Site — SponsorCard and DocsSponsor only read logoUrl and have no dark-twin support, so the entry uses dark:[filter:invert(1)] dark:group-hover:[filter:invert(1)], the same approach as launchfast. No component changes.
  • README — scripts/sponsors-readme.mts already resolves a -dark twin by filename, so shipping shadcnuikit-dark.svg upgrades the cell to <picture> with prefers-color-scheme: dark. Block regenerated via bun run sponsors:readme.

Changes

  • public/sponsors/shadcnuikit.svg — light: black tile, white strokes, black wordmark
  • public/sponsors/shadcnuikit-dark.svg — dark: inverted
  • public/sponsors/shadcnuikit.png — removed, no remaining references
  • config/sponsors.ts — new logoUrl, inversion filter, dropped displayName (the asset now carries the wordmark, which would otherwise double up in the docs sidebar and README)

No registry components touched, so no changelog entry.

🤖 Generated with Claude Code

https://claude.ai/code/session_01HKMmyJcVkjnqA6PP7c67yB

The new source SVG embedded the mark as a 210 KB base64 PNG whose
placement rect overflowed the 104x104 clipPath on all four sides, so the
rounded corners were cropped and the tile rendered full-bleed. Redrew the
mark as geometry measured off that bitmap: a rounded square plus five
45-degree capsules, 8 KB per file.

The lockup is strictly monochrome, so dark mode is an exact inversion:
the site gets it via a CSS filter, the README picks up the -dark twin
through the existing filename convention.

Dropped displayName since the new asset carries the wordmark itself.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HKMmyJcVkjnqA6PP7c67yB
@kapishdima
kapishdima merged commit 455611e into main Sep 4, 2026
2 of 3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant