Theming updates

src/apps/pages/sections/Banner.astro

@@ -4,6 +4,7 @@ import Container from '@components/Container.astro';
 import LinkButton from '@components/LinkButton';
 import SearchBar from '@apps/pages/sections/SearchBar';
 import RichText from '@apps/pages/sections/RichText.astro';
+import { toBackgroundClass, toTextClass } from '@utils/pageBuilder';
 
 const Height = {
   small: 'small',
@@ -15,9 +16,9 @@ const {
   background, 
   buttonText,
   clip, 
-  color, 
   content, 
   darken, 
+  darkText,
   height, 
   image,
   imageAlt,
@@ -32,15 +33,13 @@ const {
 <div
   class={clsx(
     'w-full relative flex flex-col justify-center',
+    toBackgroundClass(background),
     { 'items-center': textAlignment === 'center' },
     { 'overflow-hidden': clip },
-    { 'bg-primary': background === 'primary' },
-    { 'bg-secondary': background === 'secondary' },
-    { 'bg-white': background === 'white' },
-    { 'bg-black': background === 'black' },
     { 'min-h-[220px]': height === Height.small },
     { 'min-h-[420px]': height === Height.medium },
-    { 'min-h-[720px]': height === Height.large }
+    { 'min-h-[720px]': height === Height.large },
+    { 'text-text-inverse': !darkText }
   )}
 >
   { image && (
@@ -55,7 +54,7 @@ const {
   ) }
   { darken && (
     <div
-      class='absolute top-0 left-0 w-full h-full bg-gray-900/30'
+      class='absolute top-0 left-0 w-full h-full bg-tertiary mix-blend-multiply'
     /> 
   ) }
   <div class={clsx(
@@ -104,9 +103,8 @@ const {
       { content && content.children?.length ? (
         <div class={clsx(
           'prose max-w-none py-8 lg:py-16 z-10',
-          { '!text-white': color === 'white' },
-          { '!text-black': !color || color === 'black'},
-          { 'text-center': textAlignment === 'center' }
+          { 'text-center': textAlignment === 'center' },
+          { 'text-text-inverse': !darkText }
         )}>
           <RichText content={content} />
         </div> 

src/apps/pages/sections/ColumnContent.astro

@@ -21,11 +21,14 @@ const BlockTypes = {
 
 ---
 { item.__typename.endsWith(BlockTypes.image) && ( 
-  <img src={item.image} class='w-full object-cover' />
+  <img src={item.image} class={clsx(
+    'w-full object-cover',
+    { 'rounded-md': item.rounded }
+  )} />
 )}
 
 { item.__typename.endsWith(BlockTypes.text) && ( 
-  <div class="prose max-w-none">
+  <div class='prose max-w-none px-6 py-4 text-inherit'>
     <RichText content={item.text} />
   </div>
 )}
@@ -64,7 +67,7 @@ const BlockTypes = {
 { item.__typename.endsWith(BlockTypes.quote) && ( 
   <div class={clsx(
     'flex flex-col relative h-full p-6 gap-6',
-    toTextClass(item.text_color),
+    item.text_color,
     toBorderClass(item.border_color)
   )}>
     <img src={item.icon} class='absolute top-4 left-4 w-12 h-12 opacity-20' />
@@ -83,7 +86,7 @@ const BlockTypes = {
     <img src={item.image} class='w-full h-full object-contain'/>
     { item.overlay && ( 
       <div class='absolute h-full w-full inset-0 bg-gradient-to-b to-black/60 p-6 flex flex-col justify-end'>
-        <h2 class='text-text-light text-[2.4rem] font-serif'>{ item.overlay }</h2>
+        <h2 class='text-text-inverse text-[2.4rem] font-serif'>{ item.overlay }</h2>
       </div> 
     )}
   </a>

src/apps/pages/sections/FeatureQuote.astro

@@ -26,7 +26,7 @@ const {
   class={clsx(
     'w-full relative flex flex-col justify-center items-center font-serif',
     toBackgroundClass(background),
-    toTextClass(text)
+    text
   )}
 >
   <Container className={clsx(

src/apps/pages/sections/MultiColumn.astro

@@ -3,6 +3,7 @@ import clsx from 'clsx';
 import _ from 'underscore';
 import LinkButton from '@components/LinkButton';
 import Column from '@apps/pages/sections/Column.astro';
+import { toBorderClass } from '@utils/pageBuilder';
 
 const { 
   buttonText,
@@ -34,7 +35,7 @@ const gridCols = total === TOTAL_COLUMNS ? 'lg:grid-cols-12' : 'lg:auto-cols-fr
   { title && (
     <h2
       class={clsx(
-        'text-4xl font-bold py-4',
+        'text-4xl font-bold py-8',
         { 'flex justify-center': textAlignment === 'center' }
       )}
     >
@@ -51,7 +52,13 @@ const gridCols = total === TOTAL_COLUMNS ? 'lg:grid-cols-12' : 'lg:auto-cols-fr
   >
     {
       _.map(content, (col: any) => ( 
-        <Column items={col.content} className={clsx({ [col.width] : total === TOTAL_COLUMNS })} />
+        <Column items={col.content} className={clsx(
+          { [col.width] : total === TOTAL_COLUMNS },
+          toBorderClass(col.border),
+          { 'rounded-md': col.rounded },
+          col.justify,
+          col.align
+        )} />
       ))
     }
   </div>

src/apps/pages/sections/SearchBar.tsx

@@ -22,14 +22,14 @@ const SearchBar = (props: SearchBarProps) => {
   }, [searchName, query, language]);
 
   return (
-    <div className='not-prose w-[840px] border rounded-md border-black text-black text-sm'>
+    <div className='not-prose w-[840px] border rounded-md border-black text-sm'>
       <form
         id='search-bar'
         className='relative flex flex-row items-center'
         onSubmit={onSubmit}
       >
         <input
-          className='py-4 pe-4 ps-13 w-[720px] h-full rounded-l-md bg-white'
+          className='py-4 pe-4 ps-13 w-[720px] h-full rounded-l-md bg-white text-black'
           type='text'
           name='query'
           placeholder={placeholder}
@@ -40,7 +40,7 @@ const SearchBar = (props: SearchBarProps) => {
         <button
           type='submit'
           name='submit'
-          className='w-30 h-full bg-black rounded-r-md py-4 px-6 flex justify-center items-center font-semibold text-white'
+          className='w-30 h-full bg-secondary rounded-r-md py-4 px-6 flex justify-center items-center font-semibold text-inherit'
         >
           {buttonText}
         </button>

src/components/Card.astro

@@ -1,11 +1,18 @@
 ---
-const { alt, date, dateOptions = {}, category, title, author, slug, imageUrl, blurb, t } = Astro.props;
+import clsx from "clsx";
+import { toBorderClass } from "@utils/pageBuilder";
+
+const { alt, border, date, dateOptions = {}, category, title, author, slug, imageUrl, blurb, t, rounded } = Astro.props;
 
 const dateString = date ? new Date(date).toLocaleDateString(undefined, dateOptions) : null;
 ---
 
 <article
-  class='flex max-w-xl flex-col items-start justify-between bg-neutral-light'
+  class={clsx(
+    'flex max-w-xl flex-col items-start justify-between bg-neutral-light',
+    { 'rounded-md': rounded },
+    toBorderClass(border)
+  )}
 >
   <div
     class='relative w-full'

src/components/LinkButton.tsx

@@ -1,9 +1,10 @@
 import clsx from 'clsx';
-import { ColorValues } from '@root/tina/content/pages';
 import { ArrowRightIcon } from '@heroicons/react/24/outline';
+import { toBackgroundClass, toBorderClass, toTextClass } from '@utils/pageBuilder';
 
 interface Props {
   arrow?: boolean;
+  border?: string;
   className?: string;
   color?: string;
   content: JSX.Element | string;
@@ -14,15 +15,10 @@ interface Props {
 const LinkButton = ({ className, content, href, ...props }: Props) => (
   <a
     className={clsx(
-      'inline-flex mt-4 rounded-md px-6 py-3 hover:bg-opacity-95 cursor-pointer flex-row gap-4 items-center no-underline mx-6',
-      { 'bg-primary': props.color === ColorValues.primary },
-      { 'bg-secondary': props.color === ColorValues.secondary },
-      { 'bg-white': props.color === ColorValues.white },
-      { 'bg-black': props.color === ColorValues.black },
-      { 'text-primary': props.text === ColorValues.primary },
-      { 'text-secondary': props.text === ColorValues.secondary },
-      { 'text-white': props.text === ColorValues.white },
-      { 'text-black': props.text === ColorValues.black },
+      'link-button inline-flex mt-4 rounded-md px-6 py-3 hover:bg-opacity-95 cursor-pointer flex-row gap-4 items-center no-underline',
+      toBackgroundClass(props.color),
+      toTextClass(props.text),
+      toBorderClass(props.border),
       className
     )}
     href={href}

src/components/Spacer.tsx

@@ -1,4 +1,5 @@
 import clsx from 'clsx';
+import { toBackgroundClass } from '../utils/pageBuilder';
 
 interface SpacerProps {
   size: string;
@@ -13,10 +14,7 @@ const Spacer = (props: SpacerProps) => (
       { 'my-4 lg:my-8': props.size === 'small' },
       { 'my-8 lg:my-16': props.size === 'medium' },
       { 'my-16 lg:my-32': props.size === 'large' },
-      { 'bg-primary': props.color === 'primary' },
-      { 'bg-secondary': props.color === 'secondary' },
-      { 'bg-white': props.color === 'white' },
-      { 'bg-black': props.color === 'black' }
+      toBackgroundClass(props.color)
     )}
   />
 );

src/layouts/Header.astro

@@ -14,13 +14,17 @@ const {
   image,
   imageAlt,
   items,
-  title
+  title,
+  transparent
 } = Astro.props;
 
 ---
 
 <div
-  class='flex flex-row justify-center w-full bg-primary'
+  class={clsx(
+    'flex flex-row justify-center w-full z-20 text-text-primary',
+    { 'bg-primary': !transparent }
+  )}
 >
   <div
     class={clsx(

src/layouts/Layout.astro

@@ -31,20 +31,35 @@ const { header, footer } = branding;
 
 const { font_header: fontHeader, font_body: fontBody } = branding;
 
-const colorPrimary = branding.primary_color;
-const textPrimary = useBlackText(colorPrimary) ? 'var(--color-black)' : 'var(--color-white)';
+//dark and light mode default text color
+const content = branding.content_color || 'var(--color-black)';
+const contentInverse = branding.content_inverse || 'var(--color-white)';
+const contentAlternate = branding.content_alternate || 'var(--color-neutral-dark)';
+const contentInverseAlternate = branding.content_inverse_alternate || 'var(--color-neutral-light)';
 
+const colorPrimary = branding.primary_color;
 const colorSecondary = branding.secondary_color;
-const textSecondary = !colorSecondary || useBlackText(colorSecondary) ? 'var(--color-black)' : 'var(--color-white)';
+const colorTertiary = branding.tertiary_color || 'var(--color-black)';
+
+//these are for use in layout components like header and footer
+const primaryContent = useBlackText(colorPrimary) ? content : contentInverse;
+const secondaryContent = !colorSecondary || useBlackText(colorSecondary) ? content : contentInverse;
+const tertiaryContent = !colorTertiary || useBlackText(colorTertiary) ? content : contentInverse;
 
 const colorLayout = branding.background_color || 'var(--color-white)';
+const layoutContent = !branding.background_color || useBlackText(branding.background_color) ? content : contentInverse;
+const layoutContentAlternate = !branding.background_color || useBlackText(branding.background_color) ? contentAlternate : contentInverseAlternate;
+
+const colorLayoutAlternate = branding.background_alternate || 'var(--color-neutral-light)';
+const layoutAlternateContent = !branding.background_alternate || useBlackText(branding.background_alternate) ? content : contentInverse;
+const layoutAlternateContentAlternate = !branding.background_alternate || useBlackText(branding.background_alternate) ? contentAlternate : contentInverseAlternate; //this naming scheme could be better....
 
 const currentLocale = Astro.currentLocale;
 const lang = getLanguageFromUrl(Astro.url.pathname);
 
 const pages = await getPages(currentLocale);
 
-const { footer: includeFooter, fullscreen, name, title, t, tab } = Astro.props;
+const { footer: includeFooter, fullscreen, name, title, t, tab, transparent } = Astro.props;
 
 const NavKeys = {
   gallery: 'gallery',
@@ -132,11 +147,20 @@ if (config.gallery) {
       define:vars={{
         customFontHeader: fontHeader,
         customFontBody: fontBody,
+        customLayout: colorLayout,
+        customLayoutAlternate: colorLayoutAlternate,
         customColorPrimary: colorPrimary,
         customColorSecondary: colorSecondary,
-        customTextPrimary: textPrimary,
-        customTextSecondary: textSecondary,
-        customColorLayout: colorLayout
+        customColorTertiary: colorTertiary,
+        customPrimaryContent: primaryContent,
+        customSecondaryContent: secondaryContent,
+        customTertiaryContent: tertiaryContent,
+        customContent: layoutContent,
+        customContentAlternate: layoutContentAlternate,
+        customAlternateContent: layoutAlternateContent,
+        customAlternateContentAlternate: layoutAlternateContentAlternate,
+        customText: content,
+        customTextInverse: contentInverse
       }}
     >
     </style>
@@ -153,6 +177,7 @@ if (config.gallery) {
       items={NavItems}
       pages={pages}
       title={header?.hide_title ? undefined : branding.title}
+      transparent={transparent}
     />
     <NotificationPanel
       client:only='react'

src/layouts/Page.astro

@@ -11,7 +11,9 @@ import { getTranslations } from '@backend/i18n';
 import { fetchPage } from '@backend/tina';
 import Container from '@components/Container.astro';
 import Layout from '@layouts/Layout.astro';
+import clsx from 'clsx';
 import _ from 'underscore';
+import { toBackgroundClass, toTextClass } from '@utils/pageBuilder';
 
 const { slug } = Astro.props;
 const locale = Astro.currentLocale;
@@ -38,10 +40,17 @@ const SectionTypes = {
   t={t}
   tab={page?._sys?.filename}
   title={page?.title}
+  transparent={page?.transparent}
 >
-  { _.map(page?.sections, section => (
+  { _.map(page?.sections, (section, idx) => (
     <section
-      class='relative'
+      class={clsx(
+        'page-builder',
+        'relative',
+        toBackgroundClass(section.background),
+        section.text,
+        { '-mt-20': page.transparent && idx === 0 }
+      )}
     >
       { section.__typename === SectionTypes.carousel && (
         <Container>
@@ -108,9 +117,9 @@ const SectionTypes = {
           background={section.background}
           buttonText={section.button_text}
           clip={section.clip}
-          color={section.color}
           content={section.content}
           darken={section.darken}
+          darkText={section.dark_text}
           fullWidth={section.full_width}
           height={section.height}
           image={section.background_image}