Skip to content

Instantly share code, notes, and snippets.

@kjbrum

kjbrum/base.js

Created May 19, 2022 03:41
Show Gist options
  • Save kjbrum/5f5ffbeecd1bdb437fa373980b81b0a2 to your computer and use it in GitHub Desktop.
Save kjbrum/5f5ffbeecd1bdb437fa373980b81b0a2 to your computer and use it in GitHub Desktop.
Download ZIP
Basic styled-system/styled-components setup.
Raw
base.js
import React, { forwardRef } from 'react'
import styled from 'styled-components'
import css, { get } from '@styled-system/css'
import {
system,
compose,
space,
color,
typography,
layout,
flexbox,
grid,
background,
border,
position,
shadow,
} from 'styled-system'
const base = props => css(props.__css)
const sx = props => css(props.sx)
const variant = ({ theme, variant, tx = '' }) =>
css(get(theme, 'variants.' + tx + '.' + variant))(theme)
export const Box = styled.div(
css({
// boxSizing: 'border-box',
// minWidth: 0,
// margin: 0,
// fontFamily: 'sans',
// color: 'gray.900',
}),
base,
variant,
sx,
props => props.css,
system({
textTransform: true,
textDecoration: true,
transform: true,
transition: true,
visibility: true,
pointerEvent: true,
}),
compose(
space,
color,
typography,
layout,
flexbox,
grid,
background,
border,
position,
shadow
)
)
export const Flex = styled(Box)({
display: 'flex',
})
export const Grid = forwardRef((props, ref) => (
<Box
ref={ref}
tx="grid"
__css={css({
display: 'grid',
})}
{...props}
/>
))
export const Text = forwardRef((props, ref) => (
<Box ref={ref} as="p" tx="texts" {...props} />
))
export const Heading = forwardRef((props, ref) => (
<Box ref={ref} as="h2" tx="headings" variant="h2" {...props} />
))
Raw
theme.js
import { fluidRange } from 'polished'
export const theme = {
breakpoints: [
'30rem', // xs / 480px
'40rem', // sm / 640px
'48rem', // md / 768px
'64rem', // lg / 1024px
'80rem', // xl / 1280px
],
colors: {
transparent: 'transparent',
black: '#222222',
white: '#ffffff',
gray: {
100: '#f7fafc',
200: '#edf2f7',
300: '#e2e8f0',
400: '#cbd5e0',
500: '#a0aec0',
600: '#718096',
700: '#4a5568',
800: '#2d3748',
900: '#1a202c',
},
red: {
100: '#fff5f5',
200: '#fed7d7',
300: '#feb2b2',
400: '#fc8181',
500: '#f56565',
600: '#e53e3e',
700: '#c53030',
800: '#9b2c2c',
900: '#742a2a',
},
orange: {
100: '#fffaf0',
200: '#feebc8',
300: '#fbd38d',
400: '#f6ad55',
500: '#ed8936',
600: '#dd6b20',
700: '#c05621',
800: '#9c4221',
900: '#7b341e',
},
yellow: {
100: '#fffff0',
200: '#fefcbf',
300: '#faf089',
400: '#f6e05e',
500: '#ecc94b',
600: '#d69e2e',
700: '#b7791f',
800: '#975a16',
900: '#744210',
},
green: {
100: '#f0fff4',
200: '#c6f6d5',
300: '#9ae6b4',
400: '#68d391',
500: '#48bb78',
600: '#38a169',
700: '#2f855a',
800: '#276749',
900: '#22543d',
},
teal: {
100: '#e6fffa',
200: '#b2f5ea',
300: '#81e6d9',
400: '#4fd1c5',
500: '#38b2ac',
600: '#319795',
700: '#2c7a7b',
800: '#285e61',
900: '#234e52',
},
blue: {
100: '#ebf8ff',
200: '#bee3f8',
300: '#90cdf4',
400: '#63b3ed',
500: '#4299e1',
600: '#3182ce',
700: '#2b6cb0',
800: '#2c5282',
900: '#2a4365',
},
indigo: {
100: '#ebf4ff',
200: '#c3dafe',
300: '#a3bffa',
400: '#7f9cf5',
500: '#667eea',
600: '#5a67d8',
700: '#4c51bf',
800: '#434190',
900: '#3c366b',
},
purple: {
100: '#faf5ff',
200: '#e9d8fd',
300: '#d6bcfa',
400: '#b794f4',
500: '#9f7aea',
600: '#805ad5',
700: '#6b46c1',
800: '#553c9a',
900: '#44337a',
},
pink: {
100: '#fff5f7',
200: '#fed7e2',
300: '#fbb6ce',
400: '#f687b3',
500: '#ed64a6',
600: '#d53f8c',
700: '#b83280',
800: '#97266d',
900: '#702459',
},
},
space: {
auto: 'auto',
px: '1px',
em: '1em',
0: '0',
1: '0.25rem',
2: '0.5rem',
3: '0.75rem',
4: '1rem',
5: '1.25rem',
6: '1.5rem',
8: '2rem',
10: '2.5rem',
12: '3rem',
16: '4rem',
20: '5rem',
24: '6rem',
32: '8rem',
40: '10rem',
48: '12rem',
56: '14rem',
64: '16rem',
80: '20rem',
96: '24rem',
128: '32rem',
160: '40rem',
192: '48rem',
224: '56rem',
256: '64rem',
screenW: '100vw',
screenH: '100vh',
full: '100%',
},
sizes: {
auto: 'auto',
px: '1px',
em: '1em',
0: '0',
1: '0.25rem',
2: '0.5rem',
3: '0.75rem',
4: '1rem',
5: '1.25rem',
6: '1.5rem',
8: '2rem',
10: '2.5rem',
12: '3rem',
16: '4rem',
20: '5rem',
24: '6rem',
32: '8rem',
40: '10rem',
48: '12rem',
56: '14rem',
64: '16rem',
80: '20rem',
96: '24rem',
128: '32rem',
160: '40rem',
192: '48rem',
224: '56rem',
256: '64rem',
screenW: '100vw',
screenH: '100vh',
full: '100%',
},
fonts: {
sans:
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
serif: 'Georgia, Cambria, "Times New Roman", Times, serif',
mono:
'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
},
fontSizes: {
xxs: '0.625rem',
xs: '0.75rem',
sm: '0.875rem',
base: '1rem',
lg: '1.125rem',
xl: '1.25rem',
'2xl': '1.5rem',
'3xl': '1.875rem',
'4xl': '2.25rem',
'5xl': '3rem',
'6xl': '4rem',
},
fontWeights: {
hairline: '100',
thin: '200',
light: '300',
normal: '400',
medium: '500',
semibold: '600',
bold: '700',
extrabold: '800',
black: '900',
},
lineHeights: {
none: '1',
tight: '1.25',
snug: '1.375',
normal: '1.5',
relaxed: '1.625',
loose: '2',
},
letterSpacings: {
tighter: '-0.05em',
tight: '-0.025em',
normal: '0',
wide: '0.025em',
wider: '0.05em',
widest: '0.1em',
},
borders: {
none: '0',
1: '1px solid',
2: '2px solid',
4: '4px solid',
8: '8px solid',
},
borderWidths: {
0: '0px',
1: '1px',
2: '2px',
4: '4px',
8: '8px',
},
radii: {
none: '0',
3: '3px',
5: '5px',
8: '8px',
16: '16px',
100: '100%',
full: '9999px',
},
shadows: {
none: 'none',
default:
'0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
md:
'0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
lg:
'0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
xl:
'0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
},
zIndices: {
auto: 'auto',
bottom: '-9999',
'0': '0',
'10': '10',
'20': '20',
'30': '30',
'40': '40',
'50': '50',
top: '9999',
},
}
// Breakpoint aliases
theme.breakpoints.xs = theme.breakpoints[0]
theme.breakpoints.sm = theme.breakpoints[1]
theme.breakpoints.md = theme.breakpoints[2]
theme.breakpoints.lg = theme.breakpoints[3]
theme.breakpoints.xl = theme.breakpoints[4]
// Sizes aliases
theme.sizes = {
...theme.space,
xs: theme.breakpoints.xs,
sm: theme.breakpoints.sm,
md: theme.breakpoints.md,
lg: theme.breakpoints.lg,
xl: theme.breakpoints.xl,
xxl: theme.breakpoints.xxl,
xxxl: theme.breakpoints.xxxl,
}
const fluidFont = (min, max) =>
fluidRange(
{
prop: 'font-size',
fromSize: theme.fontSizes[min],
toSize: theme.fontSizes[max],
},
theme.breakpoints['xs'],
theme.breakpoints['xl']
)
theme.variants = {
flex: {},
grid: {},
texts: {},
headings: {
display1: {
...fluidFont('2xl', '6xl'),
lineHeight: 'none',
},
display2: {
...fluidFont('2xl', '5xl'),
lineHeight: 'none',
},
h1: {
...fluidFont('xl', '4xl'),
lineHeight: 'none',
},
h2: {
...fluidFont('xl', '3xl'),
lineHeight: 'tight',
},
h3: {
...fluidFont('xl', '2xl'),
lineHeight: 'tight',
},
h4: {
...fluidFont('base', 'xl'),
lineHeight: 'tight',
},
h5: {
fontSize: 'base',
},
h6: {
fontSize: 'xs',
},
},
}
export default theme
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment