This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Request method: POST | |
content-type: application/json | |
Expect: | |
User-Agent: GitHub-Hookshot/175c648 | |
X-GitHub-Delivery: 073e7680-f835-11e9-895f-74af0ea0e3c8 | |
X-GitHub-Event: issue_comment | |
X-Hub-Signature: sha1=ecbcceb5ab92487a80a59837f0051b9b28b659e1 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export const space = [ | |
'var(--x1)', | |
'var(--x2)', | |
'var(--x3)', | |
'var(--x4)', | |
'var(--x5)', | |
'var(--x6)', | |
]; | |
export const fonts = { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import {createGlobalStyle} from 'styled-components'; | |
// This becomes the source of truth for the application | |
export default const GlobalStyle = createGlobalStyle` | |
:root { | |
--primary: cyan; | |
--text: #506784; | |
--borders: #EBF0F8; | |
--page-background: transparent; | |
--nav-background: white; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { merge } from 'lodash' | |
import {ThemeProvider} from 'styled-components' | |
import { theme, CustomStyles } from './styled' // our design system folder | |
// This component wraps the Query component from `apollo-client` | |
import { GetTheme } from './containers' | |
export default function App(props) { | |
return ( |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { ThemeProvider, createGlobalStyle, css } from 'styled-components' | |
export const CustomStyles = createGlobalStyle`${props => | |
css` | |
${props.children}; | |
`}`; | |
// Usage | |
<ThemeProvider theme={theme}> | |
{props.children} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// No need to import `react` or `styled-components`! | |
import system from 'system-components' | |
export const Heading = system( | |
{ | |
is: 'h1', | |
// primary, medium, text, etc. are all theme variables! | |
fontFamily: 'primary', | |
fontSize: 5, | |
fontWeight: 'medium', |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import styled from 'styled-components' | |
/* | |
* Basic themeable component: | |
* | |
* → Customers are able to adjust link color | |
* for this section | |
*/ | |
export const Container = styled.div` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// You can adjust these according to your use case | |
export const breakpoints = ['32em', '48em', '64em', '80em'] | |
export const colors = { | |
rausch: '#FF5A5F', | |
babu: '#00A699', | |
arches: '#FC642D', | |
hof: '#4848484', | |
foggy: '#767676', |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
localStorage.setItem( | |
'CARBON_THEMES', | |
JSON.stringify( | |
JSON.parse(localStorage.getItem('CARBON_THEMES') || '[]').concat({ | |
id: 'theme:plotly', | |
name: 'Plotly', | |
highlights: { | |
background: '#2a3f5f', | |
text: 'rgba(223,228,229,1)', | |
variable: '#119DFF', |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export function replaceWithComponent(regex, mapping, s) { | |
const parts = s.split(regex); | |
for (let i = 1; i < parts.length; i += 2) { | |
parts[i] = mapping(parts[i]); | |
} | |
return <Fragment>{parts}</Fragment> | |
} |
NewerOlder