feat: logo component - #7
Merged
Merged
Conversation
Captures the approved design for shipping Elide's logo from the creatives-v2 artwork: a framework-agnostic @elide/brand package holding the geometry and generated svg/png/webp/avif renditions, and an ElideLogo component in @elide/ui covering light/dark, square/full form, and vector/raster modes. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Adds @elide/brand, a framework-agnostic package sitting below the React line that owns the logo artwork. paths.ts carries the four path strings copied verbatim from creatives-v2 — the hexagon body and knockout ribbon from elide-block-black.svg, the glyph and wordmark from elide-mark-black.svg. The delivered gradient and blend lockups embed their glyph as a base64 PNG, so every variant is rebuilt by re-filling these paths instead; the geometry stays byte-identical to the originals while the result is genuinely vector. manifest.ts enumerates the eight artworks and resolves asset URLs. blend collapses to gradient on the square form (which is what blend means there), and gradient is theme-agnostic so it ships as a single file. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Eight artworks (square/full x gradient/mono/blend, with light and dark cuts where the variant is theme-dependent) composed from the shared geometry, each emitted as a scalable SVG plus png/webp/avif at 1x/2x/3x. 80 files, committed so consuming repos and CI never need a native image toolchain. Encoders were picked by measuring against a lossless reference render rather than by reputation. PNG stays lossless as the universal fallback; WebP is lossless and still smaller than PNG on this artwork; AVIF is the one lossy encoder because lossless AVIF on line art is over double the PNG size, and at q90 its error is imperceptible (mae 0.32, worst 11 on the gradient square). verify-fidelity.mjs gates the rebuild against the delivered SVGs rather than the delivered PNGs — the PNG exports are canvas-rounded (102.700292 wide exported as 104px), so diffing those measures the exporter's padding instead of our geometry. Against the SVGs the gradient square and full mono are pixel-identical (mae 0.000) and the evenodd mono merge differs by 0.007, which is antialiasing at the punched edges. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Rewrites ElideLogo over the @elide/brand geometry, covering light/dark, square/full form, and vector/raster in one component. Vector is the default and inlines the SVG: no request, no asset to serve, and mono/blend draw in currentColor so light/dark costs nothing. Raster mode renders both theme cuts and toggles them with dark: utilities rather than reading the theme in JS — that needs no provider, cannot flash, survives SSR, and respects a site theme that disagrees with the OS. AppNav keeps its existing brand lockup, now composed explicitly from ElideMark and ElideWordmark. That artwork is deliberately different from the official full lockup (filled badge and the wider wordmark cut, versus an outlined glyph and a narrower one), so the nav renders exactly as it did before. Tests guard against it being silently swapped. <ElideLogo /> with no props now means the official full lockup rather than the old nav lockup — a breaking change to the default, shipped with a changeset. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Stories cover the form x variant matrix, all four formats, the raster light/dark swap, the size ladder, and both nav lockups — Chromatic captures each in light and dark. Storybook serves packages/brand/assets under /brand via staticDirs, which is what a consuming app does when it copies the package's assets into its public directory. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Tailwind v4's default dark: variant is a prefers-color-scheme media query, and styles.css never overrode it — so every dark: utility in the catalog (select, switch, tabs, dropdown-menu, and ElideLogo's raster theme swap) followed the OS rather than the site theme. A user who toggled to light while their OS was dark got dark-mode styling. The token layer was unaffected because it keys off .dark directly, which is why this stayed hidden. Found by rendering the raster theme swap in a real browser: both themes showed the light cut. Guarded by a play function on the RasterThemeSwap story, which asserts computed display under and outside .dark — the only place this is checkable, since jsdom reads the class names but never evaluates them. Verified the guard fails with the variant removed. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
@elide/brand shipped without a lint config while the repo lints its other TS package, so its source and build scripts were unchecked. Mirrors the packages/ui flat config, splitting environments: src is environment-neutral (it has to run in a browser, in Node, and in a build script) while scripts is Node-only tooling that never ships. Clean on the first run — no code changes needed. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Sam Gammon (sgammon)
force-pushed
the
feat/logo-component
branch
from
August 5, 2026 21:51
927918a to
9511faa
Compare
|
React Doctor found 1 new issue in 1 file · 1 warning · score 96 / 100 (Great) · 0 fixed · vs Reviewed by React Doctor for commit |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #7 +/- ##
==========================================
+ Coverage 97.72% 97.89% +0.16%
==========================================
Files 38 38
Lines 659 712 +53
Branches 288 284 -4
==========================================
+ Hits 644 697 +53
Misses 15 15
Flags with carried forward coverage won't be shown. Click here to find out more.
🚀 New features to boost your workflow:
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.