add theme to custom components

pluralsh · Nov 5, 2024 · ff1912d · ff1912d
1 parent f228419
commit ff1912d
Show file tree

Hide file tree

Showing 6 changed files with 201 additions and 86 deletions.
diff --git a/src/components/Typography.tsx b/src/components/Typography.tsx
@@ -103,30 +103,40 @@ export const ResponsiveText = styled.h2.withConfig(textPropFilter)<{
   }
 })
 
-export const Hero1 = styled.h1<{ $color?: ColorKey }>(({ theme, $color }) => ({
-  ...theme.partials.marketingText.hero1,
-  color: $color && (theme.colors[$color] as string),
-}))
+export const Hero1 = styled.h1<{ $color?: ColorKey }>(
+  ({ theme, $color = 'text' }) => ({
+    ...theme.partials.marketingText.hero1,
+    color: $color && (theme.colors[$color] as string),
+  })
+)
 
-export const Hero2 = styled.h2<{ $color?: ColorKey }>(({ theme, $color }) => ({
-  ...theme.partials.marketingText.hero2,
-  color: $color && (theme.colors[$color] as string),
-}))
+export const Hero2 = styled.h2<{ $color?: ColorKey }>(
+  ({ theme, $color = 'text' }) => ({
+    ...theme.partials.marketingText.hero2,
+    color: $color && (theme.colors[$color] as string),
+  })
+)
 
-export const Title1 = styled.h3<{ $color?: ColorKey }>(({ theme, $color }) => ({
-  ...theme.partials.marketingText.title1,
-  color: $color && (theme.colors[$color] as string),
-}))
+export const Title1 = styled.h3<{ $color?: ColorKey }>(
+  ({ theme, $color = 'text' }) => ({
+    ...theme.partials.marketingText.title1,
+    color: $color && (theme.colors[$color] as string),
+  })
+)
 
-export const Title2 = styled.h4<{ $color?: ColorKey }>(({ theme, $color }) => ({
-  ...theme.partials.marketingText.title2,
-  color: $color && (theme.colors[$color] as string),
-}))
+export const Title2 = styled.h4<{ $color?: ColorKey }>(
+  ({ theme, $color = 'text' }) => ({
+    ...theme.partials.marketingText.title2,
+    color: $color && (theme.colors[$color] as string),
+  })
+)
 
-export const Body1 = styled.p<{ $color?: ColorKey }>(({ theme, $color }) => ({
-  ...theme.partials.marketingText.body1,
-  color: $color && (theme.colors[$color] as string),
-}))
+export const Body1 = styled.p<{ $color?: ColorKey }>(
+  ({ theme, $color = 'text-light' }) => ({
+    ...theme.partials.marketingText.body1,
+    color: theme.colors[$color] as string,
+  })
+)
 
 export const Body2 = styled.p<{ $color?: ColorKey }>(
   ({ theme, $color = 'text-light' }) => ({
@@ -136,16 +146,16 @@ export const Body2 = styled.p<{ $color?: ColorKey }>(
 )
 
 export const Subtitle1 = styled.p<{ $color?: ColorKey }>(
-  ({ theme, $color }) => ({
+  ({ theme, $color = 'text' }) => ({
     ...theme.partials.marketingText.subtitle1,
-    color: $color && (theme.colors[$color] as string),
+    color: theme.colors[$color] as string,
   })
 )
 
 export const Subtitle2 = styled.p<{ $color?: ColorKey }>(
-  ({ theme, $color }) => ({
+  ({ theme, $color = 'text' }) => ({
     ...theme.partials.marketingText.subtitle2,
-    color: $color && (theme.colors[$color] as string),
+    color: theme.colors[$color] as string,
   })
 )
 

diff --git a/src/components/custom-page/Hero.tsx b/src/components/custom-page/Hero.tsx
@@ -21,7 +21,7 @@ export function Hero({
   form,
 }: HeroComponentFragment) {
   return (
-    <section className={cn(getSpacingClassName(spacing), 'mx-xxxxxxlarge')}>
+    <section className={cn(getSpacingClassName(spacing), 'px-xxxxxxlarge')}>
       <Flex gap="xxxlarge">
         <Flex
           flex={1}

diff --git a/src/components/custom-page/TwoColumnText.tsx b/src/components/custom-page/TwoColumnText.tsx
@@ -18,10 +18,10 @@ export function TwoColumnText({
         'mx-xxxxxxlarge flex gap-xxlarge'
       )}
     >
-      <div className="w-2/3">
+      <div className="w-2/3 text-text-light">
         <Markdown text={mainContent} />
       </div>
-      <div className="w-1/3">
+      <div className="w-1/3 text-text-light">
         <Markdown text={sideContent} />
       </div>
     </section>

diff --git a/src/components/custom-page/common.tsx b/src/components/custom-page/common.tsx
@@ -1,3 +1,10 @@
+import { type ReactElement } from 'react'
+
+import { styledThemeDark, styledThemeLight } from '@pluralsh/design-system'
+
+import { colorsToCSSVars } from '@pluralsh/design-system/dist/GlobalStyle'
+import styled, { ThemeProvider } from 'styled-components'
+
 import { type CustomPageFragment } from '@src/generated/graphqlDirectus'
 
 import { BlogCards } from './BlogCards'
@@ -12,41 +19,66 @@ import { SectionHeader } from './SectionHeader'
 import { TwoColumnText } from './TwoColumnText'
 
 const spacingToClassName = {
-  relaxed: 'my-[192px]',
-  normal: 'my-[96px]',
-  compact: 'my-[48px]',
+  relaxed: 'py-[192px]',
+  normal: 'py-[96px]',
+  compact: 'py-[48px]',
 }
 
 export const getSpacingClassName = (spacing: Nullable<string>) =>
   spacingToClassName[spacing ?? 'normal'] ?? ''
 
-export function renderComponent(
-  component: NonNullable<
-    NonNullable<CustomPageFragment['components']>[number]
-  >['item']
-) {
+export function renderComponent({
+  theme,
+  ...component
+}: NonNullable<
+  NonNullable<NonNullable<CustomPageFragment['components']>[number]>['item']
+>) {
+  let renderedComponent: ReactElement | null = null
+
   switch (component?.__typename) {
     case 'hero':
-      return <Hero {...component} />
+      renderedComponent = <Hero {...component} />
+      break
     case 'logo_strip':
-      return <LogoStrip {...component} />
+      renderedComponent = <LogoStrip {...component} />
+      break
     case 'section_header':
-      return <SectionHeader {...component} />
+      renderedComponent = <SectionHeader {...component} />
+      break
     case 'large_image':
-      return <LargeImage {...component} />
+      renderedComponent = <LargeImage {...component} />
+      break
     case 'cards':
-      return <Cards {...component} />
+      renderedComponent = <Cards {...component} />
+      break
     case 'blog_cards':
-      return <BlogCards {...component} />
+      renderedComponent = <BlogCards {...component} />
+      break
     case 'two_column_text':
-      return <TwoColumnText {...component} />
+      renderedComponent = <TwoColumnText {...component} />
+      break
     case 'multi_column_text':
-      return <MultiColumnText {...component} />
+      renderedComponent = <MultiColumnText {...component} />
+      break
     case 'customer_quote':
-      return <CustomerQuote {...component} />
+      renderedComponent = <CustomerQuote {...component} />
+      break
     case 'cta':
-      return <CallToAction {...component} />
+      renderedComponent = <CallToAction {...component} />
+      break
     default:
-      return null
+      break
   }
+  const styles = theme === 'light' ? styledThemeLight : styledThemeDark
+
+  return (
+    <ThemeProvider theme={styles}>
+      <ComponentWrapperSC>{renderedComponent}</ComponentWrapperSC>
+    </ThemeProvider>
+  )
 }
+
+const ComponentWrapperSC = styled.div(({ theme }) => ({
+  backgroundColor: theme.colors['fill-zero'],
+  ...colorsToCSSVars(theme.colors),
+}))