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

app/components/Sidebar/components/Disclosure.tsx

@@ -2,6 +2,7 @@ import { CollapsedIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled, { css } from "styled-components";
+import { s } from "@shared/styles";
 import NudeButton from "~/components/NudeButton";
 
 type Props = React.ComponentProps<typeof Button> & {
@@ -30,11 +31,11 @@ const Button = styled(NudeButton)<{ $root?: boolean }>`
   position: absolute;
   left: -24px;
   flex-shrink: 0;
-  color: ${(props) => props.theme.textSecondary};
+  color: ${s("textSecondary")};
 
   &:hover {
-    color: ${(props) => props.theme.text};
-    background: ${(props) => props.theme.sidebarControlHoverBackground};
+    color: ${s("text")};
+    background: ${s("sidebarControlHoverBackground")};
   }
 
   ${(props) =>

app/components/Sidebar/components/EditableTitle.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import styled from "styled-components";
+import { s } from "@shared/styles";
 import useToasts from "~/hooks/useToasts";
 
 type Props = {
@@ -113,8 +114,8 @@ function EditableTitle({
 }
 
 const Input = styled.input`
-  color: ${(props) => props.theme.text};
-  background: ${(props) => props.theme.background};
+  color: ${s("text")};
+  background: ${s("background")};
   width: calc(100% + 12px);
   border-radius: 3px;
   border: 0;
@@ -123,7 +124,7 @@ const Input = styled.input`
   height: 32px;
 
   &:focus {
-    outline-color: ${(props) => props.theme.accent};
+    outline-color: ${s("accent")};
   }
 `;
 

app/components/Sidebar/components/Header.tsx

@@ -1,6 +1,7 @@
 import { CollapsedIcon } from "outline-icons";
 import * as React from "react";
 import styled, { keyframes } from "styled-components";
+import { s } from "@shared/styles";
 import usePersistedState from "~/hooks/usePersistedState";
 import { undraggableOnDesktop } from "~/styles";
 
@@ -67,7 +68,7 @@ const Button = styled.button`
   font-size: 13px;
   font-weight: 600;
   user-select: none;
-  color: ${(props) => props.theme.textTertiary};
+  color: ${s("textTertiary")};
   letter-spacing: 0.03em;
   margin: 0;
   padding: 4px 2px 4px 12px;
@@ -81,7 +82,7 @@ const Button = styled.button`
 
   &:not(:disabled):hover,
   &:not(:disabled):active {
-    color: ${(props) => props.theme.textSecondary};
+    color: ${s("textSecondary")};
     cursor: var(--pointer);
   }
 `;

app/components/Sidebar/components/HeaderButton.tsx

@@ -1,6 +1,7 @@
 import { ExpandedIcon, MoreIcon } from "outline-icons";
 import * as React from "react";
 import styled from "styled-components";
+import { s } from "@shared/styles";
 import Flex from "~/components/Flex";
 import { undraggableOnDesktop } from "~/styles";
 
@@ -46,7 +47,7 @@ const HeaderButton = React.forwardRef<HTMLButtonElement, HeaderButtonProps>(
 );
 
 const Title = styled(Flex)`
-  color: ${(props) => props.theme.text};
+  color: ${s("text")};
   flex-shrink: 1;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -59,7 +60,7 @@ const Wrapper = styled(Flex)<{ minHeight: number }>`
   font-weight: 500;
   border-radius: 4px;
   margin: 8px;
-  color: ${(props) => props.theme.textTertiary};
+  color: ${s("textTertiary")};
   border: 0;
   background: none;
   flex-shrink: 0;
@@ -76,9 +77,9 @@ const Wrapper = styled(Flex)<{ minHeight: number }>`
   &:active,
   &:hover,
   &[aria-expanded="true"] {
-    color: ${(props) => props.theme.sidebarText};
+    color: ${s("sidebarText")};
     transition: background 100ms ease-in-out;
-    background: ${(props) => props.theme.sidebarActiveBackground};
+    background: ${s("sidebarActiveBackground")};
   }
 `;
 

app/components/Sidebar/components/HistoryNavigation.tsx

@@ -2,6 +2,7 @@ import { ArrowIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
+import { s } from "@shared/styles";
 import Flex from "~/components/Flex";
 import NudeButton from "~/components/NudeButton";
 import Tooltip from "~/components/Tooltip";
@@ -63,7 +64,7 @@ const Navigation = styled(Flex)`
 `;
 
 const Forward = styled(ArrowIcon)<{ $active: boolean }>`
-  color: ${(props) => props.theme.textTertiary};
+  color: ${s("textTertiary")};
   opacity: ${(props) => (props.$active ? 1 : 0.5)};
   transition: color 100ms ease-in-out;
 

app/components/Sidebar/components/ResizeBorder.ts

@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import { s } from "@shared/styles";
 import { undraggableOnDesktop } from "~/styles";
 
 const ResizeBorder = styled.div<{ dir?: "left" | "right" }>`
@@ -14,7 +15,7 @@ const ResizeBorder = styled.div<{ dir?: "left" | "right" }>`
   &:hover {
     transition-delay: 500ms;
     transition: background 250ms ease-in-out;
-    background: ${(props) => props.theme.sidebarActiveBackground};
+    background: ${s("sidebarActiveBackground")};
   }
 
   &:after {

app/components/Sidebar/components/SidebarLink.tsx

@@ -2,6 +2,7 @@ import { LocationDescriptor } from "history";
 import * as React from "react";
 import styled, { useTheme, css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
+import { s } from "@shared/styles";
 import { NavigationNode } from "@shared/types";
 import EventBoundary from "~/components/EventBoundary";
 import NudeButton from "~/components/NudeButton";
@@ -144,12 +145,12 @@ const Actions = styled(EventBoundary)<{ showActions?: boolean }>`
   top: 4px;
   right: 4px;
   gap: 4px;
-  color: ${(props) => props.theme.textTertiary};
+  color: ${s("textTertiary")};
   transition: opacity 50ms;
   height: 24px;
 
   svg {
-    color: ${(props) => props.theme.textSecondary};
+    color: ${s("textSecondary")};
     fill: currentColor;
     opacity: 0.5;
   }
@@ -217,20 +218,20 @@ const Link = styled(NavLink)<{
   }
 
   & + ${Actions} {
-    background: ${(props) => props.theme.sidebarBackground};
+    background: ${s("sidebarBackground")};
 
     ${NudeButton} {
       background: transparent;
 
       &:hover,
       &[aria-expanded="true"] {
-        background: ${(props) => props.theme.sidebarControlHoverBackground};
+        background: ${s("sidebarControlHoverBackground")};
       }
     }
   }
 
   &[aria-current="page"] + ${Actions} {
-    background: ${(props) => props.theme.sidebarActiveBackground};
+    background: ${s("sidebarActiveBackground")};
   }
 
   ${breakpoint("tablet")`

app/components/Sidebar/components/Toggle.tsx

@@ -2,6 +2,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 Arrow from "~/components/Arrow";
 
 type Props = {
@@ -39,10 +40,10 @@ export const ToggleButton = styled.button<{ $direction?: "left" | "right" }>`
   padding: 8px;
   border: 0;
   pointer-events: none;
-  color: ${(props) => props.theme.divider};
+  color: ${s("divider")};
 
   &:active {
-    color: ${(props) => props.theme.sidebarText};
+    color: ${s("sidebarText")};
   }
 
   ${breakpoint("tablet")`