28fbf10b79
Custom DarkButton component with Dracula theme colors: - bg-secondary base, button-hover on hover - primary variant with accent-purple - Disabled state with reduced opacity - Consistent 28px height, 4px border-radius Also fixes PickDarkButton/KeyDarkButton naming errors from agent. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
32 lines
970 B
Text
32 lines
970 B
Text
import { Theme } from "../theme.slint";
|
|
|
|
export component DarkButton inherits Rectangle {
|
|
in property <string> text;
|
|
in property <bool> enabled: true;
|
|
in property <bool> primary: false;
|
|
callback clicked();
|
|
|
|
min-width: btn-text.preferred-width + 20px;
|
|
height: 28px;
|
|
border-radius: 4px;
|
|
background: !root.enabled ? Theme.bg-primary
|
|
: root.primary && ta.has-hover ? Theme.accent-purple.darker(0.2)
|
|
: root.primary ? Theme.accent-purple
|
|
: ta.has-hover ? Theme.button-hover
|
|
: Theme.button-bg;
|
|
opacity: root.enabled ? 1.0 : 0.5;
|
|
|
|
btn-text := Text {
|
|
text: root.text;
|
|
color: root.enabled ? Theme.fg-primary : Theme.fg-secondary;
|
|
font-size: 12px;
|
|
horizontal-alignment: center;
|
|
vertical-alignment: center;
|
|
}
|
|
|
|
ta := TouchArea {
|
|
enabled: root.enabled;
|
|
clicked => { root.clicked(); }
|
|
mouse-cursor: root.enabled ? pointer : default;
|
|
}
|
|
}
|