harrael/KeSp_controller
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: Fix contrast on buttons, combobox, and tab titles

Browse source 
- button-bg lighter (#565970) to stand out from bg-secondary
- Border on DarkButton and DarkComboBox (#6272a4)
- Primary button: dark text on purple bg
- Tab titles: inactive #9a9ebb (was #6272a4), 13px, bold 700 when active

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Mae PUGIN 2026-04-07 09:03:44 +02:00
parent 4e93f4fd97
commit d69d931ea9
4 changed files with 14 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
ui/components/dark_button.slint
View file

@ -6,20 +6,25 @@ export component DarkButton inherits Rectangle {
in property <bool> primary: false; in property <bool> primary: false;
callback clicked(); callback clicked();
min-width: btn-text.preferred-width + 20px; min-width: btn-text.preferred-width + 24px;
height: 28px; height: 28px;
border-radius: 4px; border-radius: 4px;
border-width: 1px;
border-color: !root.enabled ? transparent
: root.primary ? Theme.accent-purple.darker(0.1)
: Theme.button-border;
background: !root.enabled ? Theme.bg-primary background: !root.enabled ? Theme.bg-primary
: root.primary && ta.has-hover ? Theme.accent-purple.darker(0.2) : root.primary && ta.has-hover ? Theme.accent-purple.darker(0.2)
: root.primary ? Theme.accent-purple : root.primary ? Theme.accent-purple
: ta.has-hover ? Theme.button-hover : ta.has-hover ? Theme.button-hover
: Theme.button-bg; : Theme.button-bg;
opacity: root.enabled ? 1.0 : 0.5; opacity: root.enabled ? 1.0 : 0.4;
btn-text := Text { btn-text := Text {
text: root.text; text: root.text;
color: root.enabled ? Theme.fg-primary : Theme.fg-secondary; color: root.primary ? #282a36 : root.enabled ? Theme.fg-primary : Theme.fg-secondary;
font-size: 12px; font-size: 12px;
font-weight: 500;
horizontal-alignment: center; horizontal-alignment: center;
vertical-alignment: center; vertical-alignment: center;
} }

2
ui/components/dark_combo_box.slint
View file

@ -11,7 +11,7 @@ export component DarkComboBox inherits Rectangle {
border-radius: 4px; border-radius: 4px;
background: ta.has-hover ? Theme.button-hover : Theme.button-bg; background: ta.has-hover ? Theme.button-hover : Theme.button-bg;
border-width: 1px; border-width: 1px;
border-color: Theme.bg-primary; border-color: Theme.button-border;
HorizontalLayout { HorizontalLayout {
padding-left: 8px; padding-left: 8px;

6
ui/main.slint
View file

@ -25,9 +25,9 @@ component DarkTab inherits Rectangle {
Text { Text {
text: root.title; text: root.title;
color: root.active ? Theme.fg-primary : Theme.fg-secondary; color: root.active ? Theme.fg-primary : #9a9ebb;
font-size: 12px; font-size: 13px;
font-weight: root.active ? 600 : 400; font-weight: root.active ? 700 : 400;
horizontal-alignment: center; horizontal-alignment: center;
vertical-alignment: center; vertical-alignment: center;
} }

3
ui/theme.slint
View file

@ -18,6 +18,7 @@ export global Theme {
// UI elements // UI elements
out property <color> connected: #50fa7b; out property <color> connected: #50fa7b;
out property <color> disconnected: #ff5555; out property <color> disconnected: #ff5555;
out property <color> button-bg: #44475a; out property <color> button-bg: #565970;
out property <color> button-hover: #6272a4; out property <color> button-hover: #6272a4;
out property <color> button-border: #6272a4;
} }