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

app/components/Actions.ts

@@ -1,5 +1,6 @@
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
+import { s } from "@shared/styles";
 import Flex from "~/components/Flex";
 
 export const Action = styled(Flex)`
@@ -20,7 +21,7 @@ export const Separator = styled.div`
   margin-left: 12px;
   width: 1px;
   height: 28px;
-  background: ${(props) => props.theme.divider};
+  background: ${s("divider")};
 `;
 
 const Actions = styled(Flex)`
@@ -29,8 +30,8 @@ const Actions = styled(Flex)`
   right: 0;
   left: 0;
   border-radius: 3px;
-  background: ${(props) => props.theme.background};
-  transition: ${(props) => props.theme.backgroundTransition};
+  background: ${s("background")};
+  transition: ${s("backgroundTransition")};
   padding: 12px;
   backdrop-filter: blur(20px);
 

app/components/Avatar/Avatar.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import styled from "styled-components";
+import { s } from "@shared/styles";
 import useBoolean from "~/hooks/useBoolean";
 import Initials from "./Initials";
 
@@ -63,8 +64,8 @@ const IconWrapper = styled.div`
   position: absolute;
   bottom: -2px;
   right: -2px;
-  background: ${(props) => props.theme.accent};
-  border: 2px solid ${(props) => props.theme.background};
+  background: ${s("accent")};
+  border: 2px solid ${s("background")};
   border-radius: 100%;
   width: 20px;
   height: 20px;

app/components/Avatar/AvatarWithPresence.tsx

@@ -2,6 +2,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 User from "~/models/User";
 import Avatar from "~/components/Avatar";
 import Tooltip from "~/components/Tooltip";
@@ -106,7 +107,7 @@ const AvatarWrapper = styled.div<AvatarWrapperProps>`
 
       &:hover:after {
         border: 2px solid ${(props) => props.$color};
-        box-shadow: inset 0 0 0 2px ${(props) => props.theme.background};
+        box-shadow: inset 0 0 0 2px ${s("background")};
       }
     `}
 `;

app/components/Branding.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import { depths } from "@shared/styles";
+import { depths, s } from "@shared/styles";
 import env from "~/env";
 import OutlineIcon from "./Icons/OutlineIcon";
 
@@ -26,16 +26,16 @@ const Link = styled.a`
   font-size: 14px;
   text-decoration: none;
   border-top-right-radius: 2px;
-  color: ${(props) => props.theme.text};
+  color: ${s("text")};
   display: flex;
   align-items: center;
 
   svg {
-    fill: ${(props) => props.theme.text};
+    fill: ${s("text")};
   }
 
   &:hover {
-    background: ${(props) => props.theme.sidebarBackground};
+    background: ${s("sidebarBackground")};
   }
 
   ${breakpoint("tablet")`

app/components/Breadcrumb.tsx

@@ -2,9 +2,9 @@ import { GoToIcon } 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 Flex from "~/components/Flex";
 import BreadcrumbMenu from "~/menus/BreadcrumbMenu";
-import { ellipsis } from "~/styles";
 import { MenuInternalLink } from "~/types";
 
 type Props = {
@@ -61,7 +61,7 @@ function Breadcrumb({
 
 const Slash = styled(GoToIcon)`
   flex-shrink: 0;
-  fill: ${(props) => props.theme.divider};
+  fill: ${s("divider")};
 `;
 
 const Item = styled(Link)<{ $highlight: boolean; $withIcon: boolean }>`
@@ -70,7 +70,7 @@ const Item = styled(Link)<{ $highlight: boolean; $withIcon: boolean }>`
   flex-shrink: 1;
   min-width: 0;
   cursor: var(--pointer);
-  color: ${(props) => props.theme.text};
+  color: ${s("text")};
   font-size: 15px;
   height: 24px;
   font-weight: ${(props) => (props.$highlight ? "500" : "inherit")};

app/components/Button.tsx

@@ -3,6 +3,7 @@ import { ExpandedIcon } from "outline-icons";
 import { darken, lighten, transparentize } from "polished";
 import * as React from "react";
 import styled from "styled-components";
+import { s } from "@shared/styles";
 import ActionButton, {
   Props as ActionButtonProps,
 } from "~/components/ActionButton";
@@ -22,8 +23,8 @@ const RealButton = styled(ActionButton)<RealProps>`
   margin: 0;
   padding: 0;
   border: 0;
-  background: ${(props) => props.theme.accent};
-  color: ${(props) => props.theme.accentText};
+  background: ${s("accent")};
+  color: ${s("accentText")};
   box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px;
   border-radius: 4px;
   font-size: 14px;

app/components/CollectionDescription.tsx

@@ -4,6 +4,7 @@ import { transparentize } from "polished";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
+import { s } from "@shared/styles";
 import Collection from "~/models/Collection";
 import Arrow from "~/components/Arrow";
 import ButtonLink from "~/components/ButtonLink";
@@ -141,7 +142,7 @@ function CollectionDescription({ collection }: Props) {
 
 const Disclosure = styled(NudeButton)`
   opacity: 0;
-  color: ${(props) => props.theme.divider};
+  color: ${s("divider")};
   position: absolute;
   top: calc(25vh - 50px);
   left: 50%;
@@ -155,12 +156,12 @@ const Disclosure = styled(NudeButton)`
   }
 
   &:active {
-    color: ${(props) => props.theme.sidebarText};
+    color: ${s("sidebarText")};
   }
 `;
 
 const Placeholder = styled(ButtonLink)`
-  color: ${(props) => props.theme.placeholder};
+  color: ${s("placeholder")};
   cursor: text;
   min-height: 27px;
 `;
@@ -193,7 +194,7 @@ const Input = styled.div`
   margin: -8px;
   padding: 8px;
   border-radius: 8px;
-  transition: ${(props) => props.theme.backgroundTransition};
+  transition: ${s("backgroundTransition")};
 
   &:after {
     content: "";
@@ -206,7 +207,7 @@ const Input = styled.div`
     background: linear-gradient(
       180deg,
       ${(props) => transparentize(1, props.theme.background)} 0%,
-      ${(props) => props.theme.background} 100%
+      ${s("background")} 100%
     );
   }
 
@@ -218,7 +219,7 @@ const Input = styled.div`
   }
 
   &[data-editing="true"] {
-    background: ${(props) => props.theme.secondaryBackground};
+    background: ${s("secondaryBackground")};
   }
 
   .block-menu-trigger,

app/components/CommandBar.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from "react-i18next";
 import { Portal } from "react-portal";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import { depths } from "@shared/styles";
+import { depths, s } from "@shared/styles";
 import CommandBarResults from "~/components/CommandBarResults";
 import SearchActions from "~/components/SearchActions";
 import rootActions from "~/actions/root";
@@ -73,12 +73,12 @@ const SearchInput = styled(KBarSearch)`
   width: 100%;
   outline: none;
   border: none;
-  background: ${(props) => props.theme.menuBackground};
-  color: ${(props) => props.theme.text};
+  background: ${s("menuBackground")};
+  color: ${s("text")};
 
   &:disabled,
   &::placeholder {
-    color: ${(props) => props.theme.placeholder};
+    color: ${s("placeholder")};
   }
 `;
 
@@ -86,8 +86,8 @@ const Animator = styled(KBarAnimator)`
   max-width: 600px;
   max-height: 75vh;
   width: 90vw;
-  background: ${(props) => props.theme.menuBackground};
-  color: ${(props) => props.theme.text};
+  background: ${s("menuBackground")};
+  color: ${s("text")};
   border-radius: 8px;
   overflow: hidden;
   box-shadow: rgb(0 0 0 / 40%) 0px 16px 60px;

app/components/CommandBarItem.tsx

@@ -2,9 +2,9 @@ import { ActionImpl } from "kbar";
 import { ArrowIcon, BackIcon } from "outline-icons";
 import * as React from "react";
 import styled, { css, useTheme } from "styled-components";
+import { s, ellipsis } from "@shared/styles";
 import Flex from "~/components/Flex";
 import Key from "~/components/Key";
-import { ellipsis } from "~/styles";
 
 type Props = {
   action: ActionImpl;
@@ -77,12 +77,12 @@ const Icon = styled(Flex)`
   justify-content: center;
   width: 24px;
   height: 24px;
-  color: ${(props) => props.theme.textSecondary};
+  color: ${s("textSecondary")};
   flex-shrink: 0;
 `;
 
 const Ancestor = styled.span`
-  color: ${(props) => props.theme.textSecondary};
+  color: ${s("textSecondary")};
 `;
 
 const Content = styled(Flex)`

app/components/CommandBarResults.tsx

@@ -1,6 +1,7 @@
 import { useMatches, KBarResults } from "kbar";
 import * as React from "react";
 import styled from "styled-components";
+import { s } from "@shared/styles";
 import CommandBarItem from "~/components/CommandBarItem";
 
 export default function CommandBarResults() {
@@ -30,6 +31,6 @@ const Header = styled.h3`
   letter-spacing: 0.04em;
   margin: 0;
   padding: 16px 0 4px 20px;
-  color: ${(props) => props.theme.textTertiary};
+  color: ${s("textTertiary")};
   height: 36px;
 `;

app/components/ContentEditable.tsx

@@ -1,6 +1,7 @@
 import isPrintableKeyEvent from "is-printable-key-event";
 import * as React from "react";
 import styled from "styled-components";
+import { s } from "@shared/styles";
 import useOnScreen from "~/hooks/useOnScreen";
 
 type Props = Omit<React.HTMLAttributes<HTMLSpanElement>, "ref" | "onChange"> & {
@@ -166,10 +167,10 @@ function placeCaret(element: HTMLElement, atStart: boolean) {
 }
 
 const Content = styled.span`
-  background: ${(props) => props.theme.background};
-  transition: ${(props) => props.theme.backgroundTransition};
-  color: ${(props) => props.theme.text};
-  -webkit-text-fill-color: ${(props) => props.theme.text};
+  background: ${s("background")};
+  transition: ${s("backgroundTransition")};
+  color: ${s("text")};
+  -webkit-text-fill-color: ${s("text")};
   outline: none;
   resize: none;
   cursor: text;
@@ -180,8 +181,8 @@ const Content = styled.span`
 
   &:empty::before {
     display: inline-block;
-    color: ${(props) => props.theme.placeholder};
-    -webkit-text-fill-color: ${(props) => props.theme.placeholder};
+    color: ${s("placeholder")};
+    -webkit-text-fill-color: ${s("placeholder")};
     content: attr(data-placeholder);
     pointer-events: none;
     height: 0;

app/components/ContextMenu/Header.ts

@@ -1,10 +1,11 @@
 import styled from "styled-components";
+import { s } from "@shared/styles";
 
 const Header = styled.h3`
   font-size: 11px;
   font-weight: 600;
   text-transform: uppercase;
-  color: ${(props) => props.theme.sidebarText};
+  color: ${s("sidebarText")};
   letter-spacing: 0.04em;
   margin: 1em 12px 0.5em;
 `;

app/components/ContextMenu/index.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
 import { Menu, MenuStateReturn } from "reakit/Menu";
 import styled, { DefaultTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import { depths } from "@shared/styles";
+import { depths, s } from "@shared/styles";
 import Scrollable from "~/components/Scrollable";
 import useMenuContext from "~/hooks/useMenuContext";
 import useMenuHeight from "~/hooks/useMenuHeight";
@@ -171,7 +171,7 @@ export const Backdrop = styled.div`
   left: 0;
   right: 0;
   bottom: 0;
-  background: ${(props) => props.theme.backdrop};
+  background: ${s("backdrop")};
   z-index: ${depths.menu - 1};
 `;
 
@@ -203,7 +203,7 @@ export const Background = styled(Scrollable)<BackgroundProps>`
   animation: ${mobileContextMenu} 200ms ease;
   transform-origin: 50% 100%;
   max-width: 100%;
-  background: ${(props) => props.theme.menuBackground};
+  background: ${s("menuBackground")};
   border-radius: 6px;
   padding: 6px;
   min-width: 180px;

app/components/Divider.ts

@@ -1,8 +1,9 @@
 import styled from "styled-components";
+import { s } from "@shared/styles";
 
 const Divider = styled.hr`
   border: 0;
-  border-bottom: 1px solid ${(props) => props.theme.divider};
+  border-bottom: 1px solid ${s("divider")};
   margin: 0;
   padding: 0;
 `;

app/components/DocumentCard.tsx

@@ -7,13 +7,13 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import styled, { useTheme } from "styled-components";
+import { s, ellipsis } from "@shared/styles";
 import Document from "~/models/Document";
 import Pin from "~/models/Pin";
 import Flex from "~/components/Flex";
 import NudeButton from "~/components/NudeButton";
 import Time from "~/components/Time";
 import useStores from "~/hooks/useStores";
-import { ellipsis } from "~/styles";
 import CollectionIcon from "./Icons/CollectionIcon";
 import EmojiIcon from "./Icons/EmojiIcon";
 import Squircle from "./Squircle";
@@ -165,9 +165,9 @@ const AnimatePresence = styled(m.div)`
 `;
 
 const Fold = styled.svg`
-  fill: ${(props) => props.theme.background};
-  stroke: ${(props) => props.theme.inputBorder};
-  background: ${(props) => props.theme.background};
+  fill: ${s("background")};
+  stroke: ${s("inputBorder")};
+  background: ${s("background")};
 
   position: absolute;
   top: -1px;
@@ -175,11 +175,11 @@ const Fold = styled.svg`
 `;
 
 const PinButton = styled(NudeButton)`
-  color: ${(props) => props.theme.textTertiary};
+  color: ${s("textTertiary")};
 
   &:hover,
   &:active {
-    color: ${(props) => props.theme.text};
+    color: ${s("text")};
   }
 `;
 
@@ -189,7 +189,7 @@ const Actions = styled(Flex)`
   right: ${(props) => (props.dir === "rtl" ? "auto" : "4px")};
   left: ${(props) => (props.dir === "rtl" ? "4px" : "auto")};
   opacity: 0;
-  color: ${(props) => props.theme.textTertiary};
+  color: ${s("textTertiary")};
 
   // move actions above content
   z-index: 2;
@@ -222,7 +222,7 @@ const DocumentMeta = styled(Text)`
   display: flex;
   align-items: center;
   gap: 2px;
-  color: ${(props) => props.theme.textTertiary};
+  color: ${s("textTertiary")};
   margin: 0 0 0 -2px;
 `;
 
@@ -236,9 +236,9 @@ const DocumentLink = styled(Link)<{
   height: 100%;
   border-radius: 8px;
   cursor: var(--pointer);
-  background: ${(props) => props.theme.background};
+  background: ${s("background")};
   transition: transform 50ms ease-in-out;
-  border: 1px solid ${(props) => props.theme.inputBorder};
+  border: 1px solid ${s("inputBorder")};
   border-bottom-width: 2px;
   border-right-width: 2px;
 
@@ -275,7 +275,7 @@ const Heading = styled.h3`
   max-height: 66px; // 3*line-height
   overflow: hidden;
 
-  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/components/DocumentExplorerNode.tsx

@@ -3,10 +3,10 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
+import { s, ellipsis } from "@shared/styles";
 import Flex from "~/components/Flex";
 import Disclosure from "~/components/Sidebar/components/Disclosure";
 import Text from "~/components/Text";
-import { ellipsis } from "~/styles";
 
 type Props = {
   selected: boolean;
@@ -98,7 +98,7 @@ export const Node = styled.span<{
   overflow: hidden;
   font-size: 16px;
   width: ${(props) => props.style.width};
-  color: ${(props) => props.theme.text};
+  color: ${s("text")};
   cursor: var(--pointer);
   padding: 12px;
   border-radius: 6px;

app/components/DocumentExplorerSearchResult.tsx

@@ -3,10 +3,10 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import scrollIntoView from "smooth-scroll-into-view-if-needed";
 import styled from "styled-components";
+import { ellipsis } from "@shared/styles";
 import { Node as SearchResult } from "~/components/DocumentExplorerNode";
 import Flex from "~/components/Flex";
 import Text from "~/components/Text";
-import { ellipsis } from "~/styles";
 
 type Props = {
   selected: boolean;

app/components/DocumentListItem.tsx

@@ -6,6 +6,7 @@ import { Link } from "react-router-dom";
 import { CompositeStateReturn, CompositeItem } from "reakit/Composite";
 import styled, { css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
+import { s } from "@shared/styles";
 import Document from "~/models/Document";
 import Badge from "~/components/Badge";
 import Button from "~/components/Button";
@@ -181,7 +182,7 @@ const Actions = styled(EventBoundary)`
   ${NudeButton} {
     &:hover,
     &[aria-expanded="true"] {
-      background: ${(props) => props.theme.sidebarControlHoverBackground};
+      background: ${s("sidebarControlHoverBackground")};
     }
   }
 
@@ -223,7 +224,7 @@ const DocumentLink = styled(Link)<{
   &:active,
   &:focus,
   &:focus-within {
-    background: ${(props) => props.theme.listItemHoverBackground};
+    background: ${s("listItemHoverBackground")};
 
     ${Actions} {
       opacity: 1;
@@ -241,7 +242,7 @@ const DocumentLink = styled(Link)<{
   ${(props) =>
     props.$menuOpen &&
     css`
-      background: ${(props) => props.theme.listItemHoverBackground};
+      background: ${s("listItemHoverBackground")};
 
       ${Actions} {
         opacity: 1;
@@ -262,7 +263,7 @@ const Heading = styled.h3<{ rtl?: boolean }>`
   margin-bottom: 0.25em;
   overflow: hidden;
   white-space: nowrap;
-  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;
 `;
@@ -280,7 +281,7 @@ const Title = styled(Highlight)`
 
 const ResultContext = styled(Highlight)`
   display: block;
-  color: ${(props) => props.theme.textTertiary};
+  color: ${s("textTertiary")};
   font-size: 14px;
   margin-top: -0.25em;
   margin-bottom: 0.25em;

app/components/DocumentMeta.tsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
+import { s, ellipsis } from "@shared/styles";
 import Document from "~/models/Document";
 import DocumentBreadcrumb from "~/components/DocumentBreadcrumb";
 import DocumentTasks from "~/components/DocumentTasks";
@@ -11,7 +12,6 @@ import Flex from "~/components/Flex";
 import Time from "~/components/Time";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
-import { ellipsis } from "~/styles";
 
 type Props = {
   showCollection?: boolean;
@@ -185,7 +185,7 @@ const DocumentMeta: React.FC<Props> = ({
 
 const Container = styled(Flex)<{ rtl?: boolean }>`
   justify-content: ${(props) => (props.rtl ? "flex-end" : "flex-start")};
-  color: ${(props) => props.theme.textTertiary};
+  color: ${s("textTertiary")};
   font-size: 13px;
   white-space: nowrap;
   overflow: hidden;

app/components/Empty.ts

@@ -1,7 +1,8 @@
 import styled from "styled-components";
+import { s } from "@shared/styles";
 
 const Empty = styled.p`
-  color: ${(props) => props.theme.textTertiary};
+  color: ${s("textTertiary")};
   user-select: none;
 `;
 

app/components/ErrorBoundary.tsx

@@ -3,6 +3,7 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { withTranslation, Trans, WithTranslation } from "react-i18next";
 import styled from "styled-components";
+import { s } from "@shared/styles";
 import { githubIssuesUrl, feedbackUrl } from "@shared/utils/urlHelpers";
 import Button from "~/components/Button";
 import CenteredContent from "~/components/CenteredContent";
@@ -137,7 +138,7 @@ class ErrorBoundary extends React.Component<Props> {
 }
 
 const Pre = styled.pre`
-  background: ${(props) => props.theme.secondaryBackground};
+  background: ${s("secondaryBackground")};
   padding: 16px;
   border-radius: 4px;
   font-size: 12px;

app/components/EventListItem.tsx

@@ -14,6 +14,7 @@ import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
 import { CompositeStateReturn } from "reakit/Composite";
 import styled, { css } from "styled-components";
+import { s } from "@shared/styles";
 import Document from "~/models/Document";
 import Event from "~/models/Event";
 import Avatar from "~/components/Avatar";
@@ -197,7 +198,7 @@ const ItemStyle = css`
     left: 23px;
     width: 2px;
     height: calc(100% + 8px);
-    background: ${(props) => props.theme.textSecondary};
+    background: ${s("textSecondary")};
     opacity: 0.25;
   }
 

app/components/Facepile.tsx

@@ -1,6 +1,7 @@
 import { observer } from "mobx-react";
 import * as React from "react";
 import styled from "styled-components";
+import { s } from "@shared/styles";
 import User from "~/models/User";
 import Avatar from "~/components/Avatar";
 import Flex from "~/components/Flex";
@@ -59,8 +60,8 @@ const More = styled.div<{ size: number }>`
   height: ${(props) => props.size}px;
   border-radius: 100%;
   background: ${(props) => props.theme.slate};
-  color: ${(props) => props.theme.text};
-  border: 2px solid ${(props) => props.theme.background};
+  color: ${s("text")};
+  border: 2px solid ${s("background")};
   text-align: center;
   font-size: 11px;
   font-weight: 600;

app/components/FilterOptions.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { useMenuState, MenuButton } from "reakit/Menu";
 import styled from "styled-components";
+import { s } from "@shared/styles";
 import Button, { Inner } from "~/components/Button";
 import ContextMenu from "~/components/ContextMenu";
 import MenuItem from "~/components/ContextMenu/MenuItem";
@@ -80,7 +81,7 @@ const Note = styled(Text)`
   line-height: 1.2em;
   font-size: 14px;
   font-weight: 400;
-  color: ${(props) => props.theme.textTertiary};
+  color: ${s("textTertiary")};
 `;
 
 const LabelWithNote = styled.div`

app/components/GroupListItem.tsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import { MAX_AVATAR_DISPLAY } from "@shared/constants";
+import { s } from "@shared/styles";
 import CollectionGroupMembership from "~/models/CollectionGroupMembership";
 import Group from "~/models/Group";
 import GroupMembers from "~/scenes/GroupMembers";
@@ -81,7 +82,7 @@ const Image = styled(Flex)`
   justify-content: center;
   width: 32px;
   height: 32px;
-  background: ${(props) => props.theme.secondaryBackground};
+  background: ${s("secondaryBackground")};
   border-radius: 32px;
 `;
 

app/components/Guide.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Dialog, DialogBackdrop, useDialogState } from "reakit/Dialog";
 import styled from "styled-components";
-import { depths } from "@shared/styles";
+import { depths, s } from "@shared/styles";
 import Scrollable from "~/components/Scrollable";
 import usePrevious from "~/hooks/usePrevious";
 
@@ -71,7 +71,7 @@ const Backdrop = styled.div`
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: ${(props) => props.theme.backdrop} !important;
+  background-color: ${s("backdrop")} !important;
   z-index: ${depths.modalOverlay};
   transition: opacity 200ms ease-in-out;
   opacity: 0;
@@ -92,8 +92,8 @@ const Scene = styled.div`
   justify-content: center;
   align-items: flex-start;
   width: 350px;
-  background: ${(props) => props.theme.background};
-  transition: ${(props) => props.theme.backgroundTransition};
+  background: ${s("background")};
+  transition: ${s("backgroundTransition")};
   border-radius: 8px;
   outline: none;
   opacity: 0;

app/components/Header.tsx

@@ -5,7 +5,7 @@ import { transparentize } from "polished";
 import * as React from "react";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import { depths } from "@shared/styles";
+import { depths, s } from "@shared/styles";
 import Button from "~/components/Button";
 import Fade from "~/components/Fade";
 import Flex from "~/components/Flex";
@@ -113,7 +113,7 @@ const Wrapper = styled(Flex)<WrapperProps>`
   top: 0;
   z-index: ${depths.header};
   position: sticky;
-  background: ${(props) => props.theme.background};
+  background: ${s("background")};
 
   ${(props) =>
     props.$passThrough

app/components/Highlight.tsx

@@ -2,6 +2,7 @@ import { escapeRegExp } from "lodash";
 import * as React from "react";
 import replace from "string-replace-to-array";
 import styled from "styled-components";
+import { s } from "@shared/styles";
 
 type Props = React.HTMLAttributes<HTMLSpanElement> & {
   highlight: (string | null | undefined) | RegExp;
@@ -43,7 +44,7 @@ function Highlight({
 }
 
 export const Mark = styled.mark`
-  background: ${(props) => props.theme.searchHighlight};
+  background: ${s("searchHighlight")};
   border-radius: 2px;
   padding: 0 2px;
 `;

app/components/HoverPreview.tsx

@@ -2,7 +2,7 @@ import { transparentize } from "polished";
 import * as React from "react";
 import { Portal } from "react-portal";
 import styled from "styled-components";
-import { depths } from "@shared/styles";
+import { depths, s } from "@shared/styles";
 import parseDocumentSlug from "@shared/utils/parseDocumentSlug";
 import { isExternalUrl } from "@shared/utils/urls";
 import HoverPreviewDocument from "~/components/HoverPreviewDocument";
@@ -163,7 +163,7 @@ const CardContent = styled.div`
 // &:after — gradient mask for overflow text
 const Card = styled.div`
   backdrop-filter: blur(10px);
-  background: ${(props) => props.theme.background};
+  background: ${s("background")};
   border-radius: 4px;
   box-shadow: 0 30px 90px -20px rgba(0, 0, 0, 0.3),
     0 0 1px 1px rgba(0, 0, 0, 0.05);
@@ -186,13 +186,13 @@ const Card = styled.div`
       90deg,
       ${(props) => transparentize(1, props.theme.background)} 0%,
       ${(props) => transparentize(1, props.theme.background)} 75%,
-      ${(props) => props.theme.background} 90%
+      ${s("background")} 90%
     );
     bottom: 0;
     left: 0;
     right: 0;
     height: 1.7em;
-    border-bottom: 16px solid ${(props) => props.theme.background};
+    border-bottom: 16px solid ${s("background")};
     border-bottom-left-radius: 4px;
     border-bottom-right-radius: 4px;
   }
@@ -236,7 +236,7 @@ const Pointer = styled.div<{ offset: number }>`
 
   &:after {
     border: 7px solid transparent;
-    border-bottom-color: ${(props) => props.theme.background};
+    border-bottom-color: ${s("background")};
   }
 `;
 

app/components/HoverPreviewDocument.tsx

@@ -2,6 +2,7 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
+import { s } from "@shared/styles";
 import parseDocumentSlug from "@shared/utils/parseDocumentSlug";
 import DocumentMeta from "~/components/DocumentMeta";
 import Editor from "~/components/Editor";
@@ -52,7 +53,7 @@ const Content = styled(Link)`
 
 const Heading = styled.h2`
   margin: 0 0 0.75em;
-  color: ${(props) => props.theme.text};
+  color: ${s("text")};
 `;
 
 export default observer(HoverPreviewDocument);

app/components/IconPicker.tsx

@@ -40,6 +40,7 @@ import { useTranslation } from "react-i18next";
 import { useMenuState, MenuButton, MenuItem } from "reakit/Menu";
 import styled, { useTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
+import { s } from "@shared/styles";
 import { colorPalette } from "@shared/utils/collections";
 import ContextMenu from "~/components/ContextMenu";
 import Flex from "~/components/Flex";
@@ -323,7 +324,7 @@ const Icons = styled.div`
 `;
 
 const Button = styled(NudeButton)`
-  border: 1px solid ${(props) => props.theme.inputBorder};
+  border: 1px solid ${s("inputBorder")};
   width: 32px;
   height: 32px;
 `;

app/components/Input.tsx

@@ -2,9 +2,10 @@ import * as React from "react";
 import { VisuallyHidden } from "reakit/VisuallyHidden";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
+import { s, ellipsis } from "@shared/styles";
 import Flex from "~/components/Flex";
 import Text from "~/components/Text";
-import { ellipsis, undraggableOnDesktop } from "~/styles";
+import { undraggableOnDesktop } from "~/styles";
 
 const RealTextarea = styled.textarea<{ hasIcon?: boolean }>`
   border: 0;
@@ -12,11 +13,11 @@ const RealTextarea = styled.textarea<{ hasIcon?: boolean }>`
   padding: 8px 12px 8px ${(props) => (props.hasIcon ? "8px" : "12px")};
   outline: none;
   background: none;
-  color: ${(props) => props.theme.text};
+  color: ${s("text")};
 
   &:disabled,
   &::placeholder {
-    color: ${(props) => props.theme.placeholder};
+    color: ${s("placeholder")};
   }
 `;
 
@@ -26,7 +27,7 @@ const RealInput = styled.input<{ hasIcon?: boolean }>`
   padding: 8px 12px 8px ${(props) => (props.hasIcon ? "8px" : "12px")};
   outline: none;
   background: none;
-  color: ${(props) => props.theme.text};
+  color: ${s("text")};
   height: 30px;
   min-width: 0;
   ${ellipsis()}
@@ -34,14 +35,13 @@ const RealInput = styled.input<{ hasIcon?: boolean }>`
 
   &:disabled,
   &::placeholder {
-    color: ${(props) => props.theme.placeholder};
+    color: ${s("placeholder")};
   }
 
   &:-webkit-autofill,
   &:-webkit-autofill:hover,
   &:-webkit-autofill:focus {
-    -webkit-box-shadow: 0 0 0px 1000px ${(props) => props.theme.background}
-      inset;
+    -webkit-box-shadow: 0 0 0px 1000px ${s("background")} inset;
   }
 
   &::-webkit-search-cancel-button {
@@ -96,7 +96,7 @@ export const Outline = styled(Flex)<{
   font-weight: normal;
   align-items: center;
   overflow: hidden;
-  background: ${(props) => props.theme.background};
+  background: ${s("background")};
 
   /* Prevents an issue where input placeholder appears in a selected style when double clicking title bar */
   user-select: none;

app/components/InputColor.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { MenuButton, useMenuState } from "reakit/Menu";
 import styled from "styled-components";
+import { s } from "@shared/styles";
 import ContextMenu from "./ContextMenu";
 import DelayedMount from "./DelayedMount";
 import Input, { Props as InputProps } from "./Input";
@@ -60,7 +61,7 @@ const InputColor: React.FC<Props> = ({ value, onChange, ...rest }) => {
 
 const SwatchButton = styled(NudeButton)<{ $background: string | undefined }>`
   background: ${(props) => props.$background};
-  border: 1px solid ${(props) => props.theme.inputBorder};
+  border: 1px solid ${s("inputBorder")};
   border-radius: 50%;
   position: absolute;
   bottom: 20px;
@@ -80,7 +81,7 @@ const StyledColorPicker = styled(ColorPicker)`
 
   input {
     user-select: text;
-    color: ${(props) => props.theme.text} !important;
+    color: ${s("text")} !important;
   }
 `;
 

app/components/InputSelect.tsx

@@ -9,6 +9,7 @@ import { CheckmarkIcon } from "outline-icons";
 import * as React from "react";
 import { VisuallyHidden } from "reakit/VisuallyHidden";
 import styled, { css } from "styled-components";
+import { s } from "@shared/styles";
 import Button, { Inner } from "~/components/Button";
 import Text from "~/components/Text";
 import useMenuHeight from "~/hooks/useMenuHeight";
@@ -218,7 +219,7 @@ const Background = styled(ContextMenuBackground)`
 `;
 
 const Placeholder = styled.span`
-  color: ${(props) => props.theme.placeholder};
+  color: ${s("placeholder")};
 `;
 
 const Spacer = styled.div`
@@ -236,7 +237,7 @@ const StyledButton = styled(Button)<{ nude?: boolean }>`
   cursor: default;
 
   &:hover:not(:disabled) {
-    background: ${(props) => props.theme.buttonNeutralBackground};
+    background: ${s("buttonNeutralBackground")};
   }
 
   ${(props) =>
@@ -276,7 +277,7 @@ const Positioner = styled(Position)`
     ${StyledSelectOption} {
       &[aria-selected="true"] {
         color: ${(props) => props.theme.white};
-        background: ${(props) => props.theme.accent};
+        background: ${s("accent")};
         box-shadow: none;
         cursor: var(--pointer);
 

app/components/Labeled.tsx

@@ -1,6 +1,7 @@
 import { observer } from "mobx-react";
 import * as React from "react";
 import styled from "styled-components";
+import { s } from "@shared/styles";
 import Flex from "~/components/Flex";
 
 type Props = {
@@ -18,7 +19,7 @@ export const Label = styled(Flex)`
   font-weight: 500;
   padding-bottom: 4px;
   display: inline-block;
-  color: ${(props) => props.theme.text};
+  color: ${s("text")};
 `;
 
 export default observer(Labeled);

app/components/LanguagePrompt.tsx

@@ -5,7 +5,6 @@ import styled from "styled-components";
 import { languages, languageOptions } from "@shared/i18n";
 import ButtonLink from "~/components/ButtonLink";
 import Flex from "~/components/Flex";
-import NoticeTip from "~/components/NoticeTip";
 import env from "~/env";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
@@ -61,7 +60,7 @@ export default function LanguagePrompt() {
   const appName = env.APP_NAME;
 
   return (
-    <NoticeTip>
+    <Wrapper>
       <Flex align="center">
         <LanguageIcon />
         <span>
@@ -87,10 +86,28 @@ export default function LanguagePrompt() {
           <Link onClick={ui.setLanguagePromptDismissed}>{t("Dismiss")}</Link>
         </span>
       </Flex>
-    </NoticeTip>
+    </Wrapper>
   );
 }
 
+const Wrapper = styled.p`
+  background: ${(props) => props.theme.brand.marine};
+  color: ${(props) => props.theme.almostBlack};
+  padding: 10px 12px;
+  margin-top: 24px;
+  border-radius: 4px;
+  position: relative;
+
+  a {
+    color: ${(props) => props.theme.almostBlack};
+    font-weight: 500;
+  }
+
+  a:hover {
+    text-decoration: underline;
+  }
+`;
+
 const Link = styled(ButtonLink)`
   color: ${(props) => props.theme.almostBlack};
   font-weight: 500;

app/components/Layout.tsx

@@ -3,6 +3,7 @@ import * as React from "react";
 import { Helmet } from "react-helmet";
 import styled, { DefaultTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
+import { s } from "@shared/styles";
 import Flex from "~/components/Flex";
 import { LoadingIndicatorBar } from "~/components/LoadingIndicator";
 import SkipNavContent from "~/components/SkipNavContent";
@@ -76,8 +77,8 @@ const Layout: React.FC<Props> = ({
 };
 
 const Container = styled(Flex)`
-  background: ${(props) => props.theme.background};
-  transition: ${(props) => props.theme.backgroundTransition};
+  background: ${s("background")};
+  transition: ${s("backgroundTransition")};
   position: relative;
   width: 100%;
   min-height: 100%;

app/components/List/Error.tsx

@@ -2,6 +2,7 @@ import { DisconnectedIcon, WarningIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
+import { s } from "@shared/styles";
 import Empty from "~/components/Empty";
 import useEventListener from "~/hooks/useEventListener";
 import { OfflineError } from "~/utils/errors";
@@ -43,10 +44,10 @@ const Content = styled(Empty)`
   white-space: nowrap;
 
   ${ButtonLink} {
-    color: ${(props) => props.theme.textTertiary};
+    color: ${s("textTertiary")};
 
     &:hover {
-      color: ${(props) => props.theme.textSecondary};
+      color: ${s("textSecondary")};
       text-decoration: underline;
     }
   }

app/components/List/Item.tsx

@@ -1,9 +1,9 @@
 import { LocationDescriptor } from "history";
 import * as React from "react";
 import styled, { useTheme } from "styled-components";
+import { s, ellipsis } from "@shared/styles";
 import Flex from "~/components/Flex";
 import NavLink from "~/components/NavLink";
-import { ellipsis } from "~/styles";
 
 export type Props = Omit<React.HTMLAttributes<HTMLAnchorElement>, "title"> & {
   image?: React.ReactNode;
@@ -98,7 +98,7 @@ const Image = styled(Flex)`
   user-select: none;
   flex-shrink: 0;
   align-self: center;
-  color: ${(props) => props.theme.text};
+  color: ${s("text")};
 `;
 
 const Heading = styled.p<{ $small?: boolean }>`

app/components/LoadingIndicator/LoadingIndicatorBar.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import styled, { keyframes } from "styled-components";
-import { depths } from "@shared/styles";
+import { depths, s } from "@shared/styles";
 
 const LoadingIndicatorBar = () => {
   return (
@@ -28,7 +28,7 @@ const Container = styled.div`
 const Loader = styled.div`
   width: 100%;
   height: 2px;
-  background-color: ${(props) => props.theme.accent};
+  background-color: ${s("accent")};
 `;
 
 export default LoadingIndicatorBar;

app/components/Modal.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from "react-i18next";
 import { Dialog, DialogBackdrop, useDialogState } from "reakit/Dialog";
 import styled, { DefaultTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import { depths } from "@shared/styles";
+import { depths, s } from "@shared/styles";
 import Flex from "~/components/Flex";
 import NudeButton from "~/components/NudeButton";
 import Scrollable from "~/components/Scrollable";
@@ -171,8 +171,8 @@ const Fullscreen = styled.div<FullscreenProps>`
   display: flex;
   justify-content: center;
   align-items: flex-start;
-  background: ${(props) => props.theme.background};
-  transition: ${(props) => props.theme.backgroundTransition};
+  background: ${s("background")};
+  transition: ${s("backgroundTransition")};
   outline: none;
 
   ${breakpoint("tablet")`
@@ -209,7 +209,7 @@ const Close = styled(NudeButton)`
   right: 0;
   margin: 12px;
   opacity: 0.75;
-  color: ${(props) => props.theme.text};
+  color: ${s("text")};
   width: auto;
   height: auto;
 
@@ -229,7 +229,7 @@ const Back = styled(NudeButton)`
   top: ${Desktop.hasInsetTitlebar() ? "3rem" : "2rem"};
   left: 2rem;
   opacity: 0.75;
-  color: ${(props) => props.theme.text};
+  color: ${s("text")};
   font-weight: 500;
   width: auto;
   height: auto;
@@ -244,7 +244,7 @@ const Back = styled(NudeButton)`
 `;
 
 const Header = styled(Flex)`
-  color: ${(props) => props.theme.textSecondary};
+  color: ${s("textSecondary")};
   align-items: center;
   justify-content: space-between;
   font-weight: 600;
@@ -262,16 +262,16 @@ const Small = styled.div`
   display: flex;
   justify-content: center;
   align-items: flex-start;
-  background: ${(props) => props.theme.modalBackground};
-  transition: ${(props) => props.theme.backgroundTransition};
-  box-shadow: ${(props) => props.theme.modalShadow};
+  background: ${s("modalBackground")};
+  transition: ${s("backgroundTransition")};
+  box-shadow: ${s("modalShadow")};
   border-radius: 8px;
   outline: none;
 
   ${NudeButton} {
     &:hover,
     &[aria-expanded="true"] {
-      background: ${(props) => props.theme.sidebarControlHoverBackground};
+      background: ${s("sidebarControlHoverBackground")};
     }
     vertical-align: middle;
   }

app/components/Notice.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import styled from "styled-components";
+import { s } from "@shared/styles";
 import Flex from "./Flex";
 import Text from "./Text";
 
@@ -33,8 +34,8 @@ const Title = styled.span`
 `;
 
 const Container = styled(Text)`
-  background: ${(props) => props.theme.sidebarBackground};
-  color: ${(props) => props.theme.sidebarText};
+  background: ${s("sidebarBackground")};
+  color: ${s("sidebarText")};
   padding: 10px 12px;
   border-radius: 4px;
   position: relative;

app/components/NoticeAlert.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import Notice from "~/components/Notice";
 
-const AlertNotice: React.FC = ({ children }) => {
+const NoticeAlert: React.FC = ({ children }) => {
   return (
     <Notice>
       <svg
@@ -26,4 +26,4 @@ const AlertNotice: React.FC = ({ children }) => {
   );
 };
 
-export default AlertNotice;
+export default NoticeAlert;

app/components/NoticeTip.ts

@@ -1,21 +0,0 @@
-import styled from "styled-components";
-
-const Notice = styled.p`
-  background: ${(props) => props.theme.brand.marine};
-  color: ${(props) => props.theme.almostBlack};
-  padding: 10px 12px;
-  margin-top: 24px;
-  border-radius: 4px;
-  position: relative;
-
-  a {
-    color: ${(props) => props.theme.almostBlack};
-    font-weight: 500;
-  }
-
-  a:hover {
-    text-decoration: underline;
-  }
-`;
-
-export default Notice;

app/components/PlaceholderText.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import styled from "styled-components";
 import { randomInteger } from "@shared/random";
+import { s } from "@shared/styles";
 import Flex from "~/components/Flex";
 import { pulsate } from "~/styles/animations";
 
@@ -30,7 +31,7 @@ const Mask = styled(Flex)<{
     props.height ? props.height : props.header ? 24 : 18}px;
   margin-bottom: 6px;
   border-radius: 6px;
-  background-color: ${(props) => props.theme.divider};
+  background-color: ${s("divider")};
   animation: ${pulsate} 2s infinite;
   animation-delay: ${(props) => props.delay || 0}s;
 

app/components/Popover.tsx

@@ -3,7 +3,7 @@ import { Dialog } from "reakit/Dialog";
 import { Popover as ReakitPopover, PopoverProps } from "reakit/Popover";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import { depths } from "@shared/styles";
+import { depths, s } from "@shared/styles";
 import useMobile from "~/hooks/useMobile";
 import { fadeAndScaleIn } from "~/styles/animations";
 
@@ -42,13 +42,13 @@ const Popover: React.FC<Props> = ({
 const Contents = styled.div<{ $shrink?: boolean; $width?: number }>`
   animation: ${fadeAndScaleIn} 200ms ease;
   transform-origin: 75% 0;
-  background: ${(props) => props.theme.menuBackground};
+  background: ${s("menuBackground")};
   border-radius: 6px;
   padding: ${(props) => (props.$shrink ? "6px 0" : "12px 24px")};
   max-height: 75vh;
   overflow-x: hidden;
   overflow-y: auto;
-  box-shadow: ${(props) => props.theme.menuShadow};
+  box-shadow: ${s("menuShadow")};
   width: ${(props) => props.$width}px;
 
   ${breakpoint("mobile", "tablet")`

app/components/Scrollable.tsx

@@ -1,8 +1,8 @@
 import { observer } from "mobx-react";
 import * as React from "react";
 import styled from "styled-components";
+import { hideScrollbars } from "@shared/styles";
 import useWindowSize from "~/hooks/useWindowSize";
-import { hideScrollbars } from "~/styles";
 
 type Props = React.HTMLAttributes<HTMLDivElement> & {
   shadow?: boolean;

app/components/SearchListItem.tsx

@@ -4,9 +4,10 @@ import { Link } from "react-router-dom";
 import { CompositeItem } from "reakit/Composite";
 import styled, { css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
+import { s, ellipsis } from "@shared/styles";
 import Document from "~/models/Document";
 import Highlight, { Mark } from "~/components/Highlight";
-import { ellipsis, hover } from "~/styles";
+import { hover } from "~/styles";
 import { sharedDocumentPath } from "~/utils/routeHelpers";
 
 type Props = {
@@ -101,13 +102,13 @@ const DocumentLink = styled(Link)<{
   &:active,
   &:focus,
   &:focus-within {
-    background: ${(props) => props.theme.listItemHoverBackground};
+    background: ${s("listItemHoverBackground")};
   }
 
   ${(props) =>
     props.$menuOpen &&
     css`
-      background: ${(props) => props.theme.listItemHoverBackground};
+      background: ${s("listItemHoverBackground")};
     `}
 `;
 
@@ -120,7 +121,7 @@ const Heading = styled.h4<{ rtl?: boolean }>`
   margin-bottom: 0.25em;
   overflow: hidden;
   white-space: nowrap;
-  color: ${(props) => props.theme.text};
+  color: ${s("text")};
 `;
 
 const Title = styled(Highlight)`
@@ -134,7 +135,7 @@ const Title = styled(Highlight)`
 
 const ResultContext = styled(Highlight)`
   display: block;
-  color: ${(props) => props.theme.textTertiary};
+  color: ${s("textTertiary")};
   font-size: 14px;
   margin-top: -0.25em;
   margin-bottom: 0.25em;

app/components/Sidebar/Right.tsx

@@ -3,7 +3,7 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import styled, { useTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import { depths } from "@shared/styles";
+import { depths, s } from "@shared/styles";
 import ErrorBoundary from "~/components/ErrorBoundary";
 import Flex from "~/components/Flex";
 import ResizeBorder from "~/components/Sidebar/components/ResizeBorder";
@@ -119,10 +119,9 @@ const Sidebar = styled(m.div)<{
 }>`
   display: flex;
   flex-shrink: 0;
-  background: ${(props) => props.theme.background};
-  width: ${(props) => props.theme.sidebarRightWidth}px;
+  background: ${s("background")};
   max-width: 70%;
-  border-left: 1px solid ${(props) => props.theme.divider};
+  border-left: 1px solid ${s("divider")};
   transition: border-left 100ms ease-in-out;
   z-index: 1;
 

app/components/Sidebar/Sidebar.tsx

@@ -5,7 +5,7 @@ import { Portal } from "react-portal";
 import { useLocation } from "react-router-dom";
 import styled, { useTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import { depths } from "@shared/styles";
+import { depths, s } from "@shared/styles";
 import Flex from "~/components/Flex";
 import useMenuContext from "~/hooks/useMenuContext";
 import usePrevious from "~/hooks/usePrevious";
@@ -224,7 +224,7 @@ const Backdrop = styled.a`
   right: 0;
   cursor: default;
   z-index: ${depths.sidebar - 1};
-  background: ${(props) => props.theme.backdrop};
+  background: ${s("backdrop")};
 `;
 
 type ContainerProps = {
@@ -239,9 +239,9 @@ const Container = styled(Flex)<ContainerProps>`
   top: 0;
   bottom: 0;
   width: 100%;
-  background: ${(props) => props.theme.sidebarBackground};
+  background: ${s("sidebarBackground")};
   transition: box-shadow 100ms ease-in-out, transform 100ms ease-out,
-    ${(props) => props.theme.backgroundTransition}
+    ${s("backgroundTransition")}
       ${(props: ContainerProps) =>
         props.$isAnimating ? `,width ${ANIMATION_MS}ms ease-out` : ""};
   transform: translateX(

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")`

app/components/SkipNavLink.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import styled from "styled-components";
-import { depths } from "@shared/styles";
+import { depths, s } from "@shared/styles";
 import { id } from "~/components/SkipNavContent";
 
 export default function SkipNavLink() {
@@ -23,9 +23,9 @@ const Anchor = styled.a`
     position: fixed;
     top: 12px;
     left: 12px;
-    background: ${(props) => props.theme.background};
-    color: ${(props) => props.theme.text};
-    outline-color: ${(props) => props.theme.accent};
+    background: ${s("background")};
+    color: ${s("text")};
+    outline-color: ${s("accent")};
     z-index: ${depths.popover};
     width: auto;
     height: auto;

app/components/Subheading.tsx

@@ -1,12 +1,13 @@
 import * as React from "react";
 import styled from "styled-components";
+import { s } from "@shared/styles";
 
 type Props = {
   sticky?: boolean;
 };
 
 const H3 = styled.h3`
-  border-bottom: 1px solid ${(props) => props.theme.divider};
+  border-bottom: 1px solid ${s("divider")};
   margin: 12px 0;
   line-height: 1;
 `;
@@ -16,7 +17,7 @@ const Underline = styled.div`
   font-weight: 500;
   font-size: 14px;
   line-height: 1.5;
-  color: ${(props) => props.theme.textSecondary};
+  color: ${s("textSecondary")};
   padding-top: 6px;
   padding-bottom: 6px;
 `;
@@ -28,8 +29,8 @@ const Background = styled.div<{ sticky?: boolean }>`
   ${(props) => (props.sticky ? "top: 54px;" : "")}
   margin: 0 -8px;
   padding: 0 8px;
-  background: ${(props) => props.theme.background};
-  transition: ${(props) => props.theme.backgroundTransition};
+  background: ${s("background")};
+  transition: ${s("backgroundTransition")};
   z-index: 1;
 `;
 

app/components/Switch.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import styled from "styled-components";
+import { s } from "@shared/styles";
 import { LabelText } from "~/components/Input";
 import Text from "~/components/Text";
 import { undraggableOnDesktop } from "~/styles";
@@ -124,11 +125,11 @@ const HiddenInput = styled.input<{ width: number; height: number }>`
   }
 
   &:checked + ${Slider} {
-    background-color: ${(props) => props.theme.accent};
+    background-color: ${s("accent")};
   }
 
   &:focus + ${Slider} {
-    box-shadow: 0 0 1px ${(props) => props.theme.accent};
+    box-shadow: 0 0 1px ${s("accent")};
   }
 
   &:checked + ${Slider}:before {

app/components/Tab.tsx

@@ -1,6 +1,7 @@
 import { m } from "framer-motion";
 import * as React from "react";
 import styled, { useTheme } from "styled-components";
+import { s } from "@shared/styles";
 import NavLink from "~/components/NavLink";
 
 type Props = Omit<React.ComponentProps<typeof NavLink>, "children"> & {
@@ -15,12 +16,12 @@ const TabLink = styled(NavLink)`
   font-weight: 500;
   font-size: 14px;
   cursor: var(--pointer);
-  color: ${(props) => props.theme.textTertiary};
+  color: ${s("textTertiary")};
   margin-right: 24px;
   padding: 6px 0;
 
   &:hover {
-    color: ${(props) => props.theme.textSecondary};
+    color: ${s("textSecondary")};
   }
 `;
 
@@ -32,7 +33,7 @@ const Active = styled(m.div)`
   height: 3px;
   width: 100%;
   border-radius: 3px;
-  background: ${(props) => props.theme.textSecondary};
+  background: ${s("textSecondary")};
 `;
 
 const transition = {

app/components/Table.tsx

@@ -5,6 +5,7 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useTable, useSortBy, usePagination } from "react-table";
 import styled from "styled-components";
+import { s } from "@shared/styles";
 import Button from "~/components/Button";
 import DelayedMount from "~/components/DelayedMount";
 import Empty from "~/components/Empty";
@@ -225,7 +226,7 @@ const DescSortIcon = styled(CollapsedIcon)`
   margin-left: -2px;
 
   &:hover {
-    fill: ${(props) => props.theme.text};
+    fill: ${s("text")};
   }
 `;
 
@@ -256,7 +257,7 @@ const SortWrapper = styled(Flex)<{ $sortable: boolean }>`
 
 const Cell = styled.td`
   padding: 10px 6px;
-  border-bottom: 1px solid ${(props) => props.theme.divider};
+  border-bottom: 1px solid ${s("divider")};
   font-size: 14px;
 
   &:first-child {
@@ -273,7 +274,7 @@ const Cell = styled.td`
   ${NudeButton} {
     &:hover,
     &[aria-expanded="true"] {
-      background: ${(props) => props.theme.sidebarControlHoverBackground};
+      background: ${s("sidebarControlHoverBackground")};
     }
   }
 `;
@@ -299,11 +300,11 @@ const Head = styled.th`
   position: sticky;
   top: 54px;
   padding: 6px 6px 0;
-  border-bottom: 1px solid ${(props) => props.theme.divider};
-  background: ${(props) => props.theme.background};
-  transition: ${(props) => props.theme.backgroundTransition};
+  border-bottom: 1px solid ${s("divider")};
+  background: ${s("background")};
+  transition: ${s("backgroundTransition")};
   font-size: 14px;
-  color: ${(props) => props.theme.textSecondary};
+  color: ${s("textSecondary")};
   font-weight: 500;
   z-index: 1;
 

app/components/Tabs.tsx

@@ -2,10 +2,11 @@ import { AnimateSharedLayout } from "framer-motion";
 import { transparentize } from "polished";
 import * as React from "react";
 import styled from "styled-components";
+import { s } from "@shared/styles";
 import useWindowSize from "~/hooks/useWindowSize";
 
 const Nav = styled.nav<{ $shadowVisible?: boolean }>`
-  border-bottom: 1px solid ${(props) => props.theme.divider};
+  border-bottom: 1px solid ${s("divider")};
   margin: 12px 0;
   overflow-y: auto;
   white-space: nowrap;
@@ -43,13 +44,13 @@ const Sticky = styled.div`
   top: 54px;
   margin: 0 -8px;
   padding: 0 8px;
-  background: ${(props) => props.theme.background};
-  transition: ${(props) => props.theme.backgroundTransition};
+  background: ${s("background")};
+  transition: ${s("backgroundTransition")};
   z-index: 1;
 `;
 
 export const Separator = styled.span`
-  border-left: 1px solid ${(props) => props.theme.divider};
+  border-left: 1px solid ${s("divider")};
   position: relative;
   top: 2px;
   margin-right: 24px;

app/components/TeamLogo.ts

@@ -1,9 +1,10 @@
 import styled from "styled-components";
+import { s } from "@shared/styles";
 import Avatar from "./Avatar";
 
 const TeamLogo = styled(Avatar)`
   border-radius: 4px;
-  border: 1px solid ${(props) => props.theme.divider};
+  border: 1px solid ${s("divider")};
 `;
 
 export default TeamLogo;

app/components/Toast.tsx

@@ -2,6 +2,7 @@ import { CheckboxIcon, InfoIcon, WarningIcon } from "outline-icons";
 import { darken } from "polished";
 import * as React from "react";
 import styled, { css } from "styled-components";
+import { s } from "@shared/styles";
 import { fadeAndScaleIn, pulse } from "~/styles/animations";
 import { Toast as TToast } from "~/types";
 import Spinner from "./Spinner";
@@ -72,7 +73,7 @@ function Toast({ closeAfterMs = 3000, onRequestClose, toast }: Props) {
 const Action = styled.span`
   display: inline-block;
   padding: 4px 8px;
-  color: ${(props) => props.theme.toastText};
+  color: ${s("toastText")};
   background: ${(props) => darken(0.05, props.theme.toastBackground)};
   border-radius: 4px;
   margin-left: 8px;
@@ -99,8 +100,8 @@ const Container = styled.div`
   animation: ${fadeAndScaleIn} 100ms ease;
   margin: 8px 0;
   padding: 0 12px;
-  color: ${(props) => props.theme.toastText};
-  background: ${(props) => props.theme.toastBackground};
+  color: ${s("toastText")};
+  background: ${s("toastBackground")};
   font-size: 15px;
   border-radius: 5px;
   cursor: default;

app/components/Toasts.tsx

@@ -23,8 +23,8 @@ function Toasts() {
 
 const List = styled.ol`
   position: fixed;
-  left: ${(props) => props.theme.hpadding};
-  bottom: ${(props) => props.theme.vpadding};
+  left: 16px;
+  bottom: 16px;
   list-style: none;
   margin: 0;
   padding: 0;

app/components/Tooltip.tsx

@@ -2,6 +2,7 @@ import Tippy, { TippyProps } from "@tippyjs/react";
 import * as React from "react";
 import styled, { createGlobalStyle } from "styled-components";
 import { roundArrow } from "tippy.js";
+import { s } from "@shared/styles";
 
 export type Props = Omit<TippyProps, "content" | "theme"> & {
   tooltip?: React.ReactChild | React.ReactChild[];
@@ -45,9 +46,9 @@ const Shortcut = styled.kbd`
   font: 10px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
     monospace;
   line-height: 10px;
-  color: ${(props) => props.theme.tooltipBackground};
+  color: ${s("tooltipBackground")};
   vertical-align: middle;
-  background-color: ${(props) => props.theme.tooltipText};
+  background-color: ${s("tooltipText")};
   border-radius: 3px;
 `;
 
@@ -60,8 +61,8 @@ export const TooltipStyles = createGlobalStyle`
   }
   .tippy-box{
       position:relative;
-      background-color: ${(props) => props.theme.tooltipBackground};
-      color: ${(props) => props.theme.tooltipText};
+      background-color: ${s("tooltipBackground")};
+      color: ${s("tooltipText")};
       border-radius:4px;
       font-size:13px;
       line-height:1.4;
@@ -113,7 +114,7 @@ export const TooltipStyles = createGlobalStyle`
   .tippy-arrow{
       width:16px;
       height:16px;
-      color: ${(props) => props.theme.tooltipBackground};
+      color: ${s("tooltipBackground")};
   }
   .tippy-arrow:before{
       content:"";
@@ -160,7 +161,7 @@ export const TooltipStyles = createGlobalStyle`
   .tippy-svg-arrow{
       width:16px;
       height:16px;
-      fill: ${(props) => props.theme.tooltipBackground};
+      fill: ${s("tooltipBackground")};
       text-align:initial
   }
   .tippy-svg-arrow,.tippy-svg-arrow>svg{

app/components/Typing.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import styled from "styled-components";
+import { s } from "@shared/styles";
 
 type Props = {
   /** The size to render the indicator, defaults to 24px */
@@ -20,7 +21,7 @@ export default function Typing({ size = 24 }: Props) {
 }
 
 const Wrapper = styled.svg`
-  fill: ${(props) => props.theme.textTertiary};
+  fill: ${s("textTertiary")};
 
   @keyframes blink {
     50% {