Skip to content

UI polish: lighter surfaces, framed cards, tab tracks, readable errors, softer focus - #1483

Merged
marcinz606 merged 8 commits into
mainfrom
feat/brighter-ui
Oct 22, 2026
Merged

marcinz606 merged 8 commits into
mainfrom
feat/brighter-ui

Conversation

@marcinz606

@marcinz606 marcinz606 commented Oct 22, 2026 •

Copy link
Copy Markdown
Owner

UI polish for the right panel. Each change is a separate commit.

Changes

  • Lighter surfaces. Every dark surface, border and warm selection chip moves up by the same step. The panel changes from #0D0D0D to #252525. Text, accents, channel colors and photo marks keep their values. Hint text is 5.0:1 on the panel.
  • Card outline. A card header inherited QPushButton's rounded bottom corners and had no side outline. The seam line curled up at both ends, and the body's outline started with its own corner. Now the header has an outline on all sides and square bottom corners. A collapsed card keeps its round corners ([checkable="true"]:!checked, because Qt matches nothing on :checkable or :unchecked).
  • Tab strips on a track. The main tab strip was a full-width band in the card header color, so it merged with the first card's header. The page tabs sat on the bare panel. Now every OverflowBar draws the SegmentedChoice track, PanelTab does not draw its hairline, and the main strip has a space_sm gap above the cards.
  • Readable error hints. QLabel[hint="error"] used error at the small size, 2.9:1 on a card. A new error_text tier (#FF5A5A, 4.7:1 on a card) gives error copy the same text tier that the channel colors have. Error hints now show at body size. error stays for invalid-input edges and the failed-frame badge, which has white on it.
  • Find field lined up. The Find field ran 8px in from each side. Now it uses the same edge as the tab strip and the cards. Its top and bottom margins still drag the panel.
  • Hint icons. Before, a warning hint differed from a plain hint only by its amber color. Now hint_label gives a warning or an error hint an alert icon in its own color, in a left margin, so the hint does not depend on color alone.
  • Slider focus. The 2px white ring on the slider handle is gone. A Tab-focused slider row now gets the same border_focus edge as a focused button. A ring on the handle cannot have a gap and still fit in the 15px track. A click or a drag shows no edge.
  • Softer focus edge. border_focus changes from #949494 to #7A7A7A. It is 3.6:1 on the panel and 3.3:1 on a card.

Notes

  • Only the UI changes. Rendered photos and thumbnails do not change, so THUMBNAIL_RENDER_VERSION is not bumped.
  • The guided tour uses border_focus for its highlight ring, so the ring is also softer.
  • Amber warning hints stay at the small size. Most of them are gray hints that turn amber, so a size change would make the layout jump.

Testing

  • Rendered the real app headless under Xvfb at 2× for each change: Frame, Look and Export tabs, open and collapsed cards, a focused button and the soft-proof error hint.
  • make lint and make type pass.
  • Tests for the changed tokens and widgets pass: theme tokens, toggle look, panel tab, overflow bar, collapsible, right panel, sidebars and tutorial overlay.

Panels, cards, headers, inputs, borders and the warm selection chips
all move up by the same step (panel #0D0D0D -> #252525), so the UI
reads as dark gray instead of near black. Text, accents, channel
colors and photo marks keep their values. Hint text stays above
4.5:1 on the panel.
The header inherited QPushButton's rounded bottom corners and had no
side outline, so its seam line curled up at both ends and the body's
outline started with a corner of its own. The header now carries the
outline on all sides with square bottom corners; a collapsed card
keeps its rounded ones.
The main tab strip was a full-width band in the card header color,
so it merged with the first card's header, while the page tabs sat
on the bare panel. Every tab strip now draws the SegmentedChoice
track, its tabs drop their own hairline, and the main strip keeps a
small gap above the cards.
Error hints used the error red at the small size, under 3:1 on a
card. They now take a lighter error_text tier at body size, as the
channel colors keep a text tier. error stays for invalid-input edges
and the failed-frame badge, where white sits on it.
border_focus drops from #949494 to #7A7A7A: still above 3:1 on the
panel and cards, but no longer the brightest edge in the panel.
The Find field sat 8px in from each side while the tab strip and the
cards below it run to the panel edge. It now runs edge to edge too;
its top and bottom margins still drag the panel.
A warning hint differed from a plain one only by its amber hue, which a
user with a color vision deficiency can miss. hint_label now returns a
label that keeps a left margin for a warning or an error and paints an
alert icon there in the hint's color, centered on the first line;
set_hint_kind keeps it in step.
A focused slider handle took a 2px white ring, the brightest edge in the
panel, unlike every other control's 1px border_focus edge. A ring on the
handle itself cannot keep a gap and fit the 15px track. The slider row
now takes the border_focus edge a focused button takes, for Tab focus
only, so a click or a drag leaves none behind.
@marcinz606
marcinz606 merged commit 53b705f into main Oct 22, 2026
1 check passed
@marcinz606
marcinz606 deleted the feat/brighter-ui branch October 22, 2026 22:14
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.

1 participant