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

app/scenes/Document/components/SidebarLayout.tsx

@@ -4,13 +4,12 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Portal } from "react-portal";
 import styled from "styled-components";
-import { depths } from "@shared/styles";
+import { depths, s, ellipsis } from "@shared/styles";
 import Button from "~/components/Button";
 import Flex from "~/components/Flex";
 import Scrollable from "~/components/Scrollable";
 import Tooltip from "~/components/Tooltip";
 import useMobile from "~/hooks/useMobile";
-import { ellipsis } from "~/styles";
 import { fadeIn } from "~/styles/animations";
 
 type Props = React.HTMLAttributes<HTMLDivElement> & {
@@ -67,7 +66,7 @@ const Backdrop = styled.a`
   right: 0;
   cursor: default;
   z-index: ${depths.sidebar - 1};
-  background: ${(props) => props.theme.backdrop};
+  background: ${s("backdrop")};
 `;
 
 const ForwardIcon = styled(BackIcon)`
@@ -91,7 +90,7 @@ const Header = styled(Flex)`
   align-items: center;
   position: relative;
   padding: 16px 12px 16px 16px;
-  color: ${(props) => props.theme.text};
+  color: ${s("text")};
   flex-shrink: 0;
 `;