Apply PATCHBAY design system - #122
Open
virgilvox wants to merge 4 commits into
Open
Conversation
Adopt the PATCHBAY visual language across the editor in light and dark mode. - Design tokens (light + dark) with theme switching via data-theme, a toolbar toggle, and a no-flash init script. Space Grotesk and Spline Sans Mono. - Rework canvas nodes into flat card tiles with a signal-colored grip, icon, and mono label, hard offset block shadows, bordered circular ports, and signal-colored bezier cables with a flowing dash. Dot-grid canvas. - Color each node by nearest-match of its original color to the signal palette, so node colors stay varied and adapt to the theme. - Restyle the palette (full-width grip chips with category dots), toolbar (flat buttons, green deploy, flow tabs, new logo), panels, node editor, dialogs, inputs, and the code editor syntax theme. - Add a corner minimap, a fit-to-view button, and per-flow tab thumbnails. - Zoom toward the pinch and cursor point. - Flatten the buttons keypad and slider widgets. - New PageNodes logo and favicon (svg, multi-size ico, apple-touch). - Add the PATCHBAY design system reference under docs/.
- Align grid-dot and grain opacity tokens to the canonical design system values. - Restyle dialog and auth buttons to the PATCHBAY button language (mono uppercase, 2px edge, block shadow with hover lift) so they match the node editor buttons. - Replace remaining hardcoded danger rgba with danger token mixes. - Optimize the README screenshot.
Widget nodes (the buttons keypad and the slider) render their own controls and have no grip in the design system. Suppress the grip for renderExtra nodes and give them an icon and title header instead. Make the standard node grip flush and full-height to match the design.
✅ Deploy Preview for pagenodes ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
The brand mark used var(--card) for the two source nodes, which is dark in dark mode and nearly vanished against the dark toolbar. Add a --logo-node token (card in light, a light cream in dark) so the mark stays legible in both themes, matching the design system's dark logo variant.
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.
Summary
Adopts the PATCHBAY design system across the editor, in light and dark mode.
What changed
data-theme, a toolbar toggle that persists and honorsprefers-color-scheme, and a no-flash init script. Space Grotesk for UI, Spline Sans Mono for labels and values.docs/.Notes
npm run lintandnpm run buildpass.