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

shared/editor/components/FileExtension.tsx

@@ -1,6 +1,7 @@
 import { AttachmentIcon } from "outline-icons";
 import * as React from "react";
 import styled from "styled-components";
+import { s } from "../../styles";
 import { stringToColor } from "../../utils/color";
 
 type Props = {
@@ -27,7 +28,7 @@ export default function FileExtension(props: Props) {
 }
 
 const Icon = styled.span<{ $size: number }>`
-  font-family: ${(props) => props.theme.fontFamilyMono};
+  font-family: ${s("fontFamilyMono")};
   display: inline-flex;
   align-items: center;
   justify-content: center;

shared/editor/components/Frame.tsx

@@ -4,6 +4,7 @@ import { OpenIcon } from "outline-icons";
 import * as React from "react";
 import styled from "styled-components";
 import { Optional } from "utility-types";
+import { s } from "../../styles";
 
 type Props = Omit<Optional<HTMLIFrameElement>, "children"> & {
   src?: string;
@@ -121,7 +122,7 @@ const Rounded = styled.div<{
 `;
 
 const Open = styled.a`
-  color: ${(props) => props.theme.textSecondary} !important;
+  color: ${s("textSecondary")} !important;
   font-size: 13px;
   font-weight: 500;
   align-items: center;
@@ -141,8 +142,8 @@ const Bar = styled.div`
   display: flex;
   align-items: center;
   border-top: 1px solid ${(props) => props.theme.embedBorder};
-  background: ${(props) => props.theme.secondaryBackground};
-  color: ${(props) => props.theme.textSecondary};
+  background: ${s("secondaryBackground")};
+  color: ${s("textSecondary")};
   padding: 0 8px;
   border-bottom-left-radius: 6px;
   border-bottom-right-radius: 6px;

shared/editor/components/Image.tsx

@@ -3,6 +3,7 @@ import type { EditorView } from "prosemirror-view";
 import * as React from "react";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
+import { s } from "../../styles";
 import { sanitizeUrl } from "../../utils/urls";
 import { ComponentProps } from "../types";
 import ImageZoom from "./ImageZoom";
@@ -240,7 +241,7 @@ export const Caption = styled.p`
   display: block;
   font-style: italic;
   font-weight: normal;
-  color: ${(props) => props.theme.textSecondary};
+  color: ${s("textSecondary")};
   padding: 8px 0 4px;
   line-height: 16px;
   text-align: center;
@@ -261,7 +262,7 @@ export const Caption = styled.p`
   }
 
   &:empty:before {
-    color: ${(props) => props.theme.placeholder};
+    color: ${s("placeholder")};
     content: attr(data-caption);
     pointer-events: none;
   }
@@ -288,8 +289,8 @@ const ResizeLeft = styled.div<{ $dragging: boolean }>`
     height: 15%;
     min-height: 20px;
     border-radius: 4px;
-    background: ${(props) => props.theme.toolbarBackground};
-    box-shadow: 0 0 0 1px ${(props) => props.theme.toolbarItem};
+    background: ${s("toolbarBackground")};
+    box-shadow: 0 0 0 1px ${s("toolbarItem")};
     opacity: 0.75;
   }
 `;
@@ -312,8 +313,8 @@ const Button = styled.button`
   margin: 0;
   padding: 0;
   border-radius: 4px;
-  background: ${(props) => props.theme.background};
-  color: ${(props) => props.theme.textSecondary};
+  background: ${s("background")};
+  color: ${s("textSecondary")};
   width: 24px;
   height: 24px;
   display: inline-block;
@@ -326,7 +327,7 @@ const Button = styled.button`
   }
 
   &:hover {
-    color: ${(props) => props.theme.text};
+    color: ${s("text")};
     opacity: 1;
   }
 `;

shared/editor/components/ImageZoom/Styles.tsx

@@ -1,5 +1,6 @@
 import { transparentize } from "polished";
 import { createGlobalStyle } from "styled-components";
+import { s } from "../../../styles";
 
 export default createGlobalStyle`
   [data-rmiz] {
@@ -37,7 +38,7 @@ export default createGlobalStyle`
     background-color: ${(props) => transparentize(1, props.theme.background)};
   }
   [data-rmiz-modal-overlay="visible"] {
-    background-color: ${(props) => props.theme.background};
+    background-color: ${s("background")};
   }
   [data-rmiz-modal-content] {
     position: relative;

shared/editor/components/Widget.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import styled, { css, DefaultTheme, ThemeProps } from "styled-components";
+import { s } from "../../styles";
 
 type Props = {
   icon: React.ReactNode;
@@ -35,14 +36,14 @@ const Children = styled.div`
   opacity: 0;
 
   &:hover {
-    color: ${(props) => props.theme.text};
+    color: ${s("text")};
   }
 `;
 
 const Title = styled.strong`
   font-weight: 500;
   font-size: 14px;
-  color: ${(props) => props.theme.text};
+  color: ${s("text")};
 `;
 
 const Preview = styled.div`
@@ -51,12 +52,12 @@ const Preview = styled.div`
   flex-direction: row;
   flex-grow: 1;
   align-items: center;
-  color: ${(props) => props.theme.textTertiary};
+  color: ${s("textTertiary")};
 `;
 
 const Subtitle = styled.span`
   font-size: 13px;
-  color: ${(props) => props.theme.textTertiary} !important;
+  color: ${s("textTertiary")} !important;
   line-height: 0;
 `;
 
@@ -64,9 +65,9 @@ const Wrapper = styled.a`
   display: flex;
   align-items: center;
   gap: 6px;
-  background: ${(props) => props.theme.background};
-  color: ${(props) => props.theme.text} !important;
-  box-shadow: 0 0 0 1px ${(props) => props.theme.divider};
+  background: ${s("background")};
+  color: ${s("text")} !important;
+  box-shadow: 0 0 0 1px ${s("divider")};
   white-space: nowrap;
   border-radius: 8px;
   padding: 6px 8px;
@@ -84,7 +85,7 @@ const Wrapper = styled.a`
       &:active {
         cursor: pointer !important;
         text-decoration: none !important;
-        background: ${(props) => props.theme.secondaryBackground};
+        background: ${s("secondaryBackground")};
 
         ${Children} {
           opacity: 1;

shared/i18n/locales/en_US/translation.json

@@ -627,6 +627,19 @@
   "You signed in with {{ authProviderName }} last time.": "You signed in with {{ authProviderName }} last time.",
   "Or": "Or",
   "Already have an account? Go to <1>login</1>.": "Already have an account? Go to <1>login</1>.",
+  "Unable to sign-in. Please navigate to your team's custom URL, then try to sign-in again.<1></1>If you were invited to a team, you will find a link to it in the invite email.": "Unable to sign-in. Please navigate to your team's custom URL, then try to sign-in again.<1></1>If you were invited to a team, you will find a link to it in the invite email.",
+  "Sorry, a new account cannot be created with a personal Gmail address.<1></1>Please use a Google Workspaces account instead.": "Sorry, a new account cannot be created with a personal Gmail address.<1></1>Please use a Google Workspaces account instead.",
+  "The team you authenticated with is not authorized on this installation. Try another?": "The team you authenticated with is not authorized on this installation. Try another?",
+  "We could not read the user info supplied by your identity provider.": "We could not read the user info supplied by your identity provider.",
+  "Your account uses email sign-in, please sign-in with email to continue.": "Your account uses email sign-in, please sign-in with email to continue.",
+  "An email sign-in link was recently sent, please check your inbox or try again in a few minutes.": "An email sign-in link was recently sent, please check your inbox or try again in a few minutes.",
+  "Authentication failed – we were unable to sign you in at this time. Please try again.": "Authentication failed – we were unable to sign you in at this time. Please try again.",
+  "Authentication failed – you do not have permission to access this team.": "Authentication failed – you do not have permission to access this team.",
+  "Sorry, it looks like that sign-in link is no longer valid, please try requesting another.": "Sorry, it looks like that sign-in link is no longer valid, please try requesting another.",
+  "Your account has been suspended. To re-activate your account, please contact a team admin.": "Your account has been suspended. To re-activate your account, please contact a team admin.",
+  "Authentication failed – this login method was disabled by a team admin.": "Authentication failed – this login method was disabled by a team admin.",
+  "The team you are trying to join requires an invite before you can create an account.<1></1>Please request an invite from your team admin and try again.": "The team you are trying to join requires an invite before you can create an account.<1></1>Please request an invite from your team admin and try again.",
+  "Sorry, your domain is not allowed. Please try again with an allowed team domain.": "Sorry, your domain is not allowed. Please try again with an allowed team domain.",
   "Any collection": "Any collection",
   "Any time": "Any time",
   "Past day": "Past day",

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,