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

This commit is contained in:
Tom Moor
2023-04-07 22:43:34 -04:00
committed by GitHub
parent c202198d61
commit 422bdc32d9
116 changed files with 482 additions and 388 deletions

View File

@@ -1,10 +1,11 @@
import styled from "styled-components";
import { s } from "@shared/styles";
const Header = styled.h3`
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
color: ${(props) => props.theme.sidebarText};
color: ${s("sidebarText")};
letter-spacing: 0.04em;
margin: 1em 12px 0.5em;
`;

View File

@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
import { Menu, MenuStateReturn } from "reakit/Menu";
import styled, { DefaultTheme } from "styled-components";
import breakpoint from "styled-components-breakpoint";
import { depths } from "@shared/styles";
import { depths, s } from "@shared/styles";
import Scrollable from "~/components/Scrollable";
import useMenuContext from "~/hooks/useMenuContext";
import useMenuHeight from "~/hooks/useMenuHeight";
@@ -171,7 +171,7 @@ export const Backdrop = styled.div`
left: 0;
right: 0;
bottom: 0;
background: ${(props) => props.theme.backdrop};
background: ${s("backdrop")};
z-index: ${depths.menu - 1};
`;
@@ -203,7 +203,7 @@ export const Background = styled(Scrollable)<BackgroundProps>`
animation: ${mobileContextMenu} 200ms ease;
transform-origin: 50% 100%;
max-width: 100%;
background: ${(props) => props.theme.menuBackground};
background: ${s("menuBackground")};
border-radius: 6px;
padding: 6px;
min-width: 180px;