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

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