feat #231 - Update dark theme styles

dassana-io · Mar 16, 2021 · 7468b74 · 7468b74
1 parent e8d7f34
commit 7468b74
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 15 deletions.
diff --git a/src/components/Code/index.tsx b/src/components/Code/index.tsx
@@ -9,6 +9,7 @@ require('prismjs/plugins/line-numbers/prism-line-numbers')
 require('prismjs/components/prism-json')
 
 export interface CodeProps {
+	classes?: string[]
 	code: string | Record<string, any>
 	language?: 'css' | 'html' | 'javascript' | 'json'
 	lineNumbers?: boolean
@@ -19,6 +20,7 @@ export interface CodeProps {
 }
 
 export const Code: FC<CodeProps> = ({
+	classes = [],
 	code,
 	language = 'json',
 	lineNumbers = true,
@@ -61,7 +63,7 @@ export const Code: FC<CodeProps> = ({
 		<>
 			{search && <Input {...searchProps} onChange={onSearch} />}
 			<pre
-				className={cn({ 'line-numbers': lineNumbers })}
+				className={cn({ 'line-numbers': lineNumbers }, classes)}
 				contentEditable={!readOnly}
 			>
 				<code className={`language-${language}`} ref={codeRef}>

diff --git a/src/components/Code/utils.ts b/src/components/Code/utils.ts
@@ -8,12 +8,35 @@ const {
 	spacing
 } = styleguide
 
+const codePalette = {
+	[dark]: {
+		background: blacks['darken-20']
+	},
+	[light]: {
+		background: grays['lighten-70']
+	}
+}
+
 const generateThemedCodeStyles = (themeType: ThemeType) => {
+	const { background } = codePalette[themeType]
+
+	const {
+		base: { borderColor }
+	} = themedStyles[themeType]
+
+	return {
+		background,
+		border: `1px solid ${borderColor}`
+	}
+}
+
+const generateThemedPreCodeStyles = (themeType: ThemeType) => {
+	const { background } = codePalette[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,
@@ -37,33 +60,63 @@ const generateThemedCodeStyles = (themeType: ThemeType) => {
 		...Object.entries(prismColors).reduce(
 			(acc, [key, val]) => ({
 				...acc,
-				[`& .token.${key}`]: { color: val }
+				[`& .token.${key}`]: {
+					background: 'none',
+					color: val
+				}
 			}),
 			{}
 		),
+		background,
 		color
 	}
 }
 
+const generateThemedLineNumStyles = (themeType: ThemeType) => {
+	const { background } = codePalette[themeType]
+
+	const {
+		base: { borderColor, color }
+	} = themedStyles[themeType]
+
+	return {
+		'& > span:before': {
+			color
+		},
+		background,
+		borderRight: `1px solid ${borderColor}`
+	}
+}
+
+/* eslint-disable quotes */
+const codeSelector = "& code[class*='language-']"
+const preCodeSelector = "pre[class*='language-']"
+/* eslint-enable quotes */
+
 export const useStyles = createUseStyles({
 	'@global': {
-		// eslint-disable-next-line quotes
-		"pre[class*='language-']": {
+		[preCodeSelector]: {
 			'& .line-numbers-rows': {
-				'& > span:before': generateThemedCodeStyles(light),
-				background: grays['lighten-70'],
-				borderRight: `1px solid ${grays.base}`
+				...generateThemedLineNumStyles(light),
+				textShadow: 'none'
 			},
-			// eslint-disable-next-line quotes
-			"& code[class*='language-']": {
-				...generateThemedCodeStyles(light),
-				background: grays['lighten-70'],
-				fontFamily: 'Fira Code, monospace'
+			[codeSelector]: {
+				...generateThemedPreCodeStyles(light),
+				fontFamily: 'Fira Code, monospace',
+				textShadow: 'none'
 			},
-			background: grays['lighten-70'],
-			border: `1px solid ${grays.base}`,
+			...generateThemedCodeStyles(light),
 			fontFamily: 'Fira Code, monospace',
 			margin: 0
+		},
+		[`.${dark}`]: {
+			[`& ${preCodeSelector}`]: {
+				'& .line-numbers-rows': generateThemedLineNumStyles(dark),
+				[codeSelector]: {
+					...generateThemedPreCodeStyles(dark)
+				},
+				...generateThemedCodeStyles(dark)
+			}
 		}
 	},
 	search: {