Ku6epXBOCTuK/bropicker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: fix light theme, separate components

Browse Source
This commit is contained in:
Ku6epXBOCTuK
2026-05-08 13:57:30 +05:00
parent eb944e8892
commit 376f7dd1d3
6 changed files with 57 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/footer.slint
+3 -3
View File
@@ -1,6 +1,6 @@
import { IconButton } from "icon_button.slint";
import { Theme } from "theme.slint";
import { GradientButton } from "button.slint";
import { IconButton } from "./icon_button.slint";
import { Theme } from "./theme.slint";
import { GradientButton } from "./gradient-button.slint";
export component Footer inherits Rectangle {
callback settings-clicked();
ui/button.slint → ui/gradient-button.slint
+1
View File
@@ -3,6 +3,7 @@ import { Theme } from "theme.slint";
export component GradientButton inherits Rectangle {
callback clicked <=> touch.clicked;
in property <string> text;
in property <image> icon;
background: Theme.gradient-main;
border-radius: Theme.radius;
ui/gradient-icon.slint
+24
View File
@@ -0,0 +1,24 @@
import { Theme } from "theme.slint";
export component GradientIcon inherits Rectangle {
in property <image> icon;
background: Theme.gradient-main;
border-radius: Theme.radius;
drop-shadow-offset-x: Theme.shadow-primary-x;
drop-shadow-offset-y: Theme.shadow-primary-y;
drop-shadow-blur: Theme.shadow-primary-blur;
drop-shadow-color: touch.has-hover ? Theme.shadow-color : transparent;
horizontal-stretch: 0;
animate drop-shadow-color { duration: 300ms; }
touch := TouchArea { }
Image {
width: 24px;
height: 24px;
source: icon;
colorize: white;
}
}
ui/header.slint
+16 -9
View File
@@ -1,5 +1,6 @@
import { BrowserConfig } from "./types.slint";
import { Theme } from "theme.slint";
import { Theme } from "./theme.slint";
import { GradientIcon } from "./gradient-icon.slint";
export component Header inherits Rectangle {
in property <string> url;
@@ -13,16 +14,22 @@ export component Header inherits Rectangle {
HorizontalLayout {
spacing: Theme.spacing-md;
Rectangle {
// Rectangle {
// width: 48px;
// height: 48px;
// border-radius: Theme.radius;
// background: Theme.gradient-main;
// Image {
// source: @image-url("../icons/globe.svg");
// colorize: white;
// }
// }
GradientIcon {
width: 48px;
height: 48px;
border-radius: Theme.radius;
background: Theme.gradient-main;
Image {
source: @image-url("../icons/globe.svg");
colorize: white;
}
icon: @image-url("../icons/globe.svg");
}
VerticalLayout {
ui/icon_button.slint
+4 -1
View File
@@ -1,8 +1,11 @@
import { Theme } from "theme.slint";
export component IconButton inherits Rectangle {
callback clicked <=> touch.clicked;
in property <image> icon;
property <color> icon_color: touch.has-hover ? #ffffff : #94a3b8;
property <color> icon_color: touch.has-hover ? Theme.text-main : Theme.text-muted;
animate icon_color { duration: 300ms; }
height: 24px;
width: 24px;
background: transparent;
ui/theme.slint
+9 -9
View File
@@ -4,23 +4,23 @@ export global Theme {
out property <length> width: 448px;
out property <brush> surface-main: is-dark ? #0f172a : #ffffff;
out property <brush> surface-control: is-dark ? #1e293b4d : #ffffff;
out property <brush> surface-elevated: is-dark ? #1e293b80 : #ffffff;
// out property <brush> surface-control: is-dark ? #1e293b4d : #ffffff;
out property <brush> surface-elevated: is-dark ? #1e293b80 : #f8fafc;
out property <brush> surface-hover: is-dark ? #1e293b : #ffffff;
out property <brush> border-main: is-dark ? #334155 : #ffffff;
out property <brush> border-main: is-dark ? #334155 : #e2e8f0;
out property <brush> gradient-main: @linear-gradient(135deg, rgb(59, 130, 246), rgb(6, 182, 212));
out property <brush> text-main: is-dark ? #ffffff : #000000;
out property <brush> text-muted: is-dark ? #94a3b8 : #000000;
out property <brush> text-main: is-dark ? #ffffff : #0f172a;
out property <brush> text-muted: is-dark ? #94a3b8 : #64748b;
out property <brush> text-control: is-dark ? #cbd5e1 : #000000;
out property <brush> text-control-muted: is-dark ? #64748b : #000000;
out property <brush> text-control: is-dark ? #cbd5e1 : #475569;
out property <brush> text-control-muted: is-dark ? #64748b : #94a3b8;
out property <brush> text-hint: is-dark ? #475569 : #000000;
out property <brush> text-hint: is-dark ? #475569 : #475569;
out property <brush> shadow-color: is-dark ? #3b82f640 : #000000;
out property <brush> shadow-color: is-dark ? #3b82f640 : #3b82f640;
out property <length> shadow-primary-x: 0px;
out property <length> shadow-primary-y: 10px;