feat #231 - Update styles

src/components/Code/index.tsx

@@ -1,23 +1,13 @@
 import './prism.css'
 import cn from 'classnames'
-import { createUseStyles } from 'react-jss'
 import Mark from 'mark.js'
 import Prism from 'prismjs'
-import { styleguide } from 'components/assets/styles'
+import { useStyles } from './utils'
 import { Input, InputProps } from 'components/Input'
 import React, { ChangeEvent, FC, useEffect, useRef } from 'react'
 require('prismjs/plugins/line-numbers/prism-line-numbers')
 require('prismjs/components/prism-json')
 
-const { spacing } = styleguide
-
-// overwriting default styles react example https://github.com/reactjs/reactjs.org/blob/master/src/prism-styles.js#L11
-const useStyles = createUseStyles({
-	search: {
-		marginBottom: spacing.m
-	}
-})
-
 export interface CodeProps {
 	code: string | Record<string, any>
 	language?: 'css' | 'html' | 'javascript' | 'json'

src/components/Code/utils.ts

@@ -0,0 +1,72 @@
+import { createUseStyles } from 'react-jss'
+import { styleguide, themedStyles, ThemeType } from 'components/assets/styles'
+
+const { dark, light } = ThemeType
+
+const {
+	colors: { blacks, grays },
+	spacing
+} = styleguide
+
+const generateThemedCodeStyles = (themeType: ThemeType) => {
+	const {
+		base: { color }
+	} = themedStyles[themeType]
+
+	// overwriting prismjs default styles react example https://github.com/reactjs/reactjs.org/blob/master/src/prism-styles.js#L11
+	const prismColors = {
+		boolean: color,
+		char: color,
+		className: color,
+		comment: color,
+		function: color,
+		keyword: color,
+		lineHighlight: color,
+		method: color,
+		number: color,
+		operator: color,
+		primitive: color,
+		property: color,
+		punctuation: color,
+		string: color,
+		tag: color,
+		variable: color
+	}
+
+	return {
+		...Object.entries(prismColors).reduce(
+			(acc, [key, val]) => ({
+				...acc,
+				[`& .token.${key}`]: { color: val }
+			}),
+			{}
+		),
+		color
+	}
+}
+
+export const useStyles = createUseStyles({
+	'@global': {
+		// eslint-disable-next-line quotes
+		"pre[class*='language-']": {
+			'& .line-numbers-rows': {
+				'& > span:before': generateThemedCodeStyles(light),
+				background: grays['lighten-70'],
+				borderRight: `1px solid ${grays.base}`
+			},
+			// eslint-disable-next-line quotes
+			"& code[class*='language-']": {
+				...generateThemedCodeStyles(light),
+				background: grays['lighten-70'],
+				fontFamily: 'Fira Code, monospace'
+			},
+			background: grays['lighten-70'],
+			border: `1px solid ${grays.base}`,
+			fontFamily: 'Fira Code, monospace',
+			margin: 0
+		}
+	},
+	search: {
+		marginBottom: spacing.m
+	}
+})