Layout and type follow the platform's other apps - #357
Merged
Merged
Conversation
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.
Layout and type follow the platform's other apps (#357)
The Studio now uses the layout and type of the platform's newer apps.
Navigation and grounds. In light mode the app navigation sits on the gray ground and pages on the panel color; in dark mode the navigation is the lighter of the two. The active and hover pills are neutral, and labels are regular weight: the accent marks what is interactive, not where you are. The Settings and Help section lists follow the same pattern. The brand line drops its letter spacing.
Page header bar. Search, Query, Stats, Agents, Workflows, and History share one header: the section's name and a one-line note on what it covers (full text on hover, hidden at phone width), ruled off below. The title cards at the top of those pages are gone. History's caveat that snapshots record the file list and not file contents stays on the page as a note.
Edge to edge. Chat, the library, Settings, and Help run flush from the navigation, with no inset card frame.
Type. Public Sans with tabular figures, replacing Geist; Geist Mono stays for code.
--font-sansis set so the shared packages' builds pick it up.Contrast check. A new test (
web/test/contrast.test.ts) checks every text color against the grounds it is drawn on, for all 6 accents, 3 surfaces, and both schemes, at WCAG AA (4.5:1), using the theme package's owncontrastRatioandderiveTheme. It found the light muted gray at 4.26:1 on the gray ground, which the navigation now sits on; it is now#646e78(4.72:1 there, 5.19:1 on white). Four places that used the lighter--pw-muted-2for readable text (the sync status line, scope counts, History's check line, the Libraries table) now use the muted color; that token remains for icons and disabled controls.Checked in headless Chrome at desktop and phone width, light and dark, across every view. 201 server and 53 web tests pass.