Change menu link colors and Hero size.

davidjerleke · Nov 10, 2023 · 10bb582 · 10bb582
1 parent b93a200
commit 10bb582
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 9 deletions.
diff --git a/packages/embla-carousel-docs/src/components/Hero/HeroBrand.tsx b/packages/embla-carousel-docs/src/components/Hero/HeroBrand.tsx
@@ -45,7 +45,11 @@ const HeroLogo = styled(SiteLogo)`
   }
 
   ${MEDIA.MIN_MD} {
-    ${createSquareSizeStyles('28rem')};
+    ${createSquareSizeStyles('32rem')};
+  }
+
+  ${MEDIA.MIN_LG} {
+    ${createSquareSizeStyles('36rem')};
   }
 `
 
@@ -64,7 +68,7 @@ const Content = styled.div`
 
 const H1 = styled.h1`
   color: ${COLORS.TEXT_HIGH_CONTRAST};
-  margin-bottom: ${SPACINGS.THREE};
+  margin-bottom: ${SPACINGS.FOUR};
   font-size: ${FONT_SIZES.CUSTOM(() => 5)};
   line-height: 0.9;
   font-weight: ${FONT_WEIGHTS.BLACK};
@@ -84,6 +88,14 @@ const H1 = styled.h1`
   ${MEDIA.MIN_SM} {
     font-size: ${FONT_SIZES.CUSTOM(() => 6.2)};
   }
+
+  ${MEDIA.MIN_MD} {
+    font-size: ${FONT_SIZES.CUSTOM(() => 8)};
+  }
+
+  ${MEDIA.MIN_LG} {
+    font-size: ${FONT_SIZES.CUSTOM(() => 10)};
+  }
 `
 
 const H2 = styled.h2`

diff --git a/packages/embla-carousel-docs/src/components/Page/PageFrame.tsx b/packages/embla-carousel-docs/src/components/Page/PageFrame.tsx
@@ -6,7 +6,7 @@ type FrameSizesType = keyof typeof PAGE_FRAME_SIZES
 
 const PAGE_FRAME_SIZES = {
   DEFAULT: '144rem',
-  MD: '100rem',
+  MD: '110rem',
   SM: '68rem'
 }
 

diff --git a/packages/embla-carousel-docs/src/components/SiteNavigation/SiteNavigationSubMenu.tsx b/packages/embla-carousel-docs/src/components/SiteNavigation/SiteNavigationSubMenu.tsx
@@ -9,7 +9,7 @@ import { BRAND_GRADIENT_TEXT_STYLES } from 'consts/gradients'
 import { FONT_WEIGHTS } from 'consts/fontSizes'
 import { RouteType } from 'components/Routes/RoutesContext'
 import { ButtonBare } from 'components/Button/ButtonBare'
-import { LinkNavigation } from 'components/Link/LinkNavigation'
+import { InactiveText, LinkNavigation } from 'components/Link/LinkNavigation'
 import { useRouteActive } from 'hooks/useRouteActive'
 import { Icon } from 'components/Icon/Icon'
 
@@ -98,6 +98,10 @@ const Link = styled(LinkNavigation)`
   margin: 0 0;
   text-align: left;
   padding: ${ITEM_SPACING} 0;
+
+  > ${InactiveText} {
+    color: ${COLORS.TEXT_LOW_CONTRAST};
+  }
 `
 
 type PropType = {

diff --git a/packages/embla-carousel-docs/src/components/TableOfContents/TableOfContentsMenuItem.tsx b/packages/embla-carousel-docs/src/components/TableOfContents/TableOfContentsMenuItem.tsx
@@ -1,27 +1,37 @@
 import React, { PropsWithChildren } from 'react'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 import { SPACINGS } from 'consts/spacings'
 import { BORDER_SIZES } from 'consts/border'
 import { TableOfContentsItemType } from './TableOfContentsContext'
-import { LinkNavigation } from 'components/Link/LinkNavigation'
+import { InactiveText, LinkNavigation } from 'components/Link/LinkNavigation'
+import { COLORS } from 'consts/themes'
 
-const Link = styled(LinkNavigation)`
+const Link = styled(LinkNavigation)<{ $level: number }>`
   padding-top: ${SPACINGS.CUSTOM(({ ONE }) => ONE - 0.4)};
   padding-bottom: ${SPACINGS.CUSTOM(({ ONE }) => ONE - 0.4)};
   outline-offset: -${BORDER_SIZES.OUTLINE};
+
+  ${({ $level }) =>
+    $level > 0 &&
+    css`
+      > ${InactiveText} {
+        color: ${COLORS.TEXT_LOW_CONTRAST};
+      }
+    `};
 `
 
 type PropType = PropsWithChildren<{
   item: TableOfContentsItemType
   isActive: boolean
+  level: number
 }>
 
 export const TableOfContentsMenuItem = (props: PropType) => {
-  const { item, isActive, children } = props
+  const { item, isActive, children, level } = props
 
   return (
     <li key={item.url}>
-      <Link slug={item.url || ''} isActive={isActive}>
+      <Link slug={item.url || ''} isActive={isActive} $level={level}>
         {item.title}
       </Link>
 

diff --git a/packages/embla-carousel-docs/src/components/TableOfContents/TableOfContentsMenuItems.tsx b/packages/embla-carousel-docs/src/components/TableOfContents/TableOfContentsMenuItems.tsx
@@ -45,6 +45,7 @@ export const TableOfContentsMenuItems = (props: PropType) => {
             key={item.url}
             item={item}
             isActive={isActive}
+            level={level}
           >
             {item.items && (
               <TableOfContentsMenuItems