mirror of
https://github.com/SomboChea/ui
synced 2024-12-25 05:34:26 +07:00
Refactor: move styles utils to theme (#363)
This commit is contained in:
parent
172e470780
commit
fd99be6818
@ -11,20 +11,20 @@ import Footer from '../components/Footer';
|
||||
import Box from '../muiComponents/Box';
|
||||
import Loading from '../components/Loading';
|
||||
import StyleBaseline from '../design-tokens/StyleBaseline';
|
||||
import { breakpoints } from '../utils/styles/media';
|
||||
import { Theme } from '../design-tokens/theme';
|
||||
|
||||
import AppContextProvider from './AppContextProvider';
|
||||
import AppRoute, { history } from './AppRoute';
|
||||
|
||||
const StyledBoxContent = styled(Box)({
|
||||
const StyledBoxContent = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
|
||||
padding: 15,
|
||||
[`@media screen and (min-width: ${breakpoints.container}px)`]: {
|
||||
maxWidth: breakpoints.container,
|
||||
[`@media screen and (min-width: ${theme && theme.breakPoints.container}px)`]: {
|
||||
maxWidth: theme && theme.breakPoints.container,
|
||||
width: '100%',
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
},
|
||||
});
|
||||
}));
|
||||
|
||||
/* eslint-disable react/jsx-no-bind */
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
|
@ -1,14 +1,14 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { fontWeight } from '../../utils/styles/sizes';
|
||||
import ListItem from '../../muiComponents/ListItem';
|
||||
import Text from '../../muiComponents/Text';
|
||||
import ListItemText from '../../muiComponents/ListItemText';
|
||||
import { Theme } from '../../design-tokens/theme';
|
||||
|
||||
export const StyledText = styled(Text)({
|
||||
fontWeight: fontWeight.bold,
|
||||
export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
|
||||
fontWeight: props.theme && props.theme.fontWeight.bold,
|
||||
textTransform: 'capitalize',
|
||||
});
|
||||
}));
|
||||
|
||||
export const AuthorListItem = styled(ListItem)({
|
||||
padding: 0,
|
||||
|
@ -4,13 +4,13 @@ import Autosuggest, { SuggestionSelectedEventData, InputProps, ChangeEvent } fro
|
||||
import match from 'autosuggest-highlight/match';
|
||||
import parse from 'autosuggest-highlight/parse';
|
||||
|
||||
import { fontWeight } from '../../utils/styles/sizes';
|
||||
import MenuItem from '../../muiComponents/MenuItem';
|
||||
import { Theme } from '../../design-tokens/theme';
|
||||
|
||||
import { Wrapper, InputField, SuggestionContainer } from './styles';
|
||||
|
||||
const StyledAnchor = styled('a')<{ fw: number }>(props => ({
|
||||
fontWeight: props.fw,
|
||||
const StyledAnchor = styled('a')<{ highlight: boolean; theme?: Theme }>(props => ({
|
||||
fontWeight: props.theme && props.highlight ? props.theme.fontWeight.semiBold : props.theme.fontWeight.light,
|
||||
}));
|
||||
|
||||
const StyledMenuItem = styled(MenuItem)({
|
||||
@ -64,9 +64,8 @@ const renderSuggestion = (suggestion, { query, isHighlighted }): JSX.Element =>
|
||||
<StyledMenuItem component="div" selected={isHighlighted}>
|
||||
<div>
|
||||
{parts.map((part, index) => {
|
||||
const fw = part.highlight ? fontWeight.semiBold : fontWeight.light;
|
||||
return (
|
||||
<StyledAnchor fw={fw} key={String(index)}>
|
||||
<StyledAnchor highlight={part.highlight} key={String(index)}>
|
||||
{part.text}
|
||||
</StyledAnchor>
|
||||
);
|
||||
|
@ -1,18 +1,18 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { fontWeight } from '../../utils/styles/sizes';
|
||||
import Text from '../../muiComponents/Text';
|
||||
import Card from '../../muiComponents/Card';
|
||||
import Chip from '../../muiComponents/Chip';
|
||||
import { Theme } from '../../design-tokens/theme';
|
||||
|
||||
export const CardWrap = styled(Card)({
|
||||
margin: '0 0 16px',
|
||||
});
|
||||
|
||||
export const StyledText = styled(Text)({
|
||||
fontWeight: fontWeight.bold,
|
||||
export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
|
||||
fontWeight: props.theme && props.theme.fontWeight.bold,
|
||||
textTransform: 'capitalize',
|
||||
});
|
||||
}));
|
||||
|
||||
export const Tags = styled('div')({
|
||||
display: 'flex',
|
||||
|
@ -1,6 +1,5 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { fontWeight } from '../../utils/styles/sizes';
|
||||
import Text from '../../muiComponents/Text';
|
||||
import FloatingActionButton from '../../muiComponents/FloatingActionButton';
|
||||
import { Theme } from '../../design-tokens/theme';
|
||||
@ -20,11 +19,11 @@ export const Content = styled('div')({
|
||||
},
|
||||
});
|
||||
|
||||
export const StyledText = styled(Text)({
|
||||
fontWeight: fontWeight.bold,
|
||||
export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
|
||||
fontWeight: props.theme && props.theme.fontWeight.bold,
|
||||
marginBottom: '10px',
|
||||
textTransform: 'capitalize',
|
||||
});
|
||||
}));
|
||||
|
||||
export const Fab = styled(FloatingActionButton)<{ theme?: Theme }>(props => ({
|
||||
backgroundColor: props.theme && props.theme.palette.primary.main,
|
||||
|
@ -1,16 +1,15 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { Theme } from '../../design-tokens/theme';
|
||||
import { fontWeight } from '../../utils/styles/sizes';
|
||||
import ListItem from '../../muiComponents/ListItem';
|
||||
import Text from '../../muiComponents/Text';
|
||||
import FloatingActionButton from '../../muiComponents/FloatingActionButton';
|
||||
import Chip from '../../muiComponents/Chip';
|
||||
import { Theme } from '../../design-tokens/theme';
|
||||
|
||||
export const StyledText = styled(Text)({
|
||||
fontWeight: fontWeight.bold,
|
||||
export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
|
||||
fontWeight: props.theme && props.theme.fontWeight.bold,
|
||||
textTransform: 'capitalize',
|
||||
});
|
||||
}));
|
||||
|
||||
export const DistListItem = styled(ListItem)({
|
||||
paddingLeft: 0,
|
||||
|
@ -1,13 +1,13 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { fontWeight } from '../../utils/styles/sizes';
|
||||
import ListItem from '../../muiComponents/ListItem';
|
||||
import Text from '../../muiComponents/Text';
|
||||
import { Theme } from '../../design-tokens/theme';
|
||||
|
||||
export const StyledText = styled(Text)({
|
||||
fontWeight: fontWeight.bold,
|
||||
export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
|
||||
fontWeight: props.theme && props.theme.fontWeight.bold,
|
||||
textTransform: 'capitalize',
|
||||
});
|
||||
}));
|
||||
|
||||
export const EngineListItem = styled(ListItem)({
|
||||
paddingLeft: 0,
|
||||
|
@ -1,6 +1,5 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { breakpoints } from '../../utils/styles/media';
|
||||
import Icon from '../Icon/Icon';
|
||||
import { Theme } from '../../design-tokens/theme';
|
||||
|
||||
@ -12,29 +11,29 @@ export const Wrapper = styled('div')<{ theme?: Theme }>(props => ({
|
||||
padding: '20px',
|
||||
}));
|
||||
|
||||
export const Inner = styled('div')({
|
||||
export const Inner = styled('div')<{ theme?: Theme }>(({ theme }) => ({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-end',
|
||||
width: '100%',
|
||||
[`@media (min-width: ${breakpoints.medium}px)`]: {
|
||||
[`@media (min-width: ${theme && theme.breakPoints.medium}px)`]: {
|
||||
minWidth: 400,
|
||||
maxWidth: 800,
|
||||
margin: 'auto',
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
[`@media (min-width: ${breakpoints.large}px)`]: {
|
||||
[`@media (min-width: ${theme && theme.breakPoints.large}px)`]: {
|
||||
maxWidth: 1240,
|
||||
},
|
||||
});
|
||||
}));
|
||||
|
||||
export const Left = styled('div')({
|
||||
export const Left = styled('div')<{ theme?: Theme }>(({ theme }) => ({
|
||||
alignItems: 'center',
|
||||
display: 'none',
|
||||
[`@media (min-width: ${breakpoints.medium}px)`]: {
|
||||
[`@media (min-width: ${theme && theme.breakPoints.medium}px)`]: {
|
||||
display: 'flex',
|
||||
},
|
||||
});
|
||||
}));
|
||||
|
||||
export const Right = styled(Left)({
|
||||
display: 'flex',
|
||||
|
@ -2,7 +2,6 @@ import styled from '@emotion/styled';
|
||||
import { css } from '@emotion/core';
|
||||
|
||||
import { Theme } from '../../design-tokens/theme';
|
||||
import { breakpoints } from '../../utils/styles/media';
|
||||
import IconButton from '../../muiComponents/IconButton';
|
||||
import AppBar from '../../muiComponents/AppBar';
|
||||
import Toolbar from '../../muiComponents/Toolbar';
|
||||
@ -54,12 +53,12 @@ export const SearchWrapper = styled('div')({
|
||||
width: '100%',
|
||||
});
|
||||
|
||||
export const NavBar = styled(AppBar)<{ theme?: Theme }>(props => ({
|
||||
backgroundColor: props.theme && props.theme.palette.primary.main,
|
||||
export const NavBar = styled(AppBar)<{ theme?: Theme }>(({ theme }) => ({
|
||||
backgroundColor: theme && theme.palette.primary.main,
|
||||
minHeight: 60,
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
[`@media (min-width: ${breakpoints.medium}px)`]: css`
|
||||
[`@media (min-width: ${theme && theme.breakPoints.medium}px)`]: css`
|
||||
${SearchWrapper} {
|
||||
display: flex;
|
||||
}
|
||||
@ -70,12 +69,12 @@ export const NavBar = styled(AppBar)<{ theme?: Theme }>(props => ({
|
||||
display: none;
|
||||
}
|
||||
`,
|
||||
[`@media (min-width: ${breakpoints.large}px)`]: css`
|
||||
[`@media (min-width: ${theme && theme.breakPoints.large}px)`]: css`
|
||||
${InnerNavBar} {
|
||||
padding: 0 20px;
|
||||
}
|
||||
`,
|
||||
[`@media (min-width: ${breakpoints.xlarge}px)`]: css`
|
||||
[`@media (min-width: ${theme && theme.breakPoints.xlarge}px)`]: css`
|
||||
${InnerNavBar} {
|
||||
max-width: 1240px;
|
||||
width: 100%;
|
||||
|
@ -2,16 +2,16 @@ import React, { useContext } from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { DetailContext } from '../../pages/Version';
|
||||
import { fontWeight } from '../../utils/styles/sizes';
|
||||
import Text from '../../muiComponents/Text';
|
||||
import List from '../../muiComponents/List';
|
||||
import { Theme } from '../../design-tokens/theme';
|
||||
|
||||
import InstallListItem, { DependencyManager } from './InstallListItem';
|
||||
|
||||
const StyledText = styled(Text)({
|
||||
fontWeight: fontWeight.bold,
|
||||
const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
|
||||
fontWeight: props.theme && props.theme.fontWeight.bold,
|
||||
textTransform: 'capitalize',
|
||||
});
|
||||
}));
|
||||
|
||||
const Install: React.FC = () => {
|
||||
const detailContext = useContext(DetailContext);
|
||||
|
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { fontWeight } from '../../utils/styles/sizes';
|
||||
import { Theme } from '../../design-tokens/theme';
|
||||
|
||||
interface Props {
|
||||
text: string;
|
||||
@ -14,8 +14,8 @@ interface WrapperProps {
|
||||
weight: string;
|
||||
}
|
||||
|
||||
const Wrapper = styled('div')<WrapperProps>(props => ({
|
||||
fontWeight: fontWeight[props.weight],
|
||||
const Wrapper = styled('div')<WrapperProps & { theme?: Theme }>(props => ({
|
||||
fontWeight: props.theme && props.theme.fontWeight[props.weight],
|
||||
textTransform: props.capitalize ? 'capitalize' : 'none',
|
||||
}));
|
||||
|
||||
|
@ -5,7 +5,6 @@ import { useHistory } from 'react-router-dom';
|
||||
import Box from '../../muiComponents/Box';
|
||||
import Button from '../../muiComponents/Button';
|
||||
import Heading from '../../muiComponents/Heading';
|
||||
import { spacings } from '../../utils/styles/spacings';
|
||||
import { Theme } from '../../design-tokens/theme';
|
||||
|
||||
import PackageImg from './img/package.svg';
|
||||
@ -21,7 +20,7 @@ const EmptyPackage = styled('img')({
|
||||
|
||||
const StyledHeading = styled(Heading)<{ theme?: Theme }>(props => ({
|
||||
color: props.theme && props.theme.palette.primary.main,
|
||||
marginBottom: spacings.sm,
|
||||
marginBottom: 16,
|
||||
}));
|
||||
|
||||
const NotFound: React.FC = () => {
|
||||
|
@ -1,10 +1,8 @@
|
||||
import styled from '@emotion/styled';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import { breakpoints } from '../../utils/styles/media';
|
||||
import Ico from '../Icon';
|
||||
import Label from '../Label';
|
||||
import { fontWeight } from '../../utils/styles/sizes';
|
||||
import { default as MuiIconButton } from '../../muiComponents/IconButton';
|
||||
import { default as Photo } from '../../muiComponents/Avatar';
|
||||
import List from '../../muiComponents/List';
|
||||
@ -13,18 +11,18 @@ import Grid from '../../muiComponents/Grid';
|
||||
import ListItemText from '../../muiComponents/ListItemText';
|
||||
import { Theme } from '../../design-tokens/theme';
|
||||
|
||||
export const OverviewItem = styled('span')<{ theme?: Theme }>(props => ({
|
||||
export const OverviewItem = styled('span')<{ theme?: Theme }>(({ theme }) => ({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
margin: '0 0 0 16px',
|
||||
color: props.theme && props.theme.palette.greyLight2,
|
||||
color: theme && theme.palette.greyLight2,
|
||||
fontSize: 12,
|
||||
[`@media (max-width: ${breakpoints.medium}px)`]: {
|
||||
[`@media (max-width: ${theme && theme.breakPoints.medium}px)`]: {
|
||||
':nth-of-type(3)': {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
[`@media (max-width: ${breakpoints.small}px)`]: {
|
||||
[`@media (max-width: ${theme && theme.breakPoints.small}px)`]: {
|
||||
':nth-of-type(4)': {
|
||||
display: 'none',
|
||||
},
|
||||
@ -43,7 +41,7 @@ export const Published = styled('span')<{ theme?: Theme }>(props => ({
|
||||
|
||||
export const Text = styled(Label)<{ theme?: Theme }>(props => ({
|
||||
fontSize: '12px',
|
||||
fontWeight: fontWeight.semiBold,
|
||||
fontWeight: props.theme && props.theme.fontWeight.semiBold,
|
||||
color: props.theme && props.theme.palette.greyLight2,
|
||||
}));
|
||||
|
||||
@ -68,17 +66,17 @@ export const WrapperLink = styled(Link)({
|
||||
textDecoration: 'none',
|
||||
});
|
||||
|
||||
export const PackageTitle = styled('span')<{ theme?: Theme }>(props => ({
|
||||
fontWeight: 600,
|
||||
export const PackageTitle = styled('span')<{ theme?: Theme }>(({ theme }) => ({
|
||||
fontWeight: theme && theme.fontWeight.bold,
|
||||
fontSize: 20,
|
||||
display: 'block',
|
||||
marginBottom: 12,
|
||||
color: props.theme && props.theme.palette.eclipse,
|
||||
color: theme && theme.palette.eclipse,
|
||||
cursor: 'pointer',
|
||||
':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,
|
||||
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,
|
||||
marginBottom: 12,
|
||||
display: 'block',
|
||||
[`@media (max-width: ${breakpoints.medium}px)`]: {
|
||||
[`@media (max-width: ${theme && theme.breakPoints.medium}px)`]: {
|
||||
display: 'none',
|
||||
},
|
||||
});
|
||||
}));
|
||||
|
||||
export const PackageListItemText = styled(ListItemText)({
|
||||
paddingRight: 0,
|
||||
|
@ -1,4 +1,5 @@
|
||||
import React, { Fragment, ReactNode } from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import Package from '../Package';
|
||||
import Help from '../Help';
|
||||
@ -6,7 +7,10 @@ import { formatLicense } from '../../utils/package';
|
||||
import { PackageInterface } from '../Package/Package';
|
||||
import Divider from '../../muiComponents/Divider';
|
||||
|
||||
import * as classes from './styles';
|
||||
const PkgContainer = styled('div')({
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
});
|
||||
|
||||
interface Props {
|
||||
packages: PackageInterface[];
|
||||
@ -32,7 +36,7 @@ export const PackageList: React.FC<Props> = ({ packages }) => {
|
||||
|
||||
return (
|
||||
<div className={'package-list-items'}>
|
||||
<div className={classes.pkgContainer}>{hasPackages() ? renderPackages() : <Help />}</div>
|
||||
<PkgContainer>{hasPackages() ? renderPackages() : <Help />}</PkgContainer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
@ -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}
|
||||
}
|
||||
`;
|
@ -1,6 +1,5 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { fontSize } from '../../utils/styles/sizes';
|
||||
import DialogTitle from '../../muiComponents/DialogTitle';
|
||||
import DialogContent from '../../muiComponents/DialogContent';
|
||||
import { Theme } from '../../design-tokens/theme';
|
||||
@ -8,7 +7,7 @@ import { Theme } from '../../design-tokens/theme';
|
||||
export const Title = styled(DialogTitle)<{ theme?: Theme }>(props => ({
|
||||
backgroundColor: props.theme && props.theme.palette.primary.main,
|
||||
color: props.theme && props.theme.palette.white,
|
||||
fontSize: fontSize.lg,
|
||||
fontSize: props.theme && props.theme.fontSize.lg,
|
||||
}));
|
||||
|
||||
export const Content = styled(DialogContent)({
|
||||
|
@ -10,14 +10,13 @@ import CopyToClipBoard from '../CopyToClipBoard';
|
||||
import List from '../../muiComponents/List';
|
||||
import { DetailContext } from '../../pages/Version';
|
||||
import { Theme } from '../../design-tokens/theme';
|
||||
import { fontWeight } from '../../utils/styles/sizes';
|
||||
|
||||
import git from './img/git.png';
|
||||
|
||||
const StyledText = styled(Text)({
|
||||
fontWeight: fontWeight.bold,
|
||||
const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
|
||||
fontWeight: props.theme && props.theme.fontWeight.bold,
|
||||
textTransform: 'capitalize',
|
||||
});
|
||||
}));
|
||||
|
||||
const GithubLink = styled('a')<{ theme?: Theme }>(props => ({
|
||||
color: props.theme && props.theme.palette.primary.main,
|
||||
|
@ -2,11 +2,11 @@ import styled from '@emotion/styled';
|
||||
|
||||
import Text from '../../muiComponents/Text';
|
||||
import { default as MuiListItemText } from '../../muiComponents/ListItemText';
|
||||
import { fontWeight } from '../../utils/styles/sizes';
|
||||
import { Theme } from '../../design-tokens/theme';
|
||||
|
||||
export const StyledText = styled(Text)({
|
||||
fontWeight: fontWeight.bold,
|
||||
});
|
||||
export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
|
||||
fontWeight: props.theme && props.theme.fontWeight.bold,
|
||||
}));
|
||||
|
||||
export const Spacer = styled('div')({
|
||||
flex: '1 1 auto',
|
||||
|
@ -1,13 +1,13 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { fontWeight } from '../../utils/styles/sizes';
|
||||
import Text from '../../muiComponents/Text';
|
||||
import { default as MuiListItemText } from '../../muiComponents/ListItemText';
|
||||
import { Theme } from '../../design-tokens/theme';
|
||||
import Link from '../Link';
|
||||
|
||||
export const StyledText = styled(Text)({
|
||||
fontWeight: fontWeight.bold,
|
||||
});
|
||||
export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
|
||||
fontWeight: props.theme && props.theme.fontWeight.bold,
|
||||
}));
|
||||
|
||||
export const Spacer = styled('div')({
|
||||
flex: '1 1 auto',
|
||||
|
@ -1,17 +1,16 @@
|
||||
import { makeStyles } from '@material-ui/styles';
|
||||
import React from 'react';
|
||||
|
||||
import { fontWeight } from '../utils/styles/sizes';
|
||||
import { breakpoints } from '../utils/styles/media';
|
||||
import { Theme } from './theme';
|
||||
|
||||
const resetStyles = makeStyles(() => ({
|
||||
const resetStyles = makeStyles(({ theme }: { theme?: Theme }) => ({
|
||||
'@global': {
|
||||
// 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': {
|
||||
fontFamily: '"Roboto", Helvetica Neue, Arial, sans-serif',
|
||||
},
|
||||
strong: {
|
||||
fontWeight: fontWeight.semiBold,
|
||||
fontWeight: theme && theme.fontWeight.semiBold,
|
||||
},
|
||||
'html, body, #root': {
|
||||
height: '100%',
|
||||
@ -25,8 +24,8 @@ const resetStyles = makeStyles(() => ({
|
||||
padding: 15,
|
||||
flex: 1,
|
||||
|
||||
[`@media screen and (min-width: ${breakpoints.container}px)`]: {
|
||||
maxWidth: breakpoints.container,
|
||||
[`@media screen and (min-width: ${theme && theme.breakPoints.container}px)`]: {
|
||||
maxWidth: theme && theme.breakPoints.container,
|
||||
width: '100%',
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
|
@ -28,6 +28,44 @@ const 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({
|
||||
typography: {
|
||||
fontFamily: 'inherit',
|
||||
@ -38,10 +76,18 @@ export const theme = createMuiTheme({
|
||||
secondary: { main: colors.secondary },
|
||||
error: { main: colors.red },
|
||||
},
|
||||
...customizedTheme,
|
||||
});
|
||||
|
||||
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' {
|
||||
interface CustomPalette {
|
||||
black: string;
|
||||
|
@ -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;
|
@ -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;
|
||||
}
|
@ -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,
|
||||
};
|
@ -1,7 +0,0 @@
|
||||
// Spacings
|
||||
// -------------------------
|
||||
|
||||
export const spacings = {
|
||||
lg: '30px',
|
||||
sm: '16px',
|
||||
};
|
Loading…
Reference in New Issue
Block a user