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

app/editor/components/FloatingToolbar.tsx

@@ -2,7 +2,7 @@ import { NodeSelection } from "prosemirror-state";
 import { CellSelection } from "prosemirror-tables";
 import * as React from "react";
 import styled from "styled-components";
-import { depths } from "@shared/styles";
+import { depths, s } from "@shared/styles";
 import { Portal } from "~/components/Portal";
 import useComponentSize from "~/hooks/useComponentSize";
 import useEventListener from "~/hooks/useEventListener";
@@ -217,7 +217,7 @@ const Wrapper = styled.div<{
   position: absolute;
   z-index: ${depths.editorToolbar};
   opacity: 0;
-  background-color: ${(props) => props.theme.toolbarBackground};
+  background-color: ${s("toolbarBackground")};
   border-radius: 4px;
   transform: scale(0.95);
   transition: opacity 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275),
@@ -235,7 +235,7 @@ const Wrapper = styled.div<{
     width: 24px;
     height: 24px;
     transform: translateX(-50%) rotate(45deg);
-    background: ${(props) => props.theme.toolbarBackground};
+    background: ${s("toolbarBackground")};
     border-radius: 3px;
     z-index: -1;
     position: absolute;

app/editor/components/Input.tsx

@@ -1,9 +1,10 @@
 import styled from "styled-components";
+import { s } from "@shared/styles";
 
 const Input = styled.input`
   font-size: 15px;
-  background: ${(props) => props.theme.toolbarInput};
-  color: ${(props) => props.theme.toolbarItem};
+  background: ${s("toolbarInput")};
+  color: ${s("toolbarItem")};
   border-radius: 2px;
   padding: 3px 8px;
   border: 0;

app/editor/components/LinkEditor.tsx

@@ -10,6 +10,7 @@ import { setTextSelection } from "prosemirror-utils";
 import { EditorView } from "prosemirror-view";
 import * as React from "react";
 import styled from "styled-components";
+import { s } from "@shared/styles";
 import { isInternalUrl, sanitizeUrl } from "@shared/utils/urls";
 import Flex from "~/components/Flex";
 import { ResizingHeightContainer } from "~/components/ResizingHeightContainer";
@@ -403,7 +404,7 @@ const Wrapper = styled(Flex)`
 `;
 
 const SearchResults = styled(Scrollable)<{ $hasResults: boolean }>`
-  background: ${(props) => props.theme.toolbarBackground};
+  background: ${s("toolbarBackground")};
   position: absolute;
   top: 100%;
   width: 100%;

app/editor/components/LinkSearchResult.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import scrollIntoView from "smooth-scroll-into-view-if-needed";
 import styled from "styled-components";
-import { ellipsis } from "~/styles";
+import { s, ellipsis } from "@shared/styles";
 
 type Props = React.HTMLAttributes<HTMLDivElement> & {
   icon: React.ReactNode;
@@ -78,7 +78,7 @@ const ListItem = styled.div<{
     props.selected ? props.theme.accentText : props.theme.toolbarItem};
   background: ${(props) =>
     props.selected ? props.theme.accent : "transparent"};
-  font-family: ${(props) => props.theme.fontFamily};
+  font-family: ${s("fontFamily")};
   text-decoration: none;
   overflow: hidden;
   white-space: nowrap;

app/editor/components/SuggestionsMenu.tsx

@@ -9,7 +9,7 @@ import insertFiles from "@shared/editor/commands/insertFiles";
 import { EmbedDescriptor } from "@shared/editor/embeds";
 import filterExcessSeparators from "@shared/editor/lib/filterExcessSeparators";
 import { MenuItem } from "@shared/editor/types";
-import { depths } from "@shared/styles";
+import { depths, s } from "@shared/styles";
 import { getEventFiles } from "@shared/utils/files";
 import { AttachmentValidation } from "@shared/validations";
 import { Portal } from "~/components/Portal";
@@ -583,7 +583,7 @@ const LinkInputWrapper = styled.div`
 const LinkInput = styled(Input)`
   height: 32px;
   width: 100%;
-  color: ${(props) => props.theme.textSecondary};
+  color: ${s("textSecondary")};
 `;
 
 const List = styled.ol`
@@ -602,7 +602,7 @@ const ListItem = styled.li`
 const Empty = styled.div`
   display: flex;
   align-items: center;
-  color: ${(props) => props.theme.textSecondary};
+  color: ${s("textSecondary")};
   font-weight: 500;
   font-size: 14px;
   height: 32px;
@@ -616,14 +616,14 @@ export const Wrapper = styled(Scrollable)<{
   left?: number;
   isAbove: boolean;
 }>`
-  color: ${(props) => props.theme.textSecondary};
-  font-family: ${(props) => props.theme.fontFamily};
+  color: ${s("textSecondary")};
+  font-family: ${s("fontFamily")};
   position: absolute;
   z-index: ${depths.editorToolbar};
   ${(props) => props.top !== undefined && `top: ${props.top}px`};
   ${(props) => props.bottom !== undefined && `bottom: ${props.bottom}px`};
   left: ${(props) => props.left}px;
-  background: ${(props) => props.theme.menuBackground};
+  background: ${s("menuBackground")};
   border-radius: 6px;
   box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px,
     rgba(0, 0, 0, 0.08) 0px 4px 8px, rgba(0, 0, 0, 0.08) 0px 2px 4px;
@@ -647,7 +647,7 @@ export const Wrapper = styled(Scrollable)<{
   hr {
     border: 0;
     height: 0;
-    border-top: 1px solid ${(props) => props.theme.divider};
+    border-top: 1px solid ${s("divider")};
   }
 
   ${({ active, isAbove }) =>

app/editor/components/ToolbarButton.tsx

@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import { s } from "@shared/styles";
 
 type Props = { active?: boolean; disabled?: boolean };
 
@@ -18,7 +19,7 @@ export default styled.button.attrs((props) => ({
   outline: none;
   pointer-events: all;
   position: relative;
-  color: ${(props) => props.theme.toolbarItem};
+  color: ${s("toolbarItem")};
 
   &:hover {
     opacity: 1;

app/editor/components/ToolbarMenu.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import styled from "styled-components";
 import { MenuItem } from "@shared/editor/types";
+import { s } from "@shared/styles";
 import { useEditor } from "./EditorContext";
 import ToolbarButton from "./ToolbarButton";
 import ToolbarSeparator from "./ToolbarSeparator";
@@ -11,7 +12,7 @@ type Props = {
 };
 
 const FlexibleWrapper = styled.div`
-  color: ${(props) => props.theme.toolbarItem};
+  color: ${s("toolbarItem")};
   display: flex;
   gap: 8px;
 `;

app/editor/components/ToolbarSeparator.tsx

@@ -1,9 +1,10 @@
 import styled from "styled-components";
+import { s } from "@shared/styles";
 
 const Separator = styled.div`
   height: 24px;
   width: 2px;
-  background: ${(props) => props.theme.toolbarItem};
+  background: ${s("toolbarItem")};
   opacity: 0.3;
   display: inline-block;
   margin-left: 8px;