diff --git a/components/src/components/atoms/Banner/Banner.tsx b/components/src/components/atoms/Banner/Banner.tsx index f2e82868..44ed3430 100644 --- a/components/src/components/atoms/Banner/Banner.tsx +++ b/components/src/components/atoms/Banner/Banner.tsx @@ -116,6 +116,7 @@ const SVGBox = ({ const ActionButtonBox = (props: BoxProps) => ( + color?: Color +} & Omit type WithAnchor = { /** The href attribute for the anchor element. */ @@ -78,8 +81,8 @@ type ButtonBoxProps = { $shape?: BaseProps['shape'] $size?: BaseProps['size'] $type?: BaseProps['type'] - $center: boolean | undefined $colorStyle: WithColorStyle['colorStyle'] + $color?: Color $hasCounter?: boolean $width: any } @@ -96,6 +99,7 @@ const ButtonBox = React.forwardRef< $colorStyle = 'accentPrimary', $hasCounter, $width = '$full', + $color, as, ...props }, @@ -121,12 +125,16 @@ const ButtonBox = React.forwardRef< borderWidth="$1x" boxShadow={$shadow ? '$0.25 $grey' : 'none'} color={{ - base: getValueForColourStyle($colorStyle, 'content'), + base: getValidatedColor( + $color, + getValueForColourStyle($colorStyle, 'content'), + ), disabled: getValueForColourStyle('disabled', 'content'), }} cursor={{ base: 'pointer', disabled: 'not-allowed' }} display="flex" fill={getValueForColourStyle($colorStyle, 'content')} + fontSize={getValueForSize($size, 'fontSize')} fontWeight="$bold" gap="$2" height={getValueForSize($size, 'height')} @@ -155,16 +163,10 @@ const ButtonBox = React.forwardRef< const SVGBox = ({ $size, - $colorStyle, ...props -}: BoxProps & { $size: 'small' | 'medium' | 'flexible'; $colorStyle: any }) => ( - -) +}: BoxProps & { + $size: 'small' | 'medium' | 'flexible' +}) => const ContentBox = ({ $fullWidth, @@ -267,6 +269,7 @@ export const Button = React.forwardRef( width, fullWidthContent, count, + color, shouldShowTooltipIndicator, as: asProp, ...props @@ -286,7 +289,7 @@ export const Button = React.forwardRef( .with([true, false, false], () => ) .with([P._, true, P._], () => React.isValidElement(prefix) ? ( - + ) : null, ) .otherwise(() => null) @@ -295,30 +298,23 @@ export const Button = React.forwardRef( .with([true, false, true], () => ) .with([P._, P._, true], () => React.isValidElement(suffix) ? ( - + ) : null, ) .otherwise(() => null) childContent = ( <> - {!!prefixOrLoading && prefixOrLoading} + {prefixOrLoading} {labelContent} - {!!suffixOrLoading && ( - - )} + {suffixOrLoading} ) } return ( {shouldShowTooltipIndicator && ( diff --git a/components/src/components/atoms/Button/utils/getValidatedColor.ts b/components/src/components/atoms/Button/utils/getValidatedColor.ts new file mode 100644 index 00000000..14f209a4 --- /dev/null +++ b/components/src/components/atoms/Button/utils/getValidatedColor.ts @@ -0,0 +1,16 @@ +import { BaseColour, validateBaseColour } from '@/src/tokens/color3' + +export type Color = BaseColour + +export type WithColor = { color: Color } + +export const getValidatedColor = ( + color?: Color, + fallback = '$textPrimary', +): string => { + if (!color) return fallback + const matches = color.match('^(.*?)(Primary|Secondary)?$') + const baseColor = matches?.[1] || 'accent' + const validatedColor = validateBaseColour(baseColor, 'accent') + return `$${validatedColor}Primary` +} diff --git a/components/src/components/atoms/Card/Card.tsx b/components/src/components/atoms/Card/Card.tsx index bbb08810..a6c51719 100644 --- a/components/src/components/atoms/Card/Card.tsx +++ b/components/src/components/atoms/Card/Card.tsx @@ -18,6 +18,7 @@ const ContainerBox = (props: BoxProps) => ( flexDirection="column" gap="$4" padding={{ xs: '$4', sm: '$6' }} + position="relative" {...props} /> ) diff --git a/components/src/components/atoms/Field/Field.tsx b/components/src/components/atoms/Field/Field.tsx index 8dc2a25f..e33c9357 100644 --- a/components/src/components/atoms/Field/Field.tsx +++ b/components/src/components/atoms/Field/Field.tsx @@ -142,8 +142,12 @@ const LabelContent = ({ > {label} - - {required && required} + {required && ( + <> + + required + + )} {labelSecondary && ( diff --git a/components/src/components/atoms/ThemeProvider/ThemeProvider.tsx b/components/src/components/atoms/ThemeProvider/ThemeProvider.tsx new file mode 100644 index 00000000..138997ff --- /dev/null +++ b/components/src/components/atoms/ThemeProvider/ThemeProvider.tsx @@ -0,0 +1,38 @@ +import * as React from 'react' + +type Mode = 'dark' | 'light' + +type ThemeContextValue = { + mode: Mode + setMode: (mode: Mode) => void +} + +const ThemeContext = React.createContext(null) + +type Props = { + defaultMode?: Mode +} +export const ThemeProvider = ({ + defaultMode = 'light', + children, +}: React.PropsWithChildren) => { + const [mode, setMode] = React.useState(defaultMode) + + const value = React.useMemo(() => ({ mode, setMode }), [mode]) + + React.useEffect(() => { + const root = document.querySelector(':root') + if (root) { + root.setAttribute('data-theme', mode) + } + }, [mode]) + return {children} +} + +export const useTheme = () => { + const context = React.useContext(ThemeContext) + if (context === null) { + throw new Error('useTheme must be used within a ThemeProvider') + } + return context +} diff --git a/components/src/components/atoms/ThemeProvider/index.ts b/components/src/components/atoms/ThemeProvider/index.ts new file mode 100644 index 00000000..0b666958 --- /dev/null +++ b/components/src/components/atoms/ThemeProvider/index.ts @@ -0,0 +1 @@ +export { ThemeProvider, useTheme } from './ThemeProvider' diff --git a/components/src/components/atoms/Typography/Typography.tsx b/components/src/components/atoms/Typography/Typography.tsx index cf9a742c..e0fce815 100644 --- a/components/src/components/atoms/Typography/Typography.tsx +++ b/components/src/components/atoms/Typography/Typography.tsx @@ -18,12 +18,12 @@ type ContainerProps = { const ContainerBox = React.forwardRef( ( - { $ellipsis, $fontVariant = 'body', $color, $font, $weight, ...props }, + { $ellipsis, $fontVariant = 'body', $color, $font, $weight, as, ...props }, ref, ) => ( type Props = { /** element type of container */ - asProp?: + as?: | 'code' | 'div' | 'h1' @@ -74,7 +74,7 @@ type Props = { export const Typography = React.forwardRef( ( { - asProp, + as, children, ellipsis, className = '', @@ -82,11 +82,11 @@ export const Typography = React.forwardRef( font = 'sans', color = 'textPrimary', weight, + textTransform, ...props }, ref, ) => { - console.log('className', className) return ( ( $font={font} $fontVariant={fontVariant} $weight={weight} - as={asProp} + as={as} className={className} ref={ref} + textTransform={textTransform} > {children} diff --git a/components/src/components/atoms/index.ts b/components/src/components/atoms/index.ts index a73bd207..d43f6a15 100644 --- a/components/src/components/atoms/index.ts +++ b/components/src/components/atoms/index.ts @@ -17,3 +17,4 @@ export { Typography } from './Typography' export { VisuallyHidden } from './VisuallyHidden' export { Box } from './Box' export type { BoxProps } from './Box' +export { ThemeProvider, useTheme } from './ThemeProvider' diff --git a/components/src/components/molecules/Checkbox/styles.css.ts b/components/src/components/molecules/Checkbox/styles.css.ts index 788ec883..96d2ddf0 100644 --- a/components/src/components/molecules/Checkbox/styles.css.ts +++ b/components/src/components/molecules/Checkbox/styles.css.ts @@ -21,3 +21,7 @@ globalStyle(`${checkbox}:not(:checked):not(:hover) ~ ${icon}`, { globalStyle(`${checkbox}:not(:checked):hover ~ ${icon}`, { backgroundColor: `${modeVars.color.backgroundPrimary} !important`, }) + +globalStyle(`${checkbox}:disabled:not(:checked):hover ~ ${icon}`, { + backgroundColor: `${modeVars.color.border} !important`, +}) diff --git a/components/src/components/molecules/CurrencyToggle/CurrencyToggle.tsx b/components/src/components/molecules/CurrencyToggle/CurrencyToggle.tsx index e186078b..db50f99f 100644 --- a/components/src/components/molecules/CurrencyToggle/CurrencyToggle.tsx +++ b/components/src/components/molecules/CurrencyToggle/CurrencyToggle.tsx @@ -16,7 +16,12 @@ export type Props = { } & Omit, 'size'> const Container = (props: BoxProps) => ( - + ) const Label = ({ diff --git a/components/src/components/molecules/Profile/Profile.tsx b/components/src/components/molecules/Profile/Profile.tsx index 1658b04d..c9093945 100644 --- a/components/src/components/molecules/Profile/Profile.tsx +++ b/components/src/components/molecules/Profile/Profile.tsx @@ -60,6 +60,7 @@ const Container = React.forwardRef( }} flexDirection="row" gap="$2" + height={getValueForSize($size, 'height')} justifyContent="flex-start" maxWidth={getValueForSize($size, 'maxWidth')} padding={getValueForSize($size, 'padding')} diff --git a/components/src/components/molecules/ThemeToggle/ThemeToggle.test.tsx b/components/src/components/molecules/ThemeToggle/ThemeToggle.test.tsx new file mode 100644 index 00000000..40aa5288 --- /dev/null +++ b/components/src/components/molecules/ThemeToggle/ThemeToggle.test.tsx @@ -0,0 +1,21 @@ +import * as React from 'react' + +import { ThemeProvider } from 'styled-components' + +import { cleanup, render } from '@/test' + +import { lightTheme } from '@/src/tokens' + +import { ThemeToggle } from './ThemeToggle' + +describe('', () => { + afterEach(cleanup) + + it('renders', () => { + render( + + + , + ) + }) +}) diff --git a/components/src/components/molecules/ThemeToggle/ThemeToggle.tsx b/components/src/components/molecules/ThemeToggle/ThemeToggle.tsx new file mode 100644 index 00000000..e34d95c8 --- /dev/null +++ b/components/src/components/molecules/ThemeToggle/ThemeToggle.tsx @@ -0,0 +1,131 @@ +import * as React from 'react' + +import { useId } from '../../../hooks/useId' +import { Box, BoxProps } from '../../atoms/Box/Box' +import * as styles from './styles.css' +import { Color, getValidatedColor } from './utils/getValidatedColor' +import { MoonSVG, SunSVG } from '../..' +import { getValueForSize } from './utils/getValueForSize' + +export type Size = 'extraSmall' | 'small' | 'medium' + +export type Mode = 'light' | 'dark' + +export type Props = { + size?: Size + color?: Color + mode?: Mode +} & Omit, 'size'> + +const Container = (props: BoxProps) => ( + +) + +const Label = ({ + $size, + $mode, + ...props +}: BoxProps & { $size: Size; $mode: Mode }) => ( + +) + +const Checkbox = React.forwardRef( + ({ $size, ...props }, ref) => ( + + ), +) + +const Slider = ({ + $size, + $color, + ...props +}: BoxProps & { $size: Size; $color: Color }) => ( + +) + +export const ThemeToggle = React.forwardRef( + ({ size = 'medium', color = 'accent', disabled, ...props }, ref) => { + const id = useId() + return ( + + + + + + + ) + }, +) + +ThemeToggle.displayName = 'ThemeToggle' diff --git a/components/src/components/molecules/ThemeToggle/index.ts b/components/src/components/molecules/ThemeToggle/index.ts new file mode 100644 index 00000000..c457d55d --- /dev/null +++ b/components/src/components/molecules/ThemeToggle/index.ts @@ -0,0 +1,2 @@ +export { ThemeToggle } from './ThemeToggle' +export type { Props } from './ThemeToggle' diff --git a/components/src/components/molecules/ThemeToggle/styles.css.ts b/components/src/components/molecules/ThemeToggle/styles.css.ts new file mode 100644 index 00000000..0747ccb2 --- /dev/null +++ b/components/src/components/molecules/ThemeToggle/styles.css.ts @@ -0,0 +1,31 @@ +import { globalStyle, style } from '@vanilla-extract/css' + +import { modeVars } from '@/src/css/theme.css' + +export const labelEth = style({}) + +export const labelFiat = style({}) + +export const checkbox = style({}) + +export const slider = style({}) + +globalStyle(`${checkbox}:not(:checked) ~ ${slider}`, { + transform: 'translateX(-50%)', +}) + +globalStyle(`${checkbox}:checked ~ ${slider}`, { + transform: 'translateX(50%)', +}) + +globalStyle(`${checkbox}:disabled ~ ${slider}`, { + backgroundColor: modeVars.color.greyPrimary, +}) + +globalStyle(`${checkbox}:checked ~ ${labelEth}`, { + color: modeVars.color.greyPrimary, +}) + +globalStyle(`${checkbox}:not(:checked) ~ ${labelFiat}`, { + color: modeVars.color.greyPrimary, +}) diff --git a/components/src/components/molecules/ThemeToggle/utils/getValidatedColor.ts b/components/src/components/molecules/ThemeToggle/utils/getValidatedColor.ts new file mode 100644 index 00000000..9e7b938f --- /dev/null +++ b/components/src/components/molecules/ThemeToggle/utils/getValidatedColor.ts @@ -0,0 +1,12 @@ +import { BaseColour, validateBaseColour } from '@/src/tokens/color3' + +export type Color = BaseColour + +export type WithColor = { color: Color } + +export const getValidatedColor = (color: Color = 'accent'): string => { + const matches = color.match('^(.*?)(Primary|Secondary)?$') + const baseColor = matches?.[1] || 'accent' + const validatedColor = validateBaseColour(baseColor, 'accent') + return `$${validatedColor}Primary` +} diff --git a/components/src/components/molecules/ThemeToggle/utils/getValueForSize.ts b/components/src/components/molecules/ThemeToggle/utils/getValueForSize.ts new file mode 100644 index 00000000..c8b103d0 --- /dev/null +++ b/components/src/components/molecules/ThemeToggle/utils/getValueForSize.ts @@ -0,0 +1,32 @@ +import type { Size } from '../ThemeToggle' +type Properties = { + width: string + height: string + knobSize: string +} +type Property = keyof Properties + +const sizeMap: { [key in Size]: Properties } = { + extraSmall: { + width: '$12', + height: '$6.5', + knobSize: '$5.5', + }, + small: { + width: '$20', + height: '$10', + knobSize: '$9', + }, + medium: { + width: '$24', + height: '$12', + knobSize: '$11', + }, +} + +export const getValueForSize = ( + size: Size, + property: T, +): Properties[T] => { + return sizeMap[size]?.[property] || sizeMap.small[property] +} diff --git a/components/src/components/molecules/Tooltip/Tooltip.tsx b/components/src/components/molecules/Tooltip/Tooltip.tsx index c99424a2..157803a5 100644 --- a/components/src/components/molecules/Tooltip/Tooltip.tsx +++ b/components/src/components/molecules/Tooltip/Tooltip.tsx @@ -37,7 +37,7 @@ const TooltipPopoverElement = ({ {children} path.join('-').replace('.', '_').replace('/', '__') diff --git a/components/src/globalStyles.tsx b/components/src/globalStyles.tsx index 850f997c..1f7e24a4 100644 --- a/components/src/globalStyles.tsx +++ b/components/src/globalStyles.tsx @@ -1,165 +1,6 @@ /* stylelint-disable property-no-unknown */ import { createGlobalStyle, css } from 'styled-components' -const GlobalStyle = createGlobalStyle( - ({ theme }) => css` - *, - ::before, - ::after { - box-sizing: border-box; - margin: 0; - padding: 0; - font-family: ${theme.fonts['sans']}; - border-color: ${theme.colors.greyLight}; - border-style: ${theme.borderStyles['solid']}; - border-width: 0; - color: currentColor; - font-size: 100%; - font-feature-settings: 'ss01' on, 'ss03' on; - vertical-align: baseline; - } - - [data-js-focus-visible] &:focus:not([data-focus-visible-added]) { - outline: none; - } - - html { - font-size: ${theme.fontSizes.body}; - color: ${theme.colors.text}; - text-rendering: optimizeLegibility; - background: radial-gradient( - 40.48% 67.6% at 50% 32.4%, - #ecf4ff 0%, - #f7f7ff 52.77%, - #f7f7f7 100% - ), - #ffffff; - } - - body { - line-height: normal; - } - - article, - aside, - details, - div, - figcaption, - figure, - footer, - header, - hgroup, - menu, - nav, - section { - display: block; - } - - ul, - ol { - list-style: none; - } - - blockquote { - quotes: none; - - &::before, - &::after { - content: ''; - } - } - - table { - border-collapse: collapse; - border-spacing: 0; - } - - fieldset { - display: block; - appearance: none; - outline: none; - &:placeholder { - color: ${theme.colors.text}; - opacity: 1; - } - } - - mark { - background-color: transparent; - color: inherit; - } - - select { - display: block; - appearance: none; - outline: none; - &:placeholder { - color: ${theme.colors.text}; - opacity: 1; - } - - &:-ms-expand { - display: none; - } - } - - input { - display: block; - appearance: none; - outline: none; - &:placeholder { - color: ${theme.colors.text}; - opacity: 1; - } - &::-webkit-outer-spin-button { - webkit-appearance: none; - } - &::-webkit-inner-spin-button { - webkit-appearance: none; - } - &::-ms-clear { - display: none; - } - &::-webkit-search-cancel-button { - webkit-appearance: none; - } - } - - button { - background: none; - } - - a { - text-decoration: none; - color: inherit; - } - - .indicator-container { - position: relative; - &::after { - position: absolute; - top: -${theme.space['0.5']}; - right: -${theme.space['0.5']}; - content: ''; - width: ${theme.space['4']}; - height: ${theme.space['4']}; - background-color: var(--indicator-color); - border-radius: ${theme.radii.full}; - border: ${theme.space['0.5']} solid ${theme.colors.greySurface}; - transform: scale(0); - opacity: 0; - transition: all 0.2s ease-in-out; - } - &[type='button']::after { - top: -${theme.space['1']}; - right: -${theme.space['1']}; - } - &[data-indicator='true']::after { - transform: scale(1); - opacity: 1; - } - } - `, -) +const GlobalStyle = createGlobalStyle(() => css``) export default GlobalStyle diff --git a/components/src/icons/Brush.svg b/components/src/icons/Brush.svg new file mode 100644 index 00000000..1c013dda --- /dev/null +++ b/components/src/icons/Brush.svg @@ -0,0 +1,3 @@ + + + diff --git a/components/src/icons/Grid.svg b/components/src/icons/Grid.svg new file mode 100644 index 00000000..54081d1e --- /dev/null +++ b/components/src/icons/Grid.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/components/src/icons/Star.svg b/components/src/icons/Star.svg new file mode 100644 index 00000000..c7606bc2 --- /dev/null +++ b/components/src/icons/Star.svg @@ -0,0 +1,3 @@ + + + diff --git a/components/src/icons/Trash.svg b/components/src/icons/Trash.svg new file mode 100644 index 00000000..6c4bef53 --- /dev/null +++ b/components/src/icons/Trash.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/components/src/icons/index.tsx b/components/src/icons/index.tsx index 87226b85..5f32a586 100644 --- a/components/src/icons/index.tsx +++ b/components/src/icons/index.tsx @@ -1,6 +1,7 @@ export { ReactComponent as AeroplaneSVG } from './Aeroplane.svg' export { ReactComponent as AlertSVG } from './Alert.svg' export { ReactComponent as BrowserSVG } from './Browser.svg' +export { ReactComponent as BrushSVG } from './Brush.svg' export { ReactComponent as CalendarSVG } from './Calendar.svg' export { ReactComponent as CameraSVG } from './Camera.svg' export { ReactComponent as CheckSVG } from './Check.svg' @@ -31,6 +32,7 @@ export { ReactComponent as FastForwardSVG } from './FastForward.svg' export { ReactComponent as FilterSVG } from './Filter.svg' export { ReactComponent as FlameSVG } from './Flame.svg' export { ReactComponent as GasPumpSVG } from './GasPump.svg' +export { ReactComponent as GridSVG } from './Grid.svg' export { ReactComponent as HeartSVG } from './Heart.svg' export { ReactComponent as HeartActiveSVG } from './HeartActive.svg' export { ReactComponent as HorizontalOutwardArrowsSVG } from './HorizontalOutwardArrows.svg' @@ -68,7 +70,9 @@ export { ReactComponent as RightArrowSVG } from './RightArrow.svg' export { ReactComponent as RightChevronSVG } from './RightChevron.svg' export { ReactComponent as SpannerSVG } from './Spanner.svg' export { ReactComponent as SpannerAltSVG } from './SpannerAlt.svg' +export { ReactComponent as StarSVG } from './Star.svg' export { ReactComponent as SunSVG } from './Sun.svg' +export { ReactComponent as TrashSVG } from './Trash.svg' export { ReactComponent as UpArrowSVG } from './UpArrow.svg' export { ReactComponent as UpChevronSVG } from './UpChevron.svg' export { ReactComponent as UpCircleSVG } from './UpCircle.svg' diff --git a/components/src/index.ts b/components/src/index.ts index 6b934f84..e798f20a 100644 --- a/components/src/index.ts +++ b/components/src/index.ts @@ -1,3 +1,4 @@ +export { commonVars, modeVars } from './css/theme.css' export * from './components' export * as Components from './components' export { tokens, baseTheme, lightTheme, darkTheme } from './tokens' diff --git a/components/src/tokens/color3.ts b/components/src/tokens/color3.ts index d6a7c2a8..74199c74 100644 --- a/components/src/tokens/color3.ts +++ b/components/src/tokens/color3.ts @@ -38,13 +38,13 @@ export type Shade = typeof shades[number] export type ShadedColor = `${BaseColour}${Capitalize}` const lightShadedColors: { [key in ShadedColor]: string } = { - accentActive: 'rgb(155,155,167)', + accentActive: 'rgb(0,54,133)', accentDim: 'rgb(5,106,255)', accentPrimary: BASE_COLOUR_MAP.blue, accentBright: 'rgb(86,154,255)', accentLight: 'rgb(209,228,255)', accentSurface: 'rgb(238,245,255)', - blueActive: 'rgb(155,155,167)', + blueActive: 'rgb(0,54,133)', blueDim: 'rgb(5,106,255)', bluePrimary: BASE_COLOUR_MAP.blue, blueBright: 'rgb(86,154,255)', diff --git a/components/src/tokens/space.ts b/components/src/tokens/space.ts index 58de66a8..5d4206b0 100644 --- a/components/src/tokens/space.ts +++ b/components/src/tokens/space.ts @@ -24,6 +24,7 @@ export const space = { '5': '1.25rem', '5.5': '1.375rem', '6': '1.5rem', + '6.5': '1.625rem', '7': '1.75rem', '7.5': '1.875rem', '8': '2rem', @@ -78,6 +79,6 @@ export const space = { viewHeight: '100vh', viewWidth: '100vw', none: '0', - dialogMobileWidth: 'calc(100vw + 2 * 1rem)', - dialogDesktopWidth: 'calc(100vw + 2 * 1.5rem)', + dialogMobileWidth: 'calc(100% + 2 * 1rem)', + dialogDesktopWidth: 'calc(100% + 2 * 1.5rem)', } diff --git a/components/src/types/index.ts b/components/src/types/index.ts index 52b63dee..a4c471f3 100644 --- a/components/src/types/index.ts +++ b/components/src/types/index.ts @@ -1,6 +1,5 @@ import * as React from 'react' -import 'styled-components' import { Hue as TokenHue, Mode as TokenMode, Tokens } from '@/src/tokens' export type AllOrNone = T | { [K in keyof T]?: never } @@ -37,11 +36,6 @@ export type DefaultTheme = Tokens export type Size = 'small' | 'medium' | 'extraSmall' | undefined -declare module 'styled-components' { - // eslint-disable-next-line @typescript-eslint/no-empty-interface - interface DefaultTheme extends Tokens {} -} - export type OptionalTitle = AllOrNone<{ title: string titleId: string diff --git a/docs/next.config.js b/docs/next.config.js index 58a83652..d8b8536b 100644 --- a/docs/next.config.js +++ b/docs/next.config.js @@ -83,6 +83,11 @@ const config = { __dirname, '../components', ) + config.module.rules.push({ + test: /\.svg$/i, + issuer: /\.(js|ts)x?$/, + use: ['@svgr/webpack'], + }) return config }, reactStrictMode: true, diff --git a/docs/package.json b/docs/package.json index 568096c1..e731efb4 100644 --- a/docs/package.json +++ b/docs/package.json @@ -27,6 +27,7 @@ "nookies": "^2.5.2", "playroom": "^0.28.1", "prism-react-renderer": "^1.2.1", + "prism-theme-vars": "^0.2.4", "react": "^17.0.2", "react-dom": "^17.0.2", "react-element-to-jsx-string": "^14.3.4", @@ -38,7 +39,7 @@ "@mdx-js/loader": "^1.6.22", "@mdx-js/react": "^1.6.22", "@next/mdx": "^12.0.1", - "@svgr/webpack": "^6.2.1", + "@svgr/webpack": "^6.3.1", "@types/fs-extra": "^9.0.13", "@types/glob": "^7.2.0", "@types/lodash": "^4.14.176", diff --git a/docs/src/assets/ENSLogo.svg b/docs/src/assets/ENSLogo.svg new file mode 100644 index 00000000..42fbe789 --- /dev/null +++ b/docs/src/assets/ENSLogo.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/src/assets/Figma.svg b/docs/src/assets/Figma.svg new file mode 100644 index 00000000..bc8f26ca --- /dev/null +++ b/docs/src/assets/Figma.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/docs/src/assets/Github.svg b/docs/src/assets/Github.svg new file mode 100644 index 00000000..d80ab06f --- /dev/null +++ b/docs/src/assets/Github.svg @@ -0,0 +1,3 @@ + + + diff --git a/docs/src/components/CodeBlock.tsx b/docs/src/components/CodeBlock/CodeBlock.tsx similarity index 65% rename from docs/src/components/CodeBlock.tsx rename to docs/src/components/CodeBlock/CodeBlock.tsx index 17a589ce..745f6e3f 100644 --- a/docs/src/components/CodeBlock.tsx +++ b/docs/src/components/CodeBlock/CodeBlock.tsx @@ -1,24 +1,22 @@ import * as React from 'react' -import Highlight, { - Language, - PrismTheme, - defaultProps, -} from 'prism-react-renderer' +import Highlight, { Language, defaultProps } from 'prism-react-renderer' import dynamic from 'next/dynamic' import vsLight from 'prism-react-renderer/themes/vsLight' -import styled, { css, useTheme } from 'styled-components' +import vsDark from 'prism-react-renderer/themes/vsDark' +import styled, { css } from 'styled-components' import { Colors } from '@ensdomains/thorin' import { useIsMounted } from '~/utils/isMounted' import { PlayroomStateProvider } from '~/playroom/PlayroomState' -import { CopyButton } from './CopyButton' -import type { Props as CodePreviewProps } from './CodePreview' +import { CopyButton } from '../CopyButton' +import type { Props as CodePreviewProps } from '../CodePreview' +import { PropsWithChildren } from 'react' +import { Box, useTheme } from '@ensdomains/thorin' const CodePreviewContainer = styled.div( ({ theme }) => css` - background-color: ${theme.colors.greySurface}; border-radius: ${theme.radii['large']}; height: ${theme.space['48']}; width: ${theme.space['full']}; @@ -26,18 +24,24 @@ const CodePreviewContainer = styled.div( ) const CodePreview = dynamic( - () => import('./CodePreview').then((mod) => mod.CodePreview), + () => import('../CodePreview').then((mod) => mod.CodePreview), { loading: () => , }, ) -const Pre = styled.pre( - ({ theme }) => css` - border-radius: ${theme.radii['2xLarge']}; - padding: ${theme.space['6']}; - position: relative; - `, +const Pre = (props: PropsWithChildren<{}>) => ( + ) const CopyButtonContainer = styled.div( @@ -73,7 +77,7 @@ type Props = { } export const CodeBlock = ({ - backgroundColor, + // backgroundColor, children, className, live, @@ -81,33 +85,19 @@ export const CodeBlock = ({ minHeight, }: Props) => { const isMounted = useIsMounted() - const { colors } = useTheme() - const theme = vsLight - const modifiedTheme: PrismTheme | undefined = isMounted - ? { - ...theme, - plain: { - ...theme.plain, - color: colors.text, - backgroundColor: colors.greySurface, - }, - styles: [ - ...theme.styles, - { types: ['gray'], style: { color: '#A2A2A2' } }, - ], - } - : undefined - + const theme = useTheme() + const prismTheme = theme.mode === 'dark' ? vsDark : vsLight const code = children.trim().replace(RegExp('^;'), '') + if (!isMounted) return null if (live) return ( ) @@ -116,13 +106,24 @@ export const CodeBlock = ({ return ( {/* eslint-disable react/no-array-index-key */} - {({ className, style, tokens, getLineProps, getTokenProps }) => ( - 
+      {({
+        // className,
+        // style,
+        tokens,
+        getLineProps,
+        getTokenProps,
+      }) => (
+        
           
             
           
diff --git a/docs/src/components/CodePreview/CodePreview.tsx b/docs/src/components/CodePreview.tsx
similarity index 69%
rename from docs/src/components/CodePreview/CodePreview.tsx
rename to docs/src/components/CodePreview.tsx
index 3a54519e..403b0c4e 100644
--- a/docs/src/components/CodePreview/CodePreview.tsx
+++ b/docs/src/components/CodePreview.tsx
@@ -1,23 +1,22 @@
 import * as React from 'react'
-import styled, { css, useTheme } from 'styled-components'
 import { default as NextImage } from 'next/image'
 import { default as NextLink } from 'next/link'
 import { LiveEditor, LiveError, LivePreview, LiveProvider } from 'react-live'
 import { mdx } from '@mdx-js/react'
 import { PrismTheme } from 'prism-react-renderer'
 
-import { Button, Colors, Components } from '@ensdomains/thorin'
+import { Button, Colors, Components, UpChevronSVG } from '@ensdomains/thorin'
 
 import { createPlayroomLink } from '~/utils/playroom'
 import { usePlayroomStore } from '~/playroom/PlayroomState'
 import { avatars } from '~/playroom/useScope'
 
-import { Prism } from '../Prism'
-import ComponentWrapper from '../../playroom/ComponentWrapper'
-import { CopyButton } from '../CopyButton'
-import { DeleteMe } from '../DeleteMe'
+import { Prism } from './Prism'
+import ComponentWrapper from '../playroom/ComponentWrapper'
+import { CopyButton } from './CopyButton'
 import { Box, BoxProps } from '@ensdomains/thorin'
-import { liveEditor } from './styles.css'
+import { DownChevronSVG } from '@ensdomains/thorin'
+import { OutlinkSVG } from '@ensdomains/thorin'
 
 export type Props = {
   backgroundColor?: Colors
@@ -39,9 +38,10 @@ const Container = (props: BoxProps) => (
   
@@ -60,7 +60,7 @@ const ContainerInner = React.forwardRef<
     borderBottomLeftRadius={$expand ? '2xLarge' : 'unset'}
     borderBottomRightRadius={$expand ? '2xLarge' : 'unset'}
     overflow="auto"
-    padding="$6"
+    padding="$4"
   />
 ))
 ContainerInner.displayName = 'ComponentInner'
@@ -68,10 +68,13 @@ ContainerInner.displayName = 'ComponentInner'
 const LiveEditorContainer = (props: BoxProps) => (
   
 )
 // const LiveEditorContainer2 = styled.div(
@@ -89,15 +92,6 @@ const LiveEditorContainer = (props: BoxProps) => (
 //   `,
 // )
 
-const ButtonContainer = styled.div(
-  ({ theme }) => css`
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    gap: ${theme.space['2']};
-  `,
-)
-
 export const CodePreview = ({
   code: _code,
   expand = false,
@@ -115,7 +109,6 @@ export const CodePreview = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [_code])
   const store = usePlayroomStore()
-  const themeValue = useTheme()
 
   return (
      '/** @jsx mdx */' + code}
     >
-      
+      
         
               
@@ -176,31 +167,33 @@ export const CodePreview = ({
         )}
       
 
-      

-        
-          

-            
-          

-
-          

-            
-          

-        
-      

+      
+        

+          
+        

+
+        

+          
+        

+      
     
   )
 }
diff --git a/docs/src/components/CodePreview/index.ts b/docs/src/components/CodePreview/index.ts
deleted file mode 100644
index 60d7e7ff..00000000
--- a/docs/src/components/CodePreview/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { CodePreview } from './CodePreview'
-export type { Props } from './CodePreview'
diff --git a/docs/src/components/CodePreview/styles.css.ts b/docs/src/components/CodePreview/styles.css.ts
deleted file mode 100644
index 043dda9a..00000000
--- a/docs/src/components/CodePreview/styles.css.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { style, globalStyle } from '@vanilla-extract/css'
-export const liveEditor = style({})
-
-globalStyle(`${liveEditor} .token`, {
-  font: 'mono',
-  fontSize: '1.0625rem',
-  fontFeatureSettings: 'ss01, ss03',
-})
diff --git a/docs/src/components/CopyButton.tsx b/docs/src/components/CopyButton.tsx
index 59170065..5da052f2 100644
--- a/docs/src/components/CopyButton.tsx
+++ b/docs/src/components/CopyButton.tsx
@@ -2,6 +2,7 @@ import * as React from 'react'
 import { default as copy } from 'copy-to-clipboard'
 
 import { Button, CheckSVG, CopySVG } from '@ensdomains/thorin'
+import { Box } from '@ensdomains/thorin'
 
 type Props = {
   content: string
@@ -37,8 +38,26 @@ export const CopyButton = ({ content }: Props) => {
   }, [content])
 
   return (
-    
   )
 }
diff --git a/docs/src/components/Header.tsx b/docs/src/components/Header.tsx
index 4f25c853..94e6dfbc 100644
--- a/docs/src/components/Header.tsx
+++ b/docs/src/components/Header.tsx
@@ -1,38 +1,26 @@
 import * as React from 'react'
-import styled, { css } from 'styled-components'
 
-import { Heading, Typography } from '@ensdomains/thorin'
+import { Box, Heading, Typography } from '@ensdomains/thorin'
 
 type Props = {
   description?: React.ReactNode
   title: React.ReactNode
 }
 
-const Container = styled.div(
-  ({ theme }) => css`
-    display: flex;
-    flex-direction: column;
-    gap: ${theme.space['10']};
-  `,
-)
-
-const Description = styled(Typography)(
-  ({ theme }) => css`
-    color: ${theme.colors.textSecondary};
-    font-size: ${theme.fontSizes['extraLarge']};
-  `,
-)
-
 export const Header = ({ description, title }: Props) => {
   return (
-    

-      
+    
+      
         
           {title}
         
-
-        {description && {description}}
-      
-    

+        {description && {description}}
+      
+    
   )
 }
diff --git a/docs/src/components/MDX.tsx b/docs/src/components/MDX.tsx
index f66f0c33..e8aac3dc 100644
--- a/docs/src/components/MDX.tsx
+++ b/docs/src/components/MDX.tsx
@@ -2,47 +2,13 @@ import { MDXProviderProps } from '@mdx-js/react'
 import slugify from '@sindresorhus/slugify'
 import styled, { css } from 'styled-components'
 
-import { Heading, Typography, tokens } from '@ensdomains/thorin'
+import { Typography, tokens, Box, LinkSVG } from '@ensdomains/thorin'
 
-import { CodeBlock } from './CodeBlock'
+import { CodeBlock } from './CodeBlock/CodeBlock'
 import { Link } from './Link'
 import { SearchIcons } from './SearchIcons'
 import { PropsTable } from './PropsTable'
 
-const HoverParent = styled.a(
-  ({ theme }) => css`
-    width: ${theme.space['max']};
-    display: inline;
-  `,
-)
-
-const HoverChild = styled.div(
-  ({ theme }) => css`
-    visibility: hidden;
-    display: inline-block;
-
-    ${HoverParent}:hover & {
-      visibility: visible;
-      margin-left: ${theme.space['2']};
-      color: ${theme.colors.textTertiary};
-    }
-  `,
-)
-
-const InlineCode = styled(Typography)(
-  ({ theme }) => css`
-    color: ${theme.colors.accent};
-    font-family: ${theme.fonts['mono']};
-  `,
-)
-
-const P = styled(Typography)(
-  ({ theme }) => css`
-    color: ${theme.colors.text};
-    line-height: ${theme.lineHeights.body};
-  `,
-)
-
 const StyledLink = styled(Link)(
   ({ theme }) => css`
     color: ${theme.colors.accent};
@@ -69,19 +35,34 @@ export const MDX: MDXProviderProps['components'] = {
           marginBottom: tokens.space['6'],
         }}
       >
-        
-          
+        
+          
             {children}
-            #
-          
-        
+            }
+              display="inline-block"
+              marginLeft="$2"
+              wh="$4"
+              color="$greyPrimary"
+            >
+          
+        
       
     )
   },
-  inlineCode: ({ children }) => {children},
+  h3: ({ children }) => (
+    {children}
+  ),
+  inlineCode: ({ children }) => (
+    
+      {children}
+    
+  ),
   p: ({ children }) => (
     

-      
{children}

+      
+        {children}
+      
     

   ),
   pre: (props) => (
diff --git a/docs/src/components/Nav.tsx b/docs/src/components/Nav.tsx
index 467badc3..905fb082 100644
--- a/docs/src/components/Nav.tsx
+++ b/docs/src/components/Nav.tsx
@@ -2,20 +2,15 @@ import { useRouter } from 'next/dist/client/router'
 import * as React from 'react'
 import styled, { css } from 'styled-components'
 
-import {
-  Button,
-  EnsSVG,
-  MenuSVG,
-  Space,
-  Typography,
-  mq,
-} from '@ensdomains/thorin'
+import { Space, Typography, mq } from '@ensdomains/thorin'
 
 import { createGitHubLink } from '~/utils/github'
 import { createPlayroomLink } from '~/utils/playroom'
 import { useIsMounted } from '~/utils/isMounted'
 
 import { Link } from './Link'
+import { NavBar } from './NavBar'
+import { SideBar } from './SideBar'
 
 type Link = { name: string; route: string }
 
@@ -33,50 +28,13 @@ const initialState = {
 
 const Container = styled.div(
   ({ theme }) => css`
+    display: none;
     flex-direction: column;
     height: ${theme.space['full']};
     overflow: hidden;
-  `,
-)
-
-const ContainerInner = styled.div(
-  ({ theme }) => css`
-    ${mq.lg.min(css`
-      padding-bottom: ${theme.space['5']};
-    `)}
-  `,
-)
-
-const NavlinkContainer = styled.div(
-  ({ theme }) => css`
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex-direction: row;
-    gap: ${theme.space['5']};
-
-    ${mq.lg.min(css`
-      ${css`
-        flex-direction: column;
-      `}
-    `)}
-  `,
-)
-
-const NavLinkInner = styled.div(
-  ({ theme }) => css`
-    display: flex;
-    align-items: center;
-    flex-direction: row;
-    gap: ${theme.space['4']};
-  `,
-)
-
-const ButtonContainer = styled.div(
-  () => css`
-    ${mq.lg.min(css`
-      display: none;
-    `)}
+    position: fixed;
+    left: 0;
+    background-color: ${theme.colors.backgroundPrimary};
   `,
 )
 
@@ -154,17 +112,15 @@ export const Nav = ({ links }: Props) => {
   /* eslint-enable react-hooks/exhaustive-deps */
 
   return (
-    
-      
+    <>
+       setState((x) => ({ ...x, open: !x.open }))}
+      />
+      
+      
+        {/* 
         
-          
-            
-              
-              
-                ENS
-              
-            
-          
           
             
           
+          
+            
+              
+              
+                ENS
+              
+            
+          
         
-      
+       */}
 
-      
-        
-          
-            GitHub
-            Playroom
-          
-
-          
-            Guides
+        
+          
             
-              
-                Development
-              
-              
-                Playroom
-              
+              GitHub
+              Playroom
             
-          
 
-          
-            Components
-            {links.map((x) => (
-              
-                
-                  {x.name}
-                
-                
-                  {x.links.map((y) => (
-                    
-                      {y.name}
-                    
-                  ))}
-                
+            
+              Guides
+              
+                
+                  Development
+                
+                
+                  Playroom
+                
               
-            ))}
+            
+
+            
+              Components
+              {links.map((x) => (
+                
+                  
+                    {x.name}
+                  
+                  
+                    {x.links.map((y) => (
+                      
+                        {y.name}
+                      
+                    ))}
+                  
+                
+              ))}
+            
           
-        
-      
-    
+        
+      
+    
   )
 }
 
diff --git a/docs/src/components/NavBar.tsx b/docs/src/components/NavBar.tsx
new file mode 100644
index 00000000..2e93be54
--- /dev/null
+++ b/docs/src/components/NavBar.tsx
@@ -0,0 +1,72 @@
+import { Box, MenuSVG, CrossSVG } from '@ensdomains/thorin'
+import LogoSVG from '~/assets/ENSLogo.svg'
+import GithubSVG from '~/assets/Github.svg'
+import FigmaSVG from '~/assets/Figma.svg'
+import { Link } from './Link'
+import { Tag } from '@ensdomains/thorin'
+
+export const NavBar = ({
+  open,
+  onToggle,
+}: {
+  open: boolean
+  onToggle?: () => void
+}) => {
+  return (
+    
+      
+        
+          
+            }
+              wh="$full"
+              position="absolute"
+              opacity={open ? 1 : 0}
+              transition={'opacity 0.2s ease-in-out'}
+            />
+            }
+              position={'absolute'}
+              wh="$full"
+              opacity={open ? 0 : 1}
+              transition={'opacity 0.2s ease-in-out'}
+            />
+          
+        
+        
+          } height="$12" />
+        
+      
+      
+        
+          } color="$text" wh="$4" />
+        
+        
+          } wh="$4" />
+        
+        v1.0
+      
+    
+  )
+}
diff --git a/docs/src/components/PropsTable.tsx b/docs/src/components/PropsTable.tsx
index ac0e204e..9d0f39b5 100644
--- a/docs/src/components/PropsTable.tsx
+++ b/docs/src/components/PropsTable.tsx
@@ -1,107 +1,41 @@
 import * as React from 'react'
-import styled, { css, useTheme } from 'styled-components'
 import { PropItem } from 'react-docgen-typescript'
+import GithubSVG from '~/assets/Github.svg'
 
-import { Button, Typography, VisuallyHidden, mq } from '@ensdomains/thorin'
+import {
+  Button,
+  Typography,
+  VisuallyHidden,
+  Box,
+  EyeStrikethroughSVG,
+  EyeSVG,
+} from '@ensdomains/thorin'
 
 import property from 'lodash/property'
 
-import { Link } from './Link'
+import { ScrollBox } from '@ensdomains/thorin'
 
 type Props = {
   sourceLink?: string
   types: Record
 }
 
-const Container = styled.div(
-  ({ theme }) => css`
-    max-width: ${theme.space['full']};
-    overflow: scroll;
-
-    ${mq.lg.min(css`
-      overflow: unset;
-    `)}
-  `,
-)
-
-const TableHead = styled.th(
-  () => css`
-    position: sticky;
-    top: 0;
-  `,
-)
-
-const TableHeadLabelContainer = styled.div<{
-  $i: number
-  $headers: Array
-}>(
-  ({ theme, $i, $headers }) => css`
-    text-transform: capitalize;
-    background-color: ${theme.colors.greySurface};
-    border-color: ${theme.colors.border};
-    ${$i === 0 ? `border-top-left-radius: ${theme.radii['2xLarge']};` : ``}
-    ${$i === $headers.length - 1
-      ? `border-top-right-radius: ${theme.radii['2xLarge']};`
-      : ``}
-      padding: ${theme.space['2.5']} ${theme.space['4']};
-  `,
-)
-
-const Name = styled(Typography)(
-  ({ theme }) => css`
-    color: ${theme.colors.textPrimary};
-    font-size: ${theme.fontSizes['small']};
-  `,
-)
-
-const Required = styled(Typography)(
-  ({ theme }) => css`
-    color: ${theme.colors.red};
-    font-size: ${theme.fontSizes['small']};
-  `,
-)
-
-const RawName = styled(Typography)(
-  ({ theme }) => css`
-    color: ${theme.colors.accent};
-    font-size: ${theme.fontSizes['small']};
-    font-family: ${theme.fonts['mono']};
-  `,
-)
-
-const DefaultValue = styled(Typography)(
-  ({ theme }) => css`
-    color: ${theme.colors.greyDim};
-    font-size: ${theme.fontSizes['small']};
-  `,
+const TableHead = ({
+  children,
+}: React.PropsWithChildren<{ $i: number; $headers: string[] }>) => (
+  
+    
+      
+        {children}
+      
+    
+  
 )
 
-const Description = styled(Typography)(
-  ({ theme }) => css`
-    color: ${theme.colors.greyPrimary};
-    font-size: ${theme.fontSizes.small};
-  `,
-)
-
-const NoProps = styled(Typography)(
-  ({ theme }) => css`
-    color: ${theme.colors.greyPrimary};
-  `,
-)
-
-const DataCell = styled.td(
-  ({ theme }) => css`
-    padding: ${theme.space['3']} ${theme.space['4']};
-  `,
-)
-
-const FlexContainer = styled.div(
-  ({ theme }) => css`
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    gap: ${theme.space['2']};
-  `,
+const DataCell = ({ children }: React.PropsWithChildren<{}>) => (
+  
+    {children}
+  
 )
 
 const formatPropType = (type: any): string => {
@@ -124,8 +58,6 @@ const formatPropType = (type: any): string => {
 }
 
 export const PropsTable = ({ sourceLink, types }: Props) => {
-  const theme = useTheme()
-
   const [state, setState] = React.useState<{
     showDescriptions: boolean
   }>({
@@ -148,101 +80,104 @@ export const PropsTable = ({ sourceLink, types }: Props) => {
   return (
     <>
       {props.length ? (
-        
-          
-            
-              
+        
+          
+            
+              
                 {headers.map((x, i) => (
-                  
-                    
-                      
-                        {x}
-                      
-                    
+                  
+                    {x}
                   
                 ))}
               
-            
+            
               {props.map((x) => (
-                
+                
-                    
-                      {x.name}
-                      {x.required && (
-                        
-                          *Required
-                        
-                      )}
-                    
+                    {x.name}
+                    {x.required && (
+                      
+                         *Required
+                      
+                    )}
                   
-
                   
-                    
+                    
                       {formatPropType(x.type)}
-                    
+                    
                   
-
                   
-                    
+                    
                       {x.defaultValue?.value.toString() ?? '-'}
-                    
+                    
                   
 
                   {state.showDescriptions && (
                     
-                      {x.description || '-'}
+                      {x.description || '-'}
                     
                   )}
                 
               ))}
             
-          

             

                   

-        
+          
+        
       ) : (
         

-          No props
+          No props
         

       )}
-
-      

-        
-          {!!props.length && (
-            

-              
-            

-          )}
-
-          {sourceLink && (
-            

-              
-                
-              
-            

-          )}
-        
-      

+      
+        {!!props.length && (
+          

+            
+          

+        )}
+
+        {sourceLink && (
+          

+            
+          

+        )}
+      
     
   )
 }
diff --git a/docs/src/components/SideBar.tsx b/docs/src/components/SideBar.tsx
new file mode 100644
index 00000000..29bca02e
--- /dev/null
+++ b/docs/src/components/SideBar.tsx
@@ -0,0 +1,165 @@
+import {
+  Box,
+  Field,
+  ThemeToggle,
+  StarSVG,
+  BrushSVG,
+  GridSVG,
+  Typography,
+  BoxProps,
+  ScrollBox,
+  useTheme,
+} from '@ensdomains/thorin'
+import { Link } from './Link'
+import { PropsWithChildren } from 'react'
+import { useRouter } from 'next/router'
+
+type Link = { name: string; route: string }
+
+type Links = { name: string; links: Link[] }[]
+
+const NavLink = ({
+  active,
+  href,
+  children,
+}: PropsWithChildren<{ active: boolean; href: string }>) => (
+  
+    
+      
+        {children}
+      
+    
+  
+)
+
+const Heading = ({
+  icon,
+  children,
+  ...props
+}: BoxProps & { icon: React.ReactElement }) => (
+  
+    
+    
+      {children}
+    
+  
+)
+
+const Divider = () => (
+  
+)
+
+export const SideBar = ({ open, links }: { open: boolean; links: Links }) => {
+  const router = useRouter()
+  const { setMode, mode } = useTheme()
+  return (
+    
+      
+        
+          
+                {mode === 'light' ? 'Light styles' : 'Dark styles'}
+              
+            }
+            inline
+          >
+             {
+                const newValue = e.target.checked ? 'light' : 'dark'
+                if (newValue !== mode) setMode(newValue)
+                console.log(e)
+              }}
+            />
+          
+          
+          
+            }>Getting Started
+            
+              Start Here
+            
+            
+              Development
+            
+            
+              Playroom
+            
+            
+              Design
+            
+          
+          
+          
+            }>Style
+            
+              Logo
+            
+            
+              Colours
+            
+            
+              Icons
+            
+          
+          
+          
+            }>Getting Started
+            {links.map(({ name, links }) => (
+              <>
+                
+                  {name}
+                
+                {links.map(({ name: _name, route }) => (
+                  
+                    {_name}
+                  
+                ))}
+              
+            ))}
+          
+        
+      
+    
+  )
+}
diff --git a/docs/src/components/index.ts b/docs/src/components/index.ts
index 119e2d87..fc76054b 100644
--- a/docs/src/components/index.ts
+++ b/docs/src/components/index.ts
@@ -1,4 +1,4 @@
-export { CodeBlock } from './CodeBlock'
+export { CodeBlock } from './CodeBlock/CodeBlock'
 export { Header } from './Header'
 export { Link } from './Link'
 export { MDX } from './MDX'
diff --git a/docs/src/layouts/docs.tsx b/docs/src/layouts/docs.tsx
index e0257204..1ad68459 100644
--- a/docs/src/layouts/docs.tsx
+++ b/docs/src/layouts/docs.tsx
@@ -1,9 +1,6 @@
 import * as React from 'react'
 import { GetLayout, NextLayout } from 'next'
 import Head from 'next/head'
-import styled, { css } from 'styled-components'
-
-import { mq } from '@ensdomains/thorin'
 
 import {
   Header,
@@ -14,97 +11,29 @@ import {
 } from '~/components'
 
 import { getLayout as getBaseLayout } from './site'
-import { Typography } from '@ensdomains/thorin'
+import { Box, BoxProps, Typography } from '@ensdomains/thorin'
 
 const Container = (props: React.ComponentProps) => (
   
 )
 
-// const Container2 = styled.div(
-//   ({ theme }) => css`
-//     display: block;
-//     justify-content: center;
-//     margin: 0 auto;
-//     max-width: ${theme.space['320']};
-//     min-height: ${theme.space['viewHeight']};
-//     padding: 0 ${theme.space['6']};
-//     ${mq.lg.min(css`
-//       display: flex;
-//       justify-content: flex-end;
-//     `)}
-//     ${mq.xl.min(css`
-//       display: flex;
-//       justify-content: center;
-//     `)};
-//   `,
-// )
-
-const Aside = styled.aside(
-  ({ theme }) => css`
-    padding-top: ${theme.space['6']};
-
-    ${mq.lg.min(css`
-      background-color: ${theme.colors.greyLight};
-      margin-right: ${theme.space['10']};
-      border-radius: ${theme.radii['extraLarge']};
-
-      left: ${theme.space['4']};
-      top: ${theme.space['4']};
-      bottom: ${theme.space['4']};
-
-      height: calc(${theme.space['viewHeight']} - ${theme.space['8']});
-      padding: ${theme.space['4']};
-      overflow: hidden;
-      position: fixed;
-      width: ${theme.space['48']};
-    `)}
-
-    ${mq.xl.min(css`
-      width: ${theme.space['56']};
-    `)}
-  `,
+const Article = (props: BoxProps) => (
+  
 )
 
-const Article = styled.article(
-  ({ theme }) => css`
-    width: 100%;
-    padding-bottom: ${theme.space['20']};
-    padding-top: ${theme.space['20']};
-
-    ${mq.lg.min(css`
-      max-width: ${theme.space['192']};
-      padding: ${theme.space['20']} ${theme.space['10']};
-    `)}
-
-    ${mq.xl.min(css`
-      max-width: ${theme.space['224']};
-    `)}
-  `,
-)
-
-const Main = styled.main(
-  ({ theme }) => css`
-    flex-grow: 1;
-    display: flex;
-    justify-content: center;
-    align-items: flex-start;
-    ${mq.lg.min(css`
-      justify-content: flex-end;
-      margin-left: ${theme.space['56']};
-    `)}
-    ${mq.xl.min(css`
-      justify-content: center;
-    `)}
-  `,
+const Main = (props: BoxProps) => (
+  
 )
 
 export type Props = {
@@ -131,14 +60,8 @@ const Layout: NextLayout = ({ children, meta }) => {
           name="description"
         />
       
-
       Skip to content
-
       
-        
-
         

           
           

@@ -146,6 +69,7 @@ const Layout: NextLayout = ({ children, meta }) => {
             {children}
           

         

+