Update sidebar to use new Palette for theme colors

Author: seanharmer

demo/ui/widgets/side_bar.slint

@@ -1,19 +1,19 @@
 // Copyright © SixtyFPS GmbH <info@slint.dev>
 // SPDX-License-Identifier: MIT
 
-import { StyleMetrics } from "std-widgets.slint";
+import { Palette, StyleMetrics } from "std-widgets.slint";
 
 component SideBarItem inherits Rectangle {
     callback clicked <=> touch.clicked;
-    in-out property<string> text <=> label.text;
-    in property<bool> selected;
-    in property<bool> has-focus;
+    in-out property <string> text <=> label.text;
+    in property <bool> selected;
+    in property <bool> has-focus;
 
     min-height: l.preferred-height;
 
     state := Rectangle {
         opacity: 0;
-        background: StyleMetrics.window-background;
+        background: Palette.background;
 
         animate opacity { duration: 150ms; }
     }
@@ -24,9 +24,9 @@ component SideBarItem inherits Rectangle {
         spacing: 0px;
 
         label := Text {
-            color: StyleMetrics.default-text-color;
+            color: Palette.foreground;
             vertical-alignment: center;
-         }
+        }
     }
 
     touch := TouchArea {
@@ -35,26 +35,26 @@ component SideBarItem inherits Rectangle {
     }
 
     states [
-        pressed when touch.pressed : {
+        pressed when touch.pressed: {
             state.opacity: 0.8;
         }
-        hover when touch.has-hover : {
+        hover when touch.has-hover: {
             state.opacity: 0.6;
         }
-        selected when root.selected : {
+        selected when root.selected: {
             state.opacity: 1;
         }
-        focused when root.has-focus : {
+        focused when root.has-focus: {
             state.opacity: 0.8;
         }
     ]
 }
 
 export component SideBar inherits Rectangle {
-    in property<[string]> model: [];
-    out property<int> current-item: 0;
-    in property<string> title <=> label.text;
-    out property<int> current-focused: fs.has-focus ? fs.focused-tab : -1; // The currently focused tab
+    in property <[string]> model: [];
+    out property <int> current-item: 0;
+    in property <string> title <=> label.text;
+    out property <int> current-focused: fs.has-focus ? fs.focused-tab : -1; // The currently focused tab
     width: 180px;
 
     forward-focus: fs;
@@ -63,33 +63,33 @@ export component SideBar inherits Rectangle {
     accessible-delegate-focus: root.current-focused >= 0 ? root.current-focused : root.current-item;
 
     Rectangle {
-        background: StyleMetrics.window-background.darker(0.2);
+        background: Palette.background.darker(0.2);
 
         fs := FocusScope {
-            x:0;
+            x: 0;
             width: 0px; // Do not react on clicks
-            property<int> focused-tab: 0;
+            property <int> focused-tab: 0;
 
             key-pressed(event) => {
                 if (event.text == "\n") {
-                     root.current-item = root.current-focused;
-                     return accept;
+                    root.current-item = root.current-focused;
+                    return accept;
                 }
                 if (event.text == Key.UpArrow) {
-                     self.focused-tab = Math.max(self.focused-tab - 1,  0);
-                     return accept;
+                    self.focused-tab = Math.max(self.focused-tab - 1,  0);
+                    return accept;
                 }
                 if (event.text == Key.DownArrow) {
-                     self.focused-tab = Math.min(self.focused-tab + 1, root.model.length - 1);
-                     return accept;
+                    self.focused-tab = Math.min(self.focused-tab + 1, root.model.length - 1);
+                    return accept;
                 }
                 return reject;
             }
 
             key-released(event) => {
                 if (event.text == " ") {
-                     root.current-item = root.current-focused;
-                     return accept;
+                    root.current-item = root.current-focused;
+                    return accept;
                 }
                 return reject;
             }
@@ -110,11 +110,13 @@ export component SideBar inherits Rectangle {
         navigation := VerticalLayout {
             alignment: start;
             vertical-stretch: 0;
-            for item[index] in root.model : SideBarItem {
+            for item[index] in root.model: SideBarItem {
                 has-focus: index == root.current-focused;
                 text: item;
                 selected: index == root.current-item;
-                clicked => { root.current-item = index; }
+                clicked => {
+                    root.current-item = index;
+                }
             }
         }
 
@@ -124,7 +126,7 @@ export component SideBar inherits Rectangle {
                 padding-right: StyleMetrics.layout-padding;
 
                 @children
-             }
+            }
         }
     }
 }