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

app/scenes/Document/Shared.tsx

@@ -6,6 +6,7 @@ import { useTranslation } from "react-i18next";
 import { RouteComponentProps, useLocation, Redirect } from "react-router-dom";
 import styled, { ThemeProvider } from "styled-components";
 import { setCookie } from "tiny-cookie";
+import { s } from "@shared/styles";
 import { CustomTheme, NavigationNode } from "@shared/types";
 import DocumentModel from "~/models/Document";
 import Error404 from "~/scenes/Error404";
@@ -197,7 +198,7 @@ function SharedDocumentScene(props: Props) {
 }
 
 const Content = styled(Text)`
-  color: ${(props) => props.theme.textSecondary};
+  color: ${s("textSecondary")};
   text-align: center;
   margin-top: -8px;
 `;

app/scenes/Document/components/CommentThread.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
 import scrollIntoView from "smooth-scroll-into-view-if-needed";
 import styled, { css } from "styled-components";
+import { s } from "@shared/styles";
 import Comment from "~/models/Comment";
 import Document from "~/models/Document";
 import Avatar from "~/components/Avatar";
@@ -199,7 +200,7 @@ const Reply = styled.button`
   padding: 8px;
   margin: 0;
   background: none;
-  color: ${(props) => props.theme.textTertiary};
+  color: ${s("textTertiary")};
   font-size: 14px;
   -webkit-appearance: none;
   cursor: var(--pointer);

app/scenes/Document/components/CommentThreadItem.tsx

@@ -4,6 +4,7 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled, { css } from "styled-components";
+import { s } from "@shared/styles";
 import { Minute } from "@shared/utils/time";
 import Comment from "~/models/Comment";
 import Avatar from "~/components/Avatar";
@@ -223,7 +224,7 @@ const Menu = styled(CommentMenu)<{ dir?: "rtl" | "ltr" }>`
   &:hover,
   &[aria-expanded="true"] {
     opacity: 1;
-    background: ${(props) => props.theme.sidebarActiveBackground};
+    background: ${s("sidebarActiveBackground")};
   }
 `;
 
@@ -246,13 +247,12 @@ export const Bubble = styled(Flex)<{
   position: relative;
   flex-grow: 1;
   font-size: 15px;
-  color: ${(props) => props.theme.text};
-  background: ${(props) => props.theme.commentBackground};
+  color: ${s("text")};
+  background: ${s("commentBackground")};
   min-width: 2em;
   margin-bottom: 1px;
   padding: 8px 12px;
-  transition: color 100ms ease-out,
-    ${(props) => props.theme.backgroundTransition};
+  transition: color 100ms ease-out, ${s("backgroundTransition")};
 
   ${({ $lastOfThread }) =>
     $lastOfThread &&

app/scenes/Document/components/Contents.tsx

@@ -3,6 +3,7 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
+import { s } from "@shared/styles";
 import Text from "~/components/Text";
 import useWindowScrollPosition from "~/hooks/useWindowScrollPosition";
 
@@ -101,8 +102,8 @@ const Sticky = styled.div`
   top: 80px;
   max-height: calc(100vh - 80px);
 
-  background: ${(props) => props.theme.background};
-  transition: ${(props) => props.theme.backgroundTransition};
+  background: ${s("background")};
+  transition: ${s("backgroundTransition")};
 
   margin-top: 72px;
   margin-right: 52px;
@@ -122,7 +123,7 @@ const Sticky = styled.div`
 const Heading = styled.h3`
   font-size: 13px;
   font-weight: 600;
-  color: ${(props) => props.theme.textTertiary};
+  color: ${s("textTertiary")};
   letter-spacing: 0.03em;
 `;
 
@@ -145,11 +146,11 @@ const ListItem = styled.li<{ level: number; active?: boolean }>`
 `;
 
 const Link = styled.a`
-  color: ${(props) => props.theme.text};
+  color: ${s("text")};
   font-size: 14px;
 
   &:hover {
-    color: ${(props) => props.theme.accent};
+    color: ${s("accent")};
   }
 `;
 

app/scenes/Document/components/Document.tsx

@@ -13,6 +13,7 @@ import {
 } from "react-router";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
+import { s } from "@shared/styles";
 import { NavigationNode } from "@shared/types";
 import { Heading } from "@shared/utils/ProsemirrorHelper";
 import { parseDomain } from "@shared/utils/domains";
@@ -36,6 +37,7 @@ import { client } from "~/utils/ApiClient";
 import { replaceTitleVariables } from "~/utils/date";
 import { emojiToUrl } from "~/utils/emoji";
 import { isModKey } from "~/utils/keyboard";
+
 import {
   documentHistoryUrl,
   editDocumentUrl,
@@ -574,8 +576,8 @@ const Footer = styled.div`
 
 const Background = styled(Container)`
   position: relative;
-  background: ${(props) => props.theme.background};
-  transition: ${(props) => props.theme.backgroundTransition};
+  background: ${s("background")};
+  transition: ${s("backgroundTransition")};
 `;
 
 const ReferencesWrapper = styled.div<{ isOnlyTitle?: boolean }>`

app/scenes/Document/components/EditableTitle.tsx

@@ -7,6 +7,7 @@ import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import isMarkdown from "@shared/editor/lib/isMarkdown";
 import normalizePastedMarkdown from "@shared/editor/lib/markdown/normalize";
+import { s } from "@shared/styles";
 import { light } from "@shared/styles/theme";
 import {
   getCurrentDateAsString,
@@ -238,8 +239,8 @@ const Title = styled(ContentEditable)<TitleProps>`
   }
 
   &::placeholder {
-    color: ${(props) => props.theme.placeholder};
-    -webkit-text-fill-color: ${(props) => props.theme.placeholder};
+    color: ${s("placeholder")};
+    -webkit-text-fill-color: ${s("placeholder")};
   }
 
   ${breakpoint("tablet")`

app/scenes/Document/components/Insights.tsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory, useRouteMatch } from "react-router-dom";
 import styled from "styled-components";
+import { s } from "@shared/styles";
 import User from "~/models/User";
 import Avatar from "~/components/Avatar";
 import { useDocumentContext } from "~/components/DocumentContext";
@@ -179,7 +180,7 @@ const List = styled("ul")`
     content: "·";
     display: inline-block;
     font-weight: 600;
-    color: ${(props) => props.theme.textTertiary};
+    color: ${s("textTertiary")};
     width: 10px;
   }
 `;

app/scenes/Document/components/ReferenceListItem.tsx

@@ -3,12 +3,13 @@ import { DocumentIcon } from "outline-icons";
 import * as React from "react";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
+import { s, ellipsis } from "@shared/styles";
 import { NavigationNode } from "@shared/types";
 import parseTitle from "@shared/utils/parseTitle";
 import Document from "~/models/Document";
 import Flex from "~/components/Flex";
 import EmojiIcon from "~/components/Icons/EmojiIcon";
-import { ellipsis, hover } from "~/styles";
+import { hover } from "~/styles";
 import { sharedDocumentPath } from "~/utils/routeHelpers";
 
 type Props = {
@@ -32,12 +33,12 @@ const DocumentLink = styled(Link)`
   &:${hover},
   &:active,
   &:focus {
-    background: ${(props) => props.theme.listItemHoverBackground};
+    background: ${s("listItemHoverBackground")};
   }
 `;
 
 const Content = styled(Flex)`
-  color: ${(props) => props.theme.textSecondary};
+  color: ${s("textSecondary")};
   margin-left: -4px;
 `;
 
@@ -47,7 +48,7 @@ const Title = styled.div`
   font-weight: 500;
   line-height: 1.25;
   padding-top: 3px;
-  color: ${(props) => props.theme.text};
+  color: ${s("text")};
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
     Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 `;

app/scenes/Document/components/SharePopover.tsx

@@ -7,6 +7,7 @@ import * as React from "react";
 import { useTranslation, Trans } from "react-i18next";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
+import { s } from "@shared/styles";
 import { SHARE_URL_SLUG_REGEX } from "@shared/utils/urlHelpers";
 import Document from "~/models/Document";
 import Share from "~/models/Share";
@@ -349,7 +350,7 @@ function SharePopover({
 }
 
 const StyledLink = styled(Link)`
-  color: ${(props) => props.theme.textSecondary};
+  color: ${s("textSecondary")};
   text-decoration: underline;
 `;
 
@@ -374,14 +375,14 @@ const NoticeWrapper = styled.div`
 const MoreOptionsButton = styled(Button)`
   background: none;
   font-size: 14px;
-  color: ${(props) => props.theme.textTertiary};
+  color: ${s("textTertiary")};
   margin-left: -8px;
 `;
 
 const Separator = styled.div`
   height: 1px;
   width: 100%;
-  background-color: ${(props) => props.theme.divider};
+  background-color: ${s("divider")};
 `;
 
 const SwitchLabel = styled(Flex)`

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;
 `;