import { createGlobalStyle } from 'styled-components'; import reset from 'styled-reset-advanced'; import { darken, lighten } from 'polished'; const mainBrandColor = '#E38D60'; const lightShades = '#F8FAF9'; const darkAccent = '#B75756'; const darkShades = '#0A0A0A'; export const theme = { // It can be liberally applied to your layout as its main identity. mainBrandColor, // Accent colors can be used to bring attention to design elements // by contrasting with the rest of the palette. lightAccent: '#F2B58A', // Use this color as the background for your dark-on-light designs, // or the text color of an inverted design. lightShades, // Another accent color to consider. Not all colors have to be used - // sometimes a simple color scheme works best. darkAccent, // Use as the text color for dark-on-light designs, // or as the background for inverted designs. darkShades, dangerColor: '#f44336', primaryColor: mainBrandColor, borderColor: '#eeeeee', backgroundColor: '#FFFFFF', backgroundInputColor: lightShades, backgroundInputColorDark: darkShades, fontSize: 16, fontSizeSmall: 14, fontSizeExtraSmall: 12, fontSizeMedium: 18, fontSizeLarge: 22, textColor: '#707070', textColorInverse: lightShades, textColorLite: '#8B8989', textColorDark: '#282828', menuTintColor: darkAccent, primaryFontFamily: "'Muli', sans-serif", secondaryFontFamily: "'Muli', sans-serif", boxShadow: 'rgba(0,0,0,0.08) 0px 7px 18px', }; const GlobalStyle = createGlobalStyle` ${reset}; body { font-family: ${theme.secondaryFontFamily}; color: ${theme.textColor}; letter-spacing: 0.03rem !important; font-size: 17px; line-height: 19px; } .section { padding: 3rem 1rem; } .title { font-family: ${theme.primaryFontFamily}; } .button { font-family: ${theme.primaryFontFamily}; } p { line-height: 1.5rem; } p, .title, .box { color: ${theme.textColor} !important; } .subtitle { color: ${lighten(0.06, theme.textColor)} !important; } .button.is-primary { background-color: ${theme.mainBrandColor}; transition: background-color 0.2s ease; :hover { background-color: ${darken(0.06, theme.mainBrandColor)}; } } .button.is-secondary { background-color: ${theme.lightAccent}; transition: background-color 0.2s ease; color: #ffffff; :hover { background-color: ${darken(0.06, theme.lightAccent)}; } } .button.is-link { background-color: ${theme.darkAccent}; transition: background-color 0.2s ease; :hover { background-color: ${darken(0.06, theme.darkAccent)}; } } .button, .input, .card { box-shadow: ${theme.boxShadow}; } .has-text-warning { color: ${theme.lightAccent} !important; } .notification { background-color: #EEEEEE; } h1, h2, h3, h4, h5, h6 { color: ${theme.textColorDark}; } .image.is-5by4 { padding-top: 0; } .markdown-container { h1, h2, h3, h4, h5, h6 { margin-top: 1.5rem; margin-bottom: 1.5rem; font-weight: bold; } p { margin-bottom: 1rem; } } .help.is-danger { color: #ff3860 !important; } input, textarea { -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } `; export default GlobalStyle;