going extra with the glass effects

Author: nmn

packages/docs/src/components/layout/docs.tsx

@@ -82,10 +82,6 @@ const layoutStyles = stylex.create({
   gap: {
     flexGrow: 1,
   },
-  sidebarTrigger: {
-    // md:hidden
-    // display: { default: 'none', '@media (min-width: 768px)': 'block' },
-  },
   main: {
     // flex flex-1 flex-row [--fd-nav-height:56px]
     display: 'flex',
@@ -143,6 +139,8 @@ function Sidebar() {
       <aside {...stylex.props(sidebarStyles.base)} ref={sidebarRef}>
         {children}
       </aside>
+
+      <div {...stylex.props(sidebarStyles.overlayBlur)} />
     </div>
   );
 }
@@ -186,6 +184,18 @@ const sidebarStyles = stylex.create({
     bottom: 0,
     backdropFilter: 'blur(32px) saturate(800%)',
   },
+  overlayBlur: {
+    position: 'absolute',
+    inset: 9,
+    pointerEvents: 'none',
+    overflow: 'hidden',
+    borderRadius: 19,
+    cornerShape: 'squircle',
+    zIndex: 1,
+    backdropFilter: 'blur(32px) saturate(600%)',
+    maskImage:
+      'linear-gradient(to right, white, transparent 8%, transparent 92%, white)',
+  },
   base: {
     display: 'flex',
     flexDirection: 'column',
@@ -202,7 +212,7 @@ const sidebarStyles = stylex.create({
     borderStyle: 'solid',
     borderColor: 'var(--color-fd-border)',
     boxShadow: '0 4px 16px rgba(0, 0, 0, 0.06)',
-    zIndex: 10,
+    zIndex: 1,
   },
 });
 

packages/docs/src/components/layout/home/client.tsx

@@ -45,6 +45,7 @@ export function Navbar({ xstyle, ...props }: StyleXComponentProps<'div'>) {
           >
             <nav {...stylex.props(navbarStyles.nav)}>{props.children}</nav>
           </NavigationMenuList>
+          <div {...stylex.props(navbarStyles.overlayBlur)} />
         </header>
       </>
     </NavigationMenu>
@@ -86,13 +87,12 @@ const navbarStyles = stylex.create({
     position: 'absolute',
     inset: -8,
     bottom: -32,
-    backdropFilter: 'blur(16px) saturate(800%)',
+    backdropFilter: 'blur(16px) saturate(400%)',
   },
   gradientBlur: {
     position: 'absolute',
     inset: -8,
     bottom: -32,
-    // backgroundColor: 'var(--color-fd-background)',
     backdropFilter: 'blur(32px)',
     maskImage: 'linear-gradient(to bottom, white 30%, transparent)',
   },
@@ -101,7 +101,21 @@ const navbarStyles = stylex.create({
     inset: -8,
     bottom: -32,
     backgroundColor: 'var(--color-fd-background)',
-    maskImage: 'linear-gradient(to bottom, white 50%, transparent)',
+    maskImage:
+      'linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 50%, transparent)',
+  },
+  overlayBlur: {
+    position: 'absolute',
+    pointerEvents: 'none',
+    inset: 9,
+    borderRadius: 19,
+    cornerShape: 'squircle',
+    overflow: 'hidden',
+    backdropFilter: 'blur(20px) saturate(1000%)',
+    backgroundColor: 'transparent',
+    maskImage:
+      'linear-gradient(to bottom, white, transparent 8%, transparent 92%, white)',
+    zIndex: 10,
   },
   headerWithVals: {
     // 'max-lg:shadow-lg max-lg:rounded-b-2xl'

packages/docs/src/components/mdx/index.tsx

@@ -8,6 +8,7 @@ import Heading from './Heading';
 import { HTMLAttributes } from 'react';
 import { StyleXStyles } from '@stylexjs/stylex';
 import MDXLink from './Link';
+import * as stylex from '@stylexjs/stylex';
 
 type StyleXHTMLProps<T extends HTMLElement = HTMLElement> = Omit<
   HTMLAttributes<T>,
@@ -37,9 +38,19 @@ export const mdxComponents = {
   h6: (props: StyleXHTMLProps<HTMLHeadingElement>) => (
     <Heading as="h6" {...props} />
   ),
+  code: (props: StyleXHTMLProps<HTMLElement>) => (
+    <code {...props} {...stylex.props(styles.code)} />
+  ),
   TabItem,
   Tabs,
   Dial,
   DevInstallExample,
   WhenDemo: Card,
 };
+
+const styles = stylex.create({
+  code: {
+    // color: `hsl(var(--cyan-h), var(--cyan-s), var(--cyan-l))`,
+    color: 'light-dark(hsl(146, 55%, 45%), hsl(146, 52%, 68%))',
+  },
+});

packages/docs/waku.config.ts

@@ -4,6 +4,9 @@ import * as MdxConfig from './source.config.js';
 import tailwindcss from '@tailwindcss/vite';
 import tsconfigPaths from 'vite-tsconfig-paths';
 import stylex from '@stylexjs/unplugin';
+// import lightningcss from 'lightningcss';
+import { browserslistToTargets } from 'lightningcss';
+import browserslist from 'browserslist';
 
 export default defineConfig({
   vite: {
@@ -18,6 +21,11 @@ export default defineConfig({
         devMode: 'css-only',
         devPersistToDisk: true,
         runtimeInjection: false,
+        lightningcssOptions: {
+          minify: process.env.NODE_ENV !== 'development',
+
+          targets: browserslistToTargets(browserslist('>= 5%')),
+        },
       }),
       // @ts-ignore
       tailwindcss(),