feat(ui): added color/font to Token

new function in Token:
- set-display-mode(ColorScheme)
- switch-display-mode()

new property in Token:
- is-darkmode (out bool)
- color
- font

ui/app.slint

@@ -1,14 +1,13 @@
 import { MainView } from "./index.slint";
 import { ROOT_GLOBAL, Token } from "./global.slint";
-import { Palette } from "std-widgets.slint";
 
 export component App inherits Window {
     callback loginClicked <=> main-view.startLink;
     in-out property <string> version-string <=> main-view.version-string;
     min-height: ROOT-GLOBAL.window-height;
     min-width: ROOT-GLOBAL.window-width;
     title: "SAST Evento";
-    background: Palette.color-scheme == ColorScheme.light ? white : black;
+    background: Token.color.normal.background;
     icon: Token.image.icon.evento;
     main-view := MainView {
         y: 120px;

ui/assets/image/image_token.slint

@@ -1,4 +1,5 @@
 import { Palette } from "std-widgets.slint";
+import { EventoStyleToken } from "../../logic/index.slint";
 
 struct ImgPair {
     light: image,
@@ -63,10 +64,8 @@ export global EventoImageToken {
         icon: icon,
         display: display,
     };
-    // FIXME: maybe cannot judge darkmode here
-    property <bool> is-light: Palette.color-scheme == ColorScheme.light;
     pure function switcher(img: ImgPair) -> image {
-        return self.is-light ? img.light : img.dark;
+        return EventoStyleToken.is-darkmode ? img.dark : img.light;
     }
     //
     // icon used as small image in button, navbar and so on

ui/global.slint

@@ -1,4 +1,8 @@
 import { EventoImageToken } from "./assets/index.slint";
+import { EventoStyleToken } from "./logic/index.slint";
+
+import { Palette } from "std-widgets.slint";
+import { Themes } from "./modules/surrealism-ui/use/index.slint";
 
 export global ROOT_GLOBAL {
     in-out property <length> window-height: 760px;
@@ -8,5 +12,15 @@ export global ROOT_GLOBAL {
 }
 
 export global Token {
+    out property is-darkmode <=> EventoStyleToken.is-darkmode;
+    out property <Themes> surrealism-ui-default-theme: is-darkmode ? Dark : Light;
     out property image <=> EventoImageToken.image;
+    out property font <=> EventoStyleToken.font;
+    out property color <=> EventoStyleToken.color;
+    public function set-display-mode(color-scheme: ColorScheme) {
+        Palette.color-scheme = color-scheme;
+    }
+    public function switch-display-mode() {
+        Palette.color-scheme = Palette.color-scheme == ColorScheme.light ? ColorScheme.dark : ColorScheme.light;
+    }
 }

ui/logic/index.slint

@@ -0,0 +1 @@
+export { EventoStyleToken } from "./style_token.slint";

ui/logic/style_token.slint

@@ -0,0 +1,98 @@
+import { Palette, Button } from "std-widgets.slint";
+
+// font
+struct EventoFontData {
+    size: length,
+}
+
+struct EventoFontSize {
+    large: EventoFontData,
+    medium: EventoFontData,
+    small: EventoFontData,
+}
+
+// five types: large, headline, title, body, label
+// more info: https://m3.material.io/styles/typography/applying-type#ab657e7c-cb93-45ff-92c6-686959dc19ae
+struct EventoFontCollection {
+    display: EventoFontSize,
+    headline: EventoFontSize,
+    title: EventoFontSize,
+    body: EventoFontSize,
+    label: EventoFontSize,
+}
+
+// color
+struct ColorPair{
+    foreground: brush,
+    background: brush,
+}
+
+// more info: https://releases.slint.dev/1.7.1/docs/slint/src/language/builtins/globals#properties
+// default rename to normal
+struct EventoColorCollection {
+    normal: ColorPair,
+    alternate: ColorPair,
+    accent: ColorPair,
+    border: color,
+}
+
+export global EventoStyleToken {
+    out property <EventoColorCollection> color:{
+        normal: {
+            foreground: Palette.foreground,
+            background: Palette.background,
+        },
+        alternate: {
+            foreground: Palette.alternate-foreground,
+            background: switcher({ light: Colors.lightgray, dark: Colors.gray }),
+        },
+        accent: {
+            foreground: Palette.accent-foreground,
+            background: switcher({ light: #D4BBFC, dark: #513C74 }),
+        },
+        border: Palette.border,
+    };
+    // source: https://m3.material.io/styles/typography/type-scale-tokens#a734c6ed-634c-4abb-adb2-35daf0aed06a
+    // prefer large, use body.large (16px) for body text
+    out property <EventoFontCollection> font:{
+        display: { large: {
+            size: 57px,
+        }, medium: {
+            size: 45px,
+        }, small: {
+            size: 36px,
+        } },
+        headline: { large: {
+            size: 32px,
+        }, medium: {
+            size: 28px,
+        }, small: {
+            size: 24px,
+        } },
+        title: { large: {
+            size: 22px,
+        }, medium: {
+            size: 16px,
+        }, small: {
+            size: 14px,
+        } },
+        body: { large: {
+            size: 16px,
+        }, medium: {
+            size: 14px,
+        }, small: {
+            size: 12px,
+        } },
+        label: { large: {
+            size: 14px,
+        }, medium: {
+            size: 12px,
+        }, small: {
+            size: 11px,
+        } },
+    };
+    out property <bool> is-darkmode: Palette.color-scheme == ColorScheme.dark;
+    pure function switcher(color: {light:color,dark:color}) -> color {
+        return self.is-darkmode ? color.dark : color.light;
+    }
+}

ui/views/main.slint

@@ -34,11 +34,11 @@ export component MainView {
     group-label := SText {
         y: visitor-button.y + visitor-button.height + 20px;
         text: "SAST-C++组开发";
-        theme: Light;
+        theme: Token.surrealism-ui-default-theme;
     }
 
     version-label := SText {
         y: group-label.y + group-label.height + 5px;
-        theme: Light;
+        theme: Token.surrealism-ui-default-theme;
     }
 }