mirror of https://github.com/lukechilds/docs.git
Thomas Osmonson
4 years ago
73 changed files with 1553 additions and 1124 deletions
@ -1,8 +1,4 @@ |
|||||
module.exports = { |
module.exports = { |
||||
presets: ['next/babel'], |
presets: ['next/babel', '@emotion/babel-preset-css-prop'], |
||||
plugins: [ |
plugins: ['./lib/babel-plugin-nextjs-mdx-patch', 'babel-plugin-macros', '@emotion'], |
||||
'./lib/babel-plugin-nextjs-mdx-patch', |
|
||||
'babel-plugin-macros', |
|
||||
['styled-components', { ssr: true }], |
|
||||
], |
|
||||
}; |
}; |
||||
|
|||||
@ -1,87 +1,53 @@ |
|||||
import { createGlobalStyle } from 'styled-components'; |
/** @jsx jsx */ |
||||
import { generateCssVariables } from '@blockstack/ui'; |
import * as React from 'react'; |
||||
|
import { jsx, css, Global } from '@emotion/react'; |
||||
export const ColorModes = createGlobalStyle` |
import { theme, generateCssVariables } from '@stacks/ui'; |
||||
:root{ |
|
||||
${generateCssVariables('light')}; |
export const Base = ( |
||||
--colors-highlight-line-bg: rgba(255,255,255,0.08); |
<Global |
||||
} |
styles={css` |
||||
|
* { |
||||
* { |
|
||||
-webkit-font-smoothing: antialiased; |
|
||||
-moz-osx-font-smoothing: grayscale; |
|
||||
} |
|
||||
|
|
||||
@media (prefers-color-scheme: dark) { |
|
||||
:root { |
|
||||
${generateCssVariables('dark')}; |
|
||||
--colors-highlight-line-bg: rgba(255,255,255,0.04); |
|
||||
} |
|
||||
* { |
|
||||
-webkit-font-smoothing: subpixel-antialiased; |
|
||||
-moz-osx-font-smoothing: auto; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
@media (prefers-color-scheme: light) { |
|
||||
:root { |
|
||||
${generateCssVariables('light')}; |
|
||||
--colors-highlight-line-bg: rgba(255,255,255,0.08); |
|
||||
} |
|
||||
* { |
|
||||
-webkit-font-smoothing: antialiased; |
|
||||
-moz-osx-font-smoothing: grayscale; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
html, body, #__next { |
|
||||
background: var(--colors-bg); |
|
||||
border-color: var(--colors-border); |
|
||||
|
|
||||
&.light { |
|
||||
${generateCssVariables('light')}; |
|
||||
--colors-highlight-line-bg: rgba(255,255,255,0.08); |
|
||||
* { |
|
||||
-webkit-font-smoothing: antialiased; |
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
-moz-osx-font-smoothing: grayscale; |
||||
} |
} |
||||
} |
:root { |
||||
&.dark { |
${generateCssVariables('light')({ colorMode: 'light', theme })}; |
||||
${generateCssVariables('dark')}; |
--colors-highlight-line-bg: rgba(255, 255, 255, 0.1); |
||||
--colors-highlight-line-bg: rgba(255,255,255,0.04); |
|
||||
* { |
@media (prefers-color-scheme: dark) { |
||||
-webkit-font-smoothing: subpixel-antialiased; |
${generateCssVariables('dark')({ colorMode: 'dark', theme })}; |
||||
-moz-osx-font-smoothing: auto; |
--colors-highlight-line-bg: rgba(255, 255, 255, 0.05); |
||||
|
} |
||||
} |
} |
||||
} |
html, |
||||
} |
body, |
||||
|
#__next { |
||||
input:-webkit-autofill, |
background: var(--colors-bg); |
||||
input:-webkit-autofill:hover, |
border-color: var(--colors-border); |
||||
input:-webkit-autofill:focus, |
|
||||
textarea:-webkit-autofill, |
&.light { |
||||
textarea:-webkit-autofill:hover, |
:root { |
||||
textarea:-webkit-autofill:focus, |
${generateCssVariables('light')({ colorMode: 'light', theme })}; |
||||
select:-webkit-autofill, |
--colors-highlight-line-bg: rgba(255, 255, 255, 0.1); |
||||
select:-webkit-autofill:hover, |
} |
||||
select:-webkit-autofill:focus { |
* { |
||||
-webkit-text-fill-color: var(--colors-text-body); |
-webkit-font-smoothing: antialiased; |
||||
font-size: 16px !important; |
-moz-osx-font-smoothing: grayscale; |
||||
transition: background-color 5000s ease-in-out 0s; |
} |
||||
} |
} |
||||
|
&.dark { |
||||
input:-ms-input-placeholder, |
:root { |
||||
textarea:-ms-input-placeholder { |
${generateCssVariables('dark')({ colorMode: 'dark', theme })}; |
||||
color: var(--colors-input-placeholder) !important; |
--colors-highlight-line-bg: rgba(255, 255, 255, 0.04); |
||||
} |
} |
||||
|
* { |
||||
input::-ms-input-placeholder, |
-webkit-font-smoothing: subpixel-antialiased; |
||||
textarea::-ms-input-placeholder { |
-moz-osx-font-smoothing: auto; |
||||
color: var(--colors-input-placeholder) !important; |
} |
||||
} |
} |
||||
|
} |
||||
|
`}
|
||||
|
/> |
||||
|
); |
||||
|
|
||||
input::placeholder, |
export const ColorModes = Base; |
||||
textarea::placeholder { |
|
||||
color: var(--colors-input-placeholder) !important; |
|
||||
} |
|
||||
`;
|
|
||||
|
|||||
@ -1,14 +1,19 @@ |
|||||
import React from 'react'; |
import React from 'react'; |
||||
import { Flex, FlexProps, space } from '@blockstack/ui'; |
import { Flex, FlexProps, space } from '@stacks/ui'; |
||||
|
import { ForwardRefExoticComponentWithAs, forwardRefWithAs } from '@stacks/ui-core'; |
||||
|
|
||||
const ContentWrapper: React.FC<FlexProps> = props => ( |
const ContentWrapper: ForwardRefExoticComponentWithAs<FlexProps, 'div'> = forwardRefWithAs< |
||||
|
FlexProps, |
||||
|
'div' |
||||
|
>((props, ref) => ( |
||||
<Flex |
<Flex |
||||
flexShrink={0} |
flexShrink={0} |
||||
pt={space(['base', 'base', 'extra-loose'])} |
pt={space(['base', 'base', 'extra-loose'])} |
||||
pb={[4, 4, 6]} |
pb={[4, 4, 6]} |
||||
flexDirection="column" |
flexDirection="column" |
||||
|
ref={ref} |
||||
{...props} |
{...props} |
||||
/> |
/> |
||||
); |
)); |
||||
|
|
||||
export { ContentWrapper }; |
export { ContentWrapper }; |
||||
|
|||||
@ -1,65 +0,0 @@ |
|||||
import React from 'react'; |
|
||||
import { Box, Grid, space, color } from '@blockstack/ui'; |
|
||||
import { CircleIcon } from '@components/home/common'; |
|
||||
import { CONTENT_MAX_WIDTH } from '@common/constants'; |
|
||||
import { Card } from '@components/home/card'; |
|
||||
import { Body, H1, BodyLarge, SubHeading } from '@components/home/text'; |
|
||||
import { HEADER_HEIGHT } from '@components/header'; |
|
||||
|
|
||||
export const Hero = ({ cards }: { cards?: any }) => { |
|
||||
return ( |
|
||||
<> |
|
||||
<Grid pb="64px" pt="64px" style={{ placeItems: 'center' }}> |
|
||||
<Box maxWidth="62ch" textAlign="center"> |
|
||||
<H1 mb={space('base')}>Easily build decentralized apps</H1> |
|
||||
<BodyLarge maxWidth="42ch" mt="64px" mx="auto"> |
|
||||
Blockstack is a developer-friendly toolkit for building decentralized apps, anchored in |
|
||||
the Bitcoin blockchain. |
|
||||
</BodyLarge> |
|
||||
</Box> |
|
||||
</Grid> |
|
||||
<Grid |
|
||||
maxWidth={`${CONTENT_MAX_WIDTH}px`} |
|
||||
width="100%" |
|
||||
gridGap={space('extra-loose')} |
|
||||
minHeight="200px" |
|
||||
gridTemplateColumns={[ |
|
||||
'repeat(1, 1fr)', |
|
||||
'repeat(1, 1fr)', |
|
||||
'repeat(2, 1fr)', |
|
||||
'repeat(3, 1fr)', |
|
||||
]} |
|
||||
mx="auto" |
|
||||
mt={space('extra-loose')} |
|
||||
px={space('extra-loose')} |
|
||||
> |
|
||||
{cards.map(({ href, title, subtitle, icon: Icon }, index) => ( |
|
||||
<Card href={href} textAlign="center" key={index}> |
|
||||
{({ hover, active }) => ( |
|
||||
<Box as="span"> |
|
||||
<CircleIcon |
|
||||
as="span" |
|
||||
hover={hover || active} |
|
||||
icon={Icon} |
|
||||
mx="auto" |
|
||||
mb={space('base-loose')} |
|
||||
/> |
|
||||
<SubHeading |
|
||||
as="span" |
|
||||
display="block" |
|
||||
color={hover || active ? color('accent') : color('text-title')} |
|
||||
mb={space('base-loose')} |
|
||||
> |
|
||||
{title} |
|
||||
</SubHeading> |
|
||||
<Body as="p" maxWidth="26ch" mx="auto"> |
|
||||
{subtitle} |
|
||||
</Body> |
|
||||
</Box> |
|
||||
)} |
|
||||
</Card> |
|
||||
))} |
|
||||
</Grid> |
|
||||
</> |
|
||||
); |
|
||||
}; |
|
||||
@ -1,5 +1,5 @@ |
|||||
import React from 'react'; |
import React from 'react'; |
||||
import { Box, BoxProps, Grid, space } from '@blockstack/ui'; |
import { Box, BoxProps, Grid, space } from '@stacks/ui'; |
||||
import { transition } from '@common/utils'; |
import { transition } from '@common/utils'; |
||||
import { Img } from '@components/mdx/image'; |
import { Img } from '@components/mdx/image'; |
||||
|
|
||||
@ -1,21 +1,44 @@ |
|||||
import { Box, BoxProps, color, space } from '@blockstack/ui'; |
import { Box, BoxProps, color, space } from '@stacks/ui'; |
||||
import React from 'react'; |
import React from 'react'; |
||||
import { Text } from '@components/typography'; |
import { Text } from '@components/typography'; |
||||
import { BaseHeading } from '@components/mdx/components/heading'; |
import { BaseHeading } from '@components/mdx/components/heading'; |
||||
|
import { forwardRefWithAs, ForwardRefExoticComponentWithAs } from '@stacks/ui-core'; |
||||
|
|
||||
export const H1: React.FC<BoxProps> = props => <BaseHeading as="h1" {...props} />; |
export const H1: ForwardRefExoticComponentWithAs<BoxProps, 'h1'> = forwardRefWithAs<BoxProps, 'h1'>( |
||||
export const H2: React.FC<BoxProps> = props => <BaseHeading as="h2" {...props} />; |
(props, ref) => <BaseHeading as="h1" ref={ref} {...props} /> |
||||
export const H3: React.FC<BoxProps> = props => <BaseHeading as="h3" {...props} />; |
); |
||||
export const H4: React.FC<BoxProps> = props => <BaseHeading as="h4" {...props} />; |
export const H2: ForwardRefExoticComponentWithAs<BoxProps, 'h2'> = forwardRefWithAs<BoxProps, 'h2'>( |
||||
export const H5: React.FC<BoxProps> = props => <BaseHeading as="h5" {...props} />; |
(props, ref) => <BaseHeading as="h2" ref={ref} {...props} /> |
||||
export const H6: React.FC<BoxProps> = props => <BaseHeading as="h6" {...props} />; |
); |
||||
|
export const H3: ForwardRefExoticComponentWithAs<BoxProps, 'h3'> = forwardRefWithAs<BoxProps, 'h3'>( |
||||
|
(props, ref) => <BaseHeading as="h3" ref={ref} {...props} /> |
||||
|
); |
||||
|
export const H4: ForwardRefExoticComponentWithAs<BoxProps, 'h4'> = forwardRefWithAs<BoxProps, 'h4'>( |
||||
|
(props, ref) => <BaseHeading as="h4" ref={ref} {...props} /> |
||||
|
); |
||||
|
export const H5: ForwardRefExoticComponentWithAs<BoxProps, 'h5'> = forwardRefWithAs<BoxProps, 'h5'>( |
||||
|
(props, ref) => <BaseHeading as="h5" ref={ref} {...props} /> |
||||
|
); |
||||
|
export const H6: ForwardRefExoticComponentWithAs<BoxProps, 'h6'> = forwardRefWithAs<BoxProps, 'h6'>( |
||||
|
(props, ref) => <BaseHeading as="h6" ref={ref} {...props} /> |
||||
|
); |
||||
|
|
||||
export const Br: React.FC<BoxProps> = props => <Box height="24px" {...props} />; |
export const Br: ForwardRefExoticComponentWithAs<BoxProps, 'br'> = forwardRefWithAs<BoxProps, 'br'>( |
||||
export const Hr: React.FC<BoxProps> = props => ( |
props => <Box height="24px" {...props} /> |
||||
<Box as="hr" borderTopWidth="1px" borderColor={color('border')} my={'64px'} {...props} /> |
); |
||||
|
export const Hr: ForwardRefExoticComponentWithAs<BoxProps, 'hr'> = forwardRefWithAs<BoxProps, 'hr'>( |
||||
|
props => <Box as="hr" borderTopWidth="1px" borderColor={color('border')} my={'64px'} {...props} /> |
||||
); |
); |
||||
|
|
||||
export const P: React.FC<BoxProps> = props => <Text as="p" {...props} />; |
export const P: ForwardRefExoticComponentWithAs<BoxProps, 'p'> = forwardRefWithAs<BoxProps, 'p'>( |
||||
|
(props, ref) => <Text as="p" ref={ref} {...props} /> |
||||
|
); |
||||
|
|
||||
export const Pre = (props: any) => <Text as="pre" {...props} />; |
export const Pre: ForwardRefExoticComponentWithAs<BoxProps, 'pre'> = forwardRefWithAs< |
||||
export const Sup: React.FC<any> = props => <Text as="sup" mr={space('extra-tight')} {...props} />; |
BoxProps, |
||||
|
'pre' |
||||
|
>((props, ref) => <Text as="pre" ref={ref} {...props} />); |
||||
|
export const Sup: ForwardRefExoticComponentWithAs<BoxProps, 'sup'> = forwardRefWithAs< |
||||
|
BoxProps, |
||||
|
'sup' |
||||
|
>((props, ref) => <Text as="sup" ref={ref} mr={space('extra-tight')} {...props} />); |
||||
|
|||||
@ -1,103 +1,125 @@ |
|||||
import React from 'react'; |
import React from 'react'; |
||||
import { color } from '@blockstack/ui'; |
import { color } from '@stacks/ui'; |
||||
import { createGlobalStyle } from 'styled-components'; |
import { css, Global } from '@emotion/react'; |
||||
|
|
||||
const GlobalStyles = createGlobalStyle` |
const GlobalStyles = ( |
||||
:root { |
<Global |
||||
--reach-tooltip: 1; |
styles={css` |
||||
} |
blockquote, |
||||
|
dl, |
||||
|
dd, |
||||
|
h1, |
||||
|
h2, |
||||
|
h3, |
||||
|
h4, |
||||
|
h5, |
||||
|
h6, |
||||
|
hr, |
||||
|
figure, |
||||
|
p, |
||||
|
pre { |
||||
|
margin: 0px; |
||||
|
} |
||||
|
:root { |
||||
|
--reach-tooltip: 1; |
||||
|
} |
||||
|
a { |
||||
|
text-decoration: none; |
||||
|
} |
||||
|
* { |
||||
|
font-feature-settings: 'onum' 1, 'pnum' 1, 'kern' 1, 'ss01' 1; |
||||
|
} |
||||
|
html, |
||||
|
body { |
||||
|
font-family: 'Soehne', Inter, sans-serif; |
||||
|
} |
||||
|
@counter-style list { |
||||
|
pad: '0'; |
||||
|
} |
||||
|
img { |
||||
|
image-rendering: crisp-edges; |
||||
|
will-change: transform; |
||||
|
} |
||||
|
:root { |
||||
|
--docsearch-modal-background: ${color('bg')}; |
||||
|
--docsearch-text-color: ${color('text-title')}; |
||||
|
--docsearch-icon-color: ${color('text-caption')}; |
||||
|
--docsearch-primary-color: ${color('accent')}; |
||||
|
--docsearch-input-color: ${color('text-title')}; |
||||
|
--docsearch-highlight-color: ${color('bg-alt')}; |
||||
|
--docsearch-placeholder-color: ${color('text-caption')}; |
||||
|
--docsearch-container-background: rgba(22, 22, 22, 0.75); |
||||
|
--docsearch-modal-shadow: inset 0px 0px 1px 1px ${color('border')}; |
||||
|
--docsearch-searchbox-background: var(--ifm-color-emphasis-300); |
||||
|
--docsearch-searchbox-focus-background: ${color('bg')}; |
||||
|
--docsearch-searchbox-shadow: inset 0px 0px 1px 1px ${color('border')}; |
||||
|
--docsearch-hit-color: var(--ifm-color-emphasis-800); |
||||
|
--docsearch-hit-active-color: ${color('text-title')}; |
||||
|
--docsearch-hit-background: ${color('bg')}; |
||||
|
--docsearch-hit-shadow: inset 0px 0px 1px 1px ${color('border')}; |
||||
|
--docsearch-key-gradient: transparent; |
||||
|
--docsearch-key-shadow: inset 0px -2px 0px 0px transparent, |
||||
|
inset 0px 0px 1px 1px transparent, 0px 1px 2px 1px transparent; |
||||
|
--docsearch-footer-background: ${color('bg')}; |
||||
|
--docsearch-footer-shadow: inset 0px 0px 1px 1px ${color('border')}; |
||||
|
--docsearch-logo-color: #5468ff; |
||||
|
--docsearch-muted-color: #969faf; |
||||
|
--docsearch-modal-width: 560px; |
||||
|
--docsearch-modal-height: 600px; |
||||
|
--docsearch-searchbox-height: 56px; |
||||
|
--docsearch-hit-height: 56px; |
||||
|
--docsearch-footer-height: 44px; |
||||
|
--docsearch-spacing: 12px; |
||||
|
--docsearch-icon-stroke-width: 1.4; |
||||
|
} |
||||
|
.DocSearch-Container { |
||||
|
z-index: 99999; |
||||
|
} |
||||
|
.DocSearch-SearchBar { |
||||
|
padding: var(--docsearch-spacing); |
||||
|
} |
||||
|
.DocSearch-Reset:hover { |
||||
|
color: ${color('accent')}; |
||||
|
} |
||||
|
.DocSearch-Form { |
||||
|
input { |
||||
|
color: ${color('text-title')}; |
||||
|
} |
||||
|
&:focus-within { |
||||
|
box-shadow: 0 0 0 3px rgba(170, 179, 255, 0.75); |
||||
|
} |
||||
|
} |
||||
|
.DocSearch-Help { |
||||
|
text-align: center; |
||||
|
} |
||||
|
.DocSearch-Prefill { |
||||
|
color: ${color('accent')} !important; |
||||
|
} |
||||
|
.DocSearch-Hit { |
||||
|
mark { |
||||
|
color: ${color('accent')} !important; |
||||
|
} |
||||
|
} |
||||
|
.DocSearch-Hit-source { |
||||
|
color: ${color('text-caption')}; |
||||
|
} |
||||
|
.DocSearch-MagnifierLabel { |
||||
|
color: ${color('accent')}; |
||||
|
} |
||||
|
|
||||
* { |
pre { |
||||
font-feature-settings: "onum" 1, "pnum" 1, "kern" 1, "ss01" 1; |
display: inline-block; |
||||
} |
} |
||||
html, body { |
p, |
||||
font-family: 'Soehne', Inter, sans-serif; |
ul, |
||||
} |
ol, |
||||
@counter-style list { |
table { |
||||
pad: "0"; |
color: ${color('text-body')}; |
||||
} |
a > pre { |
||||
img{ |
color: ${color('accent')} !important; |
||||
image-rendering: crisp-edges; |
} |
||||
will-change: transform; |
} |
||||
} |
`}
|
||||
:root{ |
/> |
||||
--docsearch-modal-background: ${color('bg')}; |
|
||||
--docsearch-text-color: ${color('text-title')}; |
|
||||
--docsearch-icon-color: ${color('text-caption')}; |
|
||||
--docsearch-primary-color: ${color('accent')}; |
|
||||
--docsearch-input-color: ${color('text-title')}; |
|
||||
--docsearch-highlight-color: ${color('bg-alt')}; |
|
||||
--docsearch-placeholder-color: ${color('text-caption')}; |
|
||||
--docsearch-container-background: rgba(22,22,22,0.75); |
|
||||
--docsearch-modal-shadow: inset 0px 0px 1px 1px ${color('border')}; |
|
||||
--docsearch-searchbox-background: var(--ifm-color-emphasis-300); |
|
||||
--docsearch-searchbox-focus-background: ${color('bg')};; |
|
||||
--docsearch-searchbox-shadow: inset 0px 0px 1px 1px ${color('border')}; |
|
||||
--docsearch-hit-color: var(--ifm-color-emphasis-800); |
|
||||
--docsearch-hit-active-color: ${color('text-title')}; |
|
||||
--docsearch-hit-background: ${color('bg')}; |
|
||||
--docsearch-hit-shadow: inset 0px 0px 1px 1px ${color('border')}; |
|
||||
--docsearch-key-gradient: transparent; |
|
||||
--docsearch-key-shadow: inset 0px -2px 0px 0px transparent,inset 0px 0px 1px 1px transparent,0px 1px 2px 1px transparent; |
|
||||
--docsearch-footer-background: ${color('bg')}; |
|
||||
--docsearch-footer-shadow: inset 0px 0px 1px 1px ${color('border')}; |
|
||||
--docsearch-logo-color: #5468ff; |
|
||||
--docsearch-muted-color: #969faf; |
|
||||
--docsearch-modal-width: 560px; |
|
||||
--docsearch-modal-height: 600px; |
|
||||
--docsearch-searchbox-height: 56px; |
|
||||
--docsearch-hit-height: 56px; |
|
||||
--docsearch-footer-height: 44px; |
|
||||
--docsearch-spacing: 12px; |
|
||||
--docsearch-icon-stroke-width: 1.4; |
|
||||
} |
|
||||
.DocSearch-Container{ |
|
||||
z-index: 99999; |
|
||||
} |
|
||||
.DocSearch-SearchBar{ |
|
||||
padding: var(--docsearch-spacing); |
|
||||
} |
|
||||
.DocSearch-Reset:hover{ |
|
||||
color: ${color('accent')}; |
|
||||
} |
|
||||
.DocSearch-Form{ |
|
||||
input{ |
|
||||
color: ${color('text-title')}; |
|
||||
} |
|
||||
&:focus-within{ |
|
||||
box-shadow: 0 0 0 3px rgba(170, 179, 255, 0.75); |
|
||||
} |
|
||||
} |
|
||||
.DocSearch-Help{ |
|
||||
text-align: center; |
|
||||
} |
|
||||
.DocSearch-Prefill{ |
|
||||
color: ${color('accent')} !important; |
|
||||
} |
|
||||
.DocSearch-Hit{ |
|
||||
mark{ |
|
||||
color: ${color('accent')} !important; |
|
||||
} |
|
||||
} |
|
||||
.DocSearch-Hit-source{ |
|
||||
color: ${color('text-caption')}; |
|
||||
} |
|
||||
.DocSearch-MagnifierLabel{ |
|
||||
color: ${color('accent')}; |
|
||||
} |
|
||||
|
|
||||
pre{ |
|
||||
display: inline-block; |
|
||||
} |
|
||||
p, ul, ol, table { |
|
||||
color: ${color('text-body')}; |
|
||||
a > pre { |
|
||||
color: ${color('accent')} !important; |
|
||||
} |
|
||||
} |
|
||||
`;
|
|
||||
export const MdxOverrides: React.FC<any> = props => ( |
|
||||
<> |
|
||||
<GlobalStyles /> |
|
||||
</> |
|
||||
); |
); |
||||
|
export const MdxOverrides = GlobalStyles; |
||||
|
|||||
@ -1,36 +1,47 @@ |
|||||
import * as React from 'react'; |
import * as React from 'react'; |
||||
import { Text as BaseText, BoxProps, color } from '@blockstack/ui'; |
import { Box, BoxProps, color } from '@stacks/ui'; |
||||
import { getCapsizeStyles } from '@components/mdx/typography'; |
import { getCapsizeStyles } from '@components/mdx/typography'; |
||||
|
import { forwardRefWithAs, ForwardRefExoticComponentWithAs } from '@stacks/ui-core'; |
||||
|
|
||||
export const Text = React.forwardRef((props: BoxProps, ref) => ( |
export const Text: ForwardRefExoticComponentWithAs<BoxProps, 'span'> = forwardRefWithAs< |
||||
<BaseText ref={ref} color={color('text-body')} {...getCapsizeStyles(16, 26)} {...props} /> |
BoxProps, |
||||
)); |
'span' |
||||
|
>((props, ref) => <Box as="span" ref={ref} color={color('text-body')} {...props} />); |
||||
|
|
||||
export const Caption: React.FC<BoxProps> = props => ( |
export const Caption: ForwardRefExoticComponentWithAs< |
||||
|
BoxProps, |
||||
|
'span' |
||||
|
> = forwardRefWithAs((props, ref) => ( |
||||
<Text |
<Text |
||||
style={{ userSelect: 'none' }} |
style={{ userSelect: 'none' }} |
||||
color={color('text-caption')} |
color={color('text-caption')} |
||||
display="inline-block" |
display="inline-block" |
||||
|
ref={ref} |
||||
{...getCapsizeStyles(14, 22)} |
{...getCapsizeStyles(14, 22)} |
||||
{...props} |
{...props} |
||||
/> |
/> |
||||
); |
)); |
||||
|
|
||||
export const Title: React.FC<BoxProps> = React.forwardRef((props, ref) => ( |
export const Title: ForwardRefExoticComponentWithAs< |
||||
|
BoxProps, |
||||
|
'span' |
||||
|
> = React.forwardRef((props, ref) => ( |
||||
<Text ref={ref} display="inline-block" color={color('text-title')} {...props} /> |
<Text ref={ref} display="inline-block" color={color('text-title')} {...props} /> |
||||
)); |
)); |
||||
|
|
||||
export type LinkProps = BoxProps & Partial<React.AnchorHTMLAttributes<HTMLAnchorElement>>; |
export type LinkProps = BoxProps & Partial<React.AnchorHTMLAttributes<HTMLAnchorElement>>; |
||||
|
|
||||
export const Link = React.forwardRef(({ _hover = {}, ...props }: LinkProps, ref) => ( |
export const Link: ForwardRefExoticComponentWithAs<LinkProps, 'a'> = forwardRefWithAs( |
||||
<Text |
({ _hover = {}, ...props }: LinkProps, ref) => ( |
||||
display="inline-block" |
<Text |
||||
_hover={{ |
display="inline-block" |
||||
textDecoration: 'underline', |
_hover={{ |
||||
cursor: 'pointer', |
textDecoration: 'underline', |
||||
..._hover, |
cursor: 'pointer', |
||||
}} |
..._hover, |
||||
ref={ref} |
}} |
||||
{...props} |
ref={ref} |
||||
/> |
{...props} |
||||
)); |
/> |
||||
|
) |
||||
|
); |
||||
|
|||||
@ -1,18 +1,21 @@ |
|||||
import React from 'react'; |
import { AppProps } from 'next/app'; |
||||
import type { AppProps } from 'next/app'; |
import * as React from 'react'; |
||||
|
import 'modern-normalize/modern-normalize.css'; |
||||
import { CSSReset, ThemeProvider } from '@blockstack/ui'; |
|
||||
import { AppWrapper } from '@components/app-wrapper'; |
import { AppWrapper } from '@components/app-wrapper'; |
||||
|
import { theme } from '@stacks/ui'; |
||||
|
import { CacheProvider, ThemeProvider } from '@emotion/react'; |
||||
|
import { cache } from '@emotion/css'; |
||||
|
|
||||
import '@docsearch/css'; |
import '@docsearch/css'; |
||||
|
|
||||
const MyApp: React.FC<AppProps> = ({ Component, pageProps, ...rest }) => ( |
const MyApp: React.FC<AppProps> = ({ Component, pageProps, ...rest }) => ( |
||||
<ThemeProvider> |
<CacheProvider value={cache}> |
||||
<CSSReset /> |
<ThemeProvider theme={theme}> |
||||
<AppWrapper {...rest}> |
<AppWrapper {...rest}> |
||||
<Component {...pageProps} /> |
<Component {...pageProps} /> |
||||
</AppWrapper> |
</AppWrapper> |
||||
</ThemeProvider> |
</ThemeProvider> |
||||
|
</CacheProvider> |
||||
); |
); |
||||
|
|
||||
export default MyApp; |
export default MyApp; |
||||
|
|||||
File diff suppressed because it is too large
Loading…
Reference in new issue