refactor the Asidemenu backgrounds

kadena-community · Aug 31, 2023 · 93e2b4d · 93e2b4d
1 parent bbb8005
commit 93e2b4d
Show file tree

Hide file tree

Showing 13 changed files with 187 additions and 178 deletions.
diff --git a/packages/apps/docs/src/components/LastModifiedDate/LastModifiedDate.tsx b/packages/apps/docs/src/components/LastModifiedDate/LastModifiedDate.tsx
@@ -1,6 +1,6 @@
 //  TODO: Find a better source for the last modified date (https://app.asana.com/0/1204649083736950/1204804598558906/f)
 
-//import { Stack, Text } from '@kadena/react-components';
+//import { Stack, Text } from '@kadena/react-ui';
 //import { formatISODate } from '@/utils/dates';
 //import React, { FC } from 'react';
 import { FC } from 'react';

diff --git a/packages/apps/docs/src/components/Layout/Full/Full.tsx b/packages/apps/docs/src/components/Layout/Full/Full.tsx
@@ -1,5 +1,6 @@
 import { Heading } from '@kadena/react-ui';
 
+import { basebackgroundClass } from '../basestyles.css';
 import {
   articleClass,
   contentClass,
@@ -10,20 +11,21 @@ import { globalClass } from '../global.css';
 
 import {
   Aside,
-  AsideBackground,
   AsideList,
   ListItem,
   StickyAside,
   StickyAsideWrapper,
 } from './components/Aside';
 import { PageGrid } from './styles';
+import { asidebackgroundClass } from './styles.css';
 
 import { BottomPageSection } from '@/components/BottomPageSection';
 import { Breadcrumbs } from '@/components/Breadcrumbs';
 import { LastModifiedDate } from '@/components/LastModifiedDate';
 import { IPageProps } from '@/types/Layout';
 import { createSlug } from '@/utils';
 import classNames from 'classnames';
+import classnames from 'classnames';
 import { useRouter } from 'next/router';
 import React, { FC, useEffect, useRef, useState } from 'react';
 
@@ -78,6 +80,11 @@ export const Full: FC<IPageProps> = ({
   const showSideMenu: boolean =
     aSideMenuTree.length > 1 || aSideMenuTree[0]?.children.length > 0;
 
+  const backgroundClassnames = classnames(
+    basebackgroundClass,
+    asidebackgroundClass,
+  );
+
   return (
     <PageGrid className={globalClass}>
       <Template menuItems={leftMenuTree}>
@@ -92,7 +99,7 @@ export const Full: FC<IPageProps> = ({
             />
           </article>
         </div>
-        <AsideBackground />
+        <div className={backgroundClassnames} />
         <Aside data-cy="aside">
           {showSideMenu && (
             <StickyAsideWrapper>

diff --git a/packages/apps/docs/src/components/Layout/Full/components/Aside/AsideStyles.ts b/packages/apps/docs/src/components/Layout/Full/components/Aside/AsideStyles.ts
@@ -2,75 +2,6 @@ import { styled, StyledComponent } from '@kadena/react-components';
 
 import Link from 'next/link';
 
-export const BaseBackground: StyledComponent<
-  'div',
-  {
-    isOpen?: boolean | 'true' | 'false' | undefined;
-  }
-> = styled('div', {
-  position: 'absolute',
-  pointerEvents: 'none',
-  width: '100vw',
-  height: '100vh',
-  zIndex: 0,
-  transform: 'translateX(100vw)',
-
-  '@md': {
-    position: 'fixed',
-    transform: 'translateX(0)',
-  },
-
-  variants: {
-    isOpen: {
-      true: {},
-      false: {},
-    },
-  },
-
-  '&::after': {
-    content: '',
-    position: 'absolute',
-    inset: 0,
-    backgroundColor: '$backgroundOverlayColor',
-    zIndex: 1,
-  },
-});
-
-export const AsideBackground: StyledComponent<typeof BaseBackground> = styled(
-  BaseBackground,
-  {
-    $$shadowWidth: '$sizes$25',
-    display: 'none',
-    '@md': {
-      display: 'block',
-    },
-    '&::before': {
-      content: '',
-      position: 'absolute',
-      pointerEvents: 'none',
-      inset: 0,
-      zIndex: 0,
-      backgroundImage: 'url("/assets/bg-code.png")',
-      backgroundRepeat: 'no-repeat',
-      backgroundPositionY: '-100px',
-      backgroundPositionX:
-        'calc(100vw  - ($$asideMenuWidthMDDefault + $$shadowWidth))',
-      '@2xl': {
-        backgroundPositionX:
-          'calc($sizes$pageWidth + ((100vw - $sizes$pageWidth) /2 ) - ($$asideMenuWidthLGDefault +  $$shadowWidth))',
-      },
-    },
-    '&::after': {
-      '@md': {
-        left: 'calc(100vw  - ($$asideMenuWidthMDDefault + $sizes$4))',
-      },
-      '@2xl': {
-        left: 'calc($sizes$pageWidth + ((100vw - $sizes$pageWidth) /2) - $$asideMenuWidthLGDefault)',
-      },
-    },
-  },
-);
-
 export const Aside: StyledComponent<
   'aside',
   {

diff --git a/packages/apps/docs/src/components/Layout/Full/styles.css.ts b/packages/apps/docs/src/components/Layout/Full/styles.css.ts
@@ -0,0 +1,61 @@
+import { breakpoints, sprinkles, vars } from '@kadena/react-ui/theme';
+
+import { $$pageWidth } from '../global.css';
+
+import { createVar, style } from '@vanilla-extract/css';
+
+export const $$shadowWidth = createVar();
+export const $$asideMenuWidthCode = createVar();
+export const $$asideMenuWidthMDDefault = createVar();
+export const $$asideMenuWidthLGDefault = createVar();
+
+export const asidebackgroundClass = style([
+  sprinkles({
+    display: 'none',
+  }),
+
+  {
+    vars: {
+      [$$shadowWidth]: vars.sizes.$25,
+      [$$asideMenuWidthCode]: '400px',
+      [$$asideMenuWidthMDDefault]: '200px',
+      [$$asideMenuWidthLGDefault]: '300px',
+    },
+
+    selectors: {
+      '&::before': {
+        content: '',
+        position: 'absolute',
+        pointerEvents: 'none',
+        inset: 0,
+        zIndex: 0,
+        backgroundImage: 'url("/assets/bg-code.png")',
+        backgroundRepeat: 'no-repeat',
+        backgroundPositionY: '-100px',
+        backgroundPositionX: `calc(100vw  - (${$$asideMenuWidthMDDefault} + ${$$shadowWidth}))`,
+
+        '@media': {
+          [`screen and ${breakpoints.xxl}`]: {
+            backgroundPositionX: `calc(${$$pageWidth} + ((100vw - ${$$pageWidth}) /2 ) - (${$$asideMenuWidthLGDefault} +  ${$$shadowWidth}))`,
+          },
+        },
+      },
+      '&::after': {
+        '@media': {
+          [`screen and ${breakpoints.md}`]: {
+            left: `calc(100vw  - (${$$asideMenuWidthMDDefault} + ${vars.sizes.$4}))`,
+          },
+          [`screen and ${breakpoints.xxl}`]: {
+            left: `calc(${$$pageWidth} + ((100vw - ${$$pageWidth}) /2) - ${$$asideMenuWidthLGDefault})`,
+          },
+        },
+      },
+    },
+
+    '@media': {
+      [`screen and ${breakpoints.md}`]: {
+        display: 'block',
+      },
+    },
+  },
+]);
diff --git a/packages/apps/docs/src/components/Layout/Redocly/Redocly.tsx b/packages/apps/docs/src/components/Layout/Redocly/Redocly.tsx
@@ -1,3 +1,4 @@
+import { basebackgroundClass } from '../basestyles.css';
 import {
   articleClass,
   contentClass,
@@ -7,12 +8,13 @@ import { Template } from '../components/Template';
 import { globalClass } from '../global.css';
 
 import { CodeBackground, PageGrid } from './styles';
+import { codebackgroundClass } from './styles.css';
 
 import { BottomPageSection } from '@/components/BottomPageSection';
 import { Breadcrumbs } from '@/components/Breadcrumbs';
 import { LastModifiedDate } from '@/components/LastModifiedDate';
 import { IPageProps } from '@/types/Layout';
-import classNames from 'classnames';
+import classnames from 'classnames';
 import React, { FC } from 'react';
 import { RedocRawOptions } from 'redoc';
 
@@ -53,11 +55,15 @@ export const Redocly: FC<IPageProps> = ({
   frontmatter,
   leftMenuTree,
 }) => {
+  const backgroundClassnames = classnames(
+    basebackgroundClass,
+    codebackgroundClass,
+  );
   return (
     <PageGrid className={globalClass}>
       <Template menuItems={leftMenuTree}>
         <div
-          className={classNames(contentClass, contentClassVariants.code)}
+          className={classnames(contentClass, contentClassVariants.code)}
           id="maincontent"
         >
           <article className={articleClass}>
@@ -71,7 +77,7 @@ export const Redocly: FC<IPageProps> = ({
             />
           </article>
         </div>
-        <CodeBackground />
+        <div className={backgroundClassnames} />
       </Template>
     </PageGrid>
   );

diff --git a/packages/apps/docs/src/components/Layout/Redocly/styles.css.ts b/packages/apps/docs/src/components/Layout/Redocly/styles.css.ts
@@ -0,0 +1,65 @@
+import { breakpoints, sprinkles, vars } from '@kadena/react-ui/theme';
+
+import { $$backgroundOverlayColor, $$pageWidth } from '../global.css';
+
+import { createVar, style } from '@vanilla-extract/css';
+
+export const $$shadowWidth = createVar();
+export const $$asideMenuWidthCode = createVar();
+
+export const codebackgroundClass = style([
+  sprinkles({}),
+
+  {
+    vars: {
+      [$$shadowWidth]: vars.sizes.$20,
+      [$$asideMenuWidthCode]: '400px',
+    },
+    selectors: {
+      '&::before': {
+        display: 'none',
+        content: '',
+        position: 'absolute',
+        pointerEvents: 'none',
+        inset: 0,
+        backgroundColor: vars.colors.$background,
+        backgroundImage: 'url("/assets/bg-vertical.png")',
+        backgroundRepeat: 'no-repeat',
+        backgroundPositionY: '-100px',
+        backgroundPositionX: '-100px',
+        '@media': {
+          [`screen and ${breakpoints.md}`]: {
+            backgroundColor: 'transparent',
+            backgroundPositionX: `calc(100vw  - (${$$asideMenuWidthCode} + ${$$shadowWidth}))`,
+          },
+          [`screen and ${breakpoints.lg}`]: {
+            backgroundPositionX: `calc(100vw  - (${$$asideMenuWidthCode} + ${$$shadowWidth}))`,
+          },
+          [`screen and ${breakpoints.xl}`]: {
+            display: 'block',
+          },
+          [`screen and ${breakpoints.xxl}`]: {
+            backgroundPositionX: `calc(${$$pageWidth} + ((100vw - ${$$pageWidth}) /2 ) - (${$$asideMenuWidthCode} + ${$$shadowWidth}))`,
+          },
+        },
+      },
+      '&::after': {
+        backgroundColor: 'transparent',
+        '@media': {
+          [`screen and ${breakpoints.md}`]: {
+            left: `calc(100vw  - (${$$asideMenuWidthCode} +  ${vars.sizes.$4}))`,
+          },
+          [`screen and ${breakpoints.lg}`]: {
+            left: `calc(100vw  - (${$$asideMenuWidthCode} +  ${vars.sizes.$4}  + ${vars.sizes.$4}))`,
+          },
+          [`screen and ${breakpoints.xl}`]: {
+            backgroundColor: $$backgroundOverlayColor,
+          },
+          [`screen and ${breakpoints.xxl}`]: {
+            left: `calc(${$$pageWidth} + ((100vw - ${$$pageWidth}) /2) - (${$$asideMenuWidthCode} + ${vars.sizes.$6} ))`,
+          },
+        },
+      },
+    },
+  },
+]);
diff --git a/packages/apps/docs/src/components/Layout/Redocly/styles.ts b/packages/apps/docs/src/components/Layout/Redocly/styles.ts
@@ -31,54 +31,3 @@ export const PageGrid: StyledComponent<typeof BasePageGrid> = styled(
     },
   },
 );
-
-export const CodeBackground: StyledComponent<typeof BaseBackground> = styled(
-  BaseBackground,
-
-  {
-    $$shadowWidth: '$sizes$20',
-    '&::before': {
-      display: 'none',
-      content: '',
-      position: 'absolute',
-      pointerEvents: 'none',
-      inset: 0,
-      backgroundColor: '$background',
-      backgroundImage: 'url("/assets/bg-vertical.png")',
-      backgroundRepeat: 'no-repeat',
-      backgroundPositionY: '-100px',
-      backgroundPositionX: '-100px',
-      '@md': {
-        backgroundColor: 'transparent',
-        backgroundPositionX:
-          'calc(100vw  - ($$asideMenuWidthCode + $$shadowWidth))',
-      },
-      '@lg': {
-        backgroundPositionX:
-          'calc(100vw  - ($$asideMenuWidthCode + $$shadowWidth))',
-      },
-      '@xl': {
-        display: 'block',
-      },
-      '@2xl': {
-        backgroundPositionX:
-          'calc($sizes$pageWidth + ((100vw - $sizes$pageWidth) /2 ) - ($$asideMenuWidthCode + $$shadowWidth))',
-      },
-    },
-    '&::after': {
-      backgroundColor: 'transparent',
-      '@md': {
-        left: 'calc(100vw  - ($$asideMenuWidthCode +  $sizes$4))',
-      },
-      '@lg': {
-        left: 'calc(100vw  - ($$asideMenuWidthCode +  $sizes$4  + $4))',
-      },
-      '@xl': {
-        backgroundColor: '$backgroundOverlayColor',
-      },
-      '@2xl': {
-        left: 'calc($sizes$pageWidth + ((100vw - $sizes$pageWidth) /2) - ($$asideMenuWidthCode + $6 ))',
-      },
-    },
-  },
-);
diff --git a/packages/apps/docs/src/components/Layout/basestyles.css.ts b/packages/apps/docs/src/components/Layout/basestyles.css.ts
@@ -0,0 +1,35 @@
+import { breakpoints, sprinkles } from '@kadena/react-ui/theme';
+
+import { $$backgroundOverlayColor } from './global.css';
+
+import { style } from '@vanilla-extract/css';
+
+export const basebackgroundClass = style([
+  sprinkles({
+    position: 'absolute',
+    pointerEvents: 'none',
+    zIndex: 0,
+  }),
+  {
+    width: '100vw',
+    height: '100vh',
+    transform: 'translateX(100vw)',
+
+    selectors: {
+      '&::after': {
+        content: '',
+        position: 'absolute',
+        inset: 0,
+        backgroundColor: $$backgroundOverlayColor,
+        zIndex: 1,
+      },
+    },
+
+    '@media': {
+      [`screen and ${breakpoints.md}`]: {
+        position: 'fixed',
+        transform: 'translateX(0)',
+      },
+    },
+  },
+]);