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

fix: Heatmap readability - dark text on warm colors

Browse source 
- Gradient: dark purple -> orange -> red (more contrast than blue->yellow)
- Text switches to dark (#1a1a2e) when heat > 0.3
- Bold text in heatmap mode
- Sublabel opacity reduced in heatmap

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Mae PUGIN 2026-04-07 13:23:12 +02:00
parent 61c3afc344
commit af32862c76
1 changed files with 9 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
ui/components/key_button.slint
View file

@ -6,14 +6,15 @@ export component KeyButton inherits Rectangle {
in property <float> scale: 1.0;
callback clicked(int);
// Heat color: interpolate blue(cold) -> yellow -> red(hot)
// Heat color: dark purple (cold) -> orange -> bright red (hot)
property <color> heat-color:
data.heat < 0.5
? Colors.blue.mix(Colors.yellow, data.heat * 2)
: Colors.yellow.mix(Colors.red, (data.heat - 0.5) * 2);
? #2d1b69.mix(#e67e22, data.heat * 2)
: #e67e22.mix(#e74c3c, (data.heat - 0.5) * 2);
property <color> base-color:
KeymapBridge.heatmap-enabled && data.heat > 0 ? root.heat-color : data.color;
property <bool> is-heatmap: KeymapBridge.heatmap-enabled && data.heat > 0;
property <color> base-color: root.is-heatmap ? root.heat-color : data.color;
property <color> text-color: root.is-heatmap && data.heat > 0.3 ? #1a1a2e : Theme.fg-primary;
width: data.w;
height: data.h;
@ -34,8 +35,9 @@ export component KeyButton inherits Rectangle {
Text {
text: data.label;
color: Theme.fg-primary;
color: root.text-color;
font-size: max(7px, 11px * root.scale);
font-weight: root.is-heatmap ? 700 : 400;
horizontal-alignment: center;
vertical-alignment: center;
}
@ -43,7 +45,7 @@ export component KeyButton inherits Rectangle {
if data.sublabel != "" : Text {
y: parent.height - 14px * root.scale;
text: data.sublabel;
color: Theme.fg-secondary;
color: root.is-heatmap ? root.text-color.with-alpha(0.7) : Theme.fg-secondary;
font-size: max(5px, 8px * root.scale);
horizontal-alignment: center;
width: 100%;