Nam Pham Dinh ThanhandClaude Opus 5
509ae96854
Settings sat closer to its icon than Dashboard and Giám sát do. Those are tree rows, laid out by the style; Settings was a QPushButton, whose icon-to-label gap is also the style's — and the two do not agree. The Windows fix for this was a 19px icon box that nudged the label 1px, which is exactly the kind of tuning that only holds on the machine it was measured on: on macOS the gap is tighter again. The row now lays itself out, 4px in and 6px between, the same two numbers the tree uses. Icon x=4 and label x=26 against the rows' 4 and 26 — equal, not close. The language drop-list showed a tick over its own text. macOS marks the current row with a checkmark and Windows does not, and the popup inherits the combo's width — which for "EN/JP/VN" is about 50px, all of it needed by the letters. widen_popup() measures the longest item plus the platform's indicator and sets the view's minimum, so the tick has its own room wherever it is drawn. That check found two more: the project picker (191px of text in a 138px popup) and the provider list (221px in 138px) were both truncating names here, tick or no tick. Neither could be reproduced on this machine, so the checks assert the property that made the bug possible — spacing we control rather than the style's, and a popup measured against text + indicator — not the platform. 21/21 checkers pass. check_nav segfaults in Qt teardown after printing its verdict, twice in one suite run and 0 times in 8 standalone runs; pre-existing. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
797 lines
34 KiB
Python
797 lines
34 KiB
Python
"""The app's visual system: semantic design tokens + one style sheet template.
|
|
|
|
This replaces the previous mechanism, which was two hand-written Qt style
|
|
sheets (``_DARK`` / ``_LIGHT``) that duplicated each other and hard-coded ~105
|
|
hex literals, with a single source of truth:
|
|
|
|
Palette (tokens) -> _TEMPLATE (one QSS) -> stylesheet(theme)
|
|
|
|
Rules of the system
|
|
-------------------
|
|
* **Nothing outside this module names a colour.** Widgets that paint with
|
|
``QPainter`` (charts, canvases, syntax highlighters) call :func:`palette` and
|
|
read a token. Widgets that style themselves declaratively should instead be
|
|
given an ``objectName`` and styled in ``_TEMPLATE`` below.
|
|
* **Tokens are semantic, not literal.** ``danger``/``text_muted``/``code_string``
|
|
— never ``blue``/``grey2``. Adding a theme means adding a :class:`Palette`,
|
|
not editing a style sheet.
|
|
* **No gradients, no glows.** The palette is Visual Studio Code's — "Dark
|
|
Modern" and "Light Modern", taken from the shipped theme JSON. Flat surfaces,
|
|
square-ish corners, one accent spent only on what the user acts on. Depth
|
|
comes from the surface ramp and hairline borders, not from colour. Note the
|
|
VS Code silhouette: the nav rail is *darker* than the content area, not
|
|
lighter.
|
|
|
|
Contrast is held to WCAG AA (4.5:1) for body text and for text on filled
|
|
buttons. That is why ``accent`` and ``accent_solid`` are separate tokens: on a
|
|
dark background a blue readable *as text* is too light to carry white *as a
|
|
fill*, so each role gets the tint that passes.
|
|
|
|
Four VS Code values fall below AA and are nudged just far enough to clear it —
|
|
dark line numbers (3.59:1), light faint text on the sidebar (4.28:1), light
|
|
green (4.33:1) and light amber (3.12:1). Each carries a comment naming the
|
|
original value, so the deviation is auditable rather than silent.
|
|
"""
|
|
from __future__ import annotations
|
|
|
|
from dataclasses import dataclass, asdict
|
|
from string import Template
|
|
|
|
|
|
@dataclass(frozen=True)
|
|
class Palette:
|
|
"""Every colour and shape value the interface is allowed to use."""
|
|
|
|
name: str
|
|
|
|
# --- surfaces: a 4-step ramp from the window back to the frontmost layer.
|
|
bg: str # window / canvas backdrop
|
|
surface: str # panels, cards, group boxes (NOT the nav rail)
|
|
surface_raised: str # inputs, lists, trees — things you type or pick in
|
|
overlay: str # menus, tooltips, popups (floats above everything)
|
|
sunken: str # logs, code, terminals — things you read into
|
|
hover: str # hover wash on rows, tabs, ghost buttons
|
|
active: str # pressed / held state
|
|
|
|
# The nav rail gets its own step rather than borrowing `surface`. It is a
|
|
# permanent region of the window, not a card floating on the page.
|
|
#
|
|
# Following VS Code, the rail is *darker* than the content area (dark) or a
|
|
# shade off white (light). The step is small on purpose — VS Code separates
|
|
# the rail with a border, not a big tonal jump — so `nav_border` is doing
|
|
# real work here and must stay visible.
|
|
nav_bg: str
|
|
nav_border: str
|
|
nav_hover: str
|
|
nav_selected: str
|
|
|
|
# --- lines
|
|
border: str # default hairline
|
|
border_strong: str # hairline that must survive next to a filled surface
|
|
focus_ring: str # keyboard/typing focus
|
|
|
|
# --- text
|
|
text: str
|
|
text_muted: str # secondary copy, captions, group-box titles
|
|
text_faint: str # metadata, timestamps, placeholder
|
|
text_disabled: str
|
|
on_accent: str # text drawn on top of a filled accent/status surface
|
|
|
|
# --- accent: `accent` tints text & icons, `accent_solid` fills buttons.
|
|
accent: str
|
|
accent_solid: str
|
|
accent_solid_hover: str
|
|
accent_solid_active: str
|
|
accent_soft: str # translucent wash for selected rows (QSS only)
|
|
accent_soft_hover: str
|
|
accent_wash: str # the same tint pre-blended to a solid, for Qt rich
|
|
# text (bgcolor=, <table>) where alpha is ignored
|
|
|
|
# --- status
|
|
success: str
|
|
success_soft: str
|
|
warning: str
|
|
warning_soft: str
|
|
danger: str
|
|
danger_solid: str
|
|
danger_solid_hover: str
|
|
danger_soft: str
|
|
info: str
|
|
info_soft: str
|
|
purple: str
|
|
purple_soft: str
|
|
pink: str
|
|
pink_soft: str
|
|
|
|
# --- selection (text selection inside editors and inputs)
|
|
selection_bg: str
|
|
selection_fg: str
|
|
|
|
# --- scrollbars
|
|
scroll_handle: str
|
|
scroll_handle_hover: str
|
|
|
|
# --- code & terminal
|
|
code_bg: str
|
|
code_fg: str
|
|
code_gutter_bg: str
|
|
code_gutter_fg: str
|
|
code_selection: str
|
|
code_comment: str
|
|
code_keyword: str
|
|
code_type: str
|
|
code_func: str
|
|
code_attr: str
|
|
code_string: str
|
|
code_number: str
|
|
code_error: str
|
|
|
|
# --- diff / inline change badges
|
|
diff_add_bg: str
|
|
diff_add_fg: str
|
|
diff_del_bg: str
|
|
diff_del_fg: str
|
|
|
|
# --- charts
|
|
chart_grid: str
|
|
chart_label: str
|
|
|
|
# --- conversation & graph node roles
|
|
role_user: str
|
|
role_assistant: str
|
|
role_tool: str
|
|
role_result: str
|
|
role_error: str
|
|
|
|
# --- shape & type
|
|
radius_sm: int
|
|
radius: int
|
|
radius_lg: int
|
|
font_family: str
|
|
font_size: int
|
|
font_mono: str
|
|
|
|
|
|
_FONT = '"Segoe UI Variable Text", "Segoe UI", "Inter", "Helvetica Neue", "Yu Gothic UI", "Meiryo", sans-serif'
|
|
_MONO = '"Cascadia Code", "JetBrains Mono", "Consolas", "SF Mono", monospace'
|
|
|
|
|
|
DARK = Palette(
|
|
name="dark",
|
|
# ---- VS Code "Dark Modern" ----------------------------------------------
|
|
# Values taken from the shipped theme JSON. Where VS Code's own choice falls
|
|
# below WCAG AA it is nudged just far enough to pass; each such value carries
|
|
# a note with VS Code's original and the measured ratio.
|
|
bg="#1F1F1F", # editor.background
|
|
surface="#252526", # panel / card
|
|
surface_raised="#313131", # input.background
|
|
overlay="#252526", # menus, tooltips
|
|
sunken="#181818", # logs, terminals — below the ramp
|
|
hover="#2A2D2E", # list.hoverBackground
|
|
active="#37373D", # list.inactiveSelectionBackground
|
|
# The sidebar is DARKER than the editor — that is the VS Code silhouette.
|
|
nav_bg="#181818", # sideBar.background
|
|
nav_border="#2B2B2B", # sideBar.border
|
|
nav_hover="#2A2D2E",
|
|
nav_selected="#04395E", # list.activeSelectionBackground
|
|
border="#2B2B2B", # panel.border
|
|
border_strong="#3C3C3C", # input.border
|
|
focus_ring="#0078D4", # focusBorder
|
|
text="#CCCCCC", # editor.foreground
|
|
text_muted="#9D9D9D", # descriptionForeground
|
|
text_faint="#9A9A9A", # lifted: #8B8B8B was 3.82:1 on input surfaces
|
|
text_disabled="#5A5A5A",
|
|
on_accent="#FFFFFF",
|
|
accent="#4DAAFC", # textLink.foreground — accent as TEXT
|
|
accent_solid="#0078D4", # button.background — accent as FILL
|
|
accent_solid_hover="#026EC1",
|
|
accent_solid_active="#005FB8",
|
|
accent_soft="rgba(0,120,212,0.22)",
|
|
accent_soft_hover="rgba(0,120,212,0.32)",
|
|
accent_wash="#12283C", # pre-blended: Qt rich text ignores alpha
|
|
success="#89D185", # gitDecoration added
|
|
success_soft="rgba(137,209,133,0.16)",
|
|
warning="#CCA700", # editorWarning
|
|
warning_soft="rgba(204,167,0,0.16)",
|
|
danger="#F76464", # editorError #F14C4C lifted (4.29:1 on panels)
|
|
danger_solid="#C4302B",
|
|
danger_solid_hover="#D9433C",
|
|
danger_soft="rgba(241,76,76,0.16)",
|
|
info="#4DAAFC",
|
|
info_soft="rgba(77,170,252,0.16)",
|
|
purple="#C586C0", # Dark+ syntax purple
|
|
purple_soft="rgba(197,134,192,0.16)",
|
|
pink="#D16D9E",
|
|
pink_soft="rgba(209,109,158,0.16)",
|
|
selection_bg="#264F78", # editor.selectionBackground
|
|
selection_fg="#FFFFFF",
|
|
scroll_handle="#4E4E4E", # scrollbarSlider
|
|
scroll_handle_hover="#5A5A5A",
|
|
code_bg="#1F1F1F",
|
|
code_fg="#CCCCCC",
|
|
code_gutter_bg="#1F1F1F",
|
|
# VS Code uses #6E7681 for line numbers — only 3.59:1. Lifted to clear AA.
|
|
code_gutter_fg="#858D97",
|
|
code_selection="#264F78",
|
|
code_comment="#6A9955", # ---- Dark+ syntax, unchanged --------------
|
|
code_keyword="#569CD6",
|
|
code_type="#4EC9B0",
|
|
code_func="#DCDCAA",
|
|
code_attr="#9CDCFE",
|
|
code_string="#CE9178",
|
|
code_number="#B5CEA8",
|
|
code_error="#F44747",
|
|
diff_add_bg="#1B3A1B", # diffEditor inserted, pre-blended
|
|
diff_add_fg="#89D185",
|
|
diff_del_bg="#4B1818", # diffEditor removed, pre-blended
|
|
diff_del_fg="#F76464",
|
|
chart_grid="#2B2B2B",
|
|
chart_label="#9D9D9D",
|
|
role_user="#4DAAFC",
|
|
role_assistant="#4EC9B0",
|
|
role_tool="#C586C0",
|
|
role_result="#89D185",
|
|
role_error="#F14C4C",
|
|
radius_sm=3, # VS Code is squarer than the previous look
|
|
radius=4,
|
|
radius_lg=6,
|
|
font_family=_FONT,
|
|
font_size=13,
|
|
font_mono=_MONO,
|
|
)
|
|
|
|
|
|
LIGHT = Palette(
|
|
name="light",
|
|
# ---- VS Code "Light Modern" ---------------------------------------------
|
|
bg="#FFFFFF", # editor.background
|
|
surface="#F8F8F8", # sideBar / panel
|
|
surface_raised="#FFFFFF", # input.background
|
|
overlay="#FFFFFF",
|
|
sunken="#F3F3F3",
|
|
hover="#F2F2F2", # list.hoverBackground
|
|
active="#E8E8E8", # list.activeSelectionBackground
|
|
nav_bg="#F8F8F8", # sideBar.background
|
|
nav_border="#E5E5E5", # sideBar.border
|
|
nav_hover="#F2F2F2",
|
|
nav_selected="#E4E6F1", # active row, tinted toward the accent
|
|
border="#E5E5E5",
|
|
border_strong="#CECECE", # input.border
|
|
focus_ring="#005FB8", # focusBorder
|
|
text="#3B3B3B", # editor.foreground
|
|
text_muted="#616161",
|
|
# VS Code uses #767676 — 4.28:1 on the sidebar. Darkened to clear AA there.
|
|
text_faint="#6E6E6E",
|
|
text_disabled="#A0A0A0",
|
|
on_accent="#FFFFFF",
|
|
accent="#005FB8", # textLink / button
|
|
accent_solid="#005FB8",
|
|
accent_solid_hover="#0258A8",
|
|
accent_solid_active="#004C97",
|
|
accent_soft="rgba(0,95,184,0.10)",
|
|
accent_soft_hover="rgba(0,95,184,0.16)",
|
|
accent_wash="#E6EEF8",
|
|
# VS Code green #388A34 is 4.33:1 and amber #BF8803 only 3.12:1 — both lifted.
|
|
success="#317A2D",
|
|
success_soft="#DFF3DE",
|
|
warning="#8F6500", # VS Code #BF8803 = 3.12:1
|
|
warning_soft="#FBF0D0",
|
|
danger="#CD3131", # editorError
|
|
danger_solid="#CD3131",
|
|
danger_solid_hover="#B82A2A",
|
|
danger_soft="#FDEFEF", # lightened so #CD3131 clears AA on it
|
|
info="#005FB8",
|
|
info_soft="#DDEBF9",
|
|
purple="#6F42C1",
|
|
purple_soft="#EDE7FA",
|
|
pink="#B3247E",
|
|
pink_soft="#FAE3F0",
|
|
selection_bg="#ADD6FF", # editor.selectionBackground
|
|
selection_fg="#000000",
|
|
scroll_handle="#C1C1C1",
|
|
scroll_handle_hover="#A6A6A6",
|
|
code_bg="#FFFFFF",
|
|
code_fg="#3B3B3B",
|
|
code_gutter_bg="#F8F8F8",
|
|
code_gutter_fg="#656C76", # VS Code #6E7681 = 4.33:1 on the gutter
|
|
code_selection="#ADD6FF",
|
|
code_comment="#008000", # ---- Light+ syntax ------------------------
|
|
code_keyword="#0000FF",
|
|
code_type="#267F99",
|
|
code_func="#795E26",
|
|
code_attr="#E50000",
|
|
code_string="#A31515",
|
|
code_number="#098658",
|
|
code_error="#CD3131",
|
|
diff_add_bg="#DBF4DB",
|
|
diff_add_fg="#1E6F1A",
|
|
diff_del_bg="#FBE3E3",
|
|
diff_del_fg="#B82A2A",
|
|
chart_grid="#E5E5E5",
|
|
chart_label="#616161",
|
|
role_user="#005FB8",
|
|
role_assistant="#267F99",
|
|
role_tool="#6F42C1",
|
|
role_result="#317A2D",
|
|
role_error="#CD3131",
|
|
radius_sm=3,
|
|
radius=4,
|
|
radius_lg=6,
|
|
font_family=_FONT,
|
|
font_size=13,
|
|
font_mono=_MONO,
|
|
)
|
|
|
|
|
|
_PALETTES = {"dark": DARK, "light": LIGHT}
|
|
|
|
|
|
# ---------------------------------------------------------------------------
|
|
# The one style sheet. `$token` placeholders are filled from the Palette above;
|
|
# use `${token}px` where a unit follows the name.
|
|
#
|
|
# Read it as a cascade: reset -> shell -> surfaces -> controls -> chrome.
|
|
# ---------------------------------------------------------------------------
|
|
_TEMPLATE = Template("""
|
|
/* ---- reset ------------------------------------------------------------ */
|
|
* { font-family: $font_family; font-size: ${font_size}px; }
|
|
QWidget { background: $bg; color: $text; }
|
|
QMainWindow::separator { background: $border; width: 1px; height: 1px; }
|
|
QSplitter::handle { background: $border; }
|
|
QSplitter::handle:horizontal { width: 1px; }
|
|
QSplitter::handle:vertical { height: 1px; }
|
|
QSplitter::handle:hover { background: $border_strong; }
|
|
QStatusBar { background: $bg; color: $text_faint; border-top: 1px solid $border; }
|
|
QToolTip {
|
|
background: $overlay; color: $text; border: 1px solid $border_strong;
|
|
border-radius: ${radius}px; padding: 5px 9px;
|
|
}
|
|
|
|
/* Icons are drawn at text scale, not as decoration. */
|
|
QPushButton, QToolButton, QComboBox, QTabBar { qproperty-iconSize: 15px 15px; }
|
|
QTreeWidget#navrail { qproperty-iconSize: 22px 16px; }
|
|
|
|
/* ---- shell ------------------------------------------------------------ */
|
|
QWidget#topbar { background: $bg; border: none; border-bottom: 1px solid $border; }
|
|
QLabel#brand { color: $text; font-size: 15px; font-weight: 700; background: transparent; }
|
|
QWidget#navWrap { background: $nav_bg; border-right: 1px solid $nav_border; }
|
|
QWidget#navWrap QTreeWidget, QWidget#navWrap QListWidget { background: transparent; border: none; }
|
|
QWidget#contentArea { background: $bg; }
|
|
|
|
/* Rail rows sit on nav_bg, so they need their own hover/selected steps — the
|
|
generic ones are tuned against `bg` and wash out here. The active item also
|
|
carries a 2px accent marker, so which section you are in survives even at a
|
|
glance or for anyone who cannot separate the two greys. */
|
|
QWidget#navWrap QTreeWidget::item, QWidget#navWrap QListWidget::item {
|
|
padding: 6px 4px; border-radius: ${radius}px;
|
|
}
|
|
QWidget#navWrap QTreeWidget::item:hover, QWidget#navWrap QListWidget::item:hover {
|
|
background: $nav_hover;
|
|
}
|
|
QWidget#navWrap QTreeWidget::item:selected, QWidget#navWrap QListWidget::item:selected {
|
|
background: $nav_selected; color: $text;
|
|
border-left: 2px solid $accent; font-weight: 600;
|
|
}
|
|
/* Rows the project gate is holding shut: still listed, visibly not open. */
|
|
QWidget#navWrap QTreeWidget::item:disabled { color: $text_faint; }
|
|
/* The pinned bottom group (Dashboard, Monitoring) — one hairline separates it
|
|
from the list above so "occasional" reads apart from "everyday". */
|
|
QTreeWidget#navrailBottom { border-top: 1px solid $nav_border; }
|
|
QScrollArea#navScroll { background: transparent; border: none; }
|
|
QScrollArea#navScroll > QWidget > QWidget { background: transparent; }
|
|
/* Monitoring ▸ Overview reads as titled sections down one column, the way the
|
|
audit page draws it — a quiet caps heading with the content flat underneath,
|
|
not six bordered boxes competing with the cards inside them. */
|
|
QGroupBox#monSection {
|
|
background: transparent; border: none; margin-top: 16px;
|
|
padding: 6px 0 0 0; font-weight: 700;
|
|
}
|
|
QGroupBox#monSection::title {
|
|
subcontrol-origin: margin; subcontrol-position: top left; left: 2px; top: 0;
|
|
padding: 0; color: $text_faint; font-size: 11px; letter-spacing: 0.5px;
|
|
}
|
|
/* Segmented control: two-to-four choices shown side by side (language, theme)
|
|
instead of a drop-list you must open to see what the options even are. */
|
|
QPushButton#segItem {
|
|
background: $surface_raised; color: $text_muted; border: 1px solid $border;
|
|
padding: 4px 12px; margin: 0; border-radius: 0;
|
|
}
|
|
QPushButton#segItem:hover { background: $hover; color: $text; }
|
|
QPushButton#segItem:checked {
|
|
background: $accent_solid; color: #FFFFFF; border-color: $accent_solid; font-weight: 600;
|
|
}
|
|
/* Table of contents down the left of the long dialogs (Settings, Task editor). */
|
|
QListWidget#sectionIndex { background: $surface; border-right: 1px solid $border; }
|
|
QListWidget#sectionIndex::item { padding: 7px 10px; border-radius: ${radius}px; }
|
|
QListWidget#sectionIndex::item:hover { background: $hover; }
|
|
QListWidget#sectionIndex::item:selected {
|
|
background: $nav_selected; color: $text; font-weight: 600;
|
|
}
|
|
/* The strip under the typing box: agent · routing · usage · folder. Reads as
|
|
status, not as a second toolbar, so the eye lands on the input first. */
|
|
QWidget#composerStatus { border-top: 1px solid $border; background: transparent; }
|
|
QWidget#composerStatus QLabel { color: $text_faint; font-size: 11px; }
|
|
QWidget#composerStatus QPushButton, QWidget#composerStatus QComboBox {
|
|
background: transparent; border: none; color: $text_muted; font-size: 11px;
|
|
padding: 2px 6px; border-radius: ${radius_sm}px;
|
|
}
|
|
QWidget#composerStatus QPushButton:hover, QWidget#composerStatus QComboBox:hover {
|
|
background: $hover; color: $text;
|
|
}
|
|
/* Folder: the current path, written as the screen's title. */
|
|
QLabel#folderTitle { color: $text; font-size: 14px; font-weight: 600; background: transparent; }
|
|
/* A pair of view tabs inside a page header (Schedule, GraphRAG) — flatter and
|
|
quieter than the app's main tab bars, since they switch a view, not a page. */
|
|
QTabBar#viewTabs::tab {
|
|
background: transparent; color: $text_muted; border: none;
|
|
padding: 4px 12px; margin: 0 2px; border-radius: ${radius}px;
|
|
}
|
|
QTabBar#viewTabs::tab:hover { background: $hover; color: $text; }
|
|
QTabBar#viewTabs::tab:selected { background: $active; color: $text; font-weight: 600; }
|
|
/* Co4E sidebar section headings — same quiet caps as the rail's RECENTS, so
|
|
"which list am I looking at" is answered on screen, not in a tooltip. */
|
|
/* The action beside a Co4E section heading ("+ Mới", "Quản lý skill…"). The
|
|
wireframe writes these as small accent text; as full buttons they were the
|
|
loudest thing in the sidebar and each cost a row of height. */
|
|
QPushButton#co4eSectionAction {
|
|
background: transparent; border: none; color: $accent;
|
|
font-size: 11px; font-weight: 600; padding: 1px 4px;
|
|
border-radius: ${radius_sm}px; qproperty-iconSize: 11px 11px;
|
|
}
|
|
QPushButton#co4eSectionAction:hover { background: $hover; color: $accent; }
|
|
QPushButton#co4eSectionAction:pressed { background: $active; }
|
|
QPushButton#co4eSectionHdr {
|
|
color: $text_faint; font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
|
|
background: transparent; border: none; text-align: left; padding: 2px 0;
|
|
}
|
|
QPushButton#co4eSectionHdr:hover { color: $text; }
|
|
/* Account row at the foot of the rail: who you are + the settings that follow
|
|
you (provider, language, theme). Separated by a hairline like the group above. */
|
|
QWidget#navAccount { border-top: 1px solid $nav_border; }
|
|
QWidget#navAccount QComboBox {
|
|
background: $surface_raised; border: 1px solid $nav_border; color: $text;
|
|
padding: 3px 6px; border-radius: ${radius}px;
|
|
}
|
|
/* RECENTS section label — quiet, so the thread titles under it read first. */
|
|
QLabel#navSectionHdr {
|
|
color: $text_faint; font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
|
|
padding: 8px 8px 2px 8px; background: transparent;
|
|
}
|
|
QTreeWidget#navRecents { border-top: 1px solid $nav_border; }
|
|
|
|
/* Icon library cells. The audit page's note on this screen is that the cells
|
|
had no visible edge on hover or selection, so you could not tell what you
|
|
were about to pick — "cùng ngôn ngữ thẻ với Agent/Công cụ". */
|
|
QListWidget#iconGrid { background: transparent; border: none; }
|
|
QListWidget#iconGrid::item {
|
|
border: 1px solid transparent; border-radius: ${radius}px;
|
|
color: $text_muted; padding: 4px;
|
|
}
|
|
QListWidget#iconGrid::item:hover {
|
|
border: 1px solid $accent; background: $hover; color: $text;
|
|
}
|
|
QListWidget#iconGrid::item:selected {
|
|
border: 1px solid $accent; background: $accent_wash; color: $text;
|
|
}
|
|
/* Screen title beside its actions, same weight the other admin screens use. */
|
|
QLabel#monTitle { font-size: 15px; font-weight: 700; color: $text; }
|
|
/* Rail header — the primary action, so it is the one filled button up there. */
|
|
QPushButton#navNewChatBtn {
|
|
background: $accent_solid; color: #FFFFFF; border: none; font-weight: 600;
|
|
padding: 7px 10px; border-radius: ${radius}px; text-align: left;
|
|
}
|
|
QPushButton#navNewChatBtn:hover { background: $accent_solid_hover; }
|
|
QPushButton#navNewChatBtn:disabled { background: $border_strong; color: $text_faint; }
|
|
QComboBox#navProjectPick {
|
|
background: $surface_raised; border: 1px solid $nav_border; color: $text;
|
|
padding: 4px 8px; border-radius: ${radius}px;
|
|
}
|
|
/* Stand-in for the picker while the rail is 54px wide: icon only, no arrow —
|
|
the arrow would eat a third of the width for no information. */
|
|
QToolButton#navProjectPickMini {
|
|
background: $surface_raised; border: 1px solid $nav_border; border-radius: ${radius}px;
|
|
padding: 4px; qproperty-iconSize: 16px 16px;
|
|
}
|
|
QToolButton#navProjectPickMini:hover { background: $nav_hover; }
|
|
QToolButton#navProjectPickMini:disabled { background: transparent; border-color: $border; }
|
|
QToolButton#navProjectPickMini::menu-indicator { image: none; width: 0; }
|
|
|
|
QPushButton#navSettingsBtn {
|
|
background: transparent; border: none; color: $text_muted;
|
|
/* Padding stays at 0: the row lays its own icon and label out, so that
|
|
the spacing does not change with the platform's button style. */
|
|
padding: 0; text-align: left; border-radius: ${radius}px;
|
|
/* No side margin: Settings reads as one more row under Dashboard/Giám sát,
|
|
so its icon has to start on their x. A 6px margin put it at 14 — near
|
|
enough the middle of the collapsed 54px rail to look centred. */
|
|
margin: 2px 0px 6px 0px;
|
|
}
|
|
QPushButton#navSettingsBtn:hover { background: $nav_hover; color: $text; }
|
|
QPushButton#navSettingsBtn:pressed { background: $active; }
|
|
|
|
|
|
/* ---- surfaces --------------------------------------------------------- */
|
|
QGroupBox {
|
|
background: $surface; border: 1px solid $border; border-radius: ${radius_lg}px;
|
|
margin-top: 14px; padding: 16px 12px 12px 12px; font-weight: 600;
|
|
}
|
|
QGroupBox::title {
|
|
subcontrol-origin: margin; subcontrol-position: top left; left: 12px; top: 1px;
|
|
padding: 0 6px; color: $text_muted; font-size: 12px; font-weight: 600;
|
|
}
|
|
QFrame[frameShape="4"], QFrame[frameShape="5"] { background: $border; border: none; }
|
|
QScrollArea { background: transparent; border: none; }
|
|
QAbstractScrollArea::corner { background: transparent; }
|
|
|
|
/* ---- tabs: an underline, not a pill. -------------------------------------
|
|
The old pill tabs read as buttons and fought the real buttons for
|
|
attention. A 2px rule under the active label is quieter and unambiguous. */
|
|
QTabWidget::pane { background: $bg; border: none; border-top: 1px solid $border; top: -1px; }
|
|
QTabBar { background: transparent; qproperty-drawBase: 0; }
|
|
QTabBar::tab {
|
|
background: transparent; color: $text_muted; padding: 9px 14px; margin: 0 2px 0 0;
|
|
border: none; border-bottom: 2px solid transparent; font-weight: 500;
|
|
}
|
|
QTabBar::tab:selected { color: $text; border-bottom: 2px solid $accent; font-weight: 600; }
|
|
QTabBar::tab:hover:!selected { color: $text; background: $hover; }
|
|
|
|
/* Co4E flow strip — browser-style tabs, so these stay enclosed. */
|
|
QTabBar#flowTabs::tab {
|
|
background: $surface; color: $text_muted; border: 1px solid $border;
|
|
border-radius: ${radius}px; padding: 6px 10px; margin: 0 3px 0 0; min-height: 22px;
|
|
}
|
|
QTabBar#flowTabs::tab:selected { background: $surface_raised; color: $text; border-color: $border_strong; }
|
|
QTabBar#flowTabs::tab:hover:!selected { background: $hover; color: $text; }
|
|
QPushButton#flowAddBtn {
|
|
background: transparent; color: $text_muted; border: 1px solid $border;
|
|
border-radius: ${radius}px; padding: 6px 0; font-size: 15px; min-height: 22px;
|
|
}
|
|
QPushButton#flowAddBtn:hover { background: $hover; color: $text; }
|
|
|
|
/* Co4E icon sidebar — no chrome until it is the active one. */
|
|
QTabBar#co4eSideTabs { qproperty-iconSize: 18px 18px; }
|
|
QTabBar#co4eSideTabs::tab {
|
|
background: transparent; color: $text_muted; border: none;
|
|
border-radius: ${radius}px; padding: 6px; margin: 0 4px 0 0;
|
|
}
|
|
QTabBar#co4eSideTabs::tab:selected { background: $accent_soft; color: $text; }
|
|
QTabBar#co4eSideTabs::tab:hover:!selected { background: $hover; color: $text; }
|
|
QGraphicsView#co4eCanvas {
|
|
background: $surface; border: 1px solid $border; border-radius: ${radius_lg}px;
|
|
}
|
|
|
|
/* ---- text entry & item views ------------------------------------------ */
|
|
QPlainTextEdit, QTextEdit, QTextBrowser, QLineEdit, QSpinBox, QDoubleSpinBox,
|
|
QTreeView, QListView, QTableView, QTreeWidget, QListWidget, QTableWidget {
|
|
background: $surface_raised; color: $text; border: 1px solid $border;
|
|
border-radius: ${radius}px; selection-background-color: $selection_bg;
|
|
selection-color: $selection_fg;
|
|
}
|
|
QPlainTextEdit, QTextEdit, QLineEdit, QSpinBox, QDoubleSpinBox { padding: 6px 8px; }
|
|
QPlainTextEdit:hover, QTextEdit:hover, QLineEdit:hover { border-color: $border_strong; }
|
|
QPlainTextEdit:focus, QTextEdit:focus, QLineEdit:focus,
|
|
QSpinBox:focus, QDoubleSpinBox:focus { border: 1px solid $focus_ring; }
|
|
QLineEdit:disabled, QPlainTextEdit:disabled, QTextEdit:disabled {
|
|
background: $surface; color: $text_disabled;
|
|
}
|
|
|
|
QTreeView::item, QListView::item, QTableView::item { padding: 4px 3px; border-radius: ${radius_sm}px; }
|
|
QTreeView::item:hover, QListView::item:hover { background: $hover; }
|
|
QTreeView::item:selected, QListView::item:selected, QTableView::item:selected {
|
|
background: $accent_soft; color: $text;
|
|
}
|
|
QHeaderView::section {
|
|
background: $bg; color: $text_muted; border: none;
|
|
border-bottom: 1px solid $border; padding: 7px 6px; font-weight: 600;
|
|
}
|
|
|
|
/* ---- buttons -----------------------------------------------------------
|
|
Default is a quiet outline. Weight is reserved for #primary / #danger, so
|
|
at most one button per view should carry a fill. */
|
|
QPushButton {
|
|
background: $surface_raised; color: $text; border: 1px solid $border_strong;
|
|
border-radius: ${radius}px; padding: 7px 14px; font-weight: 500;
|
|
}
|
|
QPushButton:hover { background: $hover; border-color: $border_strong; }
|
|
QPushButton:pressed { background: $active; }
|
|
QPushButton:disabled { color: $text_disabled; background: $surface; border-color: $border; }
|
|
QPushButton:focus { border: 1px solid $focus_ring; }
|
|
|
|
QPushButton#primary {
|
|
background: $accent_solid; color: $on_accent; border: 1px solid transparent; font-weight: 600;
|
|
}
|
|
QPushButton#primary:hover { background: $accent_solid_hover; }
|
|
QPushButton#primary:pressed { background: $accent_solid_active; }
|
|
QPushButton#primary:disabled { background: $surface; color: $text_disabled; border-color: $border; }
|
|
|
|
QPushButton#danger {
|
|
background: $danger_solid; color: $on_accent; border: 1px solid transparent; font-weight: 600;
|
|
}
|
|
QPushButton#danger:hover { background: $danger_solid_hover; }
|
|
QPushButton#danger:disabled { background: $surface; color: $text_disabled; border-color: $border; }
|
|
|
|
/* Ghost buttons: nav section headers and icon-only chrome. */
|
|
QPushButton#navMenuBtn {
|
|
background: transparent; border: none; border-radius: ${radius}px; padding: 5px 6px;
|
|
font-weight: 600; font-size: 11px; letter-spacing: 0.6px; color: $text_faint; text-align: left;
|
|
}
|
|
QPushButton#navMenuBtn:hover { background: $hover; color: $text; }
|
|
QPushButton#navMenuBtn:pressed { background: $active; }
|
|
|
|
QToolButton {
|
|
background: transparent; color: $text_muted; border: none;
|
|
border-radius: ${radius}px; padding: 5px;
|
|
}
|
|
QToolButton:hover { background: $hover; color: $text; }
|
|
QToolButton:pressed { background: $active; }
|
|
QToolButton::menu-indicator { image: none; }
|
|
|
|
/* ---- pickers ----------------------------------------------------------- */
|
|
QComboBox {
|
|
background: $surface_raised; color: $text; border: 1px solid $border_strong;
|
|
border-radius: ${radius}px; padding: 6px 10px;
|
|
}
|
|
QComboBox:hover { background: $hover; }
|
|
QComboBox:focus { border-color: $focus_ring; }
|
|
QComboBox:disabled { color: $text_disabled; background: $surface; border-color: $border; }
|
|
QComboBox::drop-down { border: none; width: 20px; }
|
|
QComboBox QAbstractItemView {
|
|
background: $overlay; color: $text; border: 1px solid $border_strong;
|
|
border-radius: ${radius}px; padding: 4px; outline: none;
|
|
selection-background-color: $accent_soft; selection-color: $text;
|
|
}
|
|
|
|
QMenu { background: $overlay; color: $text; border: 1px solid $border_strong;
|
|
border-radius: ${radius}px; padding: 4px; }
|
|
QMenu::item { padding: 6px 14px; border-radius: ${radius_sm}px; }
|
|
QMenu::item:selected { background: $accent_soft; color: $text; }
|
|
QMenu::item:disabled { color: $text_disabled; }
|
|
QMenu::separator { height: 1px; background: $border; margin: 4px 6px; }
|
|
|
|
QMenuBar { background: $bg; color: $text; border-bottom: 1px solid $border; }
|
|
QMenuBar::item { padding: 5px 10px; border-radius: ${radius_sm}px; background: transparent; }
|
|
QMenuBar::item:selected { background: $hover; }
|
|
|
|
/* ---- toggles ----------------------------------------------------------- */
|
|
QCheckBox, QRadioButton { spacing: 8px; background: transparent; }
|
|
QCheckBox::indicator, QRadioButton::indicator {
|
|
width: 16px; height: 16px; background: $surface_raised;
|
|
border: 1px solid $border_strong; border-radius: ${radius_sm}px;
|
|
}
|
|
QRadioButton::indicator { border-radius: 9px; }
|
|
QCheckBox::indicator:hover, QRadioButton::indicator:hover { border-color: $accent; }
|
|
QCheckBox::indicator:checked, QRadioButton::indicator:checked {
|
|
background: $accent_solid; border-color: $accent_solid;
|
|
}
|
|
QCheckBox::indicator:disabled, QRadioButton::indicator:disabled {
|
|
background: $surface; border-color: $border;
|
|
}
|
|
QCheckBox::indicator:checked:disabled, QRadioButton::indicator:checked:disabled {
|
|
background: $border_strong; border-color: $border_strong;
|
|
}
|
|
|
|
QSlider::groove:horizontal { height: 4px; background: $border; border-radius: 2px; }
|
|
QSlider::sub-page:horizontal { background: $accent_solid; border-radius: 2px; }
|
|
QSlider::handle:horizontal {
|
|
width: 14px; height: 14px; margin: -6px 0; border-radius: 7px;
|
|
background: $surface_raised; border: 1px solid $border_strong;
|
|
}
|
|
QSlider::handle:horizontal:hover { border-color: $accent; }
|
|
|
|
QProgressBar {
|
|
background: $surface; border: none; border-radius: 3px;
|
|
height: 6px; text-align: center; color: $text_muted;
|
|
}
|
|
QProgressBar::chunk { background: $accent_solid; border-radius: 3px; }
|
|
|
|
/* ---- scrollbars: overlay-thin, no arrows. ------------------------------ */
|
|
QScrollBar:vertical { background: transparent; width: 10px; margin: 2px; }
|
|
QScrollBar::handle:vertical { background: $scroll_handle; border-radius: 4px; min-height: 28px; }
|
|
QScrollBar::handle:vertical:hover { background: $scroll_handle_hover; }
|
|
QScrollBar:horizontal { background: transparent; height: 10px; margin: 2px; }
|
|
QScrollBar::handle:horizontal { background: $scroll_handle; border-radius: 4px; min-width: 28px; }
|
|
QScrollBar::handle:horizontal:hover { background: $scroll_handle_hover; }
|
|
QScrollBar::add-line, QScrollBar::sub-line { height: 0; width: 0; border: none; background: none; }
|
|
QScrollBar::add-page, QScrollBar::sub-page { background: none; }
|
|
|
|
/* ---- badges & inline text tones ---------------------------------------
|
|
One shape, six tones. Pick by meaning: badgeSuccess for a finished run,
|
|
badgeDanger for a failed one — not by which colour looks nice. */
|
|
QLabel#badge, QLabel#badgeSuccess, QLabel#badgeWarn, QLabel#badgeDanger,
|
|
QLabel#badgePurple, QLabel#badgePink {
|
|
border-radius: ${radius_sm}px; padding: 2px 8px; font-size: 12px; font-weight: 600;
|
|
}
|
|
QLabel#badge { background: $info_soft; color: $info; }
|
|
QLabel#badgeSuccess { background: $success_soft; color: $success; }
|
|
QLabel#badgeWarn { background: $warning_soft; color: $warning; }
|
|
QLabel#badgeDanger { background: $danger_soft; color: $danger; }
|
|
QLabel#badgePurple { background: $purple_soft; color: $purple; }
|
|
QLabel#badgePink { background: $pink_soft; color: $pink; }
|
|
|
|
QLabel { background: transparent; }
|
|
QLabel#hint { color: $text_muted; }
|
|
QLabel#faint { color: $text_faint; }
|
|
QLabel#warning { color: $warning; font-weight: 600; }
|
|
QLabel#error { color: $danger; font-weight: 600; }
|
|
QLabel#success { color: $success; font-weight: 600; }
|
|
QLabel#sectionTitle { color: $text; font-size: 15px; font-weight: 600; }
|
|
|
|
/* ---- code, terminals & logs -------------------------------------------
|
|
These read as "sunken" surfaces: the eye goes in, not across. */
|
|
QPlainTextEdit#codeEditor, QPlainTextEdit#termOutput, QPlainTextEdit#logView {
|
|
background: $code_bg; color: $code_fg; border: none;
|
|
font-family: $font_mono; selection-background-color: $code_selection;
|
|
}
|
|
QLineEdit#termInput {
|
|
background: $code_bg; color: $code_fg; border: none; border-top: 1px solid $border;
|
|
font-family: $font_mono; border-radius: 0; padding: 7px 10px;
|
|
}
|
|
QLineEdit#termInput:focus { border-top-color: $accent; }
|
|
|
|
/* The help-agent dock styles itself from these same tokens — it is a floating
|
|
overlay that re-applies on every theme switch. See ui/help_agent_widget.py. */
|
|
""")
|
|
|
|
|
|
def resolve_theme(theme: str) -> str:
|
|
"""Resolve ``'system'`` to ``'dark'``/``'light'`` from the OS colour scheme."""
|
|
if theme in _PALETTES:
|
|
return theme
|
|
try:
|
|
from PySide6.QtCore import Qt
|
|
from PySide6.QtWidgets import QApplication
|
|
|
|
app = QApplication.instance()
|
|
if app is not None:
|
|
scheme = app.styleHints().colorScheme()
|
|
return "light" if scheme == Qt.ColorScheme.Light else "dark"
|
|
except Exception:
|
|
pass
|
|
return "dark"
|
|
|
|
|
|
def palette(theme: str) -> Palette:
|
|
"""The token set for ``theme``. Painting code reads its colours from here."""
|
|
return _PALETTES[resolve_theme(theme)]
|
|
|
|
|
|
# The theme the running app is currently showing. Painting code (paintEvent,
|
|
# QSyntaxHighlighter, canvas items) reads it via current_palette() instead of
|
|
# re-reading config.json — that used to cost a file open per repaint.
|
|
_active_theme = "dark"
|
|
|
|
|
|
def set_active_theme(theme: str) -> str:
|
|
"""Record the theme the app just applied. Call this next to every
|
|
``QApplication.setStyleSheet(stylesheet(...))``. Returns the resolved name."""
|
|
global _active_theme
|
|
_active_theme = resolve_theme(theme)
|
|
return _active_theme
|
|
|
|
|
|
def current_theme() -> str:
|
|
"""The resolved theme ('dark'/'light') the app is showing right now."""
|
|
return _active_theme
|
|
|
|
|
|
def current_palette() -> Palette:
|
|
"""Tokens for the theme the app is showing right now."""
|
|
return _PALETTES[_active_theme]
|
|
|
|
|
|
def stylesheet(theme: str) -> str:
|
|
"""The application-wide Qt style sheet for ``theme``."""
|
|
return _TEMPLATE.substitute(asdict(palette(theme)))
|
|
|
|
|
|
def role_colors(theme: str) -> dict[str, str]:
|
|
"""Conversation/graph node colours keyed by role."""
|
|
p = palette(theme)
|
|
return {
|
|
"user": p.role_user,
|
|
"assistant": p.role_assistant,
|
|
"tool": p.role_tool,
|
|
"result": p.role_result,
|
|
"error": p.role_error,
|
|
}
|