Conv

web/packages/new/photos/components/SearchBar.tsx

@@ -324,13 +324,13 @@ const Control = ({ children, ...props }: ControlProps<SearchOption, false>) => (
             }}
         >
             <Box
-                sx={(theme) => ({
+                sx={{
                     display: "inline-flex",
                     // Match the default padding of the ValueContainer to make
                     // the icon look properly spaced and aligned.
                     pl: "8px",
-                    color: theme.colors.stroke.muted,
-                })}
+                    color: "stroke.muted",
+                }}
             >
                 {iconForOption(props.getValue()[0])}
             </Box>

web/packages/new/photos/components/gallery/BarImpl.tsx

@@ -351,8 +351,12 @@ const ModeButton = styled(UnstyledButton, {
     shouldForwardProp: (propName) => propName != "active",
 })<{ active: boolean }>(
     ({ theme, active }) => `
-    p { color: ${active ? theme.colors.text.base : theme.colors.text.muted} }
-    p:hover { color: ${theme.colors.text.base} }
+p {
+    color: ${active ? theme.vars.palette.text.base : theme.vars.palette.text.muted}
+}
+p:hover {
+    color: ${theme.vars.palette.text.base}
+}
 `,
 );
 
@@ -374,8 +378,8 @@ const ScrollButtonBase_ = styled("button")(({ theme }) => ({
     padding: 0,
     margin: 0,
     borderRadius: "50%",
-    backgroundColor: theme.palette.backdrop.muted,
-    color: theme.colors.stroke.base,
+    backgroundColor: theme.vars.palette.backdrop.muted,
+    color: theme.vars.palette.stroke.base,
     cursor: "pointer",
     "& > svg": {
         borderRadius: "50%",