feat: dark mode (#272)

Author: snqb

.storybook/main.js

@@ -8,5 +8,6 @@ module.exports = {
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-docs",
+    "storybook-dark-mode"
   ]
 }

.storybook/preview.js

@@ -1,17 +1,25 @@
 import React from 'react';
+import { themes } from '@storybook/theming';
+import { useDarkMode } from 'storybook-dark-mode';
+
 
 import ThemeProvider from '../src/theme/ThemeProvider';
 
+
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
   layout: 'centered',
   controls: { expanded: true },
-  viewMode: 'docs' // `docs` is default tab, instead of canvas
+  darkMode: {
+    current: 'light',
+    dark: { ...themes.dark, appBg: themes.dark.appBg },
+    light: { ...themes.light, appBg: themes.light.appBg },
+  }
 };
 
 export const decorators = [
   (Story) => (
-    <ThemeProvider>
+    <ThemeProvider colorMode={useDarkMode() ? 'dark' : 'light'}>
       <Story />
     </ThemeProvider>
   ),

package.json

@@ -79,6 +79,7 @@
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "semantic-release": "^19.0.2",
+    "storybook-dark-mode": "^1.1.0",
     "typescript": "^4.6.2",
     "yalc": "^1.0.0-pre.53"
   },

src/components/alternative-header/styles.ts

@@ -37,7 +37,7 @@ export const wrapper = (topContent: boolean) =>
 
     flexDirection: 'column',
 
-    boxShadow: topContent ? '0 -5px 0 #F5F5F5' : '',
+    boxShadow: topContent ? '0 -5px 0 grayShade3' : '',
 
     zIndex: 25,
 

src/components/badge/utils/get-border-animation.ts

@@ -20,7 +20,7 @@ export const getBorderAnimation = (borderColor: string) => {
     fontSize: '12px',
     fontWeight: '500',
     borderRadius: '1px',
-    color: '#f2994a',
+    color: 'orange',
     ':before': {
       content: "''",
       position: 'absolute',

src/components/box/Box.tsx

@@ -0,0 +1,10 @@
+import React, { FC, forwardRef } from 'react';
+import { Box as RebassBox, BoxProps } from 'rebass';
+
+export interface Props extends Omit<BoxProps, 'css'> {}
+
+export const Box: FC<Props> = forwardRef(({ children, ...rest }, ref) => (
+  <RebassBox ref={ref} {...rest}>
+    {children}
+  </RebassBox>
+));

src/components/box/index.tsx

@@ -0,0 +1,3 @@
+export { Box } from './Box';
+
+export type { Props as BoxProps } from './Box';

src/components/code-input/index.stories.tsx

@@ -100,7 +100,7 @@ Default.argTypes = argTypes;
 Default.args = {
   label: 'Label',
   mode: 'javascript',
-  value: 'const a = 100;',
+  value: 'const a = 100;\nconst b = 120;',
   tooltipInfo: 'some tooltip',
   onChange: action('Input change'),
 };

src/components/code-input/index.styles.ts

@@ -2,13 +2,9 @@ const getStyles = () => ({
   '.react-codemirror2': {
     height: '100%',
     '.CodeMirror': {
-      background: '#F5F5F5 !important',
+      background: '#grayShade3 !important',
       height: '100%',
     },
-    '.CodeMirror-gutter': {
-      color: 'gray',
-      backgroundColor: 'grayShade2',
-    },
   },
 });
 

src/components/code-input/index.tsx

@@ -8,8 +8,8 @@ import 'codemirror/mode/javascript/javascript';
 import 'codemirror/mode/yaml/yaml';
 import 'codemirror/mode/python/python';
 import 'codemirror/mode/sql/sql';
-// Note for dark-mode, good theme candidates: shadowbox, tomorrow-night-bright, dracula
-import 'codemirror/theme/yeti.css';
+
+import 'codemirror/theme/darcula.css';
 
 // Components
 import Label, { LabelProps } from '../label';
@@ -85,7 +85,7 @@ const CodeInput: FC<InputProps> = forwardRef(
                 mode === 'javascript'
                   ? { name: mode, json: true }
                   : { name: mode },
-              theme: 'yeti',
+              theme: 'darcula',
               lineNumbers: true,
               readOnly,
             }}

src/components/code/index.tsx

@@ -1,7 +1,6 @@
 import React, { FC, useState } from 'react';
 import { Box, FlexProps, Flex } from 'rebass';
 import SyntaxHighlighter from 'react-syntax-highlighter';
-import { useTheme } from '../../theme/theme';
 import Button from '../button';
 import ExpandViewer from '../expand-viewer';
 
@@ -15,6 +14,7 @@ import Value from '../typography/value';
 import { copyToClipboard, saveToFile } from '../../utils';
 import { PopupProps } from '../popup';
 import { GetIcon, IconName } from '../icon';
+import { hybrid } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 
 const CONTENT_UPPER_BOUND = 12;
 
@@ -122,8 +122,6 @@ const CodeSnippet: FC<CodeSnippetProps> = ({
   maxHeightOfCode,
   ...props
 }) => {
-  const theme = useTheme();
-
   return (
     <Flex width="100%" sx={styles} height="100%">
       <Flex width="100%" sx={codeHeaderStyles}>
@@ -149,12 +147,10 @@ const CodeSnippet: FC<CodeSnippetProps> = ({
         p={0}
       >
         <SyntaxHighlighter
+          style={hybrid}
           wrapLongLines={wrapLongLines}
           showLineNumbers={showLineNumbers}
-          lineNumberStyle={{
-            ...lineNumberStyles,
-            background: theme.colors.grayShade1,
-          }}
+          lineNumberStyle={lineNumberStyles}
           language={language}
           customStyle={{
             ...boxStyles,

src/components/datepicker/datepicker.styles.ts

@@ -3,7 +3,7 @@ import { SxStyleProp } from 'rebass';
 export default (align: 'left' | 'right') =>
   ({
     '.react-datepicker': {
-      boxShadow: '0px 0px 15px rgba(0, 0, 0, 0.25)',
+      boxShadow: 'notification',
       borderRadius: 'initial',
     },
 

src/components/flex/Flex.tsx

@@ -0,0 +1,10 @@
+import React, { FC, forwardRef } from 'react';
+import { Flex as RebassFlex, FlexProps } from 'rebass';
+
+export interface Props extends Omit<FlexProps, 'css'> {}
+
+export const Flex: FC<Props> = forwardRef(({ children, ...rest }, ref) => (
+  <RebassFlex ref={ref}  {...rest}>
+    {children}
+  </RebassFlex>
+));

src/components/flex/index.ts

@@ -0,0 +1,3 @@
+export { Flex } from './Flex';
+
+export type { Props as FlexProps } from './Flex';

src/components/graphs/split-graph/split-graph.styles.ts

@@ -8,7 +8,8 @@ export const progressBarStyles = (
   bg: color,
   width: `${percent}%`,
   marginRight: '2px',
-  border: isSelected ? '1px solid #272727' : null,
+  border: isSelected ? '1px solid' : null,
+  borderColor: 'black',
 });
 
 export const circleStyles = (
@@ -19,5 +20,6 @@ export const circleStyles = (
   width: '10px',
   height: '10px',
   borderRadius: '50%',
-  border: isSelected ? '1px solid #272727' : null,
+  border: isSelected ? '1px solid' : null,
+  borderColor: 'black',
 });

src/components/icon/get-icon.stories.tsx

@@ -106,14 +106,13 @@ Default.argTypes = {
       'labels.orange',
       'labels.purple',
       'labels.yellow',
-      'labels.yellowLight',
+      'labels.yellowShade2',
       'labels.green',
-      'labels.skyblue',
-      'labels.darkblue',
-      'labels.lightblue',
+      'labels.blueShade1',
+      'labels.blueShade2',
       'labels.blue',
-      'labels.redShade3',
-      'labels.orangeShade3',
+      'labels.redShade2',
+      'labels.orangeShade2',
     ],
     control: {
       type: 'select',