refactor: scoped theme contracts for navbar and sidebar chrome#4518
refactor: scoped theme contracts for navbar and sidebar chrome#4518adrianthedev wants to merge 1 commit into
Conversation
Introduce overridable CSS variable contracts on `.top-navbar` and `.avo-sidebar` so installs can recolor the chrome locally without touching the primitive neutral palette. Add main-content corner radius knobs driven by container-style queries (navbar notch alignment), a focus-visible outline on the main content panel, and two dummy-app theme examples (canvas, coastal) demonstrating end-to-end retheming.
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 488ccc8. Configure here.
|
|
||
| @container style(--navbar-notch-enabled: true) and style(--top-navbar-start-notch-align-with-main-content: true) { | ||
| --main-content-start-radius: var(--main-content-radius); | ||
| } |
There was a problem hiding this comment.
Start corner radius regression when sidebar is closed
Medium Severity
The --main-content-start-radius defaults to 0px and only becomes rounded when both --navbar-notch-enabled: true AND --top-navbar-start-notch-align-with-main-content: true. Since the latter defaults to false, the start-start corner is always flat. Previously, it was always rounded via rounded-ss-(--navbar-notch-radius) and only flattened by the now-removed .sidebar-open .main-content { rounded-ss-none } rule. This means when the sidebar is closed on desktop or on mobile, the content's start corner is flat but the start notch (::before) is still visible at position 0, creating a visual mismatch that didn't exist before. The PR states "No behavioral change to the default theme" but this changes the geometry.
Additional Locations (1)
Reviewed by Cursor Bugbot for commit 488ccc8. Configure here.
1 participant
Summary
Prep work for full chrome theming. Today the navbar and sidebar are painted with hard-coded primitive neutral tokens (
--color-avo-neutral-800, etc.), which means an install can't recolor the chrome without overriding the global palette and affecting everything else. This PR carves out scoped CSS variable contracts on.top-navbarand.avo-sidebarso each region owns its own palette and can be re-themed in isolation — popovers, dropdowns, and main content keep using their own surface tokens.What changed
layout.css) — every navbar surface (search input, header links, sidebar toggle, controls) now reads from--top-navbar-*variables defined on.top-navbar. Defaults map to the existing neutral palette, so the rendered result is unchanged.--color-navbar-backgroundis kept as the global override knob feeding the scoped--top-navbar-background.sidebar.css) — sidebar background, borders, content, link hover/active, focus, and profile avatar now read from--sidebar-*variables on.avo-sidebar, replacing inline@apply text-content/color-mixusage.color_scheme_switcher.css) — inline pill and compact trigger consume the navbar control tokens instead of fixed neutrals.layout.css+variables.css) — new--main-content-radiusand a--top-navbar-start-notch-align-with-main-contentflag, driven by@container style(...)queries, let layouts align the navbar's start notch with the content panel edge. Adds afocus-visibleoutline on the main content panel.avo_theme_canvas.css(chrome blends into the page background in light/dark) andavo_theme_coastal.css(custom teal palette), wired into the head partial as commented-outstylesheet_link_tags to demonstrate the ejection-based retheming flow.left/rightrules to logicalinset-inlinefor RTL.No behavioral change to the default theme — defaults resolve to the current palette. The contracts are the new public surface for theming.
Test plan
Visual check in the dummy app: uncomment one of the
stylesheet_link_taglines inspec/dummy/app/views/avo/partials/_head.html.erband confirm the navbar/sidebar re-theme correctly in both light and dark mode, with the default (no extra stylesheet) appearance unchanged.🤖 Generated with Claude Opus 4.8 (1M context, extended thinking) via Claude Code
Note
Low Risk
Styling-only refactor with defaults mapped to the existing palette; main visual risk is subtle layout/notch or RTL regressions without automated CSS coverage.
Overview
Introduces scoped CSS theme contracts on
.top-navbarand.avo-sidebarso navbar and sidebar chrome can be recolored without touching global neutral tokens. Navbar search, header links, sidebar toggle, and color-scheme switcher triggers now read--top-navbar-*(defaults preserve today’s neutrals); sidebar links, profile, and status chrome read--sidebar-*.Adds layout knobs
--main-content-radiusand--top-navbar-start-notch-align-with-main-content, with@container style(...)rules so main content top radii and the start navbar notch can align with the content edge; drops the desktop rule that forcedrounded-ss-nonewhen the sidebar is open. Small polish: breadcrumb fade pseudo-elements useinset-inline, main content gets afocus-visibleoutline, and the dummy app ships commented canvas / coastal theme stylesheets demonstrating overrides via the head partial.Reviewed by Cursor Bugbot for commit 488ccc8. Bugbot is set up for automated code reviews on this repo. Configure here.