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

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;