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

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 = {