feat(ui): added Token for resource management and resources from lega…

…cy version

To use Token:
import from ui/global.slint and access property

README.md

@@ -1,5 +1,5 @@
 <div align=center>
-  <img width=64 src="ui/assets/app_icon.svg">
+  <img width=64 src="ui/assets/image/icon/evento.svg">
 </div>
 
 <h1 align="center">

ui/app.slint

@@ -1,5 +1,5 @@
 import {MainView} from "./index.slint";
-import {ROOT_GLOBAL} from "./global.slint";
+import { ROOT_GLOBAL, Token } from "./global.slint";
 
 export component App inherits Window {
     callback loginClicked <=> main-view.startLink;
@@ -8,7 +8,7 @@ export component App inherits Window {
     min-width: ROOT-GLOBAL.window-width;
     title: "SAST Evento";
     background: white;
-    icon: @image-url("assets/app_icon.png");
+    icon: Token.image.icon.evento;
     main-view := MainView {
         y: 120px;
     }

ui/assets/image/image_token.slint

@@ -0,0 +1,131 @@
+struct ImgPair {
+    light: image,
+    dark: image,
+}
+
+struct EventoIconCollection {
+    evento: image,
+    sast_link: image,
+    home: image,
+}
+
+struct EventoDisplayCollection {
+    evento: image,
+    avatar: [image],
+    event: {
+        default: [image],
+        union: [image],
+
+        cpp: [image],
+        csharp: [image],
+        frontend: [image],
+        backend: [image],
+        game: [image],
+        lambda: [image],
+        python: [image],
+    },
+    no_image: image,
+}
+
+struct EventoImageCollection {
+    icon: EventoIconCollection,
+    display: EventoDisplayCollection,
+}
+
+export global EventoImageToken {
+    out property <EventoImageCollection> image:{
+        icon: icon,
+        display: display,
+    };
+    //
+    // TODO(theme): link icon change to darkmode with theme system, replace TO_REPLACE
+    pure function switcher(is-light: bool, img: ImgPair) -> image {
+        return is-light ? img.light : img.dark;
+    }
+    property <bool> TO_REPLACE: true;
+    //
+    // icon used as small image in button, navbar and so on
+    // icon will change according to darkmode switch
+    property <EventoIconCollection> icon:{
+        // Product specific
+        evento: switcher(TO_REPLACE,{
+            light: @image-url("./icon/evento.png"),
+            // TODO(resource): no evento_dark provided, use light temporarily
+            dark: @image-url("./icon/evento.svg"),
+        }),
+        sast_link: switcher(TO_REPLACE,{
+            light: @image-url("./icon/sast_link.svg"),
+            // TODO(resource): no sast_link_dark provided, use light temporarily
+            dark: @image-url("./icon/sast_link.svg"),
+        }),
+        // General usage
+        home: switcher(TO_REPLACE,{
+            light: @image-url("./icon/home.svg"),
+            dark: @image-url("./icon/home_dark.svg"),
+        }),
+    };
+    // display used as images bigger than icon
+    // most display image won't change according to darkmode switch
+    property <EventoDisplayCollection> display:{
+        // Product specific
+        evento: switcher(TO_REPLACE,{
+            light: @image-url("./display/evento/evento.png"),
+            dark: @image-url("./display/evento/evento_dark.png"),
+        }),
+        // Other
+        avatar: [
+            @image-url("./display/avatar/avatar_1.svg"),
+            @image-url("./display/avatar/avatar_2.svg"),
+            @image-url("./display/avatar/avatar_3.svg"),
+            @image-url("./display/avatar/avatar_4.svg"),
+            @image-url("./display/avatar/avatar_5.svg"),
+            @image-url("./display/avatar/avatar_6.svg"),
+            @image-url("./display/avatar/avatar_7.svg"),
+            @image-url("./display/avatar/avatar_8.svg"),
+            @image-url("./display/avatar/avatar_9.svg"),
+            @image-url("./display/avatar/avatar_10.svg"),
+            @image-url("./display/avatar/avatar_11.svg"),
+            @image-url("./display/avatar/avatar_12.svg"),
+        ],
+        event: {
+            default: [
+                @image-url("./display/event/default_1.png"),
+                @image-url("./display/event/default_2.png"),
+                @image-url("./display/event/default_3.png"),
+            ],
+            union: [
+                @image-url("./display/event/union_1.png"),
+                @image-url("./display/event/union_2.png"),
+            ],
+            cpp: [
+                @image-url("./display/event/cpp_1.svg"),
+                @image-url("./display/event/cpp_2.png"),
+                @image-url("./display/event/cpp_3.png"),
+            ],
+            csharp: [
+                @image-url("./display/event/csharp_1.png"),
+            ],
+            frontend: [
+                @image-url("./display/event/frontend_1.png"),
+                @image-url("./display/event/frontend_2.png"),
+                @image-url("./display/event/frontend_3.png"),
+            ],
+            backend: [
+                @image-url("./display/event/backend_1.png"),
+            ],
+            game: [
+                @image-url("./display/event/game_1.svg"),
+                @image-url("./display/event/game_2.jpg"),
+                @image-url("./display/event/game_3.jpg"),
+            ],
+            lambda: [
+                @image-url("./display/event/lambda_1.png"),
+                @image-url("./display/event/lambda_2.png"),
+            ],
+            python: [
+                @image-url("./display/event/python_1.png"),
+            ],
+        },
+        no_image: @image-url("./display/no_image.png")
+    };
+}

ui/assets/index.slint

@@ -0,0 +1 @@
+export { EventoImageToken } from "./image/image_token.slint";

ui/global.slint

@@ -1,7 +1,12 @@
-//! global styles
+import { EventoImageToken } from "./assets/index.slint";
+
 export global ROOT_GLOBAL {
-  in-out property <length> window-height : 760px;
-  in-out property <length> window-width : 1340px;
-  in-out property <length> font-size : 16px;
-  in-out property <length> padding : 0px;
-}
+    in-out property <length> window-height: 760px;
+    in-out property <length> window-width: 1340px;
+    in-out property <length> font-size: 16px;
+    in-out property <length> padding: 0px;
+}
+
+export global Token {
+    out property image <=> EventoImageToken.image;
+}

ui/views/main.slint

@@ -1,13 +1,13 @@
-import { Hello } from "../components/index.slint";
 import { SText, SButton } from "../modules/surrealism-ui/index.slint";
+import { Token } from "../global.slint";
 
 export component MainView {
     callback startLink <=> link-button.clicked;
     in-out property <string> version-string <=> version-label.text;
     evento-image := Image {
         height: 240px;
         width: 700px;
-        source: @image-url("../assets/evento_black.png");
+        source: Token.image.display.evento;
     }
 
     link-button := SButton {
@@ -19,7 +19,7 @@ export component MainView {
         theme: Dark;
         border-radius: 12px;
         show-icon: true;
-        icon: @image-url("../assets/sast_link.svg");
+        icon: Token.image.icon.sast-link;
     }
 
     visitor-button := SButton {