chore: redo examples page

pmndrs · May 26, 2024 · 5608fbe · 5608fbe
1 parent a3b84e7
commit 5608fbe
Show file tree

Hide file tree

Showing 11 changed files with 852 additions and 137 deletions.
diff --git a/docs/app/components/Buttons/NavButton.css.ts b/docs/app/components/Buttons/NavButton.css.ts
@@ -74,7 +74,7 @@ export const navAnchor = recipe({
   variants: {
     active: {
       true: {
-        background: '$redYellowGradient100',
+        background: vars.colors.redYellowGradient100,
       },
       false: {
         backgroundColor: '$white',

diff --git a/docs/app/components/Header/Header.css.ts b/docs/app/components/Header/Header.css.ts
@@ -10,6 +10,7 @@ export const desktopHeight = createVar()
 export const header = style({
   width: '100%',
   paddingTop: vars.space['15'],
+  paddingBottom: vars.space['15'],
   zIndex: vars.zIndices['1'],
 
   '@media': {
@@ -19,6 +20,17 @@ export const header = style({
 
     [`screen and ${BREAKPOINTS.tabletUp}`]: {
       paddingTop: vars.space['25'],
+      paddingBottom: vars.space['25'],
+    },
+  },
+})
+
+export const headerSpacing = style({
+  height: mobileHeight,
+
+  '@media': {
+    [`screen and ${BREAKPOINTS.tabletUp}`]: {
+      height: desktopHeight,
     },
   },
 })

diff --git a/docs/app/components/Header/Header.tsx b/docs/app/components/Header/Header.tsx
@@ -27,6 +27,7 @@ import {
   headerScrolledDown,
   headerTransparentBackground,
   headerAddMarginToMain,
+  headerSpacing,
 } from './Header.css'
 import clsx from 'clsx'
 
@@ -43,7 +44,7 @@ interface HeaderProps {
 }
 
 export const getHeaderHeights = (): [desktop: number, mobile: number] => [
-  89, 63,
+  114, 78,
 ]
 
 export const Header = ({
@@ -72,41 +73,54 @@ export const Header = ({
   const [desktopHeight, mobileHeight] = headerHeights
 
   return (
-    <animated.header
-      className={clsx(
-        header,
-        isStuck && headerStuck,
-        (subnav.length > 0 || (scrollTop > 20 && direction === 'up')) &&
-          headerScrolledDown,
-        transparentBackground && headerTransparentBackground,
-        addMarginToMain && headerAddMarginToMain,
-        className
+    <>
+      {isStuck && (
+        <div
+          className={headerSpacing}
+          style={{
+            ...assignInlineVars({
+              [mobileHeightVar]: `${mobileHeight}px`,
+              [desktopHeightVar]: `${desktopHeight}px`,
+            }),
+          }}
+        />
       )}
-      style={{
-        ...styles,
-        position,
-        ...assignInlineVars({
-          [mobileHeightVar]: `${mobileHeight}px`,
-          [desktopHeightVar]: `${desktopHeight}px`,
-        }),
-      }}
-    >
-      <div className={flexContainer}>
-        <HeaderNavigation className={desktopNavigation} />
-        <Dialog.Root open={dialogOpen} onOpenChange={handleDialogChange}>
-          <Dialog.Trigger className={mobileMenuButton}>
-            <List className={hamburgerMenu} size={20} />
-          </Dialog.Trigger>
-          <Dialog.Portal forceMount>
-            <HeaderSidePanel
-              onNavigationClick={handleNavigationClick}
-              isOpen={dialogOpen}
-              submenu={sidebar}
-            />
-          </Dialog.Portal>
-        </Dialog.Root>
-        <Logo />
-      </div>
-    </animated.header>
+      <animated.header
+        className={clsx(
+          header,
+          isStuck && headerStuck,
+          (subnav.length > 0 || (scrollTop > 20 && direction === 'up')) &&
+            headerScrolledDown,
+          transparentBackground && headerTransparentBackground,
+          addMarginToMain && headerAddMarginToMain,
+          className
+        )}
+        style={{
+          ...styles,
+          position,
+          ...assignInlineVars({
+            [mobileHeightVar]: `${mobileHeight}px`,
+            [desktopHeightVar]: `${desktopHeight}px`,
+          }),
+        }}
+      >
+        <div className={flexContainer}>
+          <HeaderNavigation className={desktopNavigation} />
+          <Dialog.Root open={dialogOpen} onOpenChange={handleDialogChange}>
+            <Dialog.Trigger className={mobileMenuButton}>
+              <List className={hamburgerMenu} size={20} />
+            </Dialog.Trigger>
+            <Dialog.Portal forceMount>
+              <HeaderSidePanel
+                onNavigationClick={handleNavigationClick}
+                isOpen={dialogOpen}
+                submenu={sidebar}
+              />
+            </Dialog.Portal>
+          </Dialog.Root>
+          <Logo />
+        </div>
+      </animated.header>
+    </>
   )
 }
diff --git a/docs/app/components/Select.css.ts b/docs/app/components/Select.css.ts
@@ -0,0 +1,83 @@
+import { style } from '@vanilla-extract/css'
+import { vars } from '../styles/theme-contract.css'
+import { BREAKPOINTS } from '../styles/breakpoints.css'
+import { darkThemeClass } from '../styles/dark-theme.css'
+import { recipe } from '@vanilla-extract/recipes'
+
+export const controlDiv = recipe({
+  base: {
+    background: 'transparent',
+    fontWeight: vars.fontWeights.default,
+    cursor: 'pointer',
+  },
+  variants: {
+    isFocused: {
+      true: {
+        borderBottom: `solid 2px ${vars.colors.red100}`,
+      },
+      false: {
+        borderBottom: `solid 2px ${vars.colors.black}`,
+      },
+    },
+  },
+})
+
+export const placeholderSpan = style({
+  fontSize: vars.fontSizes.XXS,
+  lineHeight: vars.lineHeights.XXS,
+
+  '@media': {
+    [`screen and ${BREAKPOINTS.tabletUp}`]: {
+      fontSize: vars.fontSizes.XS,
+      lineHeight: vars.lineHeights.XS,
+    },
+  },
+})
+
+export const menuBackground = style({
+  backgroundColor: vars.colors.white,
+  opacity: 0.2,
+  position: 'absolute',
+  inset: 0,
+  zIndex: vars.zIndices['1'],
+})
+
+export const menu = style({
+  position: 'absolute',
+  zIndex: vars.zIndices['2'],
+  background: vars.colors.codeBackground,
+  color: vars.colors.black,
+  fontSize: vars.fontSizes.XXS,
+  lineHeight: vars.lineHeights.XXS,
+  overflow: 'hidden',
+  boxShadow:
+    'rgba(27,31,36,0.12) 0px 1px 3px, rgba(66,74,83,0.12) 0px 8px 24px',
+  width: '100%',
+  borderTopRightRadius: vars.radii.r8,
+  borderTopLeftRadius: vars.radii.r8,
+  bottom: 0,
+  left: 0,
+
+  [`${darkThemeClass} &`]: {
+    boxShadow:
+      'rgba(27,31,36,0.5) 0px 1px 3px, rgba(18 21 23 / 40%) 0px 8px 24px',
+  },
+
+  '@media': {
+    [`screen and ${BREAKPOINTS.tabletUp}`]: {
+      bottom: 'unset',
+      borderRadius: vars.radii.r8,
+      width: 200,
+      fontSize: vars.fontSizes.XS,
+      lineHeight: vars.lineHeights.XS,
+    },
+  },
+})
+
+export const option = style({
+  cursor: 'pointer',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: `${vars.space['10']} ${vars.space['40']} ${vars.space['10']} ${vars.space['20']}`,
+})