From 903f10fc93d430ff90e5d7bf4808715025a6427f Mon Sep 17 00:00:00 2001 From: Pedro Nauck Date: Fri, 22 Jun 2018 16:20:48 -0300 Subject: [PATCH 1/2] SAVEPOINT --- examples/basic/doczrc.js | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 examples/basic/doczrc.js diff --git a/examples/basic/doczrc.js b/examples/basic/doczrc.js new file mode 100644 index 000000000..f3c4f7f8b --- /dev/null +++ b/examples/basic/doczrc.js @@ -0,0 +1,5 @@ +export default { + themeConfig: { + mode: 'dark', + }, +} From 5e5149a47a412257ffa6670b53e85ce35ce25c88 Mon Sep 17 00:00:00 2001 From: Pedro Nauck Date: Fri, 22 Jun 2018 19:10:20 -0300 Subject: [PATCH 2/2] =?UTF-8?q?feat(docz-theme-default):=20add=20dark=20mo?= =?UTF-8?q?de=20=F0=9F=8C=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/basic/doczrc.js | 5 - .../src/components/shared/Main/index.tsx | 9 -- .../src/components/shared/Sidebar/Docz.tsx | 18 +++ .../src/components/shared/Sidebar/Menu.tsx | 2 +- .../src/components/shared/Sidebar/index.tsx | 22 ++- .../src/components/ui/InlineCode.tsx | 7 + .../src/components/ui/Link.tsx | 12 ++ .../src/components/ui/Page.tsx | 2 + .../src/components/ui/Paragraph.tsx | 5 + .../src/components/ui/Pre.tsx | 6 +- .../src/components/ui/Render.tsx | 6 +- .../src/components/ui/Table.tsx | 6 +- .../src/components/ui/Tooltip.tsx | 25 +++- .../src/components/ui/index.tsx | 3 + packages/docz-theme-default/src/config.ts | 3 +- .../docz-theme-default/src/images/docz.svg | 31 ---- packages/docz-theme-default/src/index.tsx | 22 ++- .../docz-theme-default/src/styles/base.ts | 76 +--------- .../docz-theme-default/src/styles/colors.ts | 17 +-- .../docz-theme-default/src/styles/global.ts | 29 ++++ .../docz-theme-default/src/styles/index.ts | 31 +--- .../docz-theme-default/src/styles/modes.ts | 41 ++++++ .../src/styles/prism/dark.ts | 138 ++++++++++++++++++ .../src/styles/prism/index.ts | 2 + .../styles/{prism-theme.ts => prism/light.ts} | 13 +- packages/docz/src/theme.tsx | 14 +- 26 files changed, 359 insertions(+), 186 deletions(-) delete mode 100644 examples/basic/doczrc.js create mode 100644 packages/docz-theme-default/src/components/shared/Sidebar/Docz.tsx create mode 100644 packages/docz-theme-default/src/components/ui/InlineCode.tsx create mode 100644 packages/docz-theme-default/src/components/ui/Link.tsx create mode 100644 packages/docz-theme-default/src/components/ui/Paragraph.tsx delete mode 100644 packages/docz-theme-default/src/images/docz.svg create mode 100644 packages/docz-theme-default/src/styles/global.ts create mode 100644 packages/docz-theme-default/src/styles/modes.ts create mode 100644 packages/docz-theme-default/src/styles/prism/dark.ts create mode 100644 packages/docz-theme-default/src/styles/prism/index.ts rename packages/docz-theme-default/src/styles/{prism-theme.ts => prism/light.ts} (93%) diff --git a/examples/basic/doczrc.js b/examples/basic/doczrc.js deleted file mode 100644 index f3c4f7f8b..000000000 --- a/examples/basic/doczrc.js +++ /dev/null @@ -1,5 +0,0 @@ -export default { - themeConfig: { - mode: 'dark', - }, -} diff --git a/packages/docz-theme-default/src/components/shared/Main/index.tsx b/packages/docz-theme-default/src/components/shared/Main/index.tsx index 9a3f400e0..060d4351b 100644 --- a/packages/docz-theme-default/src/components/shared/Main/index.tsx +++ b/packages/docz-theme-default/src/components/shared/Main/index.tsx @@ -3,7 +3,6 @@ import { Component } from 'react' import styled from 'react-emotion' import equals from 'fast-deep-equal' import { base } from '../../../styles/base' -import webfont from 'webfontloader' const Wrapper = styled('div')` display: flex; @@ -14,13 +13,6 @@ interface MainProps { config: any } -const loadfonts = () => - webfont.load({ - google: { - families: ['Inconsolata', 'Source Sans Pro:300,400,600,700'], - }, - }) - export class Main extends Component { public componentDidUpdate(prevProps: MainProps): void { const { config } = this.props @@ -32,7 +24,6 @@ export class Main extends Component { public componentDidMount(): void { base(this.props.config) - loadfonts() } public render(): React.ReactNode { diff --git a/packages/docz-theme-default/src/components/shared/Sidebar/Docz.tsx b/packages/docz-theme-default/src/components/shared/Sidebar/Docz.tsx new file mode 100644 index 000000000..b0c7fe5fc --- /dev/null +++ b/packages/docz-theme-default/src/components/shared/Sidebar/Docz.tsx @@ -0,0 +1,18 @@ +import * as React from 'react' +import { SFC } from 'react' + +interface DoczProps { + width?: number + className?: string +} + +export const Docz: SFC = ({ width = 100, className }) => ( + + + +) diff --git a/packages/docz-theme-default/src/components/shared/Sidebar/Menu.tsx b/packages/docz-theme-default/src/components/shared/Sidebar/Menu.tsx index bf1170eef..26cc09d8a 100644 --- a/packages/docz-theme-default/src/components/shared/Sidebar/Menu.tsx +++ b/packages/docz-theme-default/src/components/shared/Sidebar/Menu.tsx @@ -25,7 +25,7 @@ const Icon = styled.div` transition: transform 0.3s; & svg { - stroke: ${p => p.theme.colors.main}; + stroke: ${p => p.theme.colors.text}; } ` diff --git a/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx b/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx index 60bb78985..a7faa542c 100644 --- a/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx +++ b/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx @@ -3,13 +3,13 @@ import { Docs, Link, Entry, ThemeConfig } from 'docz' import styled from 'react-emotion' import { Menu } from './Menu' -import logo from '../../../images/docz.svg' +import { Docz } from './Docz' const Wrapper = styled('div')` display: flex; flex-direction: column; height: 100%; - background: ${p => p.theme.colors.grayLight}; + background: ${p => p.theme.colors.sidebarBg}; ${p => p.theme.styles.sidebar}; a { @@ -17,12 +17,13 @@ const Wrapper = styled('div')` display: block; padding: 6px 16px; font-weight: 600; - color: ${p => p.theme.colors.main}; + color: ${p => p.theme.colors.sidebarText}; + text-decoration: none; } a:hover, a:visited { - color: ${p => p.theme.colors.main}; + color: ${p => p.theme.colors.sidebarText}; } a:hover, @@ -51,6 +52,7 @@ const LogoText = styled('h1')` margin: 24px 16px 64px; padding: 0; font-size: 32px; + color: ${p => p.theme.colors.text}; &:before { position: absolute; @@ -73,15 +75,19 @@ const Footer = styled('div')` align-items: center; justify-content: center; font-size: 14px; - color: ${p => p.theme.colors.grayDark}; - border-top: 1px dashed ${p => p.theme.colors.gray}; + color: ${p => p.theme.colors.footerText}; + border-top: 1px dashed ${p => p.theme.colors.border}; - a { + & > a { padding: 0; margin-left: 5px; } ` +const FooterLogo = styled(Docz)` + fill: ${p => p.theme.colors.footerText}; +` + export const Sidebar = () => ( {({ docs, menus }) => { @@ -112,7 +118,7 @@ export const Sidebar = () => ( diff --git a/packages/docz-theme-default/src/components/ui/InlineCode.tsx b/packages/docz-theme-default/src/components/ui/InlineCode.tsx new file mode 100644 index 000000000..af3acd48c --- /dev/null +++ b/packages/docz-theme-default/src/components/ui/InlineCode.tsx @@ -0,0 +1,7 @@ +import styled from 'react-emotion' + +export const InlineCode = styled('code')` + background: ${p => p.theme.colors.codeBg}; + color: ${p => p.theme.colors.codeColor}; + ${p => p.theme.styles.code}; +` diff --git a/packages/docz-theme-default/src/components/ui/Link.tsx b/packages/docz-theme-default/src/components/ui/Link.tsx new file mode 100644 index 000000000..572fab477 --- /dev/null +++ b/packages/docz-theme-default/src/components/ui/Link.tsx @@ -0,0 +1,12 @@ +import styled from 'react-emotion' + +export const Link = styled('a')` + &, &:visited, &:active { + text-decoration: none; + color: ${p => p.theme.colors.link}; + } + + &:hover { + color: ${p => p.theme.colors.link}; + } +` \ No newline at end of file diff --git a/packages/docz-theme-default/src/components/ui/Page.tsx b/packages/docz-theme-default/src/components/ui/Page.tsx index f44be3f88..1c19f2a88 100644 --- a/packages/docz-theme-default/src/components/ui/Page.tsx +++ b/packages/docz-theme-default/src/components/ui/Page.tsx @@ -12,6 +12,8 @@ const Wrapper = styled('div')` flex: 1; height: 100%; overflow-y: auto; + color: ${p => p.theme.colors.text}; + background: ${p => p.theme.colors.background}; ` export const Page: SFC = ({ children, ...props }) => ( diff --git a/packages/docz-theme-default/src/components/ui/Paragraph.tsx b/packages/docz-theme-default/src/components/ui/Paragraph.tsx new file mode 100644 index 000000000..32df1e5de --- /dev/null +++ b/packages/docz-theme-default/src/components/ui/Paragraph.tsx @@ -0,0 +1,5 @@ +import styled from 'react-emotion' + +export const Paragraph = styled('p')` + color: ${p => p.theme.colors.text}; +` diff --git a/packages/docz-theme-default/src/components/ui/Pre.tsx b/packages/docz-theme-default/src/components/ui/Pre.tsx index 34c163bb1..af8f327c1 100644 --- a/packages/docz-theme-default/src/components/ui/Pre.tsx +++ b/packages/docz-theme-default/src/components/ui/Pre.tsx @@ -7,6 +7,11 @@ import styled, { cx } from 'react-emotion' const PreStyled = styled('pre')` border: 1px solid ${p => p.theme.colors.border}; + padding: 2em; + margin: 2em 0; + border-radius: 5px; + background: ${p => p.theme.colors.preBg}; + ${p => p.theme.prismTheme}; ${p => p.theme.styles.pre}; ` @@ -22,7 +27,6 @@ export class Pre extends PureComponent { const { children } = this.props const childrenProps = children.props.props const childrenClassName = childrenProps && childrenProps.className - const className = cx('react-prism', this.props.className, childrenClassName) return ( diff --git a/packages/docz-theme-default/src/components/ui/Render.tsx b/packages/docz-theme-default/src/components/ui/Render.tsx index e328efe34..a2220fee4 100644 --- a/packages/docz-theme-default/src/components/ui/Render.tsx +++ b/packages/docz-theme-default/src/components/ui/Render.tsx @@ -4,7 +4,7 @@ import { RenderComponent } from 'docz' import styled from 'react-emotion' const Playground = styled('div')` - background: transparent; + background: 'render'; border: 1px solid ${p => p.theme.colors.border}; border-bottom: 0; border-radius: 5px 5px 0 0; @@ -12,7 +12,9 @@ const Playground = styled('div')` ` const Code = styled('div')` - pre { + & code[class*='language-'], + & pre[class*='language-'] { + margin: 0; border-radius: 0 0 5px 5px; } ` diff --git a/packages/docz-theme-default/src/components/ui/Table.tsx b/packages/docz-theme-default/src/components/ui/Table.tsx index e74591e0c..ff284e2e4 100644 --- a/packages/docz-theme-default/src/components/ui/Table.tsx +++ b/packages/docz-theme-default/src/components/ui/Table.tsx @@ -12,11 +12,11 @@ export const Table = styled('table')` border-style: hidden; border-radius: 5px; font-size: 14px; - color: ${p => p.theme.colors.grayDark}; + color: ${p => p.theme.colors.tableColor}; & thead { - color: ${p => p.theme.colors.grayDark}; - background: ${p => p.theme.colors.grayLight}; + color: ${p => p.theme.colors.theadColor}; + background: ${p => p.theme.colors.theadBg}; } & thead th { diff --git a/packages/docz-theme-default/src/components/ui/Tooltip.tsx b/packages/docz-theme-default/src/components/ui/Tooltip.tsx index 5f18042ec..05b36bb87 100644 --- a/packages/docz-theme-default/src/components/ui/Tooltip.tsx +++ b/packages/docz-theme-default/src/components/ui/Tooltip.tsx @@ -3,6 +3,29 @@ import { ThemeConfig } from 'docz' import { SFC, ReactNode } from 'react' import { Tooltip as BaseTooltip } from 'react-lightweight-tooltip' +const getStyles = (colors: any) => ({ + wrapper: { + color: colors.primary, + }, + content: { + backgroundColor: colors.tooltipBg, + color: colors.tooltipColor, + }, + tooltip: { + display: 'flex', + alignItems: 'center', + width: 220, + maxWidth: 220, + padding: 5, + backgroundColor: colors.tooltipBg, + borderRadius: '3px', + fontSize: 16, + }, + arrow: { + borderTop: `solid ${colors.tooltipBg} 5px`, + }, +}) + interface TooltipProps { text: ReactNode children: ReactNode @@ -11,7 +34,7 @@ interface TooltipProps { export const Tooltip: SFC = ({ text, children }) => ( {config => ( - + {children} )} diff --git a/packages/docz-theme-default/src/components/ui/index.tsx b/packages/docz-theme-default/src/components/ui/index.tsx index fb0288f2e..e81290634 100644 --- a/packages/docz-theme-default/src/components/ui/index.tsx +++ b/packages/docz-theme-default/src/components/ui/index.tsx @@ -4,9 +4,12 @@ export { H3 } from './H3' export { H4 } from './H4' export { H5 } from './H5' export { H6 } from './H6' +export { InlineCode } from './InlineCode' +export { Link } from './Link' export { List } from './List' export { Loading } from './Loading' export { NotFound } from './NotFound' +export { Paragraph } from './Paragraph' export { Page } from './Page' export { Pre } from './Pre' export { Render } from './Render' diff --git a/packages/docz-theme-default/src/config.ts b/packages/docz-theme-default/src/config.ts index 3b15b2b9e..3a48dace2 100644 --- a/packages/docz-theme-default/src/config.ts +++ b/packages/docz-theme-default/src/config.ts @@ -1,9 +1,8 @@ import { styles } from './styles' import * as colors from './styles/colors' -import { prismTheme } from './styles/prism-theme' export const config = { + mode: 'light', colors, styles, - prismTheme, } diff --git a/packages/docz-theme-default/src/images/docz.svg b/packages/docz-theme-default/src/images/docz.svg deleted file mode 100644 index 4cc5af2a1..000000000 --- a/packages/docz-theme-default/src/images/docz.svg +++ /dev/null @@ -1,31 +0,0 @@ - - - - Group 2 - Created with Sketch. - - - - - \ No newline at end of file diff --git a/packages/docz-theme-default/src/index.tsx b/packages/docz-theme-default/src/index.tsx index d46745f1f..caa220d85 100644 --- a/packages/docz-theme-default/src/index.tsx +++ b/packages/docz-theme-default/src/index.tsx @@ -1,10 +1,15 @@ +import './styles/global' + import * as React from 'react' import { theme, DocPreview, ThemeConfig } from 'docz' import { ThemeProvider } from 'emotion-theming' +import webfont from 'webfontloader' import { config } from './config' import { Sidebar, Main } from './components/shared' import * as components from './components/ui' +import * as modes from './styles/modes' +import * as prismThemes from './styles/prism' const Theme = () => ( @@ -24,6 +29,9 @@ const Theme = () => ( h5: components.H5, h6: components.H6, ul: components.List, + p: components.Paragraph, + a: components.Link, + inlineCode: components.InlineCode, loading: components.Loading, table: components.Table, pre: components.Pre, @@ -36,4 +44,16 @@ const Theme = () => ( ) -export default theme(config)(Theme) +webfont.load({ + google: { + families: ['Inconsolata', 'Source Sans Pro:300,400,600,700'], + }, +}) + +const transform = ({ mode, ...config }: any) => ({ + ...config, + prismTheme: (prismThemes as any)[mode], + colors: (modes as any)[mode], +}) + +export default theme(config, transform)(Theme) diff --git a/packages/docz-theme-default/src/styles/base.ts b/packages/docz-theme-default/src/styles/base.ts index e2be617f7..49a5c7f13 100644 --- a/packages/docz-theme-default/src/styles/base.ts +++ b/packages/docz-theme-default/src/styles/base.ts @@ -1,83 +1,11 @@ -import { css, injectGlobal } from 'emotion' - -const selection = (color: string) => css` - background: ${color}; - color: white; -` +import { injectGlobal } from 'emotion' // tslint:disable -export const base = (config: any) => { +export const base = (config: any) => injectGlobal` - @import url('https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css'); - ${css(config.prismTheme)}; - - *, *:before, *:after { - box-sizing: border-box; - } - - .icon-link { - display: none; - } - - ::-moz-selection { - ${selection(config.colors.link)} - } - - ::selection { - ${selection(config.colors.link)} - } - body { - margin: 0; - padding: 0; font-family: ${config.styles.body.fontFamily}; font-size: ${config.styles.body.fontSize}; line-height: ${config.styles.body.lineHeight}; - background: ${config.colors.background}; - overflow: hidden; - } - - body { - color: transparent; - } - - body > *, #root { - color: ${config.colors.text}; - } - - html, body, #root { - height: 100vh; - min-height: 100vh; - } - - a, a:visited, a:active { - text-decoration: none; - color: ${config.colors.link}; - } - - a:hover { - color: ${config.colors.link}; - } - - input:-webkit-autofill, - input:-webkit-autofill:hover, - input:-webkit-autofill:focus, - input:-webkit-autofill:active { - transition: color 9999s ease-out, background-color 9999s ease-out; - transition-delay: 9999s; - } - - input:required, - input:invalid { - box-shadow: none; - } - - button:focus { - outline: none !important; - } - - select { - color: ${config.colors.text}; } ` -} diff --git a/packages/docz-theme-default/src/styles/colors.ts b/packages/docz-theme-default/src/styles/colors.ts index 6069c3cd0..908d2f8ab 100644 --- a/packages/docz-theme-default/src/styles/colors.ts +++ b/packages/docz-theme-default/src/styles/colors.ts @@ -1,11 +1,10 @@ -export const main = '#272833' -export const primary = '#0B5FFF' export const white = '#FFFFFF' -export const grayLight = '#F5F7FF' -export const gray = '#D3DCE6' -export const grayDark = '#8492A6' +export const grayExtraLight = '#EEF1F5' +export const grayLight = '#CED4DE' +export const gray = '#7D899C' +export const grayDark = '#2D3747' +export const grayExtraDark = '#1D2330' +export const dark = '#13161F' -export const text = main -export const link = primary -export const background = white -export const border = gray +export const blue = '#0B5FFF' +export const skyBlue = '#1FB6FF' diff --git a/packages/docz-theme-default/src/styles/global.ts b/packages/docz-theme-default/src/styles/global.ts new file mode 100644 index 000000000..61d82ff68 --- /dev/null +++ b/packages/docz-theme-default/src/styles/global.ts @@ -0,0 +1,29 @@ +import { injectGlobal } from 'emotion' + +// tslint:disable +injectGlobal` + @import url('https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css'); + + *, *:before, *:after { + box-sizing: border-box; + } + + .icon-link { + display: none; + } + + body { + margin: 0; + padding: 0; + overflow: hidden; + } + + body { + color: transparent; + } + + html, body, #root { + height: 100vh; + min-height: 100vh; + } +` diff --git a/packages/docz-theme-default/src/styles/index.ts b/packages/docz-theme-default/src/styles/index.ts index 69c45b610..ad28418ba 100644 --- a/packages/docz-theme-default/src/styles/index.ts +++ b/packages/docz-theme-default/src/styles/index.ts @@ -1,5 +1,3 @@ -import * as colors from './colors' - export const styles = { body: { fontFamily: "'Source Sans Pro', Helvetica, sans-serif", @@ -48,6 +46,13 @@ export const styles = { playground: { padding: '2rem', }, + code: { + margin: '0 3px', + padding: '4px 6px', + borderRadius: '3px', + fontFamily: "'Inconsolata', monospace", + fontSize: 16, + }, pre: { fontFamily: "'Inconsolata', monospace", fontSize: 16, @@ -56,26 +61,4 @@ export const styles = { fontFamily: "'Inconsolata', monospace", fontSize: 16, }, - tooltip: { - wrapper: { - color: colors.primary, - }, - content: { - backgroundColor: colors.main, - color: colors.grayLight, - }, - tooltip: { - display: 'flex', - alignItems: 'center', - width: 220, - maxWidth: 220, - padding: 5, - backgroundColor: colors.main, - borderRadius: '3px', - fontSize: 16, - }, - arrow: { - borderTop: `solid ${colors.main} 5px`, - }, - }, } diff --git a/packages/docz-theme-default/src/styles/modes.ts b/packages/docz-theme-default/src/styles/modes.ts new file mode 100644 index 000000000..a0b157d00 --- /dev/null +++ b/packages/docz-theme-default/src/styles/modes.ts @@ -0,0 +1,41 @@ +import * as colors from './colors' + +export const light = { + ...colors, + primary: colors.blue, + text: colors.dark, + link: colors.blue, + footerText: colors.grayDark, + sidebarBg: colors.grayExtraLight, + sidebarText: colors.dark, + background: colors.white, + border: colors.grayLight, + theadColor: colors.gray, + theadBg: colors.grayExtraLight, + tableColor: colors.dark, + tooltipBg: colors.dark, + tooltipColor: colors.grayExtraLight, + codeBg: colors.grayExtraLight, + codeColor: colors.gray, + preBg: colors.grayExtraLight, +} + +export const dark = { + ...colors, + primary: colors.skyBlue, + text: colors.grayExtraLight, + link: colors.skyBlue, + footerText: colors.grayLight, + sidebarBg: colors.dark, + sidebarText: colors.grayLight, + background: colors.grayExtraDark, + border: colors.grayDark, + theadColor: colors.gray, + theadBg: colors.grayDark, + tableColor: colors.grayExtraLight, + tooltipBg: colors.dark, + tooltipColor: colors.grayExtraLight, + codeBg: colors.gray, + codeColor: colors.grayExtraLight, + preBg: colors.grayDark, +} diff --git a/packages/docz-theme-default/src/styles/prism/dark.ts b/packages/docz-theme-default/src/styles/prism/dark.ts new file mode 100644 index 000000000..0178a7c2a --- /dev/null +++ b/packages/docz-theme-default/src/styles/prism/dark.ts @@ -0,0 +1,138 @@ +export const theme = ` +/** + * atom-dark theme for prism.js + * Based on Atom's atom-dark theme: https://github.com/atom/atom-dark-syntax + * @author Joe Gibson (@gibsjose) + */ + +code[class*="language-"], +pre[class*="language-"] { + color: #c5c8c6; + text-shadow: 0 1px rgba(0, 0, 0, 0.3); + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +/* Code blocks */ +pre[class*="language-"] { + overflow: auto; +} + +:not(pre) > code[class*="language-"], +pre[class*="language-"] { + background: #141D28; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: #7C7C7C; +} + +.token.punctuation { + color: #c5c8c6; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.keyword, +.token.tag { + color: #96CBFE; +} + +.token.class-name { + color: #FFFFB6; + text-decoration: underline; +} + +.token.boolean, +.token.constant { + color: #99CC99; +} + +.token.symbol, +.token.deleted { + color: #f92672; +} + +.token.number { + color: #FF73FD; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #A8FF60; +} + +.token.variable { + color: #C6C5FE; +} + +.token.operator { + color: #EDEDED; +} + +.token.entity { + color: #FFFFB6; + /* text-decoration: underline; */ +} + +.token.url { + color: #96CBFE; +} + +.language-css .token.string, +.style .token.string { + color: #87C38A; +} + +.token.atrule, +.token.attr-value { + color: #F9EE98; +} + +.token.function { + color: #DAD085; +} + +.token.regex { + color: #E9C062; +} + +.token.important { + color: #fd971f; +} + +.token.important, +.token.bold { + font-weight: bold; +} +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} +` diff --git a/packages/docz-theme-default/src/styles/prism/index.ts b/packages/docz-theme-default/src/styles/prism/index.ts new file mode 100644 index 000000000..0145fff2b --- /dev/null +++ b/packages/docz-theme-default/src/styles/prism/index.ts @@ -0,0 +1,2 @@ +export { theme as dark } from './dark' +export { theme as light } from './light' diff --git a/packages/docz-theme-default/src/styles/prism-theme.ts b/packages/docz-theme-default/src/styles/prism/light.ts similarity index 93% rename from packages/docz-theme-default/src/styles/prism-theme.ts rename to packages/docz-theme-default/src/styles/prism/light.ts index 2c822be56..514259d34 100644 --- a/packages/docz-theme-default/src/styles/prism-theme.ts +++ b/packages/docz-theme-default/src/styles/prism/light.ts @@ -1,4 +1,4 @@ -export const prismTheme = ` +export const theme = ` code[class*="language-"], pre[class*="language-"] { direction: ltr; @@ -32,16 +32,9 @@ export const prismTheme = ` /* Code blocks */ pre[class*="language-"] { - padding: 2rem; - margin: 0; overflow: auto; } - /* Inline code */ - :not(pre) > code[class*="language-"] { - padding: .1rem; - } - .token.comment, .token.prolog, .token.doctype, @@ -98,10 +91,6 @@ export const prismTheme = ` color: #ac9739; } - .attr-value { - padding-right: 5px; - } - .token.statement, .token.regex, .token.atrule { diff --git a/packages/docz/src/theme.tsx b/packages/docz/src/theme.tsx index 32024334a..670f72b38 100644 --- a/packages/docz/src/theme.tsx +++ b/packages/docz/src/theme.tsx @@ -63,9 +63,13 @@ export interface ThemeProps extends DataContext { children(WrappedComponent: CT): JSX.Element } +export type TransformFn = (config: ThemeConfig) => ThemeConfig export type ThemeReturn = (WrappedComponent: CT) => CT -export function theme(defaultConfig?: ThemeConfig): ThemeReturn { +export function theme( + defaultConfig?: ThemeConfig, + transform?: TransformFn +): ThemeReturn { return WrappedComponent => { const Theme: CT = ({ wrapper: Wrapper = DefaultWrapper, @@ -74,9 +78,13 @@ export function theme(defaultConfig?: ThemeConfig): ThemeReturn { config = {}, hashRouter = false, }) => { - const newConfig = merge(defaultConfig, config) - const value = { entries, imports, config: newConfig } const Router = hashRouter ? HashRouter : BrowserRouter + const newConfig = merge(defaultConfig, config) + const value = { + entries, + imports, + config: transform ? transform(newConfig) : newConfig, + } return (