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

shared/styles/globals.ts

@@ -1,6 +1,6 @@
 import { createGlobalStyle } from "styled-components";
 import styledNormalize from "styled-normalize";
-import { breakpoints, depths } from ".";
+import { breakpoints, depths, s } from ".";
 
 type Props = {
   useCursorPointer?: boolean;
@@ -37,7 +37,7 @@ export default createGlobalStyle<Props>`
   body {
     font-size: 16px;
     line-height: 1.5;
-    color: ${(props) => props.theme.text};
+    color: ${s("text")};
     overscroll-behavior-y: none;
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
@@ -102,7 +102,7 @@ export default createGlobalStyle<Props>`
   hr {
     border: 0;
     height: 0;
-    border-top: 1px solid ${(props) => props.theme.divider};
+    border-top: 1px solid ${s("divider")};
   }
 
   .js-focus-visible :focus:not(.focus-visible) {
@@ -110,7 +110,7 @@ export default createGlobalStyle<Props>`
   }
 
   .js-focus-visible .focus-visible {
-    outline-color: ${(props) => props.theme.accent};
+    outline-color: ${s("accent")};
     outline-offset: -1px;
   }
 `;

shared/styles/index.ts

@@ -1,3 +1,41 @@
+import { DefaultTheme } from "styled-components";
+
 export { default as depths } from "./depths";
 
 export { default as breakpoints } from "./breakpoints";
+
+/**
+ * Mixin to make text ellipse when it overflows.
+ *
+ * @returns string of CSS
+ */
+export const ellipsis = () => `
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+`;
+
+/**
+ * Mixin to return a theme value.
+ *
+ * @returns a theme value
+ */
+export const s = (key: keyof DefaultTheme) => (props: {
+  theme: DefaultTheme;
+}) => {
+  return String(props.theme[key]);
+};
+
+/**
+ * Mixin to hide scrollbars.
+ *
+ * @returns string of CSS
+ */
+export const hideScrollbars = () => `
+  -ms-overflow-style: none;
+  overflow: -moz-scrollbars-none;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;

shared/styles/theme.ts

@@ -44,9 +44,6 @@ const defaultColors: Colors = {
 };
 
 const spacing = {
-  padding: "1.5vw 1.875vw",
-  vpadding: "1.5vw",
-  hpadding: "1.875vw",
   sidebarWidth: 260,
   sidebarRightWidth: 300,
   sidebarCollapsedWidth: 16,