feat(docs): backdrop filter the navbar (#9)

Project-DARC · May 9, 2023 · be95668 · be95668
1 parent fa6ccc9
commit be95668
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 18 deletions.
diff --git a/darc-docs/src/css/custom.css b/darc-docs/src/css/custom.css
@@ -6,25 +6,30 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #2e8555;
-  --ifm-color-primary-dark: #29784c;
-  --ifm-color-primary-darker: #277148;
-  --ifm-color-primary-darkest: #205d3b;
-  --ifm-color-primary-light: #33925d;
-  --ifm-color-primary-lighter: #359962;
-  --ifm-color-primary-lightest: #3cad6e;
-  --ifm-code-font-size: 95%;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+    --ifm-color-primary: #2e8555;
+    --ifm-color-primary-dark: #29784c;
+    --ifm-color-primary-darker: #277148;
+    --ifm-color-primary-darkest: #205d3b;
+    --ifm-color-primary-light: #33925d;
+    --ifm-color-primary-lighter: #359962;
+    --ifm-color-primary-lightest: #3cad6e;
+    --ifm-code-font-size: 95%;
+    --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
-  --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: #21af90;
-  --ifm-color-primary-darker: #1fa588;
-  --ifm-color-primary-darkest: #1a8870;
-  --ifm-color-primary-light: #29d5b0;
-  --ifm-color-primary-lighter: #32d8b4;
-  --ifm-color-primary-lightest: #4fddbf;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+    --ifm-color-primary: #25c2a0;
+    --ifm-color-primary-dark: #21af90;
+    --ifm-color-primary-darker: #1fa588;
+    --ifm-color-primary-darkest: #1a8870;
+    --ifm-color-primary-light: #29d5b0;
+    --ifm-color-primary-lighter: #32d8b4;
+    --ifm-color-primary-lightest: #4fddbf;
+    --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
+
+.navbar {
+    backdrop-filter: blur(30px);
+    background: transparent;
+}
diff --git a/darc-docs/src/pages/index.js b/darc-docs/src/pages/index.js
@@ -13,6 +13,7 @@ import {
 } from "react-icons/all";
 import {useCopyToClipboard} from "react-use";
 import Link from "@docusaurus/Link";
+import {customTheme} from "../theme";
 
 // styled docusaurus link without underline and default color
 const PlainLink = styled(Link)(({theme}) => ({
@@ -67,6 +68,11 @@ function HomepageHeader() {
                     <Stack direction={'row'} spacing={2}>
                         <Button size={'lg'} endDecorator={<FiChevronRight/>}
                                 component={PlainLink} to={'/docs/Overview/'}
+                                sx={{
+                                    '&:hover': {
+                                        color: 'var(--joy-palette-common-white, #FFF)',
+                                    },
+                                }}
                         >Get started</Button>
                         <Box sx={{
                             cursor: 'pointer',
@@ -154,7 +160,7 @@ export default function Home() {
         <Layout
             title={`Hello from ${siteConfig.title}`}
             description="Description will go into a meta tag in <head />">
-            <CssVarsProvider>
+            <CssVarsProvider disableTransitionOnChange theme={customTheme}>
                 <Box sx={{
                     my: 10
                 }}>

diff --git a/darc-docs/src/theme.ts b/darc-docs/src/theme.ts
@@ -0,0 +1,68 @@
+import {extendTheme} from '@mui/joy/styles';
+
+export const customTheme = extendTheme({
+    colorSchemes: {
+        light: {
+            palette: {
+                background: {
+                    body: 'var(--joy-palette-neutral-50)',
+                },
+            },
+        },
+        dark: {
+            palette: {
+                neutral: {
+                    outlinedBorder: 'var(--joy-palette-neutral-700)',
+                },
+            },
+        },
+    },
+    components: {
+        JoyAutocomplete: {
+            styleOverrides: {
+                root: {
+                    boxShadow: 'var(--joy-shadow-xs)',
+                },
+            },
+        },
+        JoyButton: {
+            styleOverrides: {
+                root: {
+                    boxShadow: 'var(--joy-shadow-xs)',
+                    transition: 'all 0.2s ease-in-out',
+                    '&:hover': {
+                        transform: 'scale(1.05)',
+                    },
+                    '&:active': {
+                        transform: 'scale(0.95)',
+                    },
+                },
+            },
+        },
+        JoyInput: {
+            styleOverrides: {
+                root: {
+                    boxShadow: 'var(--joy-shadow-xs)',
+                },
+            },
+        },
+        JoyTextarea: {
+            styleOverrides: {
+                root: {
+                    boxShadow: 'var(--joy-shadow-xs)',
+                },
+            },
+        },
+        JoySelect: {
+            styleOverrides: {
+                root: {
+                    boxShadow: 'var(--joy-shadow-xs)',
+                },
+            },
+        },
+    },
+    fontFamily: {
+        display: "'Inter', var(--joy-fontFamily-fallback)",
+        body: "'Inter', var(--joy-fontFamily-fallback)",
+    },
+});