Refactor: move styles utils to theme (#363)

This commit is contained in:
Priscila Oliveira 2019-12-12 12:10:27 -03:00 committed by GitHub
parent 172e470780
commit fd99be6818
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 130 additions and 216 deletions

View File

@ -11,20 +11,20 @@ import Footer from '../components/Footer';
import Box from '../muiComponents/Box'; import Box from '../muiComponents/Box';
import Loading from '../components/Loading'; import Loading from '../components/Loading';
import StyleBaseline from '../design-tokens/StyleBaseline'; import StyleBaseline from '../design-tokens/StyleBaseline';
import { breakpoints } from '../utils/styles/media'; import { Theme } from '../design-tokens/theme';
import AppContextProvider from './AppContextProvider'; import AppContextProvider from './AppContextProvider';
import AppRoute, { history } from './AppRoute'; import AppRoute, { history } from './AppRoute';
const StyledBoxContent = styled(Box)({ const StyledBoxContent = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
padding: 15, padding: 15,
[`@media screen and (min-width: ${breakpoints.container}px)`]: { [`@media screen and (min-width: ${theme && theme.breakPoints.container}px)`]: {
maxWidth: breakpoints.container, maxWidth: theme && theme.breakPoints.container,
width: '100%', width: '100%',
marginLeft: 'auto', marginLeft: 'auto',
marginRight: 'auto', marginRight: 'auto',
}, },
}); }));
/* eslint-disable react/jsx-no-bind */ /* eslint-disable react/jsx-no-bind */
/* eslint-disable react-hooks/exhaustive-deps */ /* eslint-disable react-hooks/exhaustive-deps */

View File

@ -1,14 +1,14 @@
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { fontWeight } from '../../utils/styles/sizes';
import ListItem from '../../muiComponents/ListItem'; import ListItem from '../../muiComponents/ListItem';
import Text from '../../muiComponents/Text'; import Text from '../../muiComponents/Text';
import ListItemText from '../../muiComponents/ListItemText'; import ListItemText from '../../muiComponents/ListItemText';
import { Theme } from '../../design-tokens/theme';
export const StyledText = styled(Text)({ export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
fontWeight: fontWeight.bold, fontWeight: props.theme && props.theme.fontWeight.bold,
textTransform: 'capitalize', textTransform: 'capitalize',
}); }));
export const AuthorListItem = styled(ListItem)({ export const AuthorListItem = styled(ListItem)({
padding: 0, padding: 0,

View File

@ -4,13 +4,13 @@ import Autosuggest, { SuggestionSelectedEventData, InputProps, ChangeEvent } fro
import match from 'autosuggest-highlight/match'; import match from 'autosuggest-highlight/match';
import parse from 'autosuggest-highlight/parse'; import parse from 'autosuggest-highlight/parse';
import { fontWeight } from '../../utils/styles/sizes';
import MenuItem from '../../muiComponents/MenuItem'; import MenuItem from '../../muiComponents/MenuItem';
import { Theme } from '../../design-tokens/theme';
import { Wrapper, InputField, SuggestionContainer } from './styles'; import { Wrapper, InputField, SuggestionContainer } from './styles';
const StyledAnchor = styled('a')<{ fw: number }>(props => ({ const StyledAnchor = styled('a')<{ highlight: boolean; theme?: Theme }>(props => ({
fontWeight: props.fw, fontWeight: props.theme && props.highlight ? props.theme.fontWeight.semiBold : props.theme.fontWeight.light,
})); }));
const StyledMenuItem = styled(MenuItem)({ const StyledMenuItem = styled(MenuItem)({
@ -64,9 +64,8 @@ const renderSuggestion = (suggestion, { query, isHighlighted }): JSX.Element =>
<StyledMenuItem component="div" selected={isHighlighted}> <StyledMenuItem component="div" selected={isHighlighted}>
<div> <div>
{parts.map((part, index) => { {parts.map((part, index) => {
const fw = part.highlight ? fontWeight.semiBold : fontWeight.light;
return ( return (
<StyledAnchor fw={fw} key={String(index)}> <StyledAnchor highlight={part.highlight} key={String(index)}>
{part.text} {part.text}
</StyledAnchor> </StyledAnchor>
); );

View File

@ -1,18 +1,18 @@
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { fontWeight } from '../../utils/styles/sizes';
import Text from '../../muiComponents/Text'; import Text from '../../muiComponents/Text';
import Card from '../../muiComponents/Card'; import Card from '../../muiComponents/Card';
import Chip from '../../muiComponents/Chip'; import Chip from '../../muiComponents/Chip';
import { Theme } from '../../design-tokens/theme';
export const CardWrap = styled(Card)({ export const CardWrap = styled(Card)({
margin: '0 0 16px', margin: '0 0 16px',
}); });
export const StyledText = styled(Text)({ export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
fontWeight: fontWeight.bold, fontWeight: props.theme && props.theme.fontWeight.bold,
textTransform: 'capitalize', textTransform: 'capitalize',
}); }));
export const Tags = styled('div')({ export const Tags = styled('div')({
display: 'flex', display: 'flex',

View File

@ -1,6 +1,5 @@
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { fontWeight } from '../../utils/styles/sizes';
import Text from '../../muiComponents/Text'; import Text from '../../muiComponents/Text';
import FloatingActionButton from '../../muiComponents/FloatingActionButton'; import FloatingActionButton from '../../muiComponents/FloatingActionButton';
import { Theme } from '../../design-tokens/theme'; import { Theme } from '../../design-tokens/theme';
@ -20,11 +19,11 @@ export const Content = styled('div')({
}, },
}); });
export const StyledText = styled(Text)({ export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
fontWeight: fontWeight.bold, fontWeight: props.theme && props.theme.fontWeight.bold,
marginBottom: '10px', marginBottom: '10px',
textTransform: 'capitalize', textTransform: 'capitalize',
}); }));
export const Fab = styled(FloatingActionButton)<{ theme?: Theme }>(props => ({ export const Fab = styled(FloatingActionButton)<{ theme?: Theme }>(props => ({
backgroundColor: props.theme && props.theme.palette.primary.main, backgroundColor: props.theme && props.theme.palette.primary.main,

View File

@ -1,16 +1,15 @@
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { Theme } from '../../design-tokens/theme';
import { fontWeight } from '../../utils/styles/sizes';
import ListItem from '../../muiComponents/ListItem'; import ListItem from '../../muiComponents/ListItem';
import Text from '../../muiComponents/Text'; import Text from '../../muiComponents/Text';
import FloatingActionButton from '../../muiComponents/FloatingActionButton'; import FloatingActionButton from '../../muiComponents/FloatingActionButton';
import Chip from '../../muiComponents/Chip'; import Chip from '../../muiComponents/Chip';
import { Theme } from '../../design-tokens/theme';
export const StyledText = styled(Text)({ export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
fontWeight: fontWeight.bold, fontWeight: props.theme && props.theme.fontWeight.bold,
textTransform: 'capitalize', textTransform: 'capitalize',
}); }));
export const DistListItem = styled(ListItem)({ export const DistListItem = styled(ListItem)({
paddingLeft: 0, paddingLeft: 0,

View File

@ -1,13 +1,13 @@
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { fontWeight } from '../../utils/styles/sizes';
import ListItem from '../../muiComponents/ListItem'; import ListItem from '../../muiComponents/ListItem';
import Text from '../../muiComponents/Text'; import Text from '../../muiComponents/Text';
import { Theme } from '../../design-tokens/theme';
export const StyledText = styled(Text)({ export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
fontWeight: fontWeight.bold, fontWeight: props.theme && props.theme.fontWeight.bold,
textTransform: 'capitalize', textTransform: 'capitalize',
}); }));
export const EngineListItem = styled(ListItem)({ export const EngineListItem = styled(ListItem)({
paddingLeft: 0, paddingLeft: 0,

View File

@ -1,6 +1,5 @@
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { breakpoints } from '../../utils/styles/media';
import Icon from '../Icon/Icon'; import Icon from '../Icon/Icon';
import { Theme } from '../../design-tokens/theme'; import { Theme } from '../../design-tokens/theme';
@ -12,29 +11,29 @@ export const Wrapper = styled('div')<{ theme?: Theme }>(props => ({
padding: '20px', padding: '20px',
})); }));
export const Inner = styled('div')({ export const Inner = styled('div')<{ theme?: Theme }>(({ theme }) => ({
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'flex-end', justifyContent: 'flex-end',
width: '100%', width: '100%',
[`@media (min-width: ${breakpoints.medium}px)`]: { [`@media (min-width: ${theme && theme.breakPoints.medium}px)`]: {
minWidth: 400, minWidth: 400,
maxWidth: 800, maxWidth: 800,
margin: 'auto', margin: 'auto',
justifyContent: 'space-between', justifyContent: 'space-between',
}, },
[`@media (min-width: ${breakpoints.large}px)`]: { [`@media (min-width: ${theme && theme.breakPoints.large}px)`]: {
maxWidth: 1240, maxWidth: 1240,
}, },
}); }));
export const Left = styled('div')({ export const Left = styled('div')<{ theme?: Theme }>(({ theme }) => ({
alignItems: 'center', alignItems: 'center',
display: 'none', display: 'none',
[`@media (min-width: ${breakpoints.medium}px)`]: { [`@media (min-width: ${theme && theme.breakPoints.medium}px)`]: {
display: 'flex', display: 'flex',
}, },
}); }));
export const Right = styled(Left)({ export const Right = styled(Left)({
display: 'flex', display: 'flex',

View File

@ -2,7 +2,6 @@ import styled from '@emotion/styled';
import { css } from '@emotion/core'; import { css } from '@emotion/core';
import { Theme } from '../../design-tokens/theme'; import { Theme } from '../../design-tokens/theme';
import { breakpoints } from '../../utils/styles/media';
import IconButton from '../../muiComponents/IconButton'; import IconButton from '../../muiComponents/IconButton';
import AppBar from '../../muiComponents/AppBar'; import AppBar from '../../muiComponents/AppBar';
import Toolbar from '../../muiComponents/Toolbar'; import Toolbar from '../../muiComponents/Toolbar';
@ -54,12 +53,12 @@ export const SearchWrapper = styled('div')({
width: '100%', width: '100%',
}); });
export const NavBar = styled(AppBar)<{ theme?: Theme }>(props => ({ export const NavBar = styled(AppBar)<{ theme?: Theme }>(({ theme }) => ({
backgroundColor: props.theme && props.theme.palette.primary.main, backgroundColor: theme && theme.palette.primary.main,
minHeight: 60, minHeight: 60,
display: 'flex', display: 'flex',
justifyContent: 'center', justifyContent: 'center',
[`@media (min-width: ${breakpoints.medium}px)`]: css` [`@media (min-width: ${theme && theme.breakPoints.medium}px)`]: css`
${SearchWrapper} { ${SearchWrapper} {
display: flex; display: flex;
} }
@ -70,12 +69,12 @@ export const NavBar = styled(AppBar)<{ theme?: Theme }>(props => ({
display: none; display: none;
} }
`, `,
[`@media (min-width: ${breakpoints.large}px)`]: css` [`@media (min-width: ${theme && theme.breakPoints.large}px)`]: css`
${InnerNavBar} { ${InnerNavBar} {
padding: 0 20px; padding: 0 20px;
} }
`, `,
[`@media (min-width: ${breakpoints.xlarge}px)`]: css` [`@media (min-width: ${theme && theme.breakPoints.xlarge}px)`]: css`
${InnerNavBar} { ${InnerNavBar} {
max-width: 1240px; max-width: 1240px;
width: 100%; width: 100%;

View File

@ -2,16 +2,16 @@ import React, { useContext } from 'react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { DetailContext } from '../../pages/Version'; import { DetailContext } from '../../pages/Version';
import { fontWeight } from '../../utils/styles/sizes';
import Text from '../../muiComponents/Text'; import Text from '../../muiComponents/Text';
import List from '../../muiComponents/List'; import List from '../../muiComponents/List';
import { Theme } from '../../design-tokens/theme';
import InstallListItem, { DependencyManager } from './InstallListItem'; import InstallListItem, { DependencyManager } from './InstallListItem';
const StyledText = styled(Text)({ const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
fontWeight: fontWeight.bold, fontWeight: props.theme && props.theme.fontWeight.bold,
textTransform: 'capitalize', textTransform: 'capitalize',
}); }));
const Install: React.FC = () => { const Install: React.FC = () => {
const detailContext = useContext(DetailContext); const detailContext = useContext(DetailContext);

View File

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { fontWeight } from '../../utils/styles/sizes'; import { Theme } from '../../design-tokens/theme';
interface Props { interface Props {
text: string; text: string;
@ -14,8 +14,8 @@ interface WrapperProps {
weight: string; weight: string;
} }
const Wrapper = styled('div')<WrapperProps>(props => ({ const Wrapper = styled('div')<WrapperProps & { theme?: Theme }>(props => ({
fontWeight: fontWeight[props.weight], fontWeight: props.theme && props.theme.fontWeight[props.weight],
textTransform: props.capitalize ? 'capitalize' : 'none', textTransform: props.capitalize ? 'capitalize' : 'none',
})); }));

View File

@ -5,7 +5,6 @@ import { useHistory } from 'react-router-dom';
import Box from '../../muiComponents/Box'; import Box from '../../muiComponents/Box';
import Button from '../../muiComponents/Button'; import Button from '../../muiComponents/Button';
import Heading from '../../muiComponents/Heading'; import Heading from '../../muiComponents/Heading';
import { spacings } from '../../utils/styles/spacings';
import { Theme } from '../../design-tokens/theme'; import { Theme } from '../../design-tokens/theme';
import PackageImg from './img/package.svg'; import PackageImg from './img/package.svg';
@ -21,7 +20,7 @@ const EmptyPackage = styled('img')({
const StyledHeading = styled(Heading)<{ theme?: Theme }>(props => ({ const StyledHeading = styled(Heading)<{ theme?: Theme }>(props => ({
color: props.theme && props.theme.palette.primary.main, color: props.theme && props.theme.palette.primary.main,
marginBottom: spacings.sm, marginBottom: 16,
})); }));
const NotFound: React.FC = () => { const NotFound: React.FC = () => {

View File

@ -1,10 +1,8 @@
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { breakpoints } from '../../utils/styles/media';
import Ico from '../Icon'; import Ico from '../Icon';
import Label from '../Label'; import Label from '../Label';
import { fontWeight } from '../../utils/styles/sizes';
import { default as MuiIconButton } from '../../muiComponents/IconButton'; import { default as MuiIconButton } from '../../muiComponents/IconButton';
import { default as Photo } from '../../muiComponents/Avatar'; import { default as Photo } from '../../muiComponents/Avatar';
import List from '../../muiComponents/List'; import List from '../../muiComponents/List';
@ -13,18 +11,18 @@ import Grid from '../../muiComponents/Grid';
import ListItemText from '../../muiComponents/ListItemText'; import ListItemText from '../../muiComponents/ListItemText';
import { Theme } from '../../design-tokens/theme'; import { Theme } from '../../design-tokens/theme';
export const OverviewItem = styled('span')<{ theme?: Theme }>(props => ({ export const OverviewItem = styled('span')<{ theme?: Theme }>(({ theme }) => ({
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
margin: '0 0 0 16px', margin: '0 0 0 16px',
color: props.theme && props.theme.palette.greyLight2, color: theme && theme.palette.greyLight2,
fontSize: 12, fontSize: 12,
[`@media (max-width: ${breakpoints.medium}px)`]: { [`@media (max-width: ${theme && theme.breakPoints.medium}px)`]: {
':nth-of-type(3)': { ':nth-of-type(3)': {
display: 'none', display: 'none',
}, },
}, },
[`@media (max-width: ${breakpoints.small}px)`]: { [`@media (max-width: ${theme && theme.breakPoints.small}px)`]: {
':nth-of-type(4)': { ':nth-of-type(4)': {
display: 'none', display: 'none',
}, },
@ -43,7 +41,7 @@ export const Published = styled('span')<{ theme?: Theme }>(props => ({
export const Text = styled(Label)<{ theme?: Theme }>(props => ({ export const Text = styled(Label)<{ theme?: Theme }>(props => ({
fontSize: '12px', fontSize: '12px',
fontWeight: fontWeight.semiBold, fontWeight: props.theme && props.theme.fontWeight.semiBold,
color: props.theme && props.theme.palette.greyLight2, color: props.theme && props.theme.palette.greyLight2,
})); }));
@ -68,17 +66,17 @@ export const WrapperLink = styled(Link)({
textDecoration: 'none', textDecoration: 'none',
}); });
export const PackageTitle = styled('span')<{ theme?: Theme }>(props => ({ export const PackageTitle = styled('span')<{ theme?: Theme }>(({ theme }) => ({
fontWeight: 600, fontWeight: theme && theme.fontWeight.bold,
fontSize: 20, fontSize: 20,
display: 'block', display: 'block',
marginBottom: 12, marginBottom: 12,
color: props.theme && props.theme.palette.eclipse, color: theme && theme.palette.eclipse,
cursor: 'pointer', cursor: 'pointer',
':hover': { ':hover': {
color: props.theme && props.theme.palette.black, color: theme && theme.palette.black,
}, },
[`@media (max-width: ${breakpoints.small}px)`]: { [`@media (max-width: ${theme && theme.breakPoints.small}px)`]: {
fontSize: 14, fontSize: 14,
marginBottom: 8, marginBottom: 8,
}, },
@ -105,14 +103,14 @@ export const IconButton = styled(MuiIconButton)({
}, },
}); });
export const TagContainer = styled('span')({ export const TagContainer = styled('span')<{ theme?: Theme }>(({ theme }) => ({
marginTop: 8, marginTop: 8,
marginBottom: 12, marginBottom: 12,
display: 'block', display: 'block',
[`@media (max-width: ${breakpoints.medium}px)`]: { [`@media (max-width: ${theme && theme.breakPoints.medium}px)`]: {
display: 'none', display: 'none',
}, },
}); }));
export const PackageListItemText = styled(ListItemText)({ export const PackageListItemText = styled(ListItemText)({
paddingRight: 0, paddingRight: 0,

View File

@ -1,4 +1,5 @@
import React, { Fragment, ReactNode } from 'react'; import React, { Fragment, ReactNode } from 'react';
import styled from '@emotion/styled';
import Package from '../Package'; import Package from '../Package';
import Help from '../Help'; import Help from '../Help';
@ -6,7 +7,10 @@ import { formatLicense } from '../../utils/package';
import { PackageInterface } from '../Package/Package'; import { PackageInterface } from '../Package/Package';
import Divider from '../../muiComponents/Divider'; import Divider from '../../muiComponents/Divider';
import * as classes from './styles'; const PkgContainer = styled('div')({
margin: 0,
padding: 0,
});
interface Props { interface Props {
packages: PackageInterface[]; packages: PackageInterface[];
@ -32,7 +36,7 @@ export const PackageList: React.FC<Props> = ({ packages }) => {
return ( return (
<div className={'package-list-items'}> <div className={'package-list-items'}>
<div className={classes.pkgContainer}>{hasPackages() ? renderPackages() : <Help />}</div> <PkgContainer>{hasPackages() ? renderPackages() : <Help />}</PkgContainer>
</div> </div>
); );
}; };

View File

@ -1,18 +0,0 @@
import { css } from 'emotion';
import { fontWeight, fontSize } from '../../utils/styles/sizes';
export const listTitle = css({
fontWeight: fontWeight.regular,
fontSize: fontSize.xl,
margin: `0 0 10px 0`,
});
export const pkgContainer = css`
margin: 0;
padding: 0;
& .listTitle {
${listTitle}
}
`;

View File

@ -1,6 +1,5 @@
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { fontSize } from '../../utils/styles/sizes';
import DialogTitle from '../../muiComponents/DialogTitle'; import DialogTitle from '../../muiComponents/DialogTitle';
import DialogContent from '../../muiComponents/DialogContent'; import DialogContent from '../../muiComponents/DialogContent';
import { Theme } from '../../design-tokens/theme'; import { Theme } from '../../design-tokens/theme';
@ -8,7 +7,7 @@ import { Theme } from '../../design-tokens/theme';
export const Title = styled(DialogTitle)<{ theme?: Theme }>(props => ({ export const Title = styled(DialogTitle)<{ theme?: Theme }>(props => ({
backgroundColor: props.theme && props.theme.palette.primary.main, backgroundColor: props.theme && props.theme.palette.primary.main,
color: props.theme && props.theme.palette.white, color: props.theme && props.theme.palette.white,
fontSize: fontSize.lg, fontSize: props.theme && props.theme.fontSize.lg,
})); }));
export const Content = styled(DialogContent)({ export const Content = styled(DialogContent)({

View File

@ -10,14 +10,13 @@ import CopyToClipBoard from '../CopyToClipBoard';
import List from '../../muiComponents/List'; import List from '../../muiComponents/List';
import { DetailContext } from '../../pages/Version'; import { DetailContext } from '../../pages/Version';
import { Theme } from '../../design-tokens/theme'; import { Theme } from '../../design-tokens/theme';
import { fontWeight } from '../../utils/styles/sizes';
import git from './img/git.png'; import git from './img/git.png';
const StyledText = styled(Text)({ const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
fontWeight: fontWeight.bold, fontWeight: props.theme && props.theme.fontWeight.bold,
textTransform: 'capitalize', textTransform: 'capitalize',
}); }));
const GithubLink = styled('a')<{ theme?: Theme }>(props => ({ const GithubLink = styled('a')<{ theme?: Theme }>(props => ({
color: props.theme && props.theme.palette.primary.main, color: props.theme && props.theme.palette.primary.main,

View File

@ -2,11 +2,11 @@ import styled from '@emotion/styled';
import Text from '../../muiComponents/Text'; import Text from '../../muiComponents/Text';
import { default as MuiListItemText } from '../../muiComponents/ListItemText'; import { default as MuiListItemText } from '../../muiComponents/ListItemText';
import { fontWeight } from '../../utils/styles/sizes'; import { Theme } from '../../design-tokens/theme';
export const StyledText = styled(Text)({ export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
fontWeight: fontWeight.bold, fontWeight: props.theme && props.theme.fontWeight.bold,
}); }));
export const Spacer = styled('div')({ export const Spacer = styled('div')({
flex: '1 1 auto', flex: '1 1 auto',

View File

@ -1,13 +1,13 @@
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { fontWeight } from '../../utils/styles/sizes';
import Text from '../../muiComponents/Text'; import Text from '../../muiComponents/Text';
import { default as MuiListItemText } from '../../muiComponents/ListItemText'; import { default as MuiListItemText } from '../../muiComponents/ListItemText';
import { Theme } from '../../design-tokens/theme';
import Link from '../Link'; import Link from '../Link';
export const StyledText = styled(Text)({ export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
fontWeight: fontWeight.bold, fontWeight: props.theme && props.theme.fontWeight.bold,
}); }));
export const Spacer = styled('div')({ export const Spacer = styled('div')({
flex: '1 1 auto', flex: '1 1 auto',

View File

@ -1,17 +1,16 @@
import { makeStyles } from '@material-ui/styles'; import { makeStyles } from '@material-ui/styles';
import React from 'react'; import React from 'react';
import { fontWeight } from '../utils/styles/sizes'; import { Theme } from './theme';
import { breakpoints } from '../utils/styles/media';
const resetStyles = makeStyles(() => ({ const resetStyles = makeStyles(({ theme }: { theme?: Theme }) => ({
'@global': { '@global': {
// eslint-disable-next-line max-len // eslint-disable-next-line max-len
'html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video': { 'html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video': {
fontFamily: '"Roboto", Helvetica Neue, Arial, sans-serif', fontFamily: '"Roboto", Helvetica Neue, Arial, sans-serif',
}, },
strong: { strong: {
fontWeight: fontWeight.semiBold, fontWeight: theme && theme.fontWeight.semiBold,
}, },
'html, body, #root': { 'html, body, #root': {
height: '100%', height: '100%',
@ -25,8 +24,8 @@ const resetStyles = makeStyles(() => ({
padding: 15, padding: 15,
flex: 1, flex: 1,
[`@media screen and (min-width: ${breakpoints.container}px)`]: { [`@media screen and (min-width: ${theme && theme.breakPoints.container}px)`]: {
maxWidth: breakpoints.container, maxWidth: theme && theme.breakPoints.container,
width: '100%', width: '100%',
marginLeft: 'auto', marginLeft: 'auto',
marginRight: 'auto', marginRight: 'auto',

View File

@ -28,6 +28,44 @@ const colors = {
export type Colors = keyof typeof colors; export type Colors = keyof typeof colors;
const fontSize = {
xxl: 26,
xl: 24,
lg: 21,
md: 18,
default: 16,
sm: 14,
};
export type FontSize = keyof typeof fontSize;
const fontWeight = {
light: 300,
regular: 400,
semiBold: 500,
bold: 700,
};
export type FontWeight = keyof typeof fontWeight;
export const breakPoints = {
small: 576,
medium: 768,
large: 1024,
container: 1240,
xlarge: 1275,
};
export type BreakPoints = typeof breakPoints;
const customizedTheme = {
fontSize,
fontWeight,
breakPoints,
};
type CustomizedTheme = typeof customizedTheme;
export const theme = createMuiTheme({ export const theme = createMuiTheme({
typography: { typography: {
fontFamily: 'inherit', fontFamily: 'inherit',
@ -38,10 +76,18 @@ export const theme = createMuiTheme({
secondary: { main: colors.secondary }, secondary: { main: colors.secondary },
error: { main: colors.red }, error: { main: colors.red },
}, },
...customizedTheme,
}); });
export type Theme = typeof theme; export type Theme = typeof theme;
declare module '@material-ui/core/styles/createMuiTheme' {
/* eslint-disable-next-line @typescript-eslint/no-empty-interface */
interface Theme extends CustomizedTheme {}
/* eslint-disable-next-line @typescript-eslint/no-empty-interface */
interface ThemeOptions extends CustomizedTheme {}
}
declare module '@material-ui/core/styles/createPalette' { declare module '@material-ui/core/styles/createPalette' {
interface CustomPalette { interface CustomPalette {
black: string; black: string;

View File

@ -1,38 +0,0 @@
import { css, Interpolation } from 'emotion';
export const breakpoints = {
small: 576,
medium: 768,
large: 1024,
container: 1240,
xlarge: 1275,
};
type Breakpoints = typeof breakpoints;
type Sizes = keyof Breakpoints;
type MediaQuery<T> = {
[P in keyof T]: (args: Interpolation, key?: P) => string;
};
function constructMQ(breakpoint: Sizes, args: Interpolation): string {
const label = breakpoints[breakpoint];
const prefix = typeof label === 'string' ? '' : 'min-width:';
const suffix = typeof label === 'string' ? '' : 'px';
return css`
@media (${prefix + breakpoints[breakpoint] + suffix}) {
${args};
}
`;
}
const mq: MediaQuery<Breakpoints> = {
small: (args, b = 'small') => constructMQ(b, args),
large: (args, b = 'large') => constructMQ(b, args),
container: (args, b = 'container') => constructMQ(b, args),
medium: (args, b = 'medium') => constructMQ(b, args),
xlarge: (args, b = 'xlarge') => constructMQ(b, args),
};
export default mq;

View File

@ -1,40 +0,0 @@
/**
* CSS to represent truncated text with an ellipsis.
*/
export function ellipsis(width: string | number): {} {
return {
display: 'inline-block',
maxWidth: width,
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
wordWrap: 'normal',
};
}
/**
* Shorthand that accepts up to four values, including null to skip a value, and maps them to their respective directions.
*/
interface SpacingShortHand<type> {
top?: type;
right?: type;
bottom?: type;
left?: type;
}
const positionMap = ['Top', 'Right', 'Bottom', 'Left'];
export function spacing(property: 'padding' | 'margin', ...values: SpacingShortHand<number | string>[]): {} {
const [firstValue = 0, secondValue = 0, thirdValue = 0, fourthValue = 0] = values;
const valuesWithDefaults = [firstValue, secondValue, thirdValue, fourthValue];
let styles = {};
for (let i = 0; i < valuesWithDefaults.length; i += 1) {
if (valuesWithDefaults[i] || valuesWithDefaults[i] === 0) {
styles = {
...styles,
[`${property}${positionMap[i]}`]: valuesWithDefaults[i],
};
}
}
return styles;
}

View File

@ -1,22 +0,0 @@
export const fontSize = {
xxl: '26px',
xl: '24px',
lg: '21px',
md: '18px',
base: '16px',
sm: '14px',
};
export const lineHeight = {
xl: '30px',
sm: '18px',
xs: '2',
xxs: '1.5',
};
export const fontWeight = {
light: 300,
regular: 400,
semiBold: 500,
bold: 700,
};

View File

@ -1,7 +0,0 @@
// Spacings
// -------------------------
export const spacings = {
lg: '30px',
sm: '16px',
};