diff --git a/dash-frontend/assets/gui/tab/donate.xml b/dash-frontend/assets/gui/tab/donate.xml
index ba9482f9..e7b975d5 100644
--- a/dash-frontend/assets/gui/tab/donate.xml
+++ b/dash-frontend/assets/gui/tab/donate.xml
@@ -25,7 +25,7 @@
         <Button id="btn_donate" tooltip="DONATE.BUTTON_TOOLTIP" align_self="baseline">
           <image src_builtin="dashboard/opencollective_logo.svg" width="252" height="42" margin="8" margin_left="16" margin_right="16"/>
         </Button>
-        <label text="opencollective.com/wayvr-org" color="~color-accent"/>
+        <label text="opencollective.com/wayvr-org"/>
       </div>
 
       <label weight="bold" size="24" translation="DONATE.THANK_YOU_WAYVR"/>
diff --git a/uidev/assets/gui/wlx_theme.xml b/uidev/assets/gui/wlx_theme.xml
deleted file mode 100644
index 7f0b20db..00000000
--- a/uidev/assets/gui/wlx_theme.xml
+++ /dev/null
@@ -1,8 +0,0 @@
-<layout>
-  <!-- TODO: deprecate this in favor of theme.xml -->
-  <theme>
-    <var key="color_bg" value="#24273a" />
-    <var key="color_bg_active" value="#44475a" />
-    <var key="text_color" value="#dddddd" />
-  </theme>
-</layout>
\ No newline at end of file
diff --git a/wayvr/src/assets/edit/check.svg b/wayvr/src/assets/edit/check.svg
new file mode 100644
index 00000000..fe35e748
--- /dev/null
+++ b/wayvr/src/assets/edit/check.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="currentColor" d="m9.55 18l-5.7-5.7l1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"/></svg>
diff --git a/wayvr/src/assets/gui/decor.xml b/wayvr/src/assets/gui/decor.xml
index be536713..e657f205 100644
--- a/wayvr/src/assets/gui/decor.xml
+++ b/wayvr/src/assets/gui/decor.xml
@@ -10,18 +10,17 @@
         round="8"
         align_items="center"
         justify_content="space_between"
-        color="~color_bg"
-        border_color="~color_accent"
+        color="background"
+        border_color="outline"
       >
-        <label id="label_title" margin_left="8" color="~color_text" size="22" weight="bold" />
+        <label id="label_title" margin_left="8" color="on_background" size="22" weight="bold" />
         <div gap="4">
-          <Button macro="window_button" _release="::EditToggle"
-            border_color="~color_faded_translucent" color="~color_faded_50" color2="~color_faded_10">
+          <Button macro="window_button" _release="::EditToggle">
             <sprite macro="window_button_icon" src="watch/edit.svg" />
           </Button>
 
           <Button macro="window_button" _release="::DecorCloseWindow"
-            border_color="~color_danger_translucent" color="~color_danger_50" color2="~color_danger_10">
+            border_color="danger" color="danger">
             <sprite macro="window_button_icon" src="edit/close.svg" />
           </Button>
         </div>
diff --git a/wayvr/src/assets/gui/edit.xml b/wayvr/src/assets/gui/edit.xml
index eea9d3e5..e1fb0b8d 100644
--- a/wayvr/src/assets/gui/edit.xml
+++ b/wayvr/src/assets/gui/edit.xml
@@ -1,33 +1,28 @@
 <layout>
-  <macro name="button_style"
-    margin="2" overflow="hidden" box_sizing="border_box"
-    border_color="~color_accent" border="2" round="8" color="~color_accent_50" color2="~color_accent_10" gradient="vertical"
-    align_items="center" justify_content="center" />
-
   <macro name="button_style"
     margin="2" overflow="hidden" box_sizing="border_box" align_items="center" justify_content="center"
     border="2" round="50%" padding="8" gradient="vertical" tooltip_side="bottom" />
 
   <template name="TopButton">
-    <Button id="${id}" macro="button_style" tooltip="${tooltip}" _press="${press}" _release="${release}" sticky="${sticky}" border_color="~color_accent_translucent" color="~color_accent_50" color2="~color_accent_10">
+    <Button id="${id}" macro="button_style" tooltip="${tooltip}" _press="${press}" _release="${release}" sticky="${sticky}">
       <sprite id="${id}_sprite" width="48" height="48" src="${src}" />
     </Button>
   </template>
 
   <template name="TopButtonDanger">
-    <Button macro="button_style" tooltip="${tooltip}" _release="${release}" border_color="~color_danger_translucent" color="~color_danger_50" color2="~color_danger_10">
+    <Button macro="button_style" tooltip="${tooltip}" _release="${release}" border_color="danger" color="danger">
       <sprite width="48" height="48" src="${src}" />
     </Button>
   </template>
 
-  <template name="TopButtonFaded">
-    <Button macro="button_style" tooltip="${tooltip}" _press="${press}" _release="${release}" border_color="~color_faded_translucent" color="~color_faded_50" color2="~color_faded_10">
-      <sprite width="48" height="48" src="${src}" />
+  <template name="TopButtonTertiary">
+    <Button macro="button_style" tooltip="${tooltip}" _press="${press}" _release="${release}" color="tertiary" border_color="tertiary">
+      <sprite color="on_tertiary" width="48" height="48" src="${src}" />
     </Button>
   </template>
 
   <template name="PosButton">
-    <Button id="${id}" macro="button_style" tooltip="${tooltip}" _press="${press}" _release="${release}" border_color="~color_accent_translucent" color="~color_accent_50" color2="~color_accent_10">
+    <Button id="${id}" macro="button_style" tooltip="${tooltip}" _press="${press}" _release="${release}" >
       <sprite id="${id}_sprite" width="40" height="40" src="${src}" />
     </Button>
   </template>
@@ -37,7 +32,7 @@
       <rectangle id="shadow" width="100%" height="100%" padding="4" gap="4" align_items="center" justify_content="space_between" color="#000000c0" flex_direction="column">
         <div />
         <div flex_direction="column">
-          <rectangle padding="16" gap="8" round="32" color="~color_bg" border="2" border_color="~color_accent" justify_content="center">
+          <rectangle padding="16" gap="8" round="32" color="background(opacity-0.9)" border="2" border_color="outline" justify_content="center">
             <div flex_direction="column" gap="8">
               <div flex_direction="row" gap="4">
                 <TopButton sticky="0" id="top_lock" src="edit/lock_open.svg" tooltip="EDIT_MODE.LOCK_INTERACTION" press="::EditModeToggleLock" />
@@ -51,7 +46,7 @@
                 <!-- TopButton sticky="0" id="top_resize" src="edit/resize.svg" tooltip="EDIT_MODE.RESIZE_PRESS_AND_DRAG" / -->
                 <TopButtonDanger src="edit/delete.svg" tooltip="EDIT_MODE.DELETE" release="::EditModeDelete" />
                 <div width="8" height="100%" />
-                <TopButtonFaded src="watch/edit.svg" tooltip="EDIT_MODE.LEAVE" press="::EditToggle" />
+                <TopButtonTertiary src="edit/check.svg" tooltip="EDIT_MODE.LEAVE" press="::EditToggle" />
               </div>
               <div id="tab_none" display="none" height="100">
                 <label align="center" translation="EDIT_MODE.HINT_POINT_WINDOW" />
@@ -129,7 +124,7 @@
         </div>
         <div width="100%" justify_content="end" flex_direction="row">
           <div>
-            <Button id="resize_corner" macro="button_style" tooltip="EDIT_MODE.RESIZE_CORNER" tooltip_side="left" _press="::EditModeResizeStart" _release="::EditModeResizeStop" border_color="~color_accent_translucent" color="~color_accent_50" color2="~color_accent_10">
+            <Button id="resize_corner" macro="button_style" tooltip="EDIT_MODE.RESIZE_CORNER" tooltip_side="left" _press="::EditModeResizeStart" _release="::EditModeResizeStop">
               <sprite width="48" height="48" src="edit/resize-corner.svg" />
             </Button>
           </div>
diff --git a/wayvr/src/assets/gui/grab-help.xml b/wayvr/src/assets/gui/grab-help.xml
index a63e8ce3..fdb4da20 100644
--- a/wayvr/src/assets/gui/grab-help.xml
+++ b/wayvr/src/assets/gui/grab-help.xml
@@ -6,25 +6,25 @@
         padding="16"
         flex_direction="column"
         gap="8"
-        color="~color_bg" border_color="~color_accent" border="2" round="8">
+        color="background" border_color="outline" border="2" round="8">
 
         <div flex_direction="row" padding="8" justify_content="space_between">
           <div flex_direction="column" align_items="center" gap="8" max_width="160" min_width="160">
-            <sprite color="~color_text" src="grab-help/controller-grip-joy.svg" min_width="128" min_height="128" max_width="128" max_height="128" flex_grow="1" />
+            <sprite src="grab-help/controller-grip-joy.svg" min_width="128" min_height="128" max_width="128" max_height="128" flex_grow="1" />
             <label wrap="1" size="25" padding_left="16" padding_right="16" translation="GRAB.ADJUST_DISTANCE" align="center" />
           </div>
           <div flex_direction="column" align_items="center" gap="8" max_width="160" min_width="160">
-            <sprite color="~color_text" src="grab-help/controller-grip-trigger-joy.svg" min_width="128" min_height="128" max_width="128" max_height="128" flex_grow="1" />
+            <sprite src="grab-help/controller-grip-trigger-joy.svg" min_width="128" min_height="128" max_width="128" max_height="128" flex_grow="1" />
             <label wrap="1" size="25" padding_left="16" padding_right="16" translation="GRAB.ADJUST_SIZE" align="center" />
           </div>
           <div flex_direction="column" align_items="center" gap="8" max_width="160" min_width="160">
-            <sprite color="~color_text" src="grab-help/controller-grip-b.svg" min_width="128" min_height="128" max_width="128" max_height="128" flex_grow="1" />
+            <sprite src="grab-help/controller-grip-b.svg" min_width="128" min_height="128" max_width="128" max_height="128" flex_grow="1" />
             <label wrap="1" size="25" padding_left="16" padding_right="16" translation="GRAB.UNRESTRICTED_MOVEMENT" align="center" />
           </div>
         </div>
 
         <!-- A simple separator -->
-        <rectangle width="100%" height="2" color="~color_accent" />
+        <rectangle width="100%" height="2" color="outline" />
 
         <div align_items="center" padding="8" >
           <label display="none" id="grabbing_watch" wrap="1" size="20" padding_right="16" translation="GRAB.GRABBING_WATCH" />
diff --git a/wayvr/src/assets/gui/keyboard.xml b/wayvr/src/assets/gui/keyboard.xml
index 4d6fc321..b54eeffc 100644
--- a/wayvr/src/assets/gui/keyboard.xml
+++ b/wayvr/src/assets/gui/keyboard.xml
@@ -1,20 +1,24 @@
 <layout>
   <macro name="keycap_rect"
     margin="2" width="100%" overflow="hidden" box_sizing="border_box"
-    border_color="~color_accent_translucent" border="2" round="6" color="~color_accent_40" color2="~color_accent_10" gradient="vertical"
+    border_color="outline" border="2" round="6" color="background_variant" color2="background" gradient="vertical"
     align_items="center" justify_content="center" />
 
   <macro name="tray_rect"
     margin="2" width="100%" overflow="hidden" box_sizing="border_box"
-    border_color="~color_accent_translucent" border="2" round="6" color="~color_bg" color2="~color_accent_10" gradient="vertical"
+    border_color="outline" border="2" round="6" color="background" color2="background_variant" gradient="vertical"
     align_items="center" justify_content="center" />
 
   <macro name="keycap_div"
     width="${width}" height="${height}" min_width="${width}" min_height="${height}" max_width="${width}" max_height="${height}"
   />
 
+  <theme>
+    <var key="text_size" value="20" />
+  </theme>
+
   <template name="VerticalSeparator">
-    <rectangle width="2" height="100%" color="~color_accent" />
+    <rectangle width="2" height="100%" color="primary" />
   </template>
 
   <!-- The keyboard is build from the xkb keymap. This file is for customizing the keycaps. -->
@@ -24,7 +28,7 @@
   <template name="KeySpecial">
     <div macro="keycap_div">
       <rectangle id="${id}" macro="keycap_rect">
-        <sprite color="~color_text" width="24" height="24" src="keyboard/${text}.svg" />
+        <sprite color="on_background" width="24" height="24" src="keyboard/${text}.svg" />
       </rectangle>
     </div>
   </template>
@@ -34,7 +38,7 @@
   <template name="KeyLetter">
     <div macro="keycap_div">
       <rectangle id="${id}" macro="keycap_rect">
-        <label text="${text}" size="18" />
+        <label text="${text}" size="~text_size" />
       </rectangle>
     </div>
   </template>
@@ -44,8 +48,8 @@
   <template name="KeyLetterAltGr">
     <div macro="keycap_div">
       <rectangle id="${id}" macro="keycap_rect" gap="3">
-        <label text="${text}" size="18" />
-        <label color="~color_text_translucent" text="${text_altgr}" size="18" />
+        <label text="${text}" size="~text_size" />
+        <label color="on_background(opacity-0.5)" text="${text_altgr}" size="~text_size" />
       </rectangle>
     </div>
   </template>
@@ -55,8 +59,8 @@
   <template name="KeySymbol">
     <div macro="keycap_div">
       <rectangle id="${id}" macro="keycap_rect" gap="3">
-        <label color="~color_text_translucent" text="${text_shift}" size="18" />
-        <label text="${text}" size="18" />
+        <label color="on_background(opacity-0.5)" text="${text_shift}" size="~text_size" />
+        <label text="${text}" size="~text_size" />
       </rectangle>
     </div>
   </template>
@@ -67,14 +71,14 @@
     <div macro="keycap_div">
       <rectangle id="${id}" macro="keycap_rect" flex_direction="row" flex_wrap="wrap" padding="4">
         <div width="50%" height="50%" align_items="center" justify_content="center">
-          <label color="~color_text_translucent" text="${text_shift}" size="18" />
+          <label color="on_background(opacity-0.5)" text="${text_shift}" size="~text_size" />
         </div>
         <div width="50%" height="50%" align_items="center" justify_content="center" />
         <div width="50%" height="50%" align_items="center" justify_content="center">
-          <label text="${text}" size="18" />
+          <label text="${text}" size="~text_size" />
         </div>
         <div width="50%" height="50%" align_items="center" justify_content="center">
-          <label color="~color_text_translucent" text="${text_altgr}" size="18" />
+          <label color="on_background(opacity-0.5)" text="${text_altgr}" size="~text_size" />
         </div>
       </rectangle>
     </div>
@@ -90,10 +94,10 @@
     </div>
   </template>
 
-  <macro name="button_style" border="2" border_color="~color_accent_translucent" color="~color_bg" round="6"
+  <macro name="button_style" border="2" round="6"
     align_items="center" justify_content="center" padding="6" width="60" height="60" overflow="visible"/>
 
-  <macro name="bg_rect" width="100%" color="~color_bg" round="10" border="2" border_color="~color_accent" />
+  <macro name="bg_rect" width="100%" color="background_contrast" round="10" border="2" border_color="primary" />
 
   <blueprint name="menu_app">
     <context_menu >
@@ -108,7 +112,7 @@
   <!-- An app with a single icon. -->
   <template name="App">
     <Button macro="button_style" id="overlay_${idx}" tooltip_str="${name}" _context_name="${name}" _press_left="::ContextMenuOpen menu_app" _press_right="::OverlayToggle ${name}">  
-      <sprite width="38" height="38" color="~color_text" src_ext="${icon}" />
+      <sprite width="38" height="38" color="on_background" src_ext="${icon}" />
     </Button>
   </template>
 
@@ -123,9 +127,9 @@
   <!-- A screen with a shortened connector name, e.g. "H1" for HDMI-A-1 or "D2" for DP-2 -->
   <template name="Screen">
     <Button macro="button_style" id="overlay_${idx}" tooltip_str="${name}" _context_name="${name}" _press_left="::ContextMenuOpen menu_screen" _press_right="::OverlayToggle ${name}">
-      <sprite width="38" height="38" color="~color_text" src_builtin="edit/screen.svg" />
+      <sprite width="38" height="38" color="on_background_variant" src_builtin="edit/screen.svg" />
       <div position="absolute" margin_top="-7" margin_left="-1">
-        <label text="${display}" size="18" color="~color_faded_20" weight="bold" />
+        <label text="${display}" size="~text_size" color="on_background_variant(opacity-0.2)" weight="bold" />
       </div>
     </Button>
   </template>
@@ -141,7 +145,7 @@
 
   <template name="Panel">
     <Button macro="button_style" id="overlay_${idx}" tooltip_str="${name}" _context_name="${name}" _press_left="::ContextMenuOpen menu_panel" _press_right="::OverlayToggle ${name}">
-      <sprite width="38" height="38" color="~color_text" src="${icon}" />
+      <sprite width="38" height="38" color="on_background_variant" src="${icon}" />
     </Button>
   </template>
 
@@ -156,9 +160,9 @@
 
   <template name="Mirror">
     <Button macro="button_style" id="overlay_${idx}" tooltip_str="${name}" _context_name="${name}" _press_left="::ContextMenuOpen menu_mirror" _press_right="::OverlayToggle ${name}">
-      <sprite width="38" height="38" color="~color_text" src_builtin="edit/mirror.svg" />
+      <sprite width="38" height="38" color="on_background_variant" src_builtin="edit/mirror.svg" />
       <div position="absolute" margin_top="5" margin_left="13">
-        <label text="${display}" size="20" color="~color_faded_20" weight="bold" />
+        <label text="${display}" size="20" color="on_background(opacity-0.2)" weight="bold" />
       </div>
     </Button>
   </template>
@@ -185,9 +189,9 @@
 
   <template name="Set">
     <Button macro="button_style" id="set_${idx}" _press="::SetSwitch ${idx}" tooltip="WATCH.SWITCH_TO_SET" tooltip_side="bottom">
-      <sprite width="38" height="38" color="~color_text" src_builtin="watch/set2.svg" />
+      <sprite width="38" height="38" color="on_background_variant" src_builtin="watch/set2.svg" />
       <div position="absolute" margin_top="10" margin_left="-7">
-        <label text="${display}" size="20" color="~color_faded_20" weight="bold" />
+        <label text="${display}" size="20" color="on_background(opacity-0.2)" weight="bold" />
       </div>
     </Button>
   </template>
@@ -205,7 +209,7 @@
       <rectangle macro="bg_rect" padding="10" align_items="center" justify_content="space_between">
         <div gap="10">
           <Button macro="button_style" id="btn_dashboard" _press="::DashToggle">
-            <sprite width="38" height="38" color="~color_text" src="watch/wayvr_dashboard_mono.svg"  />
+            <sprite width="38" height="38" color="on_background_variant" src="watch/wayvr_dashboard_mono.svg"  />
           </Button>
           <VerticalSeparator />
           <div id="panels_root" gap="6">
@@ -216,7 +220,7 @@
         </div>
         <div id="tray_root" flex_direction="row" gap="10">
           <Button macro="button_style" _press="::ContextMenuOpen menu_burger">
-            <sprite width="38" height="38" color="~color_text" src_builtin="keyboard/burger.svg" />
+            <sprite width="38" height="38" color="on_background_variant" src_builtin="keyboard/burger.svg" />
           </Button>
 
           <VerticalSeparator />
diff --git a/wayvr/src/assets/gui/toast.xml b/wayvr/src/assets/gui/toast.xml
index c9169324..b407acc5 100644
--- a/wayvr/src/assets/gui/toast.xml
+++ b/wayvr/src/assets/gui/toast.xml
@@ -6,22 +6,22 @@
         padding="16"
         flex_direction="column"
         gap="8"
-        color="#000000c0" border_color="~color_accent" border="2" round="8">
+        color="background" border_color="outline" border="2" round="8">
 
         <!-- Toast title -->
         <div flex_direction="row" align_items="center" gap="8">
-          <sprite src="icons/bell.svg" min_width="32" min_height="32" max_width="32" max_height="32" flex_grow="1" />
-          <label wrap="1" id="toast_title" weight="bold" size="25" padding_left="16" padding_right="16" />
+          <sprite src="icons/bell.svg" color="on_background" min_width="32" min_height="32" max_width="32" max_height="32" flex_grow="1" />
+          <label wrap="1" id="toast_title" color="on_background" weight="bold" size="25" padding_left="16" padding_right="16" />
         </div>
 
         <!-- A simple separator -->
-        <rectangle width="100%" height="2" color="~color_accent" />
+        <rectangle width="100%" height="2" color="outline" />
 
         <div>
           <!-- Toast message -->
-          <label id="toast_body" wrap="1" size="20" padding_left="16" padding_right="16" />
+          <label id="toast_body" color="on_background" wrap="1" size="20" padding_left="16" padding_right="16" />
         </div>
       </rectangle>
     </div>
   </elements>
-</layout>
\ No newline at end of file
+</layout>
diff --git a/wayvr/src/assets/gui/watch.xml b/wayvr/src/assets/gui/watch.xml
index c0378e50..1791d715 100644
--- a/wayvr/src/assets/gui/watch.xml
+++ b/wayvr/src/assets/gui/watch.xml
@@ -10,17 +10,14 @@
   </theme>
 
   <macro name="decorative_rect"
-    padding="8" color="~color_bg"
-    border="2" border_color="~color_accent" round="8" />
+    padding="8" color="background"
+    border="2" border_color="outline" round="8" />
 
-  <macro name="button_style"
-    padding="8"
-    border_color="~color_accent_translucent" border="2" round="8" color="~color_accent_40" color2="~color_accent_10" gradient="vertical"
-    align_items="center" justify_content="center" />
+  <macro name="button_style" padding="8" border="2" round="8" align_items="center" justify_content="center" />
 
   <template name="Device">
     <rectangle macro="decorative_rect" padding_top="4" padding_bottom="4" align_items="center" gap="8">
-      <sprite width="32" height="32" src_builtin="${src}" color="~color_text" />
+      <sprite width="32" height="32" src_builtin="${src}" color="on_background" />
       <label _source="battery" _device="${idx}" size="24" weight="bold" />
     </rectangle>
   </template>
@@ -40,34 +37,34 @@
 
   <template name="Screen">
     <Button macro="button_style" id="overlay_${idx}" tooltip_str="${name}" _press="::OverlayToggle ${name}">
-      <sprite width="38" height="38" color="~color_text" src_builtin="edit/screen.svg" />
+      <sprite width="38" height="38" color="on_background" src_builtin="edit/screen.svg" />
       <div position="absolute" margin_top="-7" margin_left="-1">
-        <label text="${display}" size="18" color="~color_faded_20" weight="bold" />
+        <label text="${display}" size="18" color="on_background(opacity-0.2)" weight="bold" />
       </div>
     </Button>
   </template>
   <template name="Panel">
     <Button macro="button_style" id="overlay_${idx}" tooltip_str="${name}" _press="::OverlayToggle ${name}">
-      <sprite width="38" height="38" color="~color_text" src_builtin="edit/panel.svg" />
+      <sprite width="38" height="38" color="on_background" src_builtin="edit/panel.svg" />
     </Button>
   </template>
   <template name="Mirror">
     <Button macro="button_style" id="overlay_${idx}" tooltip_str="${name}" _press="::OverlayToggle ${name}">
-      <sprite width="38" height="38" color="~color_text" src_builtin="edit/mirror.svg" />
+      <sprite width="38" height="38" color="on_background" src_builtin="edit/mirror.svg" />
       <div position="absolute" margin_top="5" margin_left="13">
-        <label text="${display}" size="20" color="~color_faded_20" weight="bold" />
+        <label text="${display}" size="20" color="on_background" weight="bold" />
       </div>
     </Button>
   </template>
   <template name="App">
     <Button macro="button_style" id="overlay_${idx}" tooltip_str="${name}" _press="::OverlayToggle ${name}">  
-      <sprite width="38" height="38" color="~color_text" src_ext="${icon}" />
+      <sprite width="38" height="38" color="on_background" src_ext="${icon}" />
     </Button>
   </template>
     
   <template name="Set">
     <Button macro="button_style" id="set_${idx}" _press="::SetToggle ${idx}" tooltip="WATCH.SWITCH_TO_SET" tooltip_side="top">
-      <sprite width="38" height="38" color="~color_text" src_builtin="watch/set2.svg" />
+      <sprite width="38" height="38" color="on_background" src_builtin="watch/set2.svg" />
       <div position="absolute" margin_top="9">
         <label text="${display}" size="24" color="#00050F" weight="bold" />
       </div>
@@ -77,10 +74,10 @@
   <template name="Clock">
     <div gap="12" flex_direction="column" padding="4">
       <div flex_direction="column" >
-        <label text="11:22 PM" _source="clock" _display="time" color="~color_text" size="~clock0_size" weight="bold" align="center" />
+        <label text="11:22 PM" _source="clock" _display="time" color="on_background" size="~clock0_size" weight="bold" align="center" />
         <div padding_left="2" gap="16" flex_direction="row" justify_content="center">
-          <label text="Tue" _source="clock" _display="dow_short" color="~color_text" size="~clock0_dow_size" weight="bold" />
-          <label text="22/2/2022" _source="clock" _display="date" color="~color_text" size="~clock0_date_size" weight="bold" />
+          <label text="Tue" _source="clock" _display="dow_short" color="on_background" size="~clock0_dow_size" weight="bold" />
+          <label text="22/2/2022" _source="clock" _display="date" color="on_background" size="~clock0_date_size" weight="bold" />
         </div>
       </div>
       <div flex_direction="row" gap="8" justify_content="space_around">
@@ -98,7 +95,7 @@
   </template>
 
   <template name="VerticalSeparator">
-    <rectangle width="2" height="100%" color="~color_accent" />
+    <rectangle width="2" height="100%" color="outline" />
   </template>
 
   <elements>
@@ -128,18 +125,18 @@
           <div flex_direction="column" gap="8">
             <div gap="8">
               <Button id="btn_keyboard" macro="button_style" _press="::OverlayToggle kbd" tooltip="EDIT_MODE.KEYBOARD" tooltip_side="left">
-                <sprite src_builtin="watch/keyboard.svg" color="~color_text"  width="40" height="40" />
+                <sprite src_builtin="watch/keyboard.svg" color="on_background"  width="40" height="40" />
               </Button>
               <Button id="btn_edit_mode" macro="button_style" _press="::EditToggle" tooltip="WATCH.EDIT_MODE" tooltip_side="left">
-                <sprite color="~color_text" width="40" height="40" src="watch/edit.svg" />
+                <sprite color="on_background" width="40" height="40" src="watch/edit.svg" />
               </Button>
             </div>
             <div gap="8">
               <Button macro="button_style" _press="::PlayspaceRecenter" tooltip="WATCH.RECENTER" tooltip_side="left">
-                <sprite width="40" height="40" color="~color_text" src="watch/recenter.svg" />
+                <sprite width="40" height="40" color="on_background" src="watch/recenter.svg" />
               </Button>
               <Button macro="button_style" _press="::PlayspaceFixFloor" tooltip="WATCH.FIX_FLOOR" tooltip_side="left">
-                <sprite width="40" height="40" color="~color_text" src="watch/fix-floor.svg" />
+                <sprite width="40" height="40" color="on_background" src="watch/fix-floor.svg" />
               </Button>
             </div>
           </div>
@@ -149,7 +146,7 @@
         <div flex_direction="row" gap="8">
           <div gap="4">
             <Button id="btn_dashboard" macro="button_style" _press="::DashToggle" tooltip="WATCH.DASHBOARD" tooltip_side="top">
-              <sprite color="~color_text" width="40" height="40" src="watch/wayvr_dashboard_mono.svg" />
+              <sprite color="on_background" width="40" height="40" src="watch/wayvr_dashboard_mono.svg" />
             </Button>
           </div>
           <VerticalSeparator />
diff --git a/wayvr/src/assets/gui/whisper.xml b/wayvr/src/assets/gui/whisper.xml
index 07dcd4ca..89927ae1 100644
--- a/wayvr/src/assets/gui/whisper.xml
+++ b/wayvr/src/assets/gui/whisper.xml
@@ -1,11 +1,11 @@
 <layout>
-  <macro name="button_style" border="2" border_color="~color_accent_translucent" color="~color_bg" round="6"
+  <macro name="button_style" border="2" round="6"
     align_items="center" justify_content="center" padding="6" width="60" height="60" overflow="visible"/>
 
-  <macro name="bg_rect" width="100%" color="~color_bg" round="10" border="2" border_color="~color_accent" />
+  <macro name="bg_rect" width="100%" color="background" border_color="outline" round="10" border="2" />
 
   <template name="VerticalSeparator">
-    <rectangle width="2" height="100%" color="~color_accent" />
+    <rectangle width="2" height="100%" color="outline" />
   </template>
 
   <elements>
@@ -13,27 +13,27 @@
       <rectangle macro="bg_rect" padding="10" align_items="center" justify_content="space_between">
         <div gap="10">
           <Button macro="button_style" _press="::WhisperTranscribeStart" _release="::WhisperTranscribeStop" tooltip="WHISPER.TRANSCRIBE" tooltip_side="right">
-            <sprite width="38" height="38" color="~color_text" src="icons/mic.svg"  />
+            <sprite width="38" height="38" src="icons/mic.svg"  />
           </Button>
           <VerticalSeparator />
           <Button macro="button_style" _press="::WhisperPaste" tooltip="WHISPER.PASTE" tooltip_side="right">
-            <sprite width="38" height="38" color="~color_text" src_builtin="icons/paste.svg" />
+            <sprite width="38" height="38" src_builtin="icons/paste.svg" />
           </Button>
           <Button macro="button_style" _press="::WhisperPasteAndGo" tooltip="WHISPER.PASTE_AND_GO" tooltip_side="right">
-            <sprite width="38" height="38" color="~color_text" src_builtin="icons/paste-go.svg" />
+            <sprite width="38" height="38" src_builtin="icons/paste-go.svg" />
           </Button>
           <VerticalSeparator />
           <Button macro="button_style" _press="::SendKey Return down" _release="::SendKey Return up" tooltip="WHISPER.ENTER_KEY" tooltip_side="right">
-            <sprite width="38" height="38" color="~color_text" src_builtin="keyboard/return.svg" />
+            <sprite width="38" height="38" src_builtin="keyboard/return.svg" />
           </Button>
           <VerticalSeparator />
           <Button macro="button_style" _press="::WhisperSendOSC" tooltip="WHISPER.SEND_OSC" id="btn_osc_send" tooltip_side="right">
-            <sprite width="38" height="38" color="~color_text" src_builtin="icons/chat.svg" />
+            <sprite width="38" height="38" src_builtin="icons/chat.svg" />
           </Button>
         </div>
         <div gap="10">
           <Button macro="button_style" _press="::WhisperUnloadAndClose" tooltip="WHISPER.UNLOAD_AND_CLOSE" tooltip_side="left">
-            <sprite width="38" height="38" color="~color_text" src_builtin="edit/close.svg" />
+            <sprite width="38" height="38" src_builtin="edit/close.svg" />
           </Button>
         </div>
       </rectangle>
diff --git a/wgui/doc/widgets.md b/wgui/doc/widgets.md
deleted file mode 100644
index 2c094160..00000000
--- a/wgui/doc/widgets.md
+++ /dev/null
@@ -1,589 +0,0 @@
-# Quick jump
-
-## [Widgets](#widgets)
-
-[div](#div-widget), [label](#label-widget), [rectangle](#rectangle-widget), [sprite](#sprite-widget)
-
-## [Built-in components](#components)
-
-[Button](#button-component), [Slider](#slider-component), [CheckBox](#checkbox-component), [Tabs](#tabs-component) ([Tab](#tab-component)), [EditBox](#editbox-component), [BarGraph](#bargraph-component)
-
-## [Examples](#examples)
-
-[Simple layout](#simple-layout)
-
-[Value substitution (themes)](#value-substitution-themes)
-
-[File inclusion](#file-inclusion)
-
-[Macros](#macros)
-
-[Templates](#templates)
-
-# Universal widget attributes
-
-_They can be used in any widget/component._
-
-`display`: "flex" | "block" | "grid"
-
-`position`: "absolute" | "relative"
-
-`flex_grow`: **float**
-
-`flex_shrink`: **float**
-
-`gap`: **float** | **percent**
-
-`flex_basis`: **float** | **percent**
-
-`justify_self`: "center" | "end" | "flex_end" | "flex_start" | "start" | "stretch"
-
-`justify_content`: "center" | "end" | "flex_start" | "flex_end" | "space_around" | "space_between" | "space_evenly" | "start" | "stretch"
-
-`flex_wrap`: "wrap" | "no_wrap" | "wrap_reverse"
-
-`flex_direction`: "row" | "column" | "column_reverse" | "row_reverse"
-
-`align_items`, `align_self`: "baseline" | "center" | "end" | "flex_start" | "flex_end" | "start" | "stretch"
-
-`box_sizing`: "border_box" | "content_box"
-
-`margin`, `margin_left`, `margin_right`, `margin_top`, `margin_bottom`: **float** | **percent**
-
-`padding`, `padding_left`, `padding_right`, `padding_top`, `padding_bottom`: **float** | **percent**
-
-`overflow`, `overflow_x`, `overflow_y`: "hidden" | "visible" | "clip" | "scroll"
-
-`min_width`, `min_height`: **float** | **percent**
-
-`max_width`, `max_height`: **float** | **percent**
-
-`width`, `height`: **float** | **percent**
-
-## Advanced attributes
-
-`interactable`: "1" | "0"
-
-_Set to 0 if you want to exclude this widget from altering the event state_
-
-`consume_mouse_events`: "1" | "0"
-
-_Used in case of overlapping pop-ups or windows, most notably applied to various backgrounds_
-
-`new_pass`: "1" | "0"
-
-_Set to 1 if you want to render overlapping pop-ups to properly render your widgets in order. Wgui renders with as few Vulkan drawcalls as possible, so this is your responsibility._
-
-## Default Colors
-
-_These colors can be defined by the user to control the color scheme. They always exists and can be used in any place a normal color could be used._
-
-`~color_text`: default: white(#FFFFFF)
-`~color_accent`: default: light blue(#21ADFF)
-`~color_danger`: default: red(#E60000)
-`~color_faded`: default: grey(#ABBDCC)
-`~color_bg`: default: black(#00121ABF) (color_background in config)
-
-_Only the default colors can be changed with the following suffixes._
-
-`_translucent`
-
-_Halves the alpha of the color._
-
-`_10`
-`_20`
-`_30`
-`_40`
-`_50`
-
-_Darkens the color by multiplying it with a percentage. `~color_accent_50` Would be half of the normal brightness but the same alpha. You can't combine the suffixes_
-
-### Color
-
-# Widgets
-
-## div widget
-
-### `<div>`
-
-### The most simple element
-
-#### Parameters
-
-_None_
-
----
-
-## label widget
-
-### `<label>`
-
-### A simple text element
-
-#### Parameters
-
-`text`: **string**
-
-_Simple text_
-
-`translation`: **string**
-
-_Translated by key_
-
-`size`: **float** (default: 14)
-
-_Text size in pixel units_
-
-`wrap`: "1" | "0" (default: "0")
-
-_Enable text wrapping?_
-
-`color`: #FFAABB | #FFAABBCC
-
-`align`: "left" | "right" | "center" | "justified" | "end"
-
-`weight`: "normal" | "bold"
-
-`shadow`: #112233 | #112233CC (default: None)
-
-`shadow_x`: **float** (default: 1.5)
-
-_Horizontal offset of the shadow from the original text. Positive is right._
-
-`shadow_y`: **float** (default: 1.5)
-
-_Vertical offset of the shadow from the original text. Positive is down._
-
----
-
-## rectangle widget
-
-### `<rectangle>`
-
-### A styled rectangle
-
-#### Parameters
-
-`color`: #FFAABB | #FFAABBCC
-
-_1st gradient color_
-
-`color2`: #FFAABB | #FFAABBCC
-
-_2nd gradient color_
-
-`gradient`: "horizontal" | "vertical" | "radial" | "none"
-
-`round`: **float** (default: 0) | **percent** (0-100%)
-
-`border`: **float**
-
-`border_color`: #FFAABB | #FFAABBCC
-
----
-
-## sprite widget
-
-### `<sprite>`
-
-### Image widget for small images
-
-Always set the `width` & `height` of a `<sprite>`!
-
-Supported formats: svg, png, jpeg, gif, webp
-
-Maximum image size: 256x256 pixels
-
-For large or frequently changing images (e.g. album art), or if borders/rounding is desired, consider the `<image>` tag instead.
-
-Sprite images are atlassed, making them very efficient to render.
-
-Adding large sprites permanently increases the atlas size (and thus VRAM usage) for the session. (Atlas space can be re-used, but the atlas won't shrink back.)
-
-#### Parameters
-
-`src`: **string**
-
-_External (filesystem) image path. Falls back to Internal (assets) if not found._
-
-`src_ext`: **string**
-
-_External (filesystem) image path_
-
-`src_builtin`: **string**
-
-_Internal (assets) image path_
-
-`src_internal`: **string**
-
-_wgui internal image path. Do not use directly unless it's related to the core wgui assets._
-
-## image widget
-
-### `<image>`
-
-### Image widget for large images
-
-Always set the `width` & `height` of an `<image>`!
-
-Supported formats: svg, png, jpeg, gif, webp
-
-Maximum image size: Max texture size for the GPU (usually 8K+)
-
-For small images such as icons, consider using the `<sprite>` tag instead.
-
-`<image>` requires a single draw call per widget, while `<sprite>` widgets all share a single draw call per panel.
-
-#### Parameters
-
-`src`: **string**
-
-_External (filesystem) image path. Falls back to Internal (assets) if not found._
-
-`src_ext`: **string**
-
-_External (filesystem) image path_
-
-`src_builtin`: **string**
-
-_Internal (assets) image path_
-
-`src_internal`: **string**
-
-_wgui internal image path. Do not use directly unless it's related to the core wgui assets._
-
-`round`: **float** (default: 0) | **percent** (0-100%)
-
-`border`: **float**
-
-`border_color`: #FFAABB | #FFAABBCC
-
----
-
-# Components
-
-## Button component
-
-### `<Button>`
-
-### A clickable, decorated button
-
-#### Parameters
-
-`text`: **string**
-
-_Simple text_
-
-`translation`: **string**
-
-_Translated by key_
-
-`round`: **float** (default: 4) | **percent** (0-100%)
-
-`border`: **float** (default: 2)
-
-`color`: #FFAABB | #FFAABBCC
-
-`border_color`: #FFAABB | #FFAABBCC
-
-`hover_color`: #FFAABB | #FFAABBCC
-
-`hover_border_color`: #FFAABB | #FFAABBCC
-
-`tooltip`: **string**
-
-_Tooltip text on hover, translated by key_
-
-`tooltip_str`: **string**
-
-_Tooltip text on hover, raw text (not translated)_
-
-`tooltip_side`: "top" | "bottom" | "left" | "right" (default: top)
-
-`sticky`: "1" | "0" (default: "0")
-
-_make button act as a toggle (visual only)_
-
-`sprite_src` | `sprite_src_ext` | `sprite_src_builtin` | `sprite_src_internal`
-
-_Image path (see [sprite](#sprite-widget)) for src descriptions_
-
-#### Info
-
-Child widgets are supported and can be added directly in XML.
-
----
-
-## Slider component
-
-### `<Slider>`
-
-### A simple slider.
-
-#### Parameters
-
-`min_value`: **float**
-
-`max_value`: **float**
-
-_Needs to be bigger than `min_value`_
-
-`value`: **float**
-
-_Initial slider value_
-
-`show_value`: "1" | "0"
-
-_Set to 0 if you don't want to display value text in the slider handle_
-
----
-
-## Checkbox component
-
-### `<CheckBox>`
-
-### A check-box with label.
-
-#### Parameters
-
-`text`: **string**
-
-_Simple text_
-
-`translation`: **string**
-
-_Translated by key_
-
-`box_size`: **float** (default: 24)
-
-`color_checked`: #FFAABB | #FFAABBCC
-
-`value`: **string**
-
-_optional value that will be sent with internal events_
-
-`checked`: **int** (default: 0)
-
----
-
-## Radiobox component
-
-### `<RadioBox>`
-
-### A radio-box with label.
-
-#### Parameters
-
-`text`: **string**
-
-_Simple text_
-
-`translation`: **string**
-
-_Translated by key_
-
-`box_size`: **float** (default: 24)
-
-`value`: **string**
-
-_optional value that will be set as the RadioGroup's value_
-
-`checked`: **int** (default: 0)
-
----
-
-## RadioGroup component
-
-### `<RadioGroup>`
-
-### A radio group. Place `<RadioBox>` components inside this.
-
-## Tabs component
-
-### `<Tabs>`
-
-### A tab bar component
-
-#### Parameters
-
-`id`: **string**
-
-_Unique identifier for the tab group_
-
-Only `<Tab>` components should be placed inside `<Tabs>`.
-
----
-
-## Tab component
-
-### `<Tab>`
-
-### A single tab inside a `<Tabs>` component
-
-#### Parameters
-
-`name`: **string**
-
-_Unique identifier for the tab_
-
-`translation`: **string**
-
-_Translated by key_
-
-`sprite_src` | `sprite_src_ext` | `sprite_src_builtin` | `sprite_src_internal`
-
-_Image path (see [sprite](#sprite-widget)) for src descriptions_
-
----
-
-## EditBox component
-
-### `<EditBox>`
-
-### A single-line text input field.
-
-#### Parameters
-
-`text`: **string**
-
-_Initial text content_
-
-## BarGraph component
-
-### `<BarGraph>`
-
-### A bar graph widget
-
-#### Parameters
-
-`limit_min`: **float**
-
-_Minimum limit value_
-
-`limit_max`: **float**
-
-_Maximum limit value_
-
-`unit`: **string** (default: "")
-
-_Unit type, for example "%" or "ms"_
-
-`capacity`: **int** (default: 50)
-
-_Value count_
-
----
-
-# Examples
-
-## Simple layout
-
-```xml
-<layout>
-  <elements>
-    <label text="Hello, world!"/>
-    <label translation="WELCOME.HELLO_WORLD" size="20" color="#FF0000"/>
-    <div gap="16" flex_direction="row">
-      <rectangle width="16" height="16" color="#FF0000"/>
-      <rectangle width="16" height="16" color="#00FF00"/>
-      <rectangle width="16" height="16" color="#0000FF"/>
-    </div>
-  </elements>
-</layout>
-```
-
-## Value substitution (themes)
-
-```xml
-<layout>
-  <theme>
-    <var key="hello" value="Hello, world!" />
-    <var key="text_color" value="#FF0000" />
-  </theme>
-
-  <elements>
-    <!-- "~hello" will be replaced to "Hello, world!" -->
-    <label text="~hello"/>
-    <!-- "~text_color" will be replaced to "#FF0000" -->
-    <label text="This text will be red" color="~text_color"/>
-  </elements>
-</layout>
-```
-
-## Macros
-
-```xml
-<layout>
-  <macro name="my_macro"
-    margin="4" min_width="100" min_height="100" flex_direction="row" gap="8"
-    align_items="center" justify_content="center"/>
-
-  <elements>
-    <!-- This div will have all attributes specified in "my_macro" -->
-    <div macro="my_macro">
-      <label text="hello, world!"/>
-    </div>
-  </elements>
-</layout>
-
-```
-
-## File inclusion
-
-theme.xml:
-
-```xml
-<layout>
-  <theme>
-    <var key="my_red" value="#FF0000" />
-    <var key="my_green" value="#00FF00" />
-    <var key="my_blue" value="#0000FF" />
-  </theme>
-</layout>
-```
-
-bar.xml:
-
-```xml
-<layout>
-  <elements>
-    <!-- utilize theme variables included in theme.xml -->
-    <rectangle width="16" height="16" color="~my_red"/>
-    <rectangle width="16" height="16" color="~my_green"/>
-    <rectangle width="16" height="16" color="~my_blue"/>
-  </elements>
-</layout>
-```
-
-main.xml:
-
-```xml
-<layout>
-  <!-- Include theme -->
-  <include src="theme.xml"/>
-
-  <elements>
-    <!-- Include as additional elements here -->
-    <include src="bar.xml"/>
-  </elements>
-</layout>
-```
-
-## Templates
-
-```xml
-<layout>
-  <!-- "title" attrib will be passed to every matching ${title} -->
-  <template name="DecoratedTitle">
-    <rectangle color="#FFFF00" padding="8" round="4" gap="4">
-      <label text="${title}"/>
-    </rectangle>
-  </template>
-
-  <elements>
-    <!-- "title" used here -->
-    <DecoratedTitle title="This is a title.">
-  </elements>
-</layout>
-
-```