feat: add possibility to override default Code theme (#202)

* Code theme is now available via props * One Dark Pro now works outside of styleguide too * add Theme docs * move Code font to theme
lightingbeetle · Feb 18, 2020 · 1b0b216 · 1b0b216
1 parent 8bba1e5
commit 1b0b216
Show file tree

Hide file tree

Showing 6 changed files with 217 additions and 10 deletions.
diff --git a/packages/styleguide/src/components/Code/Code.docs.mdx b/packages/styleguide/src/components/Code/Code.docs.mdx
@@ -1,4 +1,4 @@
-import { Preview, ComponentDocs, Code, Badge } from './../';
+import { Preview, ComponentDocs, Code, Badge, Note, Link } from './../';
 
 # Code
 
@@ -44,10 +44,11 @@ Supported languages are:
     <Code language="scss">{'%class { display: block; }'}</Code>,
     <Code language="bash">{'echo test;'}</Code>,
     <Code language="json">{'{ "key": "value" }'}</Code>,
-    <Code language="diff">{'+ added line'}</Code>
+    <Code language="diff">{'+ added line'}</Code>,
   ]}
 >
   <Code>{'<div>HTML</div>'}</Code>
+  <br />
   <Code language="javascript">{"console.log('log');"}</Code>
   <br />
   <Code language="jsx">{'<Component prop={prop} />'}</Code>
@@ -64,6 +65,97 @@ Supported languages are:
   <br />
 </Preview>
 
+### Theme
+
+Default theme is [One Dark Pro theme for VS Code](https://github.com/Binaryify/OneDark-Pro). This theme can by overrided via `theme` prop which takes theme as [object](https://github.com/FormidableLabs/prism-react-renderer#theming).
+
+<Preview>
+  <Code
+    inline={false}
+    language="javascript"
+    theme={{
+      plain: {
+        color: '#F8F8F2',
+        backgroundColor: '#282A36',
+      },
+      styles: [
+        {
+          types: ['prolog', 'constant', 'builtin'],
+          style: {
+            color: 'rgb(189, 147, 249)',
+          },
+        },
+        {
+          types: ['inserted', 'function'],
+          style: {
+            color: 'rgb(80, 250, 123)',
+          },
+        },
+        {
+          types: ['deleted'],
+          style: {
+            color: 'rgb(255, 85, 85)',
+          },
+        },
+        {
+          types: ['changed'],
+          style: {
+            color: 'rgb(255, 184, 108)',
+          },
+        },
+        {
+          types: ['punctuation', 'symbol'],
+          style: {
+            color: 'rgb(248, 248, 242)',
+          },
+        },
+        {
+          types: ['string', 'char', 'tag', 'selector'],
+          style: {
+            color: 'rgb(255, 121, 198)',
+          },
+        },
+        {
+          types: ['keyword', 'variable'],
+          style: {
+            color: 'rgb(189, 147, 249)',
+            fontStyle: 'italic',
+          },
+        },
+        {
+          types: ['comment'],
+          style: {
+            color: 'rgb(98, 114, 164)',
+          },
+        },
+        {
+          types: ['attr-name'],
+          style: {
+            color: 'rgb(241, 250, 140)',
+          },
+        },
+      ],
+    }}
+  >{`function getTheme() {
+  return 'Dracula theme';
+}`}</Code>
+</Preview>
+
+<Note type="info" title="Default Fira Code font">
+  Code uses Fira Code as default font and fallbacks to system monospace font if
+  Fira Code is not installed on your computer. If you want to show Fira Code to
+  everybody, import{' '}
+  <Link href="https://github.com/tonsky/FiraCode">
+    Fira Code to your project
+  </Link>
+  .
+</Note>
+
+<Note type="info" title="Different font">
+  If you want to preview Code with different font, overide `codeFontFamily`
+  property in theme.
+</Note>
+
 ## Props
 
 <ComponentDocs component={Code} />

diff --git a/packages/styleguide/src/components/Code/Code.js b/packages/styleguide/src/components/Code/Code.js
@@ -1,16 +1,21 @@
 import React from 'react';
-import { string, bool, oneOf } from 'prop-types';
+import { string, bool, oneOf, object } from 'prop-types';
 import styled from 'styled-components';
 import { stripUnit, em } from 'polished';
 import Highlight, { defaultProps } from 'prism-react-renderer';
 
-import 'prism-theme-one-dark/prism-onedark.css';
-import 'firacode/distr/fira_code.css';
+import oneDarkProTheme from './oneDarkProTheme';
 
 import * as theme from './../../style/theme';
 import { rem } from '../../style/utils';
 
-const PreviewCode = ({ children, language, inline }) => {
+const PreviewCode = ({
+  children,
+  language,
+  inline,
+  theme = oneDarkProTheme,
+  ...other
+}) => {
   if (!children) {
     return null;
   }
@@ -22,9 +27,9 @@ const PreviewCode = ({ children, language, inline }) => {
       {...defaultProps}
       code={children}
       language={language}
-      theme={undefined}
+      theme={theme}
     >
-      {({ tokens, getLineProps, getTokenProps }) => {
+      {({ tokens, style, getLineProps, getTokenProps }) => {
         const highlight = tokens.map((line, i) => (
           <Tag {...getLineProps({ line, key: i })}>
             {line.map((token, key) => (
@@ -34,7 +39,12 @@ const PreviewCode = ({ children, language, inline }) => {
         ));
 
         return (
-          <StyledHighlightWrapper inline={inline} as={inline ? 'span' : 'div'}>
+          <StyledHighlightWrapper
+            inline={inline}
+            as={inline ? 'span' : 'div'}
+            style={style}
+            {...other}
+          >
             {inline ? (
               <code
                 className={`code code--inline prism-code language-${language}`}
@@ -73,6 +83,8 @@ PreviewCode.propTypes = {
   ]),
   /** Inline code preview with text. */
   inline: bool,
+  /** Theme VSCode theme style object defined in https://github.com/FormidableLabs/prism-react-renderer#theming */
+  theme: object,
 };
 
 PreviewCode.defaultProps = {
@@ -91,7 +103,7 @@ const StyledHighlightWrapper = styled.span`
   code[class*='language-'] {
     font-feature-settings: 'calt' 1;
     text-rendering: optimizeLegibility;
-    font-family: 'Fira Code', monospace;
+    font-family: ${props => props.theme.codeFontFamily};
     font-size: ${props =>
       em(props.theme.fontSizes.small, props.theme.fontSizes.base)};
     line-height: ${props =>

diff --git a/packages/styleguide/src/components/Code/Code.test.js b/packages/styleguide/src/components/Code/Code.test.js
@@ -2,10 +2,38 @@ import React from 'react';
 import { render } from '@testing-library/react';
 
 import Code from '.';
+import oneDarkPro from './oneDarkProTheme';
 
 describe('rendering', () => {
   it('Code', () => {
     const { getByText } = render(<Code>Code</Code>);
     expect(getByText('Code')).toBeInTheDocument();
   });
+
+  it('Code renders with default oneDarkPro theme', () => {
+    const { getByTestId, debug } = render(<Code data-testid="code">Code</Code>);
+
+    expect(getByTestId('code')).toHaveStyle(
+      `background-color: ${oneDarkPro.plain.backgroundColor}`
+    );
+  });
+
+  it('Code renders with passed theme', () => {
+    const theme = {
+      plain: {
+        backgroundColor: 'rgb(0, 0, 0)',
+      },
+      styles: [],
+    };
+
+    const { getByTestId, debug } = render(
+      <Code data-testid="code" theme={theme}>
+        Code
+      </Code>
+    );
+
+    expect(getByTestId('code')).toHaveStyle(
+      `background-color: ${theme.plain.backgroundColor}`
+    );
+  });
 });
diff --git a/packages/styleguide/src/components/Code/oneDarkProTheme.js b/packages/styleguide/src/components/Code/oneDarkProTheme.js
@@ -0,0 +1,70 @@
+const theme = {
+  plain: {
+    color: 'rgb(171, 178, 191)',
+    backgroundColor: 'rgb(40, 44, 52)',
+  },
+  styles: [
+    {
+      types: ['punctuation', 'number'],
+      style: {
+        color: 'rgb(209, 154, 102)',
+      },
+    },
+    {
+      types: ['constant'],
+      style: {
+        color: 'rgb(255, 255, 255)',
+      },
+    },
+    {
+      types: ['char'],
+      style: {
+        color: 'rgb(97, 175, 239)',
+      },
+    },
+    {
+      types: ['keyword', 'selector'],
+      style: {
+        color: 'rgb(198, 120, 221)',
+      },
+    },
+    {
+      types: ['class-name', 'attr-name', 'string', 'symbol'],
+      style: {
+        color: 'rgb(86, 182, 194)',
+      },
+    },
+    {
+      types: ['function', 'builtin', 'namespace', 'changed'],
+      style: {
+        color: 'rgb(229, 192, 123)',
+      },
+    },
+    {
+      types: ['variable', 'tag', 'deleted'],
+      style: {
+        color: 'rgb(224, 108, 117)',
+      },
+    },
+    {
+      types: ['operator'],
+      style: {
+        color: 'rgb(171, 178, 191)',
+      },
+    },
+    {
+      types: ['inserted'],
+      style: {
+        color: 'rgb(152, 195, 121)',
+      },
+    },
+    {
+      types: ['comment'],
+      style: {
+        fontStyle: 'italic',
+      },
+    },
+  ],
+};
+
+export default theme;
diff --git a/packages/styleguide/src/index.js b/packages/styleguide/src/index.js
@@ -2,6 +2,8 @@ import React from 'react';
 import styleguide from './lib/styleguide';
 import pkg from '../package.json';
 
+import 'firacode/distr/fira_code.css';
+
 const Page = React.lazy(() => import('./components/Page'));
 
 const AppDocs = React.lazy(() => import('./components/App/App.docs.mdx'));

diff --git a/packages/styleguide/src/style/theme.js b/packages/styleguide/src/style/theme.js
@@ -100,4 +100,7 @@ export const borderRadius = {
   default: '0',
 };
 
+export const codeFontFamily =
+  "'Fira Code', 'Droid Sans Mono', 'Courier New', monospace";
+
 export const contentWidth = '55rem';