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

shared/editor/components/FileExtension.tsx

@@ -1,6 +1,7 @@
 import { AttachmentIcon } from "outline-icons";
 import * as React from "react";
 import styled from "styled-components";
+import { s } from "../../styles";
 import { stringToColor } from "../../utils/color";
 
 type Props = {
@@ -27,7 +28,7 @@ export default function FileExtension(props: Props) {
 }
 
 const Icon = styled.span<{ $size: number }>`
-  font-family: ${(props) => props.theme.fontFamilyMono};
+  font-family: ${s("fontFamilyMono")};
   display: inline-flex;
   align-items: center;
   justify-content: center;

shared/editor/components/Frame.tsx

@@ -4,6 +4,7 @@ import { OpenIcon } from "outline-icons";
 import * as React from "react";
 import styled from "styled-components";
 import { Optional } from "utility-types";
+import { s } from "../../styles";
 
 type Props = Omit<Optional<HTMLIFrameElement>, "children"> & {
   src?: string;
@@ -121,7 +122,7 @@ const Rounded = styled.div<{
 `;
 
 const Open = styled.a`
-  color: ${(props) => props.theme.textSecondary} !important;
+  color: ${s("textSecondary")} !important;
   font-size: 13px;
   font-weight: 500;
   align-items: center;
@@ -141,8 +142,8 @@ const Bar = styled.div`
   display: flex;
   align-items: center;
   border-top: 1px solid ${(props) => props.theme.embedBorder};
-  background: ${(props) => props.theme.secondaryBackground};
-  color: ${(props) => props.theme.textSecondary};
+  background: ${s("secondaryBackground")};
+  color: ${s("textSecondary")};
   padding: 0 8px;
   border-bottom-left-radius: 6px;
   border-bottom-right-radius: 6px;

shared/editor/components/Image.tsx

@@ -3,6 +3,7 @@ import type { EditorView } from "prosemirror-view";
 import * as React from "react";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
+import { s } from "../../styles";
 import { sanitizeUrl } from "../../utils/urls";
 import { ComponentProps } from "../types";
 import ImageZoom from "./ImageZoom";
@@ -240,7 +241,7 @@ export const Caption = styled.p`
   display: block;
   font-style: italic;
   font-weight: normal;
-  color: ${(props) => props.theme.textSecondary};
+  color: ${s("textSecondary")};
   padding: 8px 0 4px;
   line-height: 16px;
   text-align: center;
@@ -261,7 +262,7 @@ export const Caption = styled.p`
   }
 
   &:empty:before {
-    color: ${(props) => props.theme.placeholder};
+    color: ${s("placeholder")};
     content: attr(data-caption);
     pointer-events: none;
   }
@@ -288,8 +289,8 @@ const ResizeLeft = styled.div<{ $dragging: boolean }>`
     height: 15%;
     min-height: 20px;
     border-radius: 4px;
-    background: ${(props) => props.theme.toolbarBackground};
-    box-shadow: 0 0 0 1px ${(props) => props.theme.toolbarItem};
+    background: ${s("toolbarBackground")};
+    box-shadow: 0 0 0 1px ${s("toolbarItem")};
     opacity: 0.75;
   }
 `;
@@ -312,8 +313,8 @@ const Button = styled.button`
   margin: 0;
   padding: 0;
   border-radius: 4px;
-  background: ${(props) => props.theme.background};
-  color: ${(props) => props.theme.textSecondary};
+  background: ${s("background")};
+  color: ${s("textSecondary")};
   width: 24px;
   height: 24px;
   display: inline-block;
@@ -326,7 +327,7 @@ const Button = styled.button`
   }
 
   &:hover {
-    color: ${(props) => props.theme.text};
+    color: ${s("text")};
     opacity: 1;
   }
 `;

shared/editor/components/ImageZoom/Styles.tsx

@@ -1,5 +1,6 @@
 import { transparentize } from "polished";
 import { createGlobalStyle } from "styled-components";
+import { s } from "../../../styles";
 
 export default createGlobalStyle`
   [data-rmiz] {
@@ -37,7 +38,7 @@ export default createGlobalStyle`
     background-color: ${(props) => transparentize(1, props.theme.background)};
   }
   [data-rmiz-modal-overlay="visible"] {
-    background-color: ${(props) => props.theme.background};
+    background-color: ${s("background")};
   }
   [data-rmiz-modal-content] {
     position: relative;

shared/editor/components/Widget.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import styled, { css, DefaultTheme, ThemeProps } from "styled-components";
+import { s } from "../../styles";
 
 type Props = {
   icon: React.ReactNode;
@@ -35,14 +36,14 @@ const Children = styled.div`
   opacity: 0;
 
   &:hover {
-    color: ${(props) => props.theme.text};
+    color: ${s("text")};
   }
 `;
 
 const Title = styled.strong`
   font-weight: 500;
   font-size: 14px;
-  color: ${(props) => props.theme.text};
+  color: ${s("text")};
 `;
 
 const Preview = styled.div`
@@ -51,12 +52,12 @@ const Preview = styled.div`
   flex-direction: row;
   flex-grow: 1;
   align-items: center;
-  color: ${(props) => props.theme.textTertiary};
+  color: ${s("textTertiary")};
 `;
 
 const Subtitle = styled.span`
   font-size: 13px;
-  color: ${(props) => props.theme.textTertiary} !important;
+  color: ${s("textTertiary")} !important;
   line-height: 0;
 `;
 
@@ -64,9 +65,9 @@ const Wrapper = styled.a`
   display: flex;
   align-items: center;
   gap: 6px;
-  background: ${(props) => props.theme.background};
-  color: ${(props) => props.theme.text} !important;
-  box-shadow: 0 0 0 1px ${(props) => props.theme.divider};
+  background: ${s("background")};
+  color: ${s("text")} !important;
+  box-shadow: 0 0 0 1px ${s("divider")};
   white-space: nowrap;
   border-radius: 8px;
   padding: 6px 8px;
@@ -84,7 +85,7 @@ const Wrapper = styled.a`
       &:active {
         cursor: pointer !important;
         text-decoration: none !important;
-        background: ${(props) => props.theme.secondaryBackground};
+        background: ${s("secondaryBackground")};
 
         ${Children} {
           opacity: 1;