Skip to content

Instantly share code, notes, and snippets.

View mfix22's full-sized avatar
🖥️
Working on the Dashboard & OSS @ Stripe

Mike Fix mfix22

🖥️
Working on the Dashboard & OSS @ Stripe
View GitHub Profile
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
@mfix22
mfix22 / theme.js
Created May 8, 2019 21:06
Creating `styled-components` theme from CSS variables
export const space = [
'var(--x1)',
'var(--x2)',
'var(--x3)',
'var(--x4)',
'var(--x5)',
'var(--x6)',
];
export const fonts = {
@mfix22
mfix22 / global-styles.js
Created May 8, 2019 20:54
CSS variables in `styled-components`
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;
@mfix22
mfix22 / apollo-theme.js
Last active July 16, 2019 20:29
Hook together apollo Query with styled-components ThemeProvider
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 (
@mfix22
mfix22 / custom-styles-component.js
Created May 6, 2019 18:58
Create a global custom styles component
import { ThemeProvider, createGlobalStyle, css } from 'styled-components'
export const CustomStyles = createGlobalStyle`${props =>
css`
${props.children};
`}`;
// Usage
<ThemeProvider theme={theme}>
{props.children}
@mfix22
mfix22 / system-component.js
Created May 6, 2019 18:31
Basic styled-system component that accesses theme
// 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',
@mfix22
mfix22 / component.js
Created May 6, 2019 18:25
Basic theme-able component using `styled-components`
import styled from 'styled-components'
/*
* Basic themeable component:
*
* → Customers are able to adjust link color
* for this section
*/
export const Container = styled.div`
@mfix22
mfix22 / theme.js
Created May 6, 2019 18:21
Airbnb's style guide translated into a `styled-system` theme
// 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',
@mfix22
mfix22 / index.js
Last active February 2, 2019 07:16
Add Plotly Carbon Theme Snipper
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',
@mfix22
mfix22 / index.js
Last active April 2, 2019 20:30
Replace string component
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>
}