Use vars everywhere (#555)

flying-sheep · Sep 3, 2024 · 718c29b · 718c29b
1 parent f68f42c
commit 718c29b
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 15 deletions.
diff --git a/src/components/markup/nodes/ASTErrorMessage.tsx b/src/components/markup/nodes/ASTErrorMessage.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react'
 
 import Box from '@mui/material/Box'
-import red from '@mui/material/colors/red'
+import useTheme from '@mui/material/styles/useTheme'
 
 import type { Node } from '../../../markup/MarkupDocument'
 import CodeBlock from '../../CodeBlock'
@@ -14,11 +14,14 @@ export interface ASTErrorMessageProps {
 const ASTErrorMessage: FC<ASTErrorMessageProps> = ({
 	node,
 	children,
-}: ASTErrorMessageProps) => (
-	<Box sx={{ color: red.A400 }}>
-		{children}
-		{node && <CodeBlock>{JSON.stringify(node, undefined, 2)}</CodeBlock>}
-	</Box>
-)
+}: ASTErrorMessageProps) => {
+	const theme = useTheme()
+	return (
+		<Box sx={{ color: theme.vars.palette.error.main }}>
+			{children}
+			{node && <CodeBlock>{JSON.stringify(node, undefined, 2)}</CodeBlock>}
+		</Box>
+	)
+}
 
 export default ASTErrorMessage
diff --git a/src/components/markup/nodes/High.tsx b/src/components/markup/nodes/High.tsx
@@ -55,10 +55,9 @@ export interface HighProps<Theme extends object = object> {
 const High: FC<HighProps> = ({ code, language, sx }) => {
 	const [loaded, setLoaded] = useState(false)
 	const [err, setErr] = useState<Error>()
-	const {
-		palette: { mode },
-	} = useTheme()
-	const theme = mode === 'dark' ? themes.vsDark : themes.vsLight
+	const theme = useTheme()
+	const prismTheme =
+		theme.palette.mode === 'dark' ? themes.vsDark : themes.vsLight
 	useEffect(() => {
 		loadLang(language)
 			.then(() => setLoaded(true))
@@ -70,7 +69,7 @@ const High: FC<HighProps> = ({ code, language, sx }) => {
 			prism={Prism}
 			code={code}
 			language={loaded ? language : 'text'}
-			theme={theme}
+			theme={prismTheme}
 		>
 			{({ className, style, tokens, getLineProps, getTokenProps }) => (
 				<CodeBlock

diff --git a/src/components/routes/App/index.tsx b/src/components/routes/App/index.tsx
@@ -13,7 +13,6 @@ import Toolbar from '@mui/material/Toolbar'
 import { deepPurple } from '@mui/material/colors'
 import {
 	ThemeProvider,
-	alpha,
 	createTheme,
 	responsiveFontSizes,
 } from '@mui/material/styles'
@@ -85,8 +84,8 @@ const App = () => {
 				<AppBar
 					position="sticky"
 					sx={{
-						color: theme.palette.text.primary,
-						background: alpha(theme.palette.background.default, 0.7),
+						color: theme.vars.palette.text.primary,
+						background: `color(from ${theme.vars.palette.background.default} / 0.7)`,
 						// TODO re-add contrast(200%) before blur without discoloring dark mode
 						backdropFilter: 'blur(15px)',
 					}}