v1.69.0 - #816
Merged
Merged
Conversation
…eal design system page (#815) * feat: design system page, token module, and five latent class-name bugs Groundwork for the visual modernization pass. Pure addition and repair — nothing here changes how the app looks yet. Design system (/d): - Rebuild as a real inventory: foundations (ramps with contrast readouts, type scale, radius, shadow, focus), typography, every button variant, forms, feedback/overlays, layout primitives, and the recurring page patterns that are not components yet. Every element is imported from where it lives so the page cannot drift from reality. - Self-contained light/dark toggle that restores on unmount. - Gate the route behind REACT_APP_VERCEL_ENV !== "production" (the house idiom, per PosthogWrapper) plus a noindex meta. New src/lib/designTokens.js: single source of truth that tailwind.config.js requires and /d imports, so the swatches cannot lie. Pin the TextResizer font. This hidden element measures node label text for getSize(), whose output lands in every node's data. findFontData() only reads a rule whose selector is exactly `node`, but toTheme() emits node styles under `:childless` — so fontData is {} for every chart and the element was inheriting the UI font. Without this pin, changing the app typeface would silently resize nodes on any chart whose CSS reads data(shapeWidth). No-op today; load-bearing next commit. Bug fixes, all verified dead in the current build: - Dialog.tsx: a missing space glued `ff-dialog` onto the next class, producing `ff-dialogdata-[state=open]:...`. Cost overflowV dialogs their open animation AND broke Sandbox.tsx's `.ff-dialog` lookup, so the sandbox upgrade prompt fired over open dialogs instead of waiting. - Select.tsx: `focus:show-md` (typo for shadow-md), `rounded-xs` (not a Tailwind 3 class), and a duplicated `flex`. - LogIn.tsx: `text-md`, which has no key in the scale. - ImportDataDialog.tsx: `italics` typo. - Typography.tsx: `text-${size}` cannot be extracted by Tailwind's scanner; it only worked because every value happened to appear as a literal elsewhere. Replaced with a static map before the page pass can remove the last literal and turn a latent bug into a live one. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * feat: modernize the visual system — Inter, neutral ramp, type scale The app read as dated for four measurable reasons, all of them tokens rather than markup: - The `neutral` ramp was warm/mauve, not neutral. Every stop was red-dominant (#fcf8fb, #f3eef0, #362e2e), which is why neutral surfaces looked visibly pink. 571 usages, all fixed by one config change. - The type scale ran a full step large with 1.16 body leading (base was 19px/22px), making everything chunky and hard to read. - IBM Plex Sans carried the whole interface, with font-bold 72 times. - No radius or shadow discipline; borderRadius and boxShadow were not in the config at all. Tokens now live in src/lib/designTokens.js, which tailwind.config.js requires and /d renders, so the design system page cannot drift. Type: - Inter for the interface, self-hosted and subset to latin + latin-ext with the opsz axis pinned to 14 — 874KB TTF down to a 101KB woff2 that keeps the full 100-900 weight range. Preloaded, declared in index.html. Verified: full glyph coverage for fr/de/es/pt-br; ko/hi/zh fall through to system faces exactly as they did with Plex. - IBM Plex Sans stays on the Google CDN as the display face (wordmark, page titles), because the same family name is a legacy chart font and customCssOnly charts depend on document-level availability. - slang.css sets `html { font-family }` after Tailwind's preflight at equal specificity, so it — not tailwind.config.js — was deciding the UI font. Overridden via :root, which beats slang's :where(:root). - Scale retuned to 12/14/16/18/20/24/30/36/48 with real body leading (1.16 -> 1.5) and optical tracking at display sizes. Colour: neutral ramp swapped for a true neutral; background #FAFAF7 -> #FAFAFA; foreground unified at #18181B across Tailwind and slang, whose hand-typed *Hsl siblings were updated with it. neutral-500 on white goes 3.9:1 -> 4.83:1, so Label (previously 2.3:1) now passes WCAG AA. blue/purple/green/orange deliberately untouched — purple is the pricing identity and blue reaches the frozen pricing surface for no visible gain. Focus ring unified on blue-600; it previously shipped as three different values in three spellings. /pricing is repaired, not restyled. Six sites used arbitrary values that do not move with a scale change — Pricing2.tsx:398 would have inverted from 18/19/23 to 18/16/18. Each was re-pointed at on-scale sizes that reproduce the shipped rendering. The "/" optical nudge was re-measured in the browser (the old 50/33px pair at -4px sat 2px below the price's optical centre; 48/24px needs -7px for the same 2px). min-h-[210px] was measured and kept: content is 183px, so the floor stays active and the card outline is unchanged. Also fixed four text controls that sat under the 16px iOS auto-zoom threshold (two pushed there by this change, two already broken). Verified: 25 suites / 564 unit tests, 18 e2e, and all 10 template visual goldens pass UNCHANGED — chart rendering is untouched. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> --------- Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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.
Release of the visual modernization pass. One feature PR since v1.68.0.
What ships
Type — Inter for the interface (self-hosted, 101KB subset,
opszpinned to 14), IBM Plex Sans retained as the display face for the wordmark and page titles. Scale down a full step, body leading 1.16 → 1.5.Colour — the
neutralramp swapped from warm/mauve to true neutral (every old stop was red-dominant, which is why neutral surfaces read pink), background#FAFAF7→#FAFAFA,foregroundunified at#18181Bacross Tailwind and slang.neutral-500on white goes 3.9:1 → 4.83:1, soLabelnow passes WCAG AA where it previously sat at 2.3:1.Design system —
/drebuilt into a real inventory, gated to non-production. Tokens live inapp/src/lib/designTokens.js, whichtailwind.config.jsrequires and the page renders, so it can't drift./pricingwas repaired, not restyled — six sites used arbitrary values that don't move with a scale change; each was re-pointed at on-scale sizes reproducing the shipped rendering. Purple androunded-3xluntouched.Also: five latent dead-class bugs fixed (including one that was breaking
Sandbox.tsx's.ff-dialoglookup, so the upgrade prompt fired over open dialogs), and four text controls raised above the 16px iOS auto-zoom threshold.Verification
All 10 template visual goldens pass unchanged — chart rendering is untouched. 25 suites / 564 unit tests, 18 e2e, production build clean. CI green on #815, and the preview deploy confirmed the font loads and the
/dgate behaves in both directions.Note on measurement
This lands in the same window as the v1.68.0 pricing revert, so the two effects won't be cleanly separable in the conversion data. That was a known trade-off, accepted deliberately rather than overlooked.
Post-deploy
Nothing operational — no env vars, no Stripe changes, no migrations. Worth a quick look at
/and/pricingin both light and dark once prod is live.🤖 Generated with Claude Code