Add Liquid Leaf, a glossy green sap surface, and use it for live state - #8
Add Liquid Leaf, a glossy green sap surface, and use it for live state#8maceip wants to merge 1 commit into
Conversation
Liquid glass outdoors: a translucent green surface with a meniscus, a specular highlight that follows the pointer, a lit rim and shaded foot, backdrop frost, a coloured glow, and a squash-then-spring press with a short turbulence wobble. Two scenes share the tokens: outdoor (day) and indoor (night), the first sketch of a dark theme. Rebuilt in CSS and SVG from the model liquid-dom uses in its WebGPU shader (SDF rim, lit specular band, adaptive blur, corner smoothing), because that renderer needs WebGPU plus a Chrome flag and carries no license; nothing is vendored. - ui/src/liquid: tokens, .leaf surface and button/pill/card/dot variants, goo (metaball) and wobble filters, <Leaf/> with light and press hooks - Applied to the live pill, the primary action, the sidebar agent card and presence drops; everything else keeps the flat chrome for comparison - docs/design/liquid-leaf.html shows both scenes; liquid-leaf.md explains what was taken from liquid-dom and how to build on it - Reduced motion disables the spring, wobble and breathing
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: e1b434bb34
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| <Leaf | ||
| variant="button" |
There was a problem hiding this comment.
At viewport widths up to 780px, the responsive stylesheet still targets .page-heading > .button to collapse this action to a 34px icon-only control, but the replacement no longer has the button class. Consequently, the full “New contribution” label and desktop padding remain on narrow screens, squeezing and wrapping the heading content; update the media-query selectors to include the new leaf button.
Useful? React with 👍 / 👎.
1 participant
What
Liquid Leaf: liquid glass, outdoors. A translucent green sap surface with a meniscus along the top, a specular highlight that follows the pointer, a lit rim and shaded foot, backdrop frost, a coloured glow into the page, and a squash-then-spring press with a short turbulence wobble. Two scenes share one set of tokens: outdoor (default, day) and indoor (
[data-scene="indoor"], night, moss under lamplight) — the first sketch of a dark theme.Rebuilt in CSS and SVG from the model liquid-dom uses in its WebGPU shader (SDF rim, lit specular band, adaptive blur, corner smoothing). liquid-dom itself needs WebGPU plus a Chrome flag for DOM content and its core package carries no license file, so nothing is vendored.
ui/src/liquid/liquid-leaf.css: tokens, the.leafsurface, button/pill/card/dot variants, goo (metaball) and wobble filtersui/src/liquid/LiquidLeaf.tsx:<LeafDefs/>,<Leaf variant=…/>,useLeafLight,useLeafPressLook at
docs/design/liquid-leaf.html— both scenes side by side; open locallydocs/design/liquid-leaf.md— what was taken from liquid-dom and what wasn'tVerification
npm run checkandnpm run test:uipass.Landing
Real overlap with the Grove PR (both add a defs component and an import at the top of
App.tsx); otherwise adjacent-line conflicts only.