Add 's' method to access theme props (#5163)

app/components/List/Error.tsx

@@ -2,6 +2,7 @@ import { DisconnectedIcon, WarningIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
+import { s } from "@shared/styles";
 import Empty from "~/components/Empty";
 import useEventListener from "~/hooks/useEventListener";
 import { OfflineError } from "~/utils/errors";
@@ -43,10 +44,10 @@ const Content = styled(Empty)`
   white-space: nowrap;
 
   ${ButtonLink} {
-    color: ${(props) => props.theme.textTertiary};
+    color: ${s("textTertiary")};
 
     &:hover {
-      color: ${(props) => props.theme.textSecondary};
+      color: ${s("textSecondary")};
       text-decoration: underline;
     }
   }

app/components/List/Item.tsx

@@ -1,9 +1,9 @@
 import { LocationDescriptor } from "history";
 import * as React from "react";
 import styled, { useTheme } from "styled-components";
+import { s, ellipsis } from "@shared/styles";
 import Flex from "~/components/Flex";
 import NavLink from "~/components/NavLink";
-import { ellipsis } from "~/styles";
 
 export type Props = Omit<React.HTMLAttributes<HTMLAnchorElement>, "title"> & {
   image?: React.ReactNode;
@@ -98,7 +98,7 @@ const Image = styled(Flex)`
   user-select: none;
   flex-shrink: 0;
   align-self: center;
-  color: ${(props) => props.theme.text};
+  color: ${s("text")};
 `;
 
 const Heading = styled.p<{ $small?: boolean }>`