Skip to content

Instantly share code, notes, and snippets.

🏠
Working from home

Michael Fix mfix22

🏠
Working from home
Block or report user

Report or block mfix22

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@mfix22
mfix22 / theme.js
Created May 8, 2019
Creating `styled-components` theme from CSS variables
View theme.js
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
CSS variables in `styled-components`
View global-styles.js
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 May 9, 2019
Hook together apollo Query with styled-components ThemeProvider
View apollo-theme.js
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
Create a global custom styles component
View custom-styles-component.js
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
Basic styled-system component that accesses theme
View system-component.js
// 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
Basic theme-able component using `styled-components`
View component.js
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
Airbnb's style guide translated into a `styled-system` theme
View theme.js
// 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 Feb 2, 2019
Add Plotly Carbon Theme Snipper
View index.js
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 Apr 2, 2019
Replace string component
View index.js
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>
}
View batch.js
const noop = () => {}
function batch (reduce, options = {}) {
const timeout = options.timeout || 1000
const max = options.max || 10
let calls = []
let cancel = noop
let flush = noop
const reset = () => {
clearTimeout(cancel)
You can’t perform that action at this time.