Skip to content

feat: squircle corners#1

Open
mixflavor wants to merge 1 commit into
mainfrom
feat/squircle-corners
Open

feat: squircle corners#1
mixflavor wants to merge 1 commit into
mainfrom
feat/squircle-corners

Conversation

@mixflavor

Copy link
Copy Markdown
Contributor

What

Layers continuous-curvature squircle corners on top of the existing border-radius across marktile's finite-radius UI surfaces — lanes, cards, buttons, inputs, popups, the prompt/edit/archive modals, the lane chevron and the TOC drag ghost.

Mechanism (mirrors the standard already shipped in cver.net & liquidframe):

  • :root { --corner: squircle; } token (a custom property is inherited, so this is the clean carrier).
  • corner-shape: var(--corner); added next to each finite border-radius rule.

Zero regression

corner-shape is Chromium-only as of mid-2026 — Safari/WebKit and Firefox ignore it and keep the plain border-radius arc. It also only renders when a non-zero radius is present. So this is pure progressive enhancement with zero visual regression.

Pills (border-radius: 999px) and the full-screen border-radius: 0 focus editor are deliberately left untouched.

Layer continuous-curvature (squircle) corners on top of the existing
border-radius on card/lane/button/panel/input surfaces via a
`--corner: squircle` token and `corner-shape: var(--corner)`.

corner-shape is Chromium-only as of mid-2026 (Safari/WebKit & Firefox
ignore it and keep the plain border-radius arc), and it requires a
non-zero radius to render — so this is pure progressive enhancement
with zero visual regression. Pills (border-radius: 999px) and the
full-screen 0-radius editor are deliberately left untouched.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants