Conv

web/packages/base/components/Navbar.tsx

@@ -9,20 +9,22 @@ import React from "react";
  * Usually this area contains the App's main navigation bar ({@link AppNavbar}),
  * but depending on the context it can also show the {@link SelectionBar}.
  * */
-export const NavbarBase = styled(FlexWrapper)`
+export const NavbarBase = styled(FlexWrapper)(
+    ({ theme }) => `
     min-height: 64px;
     position: sticky;
     top: 0;
     left: 0;
     z-index: 10;
-    border-bottom: 1px solid ${({ theme }) => theme.palette.divider};
-    background-color: ${({ theme }) => theme.palette.background.default};
+    border-bottom: 1px solid ${theme.vars.palette.divider};
+    background-color: ${theme.vars.palette.background.default};
     margin-bottom: 16px;
     padding: 0 24px;
     @media (max-width: 720px) {
         padding: 0 4px;
     }
-`;
+`,
+);
 
 // TODO: Prune
 export const AppNavbar: React.FC = () => {
@@ -35,13 +37,15 @@ export const AppNavbar: React.FC = () => {
     );
 };
 
-const NavbarBaseNormalFlow = styled("div")`
+const NavbarBaseNormalFlow = styled("div")(
+    ({ theme }) => `
     flex: 0 0 64px;
     display: flex;
     justify-content: center;
     align-items: center;
-    border-bottom: 1px solid ${({ theme }) => theme.palette.divider};
-`;
+    border-bottom: 1px solid ${theme.vars.palette.divider};
+`,
+);
 
 /**
  * A variant of AppNavbar that places itself normally in the document flow

web/packages/base/components/loaders.tsx

@@ -22,13 +22,13 @@ export const LoadingIndicator: React.FC = () => (
  */
 export const LoadingOverlay: React.FC = () => (
     <Overlay
-        sx={(theme) => ({
+        sx={{
             display: "flex",
             justifyContent: "center",
             alignItems: "center",
             zIndex: 2000,
-            backgroundColor: theme.palette.background.default,
-        })}
+            backgroundColor: "background.default",
+        }}
     >
         <ActivityIndicator />
     </Overlay>