-
-
Save FallOutChonny/a8099e3925a090d89eb003831207f860 to your computer and use it in GitHub Desktop.
Revisions
-
kjbrum revised this gist
Aug 28, 2020 . 1 changed file with 2 additions and 1 deletion.There are no files selected for viewing
This file contains hidden or 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 charactersOriginal file line number Diff line number Diff line change @@ -396,5 +396,6 @@ theme.variants = { switch: {}, slider: {}, }, } export default theme -
Aug 26, 2020 . 1 changed file with 3 additions and 10 deletions.There are no files selected for viewing
This file contains hidden or 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 charactersOriginal file line number Diff line number Diff line change @@ -62,16 +62,9 @@ export const Box = styled.div( ) ) export const Flex = styled(Box)({ display: 'flex', }) export const Grid = forwardRef((props, ref) => ( <Box -
Aug 25, 2020 . 1 changed file with 26 additions and 30 deletions.There are no files selected for viewing
This file contains hidden or 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 charactersOriginal file line number Diff line number Diff line change @@ -30,11 +30,11 @@ const variant = ({ theme, variant, tx = '' }) => export const Box = styled.div( css({ // boxSizing: 'border-box', // minWidth: 0, // margin: 0, // fontFamily: 'sans', // color: 'gray.900', }), base, variant, @@ -62,31 +62,36 @@ export const Box = styled.div( ) ) export const Flex = forwardRef((props, ref) => ( <Box ref={ref} tx="flex" __css={{ display: 'flex', }} {...props} /> )) 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} /> )) export const Link = forwardRef((props, ref) => ( <Box ref={ref} as="a" tx="links" {...props} /> )) @@ -191,16 +196,7 @@ export const Button = forwardRef((props, ref) => { }) export const Image = forwardRef((props, ref) => ( <Box ref={ref} as="img" tx="images" alt="" {...props} /> )) export const SVG = ({ width = 16, height = 16, ...props }) => ( -
Aug 25, 2020 . 2 changed files with 219 additions and 2 deletions.There are no files selected for viewing
This file contains hidden or 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 charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,207 @@ import { createGlobalStyle } from 'styled-components' export const CSSReset = createGlobalStyle` /* CSS Reset (Inspired by TailwindCSS) */ html{ line-height: 1.15; -webkit-text-size-adjust: 100%; } body{ margin: 0; } main{ display: block; } hr{ box-sizing: content-box; height: 0; overflow: visible; } pre{ font-family: monospace,monospace; font-size: 1em; } a{ background-color: transparent; } abbr[title]{ border-bottom: none; text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } b,strong{ font-weight: bold; } code,kbd,samp{ font-family: monospace,monospace; font-size: 1em; } small{ font-size: 80%; } sub,sup{ font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub{ bottom: -0.25em; } sup{ top: -.5em; } img{ border-style: none; } button,input,optgroup,select,textarea{ font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button,input{ overflow: visible; } button,select{ text-transform: none; } [type=button],[type=reset],[type=submit],button{ -webkit-appearance: button; } [type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{ border-style: none; padding: 0; } [type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{ outline: 1px dotted ButtonText; } fieldset{ padding: 0.35em 0.75em 0.625em; } legend{ box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } progress{ vertical-align: baseline; } textarea{ overflow: auto; } [type=checkbox], [type=radio]{ box-sizing: border-box; padding: 0; } [type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{ height: auto; } [type=search]{ -webkit-appearance: textfield; outline-offset: -2px; } [type=search]::-webkit-search-decoration{ -webkit-appearance: none; } ::-webkit-file-upload-button{ -webkit-appearance: button; font: inherit; } details{ display: block; } summary{ display: list-item; } template{ display: none; } [hidden]{ display: none; } html{ box-sizing: border-box; font-family: sans-serif; } *,::after,::before{ box-sizing: inherit; } blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{ margin: 0; } button{ background: 0 0; padding: 0; border: 0; } button:focus{ outline: 1px dotted; outline: 5px auto -webkit-focus-ring-color; } fieldset{ margin: 0; padding: 0; } ol,ul{ list-style: none; margin: 0; padding: 0; } html{ font-family: ${props => props.theme.fonts.sans}; line-height: 1.5; } img{ border: 0; } textarea{ resize: vertical; } input:-ms-input-placeholder,textarea:-ms-input-placeholder{ color: ${props => props.theme.colors.neutral[700]}; } input::-ms-input-placeholder,textarea::-ms-input-placeholder{ color: ${props => props.theme.colors.neutral[700]}; } input::placeholder,textarea::placeholder{ color: ${props => props.theme.colors.neutral[700]}; } [role=button],button{ cursor: pointer; } table{ border-collapse: collapse; } h1,h2,h3,h4,h5,h6{ font-size: inherit; font-weight: inherit; } a{ color: inherit; text-decoration: inherit; } button,input,optgroup,select,textarea{ padding: 0; line-height: inherit; color: inherit; } code,kbd,pre,samp{ font-family: ${props => props.theme.fonts.mono} } audio,canvas,embed,iframe,img,object,svg,video{ display: block; vertical-align: middle; } img,video{ max-width: 100%; height: auto; } ` export default CSSReset This file contains hidden or 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 charactersOriginal file line number Diff line number Diff line change @@ -1,6 +1,16 @@ import { createGlobalStyle } from 'styled-components' export const GlobalStyles = createGlobalStyle` html, body { box-sizing: border-box; overflow-x: hidden; min-width: 320px; max-width: 100%; margin: 0; font-family: ${props => props.theme.fonts.sans}; color: ${props => props.theme.colors.neutral[900]}; } ` export default GlobalStyles -
Aug 25, 2020 . 1 changed file with 14 additions and 0 deletions.There are no files selected for viewing
This file contains hidden or 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 charactersOriginal file line number Diff line number Diff line change @@ -1,3 +1,17 @@ // Retrieve a key value from an object export function get(object, key) { var keys = key.split('.') for (var i = 0; i < keys.length; i++) { if (!object.hasOwnProperty(keys[i])) { return null } object = object[keys[i]] } return object } // Remove margin values from props const MRE = /^m[trblxy]?$/ export const getProps = test => props => { -
Aug 25, 2020 . 1 changed file with 6 additions and 0 deletions.There are no files selected for viewing
This file contains hidden or 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 charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,6 @@ import { createGlobalStyle } from 'styled-components' export const GlobalStyles = createGlobalStyle` /* CSS Reset (TailwindCSS) */ html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html{box-sizing:border-box;font-family:sans-serif}*,::after,::before{box-sizing:inherit}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}button{background:0 0;padding:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}fieldset{margin:0;padding:0}ol,ul{list-style:none;margin:0;padding:0}html{font-family:-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";line-height:1.5}*,::after,::before{border-width:0;border-style:solid;border-color:#e2e8f0}hr{border-top-width:1px}img{border-style:solid}textarea{resize:vertical}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#a0aec0}input::-ms-input-placeholder,textarea::-ms-input-placeholder{color:#a0aec0}input::placeholder,textarea::placeholder{color:#a0aec0}[role=button],button{cursor:pointer}table{border-collapse:collapse}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}button,input,optgroup,select,textarea{padding:0;line-height:inherit;color:inherit}code,kbd,pre,samp{font-family:Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto} ` -
Aug 25, 2020 . 3 changed files with 48 additions and 32 deletions.There are no files selected for viewing
This file contains hidden or 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 charactersOriginal file line number Diff line number Diff line change @@ -15,23 +15,14 @@ import { position, shadow, } from 'styled-system' import { getMarginProps, omitMarginProps } from '@utils/helpers' // Next Link // import { default as NextLink } from 'next/link' // Gatsby Link // import { Link as GatsbyLink } from 'gatsby' const base = props => css(props.__css) const sx = props => css(props.sx) const variant = ({ theme, variant, tx = '' }) => @@ -53,6 +44,9 @@ export const Box = styled.div( textTransform: true, textDecoration: true, transform: true, transition: true, visibility: true, pointerEvent: true, }), compose( space, @@ -98,12 +92,35 @@ export const Link = forwardRef((props, ref) => ( )) // Next // export const Link = forwardRef( // ({ href, as, prefetch, replace, scroll, ...props }, ref) => // href && (href.startsWith('/') || href.startsWith('#')) ? ( // <NextLink // as={as} // href={href} // prefetch={prefetch} // replace={replace} // scroll={scroll} // passHref // > // <Box ref={ref} as="a" tx="links" {...props} /> // </NextLink> // ) : ( // <Box // ref={ref} // as="a" // href={href} // rel="nofollow noopener" // tx="links" // {...props} // /> // ) // ) // Gatsby // export const Link = forwardRef(({ href, to, isExternal, ...props }, ref) => { // const url = to || href // return isExternal || isAbsoluteURL(url) ? ( // <Box // ref={ref} This file contains hidden or 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 charactersOriginal file line number Diff line number Diff line change @@ -1,28 +1,15 @@ import React, { forwardRef } from 'react' import { Box, Flex, SVG } from './Base' import { getMarginProps, omitMarginProps } from '@utils/helpers' export const Label = forwardRef((props, ref) => ( <Flex ref={ref} as="label" tx="forms" variant="label" {...props} __css={{ width: '100%', fontWeight: 'bold', cursor: 'pointer', @@ -105,6 +92,7 @@ export const Select = forwardRef((props, ref) => ( <SelectArrow width="12" height="8" aria-hidden={true} sx={{ position: 'relative', right: 2, @@ -170,7 +158,7 @@ export const Radio = forwardRef( /> <Box as={RadioIcon} aria-hidden={true} tx="forms" variant={variant} className={className} @@ -246,7 +234,7 @@ export const Checkbox = forwardRef( /> <Box as={CheckboxIcon} aria-hidden={true} tx="forms" variant={variant} className={className} @@ -303,7 +291,7 @@ export const Switch = forwardRef(({ checked, ...props }, ref) => { }} > <Box aria-hidden={true} style={{ transform: checked ? `translateX(${switchSize * 4}px)` This file contains hidden or 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 charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,11 @@ // Remove margin values from props const MRE = /^m[trblxy]?$/ export const getProps = test => props => { const next = {} for (const key in props) { if (test(key || '')) next[key] = props[key] } return next } export const getMarginProps = getProps(k => MRE.test(k)) export const omitMarginProps = getProps(k => !MRE.test(k)) -
Aug 25, 2020 . 2 changed files with 138 additions and 80 deletions.There are no files selected for viewing
This file contains hidden or 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 charactersOriginal file line number Diff line number Diff line change @@ -16,6 +16,9 @@ import { shadow, } from 'styled-system' // Gatsby Link // import { Link as GatsbyLink } from 'gatsby' const MRE = /^m[trblxy]?$/ export const getProps = test => props => { @@ -94,6 +97,27 @@ export const Link = forwardRef((props, ref) => ( <Box ref={ref} as="a" tx="links" {...props} /> )) // Next // Gatsby // export const Link = forwardRef(({ href, to, isExternal, ...props }, ref) => { // const url = to || href // return isExternal || isAbsoluteURL(url) ? ( // <Box // ref={ref} // as="a" // href={url} // rel="nofollow noopener" // tx="links" // {...props} // /> // ) : ( // <Box ref={ref} as={GatsbyLink} to={url} tx="links" {...props} /> // ) // }) export const Divider = forwardRef((props, ref) => ( <Box ref={ref} @@ -166,9 +190,9 @@ export const SVG = ({ width = 16, height = 16, ...props }) => ( <Box as="svg" xmlns="http://www.w3.org/2000/svg" // width={width || null} // height={height || null} viewBox={`0 0 ${parseInt(width, 10)} ${parseInt(height, 10)}`} fill="currentcolor" {...props} /> This file contains hidden or 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 charactersOriginal file line number Diff line number Diff line change @@ -1,10 +1,12 @@ 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', @@ -280,73 +282,6 @@ export const theme = { '50': '50', top: '9999', }, } // Breakpoint aliases @@ -357,10 +292,109 @@ 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 = { general: {}, 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', }, }, links: {}, dividers: {}, buttons: { primary: { px: 6, py: 3, color: 'white', bg: 'gray.700', border: 1, borderColor: 'gray.700', borderRadius: 3, ':hover': { bg: 'gray.500', borderColor: 'gray.500', }, }, outline: { px: 6, py: 3, color: 'gray.700', bg: 'transparent', border: 1, borderColor: 'gray.700', borderRadius: 3, ':hover': { color: 'gray.500', borderColor: 'gray.500', }, }, }, images: {}, forms: { label: {}, error: { fontSize: 'sm', color: 'red', }, input: {}, textarea: {}, select: {}, radio: {}, checkbox: {}, switch: {}, slider: {}, }, }, export default theme -
Mar 11, 2020 . 3 changed files with 405 additions and 33 deletions.There are no files selected for viewing
This file contains hidden or 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 charactersOriginal file line number Diff line number Diff line change @@ -16,6 +16,19 @@ import { shadow, } from 'styled-system' const MRE = /^m[trblxy]?$/ export const getProps = test => props => { const next = {} for (const key in props) { if (test(key || '')) next[key] = props[key] } return next } export const getMarginProps = getProps(k => MRE.test(k)) export const omitMarginProps = getProps(k => !MRE.test(k)) const base = props => css(props.__css) const sx = props => css(props.sx) const variant = ({ theme, variant, tx = '' }) => @@ -35,6 +48,7 @@ export const Box = styled.div( props => props.css, system({ textTransform: true, textDecoration: true, transform: true, }), compose( @@ -68,11 +82,9 @@ export const Heading = forwardRef((props, ref) => ( ref={ref} as="h1" tx="headings" variant="h1" __css={css({ fontWeight: 'bold', })} {...props} /> @@ -160,4 +172,50 @@ export const SVG = ({ width = 16, height = 16, ...props }) => ( fill="currentcolor" {...props} /> ) export const Code = forwardRef((props, ref) => { const sharedStyles = { m: '0', direction: 'ltr', fontFamily: 'mono', color: 'gray.900', textAlign: 'left', fontSize: 'xs', fontWeight: 'normal', lineHeight: 'normal', textDecoration: 'none', whiteSpace: 'pre', wordSpacing: 'normal', wordBreak: 'normal', wordWrap: 'normal', tabSize: '4', hyphens: 'none', bg: 'gray.100', borderRadius: 3, } return ( <Box as="pre" {...getMarginProps(props)} __css={css({ ...sharedStyles, overflow: 'auto', p: 4, border: '1px solid', borderColor: 'gray.200', })} > <Box ref={ref} as="code" tx="code" {...omitMarginProps(props)} __css={css({ ...sharedStyles, })} /> </Box> ) }) This file contains hidden or 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 charactersOriginal file line number Diff line number Diff line change @@ -1,8 +1,18 @@ import React, { forwardRef } from 'react' import { Box, Flex, SVG } from './Base' const MRE = /^m[trblxy]?$/ export const getProps = test => props => { const next = {} for (const key in props) { if (test(key || '')) next[key] = props[key] } return next } export const getMarginProps = getProps(k => MRE.test(k)) export const omitMarginProps = getProps(k => !MRE.test(k)) export const Label = forwardRef((props, ref) => ( <Box @@ -12,8 +22,10 @@ export const Label = forwardRef((props, ref) => ( variant="label" {...props} __css={{ display: 'flex', width: '100%', fontWeight: 'bold', cursor: 'pointer', }} /> )) @@ -31,7 +43,7 @@ export const Input = forwardRef((props, ref) => ( width: '100%', p: 2, appearance: 'none', fontSize: 'inherit', lineHeight: 'inherit', border: '1px solid', borderRadius: 3, @@ -61,4 +73,291 @@ export const Textarea = forwardRef((props, ref) => ( bg: 'transparent', }} /> )) const SelectArrow = props => ( <SVG {...props}> <path d="M5.293 6.95L6 7.657 11.657 2 10.243.586 6 4.828 1.757.586.343 2z" /> </SVG> ) export const Select = forwardRef((props, ref) => ( <Flex {...getMarginProps(props)}> <Box ref={ref} as="select" tx="forms" variant="select" {...omitMarginProps(props)} __css={{ display: 'block', width: '100%', p: 2, appearance: 'none', fontSize: 'inherit', lineHeight: 'inherit', border: '1px solid', borderRadius: 3, color: 'inherit', bg: 'transparent', }} /> <SelectArrow width="12" height="8" sx={{ position: 'relative', right: 2, ml: '-12px', alignSelf: 'center', pointerEvents: 'none', }} /> </Flex> )) const RadioChecked = props => ( <SVG {...props}> <path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" /> </SVG> ) const RadioUnchecked = props => ( <SVG {...props}> <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" /> </SVG> ) const RadioIcon = props => ( <> <RadioChecked {...props} __css={{ display: 'none', 'input:checked ~ &': { display: 'block', }, }} /> <RadioUnchecked {...props} __css={{ display: 'block', 'input:checked ~ &': { display: 'none', }, }} /> </> ) export const Radio = forwardRef( ({ className, sx, variant = 'radio', ...props }, ref) => ( <Box> <Box ref={ref} as="input" type="radio" {...props} sx={{ position: 'absolute', overflow: 'hidden', width: 1, height: 1, opacity: 0, zIndex: -1, }} /> <Box as={RadioIcon} aria-hidden="true" tx="forms" variant={variant} className={className} sx={sx} // {...getSystemProps(props)} __css={{ mr: 2, borderRadius: 'full', color: 'gray', 'input:checked ~ &': { color: 'gray.900', }, 'input:focus ~ &': { bg: 'gray.400', }, }} /> </Box> ) ) const CheckboxChecked = props => ( <SVG {...props}> <path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" /> </SVG> ) const CheckboxUnchecked = props => ( <SVG {...props}> <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" /> </SVG> ) const CheckboxIcon = props => ( <> <CheckboxChecked {...props} __css={{ display: 'none', 'input:checked ~ &': { display: 'block', }, }} /> <CheckboxUnchecked {...props} __css={{ display: 'block', 'input:checked ~ &': { display: 'none', }, }} /> </> ) export const Checkbox = forwardRef( ({ className, sx, variant = 'checkbox', ...props }, ref) => ( <Box> <Box ref={ref} as="input" type="checkbox" {...props} sx={{ position: 'absolute', opacity: 0, zIndex: -1, width: 1, height: 1, overflow: 'hidden', }} /> <Box as={CheckboxIcon} aria-hidden="true" tx="forms" variant={variant} className={className} sx={sx} // {...getSystemProps(props)} __css={{ mr: 2, borderRadius: 3, color: 'gray.900', 'input:checked ~ &': { color: 'gray.900', }, 'input:focus ~ &': { color: 'gray.900', bg: 'gray.400', }, }} /> </Box> ) ) export const Switch = forwardRef(({ checked, ...props }, ref) => { const switchSize = 6 return ( <Box ref={ref} as="button" type="button" role="switch" tx="forms" variant="switch" aria-checked={checked} {...props} __css={{ appearance: 'none', m: 0, p: 0, width: switchSize * 2, height: switchSize, color: 'gray.600', bg: 'transparent', border: '1px solid', borderColor: 'gray.900', borderRadius: 'full', // '&[aria-checked=true]': { // bg: 'gray.100', // }, ':focus': { outline: 'none', boxShadow: '0 0 0 2px', }, }} > <Box aria-hidden style={{ transform: checked ? `translateX(${switchSize * 4}px)` : 'translateX(0)', }} sx={{ mt: '-1px', ml: '-1px', width: switchSize, height: switchSize, borderRadius: 'full', border: '1px solid', borderColor: 'gray.900', bg: checked ? 'gray.700' : 'gray.400', transitionProperty: 'transform', transitionTimingFunction: 'ease-out', transitionDuration: '0.1s', }} /> </Box> ) }) export const Slider = forwardRef(({ ...props }, ref) => ( <Box ref={ref} as="input" type="range" tx="forms" variant="slider" {...props} __css={{ display: 'block', width: '100%', height: '2px', my: 3, cursor: 'pointer', appearance: 'none', borderRadius: 'full', color: 'gray.500', bg: 'gray.200', ':focus': { outline: 'none', color: 'gray.700', }, '&::-webkit-slider-thumb': { appearance: 'none', width: 6, height: 6, bg: 'currentcolor', border: '1px solid', borderColor: 'gray.900', borderRadius: 'full', }, }} /> )) This file contains hidden or 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 charactersOriginal file line number Diff line number Diff line change @@ -189,7 +189,7 @@ export const theme = { }, 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', @@ -281,55 +281,70 @@ export const theme = { top: '9999', }, variants: { general: {}, flex: {}, grid: {}, texts: {}, headings: { h1: { fontSize: '4xl', }, h2: { fontSize: '3xl', }, h3: { fontSize: '2xl', }, h4: { fontSize: 'xl', }, h5: { fontSize: 'lg', }, h6: { fontSize: 'base', }, }, links: {}, dividers: {}, buttons: { primary: { px: 6, py: 3, color: 'white', bg: 'gray.700', border: 1, borderColor: 'gray.700', borderRadius: 3, ':hover': { bg: 'gray.500', borderColor: 'gray.500', }, }, outline: { px: 6, py: 3, color: 'gray.700', bg: 'transparent', border: 1, borderColor: 'gray.700', borderRadius: 3, ':hover': { color: 'gray.500', borderColor: 'gray.500', }, }, }, images: {}, forms: { label: {}, input: {}, textarea: {}, select: {}, radio: {}, checkbox: {}, switch: {}, slider: {}, }, }, } -
Feb 19, 2020 . 2 changed files with 4 additions and 1 deletion.There are no files selected for viewing
This file contains hidden or 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 charactersOriginal file line number Diff line number Diff line change @@ -160,4 +160,4 @@ export const SVG = ({ width = 16, height = 16, ...props }) => ( fill="currentcolor" {...props} /> ) This file contains hidden or 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 charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,3 @@ # React Primitives > React primitive components using styled-system. -
Feb 19, 2020 .There are no files selected for viewing
This file contains hidden or 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 charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,163 @@ 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, transform: true, }), compose( space, color, typography, layout, flexbox, grid, background, border, position, shadow ) ) export const Flex = styled(Box)({ display: 'flex', }) export const Grid = styled(Box)({ display: 'grid', }) export const Text = forwardRef((props, ref) => ( <Box ref={ref} as="p" tx="texts" {...props} /> )) export const Heading = forwardRef((props, ref) => ( <Box ref={ref} as="h1" tx="headings" __css={css({ fontSize: '5xl', fontFamily: 'sans', fontWeight: '700', color: 'gray.800', })} {...props} /> )) export const Link = forwardRef((props, ref) => ( <Box ref={ref} as="a" tx="links" {...props} /> )) export const Divider = forwardRef((props, ref) => ( <Box ref={ref} as="hr" tx="dividers" __css={css({ height: 'px', my: 8, bg: 'gray.300', border: 'none', })} {...props} /> )) export const Button = forwardRef((props, ref) => { const defaultStyles = { cursor: 'pointer', appearance: 'none', display: 'inline-block', textAlign: 'center', lineHeight: 'inherit', textDecoration: 'none', fontSize: 'inherit', } const specialStyles = props.variant !== 'plain' ? { px: 6, py: 3, border: 1, borderRadius: 3, } : { '&:hover': { color: 'gray.600', }, } return ( <Box ref={ref} as="button" tx="buttons" variant="primary" __css={css({ ...defaultStyles, ...specialStyles, })} {...props} /> ) }) export const Image = forwardRef((props, ref) => ( <Box ref={ref} as="img" tx="images" __css={css({ maxWidth: '100%', border: 'none', })} {...props} /> )) export const SVG = ({ width = 16, height = 16, ...props }) => ( <Box as="svg" xmlns="http://www.w3.org/2000/svg" width={width || null} height={height || null} viewBox={`0 0 ${width} ${height}`} fill="currentcolor" {...props} /> ) This file contains hidden or 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 charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,64 @@ // https://github.com/rebassjs/rebass/blob/master/packages/forms/src/index.js // https://github.com/system-ui/theme-ui/tree/master/packages/components/src import React, { forwardRef } from 'react' import { Box } from './Base' export const Label = forwardRef((props, ref) => ( <Box ref={ref} as="label" tx="forms" variant="label" {...props} __css={{ width: '100%', fontWeight: 'bold', }} /> )) export const Input = forwardRef((props, ref) => ( <Box ref={ref} as="input" type="text" tx="forms" variant="input" {...props} __css={{ display: 'block', width: '100%', p: 2, appearance: 'none', fontSize: 'base', lineHeight: 'inherit', border: '1px solid', borderRadius: 3, color: 'inherit', bg: 'transparent', }} /> )) export const Textarea = forwardRef((props, ref) => ( <Box ref={ref} as="textarea" tx="forms" variant="textarea" {...props} __css={{ display: 'block', width: '100%', p: 2, appearance: 'none', fontSize: 'inherit', lineHeight: 'inherit', border: '1px solid', borderRadius: 3, color: 'inherit', bg: 'transparent', }} /> )) This file contains hidden or 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 charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,351 @@ export const theme = { breakpoints: [ '30rem', // 480px '40rem', // 640px '48rem', // 768px '64rem', // 1024px '80rem', // 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: 'Raleway, -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', }, variants: { texts: {}, headings: {}, links: { compact: { textDecoration: 'none', textTransform: 'uppercase', fontWeight: 'bold', fontSize: 'sm', }, }, dividers: {}, buttons: { primary: { px: 6, py: 3, color: 'white', bg: 'indigo.700', border: 1, borderColor: 'indigo.700', borderRadius: 3, ':hover': { bg: 'indigo.500', borderColor: 'indigo.500', }, }, outline: { px: 6, py: 3, color: 'indigo.700', bg: 'transparent', border: 1, borderColor: 'indigo.700', borderRadius: 3, ':hover': { color: 'indigo.500', borderColor: 'indigo.500', }, }, }, images: { avatar: { borderRadius: 100, border: 4, borderColor: 'gray.400', }, }, forms: { label: {}, input: {}, }, }, } // 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.xs = theme.breakpoints[0] theme.sizes.sm = theme.breakpoints[1] theme.sizes.md = theme.breakpoints[2] theme.sizes.lg = theme.breakpoints[3] theme.sizes.xl = theme.breakpoints[4] export default theme